/* ============================================================
   SP (375px基準) レイアウト
   position: absolute は使わず、通常のドキュメントフロー
   (Flexbox / Grid + padding / margin / gap) で組む。
   PCと共通のスタイルは common.css 側にまとめ、ここには
   SP特有のスタイルのみ記載する。
   ============================================================ */

/* ---------- Header ---------- */
.sp-header {
    width: 100%;
    padding: var(--space-2) 0;
    background: var(--color-white);
}

.sp-header__inner {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-2);
}

.sp-header__logo img {
    width: 116px;
    height: auto;
}

/* ---------- KV (ファーストビュー) ---------- */
.sp-kv {
    width: 100%;
}

.sp-kv__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   ここから下は、KV以外のセクション用のSP上書き。
   HTMLはPCと共通の1構造のみ（l-sp/l-pcでの複製はしない）。
   pc.css の値をベースに、767px以下でここのルールが上書きする。
   ============================================================ */
@media (max-width: 767px) {

    /* ---------- SP専用改行 ---------- */
    .sp-only {
        display: inline;
    }

    /* ---------- MOVIE + 死亡事故の状況 ---------- */
    .section-movie {
        padding: var(--space-4) var(--space-2);
    }

    .movie-card {
        padding: var(--space-4) var(--space-2) 0;
        box-shadow: 4px 4px 0 var(--color-card-shadow);
        max-width: 1160px;
    }

    .movie-card__ribbon {
        width: 94px;
        height: 88px;
    }

    .movie-card__ribbon::before {
        border-width: 88px 94px 0 0;
    }

    .movie-card__ribbon span {
        top: 40px;
        left: 6px;
        font-size: 20px;
    }

    .movie-card__label {
        font-size: 16px;
        margin-bottom: var(--space-1);
    }

    .movie-card__heading {
        font-size: 20px;
        margin-bottom: var(--space-2);
    }

    .movie-card__heading .accent {
        font-size: 1.6em;
    }

    .movie-card__lead {
        font-size: 12px;
        margin: 0 auto var(--space-3);
    }

    /* メンバータブ：2列×3行。並び順はPCと異なるためorderで対応 */
    .member-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-2);
        margin-bottom: var(--space-4);
    }

    .member-tab {
        flex: 0 0 calc(50% - 8px);
        padding: 8px 0;
        font-size: 13px;
        border: 2px solid transparent;
    }

    .member-tab__suffix {
        font-size: 11px;
    }

    .member-tabs .member-tab:nth-child(1) {
        order: 1;
    }

    /* 小栗有以 */
    .member-tabs .member-tab:nth-child(2) {
        order: 3;
    }

    /* 八木愛月 */
    .member-tabs .member-tab:nth-child(3) {
        order: 5;
    }

    /* 伊藤百花 */
    .member-tabs .member-tab:nth-child(4) {
        order: 2;
    }

    /* 倉野尾成美 */
    .member-tabs .member-tab:nth-child(5) {
        order: 4;
    }

    /* 佐藤綺星 */
    .member-tabs .member-tab:nth-child(6) {
        order: 6;
    }

    /* 森川優 */

    /* カルーセル：PCと同様に前後スライドが見切れる形で表示（js/main.js の config() と数値を一致させること） */
    .movie-carousel {
        width: calc(100% + var(--space-2) * 2);
        margin: 0 calc(var(--space-2) * -1) var(--space-1);
    }

    .movie-carousel__viewport {
        height: 320px;
        /* メインサイズ(180px幅, 9:16)の高さに固定 */
    }

    .movie-carousel__track {
        gap: var(--space-5);
    }

    .movie-carousel__slide {
        flex: 0 0 150px;
        width: 150px;
        padding-top: var(--space-3);
        margin: 0 96px;
        border-radius: 12px;
    }

    .movie-carousel__slide.is-main {
        flex-basis: 180px;
        width: 180px;
    }

    .movie-carousel__slide .play-button {
        right: -30px;
        bottom: 20px;
    }

    .movie-carousel__arrow {
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
    }

    .movie-carousel__arrow--prev {
        left: calc(50% - 120px);
        border-right: 15px solid var(--color-card-shadow);
    }

    .movie-carousel__arrow--next {
        right: calc(50% - 120px);
        border-left: 15px solid var(--color-card-shadow);
    }

    .play-button {
        width: 80px;
        height: 80px;
        border-width: 3px;
        font-size: 14px;
        gap: 5px;
    }

    .play-button__icon {
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 12px solid var(--color-accent);
    }

    .movie-card__cta {
        padding: 0 0 var(--space-4);
    }

    .btn-outline {
        padding: 6px 20px;
        font-size: 12px;
        gap: var(--space-1);
        border: 2px solid var(--color-primary);
    }

    .btn-outline__arrow {
        width: 14px;
    }

    .stats {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 0;
        gap: var(--space-3);
    }

    .stats__intro {
        flex-basis: auto;
        padding: 0;
        max-width: 300px;
    }

    .stats__intro-image {
        width: 100%;
        margin: 0 auto;
    }

    .stats__chart {
        flex-basis: auto;
        margin-top: var(--space-1);
        padding: 0;
        max-width: 300px;
    }

    .stats__chart-label {
        font-size: 10px;
        margin-bottom: var(--space-2);
    }

    .stats__chart-image {
        width: 100%;
        margin: 0 auto var(--space-1);
    }

    .stats__chart-note {
        font-size: 12px;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .stats__person {
        width: 100%;
        max-width: 380px;
        align-self: center;
    }

    .movie-footnote {
        font-size: 10px;
        max-width: 1160px;
        margin: var(--space-1) auto 0;
    }

    /* ---------- PRESENT（プレゼントキャンペーン） ---------- */
    .section-present {
        padding: var(--space-4) var(--space-2);
    }

    .present__intro {
        margin-bottom: var(--space-4);
    }

    .present__label {
        font-size: 16px;
        margin-bottom: var(--space-3);
    }

    .present__title {
        max-width: 320px;
        margin-bottom: var(--space-3);
    }

    .present__lead {
        font-size: 14px;
    }

    .prize-card {
        padding: var(--space-2);
        box-shadow: 4px 4px 0 var(--color-card-shadow);
        max-width: 1000px;
    }

    .prize-badge {
        width: 46px;
        height: 46px;
        font-size: 16px;
        /*margin: 0 auto var(--space-2);*/
    }

    .prize-badge--sm {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .prize-item__photo-wrap .prize-badge--sm {
        top: -10px;
        left: 0;
    }

    /* 第1期・第2期の商品は縦積み1カラムに */
    .prize-group--top {
        margin: 0 0 20% 0;
    }

    .prize-group--top .prize-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }

    .prize-item {
        flex: 1 1 auto;
    }

    /* 期間ラベルは横一列（term + season + date） */
    .period-tag {
        width: 100%;
        gap: 8px;
        border-bottom: 3px solid var(--color-accent);
    }

    .period-tag__term {
        font-size: 20px;
        padding: 6px 6px 3px;
    }

    .period-tag__season {
        font-size: 14px;
    }

    .period-tag__date-range {
        font-size: 14px;
    }

    .period-tag__date-year {
        font-size: 10px;
    }

    .prize-card__divider {
        font-size: 14px;
        margin: var(--space-4) 0;
        gap: var(--space-2);
    }

    .prize-card__divider .line {
        width: 80px;
        border-top: 2px dashed var(--color-primary);
    }

    /* B賞・C賞は2列、Wチャンスは1行全幅 */
    .prize-row--bottom {
        flex-wrap: wrap;
        gap: var(--space-1);
    }

    .prize-item--sm {
        flex: 0 1 48%;
        min-width: 0;
    }

    .prize-item--wchance {
        flex-direction: row;
        align-items: center;
        flex-basis: 100%;
        justify-content: center;
        gap: var(--space-3);
        margin-top: var(--space-2);
    }

    .prize-item__wchance-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding-bottom: 10px;
    }

    .prize-item--wchance .prize-tag-wchance {
        position: static;
        transform: none;
        font-size: 14px;
        padding: 4px 15px;
        margin-bottom: var(--space-1);
    }

    .prize-item--wchance .prize-item__name-row {
        align-items: center;
    }

    .prize-item--sm .prize-item__photo {
        max-width: 180px;
    }

    .prize-item--wchance .prize-item__photo {
        max-width: 140px;
        margin: 0;
        margin-left: -30px;
    }

    .prize-item__name-row {
        margin-top: var(--space-1);
        gap: 6px;
    }

    .prize-item__name {
        font-size: 14px;
    }

    .prize-item__qty {
        font-size: 12px;
        padding: 1px 5px;
    }

    .prize-item__qty-num {
        font-size: 14px;
        line-height: 1;
    }

    /* ---------- 応募方法 ---------- */
    .section-apply {
        padding: var(--space-4) var(--space-2);
    }

    .apply__heading {
        font-size: 18px;
        margin-bottom: var(--space-3);
    }

    .apply-tabs {
        gap: var(--space-1);
        margin-bottom: var(--space-4);
    }

    .apply-tab {
        max-width: 100px;
        padding: 6px;
        font-size: 12px;
        border: 2px solid var(--color-primary);
    }

    .apply-tab.is-active {
        background: var(--color-white);
        border: 2px solid var(--color-primary);
        color: var(--color-primary);
        box-shadow: 0 4px 0 rgba(255, 226, 82, 0.7);
    }

    .apply-panel {
        max-width: 300px;
    }

    .apply-panel__title {
        padding: 5px;
        font-size: 14px;
        margin-bottom: var(--space-2);
        max-width: 400px;
    }

    .apply-panel__subtitle {
        font-size: 15px;
    }

    .apply-steps {
        gap: var(--space-1);
        margin-bottom: var(--space-2);
    }

    .apply-step {
        gap: var(--space-1);
        font-size: 12px;
    }

    .apply-step__note {
        margin-top: 0;
        font-size: 10px;
        line-height: 1.6;
    }

    .cta-pill {
        max-width: 270px;
        padding: 13px;
        font-size: 14px;
    }

    /* ---------- 応募期間 ---------- */
    .section-period {
        margin-top: var(--space-4);
    }

    .period__heading {
        font-size: 16px;
        margin-bottom: var(--space-1);
    }

    .period-list {
        max-width: 300px;
        gap: var(--space-1);
    }

    .period-bar {
        padding: var(--space-2) var(--space-1);
    }

    .period-bar__status {
        left: -20px;
        width: 40px;
        height: 40px;
        font-size: 10px;
    }

    .period-bar__label {
        font-size: 14px;
        margin-bottom: var(--space-1);
    }

    .period-bar__date {
        font-size: 20px;
        letter-spacing: 0;
    }

    .period-bar__date-year {
        font-size: 12px;
    }

    .period-bar__date-num {
        font-size: 24px;
    }

    .period-bar__date-unit {
        font-size: 16px;
    }

    .period-bar__date-sep {
        margin: 0 2px;
    }

    .period__notice {
        max-width: 300px;
        font-size: 10px;
        margin: var(--space-1) auto 0;
    }

    /* ---------- クイズ案内カード ---------- */
    .section-quiz {
        padding: var(--space-4) var(--space-2);
    }

    .quiz-card {
        flex-direction: column;
        box-shadow: 4px 4px 0 var(--color-card-shadow);
        max-width: 1068px;
    }

    .quiz-card__image {
        max-width: none;
        flex: 1 1 320px;
    }

    .quiz-card__body {
        flex: 1 1 260px;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-3);
    }

    .quiz-card__heading {
        font-size: 16px;
        line-height: 2;
    }

    .quiz-card__cta {
        padding: 17px 30px;
        font-size: 20px;
    }

    /* ---------- 参加メンバー ---------- */
    .section-members {
        padding: var(--space-4) var(--space-2);
    }

    .members__heading {
        font-size: 20px;
        margin-bottom: var(--space-4);
    }

    .member-grid {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 1100px;
    }

    .member-card {
        gap: var(--space-2);
        padding: var(--space-2) 0;
    }

    .member-card:nth-child(odd) {
        border-right: none;
        padding-right: 0;
    }

    .member-card:not(:last-child) {
        border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    }

    .member-card:first-child {
        padding-top: 0;
    }

    .member-card:nth-child(2) {
        padding-top: var(--space-2);
    }

    .member-card:last-child {
        padding-bottom: 0;
    }

    .member-card:nth-child(5) {
        padding-bottom: var(--space-2);
    }

    .member-card__photo {
        width: 140px;
        height: 140px;
    }

    .member-card__name {
        font-size: 15px;
        margin-bottom: 0;
        gap: var(--space-1);
    }

    .member-card__kana {
        font-size: 10px;
    }

    .member-card__bio {
        font-size: 11px;
    }

    /* ---------- TV CM / MAKING MOVIE ---------- */
    .section-cm {
        padding: var(--space-4) var(--space-2);
    }

    .cm-card {
        padding: var(--space-3);
        gap: var(--space-4);
        box-shadow: 4px 4px 0 var(--color-card-shadow);
        max-width: 900px;
    }

    .video-block__label {
        font-size: 16px;
        margin-bottom: var(--space-1);
    }

    .video-block__lead {
        font-size: 14px;
        margin-bottom: var(--space-2);
    }

    .video-thumb {
        margin-bottom: var(--space-1);
        max-width: 586px;
        border: 2px solid var(--color-primary);
        border-radius: 10px;
    }

    /* ---------- JA共済が取り組む交通安全 ---------- */
    .section-torikumi {
        padding: var(--space-4) var(--space-2);
    }

    .torikumi__heading {
        font-size: 20px;
        margin-bottom: var(--space-3);
    }

    .torikumi__lead {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: var(--space-4);
    }

    .activity-grid {
        max-width: 280px;
        gap: var(--space-4);
    }

    .activity-card__image {
        margin-bottom: var(--space-1);
    }

    .activity-card__title {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .activity-card__desc {
        font-size: 11px;
    }

    .activity-card__credit {
        font-size: 10px;
    }

    /* ---------- 交通安全ポスターコンクール ---------- */
    .section-poster {
        padding: var(--space-4) var(--space-2);
    }

    .poster__heading {
        font-size: 20px;
        margin-bottom: var(--space-3);
    }

    .poster__intro {
        flex-direction: column;
        justify-content: center;
        max-width: 320px;
        gap: var(--space-3);
        margin: 0 auto var(--space-4);
    }

    .poster__logo {
        width: 130px;
    }

    .poster__lead {
        font-size: 13px;
        line-height: 1.6;
    }

    .poster-grid {
        justify-content: center;
        gap: var(--space-4);
        max-width: 900px;
        margin: 0 auto var(--space-4);
    }

    .poster-item__image {
        width: 160px;
    }

    .poster-item__frame {
        gap: var(--space-3);
    }

    .poster-item:nth-child(2) .poster-item__testimonial {
        order: -1;
    }

    .poster-item__photo {
        gap: var(--space-1);
    }

    .poster-item__testimonial {
        width: 130px;
        padding-top: var(--space-5);
        gap: var(--space-2);
    }

    .poster-item__testimonial img {
        width: 90px;
        height: 90px;
    }

    .poster-item__testimonial p {
        font-size: 11px;
    }

    .poster-item__caption {
        font-size: 15px;
    }

    .poster__cta {
        padding: 10px 20px;
        font-size: 12px;
        gap: var(--space-2);
    }

    /* ---------- フッター ---------- */
    .site-footer__logo {
        height: 20px;
    }

    .member-card:not(:nth-last-child(-n+2)) {
        border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    }

    .site-footer {
        padding: var(--space-3) 0;
    }

    .poster-item {
        gap: var(--space-2);
    }

    .activity-card {
        flex: 1 1 350px;
        max-width: 350px;
    }

    .prize-item__variant {
        font-size: 20px;
    }

    .prize-tag-wchance {
        font-size: 16px;
        padding: 3px 15px;
    }

    .period-tag__date-sep {
        font-size: 20px;
    }

    .period-tag__date--split {
        gap: 4px;
    }

    .prize-item--sm .prize-item__qty,
    .prize-item--sm .prize-item__variant {
        font-size: 11px;
    }

    .prize-item--sm .prize-item__name {
        font-size: 12px;
    }

    .prize-item__qty-row {
        gap: 6px;
    }

    .stats__chart-annotation {
        font-size: 10px;
    }

    .movie-carousel__image {
        border: 3px solid var(--color-primary);
        border-radius: 10px;
    }

    .site-header__logo img {
        width: 176px;
    }

    .site-header__inner {
        padding: 0 var(--space-3);
    }

    .site-header {
        padding: var(--space-3) 0;
    }
}