@charset "utf-8";
/*==========================================================

ナビドロワー

==========================================================*/
/*
背景固定
---------------------------------------------------------*/
/*
@media screen and (max-width: 1024px) {
    .js-scroll-fixed {
        position: fixed;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
}
*/

/*
トグルボタン部分
---------------------------------------------------------*/
/*
#nav-tgl {
    display: none;
}
*/
#drower-menu input{
    /*デフォルト表示されるinput要素のチェックボックを非表示に*/
    display: none;
}
.nav-tgl-btn {
    cursor: pointer;
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0;
}
.nav-tgl-open {
    z-index: 2;
    width: 48px;
    height: 48px;
    background: #2e6faf;
    transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: .6s ease-out;
    /*-------*/
    z-index: 10000;
    /*-------*/
}

.nav-tgl-open::before,
.nav-tgl-open::after {
    content: "";
}

.nav-tgl-open span,
.nav-tgl-open::before,
.nav-tgl-open::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 30%;
    width: 40%;
    border-bottom: 2px solid white;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: .6s ease-out;
}
.nav-tgl-open::before {
    transform: translateY(-8px);
}
.nav-tgl-open::after {
    transform: translateY(8px);
}
.nav-tgl-close {
    z-index: 1;
    z-index: 1000;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background .6s;
}
#nav-tgl:checked+.nav-tgl-open {
    background: #000000;
/*    transform: translateX(272px);*/
}
#nav-tgl:checked+.nav-tgl-open span {
    transform: scaleX(0);
}
#nav-tgl:checked+.nav-tgl-open::before {
    transform: rotate(45deg);
}
#nav-tgl:checked+.nav-tgl-open::after {
    transform: rotate(-45deg);
}
#nav-tgl:checked~.nav-tgl-close {
    pointer-events: auto;
    background: rgba(0, 0, 0, .6);
}
/*
サイトコンテンツ部分
---------------------------------------------------------*/
/*
.content-wrapper3 {
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#nav-tgl:checked~.content-wrapper3 {
        transform: translateX(-272px);
}
*/


/*
メニューデザイン
---------------------------------------------------------*/
.drower-nav {
    z-index: 1000;
    position: fixed;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    top: 0;
    left: 0px;
    width: 250px;
    height : -webkit-calc(100% - 71px) ;
    height : calc(100% - 71px) ;
    margin-top: 71px;
    padding-bottom: 30px;
    box-sizing: border-box;
    transform: translateX(-100%);
/*    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    transition: .3s ease-out;
    box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.15);
    background-color: #ebeff8;
}
#nav-tgl:checked~.drower-nav {
    transform: none;
}
@media screen and (min-width: 1125px) {
    .drower-nav {
        transform: none;
    }
}
@media screen and (min-width: 1025px) {
    
}
/*
以下、カスタマイズ
---------------------------------------------------------*/


/*
グループ３
---------------------------------------------------------*/
.menu01 {

}
.menu01 input {
    display: none;
}
.menu01 a {
    display: block;
    text-decoration: inherit;
    transition: background .6s;
}
.menu01 .item1 div,.menu01 .item1 a{
    padding : 0.8em 0.5em 0.8em 1.2em;
    line-height: 1;
}
.menu01 .item1 a{
    transition:.3s ease-out;
    cursor :pointer;
}
.menu01 .item1 a{
    color: #102546;
}
.menu01 .item1.type1{
    margin-top: 0.7em;
}    
.menu01 .item1.type2{
    margin-bottom: 0.7em;
}
.menu01 .item1 i{
    color: #5577ad;
    margin-right: 1em;
    transform: scale(1.3)
}
.menu01 .item1>a:hover{
    background: rgba(255, 255, 255, 1);
    transition:.3s ease-out;
}
/*
.menu01 .item1 a {
    display: block;
}
*/
.menu01 .sen1 {
    border-top: solid 1px #cccccc;
}
.menu01 .sen2 {
    border-bottom: solid 1px #cccccc;
}

/*アコーディオン
-------------------------------------*/
/*最初は子階層を非表示にする*/
.accordion ul li{
    height: 0;
    overflow: hidden;
    transition: all .7s;
    opacity: 0;
}

/*アコーディオンのアイコン「+」*/
.accordion label {
    display: block;
    position: relative;
}
.accordion label::after{
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f067";
    font-weight: bold;
    cursor: pointer;
    top:50%;
    right: 1.3em;
    transform: translate(0,-50%) rotate(0deg);
    transition: all .5s ease-out;
    color: rgba(0, 0, 0, 0.4);
}
/*アコーディオン：親階層*/
.menu01 .item2 a{
    padding : 1em 0.5em 1em 1.2em;
    line-height: 1;
    color: #102546;
    cursor :pointer;
    transition: all .5s ease-out;
}
.menu01 .item2>a:hover{
    background: rgba(255, 255, 255, 1);
    transition:.3s ease-out;
}
/*アコーディオン：子階層*/
.menu01 .item3 a{
    padding : 0.8em 0.5em 0.8em 3.5em;
    line-height: 1;
    transition:.5s ease-out;
    cursor :pointer;
    color: #102546;
    position: relative;
}
.menu01 .item3 a:hover{
    background: rgba(255, 255, 255, 1);
    transition:.3s ease-out;
}
.accordion ul li a::before{
    position: absolute;
    top:30%;
    left: 1.5em;
    transform: rotate(0deg);
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    font-weight: bold;
    color: #5577ad;
    transition:.5s;
    transform: scale(1.3)
}

/*
開いたとき
---------------------------------------------------------*/
/*子階層を表示*/
.accordion input:checked+label+ul>li{
    height: 2.6em;
    opacity: 1;
}
/*子階層の最初と最後に上下のスペースを作る*/
.accordion input:checked+label+ul>li:first-child{
    margin-top: 0.7em;
}
.accordion input:checked+label+ul>li:last-child{
    margin-bottom: 0.7em;
}
/*アコーディオンのアイコン「+」を回転*/
.accordion input:checked+label::after{
    transform: translate(0,-50%) rotate(135deg);
}
/*開いたときの親要素に背景色を入れる*/
.accordion input:checked+label{
    background: rgba(0, 0, 0, 0.05);
}

/*
グループ４
---------------------------------------------------------*/
.menu02{
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    padding: 20px 0px 10px;
    
}
.menu02 a{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    padding: 0;
}
.contact_btn-drower-nav {
    background-color: #026aac;
    color: #fff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0px;
    margin: 0 0 5px 0;
    line-height: 1;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    transition:.3s ease-out;
}
.contact_btn-drower-nav:hover{
    opacity: .7;
}

/*
レスポンシブ
---------------------------------------------------------*/
@media screen and (min-width: 1125px) {
    .nav-tgl-btn {
        display: none;
    }
}
@media screen and (min-width: 1125px) {
    .drower-nav {
/*        top:70px*/
    }
}
@media screen and (max-width: 1124px) {
    .drower-nav {
        margin-top: 49px;
        height : -webkit-calc(100% - 48px) ;
        height : calc(100% - 48px) ;
    }
    
}  
@media screen and (max-width: 678px) {
    .nav-tgl-open {
/*
        width: 48px;
        height: 48px;
*/
    }
/*
    .nav-tgl-open span,
    .nav-tgl-open::before,
    .nav-tgl-open::after {
        right: 26%;
        width: 45%;
    }
    .nav-tgl-open::before {
        transform: translateY(-7px);
    }
    .nav-tgl-open::after {
        transform: translateY(7px);
    }
*/
}