@charset "UTF-8";

/* ==========================================
   デザイン変数（カラー・フォント）の設定
   ========================================== */
:root {
  /* カラー定義 */
  --color-primary: #1e50a2;      /* コーポレートカラー（瑠璃色） */
  --color-bg-dark: #0b132b;      /* ディープブルー（背景・濃いベース色） */
  
  /* 本文テキストカラー */
  --color-text-main: #0b132b;                   /* 本文色（100%） */
  --color-text-sub: rgba(11, 19, 43, 0.85);     /* 本文色（85%） */

  /* 白抜きテキストカラー */
  --color-white: #ffffff;                       /* 白（100%） */
  --color-white-sub: rgba(255, 255, 255, 0.80); /* 白（80%） */

  /* ==========================================================================
     フォント定義
     ========================================================================== */
  --font-avenir-light: "avenir-lt-pro", "Avenir LT Pro 35 Light", "Avenir", sans-serif;
  --font-avenir-medium: "avenir-lt-pro", "Avenir LT Pro 65 Medium", "Avenir", sans-serif;
  --font-typos: sicprintempspetit, sans-serif; /* Adobe Fontsからコピーした指定名 */

  /* 基本フォント設定 */
  --font-main: "Noto Sans JP", var(--font-avenir-light);
  --font-heading: var(--font-typos), var(--font-avenir-light), "Noto Sans JP", sans-serif;
}

/* ==========================================
   共通レイアウト設定（カンプ仕様：全幅1440px / コンテンツ幅1000px）
   ========================================== */

/* 全セクション共通のインナー（幅1000px中央揃え） */
.about-inner,
.service-inner,
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

/* ※Company（会社概要）のみ、カンプ画像上で表組みが少し中央に小さくキュッと収まっていたため、
   現在 680px に設定しています。もし他のセクション同様に1000pxいっぱいに広げたい場合は
   .company-inner { max-width: 1000px; } に変更可能です。 */


/* ==========================================
   リセットCSS & ベーススタイル
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: var(--color-white);
  font-family: var(--font-main);
  font-weight: 400; /* Lightスタイル */
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================
   追従ヘッダー
   ========================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-primary); /* コーポレートカラー（瑠璃色）ベタ塗り */
  backdrop-filter: blur(8px);               /* 背景ボカシ */
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* スクロール時にJSで「is-show」クラスを付与してフワッと出す */
.site-header.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo img {
  height: 44px;
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.header-tel {
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.35;            /* 上下の行間をギュッと詰める */
  display: block;               /* ブロック要素にして2行化をスムーズに */
  text-align: right;            /* 右寄せで綺麗に揃える */
}

.header-tel i {
  font-size: 0.8em; /* 電話マークのサイズを80%に縮小 */
}

.header-tel-time {
  display: block;               /* 必ず改行させる */
  font-family: var(--font-typos);
font-weight: 600;
font-style: normal;
  font-size: 0.75rem;           /* 小さめサイズ */
  color: var(--color-white-sub);/* やや薄めの白 */
}

.header-btn {
  background-color: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

/* スマホ用電話アイコン（PCでは非表示） */
.header-tel-icon {
  display: none;
}

.header-btn:hover {
  opacity: 0.85;
}

/* ==========================================
   FV（ファーストビュー）
   ========================================== */
.fv {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 画面全体の高さを確保 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  background-color: var(--color-primary); /* コーポレートカラー（瑠璃色）ベタ塗り */
}

.fv-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;            /* ★追加 */
  flex-direction: column;   /* ★追加（要素を縦並びに） */
  align-items: center;      /* ★追加（中央揃え） */
}

.fv-logo {
  margin-bottom: 80px;
}

.fv-logo img {
  width: 800px;
  max-width: 100%;
  height: auto;
}

.fv-copy {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 2; /* 行間を一括でコントロール */
  letter-spacing: 0.15em;
  margin-bottom: 50px;
  /* display: flex; や gap: 10px; は削除します */
}

.fv-text {
  color: var(--color-white-sub);
  font-family: var(--font-heading); /* 見出し用フォント */
  font-size: 1.26rem;
  font-weight: 400; /* Reguler */
  letter-spacing: 0.1em;
}

/* PCではスマホ用の改行を非表示にする */
.sp-only {
  display: none;
}

/* PC用改行（デフォルトで有効） */
.pc-only {
  display: inline;
}

/* レスポンシブ調整 (スマホ表示) */
@media (max-width: 768px) {
  .header-inner {
    padding: 12px 20px;
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 10px; /* ボタン同士の余白 */
  }

  /* スマホの追従ヘッダーロゴサイズ */
  .header-logo img {
    height: 32px; /* お好みの高さに調整してください（例: 30px〜36pxなど） */
  }
  
  .header-tel {
    display: none;
  }

  /* お問い合わせボタン（スマホ時の高さ・余白を固定） */
  .header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;         /* 高さを38pxに固定 */
    padding: 0 16px;      /* 上下パディングを0にして高さ固定に任せる */
    font-size: 0.85rem;
  }

  /* スマホ用電話アイコンボタン（高さ38px×幅38pxの正方形） */
  .header-tel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;          /* 高さと同数値で完全な正方形 */
    height: 38px;
    border: 1px solid var(--color-white);
    border-radius: 4px;
    color: var(--color-white);
    font-size: 0.9rem;
    box-sizing: border-box;
  }

  /* スマホ表示のときだけスマホ用改行タグを有効化 */
  .sp-only {
    display: inline;
  }

  /* スマホ表示のときはPC用改行タグを非表示にする */
  .pc-only {
    display: none;
  }

  /* スマホでのFVエリアの上下余白（最上部と最下部のあき） */
  .fv {
    padding-top: 110px;    /* ①「画面最上部〜ロゴマーク」の余白 */
    padding-bottom: 20px;  /* ④「サブテキスト〜画面最下部」の余白 */
    align-items: flex-start; /* 余白変更を確実に画面へ反映させるための指定 */
  }

  .fv-inner {
    gap: 0; /* 個別余白（margin）を優先させるためクリア */
  }

  /* ① ロゴマークエリア */
  .fv-logo {
    width: 100vw;               /* 画面の横幅いっぱいに指定 */
    margin-left: calc(50% - 50vw) !important; /* 親要素の余白を無視して画面左端まで引き延ばす */
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 60px !important; /* 下の要素（テキスト）との間隔 */
  }

  .fv-logo img {
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
  }

  /* ② キャッチコピー（移動を、もっと上質に。〜） */
  .fv-copy {
    font-size: 1.8rem;
    text-align: center;
  font-feature-settings: "palt"; /* イラレのプロポーショナルメトリクス（自動カーニング）と同等 */
    margin-bottom: 50px; /* ③「移動をもっと〜〜〜〜」の余白 */
  }

  /* ③ サブテキスト（お客様の〜〜〜〜） */
  .fv-text {
    font-size: 0.95rem;
    text-align: center;
  font-feature-settings: "palt"; /* イラレのプロポーショナルメトリクス（自動カーニング）と同等 */
    line-height: 1.8;
  }
}

/* ==========================================
   2. About FH セクション
   ========================================== */
.about {
  background-color: #ffffff; /* 背景白 */
  padding: 120px 20px;
  color: var(--color-text-sub); /* 本文色 85% */
}

.about-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* ヘッダータイトル */
.about-header {
  text-align: center;
  margin-bottom: 30px;
}

.about-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary); /* #1e50a2 */
}

.about-title .en {
  font-family: var(--font-avenir-light);
  font-weight: 300;
  font-size: 1.375rem;
}

.about-title .jp {
  font-family: var(--font-typos);
  font-weight: 600;
  font-style: normal;
}

.about-arc {
  margin-top: 2px;
  text-align: center;
}

.about-arc img {
  width: 320px;
  height: auto;
}

/* キャッチコピー */
.about-catch {
  text-align: center;
  font-family: var(--font-typos);
font-weight: 600;
font-style: normal;
  font-size: 2rem;
  line-height: 2;
  color: var(--color-text-sub);
  margin-bottom: 80px;
  letter-spacing: -0.02em; /* 字間を詰める（通常は 0.05em〜0.1em 等。マイナス値や 0 にすると詰まります） */
    font-feature-settings: "palt"; /* 括弧「」や（）などの余白を自動で自然に詰める設定 */
}

/* 部分的に文字サイズを少し小さくする指定 */
.text-small {
  font-size: 0.7em; /* 周囲の文字サイズの70%に縮小 */
  font-weight: normal;
}

/* コンテンツ（画像レイアウト & テキスト：天揃え ＆ 左右中央寄せ） */
.about-content {
  display: flex;
  justify-content: center; /* かたまり全体を中央に寄せる */
  align-items: flex-start;  /* 写真と文章の上を揃える（天揃え） */
  gap: 80px;               /* 写真と文章の間隔を程よく調整 */
}

/* 画像エリア（1枚化に伴うサイズ固定） */
.about-images {
  width: 360px; /* カンプの比率に合わせた幅設定 */
  flex-shrink: 0;
  margin-top: 8px; /* ★ここを追加（PCで少し下に下げる） */
}

.about-img {
  width: 100%;
  border-radius: 16px; /* PC角丸 16px */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 19, 43, 0.06);
}

.about-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 本文テキスト */
.about-text {
  width: auto; /* カンプの文字組みに合わせた幅設定 */
  font-family: var(--font-main); /* Noto Sans JP Light */
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--color-text-sub);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* レスポンシブ調整 (スマホ表示) */
@media (max-width: 768px) {
  .about {
    padding: 80px 20px;
  }

  .about-title .en,
  .about-title .jp {
    font-size: 1rem;
  }

  .about-arc img {
    width: 200px;
    display: block;
    margin: 0 auto;
  }

  .about-catch {
    font-size: 1.25rem;
    margin-bottom: 50px;
    text-align: center;
  }

  .about-content {
    flex-direction: column;
    gap: 40px;
  }

  /* --- 1. Aboutセクション タイトルサイズ追加 --- */
  .about-title .en,
  .about-title .jp {
    font-size: 1rem;
  }


  /* 本文（上） */
  .about-text {
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.9;
    order: 1;
    text-align: justify;
    text-justify: inter-ideograph; /* 日本語テキストの均等配置 */
  }
  .about-text br {
    display: none;
  }

  /* 写真（下）：service同様に100%全幅で表示 */
  .about-images {
    width: 100%;
    order: 2;
    margin-top: 0 !important; /* ★ 16px から 0 !important に変更 */
  }

  .about-img {
    width: 100%; /* 横幅いっぱいに表示 */
    border-radius: 12px;
  }
}

/* ==========================================
   3. Service セクション
   ========================================== */
.service {
  background-color: #f2f7fb; /* 背景色 */
  padding: 120px 20px;
  color: var(--color-text-sub);
}

.service-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* ヘッダー */
.service-header {
  text-align: center;
  margin-bottom: 30px;
}

.service-title {
  font-family: var(--font-avenir-light);
  font-weight: 300;
  font-size: 1.375rem;
  color: var(--color-primary);
  letter-spacing: 0.1em;
}

.service-arc {
  margin-top: 2px;
  text-align: center;
}

.service-arc img {
  width: 320px;
  height: auto;
}

/* リード文 */
.service-lead {
  text-align: center;
  margin-bottom: 80px;
}

.service-catch {
  font-family: var(--font-typos);
font-weight: 600;
font-style: normal;
  font-size: 2rem;
  color: var(--color-text-sub);
  margin-bottom: 24px;
}

.service-subtext {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text-sub);
}

/* サービスアイテムリスト */
.service-list {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.service-item {
  display: flex;
  align-items: flex-start; /* 上揃え（天揃え） */
  justify-content: center; /* 左右中央寄せ */
  gap: 60px;
}

/* 偶数番目（02, 04）は画像とテキストの位置を左右反転 */
.service-item.is-reverse {
  flex-direction: row-reverse;
}

/* 画像エリア */
.service-img {
  width: 48%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(11, 19, 43, 0.05);
  margin-top: 16px; /* ★ここを追加（お好みで 6px〜12px 等で微調整可能です） */
}

/* 01の写真エリア・本文・余白調整 */
.service-item:nth-child(1) {
  gap: 60px; /* ★写真と本文の間隔（お好みで調整） */
}

.service-item:nth-child(1) .service-img {
  width: 320px; /* ★01の写真幅 */
  flex-shrink: 0;
}

.service-item:nth-child(1) .service-body {
  width: 440px; /* ★01の本文幅 */
}

/* 02の写真エリア・本文・余白調整 */
.service-item.is-reverse {
  gap: 50px; /* ★02の写真と本文の間隔（お好みで調整） */
}

.service-item.is-reverse .service-img {
  width: 300px; /* ★02の写真幅 */
  margin-right: 0;
  flex-shrink: 0;
}

.service-item.is-reverse .service-body {
  width: 460px; /* ★02の本文幅 */
}

.service-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストエリア */
.service-body {
  width: 46%;
}

.service-item-title {
  display: flex;
  align-items: center; /* 天地中央で数字とタイトル文字の高さを美しく揃える */
  gap: 16px;
  margin-bottom: 24px;
}

/* 数字部分：Avenir Light / 瑠璃色 */
.service-item-title .num {
  font-family: var(--font-avenir-light);
  font-weight: 300;
  font-size: 2.2rem;
  color: var(--color-primary);
}

/* Service 日本語タイトル名：SicプランタンPetit */
.service-item-title .name {
  font-family: var(--font-typos);
  font-weight: 600;
  font-style: normal;
  font-size: 1.6rem;
  color: var(--color-primary);
}

/* 小見出し：Noto Sans JP Medium (500) / 瑠璃色 */
.service-sub-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500; /* Medium */
  font-size: 1.05rem;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.service-sub-block {
  margin-bottom: 20px;
}

.service-sub-block:last-child {
  margin-bottom: 0;
}

.service-sub-block p,
.service-desc {
  font-family: var(--font-main);
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* レスポンシブ調整 (スマホ表示) */
@media (max-width: 768px) {
  .service {
    padding: 80px 20px;
  }

  .service-lead {
    margin-bottom: 60px;
  }


  /* --- 2. Serviceセクション タイトル＆アーク画像設定を追加 --- */
  .service-header {
    margin-bottom: 20px;
  }

  .service-title {
    font-size: 1rem; /* About側とサイズを揃える */
  }

  .service-arc img {
    width: 200px; /* アーク画像のサイズ指定 */
    display: block;
    margin: 0 auto;
  }

  .service-catch {
    font-size: 1.25rem;
    margin-bottom: 50px;
  }

  /* 説明本文：両端揃え（テキストの左右の端を綺麗に揃える） */
  .service-subtext {
    text-align: justify;
    text-justify: inter-ideograph; /* 日本語テキストの均等配置 */
  }

  .service-subtext br {
    display: none;
  }

  .service-list {
    gap: 60px;
  }

  /* 01・02共通：カード全体をFlexで「縦並び・文章を上」に固定する */
  .service-item,
  .service-item.is-reverse {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 文章部分を上に配置（余白は下につける） */
  .service-body,
  .service-item:nth-child(1) .service-body,
  .service-item.is-reverse .service-body {
    width: 100% !important;
    order: 1 !important;
    margin-bottom: 0px !important; /* ★文章から写真までの距離をここで一括固定 */
  }

  /* 画像部分を下に配置 */
  .service-img,
  .service-item:nth-child(1) .service-img,
  .service-item.is-reverse .service-img {
    width: 100% !important;
    order: 2 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 12px;
  }

  .service-item-title .num {
    font-size: 1.8rem;
  }

  .service-item-title .name {
    font-size: 1.35rem;
  }
}

/* ==========================================
   4. Company（会社概要）セクション
   ========================================== */
.company {
  background-color: #ffffff; /* 背景白 */
  padding: 120px 20px;
  color: var(--color-text-sub); /* 本文 85% Color */
}

.company-inner {
  max-width: 500px; /* カンプに合わせた幅狭レイアウト */
  margin: 0 auto;
}

/* ヘッダー */
.company-header {
  text-align: center;
  margin-bottom: 30px;
}

.company-title-en {
  font-family: var(--font-avenir-light);
  font-weight: 300;
  font-size: 1.375rem;
  color: var(--color-primary);
  letter-spacing: 0.1em;
}

.company-arc {
  margin-top: 2px;
  margin-bottom: 24px;
  text-align: center;
}

.company-arc img {
  width: 320px;
  height: auto;
}

.company-title-jp {
  font-family: var(--font-typos);
  font-weight: 600;
  font-style: normal;
  font-size: 1.75rem;
}

/* 会社概要リスト（定義リスト構造） */
.company-table {
  border-top: 1px solid #e2e8f0; /* 罫線 #e2e8f0 1px */
  width: 100%;
}

.company-row {
  display: flex;
  align-items: center;
  padding: 20px 8px;
  border-bottom: 1px solid #e2e8f0; /* 罫線 #e2e8f0 1px */
}

.company-table dt {
  width: 160px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-sub);
  flex-shrink: 0;
}

.company-table dd {
  font-size: 0.95rem;
  color: var(--color-text-sub); /* 基本本文は85% */
  margin: 0;
}

/* URLのみ青100% (var(--color-primary)) */
.company-link {
  color: var(--color-primary);
  text-decoration: none;
}

.company-link:hover {
  text-decoration: underline;
}

/* レスポンシブ調整 (スマホ表示) */
@media (max-width: 768px) {
  .company {
    padding: 80px 20px;
  }

  /* --- Companyセクション タイトル＆アーク画像設定 --- */
  .company-header {
    margin-bottom: 20px;
  }

  .company-title-en {
    font-size: 1rem !important;
  }

  .company-arc img {
    width: 200px; /* アーク画像のサイズ指定 */
    display: block;
    margin: 0 auto;
  }

  .company-title-jp {
    font-size: 1.35rem;
    margin-bottom: 40px;
  }

  .company-row {
    padding: 16px 4px;
  }

  .company-table dt {
    width: 100px; /* スマホでは見出し幅を少し短縮 */
    font-size: 0.9rem;
  }

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

/* ==========================================
   関連会社セクション
   ========================================== */
.related-companies {
  background-color: #ffffff; /* 背景白 */
  padding: 10px 20px; /* ★左右に20pxのパディングを設定（スマホの端切れ防止） */
}

.related-inner {
  max-width: 500px;
  margin: 0 auto;
}

/* タイトル */
.related-main-title {
  text-align: center;
  font-family: var(--font-typos);
font-weight: 600;
font-style: normal;
  font-size: 1.75rem;
  color: var(--color-text-sub);
  margin-bottom: 30px;
}

/* リスト・枠線設定 */
.related-item {
  border-top: 1px solid #e2e8f0; /* 会社概要の罫線と同一 */
  padding-top: 18px;
  margin-bottom: 70px;
}

/* 会社名（レギュラー・中央揃え） */
.related-company-name {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-sub);
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0; /* 会社概要の罫線と同一 */
  margin-bottom: 16px;
}

/* 本文エリア（ライト） */
.related-content {
  font-weight: 300;
  color: #1a2536;
  line-height: 1.8;
}

.related-established {
  margin-bottom: 6px;
}

.related-description {
  margin-bottom: 20px;
}

/* moreボタンエリア */
.related-more-wrap {
  display: flex;
  justify-content: flex-end;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid #1a2536;
  border-radius: 6px;
  color: #1a2536;
  text-decoration: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.btn-more:hover {
  opacity: 0.7;
}

/* 「more」フォント指定（Avenir Light） */
.more-text {
  font-family: var(--font-avenir-light);
  font-weight: 300;
  font-size: 1rem;
}

/* Font Awesome アイコン */
.btn-more i {
  font-size: 0.9rem;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .related-companies {
    padding: 40px 20px; /* ★スマホ時も左右20pxを維持 */
  }

  .related-main-title {
    font-size: 1.35rem;
    margin-bottom: 40px;
  }

  .related-company-name {
    font-size: 1.1rem;
  }
}

/* ==========================================
   5. Footer（お問い合わせ・フッター）
   ========================================== */
.footer {
  background-color: var(--color-primary); /* 瑠璃色背景 */
  padding: 60px 20px 40px;
  color: rgba(255, 255, 255, 0.85); /* 基本テキスト 白 85% */
  text-align: center;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* タイトル */
.footer-title {
  font-family: var(--font-typos);
font-weight: 600;
font-style: normal;
  font-size: 1.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

/* 説明文 */
.footer-desc {
  font-family: var(--font-main);
  font-size: 0.95rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 50px;
}

/* アクションエリア (PC: 横並び) */
.footer-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 80px;
}

/* 電話番号エリア */
.footer-tel-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: default; /* PCではカーソルを標準に */
  pointer-events: none; /* PCではクリック無効 */
}

/* TEL番号：Avenir Book */
.footer-tel-num {
  font-family: var(--font-avenir-medium);
  font-weight: 650; /* Avenir Medium 用のウェイト指定（600〜650） */
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* 受付時間：Noto Sans JP Light (300) */
.footer-tel-time {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300; /* Light */
  font-size: 1.2rem;
  margin-top: 0px;
  letter-spacing: 0.05em;
}

/* お問い合わせボタン */
.footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.85); /* 1px 白 85% */
  border-radius: 4px; /* 角丸 4px */
  color: rgba(255, 255, 255, 0.85);
 font-family: var(--font-typos);
font-weight: 600;
font-style: normal;
  font-size: 1.2rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* コピーライト：白 60% */
.footer-copyright small {
  font-family: var(--font-avenir-light);
  font-weight: 300;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
}

/* レスポンシブ調整 (スマホ表示) */
@media (max-width: 768px) {
  .footer {
    padding: 70px 20px 30px;
  }

  .footer-title {
    font-size: 1.35rem;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .footer-desc {
    font-size: 0.88rem;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: left; /* スマホでは読みやすく左揃え気味に */
  }

  .footer-desc br {
    display: none;
  }

  /* スマホは縦並び */
  .footer-action {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
  }

  /* スマホでの電話ボックス（枠線付きボタン風） */
  .footer-tel-box {
    width: 100%;
    max-width: 320px;
    padding: 14px 10px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto; /* スマホではタップ（電話発信）有効化 */
    transition: background-color 0.3s ease;
  }

  .footer-tel-box:active {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .footer-tel-num {
    font-size: 1.45rem;
  }

  /* スマホでのお問い合わせボタン */
  .footer-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    font-size: 1.25rem;
  }
}

/* ==========================================
   6. 下層ページ共通・お問い合わせフォーム（contact.html / thanks.html）
   ========================================== */
.sub-page {
  background-color: #ffffff;
  min-height: 100vh; /* 画面の高さを最低100%確保 */
  color: var(--color-text-sub);
  display: flex;
  flex-direction: column; /* 縦並びに配置 */
}

/* お問い合わせページ専用ヘッダー */
.sub-header {
  width: 100%;
  height: 80px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
}

.sub-header-inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
}

.sub-header-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.sub-page-inner {
  max-width: 800px;
  width: 100%; /* 横幅の余白崩れ防止 */
  margin: 0 auto;
  padding: 60px 20px 80px;
  flex: 1; /* ★ここがポイント！余った縦方向の空間をメインエリアが自動で埋める */
}

.sub-page-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-primary);
  text-align: left;
  margin-bottom: 20px;
}

.title-divider {
  width: 100%;
  height: 1px;
  background-color: #e2e8f0;
  margin: 0 0 30px;
}

.sub-page-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin-bottom: 40px;
  text-align: left;
}

/* --- フォームレイアウト（2列グリッド設定） --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

/* 全幅で表示する項目用 */
.form-group-full {
  grid-column: span 2;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-sub);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-label .badge-required {
  background-color: #e53e3e;
  color: #ffffff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 400;
}

/* 姓/名・セイ/メイ用のサブレイアウト */
.form-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-sub-item {
  display: flex;
  flex-direction: column;
}

.form-sub-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-sub);
  margin-bottom: 6px;
}

/* 入力フィールド */
.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background-color: #ffffff;
  color: var(--color-text-main);
  font-size: 0.95rem;
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
}

.form-textarea {
  min-height: 180px;
  resize: vertical;
}

/* ボタンエリア */
.form-btn-group {
  margin-top: 100px;
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;
  gap: 20px;
}

.form-submit-btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 14px 64px;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.form-submit-btn:hover {
  opacity: 0.85;
}

/* 戻るリンク */
.form-back-btn {
  color: var(--color-text-sub);
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.3s ease;
}

.form-back-btn:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* お問い合わせページ専用フッター (高さ40px) */
.sub-footer {
  width: 100%;
  height: 40px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto; /* 万が一のための自動押し下げ */
}

.sub-footer-copyright small {
  font-family: var(--font-avenir-light);
  font-weight: 300;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
}

/* レスポンシブ調整 (スマホ表示) */
@media (max-width: 768px) {
  .sub-header {
    height: 60px;
  }

  .sub-header-inner {
    padding: 0 20px;
  }

  .sub-page-title {
  font-size: 1.3rem;
}

  .sub-header-logo img {
    height: 32px;
  }

  .sub-page-inner {
    padding: 30px 20px 60px;
  }

  .form-btn-group {
    margin-top: 40px; /* スマホでは元の40pxを維持 */
  }
  
  /* スマホは縦1列に落とし込む（姓・名などのセットは横並びを維持） */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .form-group-full {
    grid-column: span 1;
  }

  .form-submit-btn {
    width: 100%;
  }
}