/* =============================================================
   オクギ建装株式会社 — Brand System  /  base.css
   OKGロゴの色味に合わせ editorial × modern へ再構築
   色・タイポ・余白を CSS 変数で一元管理（後の theme.json 化を見据える）
   ============================================================= */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;scroll-padding-bottom:7.5rem;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;}
/* 横スクロール根絶（グローバル）── overflow-x:clip は position:sticky を阻害しない */
html,body{overflow-x:clip;max-width:100vw;}
img,picture,svg,iframe{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure,blockquote,address,dl,dd{margin:0;}
address{font-style:normal;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
::selection{background:var(--red);color:#fff;}

/* ---------- design tokens ---------- */
:root{
  /* palette ── OKGロゴに合わせたブルー・グレー・グリーン */
  --white:#FFFFFF;
  --ink:#1A1A1A;
  --ink-soft:#403D39;
  --color-main:#2F6F8F;   /* メインカラー：信頼感のあるブルー */
  --red:var(--color-main);/* 後方互換エイリアス（全ページ・全CSSがこれを参照） */
  --red-deep:#1F4F66;     /* 深いブルー・陰影用 */
  --red-tint:#D9E8EA;     /* 淡いブルーグリーン */
  --off:#F3F5F2;          /* 落ち着いた明るいグレー */
  --mist:#E8F0F1;         /* 薄いブルーグレー */
  --green-soft:#E7EFE7;   /* 住まい・地域感のある薄いグリーン */
  --panel:#FFFFFF;
  --greige:#8E9692;       /* グレー */
  --greige-soft:#D7DDD8;
  --hair:rgba(26,26,26,.15);
  --hair-on-dark:rgba(245,242,236,.24);
  --shadow-soft:0 18px 42px rgba(31,79,102,.09);

  /* typography */
  --jp:"Shippori Mincho B1",serif;
  --en:"Cormorant Garamond",serif;
  --script:"Great Vibes",cursive;
  /* 用途別フォント（修正7：数値・連絡先は視認性優先で非装飾フォントに） */
  --font-display:"Shippori Mincho B1",serif;
  --font-body:"Shippori Mincho B1",serif;
  --font-numeric:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","Yu Gothic",sans-serif;

  --fs-mega:clamp(3.4rem,12.5vw,11rem);
  --fs-display:clamp(2.7rem,6.4vw,6.1rem);
  --fs-h1:clamp(2.5rem,5vw,4.1rem);
  --fs-h2:clamp(2.35rem,3.6vw,3.1rem);
  --fs-h3:clamp(1.32rem,1.9vw,1.7rem);
  --fs-lead:clamp(1.1rem,1.55vw,1.42rem);
  --fs-body:clamp(1rem,.55vw + .86rem,1.08rem);
  --fs-label:.78rem;

  /* layout */
  --maxw:1480px;
  --gut:clamp(1.3rem,5vw,6rem);
  --head-pad:clamp(1rem,2.5vw,1.5rem);  /* マストヘッド左右余白（左にロゴ用スペースを残す） */
  --sp:clamp(3.8rem,7.8vw,7.8rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base typography ---------- */
body{
  font-family:var(--jp);
  font-weight:400;
  color:var(--ink);
  background:linear-gradient(180deg,var(--mist) 0%,var(--off) 42%,var(--green-soft) 100%);
  font-size:var(--fs-body);
  line-height:1.95;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-weight:800;line-height:1.32;letter-spacing:.015em;word-break:keep-all;line-break:strict;text-wrap:balance;}
h3{font-weight:600;}
/* 日本語の語中改行・助詞だけの折返しを抑える。未対応環境では従来どおり安全に折返す。 */
:where(p,li,dt,dd){line-break:strict;word-break:normal;overflow-wrap:normal;text-wrap:pretty;}
@supports (word-break:auto-phrase){
  :where(h1,h2,h3,p,li,dt,dd){word-break:auto-phrase;}
}
/* 意味がひとまとまりの短い句だけを、スマホでも途中で分けない。 */
.keep-phrase{white-space:nowrap;}

/* 和欧混植：欧文・数字は Cormorant に切替 */
.en{font-family:var(--en);font-feature-settings:normal;}
.kicker{
  display:inline-block;
  font-family:var(--en);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.36em;
  text-transform:uppercase;
  line-height:1;
  color:var(--red);
}
.kicker--ink{color:var(--ink);}
.kicker--light{color:var(--off);}
.script{font-family:var(--script);letter-spacing:.01em;line-height:1;text-transform:none;}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}
.section{padding-block:var(--sp);}
.rule{height:1px;background:var(--hair);border:0;}
.vrule{width:1px;background:var(--hair);}

/* ---------- paint background utilities ---------- */
.paint-layer{position:relative;overflow:hidden;isolation:isolate;}
.paint-layer > .wrap,.paint-layer > .ctaband__in{position:relative;z-index:2;}
.paint-layer::before,.paint-layer::after{content:"";position:absolute;pointer-events:none;z-index:0;}
.paint-layer::before{
  inset:-18% -12%;opacity:.78;
  background:
    linear-gradient(118deg,rgba(47,111,143,.14),transparent 38%),
    radial-gradient(ellipse at 16% 22%,rgba(217,232,234,.72),transparent 44%),
    radial-gradient(ellipse at 88% 72%,rgba(231,239,231,.8),transparent 46%);
  transform:translate3d(0,0,0);
  animation:paint-wash-drift 22s var(--ease) infinite alternate;
}
.paint-layer::after{
  left:-8%;right:-8%;top:12%;height:clamp(8rem,18vw,17rem);opacity:.42;
  background:
    linear-gradient(100deg,transparent 0 6%,rgba(47,111,143,.16) 18%,rgba(231,239,231,.34) 44%,transparent 72%),
    linear-gradient(96deg,transparent 0 24%,rgba(255,255,255,.68) 38%,rgba(31,79,102,.09) 60%,transparent 82%);
  filter:blur(10px);
  transform:rotate(-3deg);
}
.paint-layer--warm::before{
  background:
    linear-gradient(122deg,rgba(31,79,102,.13),transparent 36%),
    radial-gradient(ellipse at 18% 18%,rgba(232,240,241,.82),transparent 45%),
    radial-gradient(ellipse at 82% 70%,rgba(215,221,216,.7),transparent 48%);
}
.paint-layer--quiet::before{opacity:.58;}
.paint-layer--gallery::before{
  opacity:.68;
  background:
    linear-gradient(130deg,rgba(232,240,241,.72),transparent 48%),
    radial-gradient(ellipse at 78% 18%,rgba(47,111,143,.12),transparent 44%),
    radial-gradient(ellipse at 18% 82%,rgba(231,239,231,.62),transparent 42%);
}
.paint-layer--ink::before{
  opacity:.28;
  background:
    linear-gradient(115deg,rgba(255,255,255,.26),transparent 44%),
    radial-gradient(ellipse at 80% 26%,rgba(217,232,234,.42),transparent 38%);
}
.paint-sweep{position:relative;overflow:hidden;isolation:isolate;}
.paint-sweep > .wrap{position:relative;z-index:2;}
.paint-sweep::before{
  content:"";position:absolute;inset:auto -12% -4rem -12%;height:clamp(8rem,16vw,15rem);z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(31,79,102,.16),rgba(231,239,231,.54) 42%,rgba(255,255,255,.62) 68%,transparent);
  filter:blur(12px);transform:rotate(2.5deg);
}
.paint-curve{position:relative;overflow:hidden;isolation:isolate;}
.paint-curve > .wrap{position:relative;z-index:2;}
.paint-curve::after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-5.5rem;height:9rem;z-index:1;pointer-events:none;
  background:rgba(255,255,255,.38);border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.paint-focus{
  position:relative;isolation:isolate;
  box-shadow:0 24px 60px rgba(31,79,102,.16),0 0 0 1px rgba(255,255,255,.5) inset;
}
.paint-focus::before{
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,rgba(47,111,143,.24),rgba(231,239,231,.38),rgba(255,255,255,.5));
  filter:blur(18px);opacity:.5;
}
@keyframes paint-wash-drift{
  from{transform:translate3d(-1.2%,0,0) scale(1);}
  to{transform:translate3d(1.2%,1%,0) scale(1.025);}
}
@media (max-width:560px){
  .paint-layer::before{inset:-10% -18%;opacity:.5;animation:none;}
  .paint-layer::after{height:8rem;opacity:.24;filter:blur(14px);}
  .paint-sweep::before{height:7rem;opacity:.35;filter:blur(16px);}
  .paint-curve::after{display:none;}
  .paint-focus{box-shadow:0 14px 32px rgba(31,79,102,.13);}
  .paint-focus::before{opacity:.28;filter:blur(14px);}
}
@media (prefers-reduced-motion:reduce){
  .paint-layer::before{animation:none;}
}

/* editorial の見出しユニット（kicker + 縦罫 + 見出し） */
.eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--hair);}

/* understated な誌面リンク（量産型 CTA ボタンを避ける） */
.lnk{
  display:inline-flex;align-items:baseline;gap:.6em;
  font-family:var(--en);font-size:1.05rem;font-weight:600;
  letter-spacing:.06em;text-decoration:none;
  padding-bottom:.3rem;border-bottom:1px solid currentColor;
  transition:gap .35s var(--ease),color .35s var(--ease);
}
.lnk .arw{transition:transform .35s var(--ease);}
.lnk:hover{gap:1em;color:var(--red);}
.lnk:hover .arw{transform:translateX(.25em);}

/* 行動喚起ボタン（BtoC 導線）── ホバーで矢印が右へ動く */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.05rem 2.3rem;min-height:48px;
  font-family:var(--jp);font-weight:700;font-size:1.04rem;letter-spacing:.06em;
  text-decoration:none;cursor:pointer;
  background:var(--red);color:#fff;
  transition:background .3s var(--ease),transform .2s var(--ease),box-shadow .3s var(--ease);
}
.btn .arw{transition:transform .3s var(--ease);}
.btn:hover{background:var(--red-deep);box-shadow:0 14px 30px rgba(31,79,102,.3);}
.btn:hover .arw{transform:translateX(8px);}
.btn:active{transform:scale(.97);}
.btn--ink{background:var(--ink);}
.btn--ink:hover{background:#000;box-shadow:0 14px 30px rgba(0,0,0,.32);}
.btn--light{background:var(--off);color:var(--ink);}
.btn--light:hover{background:#fff;color:var(--ink);}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--hair);}
.btn--ghost:hover{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1.6px var(--red);}

/* ホバー／タップで軽く反応するカード（建設リフォーム的な手応え） */
.lift{transition:transform .26s var(--ease),box-shadow .26s var(--ease);}
.lift:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(26,26,26,.15);}
.lift:active{transform:scale(.985);}
/* 事業紹介4グリッド・施工事例bentoカードにも同じ触覚反応を波及 */
.area-card,.wcard{transition:transform .26s var(--ease),box-shadow .26s var(--ease);}
.area-card:hover,.wcard:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(26,26,26,.15);}
.area-card:active,.wcard:active{transform:scale(.99);}
.promise-item,.ncard,.svc-card,.wkcard,.flow-panel,.qpoint,.scope-item,.msg-card,.qcard,.assoc-tile,.profile__dl,.ct-form,.ct-info{
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.promise-item:hover,.ncard:hover,.svc-card:hover,.wkcard:hover,.flow-panel:hover,.qpoint:hover,.scope-item:hover,.qcard:hover,.assoc-tile:hover{
  transform:translateY(-3px);box-shadow:0 20px 45px rgba(31,79,102,.14);border-color:rgba(31,79,102,.24);
}
@media (prefers-reduced-motion:reduce){
  .lift,.lift:hover,.lift:active,
  .area-card,.area-card:hover,.area-card:active,
  .wcard,.wcard:hover,.wcard:active,
  .promise-item,.promise-item:hover,.ncard,.ncard:hover,.svc-card,.svc-card:hover,.wkcard,.wkcard:hover,
  .flow-panel,.flow-panel:hover,.qpoint,.qpoint:hover,.scope-item,.scope-item:hover,
  .msg-card,.qcard,.qcard:hover,.assoc-tile,.assoc-tile:hover,.profile__dl,.ct-form,.ct-info{transition:none;transform:none;}
  .btn,.btn .arw{transition:none;}
  .btn:hover .arw{transform:none;}
}

/* 行動喚起ボックス（BtoC：電話番号とフォームを併記した CTA） */
.cta-box{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.1rem 2rem;background:var(--red);color:#fff;
  padding:clamp(1.5rem,3vw,2.3rem) clamp(1.4rem,3.2vw,2.6rem);
}
.cta-box__t{font-size:clamp(1.1rem,1.9vw,1.46rem);font-weight:800;line-height:1.6;letter-spacing:.02em;}
.cta-box__t small{display:block;font-weight:500;font-size:.74em;color:var(--red-tint);margin-top:.3rem;}
.cta-box__act{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.5rem;}
.cta-box__tel{display:flex;flex-direction:column;gap:.04rem;text-decoration:none;color:#fff;font-family:var(--font-numeric);}
.cta-box__tel .l{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--red-tint);}
.cta-box__tel .n{font-size:clamp(1.6rem,2.9vw,2.05rem);font-weight:700;letter-spacing:.02em;line-height:1.05;}
.cta-box__tel:hover .n{color:var(--red-tint);}
@media (max-width:560px){
  :root{
    --gut:clamp(1.05rem,4.8vw,1.35rem);
    --sp:clamp(3rem,8vw,4.4rem);
  }
  .cta-box{flex-direction:column;align-items:flex-start;}
  .cta-box__act{width:100%;}
  .cta-box__act .btn{flex:1 0 auto;}
}

/* ---------- scroll reveal（穏やかなフェード／段階表示） ---------- */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:var(--rd,0ms);
}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal] .media img,[data-reveal].media img{
  transform:scale(1.08);transition:transform 1.5s var(--ease);
}
[data-reveal].is-in .media img,[data-reveal].is-in.media img{transform:none;}
/* 左右フェード：セクションを左／右からスライドして見せる（視線誘導） */
[data-reveal="left"]{transform:translateX(-34px);}
[data-reveal="right"]{transform:translateX(34px);}
[data-reveal="left"].is-in,[data-reveal="right"].is-in{transform:none;}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal] .media img,[data-reveal].media img{
    opacity:1;transform:none;transition:none;
  }
}

/* ---------- media（写真）：ドキュメンタリー寄りの手触り ---------- */
.media{position:relative;overflow:hidden;background:var(--greige);}
.media img{width:100%;height:100%;object-fit:cover;filter:saturate(.93) contrast(1.04);}
.media figcaption,.cap{
  font-family:var(--en);font-style:italic;font-size:.92rem;
  letter-spacing:.03em;color:var(--ink-soft);
}

/* 紙・印刷物の質感：極薄のフィルムグレイン（AI抜け感） */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:120px 120px;
  mix-blend-mode:overlay;opacity:.34;
}

/* ============================================================
   共通マストヘッド
   ============================================================ */
.skip{position:absolute;left:-999px;top:0;}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:#fff;padding:.6rem 1.1rem;text-decoration:none;}

/* 修正2：メニューバーを全ページ常時固定（白半透明＋ぼかし） */
.site-head{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding-block:clamp(.7rem,1.4vw,1.05rem);padding-inline:var(--head-pad);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.brand{display:flex;flex-direction:column;gap:.34rem;line-height:1;text-decoration:none;}
.brand__jp{font-weight:800;font-size:clamp(1.2rem,1.6vw,1.6rem);letter-spacing:-.02em;white-space:nowrap;color:var(--ink);}
.brand__en{font-family:var(--en);font-size:.66rem;font-weight:600;letter-spacing:.32em;color:var(--red);}
.site-nav{display:flex;gap:clamp(1.25rem,2.55vw,3rem);margin-left:clamp(2.5rem,6vw,7rem);margin-right:auto;}
.site-nav a{
  position:relative;text-decoration:none;font-size:clamp(1rem,.98vw,1.12rem);letter-spacing:.07em;padding:.45rem .15rem;
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--red);transition:right .4s var(--ease);
}
.site-nav a:hover::after,.site-nav a[aria-current]::after{right:0;}
.site-nav a[aria-current]{color:var(--red);font-weight:700;}
.head-tel{display:flex;flex-direction:column;align-items:flex-end;gap:.18rem;text-decoration:none;}
.head-tel__label{font-family:var(--en);font-size:.62rem;font-weight:600;letter-spacing:.26em;color:var(--red);}
.head-tel__num{font-family:var(--font-numeric);font-weight:700;font-size:1.5rem;letter-spacing:.02em;}
/* ハンバーガー（モバイルのみ表示） */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;}
@media (max-width:880px){
  .site-head{gap:.65rem;flex-wrap:wrap;padding-block:.55rem;}
  .brand__jp{font-size:clamp(1rem,4.5vw,1.3rem);}
  .head-tel{margin-left:auto;}
  .head-tel__label{display:none;}
  .head-tel__num{font-size:1.18rem;}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:2.9rem;height:2.9rem;flex:none;margin-left:auto;
    border:1px solid var(--hair);background:rgba(255,255,255,.6);
  }
  .nav-toggle span{display:block;width:1.35rem;height:2px;margin-inline:auto;background:var(--ink);transition:transform .3s var(--ease),opacity .25s var(--ease);}
  .site-head.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-head.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  .site-head.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .site-nav{
    order:5;flex:1 1 100%;display:none;flex-direction:column;gap:0;
    margin:.65rem calc(-1 * var(--head-pad)) -1.05rem;
    border-top:1px solid var(--hair);
  }
  .site-head.nav-open .site-nav{display:flex;}
  .site-nav a{font-size:1.06rem;padding:1rem var(--head-pad);border-bottom:1px solid var(--hair);}
  .site-nav a::after{display:none;}
  .site-nav a[aria-current]{background:var(--off);}
}
@media (max-width:480px){
  .site-head{padding-block:.42rem;}
  .brand--logo{min-width:104px;}
  .brand__logo{width:104px;}
  .nav-toggle{width:2.55rem;height:2.55rem;}
}

/* ============================================================
   共通フッター
   ============================================================ */
.site-foot{background:var(--ink);color:var(--off);position:relative;z-index:1;}
.foot-top{
  display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);
  padding-block:clamp(3.5rem,7vw,6rem);
}
.foot-brand .brand__jp{font-size:1.5rem;}
.foot-brand .brand__en{margin-top:.6rem;}
.foot-brand .script{display:block;font-size:2rem;color:var(--red);margin-top:1.1rem;}
/* 修正6：フッター社名 ── 英語表記を別段落・1行強制で泣き別れ解消 */
.footer-name-ja{font-weight:800;font-size:1.5rem;letter-spacing:.04em;line-height:1.35;}
.footer-name-en{
  font-family:var(--en);font-size:.75rem;letter-spacing:.1em;
  color:rgba(255,255,255,.7);white-space:nowrap;margin-top:.4em;
}
.foot-col h3{font-family:var(--en);font-size:.74rem;letter-spacing:.28em;color:var(--greige);text-transform:uppercase;margin-bottom:1rem;font-weight:600;}
.foot-col p{font-size:.94rem;line-height:2;color:#D7D2C8;}
.foot-col .en{letter-spacing:.03em;}
/* フッター連絡先（修正7：視認性優先・非装飾フォント／大きめ） */
.foot-addr{display:flex;flex-direction:column;gap:.5rem;font-style:normal;}
.foot-addr__post{font-family:var(--font-numeric);font-size:.95rem;line-height:1.75;color:#D7D2C8;}
.foot-free{display:inline-flex;flex-direction:column;gap:.05rem;text-decoration:none;margin-block:.35rem;width:fit-content;}
.foot-free__lab{font-family:var(--font-numeric);font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--red-tint);}
.foot-free__num{font-family:var(--font-numeric);font-weight:700;font-size:1.62rem;letter-spacing:.02em;color:#fff;}
.foot-free:hover .foot-free__num{color:var(--red-tint);}
.foot-addr__line{font-family:var(--font-numeric);font-size:1.04rem;line-height:1.7;color:#D7D2C8;}
.foot-addr__line b{color:var(--red-tint);font-weight:700;margin-right:.35em;}
.foot-addr__line a{color:#fff;text-decoration:none;}
.foot-addr__line a:hover{color:var(--red-tint);}
.foot-addr__mail{font-family:var(--font-numeric);font-size:.96rem;color:#D7D2C8;text-decoration:none;border-bottom:1px solid var(--hair-on-dark);width:fit-content;}
.foot-addr__mail:hover{color:var(--red-tint);}
.foot-nav{display:flex;flex-direction:column;gap:.55rem;}
.foot-nav a{text-decoration:none;font-size:.94rem;width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s;}
.foot-nav a:hover{border-color:var(--greige);}
.foot-base{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.4rem;border-top:1px solid var(--hair-on-dark);
  font-family:var(--en);font-size:.76rem;letter-spacing:.14em;color:var(--greige);
}
@media (max-width:760px){
  .foot-top{grid-template-columns:1fr;gap:2.4rem;}
}

/* ============================================================
   レビューバー  ── 各案の制作意図を提示（提案資料用の meta UI）
   ※ 実サイトには含めない層。KIRIYA が社長へ説明する際に使用。
   ============================================================ */
.rb{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:#141312;color:#ECE7DE;
  border-top:2px solid var(--red);
  box-shadow:0 -14px 40px rgba(0,0,0,.28);
}
.rb__bar{
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem);
  max-width:1640px;margin-inline:auto;
  padding:.72rem clamp(1rem,3vw,2.2rem);
}
.rb__badge{
  flex:none;display:grid;place-items:center;
  width:2.55rem;height:2.55rem;background:var(--red);color:#fff;
  font-family:var(--en);font-weight:700;font-size:1.3rem;
}
.rb__badge[data-kind="page"]{background:transparent;border:1px solid var(--red);color:var(--red);font-size:.62rem;letter-spacing:.18em;}
.rb__text{min-width:0;}
.rb__kch{
  display:block;font-family:var(--en);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--red);
}
.rb__intent{font-size:.9rem;line-height:1.6;color:#E4DED3;margin-top:.18rem;}
.rb__intent b{color:#fff;font-weight:600;}
.rb__nav{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex:none;}
.rb__nav a{
  text-decoration:none;font-family:var(--en);font-size:.84rem;font-weight:600;
  letter-spacing:.06em;padding:.5rem .85rem;
  border:1px solid var(--hair-on-dark);white-space:nowrap;
  transition:background .3s,border-color .3s;
}
.rb__nav a:hover{background:var(--red);border-color:var(--red);color:#fff;}
.rb__nav a.is-hub{background:var(--off);color:var(--ink);border-color:var(--off);}
.rb__nav a.is-hub:hover{background:#fff;}
.rb__min{
  flex:none;width:2.2rem;height:2.2rem;display:grid;place-items:center;
  border:1px solid var(--hair-on-dark);font-size:1rem;line-height:1;
  transition:background .3s;
}
.rb__min:hover{background:var(--red);}
.rb.is-min .rb__text,.rb.is-min .rb__nav,.rb.is-min .rb__badge{display:none;}
.rb.is-min .rb__bar{padding-block:.4rem;justify-content:flex-end;}
.rb.is-min .rb__min{width:auto;padding:.4rem 1rem;gap:.5rem;}
.rb__min .lbl{display:none;font-family:var(--en);font-size:.74rem;letter-spacing:.16em;font-weight:600;}
.rb.is-min .rb__min .lbl{display:inline;}

@media (max-width:820px){
  .rb__bar{flex-wrap:wrap;}
  .rb__text{flex:1 1 100%;order:3;}
  .rb__nav{margin-left:0;width:100%;order:4;}
  .rb__nav a{flex:1;text-align:center;}
  .rb__min{order:2;}
}

/* Codex: logo candidate 05 as persistent header brand */
.brand--logo{display:flex;align-items:center;justify-content:flex-start;min-width:clamp(132px,16vw,190px);}
.brand__logo{display:block;width:clamp(118px,14vw,164px);height:auto;object-fit:contain;transform:scaleX(1.16);transform-origin:left center;}
@media (max-width:760px){
  .brand--logo{min-width:104px;}
  .brand__logo{width:104px;}
}

/* Instagram human link ── 社長個人の人柄を伝える補助導線 */
.nav-instagram{display:none;}
.insta-link,
.foot-instagram{
  display:inline-flex;align-items:center;gap:.35em;width:fit-content;
  text-decoration:none;font-weight:700;letter-spacing:.04em;
}
.insta-link{color:var(--blue);border-bottom:1px solid rgba(36,84,110,.28);}
.insta-link:hover{color:var(--green);border-color:currentColor;}
.insta-link--light{color:#fff;border-color:rgba(255,255,255,.45);}
.insta-link--light:hover{color:var(--red-tint);}
.foot-instagram{color:var(--red-tint);border-bottom:1px solid rgba(255,255,255,.2);}
.foot-instagram:hover{color:#fff;border-color:currentColor;}
.ctaband__insta{
  margin-top:1.3rem;padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(8px);
}
.ctaband__insta p{margin:0 0 .45rem;color:rgba(255,255,255,.86);font-size:.95rem;line-height:1.7;}
.msg-card__insta{
  margin-top:1rem;padding:1rem;border:1px solid var(--hair);
  background:linear-gradient(135deg,rgba(36,84,110,.08),rgba(92,112,88,.09));
  border-radius:16px;
}
.msg-card__insta p{margin:0 0 .45rem;font-size:.94rem;line-height:1.75;color:var(--muted);}
@media (max-width:880px){.nav-instagram{display:none;}}
@media (max-width:520px){
  .ctaband__insta{padding:.85rem .9rem;border-radius:14px;}
  .ctaband__insta p,.msg-card__insta p{font-size:.88rem;line-height:1.65;}
}
/* Instagram simple pill ── 社長個人導線は控えめに表示 */
.insta-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:fit-content;
  padding:.72rem 1rem;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.04em;
  color:var(--ink);background:rgba(255,255,255,.9);border:1px solid rgba(31,79,102,.18);
  box-shadow:0 10px 24px rgba(31,79,102,.12);
}
.insta-pill--light{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);}
.insta-pill__icon{
  width:1.15em;height:1.15em;border-radius:.32em;display:inline-block;flex:none;
  background:radial-gradient(circle at 30% 110%,#feda75 0 23%,#fa7e1e 34%,#d62976 55%,#962fbf 74%,#4f5bd5 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.88);
}
.insta-pill:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(31,79,102,.18);}
.ctaband__insta{margin-top:1.15rem;}
.msg-card__insta{margin-top:1rem;}
.assoc-tile__inline-role{font-size:.72em;color:var(--muted);font-weight:600;margin-left:.25em;white-space:nowrap;}
@media (max-width:520px){
  .insta-pill{padding:.64rem .88rem;font-size:.92rem;}
}