/* @preserve
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
原則として、許可なしの再配布は禁止させていただきます。
また、無料でお使いになる場合は、【ＰＲ枠】のリンクは全て削除禁止です。
（※加工後の削除も禁止させていただいておりますのでご了承ください。）
PR枠の削除（有料プラン）に関するお問い合わせや、その他ご不明な点は、
http://www.s-hoshino.com/info.html、または、
https://www.megapx.com/contact.htmlのフォームよりお問い合わせください。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@endpreserve
*/

/*
トップページのsplideライブラリを使ったスライダー部分のスタイル
Walz動画サイズ: 1280*720,1920*1080 16:9
crs画像サイズ: 953*320

・Waltzの動画は、右に動画、左に文章を少し重ねて配置する。
    <https://ja.splidejs.com/premium/>　みたいなレイアウトにする。
・CRSの画像は、100%の幅にして、右に文章を重ねる。
    <https://www.crsltd.com/> のようなレイアウトにする。
・ウェビナーは、walzのスタイルにする。

モバイル（640px以下）の場合、
上に画像、動画、下に文章を配置する。
CRSの画像は、モバイル用の画像を使う。
テキストは左右中央に配置する。

文字のサイズは、.text_layerをvwで指定して、その下の要素をemで指定してレスポンシブにする。

※ブラウザの設定でフォントサイズを変更していると、影響があるので確認する。
※adjustFontSize()スクリプトでもフォントサイズを調整している。

*/

.for_mobile {
    display: none;
}

.for_pc {
    display: block;
}

header {
    border-bottom-width: 3px;
    border-bottom-color: #ffffffd5;
}


.slide_back {
    background: #12191b;
    background: radial-gradient(circle, #2ec5cf 0%, #2ab6c00c 66%), #101518;
    padding: 10px;
}

.relative_parent {
    position: relative;
}

.splide {
    margin: 0 auto;
    max-width: 1100px;
    margin-bottom: 3.5rem;
}

.slide_box {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* .media_box：画像、動画を入れるボックス */

.slide_box.walz .media_box {
    position: relative;
    aspect-ratio: 16/9;
    width: 80%;
    margin-left: auto;
    margin-right: 0;
}

.slide_box.crs .media_box {
    position: relative;
    /* walzの動画(1280*720px)を80%の幅表示なので、スライドの幅は1280*100/80=1600px */
    width: 100%;
    aspect-ratio: 1600/720;
}



.slide_box.crs .media_box img,
.slide_box.crs .media_box video,
.slide_box.walz .media_box img,
.slide_box.walz .media_box video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* 右寄せ */
.slide_box.crs .media_box img.right_justify,
.slide_box.crs .media_box video.right_justify,
.slide_box.walz .media_box img.right_justify,
.slide_box.walz .media_box video.right_justify {
    left: auto;
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
}


/* 横長の画像、動画 */
.slide_box .media_box img.h_long {
    width: 100%;
    height: auto;
}

/* .text_layer：文章を入れるボックス */
.slide_box.walz .text_layer {
    position: absolute;
    max-width: 70%;
    padding: 10px;
    color: #fff;
    top: 50%;
    left: 0;
    height: auto;
    transform: translateY(-50%);

    box-sizing: border-box;
    font-size: clamp(0.5rem, 1.27vw, 0.9rem);


    text-shadow: 3px 3px 3px #383839cb;

    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

}

.slide_box.walz .text_layer h2 {
    font-size: 3.1em;
    margin: 0;
    margin-bottom: 0.2em;
    line-height: 1.2;
    font-weight: bold;
    color: #fff;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}


.slide_box.walz .text_layer p {
    line-height: 1.8;
}

.slide_box.walz .text_layer p.green_enhance {
    color: #9bf50c;
    font-size: 1.6em;
    /* font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "Sawarabi Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif; */
}


.slide_box.walz .text_layer .link_box {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.slide_box.walz .text_layer .link_box a {
    line-height: 1.8;
    transition: color .15s linear;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dashed #fff;
    padding-bottom: 0.4em;
}

.slide_box.walz .text_layer .link_box a .my_svg_img {
    display: inline-block;
    margin-left: 0.7em;
    width: 1.8em;
    position: relative;
    top: 0.5em;
}

.slide_box.walz .text_layer .link_box a:hover .my_svg_img svg .b {
    stroke: #9bf50c;
}

.slide_box.walz .text_layer .link_box a:hover {
    color: #9bf50c;
}

/* 画像をリンクにするスタイル */
.slide_box.img_link_style .text_layer,
.slide_box.webinar .text_layer {
    /* 画像リンクの上にテキストが重なるときも画像リンクが機能するようにする */
    pointer-events: none;
}

.slide_box.img_link_style .text_layer a,
.slide_box.webinar .text_layer a {
    pointer-events: auto;
    color: #fff;
}

/* crsの画像の文章 */

.slide_box.crs .text_layer {
    position: absolute;
    /* pointer-events: auto; */
    background: none;
    height: auto;
    width: 65%;
    right: 0;
    top: 50%;
    bottom: auto;
    padding: 5px;
    text-align: center;
    color: #0053A5;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: clamp(0.5rem, 1.7vw, 1.2rem);
    box-sizing: border-box;

    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: none;
}

.slide_box.crs .text_layer.width_53per {
    width: 53%;
}

.slide_box.crs .text_layer h2 {
    margin: 0;
    line-height: 1.12;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-weight: bold;
    color: #0053A5;
    font-size: 3.3em;
    /* 改行しない */
    white-space: nowrap;
}

.small_text {
    font-size: 0.68em;
}

.slide_box.crs .text_layer h3 {
    font-size: 2.2em;
    margin: 0;
    line-height: 1.0;
}

.slide_box.crs .text_layer a {
    /* pointer-events: auto; */
    font-size: 0.8em;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    display: inline;
    margin: 0;
    color: #02C50E;
    background-color: rgba(190, 188, 188, 0.514);
    border-radius: 0.8rem;
    padding: 0.3rem;
}

/* ----------------------------------------
  スライダーのボタン類のスタイル
---------------------------------------- */

/* arrow */

.splide__arrow {
    flex: none;
    transition: 0.2s;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    background: #00000000;
    right: 0;
    border: none;
    top: auto;
    transform: translateY(50%);
    bottom: -1.7rem;
}

.my_svg_img svg {
    width: 100%;
    height: 100%;
}

.my_svg_img svg .b {
    stroke: #fff;
    transition: 0.2s;
}

.splide__arrow.splide__arrow--prev {
    right: 4rem;
    left: auto;
}

.splide__arrow:not(:disabled):hover svg .b {
    opacity: 0.8;
    stroke: #77ec32;
}




/* pagination（●●●）全体のスタイル */

.splide__pagination {
    /* ページネーションに番号を表示 */
    counter-reset: pagination-num;
    left: 0;
    right: auto;
    top: auto;
    transform: translateY(50%);
    bottom: -1.7rem;
}


/* pagination（●）のスタイル */
.splide__pagination__page {
    width: 2rem;
    height: 1rem;
    left: -1rem;
    margin: 0 0.5rem;
    border-radius: 10%;
    cursor: pointer;
    top: auto;
    bottom: -0rem;
    background: #c0b2b2;
    color: #1f1f1f;
    text-align: center;
    transition: 0.2s;
    /* transition: width 0.9s ease, background-color 0.9s ease; */
}

/* 表示されているページのpagination（●）のスタイル */
.splide__pagination__page.is-active {
    background-color: #46d45de3;
    color: #ffffff;
    width: 2.5rem;
}

/* ページネーションに番号を表示 */
.splide__pagination__page:before {
    counter-increment: pagination-num;
    content: counter(pagination-num);
}



/*
メディアクエリ
*/
/* 900px以下の場合 */
@media(max-width: 900px) {

    /* pagination（●）のスタイル */
    .splide__pagination__page {
        width: 1.5rem;
        height: 0.75rem;
        margin: 0 0.4rem;
        font-size: 0.5rem;
    }

    /* 表示されているページのpagination（●）のスタイル */
    .splide__pagination__page.is-active {
        width: 1.7rem;
    }

    /* 右寄せを戻す */
    .slide_box.crs .media_box img.right_justify,
    .slide_box.crs .media_box video.right_justify,
    .slide_box.walz .media_box img.right_justify,
    .slide_box.walz .media_box video.right_justify {
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
    }

}

/*
640px以下の場合、
media_containerを上に
text_containerを下に中央寄せ
並べる

動画を幅いっぱいに、高さはアスペクト比を保つ。
画像は動画と同じサイズにする。
その下に文章を表示する。
動画と文章の合わせた高さになるように、スライドの高さを調整する。
*/



/* 640px以下の場合 */
@media(max-width: 640px) {

    .for_mobile {
        display: block;
    }

    .for_pc {
        display: none;
    }

    .slide_back {


        background: #12191b;
        background: radial-gradient(circle, #265b5e 0%, #229ca50c 66%), #11242e;
    }

    .splide__slide {
        padding: 0;
    }

    .slide_box.crs {

        background: white;
    }


    .slide_box.crs .media_box,
    .slide_box.walz .media_box {
        position: relative;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 16/9;
        height: auto;
    }

    .slide_box.crs .media_box {
        aspect-ratio: 16/10;

    }

    .slide_box.walz .text_layer,
    .slide_box.crs .text_layer {
        position: static;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        top: 0;
        transform: translateY(0);
        width: 100% !important;
        transform: translateY(0);
        padding: 15px;

        text-align: center;
        box-sizing: border-box;
        max-width: none;
        font-size: clamp(0.5rem, 2.00vw, 1.9rem);

    }

    .slide_box.walz .text_layer h2,
    .slide_box.crs .text_layer h2 {
        line-height: 1.5;
    }

    .slide_box.walz .text_layer p,
    .slide_box.crs .text_layer p {
        font-size: 1.3em;
        line-height: 2;

    }

    .slide_box.walz .text_layer .link_box a {
        font-size: 1.2em;
    }




    /* arrow */
    .splide__arrow {
        width: 3rem;
        height: 3rem;
        /* bottom: 0; */
        /* margin-bottom: -75px; */
        /* left: 50%; */
        /* right: auto; */
        bottom: -1.9rem;
    }

    .splide__arrow .icon {
        transition: 0.2s;
        transform: scale(0.7);
    }

    .splide__arrow.splide__arrow--prev {
        right: 2.1rem;

        /* right: 50%; */
        /* left: auto; */
        color: #00000000;
    }


    /* pagination（●●●）全体のスタイル */
    .splide__pagination {
        bottom: -1.9rem;
    }

    /* pagination（●）のスタイル */
    .splide__pagination__page {
        width: 0.8rem;
        height: 0.8rem;
        margin: 0 0.2rem;
        border-radius: 50%;
        font-size: 0.7rem;
        /* bottom: -5rem; */



    }

    /* 表示されているページのpagination（●）のスタイル */
    .splide__pagination__page.is-active {
        background-color: #45d45de3;
        color: #ffffff;
        width: 0.8rem;
        font-size: 0.6rem;
        height: 0.8rem;
    }


}



/* ----------------------------------------
  スライド用の新製品アイコン
  .brand_new_red_slideクラスを付けた要素に、new_red.pngを重ねて表示する。
---------------------------------------- */

.brand_new_red_slide {
    position: relative;
}

.brand_new_red_slide::after {
    content: "";
    background: url('../img/new_red.png') no-repeat;
    background-size: 65px 65px;
    /* 画像の幅に合わせて調整 */
    width: 65px;
    /* 画像の高さに合わせて調整 */
    height: 65px;
    /* 画像が見出しに重なるように調整 */
    position: absolute;
    top: 0px;
    right: 15px;
    display: block;
    z-index: 10;
    /* pointer-events: none; */
}

/* 幅を小さくしたとき文字に重ならないようにする。*/
@media (max-width: 1100px) {
    .brand_new_red_slide::after {
        background-size: 45px 45px;
        width: 45px;
        height: 45px;
        top: 0px;
        right: 10px;
    }

}

/* CRSの横長の画像に合うアイコンの位置用 */
.brand_new_red_slide.icon_adjust::after {
    top: 6.5%;
}

@media (max-width: 1100px) {
    .brand_new_red_slide.icon_adjust::after {
        top: 6.3%;
    }
}

@media (max-width: 640px) {
    .brand_new_red_slide.icon_adjust::after {
        top: 0px;
        /* スマホ用の調整値 */
    }
}

/*
スライド内の箇条書きのスタイル
*/

.slide_bullet_points {
    margin: 16px auto;
}

.slide_bullet_points ul {
    margin-left: 14px;
    margin-top: 15px;
    margin-bottom: 18px;
    width: fit-content;
    margin: auto;
    display: inline-block;
}

.slide_bullet_points li {
    text-align: left;
}

.slide_bullet_points li:before {
    content: "・";
    margin-right: 5px;
}

/* 白っぽい画像で、重ねる白い文字が見えにく時に使用するグラデーション背景オーバーレイ */
.slide_box.webinar .for_white_img_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* 白っぽい画像で、重ねる白い文字が見えにく時に使用するより強いテキストシャドウ */

/* より強いテキストシャドウを適用 */
.slide_box.webinar .text_layer.for_white_img_strong_shadow {
    /* background: rgba(18, 25, 27, 0.7); */
    /* backdrop-filter: blur(5px); */
    /* border-radius: 15px; */
    /* border: 1px solid rgba(46, 197, 207, 0.3); */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
        0px 0px 15px rgba(0, 0, 0, 0.6);
    /* color: #d64d7b; */

}

/* より強いテキストシャドウを適用 h2 */
.slide_box.webinar .text_layer.webinar-for_white_img_strong_shadow h2 {
    color: #fff;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9);
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9),
        0px 0px 20px rgba(0, 0, 0, 0.7);
}

.slide_box.webinar .text_layer.for_white_img_strong_shadow-text p.green_enhance {
    /* color: #9bf50c; */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}