/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

/* PC版のbody背景色拡張は不要、.containerで中央寄せするため */
.container {
    width: 100%; /* SP版は常に100% */
    max-width: 375px; /* SP版の最大コンテンツ幅 */
    margin: 0 auto;
    background: white;
    padding: 0 15px; /* SP版のガター (左右15px) */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* PC版のcontainer調整 */
@media (min-width: 768px) {
    .container {
        max-width: 750px; /* PC版の最大コンテンツ幅 (コンテンツエリア690px + 左右ガター30px * 2 = 750px) */
        padding: 0 30px; /* PC版のガター30px (左右30px) */
    }
}

/* Header */
header {
    background-color: #002D64; /* ヘッダー全体に背景色を設定 */
}
.header_inner {
    display: flex;
    padding: 18px 15px; /* SP版のガターに合わせて左右15px */
    align-items: center;
    gap: 15px;
    align-self: stretch;
    background: #002D64;
    justify-content: space-between;
    top: 0;
    width: 100%; /* SP版は100% */
    z-index: 10;
}
@media (min-width: 768px) {
    .header_inner {
        max-width: 1200px; /* PC版のヘッダー幅 */
        margin: 0 auto; /* 中央寄せ */
        padding: 18px 30px; /* PC版のガターに合わせて左右30px */
    }
}
@media (min-width: 769px) and (max-width: 954px) {
    .header_inner .logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}
.header_inner .logo span{
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
@media (max-width: 768px) {
    .header_inner .logo span{
        display: none;
    }
}

/* Footer */
footer {
    background-color: #002D64;
}
.footer_com {
    display: flex;
    padding: 30px 15px; /* SP版のガターに合わせて左右15px */
    flex-direction: column;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    background: #002D64;
}
@media (min-width: 768px) {
    .footer_com {
        max-width: 1200px; /* PC版のフッター幅 */
        margin: 0 auto; /* 中央寄せ */
        padding: 30px; /* PC版のガターに合わせて左右30px */
    }
}
.footer_com_logo {
    display: flex;
    padding: 40px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.footer_com_logo p {
    align-self: stretch;
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.footer_bottom {
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: #E1005A;
}
@media (max-width: 768px) {
    .footer_bottom{
        padding: 15px 15px 10px;
    }
}
.footer_bottom p {
    color: #FFF;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
@media (max-width: 768px) {
    .footer_bottom p:first-of-type{
        text-align: left;
    }
}

/* Section styling */
.section-header {
    padding: 30px 15px; /* SP版のガターに合わせて左右15px */
    background: white;
    text-align: center;
}
@media (min-width: 768px) {
    .section-header {
        padding: 30px 0;
    }
}
.section-header h2 {
    color: #002D64;
    font-family: 'Open Sans', sans-serif; /* H2アイキャッチにOpen Sansを適用 */
    font-weight: 700;
    margin-bottom: 10px;
    white-space: normal;
}

/* Steps */
.steps-container,
.confirmation-container,
.complete-container {
    padding: 0 15px 40px; /* SP版のガターに合わせて左右15px */
}
@media (min-width: 768px) {
    .steps-container,
    .confirmation-container,
    .complete-container {
        max-width: 450px; /* PC版のコンテンツエリア(小)の幅に設定 */
        margin: 0 auto; /* 中央寄せ */
        padding: 0 0 40px; /* PC版では左右のパディングを0に */
    }
}
.steps-container p {
    font-size: 12px;
    margin-bottom: 20px; /* SP版のガターに合わせて下に20pxの余白 */
}
.step-item {
    margin-bottom: 20px;
}
.step-wrapper { /* 新しく追加するラッパー */
    border: 1px solid #002D64;
    border-radius: 20px;
    padding: 0; /* 子要素でpaddingを調整するため0に */
    background-color: white; /* stepの背景を全て白色に */
}
.step-box {
    border: none; /* 親の.step-wrapperで境界線を持つため不要に */
    border-radius: 20px;
    padding: 20px 15px; /* SP版のガターに合わせて左右15px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: white; /* stepの背景を全て白色に */
}
@media (min-width: 768px) {
    .step-box {
        padding: 20px 30px; /* PC版のガターに合わせて左右30px */
    }
}
.step-info {
    flex: 1;
}
.step-number {
    color: #E1005A;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}
.step-title {
    color: #002D64;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 700;
}
.step-toggle {
    width: 16px;
    height: 16px;
    position: relative;
}
.step-toggle::before,
.step-toggle::after {
    content: '';
    position: absolute;
    background: #002D64;
    border-radius: 1px;
}
.step-toggle::before {
    width: 12px;
    height: 2px;
    top: 7px;
    left: 2px;
}
.step-toggle::after {
    width: 2px;
    height: 12px;
    top: 2px;
    left: 7px;
    transition: transform 0.3s ease;
}
.step-toggle.active::after {
    transform: scaleY(0); /* 縦棒を非表示に */
}
.step-description {
    background-color: white; /* 背景色を白に変更 */
    border-top: 1px dashed #b3d9ff; /* ドット線を追加 */
    border-bottom-left-radius: 20px; /* 親の角丸に合わせる */
    border-bottom-right-radius: 20px; /* 親の角丸に合わせる */
    padding: 15px 15px 15px; /* SP版の左右パディングを調整 */
    margin-top: 0; /* 上の余白をなくす */
    font-size: 14px;
    line-height: 1.8;
    display: none; /* 初期は非表示 */
}
/* 現在のステップの背景色を変更 */
.step-box.current,
.step-wrapper.current,
.step-description.current
{
    background-color: #ffc0cb;
}
@media (min-width: 768px) {
    .step-description {
        padding: 15px 30px 15px; /* PC版の左右パディングを調整 */
    }
}
.step-separator {
    width: 0;
    height: 0;
    border-left: 12.5px solid transparent; /* 三角の底辺の半分 */
    border-right: 12.5px solid transparent; /* 三角の底辺の半分 */
    border-top: 12px solid #DADADA; /* 三角の高さと色 */
    margin: 10px auto; /* 中央寄せ */
}
.step-journal-container { /* 新しく追加するラッパー */
    text-align: left; /* 左寄せに変更 */
    margin: 10px 0;
    display: flex; /* flexboxを使ってアイコンとテキストを並べる */
    align-items: center; /* 垂直方向中央寄せ */
    gap: 10px; /* アイコンとテキストの間隔 */
}
.step-journal-container::before { /* 留学ジャーナルアイコン */
    content: "留学ジャーナル"; /* テキストを追加 */
    background-color: white; /* 背景色を白に変更 */
    color: #002D64; /* 文字色をキャプチャの色に */
    border: 1px solid #002D64; /* 枠線を追加 */
    padding: 4px 8px; /* パディング */
    border-radius: 10px; /* 角丸 */
    font-size: 10px; /* フォントサイズ */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    flex-shrink: 0; /* 縮小させない */
}
.step-journal-text {
    color: #002D64;
    font-size: 14px;
    margin: 0; /* 親でマージンを調整するため0に */
}

/* Form Section */
.form-section {
    padding: 40px 15px; /* SP版のガターに合わせて左右15px */
}
@media (min-width: 768px) {
    .form-section {
        padding: 40px 0;
    }
}
.form-section-title {
    color: #002D64; /* step-titleと同じ色に */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 10px;
    text-align: center; /* 中央寄せ */
}
/* 「申込者情報」などの小見出し用 */
.form-section h2.form-section-title {
    border-bottom: none; /* 下線を削除 */
    margin-top: 30px; /* 適度な余白を追加 */
    margin-bottom: 20px; /* 適度な余白を追加 */
}
/* 新しい小見出しのスタイル */
.form-section-subtitle {
    color: #002D64; /* step-titleと同じ色に */
    font-size: 20px; /* 少し小さめに */
    font-weight: 700;
    margin-top: 30px; /* 上の要素との間隔 */
    margin-bottom: 15px; /* 下の要素との間隔 */
    text-align: left; /* 左寄せ */
    padding-left: 0; /* SP版ではpadding-leftを0に */
}
@media (min-width: 768px) {
    .form-section-subtitle {
        padding-left: 10px; /* PC版ではpadding-leftを10pxに */
    }
}
.form-group {
    margin-bottom: 20px;
    margin: 0; /* SP版は左右の余白を0に設定 */
}
@media (min-width: 768px) {
    .form-group {
        margin: 0 10px; /* PC版は左右の余白を10pxに設定 */
    }
}
.form-group label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}
.font-bold {
    font-weight: bold;
}
.form-group p.text-left {
    text-align: left;
}
.required-tag {
    background: white;
    border: 1px solid #E1005A;
    border-radius: 4px;
    color: #E1005A;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    margin-left: 5px;
    white-space: nowrap;
}
.input-field, .select-field, .textarea-field {
    width: 100%;
    padding: 15px;
    border: 1px solid #8C8C8C;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
}
.input-field::placeholder, .textarea-field::placeholder {
    color: #666666;
}
.input-half {
    width: 100%; /* SP版は100% */
    display: block; /* SP版はブロック要素に */
    margin-right: 0;
}
.input-half:nth-of-type(odd) {
    margin-right: 0; /* SP版は奇数番目の要素にマージンは不要 */
}
@media (min-width: 768px) {
    .input-half {
        width: calc(50% - 7.5px); /* PC版 */
        display: inline-block;
    }
    .input-half:nth-of-type(odd) {
        margin-right: 15px; /* PC版の奇数番目の要素にマージンを追加 */
    }
}
.input-instruction {
    font-size: 12px;
    color: #666666;
    margin-top: 5px;
}
.radio-group, .checkbox-group {
    display: flex;
    flex-direction: column;
}
.radio-item, .checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-item label, .checkbox-item label {
    font-size: 14px;
    font-weight: 400;
}
.radio-item input[type="radio"], .checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid #8C8C8C;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
}
.radio-item input[type="radio"]:checked {
    background-color: #E1005A;
    border-color: #E1005A;
}
.radio-item input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.checkbox-item input[type="checkbox"] {
    border-radius: 2px;
}
.checkbox-item input[type="checkbox"]:checked {
    background-color: #E1005A;
    border-color: #E1005A;
}
.checkbox-item input[type="checkbox"]:checked::after {
    content: '\2713'; /* Checkmark character */
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-group.inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.form-group.inline-fields > div {
    flex: 1 1 100%; /* SP版は100%幅 */
    min-width: auto; /* SP版ではmin-widthをautoに */
}
@media (min-width: 768px) {
    .form-group.inline-fields > div {
        flex: 1 1 calc(50% - 15px); /* PC版 */
        min-width: 150px; /* PC版 */
    }
}

.submit-button {
    background: #E1005A;
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 20px;
    border: none;
    border-radius: 100px;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}
.submit-button:hover {
    background-color: #c00d48;
}
.submit-button::before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
}
.submit-button::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.375 10.625L10.625 4.375M10.625 4.375L4.375 4.375M10.625 4.375V10.625" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(45deg); /* キャプチャの矢印の向きに合わせる */
    display: block;
}

/* Privacy notes and required message adjustments */
.privacy-notes, .required-instruction { /* 新しいクラスを追加 */
    font-size: 12px; /* 統一されたフォントサイズ */
    color: #666666; /* 統一された色 */
    margin-top: 20px;
    padding: 15px 0; /* SP版の左右パディングを調整 */
    line-height: 1.8;
}
@media (min-width: 768px) {
    .privacy-notes, .required-instruction {
        padding: 15px; /* PC版の左右パディングを調整 */
    }
}
.privacy-notes p {
    margin-bottom: 5px;
}

.error-message {
    color: #E1005A;
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
}

.error-summary {
    color: #E1005A;
    margin-top: 20px;
    font-weight: bold;
}

/* Responsive adjustments (basic) */
/* SP版のスタイルは@mediaを使わずベースに記述 */
/* PC版のスタイルは@media (min-width: 768px) 内に記述 */
/* 既存のmin-width/max-widthが乱立している箇所を整理 */

/* PC版のコンテンツエリア外側の余白（750px以上で左右均等に広がる） */
@media (min-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center; /* 中央寄せ */
    }
    header, footer {
        width: 100%; /* ヘッダーとフッターは100%幅 */
    }
    /* .container のスタイルは上に移動し、max-width と padding で調整 */
    .centerArea {
        max-width: 450px; /* PC版のコンテンツエリア(小)の幅に設定 */
        margin: 0 auto; /* 中央寄せ */
        padding: 0 0 40px; /* PC版では左右のパディングを0に */
    }
    /* ヘッダーとフッターの外側は、1200px以上のブラウザ幅で閲覧した場合、左右均等に背景色が広がる。 */
    @media (min-width: 1200px) {
        header .header_inner, footer .footer_com {
            width: 1200px;
            margin: 0 auto;
        }
    }
}

/* 自動入力された読み取り専用フィールドの背景色 */
.input-field[readonly],
.select-field[readonly] {
    background-color: #f0f0f0; /* 灰色 */
    cursor: not-allowed; /* カーソルを禁止マークに */
}
/* select要素はpointer-events: none; で選択不可にする場合、背景色も適用されるようにする */
.select-field[style*="pointer-events: none;"] {
    background-color: #f0f0f0; /* 灰色 */
    cursor: not-allowed;
}

/* lineブロック */
.line {
    padding: 0px 0;
    position: relative;
}
.line::before {
    position: absolute;
    content: '';
    background-image: url(/common_2025/img/line.svg);
    background-size: cover;
    width: 100%;
    height: 20px;
    left: 0;
}

/* centerAreaブロック */
.centerArea {
    padding: 60px 15px; /* SP版の左右ガター */
    position: relative;
    /* background: #F7F9FA; */
}
/* PC版でのcenterAreaの左右余白の設定 */
@media (min-width: 768px) {
    .centerArea {
        padding: 60px 0; /* PC版では左右のパディングを0に。コンテンツは.form-sectionのpaddingで調整 */
    }
}

/* Confirmation Screen specific styles */
.confirmation-container .confirmation-header {
    background-color: #FEF7FA;
    padding: 20px 15px; /* SP版の左右パディングを調整 */
    text-align: left;
    margin-bottom: 20px;
}
.confirmation-header .icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
    /* キャプチャのような色味に戻す */
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E1005A"%3E%3Cpath d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/%3E%3C/svg%3E'); /* E1005A色の感嘆符アイコン */
}
.confirmation-message {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.6;
}
/* 読み取り専用フィールドのスタイル（確認画面での入力不可制御） */
.form-section.is-confirm .input-field,
.form-section.is-confirm .select-field,
.form-section.is-confirm .textarea-field {
    background-color: #f0f0f0; /* 灰色 */
    cursor: not-allowed;
    pointer-events: none; /* クリックイベントも無効化 */
}
.form-section.is-confirm input[type="radio"],
.form-section.is-confirm input[type="checkbox"] {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7; /* チェックボックス・ラジオボタンも薄くする */
}

.confirmation-links {
    text-align: center; /* 中央配置 */
    margin-top: 20px; /* 上部の余白 */
}

.confirmation-links .back-link {
    text-decoration: underline; /* 下線を追加 */
    font-size: 16px; /* フォントサイズ */
    color: #002D64; /* 文字色 */
}
/* 既存のCSSのどこかに以下を追加 */
.divider {
    border-top: 1px dashed #b3d9ff; /* 点線 */
    margin: 30px auto; /* 上下のマージンと中央寄せ */
    width: 90%; /* 幅を調整 */
}

/* Complete Screen specific styles */
.complete-container p {
    font-size: 14px;
    margin-bottom: 20px;
}

/* --- ポップアップ --- */
.popup-trigger {
    color: #002D64;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.popup-trigger:hover {
    text-decoration: none;
}

.popup-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background-image: url(/common_2025/img/window.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-window {
    width: 315px; /* SP版のデフォルトサイズ */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    margin: 0 15px; /* SPでの左右の余白を追加 */
}

/* PC版のスタイル (ブレークポイントは既存のCSSに合わせる) */
@media (min-width: 768px) {
    .popup-window {
        width: 450px; /* PC版のサイズ */
        margin: 0; /* PCでは不要なためリセット */
    }
}

.popup-title-area {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.popup-title {
    font-size: 17px;
    line-height: 1.5;
    font-weight: bold;
    color: #333;
    text-align: center; /* 文字を中央揃えにする */
    /* 2行までに制限 */
    max-height: 51px; /* 17px * 1.5 * 2 = 51px */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.popup-content-area {
    /* 上下の余白と、コンテンツが多い場合のスクロール設定 */
    padding: 30px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.popup-footer {
    padding: 15px 20px;
    text-align: center;
    background-color: #f7f7f7;
    border-top: 1px solid #eee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.popup-close-btn {
    /* ボタンのデフォルトスタイルを解除 */
    background: none;
    border: none;
    padding: 0;
    font-weight: normal; /* 太字を解除 */

    /* リンクのような見た目を適用 */
    color: #666666;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.popup-close-btn:hover {
    /* ホバー時に下線を消す効果を追加 */
    text-decoration: none;
}

/* 「※疾患例はこちら」のテキストとリンクの位置調整 */
.input-instruction a.popup-trigger {
    margin-left: .5em;
}