@charset "UTF-8";

.drawer_bg {
  border-bottom: 1px solid #fff;
  height: 50px;
  width:100%;
  /* background-color:rgba(64,147,45,0.9); */
  background-color:#6fab2d;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
  position: fixed;
  z-index: 303;
  top: 0;
}



/* PCでもスクロールバーを消す */
.drawer-menu{overflow-y:auto;}
.drawer-menu::-webkit-scrollbar{display:none;}


/* ------------------------------------------------ common */
/*
.contents {
	display: table;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	box-shadow: 0 0 0px 0 rgba(0,0,0,.8);
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
}
.contents__inner {
	display: table-cell;
}
*/

/* ------------------------------------------------ drawer menu */
.drawer-menu {
	display: inline-block;
	box-sizing: border-box;
	position: fixed;
	top: 36px; /* <- スティッキーヘッダの縦幅分下げる */
	right: 0;
	width: 100%;
	height: 100%;
	margin:0px 0 0 0; /* <- スティッキーヘッダの縦幅分下げる */
	padding: 0px 0; /* <- 中身のトップPadding */
	background: rgba(255, 255, 255, 0.95);
						/* border:10px solid #993300; */
						overflow: auto;
						-webkit-overflow-scrolling: touch;

	/* transition/transform */
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: perspective(500px) rotateY(-90deg);
	transform: perspective(500px) rotateY(-90deg);
	opacity: 1;
	z-index:302;
}



/*!------------------------------------*\
    Add to ...
\*!------------------------------------*/
.drawer-menu ul {padding:0 0 5rem 0;}
.drawer-menu ul li{/*background-color: rgba(6,46,97,0.7);*/}
.drawer-menu ul li h5{margin:0;color:#fff;font-size: 1.0rem; border-bottom:1px solid rgba(255,255,255,0.4);background-color:rgba(64,147,45,0.8);text-shadow: #666 1px 1px 1px; letter-spacing: 1px;}
.drawer-menu ul li h5 a{padding:0.4rem 0.8rem;color:#fff;display:inline-block;width:100%;text-decoration:none;}
.drawer-menu ul li h5 a:before{
  content: '▶︎';
  margin-right: 0.8rem;
  font-size:0.8rem;
}
.drawer-menu ul li ul {margin:0; padding:0;list-style:none;}
.drawer-menu ul li ul li{margin:0; padding:0;width:100%;border-bottom:1px solid rgba(0,0,0,0.2);}
.drawer-menu ul li ul li a{
	padding:0.8rem 0 0.8rem 0;
	display:block;
	line-height: 130%;
	padding-left:1rem;
	}
.drawer-menu ul li ul li a:before{
  content: '・';
  margin-right: 0.8rem;
  font-size:0.6rem;
}
.drawer-menu li a{text-decoration:none;color: #000;}
.drawer-menu li a:hover{text-decoration:none;}



/* ------------------------------------------------ checkbox */
.check {
	display: none;
}

/* ------------------------------------------------ menu button */
.menu-btn {
	position: fixed;
	display: block;
	top: 10px;
	right: 10px;
	display: block;
	width: 30px;
	height: 30px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 305;
}

              .sp_logo{
                position: fixed;
                font-weight:0.6rem;
                z-index: 102;
                top: 7px;
                left:10px;
								/* max-width:49%; */
								width:170px;
								max-width:170px;
								z-index: 306;
              }
              .sp_logo a img{width:100%;max-height:36px;}
              .sp_logo a:hover{}

							.btn_sp_02 a{
							  position: fixed;
							  font-weight:0.6rem;
							  z-index: 102;
							  top: 6px;
							  right:60px;
							  height:36px;
							  border:1px solid #fff;
							  background-color:#fff;
							  border-radius:4px;
							  /* box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4); */
							  display:block;
							  margin:auto;
							  padding:4px;
							  color:#fff;
								font-size:0.8rem;
								z-index: 306;
							}
							.btn_sp_02 a:hover{text-decoration:none; color:#fff;}


							.btn_sp_01 a{
							  position: fixed;
							  font-weight:0.6rem;
							  z-index: 102;
							  top: 6px;
							  right:110px;
							  height:36px;
							  border:1px solid #fff;
							  background-color:#fff;
							  border-radius:6px;
							  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
							  display:block;
							  margin:auto;
							  padding:4px 5px 5px 5px;
							  color:#fff;
								font-size:0.8rem;
								z-index: 306;
							}
							.btn_sp_01 a:hover{text-decoration:none; color:#fff;}


.bar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 1px;
	background: #fff;
	-webkit-transition: all .4s;
	transition: all .4s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.bar.middle {
	top: 9px;
	opacity: 1;
}

.bar.bottom {
	top: 18px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}

.menu-btn__text {
	position: absolute;
	bottom: -8px;
	font-size: 10px;
	letter-spacing: 0;
	white-space: nowrap;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1;
}

.menu-btn:hover .bar {
	background: #fff;
}

.menu-btn:hover .menu-btn__text {
	color: #fff;
}

.close-menu {
	position: fixed;
	top: 0;
	right: 0px;
	width: 0%;
	height: 100vh;
	background: rgba(0,0,0,0);
	cursor: url(../images/cross.svg),auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}

/* ------------------------------------------------ checked */
.check:checked ~ .drawer-menu {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	opacity: 1;
	z-index: 302;
}

.check:checked ~ .contents {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translateX(-300px);
	-ms-transform: translateX(-300px);
	transform: translateX(-300px);
}

.check:checked ~ .menu-btn .menu-btn__text {
	visibility: hidden;
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
	width: 44px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
	width: 44px;
	top: 30px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	opacity: 1;
	z-index: 303;
}