/* 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;
}

.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,
.char-counter {
    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: baseline;
    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;
    flex-shrink: 0;
    margin-top: 4px;
    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;
    margin-top: 20px;
    transition: background-color 0.3s ease;

    /* レイアウトの変更 */
    position: relative; /* 矢印を配置するための基準 */
    text-align: center; /* テキストを中央揃え */
}

.submit-button:hover {
    background-color: #c00d48;
}

.submit-button::before {
    content: none;
}
/* 右端に配置する矢印アイコン */
.submit-button::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;

    /* キャプチャを参考にした右向き矢印のSVG */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12H20M14 6L20 12L14 18' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;

    /* 矢印をボタンの右端に配置 */
    position: absolute;
    right: 20px; /* 右端からの距離 */
    top: 50%;
    transform: translateY(-50%); /* 上下中央揃え */
}

.back-button {
    /* デザインの基本設定 */
    background: #FFFFFF; /* 背景を白に変更 */
    color: #002D64;      /* 文字色を青に変更 */
    border: 2px solid #002D64; /* 青い枠線を追加 */

    /* レイアウトと装飾 */
    font-size: 16px;
    font-weight: 700;
    padding: 16px 20px;
    border-radius: 100px;
    width: 100%;
    cursor: pointer;
    text-align: center; /* テキストを中央揃え */
    position: relative; /* 矢印を配置するための基準点 */
    transition: background-color 0.3s ease;
}

/* マウスが乗った時のスタイル */
.back-button:hover {
    background-color: #f0f4f9; /* ホバー時に薄い青色に変更 */
}

/* 矢印アイコンの設定 */
.back-button::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    /* キャプチャに合わせた左向き矢印のSVGアイコン（色も#002D64に設定） */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12H4M10 6L4 12L10 18' stroke='%23002D64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;

    /* 矢印をボタンの左側に配置 */
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* 不要な ::after 要素を削除 */
.back-button::after {
    content: none;
}

/* 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;
}

.input-field.is-invalid,
.select-field.is-invalid,
.textarea-field.is-invalid {
    background-color: #FEF7FA;
    border-color: #E1005A;
}

.radio-group.is-invalid,
.checkbox-group.is-invalid {
    background-color: #FEF7FA;
}

.radio-group.is-invalid .radio-item input[type="radio"],
.checkbox-group.is-invalid .checkbox-item input[type="checkbox"] {
    border-color: #E1005A;
}

.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;
}