@charset "utf-8";

.sp{display: none !important;}
/*********************
 headerMenu 767px
*********************/
@media screen and (max-width: 767px) {

	.pc{display: none !important;}
	.sp{display: inline-block !important;}


	/*********************
	 body
	*********************/
	body{
		margin-top:75px;
	}

	/*********************
	 header
	*********************/
	header{
		width:100%;
		background:#fff;
		display:block;
		margin:0 auto;
		position: fixed;
		top:0;
		z-index: 999;
		filter: drop-shadow(0 0px 8px rgba(0, 0, 0, .2));
	}
	header .logo_btn img{
		height:55px;
		margin:10px 5px 10px 15px;
	}
	/** menu button **/
	header .menu_btn{
		display:inline-block;
		position: fixed;
		background:#98a4b0;
		cursor: pointer;
		width: 75px;
		height:75px;
		top:0;
		right:0;
		z-index:999;
	}
	header .menu_btn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		right: 20px;
		height: 2px;
		border-radius: 5px;
		background: #fff;
		width: 45%;
	 }
	header .menu_btn span:nth-of-type(1) { top:26px; }
	header .menu_btn span:nth-of-type(2) { top:32px; }
	header .menu_btn span:nth-of-type(3) { top:38px; }

	header .menu_btn span:nth-of-type(3)::after {
		content:"Menu";
		position: absolute;
		top:2px;
		left:2px;
		letter-spacing: .3em;
		color: #fff;
		font-size: 0.5rem;
		text-transform: uppercase;
	}
	header .menu_btn.active span:nth-of-type(1) {
		top: 24px;
		right: 28px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	header .menu_btn.active span:nth-of-type(2) { opacity: 0; }
	header .menu_btn.active span:nth-of-type(3){
		top: 36px;
		right: 28px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	header .menu_btn.active span:nth-of-type(3)::after {
		content:"Close";
		transform: translateY(0) rotate(-45deg);
		top:-15px;
		right:-65px;
	}
	/** menu list **/
	header .menu_list{
		position: fixed;
		background:#fff;
		max-width:500px;
		width:80vw;
		z-index:998;
		border-top:76px solid #98a4b0;
		display:none;
		opacity: 0;
		height: 100vh;
		top:0;
		color:#98a4b0;
	}
	header .menu_list.active{
		animation-name:slideinRight;
		animation-duration:0.3s;
		animation-fill-mode:forwards;
		display:inline-block;;
	}
	@keyframes slideinRight {
	  0% {
		transform: translateX(100%);
	  }
	  100% {
		opacity: 1;
		transform: translateX(-100%);
	  }
	}
	header .menu_list li{
		border-bottom:1px solid #ececec;
		display:block;
	}
	header .menu_list li a{
		margin-right:30px;
		color:#737989;
		text-decoration:none;
		position: relative;
		display: inline-block;
		padding:15px 20px;
		width:100%;
		transition:0.3s;
	}
	header .menu_list li a:hover{
		opacity:0.5;
	}
	header .menu_list li a:before {
		content: '';
		width: 6px;
		height: 6px;
		border: 0;
		border-top: solid 2px #737989;
		border-right: solid 2px #737989;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 30px;
		bottom: 0;
		margin: auto;
	}


	/*********************
	 footer
	*********************/
	footer{
		padding-bottom:70px;
	}
	footer section article{
		display: inline-block !important;
		text-align:center;
		padding-bottom:15px;
		width:100%;
	}
	footer section article div#honsha{
		width:100%;
		text-align:center;
		padding-top:30px;
	}
	footer section div#links {
		line-height:2em;
	}
	footer section div#links a{
		width:44%;
		text-align:right;
		padding:0 10px 0 0;
		margin:0;
	}
	footer section div#links a:nth-of-type(even){
		text-align:left;
		padding:0 0 0 10px;
	}
	footer div.sp-menu{
		position: fixed;
		display: block !important;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background:#98a4b0;
		padding:10px 0;
	}
	footer div.sp-menu a{
		display: inline-block !important;
		width:calc( 100% / 3 );
		padding:5px 0;
		border-left:1px solid #ccc;
	}
	footer div.sp-menu a:first-child{
		width:calc( (100% / 3) - 10px );
		border-left:0;
	}
	footer div.sp-menu a:last-child{
		width:calc( (100% / 3) - 10px );
	}
	footer div.sp-menu a img{
		height:25px;
	}
	footer div.sp-menu a:first-child img{
		height:30px;
	}

}