@charset "UTF-8";
/* ============================================================
   RASENCA — Components（Figma実データ準拠）
   PC header 191:18 / SP header 864:1945 / SP menu 863:1814 / footer
   ============================================================ */

/* ============================== Header ============================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;            /* メニューより前面（開いてもロゴ/×が見える） */
  height: 10rem;          /* PC 100px */
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), height 0.4s var(--ease),
    box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}
/* 下線：1px・ロゴ/テキストと同色（currentColorで2色切替）・ヘッダー高さ内
   幅はFigmaのヘッダーpadding準拠（PC px-40 / SP px-16）の内側全幅 */
.site-header::after {
  content: "";
  position: absolute;
  left: 4rem;   /* PC 40px */
  right: 4rem;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1320px, 100% - 8rem); /* PC 内側1320 */
  margin-inline: auto;
}

/* logo（インラインSVG・currentColorで2色対応） */
.site-header__logo { display: inline-flex; align-items: center; color: inherit; }
.site-header__logo .logo-svg { display: block; width: 16rem; height: auto; } /* PC 160×26 */

/* nav（16px medium / 字間0.8px / gap32px） */
.site-header__nav { display: flex; align-items: center; gap: 3.2rem; }
.site-header__nav a {
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-block: 0.6rem;
}

/* ホバー：テキストを若干半透明に（header/footer/menu共通・下線なし） */
.site-header__nav a { transition: opacity 0.3s var(--ease); }
@media (hover: hover) {
  .site-header__nav a:hover,
  .site-footer__nav a:hover { opacity: 0.6; }
  body.menu-open .site-menu__list a:hover { opacity: 0.6; }
}

/* ---- 2色テーマ ---- */
.site-header[data-theme="light"] { color: var(--color-base); } /* FV上：白（下線も白） */
.site-header[data-theme="dark"] {                              /* FV後：#003853（下線も#003853） */
  color: var(--color-main);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
}
/* メニューを開いている間は常に白・透明（暗いメニュー上で視認） */
body.menu-open .site-header {
  color: var(--color-base);
  background: transparent;
  backdrop-filter: none;
}

/* ============================== Hamburger（三本線→×） ============================== */
.hamburger {
  display: none;
  width: 4.4rem; height: 4.4rem;
  position: relative; color: inherit; z-index: 2;
}
.hamburger span {
  position: absolute; right: 0;        /* 右端（20px padding）に寄せる＝隙間なし */
  width: 2.4rem; height: 2px;          /* SP 24px幅 */
  background: currentColor; border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease), background 0.4s var(--ease);
}
.hamburger span:nth-child(1) { top: 1.4rem; }
.hamburger span:nth-child(2) { top: 2.2rem; }
.hamburger span:nth-child(3) { top: 3.0rem; }
body.menu-open .hamburger span { background: var(--color-base); }
/* やや縦を潰した×（45°と20°の中間・33°） */
body.menu-open .hamburger span:nth-child(1) { transform: translateY(0.8rem) rotate(33deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-0.8rem) rotate(-33deg); }

/* ============================== SP Menu（863:1814 準拠） ============================== */
.site-menu {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 56, 83, 0.9);           /* #003853 90%（④） */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);                /* 背後をぼかす */
  padding-top: 7rem;                          /* SPヘッダー70px分 */
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
body.menu-open .site-menu { opacity: 1; visibility: visible; }

.site-menu__list {
  display: flex; flex-direction: column;
  /* 下線→設立背景「テキスト」の視覚距離を「ロゴ→下線」に一致させる。
     ロゴ〜下線 = (ヘッダー7rem − ロゴ1.6rem)/2 = 2.7rem。
     ただし各リンクは上padding1.6remを持つので、その分を差し引く。左右px-20 / 下は余白 */
  padding: calc((7rem - 1.6rem) / 2 - 1.6rem) 2rem 5.6rem;
}
.site-menu__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.16); } /* 区切りは各項目の下のみ（Figma準拠・上に線は入れない） */
.site-menu__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.6rem; /* Figma gap-16 準拠でタイトに */
  /* stagger 表示（③） */
  opacity: 0; transform: translateY(1.2rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.menu-open .site-menu__list a { opacity: 1; transform: none; }
body.menu-open .site-menu__list li:nth-child(1) a { transition-delay: 0.10s; }
body.menu-open .site-menu__list li:nth-child(2) a { transition-delay: 0.15s; }
body.menu-open .site-menu__list li:nth-child(3) a { transition-delay: 0.20s; }
body.menu-open .site-menu__list li:nth-child(4) a { transition-delay: 0.25s; }
body.menu-open .site-menu__list li:nth-child(5) a { transition-delay: 0.30s; }
body.menu-open .site-menu__list li:nth-child(6) a { transition-delay: 0.35s; }
body.menu-open .site-menu__list li:nth-child(7) a { transition-delay: 0.40s; }

.site-menu__label { display: flex; flex-direction: column; gap: 0.4rem; } /* Figma gap-4 */
.site-menu__label .jp {
  font-family: var(--font-base); font-weight: var(--fw-medium);
  font-size: 2rem; letter-spacing: 0.05em; color: var(--color-base);
  line-height: 1; /* leading-normalの継承1.9を打ち消してタイトに */
}
.site-menu__label .en {
  font-family: var(--font-en); font-weight: var(--fw-light);
  font-size: 1.1rem; letter-spacing: 0.1em; color: var(--color-sub2);
  line-height: 1;
}
/* 矢印（Figma実SVG・角丸の塗り三角）。pathは左向きなのでrotate180で右向き */
.site-menu__chev {
  width: 0.7rem; height: 0.9rem; flex-shrink: 0;
  color: var(--color-base);
  transform: rotate(180deg);
}

/* PCではSPメニューを無効化（リサイズ時に開きっぱなしにならないよう保険） */
@media (min-width: 1025px) { .site-menu { display: none; } }

/* ============================== レスポンシブ（<=1024） ============================== */
@media (max-width: 1024px) {
  .site-header { height: 7rem; }                    /* SP 70px */
  .site-header::after { left: 2rem; right: 2rem; }  /* SP 下線 左右20px（画面幅-40px） */
  .site-header__inner { width: calc(100% - 4rem); } /* SP 左右20px */
  .site-header__logo .logo-svg { width: 10rem; } /* SP 100×16 */
  .site-header__nav { display: none; }
  .hamburger { display: block; }
}

/* ============================== Footer（Figma 720:4473 / 849:298 準拠） ============================== */
.site-footer { background: var(--color-main); color: var(--color-base); padding-block: 10rem; } /* PC py-100 */
.site-footer__inner {
  width: min(var(--content-max), 100% - var(--gutter-pc) * 2); /* 1200 / 左右120 */
  margin-inline: auto;
  display: flex; flex-direction: column; gap: 2.4rem; /* gap-24 */
}
.site-footer__logo { display: inline-flex; color: var(--color-base); }
.site-footer__logo .logo-svg { display: block; width: 24rem; height: auto; } /* 240×39 */
/* 会社名+住所（左） と ナビ（右）を両端に */
.site-footer__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; width: 100%; }
.site-footer__company { display: flex; flex-direction: column; gap: 0.4rem; } /* gap-4 */
.site-footer__name { font-family: var(--font-base); font-weight: var(--fw-bold); font-size: 1.9rem; line-height: 2.4rem; letter-spacing: 0.05em; }
.site-footer__address { font-family: var(--font-base); font-weight: var(--fw-regular); font-size: 1.4rem; line-height: 2.4rem; letter-spacing: 0.05em; }
/* ナビ：PC=「 | 」区切りの1行 */
.site-footer__nav {
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--font-en); font-weight: var(--fw-regular);
  font-size: 1.3rem; line-height: 2.4rem; letter-spacing: 0.05em;
}
.site-footer__nav a { white-space: nowrap; transition: opacity 0.3s var(--ease); }
.site-footer__sep { margin: 0 1rem; color: var(--base-55); }
.site-footer__divider { width: 100%; height: 1px; background: var(--base-22); }
.site-footer__copy {
  font-family: var(--font-base); font-weight: var(--fw-regular);
  font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.05em;
  color: var(--color-base); opacity: 0.8; text-align: right;
}
@media (hover: hover) { .site-footer__nav a:hover { opacity: 0.6; } }

@media (max-width: 1024px) {
  .site-footer { padding-block: 6.4rem; }                    /* SP py-64 */
  .site-footer__inner { width: min(100% - 4rem, 60rem); }    /* SP 左右20px */
  .site-footer__row { flex-direction: column; gap: 2.4rem; } /* SP 縦積み */
  .site-footer__company { padding-block: 1.6rem; width: 100%; } /* Figma SP py-16 */
  .site-footer__nav { flex-direction: column; align-items: flex-start; } /* SP 縦積みリスト */
  .site-footer__sep { display: none; }                        /* SP 区切り非表示 */
}

/* ============================== Tablet（768–1024px）：ヘッダー/フッターをPC寄りへ ============================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* ヘッダー：ハンバーガーは維持（7項目は横に収まらないため）。幅・ロゴをPC寄りに */
  .site-header__inner { width: calc(100% - 8rem); }           /* 左右40px固定＝下線(left/right 4rem)と揃える。92rem上限を外し内側にズレないように */
  .site-header::after { left: 4rem; right: 4rem; }            /* 下線もinnerに合わせる */
  .site-header__logo .logo-svg { width: 12rem; }              /* 100→120px */

  /* メニュー：左右paddingを基本セクション（l-inner）と同じ40pxに（SPの20pxから拡大・ロゴ位置と揃う） */
  .site-menu__list { padding-inline: 4rem; }

  /* フッター：SPの縦積みをやめ、PC型の横並び（会社情報 左／ナビ 右）に戻す */
  .site-footer { padding-block: 8rem; }
  .site-footer__inner { width: min(100% - 8rem, 92rem); }
  .site-footer__row { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .site-footer__company { padding-block: 0; width: auto; }
  .site-footer__nav { flex-direction: row; flex-wrap: wrap; align-items: center; } /* 「 | 」区切りの1行に */
  .site-footer__sep { display: inline; }
}