@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Bellefair&family=Sacramento&display=swap');

/* =========================================================
   TOWAITO 更新版トップ（new/）共通スタイル
   ・アニメ無しver（index.html）とアニメありver（anime.html）で共用
   ・動きの"見た目上の初期状態"はここ、動き自体は anime.css / anime.js
   ========================================================= */

:root{
  --red:#D8210D;
  --base:#EEE8E1;
  --ink:#231815;
  --green:#2f5b52;      /* BRAND01 BOU の濃緑ブロック */
  --muted:#6f6a64;
  --line:#D8210D;
  --serif:'Bellefair','Cormorant Garamond','Times New Roman','YuMincho','游明朝',serif;
  --sans:'游ゴシック体','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  --helv:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(20px,6.25vw,120px);
  --maxw:1280px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;background:var(--base);color:var(--ink);
  font-family:var(--sans);font-weight:500;line-height:1.9;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
/* スマホのみ有効にする改行（PCでは無効） */
.br-sp{display:none;}
.br-pc{display:inline;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
/* BRAND 02,03 エリアのみ左右paddingを狭めて広げる（PCのみ・数値は要調整） */
.container--brands{padding-left:clamp(20px,3vw,60px);padding-right:clamp(20px,3vw,60px);}

/* セクション見出し（英語セリフ＋和名） */
.sec-title{display:flex;align-items:baseline;gap:16px;color:var(--red);}
.sec-title .en{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,64px);line-height:1;text-transform:uppercase;}
.sec-title .ja{font-size:clamp(11px,1vw,13px);letter-spacing:.18em;}
/* 中央見出しは縦積み（EN上・JA下）：OUR BRAND / JOURNAL / CONTACT */
.sec-title.center{flex-direction:column;align-items:center;gap:4px;text-align:center;}
/* #7指摘：サブタイトル(和)の字間が広すぎたので全体的に詰める */
.sec-title.center .ja{font-size:clamp(13px,1.15vw,15px);letter-spacing:.12em;}
.sec-title.light{color:#fff;}

/* 破線ボタン（VIEW MORE）。ホバーで色が満ちる（負荷の低い標準的なマイクロインタラクション） */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  border:1px dashed var(--red);color:var(--red);font-family:'Bellefair',var(--serif);font-size:15px;letter-spacing:.1em;
  padding:20px 28px;width:100%;max-width:360px;background:none;cursor:pointer;overflow:hidden;
  transition:color .35s ease;}
.btn>span{position:relative;z-index:1;}
/* 矢印は塗りつぶし三角（▶）のみ＝.jnav__tri と同形。棒（線）は無し（Figma準拠） */
.btn .arrow{flex:0 0 auto;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor;}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:0;}
.btn:hover{color:#fff;}
.btn:hover::before{transform:scaleX(1);}
/* 濃色背景上（緑・写真）の白ボタン */
.btn--light{border-color:rgba(255,255,255,.75);color:#fff;}
.btn--light::before{background:#fff;}
.btn--light:hover{color:var(--ink);}

/* 下線付きテキストリンク（AMAZON ▸ 等） */
.ulink{display:inline-flex;align-items:center;gap:20px;font-family:'Bellefair',var(--serif);font-size:16px;
  letter-spacing:.08em;color:#fff;padding-bottom:3px;border-bottom:1px solid currentColor;
  min-width:150px;justify-content:space-between;}
/* SNSリンクの矢印も塗りつぶし三角（▶）に統一 */
.ulink__arrow{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor;flex:0 0 auto;}
.ulink--ink{color:var(--ink);}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;transition:background .3s ease,box-shadow .3s ease;}
.site-header a,.site-header .hamburger{pointer-events:auto;}
.site-logo{position:absolute;top:30px;left:clamp(20px,3.3vw,48px);line-height:1;z-index:60;transition:top .3s ease;}
.site-logo img{display:block;width:clamp(150px,15vw,200px);height:auto;transition:filter .25s ease;}

/* ハンバーガー（PC・スマホ共通で常時表示） */
/* ☰↔✗は同一要素でモーフィング（位置・サイズ完全一致＝切替時のズレ無し）。メニュー最前面より上に置きクリック可能に */
.hamburger{position:fixed;top:30px;right:clamp(20px,3vw,44px);width:38px;height:22px;background:none;border:0;padding:0;cursor:pointer;z-index:10000;transition:top .3s ease;}
.hamburger span{display:block;height:2px;width:100%;background:#231815;margin:5px 0;transition:.3s;}
/* 追随前（ヒーロー／写真の上）はハンバーガーを白に */
.site-header.on-photo:not(.scrolled) .hamburger span,
.company-page .site-header:not(.scrolled) .hamburger span,
.contact-page .site-header:not(.scrolled) .hamburger span,
.media-page .site-header:not(.scrolled) .hamburger span,
.news-page .site-header:not(.scrolled) .hamburger span,
.news-detail-page .site-header:not(.scrolled) .hamburger span{background:#fff;}
/* 追随時（ベージュ帯）は黒に */
.site-header.scrolled .hamburger span{background:#231815;}

/* スクロールで薄いベージュ帯に（背景・影は実際にスクロールした時だけ＝.is-bar で付与） */
.site-header.is-bar{background:rgba(238,232,225,.96);box-shadow:0 1px 12px rgba(0,0,0,.05);}
/* 下層ページのヘッダーロゴは常に .scrolled 状態。位置・サイズをトップページのスクロール後ロゴに合わせる（左2%／上18px／幅15vw） */
.site-header.scrolled .site-logo{top:18px;left:2%;}
.site-header.scrolled .site-logo img{width:15vw;}
.site-header.scrolled .hamburger{top:16px;}

/* オーバーレイメニュー：左＝MV／右＝赤パネル（Figma TOWAITO_MENU準拠） */
/* メニュー：Figma準拠の挙動＝赤パネルだけが最前面に被さる。左に別MVは描画せず、背景は今のページを暗くする */
.gnav{position:fixed;inset:0;z-index:9999;display:flex;justify-content:flex-end;
  background:rgba(35,24,21,.45);pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
/* site-headerのpointer-events:noneを継承して×が押せない不具合を解消。開いている時だけ操作可能に */
body.menu-open .gnav{opacity:1;visibility:visible;pointer-events:auto;}
/* 左MV（gnav__mv一式）は使わない */
.gnav__mv{display:none!important;}
/* 左：MV */
.gnav__mv{position:relative;flex:1;overflow:hidden;background:#d9d9d9;}
/* メニュー左MV背景：Figma準拠でパネル全体をカバー（過度なズーム無し・ズレ防止） */
.gnav__mv-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;}
.gnav__mv-inset{position:absolute;left:33%;top:15%;width:38%;height:66%;}
.gnav__mv-inset img{width:100%;height:100%;object-fit:cover;}
.gnav__logo{position:absolute;left:6%;top:6%;width:22%;margin:0;line-height:0;z-index:2;}
.gnav__logo img{width:100%;filter:brightness(0) invert(1);}
.gnav__tagline{position:absolute;left:6%;bottom:13%;color:#fff;z-index:2;}
.gnav__tagline .ja{margin:0 0 14px;font-size:clamp(17px,1.6vw,23px);line-height:1.7;letter-spacing:.08em;}
.gnav__tagline .en{margin:0;font-size:clamp(8px,.7vw,10px);line-height:1.9;color:#fff;}
/* 右：赤パネル */
.gnav__panel{width:clamp(340px,33%,480px);background:var(--red);color:#fff;position:relative;
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(30px,3.5vw,64px);}
/* 閉じる×：当たり判定を44px四方に拡大し、×線を中央揃え（押しても閉じない不具合対策） */
.gnav__close{position:absolute;top:24px;right:clamp(20px,2.6vw,44px);width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;z-index:3;}
.gnav__close::before,.gnav__close::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:1.5px;background:#fff;transform-origin:center;}
.gnav__close::before{transform:translate(-50%,-50%) rotate(18deg);}
.gnav__close::after{transform:translate(-50%,-50%) rotate(-18deg);}
.gnav__list{margin:0 0 44px;}
.gnav__list li{margin:0 0 24px;}
.gnav__list a{display:flex;flex-direction:column;gap:7px;color:#fff;}
.gnav__list .en{font-family:var(--serif);font-size:clamp(17px,1.6vw,22px);letter-spacing:.04em;}
.gnav__list .ja{font-size:11px;letter-spacing:.12em;opacity:.95;}
.gnav__addr{margin:0;font-size:10px;line-height:1.9;letter-spacing:.04em;opacity:.95;}
/* メニュー左上ロゴ（白）：SPのみ表示 */
.gnav__panel-logo{display:none;}
/* メニュー下部：CONTACT横流れ黒帯（hero__contactとは別にメニュー専用で常時表示） */
/* hero__contact同様の帯：全幅ではなくパネル余白ぶん内側、最下部から少し浮かせて配置 */
.gnav__contact{position:absolute;left:clamp(30px,3.5vw,64px);right:clamp(30px,3.5vw,64px);bottom:40px;height:50px;background:#000;overflow:hidden;
  display:flex;align-items:center;z-index:3;color:#fff;font-family:var(--serif);font-size:14px;letter-spacing:.12em;}
.gnav__contact-track{display:inline-flex;white-space:nowrap;animation:hero-contact 12s linear infinite;padding-left:24px;}
/* 下部ティッカーと住所が重ならないよう余白を確保 */
.gnav__panel{padding-bottom:104px;}
@media (max-width:680px){
  /* SPは縦積み＆上寄せ（flex-endのままだと内容が高い時に上へはみ出しロゴが隠れる） */
  .gnav{flex-direction:column;justify-content:flex-start;}
  .gnav__mv{flex:0 0 40%;}
  .gnav__panel{width:100%;flex:1;justify-content:flex-start;padding-top:74px;padding-bottom:72px;overflow-y:auto;}
  /* ロゴ分の高さを詰めて、リスト・住所・下部ティッカーが1画面に収まるように */
  .gnav__list{margin:0 0 24px;}
  .gnav__list li{margin:0 0 18px;}
  .gnav__panel-logo{display:block;position:absolute;left:clamp(30px,3.5vw,64px);top:24px;width:124px;margin:0;line-height:0;z-index:3;}
  .gnav__panel-logo img{width:100%;filter:brightness(0) invert(1);}
}
/* 開いたら白い浅い×にモーフィング（Figmaの閉じる×に合わせる）。同一要素なので位置・サイズは三本線と完全一致 */
body.menu-open .hamburger span{background:#fff;}
body.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(18deg);}
body.menu-open .hamburger span:nth-child(2){opacity:0;}
body.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-18deg);}
/* 別要素の閉じる×は使わない（三本線がそのまま×になるため） */
.gnav__close{display:none!important;}

/* =========================================================
   ヒーロー（背面MV＋大TOWAITO＋タグライン＋前面インセット）
   ========================================================= */
/* MV：Figma実測（可視領域 1280×652）。背景imgと中央imgは別要素（FV切替アニメ対応） */
/* 画面が広くてもFV内にティッカーが収まるよう高さを制限（ビューポート−ティッカー高さ） */
.hero{position:relative;width:100%;aspect-ratio:1280/652;background:#d9d9d9;overflow:hidden;
  max-height:calc(100vh - 56px);max-height:calc(100svh - 56px);}
.hero__bg{position:absolute;inset:0;}
/* 背景：Figma配置（1500×1000 を X-110 Y-135）を%換算で再現＝寄り無し */
/* 背景は3枚をクロスフェード（全面カバー） */
.hero__bg-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1.4s ease,transform 8s ease-out;will-change:transform,opacity;}
/* 表示中の背景はスローにゆっくり拡大（Ken Burns）。transition制御で切替時の瞬間リセットを防止 */
.hero__bg-img.is-active{opacity:1;transform:scale(1.12);}
@media (prefers-reduced-motion:reduce){.hero__bg-img{transition:opacity 1.4s ease;transform:none;}.hero__bg-img.is-active{transform:none;}}
/* 背景画像だけに軽い黒マスク（文字のある左側をやや強め／中央インセットは上層なので影響なし） */
.hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.12) 45%,rgba(0,0,0,.04));}
/* 大TOWAITO（白）：X167。中央imgより前面（z上） */
/* 大ロゴ：スクロールしても上部にピン留め（fixed）しつつ縮小・フェード（BEAMS風） */
.hero__title{position:fixed;left:13%;top:-1%;width:73.8%;margin:0;line-height:0;z-index:48;pointer-events:none;
  transition:left .25s ease-out,top .25s ease-out,width .25s ease-out;will-change:left,top,width;}
/* スクロールで小さなヘッダーロゴに縮小しながら残る際、明るい背景では黒に */
.hero__title.is-dark .hero__title-rest,.hero__title.is-dark .hero__title-t{filter:brightness(0);}
/* 追随時の白いヘッダーバー（縮小ロゴの背景） */
/* バーは site-header(z50) より下＝ハンバーガーを隠さない／コンテンツより上。メイン背景色＋下線 */
.topbar{position:fixed;top:0;left:0;right:0;height:64px;background:var(--base);z-index:45;opacity:0;pointer-events:none;
  transition:opacity .3s ease;border-bottom:1px solid rgba(35,24,21,.16);}
.topbar.is-on{opacity:1;}

/* 下層ページ：ヘッダーロゴは左上、初期は白、スクロール（追随）で黒＋バー */
.site-logo img{transition:filter .3s ease;}
/* 下層ページ：初期は白（明るい背景でも見えるよう薄い影付き）、スクロール（追随）で黒 */
.company-page .site-header:not(.scrolled) .site-logo img,
.contact-page .site-header:not(.scrolled) .site-logo img,
.news-page .site-header:not(.scrolled) .site-logo img,
.news-detail-page .site-header:not(.scrolled) .site-logo img,
.media-page .site-header:not(.scrolled) .site-logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(80,80,80,.35));}
/* #4 指摘：スクロール追随時のヘッダーロゴは #505050（黒→濃グレー）。invert(.314)≒rgb(80,80,80) */
.site-header.scrolled .site-logo img{filter:brightness(0) invert(.314);}
/* 読み込み時：大ロゴがスケールインで現れる */
.hero__title-in{display:block;position:relative;width:100%;line-height:0;animation:heroLogoIn 1.3s cubic-bezier(.22,.61,.36,1) both;}
/* T と OWAITO をクリップ分割して重ね、頭文字Tだけ常時「拡大縮小」 */
.hero__title-rest{display:block;width:100%;height:auto;filter:brightness(0) invert(1);clip-path:inset(-35% 0 -35% 12%);}
/* #3 指摘：Tを回転させない。後で戻す可能性があるため animation はコメントアウトで保持 */
.hero__title-t{position:absolute;top:0;left:0;width:11.84%;height:auto;filter:brightness(0) invert(1);
  transform-origin:50% 50%;/* animation:tSway 7s ease-in-out infinite; */}
@keyframes heroLogoIn{from{opacity:0;transform:scale(1.1);}to{opacity:1;transform:scale(1);}}
/* 左右に2回揺れ → 1回転 → 逆回転 → 繰り返し（停止なし・BEAMS準拠） */
@keyframes tSway{
  0%{transform:rotate(0deg);}
  9%{transform:rotate(-10deg);}    /* 揺れ1：左 */
  18%{transform:rotate(10deg);}    /*      右 */
  27%{transform:rotate(-10deg);}   /* 揺れ2：左 */
  36%{transform:rotate(10deg);}    /*      右 */
  42%{transform:rotate(0deg);}     /* 中央へ */
  70%{transform:rotate(360deg);}   /* 1回転（正方向） */
  100%{transform:rotate(0deg);}    /* 逆回転で戻る（そのまま次の揺れへ・停止なし） */
}
@media (prefers-reduced-motion:reduce){.hero__title{transition:none;}.hero__title-in{animation:none;}.hero__title-t{animation:none;}}
/* 中央img：Figmaマスク枠 366×494 / X457 Y79（TOWAITOの背面） */
.hero__inset{position:absolute;left:35.7%;top:12.1%;width:33%;height:75.8%;z-index:3;}
.hero__inset img{width:100%;height:100%;object-fit:cover;object-position:center bottom;}
/* FV中央画像：3枚をクロスフェード */
.hero__inset-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:0;transition:opacity 1.4s ease;}
.hero__inset-img.is-active{opacity:1;}
/* FV切替ドット（縦・右） */
.hero__dots{position:absolute;right:3.5%;top:42%;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4;}
/* 非アクティブ＝小さな白丸／アクティブ＝白い輪郭の丸＋中心点（Figma準拠） */
.hero__dot{width:5px;height:5px;border-radius:50%;background:#fff;border:0;padding:0;margin:0;cursor:pointer;transition:.3s ease;position:relative;}
.hero__dot.is-active{width:30px;height:30px;background:transparent;border:1px solid #fff;}
.hero__dot.is-active::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);}
/* タグライン：白・左（X62 Y368） */
.hero__tagline{position:absolute;left:4.8%;top:56%;z-index:4;color:#fff;}
.hero__tagline-ja{margin:0 0 16px;font-size:clamp(17px,1.8vw,24px);line-height:1.7;letter-spacing:.08em;font-weight:500;}
.hero__tagline-en{margin:0;font-size:clamp(8px,.72vw,10px);line-height:1.95;letter-spacing:.04em;color:#fff;}
/* スクロール：白丸＋白点×4（右端 X1195） */
.hero__scroll{position:absolute;right:3.5%;top:42%;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4;cursor:pointer;}
.hero__scroll-dot{width:30px;height:30px;border:1px solid #fff;border-radius:50%;position:relative;overflow:hidden;}
/* スクロール誘導：丸の中のドットが下へ流れる動き */
.hero__scroll-dot::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);animation:scroll-cue 1.8s ease-in-out infinite;}
@keyframes scroll-cue{0%{transform:translate(-50%,-260%);opacity:0;}25%{opacity:1;}50%{transform:translate(-50%,-50%);opacity:1;}80%{transform:translate(-50%,180%);opacity:0;}100%{transform:translate(-50%,180%);opacity:0;}}
@media (prefers-reduced-motion:reduce){.hero__scroll-dot::after{animation:none;transform:translate(-50%,-50%);}}
.hero__scroll-dots{display:flex;flex-direction:column;gap:9px;}
.hero__scroll-dots i{width:5px;height:5px;border-radius:50%;background:#fff;}
/* 右下：黒帯（250×50 #000）＋CONTACT横流れ・白 */
.hero__contact{position:absolute;right:clamp(14px,1.5vw,26px);top:88%;width:min(19.5%,260px);min-width:200px;height:50px;
  background:#000;overflow:hidden;display:flex;align-items:center;z-index:4;
  color:#fff;font-family:var(--serif);font-size:14px;letter-spacing:.12em;}
.hero__contact-track{display:inline-flex;white-space:nowrap;animation:hero-contact 12s linear infinite;padding-left:24px;}
@keyframes hero-contact{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.hero__contact-track{animation:none;}}

/* =========================================================
   ニュースティッカー（赤帯）。静的verは横スクロール可、流れはアニメverで
   ========================================================= */
.ticker{background:#fff;color:var(--red);overflow:hidden;white-space:nowrap;}
.ticker__track{display:inline-flex;align-items:center;padding:14px 0;will-change:transform;
  animation:ticker-slide 32s linear infinite;}
.ticker__item{display:inline-block;font-size:13px;letter-spacing:.06em;padding:0 42px;
  border-right:0;font-weight:500;flex:0 0 auto;}
.ticker:hover .ticker__track{animation-play-state:paused;}
/* 前半(5件)＝後半(5件)の複製。-50%移動で継ぎ目なくループ */
@keyframes ticker-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* BOUサムネイル（スマホ）：横方向に1枚ずつスライド切替。各段でしばらく静止→次へスライド。
   末尾は先頭の複製なので-400%＝先頭に戻り継ぎ目なくループ */
@keyframes bou-slide{
  0%,15%{transform:translateX(0);}
  25%,40%{transform:translateX(-100%);}
  50%,65%{transform:translateX(-200%);}
  75%,90%{transform:translateX(-300%);}
  100%{transform:translateX(-400%);}
}
@media (prefers-reduced-motion:reduce){.bou__ticker{animation:none;}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;}}

/* =========================================================
   Philosophy（既存踏襲）
   ========================================================= */
.philosophy{position:relative;padding-top:100px;background:var(--base);}
.ph-stage{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;aspect-ratio:1280/1190;}
.ph-stage .abs{position:absolute;}
.ph-pair{display:contents;}   /* PC:ラッパーは透過（子はstage基準で従来通り絶対配置） */
.ph-person img,.ph-books img,.ph-sofa img{width:100%;height:100%;object-fit:cover;}
/* 画像：デザイン実測（frame1280基準） */
.ph-person{left:8%;top:1.7%;width:36.7%;height:55.5%;z-index:1;}     /* 毛布の女性（左） */
.ph-books{left:27%;top:38%;width:23%;height:28%;z-index:2;}  /* 本・雑誌（女性写真の右下に小さく重なる／Figma準拠） */
.ph-sofa{left:37.3%;top:74.4%;width:35.5%;height:25.5%;z-index:1;}   /* ブルー毛布のソファ（下） */
/* クリームの布地（右）：右端までフルブリード・右余白なし */
.ph-fabric{left:auto;right:min(0px,calc(640px - 50vw));top:41.8%;width:24.6%;height:40.8%;z-index:1;}
.ph-fabric img{width:100%;height:100%;object-fit:cover;}
/* 見出し：PHILOSOPHY（上）＋わたしたちの想い（下）を縦積み・右上 */
.ph-title{left:52.7%;top:2.9%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;z-index:3;}
.ph-title .en{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,62px);color:var(--red);line-height:1;}
.ph-title .ja{font-size:clamp(11px,1vw,13px);letter-spacing:.18em;color:var(--red);}
/* 右上：タグライン本文 */
.ph-tagline{left:52.9%;top:16.6%;width:38%;font-size:clamp(11px,1.05vw,14px);line-height:2.15;color:var(--ink);z-index:3;}
.ph-tagline p{margin:0;}
.ph-tagline p+p{margin-top:1.7em;}
/* 左下：towaito本文 */
.ph-copy{left:8%;top:74.6%;width:30%;font-size:clamp(11px,1.05vw,14px);line-height:2.15;color:var(--ink);z-index:3;}
.ph-copy p{margin:0;}
/* 左下：英文 */
.ph-desc{left:8%;top:92%;width:32%;margin:0;font-size:clamp(8px,.72vw,10px);line-height:1.95;color:#5a554f;z-index:3;}

/* =========================================================
   Our Brand（BRAND01 緑ブロック＋02-05グリッド）
   ========================================================= */
.brands{padding-top:110px;}
.brands .sec-title{margin-bottom:60px;}

/* BRAND 01 BOU：全幅の濃緑ブロック */
.bou{background:var(--green);color:#fff;margin-bottom:0;}
/* 左右は下揃え（#17指摘）。画像スライダー(左)と本文(右) */
.bou__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,90px) var(--pad);
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center;position:relative;}
/* #17 案B：左メイン画像。切替時、新しい画像が右（サムネ側＝隙間）から入りつつ拡大＆フェードインする。
   スライドは重ねて配置し、is-active だけ原寸表示。非アクティブは右へ縮小退避 */
/* #17 案B：メイン枠は重ね配置＋即時切替。動き（サムネ→メインへ拡大移動）は飛ぶクローンが担うので transition 無し */
.bou__slider{position:relative;overflow:hidden;aspect-ratio:470/600;}
.bou__slider-track{display:contents;}
.bou__slide{position:absolute;inset:0;opacity:0;}
.bou__slide.is-active{opacity:1;z-index:1;}
.bou__slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* サムネ→メインへ飛ぶクローン */
/* 飛んでくる画像はヘッダー(.site-header z-index:50)より下に。拡大移動中の一瞬だけヘッダー上に被るのを防ぐ */
.bou__fly{position:absolute;z-index:40;margin:0;object-fit:cover;pointer-events:none;transform-origin:top left;}
/* #12 指摘：BRAND 01 BOU ラベルは游ゴシック体（--sans）に */
.bou__no{margin:0 0 26px;font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);letter-spacing:.1em;}
/* 「〈 BOU 〉」ブランド名部分は游ゴシック（--sans） */
.bou__no-name{font-family:var(--sans);}
.bou__head{margin:0 0 15px;font-weight:500;font-size:1.3vw;letter-spacing:.06em;}
.bou__lead{margin:0 0 30px;font-size:13px;line-height:2.1;opacity:.95;max-width:520px;}
/* #17：サムネイル列（左大画像と同じインデックスで同時に横スライド）。4枚見え */
.bou__thumbs{overflow:hidden;margin-bottom:34px;}
.bou__thumbs-track{display:flex;column-gap:clamp(6px,.8vw,10px);transition:transform .82s cubic-bezier(.5,0,.2,1);will-change:transform;}
.bou__thumbs-track img{flex:0 0 auto;width:calc((100% - 3 * clamp(6px,.8vw,10px)) / 4);min-width:0;aspect-ratio:1/1.15;object-fit:cover;display:block;}
/* VIEW MORE（左・従来幅／幅が足りない時のみ縮小）とリンク群（右）を横並び */
/* SNS欄の高さをVIEW MOREボタンに揃える：行をstretchし、リンク群は上下に振り分け */
.bou__actions{display:flex;align-items:stretch;gap:clamp(12px,1.4vw,22px);flex-wrap:nowrap;}
.bou__actions .btn{flex:0 0 auto;width:clamp(170px,17vw,230px);max-width:230px;min-width:0;}
/* #5 指摘：AMAZON/INSTAGRAM/LINE はサムネ右端(=本文右端)へ寄せ、下線を短く */
/* gap:0＋space-betweenで、SNS自然高さをVIEW MORE以下にし、stretchでボタン高さに合わせる（VIEW MOREは伸ばさない） */
.bou__links{display:flex;flex-direction:column;justify-content:space-between;gap:0;flex:1 1 auto;margin-left:0;min-width:0;font-size:15px;}
.bou__links-row{display:flex;gap:20px;}
/* INSTAGRAM/LINEを等幅にして、AMAZON(50%-10px)と同じ幅に揃える */
.bou__links-row > .ulink{flex:1 1 0;min-width:0;}
.bou__links .ulink{min-width:96px;font-size:15px;}
/* PC：AMAZON(単独行)もINSTAGRAM/LINE(2分割)と同じ幅に揃える＝(100% - gap)/2 */
.bou__links > .ulink{width:calc(50% - 10px);}

/* ===== 案A（index2.php）：j-ortho Feature式 幅拡大スワイパー ===== */
/* 細いサムネが1本の帯に並び、アクティブなスライドだけ width が広がる＝移動しながら拡大 */
.bou2__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,90px) var(--pad);
  display:grid;grid-template-columns:minmax(0,60%) minmax(0,1fr);gap:clamp(30px,4vw,60px);align-items:center;}
.bou2__slider{overflow:hidden;}
.bou2__track{display:flex;column-gap:clamp(8px,1vw,14px);transition:transform .64s cubic-bezier(.19,1,.22,1);will-change:transform;}
/* 細めのサムネ（縦長サムネ）＋アクティブは幅広。高さ一定・width をトランジション＝移動しながら拡大 */
.bou2__slide{flex:0 0 auto;width:clamp(120px,15vw,210px);height:clamp(300px,34vw,430px);overflow:hidden;
  transition:width .64s cubic-bezier(.19,1,.22,1);}
.bou2__slide.is-active{width:clamp(300px,36vw,470px);}
.bou2__slide img{width:100%;height:100%;object-fit:cover;display:block;}

/* BRAND 02-05 */
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(35,24,21,.15);margin-top:0;}
/* 下余白はカード内（border-bottomの上）に付与。帯との距離は空けない */
.bcard{padding:clamp(34px,4vw,60px) clamp(20px,3vw,50px);padding-bottom:calc(clamp(34px,4vw,60px) + clamp(24px,2.6vw,44px));border-bottom:1px solid rgba(35,24,21,.15);text-align:center;}
.bcard:nth-child(odd){border-right:1px solid rgba(35,24,21,.15);}
.bcard__no{margin:0 0 20px;font-family:var(--serif);font-size:14px;letter-spacing:.12em;color:var(--muted);text-align:left;}
/* #6 指摘：ブランド名（KINESHIOTECH 等）は游ゴシック体（--sans）に */
.bcard__name{margin:0 0 22px;text-align:center;font-family:var(--sans);font-size:clamp(15px,1.5vw,18px);letter-spacing:.08em;}
.bcard__img{position:relative;aspect-ratio:320/400;max-width:330px;margin:0 auto 22px;}
.bcard__img img{width:100%;height:100%;object-fit:cover;}
.bcard__soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--serif);font-size:16px;letter-spacing:.1em;background:rgba(60,60,60,.28);}
.bcard .ulink{display:inline-flex;}
.bcard__spacer{display:block;height:1px;}

/* AND BUSINESS：全幅グレー帯（ノベルティ／OEM）。画像左＋テキスト右の行を縦積み。Figma背景=#A7A7A7 */
.business{background:#a7a7a7;}
/* 行は全幅（区切り線を全幅にするため）。中身は business__inner で中央寄せ */
.business__row + .business__row{border-top:1px solid rgba(255,255,255,.5);}
/* business画像の左を BRAND 02（KINESHIOTECH）画像の左に厳密に揃える。
   ・コンテナ幅/左右paddingを .container--brands と同一（max1280 / clamp(20,3vw,60)）に
   ・KINESHIOTECH画像(330px・列内で中央)の左 = コンテナ内容幅/4 - 165px
   ・business画像に margin-left:calc(25% - 165px) を与え同じ左位置に */
.business__inner{max-width:1280px;margin:0 auto;
  padding:clamp(40px,5vw,72px) clamp(20px,3vw,60px);
  display:flex;align-items:center;gap:clamp(28px,4vw,64px);}
.business__img{flex:0 0 clamp(300px,32vw,400px);margin-left:calc(25% - 165px);}
/* Figma実寸400×254（横長） */
.business__img{aspect-ratio:400/254;overflow:hidden;}
.business__img img{width:100%;height:100%;object-fit:cover;display:block;}
/* タイトル(business__no)は上端に単独で残し、見出し(business__head)・本文(business__lead)は
   まとめて下端へ寄せる（head に margin-top:auto を与えて head 以降を下へ押し下げる） */
/* inner が align-items:center のため body は中身の高さで止まる→align-self:stretch で行の高さまで伸ばし、lead の margin-top:auto を機能させる */
.business__body{flex:1 1 0;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;padding:15px 0;}
/* ラベル＝BRAND02(bcard__no)、名称＝KINESHIOTECH(bcard__name)と同じ字送り／サイズ関係。すべて白 */
.business__no{margin:0;font-family:'Bellefair',var(--serif);font-size:14px;letter-spacing:.12em;color:#fff;}
.business__no-name{font-family:var(--sans);font-size:clamp(15px,1.5vw,18px);letter-spacing:.08em;}
.business__head{margin:auto 0 8px;padding:10px 0;font-weight:600;font-size:18px;letter-spacing:.06em;color:#fff;}
.business__lead{margin:0;font-size:14px;color:#fff;}

/* =========================================================
   Journal（4枚）
   ========================================================= */
.journal{padding-top:100px;padding-bottom:90px;}
.journal .sec-title{margin-bottom:56px;}
/* #7 指摘：「読みもの」の字間を詰める（デザインデータ準拠。正確な値は要確認） */
.journal .sec-title.center .ja{letter-spacing:.1em;}
/* Journalスライダー（PC3件／SP2件・prev/nextで動く） */
.jtrack{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin-bottom:44px;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.jtrack::-webkit-scrollbar{height:0;}
/* min-width:0 でフレックス項目を基準幅に固定。タグ行が長くてもカード幅を広げない（サムネを均一な正方形に） */
.journal .jcard{flex:0 0 calc((100% - 3 * clamp(16px,2vw,28px)) / 4);min-width:0;scroll-snap-align:start;}
/* タグは3個で1行想定。念のため折り返し可にしておく（min-width:0併用でカード幅は不変） */
.jcard__tags{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px 12px;margin-bottom:10px;min-height:15px;line-height:1.3;}
.jcard__tags .tag{border:0;padding:0;color:var(--red);font-size:11px;letter-spacing:.05em;}
/* #8 指摘：サムネイルを正方形に */
/* 画像の縦横比に関わらず必ず正方形。imgをabsoluteで敷き詰めてコンテナを伸ばさせない */
.jcard__img{position:relative;aspect-ratio:1/1;margin-bottom:16px;overflow:hidden;}
.jcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* 画像なしカード：薄いグレー背景に「NO IMAGE」を中央表示 */
.jcard__img--empty{display:flex;align-items:center;justify-content:center;background:#f0f0f0;}
.jcard__img--empty span{font-size:12px;letter-spacing:.08em;color:#b3b3b3;}
.jcard__title{font-size:13px;line-height:1.6;margin:0 0 3px;}
.jcard__date{font-size:11px;color:var(--muted);letter-spacing:.04em;}
/* ARCHIVEナビ（Figma実測：Bellefair / ARCHIVE18px・NEXT/BACK14px / 字間0 / 赤三角 / 赤い細線291px幅25px下） */
.jnav{display:flex;width:fit-content;margin:0 auto;align-items:baseline;justify-content:space-between;gap:clamp(28px,5vw,56px);color:var(--red);position:relative;}
.jnav__main{font-family:'Bellefair',var(--serif);font-weight:400;font-size:18px;letter-spacing:0;color:var(--red);line-height:1;}
.jnav__side{display:inline-flex;align-items:center;gap:8px;font-family:'Bellefair',var(--serif);font-weight:400;font-size:14px;letter-spacing:.02em;color:var(--red);line-height:1;background:none;border:0;padding:0;cursor:pointer;}
/* スクロール端では該当矢印を非表示（visibilityで幅を保持し、ARCHIVEの中央位置を維持） */
.jnav__side.is-off{visibility:hidden;pointer-events:none;}
.jnav__tri{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--red);display:inline-block;}
.jnav__tri--left{border-left:0;border-right:6px solid var(--red);}
/* トップ：赤い細線（幅=内容/約291px・0.5px相当・文字の25px下） */
.journal .jnav,.ndetail .jnav{padding-bottom:25px;}
.journal .jnav::after,.ndetail .jnav::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red);transform:scaleY(.5);transform-origin:bottom;}
/* 詳細ページ用の長い線矢印（Image#6） */
.jnav .arrow{width:clamp(50px,6vw,80px);height:1px;background:var(--red);position:relative;flex:0 0 auto;}
.jnav .arrow::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1.5px solid var(--red);border-right:1.5px solid var(--red);transform:rotate(45deg);}
.jnav .arrow--left::after{right:auto;left:0;transform:rotate(-135deg);}

/* タグ（汎用・Journal以外でも使えるよう残す） */
.tag{white-space:nowrap;}

/* =========================================================
   全幅バンド写真
   ========================================================= */
.band{width:100%;aspect-ratio:1280/300;}
.band img{width:100%;height:100%;object-fit:cover;}

/* =========================================================
   Media
   ========================================================= */
.media{padding-top:90px;padding-bottom:90px;}
.media__inner{display:grid;grid-template-columns:40fr 60fr;gap:40px;align-items:start;}
.media__more-sp{display:none;} /* PCではmedia__head内のボタンを使用（スマホのみ記事下に表示） */
.media__head{display:flex;flex-direction:column;gap:clamp(56px,8vw,104px);align-items:flex-start;}
.media__list{}
/* 記事の区切り線は黒（Figma準拠。赤ではない） */
.media__row{display:flex;gap:40px;padding:18px 0;border-bottom:1px solid var(--ink);color:var(--ink);transition:color .2s;}
.media__row:first-child{border-top:1px solid var(--ink);}
.media__row:hover{color:var(--red);}
.media__date{flex:0 0 130px;font-size:12px;letter-spacing:.05em;}
.media__txt{font-size:13px;}

/* =========================================================
   Company（既存踏襲）
   ========================================================= */
.tcompany{position:relative;padding:60px 0 120px;}
.tcompany__stage{position:relative;width:100%;aspect-ratio:1280/600;}
.tcompany__stage .abs{position:absolute;}
.tcompany__img{left:32%;top:0;width:35.9%;height:100%;object-fit:cover;z-index:1;}
/* 写真を少しズラして重ねるスタック（1枚ずつ現れる） */
.tcompany__stack{left:32%;top:0;width:35.9%;height:100%;z-index:1;}
.tcompany__card{position:absolute;inset:0;}
/* #9 指摘：重ね写真の影を削除 */
.tcompany__card img{width:100%;height:100%;object-fit:cover;display:block;}
/* 上側に少し覗く自然なファン（背＝左傾き／中＝右傾き／前＝水平・最前面） */
/* 無造作に重ねた乱雑な見せ方（角度・向き・ズレをバラつかせる。全体は右下へはみ出す） */
.tcompany__card:nth-child(1){transform:translate(1px,6px) rotate(3deg);}
.tcompany__card:nth-child(2){transform:translate(5px,3px) rotate(-2.5deg);}
.tcompany__card:nth-child(3){transform:translate(4px,-3px) rotate(1deg);}
.js-fade .tcompany__stack.reveal{opacity:1;}
/* 上から写真を重ねて置くように（上方＋やや大きめ→settle）。transitionは表示側のみ＝初期の逆再生防止 */
.js-fade .tcompany__card img{opacity:0;transform:translateY(-64px) scale(1.05);}
.js-fade .tcompany__stack.is-in .tcompany__card img{opacity:1;transform:none;transition:opacity 1.1s ease,transform 2s cubic-bezier(.2,.7,.25,1);}
/* 1枚ずつ間隔を広めに（重ねていく間） */
.js-fade .tcompany__stack.is-in .tcompany__card:nth-child(1) img{transition-delay:.2s;}
.js-fade .tcompany__stack.is-in .tcompany__card:nth-child(2) img{transition-delay:1.4s;}
.js-fade .tcompany__stack.is-in .tcompany__card:nth-child(3) img{transition-delay:2.6s;}
@media (prefers-reduced-motion:reduce){.js-fade .tcompany__card img{opacity:1!important;transform:none!important;transition:none;}}
.tcompany__title{left:15%;top:44%;z-index:2;gap:4px;}
.tcompany__title .en{font-family:var(--serif);font-size:clamp(40px,4.7vw,60px);color:var(--red);}
.tcompany__title .ja{font-size:12px;letter-spacing:.18em;color:var(--red);}
.tcompany__txt{left:65.6%;top:22%;width:26%;z-index:2;}
.tcompany__txt p{margin:0;font-size:clamp(12px,1.1vw,14px);line-height:2.1;}
.tcompany__btn{left:65.6%;top:55%;z-index:2;max-width:300px;}
.tcompany__note{left:9.4%;bottom:0;margin:0;font-size:10px;line-height:1.9;color:#505050;letter-spacing:.03em;z-index:2;}

/* =========================================================
   Contact（全幅写真）
   ========================================================= */
section.contact{position:relative;padding:70px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.contact__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
/* Figma：写真に黒35%のオーバーレイ（Rectangle 55） */
section.contact::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:1;}
.contact__inner{position:relative;z-index:2;text-align:center;color:#fff;padding:40px 20px;}
.contact__inner .sec-title{margin-bottom:28px;}
.contact__lead{margin:0 0 40px;font-size:14px;line-height:2.2;text-shadow:0 1px 10px rgba(0,0,0,.3);}
.contact__inner .btn{margin:0 auto;max-width:340px;}

/* =========================================================
   フッター（赤）
   ========================================================= */
.footer{background:var(--red);color:#fff;padding:50px 0 34px;text-align:center;}
.footer-logo__img{display:inline-block;width:clamp(220px,22vw,278px);height:auto;
  filter:brightness(0) invert(1);}
/* ロゴ下の全幅区切り線（Line 26） */
.footer-line{width:100%;height:1px;background:rgba(255,255,255,.45);margin:34px 0 30px;}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:18px clamp(18px,2.6vw,40px);
  margin:0 auto 34px;max-width:1050px;padding:0 20px;}
.footer-nav a{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.footer-nav .en{font-family:var(--serif);font-size:clamp(13px,1.15vw,16px);letter-spacing:.04em;}
.footer-nav .ja{font-size:10px;letter-spacing:.1em;opacity:.95;}
.footer-copy{margin:0;font-size:10px;letter-spacing:.06em;opacity:.95;}

/* =========================================================
   スクロールフェード（アニメ無しverでは無効＝常に表示）
   ・.fade は初期非表示にしない。anime.css 側で初期opacity:0にする
   ========================================================= */

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:900px){
  /* BRAND 02,03 の padding調整はPCのみ。タブレット以下は通常paddingへ戻す */
  .container--brands{padding-left:var(--pad);padding-right:var(--pad);}
  .bou__inner{grid-template-columns:1fr;gap:30px;}
  .bou__photo{max-width:360px;}
  .jgrid{grid-template-columns:1fr 1fr;gap:20px 16px;}
  .media__inner{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:680px){
  .hero{min-height:83vh;}
  .hero__inner{height:78vh;min-height:480px;padding:0 20px;}
  /* .hero__title の位置・サイズはJSで制御（中央縮小の追随） */
  .hero__tagline{left:20px;bottom:14%;}
  .hero__tagline-ja{font-size:22px;}
  .hero__inset{left:50%;right:auto;top:auto;bottom:18%;height:65%;transform:translateX(-50%);width:70%;max-width:none;}
  /* CONTACTティッカー：スマホは中央寄せ＋幅・高さ・位置を指定 */
  .hero__contact{left:50%;right:auto;top:88%;transform:translateX(-50%);width:70%;max-width:none;min-width:0;height:40px;}
  .hero__scroll{display:none;}
  /* スマホは追随前もハンバーガーを上寄せ（ロゴと高さを揃える） */
  .hamburger{top:15px;}
  /* 下層ページの追随前ロゴもハンバーガーと高さを揃える */
  .site-logo{top:14px;}
  /* 下層ページ（常時 .scrolled）のロゴ：スマホもトップのスクロール後（左3%／上18px／幅34vw）に合わせる */
  .site-header.scrolled .site-logo{top:18px;left:3%;}
  .site-header.scrolled .site-logo img{width:34vw;}

  /* 各種VIEW MOREボタン：スマホはpaddingを抑え、セクション内で幅100% */
  .btn{padding:15px 20px;max-width:none;}
  /* スマホ：contactは親(.contact__inner)がflex中央寄せで内容幅に縮むため全幅化＝ボタンも全幅に */
  .contact__inner{width:100%;}
  .contact__inner .btn{max-width:none;}

  .brands{padding-top:70px;}
  .brands .sec-title{margin-bottom:25px;}
  /* BUSINESS帯（SP）：画像を上、テキストを下に縦積み */
  .business__inner{flex-direction:column;gap:22px;padding:40px 20px;}
  .business__img{flex-basis:auto;max-width:400px;margin:0 auto;width:100%;}
  .bou__head{font-size:16px;margin:0 0 5px;}
  /* BOU（SP）：位置関係はPCと同じ（左メイン画像＋右サムネ）。サムネは1枚表示にし、本文・アクションは下段へ全幅で回す。
     bou__body を display:contents にして中の要素を bou__inner のグリッドへ昇格させ、エリア配置する */
  .bou__inner{display:grid;grid-template-columns:1.8fr 1fr;column-gap:10px;row-gap:0;
    grid-template-areas:"slider thumbs" "no no" "head head" "lead lead" "actions actions";
    align-items:start;padding:clamp(40px,10vw,56px) 20px;}
  .bou__body{display:contents;}
  .bou__slider{grid-area:slider;}
  .bou__thumbs{grid-area:thumbs;align-self:end;margin-bottom:0;}
  .bou__no{grid-area:no;margin:26px 0 14px;}
  .bou__head{grid-area:head;margin:0 0 16px;}
  .bou__lead{grid-area:lead;margin:0 0 26px;max-width:none;}
  .bou__actions{grid-area:actions;}
  /* サムネは1枚だけ表示（2枚目は見切れさせない） */
  .bou__thumbs-track img{width:100%;aspect-ratio:1/1.15;}
  .bou__slide{flex-basis:100%;}
  .bou__actions{flex-direction:column;align-items:stretch;gap:22px;max-width:none;}
  /* リンクはスマホでAMAZON/INSTAGRAM/LINEを均等3列で横並び */
  .bou__links{flex-direction:row;gap:15px;margin-left:0;}
  .bou__links-row{display:contents;}
  .bou__links .ulink{flex:1 1 0;min-width:0;gap:6px;font-size:12px;letter-spacing:.02em;}
  /* 案A（bou2）SP：帯を全幅で上、本文は下。スライド幅とアクティブ幅を縮小 */
  .bou2__inner{display:block;padding:clamp(40px,10vw,56px) 20px;}
  .bou2__slide{width:clamp(52px,14vw,80px);height:clamp(300px,80vw,420px);}
  .bou2__slide.is-active{width:clamp(200px,64vw,320px);}
  /* brands：スマホは1列。境界線は画面端から端まで（コンテナ余白を打ち消して全幅化） */
  .bgrid{grid-template-columns:1fr;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));}
  .bcard:nth-child(odd){border-right:0;}
  /* BRAND番号はスマホで中央寄せ */
  .bcard__no{text-align:center;}
  /* スマホ：business番号の下余白／見出しを下端寄せ／カード下paddingを縮小 */
  .business__no{margin-bottom:15px;}
  /* スマホは見出し・本文をまとめて下端寄せ（head に margin-top:auto、lead は auto を解除） */
  .business__head{margin:auto 0 0;}
  .business__lead{margin:0;}
  .business__body{padding:0;}
  .bcard{padding-bottom:clamp(34px,4vw,60px);}

  /* Journal：スマホは2×2グリッド。横スクロールで縦2枚（1列）ずつ送る */
  .jtrack{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
    grid-auto-columns:calc((100% - clamp(16px,2vw,28px)) / 2);
    column-gap:clamp(16px,2vw,28px);row-gap:30px;}
  /* スマホは上下padding 70px */
  .journal{padding-top:70px;padding-bottom:70px;}
  .journal .jcard{flex:none;width:auto;scroll-snap-align:start;}
  .journal .sec-title{margin-bottom:20px;}
  .jcard__tags{margin-bottom:5px;}
  /* スマホ：帯画像は拡大クロップして高さを確保 */
  .band{aspect-ratio:auto;height:150px;}
  /* news/media一覧 スマホのpadding-top */
  .npage,.mpage{padding-top:70px;}
  /* Our Story（スマホ）：吸着位置と滞在量を控えめに。カード高はヘッダー分を差し引いて画面内に収める */
  .cstory{--cs-base:64px;--cs-strip:clamp(48px,7vh,72px);--cs-travel:clamp(240px,52vh,520px);}

  /* Philosophy：積み上げ */
  .philosophy{padding:30px 20px 0;}
  .br-sp{display:inline;}
  .br-pc{display:none;}
  .ph-stage{aspect-ratio:auto;display:flex;flex-direction:column;max-width:none;}
  .ph-stage>.abs{position:static!important;width:auto!important;height:auto!important;top:auto!important;left:auto!important;right:auto!important;}
  .ph-person,.ph-books{aspect-ratio:3/4;}
  .ph-sofa{aspect-ratio:3/2;}
  /* 画像#3再現の並び順：人物+本 → PHILOSOPHY → タグライン → ソファ+布 → コピー → 英文 */
  .ph-pair{display:block;position:relative;}
  .ph-pair--top{order:0;margin:0 0 80px;}
  .ph-title{order:1;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:22px;}
  .ph-tagline{order:2;margin-bottom:30px;}
  .ph-pair--sofa{order:3;margin:15px 0 0 38px;}
  .ph-copy{order:4;width:auto;margin-top:28px;margin-bottom:24px;}
  .ph-desc{order:5;margin:0 0 24px;}
  /* 人物（ベース）＋本（右下に重ねる） */
  .ph-person{position:relative!important;left:0!important;width:76%!important;height:auto!important;aspect-ratio:3/4;margin:0!important;}
  .ph-books{position:absolute!important;right:0;bottom:-12%;left:auto!important;top:auto!important;width:38%!important;height:auto!important;aspect-ratio:3/4;z-index:2;margin:0!important;}
  /* ソファ（ベース＝左寄り・前面）＋ファブリック（右端に寄せて背面・下端に飛び出す） */
  .ph-sofa{position:relative!important;left:auto!important;top:auto!important;width:90%!important;height:auto!important;aspect-ratio:3/2;z-index:2;margin:0!important;}
  .ph-fabric{position:absolute!important;right:-20px;bottom:30%;top:auto!important;left:auto!important;width:32%!important;height:auto!important;aspect-ratio:24/40;z-index:0;margin:0!important;}
  /* BOUボタンはスマホで幅100% */
  .bou__actions .btn{width:100%;max-width:none;}

  /* Company：積み上げ */
  /* 画像#17：タイトル左上 → 写真 → 文章が写真下部に重なる → 英文 → VIEW MORE全幅 */
  .tcompany{padding:30px 20px 55px;}
  .tcompany__stage{aspect-ratio:auto;display:flex;flex-direction:column;}
  .tcompany__stage .abs{position:static;width:auto!important;height:auto;}
  .tcompany__title{order:0;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 18px;}
  .tcompany__img{order:1;width:76%!important;max-width:330px;aspect-ratio:460/600;margin:0 auto;}
  .tcompany__stage .tcompany__stack{order:1;position:relative!important;left:auto!important;top:auto!important;width:76%!important;max-width:330px;aspect-ratio:460/600;height:auto!important;margin:0 auto;}
  /* 文章：写真下部に重ねる（左寄せ・前面） */
  .tcompany__txt{order:2;position:relative;z-index:3;margin:-25px 0 0;}
  .tcompany__txt p{font-size:15px;line-height:2;color:var(--ink);}
  .tcompany__note{order:3;margin:16px 0 0;}
  /* .absでstatic化されると .btn::before の基準が上位要素になり全面が赤くなる→relativeで内包（.absより詳細度を上げる） */
  .tcompany__stage .tcompany__btn{order:4;display:inline-flex;position:relative;left:auto;top:auto;right:auto;bottom:auto;width:100%!important;max-width:none;margin-top:26px;overflow:hidden;}

  .media{padding:60px 0;}
  /* スマホもMEDIAアーカイブと同様に日付＋タイトルを横並び */
  .media__row{flex-direction:row;align-items:baseline;gap:14px;}
  .media__date{flex:0 0 auto;min-width:0;}
  .media__txt{flex:1 1 auto;}
  /* スマホ：VIEW MOREを記事の下に（ヘッダー内のボタンは隠す） */
  .media__head .btn{display:none;}
  .media__more-sp{display:inline-flex;margin-top:28px;}

  /* フッターナビ：スマホは3列グリッドで左揃え（列がきれいに揃う・改行させない） */
  .footer-nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;justify-items:start;gap:15px clamp(12px,3.5vw,24px);max-width:none;margin:0;padding:0 12px;}
  .footer-nav a{align-items:flex-start;text-align:left;gap:4px;}
  .footer-nav .en{font-size:12px;white-space:nowrap;}
  /* コピーライトとの間隔をあける */
  .footer-copy{margin-top:28px;}

  /* Contactは最小高さを解除（内容なりの高さに）。※Company系(.chero/.cprof/.cmsg)は
     ベース定義がこのブロックより後ろにあるため、下部の専用@mediaで上書きする */
  section.contact{min-height:0;padding:0;}
}

/* =========================================================
   Company ページ（new/company.html）※TOWAITO_COMPANY 準拠
   ========================================================= */
.company-page{background:var(--base);}

/* ヘッダー：赤帯上は白ロゴ（スクロールでベージュ帯＝既定の濃色に戻る／ハンバーガー色は共通ルールで制御） */
.company-page .site-header.on-photo:not(.scrolled) .site-logo img{filter:brightness(0) invert(1);}

/* ヒーロー：赤帯タイトル（白・中央） */
.chero{background:var(--red);display:flex;align-items:center;justify-content:center;
  min-height:clamp(300px,38vw,350px);padding:clamp(110px,13vw,150px) 20px clamp(46px,6vw,70px);}
.chero__title{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:#fff;}
.chero__title .en{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:.04em;}
.chero__title .ja{font-size:clamp(11px,1vw,13px);letter-spacing:.18em;}
/* 全幅3枚 */
.chero-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.chero-imgs img{width:100%;aspect-ratio:427/620;object-fit:cover;display:block;}

/* Profile/History：見出しは縦積み（英語の下に日本語） */
.cprof .sec-title,.chist .sec-title{flex-direction:column;align-items:flex-start;gap:4px;}
.cprof .sec-title .ja,.chist .sec-title .ja{letter-spacing:.18em;}

/* Profile：左＝見出し＋写真／右＝赤線テーブル */
.cprof{padding-top:clamp(80px,10vw,130px);}
.cprof__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,56%);gap:clamp(30px,5vw,80px);align-items:start;}
/* 左カラムを表の高さまで伸ばし、画像を下端に揃える（PC）。画像幅は80% */
.cprof__left{align-self:stretch;display:flex;flex-direction:column;}
.cprof__img{margin-top:auto;width:90%;aspect-ratio:345/240;}
.cprof__img img{width:100%;height:100%;object-fit:cover;display:block;}
.cprof__table{width:100%;border-collapse:collapse;}
.cprof__table th,.cprof__table td{text-align:left;vertical-align:top;padding:20px 0;border-bottom:1px solid var(--red);font-size:clamp(12px,1.05vw,14px);line-height:2;color:var(--ink);font-weight:500;}
.cprof__table th{width:clamp(110px,14vw,170px);letter-spacing:.06em;}

/* ===== Our Story：relilla EPISODE を忠実移植（sticky階段積み重ね）=====
   ・各 item は position:sticky。上端を段状(0/step/2step)にずらす。
   ・item の高さに 100vh を内包＝スクロール滞在を作る（背が高いので覆われても末尾まで残り、積み重なる）。
   ・可視カード(.cstory__card)は item 上部に配置し、下側の余剰は overflow で隠す。
   ・.cstory__stack の負の margin-bottom で、背の高い item が生む「下の巨大余白」を回収する。
   ・覆われると .is-fold で大番号→小ラベルへ入れ替わる。 */
.cstory{
  padding-top:clamp(90px,11vw,140px);
  --cs-step:80px;    /* 段差＝バンド高さ */
  --cs-pad:56px;     /* item 上部の余白＝先頭カードをヘッダーのすぐ下へ */
  --cs-cap:860px;    /* カードの最大高さ（現在は未使用。復帰する場合は下の --cs-vh を min(100vh,var(--cs-cap)) に戻す） */
  /* 修正(2026-09-19)：860px キャップで画面下にベージュの空き帯が出るため、カードを常にビューポート高いっぱいに満たす。
     ※戻す場合は次行を  --cs-vh:min(100vh, var(--cs-cap));  に差し替え */
  --cs-vh:100vh;     /* 基準の高さ＝ビューポート高（カード下端を画面下端に揃え、下の空きを無くす） */
  --cs-hold:44vh;    /* 3段そろった状態を保持するスクロール量（スタック末尾に付与） */
}
.cstory>.container .sec-title{margin-bottom:clamp(40px,6vw,80px);}
/* スタック末尾に「実体のあるスペーサー(::after)」を足して sticky の吸着範囲を延長＝
   全カードが吸着し続け、01+02+03が並んだ状態を hold 分だけ保持する。
   負マージンは使わない（次セクションを引き上げると保持中に重なるため）。保持後は自然に次セクションへ。 */
.cstory__stack{position:relative;}
.cstory__stack::after{content:"";display:block;height:var(--cs-hold);}
/* item：sticky。高さ = 100vh - i*step（下端をビューポート下に揃える）。上端 = i*step。 */
.cstory__item{position:sticky;box-sizing:border-box;padding-top:var(--cs-pad);pointer-events:none;}
.cstory__item:nth-child(1){top:0;height:var(--cs-vh);}
.cstory__item:nth-child(2){top:var(--cs-step);height:calc(var(--cs-vh) - var(--cs-step));}
.cstory__item:nth-child(3){top:calc(2 * var(--cs-step));height:calc(var(--cs-vh) - 2 * var(--cs-step));}
/* 可視カード＝上端(i*step+pad)から画面下まで（本文も画面内）。 */
/* 修正(2026-09-19)：height は 100% でよい（item の padding-top で既に下がっているため、
   ここで --cs-pad を再度引くと pad 分だけカード下端が画面下端に届かず、下にベージュの空き帯が出る＝二重減算バグ）。
   ※戻す場合は height:100% を  height:calc(100% - var(--cs-pad))  に差し替え */
.cstory__card{position:relative;height:100%;overflow:hidden;color:#fff;pointer-events:auto;}
.cstory__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* 可読性向上：文字が乗る左側を少しだけ黒くマスク */
.cstory__card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;}
.cstory__card.is-dark::after{background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.16) 58%,rgba(0,0,0,.06));}
/* テキスト用の中央寄せコンテナ（他セクションと左位置を揃える） */
.cstory__inner{position:absolute;inset:0;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;}
.cstory__card.is-dark .cstory__head,.cstory__card.is-dark .cstory__txt{text-shadow:none;}
/* 大番号（アクティブ時）＝カード上部。覆われると消える。 */
.cstory__num{position:absolute;top:36px;left:var(--pad);display:flex;align-items:flex-end;gap:16px;
  transition:opacity .4s ease,transform .4s cubic-bezier(.165,.84,.44,1);}
.cstory__num-no{font-family:var(--serif);font-weight:500;font-size:clamp(48px,7vh,92px);line-height:1;}
.cstory__num-en{font-family:var(--helv);font-style:normal;font-size:11px;letter-spacing:.18em;padding-bottom:12px;}
/* 小ラベル（覆われた時）＝バンド(上部 step 高)内。大番号と同じ left・同じ並びで入れ替わる */
.cstory__cover{position:absolute;top:0;left:var(--pad);height:var(--cs-step);display:flex;align-items:center;gap:16px;
  opacity:0;pointer-events:none;transform:translateY(-24px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.165,.84,.44,1);}
.cstory__cover-no{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.6vh,40px);line-height:1;}
.cstory__cover-en{font-family:var(--helv);font-style:normal;font-size:11px;letter-spacing:.18em;}
/* 切替：大番号→小ラベル */
.cstory__item.is-fold .cstory__num{opacity:0;transform:translateY(24px);}
.cstory__item.is-fold .cstory__cover{opacity:1;transform:translateY(0);}
/* 本文＝カード下部 */
.cstory__info{position:absolute;bottom:min(60px,7vh);left:var(--pad);width:min(560px,calc(100% - var(--pad) * 2));}
.cstory__head{margin:0 0 18px;font-weight:500;font-size:clamp(17px,1.9vw,24px);letter-spacing:.05em;}
.cstory__txt{margin:0;font-size:clamp(12px,1.05vw,14px);line-height:1.9;}

/* Message：中央見出し／本文左＋写真右 */
.cmsg{padding-top:8vw;padding-bottom:8vw;}
.cmsg .sec-title{margin-bottom:clamp(40px,5vw,64px);}
.cmsg__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:clamp(30px,5vw,70px);align-items:start;}
.cmsg__head{margin:0 0 30px;font-weight:500;font-size:clamp(18px,2.2vw,26px);line-height:1.7;letter-spacing:.04em;color:var(--ink);}
.cmsg__txt p{margin:0 0 22px;font-size:clamp(12px,1.05vw,14px);line-height:2;color:var(--ink);}
.cmsg__sign{margin-top:30px;letter-spacing:.08em;}
.cmsg__photo{aspect-ratio:490/510;}
.cmsg__photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* History：左見出し＋右年表（細い線） */
/* History：Figma準拠で背景を淡いクリーム(#FCEFE3)に。::beforeで全幅バンド（画面端まで）、内容は中央維持 */
.chist{padding-top:8vw;padding-bottom:8vw;position:relative;}
.chist::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:#FCEFE3;z-index:0;}
.chist>*{position:relative;z-index:1;}
.chist__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,56%);gap:clamp(30px,5vw,80px);align-items:start;}
.chist__row{display:flex;gap:clamp(24px,4vw,60px);padding:20px 0;border-bottom:1px solid var(--red);font-size:clamp(12px,1.05vw,14px);color:var(--ink);}
.chist__yr{flex:0 0 auto;min-width:65px;letter-spacing:.05em;}

@media (max-width:900px){
  .cprof__grid,.chist__grid{grid-template-columns:1fr;gap:24px;}
  .cprof__img{max-width:420px;}
  .cmsg__body{grid-template-columns:1fr;}
  .cmsg__photo{max-width:420px;}
  .cstory__body{max-width:none;}
}
/* .chero-imgs はスマホでも3列横並びを維持（縦長のまま） */

/* Company系のスマホ調整（ベース定義より後ろに置いて確実に上書き） */
@media (max-width:680px){
  /* CHero：スマホは最小高さ解除＋上パディングを110→80に */
  .chero{min-height:0;padding-top:80px;}
  /* プロフィール画像：スマホは幅90%・中央寄せ（縦横比は維持） */
  .cprof__img{max-width:none;width:85%;margin:20px auto 0;}
  /* 会社情報テーブル：スマホは行間を詰め、項目名幅を90pxに */
  .cprof__table th,.cprof__table td{padding:15px 0;}
  .cprof__table th{width:90px;}
  /* MESSAGE/History スマホの上下padding */
  .cmsg,.chist{padding-top:60px;padding-bottom:60px;}
  /* 代表メッセージ写真：本文の上（MESSAGE見出し直下）へ・幅90%中央寄せ・下余白なし */
  .cmsg__photo{order:-1;width:85%;max-width:420px;margin:0 auto;}
  /* Journal詳細：見出し・メタはスマホで左寄せ */
  .ndetail__head{text-align:left;}
  .ndetail__meta{justify-content:flex-start;}
}

/* =========================================================
   Journal 一覧（new/news.html）
   ========================================================= */
.news-page{background:var(--base);}
.npage{padding-top:10vh;padding-bottom:clamp(90px,11vw,140px);}
.npage .sec-title{margin-bottom:clamp(40px,5vw,60px);}
/* #14 指摘：フィルタ下に区切り線を追加（全幅） */
.nfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;padding-bottom:clamp(18px,2.2vw,26px);border-bottom:1px solid rgba(35,24,21,.15);margin-bottom:clamp(40px,5vw,64px);}
.nfilter__item{font-size:12px;letter-spacing:.06em;color:var(--muted);}
/* #13 指摘：アクティブタブの下線（アンダーライン）を削除。色のみで区別 */
.nfilter__item.is-active{color:var(--red);}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px) clamp(20px,2.4vw,36px);margin-bottom:clamp(50px,6vw,80px);}
/* 記事が無いときのメッセージ。グリッド全列にまたがらせて自然な幅で1行表示にする */
.nempty{grid-column:1 / -1;white-space:nowrap;}
/* min-width:0 でグリッド項目を1frトラックに固定。タグ行が長くても列幅を広げない（サムネを均一な正方形に） */
.ncard{display:flex;flex-direction:column;min-width:0;}
/* #15 指摘：一覧ページのサムネイルを正方形に */
/* 画像の縦横比に関わらず必ず正方形。imgをabsoluteで敷き詰めてコンテナを伸ばさせない */
.ncard__img{position:relative;aspect-ratio:1/1;margin-bottom:16px;background:#d9d9d9;overflow:hidden;}
.ncard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* 画像なしカード：薄いグレー背景に「NO IMAGE」を中央表示 */
.ncard__img--empty{display:flex;align-items:center;justify-content:center;background:#f0f0f0;}
.ncard__img--empty span{font-size:12px;letter-spacing:.08em;color:#b3b3b3;}
/* タグは3個で1行想定。念のため折り返し可にしておく（min-width:0併用でカード幅は不変） */
.ncard__tags{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px 12px;margin-bottom:10px;min-height:15px;line-height:1.3;}
.ncard__tags .tag{color:var(--red);font-size:11px;letter-spacing:.05em;}
.ncard__title{font-size:13px;line-height:1.7;margin:0 0 10px;color:var(--ink);}
.ncard__date{font-size:11px;color:var(--muted);letter-spacing:.04em;}

.npager{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,32px);}
.npager__arrow{width:26px;height:26px;border:1px solid var(--red);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .2s;}
.npager__arrow:hover{background:rgba(216,33,13,.08);}
.npager__arrow .tri{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--red);}
.npager__arrow--left .tri{border-left:0;border-right:6px solid var(--red);}
.npager__nums{display:inline-flex;gap:16px;font-family:'Bellefair',var(--serif);font-size:16px;}
.npager__nums a{color:var(--red);padding-bottom:2px;border-bottom:1px solid transparent;}
.npager__nums a.is-active{border-color:var(--red);}

/* =========================================================
   Journal 詳細（new/news-detail.html）
   ========================================================= */
.news-detail-page{background:var(--base);}
.ndetail{padding-top:clamp(120px,14vw,180px);padding-bottom:clamp(70px,9vw,120px);max-width:900px;}
.ndetail__head{text-align:left;margin-bottom:clamp(30px,4vw,50px);}
.ndetail__title{margin:0 0 20px;font-weight:500;font-size:clamp(18px,2.2vw,28px);line-height:1.6;letter-spacing:.04em;color:var(--ink);}
.ndetail__meta{display:flex;align-items:center;justify-content:flex-start;gap:20px;}
.ndetail__tags{display:flex;gap:12px;}
.ndetail__tags .tag{color:var(--red);font-size:11px;letter-spacing:.05em;}
.ndetail__date{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.ndetail__hero{aspect-ratio:900/560;margin:0 0 clamp(40px,5vw,64px);}
.ndetail__hero img{width:100%;height:100%;object-fit:cover;}
.ndetail__body{font-size:clamp(12px,1.05vw,14px);line-height:2.2;color:var(--ink);margin-bottom:clamp(50px,6vw,80px);}
.ndetail__body p{margin:0 0 1.8em;}
.ndetail__share{display:flex;align-items:center;justify-content:center;gap:16px;padding:clamp(34px,4.5vw,54px) 0;border-top:1px solid rgba(35,24,21,.18);border-bottom:1px solid rgba(35,24,21,.18);margin-bottom:clamp(44px,5vw,70px);}
.ndetail__share-label{font-family:var(--helv);font-size:12px;letter-spacing:.16em;color:var(--muted);margin-right:6px;}
/* SHAREアイコン：リンク／X＝フラット、Facebook＝塗り円（Figma準拠） */
.ndetail__share .sns{display:inline-flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink);transition:opacity .2s;}
.ndetail__share .sns:hover{opacity:.6;}
.ndetail__share .sns{cursor:pointer;}
.ndetail__share .sns.is-copied{color:var(--red);}
.ndetail__share .sns--fb{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;}
/* 詳細のARCHIVEナビ：トップと同じ ◄NEXT ARCHIVE BACK► ＋赤下線（中央・コンパクト） */
.ndetail .jnav{margin-top:6px;}

@media (max-width:900px){
  .ngrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .ngrid{grid-template-columns:1fr 1fr;gap:24px 16px;}
}

/* =========================================================
   Media 一覧（new/media.html）
   ========================================================= */
.media-page{background:var(--base);}
.mpage{padding-top:10vh;padding-bottom:clamp(80px,10vw,130px);}
.mpage .sec-title{margin-bottom:clamp(50px,6vw,80px);}
.mpage__list{max-width:760px;margin:0 auto clamp(50px,6vw,80px);}
.mpage__row{display:flex;gap:clamp(24px,4vw,56px);padding:20px 4px;border-bottom:1px solid rgba(35,24,21,.22);color:var(--ink);transition:color .2s;}
.mpage__row:first-child{border-top:1px solid rgba(35,24,21,.22);}
.mpage__row:hover{color:var(--red);}
.mpage__date{flex:0 0 auto;min-width:110px;font-size:clamp(12px,1.05vw,13px);letter-spacing:.05em;color:var(--muted);}
.mpage__txt{font-size:clamp(12px,1.05vw,14px);}
.mpage__tags{display:flex;gap:12px;margin-left:auto;align-items:center;}
.mpage__tags .tag{color:var(--red);font-size:11px;letter-spacing:.05em;}
@media (max-width:600px){
  /* トップ同様、日付とタイトルは横並びを維持（タグは省略して収める） */
  .mpage__row{flex-direction:row;align-items:baseline;gap:14px;}
  .mpage__date{flex:0 0 auto;min-width:0;}
  .mpage__txt{flex:1 1 auto;}
  .mpage__tags{display:none;}
}

/* =========================================================
   Contact フォーム（new/contact.html）
   ========================================================= */
.contact-page{background:var(--base);}
.cform-band{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.cform-band img{width:100%;aspect-ratio:640/430;object-fit:cover;display:block;}
.cform{padding-top:clamp(56px,7vw,90px);padding-bottom:clamp(70px,9vw,120px);}
.cform .sec-title{margin-bottom:26px;}
.cform__lead{text-align:center;font-size:clamp(12px,1.05vw,14px);line-height:2;color:var(--ink);margin:0 auto clamp(46px,6vw,72px);}
.cform__form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(22px,3vw,32px);}
.cform__field{display:flex;flex-direction:column;gap:5px;}
.cform__label{font-size:13px;letter-spacing:.06em;color:#D8210D;}
.cform__label em{color:var(--red);font-style:normal;margin-left:3px;}
.cform__form input,.cform__form textarea{width:100%;background:transparent;border:1px solid #D8210D;border-radius:2px;padding:14px 16px;font-family:inherit;font-size:14px;color:var(--ink);box-sizing:border-box;}
.cform__form input:focus,.cform__form textarea:focus{outline:none;border-color:var(--red);}
.cform__form textarea{resize:vertical;min-height:150px;line-height:1.9;}
.cform__submit{margin:clamp(18px,3vw,32px) auto 0;width:clamp(220px,26vw,300px);max-width:300px;}
/* スパム対策ハニーポット（画面外へ） */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}
/* 確認・完了画面 */
.cform__confirm{max-width:600px;margin:0 auto;}
.cform__row{display:flex;gap:clamp(20px,3vw,40px);padding:18px 4px;border-bottom:1px solid rgba(35,24,21,.22);}
.cform__row dt{flex:0 0 clamp(110px,16vw,170px);margin:0;font-size:13px;letter-spacing:.05em;color:var(--muted);}
.cform__row dd{margin:0;font-size:clamp(13px,1.05vw,14px);line-height:1.9;color:var(--ink);white-space:pre-wrap;word-break:break-word;}
.cform__actions{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:clamp(30px,4vw,48px);}
.cform__actions .btn{width:clamp(200px,24vw,280px);max-width:280px;}
.cform__back{border-color:rgba(35,24,21,.4);color:var(--ink);}
.cform__back::before{background:var(--ink);}
.cform__note{text-align:center;font-size:12px;color:var(--muted);margin:26px auto 0;line-height:1.9;}
.cform__errors{max-width:600px;margin:0 auto clamp(30px,4vw,48px);padding:20px 24px;border:1px solid var(--red);color:var(--red);font-size:13px;line-height:2;}
.cform__done{text-align:center;}
.cform__done p{font-size:clamp(13px,1.1vw,15px);line-height:2.2;color:var(--ink);margin:0 auto clamp(36px,5vw,56px);}
@media (max-width:600px){
  .cform__row{flex-direction:column;gap:6px;}
  .cform__row dt{flex:none;}
  /* 送信確認／修正する／送信する ボタンはVIEW MORE同様スマホで全幅 */
  .cform__submit{width:100%;max-width:none;}
  .cform__actions{flex-direction:column;gap:14px;}
  .cform__actions .btn{width:100%;max-width:none;}
  /* スマホ：上部の画像帯をもう少し縦長に */
  .cform-band img{aspect-ratio:1/1;}
}

/* =========================================================
   汎用スクロールフェード（各ページの軽微な演出／opacityのみ）
   ========================================================= */
/* 初期は即・隠す（transitionは表示側=is-inにのみ付与＝読み込み時の逆再生を防止） */
.js-fade .reveal{opacity:0;}
/* 写真は左右からスライドイン */
.js-fade .reveal--left{transform:translateX(-46px);}
.js-fade .reveal--right{transform:translateX(46px);}
.js-fade .reveal.is-in{opacity:1;transform:none;transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion:reduce){
  .js-fade .reveal,.js-fade .reveal--left,.js-fade .reveal--right{opacity:1!important;transform:none!important;transition:none;}
}