@charset "utf-8";

/* all
-------------------------------------------------------------------*/
:root{
	--f12:0.75rem;
	--f14:0.875rem;
	--f18:1.25rem;
	--f19:1.1875rem;
	--f20:1.25rem;
	--f22:1.375rem;
	--hover:background .4s,color .4s,border-color .4s,opacity .4s,text-decoration-color .4s,transform .4s,filter .4s,box-shadow .4s;
	--header:100px;
	--container:1200px;
	--wide:1680px;
	--inner:2%;
	--fontcolor:#282828;
	--keycolor:#cc000b;
}
:root img{
	transition:opacity .4s,filter .4s;
}
:root a{
	transition:var(--hover);
}
html {
	background: #FFFFFF;
	color: var(--fontcolor);
	font-size: 16px;
	line-height: 1.4;
	scroll-padding:var(--header);
	scroll-behavior:smooth;
	font-feature-settings:'palt';
}
body{
	font-family: "Zen Kaku Gothic Antique", sans-serif;
}
html .goti{
	font-family: "Zen Kaku Gothic Antique", sans-serif;
}
html .mincho{
	font-family: "Zen Old Mincho", serif;
}
html .lato{
	font-family: "lato", serif;
}
body {
	width: 100%;
	font-size: 100%;
	min-width: var(--container);
}
main {
	overflow: clip;
	width: 100%;
}
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 {
	width: var(--container);
	min-width: var(--container);
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
}
*: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:1300px) {
	body,
	.sitewrap {
		width: 100%;
		min-width: 0;
	}
	.sitewrap > * {
		padding-inline:var(--inner);
	}
}
@media screen and (max-width:767px) {
	:root{
		--inner:15px;
		--header: 80px;
	}
	html {
		font-size: 14px;
	}
}
/* header
-------------------------------------------------------------------*/
header#fix_menu {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	display:flex;
	align-items: flex-start;
	transition: top .4s .2s, background .2s;
	padding: 1.3em 1.5em;
	color:#fff;
	height:var(--header)
}
header#fix_menu:after{
	content:"";
	display:block;
	inset:0 0 auto;
	height:var(--header);
	background:transparent;
	position:absolute;
	z-index:-1;
	transition:background .2s ;
}
.active header#fix_menu{
	backdrop-filter: blur(1em);
}
.active header#fix_menu:after{
	background-color:rgba(255,255,255,0.5)
}

.active header#fix_menu a{
	color:var(--fontcolor);
}
.active header #site_ttl a img{
	filter: invert(1);
}
.active header #NavWrap .translate_wrap .gtranslate_wrapper a:first-child{
	border-color:var(--fontcolor);
}
header #site_ttl {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:0.5em;
}
header #site_ttl a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}
header #site_ttl a img{
	display:block;
	max-width:inherit;
}
header .drop_menu{
	margin-left:auto;
	display: flex;
	align-items: flex-start;
	gap: 1.75em;
	--width:270px;
	padding-right: calc(var(--width) + 1.5em);
}
header .drop_menu > a{
	margin-top:0.5em;
}
.active header .drop_menu > a{
	filter: invert(1);
}
header #NavWrap{
	display:flex;
	flex-wrap:wrap;
	align-items: flex-end;
	flex-direction: column;
	gap: 0.75em 1em;
}
header .ac_hover{
	cursor:pointer;
	/* margin-top:2em; */
	border-radius:2em;
	transition:border-radius .2s;
	text-align:left;
	border-radius:5em;
	overflow:hidden;
	width:var(--width);
	background:var(--keycolor);
	position:fixed;
	right:1.5em;
	font-weight: 600;
	margin-bottom: 0;
}
header .ac_hover dt{
	display:flex;
	align-items:center;
	padding: 1em 1.5em 1em 1.75em;
	gap:1em;
	background:var(--keycolor);
	justify-content:space-between;
	margin-bottom: 0;
}
header .ac_hover dt i{
	width:1em;
	height:2px;
	background:#fff;
	position:relative;
	transition:transform .2s;
	margin: 0;
}
header .ac_hover dt i:after{
	content:"";
	display:block;
	width:1em;
	height:2px;
	background:#fff;
	transform:rotate(90deg);
	transition:transform .2s;
}
header .ac_hover dd{
	max-height:0;
	overflow:hidden;
	transition:max-height .2s,padding .2s;
	padding-block:0;
	width:var(--width);
}
header .ac_hover dd a{
	display:flex;
	padding:0.5em 1.75em;
	justify-content:space-between;
	align-items:center;
	gap:0.5em;
	white-space:nowrap;
}
header#fix_menu .ac_hover dd a{
	color: inherit;	
}
header .ac_hover dd a:after{
	content:"";
	display:block;
	width:0.5em;
	height:0.5em;
	border-top:solid 2px #fff;
	border-right:solid 2px #fff;
	transform:rotate(45deg);
}

header .ac_hover:hover{
	border-radius:0.25em;
}
header .ac_hover:hover dt i{
	transform:rotate(180deg)
}
header .ac_hover:hover dt i:after{
	transform:rotate(180deg)
}
header .ac_hover:hover dd{
	border-radius:0.25em;
	max-height:7em;
	padding-block:0em 1em;
}

header #NavWrap .translate_wrap{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap: 0.75em;
}
header #NavWrap .translate_wrap p{
	display:flex;
	align-items:center;
	gap:1em;
	line-height:1;
	font-weight:600;
	margin-bottom: 0;
}
header #NavWrap .translate_wrap p:nth-child(n+2){
	border-left:solid 1px #fff;
	padding-left: 0.75em;
	transition:border-color .4s;
}
header #NavWrap .translate_wrap .gtranslate_wrapper{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction: row-reverse;
	align-items:center;
	gap: 0.75em;
	font-weight: 600;
	line-height: 1;
}
header #NavWrap .translate_wrap .gtranslate_wrapper a:first-child{
	border-left:solid 1px #fff;
	padding-left: 0.75em;
	transition:border-color .4s;
}



@media (any-hover: hover) {
	header .drop_menu > a:hover{
		filter: invert(1);
	}
	.active	header .drop_menu > a:hover{
		filter: invert(0);
	}
}
header #NavWrap .translate_wrap dd{
	display:none;
}
header #NavWrap ul{
	flex-basis:100%;
	display:flex;
	justify-content:flex-end;
	margin-inline:auto 0;
	gap: 1.5em;
	font-weight:500;
	padding: 0;
	margin-bottom: 0;
}
header #NavWrap ul li{
	display:flex;
	align-items:center;
	justify-content:center;
	letter-spacing: 0.06em;
	font-weight: 600;
}
header #NavWrap ul li:first-child{
	display:none;
}

header #switch {
	position: absolute;
	width: 0;
	opacity: 0;
	z-index:-1;
}
header label[for="switch"] {
	display:none;
}
header #NavWrap ul li a{
	transition:var(--hover);
	padding: 0.25em 0.25em 0.25em;
}

@media (any-hover: hover) {
	header #NavWrap ul li a:hover{
		color:var(--keycolor);
		background:#fff;
	}
	header #NavWrap ul li a:hover:after{
		border-color:var(--fontcolor);
	}
}
@media screen and (max-width:1500px) {
	header#fix_menu{
		--slide:320px;
		padding-right:6em;
	}
	.active header#fix_menu{
	    backdrop-filter:none;
	}
	.active header#fix_menu a{
		color:inherit;
	}
	header#fix_menu:after{
		opacity:0;
	}
	header #NavWrap{
		position:fixed;
		top:0;
		bottom:0;
		right:0;
		justify-content:flex-start;
		align-items:flex-start;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: inherit;
		background:var(--fontcolor);
		z-index:50;
		gap: 0;
		width:var(--slide);
		right:calc(-1 * var(--slide));
		transition:right .2s;
		padding-block:2.5em 0;
	}
	header #NavWrap .scroll_wrap{
		width:100%;
		scrollbar-width:thin;
		scrollbar-color:#fff rgba(125,125,125,0.75);
	}
	header #NavWrap ul{
		display:block;
		gap: inherit;
		width:100%;
		margin-top:2em;
	}
	header label[for="switch"]{
		display:block;
		order:5;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		height:55px;
		width: 55px;
		aspect-ratio:1 / 1;
		border-radius:50%;
		background:var(--fontcolor);
		font-size:0.75rem;
		padding: 0.5em 0.25em;
		gap:0.25em;
		font-weight: 600;
		transition:right .2s,background .2s,border-color .2s;
		position:fixed;
		right:2em;
		z-index:100;
		border:solid 1px var(--fontcolor);
	}
	.home header label[for="switch"]{
		background:var(--keycolor);
		border:solid 1px var(--keycolor);
	}
	header label[for="switch"] b{
		display:block;
		margin-inline:auto;
		margin-top:4px;
		height: 8px;
		position:relative;
		width: 100%;
		transition:transform .2s;
	}
	header label[for="switch"] b:before,
	header label[for="switch"] b:after{
		width:2em;
		height:1px;
		content:"";
		display:block;
		background:#fff;
		position:absolute;
		inset:0;
		bottom:auto;
		margin:0 auto;
	}
	header label[for="switch"] b:after{
		top:auto;
		bottom:0;
	}
	header:has(#switch:checked) label[for="switch"]{
		background:var(--fontcolor);
		border-color:#fff;
	}
	header:has(#switch:checked) label[for="switch"] .open,
	header:has(#switch:not(:checked))  label[for="switch"] .close{
		display:none;
	}
	header:has(#switch:checked) label[for="switch"] b{
		transform:rotate(360deg);
	}
	header:has(#switch:checked) label[for="switch"] b:before{
		transform:rotate(20deg);
		inset:0;
        margin-top: 4px;
	}
	header:has(#switch:checked) label[for="switch"] b:after{
		transform:rotate(-20deg);
		inset:0;
        margin-top: 4px;
	}
	header:has(#switch:checked) #NavWrap{
		right:0;
	}
	header #NavWrap ul li{
		margin-inline:1em;
		display:block;
		border-top:solid 1px #666666;
	}
	header #NavWrap ul li:last-child{
		border-bottom:solid 1px #666666;
	}
	header #NavWrap ul li a{
		padding:1em 0.5em;
		display:flex;
		text-align:left;
		gap:0.5em;
		position:relative;
		align-items:center;
	}
	header #NavWrap ul li a:before,
	header #NavWrap ul li a:after{
		content: "";
		display: block;
		width: 0.35em;
		height: 0.35em;
		background: var(--keycolor);
		border-radius: 50%;
		top: 0.5em;
		left: 0;
		aspect-ratio:1 / 1;
	}
	header #NavWrap ul li a:after{
		border-radius:0;
		background:none;
		border-top:solid 1px #fff;
		border-right:solid 1px #fff;
		width:0.5em;
		height:0.5em;
		transform:rotate(45deg);
		margin-left:auto;
		transition:border-color .2s;
	}
	header #NavWrap ul li:first-child{
		display:block;
	}
	header #NavWrap .translate_wrap{
		margin: 0 auto;
	}
	header .ac_hover{
		right:6.5em;
		
	}
}

@media screen and (max-width:767px) {
	.active header#fix_menu{
		backdrop-filter:none;
	}
	.active header #site_ttl a img{
	    filter: invert(1);
	}
	header:has(#switch:checked) #site_ttl a img{
		filter:none;
	}
	.active header#fix_menu a{
		color:inherit;
	}
	header#fix_menu{
		padding: 1rem;
		align-items: center;
		height:var(--header);
		--slide: 100%;
	}
	header #site_ttl{
		text-align: left;
		padding:0;
		position:fixed;
		z-index:100;
	}
	header #site_ttl a img{
		height: 45px;
		width:auto;
	}
	header .drop_menu > :is(a,.ac_hover){
		display:none;
	}
	header #NavWrap{
		justify-content:flex-end;
	}
	header #NavWrap .translate_wrap{
		position:absolute;
		top:2.5em;
		right:6.0em;
		margin:0;
	}
	header #switch ~ label {
		top:1.25em;
		right:1em;
	}
	header #NavWrap .scroll_wrap{
		max-height:calc(100%);
		overflow-y:auto;
		width: 100%;
		margin-top:3em;
	}
	header #switch ~ label i{
		margin: 0;
	}
	header #NavWrap ul{
		margin-top:0;
	}
	header #NavWrap ul li:first-child{
		border-top:none;
	}
	header #NavWrap .submenu{
		display:flex;
		flex-direction:column;
		gap:1em;
		align-content:center;
		justify-content:center;
		padding:2em 1em;
	}
	header #NavWrap .submenu .flex{
		align-items:center;
		justify-content:space-between;
		margin-block:1em;
	}
	header #NavWrap .submenu a img{
		width:auto;
	}
	header #NavWrap .submenu .flex a:not(:has(img)){
		text-decoration:underline;
	}
}
/* contents
-------------------------------------------------------------------*/


/* footer
-------------------------------------------------------------------*/
#pageTop {
	position: fixed;
	z-index: 500;
	width: 100px;
	height:100px;
	bottom: 2.55%;
	right: 10%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:transform .4s;
}
footer.on #pageTop {
	position: absolute;
	bottom:10%;
	transition:bottom .4s,transform .4s;
}
#pageTop::after {
	position:absolute;
	z-index:-1;
	content: "";
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	background:url(../img/common/bg_topbtn.png) no-repeat top center / contain;
	width:100%;
	aspect-ratio:1 / 1;
	animation: rotating 10s linear infinite;
}
#pageTop img{
	margin-bottom:0.25em;
}
@keyframes rotating {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
#footer {
	position: relative;
	z-index: 10;
	background:var(--fontcolor);
	padding:5em 0 0;
	color:#fff;
}
#footer .sitewrap,
#footer .foot_links{
	display:flex;
	justify-content:space-between;
}
#footer address{
	margin-top: 2em;
	line-height:2;
}
#footer .foot_links{
	gap:3em;
	position:relative;
	z-index:2;
}
#footer .foot_links ul{
	margin: 0;
	padding: 0;
}
#footer .foot_links a,
#footer .foot_links p{
	display:block;
	width:fit-content;
	position:relative;
	font-weight:600;
}
#footer .foot_links :is(li, .foot_sub){
	margin-block: 0 2em;
	position:relative;
	padding-left:1.25em;
	display:block;
}
#footer .foot_links :is(li, .foot_sub):before{
	content:"";
	display:block;
	width:0.5em;
	height:0.5em;
	background:var(--keycolor);
	border-radius:50%;
	position:absolute;
	top:0.5em;
	left:0;
	transition:background .2s;
}
#footer .foot_links li p:not(.foot_sub){
	margin-bottom: 2em;
}
#footer .foot_links .foot_sub{
	margin-block:1.5em;
	font-size:var(--f14);
}
#footer .foot_links .foot_sub:before{
	background:#fff;
	height:2px;
	top:0.75em;
}
#footer .foot_links .foot_sub:after{
	content:"";
	display:block;
	width:0;
	height:1px;
	background:#fff;
	transition:width .2s;
	position:absolute;
	left:0;
	bottom:0;
}

#footer .foot_links > a{
	position:absolute;
	bottom:0;
	right:0;
}
#footer .foot_end{
	background:#f8f9f9;
	padding:1.5rem 1rem;
	font-size:1rem;
	color:var(--fontcolor);
	margin-top: 6em;
}
#footer .foot_end a{
	text-decoration-color:var(--fontcolor);
}
#footer .foot_end .sitewrap{
	display:flex;
	justify-content:space-between;
}
#footer .foot_end small{
	font-size:1rem;
}
a.pagetop{
	position:absolute;
	bottom:1em;
	right:1em;
	border:solid 1px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:2em;
	background:var(--fontcolor);
	font-weight:600;
	letter-spacing:0.03em;
	flex-direction:column;
	gap:1.0em;
	font-size:var(--f14);
	padding:1.75em 1em;
	transition:var(--hover);
	
}
a.pagetop:before{
	content:"";
	display:block;
	width:0.5em;
	height:0.5em;
	border-top:solid 2px #fff;
	border-right:solid 2px #fff;
	transform:rotate(-45deg);
	transition:border-color .4s;
}
a.pagetop span{
	display:block;
	writing-mode: vertical-rl;
}
.end_cta{
	display:none;
}
@media (any-hover: hover) {
	a.pagetop:hover{
		transform:translateY(-0.5em);
		text-decoration-color:transparent;
		background:#fff;
		color:var(--fontcolor);
	}
	a.pagetop:hover:before{
		border-color:var(--fontcolor);
	}
	#footer .foot_links li:has( > a:hover):before{
		background:#fff;
	}
	#footer .foot_links li a:hover{
		text-decoration-color:transparent;
	}
	#footer .foot_links li a:hover:after{
		width:100%;
	}

	#footer .foot_links > a:hover{
		filter: invert(1);
	}
	#footer .foot_end a:hover{
		text-decoration-color:transparent;
	}
}
@media screen and (max-width:1200px) {
	#footer .sitewrap{
		flex-direction:column;
		align-items:center;
		gap:3em;
	}
	#footer .sitewrap .site_data{
		display:flex;
		align-items: center;
		gap:2em;
	}
	#footer .sitewrap .site_data address{
		margin:0;
	}
	#footer .foot_links{
		gap:1.5em;
	}
}
@media screen and (max-width:767px) {
	#footer {
		padding-top:3em;
		padding-bottom:0;
		position: relative;
	}
	#footer .sitewrap{
		flex-direction:column;
		align-items:center;
		text-align:center;
		gap:2em;
	}
	#footer .sitewrap .site_data{
		flex-direction:column;
		gap:1.5em;
	}
	#footer .site_data img{
		width:116px;
	}
	#footer .foot_links ul{
		display:none;
	}
	#footer .foot_links > a{
		position:static;
	}
	#footer address{
		text-align:center;
		font-size:0.928rem;
	}
	#footer .foot_end{
		margin-block: 3em 5em;
	}
	#footer .foot_end .sitewrap{
		text-align:center;
		justify-content:center;
	}
	#footer .foot_end a{
		display:none;
	}
	a.pagetop{
		padding-block:1.5em;
		gap:0.5em;
		bottom:8em;
		right:2em;
	}
	a.pagetop:before{
		border-width:1px;
	}
	.end_cta{
		position:fixed;
		display:flex;
		bottom:0;
		width:100%;
	}
	.end_cta a{
		display:flex;
		flex-direction:column;
		position:relative;
		border-radius:0.5em 0.5em 0 0;
		flex:1;
		padding: 1.25em 1em 0.5em;
		font-size:1rem;
		border:solid 1px var(--keycolor);
		--bg:var(--keycolor);
		--font:#fff;
		background:var(--bg);
		color:var(--font);
	}
	.end_cta a:nth-child(2){
		--bg:#fff;
		--font:var(--fontcolor);
	}
	.end_cta a > span{
		display:block;
		border:solid 1px var(--keycolor);
		background:#fff;
		border-radius:2em;
		color:var(--fontcolor);
		font-weight:600;
		font-size:0.75rem;
		padding:0.25em 0.5em;
		position:absolute;
		top:-1em;
		left:1em;
		right:1em;
		text-align: center;
	}
	.end_cta .cta_btn{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:1em;
		font-weight:600;
		text-align:left;
	}
	.end_cta .cta_btn i{
		display:flex;
		width:1.25em;
		height:1.25em;
		background:#fff;
		border-radius:50%;
		position:relative;
		align-items:center;
		justify-content:center;
		margin-right: 0;
	}
	.end_cta .cta_btn i:after{
		content:"";
		display:block;
		width:0.25em;
		height:0.25em;
		border-top:solid 1px var(--bg);
		border-right:solid 1px var(--bg);
		transform:rotate(45deg);
		margin-right:1px;
	}
	.end_cta a:nth-child(2) i{
		background:var(--keycolor);
	}
}

/* print
-------------------------------------------------------------------*/
*html body {
	zoom:60%;
}