/**
@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:	http://
 * File name: gallete.css
 * Summary:	 ページ・コンテンツごとの固有スタイル
 * Author:		CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1     xxx
 *
 * ===============================================================
*/

/** =1
 * ========================================
 * base
 * ========================================
 */


#main {
  text-align: center;
  height: 100%;
  font-size: 62.5%;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
/*  box-sizing: border-box; */
  box-sizing: content-box;
  color: #000000;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 2;
}

.l-main {
  padding-bottom: 180px;
  padding-top: 200px;
  position: relative;
}

@media screen and (max-width: 767px) {
  #main {
    overflow: hidden;
  }
  .l-main {
    padding-top: 30%;
    padding-bottom: 0px;
  }
  .spTxtCenter {
    text-align: center;
  }
}

#main .en {
  font-family: "Bona Nova", serif;
}

.l-inner {
  padding-right: 4%;
  padding-left: 4%;
  max-width: 1040px;
  width: auto;
  margin: 0;
  padding : 0;
  margin-right: auto;       /* 追加 */
  margin-left: auto;        /* 追加 */
}

@media (max-width: 767px)   /* 追加 */
.l-inner {
    margin-right: 5%;
    margin-left: 5%;
}

a {
  text-decoration: none !important;
  color: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  margin: 0;                /* 追加 */
  padding: 0;               /* 追加 */
  border: none;             /* 追加 */
  background: transparent;  /* 追加 */
  outline: none;            /* 追加 */
}

.w100per {
  width: 100%;
}

.fwNormal {
  font-weight: normal;
}
.fw300 {
  font-weight: 300;
}
.fw400 {
  font-weight: 400;
}
.fw500 {
  font-weight: 500;
}
.fw600 {
  font-weight: 600;
}
strong,
.strong,
.fwBold,
.fw700 {
  font-weight: 700;
}
.fw900 {
  font-weight: 900;
}

.fcMain {
  color: #172a88;
}

.fcWhite {
  color: #fff;
}

.fs0 {
  font-size: 0;
}
.fs9 {
  font-size: 1rem;
  transform: scale(0.9);
  transform-origin: center left;
  line-height: 1.6666;
}
.fs10 {
  font-size: 1rem;
}
.fs11 {
  font-size: 1.1rem;
}
.fs12 {
  font-size: 1.2rem;
}
.fs13 {
  font-size: 1.3rem;
}
.fs14 {
  font-size: 1.4rem;
}
.fs15 {
  font-size: 1.5rem;
}
.fs16 {
  font-size: 1.6rem;
}
.fs18 {
  font-size: 1.8rem;
}
.fs20 {
  font-size: 2rem;
}
.fs22 {
  font-size: 2.2rem;
}
.fs23 {
  font-size: 2.3rem;
}
.fs24 {
  font-size: 2.4rem;
}
.fs25 {
  font-size: 2.5rem;
}
.fs26 {
  font-size: 2.6rem;
}
.fs28 {
  font-size: 2.8rem;
}
.fs30 {
  font-size: 3rem;
}
.fs31 {
  font-size: 3.1rem;
}
.fs32 {
  font-size: 3.2rem;
}
.fs36 {
  font-size: 3.6rem;
}
.fs38 {
  font-size: 3.8rem;
}
.fs40 {
  font-size: 4rem;
}
.fs48 {
  font-size: 4.8rem;
}
.fs50 {
  font-size: 5rem;
}
.fs52 {
  font-size: 5.2rem;
}

.fs60per {
  font-size: 60%;
}
.fs70per {
  font-size: 70%;
}
.fs80per {
  font-size: 80%;
}
.fs150per {
  font-size: 150%;
}

.lh10 {
  line-height: 1;
}
.lh12 {
  line-height: 1.2;
}
.lh14 {
  line-height: 1.4;
}
.lh15 {
  line-height: 1.5;
}
.lh16 {
  line-height: 1.6;
}
.lh17 {
  line-height: 1.7;
}
.lh18 {
  line-height: 1.8;
}
.lh19 {
  line-height: 1.9;
}
.lh20 {
  line-height: 2;
}
.lh22 {
  line-height: 2.2;
}
.lh30 {
  line-height: 3;
}
.ls02 {
  letter-spacing: 0.02em;
}
.ls03 {
  letter-spacing: 0.03em;
}
.ls04 {
  letter-spacing: 0.04em;
}
.ls05 {
  letter-spacing: 0.05em;
}
.ls10 {
  letter-spacing: 0.1em;
}
.ls12 {
  letter-spacing: 0.12em;
}
.ls13 {
  letter-spacing: 0.13em;
}
.ls15 {
  letter-spacing: 0.15em;
}
.ls20 {
  letter-spacing: 0.2em;
}
.ls-025 {
  letter-spacing: -0.025em;
}
.ls-05 {
  letter-spacing: -0.05em;
}
.ls-10 {
  letter-spacing: -0.1em;
}
.ls-20 {
  letter-spacing: -0.2em;
}

@media screen and (max-width: 768px) {
  .spFs10 {
    font-size: 1rem;
  }
  .spFs11 {
    font-size: 1.1rem;
  }
  .spFs12 {
    font-size: 1.2rem;
  }
  .spFs13 {
    font-size: 1.3rem;
  }
  .spFs14 {
    font-size: 1.4rem;
  }
  .spFs15 {
    font-size: 1.5rem;
  }
  .spFs16 {
    font-size: 1.6rem;
  }
  .spFs17 {
    font-size: 1.7rem;
  }
  .spFs18 {
    font-size: 1.8rem;
  }
  .spFs20 {
    font-size: 2rem;
  }
  .spFs22 {
    font-size: 2.2rem;
  }
  .spFs23 {
    font-size: 2.3rem;
  }
  .spFs24 {
    font-size: 2.4rem;
  }
  .spFs26 {
    font-size: 2.6rem;
  }
  .spFs28 {
    font-size: 2.8rem;
  }
  .spFs30 {
    font-size: 3rem;
  }
  .spFs32 {
    font-size: 3.2rem;
  }
  .spFs36 {
    font-size: 3.6rem;
  }
  .spFs40 {
    font-size: 4rem;
  }

  .spls10 {
    letter-spacing: 0.1em;
  }
}
.mb5 {
  margin-bottom: 5px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {                     /* 追加 */
  margin-bottom: 30px;
}

.mb50 {                     /* 追加 */
  margin-bottom: 50px;
}

.mb65 {
  margin-bottom: 65px;
}

.mb80 {                    /* 追加 */
  margin-bottom: 80px;
}

.mb100 {                    /* 追加 */
  margin-bottom: 100px;
}

.mb150 {                    /* 追加 */
  margin-bottom: 150px;
}

.mb160 {
  margin-bottom: 160px;
}

.mb200 {
  margin-bottom: 200px;
}

.pt160 {
  padding-top: 160px;
}

@media screen and (max-width: 768px) {
  .spMb0 {
    margin-bottom: 0;
  }
  .spMb5 {
    margin-bottom: 5px;
  }
  .spMb10 {
    margin-bottom: 10px;
  }
  .spMb15 {
    margin-bottom: 15px;
  }
  .spMb20 {
    margin-bottom: 20px;
  }
  .spMb25 {
    margin-bottom: 25px;
  }
  .spMb30 {
    margin-bottom: 30px;
  }
  .spMb40 {
    margin-bottom: 40px;
  }
  .spMb45 {
    margin-bottom: 45px;
  }
  .spMb50 {
    margin-bottom: 50px;
  }
  .spMb60 {
    margin-bottom: 60px;
  }
  .spMb70 {
    margin-bottom: 70px;
  }
  .spMb75 {
    margin-bottom: 75px;
  }
  .spMb80 {
    margin-bottom: 80px;
  }
  .spMb90 {
    margin-bottom: 90px;
  }
  .spMb100 {
    margin-bottom: 100px;
  }
  .spMb110 {
    margin-bottom: 110px;
  }
  .spMb120 {
    margin-bottom: 120px;
  }
  .spMb150 {
    margin-bottom: 150px;
  }
  .spPt80{
    padding-top: 80px;
  }
}

.txtLeft {                  /*　追加 */
  text-align: left;
}
.txtCenter {                /*　追加 */
  text-align: center;
}
.txtRight {                 /*　追加 */
  text-align: right;
}


.no-touch a[href^="tel:"] {
  pointer-events: none;
  cursor: default;
}

.lineTop {
  padding-bottom: 20px;
  width: 100%;
}

.lineBottom {
  padding-top: 25px;
  width: 100%;
}

.bgBlue {
  background-color: #f0f7fc;
}

.bgWhite {
  background-color: #fff;
}

.no-touch a.alpha {
  transition: opacity 300ms ease-in-out;
}

.no-touch a.alpha:hover {
  opacity: 0.8;
}

/** =2
 * ========================================
 * module
 * ========================================
 */

/** =3
 * ========================================
 * content
 * ========================================
 */
/* mv */
.mvWrap {
  /* padding-top: 50px; */

  /* margin-bottom: 70px;
  width: 100%;
  display: block; */
}

.mvWrap .l-inner {
  padding-right: 0%;
  padding-left: 0%;
}

.mvLogo {
  max-width: 200px;
  position: absolute;
  z-index: 10;
  transform: translateX(-50%);
  top: calc(-120 / 512 * 100%);
  left: 50%;
}

@media screen and (max-width: 767px) {
  .mvLogo {
    max-width: 150px;
    /* top: 30%; */
  }
}

.mvIllustItem01 {
  max-width: 250px;
  position: absolute;
  z-index: 10;
  top: calc(50 / 512 * 100%);
  right: calc(-190 / 512 * 100%);
}

.mvIllustItem02 {
  max-width: 337px;
  position: absolute;
  z-index: 10;
  bottom: calc(50 / 512 * 100%);
  left: calc(-210 / 512 * 100%);
}

@media screen and (max-width: 768px) {
  .mvIllustItem01 {
    max-width: 200px;
    position: absolute;
    z-index: 10;
    top: calc(50 / 512 * 100%);
    right: calc(-110 / 512 * 100%);
  }

  .mvIllustItem02 {
    max-width: 250px;
    position: absolute;
    z-index: 10;
    bottom: calc(-10 / 512 * 100%);
    left: calc(-50 / 512 * 100%);
  }
}

@media screen and (max-width: 600px) {
  .mvIllustItem01 {
    max-width: 167px;
    top: calc(40 / 512 * 100%);
    right: calc(-170 / 512 * 100%);
  }

  .mvIllustItem02 {
    max-width: 210px;
    bottom: calc(-60 / 512 * 100%);
    left: calc(-80 / 512 * 100%);
  }
}

.mvWrap {
  position: relative;
  max-width: 512px;
  height: 512px;
  margin: 0 auto 65px;
  z-index: 1;
}
@media screen and (max-width: 600px) {
  .mvWrap {
    max-width: 320px;
    height: 320px;
  }
}

.mvItemImage {
  max-width: 512px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 600px) {
  .mvItemImage {
    max-width: 320px;
  }
}

.mvItemImage {
  animation: change-img-anim 12s infinite;
  opacity: 1;
}
.mvItemImage:nth-of-type(1) {
  animation-delay: 0s;
  z-index: 1;
}
.mvItemImage:nth-of-type(2) {
  animation-delay: 6s;
  z-index: 0;
}
@keyframes change-img-anim {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.mvStripeBg {
  width: 100vw;
  height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background-image: url(../src/pc/image/special/gallete/pattern_item.svg);
  background-repeat: repeat;
  background-size: 30px;
}
@media screen and (max-width: 600px) {
  .mvStripeBg {
    height: 200px;
  }
}

.footerMvStripeBg {
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 768px) {
  .footerMvStripeBg {
    min-width: 1260px;
  }
}

.galleteIntroArea {             /* 追加 */
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

dd {                            /*　追加 */
  margin: 0;   
}

dd ul {                         /*　追加 */
  padding: 0;   
}

figure {                        /*　追加 */
  margin: 0;   
}

.goodsTitle {
  margin-bottom: 50px;
}

.goodsIntroArea {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
}
.goodsImage {
  max-width: 248px;
}

.shopLinkArea {
  display: flex;
  gap: 8px;
}

.btnList {
  display: flex;
  padding: 0;           /* 追加 */
  align-items: center;
  gap: 8px;
  list-style: none; /* 追加 */
}

.btnListItem {
  margin-top: 0;
  color: #fff;
  font-size: 80%;      /* 追加 */
}
.btnListItem a {
  background-color: #172a88;
  border-radius: 3px;
  padding: 5px 20px 5px 10px;
  display: flex;
  align-items: center;
}

.introArea {
  display: flex;
  align-items: center;
  gap: 64px;
}
@media screen and (max-width: 767px) {
  .goodsIntroArea {
    display: block;
  }
  .goodsIntroArea dl {
    max-width: 248px;
    margin: 0 auto;
  }
  .goodsIntroArea dt,
  .goodsIntroArea dd {
    text-align: center;
  }

  .introArea {
    display: block;
  }
  .goodsImage {
    margin: 0 auto 30px;
  }
}
.introLogo {
  max-width: 400px;
  flex-shrink: 0;
}

.featuresImgArea {
  display: flex;
  align-items: center;
  gap: 80px;
}
@media screen and (max-width: 767px) {
  .introLogo {
    margin: 0 auto 30px;
    width: 80%;
  }
  .featuresImgArea {
    display: block;
  }
}
.featureCommentArea {
  display: flex;
  gap: 30px;
}
.featureCommentItem {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .featureCommentArea {
    flex-direction: column;
  }
  .featureCommentItem {
    width: 100%;
  }
}

.featureSaltArea {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .featureSaltArea {
    display: block;
  }
}

a.shopBtn {
  background-color: #172a88;
  color: #fff;
  border-radius: 999px;
  padding: 22px 40px 22px 40px;
  display: inline-block;
  align-items: center;
  position: sticky;
  z-index: 100;
  bottom: 184px;

  opacity: 1; /* 0 --> 1 */
  transition: all 0.4s ease-out !important;
}

/* 変更
.is-scrolled .shopBtn {
  opacity: 1;
}
*/

.shopBtn {
  opacity: 1;
}

/*
body.is-cookieArrowHidden a.shopBtn {
  bottom: 24px;
}
*/

a.shopBtn {
  bottom: 24px;
}

a.shopBtnSp {
  display: none;
}
@media screen and (max-width: 767px) {
  a.shopBtn {
    background-color: #172a88;
    color: #fff;
    border-radius: 999px;
    padding: 22px 40px 22px 40px;
    position: relative;
  }
  a.shopBtnSp {
    display: block;
    background-color: #172a88;
    color: #fff;
    border-radius: 999px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    /* padding: 13px; */
    position: fixed;
    z-index: 100;
    bottom: 180px;
    right: 10px;
    line-height: 1.6;
    /* transition: all 1.0s fade-out!important; */
    animation: fadeout-anim 15s linear forwards;
    height: 235px;
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s ease-out !important;
  }
/* 変更
  body.is-cookieArrowHidden a.shopBtnSp {
    bottom: 70px;
  }
*/
    
  a.shopBtnSp {
    bottom: 70px;
  }

  a.shopBtnSp .bagIcon {
    position: absolute;
    top: 18px;
    left: 14px;
  }

  a.shopBtnSp .btnTxt {
    position: absolute;
    top: 45px;
    left: 14px;
  }

/* 削除?
  a.shopBtnSp.is-short .btnTxt {
    opacity: 0;
    transition: 1s;
  }
*/
  a.shopBtnSp .btnTxt {
    opacity: 0;
    transition: 1s;
  }

/* 削除
  a.shopBtnSp.is-short {
    height: 50px;
    width: 50px;
    / transition: height 1.0s; /
    transition: 1s;
  }
*/
  a.shopBtnSp {
    height: 50px;
    width: 50px;
    /* transition: height 1.0s; */
    transition: 1s;
  }

/*
  a.shopBtnSp.is-short .bagIcon {
    top: 12px;
  }
*/
  a.shopBtnSp .bagIcon {
    top: 12px;
  }

  .bagIcon {
    margin-right: 0 !important;
    transform: translate(0) !important;
  }
  .btnTxt {
    padding-top: 5px;
  }

  /* .fadeOut {
    animation-name: fadeout;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }
  @keyframes fadeout {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(20px);
    }
  } */
}

.bgArea {
  padding: 120px 0;
  border-radius: 60px;
}

.featuresTxt {
  max-width: 480px;
}

.featureCommentArea {
  padding: 40px 48px;
  border-radius: 30px;
}

@media screen and (max-width: 767px) {
  .featuresTxt {
    max-width: 100%;
  }
  .bgArea {
    padding: 80px 0;
    border-radius: 30px;
  }
  .featureCommentArea {
    padding: 40px 7%;
    border-radius: 20px;
  }
}

.featureCommentCross {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  max-width: 32px;
}

@media screen and (max-width: 767px) {
  .featureCommentCross {
    margin: 0 auto;
  }
}

.logoArea {
  max-width: 200px;
  margin: 0 auto 64px;
}
.tellIcon {
  margin-right: 14px;
}
.bagIcon {
  margin-right: 16px;
  transform: translateY(-0.25em);
  display: inline-block;
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}