/**
 * header/header.php用のCSS
 * 
 */



.page-header{
	position            : relative;
	margin              : 24px 10px;
	text-align          : center;
}
.page-header-title-wrapper{
	display             : block;
	margin              : auto;
	width               : 240px;
}
.page-header h1{
	margin              : 8px 0;
	font-size           : 24px;
	line-height         : 1em;
	letter-spacing      : 0.1em;
}
.page-header p{
	margin              : 8px 0;
	font-size           : 16px;
	letter-spacing      : 0.05em;
	line-height         : 1em;
}

@media screen and (max-width: 768px){
	body > header{
		overflow-x      : hidden;
	}
	body > header + *{
		margin-top      : 56px;
	}
	.page-header{
		position        : fixed;
		top             : 0;
		left            : 0;
		right           : 0;
		z-index         : 80;
		margin          : 0;
		padding         : 9px 10px;
		text-align      : left;
		background      : #FFFFFF;
	}
	.page-header-title-wrapper{
		display         : inline-block;
		width           : auto;
	}
	.page-header h1{
		margin          : 4px 0;
		font-size       : 20px;
	}
	.page-header p{
		margin          : 4px 0;
		font-size       : 14px;
	}
}

.page-header a:hover{
	color               : inherit;
}


.page-header .bogo-language-switcher{
	position            : absolute;
	top                 : 0;
	right               : 12px;
}
.page-header .bogo-custom-language-switcher{
	font-size           : 0;
}
.page-header .bogo-custom-language-switcher li{
	display             : inline-block;
	padding             : 0 1em;
	font-size           : 14px;
	line-height         : 1em;
	color               : #AAAAAA;
	box-sizing          : content-box;
}
.page-header .bogo-custom-language-switcher li + li{
	border-left         : 1px solid #AAAAAA;
}
.page-header .bogo-custom-language-switcher a{
	color               : #333333;
}
.page-header .bogo-custom-language-switcher .current{
	position            : relative;
}
.page-header .bogo-custom-language-switcher .current::after{
	content             : '';
	position            : absolute;
	bottom              : -1px;
	left                : 0.7em;
	right               : 0.7em;
	display             : block;
	height              : 1px;
	border-top          : 1px dotted #AAAAAA;
}
@media screen and (max-width: 768px){
	.page-header .bogo-language-switcher{
		top             : 21px;  /* DAN HONDA の文字に合わせる場合： 12px; */
		right           : 64px;
	}
}


.header-mainmenu > div{
	position            : fixed;
	top                 : 0;
	right               : 0.5em;
	z-index             : 999;
	height              : 100%;
	height              : 100vh;
	max-height          : 800px;
	font-size           : 12px;
	line-height         : 2.0em;
	text-align          : center;
	text-shadow         : 0 0 0.10em #FFFFFF, 0 0 0.12em #FFFFFF, 0 0 0.15em #FFFFFF,
	                      0 0 0.20em #FFFFFF, 0 0 0.30em #FFFFFF, 0 0 0.35em #FFFFFF,
	                      0 0 0.40em #FFFFFF, 0 0 0.48em #FFFFFF, 0 0 0.50em #FFFFFF;
	-ms-writing-mode    : tb-rl;
	    writing-mode    : vertical-rl;
	text-orientation    : sideways;
}
.header-mainmenu .menu{
	font-size           : 0;
}
.header-mainmenu li{
	display             : inline-block;
	margin              : 12px 0.2em;
	font-size           : 16px;
}
.header-mainmenu-toggle,
.privacy-policy-in-header-menu-wrapper{
	display             : none;
}
@media screen and (max-width: 768px){
	.header-mainmenu > div{
		top             : 56px;
		bottom          : 0;
		left            : 0;
		right           : 0;
		height          : auto;
		max-height      : none;
		font-size       : 16px;
		-ms-writing-mode: unset;
		    writing-mode: unset;
		text-orientation: unset;
		background      : #FFFFFF;
		opacity         : 0;
		transform       : translateX(100%);
		transition      : 0.8s;
	}
	input#main_menu_sp_open:checked + label + div{
		opacity         : 1;
		transform       : translateX(0);
		transition      : 0.4s;
	}
	.header-mainmenu .menu{
		position        : absolute;
		top             : 50%;
		left            : 50%;
		display         : inline-block;
		text-align      : left;
		transform       : translate(-50%, -50%) translateY(-28px);
	}
	.header-mainmenu li{
		display         : block;
	}
	.header-mainmenu-toggle{
		position        : fixed;
		top             : 8px;
		right           : 8px;
		z-index         : 90;
		display         : block;
		width           : 40px;
		height          : 40px;
		background      : #333333;
	}
	.header-mainmenu-toggle span,
	.header-mainmenu-toggle::before,
	.header-mainmenu-toggle::after{
		position        : absolute;
		left            : 6px;
		right           : 6px;
		display         : block;
		height          : 2px;
		font-size       : 0;
		background      : #FFFFFF;
		border-radius   : 1px;
		transition      : 0.4s;
	}
	.header-mainmenu-toggle span{
		top             : 10px;
		transition      : 0.8s;
	}
	.header-mainmenu-toggle span + span{
		top             : auto;
		bottom          : 10px;
	}
	.header-mainmenu-toggle::before,
	.header-mainmenu-toggle::after{
		content         : '';
		top             : 50%;
		transform       : translateY(-50%);
	}
	input#main_menu_sp_open:checked + .header-mainmenu-toggle span{
		opacity         : 0;
		transition      : 0.4s;
	}
	input#main_menu_sp_open:checked + .header-mainmenu-toggle::before{
		transform       : translateY(-50%) rotate(+35deg);
		transition      : 0.4s;
	}
	input#main_menu_sp_open:checked + .header-mainmenu-toggle::after{
		transform       : translateY(-50%) rotate(-35deg);
		transition      : 0.4s;
	}
	.privacy-policy-in-header-menu-wrapper{
		position        : absolute;
		left            : 0;
		right           : 0;
		bottom          : 10px;
		display         : block;
		font-size       : 12px;
	}
	.privacy-policy-in-header-menu::before{
		content         : '\f3ed';
		font-family     : 'Font Awesome 5 Free';
		font-weight     : 900;
		font-size       : smaller;
		color           : #696969;
		padding-right   : 8px;
	}
}