:root {
    --deep: #0b2f2a;
    --deep-ink: #e9f6f1;
    --ink: #0f1417;
    --muted: #5b666e;
    --accent: #0a7b61;
    --card: #ffffff;
    --rule: #e9edf1;
    --radius: 14px;
    --max: 520px;
    --foil-top: 30%;
    --foil-left: 18%;
    --foil-rot: -12deg;
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", Roboto, Helvetica, Arial;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%
}

a {
    color: inherit;
    text-decoration: none
}

.shell {
    width: min(100%, var(--max));
    margin: 0 auto;
    padding: 12px
}

/* ===== HERO（グラデ追加） ===== */
.hero {
    position: relative;
    background: var(--deep);
    background-image:
        radial-gradient(120% 90% at 110% 110%, rgb(255 255 255 / 27%) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, #0b2f2ae0 0%, #0e6354 45%, #08231f 100%);
    color: var(--deep-ink);
    border-radius: 18px;
    min-height: 32vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 8px 12px 12px;
}

/* ===== Brand：画像ロゴ ===== */
.brand {
    grid-row: 1;
    justify-self: start;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 18px 7px 4px;
    display: inline-flex;
    align-items: center;
}

.brand-logo {
    height: 27px;
    width: auto;
    display: block
}

/* ===== ヒーローテキスト ===== */
.hero-main {
    grid-row: 2;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 17px;
    padding: 6px 10px 10px 4px;
    min-height: 0;
    width: 100%;
    z-index: 5;
}

.tagline {
    margin: 0;
    font-size: 12.5px;
    color: #d9eee7;
    opacity: .95
}

.title {
    margin: 0 0 20px;
    font-weight: 900;
    line-height: 1.38;
    letter-spacing: .01em;
    font-size: 25px;
}

.title span {
    display: block
}

/* ===== 右下：本（背景画像） ===== */
.hero-fig {
    position: absolute;
    right: -10px;
    bottom: -12px;
    /* width: 48vw; */
    width: 250px;
    /* max-width: 220px;
    min-width: 160px; */
    display: block;
    margin: 0;
    z-index: 1;
}

.hero-fig .book-bg {
    width: 100%;
    aspect-ratio: 11/8;
    background-image: url("../img/book.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    pointer-events: none;
    user-select: none;
}

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

/* ===== FORM ===== */
.card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 14px;
    margin: 14px 0 28px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .08)
}

.form-title {
    margin: 0;
    font-weight: 900;
    font-size: 18px;
    color: #0f3f35;
    text-align: center
}

.form-sub {
    margin: 6px 0 10px;
    font-size: 13px;
    color: #345b53;
    text-align: center
}

.row {
    margin: 15px 0;
}

label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 3px
}

.req {
    color: #b02e2e;
    margin-left: .35ch;
    font-weight: 900
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
    width: 100%;
    padding: 13px 12px;
    border-radius: 12px;
    border: 1px solid #eceef0;
    background: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    color: var(--ink);
}

/* === Selectのルックスを入力と揃える === */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 40px;
    /* 矢印分の余白 */
}

/* iOS/Safariで矢印が被らないように */
@supports (-webkit-touch-callout: none) {
    select {
        padding-right: 44px;
    }
}

/* 旧IE系のデフォルト矢印を消す（ほぼ不要だが保険） */
select::-ms-expand {
    display: none;
}

input:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10, 123, 97, .15)
}

.hint {
    font-size: 11px;
    color: #959595;
    margin: 3px 0 0
}

/* ▼ 未整合時の視覚ハイライト（行ごと） */
.invalid-field input,
.invalid-field select {
    border-color: #b02e2e !important;
    box-shadow: 0 0 0 3px rgba(176, 46, 46, .18) !important;
}

.checkboxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dfe4ea;
    border-radius: 12px;
    background: #fff
}

.check input {
    width: 18px;
    height: 18px
}

/* 送信部 */
.submit {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7ch;
    padding: 14px 16px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    transition: transform .12s ease, background .2s ease, color .2s ease, opacity .2s ease;
}

.btn:active {
    transform: translateY(1px)
}

/* 無効時：色反転 */
.btn.is-disabled,
.btn:disabled {
    background: #fff;
    color: var(--accent);
    border-color: var(--accent);
    opacity: .9
}

/* クリック捕捉用のガード（無効時のみ表示） */
.btn-wrap {
    position: relative
}

.btn-guard {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: not-allowed;
    border-radius: 999px;
    display: none;
}

.btn-guard.is-live {
    display: block
}

/* ヒント表示 */
.btn-hint {
    display: none;
    text-align: center;
    color: #b02e2e;
    font-size: 12.5px;
    font-weight: 700;
    margin-top: 6px
}

.btn-hint.is-visible {
    display: block
}

/* ちょい揺れアニメ（注意喚起） */
@keyframes shake {

    10%,
    90% {
        transform: translateX(-1px)
    }

    20%,
    80% {
        transform: translateX(2px)
    }

    30%,
    50%,
    70% {
        transform: translateX(-3px)
    }

    40%,
    60% {
        transform: translateX(3px)
    }
}

.shake {
    animation: shake .35s linear 1
}

/* 未入力ターゲットのflash強調 */
@keyframes flash {
    0% {
        box-shadow: 0 0 0 rgba(10, 123, 97, 0)
    }

    30% {
        box-shadow: 0 0 0 6px rgba(10, 123, 97, .22)
    }

    100% {
        box-shadow: 0 0 0 rgba(10, 123, 97, 0)
    }
}

.flash {
    animation: flash 800ms ease 1;
    border-radius: 12px
}

.error {
    display: none;
    margin: 6px 0 0;
    color: #b02e2e;
    font-size: 12.5px;
    font-weight: 700
}

.invalid .error {
    display: block
}

@media (min-width:768px) {
    .shell {
        padding: 24px
    }
}



/* === Success Transition Helpers === */
.fade-out-fast {
    opacity: 0 !important;
    transition: opacity .24s ease;
}

.success-enter {
    opacity: 0;
    transform: translateY(8px);
}

.success-enter-active {
    opacity: 1;
    transform: none;
    transition: opacity .35s ease, transform .35s ease;
}

/* 成功時にタイトル/サブを非表示にする（保険） */
.scouter-success .form-title,
.scouter-success .form-sub {
    display: none !important;
}











/* ---- Selectのプレースホルダは薄色、選択後は本文色 ---- */
/* 値が空（先頭の disabled option）＝invalid の時は薄色 */
select:required:invalid {
    color: var(--muted);
}

/* ドロップダウンリスト内の先頭項目も薄色 */
option[value=""] {
    color: var(--muted);
}

/* 通常時（選択後）は本文色（上の共通ルールで var(--ink) になっています） */

/* JSで付与するクラス：未選択＝薄色 */
select.placeholder {
    color: var(--muted);
}


/* ---- Select プレースホルダ薄色（未選択）／選択後は本文色 ---- */
select:required:invalid {
    color: var(--muted);
}

option[value=""] {
    color: var(--muted);
}

/* ---- 入力完了（row--done）で緑ハイライト＋チェックアイコン ---- */
.row--done input,
.row--done select {
    border-color: #074a3b;
}

/* テキスト系にチェックアイコン */
.row--done input[type="text"],
.row--done input[type="email"],
.row--done input[type="tel"] {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230a7b61' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

/* セレクトは矢印＋チェックの2レイヤー */
.row--done select {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230a7b61' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: right 12px center, right 36px center;
    background-size: 14px, 18px;
    padding-right: 60px;
}

/* ---- 触った後だけ（touched）エラーハイライト ---- */
.touched:invalid {
    border-color: #b02e2e !important;
    box-shadow: 0 0 0 3px rgba(176, 46, 46, .18) !important;
}

.invalid-field label {
    color: #b02e2e;
}

/* 既存のエラー強調を補強 */