@charset "UTF-8";
/* =========================================================
   Hot Feel SWEAT 特集ページ
   すべてのスタイルは .hfs 配下にスコープしています
   ========================================================= */
.hfs{
  --accent:#A4533D;
  --ink:#2B2622;
  --text:#4A423C;
  --muted:#6B625A;
  --bg:#F4F1EC;
  --bg-2:#EAE5DE;
  --card:#F9F7F3;
  --ph:#E3DDD5;
  --dark:#3E3833;
  --line:#CFC6BB;
  --serif-ja:'Shippori Mincho',serif;
  --serif-en:'Cormorant Garamond',serif;
  --label:'Jost',sans-serif;
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.95;letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
.hfs *,.hfs *::before,.hfs *::after{box-sizing:border-box}
.hfs h1,.hfs h2,.hfs h3,.hfs p,.hfs ul,.hfs figure{margin:0;padding:0}
.hfs h1,.hfs h2,.hfs h3{font-feature-settings:"palt";letter-spacing:.06em;font-weight:400}
.hfs ul,.hfs ol{list-style:none;margin:0;padding:0}
.hfs a{color:inherit;text-decoration:none}
.hfs img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- 共通 ---------- */
.hfs-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.hfs-sec{padding:112px 0}
.hfs-sec--tint{background:var(--bg-2)}
.hfs-sec--dark{background:var(--dark);color:var(--bg)}
.hfs-label{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.28em;color:var(--accent);line-height:1.6}
.hfs-label--line{display:flex;align-items:center;gap:14px}
.hfs-label--line::before{content:"";width:40px;height:1px;background:var(--accent)}
.hfs-h2{font-family:var(--serif-ja);font-size:clamp(24px,3vw,36px);line-height:1.6}
.hfs-h3{font-family:var(--serif-ja);font-weight:500;font-size:24px;line-height:1.5}
.hfs-body{color:var(--text)}
.hfs-stack{display:flex;flex-direction:column;gap:20px}
.hfs-center{text-align:center;align-items:center}
.hfs-note{font-size:12px;color:var(--muted);line-height:1.8}
.hfs-num{font-family:var(--serif-en);font-weight:500;font-variant-numeric:lining-nums;line-height:1}
.hfs-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.hfs-head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.hfs-head .hfs-body{max-width:680px}
.hfs-center.hfs-head .hfs-body{margin:0 auto}

/* 画像枠：画像が無い場合はラベルを表示 */
.hfs-ph{position:relative;background:var(--ph);overflow:hidden}
.hfs-ph::before{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-size:12px;color:#5E554D;line-height:1.7}
.hfs-ph img{position:relative}

/* ---------- 01 メインビジュアル ---------- */
.hfs-mv{width:100%;aspect-ratio:16/9;min-height:520px;max-height:860px;background:#D9D2C8}

/* ---------- 01b シリーズ紹介 ---------- */
.hfs-intro{padding:96px 0 0}
.hfs-intro__box{max-width:720px;margin:0 auto;background:#4E4842;color:var(--bg);padding:56px;display:flex;flex-direction:column;gap:14px}
.hfs-intro__brand{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.28em}
.hfs-intro__title{font-family:var(--serif-en);font-size:clamp(44px,7vw,72px);line-height:1.05;letter-spacing:.04em}
.hfs-intro__copy{font-family:var(--serif-ja);font-size:clamp(22px,3vw,30px);line-height:1.6}
.hfs-intro__sub{font-size:14px;color:#E2DBD1}
.hfs-intro__lead{margin-top:8px;padding-top:18px;border-top:1px solid rgba(244,241,236,.3);font-size:14px;line-height:2;color:#E2DBD1}

/* ---------- 02 コンセプト ---------- */
.hfs-concept__photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hfs-concept__photos .hfs-ph{aspect-ratio:3/4}
.hfs-concept__photos .hfs-ph:nth-child(2){margin-top:60px}

/* ---------- 03 3つの機能 ---------- */
.hfs-func .hfs-inner{max-width:1088px}
.hfs-func__kv{position:relative;aspect-ratio:2/1;min-height:300px;margin:40px 0;background:#7A7066;display:flex;align-items:flex-end}
.hfs-func__kv::before{color:#E2DBD1;align-items:flex-start;padding-top:40px}
.hfs-func__kv img{position:absolute;inset:0}
.hfs-func__kvtext{position:relative;padding:0 44px 40px;color:#fff;display:flex;flex-direction:column;gap:8px}
.hfs-func__kvtext h2{font-family:var(--serif-ja);font-weight:500;font-size:clamp(22px,3.2vw,38px);line-height:1.5}
.hfs-func__kvtext p{font-size:clamp(13px,1.5vw,17px);letter-spacing:.1em}
.hfs-func__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;margin-top:56px}
.hfs-func__item{display:flex;gap:24px;align-items:flex-start}
.hfs-func__item .hfs-ph,.hfs-func__icon{flex:0 0 132px;height:132px}
.hfs-func__icon{background:var(--bg-2);display:flex;align-items:center;justify-content:center}
.hfs-func__item h3{font-family:var(--serif-ja);font-weight:500;font-size:20px;line-height:1.5;margin-bottom:8px}
.hfs-func__item p{font-size:15px;line-height:1.85;color:var(--text)}
.hfs-func__item .hfs-note{font-size:11px;margin-top:8px}
.hfs-em{color:var(--accent);font-weight:500}

/* ---------- 04 吸湿発熱 ---------- */
.hfs-heat__photo{aspect-ratio:11/12}
.hfs-heat__stat{padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.hfs-heat__stat .hfs-num{font-size:104px;color:var(--accent)}
.hfs-heat__stat .hfs-num small{font-size:48px}
.hfs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.hfs-step{background:var(--bg-2);padding:28px;display:flex;flex-direction:column;gap:10px}
.hfs-step__no{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.24em;color:var(--accent)}
.hfs-step__ttl{font-family:var(--serif-ja);font-size:19px}
.hfs-step__txt{font-size:13px;color:var(--text);line-height:1.85}
.hfs-step--on{background:var(--accent);color:#fff}
.hfs-step--on .hfs-step__no,.hfs-step--on .hfs-step__txt{color:#fff}

/* ---------- 05+07 薄手・レイヤード ---------- */
.hfs-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hfs-compare figure{display:flex;flex-direction:column;gap:10px}
.hfs-compare .hfs-ph{aspect-ratio:3/4;background:#DCD5CB}
.hfs-compare figcaption{font-size:12px;color:var(--text);text-align:center}
.hfs-thin__block+.hfs-thin__block{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}

/* ---------- 06 吸湿発熱リブ ---------- */
.hfs-badge{display:inline-block;align-self:flex-start;border:1px solid var(--line);padding:2px 14px;font-size:12px;letter-spacing:.15em}
.hfs-rib .hfs-body{color:#E2DBD1}
.hfs-rib .hfs-note{color:var(--line)}
.hfs-rib__photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hfs-rib__photos figure{display:flex;flex-direction:column;gap:10px}
.hfs-rib__photos .hfs-ph{aspect-ratio:3/4;background:#57504A}
.hfs-rib__photos .hfs-ph::before{color:#E2DBD1}
.hfs-rib__photos h3{font-family:var(--serif-ja);font-size:17px;margin-top:4px}
.hfs-rib__photos p{font-size:13px;color:#E2DBD1;line-height:1.85}

/* ---------- 08 UVカット ---------- */
.hfs-uv__photo{aspect-ratio:1/1}
.hfs-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hfs-stat{background:var(--bg-2);padding:20px 24px;display:flex;flex-direction:column;gap:4px}
.hfs-stat>span:first-child{font-size:12px;color:var(--text)}
.hfs-stat .hfs-num{font-size:60px;line-height:1.1}
.hfs-stat .hfs-num small{font-size:28px}

/* ---------- 09+10 イージーケア・ストレッチ ---------- */
.hfs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.hfs-card{background:var(--card);display:flex;flex-direction:column}
.hfs-card .hfs-ph{aspect-ratio:16/9}
.hfs-card__body{padding:36px;display:flex;flex-direction:column;gap:14px}
.hfs-card__body .hfs-label{font-size:12px;letter-spacing:.22em}
.hfs-card__body .hfs-label--gray{color:var(--muted)}

/* ---------- 11 デザイン / 12 シーン / 13 ディテール ---------- */
.hfs-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hfs-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hfs-fig{display:flex;flex-direction:column;gap:8px}
.hfs-fig .hfs-ph{aspect-ratio:3/4}
.hfs-fig__en{font-family:var(--serif-en);font-size:20px;letter-spacing:.1em;line-height:1.4;margin-top:4px}
.hfs-fig__ja{font-size:13px;color:var(--text)}
.hfs-fig__txt{font-size:13px;color:var(--text);line-height:1.8}
.hfs-scene .hfs-ph{background:#DCD5CB;aspect-ratio:4/5}
.hfs-detail .hfs-ph{aspect-ratio:1/1}
.hfs-detail h3{font-family:var(--serif-ja);font-size:17px;margin-top:4px}

/* ---------- 15 ラインナップ ---------- */
.hfs-lineup__title{font-family:var(--serif-en);font-size:clamp(36px,4.4vw,52px);line-height:1.1}
.hfs-lineup .hfs-label{color:#E2DBD1}
.hfs-lineup .hfs-body{color:#E2DBD1;font-size:14px}
.hfs-style{background:var(--bg);color:var(--ink);display:flex;flex-direction:column}
.hfs-style .hfs-ph{aspect-ratio:2/3}
.hfs-style__body{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.hfs-style__name{font-family:var(--serif-en);font-size:30px;line-height:1}
.hfs-style__desc{font-size:14px;line-height:1.9;color:var(--text)}
.hfs-style__items{font-size:13px;display:flex;flex-direction:column;gap:6px}
.hfs-style__items span{color:var(--muted);margin-right:.8em}
.hfs-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--ink);color:var(--bg)!important;font-size:14px;letter-spacing:.12em;transition:opacity .2s}
.hfs-btn:hover{opacity:.8}
.hfs-style .hfs-btn{margin-top:auto}

/* ---------- 16 アイテム詳細 ---------- */
.hfs-cat{font-family:var(--label);font-weight:500;font-size:15px;letter-spacing:.3em;padding-bottom:12px;border-bottom:1px solid var(--line);margin:72px 0 0}
.hfs-item{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center;margin-top:72px}
.hfs-item .hfs-ph{aspect-ratio:4/5}
.hfs-item__body{display:flex;flex-direction:column;gap:18px}
.hfs-item__meta{font-size:12px;color:var(--muted);letter-spacing:.1em}
.hfs-item__name{font-family:var(--serif-ja);font-weight:500;font-size:20px;line-height:1.6}
.hfs-item__catch{font-family:var(--serif-ja);font-size:clamp(22px,2.6vw,30px);line-height:1.5;color:var(--accent)}
.hfs-points{display:flex;flex-direction:column;gap:8px;font-size:14px}
.hfs-points li{padding-left:18px;border-left:2px solid var(--accent)}
.hfs-tags{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}
.hfs-tags span{background:var(--bg-2);padding:4px 12px}
.hfs-tags .hfs-tag--on{background:var(--accent);color:#fff}
.hfs-item__price{font-size:13px;color:var(--text)}
.hfs-item .hfs-btn{align-self:center;width:100%;max-width:400px;min-height:56px;margin-top:8px}

/* ---------- 14 注釈 ---------- */
.hfs-notes{padding:56px 0 80px;font-size:12px;color:var(--text);line-height:1.8}
.hfs-notes h2{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px;letter-spacing:.05em}

/* ---------- 17 商品一覧 ---------- */
.hfs-list{background:#FAF8F5;border-top:1px solid var(--ph);padding:88px 0 120px}
.hfs-list .hfs-inner{max-width:1148px}
.hfs-list__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.hfs-prod{display:flex;flex-direction:column}
.hfs-prod .hfs-ph{aspect-ratio:4/5;transition:opacity .2s}
.hfs-prod:hover .hfs-ph{opacity:.85}
.hfs-prod__catch{margin-top:14px;font-size:12px;line-height:1.7;color:#8A6640}
.hfs-prod__no{margin-top:8px;font-family:var(--serif-en);font-weight:500;font-variant-numeric:lining-nums;font-size:17px;color:#8E857C;line-height:1.3}
.hfs-prod__no small{font-size:12px}
.hfs-prod__name{margin-top:4px;font-size:13px;line-height:1.7}
.hfs-prod__price{margin-top:6px;font-size:13px}
.hfs-prod__price small{font-size:12px}


/* ---------- 01 表紙風メインビジュアル ---------- */
.hfs-cover{position:relative;width:100%;min-height:780px;background:#D9D2C8;overflow:hidden;color:var(--ink)}
.hfs-cover>.hfs-ph{position:absolute;inset:0;background:transparent}
.hfs-cover>.hfs-ph img{position:absolute;inset:0}
.hfs-cover__inner{position:relative;max-width:1200px;margin:0 auto;min-height:780px;padding:40px 24px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hfs-cover__mast{display:flex;flex-direction:column;gap:8px;border-bottom:1px solid rgba(43,38,34,.55);padding-bottom:14px}
.hfs-cover__meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.24em}
.hfs-cover__title{font-family:var(--serif-en);font-style:italic;font-size:clamp(52px,11vw,148px);line-height:.95;letter-spacing:-.01em}
.hfs-cover__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.hfs-cover__lines{display:flex;flex-direction:column;gap:16px;max-width:440px;min-width:0}
.hfs-cover__head{font-family:var(--serif-ja);font-weight:500;font-size:clamp(22px,3vw,36px);line-height:1.5}
.hfs-cover__toc{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid rgba(43,38,34,.55);font-size:14px;list-style:none}
.hfs-cover__toc a{display:flex;align-items:baseline;gap:12px}
.hfs-cover__toc a:hover{opacity:.7}
.hfs-cover__toc span{font-family:var(--serif-en);font-style:italic;font-size:20px;color:var(--accent)}
.hfs-cover__vert{writing-mode:vertical-rl;font-family:var(--serif-ja);font-size:clamp(20px,2.4vw,30px);line-height:1.9;letter-spacing:.24em;white-space:nowrap}

/* ---------- ドロップキャップ / プルクオート ---------- */
.hfs .hfs-quote{max-width:960px;margin:0 auto;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:56px 24px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.hfs-quote__mark{font-family:var(--serif-en);font-size:120px;line-height:.7;height:56px;color:var(--accent)}
.hfs-quote blockquote{margin:0;font-family:var(--serif-ja);font-size:clamp(20px,3vw,34px);line-height:1.8;letter-spacing:.08em}
.hfs-quote figcaption{margin-top:16px;font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.24em;color:var(--muted)}

/* ---------- STYLE SNAP ---------- */
.hfs-headrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;margin-bottom:40px}
.hfs-headrow>p{max-width:440px;font-size:14px;color:var(--text)}
.hfs-snap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(100px,16vw,200px);grid-auto-flow:dense;gap:8px}
.hfs-snap .hfs-ph:nth-child(even){background:#DCD5CB}
.hfs-snap .w2{grid-column:span 2}
.hfs-snap .h2{grid-row:span 2}
.hfs-snap img{position:absolute;inset:0}
.hfs-snap figcaption{position:absolute;left:12px;bottom:8px;font-family:var(--serif-en);font-style:italic;font-size:16px;z-index:1}

/* ---------- 1週間着回しダイアリー ---------- */
.hfs-diary__head{border-bottom:1px solid var(--ink);padding-bottom:24px;margin-bottom:48px}
.hfs-diary__head h2{font-size:clamp(26px,3.6vw,44px);line-height:1.45}
.hfs-diary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px;list-style:none}
.hfs-day{display:flex;flex-direction:column;gap:12px}
.hfs-day__top{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.hfs-day__no{font-family:var(--serif-en);font-style:italic;font-size:40px;line-height:1;color:var(--accent)}
.hfs-day__en{font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.24em}
.hfs-day__scene{margin-left:auto;font-size:12px;color:var(--muted)}
.hfs-day .hfs-ph{aspect-ratio:3/4}
.hfs-day h3{font-family:var(--serif-ja);font-weight:500;font-size:18px;line-height:1.6}
.hfs-day p{font-size:13px;line-height:1.9;color:var(--text)}
.hfs-day .hfs-credit{font-size:11px;line-height:1.8;color:var(--muted);border-top:1px dotted #B9AFA4;padding-top:8px}

/* ---------- アイテム サブ画像 ---------- */
.hfs-item__media{display:flex;flex-direction:column;gap:8px;min-width:0}
.hfs-item__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hfs-item__thumbs .hfs-ph{aspect-ratio:1/1}
.hfs-item__thumbs .hfs-ph::before{font-size:11px;padding:4px}


/* =========================================================
   モーション（JS有効＆動きを減らす設定がオフの時だけ動作）
   ========================================================= */
@keyframes hfsMaskUp{from{clip-path:inset(0 0 100% 0);transform:translateY(40px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes hfsMaskDown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hfsFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hfsKenBurns{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes hfsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hfsLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 表紙：読み込み時の演出 */
.hfs.is-motion .hfs-cover>.hfs-ph img{animation:hfsKenBurns 7s cubic-bezier(.2,.6,.2,1) both}
.hfs.is-motion .hfs-cover__meta{animation:hfsFade .9s .1s both}
.hfs.is-motion .hfs-cover__mast{position:relative;border-bottom-color:transparent}
.hfs.is-motion .hfs-cover__mast::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(43,38,34,.55);transform-origin:left;animation:hfsLine 1.4s .5s cubic-bezier(.77,0,.18,1) both}
.hfs.is-motion .hfs-cover__title{animation:hfsMaskUp 1.3s .25s cubic-bezier(.2,.7,.2,1) both}
.hfs.is-motion .hfs-cover__head{animation:hfsFade 1s .9s both}
.hfs.is-motion .hfs-cover__toc li{animation:hfsFade .8s both}
.hfs.is-motion .hfs-cover__toc li:nth-child(1){animation-delay:1.1s}
.hfs.is-motion .hfs-cover__toc li:nth-child(2){animation-delay:1.22s}
.hfs.is-motion .hfs-cover__toc li:nth-child(3){animation-delay:1.34s}
.hfs.is-motion .hfs-cover__vert{animation:hfsMaskDown 1.8s 1s cubic-bezier(.65,0,.35,1) both}

/* スクロールで出現 */
.hfs.is-motion [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.hfs.is-motion [data-reveal="zoom"]{transform:scale(.94)}
.hfs.is-motion [data-reveal].is-in{opacity:1;transform:none}
/* 画像：カーテンがめくれるように出現 */
.hfs.is-motion .hfs-ph[data-reveal="curtain"]{opacity:1;transform:none}
.hfs.is-motion .hfs-ph[data-reveal="curtain"]::after{content:"";position:absolute;inset:0;z-index:2;background:var(--line);transform-origin:right center;transition:transform 1.1s cubic-bezier(.77,0,.18,1) var(--d,0s)}
.hfs.is-motion .hfs-ph[data-reveal="curtain"] img{transform:scale(1.12);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.hfs.is-motion .hfs-ph[data-reveal="curtain"].is-in::after{transform:scaleX(0)}
.hfs.is-motion .hfs-ph[data-reveal="curtain"].is-in img{transform:scale(1)}
/* カーテンの向きを交互に（右へ／左へ） */
.hfs.is-motion .hfs-ph[data-reveal="curtain"][data-dir="l"]::after{transform-origin:left center}
/* 画像パターン2：ピントが合うようにふわっと浮かび上がる */
.hfs.is-motion .hfs-ph[data-reveal="focus"]{opacity:0;transform:none;filter:blur(14px);transition:opacity 1.4s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.hfs.is-motion .hfs-ph[data-reveal="focus"] img{transform:scale(1.18);transition:transform 2.2s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.hfs.is-motion .hfs-ph[data-reveal="focus"].is-in{opacity:1;filter:none}
.hfs.is-motion .hfs-ph[data-reveal="focus"].is-in img{transform:scale(1)}
/* 見出し下の罫線が伸びる */
.hfs.is-motion .hfs-quote,.hfs.is-motion .hfs-diary__head{position:relative}

/* 流れるテキスト帯 */
.hfs-marquee{overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;margin:96px 0 0;white-space:nowrap}
.hfs-marquee__track{display:inline-flex;width:max-content;animation:hfsMarquee 40s linear infinite}
.hfs-marquee__track span{font-family:var(--serif-en);font-style:italic;font-size:clamp(28px,4vw,48px);line-height:1.2;padding:0 28px;display:inline-flex;align-items:center;gap:56px}
.hfs-marquee__track span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hfs-marquee__track .ja{font-family:var(--serif-ja);font-style:normal;font-size:clamp(18px,2.4vw,28px)}
.hfs-marquee:hover .hfs-marquee__track{animation-play-state:paused}

/* ホバー */
.hfs-prod .hfs-ph img,.hfs-style .hfs-ph img,.hfs-snap img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hfs-prod:hover .hfs-ph img,.hfs-style:hover .hfs-ph img,.hfs-snap .hfs-ph:hover img{transform:scale(1.05)}
.hfs-btn{position:relative;overflow:hidden}
.hfs-btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.12);transform:translateX(-101%);transition:transform .5s cubic-bezier(.77,0,.18,1)}
.hfs-btn:hover::after{transform:none}

@media (prefers-reduced-motion:reduce){
  .hfs-marquee__track{animation:none}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1024px){
  .hfs-sec{padding:88px 0}
  .hfs-split{gap:40px}
  .hfs-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hfs-func__list{grid-template-columns:1fr}
  .hfs-diary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hfs-concept .hfs-split{grid-template-columns:1fr;gap:40px}
  .hfs-concept__photos{max-width:640px;width:100%;margin:0 auto}
}
@media (max-width:768px){
  .hfs-marquee{margin-top:64px;padding:10px 0}
  .hfs{font-size:15px}
  .hfs-sec{padding:72px 0}
  .hfs-head{margin-bottom:32px}
  .hfs-split,.hfs-item{grid-template-columns:1fr;gap:32px}
  .hfs-split--rev>:first-child{order:2}
  .hfs-mv{aspect-ratio:4/5;min-height:0;max-height:none}
  .hfs-intro{padding:56px 0 0}
  .hfs-intro__box{padding:40px 28px}
  .hfs-concept__photos .hfs-ph:nth-child(2){margin-top:40px}
  .hfs-func__kv{aspect-ratio:4/3;min-height:0;margin:28px 0}
  .hfs-func__kvtext{padding:0 24px 24px}
  .hfs-func__list{margin-top:40px;gap:32px}
  .hfs-heat__stat .hfs-num{font-size:80px}
  .hfs-heat__stat .hfs-num small{font-size:36px}
  .hfs-steps,.hfs-cards,.hfs-grid3{grid-template-columns:1fr}
  .hfs-steps{margin-top:40px}
  .hfs-stat .hfs-num{font-size:48px}
  .hfs-card__body{padding:28px 24px}
  .hfs-grid3.hfs-design{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hfs-design .hfs-fig__txt{display:none}
  .hfs-cat{margin-top:56px}
  .hfs-item{margin-top:48px}
  .hfs-list{padding:64px 0 88px}
  .hfs-list__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 12px}
  .hfs-cover,.hfs-cover__inner{min-height:640px}
  .hfs-cover__inner{padding:28px 20px 32px}
  .hfs-cover__foot{gap:16px}
  .hfs-cover__toc{font-size:13px}
  .hfs-quote{padding:40px 8px 36px}
  .hfs-quote__mark{font-size:88px;height:40px}
  .hfs-headrow{margin-bottom:28px}
  .hfs-diary{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 12px}
  .hfs-diary__head{margin-bottom:32px}
  .hfs-day__no{font-size:30px}
  .hfs-day__scene{display:none}
  .hfs-day h3{font-size:15px}
  .hfs-item__thumbs{gap:6px}
}
@media (max-width:480px){
  .hfs-inner{padding:0 16px}
  .hfs-func__item{gap:16px}
  .hfs-func__item .hfs-ph,.hfs-func__icon{flex-basis:96px;height:96px}
  .hfs-func__icon svg{width:56px;height:56px}
  .hfs-stats{grid-template-columns:1fr 1fr;gap:8px}
  .hfs-stat{padding:16px}
  .hfs-stat .hfs-num{font-size:40px}
  .hfs-stat .hfs-num small{font-size:20px}
  .hfs-grid4{gap:24px 12px}
  .hfs-rib__photos{gap:12px}
  .hfs-snap{grid-auto-rows:88px;gap:6px}
  .hfs-snap figcaption{font-size:13px;left:8px;bottom:4px}
  .hfs-cover__vert{font-size:18px}
}


/* =========================================================
   画像枚数の調整に伴う上書き（2026-10-29）
   ========================================================= */
/* 表紙：左にテキスト、右に縦長の写真 */
.hfs-cover{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"inner photo";min-height:0}
.hfs-cover>.hfs-ph{grid-area:photo;position:relative;inset:auto;min-height:780px;background:#CFC8BE}
.hfs-cover>.hfs-ph img{object-position:center 20%}
.hfs-cover__inner{grid-area:inner;max-width:none;width:100%;margin:0;min-height:780px;padding:40px 48px 48px max(24px,calc((100vw - 1200px)/2 + 24px))}
.hfs-cover__title{font-size:clamp(48px,7.4vw,116px)}

/* FUNCTION：テキスト見出し */
.hfs-func__title{display:flex;flex-direction:column;gap:6px;margin:20px 0 28px}
.hfs-func__sub{font-size:14px;letter-spacing:.1em;color:var(--muted)}

/* 画像なしカード */
.hfs-card{border-top:2px solid var(--accent)}
.hfs-scene .hfs-fig{border-top:1px solid var(--ink);padding-top:16px}
.hfs-style{border-top:3px solid var(--accent)}

@media (max-width:1024px){
  .hfs-cover>.hfs-ph,.hfs-cover__inner{min-height:640px}
  .hfs-cover__inner{padding:32px 28px 40px 24px}
}
@media (max-width:768px){
  .hfs-cover{grid-template-columns:1fr;grid-template-areas:"mast" "photo" "foot"}
  .hfs-cover__inner{display:contents}
  .hfs-cover__mast{grid-area:mast;padding:24px 20px 14px;margin:0 0 0}
  .hfs-cover>.hfs-ph{min-height:0;aspect-ratio:4/5}
  .hfs-cover__foot{grid-area:foot;padding:28px 20px 44px}
  .hfs-cover__title{font-size:clamp(44px,13vw,72px)}
  .hfs-cover__head{font-size:clamp(20px,5.6vw,28px)}
}

/* 3つの機能：アイコンを正方形画像に差し替え */
.hfs-func__icon{overflow:hidden}
.hfs-func__icon img{display:block;width:100%;height:100%;object-fit:cover}

/* 画像が入っている枠では、撮影指示ラベル（data-label）を表示しない
   ※画像の読み込み中やアニメーション中にラベルが透けて見えるのを防ぐ */
.hfs-ph:has(> img)::before{content:none}
.hfs-ph.has-img::before{content:none}

/* 表紙の写真：看板画像（PC版）のモデル部分を切り出して使用 */
.hfs-cover>.hfs-ph img{object-position:center 30%}