@charset "UTF-8";
/* F案 品目一覧・商品詳細 固有CSS（theme-f.css は変更しない） */

/* ---------- パンくず ---------- */
.crumb{font-size:.78rem;letter-spacing:.14em;color:var(--weak);padding:22px 0 0}
.crumb a{color:var(--sub)}
.crumb a:hover{color:var(--sumi)}

/* ---------- ページ頭：右に縦組み見出し、左にリード ---------- */
.page-head{padding:96px 0 40px}
.page-head .wrap-w{display:grid;grid-template-columns:1fr auto;gap:0 80px;align-items:end}
.page-head .head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start}
.page-head .lead{max-width:34em;color:var(--sub);padding-bottom:8px}
.page-head .ey.h{writing-mode:horizontal-tb;margin-bottom:1.2rem}

/* ---------- 品目一覧：1品1段。矩形＋パッケージ＋縦組み品名を左右交互に ---------- */
.plist{padding:64px 0 150px}
.plist .item{grid-template-columns:minmax(0,52%) 1fr;gap:0 88px;align-items:center;margin:0}
.plist .item+.item{margin-top:150px}
.plist .item:nth-child(even) .stage{order:2}
.plist .item:nth-child(even) .txt{order:1;justify-self:end}
.plist .item .stage{height:600px}
.plist .item .face{width:60%}
.plist .item .pkg{width:54%;bottom:56px}
.plist .item:nth-child(even) .face{right:auto;left:0;justify-content:flex-start}
.plist .item:nth-child(even) .pkg{left:auto;right:0}
.plist .item:nth-child(even) .no{left:auto;right:0}
.plist .badge{position:absolute;left:0;bottom:0;font-family:var(--f-min);font-size:.8rem;letter-spacing:.2em;color:var(--kin-t);border:1px solid var(--line-2);padding:.3rem .8rem;background:var(--white)}
.plist .item:nth-child(even) .badge{left:auto;right:0}
.plist .txt .cat{display:block;font-size:.78rem;letter-spacing:.18em;color:var(--kin-t);margin-bottom:.6rem}
.plist .txt h3{font-family:var(--f-min);font-weight:500;font-size:1.55rem;letter-spacing:.18em;line-height:1.6;margin-bottom:.2rem}
.plist .spec{display:flex;flex-wrap:wrap;margin:1.6rem 0 1.4rem;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.plist .spec span{font-family:var(--f-min);font-size:.92rem;letter-spacing:.14em;padding:.8rem 1.4rem .8rem 0;margin-right:1.4rem;position:relative}
.plist .spec span+span::before{content:"";position:absolute;left:-1.4rem;top:.95rem;bottom:.95rem;width:1px;background:var(--line-2)}
.plist .more{margin-top:1.8rem}
.shopall{margin-top:96px;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--weak);letter-spacing:.1em}

/* ---------- 選び方：薄罫の比較表 ---------- */
.compare{background:var(--face);padding:140px 0}
.compare .wrap-w{display:grid;grid-template-columns:auto 1fr;gap:0 80px;align-items:start}
.compare .head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start}
.compare .lead{max-width:36em;color:var(--sub);margin-bottom:2.4rem}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.9;letter-spacing:.06em;min-width:640px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:1.1rem 1.2rem 1.1rem 0;border-bottom:1px solid var(--line-2)}
.cmp thead th{font-family:var(--f-min);font-weight:500;font-size:1.15rem;letter-spacing:.16em;border-bottom:1px solid var(--sumi);padding-bottom:.9rem}
.cmp tbody th{font-family:var(--f-en);font-style:italic;font-weight:500;font-size:.95rem;color:var(--kin-t);width:8em;letter-spacing:.06em;font-family:var(--f-min);font-style:normal;font-size:.86rem;letter-spacing:.14em}
.cmp td{color:var(--sub);width:28%}
.cmp td:first-of-type{color:var(--sumi)}
.compare .hint{font-size:.8rem;color:var(--weak);margin-top:1.4rem;letter-spacing:.08em}

/* QUALITY（トップと同型・トップの.qualityをそのまま使用）*/

/* ---------- 締めCTA（.contact と同型・地は紙白） ---------- */

/* ===================== 商品詳細 ===================== */
.p-hero{padding:56px 0 130px}
.p-hero .wrap-w{display:grid;grid-template-columns:minmax(0,54%) 1fr;gap:0 88px;align-items:start}
.p-stage{position:relative;padding:0 0 0 0}
.p-stage::before{content:"";position:absolute;left:-32px;top:64px;right:22%;bottom:-40px;background:var(--face)}
.p-main{position:relative;aspect-ratio:4/3;margin-right:12%}
.p-thumbs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px;margin-left:12%}
.p-thumbs .t{aspect-ratio:1/1;border:1px solid var(--line);background:var(--white);padding:0;cursor:pointer;opacity:.75;transition:opacity .3s,border-color .3s}
.p-thumbs .t.active,.p-thumbs .t:hover{opacity:1;border-color:var(--sumi)}
.p-side{display:grid;grid-template-columns:1fr auto;gap:0 44px;align-items:start;padding-top:8px}
.p-side .vname{display:flex;flex-direction:row-reverse;gap:24px;align-items:flex-start}
.p-name{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--f-min);font-weight:500;font-size:clamp(1.9rem,2.6vw,2.4rem);letter-spacing:.22em;line-height:1.7;color:var(--sumi);font-feature-settings:"palt" 0}
.p-name .cat{display:block;font-family:var(--f-sans);font-weight:400;font-size:.78rem;letter-spacing:.16em;color:var(--kin-t);margin-left:.5rem;padding-top:.2rem}
.p-tag{display:inline-block;font-family:var(--f-min);font-size:.8rem;letter-spacing:.2em;color:var(--kin-t);border:1px solid var(--line-2);padding:.3rem .8rem;margin-bottom:1.4rem}
.p-en{display:block;font-family:var(--f-en);font-style:italic;font-size:1.05rem;color:var(--kin-t);letter-spacing:.1em;margin-bottom:1rem}
.p-catch{font-family:var(--f-min);font-weight:500;font-size:1.45rem;letter-spacing:.16em;line-height:1.8;margin-bottom:1rem}
.p-intro{color:var(--sub);font-size:.94rem}
.p-side .facts{margin-top:1.8rem}
.p-note{font-size:.78rem;color:var(--weak);letter-spacing:.08em;margin-top:1rem}

/* ---------- STORY：SILVER面。写真左、右に縦組み見出し＋横組み本文 ---------- */
.story{background:var(--face);padding:140px 0}
.story .wrap-w{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:0 88px;align-items:center}
.story .pic{aspect-ratio:4/3;border:2px solid var(--white)}
.story .txt{display:grid;grid-template-columns:1fr auto;gap:0 40px;align-items:start}
.story .txt .head{display:flex;flex-direction:row-reverse;gap:24px;align-items:flex-start}
.story .txt p{color:var(--sub);font-size:.95rem}
.story .txt p+p{margin-top:1.2rem}

/* ---------- FEATURES：薄罫の4項目 ---------- */
.features{padding:150px 0}
.features .wrap-w>.head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start;justify-content:flex-end;margin-bottom:72px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px;border-top:1px solid var(--line-2)}
.fgrid .pf .v{font-size:1.3rem}
.fgrid .pf .v .num{font-size:1.25rem}

/* ---------- 写真2枚（非対称オーバーラップ・PROLOGUEと同型） ---------- */
.szsec{padding:0 0 150px}
.szsec .wrap-w{position:relative;min-height:520px}
.szsec .big{width:70%;aspect-ratio:3/2;margin-left:auto}
.szsec .sm{position:absolute;left:32px;bottom:-40px;width:38%;aspect-ratio:4/3;border:2px solid var(--white)}

/* ---------- HOW TO ENJOY：左に縦組み見出し＋手順、右に写真3枚 ---------- */
.howto{padding:150px 0 150px;border-top:1px solid var(--line)}
.howto .wrap-w{display:grid;grid-template-columns:1fr minmax(0,44%);gap:0 88px;align-items:start}
.howto .head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start;justify-content:flex-end;margin-bottom:56px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:0 24px;padding:1.6rem 0;border-top:1px solid var(--line-2)}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.steps .no{font-family:var(--f-sans);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"palt" 0,"lnum" 1,"tnum" 1;font-size:.82rem;letter-spacing:.2em;color:var(--kin-t);padding-top:.5rem}
.steps h4{font-family:var(--f-min);font-weight:500;font-size:1.15rem;letter-spacing:.14em;line-height:1.7;margin-bottom:.3rem}
.steps p{font-size:.92rem;color:var(--sub);line-height:2}
.ht-pics{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;margin-top:48px}
.ht-pics .tall{grid-row:1/3;aspect-ratio:3/4}
.ht-pics .p:not(.tall){aspect-ratio:1/1}

/* ---------- 商品情報：薄罫の表＋グレージュ矩形のCTA ---------- */
.pinfo{background:var(--face);padding:140px 0}
.pinfo .wrap-w{display:grid;grid-template-columns:1fr minmax(0,34%);gap:0 88px;align-items:start}
.pinfo .head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start;justify-content:flex-end;margin-bottom:40px}
.spec-t{width:100%;border-collapse:collapse;font-size:.92rem;letter-spacing:.06em;border-top:1px solid var(--sumi)}
.spec-t th,.spec-t td{text-align:left;padding:1rem 0;border-bottom:1px solid var(--line-2);vertical-align:top}
.spec-t th{font-family:var(--f-min);font-weight:500;letter-spacing:.14em;width:8em;color:var(--sumi)}
.spec-t td{color:var(--sub)}
.cta-box{background:var(--white);padding:40px 36px;display:flex;flex-direction:column;gap:1rem;margin-top:32px}
.cta-box .ey{margin-bottom:.4rem}
.cta-box .v{font-family:var(--f-min);font-size:1.1rem;letter-spacing:.14em;color:var(--sumi);border-bottom:1px solid var(--sumi);padding-bottom:.15rem;align-self:flex-start}
.cta-box .btn{width:100%}

/* ---------- ほかの品目：グレージュ矩形にパッケージ ---------- */
.others{padding:150px 0}
.others .wrap-w>.head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start;justify-content:flex-end;margin-bottom:72px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
.rcard{display:block}
.rcard .pic{background:var(--face);aspect-ratio:1/1;padding:12%;margin-bottom:1.4rem}
.rcard .pic img{object-fit:contain;transition:transform .5s}
.rcard:hover .pic img{transform:translateY(-6px)}
.rcard h4{font-family:var(--f-min);font-weight:500;font-size:1.15rem;letter-spacing:.16em;line-height:1.7;margin-bottom:.4rem}
.rcard p{font-size:.88rem;color:var(--sub);line-height:1.9;margin-bottom:.9rem}
.rcard .m{display:inline-block;font-family:var(--f-min);font-size:.9rem;letter-spacing:.16em;border-bottom:1px solid var(--sumi);padding-bottom:.4rem}
.rcard:nth-child(2){margin-top:48px}
.rcard:nth-child(3){margin-top:96px}

/* ===================== ≤1080 ===================== */
@media (max-width:1080px){
  .page-head .wrap-w{gap:0 40px}
  .plist .item{gap:0 48px}
  .plist .item .stage{height:500px}
  .compare .wrap-w{grid-template-columns:1fr;gap:0}
  .compare .head{justify-content:flex-end;margin-bottom:2rem}
  .p-hero .wrap-w{gap:0 48px}
  .story .wrap-w{gap:0 48px}
  .fgrid{grid-template-columns:1fr 1fr}
  .howto .wrap-w{gap:0 48px}
  .pinfo .wrap-w{grid-template-columns:1fr;gap:56px 0}
  .rgrid{gap:0 24px}
}

/* ===================== ≤768（SP） ===================== */
@media (max-width:768px){
  .crumb{padding-top:16px;font-size:.72rem}
  .page-head{padding:56px 0 24px}
  .page-head .wrap-w{grid-template-columns:1fr;gap:28px 0}
  .page-head .head{order:1;justify-content:flex-end;gap:20px}
  .page-head .lead{order:2;font-size:.92rem}
  .plist{padding:40px 0 88px}
  .plist .item{grid-template-columns:1fr;gap:2rem 0}
  .plist .item+.item{margin-top:88px}
  .plist .item:nth-child(even) .stage,.plist .item:nth-child(even) .txt{order:initial;justify-self:stretch}
  .plist .item .stage{height:400px}
  .plist .item .face{width:62%}
  .plist .item .pkg{width:54%;bottom:32px}
  .plist .spec span{font-size:.86rem;padding-right:1rem;margin-right:1rem}
  .plist .spec span+span::before{left:-1rem}
  .shopall{margin-top:56px}
  .compare{padding:88px 0}
  .cmp{font-size:.84rem}
  .cmp thead th{font-size:1rem}
  .cmp tbody th{width:6em}

  .p-hero{padding:32px 0 88px}
  .p-hero .wrap-w{grid-template-columns:1fr;gap:56px 0}
  .p-stage::before{left:-20px;top:40px;right:18%;bottom:-24px}
  .p-main{margin-right:8%}
  .p-thumbs{gap:8px;margin-left:8%}
  .p-side{grid-template-columns:1fr;gap:0}
  .p-side .vname{justify-content:flex-end;margin-bottom:2rem}
  .p-name{font-size:clamp(1.6rem,7.6vw,1.95rem)}
  .p-catch{font-size:1.25rem}
  .p-side .acts .btn{flex:1 1 auto}
  .story{padding:88px 0}
  .story .wrap-w{grid-template-columns:1fr;gap:40px 0}
  .story .pic{border-width:8px}
  .story .txt{grid-template-columns:1fr;gap:1.6rem 0}
  .story .txt .head{order:1;justify-content:flex-end;gap:20px}
  .story .txt div:not(.head){order:2}
  .features{padding:88px 0}
  .features .wrap-w>.head{margin-bottom:40px;gap:20px}
  .fgrid{grid-template-columns:1fr;gap:0}
  .szsec{padding:0 0 88px}
  .szsec .wrap-w{min-height:0;padding-bottom:64px}
  .szsec .big{width:84%}
  .szsec .sm{left:20px;bottom:0;width:48%;border-width:8px}
  .howto{padding:88px 0}
  .howto .wrap-w{grid-template-columns:1fr;gap:48px 0}
  .howto .head{margin-bottom:32px;gap:20px}
  .ht-pics{margin-top:0;gap:10px}
  .pinfo{padding:88px 0}
  .pinfo .head{margin-bottom:24px;gap:20px}
  .cta-box{padding:28px 22px;margin-top:0}
  .others{padding:88px 0}
  .others .wrap-w>.head{margin-bottom:40px;gap:20px}
  .rgrid{grid-template-columns:1fr;gap:48px 0}
  .rcard:nth-child(2),.rcard:nth-child(3){margin-top:0}
  .rcard .pic{aspect-ratio:4/3}
}

/* 縦組み見出し内の数字は縦中横 */
.vh .num,.p-name .num{text-combine-upright:all}
.ht-pics>*{min-width:0;min-height:0}
.ht-pics .tall{grid-column:1}
.ht-pics .p:not(.tall){grid-column:2}
.ht-pics .p:nth-child(2){grid-row:1}
.ht-pics .p:nth-child(3){grid-row:2}
@media (max-width:768px){
  .p-side>div:first-child{order:2}
  .p-side .vname{order:1}
}

/* 品目→オンラインショップ全商品への導線（260921 CEO指示） */
.shopall-cta{text-align:center}.shopall-cta .n{margin:0 0 20px}.shopall-btn{min-width:min(100%,480px);min-height:64px;font-size:1rem;letter-spacing:.2em;padding:1.1rem 2.6rem;margin:0 0 20px}
@media (max-width:640px){.shopall-btn{width:100%;min-height:58px;font-size:.92rem;padding:1rem 1.2rem}}