@charset "utf-8";
@import url(//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600;900&display=swap);

#navTgl,#navTgl2 {display: none;}
.menu-list-bg, .menu-list-bg2{position: fixed; z-index:400;}
label.menu-list-btn, label.menu-list-btn2{ cursor: pointer;position: fixed; z-index:401;}


.open::before,
.open::after,
.open2::before,
.open2::after {content: "";}

.close,.close2 {width: 100%; height: 100%; pointer-events: none;}

.menu,.menu2{ z-index:300; position: fixed; overflow: auto;  right: 0;  margin: 0; padding: 10px; box-sizing: border-box;  transform: translateX(100%); transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);}

.menu{top: 0; width: 100%; height: 100%; background: rgba(11,172,157,.9);}
.menu2{top: 150px; width: 30%; max-width: 300px; height: 100%;  background: url(/img/common/sns-bg.gif) no-repeat 0 0;}





#navTgl:checked ~ .menu,
#navTgl2:checked ~ .menu2 { transform: none;}

#navTgl:checked + .open { background:transparent url(/img/common/menu-close-icon.png) no-repeat 0 0; -moz-background-size:100% auto; background-size:100% auto; }
#navTgl2:checked + .open2 { background:transparent url(/img/common/social-menu-close-icon.png) no-repeat 0 0; -moz-background-size:100% auto; background-size:100% auto; }

.open{width: 100%; height: 100%; top: 20px; right: 0; background: url(/img/common/menu-open-icon.png) no-repeat 0 0; -moz-background-size:100% auto; background-size:100% auto; }
.open2{width: 100%; height: 100%; top: 140px; right: 0; background: url(/img/common/social-menu-open-icon.png) no-repeat 0 0; -moz-background-size:100% auto; background-size:100% auto; }


label.menu-list-btn{  top: 20px; right: 0; width: 100px; height: 100px;}
label.menu-list-btn2{ top: 140px; right: 0; width: 100px; height: 50px;}


.menu-list-bg{ top: 20px; right: 0; width: 100px;  height: 100px; background: url(/img/common/menu-btn.png) no-repeat 0 0; -moz-background-size:100% auto; background-size:100% auto; }
.menu-list-bg2{ top: 140px; right: 0; width: 100px; height: 50px; background: url(/img/common/social-tab.png) no-repeat 0 0;  -moz-background-size:100% auto; background-size:100% auto; }





@media screen and (max-width: 700px) {
.menu-list-bg{ top: 20px; right: 0; width: 50px;  height: 50px;}
.menu-list-bg2{  top: 80px; right: 0; width: 50px; height: 100px;}

label.menu-list-btn{  top: 20px; right: 0; width: 50px; height: 50px;}
label.menu-list-btn2{ top: 80px; right: 0; width: 50px; height: 100px;}

.menu2{top: 90px; width: 30%; max-width: 300px; height: 100%;  background: url(/img/common/sns-bg.gif) no-repeat 0 0;}


}



/* main-menu-list-box-cont
 ----------------------------------------------------------------------------------------- */

.main-menu-list-box-cont{width: 80%; max-width: 600px; margin: 0 auto; padding-top: 5%;}

.main-menu-list-box-cont li{font-size: calc(40/1920*100vw); text-align: center;}

.menu a{ color: #fff; text-decoration: none; font-family: 'Noto Serif JP', serif; display: block; padding: 4% 0;}
.menu a:visited{ color: #fff; }
.menu a:hover{ color: #fff; text-decoration: underline;}
.menu a:active{ color: #fff; }

.menulist_new{display: none;}

/*
social-menu
 ----------------------------------------------------------------------------------------- */




#social-menu-box .slide-inner {
  overflow: auto;
  overflow-x: hidden;
}

.social-menu-box-cont{
	width: 80%;
	margin-left: 10px;
	padding-top: 10px;
	overflow: hidden;
}
.social-menu-cont{overflow: hidden; border-top: solid 1px #212121;}
.social-menu-cont:last-child{border-bottom: solid 1px #212121;}

.social-menu-cont li{padding:0; margin:0;}

@media screen and (max-width: 700px) {
.main-menu-list-box-cont li{font-size: calc(80/1920*100vw); text-align: center;}
#social-menu-box{
  top: 80px;
  background:url(../img/common/tabmenu-bg-sp.png) top left no-repeat;
}
}