@charset "UTF-8";
/* ===========================================================
   layout.css — 骨格（コンテナ・セクション・グリッド・ヘッダー・フッター）
   =========================================================== */
@layer layout {
  /* --- コンテナ --- */
  .l-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }
  .l-container--narrow { max-width: var(--container-narrow); }
  .l-container--full { max-width: none; padding-inline: 0; }

  /* --- セクション --- */
  .l-section { padding-block: var(--section-py); }
  .l-section--tight { padding-block: var(--section-py-tight); }
  .l-section--loose { padding-block: var(--section-py-loose); }
  .l-section--alt { background: var(--c-surface-emphasis); }

  .l-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-7);
    padding-left: var(--sp-5);
    border-left: 6px solid var(--c-action-mark);
  }
  .l-section__head--tight { margin-bottom: var(--sp-4); }

  /* --- グリッド --- */
  .l-grid { display: grid; gap: var(--sp-6); }
  .l-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .l-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .l-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .l-grid--split { grid-template-columns: 270px 1fr; gap: var(--sp-7); }

  @media (max-width: 900px) {
    .l-grid--3 { grid-template-columns: 1fr; }
    .l-grid--split { grid-template-columns: 1fr; gap: var(--sp-6); }
  }
  @media (max-width: 767px) {
    .l-grid { gap: var(--sp-5); }
    .l-grid--2 { grid-template-columns: 1fr; }
  }

  /* --- スタック（縦積みの間隔） --- */
  .l-stack { display: flex; flex-direction: column; }
  .l-stack > * + * { margin-top: var(--sp-4); }

  /* --- ヘッダー --- */
  .l-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--sp-5);
    height: var(--header-h);
    background: var(--c-bg);
    box-shadow: var(--sh-sm);
    transition: height var(--dur) var(--ease);
  }
  .l-header__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-left: calc(var(--sp-6) - var(--sp-1));
    flex: none;
  }
  .l-header__mark {
    height: 52px;
    width: auto;
    flex: none;
    transition: height var(--dur) var(--ease);
  }
  .l-header__name {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 既定の stretch だとロゴ画像が上の文字幅まで横に伸びる */
    gap: 2px;
    white-space: nowrap;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-body);
    line-height: 1.3;
    color: var(--c-text-muted);
  }
  .l-header__name img {
    height: 26px;
    width: auto;
    transition: height var(--dur) var(--ease);
  }

  /* グローバルナビ（PCのみ）。TOPはMV下の帯が上部に貼りついたら表示 */
  .l-header__nav { display: flex; align-items: stretch; margin-left: auto; }
  .l-header__nav > ul { display: flex; align-items: stretch; }
  .l-nav__item { display: flex; }
  .l-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding-inline: var(--sp-4);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
  }
  .l-nav__link::after {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: 0;
    height: 3px;
    background: var(--c-action-primary);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
  }
  .l-nav__link .c-icon { color: var(--c-text-subtle); }
  .l-nav__link:hover,
  .l-nav__link[aria-current],
  .l-nav__item.is-open > .l-nav__link { color: var(--c-action-primary); }
  .l-nav__link[aria-current]::after,
  .l-nav__item.is-open > .l-nav__link::after { transform: scaleX(1); }

  .is-home:not(.is-nav-stuck) .l-header__nav { display: none; }
  .is-nav-stuck .c-gnav { visibility: hidden; }
  @media (max-width: 1120px) {
    .l-header__nav { display: none; }
    .is-nav-stuck .c-gnav { visibility: visible; }
  }
  @media (max-width: 1320px) {
    .l-nav__link { padding-inline: var(--sp-3); font-size: var(--fs-small); }
    .l-nav__link::after { left: var(--sp-3); right: var(--sp-3); }
  }

  /* --- メガメニュー --- */
  .l-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    background: var(--c-bg);
    border-top: 3px solid var(--c-action-primary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .l-nav__item.is-open > .l-mega { opacity: 1; visibility: visible; transform: none; }
  .l-mega__in {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--sp-7);
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--sp-6) var(--container-pad) var(--sp-7);
  }
  .l-mega__lead { display: flex; flex-direction: column; gap: var(--sp-3); padding-right: var(--sp-7); border-right: 1px solid var(--c-line); }
  .l-mega__photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg-alt); }
  .l-mega__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .l-mega__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%); }
  .l-mega__lead:hover .l-mega__photo img { transform: scale(1.04); }
  .l-mega__title {
    position: absolute;
    left: var(--sp-5);
    bottom: var(--sp-4);
    z-index: 1;
    color: var(--c-text-invert);
    font-size: var(--fs-h3);
    font-weight: var(--fw-black);
    line-height: 1.3;
  }
  .l-mega__title span { display: block; font-family: var(--ff-num); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--tr-eyebrow); }
  .l-mega__desc { font-size: var(--fs-small); color: var(--c-text-muted); line-height: 1.8; }
  .l-mega__more { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--c-action-primary); font-size: var(--fs-small); font-weight: var(--fw-bold); }
  .l-mega__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4) var(--sp-5); align-content: start; }
  .l-mega__links--4,
  .l-mega__links--2 { grid-template-columns: repeat(2, 1fr); }
  .l-mega__links a {
    position: relative;
    display: grid;
    grid-template-columns: 112px 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    font-weight: var(--fw-bold);
    transition: color var(--dur) var(--ease);
  }
  .l-mega__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--c-action-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .l-mega__links a:hover { color: var(--c-action-primary); }
  .l-mega__links a:hover::after { transform: scaleX(1); }
  .l-mega__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-alt); }
  .l-mega__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .l-mega__links a:hover .l-mega__thumb img { transform: scale(1.06); }
  .l-mega__blank { display: block; width: 100%; height: 100%; background: var(--c-bg-alt); }

  /* ログイン中は WordPress の管理バー（上部の黒い帯）の分だけ下げる
     600px 以下では管理バーがスクロールで消えるので、ヘッダーは上端に戻す */
  .admin-bar .l-header { top: var(--wp-admin--admin-bar--height, 32px); }
  .admin-bar .l-drawer { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
  @media (max-width: 600px) {
    .admin-bar .l-header { top: 0; }
    .admin-bar .l-drawer { top: var(--header-h); }
  }

  .l-mega-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(20, 20, 20, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .is-mega-open .l-mega-backdrop { opacity: 1; pointer-events: auto; }
  @media (max-width: 1120px) { .l-mega, .l-mega-backdrop { display: none; } }

  .l-header__contact {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
    padding-inline: var(--sp-7);
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    letter-spacing: var(--tr-wide);
    white-space: nowrap;
    transition: background var(--dur) var(--ease);
  }
  .l-header__contact:hover,
  .l-header__contact[aria-current] { background: var(--c-action-primary-hover); }

  /* スクロール後の圧縮ヘッダー */
  .is-scrolled .l-header { height: var(--header-h-compact); }
  .is-scrolled .l-header__mark { height: 40px; }
  .is-scrolled .l-header__name > span { display: none; }
  .is-scrolled .l-header__name img { height: 22px; }
  .is-scrolled .l-header__contact { padding-inline: var(--sp-6); }

  /* SPはスクロール前後でサイズを変えない（圧縮ヘッダーの指定より優先させる） */
  @media (max-width: 767px) {
    .l-header__logo { gap: var(--sp-3); padding-left: var(--sp-4); }
    .l-header__mark,
    .is-scrolled .l-header__mark { height: 40px; }
    .l-header__name > span { display: none; }
    .l-header__name img,
    .is-scrolled .l-header__name img { height: 22px; }
    .l-header__contact,
    .is-scrolled .l-header__contact { padding-inline: var(--sp-4); gap: var(--sp-2); }
  }

  /* --- ハンバーガーメニュー（幅1120px以下） --- */
  .l-header__toggle {
    display: none;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: var(--header-h);
    padding: 0;
    border: 0;
    background: var(--c-text);
    color: var(--c-text-invert);
    cursor: pointer;
    transition: width var(--dur) var(--ease);
  }
  .is-scrolled .l-header__toggle { width: var(--header-h-compact); }
  .l-header__bars { position: relative; display: block; width: 24px; height: 16px; }
  .l-header__bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
  }
  .l-header__bars i:nth-child(1) { top: 0; }
  .l-header__bars i:nth-child(2) { top: 7px; }
  .l-header__bars i:nth-child(3) { top: 14px; }
  .l-header__toggle[aria-expanded="true"] .l-header__bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .l-header__toggle[aria-expanded="true"] .l-header__bars i:nth-child(2) { opacity: 0; }
  .l-header__toggle[aria-expanded="true"] .l-header__bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .l-header__toggle-label { font-family: var(--ff-num); font-size: 10px; font-weight: 600; letter-spacing: var(--tr-eyebrow); line-height: 1; }

  .l-drawer {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 39;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-bg);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), top var(--dur) var(--ease);
  }
  .is-scrolled .l-drawer { top: var(--header-h-compact); }
  .l-drawer.is-open { opacity: 1; transform: none; }
  .is-drawer-open body { overflow: hidden; }
  .l-drawer__nav { padding: var(--sp-3) var(--container-pad) 0; }
  .l-drawer__item { border-bottom: 1px solid var(--c-line); }
  .l-drawer__row { display: flex; align-items: stretch; }
  .l-drawer__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    padding: var(--sp-4) var(--sp-2);
  }
  /* 子ページを持たない項目は、右端に矢印か外部リンクのアイコン */
  .l-drawer__item > .l-drawer__link { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); }
  .l-drawer__item > .l-drawer__link .l-drawer__en { flex-basis: 100%; }
  .l-drawer__item > .l-drawer__link > .c-arrow,
  .l-drawer__item > .l-drawer__link > .c-icon { position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); }
  .l-drawer__item > .l-drawer__link > .c-icon { width: 16px; height: 16px; color: var(--c-text-subtle); }
  .l-drawer__en { font-family: var(--ff-num); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--tr-eyebrow); color: var(--c-action-primary); }
  .l-drawer__ja { font-size: var(--fs-h4); font-weight: var(--fw-black); }
  .l-drawer__link[aria-current] .l-drawer__ja { color: var(--c-action-primary); }
  .l-drawer__open {
    position: relative;
    flex: none;
    width: 56px;
    border: 0;
    border-left: 1px solid var(--c-line);
    background: transparent;
    cursor: pointer;
  }
  .l-drawer__open::before,
  .l-drawer__open::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    background: var(--c-action-primary);
    transform: translate(-50%, -50%);
    transition: transform var(--dur) var(--ease);
  }
  .l-drawer__open::after { transform: translate(-50%, -50%) rotate(90deg); }
  .l-drawer__open[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(0); }
  .l-drawer__sub { padding: 0 0 var(--sp-3); }
  .l-drawer__sub a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-emphasis);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
  }
  .l-drawer__sub li + li a { border-top: 1px solid var(--c-bg); }
  .l-drawer__foot { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--container-pad) var(--sp-8); }
  .l-drawer__tel {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-family: var(--ff-num);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-action-primary);
  }
  .l-drawer__tel .c-icon { align-self: center; }
  .l-drawer__tel small { font-family: var(--ff-base); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-text-muted); }

  @media (max-width: 1120px) {
    .l-header__toggle { display: flex; }
    .l-header { gap: 0; }
    .l-header__contact { margin-left: auto; }
  }
  @media (min-width: 1121px) { .l-drawer { display: none; } }
  /* SPは「お問い合わせ」をアイコン＋小さな文字の縦組みにする。横幅はMENUの1.5倍 */
  @media (max-width: 767px) {
    .l-header__contact,
    .is-scrolled .l-header__contact {
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      width: calc(var(--header-h) * 1.5);
      padding-inline: 0;
      font-size: 10px;
      letter-spacing: 0;
      margin-left: auto;
    }
    .is-scrolled .l-header__contact { width: calc(var(--header-h-compact) * 1.5); }
    .l-header__contact .c-icon { width: 22px; height: 22px; }
  }

  /* --- フッター --- */
  .l-footer {
    background: var(--c-surface-invert);
    color: var(--c-text-invert);
    padding-top: var(--sp-9);
  }
  .l-footer__top {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-7);
    align-items: start;
  }
  .l-footer__logo { display: flex; align-items: center; gap: var(--sp-3); }
  .l-footer__mark { width: 54px; height: auto; }
  .l-footer__tag { display: block; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--tr-body); line-height: 1.4; }
  /* 黒文字のロゴを白抜きで使う */
  .l-footer__name { height: 26px; width: auto; margin-top: 2px; filter: brightness(0) invert(1); }
  .l-footer__since {
    margin-top: var(--sp-5);
    font-family: var(--ff-num);
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-eyebrow);
    line-height: 1.8;
    color: rgba(255, 255, 255, .55);
  }
  .l-footer__map {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    gap: var(--sp-6);
    font-size: var(--fs-small);
  }
  .l-footer__col-title {
    position: relative;
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-4);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-body);
    line-height: 1.6;
  }
  .l-footer__col-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65em;
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--c-action-mark);
  }
  .l-footer__col-title a { white-space: nowrap; }
  .l-footer__col-title .c-icon { display: inline-block; margin-left: var(--sp-1); vertical-align: -.05em; color: rgba(255, 255, 255, .6); }
  .l-footer__col-list { display: flex; flex-direction: column; gap: var(--sp-2); }
  .l-footer__col-list li { padding-left: var(--sp-4); line-height: 1.8; color: rgba(255, 255, 255, .75); }
  .l-footer__col-title a:hover,
  .l-footer__col-list a:hover { color: var(--c-text-invert); text-decoration: underline; }

  .l-footer__bottom {
    margin-top: var(--sp-8);
    padding-block: var(--sp-5);
    border-top: 1px solid var(--c-line-invert);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-5);
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-body);
    color: rgba(255, 255, 255, .7);
  }
  .l-footer__bottom a:hover { color: var(--c-text-invert); text-decoration: underline; }

  @media (max-width: 1100px) {
    .l-footer__top { grid-template-columns: 1fr; }
    .l-footer__map { grid-template-columns: repeat(3, 1fr); justify-content: start; }
  }
  @media (max-width: 767px) {
    .l-footer { padding-top: var(--sp-8); }
    .l-footer__map { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
    .l-footer__bottom { flex-direction: column; align-items: flex-start; }
  }
}