/* ------------------------------
   横スクロール排除
------------------------------ */

/* 横スクロール抑止（最後の盾） */
html { 
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body { overflow-x: clip; } /* clipはパフォーマンス良・hiddenより推奨（対応外ブラウザはhiddenにフォールバック） */
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }


/* ------------------------------
   ローディング画面
------------------------------ */
#loader {
  position: fixed;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 と同義 */
  background: #06003e;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease;
  color: #fff;               /* フォントカラーを白に */
}

/* スピナー（サブ用。SVGロゴ版と切り替え可） */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #ccc;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------
   ベース設定
------------------------------ */
:root { --header-h: 64px; }

body {
  margin: 0;
  padding-top: var(--header-h); /* 固定ヘッダー分の余白 */
  -webkit-font-smoothing: antialiased;
}

/* アクセシビリティ用（スクリーンリーダーのみ表示） */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ------------------------------
   ヘッダー
------------------------------ */
.site-header {
  position: fixed;
  top: 12px; left: 50%; right: auto;
  transform: translateX(-50%);
  height: var(--header-h);
  width: calc(100% - 48px);
  max-width: 1800px;

  background: rgba(30, 30, 30, 0.35); /* ← typo修正 */
  color: #fff;                        /* 文字色を白に */
  border-radius: 32px;                /* 角丸 */

  z-index: 1000;
  transition: transform .32s ease, background-color .2s ease;
}

.site-header.is-hidden { transform: translate(-50%,-150%); }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0); }

/* --- backdrop-filter で裏面をぼかす --- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    /* ぼかしが効く前提で少し透明度を上げて“ガラス感”を出す */
    background: rgba(30, 30, 30, 0.35);
    -webkit-backdrop-filter: saturate(120%) blur(14px);
    backdrop-filter: saturate(120%) blur(14px);
    /* （任意）パフォーマンスヒント */
    will-change: backdrop-filter;
  }
}

.site-header__inner {
  max-width: 1800px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff; /* ロゴ横の文字も白 */
}

.site-title {
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff; /* サイトタイトル文字も白 */
}

/* ------------------------------
   ドロップダウン（共通）
------------------------------ */
.has-submenu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ▼は非表示（ボタン自体を残す場合） */
.submenu-toggle { display: none !important; }

/* ドロップダウン本体（デスクトップの初期状態は非表示） */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 10px 0 0;
  padding: 8px;
  list-style: none;
  background: rgba(30,30,30,.96);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1200;
}

/* 三角の出っ張り（任意） */
.submenu::before {
  content: "";
  position: absolute;
  top: -8px; left: 18px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent rgba(30,30,30,.96) transparent;
}

/* 項目 */
.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}
.submenu a:hover,
.submenu a:focus {
  background: rgba(255,255,255,.12);
}

/* --- デスクトップ（hover & focus-within で表示） --- */
@media (min-width: 961px) {
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu,
  .has-submenu.is-open > .submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* --- モバイルは常時展開＆“下に表示” --- */
@media (max-width: 960px) {
  /* 親LIを縦並びにして、必ず子が下に来る */
  .has-submenu {
    display: flex;
    flex-direction: column;   /* ← これで下に積まれる */
    align-items: stretch;
    gap: 0;
  }
  .parent-link {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }

  .submenu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 4px 0 8px;
    background: transparent;
    border: none;
    box-shadow: none;

    /* 常時表示（高さ制御しない） */
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: visible;
    max-height: none;
  }
  .submenu::before { display: none; } /* 三角も不要 */
  .submenu a {
    padding: 12px 16px 12px 28px; /* 少しインデントして階層感 */
  }
}

/* ------------------------------
   フッター
------------------------------ */
.site-footer {
  background: #06003e;
  color: #fff;
  margin-top: 64px;
  padding: 40px 16px 20px; /* 下に余白を追加 */
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus {
  text-decoration: underline;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr; /* ブランド | ナビ | 会社情報 */
  gap: 24px;
  align-items: start;
}

/* ブランド */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.footer-title {
  font-size: 1.05rem;
  letter-spacing: .02em;
}

/* ナビ */
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer-menu a {
  display: inline-block;
  padding: 4px 0;
}

/* 会社情報 / SNS */
.footer-address {
  font-style: normal;
}
.footer-address .adr {
  line-height: 1.8;
  margin: 0 0 12px;
}
.footer-address a {
  text-decoration: underline;
}

.footer-social {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-social a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  transition: background .2s ease, transform .2s ease;
}
.footer-social a:hover,
.footer-social a:focus {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}

/* 区切り線（任意） */
.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  margin: -24px 0 24px; /* 上との区切りを自然に */
}

/* コピーライト */
.footer-copy {
  margin-top: 0px;
  font-size: 0.85rem;
  opacity: 0.9;
  text-align: center; /* 念のため中央寄せ */
}

.footer-copy__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;      /* 縦並び */
  align-items: center;         /* 中央ぞろえ */
  gap: 6px;                    /* 行間 */
}

.footer-copy__text { color: #fff; }

.footer-copy__link{
  color: #fff;
  text-decoration: underline;
  opacity: .9;
}
.footer-copy__link:hover,
.footer-copy__link:focus { opacity: 1; }


/* レスポンシブ */
@media (max-width: 960px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .footer-title {
    font-size: 1rem;
  }
  .footer-menu {
    justify-content: center;
  }
  .footer-social {
    justify-content: center;
  }
}


/* ------------------------------
   ナビゲーション
------------------------------ */
.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0; padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: #fff; /* ナビゲーションの文字を白に */
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background .2s ease;
}
.nav-list a:hover,
.nav-list a:focus {
  background: rgba(255,255,255,.15); /* 白を薄くかけてホバー時の反応 */
}

/* ------------------------------
   ハンバーガーメニュー
------------------------------ */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: #fff; /* バーも白に */
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

.nav-toggle__bar { top: 19px; }
.nav-toggle__bar::before { top: -8px; }
.nav-toggle__bar::after  { top: 8px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* ------------------------------
   モバイルナビ
------------------------------ */
@media (max-width: 960px) {
  .nav-toggle { display: inline-block; }
  .nav-list {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    background: rgba(40,40,40,0.95);  /* メニュー展開時のみ暗背景 */
    display: none;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav-list.is-open { display: flex; }
  .nav-list li { width: 100%; }
  .nav-list a {
    display: block;
    padding: 14px 16px;
    border-radius: 0;
    color: #fff;
  }
}

/* ===== モバイル：レール＋ドット（重なり防止・確実版） ===== */
@media (max-width: 960px) {
  .nav-list{
    --submenu-indent: 0px;           /* 子のインデント幅 */
    --submenu-pad-x: 24px;            /* 左右パディング基準 */
    --rail-color: rgba(255,255,255,.22);
    --dot-size: 6px;
    --dot-color: rgba(255,255,255,.60);
    --dot-gap: 10px;                  /* ドットとテキストの間隔 */
  }

  /* 子リストの箱：左側にインデント領域を確保 */
  .nav-list > li.has-submenu > .submenu{
    position: relative;
    padding-left: calc(var(--submenu-pad-x) + var(--submenu-indent)) !important;
  }

  /* レールは ::after を使用（::before は別用途で無効化されることがあるため） */
  .nav-list > li.has-submenu > .submenu::after{
    content: "";
    position: absolute;
    left: var(--submenu-pad-x);
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--rail-color);
    border-radius: 2px;
    pointer-events: none;
  }

  /* 子リンク：ドット分＋間隔ぶんだけ確実に内側余白を足す */
  .nav-list > li.has-submenu > .submenu > li > a{
    position: relative;
    display: block;
    /* 左= 基本padding(16px) + ドット径 + 余白 → これでテキストがドットに絶対かぶらない */
    padding: 12px var(--submenu-pad-x) 12px calc(var(--submenu-pad-x) + var(--dot-size) + var(--dot-gap)) !important;
  }

  /* ドット（インデント境界の中央に配置） */
  .nav-list > li.has-submenu > .submenu > li > a::before{
    content: "";
    position: absolute;
    /* ドットの中心 = レール基準 + インデント量 */
    left: calc(var(--submenu-pad-x) + var(--submenu-indent));
    top: 50%;
    width: var(--dot-size);
    height: var(--dot-size);
    background: var(--dot-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);  /* 中心合わせ */
    pointer-events: none;
  }
}



/* ------------------------------
   トップページ背景
------------------------------ */
body.top-page {
  background: url("/img/top-bg.png") center center / cover no-repeat fixed;
}

/* モバイル（≤960px）は別画像を横いっぱい・縦だけリピート */
@media (max-width: 960px){
  body.top-page{
    /* 横幅いっぱい（width=100%）、アスペクト保持、高さは自動 */
    background-image: url("/img/top-bg-mobile.png");
    background-position: top center;
    background-size: 100% auto;   /* 横をちょうどに、縦は自動 */
    background-repeat: repeat-y;  /* 縦方向だけ繰り返し */
    background-attachment: scroll;/* iOSでのパフォーマンス対策 */
    background-color: #06003e;    /* 端/隙間のフォールバック色（任意） */
  }
}

/* ------------------------------
   アイキャッチ
------------------------------ */
/* ヒーローエリアをヘッダーの裏まで広げる */
.top-page .hero {
  margin-top: calc(var(--header-h) * -1); /* ヘッダー分だけ上に引き上げる */
  z-index: 0; /* ヘッダーより下に配置 */
}

/* ヒーロー内の動画・スライダーを枠いっぱいに広げる */
.hero {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}
.hero > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* PCは動画、スマホはスライダー */
.hero-video { display: none; }
.hero-slider { display: block; }

@media (min-width: 961px) {
  .hero-video { display: block; }
  .hero-slider { display: none; }
}

/* キャッチコピー */
.hero-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  padding: 0 1rem;
  z-index: 2;
}

/* ▼ キャッチフレーズ画像オーバーレイ */
.hero-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  /* 中央 → 左上 */
  place-items: start start;      /* = align-items:start; justify-items:start; */
  z-index: 3;
  pointer-events: none;
  padding: 7rem 3rem;
}

.hero-catch {
  width: min(40vw, 2000px);   /* 画面に合わせて自動縮小／上限幅 */
  max-height: 30%;           /* 縦方向に大きすぎないよう制限 */
  height: auto;
  object-fit: contain;       /* 画像の縦横比を保持 */
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); /* 視認性アップ（任意） */
}

/* ---- モバイル(≤960px)：上下余白ゼロで全画面表示に ---- */
@media (max-width: 960px) {
  /* 1) 16:9をやめて画面高に合わせる（svhでアドレスバーの伸縮に強い） */
  .hero {
    aspect-ratio: auto;
    height: 100vh;   /* フォールバック */
    height: 100svh;  /* 推奨：モバイルUI込みでもピッタリ */
  }

  /* 2) スライダー内をフルフィット */
  .hero-slider { position: absolute; inset: 0; }
  .hero-slider > * { position: absolute; inset: 0; } /* .slide など */
  .hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* 画像の下の“行間”を消す */
  }

  .hero-overlay{
  /* 中央 → 左上 */
  place-items: center;
  padding: 0;
  }

  .hero-catch {
  width: 80%;   /* 画面に合わせて自動縮小／上限幅 */
  }
}

/* ------------------------------
   Mission セクション（2レーン・無限スクロール）
------------------------------ */
.mission {
  padding: 24px 0px;
  margin-top: clamp(60px, 10vh, 240px);
}

.mission-frame {
  position: relative;
  min-height: 60vh;             /* 約2倍の高さに拡張（調整可） */
  border-radius: 24px;
  overflow: hidden;
  background: transparent;       /* 透過：背面がそのまま見える */
}

/* 背景コンテナ：上下2レーン縦並び */
.mission-bg {
  position: absolute;
  inset: 0;
  padding: 16px 0px;                 /* フレームとの隙間 */
  display: flex;
  flex-direction: column;
  gap: 8px;                     /* レーン間の縦の間隔 */
  z-index: 0;
}

/* 各レーン（横方向に2ストリップ並べる） */
.mission-lane {
  position: relative;
  display: flex;
  overflow: hidden;              /* レーン枠からはみ出た部分を隠す */
}

/* ストリップ：画像が横に連なる帯。AとBを横に並べる */
.mission-strip {
  display: flex;
  align-items: center;
  gap: 8px;                     /* カードの間隔 */
  will-change: transform;
}

/* 画像カードの見た目 */
.mission-strip img {
  height: 27vh;                  /* 1レーンのカード高さ（上下で合計 ~84vh） */
  width: auto;
  object-fit: cover;
  border-radius: 12px;
  user-select: none;
  pointer-events: none;
}

/* アニメーション：右→左（上レーン） */
.lane-rtl .mission-strip {
  animation: scroll-rtl 45s linear infinite;
}

/* アニメーション：左→右（下レーン） */
.lane-ltr .mission-strip {
  animation: scroll-ltr 48s linear infinite;
}

/* 無限スクロール（A|B 並びで -50% or 0% を往復） */
@keyframes scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* A|B の半分だけ動かすと継ぎ目なし */
}
@keyframes scroll-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* テキスト：中央重ね */
.mission-content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mission-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.mission-title {
  color: #fff;
  font-size: clamp(3.5rem, 5vw, 5rem);
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0 0 .6rem;
  text-shadow: 0 3px 18px rgba(0,0,0,.9);
}

.mission-text {
  color: #fff;
  font-size: clamp(1.5rem, 1.6vw, 2rem);
  line-height: 1.9;
  margin: 0;
  text-shadow: 0 3px 18px rgba(0,0,0,.9);
}

/* モバイル調整 */
@media (max-width: 960px) {
  .mission-bg { padding: 12px 0px; }
  .mission-content { padding: 16px; }
  .mission-title { font-size: clamp(2.5rem, 5vw, 4rem);}
  .mission-text { font-size: clamp(1rem, 1.6vw, 1.25rem);}
}

/* ------------------------------
   汎用セクション（個別に使い回し）
------------------------------ */
.info {
  /* 透過がデフォルト。個別に style="--info-bg: 〜" を渡せます */
  --info-bg: transparent;
  background: var(--info-bg);
  padding: clamp(32px, 6vw, 80px) clamp(32px, 6vw, 80px);
}

.info__inner {
  display: flex;
  flex-direction: column;   /* ← 必ず縦並び */
  gap: clamp(16px, 4vw, 40px);
}
.info__text  { order: 1; }
.info__media { order: 2; }

/* テキスト */
.info__eyebrow {
  color: #8ea0ff;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-size: .9rem;
}
.info__title {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
.info__desc {
  color: #e9e9e9;
  line-height: 1.9;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* 画像 */
.info__media img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;   /* ← 横方向の自動マージンで中央寄せ */
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* ボタン */
.info__actions .btn {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 20px;
  border-radius: 10px;
  background: #ff3131;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow: 0 6px 16px rgba(255,49,49,.35);
}
.info__actions .btn:hover,
.info__actions .btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,49,49,.45);
}

/* レスポンシブ */
@media (min-width: 961px) {
  .info__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;  /* テキスト | 画像 */
    align-items: center;
  }
  /* 通常（反転なし） */
  .info__text  { order: 0; }
  .info__media { order: 0; }

  /* 反転クラスが付いたときだけ左右を入れ替え */
  .info.is-reverse .info__inner {
    grid-template-columns: 1fr 1.1fr;  /* 画像 | テキスト */
  }
  .info.is-reverse .info__text  { order: 2; }
  .info.is-reverse .info__media { order: 1; }
}

/* ------------------------------
   子ページ用（個別に使い回し）
------------------------------ */
/* ===== ページ共通コンテナ（必要なら流用） ===== */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ===== フル幅帯見出し ===== */
.page-band{
  width: 100%;
  background: transparent;   /* 完全に透明 */
  color: #fff;
  margin: 36px 0 0 0;
  position: relative;        /* 疑似要素の基準にする */
}

.page-band__inner{
  margin: 0 auto;
  padding: clamp(4px, 5vw, 6px) clamp(24px, 5vw, 48px);
}

.page-band__title{
  margin: 0;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .02em;
}

.page-band__title::first-letter{
  color: #ff3131;     /* 赤 */
  font-size: 1.35em;  /* 先頭1文字だけ少し大きく */
  line-height: 1;     /* ベースラインのズレを抑える */
  letter-spacing: 0;  /* 1文字目の字間は通常に */
}

/* 画面いっぱいの下線（赤） */
.page-band::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100dvw;             /* 動的ビューポート幅（対応環境で優先） */
  height: 3px;               /* 下線の太さはお好みで */
  background: #ff3131;       
  transform: translateX(-50%);
  pointer-events: none;
}

/* 100dvw未対応ブラウザ向けフォールバック */
@supports not (width: 100dvw){
  .page-band::after{ width: 100vw; }
}


/* ===== パンくず ===== */
.breadcrumb {
  margin: 0 auto 12px;
  padding: 0 clamp(24px, 5vw, 48px);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .95rem;
}
.breadcrumb a { color: #8ea0ff; text-decoration: none; }
.breadcrumb a:hover,
.breadcrumb a:focus { text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: #fff; opacity: .9; }
.breadcrumb .sep { color: #aaa; }

/* ===== リンクカード一覧 ===== */
.linkcards {
  padding: clamp(12px, 2vw, 16px) 0 clamp(40px, 6vw, 72px);
}
.linkcards__list {
  max-width: 1000px;
  margin-top: 100px;
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  padding: 0 20px;
  list-style: none;
  display: grid;
  gap: 160px;                       /* カード間隔 */
}

/* カード全体をクリック可能にするため<a>を外枠に */
.linkcard {
  display: grid;
  grid-template-columns: 280px 1fr; /* PC：左=画像, 右=テキスト */
  align-items: stretch;
  gap: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;                /* 角丸に画像を沿わせる */
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}
.linkcard:hover,
.linkcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  outline: none;
}

/* 画像枠 */
.linkcard__media {
  margin: 0;
  display: block;
  position: relative;
  min-height: 180px;               /* テキストが短い場合も高さを確保 */
  overflow: hidden;
}
.linkcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* 画像埋め込み */
  display: block;
}

/* テキスト */
.linkcard__body {
  padding: clamp(16px, 2.4vw, 24px);
  display: grid;
  align-content: center;
  gap: 6px;
}
.linkcard__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 800;
  color: #fff;
}
.linkcard__desc {
  margin: 0;
  color: #e9e9e9;
  line-height: 1.8;
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
}

/* スマホ：画像上／文字下、全幅 */
@media (max-width: 960px) {
  .linkcard {
    grid-template-columns: 1fr;    /* 縦積み */
    gap: 0;
  }
  .linkcard__media {
    min-height: 46vw;              /* 横長画像でも見栄え確保（比率調整可） */
  }
}

/* キーボード操作のフォーカス可視化（アクセシビリティ） */
.linkcard:focus-visible {
  box-shadow: 0 0 0 3px rgba(142,160,255,.55), 0 14px 34px rgba(0,0,0,.26);
}





/* 会社概要（DL）中央寄せ＋2カラム＋上線のみ */
.company-def{
  max-width: 880px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 15ch 1fr;
  column-gap: 0;   /* ← 列間の隙間ゼロで線をつなげる */
  row-gap: 0;      /* 行間の隙間もゼロ（余白はpaddingで調整） */
  align-items: start;
}

/* 左：見出し */
.company-def dt{
  grid-column: 1;
  margin: 0;
  color: #cfd6ff;
  font-weight: 700;
  text-align: right;

  padding: 12px 16px 12px 0;    /* 右に余白 */
  border-top: 1px solid rgba(255,255,255,.12);  /* ← 上線のみ */
}

/* 右：内容 */
.company-def dd{
  grid-column: 2;
  margin: 0;
  color: #e9e9e9;
  line-height: 1.9;

  padding: 12px 0 12px 16px;    /* 左に余白 */
  border-top: 1px solid rgba(255,255,255,.12);  /* ← 上線のみ */
}

/* 先頭行は上線なし（“区切り線のみ”にしたい場合は有効化） */
.company-def dt:first-of-type,
.company-def dd:first-of-type{
  border-top: none;
}

/* スマホでも2カラム維持（ズレ防止） */
@media (max-width: 640px){
  .company-def dt,
  .company-def dd{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: .95rem;
  }
}



/* 単一カラムで中央寄せしたい .info のためのバリアント */

@media (min-width: 961px){
  .info--single .info__inner{
    display: block;           /* 2カラム化をやめる */
  }
  .info--single .info__text{
    max-width: 880px;         /* 読みやすい幅に制限 */
    margin: 0 auto;           /* 中央寄せ */
  }
}

/* マップ埋め込みの見た目 */
.btn-link{
  display: inline-block;
  text-decoration: underline;
  color: #8ea0ff;
}
.btn-link:hover,
.btn-link:focus{ text-decoration: none; }

.map-embed-wrap{
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* aspect-ratio対応ブラウザ */
.map-embed{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* フォールバック（古いブラウザ向け） */
@supports not (aspect-ratio: 16 / 9){
  .map-embed{ height: 420px; }
}


/* ===========================
   会社沿革（History） 完全CSS
   構造：
   <ul class="history-list">
     <li class="history-item">
       <div class="history-year">YYYY年</div>
       <div class="history-body">
         <h3 class="history-title">タイトル</h3>
         <p class="history-text">本文</p>
         <figure class="history-media"><img ...></figure> <!-- 画像は任意 -->
       </div>
     </li>
   </ul>
=========================== */

/* リストのベース */
.history-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 行：年｜本文 の2カラム（PC） */
.history-item{
  position: relative;
  display: grid;
  grid-template-columns: minmax(8.5em, 12em) 1fr; /* 左：年／右：本文 */
  column-gap: 24px;
  row-gap: 8px;
  align-items: start;
  padding: 16px 0;
}

/* 行の上にうっすら区切り線（任意） */
.history-item::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.history-item:first-child::before{ background: none; } /* 先頭だけ線を消す */

/* 年 */
.history-year{
  grid-column: 1;
  color: #cfd6ff;
  font-weight: 800;
  text-align: right;
  padding-right: 12px;
  white-space: nowrap;           /* 年は折り返さない */
}

/* 本文コンテナ */
.history-body{
  grid-column: 2;
  color: #e9e9e9;
  min-width: 0;                  /* グリッドの改行崩れ対策（重要） */
}

/* タイトル：複数行OK、バランス良く改行 */
.history-title{
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 800;
  color: #fff;
  white-space: normal;           /* 省略せず改行可 */
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;       /* 長い英数字も折り返す */
  text-wrap: balance;            /* 対応ブラウザで見出し改行をバランス良く */
}

/* 本文 */
.history-text{
  margin: 0;
  line-height: 1.9;
}

/* 画像（任意）：本文下で中央・やや小さめ */
.history-media{
  margin: 10px 0 0;
  text-align: left;            /* 中のimgを中央寄せ */
}
.history-media img{
  display: inline-block;
  width: 100%;
  max-width: clamp(280px, 70%, 560px); /* 本文幅の約70%で表示 */
  height: auto;
  aspect-ratio: 4 / 3;           /* お好みで 16/9 などに変更可 */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

/* ── スマホ（≤960px） ── */
@media (max-width: 960px){
  /* 年カラム幅を固定して全行の幅ブレを防止 */
  .history-list{ --year-col: 7.5em; }      /* 7〜9emで好みに調整可 */
  .history-item{
    grid-template-columns: var(--year-col) 1fr;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px 0;
  }
  .history-year{
    padding-right: 8px;
    font-size: .96rem;
  }
  .history-title{
    font-size: 1.02rem;          /* 一回りだけ小さく */
  }
  .history-media img{
    max-width: 72%;              /* 画像を少し小さめに（中央寄せのまま） */
  }
}


/* ====== Features（強みカード） ====== */
.feature-grid{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.feature-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 18px 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}
.feature-title{
  margin: 0 0 6px;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
}
.feature-text{
  margin: 0;
  color: #e9e9e9;
  line-height: 1.9;
}
@media (min-width: 961px){
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ====== Accordion（<details>） ====== */
.accordion{ display: grid; gap: 10px; margin-top: 10px; }
.acc{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.acc__summary{
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  margin: 0;
  color: #fff;
  font-weight: 800;
  position: relative;
}
.acc__summary::-webkit-details-marker{ display: none; }
.acc__summary::after{
  content: "+";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  opacity: .9;
}
.acc[open] .acc__summary::after{ content: "−"; }
.acc__panel{
  padding: 0 18px 16px 18px;
  color: #e9e9e9;
  line-height: 1.9;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ====== Members（社員紹介） ====== */
.member-grid{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 961px){
  .member-grid{ grid-template-columns: repeat(2, 1fr); }
}
.member-card{ margin: 0; }

.member{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}
.member__summary{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.member__summary::-webkit-details-marker{ display: none; }
.member__summary::after{
  content: "詳しく見る";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  opacity: .75;
}
.member[open] .member__summary::after{ content: "閉じる"; }

.member__avatar{
  margin: 0;
  width: 88px; height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.member__avatar img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.member__meta{
  display: grid;
  gap: 4px;
}
.member__name{
  font-weight: 800; color: #fff;
  font-size: 1.05rem;
}
.member__role{
  font-size: .95rem; color: #cfd6ff;
}

.member__detail{
  padding: 0 14px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #e9e9e9;
}
.member__detail dl{
  margin: 0; display: grid; gap: 6px;
}
.member__detail dt{
  color: #8ea0ff; font-weight: 700; margin: 10px 0 2px;
}
.member__detail dd{ margin: 0; line-height: 1.9; }

/* ====== 募集要項 ====== */
.job-cols{
  display: grid; gap: 16px; grid-template-columns: 1fr;
  margin: 6px 0 14px;
}
@media (min-width: 961px){
  .job-cols{ grid-template-columns: 1fr 1fr; }
}
.job-sub{
  margin: 12px 0 8px;
  color: #fff; font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
}
.job-list{
  margin: 0; padding-left: 1.1em; color: #e9e9e9; line-height: 1.9;
}
.job-desc{ color:#e9e9e9; line-height:1.9; margin-top:4px; }

.job-table{
  width: 100%;
  border-collapse: collapse;
  max-width: 880px;
  margin: 10px auto 0;
}
.job-table th,
.job-table td{
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  vertical-align: top;
}
.job-table th{
  width: 12em; color: #cfd6ff; text-align: left; font-weight: 700;
}
.job-table td{ color: #e9e9e9; }
@media (max-width: 640px){
  .job-table th{ width: auto; display:block; border-top:none; padding-bottom:4px; color:#8ea0ff; }
  .job-table td{ display:block; padding-top:0; }
}

/* ====== Contact ====== */
.contact-box{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}
.contact-lead{
  margin: 0 0 8px; color: #fff; font-weight: 700;
}
.contact-row{
  margin: 4px 0; color: #e9e9e9;
}
.contact-box a{
  color: #8ea0ff; text-decoration: underline;
}
.contact-box a:hover{ text-decoration: none; }

/* ------------------------------
   アニメーション（フロートイン）
------------------------------ */
/* 共通（初期は非表示＋オフセット） */
.a-float-in,
.a-float-in-right,
.a-float-in-left {
  opacity: 0;
  transition: opacity 1500ms ease, transform 1500ms cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}

/* 方向別の初期オフセット */
.a-float-in {        /* 下から */
  transform: translateY(60px);
}
.a-float-in-right {  /* 右から */
  transform: translateX(60px);
}
.a-float-in-left {   /* 左から */
  transform: translateX(-60px);
}

/* 表示時（個別にスコープ） */
.a-float-in.is-inview,
.a-float-in-right.is-inview,
.a-float-in-left.is-inview {
  opacity: 1;
  transform: none;
}

/* アニメーション軽減設定に配慮 */
@media (prefers-reduced-motion: reduce) {
  .a-float-in,
  .a-float-in-right,
  .a-float-in-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------
   アニメーション（フェードイン）
------------------------------ */
/* その場でふわっと表示（初期：非表示＋わずかに縮小＋軽いぼかし） */
.a-fade-in {
  opacity: 0;
  transform: scale(0.985);      /* ほぼその場、微小ズーム */
  filter: blur(2px);
  transition:
    opacity 1500ms ease,
    transform 1500ms cubic-bezier(.2,.6,.2,1),
    filter 1500ms ease;
  will-change: opacity, transform, filter;
}

/* 表示時 */
.a-fade-in.is-inview {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 完全に“位置そのまま”にしたい場合（オプション） */
.a-fade-in.-static { transform: none; }

/* 動きを減らす設定に配慮 */
@media (prefers-reduced-motion: reduce) {
  .a-fade-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ------------------------------
   画像差し込み
------------------------------ */
/* === Section Divider（セクション間の画像）=== */
.section-divider{
  margin: 0 0;
}
.section-divider img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* A) フルブリード：左右の余白を無視して画面いっぱいに */
.section-divider--full{
  position: relative;
  width: 100vw;                 /* 画面幅ちょうど */
  left: 50%;
  right: 50%;
  transform: translateX(-50%);  /* 中央にそろえる */
  margin-left: 0; margin-right: 0;
}
.section-divider--full img{
  border-radius: 0;             /* 端まで見せる */
  /* 被写体位置を微調整したい時は object-position を使う */
  /* 例）object-position: center 40%; */
}

/* B) ボックス：コンテンツ幅に収めて角丸＋影 */
.section-divider--boxed{
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(5px, 5vw, 15px);
  padding: 0 clamp(16px, 3vw, 24px);
}
.section-divider--boxed img{
  border-radius: 0px;
}

/* （任意）縦を浅くしたい短冊バナー風 */
.section-divider.is-banner img{ aspect-ratio: 32 / 9; }

/* （任意）キャプション */
.section-divider figcaption{
  text-align: center;
  font-size: .95rem;
  color: #cfd6ff;
  margin-top: 8px;
  opacity: .9;
}

/* ------------------------------
   見栄え調整
------------------------------ */
/* キャッチコピー専用：勝手に途中改行しない */
.catch-copy{
  overflow-wrap: normal !important;  /* anywhere を打ち消す */
  word-break: keep-all !important;   /* 単語途中で折り返さない（和文でも効果あり） */
  line-break: strict;                /* 句読点の扱いを厳密に */
  text-wrap: balance;                /* 2行に分かれるときの見た目を整える（対応ブラウザで有効） */
}