/* CTA Reservation block (ご来店予約 CTA — 用具コンサルティング・他ページ共通)
   Breakpoint: PC 768px+ / SP 767px- */

.cta-reservation {
    width: 100%;
    padding-block: var(--space-8xl);
}

.cta-reservation__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cta-reservation__body {
    padding: clamp(var(--space-lg), 5vw, var(--space-4xl));
}

.cta-reservation__body .btn {
    width: fit-content;
}

/* パターン1: 背景 corporate / 文字 white */
.cta-reservation--pattern-corporate {
    background-color: var(--color-corporate);
}

.cta-reservation--pattern-corporate .cta-reservation__body {
    color: var(--color-text-white);
}

/* パターン2（デフォルト）: 背景 bg / 文字 text */
.cta-reservation--pattern-default {
    background-color: var(--color-bg);
}

.cta-reservation--pattern-default .cta-reservation__body {
    color: var(--color-text);
}

.cta-reservation__title {
    font-size: var(--fs-cta-heading);
    font-weight: 900;
    margin: 0 0 var(--space-md);
    line-height: var(--lh-normal);
    letter-spacing: 0.03em;
}

.cta-reservation__text {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
	letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
}

.cta-reservation__text p {
    margin: 0;
}

.cta-reservation__text p:last-child {
    margin-bottom: 0;
}

.cta-reservation__figure {
    margin: 0;
    line-height: 0;
}

.cta-reservation__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* SP: 767px以下 — 上にテキスト・ボタン、下に画像（画像下パディングなし） */
@media (max-width: 767px) {
    .cta-reservation {
        padding-top: var(--space-lg);
        padding-bottom: 0;
    }

    .cta-reservation__body {
        padding: var(--space-lg) var(--space-sm);
    }

    .cta-reservation__text {
        font-size: var(--fs-sm);
    }

    .cta-reservation__figure {
        margin-bottom: 0;
    }

    .cta-reservation__image {
        width: 100%;
        max-width: none;
        vertical-align: bottom;
    }
}

/* PC: 768px+ — 左テキスト(4)・右画像(6)、高さ制限なし */
@media (min-width: 768px) {
    .cta-reservation__inner {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
        align-items: center;
        max-width: 100%;
    }

    .cta-reservation--no-image .cta-reservation__inner {
        grid-template-columns: 1fr;
    }

    .cta-reservation--no-image .cta-reservation__body {
        max-width: var(--content-max-width);
        margin-inline: auto;
    }

    .cta-reservation__body {
        padding: clamp(var(--space-xl), 6vw, var(--space-6xl)) clamp(var(--space-sm), 10vw, 256px);
        padding-right: var(--space-md);
    }

    .cta-reservation__figure {
        padding: 0;
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        overflow: hidden;
    }

    .cta-reservation__image {
        width: 100%;
        height: auto;
        min-height: 320px;
        object-fit: cover;
    }
}

/* カード型: 1921px以上 — 中央カードで幅制限、テキストが画面端に寄りすぎない */
@media (min-width: 1921px) {
    .cta-reservation--pattern-corporate {
        background-color: transparent;
    }

    .cta-reservation--pattern-default {
        background-color: transparent;
    }

    .cta-reservation__inner {
        max-width: var(--guide-cta-max-width);
        margin-inline: auto;
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .cta-reservation--pattern-corporate .cta-reservation__inner {
        background-color: var(--color-corporate);
    }

    .cta-reservation--pattern-default .cta-reservation__inner {
        background-color: var(--color-bg);
    }

    .cta-reservation__body {
        padding-inline: clamp(var(--space-lg), 4vw, var(--space-4xl));
        padding-right: var(--space-md);
    }

    .cta-reservation__figure {
        border-radius: 0;
    }
}