@charset "utf-8";

/* =========================================================
   KIHACHI Feature Template v3
   シンプル / 白背景 / 余白重視
   ========================================================= */

:root{
  --page-width:1000px;
  --tabs-sticky-height:80px;
  --ink:#252525;
  --sub:#747474;
  --line:#e4e1dd;
  --paper:#fff;
  --soft:#f7f5f2;
  --vd:#5e342f;
  --vd-soft:#efe7e3;
  --lisa:#d9006a;
  --lisa-title:#a90052;
  --lisa-soft:#fbe9f1;
  --common:#333;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  overflow-x:clip;
}
body{
  margin:0;
  overflow-x:clip;
  background:#fff;
  color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  line-height:1.75;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;}
.page{
  width:min(100%,var(--page-width));
  margin:0 auto;
  background:var(--paper);
  overflow:visible;
}
.prototype-note{
  margin:0 auto;
  max-width:var(--page-width);
  padding:8px 14px;
  background:#2d2d2d;
  color:#fff;
  font-size:11px;
  text-align:center;
  letter-spacing:.04em;
}

/* ---------- FV ---------- */
.fv{
  position:relative;
  min-height:600px;
  height:68vh;
  max-height:760px;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
}
.fv-photo{
  position:absolute;
  inset:0;
  opacity:0;
  background-size:cover;
  background-position:center;
  transition:opacity .45s ease;
}
.fv-photo.is-active{opacity:1;}
.fv-photo-vd{background-image:url("../images/fv_vd.svg");}
.fv-photo-lisa{background-image:url("../images/fv_lisa.svg");}
.fv::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}
.fv-lockup{
  position:relative;
  z-index:1;
  max-width:680px;
  padding:50px 24px;
  color:#fff;
}
.fv-eyebrow{
  margin:0 0 12px;
  font-size:11px;
  letter-spacing:.24em;
}
.fv h1{
  margin:0 0 18px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
  font-size:clamp(30px,5vw,48px);
  letter-spacing:.08em;
}
.fv-lead{
  margin:0;
  font-size:14px;
}

/* ---------- main tabs ---------- */
.tabs{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.tab{
  flex:1;
  appearance:none;
  border:0;
  border-bottom:3px solid transparent;
  background:#fff;
  color:#777;
  padding:16px 8px 13px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.05em;
}
.tab small{
  display:block;
  margin-top:2px;
  font-size:10px;
  font-weight:400;
  color:#999;
}
.tab.is-active{
  color:#222;
  border-bottom-color:var(--vd);
}
html[data-theme="lisa"] .tab.is-active{border-bottom-color:var(--lisa);}

.tabs,
.subnav{
  isolation:isolate;
}

.tabs::before,
.subnav::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#fff;
  z-index:-1;
}

/* ---------- panels / heads ---------- */
/*
  active panel / main の箱をなくして、subnav の sticky 範囲を .page 全体まで広げる。
  DOM上の位置は変えないので、subnav の表示開始位置はこれまで通り section-head の直後。
  そのままランキング〜価格で選ぶまで追従する。
*/
#tab-content{display:contents;}
.panel{background:#fff;}
.panel.is-active{display:contents;}
.panel[hidden]{display:none;}
.section-head,
.common-head{
  text-align:center;
  padding:54px 24px 16px;
}
.section-label,
.common-head>span{
  display:inline-block;
  font-size:10px;
  letter-spacing:.2em;
  padding:4px 10px;
  border:1px solid currentColor;
  margin-bottom:12px;
}
.section-head h2,
.common-head h2{
  margin:0 0 8px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
  font-size:clamp(24px,3vw,32px);
  letter-spacing:.06em;
}
.section-head p,
.common-head p{
  margin:0;
  color:var(--sub);
  font-size:13px;
}

/* ---------- subnav ---------- */
.subnav{
  position:sticky;
  top:var(--tabs-sticky-height);
  z-index:29;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:8px 24px;
  background:#fff;
  /*box-shadow:0 5px 16px rgba(0,0,0,.06);*/
}
.subnav a{
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  border:1px solid currentColor;
  background:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  transition:opacity .25s ease;
}
#panel-vd .subnav a{
  color:#fff;
  background:var(--vd);
  border-color:var(--vd);
}
#panel-lisa .subnav a{
  color:#fff;
  background:var(--lisa);
  border-color:var(--lisa);
}
.subnav a:hover{opacity:.8;}
/* .subnav a::after{
  content:"↓";
  margin-left:8px;
  font-size:10px;
  opacity:.55;
}*/

/* ---------- VD ---------- */
.category-section{
  padding:34px 24px 44px;
  scroll-margin-top:80px;
}
.category-section + .category-section{
  border-top:1px solid var(--line);
}
.category-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}
.category-title h3{
  margin:0;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
  font-size:26px;
}


/* VD：大=1列リッチ / 小=2列。order順に同じグリッド内へ配置 */
.vd-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.product-card{
  border:1px solid var(--line);
  background:#fff;
}

.product-image{
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
}
.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-body{
  padding:16px 16px 18px;
}
.product-body h4,
.price-card h3{
  margin:8px 0 4px;
  font-size:15px;
  line-height:1.6;
}

.product-name-pc,
.product-name-sp{
  white-space:pre-line;
}
.product-name-pc{display:block;}
.product-name-sp{display:none;}

#panel-vd .product-body h4{color:var(--vd);}
#panel-lisa .lisa-copy h3{color:var(--lisa-title);}

.product-price{
  margin:0;
  font-weight:700;
  font-size:14px;
}

/*
  この特集では価格を非表示。
  HTMLの data-hide-prices="true" を外せば、別特集で価格表示をそのまま復活できます。
*/
html[data-hide-prices="true"] .product-price{
  display:none !important;
}
.product-description{
  margin:10px 0 0;
  color:var(--sub);
  font-size:14px;
  line-height:1.75;
}

/* VD 大：リサのような横長リッチカード */
.vd-card.is-large{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  align-items:center;
  gap:0;
  background:var(--soft);
}
.vd-card.is-large .product-image{
  aspect-ratio:1/1;
}
.vd-card.is-large .product-body{
  padding:34px 40px;
}
.vd-card.is-large .product-body h4{
  margin:0 0 10px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
  font-size:24px;
  line-height:1.55;
  letter-spacing:.03em;
}
.vd-card.is-large .product-price{
  margin:0 0 10px;
}
.vd-card.is-large .text-link{
  margin-top:20px;
}
.vd-card.is-large.is-reverse{
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
}
.vd-card.is-large.is-reverse .product-image{order:2;}
.vd-card.is-large.is-reverse .product-body{order:1;}

/* VD 小：通常の2列カード */
.vd-card.is-small{
  min-width:0;
}
.product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.product-tags span{
  display:inline-block;
  padding:3px 7px;
  border:1px solid #b7b0aa;
  background:#fff;
  font-size:9px;
  line-height:1.4;
}

/* ---------- Lisa 1列 rich ---------- */
.lisa-products{
  padding:22px 24px 34px;
}
.lisa-card{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  align-items:center;
  gap:40px;
  padding:48px 0;
  border-bottom:1px solid var(--line);
}
.lisa-card:first-child{border-top:1px solid var(--line);}
.lisa-card.is-reverse{
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
}
.lisa-card.is-reverse .lisa-image{order:2;}
.lisa-card.is-reverse .lisa-copy{order:1;}
.lisa-image{
  display:block;
  overflow:hidden;
}
.lisa-image img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.lisa-copy{
  padding:10px 6px;
}
.lisa-number{
  margin:14px 0 4px;
  color:var(--lisa);
  font-family:serif;
  font-size:12px;
  letter-spacing:.14em;
}
.lisa-copy h3{
  margin:0 0 10px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
  font-size:24px;
  line-height:1.5;
}
.lisa-copy .product-price{
  margin:0 0 10px;
}
.text-link{
  display:inline-block;
  margin-top:18px;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  font-size:12px;
  transition:opacity .25s ease;
}
#panel-vd .text-link{color:var(--vd);}
#panel-lisa .text-link{color:var(--lisa);}
.text-link:hover{opacity:.8;}
.text-link span{margin-left:15px;}

/* ---------- Lisa about ---------- */
.lisa-about{
  margin:28px 24px 64px;
  padding:0;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  scroll-margin-top:80px;
}
.lisa-about-inner{
  padding:58px 48px 52px;
}
.lisa-about-logo{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:0 auto 38px;
  flex-direction:column;
  align-items:center;
  color:var(--lisa-title);
  line-height:1;
}
.lisa-about-logo-img{
  width:min(260px,70vw);
  height:auto;
}
.lisa-about-logo-kihachi{
  font-size:22px;
  letter-spacing:.34em;
  margin-right:-.34em;
}
.lisa-about-logo-meets{
  margin:4px 0 -1px;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:22px;
  font-style:italic;
  transform:rotate(-7deg);
}
.lisa-about-logo-name{
  font-size:22px;
  font-weight:600;
  letter-spacing:.015em;
}
.lisa-about-logo-name sup{
  margin-left:2px;
  font-size:7px;
  vertical-align:top;
}
.lisa-about-intro,
.lisa-profile{
  color:var(--sub);
  font-size:13px;
  line-height:1.9;
}
.lisa-about-intro{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.lisa-about-intro p,
.lisa-profile p{
  margin:0;
}
.lisa-design-concept{
  margin-top:24px!important;
  padding:20px 22px;
  background:var(--lisa-soft);
  color:#5f4b55;
}
.lisa-design-concept strong{
  display:block;
  margin-bottom:4px;
  color:var(--lisa-title);
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
}
.lisa-about-divider{
  height:1px;
  margin:38px 0;
  background:var(--line);
}
.lisa-about-visual{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:44px;
  align-items:center;
}
.lisa-signature-wrap{
  display:flex;
  min-height:180px;
  align-items:center;
  justify-content:center;
}
.lisa-signature{
  width:min(100%,300px);
  height:auto;
  opacity:.78;
}
.lisa-portrait-wrap{
  overflow:hidden;
}
.lisa-portrait{
  width:100%;
  aspect-ratio:1.5/1;
  object-fit:cover;
}
.lisa-profile{
  max-width:820px;
  margin:30px auto 0;
}
.lisa-about-footer{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:32px;
  align-items:end;
  max-width:820px;
  margin:30px auto 0;
}
.lisa-official{
  margin:0;
  color:var(--sub);
  font-size:11px;
  line-height:1.8;
}
.lisa-official a{
  color:var(--lisa-title);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:opacity .25s ease;
}
.lisa-official a:hover{
  opacity:.8;
}
.lisa-character{
  width:100%;
  max-width:220px;
  justify-self:end;
}

/* ---------- cross banner ---------- */
.cross-banner{
  display:block;
  margin:16px 24px 42px;
  overflow:hidden;
}
.cross-banner img{
  width:100%;
  transition:transform .35s ease,opacity .35s ease;
}
.cross-banner:hover img{
  transform:scale(1.01);
  opacity:.92;
}

/* ---------- full bleed ---------- */
.fv,
.parallax-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ---------- parallax ---------- */
.parallax-band{
  height:350px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.parallax-vd{
  background-image:url("../images/band_vd.svg");
  background-attachment:fixed;
}
.parallax-lisa{
  background-image:url("../images/band_lisa.svg");
  background-attachment:fixed;
}

/* ---------- common ---------- */
.common-section{
  padding:12px 24px 52px;
  background:#fff;
  border-top:0;
}
.ranking-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}
.rank-card{
  border:1px solid var(--line);
}
.rank-image-wrap{
  position:relative;
}
.rank-image-wrap img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.rank-number{
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:#333;
  color:#fff;
  font-family:serif;
  font-weight:700;
}
.rank-body{
  padding:13px 14px 16px;
}
.rank-body h3{
  margin:7px 0 3px;
  font-size:13px;
}
.rank-body p{
  margin:0;
  font-size:12px;
  font-weight:700;
}
.origin-label{
  display:inline-block;
  padding:2px 6px;
  border:1px solid currentColor;
  font-size:9px;
  line-height:1.4;
}
.origin-vd{color:var(--vd);}
.origin-lisa{color:var(--lisa);}
.rank-card-vd .rank-body h3,
.price-card-vd .price-card-body h3{color:var(--vd);}
.rank-card-lisa .rank-body h3,
.price-card-lisa .price-card-body h3{color:var(--lisa-title);}

/* ---------- price ---------- */
.price-section{scroll-margin-top:80px;}
.price-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin-top:24px;
}
.price-buttons button{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  padding:11px 18px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}
.price-buttons button[aria-pressed="true"]{
  background:#333;
  border-color:#333;
  color:#fff;
}
.price-count{
  margin:13px 0 16px;
  text-align:center;
  color:var(--sub);
  font-size:11px;
}
.price-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.price-card{
  display:grid;
  grid-template-columns:42% 1fr;
  border:1px solid var(--line);
  background:#fff;
}
.price-card>a{
  display:block;
}
.price-card img{
  width:100%;
  height:100%;
  min-height:190px;
  object-fit:cover;
}
.price-card-body{
  align-self:center;
  padding:14px;
}
.price-card .product-tags{
  margin-top:6px;
}
.empty-message{
  grid-column:1/-1;
  padding:35px;
  text-align:center;
  color:var(--sub);
  font-size:13px;
}
.concept-pc{display:block;}
.concept-sp{display:none;}

/* ---------- SP ---------- */
@media(max-width:700px){
  .fv{
    min-height:520px;
    height:72vh;
    max-height:680px;
  }
  .fv-lockup{padding:40px 20px;}

  /* SPはメインタブを流し、subnavだけ画面最上部に固定 */
  .tabs{
    position:relative;
    top:auto;
  }
  .subnav{
    top:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:8px 10px;
    gap:6px;
  }
  .subnav a{
    min-height:44px;
    padding:7px 4px;
    font-size:10px;
    line-height:1.35;
    text-align:center;
  }
  .category-section{
    padding:28px 14px 36px;
  }
  .category-title h3{font-size:22px;}

  .product-name-pc{display:none;}
  .product-name-sp{display:block;}

  /* VD：SPでも小は2列、大は横幅いっぱい */
  .vd-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .product-body{padding:10px;}
  .product-body h4{font-size:12px;}
  .product-description{display:none;}
  .product-price{font-size:12px;}

  .vd-card.is-large,
  .vd-card.is-large.is-reverse{
    grid-column:1 / -1;
    grid-template-columns:1fr;
    gap:0;
  }
  .vd-card.is-large.is-reverse .product-image,
  .vd-card.is-large.is-reverse .product-body{
    order:initial;
  }
  .vd-card.is-large .product-body{
    padding:18px 16px 22px;
  }
  .vd-card.is-large .product-body h4{
    font-size:20px;
  }
  .vd-card.is-large .product-description{
    display:block;
  }

  /* リサはSPで必ず 画像→テキスト の上下1列 */
  .lisa-products{padding:10px 16px 24px;}
  .lisa-card,
  .lisa-card.is-reverse{
    grid-template-columns:1fr;
    gap:16px;
    padding:34px 0;
  }
  .lisa-card.is-reverse .lisa-image,
  .lisa-card.is-reverse .lisa-copy{
    order:initial;
  }
  .lisa-copy{padding:0 4px;}
  .lisa-copy h3{font-size:21px;}
  .lisa-copy .product-description{display:block;font-size:12px;}

  .lisa-about{
    margin:8px 14px 44px;
  }
  .lisa-about-inner{
    padding:38px 8px 34px;
  }
  .lisa-about-logo{
    margin-bottom:28px;
  }
  .lisa-about-logo-img{
    width:min(220px,72vw);
  }
  .lisa-about-logo-kihachi{font-size:18px;}
  .lisa-about-logo-meets{font-size:19px;}
  .lisa-about-logo-name{font-size:18px;}
  .lisa-about-intro,
  .lisa-profile{
    font-size:11px;
    line-height:1.8;
  }
  .lisa-design-concept{
    margin-top:20px!important;
    padding:20px 18px;
  }
  .lisa-design-concept strong{font-size:13px;}
  .lisa-about-divider{margin:26px 0;}
  .lisa-about-visual{
    grid-template-columns:1fr;
    gap:20px;
  }
  .lisa-signature-wrap{
    min-height:0;
    padding:4px 22px 0;
  }
  .lisa-signature{width:min(100%,240px);}
  .lisa-portrait{aspect-ratio:1.45/1;}
  .lisa-profile{margin-top:24px;}
  .lisa-about-footer{
    grid-template-columns:1fr 120px;
    gap:14px;
    margin-top:24px;
  }
  .lisa-official{
    font-size:9px;
    line-height:1.65;
  }
  .lisa-character{max-width:120px;}

  .cross-banner{margin:10px 16px 30px;}
  /*.parallax-band{height:250px;}*/
  .parallax-band{
    height:250px;
    background-size:140% auto;
    background-position:center center;
    background-repeat:no-repeat;
  }
  .parallax-vd,
  .parallax-lisa{background-attachment:scroll;} /* SPでfixedが不安定なブラウザ対策 */

  .common-section{padding:8px 14px 40px;}
  .ranking-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .rank-number{width:30px;height:30px;font-size:12px;}
  .rank-body{padding:8px;}
  .rank-body h3{font-size:10px;line-height:1.45;}
  .rank-body p{font-size:10px;}

  .price-buttons{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }
  .price-buttons button{width:100%;padding:10px 5px;}
  .price-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .price-card{
    display:block;
  }
  .price-card img{
    min-height:0;
    aspect-ratio:1/1;
  }
  .price-card-body{padding:9px;}
  .price-card h3{font-size:11px;}
  .concept-pc{display:none;}
  .concept-sp{display:block;}
	
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;}
}

/* =========================================================
   背景画像
   WG → VD：12/25 10:00 時限切替
   ※ data-campaign は main.js で自動設定
   ========================================================= */

/* ---------- PC：WG（〜12/25 09:59） ---------- */
html[data-campaign="wg"] .fv-photo-vd{
  background-image:url("../images/fv_wg_pc.jpg");
}
html[data-campaign="wg"] .parallax-vd{
  background-image:url("../images/band_wg_pc.jpg");
  background-attachment:fixed;
}

/* ---------- PC：VD（12/25 10:00〜） ---------- */
html[data-campaign="vd"] .fv-photo-vd{
  background-image:url("../images/fv_vd_pc.jpg");
}
html[data-campaign="vd"] .parallax-vd{
  background-image:url("../images/band_vd_pc.jpg");
  background-attachment:fixed;
}

/* ---------- PC：Lisa（時限切替なし） ---------- */
.fv-photo-lisa{
  background-image:url("../images/fv_lisa_pc.jpg");
}
.parallax-lisa{
  background-image:url("../images/band_lisa_pc.jpg");
  background-attachment:fixed;
}

/* ---------- SP背景 ---------- */
@media(max-width:700px){

  /* WG */
  html[data-campaign="wg"] .fv-photo-vd,
  html[data-campaign="wg"] .parallax-vd{
    background-image:url("../images/fvband_wg_sp.jpg");
  }

  /* VD */
  html[data-campaign="vd"] .fv-photo-vd,
  html[data-campaign="vd"] .parallax-vd{
    background-image:url("../images/fvband_vd_sp.jpg");
  }

  /* Lisa */
  .fv-photo-lisa,
  .parallax-lisa{
    background-image:url("../images/fvband_lisa_sp.jpg");
  }

}