/* =============================================================
   Pema Sherpa Site - style.css

   レイアウト、共通パーツ、ページ固有の見た目、
   レスポンシブ調整をまとめたファイルです。
   base.css の後に読み込んでください。
   ============================================================= */


/* =============================================================
   3. レイアウト共通
   ============================================================= */

/* 中央寄せのコンテナ */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* セクション同士の間隔 */
.section {
  margin-top: var(--section-gap);
}
/* 同じ形のブロックが続くとき（Special Thanks など）の狭い間隔 */
.section--narrow {
  margin-top: var(--block-gap);
}

/* 区切り線（Figmaの 110px × 2px のライン） */
.divider {
  width: var(--divider-width);
  height: 2px;
  border: 0;
  margin: 0;
  background-color: var(--color-line);
}

/* --- 見出しブロック（区切り線 → 英語見出し → 日本語見出し） --- */
.section-head {
  display: flow-root;
}
.section-head__title {
  margin-top: 90px;
}
.section-head__en {
  display: block;
  color: var(--color-heading);
  font-size: 2.25rem;              /* 36px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.section-head__ja {
  display: block;
  color: var(--color-heading);
  font-size: 1rem;                 /* 16px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}

/* 下層ページの先頭見出し（ヘッダーぶんの余白を確保する） */
.section-head--page {
  padding-top: var(--header-space);
}

/* 写真の上に重ねる見出し（My Journey / Message） */
.section-head--on-photo .section-head__en,
.section-head--on-photo .section-head__ja {
  color: var(--color-light);
}

/* 中央寄せの見出し（FAQ） */
.section-head--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- リード文（20px の中太字） --- */
.lead {
  margin-top: var(--block-gap);
  font-size: 1.25rem;              /* 20px */
  font-weight: var(--weight-medium);
  line-height: var(--line-height-base);
}
.section-head + .lead {
  margin-top: 90px;
}
/* リード文のすぐ下に置くボタン（中央寄せ） */
.lead__button-wrapper {
  margin-top: 50px;
  text-align: center;
}

/* --- 全幅の写真帯 --- */
.band {
  position: relative;
  margin-top: var(--section-gap);
}
.band__image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
/* 写真の上に見出しを重ねるとき（My Journey / Message） */
.band--with-title .band__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
/* 親セクションがすでに余白を持っている場合に使う */
.band--flush {
  margin-top: 0;
}
.section-head--on-photo .section-head__title {
  margin-top: 0;
}


/* =============================================================
   4. 共通パーツ
   ============================================================= */

/* -------------------------------------------------------------
   4-1. ボタン（Figmaコンポーネント「Button」）

   Figmaのバリアントで指定されている色をそのまま使っています。
     通常   : 背景なし / 枠線 #5C4624 / 文字 #4B433B / 矢印 #5C4624
     ホバー : 背景 #5C4624 / 枠線 #5C4624 / 文字 #F7F4EE / 矢印 #F7F4EE
   PCはhover、スマホはactive（タップ）で「ホバー」の色に変わります。
   キーボード操作のときは focus-visible でも同じ色に変わります。
   ※ このボタンはスクロール追従しません（固定CTAは 4-5 の別コンポーネント）
   ------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                         /* 文字と矢印の間隔 */
  min-width: 139px;                 /* ラベルが短くてもFigmaと同じ幅を保つ */
  min-height: 36px;
  padding: 4px 20px;
  border: 1px solid var(--color-heading);
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.6;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.button__arrow {
  width: 4px;
  height: 8px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-heading);
  stroke-width: 1;
  transition: stroke 0.3s ease;
}

/* 「押した状態」の見た目をまとめたもの。
   ・マウスのある端末 … カーソルを乗せたとき（hover）
   ・スマホなど      … タップしている間（active）
   ・キーボード操作  … フォーカスが当たったとき（focus-visible）
   スマホで hover が押しっぱなしのまま残らないよう、hover は
   @media (hover: hover) でマウス環境だけに限定しています。 */
.button:active,
.button:focus-visible {
  background-color: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--color-light);
}
.button:active .button__arrow,
.button:focus-visible .button__arrow {
  stroke: var(--color-light);
}
@media (hover: hover) {
  .button:hover {
    background-color: var(--color-heading);
    border-color: var(--color-heading);
    color: var(--color-light);
  }
  .button:hover .button__arrow {
    stroke: var(--color-light);
  }
}

/* -------------------------------------------------------------
   4-2. ヘッダー
   ------------------------------------------------------------- */
.page-header {
  position: fixed;                 /* どこにいてもメニューに手が届くよう画面上部に固定 */
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  padding-block: 30px 16px;        /* Figmaの位置（上から30px）に合わせる */
  transition: transform 0.35s ease, background-color 0.3s ease, padding-block 0.3s ease;
}
/* 下方向にスクロールしている間は上へ隠し、読んでいるコンテンツに被らないようにする。
   少しでも上にスクロールすればすぐ戻ってきます（切り替えは nav.js が担当）。 */
.page-header--hidden {
  transform: translateY(-100%);
}
/* 少しスクロールしたら背景色を付けて、下の写真や文字と重なっても読めるようにする
   （切り替えは assets/js/nav.js が担当しています） */
.page-header--scrolled {
  padding-block: 12px;
  background-color: var(--color-bg);
}

/* Topページはヒーロー写真の上に載るため、スクロール前だけ明るい色にする */
.page-header--on-photo .page-header__logo {
  color: var(--color-light);
}
.page-header--on-photo .page-header__menu-icon {
  stroke: var(--color-light);
}
.page-header--on-photo.page-header--scrolled .page-header__logo {
  color: var(--color-heading);
}
.page-header--on-photo.page-header--scrolled .page-header__menu-icon {
  stroke: var(--color-heading);
}
.page-header__inner {
  display: flex;
  align-items: center;             /* ロゴ（2行）とハンバーガーの中心をそろえる */
  justify-content: space-between;
  gap: 20px;
}

.page-header__logo {
  color: var(--color-heading);
}
.page-header__logo-name {
  display: block;
  font-size: 1.25rem;              /* 20px */
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-spacing-logo);
  line-height: 1.6;
}
.page-header__logo-role {
  display: block;
  font-size: 0.875rem;             /* 14px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}

/* メニューボタン。ヘッダーごと固定されるので、単独での位置指定は不要です。
   右だけ8px分マイナス余白にして、タップ範囲の右端をヘッダーの右端に
   ぴったり合わせています（アイコン自体はボタンの中央にあります）。
   上下方向は .page-header__inner の align-items: center によって、
   2行のロゴと中心がそろうようになっています。 */
.page-header__menu-button {
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.page-header__menu-icon {
  width: 28px;
  height: 14px;
  stroke: var(--color-heading);
  stroke-width: 1;
}

/* -------------------------------------------------------------
   4-3. ドロワーメニュー（スマホ）
   ------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  background-color: var(--color-heading);
  color: var(--color-light);
  /* 閉じているときは画面の右外に待機し、開くと左へスライドして出てきます。
     閉じている間は inert 属性が付いているので、画面の外にあるリンクへ
     キーボードのフォーカスが移ることはありません（HTMLに初期値として書いてあります）。 */
  transform: translateX(100%);
  transition: transform 0.4s ease;
}
.drawer[data-open="true"] {
  transform: translateX(0);
}
/* inert に対応していないブラウザ向けの保険 */
.drawer[inert] {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .page-header {
    transition: none;
  }
}
.drawer__close {
  position: absolute;
  top: 30px;
  right: 26px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.drawer__close-icon {
  width: 28px;
  height: 14px;
  stroke: var(--color-light);
  stroke-width: 1;
}
.drawer__nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.drawer__link {
  font-size: 1.5rem;               /* 24px */
  line-height: 1.6;
}
.drawer__sns {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 1.25rem;              /* 20px */
}
.drawer__sns-icon {
  width: 20px;
  height: 20px;
  fill: var(--color-light);
}

/* ドロワーを開いている間は背面をスクロールさせない */
body[data-drawer-open="true"] {
  overflow: hidden;
}

/* -------------------------------------------------------------
   4-4. フッター
   ------------------------------------------------------------- */
.page-footer {
  margin-top: var(--section-gap);
}
.page-footer__nav {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 444px;
  padding: 60px 0;
  overflow: hidden;
}
.page-footer__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-footer__nav-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.page-footer__nav-link {
  color: var(--color-light);
  font-size: 1.5rem;               /* 24px */
  line-height: 1.6;
}
.page-footer__nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.page-footer__info {
  padding-block: 60px 40px;
  color: var(--color-heading);
}
.page-footer__info-inner {
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.page-footer__logo-name {
  display: block;
  font-size: 1rem;                 /* 16px */
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-spacing-logo);
  line-height: 1.6;
}
.page-footer__logo-role {
  display: block;
  font-size: 0.75rem;              /* 12px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}
/* 「Special Thanks / Privacy Policy」と同じ高さに、Instagramアイコンを置く。
   スマホ … リンクは左、アイコンはフッターの右端（Figmaのお問い合わせページ準拠）
   PC     … リンクのすぐ右横（76px空け） */
.page-footer__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.page-footer__sub-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 0.875rem;             /* 14px */
  font-weight: var(--weight-medium);
}
.page-footer__sub-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.page-footer__sns {
  display: inline-flex;
  align-items: center;
}
.page-footer__sns-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.page-footer__copyright {
  margin-top: 45px;
  text-align: center;
  font-size: 0.625rem;             /* 10px */
  font-weight: var(--weight-medium);
}


/* =============================================================
   5. ページごとのパーツ
   ============================================================= */

/* -------------------------------------------------------------
   5-1. ヒーロー（トップページ最上部）
   ------------------------------------------------------------- */
.hero {
  position: relative;
  height: 700px;
  display: flex;
  align-items: center;
}
/* 写真を重ねて置き、ゆっくり入れ替える（スライドショー）。
   JavaScriptが動かない場合は1枚目だけが表示されます。 */
.hero__slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* z-index を指定して「重なりの階層」を作ることで、
     切り替え中に写真同士が前後しても、キャッチコピーより上には出ません */
  z-index: 0;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.hero__image.is-active {
  opacity: 1;
}
.hero__catch {
  position: relative;
  z-index: 1;                      /* 写真の切り替え中も文字は常に前面 */
  color: var(--color-light);
  font-size: 1.5rem;               /* 24px */
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-spacing-catch);
  line-height: 1.6;
}

/* -------------------------------------------------------------
   5-2. コンセプト文（シェルパとは…）
   ------------------------------------------------------------- */
.concept__text {
  margin-top: 90px;
  font-size: 1.25rem;              /* 20px */
  font-weight: var(--weight-medium);
  line-height: var(--line-height-base);
}
/* PCではコンセプト文を画面中央の 446px 幅に収める（Figma準拠） */
@media (min-width: 768px) {
  .concept__inner {
    max-width: 446px;
    margin-inline: auto;
  }
}

/* -------------------------------------------------------------
   5-3. 写真＋テキストの2カラム（About / Course / Contact / Special Thanks）
   スマホ: 区切り線 → 見出し → 写真 → 本文 → ボタン の縦積み
   PC   : 写真とテキストを左右に並べる
   ------------------------------------------------------------- */
/* スマホでの並び順（Figma準拠）
     Topページ         : 区切り線・見出し → 写真 → 本文 → ボタン
     Profile / Thanks  : 写真 → 見出し → 本文 → ボタン
   間隔はすべて50px（--compactは28px）です。 */
.feature__media {
  margin-top: 50px;                /* 見出しと写真の間 */
}
.feature--compact .feature__media {
  margin-top: 0;                   /* 写真が先頭に来るページでは余白不要 */
}
.feature__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.feature__body {
  margin-top: 50px;                /* 写真と本文の間 */
}
.feature__title {
  margin-bottom: var(--feature-gap);
}
.feature__text + .button {
  margin-top: var(--feature-gap);
}

/* 見出し・本文・ボタンの間隔。Figmaのauto layoutのgapと同じ値です。
   Topページは50px、Profile / Special Thanks は28px */
.feature {
  --feature-gap: 50px;
}
.feature--compact {
  --feature-gap: 28px;
}

/* スマホでは、各セクションの遷移ボタンを中央に置く（Figma準拠） */
.feature__body > .button,
.message__body > .button,
.review-strip__inner > .button {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* カード見出し（英語24px＋日本語16px） */
.card-title__en {
  display: block;
  color: var(--color-heading);
  font-size: 1.5rem;               /* 24px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.card-title__ja {
  display: block;
  color: var(--color-heading);
  font-size: 1rem;                 /* 16px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.card-title__ja--lg {
  font-size: 1.25rem;              /* 20px */
}

/* -------------------------------------------------------------
   5-4. Guest Reviews のフォトストリップ（トップページ）
   上下に写真の帯、その間に見出しとボタンを置く
   ------------------------------------------------------------- */
.review-strip {
  margin-top: var(--section-gap);
  overflow: hidden;
}

/* 写真の帯。上段は左へ、下段は右へゆっくり流れます。
   HTMLで同じ5枚を2回ずつ並べているので、-50% 動かすと元の位置に戻り、
   継ぎ目なくつながって見えます。 */
.review-strip__row {
  display: flex;
  width: max-content;
  animation: review-strip-left 70s linear infinite;
}
.review-strip__row--reverse {
  animation-name: review-strip-right;
}
.review-strip__image {
  width: 157px;
  height: 157px;
  margin-right: 5px;               /* gapではなくmarginにすると継ぎ目がぴったり合う */
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes review-strip-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes review-strip-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* 動きを減らす設定のときは流さない */
@media (prefers-reduced-motion: reduce) {
  .review-strip__row {
    animation: none;
  }
}
.review-strip__body {
  padding-block: 41px;
}
.review-strip__text {
  margin-top: 50px;
}
.review-strip__text + .button {
  margin-top: 50px;
}

/* -------------------------------------------------------------
   5-5. FAQ
   ------------------------------------------------------------- */
.faq__list {
  margin-top: 90px;
}
.faq__item + .faq__item {
  margin-top: 1.6em;
}
.faq__question {
  font-size: 1rem;
  font-weight: var(--weight-black);
  line-height: var(--line-height-base);
}
.faq__answer {
  font-size: 1rem;
  font-weight: var(--weight-regular);
  line-height: var(--line-height-base);
}
.faq__answer-label {
  font-weight: var(--weight-black);
}
.faq__button-wrapper {
  margin-top: 50px;
  text-align: center;
}

/* -------------------------------------------------------------
   5-6. Trekking Course のカード
   ------------------------------------------------------------- */
.course-list {
  margin-top: var(--block-gap);
  display: grid;
  gap: 120px;
}
.course__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.course__body {
  margin-top: 50px;
}
.course__title {
  margin-bottom: 28px;
}
.course__routes {
  margin-top: 1.6em;
}
.course__route::before {
  content: "・";
}
.course__more {
  margin-top: 0;
}

/* -------------------------------------------------------------
   5-7. My Journey（年表）
   茶色の面が上の写真に 100px 重なる作りになっています。
   ------------------------------------------------------------- */
.journey {
  width: calc(100% - 30px);
  margin-inline: auto;
  margin-top: -100px;              /* 上の写真に重ねる */
  padding-block: 150px 100px;
  background-color: var(--color-heading);
  color: var(--color-light);
}
.journey__list {
  display: grid;
  gap: 150px;
}
/* 縦線は本文の流れに影響させず、絶対配置でFigmaと同じ位置に置きます。
   Figma: 線は高さ130px、本文は線の上端から125pxの位置から始まります。 */
.journey__body {
  position: relative;
  padding-top: 130px;
}
.journey__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 130px;
  border: 0;
  margin: 0;
  background-color: var(--color-line);
}
.journey__title {
  display: block;
  margin-bottom: 28px;
  font-size: 2.25rem;              /* 36px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.journey__year {
  display: block;
}
.journey__image {
  margin-top: 50px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* -------------------------------------------------------------
   5-8. Message（第三者からの推薦文）
   ------------------------------------------------------------- */
.message__photo {
  margin-top: 90px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.message__quote {
  margin-top: 28px;
  font-size: 1rem;
  line-height: var(--line-height-base);
}
.message__body {
  margin-top: 50px;
}
.message__author-name {
  display: block;
  color: var(--color-heading);
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.message__author-ja {
  display: block;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.message__quote + .button {
  margin-top: 28px;
}

/* -------------------------------------------------------------
   5-9. Guest Reviews のカード（吹き出し風）
   ------------------------------------------------------------- */
.review-list {
  margin-top: var(--block-gap);
  display: grid;
  gap: 120px 26px;
}
.review {
  background-color: var(--color-line);
  border-radius: 50px 0 50px 0;    /* Figmaの吹き出し風の角丸 */
  padding: 30px 15px;
}
.review__head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
/* 「Gosainkunda,」のような長い英単語でもカードからはみ出さないようにする */
.review__meta {
  min-width: 0;
}
.review__profile,
.review__course {
  overflow-wrap: anywhere;
}
.review__photo {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.review__meta {
  padding-top: 21px;
}
.review__profile {
  display: block;
  color: var(--color-heading);
  font-size: 1.25rem;              /* 20px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.review__course {
  display: block;
  color: var(--color-heading);
  font-size: 1rem;                 /* 16px */
  font-weight: var(--weight-black);
  line-height: 1.6;
}
.review__text {
  margin-top: 25px;
  font-size: 1rem;
  line-height: var(--line-height-base);
}

/* -------------------------------------------------------------
   5-10. Contact（Google フォーム埋め込み）
   中身は画面中央のカラムにまとめて配置します（Figma準拠）。
   ------------------------------------------------------------- */
.contact__body {
  margin-top: 64px;
}
.contact__lead {
  font-size: 1.25rem;              /* 20px */
  font-weight: var(--weight-medium);
  line-height: var(--line-height-base);
}
.contact__button-wrapper {
  margin-top: 50px;
  text-align: center;
}

.contact-form {
  margin-top: var(--block-gap);
}
.contact-form__frame {
  display: block;
  width: 100%;
  margin-inline: auto;             /* カラムの中で中央に置く */
  max-width: 640px;
  /* 高さはフォーム全体が収まる大きさにしています。
     枠の中ではスクロールさせず、ページごとスクロールしてもらう作りです。
     （値は base.css の --contact-form-height。画面幅ごとの上書きは
       このファイルの最後のほうにあります）
     送信後は assets/js/contact-form.js がこの高さを上書きして縮めます。 */
  height: var(--contact-form-height);
  border: 0;
  background-color: #FFFFFF;
}
.contact-form__note {
  margin-top: 28px;
  font-size: 0.875rem;
}
.contact-form__note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* -------------------------------------------------------------
   5-11. Privacy Policy / 汎用の長文ページ
   ------------------------------------------------------------- */
.prose {
  margin-top: 90px;
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  line-height: var(--line-height-base);
}
.prose > * + * {
  margin-top: 1.6em;
}
.prose__signature {
  margin-top: 1.6em;
}
/* 中央寄せの長文（プライバシーポリシー） */
.prose--center {
  max-width: 733px;
  margin-inline: auto;
}
.prose__button-wrapper {
  margin-top: 90px;
  text-align: center;
}


/* =============================================================
   6. レスポンシブ（768px 以上 = タブレット / PC）
   ============================================================= */
@media (min-width: 768px) {
  :root {
    --gutter: 60px;
    --section-gap: 200px;
    --block-gap: 150px;
    --header-space: 250px;
  }

  /* リード文はFigmaと同じくらいの幅で改行させる */
  .lead {
    max-width: 735px;
  }

  .hero {
    height: 640px;
  }
  .hero__catch {
    font-size: 2.25rem;            /* 36px */
  }

  .section-head__en {
    font-size: 3rem;               /* 48px */
    line-height: 1.21;
  }
  .section-head__ja {
    font-size: 1.5rem;             /* 24px */
    margin-top: 15px;
  }
  /* トップページのセクション見出しは 36px / 16px のまま */
  .section-head--small .section-head__en {
    font-size: 2.25rem;
    line-height: 1.6;
  }
  .section-head--small .section-head__ja {
    font-size: 1rem;
    margin-top: 0;
  }

  /* 2カラム（写真 + テキスト） */
  /* PCは写真とテキストを左右に並べる。
     写真が2行ぶんの高さを占め、右の列に「見出し」と「本文」が縦に並びます。
     Figmaでは区切り線が写真の上端と同じ高さなので上揃えにしています。 */
  .feature__inner {
    display: grid;
    grid-template-columns: minmax(0, 731fr) minmax(0, 377fr);
    /* 1行目＝見出し（中身ぴったり）、2行目＝本文（余った高さを引き受ける）。
       こうしないと写真の高さぶんの余りが見出し側にも分配されてズレます。 */
    grid-template-rows: max-content 1fr;
    column-gap: 92px;
    align-items: start;
  }
  .feature__media {
    margin-top: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    /* 画面幅が狭いと写真だけが縮んで文字がはみ出すため、
       テキスト列の高さぶんまで写真を伸ばす（写真は中央を基準に切り抜かれます） */
    align-self: stretch;
  }
  .feature__image {
    height: 100%;
    aspect-ratio: 731 / 504;
  }
  .feature__head {
    grid-column: 2;
    grid-row: 1;
  }
  .feature__body {
    grid-column: 2;
    grid-row: 2;
  }
  /* 写真を右に置くパターン */
  .feature--reverse .feature__inner {
    grid-template-columns: minmax(0, 377fr) minmax(0, 731fr);
  }
  .feature--reverse .feature__media {
    grid-column: 2;
  }
  .feature--reverse .feature__head,
  .feature--reverse .feature__body {
    grid-column: 1;
  }
  /* Profile / Special Thanks は写真とテキストを上下中央で揃える（Figma準拠） */
  .feature--compact .feature__inner {
    grid-template-rows: auto;
    align-items: center;
  }
  .feature--compact .feature__media {
    grid-row: 1;
  }
  .feature--compact .feature__body {
    grid-row: 1;
    margin-top: 0;
  }

  /* PCではボタンはテキストの左端に揃える */
  .feature__body > .button,
  .message__body > .button,
  .review-strip__inner > .button {
    display: inline-flex;
    margin-inline: 0;
  }

  .course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 150px 26px;
    align-items: start;
  }

  .journey {
    width: calc(100% - 52px);
    padding-block: 250px 150px;
  }
  .journey__list {
    gap: 300px;
  }
  .journey__item {
    display: grid;
    grid-template-columns: minmax(0, 377fr) minmax(0, 733fr);
    gap: 68px;
    align-items: start;
  }
  .journey__image {
    margin-top: 0;
    aspect-ratio: 733 / 504;
  }
  /* PCでは縦線が本文の24px左に出ます（Figma準拠） */
  .journey__body {
    padding-top: 125px;
  }
  .journey__line {
    left: -24px;
  }
  .journey__title {
    font-size: 2.5rem;             /* 40px */
  }

  .message__inner {
    display: grid;
    grid-template-columns: minmax(0, 377fr) minmax(0, 734fr);
    gap: 89px;
    align-items: center;
  }
  .message__photo {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    aspect-ratio: 734 / 504;
  }
  .message__body {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  .message__author-name {
    font-size: 1.5rem;
  }

  .review-strip__image {
    width: 300px;
    height: 300px;
  }
  .review-strip__body {
    padding-block: 200px;
  }
  /* Figmaでは377px幅のブロックが画面中央に置かれ、中の文字は左揃えです */
  .review-strip__inner {
    max-width: 377px;
    margin-inline: auto;
  }

  .faq__list {
    margin-top: 90px;
  }

  .prose {
    margin-top: 150px;
  }

  /* Contact: Figmaと同じく、中身を画面中央の736pxカラムにまとめる */
  .contact__body {
    max-width: 736px;
    margin-top: 150px;
    margin-inline: auto;
  }

  .page-footer__info-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  .page-footer__logo-name { font-size: 1.5rem; }
  .page-footer__logo-role { font-size: 1rem; }
  .page-footer__sub {
    gap: 76px;
    width: auto;
  }
  .page-footer__info {
    padding-block: 100px 52px;
  }
  .page-footer__copyright {
    margin-top: 13px;
    font-size: 0.875rem;
  }
}


/* =============================================================
   6-2. レスポンシブ（1024px 以上 = PC）
   ============================================================= */
@media (min-width: 1024px) {
  :root {
    --gutter: 120px;
    --section-gap: 300px;
  }

  .page-header {
    padding-block: 50px 20px;
  }
  /* スクロール後は高さを詰めて、本文が隠れる面積を減らす */
  .page-header--scrolled {
    padding-block: 14px;
  }
  .page-header__logo-name { font-size: 1.5rem; }   /* 24px */
  .page-header__logo-role { font-size: 1rem; }     /* 16px */


  .hero {
    height: 800px;
  }
  .hero__catch {
    font-size: 3rem;               /* 48px */
  }

  .band__image {
    height: 450px;
  }

  .review-strip__image {
    width: 300px;
    height: 300px;
  }
  .review-strip__body {
    padding-block: 41px;
  }

  .faq {
    max-width: 910px;
    margin-inline: auto;
  }

  /* レビューカード: 2カラム＋Figmaと同じ余白・写真サイズ
     （768〜1023px では横幅が足りないため1カラムのまま） */
  .review-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 150px 26px;
  }
  /* 余白・写真・すき間はカード幅に対する比率で指定します。
     固定pxにすると、ウィンドウ幅が1364px未満のときにテキスト欄が
     狭くなりすぎて、文字がカードからはみ出してしまうためです。
     1440px（Figma実寸）では 79px / 50px / 209px / 40px になります。 */
  .review {
    padding: 13.5% 8.5%;
  }
  .review__head {
    gap: clamp(18px, 8%, 40px);
  }
  .review__photo {
    flex: 0 0 43%;
    width: auto;
    height: auto;
    max-width: 209px;
    aspect-ratio: 1 / 1;
  }
  .review__meta {
    padding-top: clamp(16px, 11%, 55px);
  }
  .review__profile {
    font-size: 1.5rem;             /* 24px */
  }
  .review__course {
    font-size: 1.25rem;            /* 20px */
  }
  .review__text {
    margin-top: 30px;
    font-size: 1.25rem;            /* 20px */
  }

  .journey__title {
    font-size: 2.5rem;
  }
}

/* -------------------------------------------------------------
   お問い合わせフォーム（Googleフォーム）の枠の高さ

   フォームは幅が広いほど文字の折り返しが減り、全体の高さが低くなります。
   そのため画面幅ごとに高さを変えて、フォーム全体が枠に収まりつつ、
   下の余白が大きくなりすぎないようにしています。
   （測った値と考え方は base.css のコメントに書いています）
   ------------------------------------------------------------- */
@media (min-width: 360px) {
  :root {
    --contact-form-height: 2450px;
  }
}

@media (min-width: 414px) {
  :root {
    --contact-form-height: 2330px;
  }
}

/* この幅からフォームは 640px 固定で表示されます */
@media (min-width: 700px) {
  :root {
    --contact-form-height: 2240px;
  }
}