/* === Hero Cards (final, centered & no-regression) === */
.hero-cards {
    display: flex;
    gap: 15px;
    position: relative;
    z-index: 2;
    font-family: var(--ff-hiragino, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif);
    font-weight: 600;
    font-size: 17px;
}

.hero-card {
    min-width: 242px;           /* ← your choice */
    display: flex;              /* header + content を縦並び */
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* header */
.hero-card-header {
    padding: 12px 10px;
    text-align: center;
    flex: 0 0 auto;
}
.hero-card-header h3 {
    margin: 0;
    line-height: 1.2;
    font-size: 17px;
    color: #fff;
}

/* header colors */
.bg-red    { background: #c35462; }
.bg-orange { background: #d16b5e; }
.bg-blue   { background: #29609e; }

/* content area（←ここだけ“中央固定”に必要な最小変更あり） */
.hero-card-content {
    padding: 12px 0;
    min-height: 148px;
    flex: 1 1 auto;
    display: grid;
    justify-items: center;            /* 水平方向センター */
    row-gap: 14px;
    /* place-items: center; ←水平方向は上で指定済み。垂直は行レイアウトで制御 */
}
.bg-red-soft    { background: #F7E9EB; }
.bg-orange-soft { background: #F6DEDB; }
.bg-blue-soft   { background: #C7D9E7; }

/* icon + text line（元のベースはそのまま） */
.hero-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto;
    width: auto;
    height: auto;
}

/* 画像は“高さ基準”、横は比率で可変（元のまま） */
.hero-card-icon img {
    height: 56px;                /* お好みで 48–72px */
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

/* 見出し（元のまま） */
.hero-card-content h4 {
    margin: 0;
    line-height: 1.2;
    text-align: center;
}
.hero-card-content .h4-large { font-size: 27px; letter-spacing: 0.9px; }
.hero-card-content .h4-small { font-size: 16px; font-weight: 500; }

/* button（元のまま） */
.hero-card-button {
    background: #fff;
    padding: 5px 0;
    border-radius: 20px;
    width: 200px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;                /* ← your choice */
}
.hero-card-button span {
    font-size: 16px;
    letter-spacing: -1.9px;      /* ← your choice */
}

/* brand colors (text)（元のまま） */
.btn-red    { color: #c35462; }
.btn-orange { color: #d16b5e; }
.btn-blue   { color: #29609e; }

/* hover: ボタンのみ色反転（元のまま） */
.hero-card.hero-card-left:hover   .hero-card-button,
.hero-card.hero-card-center:hover .hero-card-button,
.hero-card.hero-card-right:hover  .hero-card-button {
    background: #fff;
}
.hero-card.hero-card-left:hover   .btn-red    { background: #c35462; color: #fff; }
.hero-card.hero-card-center:hover .btn-orange { background: #d16b5e; color: #fff; }
.hero-card.hero-card-right:hover  .btn-blue   { background: #29609e; color: #fff; }

/* ↓↓↓ ここから“今回の中央固定＆距離一定”のための追加だけ ↓↓↓ */

/* すでに入っている（問題の元になった）指定は残しつつ、hc-media 内だけ打ち消す */
.hero-card-content h4 {
    /* 以前の width:min-content / inline-block / min-width がある想定だが削らない */
    /* 今回は .hc-media h4 で上書きすることで副作用ゼロにする */
}

/* 画像＋テキストの親（追加クラス）を中央行へ固定＆ shrink-to-fit */
.hc-media {
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* ← gap だけで距離を作る */
    gap: 12px;
    justify-self: center;
    margin: 0;                   /* margin:0 auto の影響を避ける */
    max-width: 100%;
}

/* ボタンは下側の行へ */
.hero-card-content > .hero-card-button {
    grid-row: 3;
    align-self: end;
}

/* テキストは“インライン＋左寄せ＋自動改行”に限定。内部余白をゼロ化して見かけの距離一定 */
.hc-media h4 {
    display: inline;            /* ブロック幅を持たせない */
    text-align: left;           /* 内側は左寄せ（行全体は grid で中央） */
    white-space: normal;        /* 自動改行ON */
    overflow-wrap: anywhere;    /* 長い英数字も折り返す */
    line-height: 1.2;
    margin: 0;
    width: auto !important;     /* width:min-content を打ち消し */
    min-width: 0 !important;    /* min-width を打ち消し */
}

/* ボタン本体：右端に矢印ぶんの余白を確保 */
.hero-card-button{
    position: relative;
    padding-right: 0.7em; /* ← 矢印のぶんだけ右余白を足す */
    height: auto;         /* 複数行対応 */
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 矢印を常に右端・中央に固定 */
.hero-card-button::after{
    content: "\203A";            /* › */
    position: absolute;
    right: 10px;                 /* 右端からの距離（お好みで） */
    top: 45%;
    transform: translateY(-50%);
    line-height: 1;
    color: currentColor;         /* 文字色を継承（ホバー反転にも追従） */
    pointer-events: none;        /* クリックを邪魔しない */
}

/* 複数行テキストの折返し＆中央寄せ（念のため） */
.hero-card-button span{
    white-space: normal;
    text-align: center;
    line-height: 0.7;
}


/* 対応ブラウザで見栄え良い改行（任意） */
@supports (text-wrap: balance) {
    .hc-media h4 { text-wrap: balance; }
}


@media (max-width: 1024px){
    .hero-card-content h4,
    .hero-card-content h4 span {
        font-weight: 700; /* 太字 */
    }
    .hero-card .hero-card-content h4 .h4-large {
        font-weight: 700; /* 太字 */
    }

    .hero-card-header {
        padding: clamp(5px, 2vw, 18px) clamp(8px, 2vw, 15px);
        text-align: center;
        flex: 0 0 auto;
    }
    .hero-card-icon img {
        height: clamp(19px, 10vw, 93px);
    }
    .hero-card-content {
        min-height: 159px;
    }
    .hero-cards a.hero-card .hero-card-content.hero-card-content h4{
        font-size: clamp(17px, 3vw, 35px);
    }

    .hero-card .hero-card-content h4 .h4-large{
        font-size: clamp(17px, 3vw, 45px);
    }

    .hero-card-button {
        width: 92%;
        border-radius: unset;
        height: auto;
        line-height: 0.7;
    }
    .hero-card-content {
        padding: 17px 0;
        min-height: 148px;
        flex: 1 1 auto;
        display: block;
        justify-items: center;
        row-gap: 14px;
    }
    .hc-media {
        margin-bottom: 16px;
    }

    .hero-card-center .hero-card-content h4 .h4-small {
        font-size: clamp(10px, 2.5vw, 27px);
        font-weight: 700; /* 太字 */
    }
    .hero-card-content > .hero-card-button {
        padding: clamp(1px, 2vw, 24px) 0;
    }
    .hero-title, .hero-title_02 {
        width: 100%;
        font-size: clamp(28px, 5vw, 40px);
    }
    .hero-sub-title {
        margin-top: 20px;
    }
    .hero-sub-title, .hero-sub-title_02 {
        font-size: clamp(18px, 3vw, 28px);
        width: fit-content;
        padding-right: var(--global-kb-spacing-xxs, 0.5rem);
    }
    .hero-tel {
        font-size: clamp(18px, 2.5vw, 26px);
        font-weight: 500;
    }
    .hero-card-header h3 {
        font-size: clamp(13px, 2.5vw, 52px);
    }
    .hero-card-button span {
        font-size: clamp(11px, 3vw, 21px);
    }  
    .hero-card-content {
        padding: 12px 0;
        min-height: 148px;
        flex: 1 1 auto;
        display: block;
        justify-items: center;
        row-gap: 14px;
    } 

}

@media screen and (max-width: 640px) {
    #available-menu-items #available-menu-items-search .accordion-section-content {
        top: 146px;
    }
    .hc-media {
        margin-bottom: 2px;
    }

    .hero-card-icon img {
        height: clamp(16px, 8vw, 93px);
    }

    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        margin-left: unset !important;
        margin-right: unset !important;
    }


    .hero-cards a.hero-card .hero-card-content.hero-card-content h4{
        font-size: clamp(13px, 1vw + 8px, 30px);
        letter-spacing: 0.1px;
        font-weight: 800;
        white-space: nowrap;
    }

    .hero-card .hero-card-content h4 .h4-large{
        font-size: clamp(11px, 1vw, 30px);
        font-weight: 800;
        letter-spacing: 0;
    }

    .hero-card-center .hero-card-content h4 .h4-small {
        font-size: clamp(10px, 1vw, 14px);
         font-weight: 800;
    }

    .hc-media {
        gap: 2px;
        margin-top: clamp(6px, 2vw, 30px);
    }

    .hero-card-button span {
        font-size: clamp(9px, 1vw + 7px, 14px);
    }

    .hero-card-content {
        min-height: auto;
    }
    .hero-card-content {
        row-gap: 0px;
    }

    .hero-cards {
        gap: 5px;
    }

    .hero-card-header h3 {
        font-size: clamp(10px, 2vw, 40px);
    }
    .hero-card-content {
        padding: 0 0 clamp(6px, 1vw, 12px);
    }
    .hero-cards {
        min-height: auto;
    }
    .hero-card-content .hero-card-button {
        margin: auto clamp(5px, 1vw, 12px);
        border-radius: unset;
        height: auto;
        line-height: 0.7;
        padding: clamp(4px, 1vw, 15px);
    }
    .hero-card-button {
        position: relative;
        padding-right: 0.7em;
        height: auto;
        min-height: clamp(37px, 5vw, 46px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}