@charset "utf-8";
/*チェックボックス等は非表示に*/
.unshown{display:none;}

/*アイコンのスペース*/
#spmenu_btn_open{position:fixed;top:5px;right:5px;display:block;width:45px;height:45px;background:#0088e8;cursor:pointer;box-sizing:border-box;padding:5px;z-index:9999;}

/*ハンバーガーアイコンをCSSだけで表現*/
#spmenu_btn_open span,
#spmenu_btn_open span:before,
#spmenu_btn_open span:after{position:absolute;height:4px;width:35px;border-radius:3px;background:#fff;display:block;content:"";z-index:9999;transition:.3s ease-in-out;}

	#spmenu_btn_open span{top:9px;}
	#spmenu_btn_open span:before{top:12px;}
	#spmenu_btn_open span:after{top:24px;}
#spmenu_btn:checked + #spmenu_btn_open span{top:17px;transform:rotate(45deg);}
#spmenu_btn:checked + #spmenu_btn_open span:before{top:0;transform:rotate(90deg);}
#spmenu_btn:checked + #spmenu_btn_open span:after{content:none;}
	#spmenu_btn:checked + #content{height:100%;}

/*閉じる用の薄黒カバー*/
#spmenu_btn_close{display:none;position:fixed;z-index:1500;top:0;left:0;width:100%;height:100%;background:black;opacity:0;transition:.3s ease-in-out;}

/*中身*/
#spmenu_content{overflow:auto;position:fixed;top:0;right:0;z-index:9990;width:100%;height:100%;background:#0088e8;transition:.3s ease-in-out;right:-100vw;text-align:left;opacity:0;}

/*チェックが入ったらもろもろ表示*/
#spmenu_btn:checked ~ #spmenu_btn_close{display:block;opacity:0.5;}

#spmenu_btn:checked ~ #spmenu_content{right:0;transition:.3s ease-in-out;opacity:1.0;}

	/*custom*/
	#spmenu_lists{width:100%;margin:0;}
	#spmenu_lists dt{margin:0;font-weight:normal;position:relative;}
	#spmenu_lists dt:after{content:"＞";font-size:20px;display:inline-block;position:absolute;top:36%;right:17px;color:#fff;font-weight:bold;transform:rotate(90deg);transition:.3s ease-in-out;}
	#spmenu_lists dt.active:after{transform:rotate(-90deg);top:30%;}
	#spmenu_lists dd{margin:0;display:none;background:#fff;}
	#spmenu_lists a{color:#fff;}
	
	.spmenu_parent{display:flex;flex-flow:row wrap;align-items:center;padding:10px 0;}
	.spmenu_parent .icon{flex:0 0 80px;}
	.spmenu_parent .icon img{display:block;margin:0 auto;}
	.spmenu_parent p:not(.icon){flex:0 0 auto;width:calc(100% - 120px);color:#fff;}
	.spmenu_parent strong{display:block;}
	
	.spmenu_2{width:50%;float:left;text-align:center;padding:15px 0 5px;}
	.spmenu_4{width:25%;float:left;text-align:center;padding:15px 0 5px;height:80px;box-sizing:border-box;}
	#spmenu_lists:after{content:"";display:block;clear:both;}
	
	#spm_home{display:block;width:calc(100% - 60px);background:#3baaef;text-align:center;padding:5px 0!important;height:45px;}
	#spm_home img{display:inline-block;margin:0 5px 0 0;vertical-align:middle;}
	#spm_price{background:#073adf;}
	#spm_installation{background:#0088e8;}
	#spm_service{background:#4863e7;}
	#spm_type{background:#4b82ff;}
	#spm_column{background:#1160b9;}
	#spm_company{background:#0c71c7;}
	#spm_inquiry{background:#073adf;}
	#spm_shop{background:#1b05a0;}
	#spm_instagram{background:#b85bcf;}
	#spm_twitter{background:#40badf;}
	#spm_facebook{background:#1d4fbf;}
	#spm_youtube{background:#c72d3b;}
#spm_recruit{background:#1c98b5;}
	
	#spmenu_lists ul{display:block;box-sizing:border-box;padding:1px 10px;}
	#spmenu_lists li{display:block;width:100%;margin:10px auto;}
	#spmenu_lists li a{display:block;width:100%;background:#abd8ff;box-sizing:border-box;padding:10px;color:#333;}
	#spmenu_lists li a:before{content:"▲";display:inline-block;transform:rotate(90deg);margin-right:5px;}
	#spmenu_lists ul p{display:block;color:#0088e8;margin:15px 0 5px 0;border-bottom:2px solid #0088e8;font-weight:bold;width:100%;}
#spmenu_search{width:100%;padding:20px 10px;box-sizing:border-box;}