body {
	font-family: "Noto Sans JP", "Murecho", "Geologica", sans-serif;
    font-optical-sizing: auto;
	font-weight:500;
}
main {
	overflow-x: clip;
}
.medium {
	max-width:calc(var(--width-limit) - 200px);
    margin-inline:auto;
}
.narrow {
	max-width:calc(var(--width-limit) - 300px);
    margin-inline:auto;
}
.lead {
    font-size:1.1em;
    font-weight:600;
}

.cover img {
    object-fit: cover;
    width:100%;
    height:100%;
}

/* COLOR */
.bg-blue { background-color:var(--color-blue) !important; }
.bg-gray { background-color:var(--color-gray) !important; }
.bg-lightgray { background-color:var(--color-lightgray) !important; }
.bg-lightblue { background-color:var(--color-lightblue) !important; }
.bg-orange { background-color:var(--color-orange) !important; }
.color-blue:not(.stroke) { color:var(--color-blue) !important; }
.color-white:not(.stroke) { color:var(--color-white) !important; }
.color-gray:not(.stroke) { color:var(--color-gray) !important; }
.color-darkgray:not(.stroke) { color:var(--color-darkgray) !important; }
.color-lightblue:not(.stroke) { color:var(--color-lightblue) !important; }
.color-orange:not(.stroke) { color:var(--color-orange) !important; }

main :is(p, ul, ol) {
	font-size:1.1em;
}

[lang="en"] {
    font-family: "Geologica", sans-serif;
}

/* Hgroup */
hgroup {
    container-type: inline-size;
    color:var(--color-blue);
}
hgroup.center {
    text-align:center;
}
hgroup h1 {
    font-size:6em;
    font-family:"Geologica", sans-serif;
    line-height:1;
    letter-spacing: 0.05em;
}
hgroup.min h1 {
    font-size:2.4em;
}
hgroup h1.stroke {
    font-size:clamp(4em, 12cqw, 7em);
}
hgroup span[lang="ja"] {
    font-size:1.5em;
    font-weight:600;
    padding-top:30px;
    margin-top:16px;
    display:inline-block;
    line-height:1;
    letter-spacing: 0.1em;
}
hgroup span[lang="ja"]::before {
    content:'';
    width:3em;
    height:0.7em;
    background:var(--color-blue);
    position:absolute;
    top:0;
    left:0;
}
hgroup.color-white span[lang="ja"]::before {
    background:var(--color-white);
}
hgroup.center span[lang="ja"]::before {
    left:50%;
    translate: -50% 0;
}
hgroup > div {
    margin:0;
}

.page-header {
    padding-bottom:calc(var(--section-space) / 2);
}
.page-header + * {
    margin-top:0;
}


/* Default tags */
main h3 {
	text-align:center;
	font-size:1.4em;
}


/* Section */
main > section {
	margin-top:0;
}
main > section:first-of-type {
    padding-top:calc(var(--section-space) / 2);
}
main .half-space {
    padding-block:calc(var(--section-space) / 2);
}

main .stroke {
    -webkit-text-stroke: 1px var(--color-white);
    text-stroke: 1px var(--color-white);
    color:transparent;
}
main .stroke.color-blue {
    -webkit-text-stroke: 1px var(--color-blue);
    text-stroke: 1px var(--color-blue);
}


/* Buttons */
.buttons {
    letter-spacing: 0;
	display:flex;
	gap:var(--gap);
	align-items: center;
	justify-content:center;
}
main .buttons .button {
    min-width:300px;
    max-width:100%;
}
.buttons.text-center {
	justify-content:center;
}
.buttons > div ,
.buttons > .button {
	margin-top:0 !important;
}
.button {
	border-radius:0;
	letter-spacing:0;
	padding:calc(var(--padding) * 0.5) calc(var(--padding) - 5px) calc(var(--padding) * 0.5) var(--padding);
	margin:auto 0;
	display:flex;
	align-items: center;
	justify-content:space-between;
	gap:10px;
    border:solid 1px var(--color-blue);
    background:none;
    background-image:linear-gradient(to right, var(--color-blue-clear) 0, var(--color-blue-clear) 50%, var(--color-blue) 50% );
    background-size:200% 110%;
    background-position: 100%;
}
.button::after {
    content:'';
    width:1.4em;
    aspect-ratio: 1;
    background:url(../_img/icon/arrow_white.svg) right center / contain no-repeat;
    transition: var(--transition);
    translate: -5px 0;
}
main section .button {
    background-image:linear-gradient(to right, var(--color-orange) 0, var(--color-orange) 50%, var(--color-blue) 50% );
    border:none !important;
    font-size:1.2em;
}

.button.white-button {
    background-image:linear-gradient(to right, var(--color-orange) 0, var(--color-orange) 50%, var(--color-white) 50% );
    color:var(--color-blue);
    border:solid 1px var(--color-white);
}
.button.white-button::after {
    background:url(../_img/icon/arrow_blue.svg) right center / contain no-repeat;
}
.button.orange-button {
    background-image:linear-gradient(to right, var(--color-orange-clear) 0, var(--color-orange-clear) 50%, var(--color-orange) 50% );
    border:solid 1px var(--color-orange);
}

.button:hover {
	top:0;
	left:0;
	box-shadow:none;
    background-position: 0;
    color:var(--color-black);
}
.button:hover::after {
    background:url(../_img/icon/arrow_black.svg) right center / contain no-repeat;
}
main section .button:hover ,
.button.white-button:hover {
    color:var(--color-white);
}
main section .button:hover::after ,
.button.white-button:hover::after {
    background:url(../_img/icon/arrow_white.svg) right center / contain no-repeat;
}
.button:not(.outer-link):hover::after {
    translate: 0 0;
}
.button.outer-link::after {
    background:url(../_img/icon/new_tab_white.svg) right center / contain no-repeat;
}
.button.white-button.outer-link::after {
    background:url(../_img/icon/new_tab_blue.svg) right center / contain no-repeat;
}
.button.outer-link:hover::after {
    background:url(../_img/icon/new_tab_white.svg) right center / contain no-repeat;
}

.button.trans-button {
    border:solid 1px var(--color-blue) !important;
    padding:10px 15px;
    width:240px;
    background:transparent;
    color:var(--color-blue);
    font-size:1.1em;
    line-height:1.2;
}
.button.trans-button::after {
    content:'';
    display:block;
    width:16px;
    height:16px;
    background:url(../_img/icon/arrow_ctg_blue.svg) center / contain no-repeat;
    translate: 0 0;
    transition:var(--transition);
}
.button.trans-button.white-button {
    border:solid 1px var(--color-white) !important;
    color:var(--color-white);
}
.button.trans-button.white-button::after {
    background:url(../_img/icon/arrow_ctg_white.svg) center / contain no-repeat;
}
.button.trans-button:hover {
    background:var(--color-blue);
    color:var(--color-white);
}
.button.trans-button.white-button:hover {
    background:var(--color-white);
    color:var(--color-blue);
}
.button.trans-button:hover::after {
    background:url(../_img/icon/arrow_ctg_white.svg) center / contain no-repeat;
}
.button.trans-button.white-button:hover::after {
    background:url(../_img/icon/arrow_ctg_blue.svg) center / contain no-repeat;
}

main .button:is(.back, .Back) {
    background:var(--color-lightgray);
    color:var(--color-black);
}
main .button:is(.back, .Back) i {
	left:0;
	color:var(--color-black);
	transition: var(--transition);
}
main .button:is(.back, .Back):hover {
	background:var(--color-lightgray);
    color:var(--color-black);
}
main .button:is(.back, .Back):hover i {
	color:var(--color-black);
	left:-4px;
}


/* Arrow link */
a.arrow-link {
    display:inline-flex;
    align-items: center;
    justify-content: space-between;
    gap:20px;
    color:var(--color-blue);
    padding:5px 0;
    border-bottom:solid 1px var(--color-blue);
}
a.arrow-link::after {
    content:'';
    width:1em;
    aspect-ratio: 1;
    background:url(../_img/icon/arrow_blue.svg) right center / contain no-repeat;
    transition: var(--transition);
    translate: -5px 0;
}
a.arrow-link.orange {
    color:var(--color-orange);
    border-bottom:solid 1px var(--color-orange);
}
a.arrow-link.orange::after {
    background:url(../_img/icon/arrow_orange.svg) right center / contain no-repeat;
}
a.arrow-link.black {
    color:var(--color-black);
    border-bottom:solid 1px var(--color-black);
}
a.arrow-link.black::after {
    background:url(../_img/icon/arrow_black.svg) right center / contain no-repeat;
}
a.arrow-link:hover::after {
    translate: 0 0;
}

a.arrow-link.outer-link::after {
    background:url(../_img/icon/new_tab_blue.svg) right center / contain no-repeat;
    translate: 0 0;
}



/* Page Header */
#page-header {
	background:var(--color-lightgray);
	padding:var(--section-space) var(--padding);
	text-align:center;
	font-size:2.6em;
	letter-spacing:4px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight:bold;
}
:is(#about) #page-header {
	background:var(--color-white);
}
#page-header small {
	font-size:0.4em;
	font-size: clamp(12px,1.3vw,18px);
	color:var(--color-gray);
	display:block;
	font-family: "Poppins", sans-serif;
	font-weight:600;
	letter-spacing:0;
}


/* FAQ */
.faq > div {
	border-radius:var(--radius);
	border:solid 1px var(--color-black);
	transition: var(--transition);
	overflow:hidden;
}
.faq > div + div {
	margin-top:20px;
}
.faq > div dt {
	font-size:1.2em;
	padding:var(--padding);
	padding-right:80px;
	margin-top:0;
	background:var(--color-white);
	cursor: pointer;
}
.faq > div dt span {
	padding-right:5px;
	font-size:1.2em;
}
.faq > div dd {
	font-size:1.1em;
	font-weight:500;
	padding:var(--padding);
	background:var(--color-lightgreen);
	display:none;
}
.faq > div dd span {
	color:var(--color-green);
	padding-right:5px;
	font-size:1.4em;
}
.faq dt::after {
	content:'';
	width:10px;
	height:20px;
	background:var(--color-green);
	clip-path: polygon(0 0, 0 3px, calc(100% - 3px) 50%, 0 calc(100% - 3px), 0 100%, 100% 50%);
	position:absolute;
	top:50%;
	right:var(--padding);
	translate: 0 -50%;
	font-weight:normal;
	rotate: 90deg;
	transition:var(--transition);
}
.faq .open dt::after {
	rotate: -90deg;
}


/*  Paging */
.paging {
	padding:0;
	margin:40px 0 0 0;
	display: flex;
	gap: 5px;
	justify-content: center;
    font-family: "Nunito Sans", sans-serif;
}
.paging > :not(li) ,
.paging > li > * {
	width: 50px;
    height: 50px;
	aspect-ratio: 1;
	padding: 0;
	color: var(--color-white);
	background: var(--color-gray);
	transition: 0.2s;
    border-radius:100%;
	display: flex;
	align-items: center;
	justify-content: center;
    font-weight:bold;
}
.paging a:hover {
	filter:brightness(0.1);
}
.paging [aria-current="page"] {
	background: var(--color-blue);
	font-weight: bold;
}
.paging > li {
	margin: 0;
	padding: 0;
	list-style: none;
}


dialog iframe {
    min-height:auto;
    border-radius:4px;
    border:solid 1px var(--color-gray);
}


.alert {
	color:var(--color-red);
}


@media (max-width : 780px) {
	.tab-menu {
		display:none;
	}

	#page-header{
		font-size: clamp(1.6em,5vw,2.4em);
		padding:40px 10px;
	}

	main h2{
		font-size: clamp(1.8em,5vw,2.2em);
	}

	main h3{
		font-size: clamp(1.2em,3.6vw,1.4em);
	}

	main dl.table > div{
		flex-direction: column;
		gap:0;
	}
}
@media (max-width : 520px) {
    hgroup h1 {
        font-size:4.5em;
    }

    main .half-space {
        padding-block: calc(var(--section-space) / 1.4);
    }

	.buttons {
		flex-direction: column;
		gap:20px;
	}

    main .buttons .button {
        min-width:auto;
        max-width:100%;
    }
}