@charset "utf-8";







/*==============================



    lightning



==============================*/



.vk-mobile-nav-menu-btn,



.page_top_btn{



    display: none !important;



}



.site-body-container{



    padding-top: calc(150px - 3.5rem);



}



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



    .site-body-container{



        padding-top: calc(77px - 2rem);



    }



}







/*==============================



    基本設定



==============================*/



html{



    overflow-x: auto;



    overflow-y: scroll;



}



body{



    min-width: 1400px;



}



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



    body{



        min-width: 0;



    }



}







.gro{



    color:#3e3a39;



    font-size:12px;



    font-family:'YakuHanJP_Narrow','游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;



    margin:0;



    padding:0;



    text-align:left;



    -webkit-text-size-adjust:100%;



    position:relative;



    word-break:break-all;



    font-weight: 400;



}



.gro p{



    line-height: 1;



}







.gro, <br>.gro *, .gro *::before, .gro *::after{box-sizing:border-box;}



.gro img{vertical-align:bottom;}



.gro h1,.gro h2,.gro h3,.gro h4,.gro h5,.gro h6{font-weight:normal;}



.gro th{



    font-weight:normal;



    text-align:left;



}







/*font layout*/



.gro .fBold{font-weight:bold;}



.gro .fRoboto{font-family: 'Roboto', sans-serif;}



.gro .fYu{font-family:'YakuHanMP_Noto','Noto Serif Japanese', serif;}







/*rollover*/



.gro a:hover,



.gro .cursorPointer:hover{ opacity:0.8; }



.gro a,



.gro .cursorPointer{



    transition:opacity 0.2s ease-out;



}



.gro .cursorPointer{cursor:pointer;}







/*rollover(brightnessによる変化)*/



.gro .brt a:hover,.gro a.brt:hover,.gro a .brt:hover{ -webkit-filter: brightness(1.1);filter: brightness(1.1); }



.gro .brt a,



.gro a.brt,



.gro a .brt{



    transition:filter 0.2s ease-out;



}







/*ro無効化*/



.gro .no_ro a:hover,



.gro a.no_ro:hover,



.gro .no_ro .cursorPointer:hover,



.gro .cursorPointer.no_ro:hover{ opacity:1; }







/* 電話リンクの無効化 */



.gro a[href^="tel:"]{



    pointer-events:none;



    cursor:default;



}



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



    .gro a[href^="tel:"]{



        pointer-events:auto;



        cursor:pointer;



    }



}







/* container */



#container{



    overflow: hidden;



    max-width: 1920px;



    margin: 0 auto;



    width: 100%;



}







/*========================================



    レスポンシブ用(不要な場合は削除)



========================================*/



.gro .spOnly,



.gro .brSp,



.gro .imgSp{



    display:none;



}



.gro .img100{



    width:100%;



    height:auto;



}



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



    .gro .spNone,



    .gro .brPc,



    .gro .imgPc{



        display:none;



    }



    .gro .spOnly{



        display:block;



    }



    .gro .brSp,



    .gro .imgSp{



        display:inline;



    }



    .gro .imgR{



        width:100%;



        height:auto;



    }



}







/*-----------------------------------------------



    imgCover



-----------------------------------------------*/



/* imgCover */



.gro .imgCover,



.gro .imgCont{



    position:relative;



}



.gro .imgCover img {



    width:100%;



    height:100%;



    position:absolute;



    top:0;



    left:0;



    object-fit:cover;



    font-family:'object-fit:cover;';



}



.gro .imgCont img{



    width:auto;



    height:auto;



    max-width:100%;



    max-height:100%;



    display:block;



    position:absolute;



    top:0;



    bottom:0;



    left:0;



    right:0;



    margin:auto;



}







/*-----------------------------------------------



	wrapper



-----------------------------------------------*/



.gro .wrapper1200{



	width: 1200px;



	max-width: calc(100% - 40px);



	margin: 0 auto;



}



.gro .wrapper1380{



	width: 1380px;



	max-width: calc(100% - 40px);



	margin: 0 auto;



}



.gro .wrapper1400{



	width: 1400px;



	max-width: calc(100% - 40px);



	margin: 0 auto;



}



.gro .wrapper1600{



	width: 1600px;



	max-width: calc(100% - 40px);



	margin: 0 auto;



}



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



	.gro .wrapper1200,



    .gro .wrapper1380,



    .gro .wrapper1400,



    .gro .wrapper1600{ 



		width: 100%;



		max-width: none;



	}



	.gro .wrapperSp{



		width: 92%;



		margin: 0 auto;



	}



}



/*-----------------------------------------------



    header



-----------------------------------------------*/



#header{



    width: 100%;



    z-index: 2000;



    display: flex;



    align-items: center;



    position: absolute;



    top: 0;



    left: 0;



    min-width: 1400px;



    padding: 40px 190px 40px 60px;



}



#header .wrapper{



    display: flex !important;



    align-items: center;



    justify-content: space-between;



    width: 100%;



    opacity: 1 !important;



}



#header .imgLogo{



    display: block;



}



#header .rightBox{



    display: flex;



    align-items: center;



}



#header .naviList{



    display: flex;



    align-items: center;



}



#header .naviItem{



    margin-right: 65px;



}



#header .naviItem:last-child{



    margin-right: 45px;



}



#header .listLink{



    color: #3e3a39;



    display: block;



    text-decoration: none;



    font-size: 17px;



    letter-spacing: 2px;



    font-weight: 400;



}



#header .contactList{



    width: 170px;



}



#header .contactInner{



    position: relative;



    text-decoration: none;



    font-size: 16px;



    font-weight: 300;



    display: flex;



    align-items: center;



    justify-content: center;



    color: #fff;



    height: 45px;



    border-radius: 22.5px;



    letter-spacing: 2px;



    padding-left: 25px;



    overflow: hidden;



}



#header .contactInner::after{



    position: absolute;



    content: "";



    top: 0;



    left: -100%;



    width: 200%;



    height: 100%;



    -webkit-transition: 0.3s;



    -o-transition: 0.3s;



    transition: 0.3s;



    z-index: 10;



    background: rgb(0, 7, 80);



}



#header .contactInner:hover::after{



    left: 0;



  }



#header .aTxt{



    position: relative;



    z-index: 20;



}



#header .aTxt::after{



    position: absolute;



    content: "";



    width: 16px;



    height: 12px;



    left: -25px;



    top: calc(50% - 6px);



    background: url(../img/common/iconHeader.png) center top / cover;



}



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



    #header{



        display: block;



        min-width: auto;



        padding: 25px 25px;



    }



    #header .wrapper{



        display: flex;



        align-items: center;



        justify-content: space-between;



        width: 100%;



    }



    #header .imgLogo{
        width: 72%;
    }



    #header .rightBox{



        display: none;



    }



}



/*-----------------------------------------------



    btnNavi



-----------------------------------------------*/



#btnNavi {



    width: 190px;



    height: 125px;



    display: flex;



    align-items: center;



    justify-content: center;



    z-index: 10000;



    position: absolute;



    right: 0;



    top: 0;



}



#btnNavi .naviCover{



	display: flex;



	align-items: center;



	justify-content: center;



    text-decoration: none;



    width: 100px;



    height: 50px;



    color: #3e3a39;



}



#btnNavi.naviOpen .naviCover{



    color:#3e3a39;



}



#btnNavi .borderNavi{



	width: 17px;



	height: 9px;



    display: flex;



    align-items: center;



    justify-content: center;



	position: relative;



}



#btnNavi .borderNavi .inner,



#btnNavi .borderNavi .inner::before,



#btnNavi .borderNavi .inner::after{



	display: block;



	width: 17px;



	height: 1px;



	background: #3e3a39;



    left: 0;



    right: 0;



    margin: auto;



}



#btnNavi .borderNavi .inner::before{



	content: '';



	position: absolute;



	transition: all 0.4s ease-out;



    top: 0;



}



#btnNavi .borderNavi .inner::after{



	content: '';



	position: absolute;



	transition: all 0.4s ease-out;



    bottom: 0;



}



#btnNavi .txt{



	font-size: 16px;



    letter-spacing: 2px;



    font-weight: 400;



    margin-left: 10px;



}



#btnNavi.naviOpen .txt{



    color: #fff;



}



#btnNavi.naviOpen .borderNavi{



    width: 17px;



	height: 9px;



}



#btnNavi:not(.naviOpen) .naviCover .txtClose,



#btnNavi.naviOpen .txtMenu{



    display: none;



}



#btnNavi.naviOpen .borderNavi .inner {



    width: 0;



    height: 0;



}



#btnNavi.naviOpen .borderNavi .inner::before {



    transform: translateY(33px) rotate(-30deg);



    top: -30px;



    background: #fff;



}



#btnNavi.naviOpen .borderNavi .inner::after {



    transform: translateY(25px) rotate(30deg);



    bottom: 30px;



    background: #fff;



}



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



    #btnNavi {



        right: auto;



        left: 1210px;



    }



}



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



    #btnNavi {



        width: 40px;



        height: 40px;



        left: auto;



        right: 20px;



        top: 28px;



    }



    #btnNavi .naviCover{



        display: block;



        width: 100%;



        height: 100%;



    }



    #btnNavi .txt{



        font-size: 10px;



        letter-spacing: 0.5px;



        margin: 7px auto 0;



        text-align: center;



    }



    #btnNavi .borderNavi{



        margin: 0 auto;



    }



    #btnNavi.naviOpen .borderNavi{



        width: 17px;



        height: 9px;



    }



    #btnNavi:not(.naviOpen) .naviCover .txtClose,



    #btnNavi.naviOpen .txtMenu{



        display: none;



    }



    #btnNavi.naviOpen .borderNavi .inner {



        width: 0;



        height: 0;



    }



    #btnNavi.naviOpen .borderNavi .inner::before {



        transform: translateY(33px) rotate(-30deg);



        top: -30px;



        background: #fff;



    }



    #btnNavi.naviOpen .borderNavi .inner::after {



        transform: translateY(25px) rotate(30deg);



        bottom: 30px;



        background: #fff;



    }



}



/*-----------------------------------------------



    menu



-----------------------------------------------*/



#menu{



    display: none;



    position: relative;



    z-index: 9998;



    padding: 140px 0;



    min-height: 100vh;



    -webkit-filter: blur(20px);



    filter: blur(20px);



    -webkit-transition: 0.5s;



    transition: 0.5s;



}



#menu.openMenu {



    -webkit-transition: 0.6s;



    transition: 0.6s;



    -webkit-filter: blur(0);



    filter: blur(0);



}



#menuBg{



    display: none;



    width: 100%;



    height: 100%;



    background: rgba(0, 0, 0, 0.9);



    position: fixed;



    top: 0;



    left: 0;



    z-index: 9997;



    mix-blend-mode: multiply;



}



#menu .wrapper{



    position: relative;



}



#menu .linkItem{



    display: flex;



    align-items: center;



}



#menu .linkItem:nth-child(n+2){



    margin-top: 70px;



}



#menu .linkTit{



    font-size: 24px;



    letter-spacing: 2px;



    font-weight: 100;



    color: #fff;



    width: 110px;



}



#menu .tabList{



    padding-left: 40px;



    position: relative;



}



#menu .linkItem:nth-child(4) .tabList::after{



    position: absolute;



    content: "";



    width: 30px;



    height: 1px;



    right: -60px;



    top: calc(50% - 0.5px);



    background: #fff;



}



#menu .tabItem{



    font-size: 14px;



    letter-spacing: 1px;



    color: #fff;



    display: block;



    text-underline-offset: 2px;



    text-decoration: underline;



}



#menu .subTabList{



    position: absolute;



    right: -270px;



    top: calc(50% - 87px);



}



#menu .subTabItem:nth-child(n+2){



    margin-top: 26px;



}



#menu .subTabInner{



    font-size: 14px;



    letter-spacing: 1px;



    color: #fff;



    display: block;



    text-underline-offset: 2px;



    text-decoration: underline;



}



#menu .siteBox{



    border-top: solid 1px rgba(255, 255, 255, 0.102);



    padding-top: 50px;



    margin-top: 65px;



}



#menu .siteList{



    display: flex;



}



#menu .siteItem:nth-child(2){



    margin-left: 20px;



}



#menu .siteInner{



    font-size: 12px;



    color: #fff;



    display: block;



    text-decoration: none;



}



#menu .rightBox{



    position: absolute;



    right: 0;



    top: -15px;



}



#menu .contactBox{



    width: 400px;



}



#menu .contactInner{



    border: 2px solid #fff;



    border-image: rgb(0, 7, 80);



    border-image-slice: 1;



    display: flex;



    align-items: center;



    justify-content: center;



    height: 280px;



    text-decoration: none;



    color: #fff;



}



#menu .contactImg{



    text-align: center;



}



#menu .contactEng{



    font-size: 44px;



    letter-spacing: 3px;



    font-weight: 100;



    text-align: center;



    margin-top: 15px;



}



#menu .contactTit{



    font-size: 14px;



    letter-spacing: 1px;



    text-align: center;



    margin-top: 20px;



}



#menu .contactBtnBox{



    width: 140px;



    margin: 32px auto 0;



    padding-bottom: 9px;



    border-bottom: solid 1px #fff;



    position: relative;



}



#menu .contactBtnBox::before{



    content: "";



    margin: auto;



    position: absolute;



    top: 5px;



    right: 4px;



    width: 5px;



    height: 5px;



    border-top: 1px solid #fff;



    border-right: 1px solid #fff;



    transform: rotate(45deg);



}



#menu .contactBtnBox::after{



    content: "";



    margin: auto;



    position: absolute;



    top: 7px;



    right: 4px;



    width: 17px;



    height: 1px;



    background: #fff;



}



#menu .contactBtnTxt{



    font-size: 12px;



    font-weight: 300;



    letter-spacing: 1.5px;



}



#menu .telBox{



    width: 400px;



    margin-top: 30px;



}



#menu .telInner{



    height: 120px;



    display: flex;



    align-items: center;



    justify-content: center;



    border: solid 2px rgba(255, 255, 255, 0.102);



    text-decoration: none;



    color: #fff;



}



#menu .telFlex{



    display: flex;



    align-items: center;



    justify-content: center;



    padding-right: 10px;



}



#menu .telImg{



    margin-right: 10px;



}



#menu .telNmber{



    font-size: 30px;



    letter-spacing: 3px;



    font-weight: 300;



}



#menu .telTxt{



    font-size: 12px;



    text-align: center;



    margin-top: 10px;



    letter-spacing: 1px;



}



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



    #menu{



        padding: 65px 0;



    }



    #menuBg{



        background: rgba(0, 0, 0, 0.702);



    }



    #menu .wrapper{



        width: 76%;



        min-width: 285px;



        margin: 0 auto;



    }



    #menu .linkItem:nth-child(n+2){



        margin-top: 27px;



    }



    #menu .linkTit{



        font-size: 18px;



        letter-spacing: 2px;



        width: 90px;



    }



    #menu .tabList{



        padding: 0 0 0 24px;



    }



    #menu .linkItem:nth-child(4) .tabList::after{



       display: none;



    }



    #menu .linkItem:nth-child(4){



        align-items: flex-start;



    }



    #menu .linkItem:nth-child(4) .tabList{



        padding-top: 3px;



    }



    #menu .tabItem{



        font-size: 13px;



        letter-spacing: 1px;



        text-underline-offset: 2px;



    }



    #menu .subTabList{



        position: static;



        margin-top: 20px;



    }



    #menu .subTabItem:nth-child(n+2){



        margin-top: 17px;



    }



    #menu .subTabInner{



        font-size: 11px;



        letter-spacing: normal;



        text-underline-offset: 2px;



    }



    #menu .siteBox{



        padding-top: 30px;



        margin-top: 40px;



    }



    #menu .siteItem:nth-child(2){



        margin-left: 10px;



    }



    #menu .siteInner{



        font-size: 11px;



    }



    #menu .rightBox{



        position: static;



    }



    #menu .contactBox{



        width: 100%;



        margin: 38px auto 0;



    }



    #menu .contactInner{



        height: 180px;



    }



    #menu .contactImg{



        width: 19px;



        margin: 0 auto;



    }



    #menu .contactEng{



        font-size: 28px;



        letter-spacing: 2px;



        margin-top: 4px;



    }



    #menu .contactTit{



        font-size: 12px;



        letter-spacing: 1px;



        margin-top: 10px;



    }



    #menu .contactBtnBox{



        width: 165px;



        margin: 22px auto 0;



        padding-bottom: 13px;



    }



    #menu .contactBtnTxt{



        font-size: 12px;



        letter-spacing: 1px;



    }



    #menu .telBox{



        width: 100%;



        margin-top: 20px;



    }



    #menu .telInner{



        height: 90px;



    }



    #menu .telFlex{



        padding-right: 0;



    }



    #menu .telImg{



        width: 22px;



        margin-right: 10px;



    }



    #menu .telNmber{



        font-size: 24px;



        letter-spacing: 1px;



    }



    #menu .telTxt{



        font-size: 11px;



        margin-top: 10px;



        letter-spacing: 1px;



    }



}



/*-----------------------------------------------



    footer



-----------------------------------------------*/



#footer .flexBox{



    display: flex;



    flex-flow: row-reverse;



}



#footer .rightBox{



    width: 500px;



}



.isDesktopIpad #footer .rightBox{



    width: 400px;



}



#footer .contactBox{



    width: 100%;



}



#footer .contactInner{



    display: flex;



    align-items: center;



    justify-content: center;



    height: 370px;



    text-decoration: none;



    color: #fff;



    position: relative;



    overflow: hidden;



}



#footer .contactInner::after{



    position: absolute;



    content: "";



    top: 0;



    left: -100%;



    width: 200%;



    height: 100%;



    -webkit-transition: 0.3s;



    -o-transition: 0.3s;



    transition: 0.3s;



    z-index: 10;



    background: rgb(0, 7, 80);



}



#footer .contactInner:hover::after{



    left: 0;



}



#footer .contactInBox{



    position: relative;



    z-index: 100;



}



#footer .contactImg{



    text-align: center;



}



#footer .contactEng{



    font-size: 60px;



    letter-spacing: 3px;



    font-weight: 100;



    text-align: center;



    margin-top: 21px;



}



#footer .contactTit{



    font-size: 14px;



    letter-spacing: 2px;



    text-align: center;



    margin-top: 26px;



}



#footer .contactBtnBox{



    width: 200px;



    margin: 47px auto 0;



    padding-bottom: 17px;



    border-bottom: solid 1px #fff;



    position: relative;



}



#footer .contactBtnBox::before{



    content: "";



    margin: auto;



    position: absolute;



    top: 5px;



    right: 4px;



    width: 5px;



    height: 5px;



    border-top: 1px solid #fff;



    border-right: 1px solid #fff;



    transform: rotate(45deg);



}



#footer .contactBtnBox::after{



    content: "";



    margin: auto;



    position: absolute;



    top: 7px;



    right: 4px;



    width: 17px;



    height: 1px;



    background: #fff;



}



#footer .contactBtnTxt{



    font-size: 13px;



    font-weight: 300;



    letter-spacing: 1.5px;



}



#footer .telBox{



    width: 100%;



}



#footer .telInner{



    height: 130px;



    display: flex;



    align-items: center;



    justify-content: center;



    background-image: -moz-linear-gradient( 0deg, rgb(255,255,255) 0%, rgb(233,233,233) 100%);



    background-image: -webkit-linear-gradient( 0deg, rgb(255,255,255) 0%, rgb(233,233,233) 100%);



    background-image: -ms-linear-gradient( 0deg, rgb(255,255,255) 0%, rgb(233,233,233) 100%);



    text-decoration: none;



    color: #3e3a39;



}



#footer .telFlex{



    display: flex;



    align-items: center;



    justify-content: center;



}



#footer .telImg{



    margin-right: 10px;



}



#footer .telNmber{



    font-size: 30px;



    letter-spacing: 2px;



    font-weight: 300;



}



#footer .telTxt{



    font-size: 12px;



    text-align: center;



    margin-top: 10px;



    letter-spacing: 1px;



}



#footer .leftBox{



    width: calc(100% - 500px);



    background: #3e3a39;



    display: flex;



    align-items: center;



}



.isDesktopIpad #footer .leftBox{



    width: calc(100% - 400px);



}



#footer .leftInner{



    width: 1200px;



    max-width: calc(100% - 100px);



    margin: 0 auto;



}



#footer .leftFlex{



    display: flex;



    align-items: center;



    justify-content: space-between;



}



#footer .titFlex{



    display: flex;



    align-items: center;



}



#footer .imgLogo{



    display: block;



}



#footer .tit{



    font-size: 12px;



    letter-spacing: 1px;



    line-height: 2;



    margin: 5px 0 0 30px;



    color: #fff;



}



#footer .tit a{

    color: inherit;

}



.isDesktopIpad #footer .tit{



    font-size: 10px;



    letter-spacing: normal;



    margin: 5px 0 0 20px;



}



#footer .naviList{



    display: flex;



}



#footer .naviItem{



    margin-right: 93px;



}



.isDesktopIpad #footer .naviItem{



    margin-right: 30px;



}



#footer .naviItem:last-child{



    margin-right: 0;



}



#footer .listLink{



    font-size: 16px;



    letter-spacing: 1.5px;



    font-weight: 100;



    color: #fff;



    text-decoration: none;



    display: block;



}



.isDesktopIpad #footer .listLink{



    font-size: 15px;



    letter-spacing: normal;



}



#footer .leftSubFlex{



    margin-top: 50px;



    padding-top: 65px;



    border-top: solid 1px rgba(255, 255, 255, 0.102);



}



#footer .leftSubFlex{



    display: flex;



    align-items: center;

    justify-content: space-between;



}



#footer .siteList{



    display: flex;

    align-items: center;



}



#footer .siteItem:nth-child(2){



    margin-left: 10px;



}



#footer .siteInner{



    font-size: 12px;



    color: #fff;



    text-decoration: none;



    display: block;



}

#footer .itemLink{

    margin-left: 40px;

    width: 170px;

    height: 44px;

    border-radius: 22px;

    border: 1px solid #524e4d;

    display: flex;

    justify-content: center;

    align-items: center;

}

#footer .itemLink + .itemLink{

    margin-left: 10px;

}

#footer .itemLink span{

    display: inline-block;

    position: relative;

}

#footer .itemLink span::before{

    position: absolute;

    content: '';

    margin: auto;

    display: block;

    top: -7px;

    right: -8px;

    width: 7px;

    height: 7px;

    background: url(../img/common/iconFooter.png) center top / cover no-repeat;

}



#footer .copyTxt{



    font-size: 11px;



    letter-spacing: 1px;



    color: #979695;



    font-weight: 500;



}



#footer .copyTxt .fCopy{



    font-family: Verdana,'Droid Sans';



}



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



    #footer .rightBox{



        width: 400px;



    }



    #footer .leftBox{



        width: calc(100% - 400px);



    }



    



}



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



    #footer .naviItem{



        margin-right: 40px;



    }



}



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



    #footer{



        margin-top: 1px;



    }



    #footer .flexBox{



        display: block;



    }



    #footer .rightBox{



        width: 100%;



    }



    #footer .contactInner{



        height: 280px;



    }



    #footer .contactInBox{



        position: relative;



        z-index: 100;



    }



    #footer .contactImg{



        width: 19px;



        margin: 0 auto;



    }



    #footer .contactEng{



        font-size: 40px;



        letter-spacing: 2px;



        margin-top: 10px;



    }



    #footer .contactTit{



        font-size: 13px;



        letter-spacing: 1px;



        margin-top: 14px;



    }



    #footer .contactBtnBox{



        width: 165px;



        margin: 30px auto 0;



        padding-bottom: 12px;



    }



    #footer .contactBtnTxt{



        font-size: 12px;



        letter-spacing: 1px;



    }



    #footer .telInner{



        height: 140px;



    }



    #footer .telImg{



        width: 22px;



        margin-right: 10px;



    }



    #footer .telNmber{



        font-size: 26px;



        letter-spacing: 1px;



    }



    #footer .telTxt{



        font-size: 12px;



        margin-top: 10px;



        letter-spacing: 1px;



    }



    #footer .leftBox{



        width: 100%;



        display: block;



        padding: 80px 0 80px;



    }



    #footer .leftInner{



        width: 92%;



        max-width: none;



    }



    #footer .leftFlex{



        display: block;



    }



    #footer .titFlex{



        display: block;



    }



    #footer .imgLogo{
        width: 200px;
    }



    #footer .tit{



        font-size: 12px;



        letter-spacing: 0.5px;



        line-height: 1.66;



        margin: 10px 0 0;



    }



    #footer .naviList{



        margin-top: 35px;



        justify-content: space-between;



    }



    #footer .naviItem{



        margin-right: 0;



    }



    #footer .listLink{



        font-size: 15px;



        letter-spacing: 1px;



    }



    #footer .leftSubFlex{



        margin-top: 27px;



        padding-top: 30px;



    }



    #footer .leftSubFlex{



        display: block;



    }



    #footer .siteList{



        flex-wrap: wrap;

        justify-content: center;
        max-width: 345px;
        margin: 0 auto;



    }



    #footer .siteItem:nth-child(2){



        margin-left: 10px;



    }

    



    #footer .siteInner{



        font-size: 12px;



    }

    #footer .itemLink {

        margin: 20px 0 0 0;

        width: 145px;

        height: 40px;

    }

    #footer .itemLink + .itemLink {

        margin-left: 5px;

    }



    #footer .copyTxt{



        font-size: 11px;



        letter-spacing: 1px;



        margin-top: 30px;



    }



}







/* animeHideLeft  */



.animeHideLeft{



    display: inline-block;



    -webkit-clip-path: inset(0 100% 0 0);



    clip-path: inset(0 100% 0 0);



}



.animeHideLeft.jsShow{



    animation: animetionLeft .7s cubic-bezier(.36,.07,.7,.91) 0s normal forwards;



}



@keyframes animetionLeft{



    0% {



        -webkit-clip-path: inset(0 100% 0 0);



        clip-path: inset(0 100% 0 0);



    }



    to {



        -webkit-clip-path: inset(0);



        clip-path: inset(0);



    }



}







.animeHideTop{



    -webkit-clip-path: inset(0 0 100% 0);



    clip-path: inset(0 0 100% 0);



}



.animeHideTop:not(.noScrollJsShow).jsShow,



.scene02-end2 .animeHideTop.jsShow{



    animation: animetionTop 1.2s cubic-bezier(.785,.135,.15,.86) 0s normal forwards;



}







@keyframes animetionTop{



    0% {



        -webkit-clip-path: inset(0 0 100% 0);



        clip-path: inset(0 0 100% 0);



    }



    to {



        -webkit-clip-path: inset(0);



        clip-path: inset(0);



    }



}



/*-----------------------------------------------



	jsHide



-----------------------------------------------*/



.jsHide{



    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);



}



.jsHide:not(.jsShow){



    opacity: 0;



}



/*-----------------------------------------------



    secCmnEntryTit



-----------------------------------------------*/



.gro .secCmnEntryTit{



    padding-top: 240px;



    text-align: center;



}



.gro .secCmnEntryTit .titJpn{



    font-size: 24px;



    letter-spacing: 5px;



    font-weight: bold;



    margin-top: 25px;



}



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



    .gro .secCmnEntryTit{



        padding-top: 105px;



        order: 1;



    }



    .gro .secCmnEntryTit .titEng img{



        width: auto;



        height: 35px;



    }



    .gro .secCmnEntryTit .titJpn{



        font-size: 12px;



        letter-spacing: 1px;



        margin-top: 5px;



    }



}







/*-----------------------------------------------



    .site-body > .gro



-----------------------------------------------*/



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



    .site-body > .gro{



        display: flex;



        flex-direction: column;



    }



    .gro .mainConte{



        order: 2;



    }



}







/* site-bodyのpaddingを除去 */



.site-body > .gro {



    margin: -2rem 0;



}



@media (min-width:768px){



    .site-body > .gro {



        margin: -2.5rem 0;



    }



}



@media (min-width:992px){



    .site-body > .gro {



        margin: -3rem 0 -3.5rem;



    }



}



@media (min-width: 1200px) {



    .site-body > .gro {



        margin: -3.5rem 0 -4rem;



    }



}



/*-----------------------------------------------



	pnkz



-----------------------------------------------*/



#pnkz{



    width: 100%;



    font-size: 0;



    padding: 10px 0;



    position: relative;



    margin-top: -28px;



}



#pnkz .boxList{



    text-align: right;



    position: relative;



}



#pnkz li{



	display: inline;



	font-size: 12px;



	line-height: 1.5;



    color: #b8b8b8;



}



#pnkz li:last-child{



    color: #3e3a39;



}



#pnkz li::after{



	content: "|";



	margin: 0 12px;



    color: #3e3a39;



}



#pnkz li:last-child::after{



	display: none;



}



#pnkz a{



    color: #b8b8b8;



    text-decoration: none;



    letter-spacing: 1px;



}



#pnkz li:last-child a{



    color: #3e3a39;



}



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



	#pnkz{



        margin: 0 auto;



		padding: 7px 0 8px;



        background: #f4f5f5;



        order: 3;



	}



    #pnkz a{



        letter-spacing: 0px;



    }



	#pnkz .boxList{



		white-space: nowrap;



		overflow-y: scroll;



        text-align: left;



	}



	#pnkz li{



		font-size: 10px;



		letter-spacing: 0.5px;



	}



    #pnkz li::after{



        margin: 0 10px;



    }



}







/*-----------------------------------------------



	secCmnPageTit



-----------------------------------------------*/



.gro .secCmnPageTit{



    padding-top: 240px;



}



.gro .secCmnPageTit .txt{



    font-size: 24px;



    font-weight: bold;



    margin-top: 40px;



    letter-spacing: 1px;



}



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



    .gro .secCmnPageTit{



        padding-top: 105px;



    }



    .gro .secCmnPageTit img{



        width: auto;



        height: 26px;



    }



    .gro .secCmnPageTit .txt{



        font-size: 12px;



        margin-top: 14px;



        letter-spacing: 0;



    }



}





/* hoverZoom */

.hoverZoom,

.hoverZoom .imgZoom{

	overflow: hidden;

}

.hoverZoom img:not(.noZoom){

	-webkit-transition: all 0.5s ease-out;

	transition: all 0.5s ease-out;

}

.hoverZoom:hover img:not(.noZoom){

	-webkit-transform: scale(1.05);

	transform: scale(1.05);

}