/* =========================================================
   トラチ株式会社 TOP
   ① 変数 → ② ベース → ③ 共通 → ④ セクション別 → ⑤ PC上書き
   モバイルファースト（SP=基本 / PC=@media min-width:768px）
   ========================================================= */

/* ---------- ① 変数 ---------- */
:root{
  --paper:#ffffff;
  --gray-bg:#f5f5f1;
  --ink:#0c0c0c;
  --body:#333331;
  --body-mincho:#292926;
  --muted:#6b6b66;
  --line:#e3e3de;
  --accent:#ffcb24;
  --accent-deep:#f2b500;
  --black:#080808;
  --link:#3369cc;

  --font-ja:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --font-mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-en:"Space Grotesk","Zen Kaku Gothic New",sans-serif;

  --content:1200px;
  --gutter:24px;
  --sec-pad:72px;      /* SP */
  --label-col:340px;
  --header-h:70px;   /* ヘッダー実寸（padding16*2 + ロゴ38 ≒ 69px）に合わせる */
}

/* ---------- ② ベース ---------- */
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--font-ja);
  font-size:15px;
  line-height:1.9;
  letter-spacing:.03em;
  word-break:auto-phrase;
  line-break:strict;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}

.skip-link{position:fixed;left:16px;top:16px;z-index:300;background:var(--accent);color:#000;
  padding:.7rem 1.2rem;font-weight:700;transform:translateY(-200%);transition:transform .3s}
.skip-link:focus{transform:none}

/* ---------- ③ 共通ユーティリティ ---------- */
.inner{width:100%;max-width:calc(var(--content) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}

.pc-only{display:none}
.sp-only{display:inline}

.section{padding-block:var(--sec-pad)}
.section--white{background:var(--paper)}
.section--gray{background:var(--gray-bg)}
.section--accent{background:var(--accent)}

/* スクロールで出す（案件全体で使う控えめなリビール） */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-reveal].is-in{opacity:1;transform:none}

/* セクションラベル（英字＋黄バー＋日本語） */
.sec-label__en{font-family:var(--font-en);font-weight:500;font-size:23px;letter-spacing:.06em;color:var(--ink);line-height:1.2}
.sec-label__bar{display:block;width:40px;height:3px;background:var(--accent);margin-top:12px}
.sec-label__ja{font-weight:700;font-size:17px;letter-spacing:.04em;line-height:1.6;color:var(--ink);margin-top:12px}
.sec-label__sub{font-family:var(--font-en);font-weight:500;font-size:10px;letter-spacing:.2em;color:var(--muted);margin-top:10px}

/* 見出し・本文の型 */
.lead-xl{font-weight:700;font-size:27px;line-height:1.55;letter-spacing:.02em;color:var(--ink)}
.stmt{font-weight:700;font-size:26px;line-height:1.55;letter-spacing:.02em;color:var(--ink)}
.body-md{font-weight:500;font-size:16px;line-height:2;letter-spacing:.03em;color:var(--body)}
.closing-stmt{font-weight:700;font-size:18px;line-height:1.8;letter-spacing:.02em;color:var(--ink)}
.meta{font-family:var(--font-en);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.mini-label{font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--accent-deep)}
/* VISION / VALUE の日本語見出し。「トラチという会社。」と同じ大きさで揃える */
.mini-title{font-weight:700;font-size:26px;line-height:1.55;letter-spacing:.02em;color:var(--ink);margin-top:12px}

/* 2カラム（左ラベル固定 / 右コンテンツがスクロール） */
.split__body{margin-top:30px;display:flex;flex-direction:column;gap:30px}
.split__body--wide{gap:30px}

/* ラベル上・コンテンツ全幅のセクション */
.sec-head{display:flex;flex-direction:column;gap:30px}
.sec-head__body{display:flex;flex-direction:column;gap:28px}

/* ボタン・リンク */
.btn-pill{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:100px;background:var(--accent);color:var(--ink);
  font-weight:700;font-size:14px;letter-spacing:.06em}
.btn-outline{display:inline-flex;align-items:center;gap:16px;
  padding:18px 38px;border:1px solid var(--ink);border-radius:100px;
  font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--ink);
  transition:background .3s,color .3s}
.btn-outline i{font-family:var(--font-en);font-style:normal}
.btn-outline:hover{background:var(--ink);color:#fff}

.link-underline{display:inline-block;width:fit-content;
  font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.link-underline i{font-family:var(--font-en);font-style:normal;margin-left:14px}
.link-underline::after{content:"";display:block;height:2px;margin-top:10px;background:var(--accent);
  transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.link-underline:hover::after{transform:scaleX(.6)}


/* =========================================================
   ④ セクション別
   ========================================================= */

/* ---------- HEADER ----------
   スクロールすると白＋ぼかしに変わる（元デザインと同じ）。ロゴと文字色も反転させる */
.header{position:fixed;inset:0 0 auto;z-index:100;color:#fff;
  border-bottom:1px solid transparent;
  transition:background .5s,backdrop-filter .5s,color .5s,border-color .5s}
.header.is-scrolled{background:rgba(255,255,255,.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--ink);border-bottom-color:var(--line)}
.header__inner{max-width:calc(var(--content) + var(--gutter) * 2);margin-inline:auto;
  padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.header__brand{position:relative;display:block;line-height:0}
.header__logo{width:132px;transition:opacity .5s}
.header__logo--dark{position:absolute;inset:0;opacity:0}
.header.is-scrolled .header__logo--light{opacity:0}
.header.is-scrolled .header__logo--dark{opacity:1}
.gnav,.header__cta{display:none}

.menu-btn{width:26px;height:26px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.menu-btn span{display:block;width:26px;height:2px;background:currentColor;
  transition:transform .35s,opacity .25s,background .5s}
body.is-menu-open .menu-btn span{background:#fff}
body.is-menu-open .menu-btn span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.is-menu-open .menu-btn span:nth-child(2){opacity:0}
body.is-menu-open .menu-btn span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:90;background:rgba(8,8,8,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
body.is-menu-open .drawer{opacity:1;visibility:visible}
.drawer nav{display:flex;flex-direction:column;align-items:center;gap:30px}
.drawer__item{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff}
.drawer__en{font-family:var(--font-en);font-weight:700;font-size:19px;letter-spacing:.14em}
.drawer__ja{font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.drawer__cta{margin-top:10px}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;
  background:#0d0d0f url(../images/hero/hero-poster.jpg) center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;animation:kenburns 40s ease-in-out infinite alternate;
  filter:contrast(1.06) saturate(1.05)}
/* 映像自体がゆっくり動くので、拡大はごく控えめにする。
   拡大率を上げると1920pxの映像を画面幅以上に引き伸ばすことになり、
   実測で scale 1.12 は鮮明さが 77% まで落ちた（scale 1.04 なら実質劣化なし） */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.04)}}
/* 映像を覆いすぎるとコントラストが落ちて「ぼんやり」見えるので、
   暗くするのはヘッダーとコピーが乗る範囲だけに絞る */
.hero__overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,8,8,.42) 0%,
    rgba(8,8,8,.04) 30%,
    rgba(8,8,8,.06) 50%,
    rgba(8,8,8,.50) 80%,
    rgba(8,8,8,.72) 100%)}

.hero__copy{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);
  width:100%;padding-inline:var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.hero__title{font-weight:700;font-size:34px;line-height:1.55;letter-spacing:.03em;color:#fff;
  text-shadow:0 0 3px rgba(8,8,8,.7),0 0 12px rgba(8,8,8,.55),0 2px 20px rgba(8,8,8,.45)}
.hero__en{font-family:var(--font-en);font-weight:500;font-size:10px;letter-spacing:.22em;
  color:rgba(255,255,255,.86);text-shadow:0 0 12px rgba(8,8,8,.55),0 2px 20px rgba(8,8,8,.45)}
.hero__rule{display:block;width:36px;height:2px;background:var(--accent)}

/* SCROLL アニメーション（黄色い線がトラックを上→下へループ） */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px}
.scroll-cue__label{font-family:var(--font-en);font-weight:500;font-size:8px;letter-spacing:.4em;
  color:rgba(255,255,255,.78);text-shadow:0 0 10px rgba(8,8,8,.5)}
.scroll-cue__track{position:relative;width:1px;height:30px;background:rgba(255,255,255,.35);overflow:hidden}
.scroll-cue__track i{position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--accent);
  animation:cue 2.1s cubic-bezier(.16,1,.3,1) infinite}
@keyframes cue{0%{top:-40%}100%{top:100%}}

/* ---------- MISSION ---------- */
.mission__text{font-family:var(--font-mincho);font-weight:500;font-size:16px;
  line-height:2.05;letter-spacing:.03em;color:var(--body-mincho);
  display:flex;flex-direction:column;gap:1.7em;max-width:660px}

/* ---------- OUR BUSINESS ---------- */
.biz{display:flex;flex-direction:column;gap:10px}
.biz__link{display:flex;flex-direction:column;gap:10px;background:var(--paper);
  padding:26px 24px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.biz__link:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(12,12,12,.07)}
.biz__num{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--accent)}
.biz__ja{font-weight:700;font-size:18px;line-height:1.6;letter-spacing:.02em;color:var(--ink)}
.biz__en{font-family:var(--font-en);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--muted)}
.biz__arrow{font-family:var(--font-en);font-size:14px;color:var(--ink);align-self:flex-end;margin-top:-18px}

/* ---------- SERVICE 共通 ---------- */
.sv__head{display:flex;flex-direction:column;gap:28px}
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.chips li{background:var(--gray-bg);border-radius:100px;padding:10px 18px;
  font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--body)}
.section--gray .chips li{background:var(--paper)}

.jk-band{display:flex;flex-direction:column;gap:8px}
.jk-band__cell{position:relative;aspect-ratio:342/190;overflow:hidden}
.jk-band__cell img{width:100%;height:100%;object-fit:cover}
.jk-band__cell::after{content:"";position:absolute;inset:50% 0 0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62))}
.jk-band__cell figcaption{position:absolute;left:18px;bottom:14px;z-index:2;
  display:flex;align-items:center;gap:10px}
.jk-band__en{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.18em;color:#fff}
.jk-band__geo{font-family:var(--font-en);font-weight:500;font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.8)}

.sv__closing{display:flex;flex-direction:column;gap:28px}
.sv__closing-cta{display:flex;flex-direction:column;gap:26px;align-items:flex-start}

/* SERVICE 02 数字カード */
.stats{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.stats__card{background:var(--paper);padding:22px 24px;display:flex;align-items:center;gap:20px}
.stats__label{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.16em;color:var(--muted);
  display:block;margin-bottom:4px}
.stats__num{font-weight:900;font-size:30px;line-height:1.3;color:var(--ink);display:block}
.stats__card > .stats__label{display:none}
.stats__card{flex-direction:row}
.stats__desc{font-weight:500;font-size:14px;line-height:1.8;letter-spacing:.03em;color:var(--body);flex:1}
.stats__card::before{content:"";display:none}

.sv__cta{margin-top:48px}

/* SERVICE 03 ステップ */
.steps{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.steps__card{background:var(--gray-bg);padding:24px;display:flex;flex-direction:column;gap:12px}
.section--white .steps__card{background:var(--gray-bg)}
.steps__bar{display:block;width:30px;height:3px;background:var(--accent)}
.steps__en{font-family:var(--font-en);font-weight:700;font-size:14px;letter-spacing:.14em;color:var(--ink)}
.steps__ja{font-weight:500;font-size:15px;line-height:1.85;letter-spacing:.03em;color:var(--body)}
.sv__foot{margin-top:30px;display:flex;flex-direction:column;gap:26px;align-items:flex-start}

/* ---------- NEWS ---------- */
.news{display:flex;flex-direction:column;gap:16px;margin-top:30px}
.news__card{background:var(--paper);border-bottom:4px solid transparent;
  transition:border-color .35s cubic-bezier(.16,1,.3,1)}
.news__card:hover{border-bottom-color:var(--accent)}
.news__link{display:flex;flex-direction:column;height:100%}
/* WordPress化までの見本用ダミーカード。href を持たないので押しても何も起きない。
   押せると誤解されないよう、カーソルとホバー演出を無効にする */
.news__link--dummy{cursor:default}
.news__card:has(.news__link--dummy):hover{border-bottom-color:transparent}
.news__card:has(.news__link--dummy):hover .news__cat{background:none;border-color:var(--line);color:var(--muted)}
.news__link--dummy:hover .news__thumb img{transform:none}
.news__thumb{aspect-ratio:387/296;overflow:hidden}
.news__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.news__link:hover .news__thumb img{transform:scale(1.04)}
.news__body{flex:1;display:flex;flex-direction:column;gap:11px;padding:20px 20px 22px}
.news__cat{align-self:flex-start;border:1px solid #c9c9c3;border-radius:100px;padding:6px 12px;
  font-weight:700;font-size:11px;letter-spacing:.06em;color:#47473f}
.news__card:hover .news__cat{background:var(--accent);border-color:var(--accent);color:#292926}
.news__date{font-family:var(--font-en);font-weight:500;font-size:12px;letter-spacing:.08em;color:#73736c}
.news__title{font-weight:700;font-size:16px;line-height:1.7;letter-spacing:.02em;color:var(--ink)}
.news__text{font-weight:500;font-size:13px;line-height:1.9;letter-spacing:.02em;color:#3d3d3a}
.news__url{font-size:12px;line-height:1.75;color:var(--link);word-break:break-all}
.news__arrow{font-family:var(--font-en);font-size:14px;color:var(--ink);align-self:flex-end;margin-top:auto;padding-top:8px}
.news__more{display:flex;justify-content:center;margin-top:30px}

/* ---------- COMPANY ---------- */
.co__lead{display:flex;flex-direction:column;gap:24px}
.co__vision{display:flex;flex-direction:column;gap:18px;padding-top:18px}
.co__stmt{font-weight:700;font-size:18px;line-height:1.85;letter-spacing:.02em;color:var(--ink)}
.co__values{padding-top:18px}
/* VISION と同じ組み方（ラベル → 日本語見出し → ステートメント） */
.co__values-head{padding-bottom:22px;display:flex;flex-direction:column;gap:18px}
.value__row{border-top:1px solid var(--line);padding-block:26px;display:flex;flex-direction:column;gap:12px}
.value__head{display:flex;align-items:center;gap:14px}
.value__num{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--accent-deep)}
.value__title{font-weight:700;font-size:18px;line-height:1.6;letter-spacing:.02em;color:var(--ink)}
.value__body{font-weight:500;font-size:15px;line-height:2;letter-spacing:.03em;color:#3d3d3a}

/* ---------- MESSAGE ---------- */
.msg{display:flex;flex-direction:column;gap:28px}
.msg__lead{font-family:var(--font-mincho);font-weight:700;font-size:21px;line-height:1.75;
  letter-spacing:.03em;color:var(--ink)}
.msg__body{font-family:var(--font-mincho);font-weight:500;font-size:15px;line-height:2.1;
  letter-spacing:.03em;color:var(--body-mincho);display:flex;flex-direction:column;gap:1.6em}
.msg__photo{aspect-ratio:342/400;overflow:hidden}
.msg__photo img{width:100%;height:100%;object-fit:cover}
.msg__sign{display:flex;flex-direction:column;gap:10px}
/* 「社名と同じ大きさとフォントで（控え目で）」＝ 役職行と名前を完全に同じ体裁にする */
.msg__role,.msg__name{font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.msg__sign{gap:4px}

/* ---------- PROFILE ---------- */
.profile__row{border-top:1px solid var(--line);padding-block:18px;display:flex;flex-direction:column;gap:8px}
.profile__row dt{font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.profile__row dd{font-weight:500;font-size:15px;line-height:1.9;letter-spacing:.03em;color:var(--body)}
.access{display:flex;flex-direction:column;gap:16px;padding-top:14px}
.access__title{font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--ink)}
.access__text{font-weight:500;font-size:15px;line-height:1.95;letter-spacing:.03em;color:var(--body)}
.access__mail{border-bottom:1px solid transparent;transition:border-color .3s}
.access__mail:hover{border-bottom-color:currentColor}
.access__map{height:220px;background:#efefed;overflow:hidden}
.access__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)}
.access__maplink{display:inline-flex;align-items:center;gap:8px;width:fit-content;
  font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .3s}
.access__maplink i{font-family:var(--font-en);font-style:normal}
.access__maplink:hover{border-bottom-color:var(--accent)}

/* ---------- CONTACT ---------- */
.contact__eyebrow{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--ink)}
.contact__display{font-family:var(--font-en);font-weight:700;font-size:38px;line-height:1.15;
  letter-spacing:-.01em;color:var(--ink);margin-top:20px}
.contact__ja{font-weight:700;font-size:16px;letter-spacing:.04em;color:var(--ink);margin-top:20px}
.form{background:var(--paper);padding:34px 24px;margin-top:34px}
.form__col{display:flex;flex-direction:column;gap:20px;max-width:620px;margin-inline:auto}
.form__field{display:flex;flex-direction:column;gap:8px}
.form__label{font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--ink)}
.form__label .req{font-weight:500;font-size:10px;color:#d94026;letter-spacing:.04em}
.form__label .opt{font-weight:500;font-size:10px;color:var(--muted);letter-spacing:.04em}
.form__input{width:100%;border-bottom:1px solid #d9d9d4;padding-block:6px;font-size:16px;line-height:1.5;color:var(--ink)}
.form__input:focus{border-bottom-color:var(--accent-deep);outline:none}
.form__input--area{resize:vertical;min-height:96px}
/* 送信ボタンの直前に置く同意文。控えめに、でも読める大きさで */
.form__consent{font-size:12px;line-height:1.9;letter-spacing:.02em;color:var(--muted);text-align:center;text-wrap:balance}
.form__consent a{border-bottom:1px solid var(--line);transition:border-color .3s}
.form__consent a:hover{border-bottom-color:currentColor}

/* プライバシーポリシーなどの規約ページ。記事詳細の組版をそのまま使う */
.legal{padding-block:8px 72px}
.legal .single__body h2{margin-top:1.4em}
.legal__date{margin-top:1.2em;color:var(--muted);font-size:14px}
.form__submit{display:flex;justify-content:center;padding-top:8px}
.btn-submit{display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:#fff;
  border-radius:100px;padding:19px 44px;font-weight:700;font-size:15px;letter-spacing:.1em;
  transition:opacity .3s}
.btn-submit i{font-family:var(--font-en);font-style:normal}
.btn-submit:hover{opacity:.82}

/* ---------- FOOTER ---------- */
.footer{background:var(--black);color:#fff;padding-block:56px 34px}
.footer__top{display:flex;flex-direction:column;gap:30px}
.footer__brand{display:flex;flex-direction:column;gap:26px}
.footer__logo{width:160px}
.footer__tag{font-family:var(--font-en);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--accent)}
.footer__addr{font-weight:500;font-size:13px;line-height:2;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.footer__nav{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.footer__nav ul{display:flex;flex-direction:column;gap:18px}
.footer__nav a{display:flex;align-items:center;gap:12px}
.footer__en{font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.14em;color:#fff}
.footer__ja{font-weight:500;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.footer__rule{border:0;height:1px;background:rgba(255,255,255,.14);margin-block:30px}
.footer__bottom{display:flex;flex-direction:column;gap:12px}
.footer__bottom small{font-family:var(--font-en);font-weight:500;font-size:11px;
  letter-spacing:.08em;color:rgba(255,255,255,.45)}


/* =========================================================
   下層ページ（NEWS一覧 / NEWS詳細）
   ========================================================= */

/* ヒーローが無いページのヘッダーは最初から白 */
.header--solid{background:rgba(255,255,255,.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--ink);border-bottom-color:var(--line)}
.header--solid .header__logo--light{opacity:0}
.header--solid .header__logo--dark{opacity:1}

/* パンくず */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-en);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.breadcrumb span[aria-current]{color:var(--ink)}
.breadcrumb a{transition:color .3s}
.breadcrumb a:hover{color:var(--ink)}

/* ページ見出し */
/* パンくずはタイトルとは別ブロック。白地でヘッダー直下に置く */
.breadcrumb-bar{background:var(--paper);padding-block:calc(var(--header-h) + 12px) 12px}

/* 記事一覧を主役にしたいので、タイトル帯は最小限の高さに。
   縦積みは維持したまま、行間と上下余白だけを詰める */
.page-head{background:var(--gray-bg);padding-block:14px}
.page-head .inner{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.page-head__en{font-family:var(--font-en);font-weight:500;font-size:24px;letter-spacing:.04em;
  color:var(--ink);line-height:1.05}
.page-head__bar{display:block;width:28px;height:3px;background:var(--accent);flex:none}
.page-head__ja{font-weight:700;font-size:15px;letter-spacing:.04em;line-height:1.2;color:var(--ink)}

/* 一覧グリッド */
.archive{padding-block:44px 72px}
.news--archive{display:grid;grid-template-columns:1fr;gap:16px;margin-top:0}
.news--archive .news__card{flex:none}
.news__thumb--empty{background:#ebebe8}

/* ページ送り */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:44px}
.pager__item{display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--line);font-family:var(--font-en);font-weight:700;font-size:13px;color:var(--ink);
  transition:background .3s,color .3s,border-color .3s}
.pager__item:hover{border-color:var(--ink)}
.pager__item.is-current{background:var(--ink);border-color:var(--ink);color:#fff}
.pager__next,.pager__prev{display:grid;place-items:center;width:36px;height:36px;
  font-family:var(--font-en);font-size:14px;color:var(--ink)}
.pager__next{margin-left:6px}
.pager__prev{margin-right:6px}

/* 記事詳細 */
.single{background:var(--paper);padding-block:calc(var(--header-h) + 32px) 72px}
.single__col{max-width:800px;margin-inline:auto;margin-top:32px}
.single__head{padding-bottom:26px;border-bottom:1px solid var(--line)}
.single__meta{display:flex;align-items:center;gap:16px}
.single__date{font-family:var(--font-en);font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.single__title{font-weight:700;font-size:23px;line-height:1.75;letter-spacing:.02em;color:var(--ink);margin-top:18px}
.single__eyecatch{margin-top:32px;aspect-ratio:800/600;overflow:hidden;background:#ebebe8}
.single__eyecatch img{width:100%;height:100%;object-fit:cover}
.single__body{margin-top:36px;display:flex;flex-direction:column;gap:1.6em;
  font-weight:500;font-size:15px;line-height:2;letter-spacing:.03em;color:var(--body)}
.single__body h2{font-weight:700;font-size:19px;line-height:1.7;letter-spacing:.02em;color:var(--ink);margin-top:.8em}
.single__list{display:flex;flex-direction:column;gap:12px}
.single__list li{position:relative;padding-left:20px}
.single__list li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;background:var(--accent)}
.single__link{color:var(--link);word-break:break-all;border-bottom:1px solid transparent;transition:border-color .3s}
.single__link:hover{border-bottom-color:var(--link)}

.single__nav{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px}
.single__prev,.single__next{font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--ink);
  transition:opacity .3s}
.single__prev:hover,.single__next:hover{opacity:.6}
.single__next{text-align:right}
.single__prev i,.single__next i{font-family:var(--font-en);font-style:normal}
.single__back{grid-column:1 / -1;order:-1;justify-self:center}

/* =========================================================
   ⑤ PC（min-width:768px）
   ========================================================= */
@media (min-width:768px){
  /* --header-h はヘッダーの実寸に合わせる（padding24*2 + ロゴ56 = 104px） */
  :root{--gutter:40px;--sec-pad:112px;--header-h:104px}

  body{font-size:16px}
  .pc-only{display:inline}
  .sp-only{display:none}

  /* ラベル */
  .sec-label__en{font-size:28px}
  .sec-label__bar{width:46px;height:4px;margin-top:14px}
  .sec-label__ja{font-size:21px;margin-top:14px}
  .sec-label__sub{font-size:11px}

  .lead-xl{font-size:38px}
  .stmt{font-size:34px}
  .body-md{font-size:17px;line-height:1.95}
  .closing-stmt{font-size:21px}
  .meta{font-size:12px;letter-spacing:.16em}
  .mini-label{font-size:13px}
  .mini-title{font-size:34px;margin-top:14px}   /* 「トラチという会社。」と同じ大きさ */

  /* --- 2カラム：左ラベルはスクロール追従 --- */
  .split{display:flex;align-items:flex-start;gap:0}
  .split > .sec-label{flex:0 0 var(--label-col);width:var(--label-col);
    position:sticky;top:calc(var(--header-h) + 40px)}
  .split__body{flex:1;min-width:0;margin-top:0;gap:48px}
  .split__body--wide{gap:56px}

  /* --- ラベル上・全幅のセクション --- */
  .sec-head{flex-direction:row;gap:0}
  .sec-head > .sec-label{flex:0 0 var(--label-col);width:var(--label-col)}
  .sec-head__body{flex:1;min-width:0;gap:28px}

  /* HEADER */
  .header__inner{padding:24px var(--gutter)}
  .header.is-scrolled .header__inner{padding:14px var(--gutter)}
  .header__brand img{width:158px}
  .gnav{display:flex;align-items:center;gap:40px;margin-left:auto}
  .gnav__item{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
  .gnav__en{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.14em;color:currentColor}
  .gnav__ja{font-size:11px;letter-spacing:.06em;color:currentColor;opacity:.72}
  .gnav__item::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .gnav__item:hover::after{transform:scaleX(1)}
  .header__cta{display:inline-flex;margin-left:56px}
  .menu-btn,.drawer{display:none}

  /* HERO */
  .hero{min-height:700px}
  .hero__overlay{background:linear-gradient(180deg,
    rgba(8,8,8,.40) 0%,rgba(8,8,8,.03) 30%,rgba(8,8,8,.05) 50%,rgba(8,8,8,.48) 80%,rgba(8,8,8,.70) 100%)}
  .hero__copy{gap:26px;top:73.5%}   /* Figmaの案B（コピー中央）と同じ位置 */
  .hero__title{font-size:60px;text-shadow:0 0 4px rgba(8,8,8,.7),0 0 16px rgba(8,8,8,.55),0 2px 28px rgba(8,8,8,.45)}
  .hero__en{font-size:13px;letter-spacing:.26em}
  .hero__rule{width:48px}
  .scroll-cue{bottom:32px;gap:8px}
  .scroll-cue__label{font-size:9px}
  .scroll-cue__track{height:40px}

  /* MISSION */
  .mission__text{font-size:17px;line-height:2}

  /* OUR BUSINESS */
  .biz__link{flex-direction:row;align-items:center;gap:28px;padding:34px 32px 34px 40px}
  .biz__num{font-size:15px;letter-spacing:.1em}
  .biz__ja{font-size:23px;letter-spacing:.03em}
  .biz__en{font-size:12px;letter-spacing:.18em}
  .biz__arrow{margin:0 0 0 auto;display:grid;place-items:center;
    width:46px;height:46px;border:1px solid #d1d1c9;border-radius:50%;font-size:15px;
    transition:background .35s,color .35s,border-color .35s}
  .biz__link:hover .biz__arrow{background:var(--ink);border-color:var(--ink);color:#fff}

  /* SERVICE 01 */
  .chips{flex-direction:row;gap:12px}
  .chips li{padding:11px 20px;font-size:14px}
  .jk-band{flex-direction:row;gap:10px}
  .jk-band__cell{flex:1;aspect-ratio:425/380}
  .jk-band__cell figcaption{left:28px;bottom:24px;gap:14px}
  .jk-band__en{font-size:15px;letter-spacing:.2em}
  .jk-band__geo{font-size:10px;letter-spacing:.12em}
  .sv__closing{gap:30px}
  .sv__closing-cta{gap:26px}

  /* SERVICE 02 */
  .stats{flex-direction:row;gap:10px;margin-top:48px}
  .stats__card{flex:1;flex-direction:column;align-items:flex-start;gap:10px;padding:38px 36px}
  .stats__label{font-size:12px;letter-spacing:.18em;margin:0}
  .stats__num{font-size:44px}
  .stats__desc{font-size:15px;line-height:1.75;flex:none}

  /* SERVICE 03 */
  /* SERVICE 03 の .sv__foot は space-between で右端に来るので、SERVICE 02 も右端に揃える */
  .sv__cta{margin-top:48px;text-align:right}
  .steps{flex-direction:row;gap:10px;margin-top:48px;align-items:stretch}
  .steps__card{flex:1;gap:16px;padding:34px 32px}
  .steps__en{font-size:15px}
  .steps__ja{font-size:16px;line-height:1.8}
  .sv__foot{flex-direction:row;align-items:center;justify-content:space-between;margin-top:48px;gap:40px}

  /* NEWS */
  .news{flex-direction:row;gap:20px;margin-top:52px;align-items:stretch}
  .news__card{flex:1;min-width:0;display:flex}
  .news__body{gap:13px;padding:22px 22px 24px}
  .news__cat{padding:7px 14px;font-size:12px}
  .news__date{font-size:13px}
  .news__title{font-size:18px;line-height:1.85}
  .news__text{font-size:14px;line-height:1.9}
  .news__url{font-size:13px}
  .news__arrow{font-size:15px}
  .news__more{margin-top:52px}
  .btn-outline{padding:20px 44px;font-size:15px;gap:18px}

  /* COMPANY */
  .co__vision{gap:22px}
  .co__stmt{font-size:22px}
  .value__row{padding-block:34px;flex-direction:row;gap:0;align-items:flex-start}
  .value__head{flex:0 0 300px;width:300px;gap:20px}
  .value__title{font-size:21px;line-height:1.65}
  .value__body{flex:1;font-size:16px}

  /* MESSAGE：左に文章／右に写真（写真は上端そろえで縦3行ぶんを占有） */
  .msg{display:grid;grid-template-columns:minmax(0,1fr) 300px;
    grid-template-areas:"lead photo" "body photo" "sign photo";
    column-gap:48px;row-gap:30px;align-items:start}
  .msg__lead{grid-area:lead;font-size:26px}
  .msg__body{grid-area:body;font-size:16px;line-height:2.1}
  .msg__sign{grid-area:sign}
  /* 代表写真も左ラベルと同じようにスクロールで追従させる */
  .msg__photo{grid-area:photo;width:300px;aspect-ratio:300/400;
    position:sticky;top:calc(var(--header-h) + 40px);align-self:start}
  .msg__role,.msg__name{font-size:13px}

  /* PROFILE */
  .profile__row{flex-direction:row;gap:0;padding-block:22px}
  .profile__row dt{flex:0 0 170px;width:170px;font-size:14px;line-height:1.9}
  .profile__row dd{flex:1;font-size:16px}
  .access{gap:20px;padding-top:0}
  .access__map{height:320px}
  .access__maplink{font-size:14px}

  /* CONTACT */
  .contact__eyebrow{font-size:13px}
  .contact__display{font-size:62px;line-height:1.12;margin-top:22px}
  .contact__ja{font-size:19px;margin-top:22px}
  .form{padding:52px 56px;margin-top:56px}
  .form__col{gap:22px}
  .form__consent{font-size:13px}
  .form__label{font-size:14px}
  .form__input--area{min-height:120px}
  .btn-submit{padding:22px 56px;font-size:16px;gap:20px}

  /* FOOTER */
  .footer{padding-block:84px 44px}
  .footer__top{flex-direction:row;gap:0}
  .footer__brand{flex:0 0 430px;width:430px}
  .footer__logo{width:190px}
  .footer__tag{font-size:12px;letter-spacing:.16em}
  .footer__addr{font-size:14px}
  .footer__nav{flex:1;flex-direction:row;justify-content:flex-end;gap:60px;padding-top:0}
  .footer__nav ul{gap:26px}
  .footer__nav a{flex-direction:column;align-items:flex-start;gap:7px}
  .footer__ja{font-size:12px}
  .footer__rule{margin-block:40px}
  .footer__bottom{flex-direction:row;align-items:center;justify-content:space-between}
  .footer__bottom small{font-size:12px}

  /* ---------- 下層ページ ---------- */
  .breadcrumb{font-size:12px}
  .breadcrumb-bar{padding-block:calc(var(--header-h) + 14px) 14px}
  .page-head{padding-block:18px}
  .page-head .inner{gap:9px}
  .page-head__en{font-size:30px}
  .page-head__bar{width:34px;height:3px}
  .page-head__ja{font-size:16px}

  .archive{padding-block:48px 112px}
  .legal{padding-block:16px 112px}
  .news--archive{grid-template-columns:repeat(3,1fr);gap:40px 20px;margin-top:0}
  .pager{margin-top:56px;gap:10px}

  .single{padding-block:calc(var(--header-h) + 40px) 112px}
  .single__col{margin-top:40px}
  .single__head{padding-bottom:32px}
  .single__date{font-size:14px}
  .single__title{font-size:32px;line-height:1.75;margin-top:20px}
  .single__eyecatch{margin-top:40px}
  .single__body{margin-top:44px;font-size:17px;line-height:2}
  .single__body h2{font-size:21px}
  .single__nav{margin-top:64px;padding-top:40px;
    grid-template-columns:1fr auto 1fr;align-items:center}
  .single__prev,.single__next{font-size:14px}
  .single__back{grid-column:auto;order:0}
}

/* ---------- 動きを減らす設定 ----------
   OSの「アニメーション効果オフ」で効く。
   サイトの主役であるヒーロー映像とSCROLLの誘導は残し、
   スクロールに連動して大きく動く演出だけを止める */
/* ---------------------------------------------------------
   タブレット幅（768〜899px）はグローバルナビが2段に折り返し、
   ヘッダーが130pxまで伸びて下のコンテンツにかぶるため、
   この幅まではハンバーガーメニューを使う
   --------------------------------------------------------- */
@media (min-width:768px) and (max-width:899.98px){
  .gnav,.header__cta{display:none}
  .menu-btn,.drawer{display:block}
  .menu-btn{display:flex}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero__video{animation:none}          /* 映像は流したまま、ゆっくり拡大だけ止める */
  .news__link:hover .news__thumb img{transform:none}
  .biz__link:hover{transform:none}
}

/* =========================================================
   WordPress版で追加した分
   ========================================================= */

/* ---------- Contact Form 7 ----------
   プラグインが出す余分な余白や枠を打ち消し、
   静的版と同じ見た目に揃える */
.wpcf7{margin:0}
.wpcf7 form.wpcf7-form{margin:0}
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 入力欄はテーマ側の .form__input が効くよう、プラグイン既定の枠を消す */
.wpcf7 .form__input{border:none;border-bottom:1px solid #d9d9d4;border-radius:0;background:none}
.wpcf7 .form__input:focus{outline:none;border-bottom-color:var(--ink)}
/* 送信中のくるくる */
.wpcf7-spinner{margin:0 0 0 12px}
/* エラー表示 */
.wpcf7-not-valid-tip{margin-top:6px;font-size:12px;color:#c0392b}
.wpcf7 .form__input.wpcf7-not-valid{border-bottom-color:#c0392b}
.wpcf7-response-output{margin:24px 0 0;padding:14px 18px;border:1px solid var(--line);
  background:var(--paper);font-size:13px;line-height:1.9;text-align:center}
.wpcf7-form.invalid .wpcf7-response-output{border-color:#c0392b;color:#c0392b}
.wpcf7-form.sent .wpcf7-response-output{border-color:var(--accent-deep)}

/* ---------- 確認画面（Confirm Plus Contact Form 7） ----------
   プラグイン既定は「フォームを visibility:hidden で残したまま、確認画面を absolute で重ねる」方式。
   こちらではポップアップ（モーダル）で出すため、その前提を打ち消す */
.wpcf7-form.wpcf7cp-form-hide{visibility:visible !important}
div#wpcf7cpcnf{position:static;width:auto;background-color:transparent;padding:0;margin:0}

/* ---------- 確認モーダル ----------
   スマホでもスクロールせず1画面に収まるよう、余白と文字を詰めている */
/* モーダル表示中はページ自体を固定する。
   こうしておくとプラグインが行う window.scrollTo も効かず、画面が跳ねない。
   位置は JS が top に退避・復元する */
body.is-modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.cf7modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:16px}
.cf7modal[hidden]{display:none}
.cf7modal__backdrop{position:absolute;inset:0;background:rgba(8,8,8,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:cf7fade .25s ease}
.cf7modal__panel{position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(560px,100%);max-height:calc(100dvh - 32px);
  background:var(--paper);box-shadow:0 24px 60px rgba(8,8,8,.28);
  animation:cf7pop .3s cubic-bezier(.16,1,.3,1);outline:none}
@keyframes cf7fade{from{opacity:0}to{opacity:1}}
@keyframes cf7pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.cf7modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex:none;padding:16px 18px;border-bottom:1px solid var(--line)}
.cf7modal__title{font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--ink)}
.cf7modal__close{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;transition:color .3s}
.cf7modal__close:hover{color:var(--ink)}

/* 通常の入力量なら収まる。長文を書かれた時だけここが内側でスクロールする */
.cf7modal__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 18px 18px;
  -webkit-overflow-scrolling:touch}

div#wpcf7cpcnf table{width:100%;border-collapse:collapse}
div#wpcf7cpcnf tr{display:flex;flex-direction:column;gap:2px;padding-block:10px;
  border-bottom:1px solid var(--line)}
div#wpcf7cpcnf tr:last-child{border-bottom:none}
div#wpcf7cpcnf th,div#wpcf7cpcnf td{display:block;width:auto;padding:0;border-bottom:none;
  text-align:left;line-height:inherit}
div#wpcf7cpcnf th p{font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--muted);margin:0}
div#wpcf7cpcnf td p{font-weight:500;font-size:15px;line-height:1.6;letter-spacing:.02em;
  color:var(--ink);margin:0;white-space:pre-wrap;word-break:break-word}
div#wpcf7cpcnf td p:empty::after{content:"（未入力）";color:var(--muted);font-size:13px}

/* ボタン。「この内容で送信」を主役、「修正」を控えめに */
div.wpcf7cp-btns{display:flex;flex-direction:column-reverse;flex-wrap:nowrap;align-items:center;
  gap:10px;margin:16px 0 0}
button.wpcf7cp-cfm-submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin:0;padding:15px 24px;border-radius:999px;background:var(--black);color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.08em;cursor:pointer;border:none;
  transition:opacity .3s,transform .3s}
button.wpcf7cp-cfm-submit-btn:hover{opacity:.85;transform:translateY(-2px)}
button.wpcf7cp-cfm-edit-btn{display:inline-flex;align-items:center;justify-content:center;
  margin:0;padding:8px 16px;background:none;border:none;cursor:pointer;
  font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
button.wpcf7cp-cfm-edit-btn:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* 送信中のオーバーレイ */
div.wpcf7cp-progress-cover{background-color:#fff;opacity:.72}
div.wpcf7cp-progress-content p{font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--ink)}

@media (min-width:768px){
  .cf7modal{padding:24px}
  .cf7modal__panel{max-height:calc(100dvh - 48px)}
  .cf7modal__head{padding:20px 28px}
  .cf7modal__title{font-size:15px}
  .cf7modal__body{padding:6px 28px 26px}
  div#wpcf7cpcnf tr{flex-direction:row;align-items:baseline;gap:20px;padding-block:14px}
  div#wpcf7cpcnf th{flex:0 0 150px}
  div#wpcf7cpcnf td{flex:1}
  div#wpcf7cpcnf th p{font-size:12px}
  div#wpcf7cpcnf td p{font-size:15px}
  div.wpcf7cp-btns{flex-direction:row;justify-content:center;gap:22px;margin-top:24px}
  div.wpcf7cp-btns button.wpcf7cp-cfm-edit-btn{order:-1}
  button.wpcf7cp-cfm-submit-btn{width:auto;min-width:230px}
}

/* 動きを減らす設定のときはアニメーションを出さない */
@media (prefers-reduced-motion:reduce){
  .cf7modal__backdrop,.cf7modal__panel{animation:none}
}

/* 画面の縦が短い端末（iPhone SE など）でも確認モーダルが1画面に収まるよう詰める */
@media (max-height:720px){
  .cf7modal{padding:12px}
  .cf7modal__panel{max-height:calc(100dvh - 24px)}
  .cf7modal__head{padding:12px 16px}
  .cf7modal__title{font-size:13px}
  .cf7modal__body{padding:2px 16px 14px}
  div#wpcf7cpcnf tr{padding-block:7px;gap:1px}
  div#wpcf7cpcnf th p{font-size:10px}
  div#wpcf7cpcnf td p{font-size:14px;line-height:1.5}
  div.wpcf7cp-btns{gap:8px;margin-top:12px}
  button.wpcf7cp-cfm-submit-btn{padding:13px 20px;font-size:14px}
  button.wpcf7cp-cfm-edit-btn{padding:6px 14px;font-size:12px}
}

/* 送信完了メッセージ。「企業と人の、新しい可能性を。」の直下に出す */
.contact__done{display:none}
.contact__done.is-shown{display:block;max-width:620px;margin:24px auto 0;
  padding:16px 20px;background:var(--paper);border-left:4px solid var(--black);
  font-weight:700;font-size:14px;line-height:1.9;letter-spacing:.02em;color:var(--ink);
  animation:cf7fade .4s ease;
  transition:opacity .4s ease,transform .4s ease}
/* 10秒後にそっと消える */
.contact__done.is-leaving{opacity:0;transform:translateY(-6px)}
/* フォーム末尾の既定の表示は、送信完了時だけ隠す（エラーは従来どおりフォーム側に出す） */
.wpcf7-form.sent .wpcf7-response-output{display:none}

@media (min-width:768px){
  .contact__done.is-shown{margin-top:28px;padding:18px 24px;font-size:15px}
}