/* 左に第0話の枠（4:3）、右に読み方と対象のお店。右を開いても左の枠は伸ばさない */
.sec_intro {
    .wrap {
        margin: 0 auto;
        padding: 56px 40px 40px;
        max-width: 1280px;
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "movie steps" "movie target";
        gap: 24px 48px;
        @media (max-width: 1000px) {
            padding-top: 48px;
            column-gap: 40px;
        }
        @media (max-width: 900px) {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: none;
            grid-template-areas: "movie" "steps" "target";
            row-gap: 32px;
        }
        @media (max-width: 600px) {
            padding: 40px 24px 32px;
        }
        @media (max-width: 370px) {
            padding-inline: 16px;
        }
    }
    .movie {
        min-width: 0;
        display: flex;
        flex-direction: column;
        grid-area: movie;
        align-self: start;
        iframe {
            width: 100%;
            aspect-ratio: 16 / 9;
            display: block;
            border: 0;
        }
    }
    .panel {
        padding: 48px;
        aspect-ratio: 4 / 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        background: var(--color-brown);
        color: var(--color-cream);
        @media (max-width: 600px) {
            padding: 32px 24px;
        }
        .ep {
            color: var(--color-brown-soft);
            font-size: 14px;
            line-height: 1.6em;
            letter-spacing: 0.16em;
        }
        .ttl {
            font-family: var(--font-serif);
            font-size: 28px;
            font-weight: 600;
            line-height: 1.6em;
            letter-spacing: 0.04em;
            @media (max-width: 1000px) {
                font-size: 24px;
            }
            @media (max-width: 600px) {
                font-size: 20px;
            }
        }
        .note {
            margin-top: 8px;
            padding-top: 12px;
            color: var(--color-brown-soft);
            font-size: 14px;
            line-height: 1.6em;
            border-top: 1px solid var(--color-brown-line);
        }
    }
    .steps {
        min-width: 0;
        grid-area: steps;
        .ttl {
            margin-bottom: 16px;
            font-family: var(--font-serif);
            font-size: 28px;
            font-weight: 600;
            line-height: 1.5em;
            letter-spacing: 0.04em;
            @media (max-width: 1000px) {
                font-size: 24px;
            }
            @media (max-width: 600px) {
                font-size: 22px;
            }
        }
        .list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            list-style: none;
        }
        .item {
            display: grid;
            grid-template-columns: 32px minmax(0, 1fr);
            gap: 16px;
            @media (max-width: 600px) {
                gap: 12px;
            }
        }
        .no {
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            background: var(--color-accent);
            color: var(--color-paper);
            font-family: var(--font-serif);
            font-size: 14px;
            font-weight: 600;
            line-height: 1em;
            border-radius: 50%;
        }
        .head {
            display: block;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.6em;
        }
        .txt {
            display: block;
            color: var(--color-ink-soft);
            font-size: 14px;
            line-height: 1.7em;
        }
    }
    .target {
        padding: 24px 28px;
        min-width: 0;
        grid-area: target;
        background: var(--color-cream-deep);
        @media (max-width: 600px) {
            padding: 20px;
        }
        .ttl {
            margin-bottom: 8px;
            color: var(--color-accent-deep);
            font-family: var(--font-serif);
            font-size: 18px;
            font-weight: 600;
            line-height: 1.5em;
            letter-spacing: 0.04em;
        }
        .txt {
            font-size: 16px;
            line-height: 1.8em;
        }
        .more_ptn_1 {
            margin-top: 12px;
            border-top: 1px solid var(--color-line);
            border-bottom: 0;
            summary {
                padding: 12px 0 0;
                font-size: 14px;
            }
        }
        .list {
            margin-top: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .item {
            display: flex;
            gap: 12px;
            font-size: 14px;
            line-height: 1.8em;
            &::before {
                margin-top: 0.9em;
                width: 10px;
                height: 1px;
                flex: 0 0 auto;
                background: var(--color-accent);
                content: "";
            }
        }
    }
}

/* 最終更新: 2026-10-25 19:15 */