/* ============================================================
   index.css
   トップページ専用パーツ（ヒーロー/イントロ/違いセクション/
   商品カルーセル）
   ============================================================ */

/* ---------- which ---------- */
.which{
  position:relative;
  padding:22px 16px 36px;
}
.which::after {
  content:"";
  display:block;
  width:100%;
  height:calc(100% + 150px);
  background:#8f2a2b url('../imgs/bg_rd.png') repeat-y top center;
  background-size:100% auto;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
}
.ttl-center {
  width:100%;
  max-width:300px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.which-teasers{
  position:relative;
  display:flex;
  /*gap:14px;*/
  /*margin-top:-6px;*/
}
.teaser{ padding-top:26px; flex:1; position:relative; z-index:2; }
.teaser-b{ margin-top:19%; }

.teaser-tag{
  position:absolute;
  top:0;
  z-index:3;
  width:19%;
}
.teaser-a .teaser-tag{ left:0; }
.teaser-b .teaser-tag{ left:auto; right:0; width:19%; }

.teaser-photo{ width:100%; }
.teaser-caption{
  width:82%;
  margin:0 auto;
  position:relative;
  top:-50px;
  z-index:2;
}
/*.teaser-a .teaser-caption{ margin-left:8%; }
.teaser-b .teaser-caption{ margin-left:4%; }*/

.teaser-deco-chestnut{
  position:absolute;
  width:32%;
  top:-3%;
  left:58%;
  z-index:4;
}
.teaser-deco-leaf{
  position:absolute;
  width:61.6%;
  top:75%;
  left:5%;
  z-index:1;
}

.which-statement{
  color:#fff;
  text-align:center;
  line-height:1.9;
  padding:0 4px;
  position:relative;
  z-index:1;
}
.which-statement span {
  display:inline-block;
}
.which-statement span.midtxt {
  font-size:20px;
}

/* ---------- INTRO ---------- */
.intro-wrap{ background:#452b16; padding:0 0 8px; }
.intro-blob{
  background-image:url('../imgs/bg_kuri.png');
  background-size:100% auto;
  background-repeat:no-repeat;
  padding: 110px 20px 100px;
  text-align:center;
  font-size:13.5px;
  line-height:2.05;
  color:#452b16;
  margin-top:-8px;
  position:relative;
}
.intro-txt {
  
}
.intro-wrap .deco-chestnut.icon-deco1 {
  position:absolute;
  top:8%;
  right:5%;
  width:89px;
  z-index:1;
}
.intro-wrap .deco-chestnut.icon-deco2 {
  position:absolute;
  top:82%;
  left:5%;
  width:89px;
  z-index:1;
}


/* ---------- DIFFERENCE ---------- */
.diff-section{ background:#452b16; padding:30px 0 44px; text-align:center; }
.diff_in {
  padding:0 20px;
}
.diff-label{ width:62px; margin:0 auto 10px; }
.diff-section .diff-ttl { color:#fff; font-size:21px; margin:0 0 8px; }
.diff-section .ttl-sub{ color:#fff; font-size:13px; text-align:center; margin-bottom:30px; }

.arch-feature{ position:relative; margin:0 auto 22px; max-width:380px; }
.arch-feature .arch-tag{ position:absolute; top:-18px; left:0; z-index:2; width:48px; }
.arch-feature img.arch-photo{ width:100%; border-radius:0 0 6px 6px; }

.diff-section .feat_txt{
  color:#fff; font-size:13px; line-height:1.95;
  text-align:left;
  max-width:332px;
  margin:0 auto 30px;
}

.telop_bg {
    width: auto;
    height: 7px;
    background: url(../imgs/telop.svg) 0 0 repeat-x;
    background-size: auto 100%;
    will-change: transform;
    animation: slide_img 180s linear infinite;
    margin-bottom:30px;
}

@keyframes slide_img {
  100% {
    background-position: -5000px 0;
  }
}


/* ---------- 商品カルーセル（slick） ---------- */
.slide_list{
  margin:22px -20px 0;
  padding:0 0 8px;
}
/* slick初期化前(JS読み込み前・失敗時)のフォールバック表示 */
.slide_list:not(.slick-initialized){
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0 32px 8px;
  -webkit-overflow-scrolling:touch;
}
.slide_list:not(.slick-initialized) .list-item{ flex:0 0 58%; }

.list-item{ position:relative; padding:20px 9px 0; }
.item-img{ padding-top:18px;position:relative; }
.item-img .slide-tag{ position:absolute; top:0; left:-1px; z-index:2; width:48px; }
.item-name{ margin:0; }
.item-name .slide-photo{ width:100%; }

.item-txt{
  margin-top:14px;
  color:#efe6d2;
  font-size:12.5px;
  line-height:1.85;
  text-align:left;
  padding:0 3px;
}

/* slickのスライド間の余白・センター表示調整（centerPaddingの値はjs/index.js側で指定） */
.slide_list .slick-track{ display:flex; align-items:flex-start; }
.slide_list .slick-slide{ opacity:0.45; transition:opacity 0.3s; }
.slide_list .slick-slide.slick-center{ opacity:1; }


/*cta-section*/
.cta-card .card-ttl { font-size:21px; line-height:1.5; margin:0 0 4px;  }
.cta-card .card-ttl_en { display:block;  font-size:17px; margin-bottom:14px; }
.cta-card .cta-icon{ max-width:210px; width:80%; margin:6px auto 18px; }
.cta-row{ display:flex; align-items:center; gap:9px; text-align:left; margin-top:8px; width: 100%; }
.cta-row .row-txt{ flex:1; font-size:13px; line-height:1.75; margin:0;  }
.cta-btn{
  width:46px; height:46px;
}


@media screen and (max-width: 480px) {
.intro-txt {
    line-height:1.75;
}

}