/* ==========================================================================
   実装用CSS
   ・PC/SPのスタイルはこの1ファイルにまとめて、メディアクエリで出し分ける
   ・ブレイクポイントは案件ごとに指定されるが、迷ったら768pxを基準にする
   ・書き方はデスクトップファースト（PC基準で書いて、SP用に上書きする）
     ※モバイルファーストにしたい場合は min-width に変えればOK

   ------------------------------------------------------------------------
   Figma「CSSとしてコピー」→実務コードへの変換ルール（チートシート）
   ------------------------------------------------------------------------
   1. position:absolute + left/top（+ calc(50% - w/2)など）
      → だいたいは「親の中で中央寄せしたい」という意図の表現。
        親に display:flex; justify-content:center; align-items:center; を持たせて、
        子要素は普通に流し込む。絶対配置自体は使わない。

   2. トップレベルのフレームのposition:relative + left/top
      → Figmaキャンバス上の座標（他の要素との位置関係）に過ぎないので、実装では無視してよい。
        ページ内では要素を上から順に並べるだけで、座標指定は不要。

   3. width（またはheight）の数値
      → デザイン全幅に近い数値（例: 1440px前後）なら 100% に変換。
      → 中身に合わせてFigmaが自動計算した「hug contents」的な数値なら、指定しないで中身に任せる。
      → アイコンやバッジなど、画面幅が変わっても同じ大きさを保ちたい小さな部品は、
        そのまま固定pxで指定してよい。

   4. filter: drop-shadow(...)
      → 矩形要素の影なら box-shadow に置き換える（drop-shadowは透明部分がある画像/アイコン向けで、
        矩形に使うと無駄に処理が重い）。

   5. border: 1px dashed #9747FF; など、紫の点線
      → Figmaが「これはコンポーネントです」と示すための表示上の目印であることが多く、
        実際のデザインではない。出力されたプロパティを鵜呑みにせず、Figma上で本当に
        見えているスタイルか確認する。

   6. 子要素のleft/top がちょうど親のwidth/heightとの差になっている
      → 親に padding を持たせて表現している値。absoluteをやめて、
        親のpaddingとして持たせ、子は普通の子要素にする。

   7. 開閉するアコーディオンなどのコンポーネントバリアント（Open/Closeなど）
      → 独自JSを書く前に、<details><summary>などブラウザ標準の機能で実現できないか検討する。

   8. 要素がページの横幅（例: 1440px）を超えた位置（left:1600pxなど）にある
      → 実際のページの外側にある「部品サンプル置き場」の可能性が高い。
        本当にページ内で使われている要素か、Figma上で確認してから着手する。
   ========================================================================== */

:root {
  --content-width: 1200px; /* PCでのコンテンツ最大幅（デザインに合わせて変更） */
  --breakpoint-sp: 767px; /* SP版のFigmaデザイン幅が375pxと判明したため正式な値に戻した */
}

/* ページ全体の左右余白をまとめて管理する共通クラス */
.inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 20px;
}


/* --------------------------------------------------------------------------
   ヘッダー（ナビゲーション）
   「マスターコンポーネント」側と同じデザインを再利用（Frame 70）

   Figmaの出力:
     position: relative; width: 1440px; height: 82px; left: 94px; top: 123px;
     filter: drop-shadow(0px 4px 4px rgba(156, 156, 156, 0.25));
   - left/top → Figmaキャンバス上の座標なので削除
   - width: 1440px → デザイン全幅とほぼ同じなので 100%
   - filter: drop-shadow(...) → 矩形要素なので box-shadow に置き換え
   -------------------------------------------------------------------------- */

.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 82px;
  background-color: #fff;
  box-shadow: 0px 4px 4px rgba(156, 156, 156, 0.25);
}


/* --------------------------------------------------------------------------
   Frame 73 中身: ロゴ・ナビ・ボタン

   Figmaの出力（要点）:
   - ロゴ(original 1): width:176px; height:36px; left:48px; top:19px;
   - ナビ(Frame 41): flex row; gap:64px; left:794px; top:29px;
   - ボタン: padding:16px 20px; width:184px; height:48px; background:#F13C68; left:1215px;
   - left/topの座標はすべて削除し、「ロゴ」と「ナビ＋ボタンのグループ」を
     justify-content:space-betweenで左右に分ける形に変換
   -------------------------------------------------------------------------- */

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-inline: 48px;
}

.header__logo {
  display: block;
  width: auto;
  height: 36px;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 56px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 64px;
}

.header__nav a {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: #333;
}

.header__button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 184px;
  height: 48px;
  padding: 16px 20px;
  background-color: #f13c68;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
}


/* --------------------------------------------------------------------------
   Group 79（SP版ヘッダー）: ハンバーガーメニューのボタン＋ドロワー

   Figmaの出力（要点）:
   - Group 79: width:375px; height:64px;
   - Rectangle 76（背景）: background:#FFFFFF; box-shadow相当のdrop-shadow
   - Frame 61（3本線）: Line 7/8/9、各width:36px; border:3px solid #333333; 10px間隔
   - PCでは非表示、SP（767px以下）でのみ表示する
   - クリックで開閉するため、js/script.jsでclassの付け外しを行う
   -------------------------------------------------------------------------- */

.header__menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.header__menu-btn-line {
  width: 24px;
  height: 2px;
  background-color: #333;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sp-nav {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  padding: 40px 16px;
  background-color: #fff;
}

.sp-nav.is-open {
  display: flex;
}

.sp-nav a {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #333;
}

.sp-nav a.sp-nav__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 184px;
  max-width: 100%;
  height: 44px;
  background-color: #f13c68;
  color: #fff;
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   Frame 68: ヒーロー画像セクション

   Figmaの出力: position:absolute; width:1440px; height:759px; left:0px; top:0px;
   - left/top → 実装では不要な座標情報
   - width:1440px → デザイン全幅なので100%
   - height:759px → 固定pxではなくaspect-ratioで縦横比を保つ
   - position:relative → 写真の上にタグ・見出し・アイコンを重ねるため残す
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 759;
  background-image:
    linear-gradient(106.39deg, rgba(52, 213, 184, 0.1) 8.24%, rgba(46, 215, 215, 0.1) 89.93%),
    url("../images/hero-bg.jpg"); /* TODO: Figmaから書き出した画像に置き換える */
  background-size: cover;
  background-position: center;
}


/* --------------------------------------------------------------------------
   Group 67: タグ＋見出しの重なり要素

   Figmaの出力（要点）:
   - Rectangle 62（白タグ）: width:296px; height:63px; left:200px; top:518px;
   - はじめの一歩！: font-size:36px; line-height:49px; color:#333;
   - Rectangle 63（teal見出し帯）: width:790px; height:96px; left:200px; top:599px; background:#0FABB5;
   - 1Day クリエイティブセミナー: font-weight:500; font-size:54px; line-height:74px; color:#fff;
   - left/topはpxの固定値の絶対配置なので、SP版のFigma CSSをもらうまでは
     暫定的に通常の縦積みレイアウトに切り替える（下のSP用スタイルを参照）
   -------------------------------------------------------------------------- */

/*
  hero__overlay: タグ＋見出しをまとめる親要素。
  left/topは元は各要素が個別に固定pxで持っていた(left:200 top:518など)が、
  ヒーロー画像がaspect-ratioで伸縮するため固定pxだと写真からはみ出すバグがあった。
  さらに、タグと見出しを別々にtop位置固定すると、タグの文字が2行に折り返した時に
  見出しと重なるバグも発生したため、1つの親にまとめてflexboxで縦に並べ、
  実際の中身の高さに応じて自動で間隔があくようにしている。
*/
.hero__overlay {
  /*
    top(上から)ではなくbottom(下から)基準で固定する。
    タグの文字が折り返して背が高くなっても、常に写真の下端から一定距離を保ったまま
    上方向に伸びるだけなので、次のセクションと重なることがなくなる
    （元のデザイン: 759 - (599+96) = 64px → 64/759 ≈ 8.43%）
  */
  position: absolute;
  left: 13.89%;
  bottom: 8.43%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.hero__tag {
  display: flex;
  align-items: center;
  width: 20.56vw;
  min-width: 200px;
  padding-block: 8px;
  padding-inline: 22px;
  background-color: #fff;
}

.hero__tag-text {
  font-family: "Noto Sans", sans-serif;
  font-size: 36px;
  line-height: 49px;
  color: #333;
}

.hero__headline {
  display: flex;
  align-items: center;
  width: 54.86vw;
  min-width: 320px;
  padding-block: 12px;
  padding-inline: 27px;
  background-color: #0fabb5;
}

.hero__headline-text {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 54px;
  line-height: 74px;
  color: #fff;
}


/* --------------------------------------------------------------------------
   TOPlink: ページ上部へ戻るリンク（円56×56）

   Figmaの出力（要点）:
   - TOPlink: width:56px; height:56px; （外側のFrame 83[100×100]はクリック領域と判断し省略）
   - Ellipse 14: 白背景 + 2px solid #0FABB5 の円
   - TOP文字: 14px bold, color #0FABB5, text-align:center（%指定の位置は無視してflexで中央寄せ）
   - Polygon 2: シンプルな三角形なのでCSSで作成
   - heroの右下から right:37px; bottom:36px;（TOPlinkの実測位置から算出）
   -------------------------------------------------------------------------- */

.hero__scroll-icon {
  position: absolute;
  right: 37px;
  bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #0fabb5;
  text-decoration: none;
}

.hero__scroll-icon-arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #0fabb5;
}

.hero__scroll-icon-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: #0fabb5;
}


/* --------------------------------------------------------------------------
   Frame 72: ヒーロー直下の白背景テキストセクション

   Figmaの出力: position:absolute; width:1440px; height:186px; left:0px; top:760px;
                background:#FFFFFF;
   - left/top → 座標情報なので削除
   - width:1440px → デザイン全幅なので100%
   - height:186px → テキスト量依存なので固定値にせずpaddingで表現
   - background:#FFFFFF → 実際のデザインなのでそのまま使う
   -------------------------------------------------------------------------- */

.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #fff;
  padding-block: 56px;
  padding-inline: 20px;
}

.intro__text {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  line-height: 1.8;
  text-align: center;
  color: #333;
}


/* --------------------------------------------------------------------------
   Frame 69: お悩みリストセクション（写真＋チェックリスト）

   Figmaの出力: position:absolute; width:1440px; height:472px; left:0px; top:944px;
   - left/top → 座標情報なので削除
   - width:1440px → デザイン全幅なので100%
   - height:472px → 中身に応じた高さなので固定値にせずpaddingで表現
   -------------------------------------------------------------------------- */

.worries {
  width: 100%;
  padding-block: 40px;
  background-color: #e3faff;
}

.worries-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  max-width: 1037px;
  margin-inline: auto;
}

.worries-content__image {
  width: 370px;
  height: 360px;
  object-fit: cover;
  flex-shrink: 0;
}

.worries-content__panel {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 300px;
  padding: 36px 40px;
  background-color: #fff;
}

.worry-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 538px;
}

.worry-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.worry-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #9b9b9b;
}

.worry-item__icon::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 12px;
  height: 6px;
  border-left: 3px solid #0fabb5;
  border-bottom: 3px solid #0fabb5;
  transform: rotate(-45deg);
}

.worry-item__text {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: #333;
}


/* --------------------------------------------------------------------------
   Frame 69（2つ目）: CTA帯「1Dayセミナーでそんなお悩みを解決！」
   ※前のお悩みリストと同じ「Frame 69」という名前だが別の要素

   Figmaの出力: position:absolute; width:1440px; height:128px; left:0px; top:1416px;
   - left/top → 座標情報なので削除
   - width:1440px → デザイン全幅なので100%
   - height:128px → 固定値にせずpaddingで表現
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 128px;
  background-color: #0fabb5;
}

.cta-band__text {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 33px;
  color: #fff;
}

.cta-band__accent {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 34px;
  background-color: #e3faff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}


/* --------------------------------------------------------------------------
   Frame 70（3つ目）: 「本講座の特徴」セクション全体の外枠

   Figmaの出力: display:flex; flex-direction:column; align-items:flex-start; padding:88px 210px;
                gap:8px; position:absolute; width:1440px; height:629px;
                left:calc(50% - 1440px/2); top:1544px;
   - left:calc(...) + width:1440px → width:100%にするだけで不要になる中央寄せトリック
   - padding:88px 210px → そのまま使う（左右はSP用に上書き）
   - height:629px → 中身に応じた高さなので固定値にしない
   -------------------------------------------------------------------------- */

.features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 88px 210px;
}


/* --------------------------------------------------------------------------
   Frame 66: 特徴カード3枚

   Figmaの出力: display:flex; flex-direction:row; align-items:flex-start; gap:60px;
                width:1020px; height:354px; position:absolute; left:210px; top:197px;
   - left/top → 座標情報なので削除
   - width:1020px → .featuresのpadding(88px 210px)により既に1020px幅に絞られているため
     width:100%だけで一致する（改めてmax-widthを指定する必要はない）
   - 各カード(Rectangle 55の画像 + 見出し + 説明文)は画像以外同じ文言の繰り返し
   -------------------------------------------------------------------------- */

.feature-list {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
  max-width: 1020px;
  margin-inline: auto;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 300px;
}

.feature-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

.feature-card__title {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.feature-card__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}


/* --------------------------------------------------------------------------
   Group 63: お申し込みページへのリンクボタンが埋め込まれたセクション

   Figmaの出力: position:absolute; width:1440px; height:285px; left:0px; top:2173px;
   - left/top → 座標情報なので削除
   - width:1440px → デザイン全幅なので100%
   - height:285px → 中身に応じた高さなので固定値にしない
   -------------------------------------------------------------------------- */

.apply-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1440 / 285;
  background-image: url("../images/apply-bg.jpg"); /* TODO: Figmaから書き出した画像に置き換える */
  background-size: cover;
  background-position: center;
}

.apply-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 408px;
  padding-inline: 20px;
}

.apply-cta__text {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.7;
  text-align: center;
  color: #333;
}

.apply-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 276px;
  padding: 16px 20px;
  background-color: #f13c68;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.apply-cta__button-icon {
  flex-shrink: 0;
  width: 20px;
  height: 16px;
}


/* --------------------------------------------------------------------------
   Group 76: お問い合わせフォーム全体（Contactページ）

   Figmaの出力: position:absolute; width:480px; height:822px;
                left:calc(50% - 480px/2); top:170px;
   - left:calc(...) + width:480px → max-width:480px + margin-inline:autoの中央寄せに置き換える
   - top:170px → 座標情報なので削除
   - height:822px → フォーム項目の量に応じた高さなので固定値にしない
   -------------------------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-block: 56px 80px;
}

.contact-form__title {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 33px;
  color: #0fabb5;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Frame 55/50: フォーム本体（入力項目・チェックボックス・送信ボタン）

   Figmaの出力（要点）:
   - Frame 55（外側）: flex column; align-items:center; gap:72px;
   - Frame 50（項目一覧）: flex column; align-items:flex-start; gap:40px;
   - 各項目（Frame 51/52など）: flex column; gap:12px;
   - 入力欄(Rectangle 72など): width:480px; height:50px; border:1px solid #878787; border-radius:4px;
   - プレースホルダーのテキストレイヤー → <input>のplaceholder属性 + ::placeholder に変換
   - ラジオ(Ellipse 13)/チェックボックス(Rectangle 83) → 本物のinputを使用
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.form-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  width: 100%;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}

.form-field__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.required-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 24px;
  background-color: #0fabb5;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.form-field__input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding-inline: 16px;
  border: 1px solid #878787;
  border-radius: 4px;
  font-family: "Noto Sans", sans-serif;
  font-size: 15px;
  color: #333;
}

.form-field__input::placeholder {
  color: #afafaf;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.radio-option input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #333;
}

.privacy-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #333;
}

.privacy-check input[type="checkbox"] {
  width: 12px;
  height: 12px;
  accent-color: #0fabb5;
}

.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 184px;
  height: 48px;
  border: none;
  border-radius: 4px;
  background-color: #f13c68;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   ステップ2: 確認画面（入力内容の読み取り専用表示＋戻る/送信ボタン）
   -------------------------------------------------------------------------- */

.confirm-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.confirm-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.confirm-list__label {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #878787;
}

.confirm-list__value {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #333;
  word-break: break-word;
}

.confirm-actions {
  display: flex;
  gap: 16px;
}

.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 48px;
  border: 1px solid #878787;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   Frame 71: 講座一覧セクション

   Figmaの出力: display:flex; flex-direction:column; align-items:flex-start; padding:88px 199px;
                gap:8px; position:absolute; width:1440px; height:1077px; left:0px; top:2458px;
   - left/top → 座標情報なので削除
   - width:1440px → デザイン全幅なので100%
   - height:1077px → 中身に応じた高さなので固定値にしない
   -------------------------------------------------------------------------- */

.courses {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 88px 199px;
}


/* --------------------------------------------------------------------------
   Frame 60: 講座一覧の見出しエリア
   -------------------------------------------------------------------------- */

.courses-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.courses-heading__eyebrow {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #000;
}


/* --------------------------------------------------------------------------
   Frame 73/47/48: 講座カード一覧

   Figmaの出力（要点）:
   - カード外枠(Frame47/48): box-sizing:border-box; display:flex; justify-content:center;
     align-items:center; padding:40px; gap:48px; width:1042px; height:410px;
     border:2px solid #0FABB5;
   - 画像(Component11 + Rectangle56): width:408px; height:301px; background:url(...)
     → 意味のあるコンテンツ画像なので<img>に変換
   - height:410px/301pxなどは中身に応じて変わるため、カード自体の高さは固定しない
   -------------------------------------------------------------------------- */

.course-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 38px;
  width: 100%;
  max-width: 1042px;
  margin-inline: auto;
}

.course-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding: 40px;
  border: 2px solid #0fabb5;
}

.course-card__image {
  width: 408px;
  max-width: 100%;
  height: 301px;
  object-fit: cover;
  flex-shrink: 0;
}

.course-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  flex: 1;
  min-width: 280px;
}

.course-card__title {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.6;
  color: #333;
}

.course-card__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.course-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.course-card__meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.course-card__meta-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 26px;
  background-color: #0fabb5;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.course-card__meta-value {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #333;
}


/* --------------------------------------------------------------------------
   Frame 59: 開催場所についての記載セクション

   Figmaの出力: display:flex; flex-direction:column; justify-content:center; align-items:center;
                padding:88px 0px; gap:56px; position:absolute; width:1440px; height:705px;
                left:0px; top:3535px;
   - left/top → 座標情報なので削除
   - width:1440px → デザイン全幅なので100%
   - height:705px → 中身に応じた高さなので固定値にしない
   -------------------------------------------------------------------------- */

.venue {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 56px;
  width: 100%;
  padding-block: 88px;
}


/* --------------------------------------------------------------------------
   Frame 58: 住所情報＋地図（Group 75の中身。ラッパー自体は省略）

   Figmaの出力: display:flex; flex-direction:row; align-items:center; padding:0px;
                width:1044.98px; height:400px;
   - 明示的なgapの指定がなく、テキスト幅(445.98)+地図幅(600)≒全体幅(1044.98)と一致するため、
     テキストと地図の間に余白はない
   -------------------------------------------------------------------------- */

.venue-content {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1045px;
  margin-inline: auto;
}

.venue-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.venue-info__name {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: #333;
}

.venue-info__address,
.venue-info__access {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.375; /* 22px ÷ 16px */
  color: #333;
}

.venue-content__map {
  width: 600px;
  max-width: 50%;
  height: auto;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Frame 57: よくあるご質問（FAQ）セクション

   Figmaの出力: display:flex; flex-direction:column; align-items:center; padding:88px 0px;
                gap:30px; position:absolute; width:1440px; height:817px;
                left:calc(50% - 1440px/2); top:4240px; background:#F5F5F5;
   - left:calc(...) + width:1440px → width:100%にするだけで不要になる中央寄せトリック
   - height:817px → 中身に応じた高さなので固定値にしない
   - background:#F5F5F5 → 実際のデザインなのでそのまま使う
   -------------------------------------------------------------------------- */

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding-block: 88px;
  background-color: #f5f5f5;
}


/* --------------------------------------------------------------------------
   見出し＋下線（Group 33と同じ構造。本講座の特徴セクションと共通のコンポーネント）

   Figmaの出力:
     テキスト: width:168px; height:33px; font-family:'Noto Sans'; font-weight:700;
               font-size:24px; line-height:33px; text-align:center; color:#333333;
     下線(Rectangle 54): width:60px; height:4px; background:#0FABB5;
   -------------------------------------------------------------------------- */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%; /* align-items:flex-startの親（.featuresなど）でも中央寄せされるように */
}

.section-heading__title {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 33px;
  text-align: center;
  color: #333;
}

.section-heading__line {
  width: 60px;
  height: 4px;
  background-color: #0fabb5;
}


/* --------------------------------------------------------------------------
   QA: Q&Aリストのラッパー

   Figmaの出力: display:flex; flex-direction:column; align-items:flex-start; gap:24px;
                width:970.19px; height:540px;
   - height → 中身に応じた高さなので固定値にしない
   - widthはページ全幅ではなくコンテンツ幅なのでmax-widthとして使う
     （親.faqがalign-items:centerなので自然に中央寄せされる）
   -------------------------------------------------------------------------- */

.faq-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 970px;
}


/* --------------------------------------------------------------------------
   Component 17/33/34: Q&A項目（3件とも同じ構造）

   Figmaの出力（抜粋・要点）:
   - 質問文/回答文: position:absolute; left/right/top/bottomが%指定
     → Figmaの「スケール」リサイズ設定による値なので実装では無視。
       flexboxでバッジとテキストを横並びにする
   - Q/Aバッジ: Ellipse 16(塗り, #0FABB5) / Ellipse 17(枠線のみ, 2px #0FABB5)
     どちらも約60px四方の円。中の文字は36px
   - 開閉アイコン(Subtract + 回転したRectangle): 複雑な図形なのでCSSで再現せず、
     Figmaから書き出したSVGに差し替える想定でプレースホルダーにしている
   - Line 8/9/10（項目間の区切り線）: 各項目のborder-bottomとして表現
   -------------------------------------------------------------------------- */

.faq-item {
  width: 100%;
  padding-bottom: 24px;
  border-bottom: 1px solid #878787;
}

.faq-item__question {
  display: flex;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none; /* Safari用: 標準の開閉マーカーを消す */
}

.faq-item__answer {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-top: 24px;
}

.faq-item__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 36px;
  box-sizing: border-box;
}

.faq-item__badge--q {
  background-color: #0fabb5;
  color: #fff;
}

.faq-item__badge--a {
  border: 2px solid #0fabb5;
  color: #0fabb5;
}

.faq-item__text {
  flex: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.faq-item__toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* TODO: Figmaから開閉アイコンをSVGで書き出して差し替える */
}


/* --------------------------------------------------------------------------
   Frame 47（フッター）: 「Copyright 2023 DESIGN CAMPUS」の帯

   Figmaの出力: position:absolute; width:1441px; height:88px; left:0px; bottom:0px;
   - bottom:0 → ページ最下部固定という意味なので<footer>タグで実装
   - width:1441px → デザイン全幅なので100%
   -------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
  background-color: #0fabb5;
}

.site-footer__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
}


/* --------------------------------------------------------------------------
   Group 55: お申し込み完了メッセージ＋「TOPへ戻る」ボタン（thanks.html）

   Figmaの出力（要点）:
   - テキスト: font-weight:700; font-size:24px; line-height:170%; color:#0FABB5;
   - ボタン(Frame 53): width:184px; height:48px; border:1px solid #0FABB5; border-radius:4px;
     テキストcolor:#0FABB5（枠線のみ、塗りつぶしなし）
   - calc(50% - w/2)や絶対配置 → flexboxでの中央寄せに変換
   -------------------------------------------------------------------------- */

.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  min-height: 60vh;
  padding: 88px 20px;
  text-align: center;
}

.thanks__text {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.7;
  color: #0fabb5;
}

.thanks__button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 184px;
  height: 48px;
  border: 1px solid #0fabb5;
  border-radius: 4px;
  color: #0fabb5;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   SP用スタイル（767px以下）
   SP版のFigmaデザイン幅（375px）に基づく正式なブレイクポイント
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .inner {
    padding-inline: 16px;
  }

  /* ヘッダー: PCのナビ+ボタンを隠し、ハンバーガーメニューに切り替える */
  .header {
    height: auto; /* sp-navが開いた時に高さが伸びるように固定heightを外す */
    flex-direction: column;
    align-items: stretch;
  }

  .header__inner {
    height: 64px;
    padding-inline: 16px;
  }

  .header__right {
    display: none;
  }

  .header__menu-btn {
    display: flex;
  }

  /* Frame 70（SP版）: padding:64px 20px; Frame 69のgap:48pxで見出し〜カード間の余白を表現 */
  .features {
    gap: 48px;
    padding: 64px 20px;
  }

  /* Group 63（SP版）: width:375px; height:236px; ボタンwidth:280px; height:64px; */
  .apply-cta {
    aspect-ratio: 375 / 236;
  }

  .apply-cta__content {
    max-width: 280px;
    gap: 24px;
  }

  .apply-cta__text {
    font-size: 16px;
    line-height: 1.7;
  }

  .apply-cta__button {
    width: 100%;
    max-width: 280px;
    height: 64px;
  }

  .apply-cta__button-icon {
    width: 24px;
    height: 24px;
  }

  .contact-form {
    padding-inline: 16px;
  }

  /* Frame 71（SP版）: padding:64px 20px; Frame 74のgap:48pxで見出し〜カード間の余白を表現 */
  .courses {
    gap: 48px;
    padding: 64px 20px;
  }

  .course-card__title {
    font-size: 18px;
  }

  .course-card__desc,
  .course-card__meta-value {
    font-size: 14px;
  }

  /* Frame 59（SP版）: padding:64px 0px; 画像が先・テキストが後（PC版と逆順） */
  .venue {
    padding: 64px 0;
  }

  .venue-content {
    flex-direction: column;
    gap: 28px;
  }

  .venue-content__map {
    order: -1;
    max-width: 100%;
    aspect-ratio: 375 / 340;
  }

  .venue-info {
    padding-inline: 20px;
  }

  .venue-info__name {
    font-size: 18px;
    line-height: 1.4;
  }

  .course-card {
    flex-direction: column;
    padding: 24px;
  }

  .course-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 408 / 301;
  }

  .feature-list {
    flex-direction: column;
    align-items: center;
  }

  .feature-card {
    width: 100%;
    max-width: 300px;
  }

  /* Frame 57（SP版FAQ）: padding:64px 20px; 項目間gap:40px; バッジ36x36; 余白16px */
  .faq {
    gap: 48px;
    padding: 64px 20px;
  }

  .faq-list {
    gap: 40px;
  }

  .faq-item__question,
  .faq-item__answer {
    gap: 16px;
  }

  .faq-item__badge {
    width: 36px;
    height: 36px;
  }

  .faq-item__badge--q {
    font-size: 20px;
  }

  .faq-item__badge--a {
    font-size: 18px;
  }

  .faq-item__toggle {
    width: 16px;
    height: 10px;
  }

  /* Frame 47（SP版フッター）: height:85px */
  .site-footer {
    height: 85px;
  }

  /* Frame 76（SP版Contactフォーム）: 見出し20px; gap:48px/80px; 入力欄height:40px */
  .contact-form {
    gap: 48px;
    padding-block: 40px 56px;
  }

  .contact-form__title {
    font-size: 20px;
  }

  .form-step {
    gap: 80px;
  }

  .form-field__input {
    height: 40px;
    font-size: 14px;
  }

  /* Group 55（SP版Thanksページ）: 見出し20px/240px幅; gap:64px */
  .thanks {
    gap: 64px;
  }

  .thanks__text {
    max-width: 240px;
    font-size: 20px;
  }

  /*
    AdobeStock_555313528 1（SP版）: width:335px; height:184px; left:20px;
    → PC(370:360)とは違う比率(335:184)で切り出されている
  */
  .worries-content {
    padding-inline: 20px;
  }

  .worries-content__image {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 184;
  }

  .worries-content__panel {
    padding: 32px 14px;
  }

  /* Frame 24（SP版チェックリスト）: gap:24px; 各行gap:10px; アイコン17.1x19px; 文字14px */
  .worry-list {
    gap: 24px;
  }

  .worry-item {
    gap: 10px;
  }

  .worry-item__icon {
    width: 17px;
    height: 19px;
  }

  .worry-item__text {
    font-size: 14px;
    line-height: 1.4;
  }

  /*
    Rectangle 49（SP版背景）: width:375px; height:700px;
    → 実際のSP比率(375:700)に更新。中のタグ・見出しの正式な位置はまだ未取得のため、
      それまでは暫定的に縦積みで表示する
  */
  .hero {
    aspect-ratio: 375 / 700;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 24px 16px;
  }

  /* hero__overlayは.heroの通常の子要素として振る舞わせる（絶対配置をやめる） */
  .hero__overlay {
    position: static;
    gap: 8px;
  }

  .hero__tag,
  .hero__headline {
    width: auto;
  }

  /* 1Day クリエイティブセミナー（SP版）: 背景ボックスなし・文字のみ */
  .hero__headline {
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 0;
    background-color: transparent;
  }

  .hero__headline-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
  }

  /* はじめの一歩！（SP版）: 背景ボックスなし・文字のみ */
  .hero__tag {
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 0;
    background-color: transparent;
  }

  .hero__tag-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #000;
  }

  /* SP版デザインには「TOP」アイコンが存在しないため非表示 */
  .hero__scroll-icon {
    display: none;
  }

  /* Frame 72内テキスト（SP版）: width:335px; font-size:16px; line-height:180%; */
  .intro {
    padding-inline: 20px;
  }

  .intro__text {
    font-size: 16px;
  }

  .hero__tag-text {
    font-size: 20px;
    line-height: 1.4;
  }

  .hero__headline-text {
    font-size: 26px;
    line-height: 1.4;
  }
}