/* ============================================================
 * 記事ページ用：ヘッダーとフッターだけのスタイル
 * ============================================================
 * このファイルは tools/build-hdft.py が shared.css から作ります。
 * 直接編集しないでください（shared.css を直して作り直す）。
 *
 * 記事本文のレイアウトは本番の css/site.css（Tailwind）をそのまま使います。
 * body や * への指定を入れていないのは、Tailwind の土台と衝突するためです。
 * ============================================================ */
:root{
  --teal:#0d9488; --teal-dark:#0f766e;
  /* 小さい文字（11〜13px）に使う濃いめのティール。--teal は白地で 3.74 しかなく
     小さい文字のAA基準 4.5 に届かないため、文字だけこちらを使う（#0f766e は 5.4） */
  --teal-text:#0f766e; --teal-deep:#115e59;
  /* 警告の数字用。--orange は白地で 2.68 のため大きい文字の 3.0 も満たさない */
  --orange-dark:#ea580c; --orange-deep:#c2410c; --teal-light:#2dd4bf; --teal-pale:#f0fdfa;
  --orange:#f97316; --red:#dc2626;
  --ink:#1c1917; --ink-mid:#57534e; --ink-dim:#78716c;
  --line:#e7e5e4; --bg:#fff; --bg-soft:#fafaf9;
}
.en{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;letter-spacing:.16em}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- ヘッダー ---------- */
/* 初期表示では隠しておき、少し下へスクロールしたら現れる。
   transform と opacity だけを動かすので、再レイアウトは起きない。 */
.hd{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px 24px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:transform .45s cubic-bezier(.16,.84,.3,1),opacity .45s ease,border-color .45s ease}
.hd--hidden{transform:translate3d(0,-100%,0);opacity:0;pointer-events:none}
.hd--shown{border-bottom-color:var(--line)}
.hd__logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;
  text-decoration:none;flex:none}

/* --- メニュー --- */
/* 広い画面では横並び。狭い画面では隠して、右上のボタンで出す。 */
.hd__nav{display:none;align-items:center;gap:20px;font-size:12px;font-weight:800;
  color:var(--ink-mid);letter-spacing:.06em}
.hd__nav a{text-decoration:none;transition:color .2s}
.hd__nav a:hover{color:var(--teal-text)}
/* ページ内か別ページかを示す矢印は付けない（記号が多いと読みにくいため）。
   サイトの外に出るリンクだけ、.exlink のアイコンで示す。 */

/* HOME の中に PROCESS と TECHNOLOGY を入れる。マウスを乗せると開く。 */
.hd__item{position:relative}
.hd__top{display:inline-flex;align-items:center;gap:5px}
/* 下向きの小さな三角。開いていることが分かるよう、開くと反転する */
.hd__top::after{content:'';width:0;height:0;border:3.5px solid transparent;
  border-top-color:currentColor;margin-top:3px;transition:transform .2s}
.hd__item:hover .hd__top::after,.hd__item:focus-within .hd__top::after{transform:rotate(180deg)}
.hd__drop{position:absolute;top:100%;left:-14px;min-width:186px;padding:10px;
  border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s}
/* 上に少し余白を作っておく。ここが空いていると、マウスを下ろす途中で閉じてしまう */
.hd__item::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px}
.hd__item:hover .hd__drop,.hd__item:focus-within .hd__drop{
  opacity:1;visibility:visible;transform:translateY(0)}
.hd__drop a{padding:9px 12px;border-radius:10px;transition:background-color .2s,color .2s}
.hd__drop a:hover{background:var(--teal-pale);color:var(--teal-dark)}

.hd__cta{padding:10px 20px;border-radius:999px;background:var(--teal);color:#fff;
  font-weight:800;font-size:13px;text-decoration:none;flex:none;
  transition:background-color .2s,box-shadow .2s,transform .2s}
.hd__cta:hover{background:var(--teal-dark);transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(13,148,136,.28)}
.hd__cta:focus-visible,.hd__nav a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* --- ハンバーガー（狭い画面用。右上に置く） --- */
.hd__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:12px;
  background:#fff;cursor:pointer;flex:none}
.hd__burger span{display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .25s,opacity .2s}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hd__burger:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* メニューの中の CONTACT は、広い画面では出さない（右のボタンと重なるため） */
.hd__nav-cta{display:none}
@media(min-width:1000px){
  .hd__nav{display:flex}
  .hd__burger{display:none}
}
/* 1000px 未満：メニューをヘッダーの下に落として、上から下へ開く */
@media(max-width:999px){
  .hd__nav{position:absolute;top:100%;right:12px;left:12px;display:grid;gap:4px;
    padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.12);font-size:14px;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s,transform .25s,visibility .25s}
  .hd__nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .hd__nav a{display:block;padding:12px 14px;border-radius:12px}
  .hd__nav a:hover{background:var(--bg-soft)}
  .hd__item::after{content:none}
  /* 狭い画面では畳まず、PROCESS と TECHNOLOGY を字下げして並べる */
  .hd__drop{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 0 16px;border:0;box-shadow:none;background:none;
    border-left:2px solid var(--line);margin:2px 0 6px 14px}
  .hd__top::after{content:none}
  /* 右上のボタンは隠し、メニューの中に CONTACT を出す。
     これでハンバーガーがヘッダーの右端に来る。 */
  .hd__cta{display:none}
  .hd__nav-cta{display:block;margin-top:6px;padding:13px 14px;border-radius:12px;
    background:var(--teal);color:#fff;font-weight:800;text-align:center;
    letter-spacing:.1em}
  .hd__nav-cta:hover{background:var(--teal-dark);color:#fff}
}

/* フッター。黒い面で区切ると本文から浮くため、背景は本文と同じ白のままにして
   境界は上の1本線だけで示す（Gemini と同じ考え方）。
   文字色・線の色・余白も、本文で使っているものをそのまま使う。 */
.ft{padding:72px 0 0;border-top:1px solid var(--line);
    background:var(--bg);color:var(--ink-mid);font-size:13px}
.ft__grid{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:640px){.ft__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}}
.ft__logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.ft__logo svg{width:32px;height:32px;flex:none}
.ft__name{font-size:28px;font-weight:900;letter-spacing:-.01em}
.ft__by{margin:14px 0 0;font-size:13px;color:var(--ink-dim);line-height:1.8}
.ft__by span{color:var(--ink);font-weight:700}
.ft__col{display:flex;flex-direction:column;gap:12px}
/* 欄の見出しは、本文の小見出し（sec__eyebrow）と同じ緑・同じ字間にして統一する */
.ft__h{margin:0 0 6px;color:var(--teal-text);font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px}
.ft__col a{color:inherit;text-decoration:none}
.ft__col a:hover{color:var(--teal-text)}
/* 字下げして、HOME の下位項目（PROCESS・TECHNOLOGY）だと分かるようにする */
.ft__sub{padding-left:14px;border-left:2px solid var(--line);display:grid;gap:12px}

/* 外部サイトへのリンク。四角から矢印が出る記号で、別サイトが開くことを示す。
   サイト内のリンクには記号を付けない（付けると記号だらけになる）。
   記号は装飾なので、読み上げ用の文言（.sr）を別に添える。 */
.exlink{display:inline-flex;align-items:center;gap:6px}
.exlink svg{width:13px;height:13px;flex:none;color:var(--orange)}
/* 相手先のロゴを添える形。文字のうしろに ロゴ → 矢印 の順で並べる。
   ロゴと矢印が続くので、あいだの間隔だけ少し詰める。 */
.exlink--mark img{width:15px;height:15px;flex:none;border-radius:3px;
  object-fit:contain;display:block}
.exlink--mark img + svg{margin-left:-2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ft__copy{margin:56px 0 0;padding:24px 0;border-top:1px solid var(--line);
  text-align:center;font-size:12px;color:var(--ink-dim)}