@charset "UTF-8";

/* ============================================================
   TOP（LP）専用
   デザインカンプは PC 幅 1500px。桜の装飾の left は
   「画面中央 ± デザイン上の中央からの距離」で指定している
   ============================================================ */

/* ============================================================
   ヘッダー
   ============================================================ */
/* ロゴ・ナビの見た目は FV 画像に含まれているため、ヘッダーは透明なリンクの当たり判定だけ持つ。
   FV 画像の上端 100px（1500:100）の帯に重ね、各リンクの位置は画像内の文字位置を % で指定 */
.header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    aspect-ratio: 1500 / 100;
}

.header__logo {
    position: absolute;
    top: 30%;
    left: 5.6%;
    width: 15%;
    height: 42%;
}

.header__item {
    position: absolute;
    top: 30%;
    height: 42%;
}

.header__item--level {
    left: 51.6%;
    width: 8.5%;
}

.header__item--plan {
    left: 61.9%;
    width: 7.3%;
}

.header__item--voice {
    left: 71%;
    width: 7.3%;
}

.header__item--flow {
    left: 80.1%;
    width: 14.3%;
}

.header__link {
    display: block;
    width: 100%;
    height: 100%;
}

/* 透明リンクなので、キーボード操作時だけ位置が分かるように枠を出す */
.header__logo:focus-visible,
.header__link:focus-visible,
.mv__button:focus-visible {
    outline: 2px solid #0b41a0;
    outline-offset: 2px;
}

/* ============================================================
   メインビジュアル
   ============================================================ */
.mv {
    position: relative;
}

.mv__image {
    width: 100%;
}

/* 画像内の「無料体験レッスンを予約する」ボタンの位置に重ねる透明リンク */
.mv__button {
    position: absolute;
    top: 62.1%;
    left: 36.4%;
    width: 25.7%;
    height: 9.1%;
    border-radius: 999px;
}

/* ============================================================
   選ばれる3つの理由
   ============================================================ */
.reason {
    position: relative;
    padding: 96px 0 129px;
}

/* 写真とカードの横並びはデザイン上 1060px より広いので、このセクションだけ幅を広げる */
.reason__inner {
    max-width: 1148px;
}

.reason__lead {
    font-size: 18px;
    font-weight: 700;
    line-height: 37px;
    color: #0b41a0;
}

.reason__header {
    gap: 5px;
}

.reason__contents {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 90px;
}

.reason__photo-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40.6%;
}

.reason__photo {
    width: 100%;
    aspect-ratio: 466 / 311;
    object-fit: cover;
}

.reason__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 54%;
}

.reason__item {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 200px;
    padding: 20px 40px 20px 63px;
    background-color: #fff;
}

.reason__number {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #0b41a0;
    border-radius: 50%;
}

.reason__title {
    font-size: 25px;
    font-weight: 700;
    line-height: 40px;
    color: #0b41a0;
}

.reason__description {
    font-size: 15px;
    line-height: 30px;
}

/* 桜の装飾 */
.reason__sakura--01 {
    top: 105px;
    left: calc(50% - 713px);
    width: 158px;
}

.reason__sakura--02 {
    top: 888px;
    left: calc(50% + 570px);
    width: 121px;
}

/* ============================================================
   満足度
   ============================================================ */
.satisfaction {
    position: relative;
    padding: 76px 0 56px;
    color: #fff;
    background-color: #0b41a0;
}

.satisfaction__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-weight: 700;
}

.satisfaction__text {
    font-size: 26px;
    letter-spacing: 0.05em;
}

.satisfaction__number {
    font-size: 67px;
    line-height: 88px;
    letter-spacing: 0.05em;
}

.satisfaction__list {
    display: flex;
    justify-content: center;
    gap: 104px;
}

/* 月桂樹の画像を背面に敷き、その中央に数値を重ねる */
.satisfaction__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 324px;
    height: 219px;
    padding-bottom: 38px;
    text-align: center;
}

.satisfaction__laurel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.satisfaction__label {
    position: relative;
    font-size: 20px;
    line-height: 40px;
}

.satisfaction__data {
    position: relative;
    font-size: 50px;
    font-weight: 700;
    line-height: 40px;
}

.satisfaction__unit {
    font-size: 30px;
}

.satisfaction__notes {
    margin-top: 16px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

/* 桜の装飾（上下のセクションにはみ出して重なる） */
.satisfaction__sakura--01 {
    top: -80px;
    left: calc(50% - 750px);
    width: 188px;
}

.satisfaction__sakura--02 {
    top: 5px;
    left: calc(50% - 509px);
    width: 135px;
}

.satisfaction__sakura--03 {
    top: 342px;
    left: calc(50% + 386px);
    width: 134px;
}

.satisfaction__sakura--04 {
    top: 385px;
    left: calc(50% + 524px);
    width: 226px;
}

/* ============================================================
   上達ステップ
   ============================================================ */
.level {
    position: relative;
    padding: 100px 0 110px;
}

.level__list {
    display: flex;
    margin-top: 61px;
}

/* min-width: 0 が無いと、中の画像の幅に引っ張られて 3 列が均等幅にならない */
.level__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* 吹き出しの枠は SVG を背景に敷く。
   Figma 上で左右反転して使われているため、疑似要素側だけ反転させて文字は反転させない */
.level__bubble {
    position: relative;
    /* 疑似要素の z-index: -1 を吹き出しの内側に閉じ込める（外すと枠がセクションの背景より後ろに潜る） */
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 276px;
    height: 136px;
    padding: 0 30px 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
}

.level__bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../image/level-bubble.svg) no-repeat center / 100% 100%;
    transform: scaleX(-1);
}

.level__image {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 151px;
}

.level__item:nth-child(1) .level__image img {
    width: 229px;
}

/* 飛行機は地面から浮かせて配置 */
.level__item:nth-child(2) .level__image {
    padding-bottom: 36px;
}

.level__item:nth-child(2) .level__image img {
    width: 242px;
}

.level__item:nth-child(3) .level__image img {
    width: 219px;
}

.level__label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 98px;
    font-size: 41px;
    font-weight: 700;
    line-height: 34px;
    color: #f0f5ff;
}

.level__item:nth-child(1) .level__label {
    background-color: #ff921e;
}

.level__item:nth-child(2) .level__label {
    background-color: #ff7023;
}

.level__item:nth-child(3) .level__label {
    background-color: #ff5323;
}

/* 帯の右端の矢羽根。次の期間の帯に食い込ませて「進んでいく」形を作る */
.level__item:not(:last-child) .level__label::after {
    content: "";
    position: absolute;
    top: 0;
    right: -40px;
    z-index: 1;
    width: 40px;
    height: 100%;
    background-color: inherit;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 桜の装飾 */
.level__sakura--01 {
    top: 50px;
    left: calc(50% - 658px);
    width: 176px;
}

.level__sakura--02 {
    top: 159px;
    left: calc(50% - 491px);
    width: 28px;
}

.level__sakura--03 {
    top: 476px;
    left: calc(50% + 422px);
    width: 290px;
}

/* ============================================================
   メッセージ帯
   ============================================================ */
.message {
    position: relative;
    background-color: #fff3f8;
}

.message__inner {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 190px;
}

.message__character {
    flex-shrink: 0;
}

.message__character--man {
    width: 139px;
    margin-bottom: 4px;
}

.message__character--woman {
    width: 118px;
}

.message__text {
    margin: 0 4px 62px 12px;
    font-weight: 700;
    line-height: 40px;
    color: #0b41a0;
}

.message__lead {
    display: block;
    font-size: 16px;
}

.message__main {
    display: block;
    font-size: 36px;
    white-space: nowrap;
}

.message__accent {
    font-size: 42px;
    font-weight: 900;
    color: #ff5fa3;
}

.message__small {
    font-size: 26px;
}

/* 桜の装飾 */
.message__sakura--01 {
    top: 72px;
    left: calc(50% - 631px);
    width: 167px;
}

.message__sakura--02 {
    top: 66px;
    left: calc(50% + 466px);
    width: 167px;
}

/* ============================================================
   受講プラン
   ============================================================ */
.plan {
    position: relative;
    padding: 100px 0 70px;
}

.plan__contents {
    margin-top: 56px;
}

.plan__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

/* destyle が th の text-align を左寄せに戻すため、明示的に中央揃えにする */
.plan__name {
    padding-bottom: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    line-height: 40px;
    color: #0b41a0;
    vertical-align: bottom;
}

/* 「人気プラン」の王冠ラベル */
.plan__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -2px;
    font-size: 18px;
    color: #cf9e34;
}

.plan__icon {
    width: 33px;
    margin-bottom: -7px;
}

.plan__data {
    height: 89px;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
    vertical-align: middle;
    border-top: 1px solid #acacac;
}

.plan__table tbody tr:last-child .plan__data {
    border-bottom: 1px solid #acacac;
}

/* 列ごとに色を濃くしていく（ライト → スタンダード → プレミアム） */
.plan__data:nth-child(1) {
    background-color: #168eb3;
}

.plan__data:nth-child(2) {
    background-color: #1671b2;
}

.plan__data:nth-child(3) {
    background-color: #1555a0;
}

.plan__data--bold {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

.plan__data--price {
    font-size: 16px;
}

.plan__price {
    font-size: 32px;
    font-weight: 700;
}

/* 桜の装飾 */
.plan__sakura--01 {
    top: 48px;
    left: calc(50% + 489px);
    width: 261px;
}

/* ============================================================
   受講生の声
   ============================================================ */
.voice {
    position: relative;
    padding: 100px 0 80px;
}

.voice__list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 60px;
}

.voice__item {
    display: flex;
    align-items: flex-start;
    gap: 59px;
    min-height: 361px;
    padding: 80px 60px 60px 116px;
    background-color: #fff;
}

.voice__thumbnail {
    flex-shrink: 0;
    width: 187px;
    margin-top: 7px;
}

.voice__name {
    font-size: 16px;
    line-height: 40px;
}

.voice__title {
    margin-top: 13px;
    font-size: 26px;
    font-weight: 700;
    line-height: 38px;
    color: #1043a3;
}

.voice__description {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}

/* 桜の装飾 */
.voice__sakura--01 {
    top: -20px;
    left: calc(50% - 634px);
    width: 159px;
}

.voice__sakura--02 {
    top: 141px;
    left: calc(50% - 630px);
    width: 32px;
}

.voice__sakura--03 {
    top: 171px;
    left: calc(50% - 581px);
    width: 171px;
}

.voice__sakura--04 {
    top: 611px;
    left: calc(50% - 581px);
    width: 171px;
}

.voice__sakura--05 {
    top: 1053px;
    left: calc(50% - 583px);
    width: 171px;
}

.voice__sakura--06 {
    top: 521px;
    left: calc(50% + 446px);
    width: 230px;
}

.voice__sakura--07 {
    top: 551px;
    left: calc(50% + 435px);
    width: 93px;
}

.voice__sakura--08 {
    top: 1021px;
    left: calc(50% + 166px);
    width: 143px;
}

.voice__sakura--09 {
    top: 1015px;
    left: calc(50% + 435px);
    width: 93px;
}

.voice__sakura--10 {
    top: 1451px;
    left: calc(50% + 435px);
    width: 93px;
}

/* ============================================================
   無料体験レッスンの流れ
   ============================================================ */
.flow {
    position: relative;
    padding: 90px 0 170px;
}

.flow__list {
    max-width: 631px;
    margin: 60px auto 0;
}

.flow__item + .flow__item {
    margin-top: 47px;
}

.flow__label {
    margin-bottom: 11px;
    font-size: 32px;
    font-weight: 300;
    line-height: 25px;
}

.flow__container {
    position: relative;
    display: flex;
}

/* 次のステップへ向かう下向き三角。色付きの本文エリアの中央に合わせる（最後のステップには付けない） */
.flow__item:not(:last-child) .flow__container::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 220px;
    width: 146px;
    height: 46px;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.flow__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 441px;
    min-height: 190px;
    padding: 20px 45px 20px 51px;
    color: #fff;
}

.flow__title {
    font-size: 26px;
    font-weight: 700;
    line-height: 40px;
}

.flow__description {
    font-size: 16px;
    line-height: 25px;
}

.flow__image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 190px;
    height: 190px;
    background-color: #fff;
    border: 3px solid;
}

/* ステップごとの色（STEP1 → STEP4 で濃くなる） */
.flow__item--01 .flow__label {
    color: #29a9c0;
}

.flow__item--01 .flow__body,
.flow__item--01 .flow__container::after {
    background-color: #29a9c0;
}

.flow__item--01 .flow__image {
    border-color: #29a9c0;
}

.flow__item--02 .flow__label {
    color: #168eb3;
}

.flow__item--02 .flow__body,
.flow__item--02 .flow__container::after {
    background-color: #168eb3;
}

.flow__item--02 .flow__image {
    border-color: #168eb3;
}

.flow__item--03 .flow__label {
    color: #1671b2;
}

.flow__item--03 .flow__body,
.flow__item--03 .flow__container::after {
    background-color: #1671b2;
}

.flow__item--03 .flow__image {
    border-color: #1671b2;
}

.flow__item--04 .flow__label {
    color: #1555a0;
}

.flow__item--04 .flow__body {
    background-color: #1555a0;
}

.flow__item--04 .flow__image {
    border-color: #1555a0;
}

/* STEP4 だけ説明文が太字（デザイン準拠） */
.flow__item--04 .flow__description {
    font-weight: 700;
}

/* 桜の装飾 */
.flow__sakura--01 {
    top: 27px;
    left: calc(50% - 600px);
    width: 52px;
}

.flow__sakura--02 {
    top: 96px;
    left: calc(50% - 554px);
    width: 156px;
}

.flow__sakura--03 {
    top: 482px;
    left: calc(50% + 308px);
    width: 33px;
}

.flow__sakura--04 {
    top: 528px;
    left: calc(50% + 320px);
    width: 174px;
}

.flow__sakura--05 {
    top: 796px;
    left: calc(50% + 471px);
    width: 36px;
}

.flow__sakura--06 {
    top: 860px;
    left: calc(50% + 412px);
    width: 40px;
}

.flow__sakura--07 {
    top: 971px;
    left: calc(50% - 46px);
    width: 170px;
}

.flow__sakura--08 {
    top: 1219px;
    left: calc(50% - 585px);
    width: 261px;
}

/* ============================================================
   フッター（キャンペーン告知・お問い合わせ）
   ============================================================ */
.footer {
    position: relative;
    padding: 84px 0 10px;
    color: #0b41a0;
    text-align: center;
    background-color: #fff3f8;
}

.footer__title {
    font-size: 42px;
    font-weight: 900;
    line-height: 72px;
    letter-spacing: 0.1em;
}

.footer__accent {
    font-family: "Noto Serif JP", serif;
    font-size: 50px;
    color: #ff5fa3;
}

.footer__lead {
    margin-top: 1px;
    font-size: 26px;
    font-weight: 900;
    line-height: 40px;
    letter-spacing: 0.05em;
}

.footer__button {
    display: block;
    width: 401px;
    margin: 15px auto 0;
    transition: opacity 0.3s;
}

@media (any-hover: hover) {
    .footer__button:hover {
        opacity: 0.8;
    }
}

.footer__info {
    margin-top: 25px;
}

.footer__label {
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0.23em;
}

.footer__tel {
    display: block;
    font-size: 42px;
    font-weight: 700;
    line-height: 40px;
}

.footer__notes {
    font-size: 16px;
    line-height: 40px;
}

.footer__copyright {
    margin-top: 29px;
    font-size: 12px;
    font-weight: 400;
    line-height: 40px;
}

/* 左右の人物（装飾）。セクション下端に立たせる */
.footer__character {
    position: absolute;
    bottom: 0;
}

.footer__character--man {
    left: calc(50% - 350px);
    width: 132px;
}

.footer__character--woman {
    left: calc(50% + 234px);
    width: 119px;
}

/* 桜の装飾 */
.footer__sakura--01 {
    top: -80px;
    left: calc(50% - 543px);
    width: 97px;
}

.footer__sakura--02 {
    top: 257px;
    left: calc(50% - 523px);
    width: 191px;
}

.footer__sakura--03 {
    top: 263px;
    left: calc(50% + 343px);
    width: 191px;
}

/* ============================================================
   中間幅の調整（1100px 以下）
   PC レイアウトのまま、固定幅の要素が収まらなくなる幅だけ詰める
   ============================================================ */
@media (max-width: 1100px) {
    .reason__item {
        gap: 24px;
        padding: 24px 24px 24px 32px;
    }

    .satisfaction__list {
        gap: 40px;
    }

    .level__bubble {
        width: 240px;
        font-size: 14px;
    }

    .message__character--man,
    .message__character--woman {
        display: none;
    }

    .message__main {
        white-space: normal;
    }

    .voice__item {
        padding: 60px 40px 60px 60px;
        gap: 40px;
    }
}

/* ============================================================
   SP（768px 以下）
   SP 用のデザインカンプは無いため、PC の要素を縦積みにして読みやすさを優先している
   ============================================================ */
@media (max-width: 768px) {
    /* ヘッダー: 画像内の文字が小さくタップしづらいため、ナビのリンクは出さない（ロゴのみ残す） */
    .header__nav {
        display: none;
    }

    /* SP の FV 画像（375×800）ではロゴが上端 100px 内の位置にあるため、帯の比率とロゴの当たり判定を差し替える */
    .header {
        aspect-ratio: 375 / 100;
    }

    .header__logo {
        top: 48%;
        left: 4.8%;
        width: 38%;
        height: 28%;
    }

    /* メインビジュアル: SP 画像内の「無料体験レッスンを予約する」ボタンの位置に合わせる */
    .mv__button {
        top: 45.9%;
        left: 11.2%;
        width: 76.5%;
        height: 6.8%;
    }

    /* 選ばれる3つの理由 */
    .reason {
        padding: 60px 0;
    }

    .reason__lead {
        font-size: 15px;
        line-height: 1.6;
    }

    .reason__contents {
        flex-direction: column;
        gap: 30px;
        margin-top: 40px;
    }

    .reason__photo-list {
        flex-direction: row;
        gap: 10px;
        width: 100%;
    }

    .reason__photo {
        width: calc(50% - 5px);
    }

    .reason__list {
        gap: 16px;
        width: 100%;
    }

    .reason__item {
        gap: 16px;
        min-height: auto;
        padding: 24px 20px;
    }

    .reason__number {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }

    .reason__title {
        font-size: 20px;
        line-height: 1.6;
    }

    .reason__description {
        font-size: 14px;
        line-height: 1.8;
    }

    /* 満足度 */
    .satisfaction {
        padding: 50px 0 30px;
    }

    .satisfaction__title {
        flex-wrap: wrap;
        gap: 0 10px;
    }

    .satisfaction__text {
        font-size: 18px;
    }

    .satisfaction__number {
        font-size: 48px;
        line-height: 64px;
    }

    /* SP でも 2 つを横並びのまま。画面幅に合わせて縮むよう幅は flex で等分し、高さは月桂樹画像の比率で決める */
    .satisfaction__list {
        gap: 10px;
        margin-top: 10px;
    }

    .satisfaction__item {
        flex: 1;
        max-width: 260px;
        height: auto;
        aspect-ratio: 324 / 219;
        padding-bottom: 18px;
    }

    .satisfaction__label {
        font-size: 12px;
        line-height: 20px;
    }

    .satisfaction__data {
        font-size: 28px;
        line-height: 32px;
    }

    .satisfaction__unit {
        font-size: 16px;
    }

    .satisfaction__notes {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.6;
    }

    /* 上達ステップ: 3期間を縦に並べ、矢羽根は下向きにする */
    .level {
        padding: 60px 0;
    }

    .level__list {
        flex-direction: column;
        gap: 40px;
        margin-top: 30px;
    }

    .level__bubble {
        width: 260px;
        height: 128px;
        font-size: 14px;
        line-height: 22px;
    }

    .level__image {
        height: auto;
        min-height: 110px;
        padding-top: 10px;
    }

    .level__item:nth-child(2) .level__image {
        padding-bottom: 20px;
    }

    .level__label {
        height: 64px;
        font-size: 30px;
    }

    .level__item:not(:last-child) .level__label::after {
        top: 100%;
        right: auto;
        left: 50%;
        width: 80px;
        height: 24px;
        transform: translateX(-50%);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    /* メッセージ帯 */
    .message__inner {
        height: auto;
        padding: 30px 0;
    }

    .message__text {
        margin: 0;
        line-height: 1.5;
        text-align: center;
    }

    .message__lead {
        font-size: 14px;
    }

    .message__main {
        font-size: 22px;
    }

    .message__accent {
        font-size: 26px;
    }

    .message__small {
        font-size: 18px;
    }

    /* 受講プラン: 3列を保ったまま表を横スクロールさせる */
    .plan {
        padding: 60px 0;
    }

    .plan__contents {
        margin-top: 30px;
        overflow-x: auto;
    }

    .plan__table {
        min-width: 600px;
    }

    .plan__name {
        font-size: 18px;
    }

    .plan__label {
        font-size: 14px;
    }

    .plan__data {
        height: 70px;
        font-size: 16px;
    }

    .plan__data--bold {
        font-size: 14px;
        line-height: 1.6;
    }

    .plan__data--price {
        font-size: 13px;
    }

    .plan__price {
        font-size: 24px;
    }

    /* 受講生の声: アイコンを上、文章を下に縦積み */
    .voice {
        padding: 60px 0;
    }

    .voice__list {
        gap: 20px;
        margin-top: 30px;
    }

    .voice__item {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        min-height: auto;
        padding: 30px 20px;
    }

    .voice__thumbnail {
        width: 120px;
        margin-top: 0;
    }

    .voice__name {
        font-size: 14px;
        line-height: 1.6;
    }

    .voice__title {
        margin-top: 8px;
        font-size: 18px;
        line-height: 1.6;
    }

    .voice__description {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.8;
    }

    /* 無料体験レッスンの流れ: 色付きの本文の下にイラストを縦積み */
    .flow {
        padding: 60px 0 80px;
    }

    .flow__list {
        margin-top: 30px;
    }

    .flow__item + .flow__item {
        margin-top: 40px;
    }

    .flow__label {
        margin-bottom: 8px;
        font-size: 24px;
    }

    .flow__container {
        flex-direction: column;
    }

    .flow__item:not(:last-child) .flow__container::after {
        left: 50%;
        width: 100px;
        height: 30px;
    }

    .flow__body {
        width: 100%;
        min-height: auto;
        padding: 24px 20px;
    }

    .flow__title {
        font-size: 20px;
        line-height: 1.6;
    }

    .flow__description {
        font-size: 14px;
        line-height: 1.8;
    }

    .flow__image {
        width: 100%;
        height: 150px;
    }

    .flow__image img {
        max-height: 110px;
        width: auto;
    }

    /* フッター */
    .footer {
        padding: 50px 0 130px;
    }

    .footer__title {
        font-size: 24px;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .footer__accent {
        display: block;
        font-size: 30px;
    }

    .footer__lead {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.6;
    }

    .footer__button {
        width: 300px;
        max-width: 100%;
    }

    .footer__label {
        font-size: 13px;
        line-height: 2;
        letter-spacing: 0.1em;
    }

    .footer__tel {
        font-size: 32px;
    }

    .footer__notes {
        font-size: 13px;
        line-height: 1.8;
    }

    .footer__copyright {
        margin-top: 16px;
        font-size: 10px;
        line-height: 1.6;
    }

    .footer__character--man {
        left: 5%;
        width: 90px;
    }

    .footer__character--woman {
        right: 5%;
        left: auto;
        width: 82px;
    }
}

/* ============================================================
   動きを減らす設定
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .footer__button {
        transition: none;
    }
}