/* all
-------------------------------------------------------------------*/
:root {
	--hover: background .4s, color .4s, border-color .4s, opacity .4s, text-decoration-color .4s, transform .4s, translate .4s, scale .4s, outline .4s, filter .4s, box-shadow .4s;
	--header: 80px;
	--container: 1200px;
	--inner: 2%;
	--fontcolor: #282828;
	--whitecolor: #fff;
	--keycolor: #e81935;
	--accent01: #ffd22f;
	--accent02: #32e9ff;
	--accent03: #312f3b;
	--accent04: #c8b16d;
	--accent05: #ffea00;
	--accent06: #35b2c1;
	--bgcolor:#e9e7de;
	--bgcolor02:#f9f8f4;
	--bgcolor03:#f2f1ec;
	--gold:linear-gradient(0deg, rgba(224, 186, 0, 1) 0%, rgba(198, 156, 0, 1) 25%, rgba(255, 241, 148, 1) 71%, rgba(253, 196, 0, 1) 100%);
	--reverse: invert(1);
	--white: brightness(0) invert(1);
}
:root img {
	transition: opacity .4s, filter .4s;
}
:root :is(ul, ol, li) {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}
body.home p {
	margin-bottom: 0;
	line-height: 1.4;
}
:root :is(h1, h2, h3, h4, h5) {
	margin-block: 0;
}
:root :is(a, button),
:root :is(a, button) :is(span, i),
:root :is(a, button)::before,
:root :is(a, button)::after,
:root :is(a, button) :is(span, i) ::before,
:root :is(a, button) :is(span, i)::after {
	transition: var(--hover);
}
html {
	background: var(--whitecolor);
	color: var(--fontcolor);
	font-family: "Murecho", 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;
}
body {
	width: 100%;
	font-size: 100%;
	text-align: center;
	min-width: var(--container);
	position: relative;
	z-index: 2;
	background: var(--whitecolor);
}
main {
	overflow: clip;
	width: 100%;
}
body img,
body svg {
	max-width: 100%;
	height: auto;
}
.sitewrap,
.widewrap {
	width: var(--container);
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
}
.widewrap {
	max-width: 1700px;
	padding-inline: 1em;
	width: auto;
}
*:has(> .sitewrap) {
	width: 100%;
	overflow-x: clip;
}
*:has(>wbr) {
	word-break: keep-all
}
@media screen and (max-width:1270px) {
	:root {
		--container: 100%;
	}
	body,
	.sitewrap {
		width: 100%;
		min-width: 0;
	}
	.sitewrap>* {
		padding-inline: var(--inner);
	}
}
@media screen and (max-width:767px) {
	:root {
		--inner: 15px;
		--header: 0px;
	}
	html {
		font-size: 14px;
	}
}
/* header
-------------------------------------------------------------------*/
header#fix_menu {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	transition: top .4s .2s, background .2s;
	padding-block: 1.5em;
}

header #site_ttl {
	margin-inline: 1.25em;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
	position: fixed;
	inset: 1.5em auto 0 0;
}
:is(header #site_ttl, #footer .copy_style) a {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.625em;
	text-decoration: none;
}
:is(header #site_ttl, #footer .copy_style) a img {
	display: block;
	max-width: inherit;
}
:is(header #site_ttl, #footer .copy_style) a span {
	font-size: 0.875em;
	font-weight: 900;
	color: var(--accent04);
	white-space: nowrap;
}
header .drop_menu {
	margin-left: auto;
	position: fixed;
	inset: 1.5em 0.5em auto auto;
}
header .drop_menu .contact-btn{
	width:308px;
}
header .drop_menu .contact-btn a{
	max-width:308px;
	min-height:3.5em;
	width: 100%;
	gap: 0em;
	padding-inline: 2.5em;
}

@media (any-hover: hover) {

}
@media screen and (max-width:1260px) {
	header#fix_menu {
		--slide: 360px;
		margin-block: 0.5em;
	}
	header .drop_menu .contact-btn{
		width:280px;
	}
	header .drop_menu .contact-btn a{
		min-height:3em;
		padding-inline: 2em;
		gap: 0.75em;
	}
	header .drop_menu .contact-btn a p{
		font-size:1.125rem;
	}
}
@media screen and (max-width:767px) {
	header#fix_menu {
		padding: 0.75em 1rem;
		align-items: center;
		height: auto;
		--slide: 100%;
		margin: 0;
		position: absolute;
		background: transparent;
	}
	header #site_ttl {
		position: relative;
		z-index: 100;
		text-align: left;
		padding: 0;
		margin: 0;
		top: 0;
	}
	header #site_ttl img {
		width: 89px;
	}
	header .drop_menu .contact-btn{
		width:calc(100% - 30px);
		position:fixed;
		inset:auto 0 0 0;
		margin:auto;
	}
	header .drop_menu .contact-btn .btn{
		right:0;
		box-shadow:none;
		min-width:0;
		margin: 0;
		max-width: 100%;
		border-radius: 25px 25px 0 0;
		border-bottom: none;
		gap: 1em;
		min-height: 3.2em;
	}
	header .drop_menu .contact-btn .btn .icon{
		width:25px;
	}
	header .drop_menu .contact-btn a p{
		width:fit-content;
	}
	header .drop_menu .contact-btn a p span{
		font-size:1.29rem;
		text-decoration:none;
	}
	header .drop_menu .contact-btn a p em:before,
	header .drop_menu .contact-btn a p em:after{
		width:8px;
		height:13px;
		inset:0 auto 0 -1.25em;
	}
	header .drop_menu .contact-btn a p em:after{
		inset:0 -0.75em 0 auto;
	}
	header .drop_menu .contact-btn .btn::before{
		right:2.5em;
	}
}
/* contents
-------------------------------------------------------------------*/
.section,
section {
	position: relative;
}
:root .txt-gold{
	background:var(--gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	padding-bottom: 0.125em;
}
:root .txt-keycolor{
	color: var(--keycolor);
}
:root #fixed-campain{
	position:fixed;
	inset: auto 1em 5em auto;
	z-index: 11;
}
:root #fixed-campain a{
	position:relative;
	z-index:1;
}
:root #fixed-campain input{
	position:absolute;
	width:0;
	height:0;
	opacity:0;
}
:root #fixed-campain label{
	width:30px;
	height:30px;
	background:var(--whitecolor);
	border:2px solid var(--fontcolor);
	position:absolute;
	inset: -0.75em -0.75em auto auto;
	transform:rotate(45deg);
	border-radius: 50%;
	z-index:5;
}
:root #fixed-campain label:before,
:root #fixed-campain label:after{
	content:"";
	width:0.875em;
	height:2px;
	background:var(--fontcolor);
	position:absolute;
	inset:0;
	margin:auto;
}
:root #fixed-campain label:after{
	transform:rotate(90deg);
}
:root #fixed-campain:has(input:checked){
	display:none;
}
:root #fixed-campain a img{
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

@media (any-hover: hover) {
	:root #fixed-campain a:hover{
		opacity:0.7;
	}
}
@media screen and (max-width:767px) {
	:root #fixed-campain label{
		display:none;
	}
	:root #fixed-campain{
		inset: auto 0em 10em auto;
	}
}



/* footer
-------------------------------------------------------------------*/
#footer {
	position: relative;
	z-index: 10;
	background: var(--accent03);
	padding-block: 1.167em;
	color: var(--whitecolor);
}
#footer p{
	margin-bottom:1em;
}
#footer small{
	font-size: 0.875rem;
	font-weight:500;
}
:root .pagetop {
	position: fixed;
	z-index: 10000;
	bottom: 0.5em;
	right: auto;
	right: 1em;
	width: 62px;
	padding-top: 1em;
	border-radius: 50%;
	aspect-ratio: 1/1;
	background: var(--keycolor);
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	color: var(--whitecolor);
	text-decoration: none;
	transition: background .4s;
	border:2px solid var(--fontcolor);
	box-shadow:3px 3px var(--fontcolor);
}
:root .pagetop::before{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    margin: auto;
    inset:0.5em 0 0;
    width: 16px;
    height: 16px;
    border-top: solid 2px var(--whitecolor);
    border-left: solid 2px var(--whitecolor);
    transform: rotate(45deg);
}
@media (any-hover: hover) {
	a.pagetop:hover {
		background: var(--whitecolor);
	}
	a.pagetop:hover:before {
		border-color: var(--keycolor);
	}
}
@media screen and (max-width:767px) {
	#footer {
		padding-block: 1em 5.75em;
	}
	:root .pagetop {
		bottom:4.5em;
		width:50px;
		border:2px solid var(--fontcolor);
		box-shadow:2px 2px var(--fontcolor);
	}
	:root .pagetop::before{
	    inset:0.25em 0 0;
	    width:12px;
	    height:12px;
	}
	#footer small{
		font-size: 0.71rem;
	}
	#footer p{
		font-size:0.86em;
		margin-bottom:0.75em;
	}
}