@charset "utf-8";

/* CSS共通変数（Variables）
---------------------------------------------------------------------------*/
:root {
  /* カラーパレット */
  --bg-main: #FBF7F4;           /* ベース背景 */
  --bg-card-white: #FFFFFF;     /* カード背景（白） */
  --bg-card-beige: #F1EFE3;     /* カード背景（ベージュ） */
  --bg-dark: #31322D;           /* 一部ダーク背景 */

  --color-primary: #A58A6D;     /* 黄土色 */
  --color-secondary: #9A876F;   /* ベージュ・サブアクセント */
  --color-accent-pink: #E6003A; /* LICピンク */
  
  --text-main: #000000;         /* メイン文字色 */
  --text-white: #FFFFFF;        /* 暗色背景用文字色 */
  --text-sub: #9A876F;          /* 補足・サブ文字色 */
  --text-sub-light: #F1EFE3;    /* 補足・薄色 */

  /* フォント */
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
}

/* タイトル・見出し用 serif クラス例 */
.font-serif {
  font-family: var(--font-serif);
}




/* 共通セクション（H2セクション）
---------------------------------------------------------------------------*/
.sec-header {
  position: relative;
  padding-left: 1.25rem; /* 縦ライン用の左余白 (20px) */
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* 左側のアクセント縦ライン */
.sec-header::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 3px;
  height: calc(100% - 8px);
  background-color: var(--color-primary); /* 黄土色 #A58A6D */
  border-radius: 2px;
}

.sec-en {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* 12px〜14px */
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.sec-title {
  color: var(--text-main);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); /* 22px〜32px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

/* 共通コンテナ */
.kyouiku-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

/* ページの全要素のサイズ計算を border-box に統一
   必要に応じて活性させる
 */
/* body.page-template-page-kyouiku *,
body.page-template-page-kyouiku *::before,
body.page-template-page-kyouiku *::after {
  box-sizing: border-box;
} */

.pc-only {
  display: inline;
}

.tb-only {
  display: none;
}

.sp-only {
  display: none;
}




/* パッチ（横スクロール防止・横幅表示補正）
---------------------------------------------------------------------------*/
html,
body.page-template-page-kyouiku {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}




/* フッター上書き
---------------------------------------------------------------------------*/
/* STG */
/* .page-id-2340 footer {
  background: var(--bg-card-beige);
}

.page-id-2340 footer,
.page-id-2340 .l-footer,
.page-id-2340 .l-footer-career {
  padding-bottom: 0 !important;
}

.page-id-2340 .l-footer-career__copyright,
.page-id-2340 footer .copyright,
.page-id-2340 .p-footer-copyright {
  padding-bottom: clamp(80px, 60px + 3vw, 100px) !important;
} */

/* PROD*/
.page-id-2319 footer {
  background: var(--bg-card-beige);
}

.page-id-2319 footer,
.page-id-2319 .l-footer,
.page-id-2319 .l-footer-career {
  padding-bottom: 0 !important;
}

.page-id-2319 .l-footer-career__copyright,
.page-id-2319 footer .copyright,
.page-id-2319 .p-footer-copyright {
  padding-bottom: clamp(80px, 60px + 3vw, 100px) !important;
}




/* First View
---------------------------------------------------------------------------*/
.fv-section {
  position: relative;
  width: 100%;
  /* 最小 520px 〜 推奨 calc 〜 最大 680px */
  height: clamp(520px, 50vh + 200px, 680px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 背景画像設定 */
.fv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.fv-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}

/* 安全領域（コンテナ） */
.fv-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

.fv-content {
  max-width: 540px;
}

/* タイトル */
.fv-title {
  color: var(--color-accent-pink);
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

/* キャッチコピー */
.fv-catch {
  color: var(--text-main);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

/* ボタンデザイン */
.fv-btn-wrapper {
  display: inline-block;
}

.fv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: fit-content;
  background-color: var(--bg-card-white);
  color: var(--text-main);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  padding: clamp(0.875rem, 0.8rem + 0.3vw, 1rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.fv-btn-arrow {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.fv-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}




/* CONCEPT
---------------------------------------------------------------------------*/
.concept-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main); /* #FBF7F4 */
}

.concept-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
}

.concept-content {
  flex: 1;
}

.concept-sub-title {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); /* 18px〜24px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-accent-pink);
  margin-bottom: clamp(0.25rem, 0.8rem + 0.8vw, 1rem);
}

/* サブテキスト */
.concept-lead-sub {
  font-size: clamp(0.8rem, 0.675rem + 0.3vw, 1rem); /* 12.8px〜16px */
  letter-spacing: 0.05em;
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.concept-desc {
  font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem); /* 15px〜16px */
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: #333333;
}

.concept-image {
  flex: 1;
  width: 100%;
}

.concept-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}




/* SYSTEM
---------------------------------------------------------------------------*/
.system-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.system-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

/* 共通単体ステップ */
.system-step {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1rem);
  padding: 16px 24px;
}

/* 黒/ダークグレー背景 */
.system-step--dark {
  background-color: var(--bg-dark); /* #31322D */
  color: var(--text-white);
  width: clamp(280px, 90%, 480px);
  box-sizing: border-box;
}

/* ベージュ背景 */
.system-step--beige {
  background-color: var(--bg-card-beige); /* #F1EFE3 */
  color: var(--text-main);
  width: clamp(280px, 90%, 480px);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  letter-spacing: 0.05em;
  box-sizing: border-box;
}

/* 下向き矢印 */
.system-arrow {
  position: relative;
  width: 2px;
  height: 32px;
  background-color: var(--color-primary); /* 黄土色 #A58A6D */
  margin: 8px 0;
}

.system-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 5px 0 5px;
  border-style: solid;
  border-color: var(--color-primary) transparent transparent transparent;
}

/* 枠組み（大きなベージュブロック） */
.system-box {
  width: 100%;
  background-color: var(--bg-card-beige);
  border-radius: 6px;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  box-sizing: border-box;
  text-align: center;
}

.system-box-title {
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1rem);
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--text-main);
}

/* 内側 3列カードグリッド */
.system-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.system-card {
  background-color: var(--bg-card-white);
  color: var(--text-main);
  padding: 18px 12px;
  border-radius: 4px;
  text-align: left;
  /* font-size: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem);
  font-weight: 500; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

/* 幅広ダークグレーブロック */
.system-step--dark-wide {
  background-color: var(--bg-dark);
  color: var(--text-white);
  width: clamp(280px, 90%, 480px);
  box-sizing: border-box;
}

.system-card-title {
  display: block;
  font-size: clamp(0.9375rem, 0.875rem + 0.2vw, 1rem);
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bg-card-beige);
}

.system-card-desc {
  font-size: clamp(0.8125rem, 0.775rem + 0.1vw, 0.875rem);
  line-height: 1.6;
  color: #444444;
  margin: 0;
}

/* 中央配置の東京都事業リンク */
.system-notice-link-wrapper {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.system-notice-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
  font-weight: 500;
  color: var(--color-primary); /* 黄土色 #A58A6D */
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}

.system-notice-link:hover {
  opacity: 0.75;
}

.system-notice-link i {
  font-size: 0.85em;
  text-decoration: none;
  display: inline-block;
}

/* 体験・研修の対象者注釈ブロック */
.system-notice-box {
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
  background-color: var(--bg-main); /* #FBF7F4 */
  border-radius: 4px;
  max-width: 900px;
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem) clamp(1.75rem, 1.5rem + 1.75vw, 2.75rem);
}

.system-notice-title {
  font-size: clamp(1rem, 0.925rem + 0.3vw, 1.125rem);
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.system-notice-lead {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  line-height: 1.7;
  color: #333333;
  margin-bottom: 1rem;
}

.system-notice-lead strong {
  color: var(--color-primary);
}

.system-notice-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.system-notice-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  line-height: 1.6;
  color: #333333;
}

/* 先頭の「・」をカスタム */
.system-notice-list li::before {
  content: "•";
  position: absolute;
  left: 0.25rem;
  top: 0;
  color: var(--color-primary);
  font-weight: bold;
}

.system-notice-caution {
  font-size: clamp(0.8125rem, 0.775rem + 0.1vw, 0.875rem);
  font-weight: 500;
  color: #c53030;
  margin: 0;
}




/* MAP Leaflet.js
---------------------------------------------------------------------------*/
.map-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.map-wrapper {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-secondary);
}

/* 地図枠の高さ */
#station-map {
  width: 100%;
  height: clamp(500px, 65vh, 700px); /* レスポンシブで高さを可変 */
  z-index: 1; /* ヘッダー等と重ならないよう設定 */
}

/* ポップアップ（吹き出し）内のスタイル調整 */
.leaflet-popup-content-wrapper {
  border-radius: 6px;
  padding: 4px;
}

.map-popup-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--bg-card-beige);
  padding-bottom: 0.25rem;
}

.map-popup-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #333333;
  margin-bottom: 0.25rem;
}

.map-popup-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 4px 12px;
  background-color: var(--color-accent-pink); /* #E6003A */
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 3px;
  text-decoration: none;
  transition: opacity 0.3s;
}

.map-popup-btn:hover {
  opacity: 0.8;
}




/* LEARN
---------------------------------------------------------------------------*/
.learn-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.learn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2列配置 */
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);  /* カード間の余白 */
}

/* カード共通スタイル */
.learn-card {
  background-color: var(--bg-card-beige); /* #F1EFE3 */
  border-radius: 8px;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* アイコン表示枠 */
.learn-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
}

.learn-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

/* カード見出し */
.learn-card-title {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18px〜22px */
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.learn-num {
  font-weight: 500;
}

.learn-divider {
  color: #a0a0a0;
  font-weight: 300;
}

.learn-title {
  color: var(--color-accent-pink);
}

/* カード本文 */
.learn-card-desc {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem); /* 14px〜15px */
  line-height: 1.75;
  color: #333333;
}




/* PROGRAM
---------------------------------------------------------------------------*/
.program-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

/* タブ操作誘導リードテキスト */
.program-tab-instruction {
  font-size: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
  font-weight: 700;
  color: var(--color-primary); /* 黄土色 #A58A6D */
  margin-bottom: 0.75rem;
  text-align: center;
  letter-spacing: 0.03em;
}

/* タブボタンエリア */
.program-tabs-wrapper {
  width: 100%;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.program-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 上段：OPEN DAY ボタン */
.program-tabs-top {
  width: 100%;
}

.program-tabs-top .program-tab-btn {
  width: 100%;
}

/* 下段：4列ボタン */
.program-tabs-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.program-tabs-bottom .program-tab-btn {
  flex: 1;
}

.program-tab-btn {
  position: relative; /* 吹き出しの爪の起点 */
  flex: 1;
  padding: 14px 16px;
  box-sizing: border-box;
  background-color: var(--bg-card-white);
  border: 1px solid #333333;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  white-space: nowrap;
}

.program-tab-btn:hover {
  background-color: var(--bg-card-beige);
}

/* 選択中（アクティブ）タブ */
.program-tab-btn.is-active{
  background-color: var(--color-primary); /* #A58A6D */
  color: var(--text-white);
  border-color: var(--color-primary);
}

/* 選択中ボタンの下にコンテンツへ繋がる三角形（爪）を表示 */
.program-tab-btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 7px 0 7px;
  border-color: var(--color-primary) transparent transparent transparent;
}

/* パネル表示エリア */
.program-panel {
  display: none; /* 初期状態は非表示 */
}

.program-panel.is-active {
  display: block; /* アクティブのみ表示 */
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.program-panel-title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-main);
}

.program-panel-lead {
  font-size: clamp(0.9375rem, 0.875rem + 0.2vw, 1rem);
  color: var(--text-main);
  margin-bottom: 2rem;
}

/* 情報テーブル構造 */
.program-detail-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.program-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.program-label {
  width: 160px;
  min-width: 160px;
  background-color: var(--bg-card-beige); /* #F1EFE3 */
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
}

.program-val {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-main);
  padding: 8px 0;
}

.program-val p + p {
  margin-top: 8px;
}




/* FOR
---------------------------------------------------------------------------*/
.for-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.for-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);  /* カード間の隙間 */
}

/* カードスタイル */
.for-card {
  background-color: var(--bg-card-beige); /* #F1EFE3 */
  border-radius: 8px;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) clamp(1rem, 1rem + 0.25vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上揃えを保証 */
  align-items: flex-start;
}

/* アイコン設定 */
.for-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub); /* #9A876F */
}

.for-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* カードタイトル */
.for-card-title {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17px〜20px */
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 1.25rem;
  min-height: 3em; /* 2行分相当の高さを確保、本文の開始位置を揃える */
  display: flex;
  align-items: flex-start;
}

/* カード本文 */
.for-card-desc {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem); /* 14px〜15px */
  line-height: 1.8;
  color: #333333;
  margin: 0;
  word-break: auto-phrase;
}




/* FEATURE
---------------------------------------------------------------------------*/
.feature-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PCは 2列 */
  gap: clamp(2rem, 1.5rem + 2vw, 4rem) clamp(2.5rem, 2rem + 3vw, 5rem); /* 上下余白 左右余白 */
}

/* 各特徴アイテム */
.feature-item {
  /* padding-top: clamp(1.25rem, 1rem + 0.8vw, 2rem); */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 01〜04 ナンバリング */
.feature-num {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 28px〜36px */
  color: var(--color-primary); /* 黄土色 #A58A6D */
  line-height: 1;
  margin-bottom: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  font-weight: 400;
  /* 数字の下に幅100%の横線を配置 */
  width: 100%;
  border-bottom: 1px solid var(--color-secondary); /* 下の境界線 #9A876F */
  padding-bottom: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem); /* 数字と線の間隔 */
  margin-bottom: clamp(1.25rem, 1rem + 0.6vw, 1.75rem);   /* 線と見出しの間隔 */
}

/* アイテムタイトル */
.feature-item-title {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18px〜22px */
  font-weight: 700;
  color: var(--color-accent-pink);
  line-height: 1.4;
  margin-bottom: 0.875rem;
}

/* アイテム説明文 */
.feature-item-desc {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem); /* 14px〜15px */
  line-height: 1.8;
  color: #333333;
}




/* VOICE
---------------------------------------------------------------------------*/
.voice-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.voice-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  max-width: 1000px;
}

/* アイテム（丸画像＋テキスト） */
.voice-item {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}

/* 丸型アバター領域 */
.voice-avatar {
  width: clamp(70px, 60px + 2vw, 100px);  /* 70px〜100px 可変 */
  height: clamp(70px, 60px + 2vw, 100px);
  min-width: clamp(70px, 60px + 2vw, 100px);
  border-radius: 50%;
  overflow: hidden;
  background-color: #D9D9D9; /* 画像がない場合のグレー丸（プレースホルダー） */
}

.voice-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストエリア */
.voice-content {
  flex: 1;
}

.voice-text {
  font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem); /* 15px〜17px */
  line-height: 1.85;
  color: var(--text-main);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

/* 属性・属性プロフィール */
.voice-meta {
  font-size: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem); /* 13px〜14px */
  color: var(--color-primary); /* #A58A6D */
  font-weight: 500;
}




/* VOICE
---------------------------------------------------------------------------*/
.reason-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.reason-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  max-width: 1000px;
}

.reason-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}

/* 丸型アバター領域 */
.reason-avatar {
  width: clamp(70px, 60px + 2vw, 100px);
  height: clamp(70px, 60px + 2vw, 100px);
  min-width: clamp(70px, 60px + 2vw, 100px);
  border-radius: 50%;
  overflow: hidden;
  background-color: #D9D9D9;
}

.reason-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストコンテンツエリア */
.reason-content {
  flex: 1;
}

/* 黒沢さんの見出しキャッチ */
.reason-catch {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--color-accent-pink); /* #E6003A */
  line-height: 1.5;
  margin-bottom: 0.875rem;
}

/* 本文段落 */
.reason-text p {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem); /* 14px〜15px */
  line-height: 1.85;
  color: #333333;
  margin: 0 0 1rem 0;
}

.reason-text p:last-child {
  margin-bottom: 0;
}

/* 締めくくりのアクセント強調 */
.reason-text-highlight {
  font-weight: 700;
  color: var(--text-main);
}

/* 著者名 */
.reason-author {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  color: var(--color-primary); /* #A58A6D */
  font-weight: 700;
  margin-top: 1rem;
  text-align: right;
}




/* SCHEDULE
---------------------------------------------------------------------------*/
.schedule-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.schedule-block {
  margin-bottom: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

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

.schedule-flow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.flow-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
}

/* 黒丸ナンバリングアイコン */
.flow-num {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background-color: var(--color-primary); /* #A58A6D */
  color: var(--text-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 2px;
}

.flow-content {
  flex: 1;
}

.flow-title {
  font-size: clamp(1rem, 0.925rem + 0.3vw, 1.125rem);
  font-weight: 700;
  color: var(--color-accent-pink); /* #E6003A */
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.flow-desc {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  line-height: 1.7;
  color: #333333;
}

/* 注釈テキスト */
.flow-note {
  font-size: 0.8125rem;
  color: var(--color-primary); /* #A58A6D */
  margin-top: 0.35rem;
  font-weight: 500;
}

/* キャッチフレーズ */
.flow-catch {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 0.35rem;
}




/* FAQ
---------------------------------------------------------------------------*/
.faq-section {
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0;
  background-color: var(--bg-main);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column; /* PC版：上から下（左列Q1-Q3、右列Q4-Q6）に並べる設定 */
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(2.5rem, 2rem + 3vw, 5rem);
  padding-left: 1.25rem;
}

.faq-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 質問（Q1. 〜〜〜？） */
.faq-question {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); /* 17px〜20px */
  font-weight: 700;
  color: var(--color-primary); /* 黄土色 #A58A6D */
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

/* 回答（A. 〜〜〜） */
.faq-answer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; /* A. とテキストの間隔 */
  width: 100%;
}

.faq-a-label {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.85;
  flex-shrink: 0; /* A. が縦崩れ・改行しないよう固定 */
}

.faq-a-text {
  flex: 1;
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem);
  line-height: 1.85;
  color: #333333;
}

.faq-a-text p {
  margin: 0;
}




/* CONTACT CTA
---------------------------------------------------------------------------*/
.cta-section {
  position: relative;
  width: 100%;
  padding: clamp(4rem, 3rem + 5vw, 7.5rem) 0;
  overflow: hidden;
  color: #ffffff;
}

/* 背景画像 ＆ オーバーレイ */
.cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}

.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45); /* 画像上の暗めオーバーレイ */
}

.cta-container {
  position: relative;
  z-index: 2; /* テキスト類を前面に配置 */
}

.cta-content {
  max-width: 680px; /* テキストエリア幅を適度に制限 */
}

/* タイトル */
.cta-title {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem); /* 22px〜34px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
}

/* リード文 */
.cta-lead {
  font-size: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem); /* 14px〜15px */
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.03em;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

/* 白枠線ボタン */
.cta-btn-wrapper {
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100%, 320px);
  padding: 16px 24px;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 4px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-btn:hover {
  background-color: #ffffff;
  color: var(--text-main);
}

.cta-btn-arrow {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.cta-btn:hover .cta-btn-arrow {
  transform: translateX(4px);
}

/* 区切り線 ＆ 情報エリア */
.cta-info {
  border-top: 1px solid rgba(255, 255, 255, 0.5); /* 上部の白半透明境界線 */
  padding-top: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cta-info-item {
  font-size: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  letter-spacing: 0.03em;
}




/* 追従ボタン
---------------------------------------------------------------------------*/
.kyouiku-floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 990;
  /* ベージュ（#F1EFE3）の約30%透過背景 + すりガラス効果 */
  background-color: rgba(241, 239, 227, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 20px;
  box-sizing: border-box;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.kyouiku-floating-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ボタン本体（ヘッダー「KYOUIKU」と同じグラデーション） */
.kyouiku-floating-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(100%, 480px);
  padding: 14px 24px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #9A876F, #685b4b);
  color: #ffffff !important;
  font-size: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px; /* 角丸四角形 */
  box-shadow: 0 4px 12px rgba(104, 91, 75, 0.25);
  transition: all 0.3s ease;
}

.kyouiku-floating-cta__btn:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(104, 91, 75, 0.35);
}

.kyouiku-floating-cta__arrow {
  font-size: 1.1em;
  transition: transform 0.3s ease;
}

.kyouiku-floating-cta__btn:hover .kyouiku-floating-cta__arrow {
  transform: translateX(4px);
}




/* レスポンシブ対応 (TB版: 1024px以下)
---------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .pc-only {
    display: none;
  }

  .tb-only {
    display: inline;
  }

  .sp-only {
    display: none;
  }
}



/* レスポンシブ対応 (SP版: 768px以下)
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /* Variables */
  .pc-only {
    display: none;
  }

  .tb-only {
    display: none;
  }

  .sp-only {
    display: inline;
  }

  /* First View */
  .fv-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(251, 247, 244, 0.35);
  }

  .fv-btn-wrapper {
    width: 100%;
  }




  /* CONCEPT */
  .concept-body {
    flex-direction: column;
    gap: 2.5rem;
  }

  .concept-content,
  .concept-image {
    width: 100%;
  }




  /* SYSTEM */
  .system-card-grid {
    grid-template-columns: 1fr; /* スマホでは1列に縦積み */
    gap: 0.75rem;
  }
  
  .system-arrow {
    height: 24px;
    margin: 6px 0;
  }




  /* LEARN */
  .learn-grid {
    grid-template-columns: 1fr; /* スマホでは1列に縦積み */
  }




  /* LEARN */
  /* タブの横スクロール対応 */
  .program-tabs-wrapper {
    overflow-x: visible;
    padding-bottom: 0;
  }

  .program-tabs {
    gap: 8px;
  }

  .program-tabs-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホでは下段4つを2×2のグリッドで綺麗に配置 */
    gap: 8px;
  }

  .program-tab-btn {
    padding: 12px 8px;
    font-size: 0.8125rem;
  }

  /* テーブルのSPレイアウト（ラベルと値を縦積みに） */
  .program-row {
    flex-direction: column;
    gap: 6px;
  }

  .program-label {
    width: 100%;
    min-width: 100%;
    padding: 10px;
    justify-content: flex-start;
  }

  .program-val {
    padding: 4px 8px 12px;
  }




  /* FOR */
  .for-grid {
    grid-template-columns: 1fr; /* スマホでは1列に縦積み */
  }

  .for-card-title {
    min-height: auto;
  }




  /* FEATURE */
  .feature-grid {
    grid-template-columns: 1fr; /* スマホでは1列に縦積み */
    gap: 2.5rem;
  }




  /* VOICE */
  .voice-item {
    align-items: flex-start; /* スマホではアイコン上揃えに */
    gap: 1rem;
  }




  /* REASON */
  .reason-item {
    gap: 1rem;
  }



  /* SCHEDULE */
  /* スマホでのテーブル表示最適化 */
  .schedule-table th,
  .schedule-table td {
    padding: 12px 8px;
    font-size: 0.8125rem;
  }

  .flow-num {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.9375rem;
  }

  .flow-title {
    margin-top: 0.55rem;
  }




  /* FAQ */
  .faq-grid {
    grid-template-columns: 1fr; /* 1列に変更 */
    grid-template-rows: none;
    grid-auto-flow: row; /* SP版：HTML上の順番（Q1→Q2→Q3...）で上から順に並べる */
    gap: 2rem;
  }




  /* CONTACT CTA */
  .cta-content {
    max-width: 100%;
  }

  .cta-btn {
    width: 100%; /* スマホではボタン全幅 */
  }




  /* 追従ボタン */
  .kyouiku-floating-cta {
    padding: 10px 16px;
  }

  .kyouiku-floating-cta__btn {
    width: 100%;
    padding: 12px 16px;
  }
  
  /* ページ最下部フッターとの被りを考慮したコンテンツ底上げ */
  .kyouiku-page {
    padding-bottom: 70px;
  }
}