@charset "utf-8";

/* all
-------------------------------------------------------------------*/
:root{
	--hover:background .4s,color .4s,border-color .4s,opacity .4s,text-decoration-color .4s,transform .4s,filter .4s,box-shadow .4s;
	--header: 80px;
	--container:1200px;
	--wide:1920px;
	--inner:5%;
	--outer:calc(var(--inner) * -1);
	--fontcolor:#282828;
	--keycolor:#1f2531;
	--accent:#bf0d0d;
	--gray:#eeede6;
	--reverse:invert(1);
	--white:brightness(0) invert(1);
}
:root img{
	transition:opacity .4s,filter .4s;
}
:root a{
	transition:var(--hover);
}
html {
	background: #FFFFFF;
	color: var(--fontcolor);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.4;
	scroll-padding:var(--header);
	scroll-behavior:smooth;
	font-feature-settings:'palt';
	font-optical-sizing: auto;
	font-style: normal;
	letter-spacing:0.06em;
}
html :is([lang="en"],.eng){
	font-family: "Poppins", sans-serif;
}
html .goti{
	font-family: "Noto Sans JP", sans-serif;
}
body {
	width: 100%;
	font-size: 100%;
	text-align: center;
	min-width: var(--container);
	position: relative;
	z-index: 2;
}
:root a.skip-link{
	display:flex;
	font-size:0.75rem;
	align-items:center;
	justify-content: center;
	color:#fff;
	background:var(--fontcolor);
	position:absolute;
	top: calc(var(--header) + 1em);
	left:0;
	padding:0.5em;
	z-index:-5;
	box-shadow:0 0 1em rgba(0,0,0,0.25);
	opacity:0;
	width:7.5em;
	height:7.5em;
}
:root a.skip-link02{
	top: calc(var(--header) + 8.5em);	
}
:root a.skip-link:focus{
	opacity:1;
	z-index:15;
	text-decoration:underline dotted 1px;
}
.all-content{
	overflow: clip;
}
main {
	width: 100%;
	position: relative;
	z-index: 5;
}
body img,
body svg {
	max-width: 100%;
	height: auto;
}
*:has(ruby){
	line-height:2;
}
ruby {
	position:relative;
	letter-spacing:0.1em;
	z-index:2;
}
ruby rt{
	position:absolute;
	top:-0.75em;
	font-size:min(0.45em,0.85rem)!important;
	margin:0 auto;
	left:0;
	right:0;
	text-align:center;
	letter-spacing:-0.03em;
	z-index:-1;
}
.sitewrap,
.widewrap{
	width: var(--container);
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
}
.widewrap{
	max-width:var(--wide);
	padding-inline:1em;
	width:auto;
}
*:has( > .sitewrap ){
	width:100%;
	overflow: clip;
}
.center_content {
	text-align:center;
}
.center_content > *{
	margin-inline:auto;
}
.right_content {
	text-align:right;
}
.right_content > *{
	margin-inline:auto 0;
}
@media screen and (max-width:1240px) {
	:root{
		--container:100%;
	}
	.sitewrap{
		padding-inline:var(--inner);
	}
}
@media screen and (max-width:767px) {
	header#fix_menu{
		--header:60px;
	}
	:root{
		--inner:1.5rem;
		--header: 60px;
	}
	html {
		font-size: 14px;
	}
}
/* header
-------------------------------------------------------------------*/
#global-header {
	position: fixed;
	z-index: 50;
	top: 0;
	left: 0;
	right: 0;
	width:100%;
	display:flex;
	align-items: center;
	transition: top .4s .2s, background .2s;
	padding: 0 1.75em;
	height:var(--header);
	width:100%;
	max-width:var(--wide);
	margin-inline:auto;
	border-bottom: solid 1px #fff;
}
#global-header:after{
	content:"";
	display:block;
	inset:0px;
	position:absolute;
	background:rgba(0,0,0,0);
	z-index:-1;
	transition:background .2s ;
	backdrop-filter: blur(0.25em);
}
#global-header.fixedMenu:after{
	background:rgba(0,0,0,0.5);
}

#global-header #site_ttl {
	filter: drop-shadow(0px 0px 2px #fff);
	filter: brightness(0) invert(1);

}
#global-header #site_ttl a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}
#global-header #site_ttl a img{
	display:block;
	max-width:inherit;

}
#global-header .nav-wrap{
	display:flex;
	margin-inline:auto 0;
}
#global-header .nav-wrap button{
	display:none;
}
#global-header #global-nav{
	display:flex;
	align-items:center;
	gap: 2.5em;
}
#global-header #global-nav ul{
	display:flex;
	gap: 1.5em;
	color:#fff;
	font-weight:600;
	margin-bottom: 0;
}
@media screen and (min-width: 980px){
	body:not(.home) #global-header:not(.fixedMenu) #global-nav ul{
		/* color:#282828; */
	}
	body:not(.home) #global-header:not(.fixedMenu) a img{
	  /* filter: brightness(0.2);*/
	}

}



#global-header #global-nav .header-languages{
	min-width: 8.875em;
}
#global-header #global-nav .gtranslate_wrapper{
	position:relative;
	z-index:2;
	background:#fff;
	border-radius:2em;	
}
#global-header #global-nav .gtranslate_wrapper select{
	margin:0;
	padding:0 1.5em 0 2em;
	appearance:none;
	font-size:1rem;
	border:none;
	background:transparent;
	line-height:2.0em;
	border-radius:2em;
	border:solid 2px var(--accent);
	width:100%;
	cursor:pointer;
	font-weight:600;
	font-family:inherit;
	background:url(../img/ico_lang.png) no-repeat 0.75em 50% / 15px;
}
#global-header #global-nav .gtranslate_wrapper:after{
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	content:"";
	display:block;
	position:absolute;
	inset:0 0.75em 0 auto;
	background:var(--accent);
	width:0.5em;
	height:0.35em;
	margin:auto;
	pointer-events:none;
	z-index:-1;
}
header #site_ttl .translate_wrap:has(select:is(:hover,:focus)){
		background:#000;
}
@media screen and (max-width:1240px) {
	#global-header {
		padding: 0 1em;
	}
	#global-header #global-nav{
		gap: 1em;
		font-size:0.875rem;
	}
	#global-header > a{
		max-width: 140px;
	}
}
@media screen and (max-width: 1050px) {
	:root{
		--side:280px;
	}
	#global-header{
		padding-inline:var(--inner) 0;
	}
	#global-header .nav-wrap button{
		display:flex;
		appearance:none;
		padding:0.25em;
		height:calc(var(--header) - 1px);
		aspect-ratio:1 / 1;
		background:transparent;
		border:none;
		position:relative;
		cursor:pointer;
		align-items:center;
		justify-content:center;
		z-index:100;
		transition:background .2s,right .2s;
		right:0;
	}
	#global-header .nav-wrap button:is(:hover,:focus){
		background:rgba(0,0,0,0.35)
	}
	#global-header .nav-wrap button:before,
	#global-header .nav-wrap button:after,
	#global-header .nav-wrap button span{
		display:block;
		height:2px;
		width:2em;
		background:#fff;
		transition:transform .3s,inset .2s,opacity .2s .2s;
		transform:rotate(-180deg);
	}
	#global-header .nav-wrap button:before,
	#global-header .nav-wrap button:after{
		content:"";
		position:absolute;
		inset:0 auto;
		margin:auto;
	}
	#global-header .nav-wrap button:before{
		top:-1.25em;
	}
	#global-header .nav-wrap button:after{
		bottom:-1.25em;
	}
	#global-header #global-nav{
		position:fixed;
		width:var(--side);
		top:0;
		bottom:0;
		right:calc(var(--side) * -1);
		flex-direction: column-reverse;
		z-index:150;
		background:var(--accent);
		transition:right .2s;
		justify-content:flex-end;
		gap:0;
	}
	#global-header #global-nav > *{
		visibility:hidden;
	}
	body.is-menu-open #global-header .nav-wrap button{
		right:var(--side);
		background:#000;
	}
	body.is-menu-open #global-header .nav-wrap button span{
		transform:rotate(315deg);
	}
	body.is-menu-open #global-header .nav-wrap button:before{
		transform:rotate(45deg);
		top:0;
	}
	body.is-menu-open #global-header .nav-wrap button:after{
		transform:rotate(315deg);
		bottom:0;
		opacity:0;
	}
	body.is-menu-open #global-header #global-nav{
		right:0;
	}
	body.is-menu-open #global-header #global-nav > *{
		visibility:visible;
	}
	#global-header #global-nav ul{
		flex-direction:column;
		gap:0;
		width:100%;
		border-bottom:solid 1px #fff;
		padding: 0;
	}
	#global-header #global-nav ul li{
		border-top:solid 1px #fff;
	}
	#global-header #global-nav ul a{
		padding:1.5em 2em;
		display:flex;
		align-items:center;
		text-decoration:underline dotted 1px;
	}
	#global-header #global-nav .header-languages{
		width:100%;
		padding:1em;
		height:calc(var(--header) - 1px);
		display:flex;
		align-items:center;
		justify-content:center;
	}
	@media screen and (max-width:767px){
		#global-header #global-nav ul a:is(:hover,:focus){
			background:#000;
		}
	}

}
@media screen and (max-width:767px) {
	:root{
		--side:260px;
	}
}
/* contents
-------------------------------------------------------------------*/


/* footer
-------------------------------------------------------------------*/
#global-footer {
	position: relative;
	z-index: 4;
	background:var(--keycolor);
	color:#fff;
	padding: 3em 0 2em;
}
#global-footer .foot_top{
	filter: brightness(0) invert(1);
}
#global-footer ul{
	display:flex;
	justify-content:center;
	gap:2em;
	margin-block: 1.5em 2em;
	padding: 0;
}
#global-footer ul li{
	margin: 0;
}
#global-footer .foot_end a{
	display: block;
	width: fit-content;
	margin: 0 auto 1.5em;
}
#global-footer .foot_end a:is(:hover,:focus){
	opacity: 0.7;
}
#global-footer small{
	color:#a0a0a0;
	font-size: 0.875rem;
	letter-spacing: 0;
}
a.pagetop{
	position: absolute;
	bottom: -1.5em;
	right:1.5em;
	border:solid 1px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:600;
	flex-direction:column;
	gap:0.5em;
	transition:var(--hover);
	color:var(--fontcolor);
	background:#fff;
	z-index:15;
	width:3.5em;
	height:3.5em;
	border:solid 1px;
}
a.pagetop:before{
	content:"";
	display:block;
	width:0.5em;
	height:0.5em;
	border-top:solid 2px ;
	border-right:solid 2px ;
	transform:rotate(-45deg);
	transition:border-color .4s;
	margin-top:0.65em;
}
a.pagetop span{
	display:block;
}

a.pagetop:is(:hover,:focus){
	transform:translateY(-0.5em);
	text-decoration-color:transparent;
	background:#fff;
	color:var(--fontcolor);
}
a.pagetop:is(:hover,:focus):before{
	border-color:var(--fontcolor);
}

@media screen and (max-width:767px) {
	a.pagetop{
		right:2em;
	}
	#global-footer ul{
		flex-wrap:wrap;
		gap:1px;
		background:#ccc;
		margin-block:2em 1em;
	}
	#global-footer ul li{
		flex-basis:calc((100% - 1px) / 2);
		background:#fff;
	}
	#global-footer ul li a{
		text-decoration:underline dotted 1px;
		padding:0.75em;
		display:inline-flex;
		color:var(--keycolor);
	}
	#global-footer small{
		font-size:0.66rem;
	}

}

/* print
-------------------------------------------------------------------*/

@media print {
	html body {
		zoom:60%;
		height: auto !important;
        overflow: visible !important;
	}
	#global-header{
		position: absolute;
	}
	#page_top {
        display: block!important;
    }
}