@charset "utf-8";

/* ヘッダーSP版_800pxまでの幅の場合に適応される */
@media screen and (max-width: 800px){
.header .site-header__wrapper{ display: none;}	/* PC版レイアウトを非表示 */
.header .nav {
		top: 0;
		display: block;
		margin: 0 0 0 auto; }
#form_confirm_body .header {
		top: 0px;/* 隠さない */
		font-size: 1.5em;
		height: 60px;
		display: flex;	
		position: fixed;
		box-sizing: border-box;
		align-items: center;
		z-index: 999;  
	}
	
	/* SP版_ハンバーガー */
	.fixed .drawer_open_white span,
	.fixed .drawer_open_white span:before,
	.fixed .drawer_open_white span:after { color: inherit; background-color: #000000;}
	
	/* SP版_全体の指定 ここまで */
	/* SP版_ロゴの指定 */	
	.header .sp_logo {
		display: block;
		float: left;
	}
	.sp_logo img {  
		display: block;
		max-width: 45px;
		margin: 0px 25px 0px; 

	}
	/* SP版_ロゴの指定 ここまで */
	/* ここから下がハンバーガーメニューに関するCSS */
	/* チェックボックスを非表示にする */
	.drawer_hidden { display: none;	}
	
	/* ハンバーガーアイコンの設置スペース */
	.drawer_open_white {
    display: flex;
    height: 60px;
    width: 60px;
    padding-right: 10px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;/* 重なり順を一番上にする */
    cursor: pointer;
    float: right;
	}
	
	/* ハンバーガーメニューのアイコン */
	.drawer_open_white span,
	.drawer_open_white span:before,
	.drawer_open_white span:after {
		content: '';
		display: block;
		height: 2px;
		width: 35px;
		border-radius: 3px;
		background-color: #000000; 	
		color: inherit;
		transition: 0.5s;
		position: absolute;
	}
	
	/* 三本線の一番上の棒の位置調整 */
	.drawer_open_white span:before { bottom: 8px; }
	
	/* 三本線の一番下の棒の位置調整 */
	.drawer_open_white span:after { top: 8px; }
	
	/* アイコンがクリックされたら真ん中の線を透明にする */
	#drawer_input:checked ~ .drawer_open_white span {
    color: inherit;
    background-color: transparent;
    float: none;
}
	
	/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
	#drawer_input:checked ~ .drawer_open_white span::before { 
		bottom: 0; 
		transform: rotate(45deg);
		background-color: #FFFFFF; 	
		color: inherit;
	}
	#drawer_input:checked ~ .drawer_open_white span::after { 
		top: 0; transform: rotate(-45deg);		
		background-color: #FFFFFF; 	
		color: inherit;
	}
	
	/* アイコンがクリックされたらメニューを表示 */
	#drawer_input:checked ~ .nav_content { display: block; top: 0px; left: 0px;/* メニューを画面に入れる */}
	
	/* メニューのデザイン*/
	.nav_content {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		position: fixed;
		left: 0; 
		color: inherit;
		background-color: rgba(0,0,0,0.85); 
		transition: .8s;
		text-align: center;
		display: none;
	}	
	.nav_list { 
		width: 100vw;
		min-height: 100vh;
		list-style: none; 	/* メニュー黒ポチを消す */
		padding: 15% 0 0; 
		margin: auto;
	}
	.nav_item p, .nav_item a, .has-child a {
		color: #FFFFFF; 	
		background-color: inherit;
		text-decoration: none; 
		display: inline-block;
		border-bottom: 1px solid #FFFFFF;
		width: 200px; 
		min-width: auto;
		margin: auto; 
		padding: 10px 0;
	} 
	.nav_item :active {
		background-color: #AAAAAA;	
		color: inherit;
		opacity: 1;
	}
	nav ul li {	position: relative;}	
	/*ナビゲーションのリンク設定*/	
	nav ul li a:hover{	background-color: inherit; color: #AAAAAA;}
	.has-child {
		width: 200px;
		padding: 0;	
		margin: auto;
	}
	nav ul li.has-child::before {
		content:'';
		position: absolute;
		right: 0;
		top: 15px;
		width: 10px;
		height: 10px;
		border-top: 1px solid  #FFFFFF;
		border-right:1px solid  #FFFFFF;
		transform: rotate(135deg);
	}
	nav li.has-child ul{
		position: absolute;
		right: 0;
		top: 0;
		z-index: 4;  
		/* 形状を指定 */
		margin: auto;
		padding: 0;
		background-color: #FFFFFF;	
		color: inherit;
		min-width: auto;
		visibility: hidden;
		opacity: 0;
		transition: all .3s; 
	}
	nav li.has-child:hover > ul,
	nav li.has-child ul li:hover > ul,
	nav li.has-child:active > ul,
	nav li.has-child ul li:active > ul{
		visibility: visible;
		opacity: 1; }
	
	/*ナビゲーションaタグの形状*/
	nav li.has-child ul li a{
		background-color: inherit;	
		font-size: 0.85em;
		color: #000000;
		border-bottom: solid 1px #000000;
	}
	nav li.has-child ul li:last-child a{ border-bottom: none;}
	nav li.has-child ul li a:hover,
	nav li.has-child ul li a:active{ color: #FFFFFF; background: #AAAAAA; }
	nav ul{ display: block;}
	div nav li.has-child ul,
	div nav li.has-child ul ul{
		position: relative;
		left:0;		
		top:0;
		min-width: auto;
		margin: auto;
		padding: 0;
		list-style:none;
		visibility:visible; 
		opacity:1; 
		display: none; 
		transition:none; }
		
	/*矢印の位置と向き*/
	div nav ul li.has-child::before{ right: 10px; }
	div nav ul ul li.has-child::before{ transform: rotate(135deg); left:0px;}
	div nav ul li.has-child.active::before{ top: 20px; transform: rotate(-45deg);}
	div .sns_logo_item { display: flex;  justify-content: center; }
	div .sp_inst img { margin: 20px 15px 0px; max-width: 29px; height: auto;}
	div .sp_inst_yt img { margin: 20px 15px 0px; max-width: 40px; height: auto;}
}