/* =========================================================
   layout.css … コンテナ・セクション・グリッド・ヘッダー・フッター
   ========================================================= */
@layer layout {
  /* ---------- コンテナ ---------- */
  .l-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }
  .l-container--narrow {
    max-width: var(--container-narrow);
  }

  /* ---------- セクション ---------- */
  .l-section {
    padding-block: var(--section-py);
  }
  .l-section--flush-top {
    padding-top: 0;
  }
  /* 色面のパネル：画面端から少し離して角を丸める */
  .l-section--panel {
    margin-inline: var(--edge);
    border-radius: var(--r-lg);
  }
  .l-section--emphasis {
    background: var(--c-surface-emphasis);
    color: var(--c-text-invert);
  }
  .l-section--alt {
    background: var(--c-surface-alt);
  }

  /* パンくずのすぐ後に色面のパネルが来るとき */
  .l-container:has(> .c-breadcrumb) + .l-section--panel {
    margin-top: var(--section-py-tight);
  }

  /* ---------- グリッド ---------- */
  .l-grid {
    display: grid;
    gap: var(--sp-5);
  }
  .l-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .l-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .l-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (max-width: 767px) {
    .l-grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-2);
    }
    .l-grid--3,
    .l-grid--2 {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .l-container--read {
    max-width: var(--container-read);
  }

  /* 大1＋小2（トップ・事業内容・採用情報） */
  .l-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--sp-5);
  }
  .l-mosaic > :first-child {
    grid-row: 1 / 3;
  }
  @media (max-width: 767px) {
    .l-mosaic {
      grid-template-columns: minmax(0, 1fr);
    }
    .l-mosaic > :first-child {
      grid-row: auto;
    }
  }

  /* 左に短いもの（縦書きの一文など）、右に本文 */
  .l-aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-9);
  }
  @media (max-width: 767px) {
    .l-aside {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-7);
    }
  }
  /* 縦に積むときの間隔 */
  .l-stack > * + * {
    margin-top: var(--sp-6);
  }

  /* 2列：文章＋写真 */
  .l-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-8);
  }
  .l-split--reverse > :first-child {
    order: 2;
  }
  @media (max-width: 767px) {
    .l-split {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-6);
    }
    .l-split--reverse > :first-child {
      order: 0;
    }
  }

  /* =========================================================
     ヘッダー（header.php が出力）
     ========================================================= */
  .l-header {
    position: sticky;
    top: var(--sp-2);
    z-index: var(--z-header);
    height: var(--header-h);
    margin: var(--sp-2) var(--edge) 0;
    border-radius: var(--r-pill);
    background: var(--c-bg-header);
    box-shadow: var(--sh-md), 0 0 0 1px var(--c-line);
  }
  .l-header__inner {
    height: 100%;
    padding-inline: var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }

  /* ロゴ（文字ロゴ。ロゴ画像の支給後に差し替え） */
  .l-header__logo {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    color: var(--c-brand-logo);
  }
  .l-header__logo-ja {
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    letter-spacing: var(--tr-heading);
  }
  .l-header__logo-en {
    font-family: var(--ff-num);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    letter-spacing: 0.18em;
    color: var(--c-action-primary);
  }

  /* ---------- グローバルナビ ---------- */
  .l-gnav {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
  .l-gnav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
  .l-gnav__item {
    position: relative;
    display: flex;
    align-items: center;
  }
  .l-gnav__link {
    display: block;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    transition: background var(--dur-md) var(--ease), color var(--dur-md) var(--ease);
  }
  .l-gnav__link:hover {
    background: var(--c-surface-alt);
  }
  /* 現在地 */
  .l-gnav__link.is-current {
    background: var(--c-surface-alt);
    color: var(--c-action-primary);
    font-weight: var(--fw-bold);
  }
  .has-sub > .l-gnav__link {
    padding-right: var(--sp-1);
  }

  /* プルダウンを開くボタン（キーボード・タッチ用） */
  .l-gnav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: var(--sp-2);
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-md) var(--ease);
  }
  .l-gnav__toggle:hover {
    background: var(--c-surface-alt);
  }
  .l-gnav__toggle .c-icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    transition: transform var(--dur-md) var(--ease);
  }
  .l-gnav__item.is-open .l-gnav__toggle .c-icon {
    transform: rotate(180deg);
  }

  /* プルダウンの中身 */
  .l-gnav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 15rem;
    padding-top: var(--sp-3); /* マウスが通る道 */
    transform: translate(-50%, var(--sp-2));
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), visibility var(--dur-md);
  }
  .l-gnav__item:hover > .l-gnav__sub,
  .l-gnav__item:focus-within > .l-gnav__sub,
  .l-gnav__item.is-open > .l-gnav__sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .l-gnav__sub-list {
    padding: var(--sp-2);
    background: var(--c-bg);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg), 0 0 0 1px var(--c-line);
  }
  .l-gnav__sub-link {
    display: block;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-small);
    white-space: nowrap;
    transition: background var(--dur-md) var(--ease);
  }
  .l-gnav__sub-link:hover {
    background: var(--c-surface-alt);
  }
  .l-gnav__sub-link[aria-current="page"] {
    color: var(--c-action-primary);
    font-weight: var(--fw-bold);
  }

  /* お問い合わせボタン */
  .l-gnav__cta {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-pill);
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
    white-space: nowrap;
    transition: background var(--dur-md) var(--ease);
  }
  .l-gnav__cta:hover,
  .l-gnav__cta[aria-current="page"] {
    background: var(--c-action-primary-hover);
  }

  /* ハンバーガー */
  .l-burger {
    display: none;
    position: relative;
    z-index: var(--z-burger);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--c-surface-alt);
    cursor: pointer;
  }
  .l-burger span {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 2px;
    background: var(--c-text);
    transition: transform var(--dur-md) var(--ease), opacity var(--dur-md) var(--ease);
  }
  .l-burger span:nth-child(1) { top: 17px; }
  .l-burger span:nth-child(2) { top: 23px; }
  .l-burger span:nth-child(3) { top: 29px; }
  .is-nav-open .l-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .is-nav-open .l-burger span:nth-child(2) { opacity: 0; }
  .is-nav-open .l-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ナビが入りきらない幅から、ハンバーガーに切り替える
     1235px より狭いと、メニューとロゴが2行に折り返すため（2026-10-23 に 1080px から変更）
     Windows はスクロールバー（約17px）の分だけ狭くなるので、余裕をみて 1260px にする
     ※ JS（header.js / main.js）の matchMedia も同じ幅にそろえる */
  @media (max-width: 1260px) {
    .l-header__inner {
      padding-inline: var(--sp-4) var(--sp-2);
    }
    .l-burger {
      display: block;
    }
    .l-gnav {
      position: fixed;
      inset: 0;
      z-index: var(--z-nav);
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: var(--sp-6);
      padding: calc(var(--header-h) + var(--sp-8)) var(--sp-5) var(--sp-8);
      overflow-y: auto;
      background: var(--c-bg);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--dur-md) var(--ease), visibility var(--dur-md);
    }
    .is-nav-open .l-gnav {
      opacity: 1;
      visibility: visible;
    }
    .is-nav-open {
      overflow: hidden;
    }
    .l-gnav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      width: min(100%, 26rem);
      margin-inline: auto;
    }
    .l-gnav__item {
      flex-wrap: wrap;
      border-bottom: 1px solid var(--c-line);
    }
    .l-gnav__link,
    .has-sub > .l-gnav__link {
      flex: 1;
      font-size: var(--fs-h4);
      padding: var(--sp-4);
      border-radius: 0;
    }
    /* SPではプルダウンを開いたまま並べる */
    .l-gnav__toggle {
      display: none;
    }
    .l-gnav__sub,
    .l-gnav__item:hover > .l-gnav__sub,
    .l-gnav__item:focus-within > .l-gnav__sub {
      position: static;
      flex-basis: 100%;
      min-width: 0;
      padding: 0 0 var(--sp-3) var(--sp-4);
      transform: none;
      opacity: 1;
      /* 親（メニュー全体）が閉じているときは一緒に隠れる。
         visible にすると、閉じたメニューの中のリンクが透明なまま押せてしまう（10/22お客様指摘）。
         PC用の切り替えの動きが残ると隠れるのが遅れるので、スマホでは動きをなくす */
      visibility: inherit;
      transition: none;
    }
    .l-gnav__sub-list {
      padding: 0;
      background: transparent;
      box-shadow: none;
    }
    .l-gnav__sub-link {
      padding: var(--sp-2) var(--sp-4);
      font-size: var(--fs-body);
      color: var(--c-text-muted);
    }
    .l-gnav__cta {
      align-self: center;
      font-size: var(--fs-body);
      padding: var(--sp-4) var(--sp-8);
    }
  }

  @media (max-width: 767px) {
    .l-header {
      margin-inline: var(--sp-2);
    }
    .l-header__logo-ja {
      font-size: var(--fs-body);
    }
  }

  /* =========================================================
     フッター（footer.php が出力）
     ========================================================= */
  .l-footer {
    margin-inline: var(--edge);
    padding: var(--sp-8) 0 var(--sp-6);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--c-surface-footer);
    color: var(--c-text-invert);
  }
  .l-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .l-footer__logo {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }
  .l-footer__logo-ja {
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    letter-spacing: var(--tr-heading);
  }
  .l-footer__logo-en {
    font-family: var(--ff-num);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    letter-spacing: 0.18em;
    color: var(--c-text-invert-muted);
  }
  .l-footer__address {
    margin-top: var(--sp-5);
    font-size: var(--fs-small);
    font-style: normal;
    line-height: 2;
    color: var(--c-text-invert-muted);
  }
  /* 列の見出し：下に16px、項目同士は8px（見出し下の半分）でグループに見せる */
  .l-footer__col-title {
    margin: 0 0 var(--sp-4);
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    letter-spacing: var(--tr-eyebrow);
    color: var(--c-text-invert-muted);
  }
  .l-footer__col-list {
    display: grid;
    gap: var(--sp-2);
  }
  .l-footer__col-list a {
    font-size: var(--fs-small);
  }
  .l-footer__col-list a:hover,
  .l-footer__col-list a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .l-footer__copy {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line-invert);
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    letter-spacing: 0.16em;
    color: var(--c-text-invert-muted);
  }

  @media (max-width: 767px) {
    .l-footer {
      margin-inline: var(--sp-2);
    }
    .l-footer__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-7);
    }
  }
}