/*heroセクション*/
.p-hero {
background: linear-gradient(90deg, #FFE8D0 0%, #EFC3B9 100%);
padding: 60px 0;
position: relative;
width: 100%;
}

/*1. 上段：メインエリア*/
.p-hero__main {
display: flex;
justify-content: space-between;
align-items: center;
}

/*左側：テキスト*/
.p-hero__content {
flex: 0 0 58%;
z-index: 2;
}

/*右側：画像*/
.p-hero__image {
flex: 0 0 42%;
}

.p-hero__image img {
width: 100%;
height: auto;
display: block;
}

/*テキスト*/
.p-hero__title {
color: var(--wp--preset--color--text-black);
font-size: 40px;
line-height: 1.4;
margin-bottom: 24px;
font-weight: bold;
}

.p-hero__text {
font-size: 16px;
line-height: 1.8;
margin-bottom: 20px;
font-weight: 500;
}

/*2. ボタン*/
.p-hero__buttons {
display: flex;
gap: 16px;
}

.p-hero__buttons .c-button {
width: 200px;
padding: 10px 0;
font-size: 16px;
justify-content: center;
text-align: center;
}

/*3. スライダー*/
.p-hero-slider.swiper {
width: 100%;
max-width: 1100px;
margin: 40px auto 0; /* ボタンとの余白 */
overflow: hidden;
position: relative;
padding: 0;
}

/* スライド方向を反転（左スワイプで次へ） */
.p-hero-slider {
    direction: rtl;
}

/* 中身は通常方向に戻す（レイアウト崩れ防止） */
.p-hero-slider__item {
    direction: ltr;
}

/*ページネーション*/
.p-hero-slider .swiper-pagination {
position: relative;
margin-top: 20px;
text-align: center;
}

/* 未選択のドット */
.p-hero-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--wp--preset--color--white);
    opacity: 1;
    transition: all 0.3s;
}

/* 選択中のドット：少し横長にする（流行りのデザイン） */
.p-hero-slider .swiper-pagination-bullet-active {
    width: 24px; /* 横に伸ばす */
    border-radius: 4px;
    background: var(--wp--preset--color--main-color);
}

/*カード*/
.p-hero-slider__item.swiper-slide {
background: var(--wp--preset--color--white);
border-radius: 12px;
height: auto;
width: 500px;
display: flex;
box-sizing: border-box;
flex-shrink: 0;
}

.p-hero-slider__link {
display: flex;
padding: 16px;
gap: 12px;
text-decoration: none;
color: inherit;
align-items: flex-start;
}

/*サムネイル*/
.p-hero-slider__thumbnail {
flex: 0 0 140px;
aspect-ratio: 4 / 3;
border-radius: 8px;
overflow: hidden;
background: #eee;
}

.p-hero-slider__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

/*テキスト*/
.p-hero-slider__body {
flex: 1;
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
}

.p-hero-slider__title {
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin: 10px;
color: var(--wp--preset--color--text-black);
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.p-hero-slider__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

@media (max-width: 768px) {
    /* 1. 背景と全体の配置 */
    .p-hero {
        padding: 50px 0 40px;
        background: linear-gradient(180deg, #FFE8D0 0%, #EFC3B9 100%);
        text-align: center; /* ★全体を中央寄せ */
    }

    .p-hero__main {
        flex-direction: column; /* デザイン案通り テキスト→ボタン→画像 */
        gap: 0;
    }

    /* 2. テキストエリア */
    .p-hero__content {
        width: 100%;
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .p-hero__title {
        font-size: 32px; /* デザイン案のボリューム感に調整 */
        line-height: 1.3;
        margin-bottom: 20px;
        text-align: left; /* タイトルは左寄せ（デザイン準拠） */
    }

    .p-hero__text {
        font-size: 15px;
        line-height: 1.7;
        text-align: left; /* リード文も左寄せ */
        margin-bottom: 30px;
    }

    /* 3. ★横並びボタン（以前のCTA2の設定を活用）★ */
    .p-hero__buttons {
        display: flex;
        flex-direction: row; /* 横並び */
        justify-content: center;
        gap: 15px;
        margin-bottom: 40px;
    }

    /* ボタンユニット（キャプション付き） */
     .p-hero__buttons .c-button {
        flex: 1;
        max-width: 150px;         /* ユニットの幅いっぱいに広げる */        /* 横並びの場合は少し高さを抑えるとバランスが良い */
        font-size: 16px;     /* ★文字がはみ出さないよう調整 */
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap; /* 改行させない */
     }

    /* 4. イラスト画像 */
    .p-hero__image {
        width: 100%;
        max-width: 340px; /* イラストが大きすぎないように制限 */
        margin: 0 auto 50px;
    }

    /* 5. スライダーエリア全体の調整 */
    .p-hero-slider.swiper {
        padding-left: 30px; /* 左側の余白 */
        overflow: visible;  /* ★重要：これがないと右側のチラ見せが消える場合があります */
    }

    .p-hero-slider__item.swiper-slide {
        width: 65%; /* ★デザイン案に近い固定幅に設定（2枚目が見えるサイズ） */
        height: auto;
        background: var(--wp--preset--color--white);
        border-radius: 15px;
        overflow: hidden;
        margin-right: 15px;
    }

    .p-hero-slider__link {
        display: flex;
        flex-direction: column; /* ★縦並び（画像上、テキスト下） */
        padding: 0; /* 全体のパディングを一旦0に */
        gap: 0;
    }

    /* サムネイル（グレーの正方形部分） */
    .p-hero-slider__thumbnail {
        width: 100%;
        aspect-ratio: 4 / 3; /* ★デザイン案通りの正方形に近い比率 */
        flex: none;
        border-radius: 0; /* カードの角丸に合わせるためリセット */
        background: #888; /* デザイン案のグレー */
    }

    .p-hero-slider__thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* テキストエリア（body） */
    .p-hero-slider__body {
        padding: 15px; /* テキスト周りだけに余白をつける */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* ★左寄せにする */
        text-align: left;        /* ★左寄せにする */
    }

    /* タイトル（2行で三点リーダー） */
    .p-hero-slider__title {
        font-size: 15px;
        font-weight: bold;
        line-height: 1.5;
        margin: 0 0 12px 0; /* 下のタグとの隙間 */
        color: var(--wp--preset--color--text-black);

        /* 2行制限の設定 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* タグ（横並びのままにする） */
    .p-hero-slider__tags {
        display: flex;
        flex-direction: row; /* ★縦並び(column)から横並びに戻す */
        flex-wrap: wrap;     /* 入りきらない場合は改行 */
        gap: 6px;
        justify-content: flex-start;
    }

    /* タグ自体のスタイル（オレンジの背景） */
    .p-hero-slider__tags .c-tag,
    .p-hero-slider__tags span {
        background-color: var(--wp--preset--color--main-color);
        color: #fff;
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* タイトル */

    .p-hero-slider__title{
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
        color: var(--wp--preset--color--text-black);
        margin: 0 0 20px 0; /* ★下のタグとの隙間 */
        width: 100%;
        /* 2行まで許可、それ以上は省略 */
        display: -webkit-box;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* タグ */

    .p-hero-slider__tags{
        display: flex;
        flex-direction: column; /* ★タグを縦並びに */
        align-self: flex-start;
        align-items: flex-start;
        gap: 8px; /* ★タグ同士の上下の隙間 */
        width: auto;
        overflow: visible;
    }

    /* タグ自体のスタイル微調整（必要であれば） */
    .p-hero-slider__tags .c-tag {
        font-size: 11px;
        padding: 3px 10px;
        white-space: nowrap; /* タグ内は改行させない */
    }
}