/* Top Page Styles */

.front-page {
    letter-spacing: 0.05em;
    overflow-x: hidden;
}

.front-page .site-main {
    margin: 0;
}

/****************************************************/
/* FV: キービジュアル */
/****************************************************/
.front-hero {
    position: relative;
    height: 100vh; /* fallback for Safari / Android WebView */
    height: 100svh;
    min-height: 560px;
    color: var(--color-text-white);
    isolation: isolate;
}

.front-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.front-hero__picture,
.front-hero__img {
    width: 100%;
    height: 100%;
}

.front-hero__img {
    object-fit: cover;
}

/* トップページのメインタイトル（h1）：アクセシビリティ・SEO用、画面上は非表示 */
.front-hero__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.front-hero__overlay {
    position: relative;
    width: min(var(--hero-max-width), 100%);
    height: 100%;
    margin-inline: auto;
    padding-inline: clamp(var(--space-sm), 7vw, var(--space-4xl));
    padding-block: clamp(var(--space-4xl), 10vh, var(--space-8xl));
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
    row-gap: clamp(var(--space-lg), 4vh, var(--space-2xl));
    align-items: center;
    font-family: "Zen Kaku Gothic Antique", system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
    line-height: 1.4;
    letter-spacing: 0;
}

.front-hero__slogan-block {
    grid-row: 1 / span 2;
    grid-column: 1 / 2;
    align-self: flex-start;
    position: relative;
    transform: translateY(64px);
}

.front-hero__slogan-set {
    position: absolute;
    inset: 0 auto auto 0;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-xs), 1.5vh, var(--space-sm));
}

.front-hero__slogan-line {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-weight: 900;
    font-size: clamp(var(--fs-7xl), 7vw, var(--fs-9xl));
    white-space: nowrap;
    transform-origin: center;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/****************************************************/
/* FV スローガン: リビールアニメーション                */
/*   ::before = 1枚目の帯（アクセント / 黄系）          */
/*   ::after  = 2枚目の帯（コーポレート / 青系）         */
/*   テキスト opacity で表示タイミングを制御              */
/*                                                      */
/*   14s ループ: 前半=セット1 / 後半=セット2             */
/*   1% = 140ms / 3% ≈ 420ms（帯1フェーズ分）           */
/****************************************************/

.front-hero__slogan-line::before,
.front-hero__slogan-line::after {
    content: '';
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    pointer-events: none;
}

.front-hero__slogan-line::before {
    background-color: var(--color-accent3);
    z-index: 2;
}

.front-hero__slogan-line::after {
    background-color: var(--color-corporate);
    z-index: 1;
}

/* 2行目をわずかに遅らせてスタガー演出 */
.front-hero__slogan-line--2,
.front-hero__slogan-line--2::before,
.front-hero__slogan-line--2::after {
    animation-delay: 0.1s !important;
}

/* セットレベル: 両方常に表示（行レベルで制御） */
.front-hero__slogan-set--1,
.front-hero__slogan-set--2 {
    opacity: 1;
}

/* === セット1 アニメーション割り当て === */
.front-hero__slogan-set--1 .front-hero__slogan-line {
    animation: reveal-text-1 14s linear infinite;
}

.front-hero__slogan-set--1 .front-hero__slogan-line::before {
    animation: reveal-bar1-1 14s linear infinite;
}

.front-hero__slogan-set--1 .front-hero__slogan-line::after {
    animation: reveal-bar2-1 14s linear infinite;
}

/* === セット2 アニメーション割り当て === */
.front-hero__slogan-set--2 .front-hero__slogan-line {
    animation: reveal-text-2 14s linear infinite;
}

.front-hero__slogan-set--2 .front-hero__slogan-line::before {
    animation: reveal-bar1-2 14s linear infinite;
}

.front-hero__slogan-set--2 .front-hero__slogan-line::after {
    animation: reveal-bar2-2 14s linear infinite;
}

/* ---------- セット1 keyframes ---------- */
/* cubic-bezier(0.76, 0, 0.24, 1) = 出入り緩やか・中間で加速 */

/* 帯1（アクセント3）: 左端から伸びて→右端へ縮んで抜ける */
@keyframes reveal-bar1-1 {
    0%     { transform-origin: left;  transform: scaleX(0);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    3%     { transform-origin: left;  transform: scaleX(1); }
    3.01%  { transform-origin: right; transform: scaleX(1);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    6%     { transform-origin: right; transform: scaleX(0); }
    100%   { transform-origin: right; transform: scaleX(0); }
}

/* 帯2（コーポ）: 帯1の少し後を追って同じ動き */
@keyframes reveal-bar2-1 {
    0%     { transform-origin: left;  transform: scaleX(0); }
    1%     { transform-origin: left;  transform: scaleX(0);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    4%     { transform-origin: left;  transform: scaleX(1); }
    4.01%  { transform-origin: right; transform: scaleX(1);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    7%     { transform-origin: right; transform: scaleX(0); }
    100%   { transform-origin: right; transform: scaleX(0); }
}

/* テキスト: 帯リビール後に表示 → 右スライド＋フェードで退場 */
@keyframes reveal-text-1 {
    0%     { opacity: 0; transform: translateX(0); }
    3%     { opacity: 0; transform: translateX(0); }
    3.01%  { opacity: 1; transform: translateX(0); }
    46%    { opacity: 1; transform: translateX(0);
             animation-timing-function: ease-in; }
    49%    { opacity: 0; transform: translateX(20%); }
    100%   { opacity: 0; transform: translateX(0); }
}

/* ---------- セット2 keyframes ---------- */
/* セット1テキスト退場完了（49%）後に帯出現 */

@keyframes reveal-bar1-2 {
    0%     { transform-origin: left;  transform: scaleX(0); }
    50%    { transform-origin: left;  transform: scaleX(0);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    53%    { transform-origin: left;  transform: scaleX(1); }
    53.01% { transform-origin: right; transform: scaleX(1);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    56%    { transform-origin: right; transform: scaleX(0); }
    100%   { transform-origin: right; transform: scaleX(0); }
}

@keyframes reveal-bar2-2 {
    0%     { transform-origin: left;  transform: scaleX(0); }
    51%    { transform-origin: left;  transform: scaleX(0);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    54%    { transform-origin: left;  transform: scaleX(1); }
    54.01% { transform-origin: right; transform: scaleX(1);
             animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
    57%    { transform-origin: right; transform: scaleX(0); }
    100%   { transform-origin: right; transform: scaleX(0); }
}

/* テキスト: 帯リビール後に表示 → 右スライド＋フェードで退場 */
@keyframes reveal-text-2 {
    0%     { opacity: 0; transform: translateX(0); }
    53%    { opacity: 0; transform: translateX(0); }
    53.01% { opacity: 1; transform: translateX(0); }
    93%    { opacity: 1; transform: translateX(0);
             animation-timing-function: ease-in; }
    96%    { opacity: 0; transform: translateX(20%); }
    100%   { opacity: 0; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .front-hero__slogan-set--2 {
        display: none;
    }

    .front-hero__slogan-set--1 .front-hero__slogan-line {
        animation: none;
        opacity: 1;
    }

    .front-hero__slogan-line::before,
    .front-hero__slogan-line::after {
        animation: none;
        transform: scaleX(0);
    }
}

.front-hero__subcopy {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    max-width: 34rem;
    font-size: clamp(var(--fs-lg), 1.4vw, var(--fs-2xl));
    /* Zen 読み込みが 400 になったあとも、従来どおり 700 相当の見え方に揃える（以前は 400 不在でブラウザが 700 へ寄せていた） */
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.front-hero__subcopy p {
    margin: 0;
}

.front-hero__subcopy p + p {
    margin-top: var(--space-xs);
}

.front-hero__cta {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    justify-self: flex-end;
}

.front-hero__cta .btn {
    font-family: var(--font-sans);
    padding-inline: clamp(var(--space-lg), 4vw, var(--space-3xl));
    padding-block: clamp(var(--space-s), 1.2vw, var(--space-sm));
}

@media (max-width: 959px) {
    .front-hero__overlay {
        grid-template-rows: auto auto auto;
        grid-template-columns: minmax(0, 1fr);
        padding-inline: var(--space-sm);
        padding-block: clamp(var(--space-3xl), 8vh, var(--space-6xl));
    }

    .front-hero__slogan-block {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }

    .front-hero__subcopy {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .front-hero__cta {
        grid-row: 3 / 4;
        grid-column: 1 / 2;
        justify-self: flex-start;
    }

    .front-hero__slogan-line {
        white-space: normal;
        font-size: clamp(var(--fs-6xl), 7vw, var(--fs-7xl));
        max-width: 100%;
    }

    .front-hero {
        min-height: 520px;
    }

    .front-hero__slogan-block {
        transform: translateY(32px);
    }

    .front-hero__subcopy {
        transform: translateY(128px);
    }
}

/****************************************************/
/* 共通セクション見出し */
/****************************************************/
.front-section-heading {
    margin-bottom: clamp(var(--space-lg), 4vh, var(--space-2xl));
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-sub3);
}

.front-section-heading__en {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-english);
    font-weight: 700;
    font-size: var(--fs-front-heading-en);
    letter-spacing: 0.05em;
    color: var(--color-corporate);
    line-height: 1;
}

.front-section-heading__jp {
    margin: 0;
    font-size: var(--fs-front-heading-jp);
    font-weight: 700;
    color: var(--color-text);
}

/****************************************************/
/* セクション共通レイアウト */
/****************************************************/
.front-sections {
    background: var(--color-bg);
    margin-bottom: 0;
}

.front-section {
    padding-block: clamp(var(--space-4xl), 8vh, var(--space-7xl));
}


.front-section__inner {
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--content-inner-padding-inline);
}

.front-section__body {
    display: grid;
    row-gap: clamp(var(--space-lg), 4vh, var(--space-2xl));
}

.front-section__lead {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

.front-section__lead p {
    margin: 0 0 var(--space-sm);
}

.front-section__lead p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .front-section {
        padding-block: clamp(var(--space-3xl), 7vh, var(--space-5xl));
    }

    .front-section__lead {
        font-size: var(--fs-sm);
    }
}

/****************************************************/
/* サービスセクション */
/****************************************************/
.front-section__body--services {
    row-gap: clamp(var(--space-xl), 6vh, var(--space-3xl));
}

.front-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--space-md), 3vw, var(--space-2xl));
}

.front-services__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.front-services__label {
    align-self: flex-start;
    padding: var(--space-xxs) var(--space-xs);
    font-family: var(--font-english);
    font-size: var(--fs-sm);
    color: var(--color-text-white);
    background-color: var(--color-sub1);
    border-radius: 1px;
}

.front-services__title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 700;
}

.front-services__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.front-services__media--placeholder {
    background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.7), transparent 55%),
        radial-gradient(circle at 100% 120%, rgba(0, 52, 154, 0.6), rgba(0, 52, 154, 0.9));
}

.front-services__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.front-services__copy {
    text-align: left;
}

.front-services__catch {
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.front-services__text {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
}

.front-services__btn {
    align-self: center;
    padding-inline: clamp(var(--space-xl), 4vw, var(--space-3xl));
}

@media (min-width: 768px) {
    .front-services__btn {
        width: 100%;
    }
}

@media (max-width: 1023px) {
    .front-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .front-services {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(var(--space-xl), 6vh, var(--space-3xl));
    }

    .front-services__title {
        font-size: var(--fs-xl);
    }

    .front-services__catch {
        font-size: var(--fs-md);
    }

    .front-services__text {
        font-size: var(--fs-sm);
    }

    .front-services__btn {
        align-self: center;
    }
}

/****************************************************/
/* 取り組みセクション */
/****************************************************/
.front-section--support {
    background-color: var(--color-bg-gray);
}

.front-section--support .front-section__inner {
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    padding-block: clamp(var(--space-3xl), 6vh, var(--space-5xl));
}

/* 取り組みセクション: タブレット幅でもビューポート左右に余白を確保 */
@media (min-width: 768px) and (max-width: 1279px) {
    .front-section--support .front-section__inner {
        margin-inline: var(--space-sm);
    }
}

/* PC 幅でもカード内に余白を維持する（1280px 以上だと --content-inner-padding-inline が 0 になるため個別指定） */
@media (min-width: 1280px) {
    .front-section--support .front-section__inner {
        padding-inline: clamp(var(--space-2xl), 5vw, var(--space-4xl));
    }
}

.front-section__body--support {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
    column-gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
}

.front-support {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.front-support__item {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    column-gap: clamp(var(--space-md), 4vw, var(--space-2xl));
    row-gap: var(--space-sm);
    align-items: flex-start;
}

.front-support__divider {
    margin-block: var(--space-xs);
    border: none;
    border-bottom: 1px solid var(--color-sub3);
}

.front-support__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.front-support__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
}

.front-support__button {
    align-self: flex-start;
    padding: var(--space-xs);
}

.front-support__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.front-support__catch {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 500;
}

.front-support__text {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
}

@media (max-width: 959px) {
    .front-section__body--support {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-xl);
    }

    .front-support__item {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .front-section--support .front-section__inner {
        border-radius: var(--radius-md);
        margin-inline: var(--space-sm);
        padding-inline: var(--space-md);
    }

    /* 取り組みセクション: SP では本文と最初の項目の間にも区切り線を表示 */
    .front-section--support .front-support__item:first-of-type {
        padding-top: var(--space-md);
        border-top: 1px solid var(--color-sub3);
    }

    .front-support__title {
        font-size: var(--fs-md);
    }

    .front-support__catch,
    .front-support__text {
        font-size: var(--fs-sm);
    }
}

/****************************************************/
/* 競技ガイドセクション */
/****************************************************/
.front-section__body--guides {
    margin-top: clamp(var(--space-lg), 4vh, var(--space-2xl));
}

.front-guides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--space-md), 3vw, var(--space-2xl));
}

.front-guide-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr);
    background-color: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
}

.front-guide-card__media {
    height: 100%;
    min-height: 200px;
}

.front-guide-card__media--placeholder {
    background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.5), transparent 60%),
        linear-gradient(130deg, rgba(0, 52, 154, 0.2), rgba(0, 52, 154, 0.8));
}

.front-guide-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.front-guide-card__content {
    position: relative;
    padding: clamp(var(--space-md), 3vw, var(--space-3xl));
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: var(--space-md);
}

.front-guide-card__titles {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.front-guide-card__title-jp {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-corporate);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.front-guide-card__title-en {
    margin: 0;
    font-family: var(--font-english);
    font-size: var(--fs-4xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
}

.front-guide-card__catch {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
}

.front-guide-card__catch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.front-guide-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background-color: var(--color-corporate);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.front-guide-card__icon-img {
    width: 1.4rem;
    height: 1.4rem;
}

.front-guide-card:hover,
.front-guide-card:focus-visible {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

/* 競技ガイドカード: グローバル a:hover の白文字化を防ぎつつカード専用の状態に */
.front-guide-card {
    color: var(--color-text);
}

.front-guide-card:hover,
.front-guide-card:focus-visible {
    color: var(--color-text);
}

.front-guide-card:focus-visible {
    outline: 2px solid var(--color-corporate);
    outline-offset: 3px;
}

@media (max-width: 1023px) {
    .front-guides {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .front-guide-card {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .front-guide-card__media {
        min-height: 180px;
    }

    .front-guide-card__title-jp {
        font-size: var(--fs-xs);
    }

    .front-guide-card__title-en {
        font-size: var(--fs-3xl);
    }

    .front-guide-card__catch {
        font-size: var(--fs-sm);
    }
}

/****************************************************/
/* 店舗画像セクション（無限横スクロール） */
/****************************************************/
.front-stores {
    padding-block: clamp(var(--space-4xl), 10vh, var(--space-7xl));
    background-color: var(--color-bg);
}

.front-stores__inner {
    overflow: hidden;
    padding-bottom: 20px;
}

.front-stores__track {
    --_gap: clamp(var(--space-xl), 3vw, var(--space-3xl));
    display: flex;
    gap: var(--_gap);
    width: max-content;
    animation: front-stores-marquee-left 50s linear infinite;
    will-change: transform;
}

.front-stores__item {
    flex: 0 0 auto;
    width: clamp(200px, 20vw, 320px);
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.front-stores__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.front-stores__item:nth-child(even) {
    transform: translateY(20px);
}

.front-stores__item--placeholder {
    background:
        linear-gradient(135deg, rgba(0, 52, 154, 0.8), rgba(0, 52, 154, 0.4)),
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.8), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(255, 107, 53, 0.7), transparent 55%);
    background-blend-mode: screen, normal;
}

@keyframes front-stores-marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - var(--_gap) / 2));
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-stores__track {
        animation: none;
        will-change: auto;
    }
}

@media (max-width: 767px) {
    .front-stores {
        padding-block: clamp(var(--space-3xl), 8vh, var(--space-5xl));
    }

    .front-stores__item {
        width: clamp(160px, 40vw, 220px);
    }

    .front-stores__inner {
        padding-bottom: 12px;
    }

    .front-stores__item:nth-child(even) {
        transform: translateY(12px);
    }
}

/****************************************************/
/* 共通カードパネル（スタッフ紹介 / FAQ 再利用） */
/****************************************************/
.front-card-panel {
    padding-block: clamp(var(--space-4xl), 8vh, var(--space-7xl));
    background-color: var(--color-bg-gray);
}

.front-card-panel__inner {
    position: relative;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--content-inner-padding-inline);
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.front-card-panel__content {
    display: grid;
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 4.5fr);
    align-items: stretch;
}

.front-card-panel__left {
    padding: clamp(var(--space-2xl), 5vw, var(--space-4xl));
    display: flex;
    flex-direction: column;
    gap: 0;
}

.front-card-panel__text {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

.front-card-panel__text p {
    margin: 0;
}

.front-card-panel__figure {
    margin: 0;
    overflow: hidden;
    padding: var(--space-md);
}

.front-card-panel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.front-card-panel__img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 240px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6), transparent 55%),
        linear-gradient(135deg, rgba(0, 52, 154, 0.3), rgba(0, 52, 154, 0.8));
    border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
    .front-card-panel__inner {
        margin-inline: var(--space-sm);
        padding-inline: 0;
    }
}

/* スタッフ紹介 / FAQ: タブレット幅でもビューポート左右に余白を確保 */
@media (min-width: 768px) and (max-width: 1279px) {
    .front-card-panel__inner {
        margin-inline: var(--space-sm);
    }
}

/* スタッフ紹介用: ボタンを絶対配置で右下に */
.front-card-panel__action--absolute {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
}

/* FAQ 用: PC では右ブロック内にボタンを表示、SP 用は非表示 */
.front-card-panel__right-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

.front-card-panel__action--sp-only {
    display: none;
}

/* FAQ: 見出しの border-bottom を親幅いっぱいには出さない */
.front-card-panel--faq .front-section-heading {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

@media (max-width: 959px) {
    .front-card-panel__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .front-card-panel__figure {
        order: 2;
    }

    .front-card-panel__left {
        order: 1;
    }

    /* スタッフ紹介: SP ではボタンを絶対配置やめてインナー下部全幅に */
    .front-card-panel--staff .front-card-panel__action--absolute {
        position: static;
        display: block;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }

    /* スタッフ紹介: インナーの左右パディングを打ち消してボタンを全幅に */
    .front-card-panel--staff .front-card-panel__action--absolute {
        margin-inline: calc(-1 * var(--content-inner-padding-inline));
    }

    .front-card-panel--staff .front-card-panel__action--absolute .btn {
        width: 100%;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        justify-content: flex-start;
        padding-left: var(--space-xl);
    }

    /* FAQ: PC 用右ボタン非表示、SP 用下ボタン表示 */
    .front-card-panel__right-action {
        display: none;
    }

    .front-card-panel__action--sp-only {
        display: block;
    }

    /* FAQ: インナーの左右パディングを打ち消してボタンを全幅に */
    .front-card-panel--faq .front-card-panel__action--sp-only {
        margin-inline: calc(-1 * var(--content-inner-padding-inline));
    }

    .front-card-panel__action--sp-only .btn {
        width: 100%;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        justify-content: flex-start;
        padding-left: var(--space-xl);
    }
}

@media (max-width: 767px) {
    .front-card-panel__inner {
        margin-inline: var(--space-sm);
    }

    .front-card-panel__left {
        padding-bottom: clamp(var(--space-lg), 4vw, var(--space-2xl));
        padding-inline: var(--space-md);
        padding-top: clamp(var(--space-3xl), 6vh, var(--space-5xl));
    }

    .front-card-panel__text {
        font-size: var(--fs-sm);
    }
}

/****************************************************/
/* お知らせセクション */
/****************************************************/
.front-section--news {
    padding-block: clamp(var(--space-4xl), 8vh, var(--space-7xl));
}

.front-news {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
    column-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
    align-items: flex-start;
}

.front-news__left .front-section-heading {
    margin-bottom: 0;
}

.front-news__right {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-lg), 4vh, var(--space-2xl));
}

.front-news__more {
    display: flex;
    justify-content: center;
}

@media (max-width: 959px) {
    .front-news {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-lg);
    }
}

@media (max-width: 767px) {
    .front-news__more {
        justify-content: stretch;
    }

    .front-news__more .btn {
        width: 100%;
    }
}

/****************************************************/
/* お問い合わせ CTA（全幅ラッパー） */
/****************************************************/
.cta-contact {
    width: 100%;
    padding-block: var(--space-8xl);
}

.cta-contact__inner {
    max-width: var(--guide-cta-max-width);
    margin-inline: auto;
    padding-inline: clamp(var(--space-sm), 5vw, var(--space-4xl));
}

.cta-contact__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-sub3);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.cta-contact .reservation-page-card--contact {
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 0;
}

.cta-contact__figure {
    margin: 0;
    overflow: hidden;
}

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

@media (max-width: 767px) {
    .cta-contact {
        padding-top: var(--space-xs);
        padding-bottom: var(--space-lg);
    }

    .cta-contact__inner {
        padding-inline: var(--space-sm);
    }

    .cta-contact__card {
        grid-template-columns: 1fr;
        border-radius: var(--radius-md);
    }

    .cta-contact__figure {
        max-height: 240px;
    }
}

/****************************************************/
/* SP 固定 CTA バー */
/****************************************************/
.front-fixed-cta {
    display: none;
}

@media (max-width: 767px) {
    .front-fixed-cta {
        position: fixed;
        right: var(--space-sm);
        bottom: var(--space-sm);
        padding-bottom: env(safe-area-inset-bottom, 0);
        z-index: 900;
        display: flex;
        align-items: stretch;
        gap: var(--space-xs);
        transform: translateY(0);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .front-fixed-cta.is-hidden {
        transform: translateY(calc(100% + var(--space-lg)));
    }

    .front-fixed-cta__reservation {
        font-size: var(--fs-md);
        padding: var(--space-sm) var(--space-lg);
        min-height: 3.5rem;
        border-radius: var(--radius-sm);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .front-fixed-cta__contact {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 予約ボタンと同じ高さに合わせるため正方形に */
        height: 3.5rem;
        width: 3.5rem;
        padding: var(--space-xs);
        background-color: var(--color-accent2);
        border-radius: var(--radius-sm);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .front-fixed-cta__contact:hover,
    .front-fixed-cta__contact:active {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 168, 107, 0.4);
    }

    .front-fixed-cta__contact img {
        width: 24px;
        height: 24px;
    }
}