@charset "utf-8";

@media screen and (min-width: 768px),print {
/*========= ナビゲーションのためのCSS ===============*/
#g-nav{position:fixed;z-index: 999;top:0;right: -120%;width: 27.8%;height: 100vh;background: #30ABCB;transition: all 0.6s;}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{right: 0;}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{/*ナビの数が増えた場合縦スクロール*/position: fixed;z-index: 999;padding: 5vw 0 0 4vw;width: 100%;height: 100vh;/*表示する高さ*/overflow: auto;-webkit-overflow-scrolling: touch;}
/*ナビゲーション*/
#g-nav ul {}
#g-nav .openmenu-list li{list-style: none;margin: 0 0 0.7vw 0;text-align: left;}
#g-nav .openmenu-list li a{color: #fff;font-size: 0.9vw;text-decoration: none;padding: 0 0 0.7vw 0;display: block;text-transform: uppercase;letter-spacing: 0.1em;font-weight: bold;}
#g-nav .openmenu-list li a:hover{text-decoration: underline;}
#g-nav .cv-btn-list{margin: 1vw 0 0 0;}
#g-nav .cv-btn-list li{margin:0 0 1vw 0;}
#g-nav .cv-btn-list img{width: 20vw;filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.3));}
/*========= ボタンのためのCSS ===============*/
.openbtn1{position:fixed;z-index: 9999;/*ボタンを最前面に*/top: 0;right: 0;cursor: pointer;width: 50px;height:50px;}
.openbtn1{
width: 88px; height: 88px;
background-image:url(../images/common/header-open.svg);background-position:0px 0px;background-repeat:no-repeat;}
.openbtn1.active{
width: 88px; height: 88px;
background-image:url(../images/common/header-close.svg);background-position:0px 0px;background-repeat:no-repeat;}

/*×に変化*/  
.openbtn1 span{display: inline-block;transition: all .4s;position: absolute;left: 24px;height: 2.2px;border-radius: 2px;background-color: #fff;width: 45%;}
.openbtn1 span:nth-of-type(1) {top: 23px;}
.openbtn1 span:nth-of-type(2) {top: 36px;}
.openbtn1.active span{ background-color: #51CAF5 !important;}
.openbtn1.active span:nth-of-type(1) {top: 22px;left: 27px;transform: translateY(6px) rotate(-35deg);width: 40%;}
.openbtn1.active span:nth-of-type(2){top: 35px;left: 26px;transform: translateY(-6px) rotate(35deg);width: 40%;}
}


@media screen and (max-width: 767px) {
/*========= ナビゲーションのためのCSS ===============*/
#g-nav{position:fixed;z-index: 999;top:0;right: -120%;width: 90%;height: 100vh;background: #30ABCB;transition: all 0.6s;}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{right: 0;}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{/*ナビの数が増えた場合縦スクロール*/position: fixed;z-index: 999;padding: 0 0 0 0;5: 500;height: 100vh;/*表示する高さ*/overflow: auto;-webkit-overflow-scrolling: touch;}
/*ナビゲーション*/
#g-nav ul {
    margin: 21vw 0 0vw 9vw;
    padding: 0 0 4vw 0;
}
#g-nav .openmenu-list li{list-style: none;margin: 0 0 4.8vw 0;width: 80vw;text-align: left;}
#g-nav .openmenu-list li a{color: #fff;font-size: 3.865vw;text-decoration: none;padding: 0 0 0 0;line-height: 1.4;display: block;text-transform: uppercase;letter-spacing: 0.2vw;font-weight: 500;}
#g-nav .openmenu-list li a:hover{text-decoration: underline;}
#g-nav .cv-btn-list{margin: 0vw 0 0 6vw;}
#g-nav .cv-btn-list li{margin: 0 0 5vw 0;}
#g-nav .cv-btn-list img{width: 77vw;/* margin: 0 auto; *//* text-align: center; */filter: drop-shadow(0.5vw 1vw 1.5vw rgba(0, 0, 0, 0.3));}
/*========= ボタンのためのCSS ===============*/
.openbtn1{position:fixed;z-index: 9999;/*ボタンを最前面に*/top: 0;right: 0;cursor: pointer;width: 50px;height:50px;}
.openbtn1{width: 17vw;height: 17vw;background-image:url(../images/common/header-open.svg);background-position:0px 0px;background-repeat:no-repeat;background-size: contain;}
.openbtn1.active{width: 17vw;height: 17vw;background-image:url(../images/common/header-close.svg);background-position:0px 0px;background-repeat:no-repeat;}

/*×に変化*/  
.openbtn1 span{display: inline-block;transition: all .4s;position: absolute;left: 4.8vw;height: 2.2px;border-radius: 2px;background-color: #fff;width: 45%;}
.openbtn1 span:nth-of-type(1) {top: 4vw;}
.openbtn1 span:nth-of-type(2) {top: 6vw;}
.openbtn1.active span{background-color: #30ABCB !important;}
.openbtn1.active span:nth-of-type(1) {top: 3.5vw;left: 5vw;transform: translateY(6px) rotate(-35deg);width: 45%;}
.openbtn1.active span:nth-of-type(2){top: 6.5vw;left: 5vw;transform: translateY(-6px) rotate(35deg);width: 45%;}
}