@charset "utf-8";

/* ===========================
main
=========================== */

.title {
    padding: 0 5.3%;
    margin: 0 auto;
}

.topic {
    margin-bottom: 48px;
}

/* スライダー背景エリア */
.slider-area {
    position: relative;
    z-index: 0;
}

/* 幅100vw × 高さ比率（375→280）の背景
   底辺はドットの下からさらに32px下 */
.slider-area::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    aspect-ratio: 375 / 250; /* 375px 幅のとき高さ280pxになる比率 */
    /* background: #f5f8ff;  */
    background: var(--bg-blue-soft);     /* 好きな色に変えてOK */
    bottom: -18px;           /* ドットの下から32px下が背景の底辺になるように */
    z-index: -1;             /* スライダーの裏側に回す */
    max-height: 350px;
}


/* 画像下テキストボックス */
.slider__content {
    display: block;
    width:72vw;
    height: 70px;
    background-color: var(--primary-white);
    max-width: 320px;
    padding: 24px 0 0 40px;
}

.slider__txt {
    display: inline-flex;
    align-items: center;
    font-family: Outfit;
    font-size: 2rem;
    line-height: 1;
    position: relative;
    border-bottom: 1px solid var(--accent-blue);
}

.slider__txt::before {
    content: '';
    background-image: url(../images/triangle.svg);
    display: block;
    position: absolute;
    height: 12px;
    width: 14px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
}

.slider__txt span {
    font-family: "Zen Kaku Gothic New";
    font-size: 1.2rem;
    margin-left: 8px;
}

.slider li{
    max-width: 320px;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:100%;
    margin:0 auto;
}

.slider img {
    width:72vw;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:30px 0 0 0;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:24px;/*ドットボタンのサイズ*/
    height:2px;/*ドットボタンのサイズ*/
    display:block;
    background:#ccc;/*ドットボタンの色*/
}

/* ★ JSで付けている .is-active 用の色指定 */
.slick-dots li.is-active button {
    background: var(--primary-blue);
}

/* 修正 */

.slick-dots li {
    display:inline-block;
    margin:0 4px;
}

/* ★ 4つ目以降のドットは非表示 → 見た目は3つだけ */
.slick-dots li:nth-child(n+4) {
    display: none;
}


.container{
    min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative;/* ←相対位置 */
    padding-bottom: 108px; /* ←フッターの高さを指定 */
    box-sizing: border-box;
    /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}

.copy {
    position: absolute;/* ←絶対位置 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -2;
}

    /*矢印の設定*/

    /*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 38%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    width: 56px;      /* ←画像サイズに合わせて調整 */
    height: 56px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 3;
    border: none;     /* ← 旧いborder矢印を消す */
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 3%;
    background-image: url(../images/arrow-left.svg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 3%;
    background-image: url(../images/arrow-right.svg);
}

/* main tb */
@media screen and (min-width: 768px){
    .title {
        padding: 0 7.3%;
    }

    .topic {
        text-align: left;
        margin-bottom: 64px;
    }

    /* 幅100vw × 高さ比率（375→280）の背景
    底辺はドットの下からさらに32px下 */
    .slider-area::before {
        aspect-ratio: 468 / 250; /* 375px 幅のとき高さ280pxになる比率 */
        background: #f5f8ff;     /* 好きな色に変えてOK */
        bottom: -32px;           /* ドットの下から32px下が背景の底辺になるように */
    }


    /* 画像下テキストボックス */
    .slider__content {
        width:50vw;
        height: 88px;
        padding: 32px 0 0 56px;
        max-width: 488px;
    }

    .slider__txt {
        font-size: 2.4rem;
    }

    .slider__txt::before {
        content: '';
        background-image: url(../images/triangle.svg);
        height: 14px;
        width: 16px;
        top: 50%;
        transform: translateY(-50%);
        left: -22px;
    }

    .slider__txt span {
        font-size: 1.4rem;
    }

    .slider li{
        max-width: 488px;
    }

    /*==================================================
    スライダーのためのcss
    ===================================*/
    .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
        width:100%;
    }

    .slider img {
        width:50vw;/*スライダー内の画像を横幅100%に*/
        height:auto;
    }

    /*slickのJSで書かれるタグ内、スライド左右の余白調整*/

    .slider .slick-slide {
        margin:0 15px;
    }

    /*矢印の設定*/

    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        position: absolute;/*絶対配置にする*/
        top: 41%;
        cursor: pointer;/*マウスカーソルを指マークに*/
        outline: none;/*クリックをしたら出てくる枠線を消す*/
        width: 60px;      /* ←画像サイズに合わせて調整 */
        height: 60px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        z-index: 3;
        border: none;     /* ← 旧いborder矢印を消す */
}

    .slick-prev {/*戻る矢印の位置と形状*/
        left: 3%;
        background-image: url(../images/arrow-left.svg);
    }

    .slick-next {/*次へ矢印の位置と形状*/
        right: 3%;
        background-image: url(../images/arrow-right.svg);
    }


    /*ドットナビゲーションの設定*/

    .slick-dots {
        margin:42px 0 0 0;
    }

    .slick-dots button {
        width:40px;/*ドットボタンのサイズ*/
        height:2px;/*ドットボタンのサイズ*/
    }

    /* 修正 */

    .slick-dots li {
        margin:0 6px;
    }

    .container{
        padding-bottom: 128px; /* ←フッターの高さを指定 */
    }
}

@media screen and (min-width: 1024px){
    .topic {
        text-align: left;
        margin-bottom: 88px;
    }
}

@media screen and (min-width: 1280px){
    .topic {
        margin-bottom: 96px;
    }

    .slider-area::before {
        aspect-ratio: 468 / 250;
        background: #f5f8ff;
    }

    .slider__content {
        width:28vw;
    }

    .slider {
        width:92%;
    }

    .slider img {
        width:28vw;
    }

    .slider .slick-slide {
        margin:0 16px;

        /* ★ 追加：オーバーレイ用の土台 */
        position: relative;
        overflow: hidden;
    }

    .slick-prev, 
    .slick-next {
        top: 39%;
    }

    .slick-prev {
        left: -2.5%;
    }

    .slick-next {
        right: -2.5%;
    }

    /* ▼▼ ここから新しく追加する部分 ▼▼ */

    /* 画像の上にかぶせるオーバーレイ */
    .slider .slick-slide::after {
        content: "";
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0; */
        background: rgba(255, 255, 255, .3); /* 白く淡くする */
        opacity: 0;
        transition: opacity .3s ease-in-out;
        pointer-events: none;
    }

    /* hover時：オーバーレイだけ表示 */
    .slider .slick-slide:hover::after {
        opacity: 1;
    }
}

@media screen and (min-width: 1440px){
    .title {
        padding: 0 8.3%;
    }

    .topic {
        margin-bottom: 102px;
    }

    /* 画像下テキストボックス */
    .slider__content {
        width:27.7vw;
        max-width: auto;
    }

    .slider li{
        max-width: auto;
    }

    /*==================================================
    スライダーのためのcss
    ===================================*/
    .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
        width:90%;
    }

    .slider img {
        width:27.7vw;/*スライダー内の画像を横幅100%に*/
    }

    /*slickのJSで書かれるタグ内、スライド左右の余白調整*/

    .slider .slick-slide {
        margin:0 20px;
    }

    /*矢印の設定*/

    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        top: 38%;
    }
}

@media screen and (min-width: 1750px){
    /* 幅100vw × 高さ比率（375→280）の背景
    底辺はドットの下からさらに32px下 */
    .slider-area::before {
        max-height: 410px;
    }

    .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
        width:84%;
    }

    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        top: 42%;
}

    .slick-prev {/*戻る矢印の位置と形状*/
        left: -2.5%;
    }

    .slick-next {/*次へ矢印の位置と形状*/
        right: -2.5%;
    }
}

@media screen and (min-width: 1920px){
    .title {
        padding: 0;
        max-width: 1400px;
    }

    .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
        width:82%;
        max-width: 1600px;
    }

    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        top: 40.5%;
}
}