.button-list-label {
    display: flex;
    height: auto;
    position: relative;
    flex-direction: column;
    align-items: center;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 6vw, 100px);
    /* ★ 固定100px → 可変に */
    margin-bottom: 40px;
    width: 100%;
    /* ★ 追加：幅を明示することで、ネストしたflexのshrink-to-fit計算が
       循環してボタン幅が本来より小さく確定し、テキストが折り返される
       事故を防止（お問合せボタンの文字が縦に割れる不具合の原因） */
}


/* ==========================================
   TEL / MAIL ボタン全体
   ※ contact.css内の.contact-buttonsと重複しています。
      contact.css側がメディアクエリ対応済みのため、
      こちらの.contact-buttons定義は削除を推奨します。
========================================== */


/* ==========================================
   ボタン本体
========================================== */

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(160px, 20vw, 210px);
    /* ★ 固定210px → 可変に */
    height: clamp(65px, 9vw, 80px);
    padding: 0;
    animation: telMailPulse 2.5s infinite;
    box-sizing: border-box;

    background-color: #0b284a;
    border: 2px solid #0b284a;
    border-radius: 10px;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;

    box-shadow: 0 6px 18px rgba(11, 40, 74, 0.15);

    transition:
        width 0.45s ease,
        height 0.35s ease,
        border-radius 0.35s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-mail {
    animation-delay: 1.25s;
}

.btn-arrow {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    width: clamp(40px, 6vw, 50px);
    /* ★ 固定50px → 可変に */
    height: clamp(40px, 6vw, 50px);
    margin-right: 15px;

    background-color: #ffffff;
    border-radius: 50%;
    color: #0b284a;
    font-size: clamp(24px, 3vw, 30px);
    /* ★ 固定30px → 可変に */
    font-weight: 400;
    line-height: 1;
    z-index: 2;

    transition:
        left 0.4s ease,
        width 0.3s ease,
        height 0.3s ease,
        margin 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.btn-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0;
    text-align: center;
    z-index: 3;
}

.btn-label {
    display: block;
    color: #ffffff;
    font-size: clamp(18px, 2.5vw, 25px);
    /* ★ 固定25px → 可変に */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.btn .reveal {
    display: block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #0b284a;
    font-size: clamp(13px, 1.8vw, 17px);
    /* ★ 固定17px → 可変に */
    font-weight: 500;
    line-height: 1.2;
    opacity: 0;

    transition:
        max-width 0.45s ease,
        opacity 0.3s ease;
}

.btn:hover {
    background-color: #ffffff;
    border-color: #0b284a;

    width: max-content;
    min-width: min(390px, 85vw);
    /* ★ 固定390px → 可変に(画面幅の85%を上限) */
    height: clamp(85px, 12vw, 105px);
    padding: 0 clamp(20px, 4vw, 40px) 0 clamp(70px, 12vw, 105px);

    border-radius: 53px;
    justify-content: flex-start;

    box-shadow: 0 10px 28px rgba(11, 40, 74, 0.18);
    animation: none;
}

.btn:hover .btn-arrow {
    position: absolute;
    left: clamp(38px, 6vw, 52px);
    top: 50%;
    width: clamp(48px, 7vw, 62px);
    height: clamp(48px, 7vw, 62px);
    margin-right: 0;
    transform: translate(-50%, -50%);

    background-color: #0b284a;
    color: #ffffff;
    font-size: clamp(26px, 4vw, 36px);
}

.btn:hover .btn-content {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 0;
    text-align: left;
}

.btn:hover .btn-label {
    color: #0b284a;
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: 2px;
}

.btn:hover .reveal {
    max-width: 600px;
    margin-top: 5px;
    color: #555555;
    font-size: clamp(20px, 3.5vw, 35px);
    /* ★ 固定35px → 可変に */
    opacity: 1;
}


@media (max-width: 480px) {
    .btn:hover {
        min-width: 260px;
        padding-left: 65px;
    }
}


/* ==========================================
   スマホ・タブレット（ホバー操作ができない端末）対応
   hoverできない端末では :hover の見た目に
   永久に到達できないため、最初から展開した状態で表示する
========================================== */

@media (hover: none) {

    .btn {
        /* ★ 修正：width:max-content だと文字数に応じてボタンごとに
           横幅が変わってしまい(MAILの方がTELより文字数が多く広くなる)、
           TEL/MAILのボタンサイズが微妙に揃わない原因になっていたため、
           両方とも同じ固定幅に変更 */
        width: min(300px, 85vw);
        min-width: min(260px, 85vw);
        height: clamp(75px, 18vw, 105px);
        padding: 0 clamp(20px, 4vw, 40px) 0 clamp(60px, 15vw, 105px);

        border-radius: 53px;
        justify-content: flex-start;

        background-color: #ffffff;
        border-color: #0b284a;

        box-shadow: 0 10px 28px rgba(11, 40, 74, 0.18);
        animation: none;
    }

    .btn-arrow {
        position: absolute;
        left: clamp(32px, 9vw, 52px);
        top: 50%;
        width: clamp(42px, 10vw, 62px);
        height: clamp(42px, 10vw, 62px);
        margin-right: 0;
        transform: translate(-50%, -50%);

        background-color: #0b284a;
        color: #ffffff;
        font-size: clamp(22px, 5vw, 36px);
    }

    .btn-content {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 0;
        text-align: left;
    }

    .btn-label {
        color: #0b284a;
        font-size: clamp(18px, 4vw, 30px);
        letter-spacing: 2px;
    }

    .btn .reveal {
        max-width: 600px;
        margin-top: 5px;
        color: #555555;
        font-size: clamp(15px, 4vw, 35px);
        opacity: 1;
    }

    /* ★ 追加：スマホ等はタップ時に:hoverが一時的に適用されてしまう端末があり、
       その結果PC用の拡大ホバー演出(.btn:hover以下)が働いて「押すと大きくなる」
       ように見えていました。この幅では:hoverの見た目を通常時と完全に
       同じ値で上書きし、タップしても変化しないようにしています */
    .btn:hover {
        width: min(300px, 85vw);
        min-width: min(260px, 85vw);
        height: clamp(75px, 18vw, 105px);
        padding: 0 clamp(20px, 4vw, 40px) 0 clamp(60px, 15vw, 105px);
        border-radius: 53px;
        justify-content: flex-start;
        box-shadow: 0 10px 28px rgba(11, 40, 74, 0.18);
        animation: none;
    }

    .btn:hover .btn-arrow {
        position: absolute;
        left: clamp(32px, 9vw, 52px);
        top: 50%;
        width: clamp(42px, 10vw, 62px);
        height: clamp(42px, 10vw, 62px);
        margin-right: 0;
        transform: translate(-50%, -50%);
        font-size: clamp(22px, 5vw, 36px);
    }

    .btn:hover .btn-content {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 0;
        text-align: left;
    }

    .btn:hover .btn-label {
        font-size: clamp(18px, 4vw, 30px);
        letter-spacing: 2px;
    }

    .btn:hover .reveal {
        max-width: 600px;
        margin-top: 5px;
        font-size: clamp(15px, 4vw, 35px);
    }
}


@keyframes telMailPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 40, 74, 0.30);
    }

    60% {
        box-shadow: 0 0 0 10px rgba(11, 40, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(11, 40, 74, 0);
    }
}


/* ==========================================
   問い合わせボタン
========================================== */

.button_line004 {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    white-space: nowrap;
    margin: 40px auto 0;
    /* ★ top:50px固定値を廃止しmarginに統一 */

    max-width: min(420px, 90%);
    /* ★ 上限追加 */
    padding: clamp(16px, 3vw, 24px) clamp(28px, 6vw, 48px);
    /* ★ 固定値 → 可変に */

    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    box-sizing: border-box;

    color: #ffffff;
    background-color: rgb(11, 40, 74);
    border-radius: 8px;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;

    font-weight: 600;
    text-decoration: none;
    font-size: clamp(22px, 4vw, 40px);
    /* ★ 固定40px → 可変に */

    box-shadow: 0 0 0 0 rgba(11, 40, 74, 0.35);
    animation: contactPulse 3s infinite;
}

.button_line004::before,
.button_line004::after {
    content: '';
    width: 18px;
    height: 18px;
    border-color: #ffffff;
    box-sizing: border-box;
    border-style: solid;
    display: block;
    position: absolute;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}

.button_line004::before {
    top: -6px;
    left: -6px;
    border-width: 2px 0 0 2px;
    z-index: 5;
}

.button_line004::after {
    bottom: -6px;
    right: -6px;
    border-width: 0 2px 2px 0;
}

@keyframes contactPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 40, 74, 0.30);
    }

    60% {
        box-shadow: 0 0 0 10px rgba(11, 40, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(11, 40, 74, 0);
    }
}

.button_line004:hover::before,
.button_line004:hover::after {
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: rgb(11, 40, 74);
    border-radius: 5px;
}

.button_line004:hover {
    color: rgb(11, 40, 74);
    background-color: #fcfcfc;
    border-color: rgb(11, 40, 74);
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 40, 74, 0.15);
}


/* ==========================================
   works
========================================== */

.button-group-works {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    padding: 0 20px;
    /* ★ 追加：狭い画面での左右余白確保 */
    box-sizing: border-box;
}

.button_wroks {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: min(240px, 80%);
    /* ★ min(350px, 90%) → min(240px, 80%)に縮小 */
    height: auto;
    min-height: 56px;
    /* ★ 65px → 56pxに縮小 */

    padding: clamp(12px, 2vw, 16px) clamp(20px, 4vw, 32px);
    /* ★ 余白を縮小 */
    box-sizing: border-box;

    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 2.2vw, 22px);
    /* ★ clamp(22px, 4vw, 40px) → clamp(18px, 2.2vw, 22px)に縮小。
                                                これが一番大きい原因だった箇所です */

    color: rgb(11, 40, 74);
    background-color: #c9a227;
    border-radius: 8px;
    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;

    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.35);
    animation: contactPulse 3s infinite;
}

.button_wroks::before,
.button_wroks::after {
    content: '';
    width: 18px;
    height: 18px;
    border-color: rgb(11, 40, 74);
    box-sizing: border-box;
    border-style: solid;
    display: block;
    position: absolute;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}

.button_wroks::before {
    top: -6px;
    left: -6px;
    border-width: 2px 0 0 2px;
    z-index: 5;
}

.button_wroks::after {
    bottom: -6px;
    right: -6px;
    border-width: 0 2px 2px 0;
}

.button_wroks:hover::before,
.button_wroks:hover::after {
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: #ffffff;
    border-radius: 5px;
}

.button_wroks:hover {
    color: rgb(11, 40, 74);
    background-color: rgb(234, 234, 235);
    border-color: #ffffff;
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}