/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  共通設定
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* ------------------------------
   横スクロール排除
------------------------------ */

/* 横スクロール抑止（最後の盾） */
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; } }

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  ヘッダー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* ============================
   基本レイアウト
============================ */
.site-header {
  position: fixed;
  top: 0;
  width: 100vw;
  background: var(--bg-color, #010052); 
  border-bottom: 1px solid #999999;
  z-index: 1000;
  transition: transform .3s ease;
}

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

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* ============================
   ナビ（PC表示）
============================ */
.site-nav {
  position: relative;
}

.nav-list {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  color: #ffffff; /*★★メニューの文字色*/
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}

.nav-list a:hover {
  color: var(--primary-color, #005bac);
}

/* 親LIの基本 */
.nav-list > li {
  position: relative;
}

/* 親メニューに矢印を付けたい場合（お好み） */
.has-submenu > a {
  position: relative;
  padding-right: 14px;
}

.has-submenu > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s ease;
}

.has-submenu.is-open > a::after {
  transform: translateY(-50%) rotate(225deg);
}

/* --- サブメニュー（PC）--- */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eee;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
  z-index: 999;
}

.submenu li {
  border-bottom: 1px solid #f3f3f3;
}
.submenu li:last-child {
  border-bottom: none;
}

.submenu a {
  display: block;
  padding: 8px 14px;
  font-size: .9rem;
  color: #333;
  text-decoration: none;
}

.submenu a:hover {
  background: rgba(0, 91, 172, .05); /* 適宜調整 */
}

/* .is-open が付いている時に表示 */
.has-submenu.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================
   ハンバーガーボタン（初期は非表示）
============================ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  background: #ffffff; /*ハンバーガーボタンの色*/
  border-radius: 2px;
  transition: all .3s ease;
  position: relative;
}

/* 上の棒 */
.nav-toggle__bar::before {
  content: "";
  position: absolute;
  top: -8px;   /* ← 中心から -8px（上へ） */
}

/* 下の棒 */
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  top: 8px;    /* ← 中心から +8px（下へ） */
}

/* 真ん中の棒（バー本体）を少し上に持ち上げる調整 */
.nav-toggle__bar {
  position: relative;
  top: 0px;    /* ← 好みで調整：「0〜2px まで」がおすすめ */
}

/* ----------------------------
   開いている時のハンバーガー → ×
---------------------------- */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}

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

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

/* ============================
   スマホレイアウト
============================ */
@media (max-width: 960px) {

  /* PCナビを非表示にしてハンバーガーに切り替え */
  .nav-list {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    width: 240px;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all .25s ease;
  }

  .nav-list a {
  color: #494949; /*★★メニューの文字色*/
}

  .nav-list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-list > li {
    border-bottom: 1px solid #eee;
  }
  .nav-list > li:last-child {
    border-bottom: none;
  }

  .nav-list > li > a {
    display: block;
    padding: 10px 14px;
  }

  /* --- サブメニューをツリー状に --- */
  .submenu {
    position: static;
    min-width: auto;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0 0 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .has-submenu > a {
    padding-right: 14px;
  }

  .submenu li {
    border-bottom: none;
  }

  .submenu a {
    padding: 6px 24px 6px 26px; /* 少しインデント */
    font-size: .9rem;
  }

  /* 矢印は回転だけ維持（is-open は JS 側で付く） */
  .has-submenu > a::after {
    right: 8px;
  }
  /* ハンバーガー表示 */
  .nav-toggle {
    display: block;
  }

  /* PCの横並び解除 */
  .nav-list {
    gap: 0;
  }
}

/* ===== パンくず ===== */
.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: #727272; opacity: .9; }
.breadcrumb .sep { color: #aaa; }

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  フッター
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* ------------------------------
   フッター
------------------------------ */
.site-footer {
  background: var(--bg-color, #010052);
  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;
}


/* コピーライト */
.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; }


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  ボディー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* ------------------------------
   ベース設定
------------------------------ */
:root { --header-h: 56px; }

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;
}

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

/* ==============================
   Hero（トップ見出しセクション）
============================== */
.hero {
  width: 100%;
  height: 60vh; /* 好みで 50〜80vh */
  min-height: 320px;
  background: var(--hero-bg) center/cover no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;    /* ← 追加！縦方向に並べる */
  align-items: center;      /* 縦センター */
  justify-content: center;  /* 横センター */

  position: relative;
  text-align: center;
  padding: 0 0; /* SPで余白 */
}

/* 黒の透明オーバーレイ（画像を暗くする） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* ← 数値で暗さを調整（0.3〜0.6が使いやすい） */
  z-index: 1;
}

/* 中のコンテンツは前面に */
.hero > * {
  position: relative;
  z-index: 2;
}

/* ==============================
   見出し (中央タイトル)
============================== */
.hero__title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;

  /* 背景に埋もれないように影を付ける */
  text-shadow: 0 4px 10px rgba(0,0,0,0.45);

  margin: 0;
}

/* ==============================
   見出し (サブタイトル)
============================== */
.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);  /* 少し大きめ、SP/PCで最適化 */
  font-weight: 300;            /* 軽めで上品（300〜400が最適） */
  letter-spacing: 0.03em;      /* 読みやすく */
  margin-top: 0.6em;           /* タイトルとの間隔 */
  line-height: 1.5;
  opacity: 0.9;                /* 白を強すぎないように */
}

/* ==============================
   文字色
============================== */
.text-color {
  color: var(--text-color, #ffffff); /* デフォルトは白 */
}

/* ==============================
   文字の左右
============================== */
.align-r {
  text-align: right;
}

.align-l {
  text-align: left;
}

/* ------------------------------
   汎用セクション（個別に使い回し）
------------------------------ */
.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__title {
  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 {
  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);
}

/* 縦長用 */
.reduction {
  max-width: 70%;   /* ← 好みで 60〜80% に調整 */
  margin: 0 auto;
}

/* レスポンシブ */
@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; }
}

/* ==============================
   モバイル最適化
============================== */
@media (max-width: 768px) {
  .hero {
    height: 45vh;
    min-height: 260px;
  }
}


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


/* ==============================
   Company Profile Table
============================== */

.company-section {
  padding: 3rem 1.5rem;
}

.company-section__heading {
  margin: 0 0 1.5rem;
}

.company-table {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95rem;
}

.company-table th,
.company-table td {
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: top;
}

.company-table th {
  width: 30%;
  font-weight: 600;
  color: #222;
  background: rgba(0, 0, 0, 0.02);
  text-align: left;
  white-space: nowrap;
}

.company-table td {
  color: #333;
  background: rgba(255, 255, 255, 0.02);
  line-height: 1.6;
}

/* 小さめ画面での見やすさ調整 */
@media (max-width: 768px) {
  .company-section {
    padding: 2.5rem 1rem;
  }

  .company-table {
    font-size: 0.9rem;
  }
}

/* かなり小さい画面では1行ずつブロック化して読みやすく */
@media (max-width: 520px) {
  .company-table,
  .company-table tbody,
  .company-table tr,
  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
  }

  .company-table tr {
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .company-table th {
    border-bottom: none;
    padding-bottom: 0.2rem;
    background: transparent;
  }

  .company-table td {
    padding-top: 0;
    background: transparent;
  }
}


/* ====== 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: #6c6c6c; font-weight: 700;
}
.contact-row{
  margin: 4px 0; color: #6c6c6c;
}
.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;
  }
}