/*サービス概要セクション (サービス一覧部分)*/

.p-services__head {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    color: var(--wp--preset--color--text-black);
}

/* 上段の2枚並び */
.p-services__list {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    width: 100%;
}

.p-services__consulting{
    width: 100%;
    display: flex;
}

/* 個別のカードスタイル */
.p-services__item {
    flex: 1;
    background-color: var(--wp--preset--color--white);
    padding: 40px;
    border-radius: 12px;
}

/* カードの見出し部分を横並びにする */
.p-services__item-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;           /* 上下中央で揃える */
    margin-bottom: 10px;           /* 下（本文）との余白 */
}

/* 下段のフルサイズカード */
.p-services__item.--full {
    flex: 1;
    display: block;
    width: auto;
}

.p-services__item-text {
    line-height: 1.8;
}

/* タグを包むグループ（HTMLに追加した場合） */
.p-services__tag-group {
    margin-top: 20px;
}

.p-services__item-label{
    font-size: 25px;
    font-weight: bold;
    color: var(--wp--preset--color--text-main);
    margin-bottom: 0;
}

.p-services__tags{
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
}

@media (max-width: 1024px) {
    .p-services__head {
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* 1. サービス一覧のカードを縦に並べる */
    .p-services__list,.p-services__consulting {
        flex-direction: column;
        width: 100%;
        gap: 30px;
    }

    /* 2. カード内の余白をスマホ用に最適化 */
    .p-services__item {
        padding: 30px 20px;
        box-sizing: border-box;
    }

    /* 3. ★メインボタンのはみ出しを修正★ */
    .c-arrow-button.--outline {
        display: flex;       /* inline-flexからflexに変更して幅いっぱいに */
        width: 100%;         /* カードの幅に合わせる */
        max-width: 100%;     /* 突き抜け防止 */
        box-sizing: border-box;
        padding: 12px 15px;  /* 左右の余白を少し詰める */
        gap: 10px;
    }

    .c-arrow-button.--outline .c-arrow-button__text {
        font-size: 16px;     /* 文字を小さく */
        white-space: normal; /* ★改行を許可する（これ重要！） */
        text-align: left;
        line-height: 1.3;
        flex: 1;             /* テキスト領域を広げる */
    }

    .c-arrow-button.--outline .c-arrow-button__icon {
        width: 24px;         /* アイコンも一回り小さく */
        height: 24px;
        flex-shrink: 0;      /* アイコンが潰れないように固定 */
    }
    /* サービス名ボタンの文字サイズを調整 */
    .c-arrow-button.--outline .c-arrow-button__text {
        font-size: 18px; /* 22pxから少し小さくして改行を防ぐ */
    }

    /* 4. タググループのレスポンシブ対応 */
    .p-services__tag-group {
        margin-top: 20px;
        gap: 8px; /* スマホでは隙間を少し詰める */
        /* 左寄せを維持しつつ、ボタンが溢れたら綺麗に並ぶようにする */
        justify-content: flex-start;
    }

    /* ラベル（施策ジャンル）のサイズ調整 */
    .p-services__item-label {
        font-size: 20px; /* 25pxからサイズダウン */
        margin-bottom: 4px;
    }

    /* タグボタンの微調整 */
    .c-tag-button {
        font-size: 13px;
        padding: 5px 10px;
    }
}