@charset 'utf-8';

/*=========================
エントリーフォーム
Snow Monkey Forms が出力する .smf-* を、サイトの既存トーンに合わせて上書きする。
幅・余白は % と clamp() で組み、ブレイクポイント間でも破綻しないようにする。
SMF 本体の CSS は entry.css より後に読み込まれるため、
上書き用のセレクタは .p-entry を前置して詳細度を 1 段上げている。
=========================*/

.p-entry__lead {
    max-width: 900px;
    margin: 0 auto clamp(32px, 4vw, 56px);
}
/* 送信完了画面では入力用の案内文を出さない。
   案内文はフォームの外側にあるため、後続のフォームの状態を :has() で見て隠す。 */
.p-entry .p-entry__lead:has(~ .p-entry__form form[data-screen="complete"]) {
    display: none;
}
.p-entry__lead-txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}
.p-entry__lead-note {
    font-size: 14px;
    font-weight: 400;
    color: #8e8e8e;
    margin-top: 12px;
}
.p-entry__required {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background-color: var(--color-gold);
    border-radius: 3px;
    padding: 4px 8px;
    margin-right: 6px;
}

.p-entry .p-entry__form {
    max-width: 900px;
    margin: 0 auto;
}

/* --- 1項目（ラベル＋入力欄） --- */
.p-entry .p-entry__form .smf-item {
    display: grid;
    /* ラベル列は最小26%・最大260pxで可変。狭い画面では1カラムへ落とす */
    grid-template-columns: minmax(26%, 260px) 1fr;
    column-gap: clamp(16px, 3%, 40px);
    row-gap: 10px;
    align-items: start;
    padding: clamp(18px, 2.4vw, 28px) 0;
    border-bottom: 1px solid var(--color-main);
}
.p-entry .p-entry__form .smf-item:first-of-type {
    border-top: 1px solid var(--color-main);
}
.p-entry .p-entry__form .smf-item__col--label {
    padding-top: 10px;
}
.p-entry .p-entry__form .smf-item__label {
    display: flex;
    align-items: center;
}
/* 必須バッジは .smf-item__label__text の末尾に入る（SMF のブロック検証の都合で
   ラベルテキストの外には出せない）。テキスト側を flex にして
   バッジを margin-left:auto でラベル列の右端へ寄せる。 */
.p-entry .p-entry__form .smf-item__label__text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
    flex: 1 1 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-gold);
}
.p-entry .p-entry__form .smf-item__label__text a {
    color: var(--color-gold);
    text-decoration: underline;
}
.p-entry .p-entry__form .smf-item__label__required {
    display: inline-block;
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background-color: var(--color-gold);
    border-radius: 3px;
    padding: 4px 8px;
}
.p-entry .p-entry__form .smf-item__description {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #8e8e8e;
    margin-top: 8px;
}

/* --- 入力欄 --- */
.p-entry .p-entry__form .smf-item__controls {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5%, 16px);
}
.p-entry .p-entry__form .smf-item__controls > * {
    /* 姓名など横並びの2つは半分ずつ、単独なら全幅 */
    flex: 1 1 min(100%, 200px);
}
.p-entry .p-entry__form .smf-text-control__control,
.p-entry .p-entry__form .smf-textarea-control__control,
.p-entry .p-entry__form .smf-select-control__control {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: #fff;
    border: 1px solid var(--color-main);
    border-radius: 6px;
    padding: 12px 16px;
    transition: border-color 0.25s ease;
}
.p-entry .p-entry__form .smf-text-control__control:focus,
.p-entry .p-entry__form .smf-textarea-control__control:focus,
.p-entry .p-entry__form .smf-select-control__control:focus {
    border-color: var(--color-gold);
    outline: none;
}
.p-entry .p-entry__form .smf-text-control__control::placeholder,
.p-entry .p-entry__form .smf-textarea-control__control::placeholder {
    color: #bdbdbd;
}
.p-entry .p-entry__form .smf-textarea-control__control {
    min-height: 180px;
    resize: vertical;
}

/* セレクトは矢印を自前で描く */
.p-entry .p-entry__form .smf-select-control {
    display: block;
    position: relative;
    width: 100%;
}
.p-entry .p-entry__form .smf-select-control__control {
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
}
.p-entry .p-entry__form .smf-select-control::after {
    content: "";
    display: block;
    width: 10px;
    height: 6px;
    background-color: var(--color-gold);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* --- ラジオ・チェックボックス ---
   選択肢は .smf-*-control__control（role="radiogroup"）の中に .smf-label で並ぶため、
   横並びの指定はラッパーではなく __control 側に置く。 */
.p-entry .p-entry__form .smf-radio-buttons-control,
.p-entry .p-entry__form .smf-checkboxes-control {
    padding-top: 10px;
}
.p-entry .p-entry__form .smf-radio-buttons-control__control,
.p-entry .p-entry__form .smf-checkboxes-control__control {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: 12px;
}
.p-entry .p-entry__form .smf-label {
    display: inline-flex;
}
.p-entry .p-entry__form .smf-radio-button-control,
.p-entry .p-entry__form .smf-checkbox-control {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    font-size: 16px;
    cursor: pointer;
}
.p-entry .p-entry__form .smf-radio-button-control__control,
.p-entry .p-entry__form .smf-checkbox-control__control {
    width: 18px;
    height: 18px;
    /* ブラウザ既定の非対称なマージンを消して、ラベル文字と中心を揃える */
    margin: 0;
    cursor: pointer;
}
/* SMF は appearance:none で見た目を自前描画しているため accent-color は効かない。
   選択時の青（#3a87fd）とフォーカス時の水色（#85b7d9）をゴールドに置き換える。
   選択マーク（::before）は SMF が白で描いているのでそのまま使う。 */
.p-entry .p-entry__form .smf-radio-button-control__control:checked,
.p-entry .p-entry__form .smf-checkbox-control__control:checked {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}
.p-entry .p-entry__form .smf-radio-button-control__control:focus,
.p-entry .p-entry__form .smf-checkbox-control__control:focus {
    border-color: var(--color-gold);
}

/* --- ファイル添付 --- */
.p-entry .p-entry__form .smf-file-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.p-entry .p-entry__form .smf-file-control__label {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--color-gold);
    background-color: var(--color-light-gold);
    border: 1px solid var(--color-main);
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}
.p-entry .p-entry__form .smf-file-control__label:hover {
    color: #fff;
    background-color: var(--color-gold);
}
.p-entry .p-entry__form .smf-file-control__filename {
    font-size: 14px;
    color: #8e8e8e;
}
.p-entry .p-entry__form .smf-file-control__filename--has-file {
    color: var(--color-text);
}
.p-entry .p-entry__form .smf-file-control__clear {
    font-size: 13px;
    color: #8e8e8e;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

/* --- プライバシーポリシー同意 ---
   ラベル列を使わず「チェックボックス＋文言」を1行で中央に並べる。
   SMF はチェックボックスのラベルを esc_html() で出力するためリンクを入れられないので、
   表示する文言はリンク付きの項目名（ラベル）側を使い、順序を入れ替えて
   チェックボックスを先頭に出す。上下の罫線は出さない。 */
.p-entry .p-entry__form .p-entry__agreement {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* エラー表示でチェックボックス側が縦に伸びても行頭がずれないよう上揃えにし、
       チェックボックスの行高をラベル文字に合わせて中心を揃える。 */
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 8px;
    border-bottom: none;
}
.p-entry .p-entry__form .p-entry__agreement .smf-checkbox-control {
    min-height: 1.6em;
}
/* 直前の項目の下罫線が同意欄の「上の線」になるため、これも消す */
.p-entry .p-entry__form .smf-item:has(+ .p-entry__agreement) {
    border-bottom: none;
}
.p-entry .p-entry__form .p-entry__agreement .smf-item__col--controls {
    order: -1;
}
.p-entry .p-entry__form .p-entry__agreement .smf-item__col--label {
    padding-top: 0;
}
.p-entry .p-entry__form .p-entry__agreement .smf-item__label__text {
    flex: 0 1 auto;
}
.p-entry .p-entry__form .p-entry__agreement .smf-item__controls > * {
    flex: 0 0 auto;
}
.p-entry .p-entry__form .p-entry__agreement .smf-checkboxes-control {
    padding-top: 0;
}
/* SMF が出すチェックボックスのラベル（同意する）は、
   支援技術向けに残したまま視覚的にのみ隠す。表示はリンク付きの項目名が担う。 */
.p-entry .p-entry__form .p-entry__agreement .smf-checkbox-control__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* 確認画面では同意欄を出さない（入力画面で確認済みのため） */
.p-entry .p-entry__form form[data-screen="confirm"] .p-entry__agreement {
    display: none;
}
/* 確認画面では入力時の補足説明も不要なので隠す */
.p-entry .p-entry__form form[data-screen="confirm"] .smf-item__description {
    display: none;
}
/* エラー文言はチェックボックス側の列に入るため、そのままだと列幅が広がって
   チェックボックスと文言が離れてしまう。列から浮かせて行の下に中央表示する。 */
.p-entry .p-entry__form .p-entry__agreement {
    position: relative;
}
.p-entry .p-entry__form .p-entry__agreement .smf-error-messages {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(18px, 2.4vw, 28px);
    text-align: center;
    margin-top: 0;
}
.p-entry .p-entry__form form[data-screen="invalid"] .p-entry__agreement {
    /* 浮かせたエラー文言（1行分）と行間の分だけ下に余白を確保する */
    padding-bottom: calc(clamp(18px, 2.4vw, 28px) + 1.8em + 8px);
}

/* --- reCAPTCHA の注記 --- */
.p-entry .p-entry__form .p-entry__recaptcha {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #8e8e8e;
    text-align: center;
    margin-top: clamp(20px, 2.6vw, 28px);
}
.p-entry .p-entry__form .p-entry__recaptcha a {
    color: inherit;
    text-decoration: underline;
}

/* --- エラー表示 ---
   SMF が出すのは .smf-error-messages 1枚だけ（中に .smf-error-message は無い）。
   色は SMF 側の赤をそのまま使い、サイズと余白だけ揃える。 */
.p-entry .p-entry__form .smf-item__controls .smf-error-messages {
    flex-basis: 100%;
}
.p-entry .p-entry__form .smf-error-messages {
    font-size: 13px;
    line-height: 1.8;
    margin-top: 8px;
}

/* --- 送信ボタン --- */
.p-entry .p-entry__form .smf-action {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: clamp(32px, 4vw, 52px);
}
/* ボタンは span.smf-button-control > button の入れ子。
   幅は外側の span で決め、button は 100% で追随させる。 */
.p-entry .p-entry__form .smf-button-control {
    display: block;
    width: min(100%, 320px);
    margin: 0;
}
/* ボタン間隔は .smf-action の gap で取る。
   SMF 側の隣接セレクタ（.smf-action .smf-button-control + .smf-button-control）は
   同じ詳細度で後読みのため勝てない。同じ形で受けて打ち消す。
   残すと縦積み（SP）のときに左右のズレになる。 */
.p-entry .p-entry__form .smf-action .smf-button-control + .smf-button-control {
    margin-left: 0;
}
/* 確認画面へ / 戻る / 送信する は共通で、金色の文字＋白地。ホバーで反転させる。
   SMF が background-image に薄いグラデーションを敷いていて
   background-color だけでは隠れてしまうため、none で消す。 */
.p-entry .p-entry__form .smf-button-control__control {
    width: 100%;
    min-height: 60px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-gold);
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--color-gold);
    border-radius: 30px;
    padding: 0 24px;
    cursor: pointer;
    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}
.p-entry .p-entry__form .smf-button-control__control:hover {
    color: #fff;
    background-color: var(--color-gold);
}
/* 確認画面の「送信する」は主要動作なので、既定を反転（ゴールド地＋白文字）にする */
.p-entry .p-entry__form .smf-button-control__control[data-action="complete"] {
    color: #fff;
    background-color: var(--color-gold);
}
.p-entry .p-entry__form .smf-button-control__control[data-action="complete"]:hover {
    color: var(--color-gold);
    background-color: #fff;
}

/* --- 確認画面 ---
   入力欄と同じ .smf-placeholder の中に、値がそのままテキストで差し替わる。
   ラベル列の padding-top に合わせて行位置を揃え、
   姓名などは入力時のような等分割ではなく内容幅で並べる。 */
.p-entry .p-entry__form form[data-screen="confirm"] .smf-item__controls {
    font-size: 16px;
    line-height: 1.8;
    padding-top: 10px;
    column-gap: 0.5em;
}
/* 姓名などの短い値は内容幅で横に並べたいが、
   縮まない指定（flex: 0 0 auto）だと自由記述のような長文が枠外へはみ出す。
   縮小を許可し min-width: 0 で折り返せるようにする。 */
.p-entry .p-entry__form form[data-screen="confirm"] .smf-item__controls > * {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* --- 完了画面 --- */
.p-entry .p-entry__form .smf-complete-content {
    font-size: 16px;
    line-height: 2;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .p-entry__lead-txt {
        font-size: 15px;
    }
    /* ラベルを入力欄の上に積む */
    .p-entry .p-entry__form .smf-item {
        grid-template-columns: 100%;
        row-gap: 8px;
    }
    .p-entry .p-entry__form .smf-item__col--label {
        padding-top: 0;
    }
    .p-entry .p-entry__form .smf-item__controls > * {
        flex-basis: min(100%, 140px);
    }
    .p-entry .p-entry__form .smf-text-control__control,
    .p-entry .p-entry__form .smf-textarea-control__control,
    .p-entry .p-entry__form .smf-select-control__control {
        padding: 11px 14px;
    }
    .p-entry .p-entry__form .smf-action {
        flex-direction: column-reverse;
        align-items: center;
    }
}