@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position: relative;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 100vh;
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-color: rgba(239, 240, 235, 0.9);
    background-blend-mode: lighten;
}

.sawarabi-mincho-regular {
  font-family: "Sawarabi Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

/*　背景画像設定　*/

.slider-item01 {
    background: url(../img/VISION.png);
}

.slider-item02 {
    background: url(../img/VISION.png);
}

.slider-item {
    width: 100%;
    /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh;
    /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;
    /*背景画像をリピートしない*/
    background-position: center;
    /*背景画像の位置を中央に*/
    background-size: cover;
    /*背景画像が.slider-item全体を覆い表示*/
    background-color: rgba(239, 240, 235, 0.9);
    background-blend-mode: lighten;
    font-size: 0;
/*    display: none;*/
    display: none;
    justify-content: center;
    align-items: center;
}

/*矢印の設定*/

.slick-prev,
.slick-next {
    position: absolute;
    z-index: 3;
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;
    /*矢印の色*/
    border-right: 2px solid #fff;
    /*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {
    /*戻る矢印の位置と形状*/
    left: 2.5%;
    transform: rotate(-135deg);
}

.slick-next {
    /*次へ矢印の位置と形状*/
    right: 2.5%;
    transform: rotate(45deg);
}

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

.slick-dots {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: -50px 0 0 0;
    /*ドットの位置*/
}

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

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;
    /*ドットボタンのサイズ*/
    height: 8px;
    /*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #fff;
    /*ドットボタンの色*/
}

.slick-dots .slick-active button {
    background: #333;
    /*ドットボタンの現在地表示の色*/
}


/*========= レイアウトのためのCSS ===============*/
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: #fff;
}

a:hover,
a:active {
    text-decoration: none;
}

h1 {
    font-family: "Sawarabi Mincho", serif;
    font-weight: normal;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 30px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    width: 100%;
}

.hexagon-mask {
    fill: #DB8FA4;
    opacity: 1;
}

.slider-item .hexagon-mask {
    opacity: 0.8;
}

.hexagon-mask2 {
    fill: #DB8FA4;
    opacity: 0;
}

.hexagon-clip {
    fill: #DB8FA4;
    opacity: 1;
}

.wrapper {
    position: relative;
    height: 100vh;
    background-color: rgba(239, 240, 235, 1.0);
}

.container {
    background: #555;
}

.container p {
    padding: 300px 0;
    text-align: center;
    color: #fff;
}


/*ダイヤモンドのサイズ*/

:root {
/*  --animation-scale: 0.55;*/
/*  --animation-scale: 0.5;*/
/*  --animation-scale: 0.45;*/
  --animation-scale: 0.35;

/*  --animation-duration: 0.5s;*/
/*  --animation-duration: 1.0s;*/
/*  --animation-duration: 1.5s;*/
    
/*  --animation-speed: 1.1;*/
/*  --animation-speed: 1.25;*/
/*  --animation-speed: 1.5;*/
  --animation-speed: 2.0;
}

#splash svg {
    overflow: hidden;
    max-width: 100%;
    transform: scale(var(--animation-scale));
    max-width: 100%;
}

#slider svg {
    overflow: hidden;
/*    transform: scale(0.75);*/
    transform: scale(var(--animation-scale));
    max-width: 100%;
}

.hexagon-clip > ._bottom,
.hexagon-clip > ._left,
.hexagon-clip > ._right,
.hexagon-clip > ._top,
.hexagon-mask > ._bottom,
.hexagon-mask > ._left,
.hexagon-mask > ._right,
.hexagon-mask > ._top,
.hexagon-mask2 > ._bottom,
.hexagon-mask2 > ._left,
.hexagon-mask2 > ._right,
.hexagon-mask2 > ._top{
    will-change: transform;
    opacity: 0;
}

.slick-active .hexagon-mask > ._bottom {
    -webkit-animation: move_mask_bottom calc(0.5s * var(--animation-speed)) ease-in-out 1.3s forwards;
    animation: move_mask_bottom calc(0.5s * var(--animation-speed)) ease-in-out .6s forwards, off_mask_bottom calc(0.5s * var(--animation-speed)) ease-in-out calc(1.2s * var(--animation-speed)) forwards
}

.slick-active .hexagon-mask > ._left {
    -webkit-animation: move_mask_left calc(0.5s * var(--animation-speed)) ease-in-out 1.5s forwards;
    animation: move_mask_left calc(0.5s * var(--animation-speed)) ease-in-out .8s forwards, off_mask_left calc(0.5s * var(--animation-speed)) ease-in-out calc(1.4s * var(--animation-speed)) forwards
}

.slick-active .hexagon-mask > ._right {
    -webkit-animation: move_mask_right calc(0.5s * var(--animation-speed)) ease-in-out 1.1s forwards;
    animation: move_mask_right calc(0.5s * var(--animation-speed)) ease-in-out .4s forwards, off_mask_right calc(0.5s * var(--animation-speed)) ease-in-out calc(1.0s * var(--animation-speed)) forwards
}

.slick-active .hexagon-mask > ._top {
    -webkit-animation: move_mask_top calc(0.5s * var(--animation-speed)) ease-in-out 0.9s forwards;
    animation: move_mask_top calc(0.5s * var(--animation-speed)) ease-in-out .2s forwards, off_mask_top calc(0.5s * var(--animation-speed)) ease-in-out calc(0.8s * var(--animation-speed)) forwards
}

.splash_active .hexagon-clip > ._bottom {
    opacity: 0;
    -webkit-animation: move_clip_bottom calc(0.5s * var(--animation-speed)) ease-in calc.8s forwards;
    animation: move_clip_bottom calc(0.5s * var(--animation-speed)) ease-in calc(.8s * var(--animation-speed)) forwards
}

.splash_active .hexagon-clip > ._left {
    opacity: 0;
    -webkit-animation: move_clip_left calc(0.5s * var(--animation-speed)) ease-in .9s forwards;
    animation: move_clip_left calc(0.5s * var(--animation-speed)) ease-in calc(.9s * var(--animation-speed)) forwards
}

.splash_active .hexagon-clip > ._right {
    opacity: 0;
    -webkit-animation: move_clip_right calc(0.5s * var(--animation-speed)) ease-in .7s forwards;
    animation: move_clip_right calc(0.5s * var(--animation-speed)) ease-in calc(.7s * var(--animation-speed)) forwards
}

.splash_active .hexagon-clip > ._top {
    opacity: 0;
    -webkit-animation: move_clip_top calc(0.5s * var(--animation-speed)) ease-in .6s forwards;
    animation: move_clip_top calc(0.5s * var(--animation-speed)) ease-in calc(.6s * var(--animation-speed)) forwards
}

.splash_active .hexagon-mask > ._bottom {
    opacity: 0;
    -webkit-animation: move_mask_bottom calc(0.5s * var(--animation-speed)) ease-in .2s forwards;
    animation: move_mask_bottom calc(0.5s * var(--animation-speed)) ease-in calc(.2s * var(--animation-speed)) forwards
}

.splash_active .hexagon-mask > ._left {
    opacity: 0;
    -webkit-animation: move_mask_left calc(0.5s * var(--animation-speed)) ease-in .3s forwards;
    animation: move_mask_left calc(0.5s * var(--animation-speed)) ease-in calc(.3s * var(--animation-speed)) forwards
}

.splash_active .hexagon-mask > ._right {
    opacity: 0;
    -webkit-animation: move_mask_right calc(0.5s * var(--animation-speed)) ease-in .1s forwards;
    animation: move_mask_right calc(0.5s * var(--animation-speed)) ease-in calc(.1s * var(--animation-speed)) forwards
}

.splash_active .hexagon-mask > ._top {
    opacity: 0;
    -webkit-animation: move_mask_top calc(0.5s * var(--animation-speed)) ease-in .0s forwards;
    animation: move_mask_top calc(0.5s * var(--animation-speed)) ease-in calc(.0s * var(--animation-speed)) forwards
}

/* カラーマスクBのアニメーション　*/
@-webkit-keyframes move_clip_bottom {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes move_clip_bottom {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes move_clip_left {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes move_clip_left {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes move_clip_right {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes move_clip_right {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes move_clip_top {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes move_clip_top {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*カラーマスクAのアニメーション*/
@-webkit-keyframes move_mask_bottom {
    0% {
        -webkit-transform: translate(0, 17.32rem);
        transform: translate(0, 17.32rem);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes move_mask_bottom {
    0% {
        -webkit-transform: translate(0, 17.32rem);
        transform: translate(0, 17.32rem);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@-webkit-keyframes move_mask_left {
    0% {
        -webkit-transform: translate(-30rem, 0);
        transform: translate(-30rem, 0);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes move_mask_left {
    0% {
        -webkit-transform: translate(-30rem, 0);
        transform: translate(-30rem, 0);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@-webkit-keyframes move_mask_right {
    0% {
        -webkit-transform: translate(0, 17.32rem);
        transform: translate(0, 17.32rem);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes move_mask_right {
    0% {
        -webkit-transform: translate(30rem, 0);
        transform: translate(30rem, 0);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@-webkit-keyframes move_mask_top {
    0% {
        -webkit-transform: translate(0, -17.32rem);
        transform: translate(0, -17.32rem);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes move_mask_top {
    0% {
        -webkit-transform: translate(0, -17.32rem);
        transform: translate(0, -17.32rem);
        opacity: 0;
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
    }
}

/* カラーマスクCのアニメーション　*/
@-webkit-keyframes off_mask_bottom {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

@keyframes off_mask_bottom {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes off_mask_left {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

@keyframes off_mask_left {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes off_mask_right {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

@keyframes off_mask_right {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes off_mask_top {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

@keyframes off_mask_top {
    0% {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
    color: #fff;
    background: url(../img/VISION.png);
    background-repeat: no-repeat;
    /*背景画像をリピートしない*/
    background-position: center;
    /*背景画像の位置を中央に*/
    background-size: cover;
    /*背景画像が.slider-item全体を覆い表示*/
    background-color: rgba(239, 240, 235, 0.9);
    background-blend-mode: lighten;
    font-size: 0;
    display: flex;
    justify-content: center;
    align-items: center;
/*
    -webkit-animation: splash_color 2s linear 0.5s forwards;
    animation: splash_color 2s linear 0.5s forwards
*/
}

/* Loading画像中央配置　*/
#splash_logo {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    font-size: 2.50vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #DB8FA4;
    text-shadow: 0px 0px 10px #FFFFFF;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
    width: 100%;
}

/* fadeUpをするアイコンの動き */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.splash_active .splash_hex {
    /*  opacity: 0.4;*/
    -webkit-animation: hex_ignite 1.5s linear 2.0s forwards;
    animation: hex_ignite calc(1.5s * var(--animation-speed)) linear calc(2.5s * var(--animation-speed)) forwards;
}

.splash_active g {
    -webkit-animation: hex_color 2s linear 0.5s forwards;
    animation: hex_color calc(1.0s * var(--animation-speed)) linear calc(2.0s * var(--animation-speed)) forwards
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes hex_ignite {
    0% {
        -webkit-transform: scale(var(--animation-scale));
        transform: scale(var(--animation-scale));
    }

    to {
        -webkit-transform: scale(calc(var(--animation-scale) + 0.25));
        transform: scale(calc(var(--animation-scale) + 0.25));
    }
}

@keyframes hex_ignite {
    0% {
        -webkit-transform: scale(var(--animation-scale));
        transform: scale(var(--animation-scale));
    }

    to {
        -webkit-transform: scale(calc(var(--animation-scale) + 0.25));
        transform: scale(calc(var(--animation-scale) + 0.25));
    }
}

@-webkit-keyframes hex_color {
    0% {
        fill: #DB8FA4;
    }

    to {
        fill: #fff;
    }
}

@keyframes hex_color {
    0% {
        fill: #DB8FA4;
    }

    to {
        fill: #fff;
    }
}

@-webkit-keyframes splash_color {
    0% {
    background-color: #FFFFFF;
    }

    to {
    background-color: #DB8FA4;
    }
}

@keyframes splash_color {
    0% {
    background-color: #FFFFFF;
    }

    to {
    background-color: #DB8FA4;
    }
}