@charset "utf-8";

/* ヘッダとしているが、全体のレイアウト調整用という方がより正確で正しい */
/* MEMO: header作り直し */
#header {
  /* ロゴの高さは幅から出す（GKK_logo.svg の viewBox 300 × 66.82）。幅だけ変えればよい。 */
  --header-logo-width: 180px;
  --header-logo-height: calc(var(--header-logo-width) * 66.82 / 300);
  /* ロゴ画像の上端から G の縦中心まで（G は viewBox の y 0〜55.44）。PC のナビ・SNS・ハンバーガーはここへ中央を揃える。 */
  --header-logo-g-center: calc(var(--header-logo-height) * 27.72 / 66.82);
  --header-rail-bottom-space: 7px;
  /* ロゴ画像は y のディセンダーを含むので、画像の下端をレールに載せると文字の
     ベースライン（K の下端）がナビのベースラインより上に浮く。その差だけ下げる
     （PC 実測: ロゴ 57.3 / ナビ 60.0。y の先はレールより下へ出る）。 */
  --header-logo-drop: 3px;
  display: flex;
  /* 中身(ロゴ/nav)を --container-wide(1340) の端まで届かせる（gutter は狭い画面のみ効く）。
     旧 max-width:1340 + padding:40 は中身が 1260 に inset していた。 */
  max-width: var(--container-wide-box);
  min-width: 0;
  width: auto;
  height: var(--header-bar);
  padding-inline: var(--gutter);
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-top: 0;
}

#header p.index-site {
  margin: 0;
}

#header-wrapper {
  width: 100%;
}

/* 50pxの旧ラッパーからはみ出すデスクトップヘッダーを本文より手前に保つ。 */
body.site-page > #header-wrapper {
  position: relative;
  z-index: var(--z-header);
}

/* Topと同じく、ヘッダー本体の下に24pxのフレームを確保する。
   旧50pxラッパーを実寸へ戻すため、後続コンテンツとの重なりも解消される。 */
@media (min-width: 791px) {
  body.site-page > #header-wrapper {
    height: calc(var(--header-bar) + var(--space-header-gap));
  }

  body.site-page > #content-wrapper::before {
    display: none;
    height: 0;
    margin: 0;
  }
}

/* ロゴ */
/* サイズ設定が必要 */
.index-siteinfo {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  padding-bottom: var(--header-rail-bottom-space);
}

.index-siteinfo a.index-sitetop {
  display: block;
  width: var(--header-logo-width);
  height: auto;
}

#header .index-siteinfo a.index-sitetop {
  line-height: 0;
  /* 下げるのは相対位置で。padding を削る形だと 7px（レール）より先は 0 で頭打ちになる。 */
  position: relative;
  top: var(--header-logo-drop);
}

.index-siteinfo img {
  width: var(--header-logo-width);
  height: auto;
}

.header-menu {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: calc(var(--header-logo-height) + var(--header-rail-bottom-space));
  gap: 80px;
  padding-bottom: var(--header-rail-bottom-space);
}

/* トップメニュー枠組み */
.menu-topnavi-container {
  display: flex;
  align-items: center;
}

/* メニュー内要素 */
#menu-topnavi {
  display: flex;
  align-items: center;
  font-family: var(--font-latin);
  font-size: 18px;
  gap: 16px;
  margin: 0;
  padding: 0;
}

#menu-topnavi li {
  padding: 0;
  /* margin-right: 20px; */
}

#menu-topnavi li a {
  padding: 0 8px;
  font-weight: 400;
}

/* 旧style.cssの固定高・上マージンを外す。行の箱（22px）の中心を G の中心へ揃える（下の 791px 以上）。 */
#header #menu-topnavi > li > a {
  height: auto;
  line-height: 22px;
  margin-top: 0;
}

/* 非トップページのナビ文字色を共通トークンへ統合する。
   Topは .site-page を持たず、top_header_style.css の白いナビを維持する。 */
body.site-page #header #menu-topnavi > li > a {
  color: var(--color-text-muted);
}

/* 現在地は本文インク（#4c4948）で示す。 */
body.site-page #header #menu-topnavi > li.current-menu-item > a,
body.site-page #header #menu-topnavi > li.current_page_item > a,
body.site-page #header #menu-topnavi > li.current-page-parent > a,
body.site-page #header #menu-topnavi > li.current-page-ancestor > a {
  color: var(--color-heading);
}

/* hover は現在地よりさらに一段濃く（#2b2a29）。
   旧実装は現在地と同じ #4c4948 で、#6b6b6b からの差が小さく反応が読み取れなかった。
   現在地の項目に触れたときも一段沈むので、どこに触れているかが分かる。 */
body.site-page #header #menu-topnavi > li > a:hover {
  color: var(--color-link-hover);
}

/* ドロワー内リンクの hover。旧実装は色が一切動いておらず、触れても無反応だった。
   ヘッダー nav と同じ --color-link-hover へ寄せて挙動を揃える。
   タッチ端末に hover 状態を残さないよう (hover: hover) で囲う。
   このファイルは Top でも読まれるので、両ページのドロワーに一度で効く。 */
@media (hover: hover) {
  #smp-menu-content a:hover {
    color: var(--color-link-hover);
    transition: color var(--dur-fast) var(--ease);
  }
}

ul.sub-menu {
  width: 620px;
}

ul.sub-menu li {
  margin: 0;
}

.menu ul li a {
  border-width: 5px;
}

/* SNS */
.header-sns {
  display: flex;
  gap: 18px;
  /* margin: 0 0 0 auto; */
  align-items: center;
}

.header-sns a {
  display: grid;
  width: 22px;
  height: 22px;
  line-height: 0;
  place-items: center;
}

.header-sns img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-top: 0 !important;
}

/* PC（791 以上）はナビ・SNS・ハンバーガーを下端レールではなく G の縦中心へ中央揃えにする。
   バー下端から G 中心までの距離の2倍の箱を下端に置き、中身を中央揃えにすれば中心が G に来る。
   ロゴ幅・drop・レールの値から出すので、縦が短いデスクトップ（ロゴ 160px）にもそのまま効く。
   790 以下はモバイルの配置（バー中央揃え）へ戻す。 */
@media (min-width: 791px) {
  .header-menu {
    align-items: center;
    height: calc(2 * (var(--header-logo-height) - var(--header-logo-g-center) + var(--header-rail-bottom-space) - var(--header-logo-drop)));
    padding-bottom: 0;
  }
}

#content {
  max-width: 1340px;
  min-width: 0;
  width: auto;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#main {
  margin: 0 auto;
}

.bx-wrapper img {
  width: 1340px;
  min-width: 0;
  max-width: 100%;
}

/* ulの幅狭くする */
/* ===========================================================================
   ナビ収容の階段（横幅の軸）
   ---------------------------------------------------------------------------
   段組み BP とは**別軸**。切替の基準は「入るか」ではなく
   **ロゴ右端 → 最初の nav 項目（Topics）左端の間隔が 64px を切らないか**。

   「入るか」で決めると遅すぎる。#header は justify-content:space-between +
   .index-siteinfo{flex-grow:1} なので、詰まっても要素は溢れず gap:10px まで
   吸われるだけ。つまり「溢れていない = 余裕がある」ではない。
   実際 2026-08-27 の初回統合では、SNS が消える直前(1040px)と
   ハンバーガー直前(830-790px)でロゴと Topics が 10px まで密着していた。

   実測（Service ヘッダー・ロゴ右端 → Topics 左端の実間隔）:
     - SNS 表示帯: 間隔は 1260px の 226px から 1:1 で減り、1100px で 66px、1040px で 10px
     - SNS 非表示帯: 1020px の 184px から減り、900px で 72px、820px 以下は 10px

   段の値は 2026-08-27 にユーザー指定で決めた（**1200 で SNS / 980 でドロワー**）。
   メニュー項目が増えたため、計測上の下限より手前で切らないとバランスが保てない、という判断。
   計測はあくまで「これ以上は絶対に無理」の線であって、意匠上の適正値ではない。
   ========================================================================= */

@media (max-width:1280px) {
  #header {
    width: auto;
  }

  #main {
    width: 1024px;
    /* TKTmemo 余白調整に伴い */
    margin: 0 auto;
    padding: 0 0px;
  }

  #menu-topnavi {
    margin-left: 0;
    padding: 0;
  }

  .header-menu {
    gap: 60px;
  }

  #menu-topnavi li a {
    padding: 0 5px;
  }
}

/* SNS を落とす点（ユーザー指定 1200）。この時点の間隔は 166px。 */
@media (max-width:1200px) {
  #main {
    width: 100%;
  }

  .bx-wrapper img {
    width: 100%;
  }

  .header-sns {
    display: none;
  }

  .header-menu {
    gap: 0px;
  }

  #menu-topnavi {
    gap: 10px;
  }
}

/* 基本的にスマホメニューは非表示 */
.smp-menu {
  display: none;
}

.smp-menu-button {
  display: none;
}

.smp-menu-content {
  display: none;
}

/* css for smp, add hamburger menu and remove other items on header */

/* ul.sub-menu {
  display: none;
} */

/* ドロワーへの転換点（ユーザー指定 980）。**正準点 768 ではない**
   （ここは段組みではなくナビ収容の軸）。
   旧 790 では 830〜790 でロゴと Topics が 10px まで密着していた。
   結果 980〜768 はヘッダーだけ先にドロワー化するが、これは仕様。 */
@media screen and (max-width:980px) {
  /* ⚠️ ロゴ幅とハンバーガーの寸法は**ここで下げない**。
     980〜790 は「PC 表示のままドロワーだけ出す」帯なので、PC のセット（大きめ）を保つ。
     モバイル寸法へ落とすのは 790 以下（下の max-width:790px ブロック）。 */

  #header-wrapper {
    width: 100%;
  }

  #header {
    width: 100%;
    min-width: 0;
    /* gutter は #header-wrapper 側だけで持つ。両方に入れると
       980-791px 帯だけロゴとトリガーが二重に inset する。 */
    padding-inline: 0;
  }

  #main {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }

  #menu-topnavi {
    margin-left: 0;
  }

  #menu-topnavi li a {
    padding-right: 20px;
  }

  .bx-wrapper img {
    width: 100%;
  }

  .header-sns {
    display: none;
  }

  .sub-menu {
    display: none;
  }

  #content {
    padding: 0;
    max-width: 790px;
    min-width: 320px;
    margin: 15px auto 0;
  }

  /* スマホメニュー drawer: shrink-to-fit で内容幅に膨張し横はみ出ししていたため
     ビューポート幅に固定（閉時の overflow と開時の横スクロールを解消） */
  #smp-menu-content {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* PC ナビを隠す。`wp_nav_menu` の出力クラスはメニューのスラッグ由来で変わり、
     location へ未割当のときは固定ページ一覧のフォールバック（`div.menu`）になる。
     どちらでも効くよう、ドロワー以外の子をまとめて落とす。 */
  .header-menu > :not(.smp-menu) {
    display: none !important;
  }

  #header-wrapper {
    /* ドロワーの位置決め基準（`#smp-menu-content` の top と height が参照する）。
       **その帯のヘッダーバーの実高**を入れる。980-791 は PC の --header-bar、790 以下は --header-bar-compact。
       名前は経緯的に mobile だが、実体は「ヘッダーバー高」。 */
    --mobile-header-height: var(--header-bar);
    /* 生値 20px だと --gutter(clamp 20-40 = 4vw) 基準のコンテンツ側と 500-790px の帯で
       最大 11.6px ズレる（--frame-inset・見出し帯・本文が全て --gutter 基準）。
       gutter へ寄せて左右端を揃える。500px 以下では 4vw が 20px に落ちるので従来と同値。 */
    padding-block: 0;
    padding-inline: var(--gutter);
    width: auto;
  }

  /* ⚠️ ロゴ・メニューの**配置**（バー高・align-items・padding）はここで下げない。
     980-791 は PC の配置（--header-bar・下端レール揃え）を保つ。
     モバイル配置へ落とすのは 790 以下（下の max-width:790px ブロック）。 */

  /* 旧ページ側の15pxを重ねず、見出し構造にかかわらず上端を20pxで統一する。 */
  body.site-page > #content-wrapper > #content {
    margin-block-start: 0;
  }

  /* PC 帯（980-791）は他の PC 要素と同じく G の縦中心へ揃える。
     親 .header-menu の箱が G 中心を中心に持つので（791px 以上のブロック）、ここは中央揃えだけでよい。
     padding を足すと中心がずれる。 */
  .smp-menu {
    display: flex;
    width: 56px;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
  }

  /* PC 帯（980-791）のハンバーガー。ロゴが PC サイズのままなので一回り大きく取る。
     790 以下でモバイル寸法へ落とす。 */
  #smp-menu-button {
    --smp-menu-line-step: 11px;
    display: flex;
    width: 56px;
    height: 56px;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
  }

  #smp-menu-button span {
    display: block;
    width: 40px;
    height: 2px;
    flex: 0 0 2px;
    background-color: #787878;
    margin: 0;
    transition: transform 0.2s, opacity 0.1s;
  }

  #smp-menu-button.active span:nth-child(1) {
    transform: translateY(var(--smp-menu-line-step)) rotate(45deg);
  }

  /* 開くときは真ん中の線を即座に消す。上下の線が × に回る 0.2s のあいだ横線が残ると、
     × に横線が重なって「※」に見えた（2026-10-05 iOS の Chrome で指摘。左カラムの版面のページで目立った）。
     visibility も外して、iOS が薄くなる途中の描画を残さないようにする。閉じるときは従来どおりフェードで戻る。 */
  #smp-menu-button.active span:nth-child(2) {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  #smp-menu-button.active span:nth-child(3) {
    transform: translateY(calc(0px - var(--smp-menu-line-step))) rotate(-45deg);
  }

  #smp-menu-content {
    display: block;
    width: 100%;
    height: calc(100vh - var(--mobile-header-height));
    height: calc(100dvh - var(--mobile-header-height));
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--drawer-dur) ease,
      visibility 0s linear var(--drawer-dur);
    position: fixed;
    top: var(--mobile-header-height);
    left: 0;
    z-index: 1000;
    background-color: #f8f8f8;
  }

  /* 項目は1行 73px（文字 48px + 間 25px）を基準にし、画面が低いときはタップ領域の下限 44px まで縮める。
     固定の間隔だと、項目が7つになってから iPhone の Chrome で SNS のアイコンが下で切れていた（2026-10-05）。
     縮めても収まらない画面だけ、ドロワーの中がスクロールする。 */
  #smp-menu-content ul {
    width: 100%;
    height: 100%;
    position: static;
    padding: 24px 20px 40px;
    padding-block: clamp(8px, 3dvh, 24px) clamp(16px, 5dvh, 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #smp-menu-content li {
    display: flex;
    flex: 0 1 73px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    text-align: center;
    font-weight: 500;
  }

  /* SNS の行は前の項目から一段離す（以前の margin-top 20px ぶん）。 */
  #smp-menu-content li:has(.smp-menu-sns) {
    flex-basis: 93px;
    min-height: 56px;
  }

  #smp-menu-content.active {
    visibility: visible;
    opacity: 1;
    transition:
      opacity var(--drawer-dur) ease,
      visibility 0s linear 0s;
    z-index: 1000;
  }

  #smp-menu-content.active li {
    visibility: visible;
  }

  #smp-menu-content a {
    color: #787878;
    font-family: var(--font-latin);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  #smp-menu-content img {
    width: 36px;
    height: 36px;
  }

  #smp-menu-content .smp-menu-sns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  #content-wrapper:before {
    display: none;
  }

  #content {
    padding: 0;
  }

  html {
    overflow: auto;
    height: 100%;
  }

  .body-no-scroll {
    overflow: hidden;
    height: 100%;
  }
}

/* モバイル寸法。**ヘッダー軸(980)ではなく Hero 構図軸(790)に合わせる**。
   980〜790 は PC のロゴ・ハンバーガーのままドロワーだけ出す帯なので、
   ここで初めて一回り小さくする。 */
@media screen and (max-width:790px) {
    .smp-menu {
    width: 48px;
    align-items: center;
    padding-bottom: 0;
  }

  #header-wrapper {
    --mobile-header-height: var(--header-bar-compact);
    height: var(--mobile-header-height);
  }

  /* Top以外はバーの下に gap を置き、ロゴ直後からページ見出しが始まらないようにする。
     gap は PC の --space-header-gap ではなくモバイル用の値（foundation.css）。 */
  body.site-page > #header-wrapper {
    height: calc(var(--mobile-header-height) + var(--space-header-gap-compact));
  }

  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: var(--mobile-header-height);
    margin-top: 0;
    /* モバイルはロゴとトリガーを中央揃えにするので下げない。 */
    --header-logo-drop: 0px;
    /* モバイルのロゴ幅。高さと G の縦中心はここから出る（ハンバーガーの位置合わせが参照する）。 */
    --header-logo-width: 140px;
  }

  .header-menu {
    align-items: center;
    height: 100%;
    padding-bottom: 0;
  }

  .index-siteinfo {
    height: 100%;
    padding-bottom: 0;
  }

  .index-siteinfo img {
    width: var(--header-logo-width);
    height: auto;
  }

  /* ロゴ画像の箱は y のディセンダーまで含むので、箱どうしを中央揃えにすると文字の本体（G・K）が
     ハンバーガーより約 2.7px 上に見える。PC と同じく G の縦中心へ揃える（2026-10-01 ユーザー指摘）。
     線（2px）がにじまないよう整数 px に丸める。ずらすのはボタンだけ。親の .smp-menu を動かすと
     中のドロワーまで一緒に動く。 */
  #smp-menu-button {
    --smp-menu-line-step: 9px;
    position: relative;
    top: round(calc(var(--header-logo-g-center) - var(--header-logo-height) / 2), 1px);
    width: 48px;
    height: 48px;
    gap: 7px;
  }

  #smp-menu-button span {
    width: 32px;
  }
}


@media screen and (max-width:480px) {
  .index-siteinfo img {
    width: var(--header-logo-width);
    height: auto;
  }

  #smp-menu-content a {
    color: #787878;
    /* font-family: Roboto; */
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}

/* --- ヘッダーの追従（js/header-reveal.js）--------------------------------- */
/* 属性ゲート。JS が data-header-reveal を立てたときだけ効く。
   左カラムの版面（Company 系 / Service / Recruit / Contact）は常に固定、それ以外は
   上へ戻ったときだけ呼び戻す（Top と Vision は積まない）。
   固定するのはバー本体（#header）だけで、#header-wrapper は高さを持ったまま
   流れに残るので、固定・解除で本文は動かない。
   --header-reveal-bar は固定したバーの高さ（#header の height と揃える）。
   固定中は面だけを --header-reveal-extend だけ下へ伸ばす。流れの中のバーは
   ナビの下の余白が薄く、固定すると面の切れ目が文字に迫るため。
   貼り付く左カラムと Service の着地位置は --header-reveal-surface（面の下端）の下に逃げる。 */
html[data-header-reveal] {
  --header-reveal-top: 0px;
  --header-reveal-bar: var(--header-bar);
  --header-reveal-surface: calc(var(--header-reveal-bar) + var(--header-reveal-extend));
}

/* 伸びだけは属性ゲートの外で持つ。写真のある Works 詳細は、流れの中（属性なし）でも
   同じ長さの帯と面を敷く（css/works-detail-variants.css）。ゲートの中に置くと流れの中では
   未定義になり、予備値の 24px に落ちて固定中の面と長さが食い違う。 */
html {
  --header-reveal-extend: var(--space-md);
}

/* モバイルはロゴがバーの中央にあり、下に 18px 空いているので、面を大きく伸ばす必要が無い。
   ⚠️ 伸びは本文の開始位置より手前で止める。790 以下で最も狭い gap は左カラム系の 8px
   （css/page-shell.css）なので、それを超えない。 */
@media (max-width: 790px) {
  html {
    --header-reveal-extend: var(--space-2xs);
  }

  html[data-header-reveal] {
    --header-reveal-bar: var(--header-bar-compact);
  }
}

@media (min-width: 601px) {
  html[data-header-reveal]:has(body.admin-bar) {
    --header-reveal-top: var(--wp-admin--admin-bar--height, 32px);
  }
}

html[data-header-reveal] #header {
  position: fixed;
  top: var(--header-reveal-top);
  right: 0;
  left: 0;
  z-index: var(--z-header);
  width: auto;
  margin-inline: auto;
  padding-inline: var(--gutter);
  transform: translateY(calc(-100% - var(--header-reveal-top) - var(--header-reveal-extend)));
  transition: transform var(--dur) var(--ease);
}

/* 面は画面幅いっぱいに敷く（バー本体は 1340 の器のまま）。
   区切り線は本文が下へ潜り始めてから引く（先頭では従来の見た目のまま）。 */
html[data-header-reveal] #header::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw) calc(-1 * var(--header-reveal-extend));
  z-index: -1;
  border-bottom: 1px solid transparent;
  background-color: var(--color-bg);
  transition: border-color var(--dur-fast) ease;
}

html[data-header-reveal][data-header-scrolled] #header::before {
  border-bottom-color: var(--color-line);
}

html[data-header-reveal="shown"] #header {
  transform: none;
}

/* ヘッダーが出ている間は、左カラムの貼り付き位置をその下へずらす。 */
.page-shell__rail-inner {
  transition: top var(--dur) var(--ease);
}

html[data-header-reveal="shown"] .page-shell__rail-inner {
  top: calc(var(--space-lg) + var(--header-reveal-surface));
}

/* 常時固定（Service）。左カラムが貼り付く幅では、JS が渡す最初の位置のまま止める
   （js/header-reveal.js の --header-fixed-rail）。 */
html[data-header-mode="fixed"] .page-shell__rail-inner {
  top: var(--header-fixed-rail, calc(var(--space-lg) + var(--header-reveal-surface)));
}

/* ページ内アンカーの着地も固定ヘッダーの下へ逃がし、左カラムの先頭と同じ高さに揃える
   （css/page-shell.css の :target の余白はここでは足さない）。Service は領域送りの都合で
   service_style.css が同じ値を持つ。 */
html[data-header-mode="fixed"] {
  scroll-padding-top: var(
    --header-fixed-rail,
    calc(var(--space-lg) + var(--header-reveal-top) + var(--header-reveal-surface))
  );
}

/* Service の領域は上の余白ぶんを負の scroll-margin で戻している（service_style.css）。
   詳細度でそれを潰さないよう除外する。 */
html[data-header-mode="fixed"] .page-shell-page :target:not(.service-area) {
  scroll-margin-top: 0;
}