@charset "utf-8";

/*==================================================
 機能編 5-1-17 クリックしたら円形背景が拡大（下から）
===================================*/
/*========= ナビゲーションのためのCSS ===============*/

@media screen and (max-width:767px) {

    /*アクティブになったエリア*/
    #g-nav.panelactive {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        /*IE11対応のために今回は記述を削除
    position:fixed;
    z-index: 999;
	top: 0; */
        width: 100%;
        height: 100vh;
    }

    /*丸の拡大*/
    .circle-bg {
        position: fixed;
        z-index: 3;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgb(12, 23, 31, 0.9);
        /*丸のスタート位置と形状*/
        transform: scale(0);
        /*scaleをはじめは0に*/
        bottom: -50px;
        left: calc(50% - 50px);
        /*50%から円の半径を引いた値*/
        transition: all .6s;
        /*0.6秒かけてアニメーション*/
    }

    .circle-bg.circleactive {
        transform: scale(50);
        /*クラスが付与されたらscaleを拡大*/
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav-list {
        display: none;
        /*はじめは表示なし*/
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        min-height: 400px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #g-nav.panelactive #g-nav-list {
        display: block;
        /*クラスが付与されたら出現*/
    }

    /*ナビゲーション*/
    #g-nav ul {
        opacity: 0;
        /*はじめは透過0*/
        /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #g-nav.panelactive ul{
        font-size: 16px;
        width: 60%;
    }

    #g-nav.panelactive li{
        border-bottom: 1px solid #fff;
    }

    #g-nav.panelactive li:last-child{
        border-bottom: none;
    }

    #g-nav.panelactive li a{
        padding: 1rem 30%;
        padding: 1rem 20%;
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity: 1;
    }

    /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
    #g-nav.panelactive ul li {
        animation-name: gnaviAnime;
        animation-duration: 1s;
        animation-delay: .2s;
        /*0.2 秒遅らせて出現*/
        animation-fill-mode: forwards;
        opacity: 0;
    }

}

@keyframes gnaviAnime {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*========= ボタンのためのCSS ===============*/

.openbtn {
    display: none;
}

@media screen and (max-width:767px) {
    /*==================================================
　機能編 5-2-5 MENUが×に
===================================*/

    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .openbtn {
        display: block;
        position: fixed;
        z-index: 9999;
        cursor: pointer;
        top: 40px;
        right: 25px;
        width: 30px;
        height: 30px;
        /*    border:1px solid #fff;*/
    }

    /*ボタン内側*/
    .openbtn span {
        display: inline-block;
        transition: all .4s;
        /*アニメーションの設定*/
        position: absolute;
        left: 0px;
        height: 1px;
        width: 100%;
        background: #fff;
    }

    .openbtn span:nth-of-type(1) {
        top: 1px;
    }

    .openbtn span:nth-of-type(2) {
        top: 12px;
    }

    .openbtn span:nth-of-type(3) {
        top: 23px;
    }

    /*activeクラスが付与されると線が回転して×に*/
    .openbtn.active span:nth-of-type(1) {
        top: 8px;
        left: 0;
        transform: translateY(6px) rotate(-45deg);
        width: 100%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn.active span:nth-of-type(3) {
        top: 20px;
        left: 0;
        transform: translateY(-6px) rotate(45deg);
        width: 100%;
    }

}

/*==================================================
 機能編 9-1-1　縦線が動いてスクロールを促す
===================================*/

/*スクロールダウン全体の場所*/

.scrolldown1 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    right: 10%;
    top: 50vh;
    /*    bottom: 0;*/
    /*全体の高さ*/
    height: 200px;
}

.scrolldown1 span {
    position: absolute;
    left: -12px;
    top: -60px;
    /*テキストの形状*/
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/* 線の描写 */
.scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 180px;
    background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.8s ease-in-out infinite;
    opacity: 0;
}

.scrolldown1::before {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 100%;
    background: rgb(255, 255, 255, 0.3);
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }

    30% {
        height: 100px;
        opacity: 1;
    }

    100% {
        height: 0;
        top: 200px;
        opacity: 0;
    }
}


/*===========================================================*/
/* 機能編 6-1-2 フェードイン・アウトさせて全画面で見せる*/
/*===========================================================*/

.slider {
    position: relative;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    width: 100%;
    height: 100vh;
    /*スライダー全体の縦幅を90vhにする*/
}



/*　背景画像設定　*/

.slider-item01 {
    background: url(../img/top_slide_1.jpg);
}

.slider-item02 {
    background: url(../img/top_slide_2.jpg);
}

.slider-item03 {
    background: url(../img/top_slide_3.jpg);
}

.slider-item04 {
    background: url(../img/top_slide_4.jpg);
}

.slider-item05 {
    background: url(../img/top_slide_5.jpg);
}

.slider-item {
    width: 100%;
    /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh;
    min-height: 500px;
    /*各スライダー全体の縦幅を90vhにする*/
    background-repeat: no-repeat;
    /*背景画像をリピートしない*/
    background-position: center;
    /*背景画像の位置を中央に*/
    background-size: cover;
    /*背景画像が.slider-item全体を覆い表示*/
    background-attachment: fixed;
}

@media screen and (max-width:767px) {
    .slider-item01 {
        background: url(../img/top_slide_1_sp.jpg);
    }

    .slider-item02 {
        background: url(../img/top_slide_2_sp.jpg);
    }

    .slider-item03 {
        background: url(../img/top_slide_3_sp.jpg);
    }

    .slider-item04 {
        background: url(../img/top_slide_4_sp.jpg);
    }

    .slider-item05 {
        background: url(../img/top_slide_5_sp.jpg);
    }

    .slider-item {
        width: 100%;
        /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
        height: 100vh;
        /*各スライダー全体の縦幅を90vhにする*/
        background-repeat: no-repeat;
        /*背景画像をリピートしない*/
        background-position: center;
        /*背景画像の位置を中央に*/
        background-size: cover;
        /*背景画像が.slider-item全体を覆い表示*/
/*        background-attachment: fixed;*/
    }

}




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

.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: 12px;
    /*ドットボタンのサイズ*/
    height: 12px;
    /*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    border: 1px solid #fff;
}

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