/* ==================================================
  AIO / GEO / Responsive Design Base
  単位：remベース（1rem = 16px基準）
================================================== */
:root {
    --text-color: #333;
    --sub-text: #666;
    --bg-color: #fafafa;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: "yu-gothic-pr6n", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
    padding: env(safe-area-inset-top, 1rem) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 1rem) env(safe-area-inset-left, 0);
    width: 100%;
    overflow-x: hidden; 
}

/* ==================================================
  画像のはみ出しを防ぐ基本リセット
================================================== */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像の下にできる謎の隙間を消す */
}

/* --------------------------------------------------
  ラッパー & メイン
-------------------------------------------------- */
.diagnosis-wrapper {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    min-height: calc(100vh - env(safe-area-inset-top, 1rem) - env(safe-area-inset-bottom, 1rem));
    min-height: calc(100dvh - env(safe-area-inset-top, 1rem) - env(safe-area-inset-bottom, 1rem));
    display: flex;
    flex-direction: column;
    overflow-x: hidden; 
    box-shadow: 0 0 20px rgba(0,0,0,0.02);
}

.diagnosis-main {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ==================================================
  ヘッダー・進捗バー周り
================================================== */
.progress-container {
    margin-bottom: 1rem;
}

.progress-text {
    text-align: right;
    font-family: "yu-mincho-pr6n", "Yu Mincho", "游明朝", serif;
    color: #888;
    font-size: 13px;
    letter-spacing: 0.05em;
    margin-top: 8px;
}

.diagnosis-header {
    text-align: center;
    /* 余白は内部のpタグ（ガイドテキスト）で持たせるためリセット */
}

/* ==================================================
  診断TOP・質問ページの共通タイトル（トンマナ統一版）
================================================== */
/* VOGUE風 TOPページ大タイトル */
.app-main-title {
    font-family: "yu-mincho-pr6n", "Yu Mincho", "游明朝", serif;
    font-size: 24px;
    color: #5D56AB;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
    margin-bottom: 3rem; /* 少し余白を広げて質問文と分離させます */
}

.app-main-title::before {
    content: 'COURSE DIAGNOSIS';
    display: block;
    font-family: Didot, "Bodoni MT", "Times New Roman", serif;
    font-size: 11px;
    color: #D94A95;
    letter-spacing: 0.25em;
    margin-bottom: 6px;
    font-weight: 400;
}

/* 全質問ページの共通タイトル（気になるジャンルは？ / 特に興味があるのは？ など） */
.diagnosis-header h1,
.diagnosis-header .question-title {
    font-family: "yu-mincho-pr6n", "Yu Mincho", "游明朝", serif;
    font-size: 18px; /* TOPページに合わせた上品なサイズ */
    color: #333; /* 重すぎないダークグレー */
    text-align: center;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* 共通ガイドテキスト（※1つ選んで... など） */
.diagnosis-header p,
.diagnosis-header .guide-text {
    font-family: "yu-mincho-pr6n", "Yu Mincho", "游明朝", serif; /* 游明朝で統一 */
    text-align: center;
    color: #666;
    font-size: 13px;
    margin-bottom: 1rem; /* スマホ画面に合わせた絶妙な余白 */
    font-weight: 400;
    margin-top: 0;
}

/* --------------------------------------------------
  選択肢リスト（グリッドレイアウト）
-------------------------------------------------- */
.choice-list {
    display: grid;
    /* ★魔法1：文字が大きくてもカードが画面外に押し出されないよう強制制御 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem; /* iPhone5でも収まるように隙間を少し詰める */
    margin-bottom: 1.5rem;
}

.choice-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 5.5rem;
    /* ★魔法2：文字エリアを限界まで広げるため、左右の余白を薄くする */
    padding: 0.75rem 0.25rem; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    min-width: 0; /* フレックス/グリッドの破綻防止 */
}

.choice-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

/* メインの英語テキスト */
.choice-card h2 {
    font-family: "Didot LT Pro", "Didot", "Bodoni MT", "Times New Roman", serif;
    /* ★魔法3：通常は大きく、iPhone5の時だけ自動で縮小される計算式 */
    font-size: clamp(1.2rem, 7vw, 1.75rem); 
    font-weight: normal;
    letter-spacing: 0.03em;
    margin: 0 0 0.25rem 0;
    line-height: 1.1;
    word-break: keep-all;
}

.choice-card p {
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 0.6875rem;
    color: var(--sub-text);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* 1列表示（トータルプロデュース用） */
.full-width {
    grid-column: 1 / 3;
    min-height: 4.5rem;
    padding-left: 0.1rem;  /* 限界まで文字を広げるための余白調整 */
    padding-right: 0.1rem;
}

/* --------------------------------------------------
  クライアント指定：テーマカラー設定
-------------------------------------------------- */
.card-color h2   { color: #e185b3; }
.card-makeup h2  { color: #f4b083; }
.card-fashion h2 { color: #548dd4; }
.card-mind h2    { color: #9a6fd3; }

/* トータルプロデュース（1.6remまで拡大！） */
.card-total h2 { 
    color: #908574; 
    /* ★クライアント要望の「1.6rem」に設定！ iPhone5では7vw(約22px)に自動縮小して崩れを防ぐ */
    font-size: clamp(1rem, 7.5vw, 1.65rem); 
    white-space: nowrap; 
    letter-spacing: -0.02em; /* 文字をほんの少しだけ詰めて、より大きく見せるテクニック */
}

/* --------------------------------------------------
  iPhone 5 / SE（幅320px等）向けの最終セーフティネット
-------------------------------------------------- */
@media screen and (max-width: 350px) {
    .diagnosis-main {
        padding: 1rem 0.5rem; /* 画面が極端に狭い場合、外側の余白を削ってカードを広くする */
    }
}

/* --------------------------------------------------
  フッター
-------------------------------------------------- */
footer {
    margin-top: auto;
    width: 100%;
}

.footer__logo {
    text-align: center;
    padding: 0.75rem;
}

.footer__logo img {
    max-width: 100px;
    height: auto;
}

footer #fcopy {
    padding: 0.5625rem 0.5rem;
    line-height: 1;
    color: #ffffff;
    background: #5d56ab;
    text-align: center;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
}

/* ==================================================
  STEP.2以降用：画像付き選択カード（1:1正方形）
================================================== */
.image-card {
    padding: 0; /* 画像をカードの端まで広げるため、内側余白をリセット */
    justify-content: flex-start;
    min-height: auto;
}

/* 1:1の正方形画像 */
.image-card .card-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eaeaea;
}
/* テキストエリア */
.image-card .card-content {
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

/* ★修正箇所：日本語メインのコース名 */
.image-card h2 {
    /* Adobeフォントが遅れても崩れないよう、OS標準の游ゴシックもバックアップに指定 */
    font-family: "yu-gothic-pr6n", "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
    font-size: 0.875rem; /* 14px: スマホでも2列で収まるサイズ */
    font-weight: 500; /* ★ 600から500に変更。これで全ページ強制的にスタイリッシュな太さに統一されます！ */
    color: #333;
    letter-spacing: 0.02em;
    margin: 0 0 0.3rem 0;
    line-height: 1.2;
}

/* ★修正箇所：コースの補足説明 */
.image-card p {
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 0.71875rem; /* 11.5px: 以前の10pxから一回り大きく可読性アップ */
    /*color: var(--sub-text);*/
				color:#888888;
    margin: 0;
    font-weight: 500;
    /*letter-spacing: 0.02em; *//* h2とのバランスを取るために少し調整 */
    line-height: 1.3;
				padding-top: 0.6rem;
}

/* 戻るボタンエリア */
.diagnosis-back {
    text-align: center;
    margin-top: 1.5rem;
    padding-bottom: 1rem;
}
.diagnosis-back a {
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 0.75rem;
    color: #5d56ab;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    padding: 0.5rem 1rem;
}

/* ==================================================
  テーマカラー設定（ラッパーにクラスを付与して切り替え）
================================================== */
/* パーソナルカラー系（初級・通学・オンライン・16タイプなど） */
.theme-personal   { --main-color: #e185b3; --bg-color: #faeaf1; }
/* 自分スタイル・メンズ */
.theme-style      { --main-color: #548dd4; --bg-color: #eaf1fa; }
/* 身のこなし・メイク系・ビューティ・コスメ */
.theme-makeup     { --main-color: #f4b083; --bg-color: #fdf3eb; }
/* 色彩心理 */
.theme-psychology { --main-color: #9a6fd3; --bg-color: #f4eef9; }
/* トータル（イメージアナリスト・イメコン） */
.theme-total      { --main-color: #908574; --bg-color: #fbf9f6; }
.theme-behavior   { 
    --main-color: rgba(72, 166, 141, 1.00);  
    --bg-color: rgba(183, 231, 205, 1.00); 
}

/* ==================================================
  STEP.3：結果ページ専用スタイル（以前のデザインを完全再現）
================================================== */
/* 結果ヘッダー */
.result-header {
    text-align: center;
    margin-bottom: 30px;
    animation: fadeInDown 0.8s ease-out;
}
.result-header p {
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 14px;
    margin-bottom: 5px;
    color: #666;
}
.result-header h1 {
    font-size: 18px;
    color: #ccc;
    line-height: 1.4;
    font-family: "yu-mincho-pr6n", "Yu Mincho", "游明朝", serif;
}
.result-header h1 span {
    font-size: 22px;
    color: var(--main-color); /* テーマ色に自動変化 */
}

/* コースイメージ画像 */
.result-image {
    margin-bottom: 30px;
    text-align: center;
    animation: fadeInDown 0.8s ease-out 0.1s both; 
}
.result-image img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    border: 1px solid #eee;
}

/* おすすめ理由のカード */
.result-card {
    background-color: #fff;
    border: 2px solid var(--bg-color); /* テーマ色に自動変化 */
    padding: 25px 20px;
    margin-bottom: 35px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.result-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--main-color);
    border-bottom: 2px dashed var(--bg-color);
    padding-bottom: 10px;
    text-align: center;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 700;
}
.result-card p {
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}

/* メリットの箇条書きリスト */
.benefit-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.benefit-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #222;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 500;
}
.benefit-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main-color);
    font-weight: bold;
}
.benefit-list li span {
    font-weight: 400;
    font-size: 11px;
}

/* 動画埋め込みエリア */
.movie-area {
    text-align: center;
    margin-bottom: 35px;
    animation: fadeInDown 0.8s ease-out 0.2s both;
}
.movie-title {
    font-family: "didot-lt-pro", serif;
    font-size: 20px;
    color: var(--main-color);
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}
.movie-desc {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 500;
}
.movie-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    background-color: #000;
    margin: 0 auto;
}
.movie-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* CTA（コンバージョンボタン）エリア */
.cta-area {
    text-align: center;
    margin-bottom: 35px;
}
.cta-area p {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--main-color);
    font-family: "yu-gothic-pr6n", sans-serif;
}
.cta-button {
    display: block;
    background-color: var(--main-color);
    color: #fff;
    padding: 18px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 18px;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.cta-button .sub-txt {
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 4px;
    opacity: 0.9;
    font-family: "yu-gothic-pr6n", sans-serif;
}

/* サブCTA・その他 */
.contact-area {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}
.contact-area p {
    font-size: 13px;
    color: #333;
    margin: 0 0 15px 0;
    line-height: 1.5;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 500;
}
.contact-button {
    display: inline-block;
    border: 2px solid #ccc;
    color: #555;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 500;
    background-color: #fff;
}

.diagnosis-footer {
    text-align: center;
    margin-top: 40px;
    padding-bottom: 20px;
}
.restart-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #888;
    text-decoration: none;
    font-size: 13px; /* 少し控えめなサイズが上品です */
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 500;
    transition: color 0.2s ease;
}
/* SVGアイコンの設定 */
.restart-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    stroke: currentColor; /* CSSのcolor（#888）と同じ色に自動でなる魔法 */
}

/* タップした時の演出（テーマカラーに光る） */
.restart-link:active {
    color: var(--main-color);
}

/* ==================================================
  卒業生インタビューエリア（結果ページ用）
================================================== */
.interview-area {
    margin-bottom: 2rem;
    animation: fadeInDown 0.8s ease-out 0.2s both; /* ふわっと登場 */
}

/* タイトル */
.interview-title {
    font-size: 1.125rem; /* 18px */
    color: var(--main-color); /* 自動的にテーマカラー（今回はゴールド）になります！ */
    margin: 0 0 1rem 0;
    text-align: center;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 700;
}

/* インタビューを囲むカード */
.interview-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden; /* はみ出した画像を丸くカット */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 柔らかい影 */
    border: 1px solid #eaeaea;
}

/* 画像部分 */
.interview-img a {
    display: block;
}
.interview-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s;
}
.interview-img a:active img {
    opacity: 0.8; /* タップした時のフィードバック */
}

/* テキスト部分 */
.interview-desc {
    padding: 1.25rem;
}
.interview-desc .highlight {
    font-weight: 700;
    color: var(--main-color); /* ここも自動でゴールドになります */
    margin-bottom: 0.5rem;
    font-size: 0.875rem; /* 14px */
    font-family: "yu-gothic-pr6n", sans-serif;
}
.interview-desc p {
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 0.8125rem; /* 13px */
    color: #444;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Instagramへのリンクボタン風 */
.insta-link {
    display: inline-flex; /* アイコンと文字を綺麗に横並び */
    align-items: center;
    font-size: 0.8125rem; /* 13px */
    color: #333;
    text-decoration: none;
    font-weight: 700;
    font-family: "yu-gothic-pr6n", sans-serif;
    background-color: #f9f9f9;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1px solid #eaeaea;
    transition: background-color 0.2s;
}
.insta-link:active {
    background-color: #f0f0f0;
}

/* ★超重要：巨大化を防ぐアイコンのサイズ指定 */
.insta-icon {
    width: 20px;
    height: auto;
    margin-right: 0.5rem;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================================================
  診断完了の特別演出（プログレスバーの代わり）
================================================== */
.diagnosis-complete {
    text-align: center;
    margin-bottom: 25px;
    animation: fadeInDown 0.8s ease-out;
}

.diagnosis-complete .complete-text {
    /* 高級感のあるDidotフォントを使用 */
    font-family: "didot-lt-pro", "Didot", "Bodoni MT", serif;
    font-size: 13px; /* 少し小さめで上品に */
    color: var(--main-color); /* コースのテーマカラーに自動で染まる */
    letter-spacing: 0.15em; /* 文字間隔を空けて洗練さを出す */
    padding: 6px 20px;
    
    /* エレガントな枠線と背景色の組み合わせ */
    border: 1px solid var(--main-color);
    background-color: var(--bg-color); /* コースの淡いテーマ背景色 */
    border-radius: 50px; /* 美しいカプセル型に */
    display: inline-block;
}

/* ==================================================
  レスポンシブ改行（PC非表示・スマホ表示）
================================================== */
/* 基本（PC・タブレット）は非表示にして改行させない */
.br-sp {
    display: none;
}

/* 画面幅が768px以下（スマホサイズ）の時だけ改行を有効にする */
@media screen and (max-width: 389px) {
    .br-sp {
        display: inline; /* <br>タグ本来の動きに戻す */
    }
}
/* 画面幅が768px以下（スマホサイズ）の時だけ改行を有効にする */
@media screen and (max-width: 769px) {
    .br-sp.SP {
        display: inline; /* <br>タグ本来の動きに戻す */
    }
}

/* ==================================================
  PC閲覧時（画面幅769px以上）のレイアウト調整
================================================== */
@media screen and (min-width: 769px) {
    /* 大枠の幅を広げて、長いコース名が収まるスペースを作る */
    .diagnosis-wrapper {
        max-width: 640px; /* 既存のスマホ用幅(480px)から拡大 */
    }

    /* 長いコース名をPCで絶対に1行に収めるための魔法 */
    .result-header h1 span {
        font-size: 26px; /* 28pxだと少し窮屈なので、PCのみほんの少しスマートに */
        white-space: nowrap; /* 強制的に1行にする（折り返し禁止） */
    }
}

/* ==================================================
  商標マーク（® / ™）を美しく上付きにする魔法
================================================== */
.mark-reg,
.mark-tm {
    font-size: 0.5em; /* 文字サイズを60%に縮小 */
    vertical-align: super; /* 上付き文字として配置 */
    line-height: 1; /* 行間が広がるのを防ぐ */
    font-weight: normal; /* 太字にならないようにする（お好みで） */
    margin-left: 0.1em; /* 前の文字とくっつきすぎないように微調整 */
}
/* ==================================================
  受講条件に関する注記ブロック（.course-notice）
================================================== */
.course-notice {
    background-color: #f8f9fa; /* うっすらとした上品なグレー背景 */
    border-left: 5px solid var(--main-color); /* テーマカラーに自動で染まる左ライン */
    padding: 16px 20px;
    margin-top: 25px; /* 上のリストとの余白 */
    border-radius: 4px; /* 全体を少しだけ丸くして柔らかい印象に */
    text-align: left;
    
    /* テキスト設定 */
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}

/* タイトル部分（※受講条件について） */
.course-notice span {
    display: block; /* ブロック要素にして改行・余白を美しく制御 */
    color: var(--main-color); /* タイトル文字もテーマカラーに連動 */
    font-weight: 700;
    margin-bottom: 6px; /* 本文との美しい間隔 */
}

/* 魔法の調整：HTMLにある<br>を非表示にする */
.course-notice br {
    display: none; /* spanのmarginで余白を正確に制御するため、<br>をCSSで消します */
}