/* =========================================================
   cocoro studio reserve
   Mobile responsive patch v1
   2026-09-16
   既存CSSを壊さず、一番最後に追加して使う上書き用CSS
   ========================================================= */

/* まず横スクロールの原因を止める */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body,
.site-header,
.wrap,
.hero,
.step-panel,
.card,
.sub-card,
.form-grid,
.child-fields,
.result-head,
.result-grid,
.timeline,
label {
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Safari の date/time/select が親幅を押し広げるのを防止 */
input,
select,
textarea,
button {
    max-width: 100%;
    min-width: 0;
}

input[type="date"],
input[type="time"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="text"],
select,
textarea {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Flex/Grid 子要素の intrinsic width による横はみ出し対策 */
.form-grid > *,
.child-fields > *,
.result-grid > *,
.actions > *,
.number-unit > * {
    min-width: 0;
}

/* 長い日本語テキストも画面内で折り返す */
.hero h1,
.hero p,
.hero .notice,
.section-title h2,
.card h2,
.card h3,
.caution,
.muted,
label,
button {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* 数字＋単位欄 */
.number-unit {
    width: 100%;
    min-width: 0;
}
.number-unit input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0 !important;
}
.number-unit span {
    flex: 0 0 auto;
}

/* -------- スマホ -------- */
@media screen and (max-width: 640px) {

    .site-header {
        width: 100%;
        max-width: 100%;
        height: 60px;
        padding: 0 12px;
        gap: 8px;
    }

    .brand {
        flex: 0 1 auto;
        min-width: 0;
        font-size: 17px;
        white-space: nowrap;
    }

    .step-indicator {
        flex: 0 0 auto;
        gap: 4px;
        min-width: 0;
    }

    .step-indicator span {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .step-indicator i {
        width: 8px;
    }

    .wrap {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 20px 14px 56px;
    }

    .hero {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 22px;
        padding: 0;
        overflow: hidden;
    }

    .hero > * {
        max-width: 100% !important;
    }

    .hero .eyebrow {
        font-size: 10px;
        letter-spacing: .12em;
        line-height: 1.5;
    }

    .hero h1 {
        width: 100%;
        margin: 10px 0 12px;
        padding: 0;
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.28;
        letter-spacing: 0;
        text-align: center;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .hero p {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        font-size: 14px;
        line-height: 1.8;
    }

    .hero .notice {
        display: block;
        width: 100%;
        margin: 12px 0 0;
        padding: 12px;
        font-size: 13px;
        line-height: 1.65;
        white-space: normal;
    }

    /* 公式表示・安心表示など、後から追加したhero内ブロックも強制的に画面幅へ */
    .hero div,
    .hero aside,
    .hero section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .card {
        width: 100%;
        max-width: 100%;
        margin: 0 0 16px;
        padding: 20px 16px;
        border-radius: 14px;
        overflow: hidden;
    }

    .section-title h2 {
        font-size: 23px;
        line-height: 1.4;
    }

    /* 2列フォームはスマホで必ず1列 */
    .form-grid.two {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px;
    }

    /* お子さま入力もスマホで1列 */
    .child-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .child-card {
        width: 100%;
        max-width: 100%;
        padding: 14px;
    }

    /* STEP1の撮影種類。小さい端末では1列に落とす */
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    .select-card {
        min-width: 0;
        padding: 14px 11px;
        min-height: 94px;
    }

    .select-card b {
        font-size: 14px;
        line-height: 1.45;
    }

    .select-card small {
        font-size: 11px;
        line-height: 1.5;
    }

    /* ボタン */
    .actions {
        width: 100%;
        max-width: 100%;
    }

    .actions.right,
    .actions.split {
        flex-direction: column;
        align-items: stretch;
    }

    .actions button,
    .primary,
    .secondary,
    .ghost {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        line-height: 1.45;
    }

    /* 結果画面 */
    .result-head {
        width: 100%;
        max-width: 100%;
        display: block;
    }

    .result-head h2 {
        font-size: 23px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .result-head button {
        width: 100%;
    }

    .result-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    .line-item {
        gap: 10px;
        align-items: flex-start;
    }

    .line-item > * {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .total-row {
        gap: 10px;
        align-items: flex-end;
    }

    .total-row strong {
        font-size: 24px;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .timeline-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
    }

    .agree {
        width: 100%;
        align-items: flex-start;
    }

    .agree input {
        flex: 0 0 auto;
    }
}

/* かなり狭い端末 */
@media screen and (max-width: 390px) {
    .service-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .hero h1 {
        font-size: 27px;
    }

    .brand {
        font-size: 15px;
    }

    .step-indicator span {
        width: 22px;
        height: 22px;
    }
}