@charset "utf-8";

/* About us visual baseline -------------------------------------------------
   The global header remains shared with the top page. This file only tunes the
   document area below it while the visual language is validated page by page.

   ⚠️ 左カラム版面（見出し列 + sticky + 1340 の器）は **css/page-shell.css** へ
   移設した。Recruit / Contact と共有するため。ここに残っているのは Company
   セクション固有のもの（差し替え器のフェード・会社概要・沿革・受賞歴・アクセス）。 */

body.site-page {
  --about-content-width: var(--container);
  --about-reading-width: 42rem;
  --about-page-title-column: 12rem;
  --about-text: var(--color-text);
  --about-heading: var(--color-heading);
  --about-muted: var(--color-text-muted);
  --about-line: var(--color-line);
  --about-line-strong: var(--color-line-strong);
  /* 各ページのビジュアル直後に置く主導入見出し。Awardsのサイズを基準に統一する。 */
  --about-primary-heading-size: var(--fs-lg);
  --about-heading-space: clamp(var(--space-lg), 4vw, var(--space-xl));
  --about-flow-space: var(--space-lg);
  --about-section-space: var(--space-xl);

  color: var(--about-text);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

#content {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--about-content-width) + 2 * var(--gutter));
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

#main.aboutus-page {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.aboutus-page-header {
  display: grid;
  grid-template-columns: var(--about-page-title-column) minmax(0, 1fr) max-content;
  gap: var(--space-md);
  align-items: baseline;
  margin-bottom: 0;
  padding-block-end: var(--about-heading-space);
}

.aboutus-page-header .menu-container {
  display: contents;
  margin: 0;
}

.aboutus-page-header .menu {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.aboutus-page-header h1.menu-en {
  color: #666666;
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
}

.aboutus-page-header .lang-menu {
  grid-column: 3;
  grid-row: 1;
}

.aboutus-page-header .lang-menu p {
  color: var(--about-muted);
  font-size: var(--fs-sm);
}

.aboutus-subnav {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
}

.aboutus-subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.aboutus-subnav a {
  display: block;
  padding-block: var(--space-3xs);
  border-bottom: 1px solid transparent;
  color: var(--about-muted);
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  white-space: nowrap;
}

.aboutus-subnav a:is(:hover, [aria-current="page"]) {
  border-color: var(--about-heading);
  color: var(--about-heading);
}

/* 差し替えパネル。出は短く、入りは長い。transition の速度は「向かう先」の
   宣言から読まれるので、JS は属性を付け外しするだけでよい。
   時間は `--reveal-*`（`css/foundation.css`）が唯一の定義元で、
   `js/aboutus-switch.js` も同じトークンを読む。ここに直値を書かないこと。 */
.aboutus-swap {
  transition: opacity var(--reveal-swap-in) var(--ease);
}

.aboutus-swap[data-aboutus-fade="out"] {
  opacity: 0;
  transition-duration: var(--reveal-swap-out);
}

/* 差し替え後の読み上げ位置としてプログラム的にフォーカスされる（tabindex="-1"）。
   クリック起点の切替でリングを出さないための outline:none で、キーボード時の
   表示は次の :focus-visible が持つ。この対で1つ。片方だけ消さないこと。 */
.aboutus-swap:focus {
  outline: none;
}

.aboutus-swap:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.aboutus-page-visual {
  width: 100%;
  margin: 0 0 var(--about-section-space);
  overflow: hidden;
}

.aboutus-page-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* ⚠️ Company セクションのヒーローは**3ページとも 16:9 のまま**にする
   （素材は 2067x1163 と 2680x900 で比率が違う）。ヒーローは差し替えパネルの中に
   あるので、ページごとに比率を変えると切替のたびに下の本文が伸び縮みする。
   素材ごとの比率で出したくなったら、先にその上下動を許容するか決めること。 */

.aboutus-introduction {
  display: grid;
  grid-template-columns: minmax(15rem, 0.68fr) minmax(0, 1.32fr);
  gap: var(--space-xl);
  align-items: start;
  padding-block: 0 var(--about-flow-space);
}

.aboutus-introduction h2 {
  color: var(--about-heading);
  font-size: var(--about-primary-heading-size);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.aboutus-introduction__body {
  max-width: var(--about-reading-width);
  color: var(--about-text);
  font-size: var(--fs-base);
  line-height: 1.9;
}

.aboutus-introduction--compact {
  display: block;
  max-width: var(--about-reading-width);
  padding-block: 0 var(--about-flow-space);
}

.aboutus-introduction--compact .aboutus-introduction__body {
  margin-top: var(--space-sm);
}

/* About directory --------------------------------------------------------- */
.aboutus-directory {
  border-top: 1px solid var(--about-line-strong);
}

.aboutus-directory li {
  border-bottom: 1px solid var(--about-line);
}

.aboutus-directory a {
  display: grid;
  grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-md);
}

.aboutus-directory__description {
  color: var(--about-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.aboutus-directory__title {
  color: var(--about-heading);
  font-family: var(--font-latin);
  font-size: var(--fs-md);
  font-weight: var(--font-latin-strong-weight);
}

.aboutus-directory__arrow {
  transition: transform var(--dur-fast) var(--ease);
}

.aboutus-directory a:hover .aboutus-directory__arrow {
  transform: translateX(var(--space-3xs));
}

/* Company ----------------------------------------------------------------- */
/* ページ内の塊が多く、48px だと表の行送りに紛れて切れ目が読めない。
   Company だけセクション間を一段広げる（hero 下・各 section・グループ・
   関連リンクが同じ値を参照するので、ここ1箇所で揃う）。 */
#main.aboutus-company {
  --about-section-space: clamp(var(--space-xl), 6vw, var(--space-2xl));
}

/* section 同士に間が無く、表の直後に次の見出しが接していた。 */
.aboutus-section + .aboutus-section {
  margin-top: var(--about-section-space);
}

.aboutus-section__heading {
  margin-bottom: var(--space-md);
}

.aboutus-section__heading h2 {
  color: var(--about-heading);
  font-size: var(--about-primary-heading-size);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.aboutus-profile {
  border-top: 1px solid var(--about-line-strong);
}

.aboutus-profile > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.26fr) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--about-line);
}

.aboutus-profile dt {
  color: var(--about-muted);
  font-size: var(--fs-sm);
}

.aboutus-profile dd {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.aboutus-profile ol {
  margin: 0;
  padding-left: var(--space-md);
  list-style: decimal;
}

.aboutus-profile li + li {
  margin-top: var(--space-2xs);
}

/* History ----------------------------------------------------------------- */
.aboutus-timeline {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--about-line-strong);
  list-style: none;
}

.aboutus-timeline li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.22fr) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--about-line);
}

.aboutus-timeline time {
  color: var(--about-heading);
  font-family: var(--font-latin);
  font-size: 1.25rem;
  font-weight: var(--font-latin-strong-weight);
}

.aboutus-timeline p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.aboutus-empty {
  padding-block: var(--space-xl);
  border-block: 1px solid var(--about-line);
  color: var(--about-muted);
}

/* Awards ------------------------------------------------------------------ */
.aboutus-awards-browser {
  padding-block: 0;
}

.aboutus-awards-introduction {
  display: grid;
  grid-template-columns: minmax(11rem, 0.3fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: baseline;
  margin-bottom: var(--space-xl);
}

.aboutus-awards-introduction h2 {
  color: var(--about-heading);
  font-size: var(--about-primary-heading-size);
  font-weight: 500;
  line-height: var(--lh-tight);
}

.aboutus-awards-introduction__body {
  max-width: var(--about-reading-width);
  margin: 0;
  color: var(--about-text);
  font-size: var(--fs-base);
  line-height: 1.8;
}

.aboutus-decade-tabs {
  border-block: 1px solid var(--about-line);
}

.aboutus-decade-tabs ul {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutus-decade-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(var(--space-xl) + var(--space-2xs));
  padding: var(--space-sm) var(--space-xs);
  color: var(--about-muted);
  font-family: var(--font-latin);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-snug);
  text-align: left;
  transition: color var(--dur-fast) var(--ease);
}

.aboutus-decade-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--about-heading);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.aboutus-decade-tabs button:is(:hover, [aria-selected="true"]) {
  color: var(--about-heading);
}

.aboutus-decade-tabs button[aria-selected="true"] {
  font-weight: 500;
}

.aboutus-decade-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.aboutus-decade-tabs button:focus-visible,
.aboutus-award-panel:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.aboutus-decade-filter {
  display: none;
}

.aboutus-decade-filter__control {
  position: relative;
}

.aboutus-decade-filter__control::after {
  position: absolute;
  top: 50%;
  right: var(--space-2xs);
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid var(--about-heading);
  border-bottom: 1px solid var(--about-heading);
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.aboutus-decade-filter select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--space-lg) 0 var(--space-xs);
  border: 0;
  border-bottom: 1px solid var(--about-line-strong);
  border-radius: 0;
  appearance: none;
  background: transparent;
  color: var(--about-heading);
  cursor: pointer;
  font-family: var(--font-latin);
  font-size: var(--fs-md);
  font-weight: var(--font-latin-strong-weight);
  line-height: var(--lh-snug);
}

.aboutus-decade-filter select:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.aboutus-award-panels {
  position: relative;
  overflow: visible;
  overflow-anchor: none;
}

.aboutus-award-panel {
  border-bottom: 1px solid var(--about-line-strong);
}

.aboutus-award-panel[hidden] {
  display: none;
}

.aboutus-award-year {
  display: grid;
  grid-template-columns: minmax(5rem, 0.2fr) minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--about-line);
}

.aboutus-award-year > h3 {
  font-family: var(--font-latin);
  font-size: var(--fs-lg);
  font-weight: var(--font-latin-strong-weight);
}

/* 年は中の <time> が持つ。reset.css が time に font-weight: normal を当てているので、
   引き継がないと h3 の太さが文字に届かず常に 400 で出る。 */
.aboutus-award-year > h3 time {
  font-weight: inherit;
}

.aboutus-award-year ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutus-award-year li + li {
  margin-top: var(--space-lg);
}

.aboutus-award-year:last-child {
  border-bottom: 0;
}

.aboutus-award-year__name {
  color: var(--about-heading);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.6;
}

.aboutus-award-year__detail {
  margin-top: var(--space-3xs);
  color: var(--about-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Company: GK Design Group network -------------------------------------- */
.aboutus-group-network {
  margin-top: var(--about-section-space);
}

.aboutus-group-network > h2 {
  margin-bottom: var(--space-md);
  color: var(--about-heading);
  font-size: var(--about-primary-heading-size);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.aboutus-group-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--about-line-strong);
  list-style: none;
}

.aboutus-group-links li {
  border-bottom: 1px solid var(--about-line);
}

.aboutus-group-links li:nth-child(odd) {
  border-right: 1px solid var(--about-line);
}

.aboutus-group-links a {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 4.5rem;
  padding: var(--space-sm) var(--space-md);
  color: var(--about-heading);
  font-size: var(--fs-base);
  line-height: 1.6;
  transition: background-color var(--dur-fast) var(--ease);
}

.aboutus-group-links a:hover {
  background: var(--color-surface);
}

/* 社数が奇数のとき、最終行の右半分にも罫線を通す（片側だけ途切れるのを防ぐ）。 */
.aboutus-group-links:has(li:last-child:nth-child(odd))::after {
  content: "";
  border-bottom: 1px solid var(--about-line);
}

@media (max-width: 1024px) {
  .aboutus-page-header {
    display: block;
    margin-bottom: 0;
  }

  .aboutus-page-header .menu-container {
    display: flex;
    max-width: none;
    padding-inline: 0;
  }

  /* 見出しの下の余白はサブナビを離すためのもの。ナビが無いページでは付けない。 */
  .aboutus-page-header:has(.aboutus-subnav) .menu {
    margin-bottom: var(--space-sm);
  }

  .aboutus-subnav {
    margin: 0;
    border-bottom: 1px solid var(--about-line);
  }

}

@media (max-width: 768px) {
  body.site-page {
    --about-flow-space: var(--space-md);
    --about-section-space: var(--space-lg);
  }

  .aboutus-subnav {
    margin-inline: calc(-1 * var(--gutter));
    margin-bottom: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--about-line);
    scrollbar-width: thin;
  }

  .aboutus-subnav ul {
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
    padding-inline: var(--gutter);
  }

  .aboutus-subnav a {
    padding-block: var(--space-2xs);
  }

  .aboutus-introduction,
  .aboutus-award-year,
  .aboutus-timeline li {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .aboutus-introduction {
    padding-block: 0 var(--about-flow-space);
  }

  .aboutus-introduction--compact {
    padding-block: 0 var(--about-flow-space);
  }

  .aboutus-directory a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs);
  }

  .aboutus-directory__description {
    grid-column: 1 / 3;
  }

  .aboutus-directory__arrow {
    grid-column: 2;
    grid-row: 1;
  }

  .aboutus-profile > div {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    padding-block: var(--space-sm);
  }

  .aboutus-award-year,
  .aboutus-timeline li {
    padding-block: var(--space-lg);
  }

  .aboutus-awards-introduction {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    align-items: start;
    margin-bottom: var(--space-lg);
  }

  .aboutus-awards-introduction__body { max-width: none; }

  .aboutus-group-links {
    grid-template-columns: 1fr;
  }

  .aboutus-group-links li:nth-child(odd) {
    border-right: 0;
  }

  .aboutus-decade-tabs {
    display: none;
  }

  /* 年代の行は一覧の見出しにあたるので、ヘッダーの面の下に貼り付ける（2026-10-07 ユーザー指定）。
     流れる一覧を地の色で覆う。一覧の途中で切り替えたときは js/awards-browser.js が新しい年代の頭へ戻す。 */
  .aboutus-decade-filter {
    position: sticky;
    top: calc(var(--header-reveal-top, 0px) + var(--header-reveal-surface, 76px));
    z-index: var(--z-raised);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 11rem);
    gap: var(--space-md);
    align-items: center;
    padding-block: var(--space-sm);
    border-block: 1px solid var(--about-line);
    background: var(--color-bg);
  }

  .aboutus-decade-filter > label {
    color: var(--about-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  dl.gkkyoto,
  ol.gkkyoto,
  .gkkyoto-box2 {
    width: auto;
    max-width: 100%;
    float: none;
  }

  .gkkyoto dt,
  .gkkyoto dd,
  .gkkyototimeline .text {
    float: none;
    width: auto;
    max-width: 100%;
    margin-left: 0;
  }

  .timelineimage {
    display: none;
  }
}

/* --- Access（Company 内。所在地表記は会社概要が持つ） --------------------- */
/* 見出し→中身の距離は .aboutus-section__heading の margin だけが持つ。
   ここで margin-top を足すと会社概要（表）と揃わなくなる。 */
.aboutus-access {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-lg) var(--space-xl);
  align-items: start;
  min-width: 0;
}

.aboutus-map {
  align-self: stretch;
  width: 100%;
  min-height: 22rem;
  max-height: 28rem;
  overflow: hidden;
  background: var(--color-surface);
}

.aboutus-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
}

.aboutus-routes {
  min-width: 0;
}

/* 「アクセス」の下位ラベルなので、見出しではなく注記として弱める。 */
.aboutus-routes__title {
  color: var(--about-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.aboutus-route-list {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

/* 経路名と本文が同じ 14/13px で潰れていた。会社概要の dt/dd と同じ差をつける。 */
.aboutus-route__label {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.aboutus-route__description {
  margin-top: var(--space-3xs);
  color: var(--about-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

@media (max-width: 900px) {
  .aboutus-access {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .aboutus-map {
    height: clamp(15rem, 65vw, 26rem);
    min-height: 0;
    max-height: none;
  }

  .aboutus-map iframe {
    min-height: 0;
  }
}