@charset "UTF-8";
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
制作者メモ



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*======================
       基本設計
========================*/
html{
 font-size: 62.5%;
}
body, p, ul, li, h1, h2, h3, h4{
 font-size: 1.6rem;
 color: #333;
 margin: 0;
 padding: 0;
 line-height: 1.6;
 font-family: "Helvetica Neue",
 Arial,
 "Hiragino Kaku Gothic ProN",
 "Hiragino Sans",
 Meiryo,
 sans-serif;
}
section{
 width: 100%;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 40px
}
body{
 background-color:#fff;
 background-image: url("/images/crier_bgimage.png");
 background-repeat: repeat;
}
html, body{
  overflow-x: hidden;
}
/*======================
       header領域
========================*/
.header{
 background-color:  #ffffff;
 height: 90px;
 width: 100%;
 position: fixed;
 top: 0;
 z-index: 10;
 box-shadow: 0 3px 6px rgba(175, 183, 253, 0.2);
}
.logo img{
 margin-top: 16px;
}

/*======================
       nav領域
========================*/
.pc-navi{
 display: none
}

/*======================
       container領域
========================*/
.container{
 padding: 40px 0;
}
/*-----------------------
     mainVideo
-----------------------*/
.mainVideo{
  margin-top: 100px;
  margin-bottom: 0;
  background-color: #fff;
  overflow: hidden;
}
.mainVideo video{
  display: block;
  width: 100%;
}
.videoFrame{
  width: 100%;
  aspect-ratio: 16 / 11;     
  overflow: hidden;           /* はみ出た黒帯を隠す */
  background: #fff;         /* 窓の下地（念のため） */
  border-radius: 20px;               
}
.videoFrame video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* 比率維持で“トリミング” */
  object-position: center;    /* 切り抜きの基準位置 */
}
.videoFrame{
  position: relative;
}
.soundBtn{
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 8px 14px;
  font-size: 1.2rem;
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 20px;
  cursor: pointer;
}
.video__title{
 font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;
 font-size: 1.4rem;
 font-weight:600; 
 letter-spacing:.02em;
 text-rendering:optimizeLegibility;
 color:#b993d6;
 text-shadow: #fff 5px 5px 10px;
 text-align: right;
 line-height: 1.7;
 }
.video__title .copy{
 margin-left:.5em;
 font-size:.9em;
 opacity:.8;
 padding-top:0 ;
 line-height: 1.7;
}
@supports (font-feature-settings: "palt") {
  .video__title{ font-feature-settings:"palt" 1,"kern"; }
}
/*-----------------------
     MainMessage
-----------------------*/
.mainMassege{
 background: #B993D6;  /* fallback for old browsers */
 background: -webkit-linear-gradient(to right, #8CA6DB, #B993D6);  /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to right, #8CA6DB, #B993D6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 box-shadow: silver 3px 3px 4px;
 border-radius: 1%;
 padding: 40px 40px 80px;
}
.mainMassege p{
 text-align: center;
}
/* 日本語見出し */
.lp-catch-jp{
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 3.6rem;
  letter-spacing: 0.06em;
  color: #fff;
}
/* 英語見出し */
.lp-catch-en{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 3.0rem;
  letter-spacing: 0.03em;
  color: #fff;
}
.mainMassege img{
 border-radius: 100rem ;
 margin-top: 88px;
 box-shadow: #feedff 3px 3px 5px;
}
.f-container01 img{
 margin-right: 40px;
}
.f-container02 img{
 margin-left: 40px;
}
.f-container01{
  display:flex; 
}
.f-container01{
 justify-content: center;
 align-items:center;
 }
 .shop_btn{
  font-size: 1.8rem;
 padding: 12px;
 color:#fff;
 background-color:#e54696;
 text-shadow: rgb(223, 223, 223) 2px 2px 3px;
 border:none;
 border-radius: 25rem;
 box-shadow: rgb(255, 219, 219) 2px 2px 3px;
 }
a:link{
 text-decoration: none;
}
a:hover{
 background-color: rgb(255, 146, 250);
}
.f-container02{
  display:flex; 
  margin-top:20px;
}
.f-container02{
 justify-content: center;
 align-items:center;
 }
/* ボタン＋説明文の箱（縦積み） */
.ctaBox{
  display: flex;
  flex-direction: column;
  align-items: center; /* 左揃え（中央にしたいなら center） */
  gap: 14px;               /* 説明文とボタンの間 */
  margin-left: 0px;       /* 画像との間隔（好みで） */
  padding-top: 24px;       /* ★ ボタン群を少し下へ */
}
/* 説明文 */
.productLead{
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
  margin: 0;
}
/* ボタンの段落の余白を消す */
.ctaBtn{
  margin: 0;
}
/* ======================
   winter infinite slide
====================== */
#winterSlide{
  margin: 40px 0 60px;
  padding: 20px 0;
  overflow: hidden;
  background: rgba(255,255,255,0.6); /* 雪の膜 */
}
#winterSlide img{
  width: 180px !important;
  height: auto !important;
  display: block;
}
.slideList{
  display: flex;
  align-items: center;
}
.slideList li{
  margin-right: 30px; /* 画像間余白 */
  list-style: none;
}
.slideList img{
  width: 180px;
  height: auto;
  border-radius: 14px;
  background: #fff;
  padding: 6px;               /* 白フチ（雪） */
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
/* ======================
   iOS Safari: infiniteslide の “豆粒化” 対策
====================== */

/* スライドの“動く層”と“中身”を分離して安定させる */
#winterSlide .slideList li{
  flex: 0 0 auto;
}

#winterSlide .slideList img{
  width: 180px;
  height: auto;
  display: block;
  transform: translateZ(0);       /* ★ iOS対策：3D層に乗せる */
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
}

/*-----------------------
       about
-----------------------*/
.about{
  background-color: #fff;
  text-align: center;
  border-radius: 1%;
  padding: 40px 40px 80px;
  box-shadow: 0 3px 6px rgba(175, 183, 253, 0.2);
 }

.brandHero{
  text-align: center;
  margin-top: 28px;     /* 見出し直下の余白 */
  margin-bottom: 24px;  /* 説明文へ落とす余白 */
}
.brandHero img{
  width: min(620px, 88vw);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 18px;  /* 角丸は世界観に合わせて */
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
.aboutLead{
  font-size: 1.8rem;
}
/* ふわっと出現（共通） */
.reveal{
  opacity: 0;
  transform: translate3d(0, 16px, 0); /* ★ iOSに強い */
  transition: transform 900ms ease, opacity 900ms ease;
  will-change: transform, opacity;
}

.reveal.is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 羽  */
.about01 img{
 border-radius: 100rem;
 margin-top: 88px;
}
.about01 img{
  border-radius: 100rem;
  margin-top: 88px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.12));
}

.floaty{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.12));
}
.floaty.is-inview{
  animation: floaty 6.5s ease-in-out infinite;
}

@keyframes floaty{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.symbolCatch{
 margin: 40px 0 56px;
}


.about .f-container01{
 margin-bottom: 16px;
}

/* 画像：共通 */
.symbol img{
  display: block;
  height: auto;
  border-radius: 16px;
}
/* ========= メイン ========= */
.symbol--main img{
 width: 300px;
 }
.expBox--main{
  max-width: 560px;     /* 説明欄を大きく */
  text-align: left;
}
.symbolTitle{
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.35;
  color: #816ff8;
  margin: 0 0 12px;
}
.expBox--main p{
  font-size: 1.6rem;
  line-height: 1.9;
  margin: 0;
}
.symbolRow--main{
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.28);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* ======================
   サブシンボル Grid
====================== */
.symbolGrid--sub{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC：2列 */
  gap: 32px 24px;
  margin-top: 40px;
}

/* 各アイテム */
.symbolItem{
  text-align: center;
}

/* 画像サイズ */
.symbolItem img{
  width: 180px;
  height: auto;
  border-radius: 14px;
  margin-bottom: 12px;
}

/* 見出し（小） */
.symbolSubTitle{
  font-family: 'Noto Serif JP', serif;
  font-size: 1.8rem;   /* 18px */
  color: #816ff8;
  margin: 0 0 6px;
}

/* 説明文（短く） */
.symbolSubText{
  font-size: 1.4rem;   /* 14px */
  line-height: 1.7;
  margin: 0;
  color: #555;
}


.expBox p + p{ /* 段落間だけ余白 */
 margin-top: 1em;
 } 


/* 見出し＋説明文の箱（縦積み） */
.expBox{
  display: flex;
  flex-direction: column;
  align-items: left; /* 左揃え（中央にしたいなら center） */
  gap: 14px;               /* 見出しと説明文の間 */
  margin-left: 0px;       /* 画像との間隔 */
  text-align: left;
  margin-bottom: 20px;
}
/* 見出しの装飾 */
/* 反射を確実に出す（symbolTitleに直付け） */
.symbolTitle{
  margin-bottom: 1.9rem;
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
  position: relative;
  color: #3a4eff;
  font-size: 2.6rem;
  line-height: 1.4;
  -webkit-box-reflect: below -10px
    -webkit-linear-gradient(top,
      rgba(0,0,0,0),
      rgba(0,0,0,0) 10%,
      rgba(0,0,0,0.3)
    );
}
/* 横揺れ防止の保険 */
img, video{
  max-width: 100%;
  height: auto;
}
/* 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal{
    transition: none;
    transform: none;
    opacity: 1;
  }
  .floaty.is-inview{
    animation: none;
  }
}



/*======================
       footer領域
========================*/
.footer{
 background-color:  #2c55ff;
 height: 200px
}
.copyright{
 font-size: 1.0rem;
 color: #fff;
 text-align: center;
 padding-top: 170px;
 padding-bottom: 10px;
 font-weight: bold
}


/* ======================
      SP
====================== */
@media screen and (max-width: 767px){/* 767pxまでを一般的なスマホとして想定*/
/*-----------------------
     MainMessage
-----------------------*/
.f-container01 { 
 flex-direction:
 column;
}

.f-container02{
 flex-direction: column-reverse;
}
.f-container02 img{
 margin-left: 0px;
}


 .shop_btn{
  margin-top: 16px;
}
.ctaBox{
    margin-left: 0;
    align-items: center;
    text-align: center;
    padding-top: 12px;
}

/* ======================
   winter infinite slide
====================== */
.slideList img{
  width: 120px;
}
.slideList li{
  margin-right: 16px;
}
#winterSlide img{
width: 120px !important;
}
#winterSlide .slideList img{
width: 120px;
}

/* ======================
     mainMassege
====================== */

.lp-catch-jp,.lp-catch-en{
  font-size: 2.4rem;
}


/* ======================
      about
====================== */
.brandHero{ margin-top: 20px; margin-bottom: 18px; }
.brandHero img{ width: min(420px, 92vw); border-radius: 16px;
}
.symbol img{
 margin-right: 0px;
}
.expBox h3 {
 font-size: 1.8rem;
}

.symbolRow{
 flex-direction: column;
 align-items: center;
 gap: 16px;
 margin: 28px 0;
}
.expBox--main,
.expBox--sub{
 max-width: 92%;
 }

.symbol--main img{
 width: min(300px, 86vw);
 }

/* ===== SP：1列×4行 ===== */
.symbolGrid--sub{
 grid-template-columns: 1fr; /* 1列 */
 gap: 24px;
 }

.symbolItem img{
 width: 140px;
} 

}




/* ======================
      Tablet
====================== */
@media screen and (min-width: 768px){ /* 768px➙ipadmini*/

}
/* ======================
     PC
====================== */
@media screen and (min-width: 1224px){/* 1024px➙ipadpro*/
.headerInner, .container, .footerInner{
 width: 1200px;
 margin-right: auto;
 margin-left: auto;
}
.mainVideo{
 width: 960px;
 margin-right: auto;
 margin-left: auto;

}
}