/*
Theme Name: Total Facade
Theme URI: https://totalfacade.co/
Author: 株式会社トータルファサード（CMO：アイリーン）
Description: TOTAL FACADE 事業サイト カスタムテーマ v2（2026-07）
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: totalfacade
*/

/* ===== TOKENS ===== */
:root{
  --bg:#09090a; --bg-2:#0c0c0e; --panel:#111114;
  --ink:#f4f3f0; --ink-2:#eeede9; --soft:#d4d4ce; --muted:#c6c6c0;
  --faint:#a6a6a0; --dim:#8c8c86;
  --line:rgba(255,255,255,.09); --line-h:rgba(255,255,255,.18);
  --accent:#ddd0a8;
  --f-lat:'Cormorant Garamond',serif;
  --f-ja:'Shippori Mincho',serif;
  --f-body:'Zen Kaku Gothic New',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--f-body);font-weight:400;line-height:1.9;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{font-style:normal;margin:0;}

/* ===== HEADER ===== */
.head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 5vw;
  background:transparent;
  transition:padding .5s var(--ease),background .5s,border-color .5s;
}
.head.scrolled,.head.head--inner{
  padding:14px 5vw;
  background:rgba(9,9,10,.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head.head--inner{padding:18px 5vw;}
.brand,.head-right{flex-shrink:0;} /* ロゴ・CTAは潰れて折返さない（7/6フォント10%拡大対応） */
.brand{font-family:var(--f-lat);font-size:23px;font-weight:500;letter-spacing:.10em;color:var(--ink);}
.nav{display:flex;gap:22px;font-family:var(--f-lat);font-size:13px;letter-spacing:.16em;color:rgba(244,243,240,.68);}
.nav a{position:relative;padding-bottom:3px;transition:color .3s;white-space:nowrap;}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .4s var(--ease);}
.nav a:hover,.nav a.active{color:var(--ink);}
.nav a.active::after,.nav a:hover::after{right:0;}
.head-right{display:flex;align-items:center;gap:16px;}
.lang{font-family:var(--f-lat);font-size:14.5px;letter-spacing:.18em;color:rgba(244,243,240,.62);background:none;border:none;cursor:pointer;padding:4px 2px;}
.lang b{color:var(--ink);font-weight:600;}

/* ===== BTN-LINE ===== */
.btn-line{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#2ad06f,#06C755 55%,#05b54c);
  color:#fff;font-family:var(--f-body);font-weight:500;font-size:14px;letter-spacing:.04em;
  padding:10px 20px;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 16px rgba(6,199,85,.25);
  transition:transform .2s,box-shadow .2s;white-space:nowrap;
}
.btn-line:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 22px rgba(6,199,85,.33);}
.btn-line:active{transform:translateY(1px);}
.btn-line--lg{padding:16px 44px;font-size:16px;border-radius:2px;}

/* ===== BTN GHOST（副CTA・真鍮）=====
   design.md CTA voice: 副CTAは真鍮の枠＋薄い面。枠線だけの「格下ボタン」にしない（2026-08-17）。
   LINEグリーンはCVボタン専用の原則は維持し、副CTAは真鍮で差をつける。 */
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(221,208,168,.07);
  color:var(--accent);font-family:var(--f-body);font-weight:500;font-size:14px;letter-spacing:.04em;
  padding:10px 20px;border-radius:2px;
  border:1px solid rgba(221,208,168,.42);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
  white-space:nowrap;
}
.btn-ghost:hover{background:rgba(221,208,168,.13);border-color:var(--accent);transform:translateY(-1px);}
.btn-ghost:active{transform:translateY(1px);}
.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-ghost--lg{padding:16px 38px;font-size:16px;}
/* CTAブロック内で主/副を横並びにする器 */
.cta__actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
@media(max-width:560px){
  .cta__actions{flex-direction:column;gap:12px;}
  .cta__actions .btn-line--lg,.cta__actions .btn-ghost--lg{width:100%;justify-content:center;}
}

/* ===== LINK GHOST ===== */
.link-ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-lat);font-size:14px;letter-spacing:.16em;
  color:rgba(244,243,240,.75);
  border-bottom:1px solid rgba(255,255,255,.2);
  padding-bottom:5px;
  transition:color .3s,border-color .3s,gap .3s;
}
.link-ghost:hover{color:var(--ink);border-color:var(--accent);gap:16px;}

/* ===== PAGE INTRO（内ページ共通）===== */
.pg-intro{
  padding:20vh 5vw 10vh;
  display:flex;gap:6vw;align-items:flex-end;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.pg-intro__left{flex:1.5;min-width:260px;}
/* ページタイトル＝ゴールドの「英語 — 日本語」1本（7/7改定：白h1廃止・旧eyebrowを昇格） */
.pg-intro__h{
  font-family:'Cormorant Garamond','Shippori Mincho',serif;
  font-size:clamp(30px,5vw,64px);
  font-weight:400;line-height:1.35;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;
  overflow-wrap:anywhere;min-width:0;
}
.pg-intro__h-ja{display:block;font-size:.55em;letter-spacing:.14em;margin-top:.18em;}
.pg-intro__right{flex:1;min-width:240px;padding-bottom:6px;}
.pg-intro__body{
  font-family:var(--f-ja);font-size:clamp(14.5px,1.3vw,16.5px);
  color:var(--muted);letter-spacing:.07em;line-height:2.1;
}

/* ===== CTA（共通）===== */
.cta{padding:120px 5vw;text-align:center;border-top:1px solid var(--line);}
.cta__eyebrow{font-family:var(--f-lat);font-size:13px;letter-spacing:.38em;color:var(--faint);text-transform:uppercase;}
.cta__h{font-family:var(--f-ja);font-weight:500;font-size:clamp(24px,3.1vw,42px);color:var(--ink);margin:20px auto 38px;line-height:1.7;letter-spacing:.04em;}

/* ===== FOOTER ===== */
.foot{padding:52px 5vw 36px;border-top:1px solid var(--line);background:var(--bg-2);}
.foot__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;padding-bottom:34px;border-bottom:1px solid var(--line);}
.foot__brand{font-family:var(--f-lat);font-size:21px;font-weight:500;letter-spacing:.09em;color:var(--soft);margin:0;}
.foot__co{font-size:13px;line-height:2.2;color:var(--faint);letter-spacing:.04em;margin-top:12px;}
.foot__cols{display:flex;gap:52px;flex-wrap:wrap;}
.foot__col{display:flex;flex-direction:column;gap:10px;font-family:var(--f-lat);font-size:13.5px;letter-spacing:.18em;color:var(--dim);}
.foot__col a:hover{color:var(--soft);}
.foot__bot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;flex-wrap:wrap;gap:8px;font-family:var(--f-lat);font-size:13px;letter-spacing:.10em;color:var(--dim);}

/* ===== REVEAL ===== */
html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
html.js [data-reveal].in{opacity:1;transform:none;}
html.js [data-d="1"]{transition-delay:.09s}
html.js [data-d="2"]{transition-delay:.18s}
html.js [data-d="3"]{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none;}}

/* ===== RESPONSIVE（共通）===== */
/* ナビの表示/非表示の境界は L344 付近の1箇所に集約（2026-09-06）。
   以前ここに @media(max-width:980px){.nav{display:none;}} があり、
   1339pxの境界と二重管理になっていたため撤去した（768〜980pxでナビもハンバーガーも
   出ない状態を実際に発生させた）。 */
@media(max-width:760px){
  .pg-intro{flex-direction:column;gap:20px;align-items:flex-start;}
  .cta{padding:88px 7vw;}
}

/* ===== SEO記事（単一投稿）===== */
.article-wrap{background:#fff;min-height:100vh;padding-top:72px;}
.article-breadcrumb{font-size:12px;color:#888;padding:28px 24px 0;max-width:848px;margin:0 auto;}
.article-breadcrumb a{color:#1e40af;}
.article-body{max-width:800px;margin:0 auto;padding:32px 24px 88px;font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;line-height:1.85;color:#1a1a1a;font-size:16px;}
.article-body h1{font-size:clamp(20px,3.2vw,28px);font-weight:bold;line-height:1.4;margin:0 0 24px;color:#0d1b3e;border-left:5px solid #c9a84c;padding-left:16px;}
.article-body h2{font-size:20px;font-weight:bold;color:#0d1b3e;margin:48px 0 16px;padding-bottom:8px;border-bottom:2px solid #e0e6f0;}
.article-body h3{font-size:16px;font-weight:bold;color:#1a3a6e;margin:28px 0 10px;}
.article-body p{margin:0 0 18px;}
.article-body ul{margin:0 0 24px;padding-left:24px;line-height:2.2;}
.article-body a{color:#1e40af;border-bottom:1px solid #bfdbfe;padding-bottom:1px;}
.article-body a:hover{color:#1d4ed8;border-color:#1d4ed8;}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;}
.article-body th{background:#0d1b3e;color:#fff;padding:10px 14px;text-align:left;}
.article-body td{padding:9px 14px;border-bottom:1px solid #e0e6f0;}
.article-body tr:nth-child(even) td{background:#f8faff;}
.article-body figure{margin:24px 0;}
.article-body figure img{width:100%;border-radius:10px;display:block;}
.article-body figcaption{font-size:12px;color:#888;margin-top:8px;}
/* 著者ボックス */
.author-box{background:#f0f4ff;border:1px solid #c0d0ee;border-radius:10px;padding:18px 20px;margin-bottom:32px;display:flex;gap:16px;align-items:flex-start;font-size:14px;}
.author-icon{background:#0d1b3e;color:#c9a84c;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:13px;flex-shrink:0;}
/* リード文 */
.lead{font-size:17px;line-height:1.9;background:#fdf8ed;border-left:4px solid #c9a84c;padding:16px 20px;border-radius:0 8px 8px 0;margin-bottom:32px;}
/* 3行まとめ */
.three-lines{background:#f8faff;border:1px solid #d4def0;border-radius:10px;padding:18px 22px;margin:8px 0 24px;}
.three-lines li{margin:0 0 8px;line-height:1.7;}
.three-lines li:last-child{margin-bottom:0;}
/* プルクォート */
.pull{font-size:18px;font-weight:bold;color:#0d1b3e;line-height:1.7;margin:28px 0;padding-left:14px;border-left:4px solid #c9a84c;}
/* スペックボックス */
.spec-box{background:#f0f8ff;border:2px solid #2563eb;border-radius:12px;padding:20px 24px;margin:24px 0;}
.spec-box h4{color:#1e40af;font-size:15px;margin-bottom:14px;}
.spec-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #dbeafe;}
.spec-row:last-child{border-bottom:none;}
.spec-label{color:#555;font-size:14px;}
.spec-value{font-weight:bold;color:#0d1b3e;font-size:14px;}
/* ハイライト */
.highlight{background:#fdf8ed;border:1px solid #c9a84c;border-radius:8px;padding:16px 20px;margin:24px 0;}
.highlight strong{color:#0d1b3e;}
/* 写真グリッド */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;}
/* CTA（記事内） */
.article-body .cta-box{background:#0d1b3e;border-radius:14px;padding:28px;margin:40px 0;text-align:center;}
.article-body .cta-box h3{color:#c9a84c;font-size:18px;margin:0 0 8px;font-weight:bold;}
.article-body .cta-box p{color:rgba(255,255,255,.75);font-size:14px;margin-bottom:20px;}
.cta-btn{display:inline-block;background:#c9a84c;color:#0d1b3e;font-weight:bold;font-size:15px;padding:14px 36px;border-radius:8px;text-decoration:none;border:none;}
.cta-btn:hover{opacity:.88;}
/* FAQ */
.faq-item{border:1px solid #e0e6f0;border-radius:10px;margin-bottom:12px;overflow:hidden;}
.faq-q{background:#f0f4ff;padding:14px 18px;font-weight:bold;color:#0d1b3e;font-size:14px;}
.faq-q::before{content:"Q. ";color:#c9a84c;}
.faq-a{padding:14px 18px;font-size:14px;line-height:1.8;}
.faq-a::before{content:"A. ";font-weight:bold;color:#0d1b3e;}
/* 日付・注記 */
.article-body .update-date{font-size:12px;color:#888;margin-bottom:8px;}
@media(max-width:640px){
  .article-breadcrumb{padding:20px 16px 0;}
  .article-body{padding:24px 16px 64px;}
  .photo-grid{grid-template-columns:1fr;}
  .spec-row{flex-direction:column;gap:4px;}
}

/* =========================================================
   共通仕上げレイヤー（プレビュー site.css 相当・2026-07-05移植）
   ========================================================= */
:root{
  --tf-line-green:#06C755; --tf-line-green-hi:#2ad06f; --tf-line-green-lo:#05b54c;
  --tf-line-soft:#4ade80;
}

/* ページ間トランジション（対応ブラウザのみ） */
@view-transition{ navigation:auto; }
@keyframes tf-vt-out{ to{ opacity:0; } }
@keyframes tf-vt-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
::view-transition-old(root){ animation:tf-vt-out .28s var(--ease) both; }
::view-transition-new(root){ animation:tf-vt-in .52s var(--ease) both; }

/* 金のスクロールプログレスライン */
.tf-progress{position:fixed;top:0;left:0;z-index:72;width:100%;height:2px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--accent),rgba(201,183,138,.25));pointer-events:none;}

/* ヘッダー：下スクロールで退避 */
.head{transition:padding .5s var(--ease),background .5s,border-color .5s,transform .55s var(--ease);}
.head.tf-hide{transform:translateY(-110%);}

/* ヒーロー見出し：ブラー→シャープ着地（TOP） */
html.js .hero h1[data-reveal]{filter:blur(10px);letter-spacing:.1em;}
html.js .hero h1[data-reveal].in{filter:blur(0);letter-spacing:.05em;transition:opacity 1.5s var(--ease),transform 1.5s var(--ease),filter 1.25s var(--ease),letter-spacing 2s var(--ease);}

/* 下層ページタイトルの着地 */
html.tf-js .pg-intro__h{opacity:0;transform:translateY(18px);filter:blur(8px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);}
html.tf-js.tf-ready .pg-intro__h{opacity:1;transform:none;filter:none;}

/* 写真のモーション（JSが overflow:hidden のコンテナだけに付与） */
html.tf-js .tf-zoom img{transform:scale(1.06);transition:transform 2.4s var(--ease);}
html.tf-js .tf-zoom.tf-in img{transform:scale(1);}
html.tf-js .tf-para img,html.tf-js .tf-para video{will-change:transform;}
html.tf-js .tf-kb{animation:tf-kb 26s var(--ease) infinite alternate;}
@keyframes tf-kb{from{transform:scale(1);}to{transform:scale(1.07);}}

/* 数字カウントアップ（桁の揺れ防止） */
.num__val{font-variant-numeric:lining-nums tabular-nums;}

/* 追従LINEドック（JSが注入・全ページ共通CV） */
.tf-dock{position:fixed;right:18px;bottom:18px;z-index:65;display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border-radius:999px;background:linear-gradient(180deg,var(--tf-line-green-hi),var(--tf-line-green) 55%,var(--tf-line-green-lo));color:#fff;font-family:var(--f-body);font-weight:500;font-size:14.5px;letter-spacing:.04em;line-height:1;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 32px rgba(6,199,85,.32);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .3s;white-space:nowrap;}
.tf-dock.on{opacity:1;transform:none;pointer-events:auto;}
.tf-dock:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 38px rgba(6,199,85,.4);}
.tf-dock:active{transform:translateY(1px);}
.tf-dock__i{font-family:var(--f-lat);font-size:16.5px;}
.tf-dock::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;}
.tf-dock.tf-pulse::before{animation:tf-ping 1.3s var(--ease) 1;}
@keyframes tf-ping{from{box-shadow:0 0 0 0 rgba(6,199,85,.4);}to{box-shadow:0 0 0 18px rgba(6,199,85,0);}}
@media(max-width:640px){
  .tf-dock{left:14px;right:14px;bottom:14px;justify-content:center;padding:16px;border-radius:3px;}
}

/* ペルソナルーター（TOP） */
.persona{padding:104px 5vw;border-top:1px solid var(--line);background:var(--bg-2);}
.persona__eyebrow{font-family:var(--f-lat);font-size:13px;letter-spacing:.34em;color:var(--faint);text-transform:uppercase;margin:0;}
.persona__h{font-family:var(--f-ja);font-weight:500;font-size:clamp(24px,2.9vw,37.5px);line-height:1.65;letter-spacing:.04em;color:var(--ink);margin:20px 0 0;}
.persona__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px;}
.pcard{background:var(--bg);padding:38px 30px 32px;display:flex;flex-direction:column;gap:13px;transition:background .4s;}
.pcard:hover{background:#0e0e11;}
.pcard__label{font-family:var(--f-lat);font-size:13px;letter-spacing:.28em;color:var(--accent);text-transform:uppercase;margin:0;}
.pcard__name{font-family:var(--f-ja);font-size:20px;font-weight:500;letter-spacing:.04em;color:var(--ink);margin:0;}
.pcard__desc{font-size:14px;line-height:2.0;color:var(--muted);margin:0;flex:1;}
.pcard__links{display:flex;flex-direction:column;gap:11px;margin-top:6px;}
.pcard__go{display:inline-flex;align-items:center;gap:9px;width:fit-content;font-family:var(--f-lat);font-size:14px;letter-spacing:.14em;color:var(--soft);border-bottom:1px solid var(--line-h);padding-bottom:4px;transition:gap .3s,border-color .3s,color .3s;}
.pcard__go:hover{gap:14px;border-color:var(--accent);color:var(--ink);}
.pcard__line{display:inline-flex;align-items:center;gap:7px;width:fit-content;font-size:14px;letter-spacing:.03em;color:var(--tf-line-soft);transition:color .3s;}
.pcard__line:hover{color:#86efac;}

/* ご相談の流れ（connect） */
.tf-flow{margin:9vh 5vw 0;}
.tf-flow__eyebrow{font-family:var(--f-lat);font-size:13px;letter-spacing:.34em;color:var(--faint);text-transform:uppercase;margin:0 0 30px;}
.tf-flow__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.tf-step{background:var(--bg);padding:34px 30px;}
.tf-step__no{font-family:var(--f-lat);font-size:31px;color:var(--accent);line-height:1;margin:0;}
.tf-step__t{font-family:var(--f-ja);font-size:17px;font-weight:500;letter-spacing:.04em;color:var(--ink);margin:16px 0 8px;}
.tf-step__d{font-size:14px;line-height:1.95;color:var(--muted);margin:0;}

/* 最終CTAの安心サブコピー */
.cta__sub{font-size:14px;color:var(--faint);letter-spacing:.04em;margin:-20px 0 38px;}

/* フッター連絡先リンク・フォーカスリング */
.foot__co a:hover{color:var(--soft);}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* モバイル/中間幅メニュー（JSが注入・1200px未満で表示。ナビ7項目は1180px以下で折返すため） */
.tf-menu-btn{display:none;position:relative;width:42px;height:42px;padding:0;margin-right:-6px;background:none;border:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.tf-menu-btn span{display:block;width:21px;height:1px;background:var(--ink);transition:transform .5s var(--ease),opacity .3s;}
.tf-menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.tf-menu-btn.is-open span:nth-child(2){opacity:0;}
.tf-menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.tf-drawer{position:fixed;inset:0;z-index:59;background:rgba(9,9,10,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px;padding:90px 7vw 40px;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s;}
.tf-drawer.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--ease);}
.tf-drawer__nav{display:flex;flex-direction:column;align-items:center;gap:4px;}
.tf-drawer__nav a{font-family:var(--f-lat);font-size:clamp(22px,5.7vw,28.5px);font-weight:400;letter-spacing:.2em;color:rgba(244,243,240,.75);padding:10px 16px;white-space:nowrap;opacity:0;transform:translateY(16px);transition:color .3s;}
.tf-drawer.is-open .tf-drawer__nav a{opacity:1;transform:none;transition:color .3s,opacity .7s var(--ease),transform .7s var(--ease);}
.tf-drawer.is-open .tf-drawer__nav a:nth-child(2){transition-delay:.045s,.045s,.045s;}
.tf-drawer.is-open .tf-drawer__nav a:nth-child(3){transition-delay:.09s,.09s,.09s;}
.tf-drawer.is-open .tf-drawer__nav a:nth-child(4){transition-delay:.135s,.135s,.135s;}
.tf-drawer.is-open .tf-drawer__nav a:nth-child(5){transition-delay:.18s,.18s,.18s;}
.tf-drawer.is-open .tf-drawer__nav a:nth-child(6){transition-delay:.225s,.225s,.225s;}
.tf-drawer.is-open .tf-drawer__nav a:nth-child(7){transition-delay:.27s,.27s,.27s;}
.tf-drawer__nav a:hover{color:var(--ink);}
.tf-drawer__nav a.is-active{color:var(--accent);}
.tf-drawer__line{margin-top:4px;padding:15px 40px;font-size:15.5px;opacity:0;transform:translateY(16px);}
.tf-drawer.is-open .tf-drawer__line{opacity:1;transform:none;transition:transform .7s var(--ease) .3s,opacity .7s var(--ease) .3s,box-shadow .2s;}
html.tf-menu-open{overflow:hidden;}
html.tf-menu-open .tf-dock{opacity:0!important;pointer-events:none!important;}
html.tf-menu-open .head{transform:none!important;}
/* 768〜1339px：ナビを2段目に降ろして常時表示する（ハンバーガーにしない）
   根拠（2026-09-06実測）：ナビ8項目の自然幅782px＋ロゴ194＋右側177＋余白128＋左右gap60
   ＝1段に収めるには1341px必要。2段目に降ろせばナビは910pxあれば1行に収まるため、
   ラップトップ幅(1280等)でもメニューを隠さずに済む。910px未満では2段目内で自然に折返す。 */
@media(max-width:1339px) and (min-width:768px){
  /* 2段になるぶんヘッダーが高くなるので、上下の余白を詰めて画面占有を抑える */
  .head{flex-wrap:wrap;padding-top:14px;padding-bottom:14px;}
  .head.scrolled,.head.head--inner{padding-top:12px;padding-bottom:12px;}
  .brand{order:1;}
  .head-right{order:2;}
  .nav{
    display:flex;
    order:3;
    flex-basis:100%;
    justify-content:center;
    flex-wrap:wrap;
    /* 字間とgapをわずかに詰め、8項目を1行に収める（782px→約690px）。
       これで768px付近まで2行に折り返さずに済む */
    gap:16px;
    letter-spacing:.10em;
    row-gap:10px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid transparent;
    transition:border-color .5s;
  }
  /* 背景が乗る状態のときだけ区切り線を出す（ヒーロー上では線を出さない） */
  .head.scrolled .nav,
  .head.head--inner .nav{border-top-color:var(--line);}
}
/* 768px未満（スマートフォン）：ハンバーガー */
@media(max-width:767px){
  .nav{display:none;}
  .tf-menu-btn{display:flex;}
}
/* スマホ：ヘッダーは「ロゴ＋EN＋メニュー」に絞り1段を維持 */
@media(max-width:640px){
  .head .btn-line{display:none;}
  .head-right{gap:10px;}
  .brand{font-size:20px;}
}

/* reduced motion：全モーション停止 */
@media(prefers-reduced-motion:reduce){
  .tf-progress{display:none;}
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
  .head,.tf-dock{transition:none;}
  .head.tf-hide{transform:none;}
  html.js .hero h1[data-reveal]{filter:none;letter-spacing:.05em;}
  html.tf-js .pg-intro__h{opacity:1;transform:none;filter:none;transition:none;}
  html.tf-js .tf-zoom img{transform:none;transition:none;}
  html.tf-js .tf-kb{animation:none;}
  .tf-dock.tf-pulse::before{animation:none;}
  .tf-drawer,.tf-drawer__nav a,.tf-drawer__line,.tf-menu-btn span{transition:none!important;}
  .tf-drawer__nav a,.tf-drawer__line{opacity:1;transform:none;}
}

/* ==================================================================
 * コラム記事サイドバー（2026-09-04 追加）
 * single.php でのみ使用。固定ページには影響しない。
 * ================================================================ */

/* --- レイアウト：本文＋右サイドバーの2カラム --- */
.article-layout.has-sidebar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
  align-items:start;
}
/* 2カラム時は本文の中央寄せを解除（1カラム時の .article-body は従来どおり） */
.article-layout.has-sidebar .article-body{max-width:none;margin:0;padding-left:0;padding-right:0;}
.article-layout.has-sidebar .article-main{min-width:0;}

/* --- 追従（スクロールしても画面内に留まる） --- */
.article-sidebar{
  position:sticky;
  top:96px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-top:32px;
  scrollbar-width:thin;
}
.article-sidebar::-webkit-scrollbar{width:6px;}
.article-sidebar::-webkit-scrollbar-thumb{background:rgba(40,30,10,.18);border-radius:3px;}

/* --- ウィジェットの器（中身のデザインは各ウィジェットのHTML側） --- */
.tfs-widget{margin:0 0 14px;}
.tfs-widget:last-child{margin-bottom:0;}
.tfs-widget-title{
  font-family:'Shippori Mincho',serif;font-size:15px;font-weight:600;
  color:#0d1b3e;margin:0 0 10px;letter-spacing:.02em;
}

/* --- タブレット以下は1カラム（サイドバーは本文の下） --- */
@media(max-width:1100px){
  .article-layout.has-sidebar{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:0;
    max-width:none;
  }
  .article-layout.has-sidebar .article-body{max-width:800px;margin:0 auto;padding:32px 24px 88px;}
  .article-sidebar{
    position:static;max-height:none;overflow:visible;
    max-width:800px;margin:0 auto;padding:0 24px 72px;
  }
}
@media(max-width:640px){
  .article-layout.has-sidebar .article-body{padding:24px 16px 48px;}
  .article-sidebar{padding:0 16px 56px;}
}

/* --- サイドバー内カードのデザイン（ウィジェットのHTMLから参照） --- */
.article-sidebar .tfs{
  --tfs-bg:#fbf9f5; --tfs-ink:#211d16; --tfs-ink2:#3a342a; --tfs-muted:#6b6355;
  --tfs-line:rgba(40,30,10,.14); --tfs-accent:#8a6520; --tfs-fill:rgba(150,108,40,.06);
  font-family:'Zen Kaku Gothic New',sans-serif;color:var(--tfs-ink2);line-height:1.75;
}
.article-sidebar .tfs *{box-sizing:border-box;}
.article-sidebar .tfs a{text-decoration:none;color:inherit;border-bottom:none;}
.article-sidebar .tfs-card{background:var(--tfs-bg);border:1px solid var(--tfs-line);padding:20px 20px 18px;}
.article-sidebar .tfs-eyebrow{
  font-family:'Cormorant Garamond',serif;font-size:11.5px;letter-spacing:.24em;
  color:var(--tfs-accent);text-transform:uppercase;margin:0 0 9px;
}
.article-sidebar .tfs-title{
  font-family:'Shippori Mincho',serif;font-size:16.5px;font-weight:600;line-height:1.5;
  color:var(--tfs-ink);margin:0 0 8px;
}
.article-sidebar .tfs-desc{font-size:13px;color:var(--tfs-muted);margin:0 0 14px;}
.article-sidebar .tfs-btn{
  display:block;text-align:center;padding:11px 14px;
  background:var(--tfs-fill);border:1px solid rgba(150,108,40,.34);
  font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--tfs-accent);
  transition:background-color .25s,border-color .25s;
}
.article-sidebar .tfs-btn:hover{background:rgba(150,108,40,.13);border-color:rgba(150,108,40,.6);}
.article-sidebar .tfs-btn .a{font-family:'Cormorant Garamond',serif;margin-left:6px;}
.article-sidebar .tfs-cv .tfs-btn{background:var(--tfs-accent);border-color:var(--tfs-accent);color:#fff;}
.article-sidebar .tfs-cv .tfs-btn:hover{background:#6f5119;border-color:#6f5119;}
.article-sidebar .tfs-note{font-size:11.5px;color:var(--tfs-muted);margin:8px 0 0;text-align:center;}

/* ==================================================================
 * 資料ダウンロードページ（page-documents.php）2026-09-05 追加
 * 黒背景のサイトの中で、このページだけ白地にする
 * ================================================================ */
.tfd-page{
  background:#fff;
  padding:calc(72px + 56px) 0 72px;   /* 固定ヘッダー分＋余白 */
  min-height:100vh;
}