@charset "UTF-8";
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}




/*====================================
 * Base
=====================================*/
:root {
	--colorBg: #FFF;
	--colorBgSub: #F9F9F9;
	--colorMain: #000;
	--colorText: #121212;
	--colorLink: #0055A0;
	--colorCaution: #ED0C00;

	--fz10: calc(10 / 16 * 1rem);
	--fz11: calc(11 / 16 * 1rem);
	--fz12: calc(12 / 16 * 1rem);
	--fz14: calc(14 / 16 * 1rem);
	--fz16: 1rem;
	--fz18: calc(18 / 16 * 1rem);
	--fz20: calc(20 / 16 * 1rem);
	--fz24: calc(24 / 16 * 1rem);
	--fz32: calc(32 / 16 * 1rem);
	--fz40: calc(40 / 16 * 1rem);
	--fz48: calc(48 / 16 * 1rem);
	--fz64: calc(64 / 16 * 1rem);
	--fz80: calc(80 / 16 * 1rem);
}

html {
	overflow-y: scroll;
	/* Modale表示時のガタつき対策 */
}

body {
	font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-feature-settings: 'palt' 1;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.04em;
	color: var(--colorText);
	background-color: var(--colorBg);
}

main {
	position: relative;
	line-height: 1.75;
}

main :where(a:link),
main :where(a:visited),
main :where(a:active) {
	text-decoration: underline;
    text-underline-offset: 0.3em;
	/* text-decoration-color: rgba(0, 0, 0, 0.76); */
	color: var(--colorLink);
}

/* .frame :where(a:link),
.frame :where(a:visited),
.frame :where(a:active) {
	text-decoration: underline;
	text-decoration-color: rgba(14, 53, 144, 0.76);
	color: var(--colorLink);
} */

@media (hover: hover) {
	a:hover {
		opacity: 0.8;
	}
}

b a,
strong a {
	font-weight: bold !important;
}

img {
	max-width: 100%;
	height: auto;
}

iframe {
	border: none;
}

hr {
	color: #ccc;
}


/*====================================
Button
=====================================*/
a.btn-normal {
	/* border: 1px solid #fff; */
	background-color: #fff;
	color: var(--colorLink);
	text-decoration: none;
	border-radius: 50vw;
	margin: 8px 0;
	padding: 1em 0;
	display: block;
	text-align: center;
	font-weight: bold;
	line-height: 1.3;
	width: min(90%, 600px);
	margin: 0 auto;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04), -4px 4px 4px rgba(0, 0, 0, 0.04), 4px -4px 4px rgba(0, 0, 0, 0.04), -4px -4px 4px rgba(0, 0, 0, 0.04);
}

/* @media (hover: hover) {
	a.btn-normal:hover {
		background: linear-gradient(to bottom, #fff 38%, #e0e0e0 100%);
		opacity: 1;
	}
} */

a.btn-pink,
p.btn-pink.nolink {
	display: block;
	border-radius: 100vw;
	overflow: hidden;
	padding: 1.5em 1em;
	font-size: min(4.2vw, 16px);
	font-weight: bold;
	text-decoration: none;
	width: min(90%, 400px);
	margin: 0 auto;
	text-align: center;
	color: #fff;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04),
	-4px 4px 4px rgba(0, 0, 0, 0.04),
	4px -4px 4px rgba(0, 0, 0, 0.04),
	-4px -4px 4px rgba(0, 0, 0, 0.04);
}

p.btn-pink.nolink {
	box-shadow: none;
}

a.btn-pink {
	background-color: var(--colorLink);
	transition: all .2s ease;
}

a.btn-pink:not([href]) {
	cursor: default;
	pointer-events: none;
	/* background-color: #bfbfbf; */
}

a.btn-pink.end,
p.btn-pink.nolink {
	background-color: #bfbfbf;
}

a.btn-frame {
	display: block;
	border-radius: 100px;
	overflow: hidden;
	background-color: transparent;
	padding: 1em;
	font-size: min(6.4vw, 24px);
	font-weight: bold;
	width: min(90%, 600px);
	margin: 0 auto;
	border: solid 1px var(--colorText);
	color: var(--colorText);
	text-align: center;
	transition: all .2s ease;
}

a.btn-s {
	width: min(90%, 600px);
	margin: 0 auto;
	font-size: min(4.27vw, 16px);
}

p.btn-s.nolink {
	color: #121212;
	display: block;
	border-radius: 100px;
	overflow: hidden;
	background-color: #bfbfbf;
	padding: 1em;
	font-size: min(4.27vw, 16px);
	font-weight: bold;
	width: min(90%, 600px);
	margin: 0 auto;
	text-align: center;
	transition: all .2s ease;
}


/*====================================
HEADER Standard
=====================================*/
header.standard {
	z-index: 100;
	position: sticky;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	width: 100%;
}

header.standard .titlebox {
	padding: 16px 16px 8px 16px;
	display: flex;
	justify-content: space-between;
}

header.standard .titlebox h1 {
	flex: 1;
	font-size: var(--fz12);
	color: #fff;
	line-height: 1.3;
	word-break: auto-phrase;
	font-weight: 500;
}

header.standard .titlebox .headlogo {
	width: 50px;
}

header.standard .titlebox .headlogo a {
	display: block;
}

header.standard .titlebox .headlogo img {
	width: 100%;
}

@media screen and (min-width: 600px) {
	header.standard .titlebox {
		padding: 8px 16px 8px 16px;
	}

	header.standard .titlebox h1 {
		font-size: var(--fz14);
	}
}

@media screen and (min-width: 960px) {
	header.standard .titlebox .headlogo {
		width: 50px;
	}

	header.standard .titlebox h1 {
		font-size: var(--fz18);
	}
}

header nav.pagenav ul.nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 0 8px 0;
}

header nav.pagenav ul.nav li {
	margin: 4px 4px 4px;
}

@media screen and (min-width: 960px) {
	header nav.pagenav ul.nav {
		padding: 0 0 8px 0;
	}

	header nav.pagenav ul.nav li {
		margin: 8px 8px 8px 8px;
	}
}

header nav.pagenav ul.nav li a {
	display: block;
	font-size: var(--fz16);
	font-weight: bold;
	line-height: 1;
	color: #fff;
	transition: 0.2s;
	padding: 2px 4px;
}

@media screen and (min-width: 480px) {
	header nav.pagenav ul.nav li a {
		font-size: var(--fz16);
		padding: 2px 4px;
	}
}

@media screen and (min-width: 960px) {
	header nav.pagenav ul.nav li a {
		font-size: var(--fz16);
	}
}

@media (hover: hover) {
	header nav.pagenav ul.nav li a:hover {
		opacity: 0.8;
		transition: 0.2s;
	}
}

/* header nav.pagenav ul.nav li:last-child {
	margin-left: 8px;
}

@media screen and (min-width: 960px) {
	header nav.pagenav ul.nav li:last-child {
		margin-left: 16px;
	}
}

header nav.pagenav ul.nav li:last-child a {
	background: var(--colorLink);
	padding: 2px 8px;
	border-radius: 3px;
	transition: 0.2s;
	border-radius: 100vw;
}

@media screen and (min-width: 960px) {
	header nav.pagenav ul.nav li:last-child a {
		padding: 2px 12px;
	}

	header nav.pagenav ul.nav li:last-child a:hover {
		transition: 0.2s;
	}
} */


/*====================================
HEADER Drawer
=====================================*/
.drawer-navbar--fixed {
	position: sticky;
	border-bottom: none;
	height: auto;
	background-color: transparent;
	top: 0;
	z-index: 100;
}

.drawer-container {
	max-width: 100%;
	background-color: rgba(0, 0, 0, 0.93);
	backdrop-filter: blur(10px);
}

.drawer-open .drawer-container {
	backdrop-filter: none;
}

.drawer-close .drawer-container {
	background-color: rgba(0, 0, 0, 0.93);
	color: #FFF;
}

.drawer-navbar .drawer-navbar-header {
	background-color: transparent;
	float: none;
	border-bottom: none;
	padding: 0 0;
	height: auto;

}

.drawer-navbar .titlebox {
	padding: 16px 50px 16px 16px;
	/* display: grid;
	grid-template-columns: 1fr 60px; */
	min-height: 60px;
	display: flex;
    justify-content: center;
    flex-direction: column;
}

.drawer-navbar .titlebox h1 {
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
	letter-spacing: normal;
	font-size: var(--fz20);
	color: #fff;
	line-height: 1.3;
	padding: 0 10px 0 0;
	text-align: left;
}

.drawer-navbar .titlebox h1 .large {
	font-size: 1.3em;
}

.drawer-navbar .titlebox h1 .small {
	font-size: 0.8em;
}

.drawer-navbar .titlebox .headlogo {
	width: 50px;
}

.drawer-navbar .titlebox .headlogo a {
	display: block;
}

.drawer-navbar .titlebox .headlogo img {
	width: 100%;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
	background-color: #FFF;
}

.drawer-nav {
	background-color: transparent;
}

.drawer-navbar .drawer-nav {
	height: auto;
}

@media screen and (max-width: 767px) {
	.drawer-open {
		overflow: clip !important;
	}
}

.drawer-open .drawer-navbar .drawer-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	color: #FFF;
}

.drawer-navbar .drawer-menu {
	display: flex;
	justify-content: center;
}

.drawer-open .drawer-navbar .drawer-menu {
	flex-direction: column;
	align-items: center;
	padding-bottom: 0;
}

.drawer-navbar .drawer-menu li {
	float: none;
}

.drawer-navbar .drawer-menu li .drawer-menu-item {
	color: #FFF;
}

@media (hover: hover) {
	.drawer-navbar .drawer-menu li .drawer-menu-item:hover {
		text-decoration: none;
	}
}

.drawer-open .drawer-navbar .drawer-menu li {
	margin-bottom: 1.5em;
}

.drawer-open .drawer-navbar .drawer-menu li a {
	font-size: var(--fz20);
}

@media screen and (min-width: 768px) {
	.drawer-container {
		backdrop-filter: blur(10px);
	}

	.drawer-navbar .titlebox {
		min-height: auto;
		padding: 8px 16px;
		/* grid-template-columns: 1fr 50px; */
	}

	.drawer-navbar .titlebox .headlogo {
		margin-right: 0;
	}

	.drawer-toggle {
		display: none;
	}
}


/*====================================
Modal
=====================================*/
.modal-open-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	aspect-ratio: 1 / 1;
	border: solid 3px #FFF;
	border-radius: 100vw;
	position: relative;
	transition: all 0.2s ease-in-out;
}

.modal-open-icon:after,
.modal-open-icon:before {
	display: block;
	content: " ";
	position: absolute;
	top: auto;
	left: auto;
	width: 3px;
	height: 14px;
	border-radius: 4px;
	background: #fff;
}

.modal-open-icon:after {
	transform: rotate(90deg);
}

.contents-wrap .news-list.add-modal .modal-open:hover {
	opacity: 1.0;
}

.modal-open:hover .modal-open-icon {
	transform: rotate(90deg);
	transition: all 0.2s ease-in-out;
}

.modal-window {
	display: none;
}

.modaal-content-container {
	padding: 16px;
	max-height: 70vh;
	overflow-y: auto;
	line-height: 1.5;
}

.modaal-wrapper .modaal-close {
	border: solid 3px #FFF;
	position: absolute;
	right: 0px;
	top: -60px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
}

.modaal-wrapper .modaal-close:hover {
	background: 0;
	transform: rotate(90deg);
}

.modaal-close:after,
.modaal-close:before {
	top: auto;
	left: auto;
	width: 3px;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
	background: #FFF;
}

.modaal-overlay {
	backdrop-filter: blur(5px);
}

.modaal-gallery-item img {
	max-height: 70vh;
}

@media screen and (min-width: 600px) {
	.modal-open-icon {
		width: 36px;
	}

	.modal-open-icon:after,
	.modal-open-icon:before {
		height: 18px;
	}

}

@media screen and (min-width: 600px) {
	.modaal-content-container {
		padding: 32px;
	}
}


/*====================================
Contents
=====================================*/
.contents-boby {
	padding: 0 0 40px 0;
	/* max-width: 960px; */
	margin: 0 auto;
	word-break: break-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.contents-boby #info-body {
	container-type: inline-size;
	container-name: col-l;
}

.section-wrap {
	padding-top: 40px;
	overflow: hidden;
}

.bg-color {
	background-color: var(--colorBgSub);
}

.section-wrap.frame {
	color: #323232;
	box-shadow: 8px 8px 4px rgba(14, 53, 144, 0.13);
	margin-top: 40px;
	margin-bottom: 40px;
}

.section-wrap.frame.frame-r {
	background-color: #fff;
	margin-left: calc(16 / 375 * 100%);
	/* padding-right: 16px; */
	border-radius: 10px 0 0 10px;
}

.section-wrap.frame.frame-l {
	background-color: #fff;
	margin-right: calc(16 / 375 * 100%);
	border-radius: 0 10px 10px 0;
}

.section-wrap.section-wrap-bg {
	background-color: rgba(255, 255, 255, 0.13);
}

#info-body section:last-child {
	margin: 0 0 32px 0;
}

.contents-heading {
	background-color: #F5F5F5;
	margin-bottom: 40px;
}

.contents-wrap-title {
	display: block;
	color: var(--colorMain);
	font-size: var(--fz24);
	font-weight: bold;
	padding: 0 calc(16 / 375 * 100%);
	max-width: 960px;
	margin: 0 auto 16px auto;
	letter-spacing: normal;
	line-height: 1.2;
}

.section-wrap:has(.contents-heading) .contents-wrap-title {
	margin-bottom: 0;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.section-wrap:has(.contents-heading) {
	padding-top: 0;
}

.section-wrap.frame .contents-wrap-title {
	color: var(--colorMain);
	/* text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.07); */
}

.contents-inner {
	padding: 0 calc(16 / 375 * 100%);
	max-width: 960px;
	margin: 0 auto 40px;
	container-type: inline-size;
	container-name: contents-inner;
}

#assist .assist-title {
	font-weight: bold;
	border-bottom: 2px solid rgba(255, 255, 255, 0.26);
	margin-bottom: 16px;
	padding-bottom: 8px;
}

@media screen and (min-width: 768px) {
	.contents-heading {
		margin-bottom: 80px;
	}

	.contents-wrap-title {
		font-size: var(--fz32);
		margin-bottom: 24px;
		padding: 0 calc(40 / 768 * 100%);
	}

	/* .section-wrap.frame .contents-wrap-title {
		text-shadow: 8px 8px 0 rgba(0, 0, 0, 0.07);
	} */

	.contents-inner {
		padding: 0 calc(40 / 768 * 100%);
	}

}

@media screen and (min-width: 960px) {
	.section-wrap {
		padding-top: 40px;
	}

	.section-wrap.frame {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	.section-wrap.frame.frame-r {
		margin-left: calc(80 / 768 * 100%);
		padding-right: calc(80 / 768 * 100%);
		border-radius: 20px 0 0 20px;
	}

	.section-wrap.frame.frame-l {
		margin-right: calc(80 / 768 * 100%);
		padding-left: calc(80 / 768 * 100%);
		border-radius: 0 20px 20px 0;
	}

	.contents-wrap-title {
		font-size: var(--fz40);
		letter-spacing: normal;
		margin-bottom: 24px;
		padding: 0 80px;
	}

	.contents-boby {
		/* display: flex; */
		padding: 0 0 80px 0;
	}

	/* .contents-boby #info-body {
		flex: 1;
		padding: 0 0 0 16px;
	}

	.contents-boby #assist {
		width: 35%;
		padding: 0 16px 0 24px;
	} */

	.contents-inner {
		padding: 0 80px;
		margin: 0 auto 80px;
	}
}



.contents-heading .breadcrumb {
	padding: 8px calc(16 / 375 * 100%) 0;
}

.contents-heading .breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	font-size: var(--fz12);
}

.contents-heading .breadcrumb ul li {
	margin-right: 4px;
	line-height: 1.5em;
}

.contents-heading .breadcrumb ul li a:link,
.contents-heading .breadcrumb ul li a:visited,
.contents-heading .breadcrumb ul li a:active {
	text-decoration: underline;
	text-underline-offset: 0.3em;
    text-decoration-color: rgba(255, 255, 255, 0.76);
	color: var(--colorLink);
}

@media (hover: hover) {
	.contents-heading .breadcrumb ul li a:hover {
		opacity: 0.8;
	}
}

.contents-heading .breadcrumb ul li:after {
	content: ">";
	padding-left: 4px;
}

.contents-heading .breadcrumb ul li:last-child:after {
	content: "";
}

@media screen and (min-width: 768px) {
	.contents-heading .breadcrumb {
		padding: 8px calc(40 / 768 * 100%) 0;
	}
}

@media screen and (min-width: 960px) {
	.contents-heading .breadcrumb {
		max-width: 960px;
		margin: 0 auto;
		padding: 8px 80px 0;
	}
}

/*====================================
Footer
=====================================*/
footer {
	margin-top: 0px;
}

footer .breadcrumb {
	padding: 16px;
}

footer .breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	font-size: var(--fz12);
}

footer .breadcrumb ul li {
	margin-right: 4px;
	line-height: 1.5em;
}

footer .breadcrumb ul li a:link,
footer .breadcrumb ul li a:visited,
footer .breadcrumb ul li a:active {
	text-decoration: underline;
	text-underline-offset: 0.3em;
    text-decoration-color: rgba(255, 255, 255, 0.76);
	color: var(--colorLink);
}

@media (hover: hover) {
	footer .breadcrumb ul li a:hover {
		opacity: 0.8;
	}
}

footer .breadcrumb ul li:after {
	content: ">";
	padding-left: 4px;
}

footer .breadcrumb ul li:last-child:after {
	content: "";
}

footer .ancertop {
	display: block;
	background-color: #666;
	color: #fff;
	text-align: center;
	padding: 16px;
}

footer div.copyright {
	background-color: #000;
	color: #fff;
	padding: 16px;
}

footer div.copyright a {
	width: 100px;
	display: block;
	margin: 16px auto 32px auto;
}

footer div.copyright p {
	font-size: var(--fz12);
	line-height: 1.5;
}

@media screen and (min-width: 960px) {
	footer {
		margin-top: 32px;
	}

	footer div.copyright p {
		text-align: center;
	}
}

footer div.copyright p.copyright {
	text-align: center;
	font-size: var(--fz11);
}


/*====================================
KV
=====================================*/
/* キービジュアル */
.kv-wrap {
	width: 100%;
	text-align: center;
	background-color: #fff;
}

@media screen and (min-width: 600px) {
	.kv-wrap .kv {
		max-width: 1600px;
		margin: 0 auto;
	}
}

/* キービジュアル スライダー */
.kv-slide-wrap {
	position: relative;
}

.kv-slide .swiper-slide {
	overflow: hidden;
}

.kv-slide .swiper-slide img {
	height: auto;
	width: 100%;
	aspect-ratio: 1920 / 960;
	object-fit: contain;
}

.kv-slide-wrap .swiper-pagination {
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	width: min(100%, 600px);
}

.kv-slide-wrap .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	flex: 1;
	height: 4px;
	border-radius: 0;
	display: block;
	background: #FFF;
	max-width: 120px;
}

.kv-wrap .kv-slide-wrap~.event-summary dt {
	padding-top: 8px;
	word-break: auto-phrase;
}

.kv-wrap .event-summary {
	padding: 16px 16px;
	background-color: var(--colorMain);
	color: #fff;
}

.kv-wrap .event-summary .title,
.kv-wrap .event-summary dt {
	font-size: clamp(20px, 6.4vw, 40px);
	margin-bottom: 4px;
	font-weight: bold;
	line-height: 1.5;
}

.kv-wrap .event-summary dt .sub-title {
	font-size: clamp(12px, 4.2vw, 20px);
	line-height: 1.5;
}

.kv-wrap .event-summary dd.date {
	font-size: clamp(14px, 5.3vw, 24px);
	font-weight: 500;
	margin-bottom: 8px;
}

.kv-wrap .event-summary dd.place {
	font-size: clamp(12px, 3.7vw, 16px);
}

@media screen and (min-width: 600px) {
	.kv-slide .swiper-slide img {
		aspect-ratio: 1920 / 960;
	}

	.kv-wrap .event-summary {
		padding: 24px 16px;
	}
}



/*====================================
Contents
=====================================*/
.contents-inner-title {
	position: relative;
	font-weight: bold;
	font-size: var(--fz20);
	margin-bottom: 24px;
	padding: 2px 0 2px 0.75em;
	line-height: 1.4;
	/* border-bottom: solid 1px #fff; */
	/* border-left: solid 4px #fff; */
	text-box-trim: trim-both;
}

.contents-inner-title::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	display: block;
	width: 6px;
	height: 100%;
	border-radius: 100vw;
	background-color: var(--colorMain);
}

.frame .contents-inner-title::before,
.info-btn-wrap .contents-inner-title::before {
	background-color: var(--colorMain);
}

.contents-inner-title-bar {
    text-align: left;
    font-size: var(--fz18);
    font-weight: bold;
    margin: 0 0 24px 0;
    background-color: var(--colorMain);
    color: #fff;
    padding: 8px 16px;
}

.contents-inner-subtitle {
	font-weight: bold;
	margin-bottom: 16px;
}

.contents-wrap .notes li {
	margin-bottom: 0.25em;
}

.contents-wrap .notes li:last-child {
	margin-bottom: 0;
}

.contents-wrap em {
	font-size: 1.2em;
	font-weight: bold;
	font-style: normal;
}

.contents-wrap .announce-wrap {
	background-color: var(--colorBgSub);
	padding: 16px;
}

@media screen and (min-width: 600px) {
	.contents-inner-title-bar {
		margin: 0 0 40px 0;
		text-align: center;
	}
}


/*====================================
Cautions
=====================================*/
.cautions-box {
	border: solid 2px var(--colorMain);
	margin-bottom: 32px;
}

.cautions-box:last-child {
	margin-bottom: 0;
}

.cautions-box-title {
	color: var(--colorMain);
	text-align: center;
	font-size: var(--fz20);
	font-weight: bold;
	margin-bottom: 16px;
}

.cautions-box .open-area,
.cautions-box .close-area {
	margin-bottom: 16px;
}

.cautions-box .open-area {
	padding: 16px 16px 0;
}

.cautions-box .close-area {
	display: none;
	padding: 0 16px 0;
}

.cautions-box .open-area p,
.cautions-box .close-area p {
	margin-bottom: 8px;
}

.cautions-box .open-area p:last-child,
.cautions-box .close-area p:last-child {
	margin-bottom: 0;
}

.cautions-box .more-btn {
	background: var(--colorMain);
	padding: 4px 16px;
	color: #121212;
	text-align: center;
	font-weight: bold;
	font-size: var(--fz16);
	cursor: pointer;
}

.cautions-box .more-btn::before {
	display: inline-block;
	content: "";
	height: calc(tan(60deg)* 16px / 2);
    width: 16px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: #fff;
	transition: all 0.3s;
}

.cautions-box .more-btn.active::before {
	transform: rotate(180deg);
	transition: all 0.3s;
}

.cautions-box-inner {
	margin-bottom: 24px;
}

.scroll-box {
	background-color: var(--colorBgSub);
	padding: 1em 1em;
	margin-bottom: 32px;
}

.scroll-box-title {
	text-align: center;
	font-size: var(--fz20);
	font-weight: bold;
	margin-bottom: 1em;
}

.scroll-box-inner {
	background-color: #fff;
	height: auto;
	max-height: 70vh;
	overflow: auto;
	padding: 1em 1em;
}

/* List Style */
.list li {
	margin: 0 0 0.5em;
}

.list li:last-child {
	margin: 0 0 0;
}

.list.indent li {
	text-indent: -1em;
	padding-left: 1em;
}

.list.disc li {
	list-style-type: disc;
	margin-left: 1.5em;
}

.list.aster li {
	list-style-type: none;
	text-indent: -1em;
	padding-left: 1em;
}

.list.aster li::before {
	content: "※";
}

.list.numb li {
	list-style-type: none;
	counter-increment: cnt;
}

.list.numb li::before {
	content: "(" counter(cnt) ") ";
}




/*====================================
Link Box
=====================================*/
.link {
	margin-top: 16px;
}

.link li {
	margin-bottom: 16px;
}

.link li:last-child {
	margin-bottom: 0px;
}

.link li a {
	position: relative;
	background: var(--colorBgSub);
	display: block;
	padding: 12px;
	color: var(--colorLink);
	text-decoration: none;
	padding-left: 2.5em;
	font-weight: bold;
}

.link li a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1em;
	transform: translateY(-50%);
	transition: all 0.3s;
	height: calc(tan(60deg)* 16px / 2);
    width: 10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: var(--colorLink);
}


/*====================================
Flow
=====================================*/
.flow-content {
	padding: 16px;
	background-color: var(--colorBgSub);
	border-radius: 12px;
}

.flow-arrow {
	position: relative;
	margin-bottom: 48px;
}

.flow-arrow::after {
	position: absolute;
	right: 0;
	left: 0;
	bottom: -32px;
	margin: 0 auto;
	content: "";
	display: inline-block;
	height: calc(tan(60deg) * 16px / 2);
    width: 32px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--colorText);
}

.flow-heading {
	font-weight: bold;
	margin-bottom: 16px;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 8px;
	justify-content: center;
	align-items: center;
	line-height: 1.5;
}

.flow-heading::before {
	content: attr(data-numb);
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	flex-direction: column;
	background-color: var(--colorText);
	font-family: "Roboto Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
	font-size: var(--fz20);
	color: #FFF;
	min-height: 40px;
	width: 64px;
	border-radius: 6px;
}

@media screen and (min-width: 600px) {
	.flow-arrow {
		position: relative;
		margin-bottom: 96px;
	}

	.flow-content {
		padding: 32px;
		border-radius: 12px;
	}

	.flow-arrow::after {
		position: absolute;
		right: 0;
		left: 0;
		bottom: -64px;
		margin: 0 auto;
		content: "";
		display: inline-block;
		height: calc(tan(60deg) * 32px / 2);
		width: 64px;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		background: var(--colorText);
	}

	.flow-heading {
		gap: 16px;
		font-size: var(--fz18);
	}
}


/*====================================
Capture Image
=====================================*/
.cap-image {
	margin: 24px auto 0 auto;
	text-align: center;
}

.cap-image img {
	position: relative;
	border: solid 1px #EEE;
	background-color: #FFF;
}
.cap-image a {
	display: block;
	pointer-events: none;
}

@media screen and (min-width: 600px) {
	.cap-image {
		max-width: 640px;
		max-height: 480px;
	}

	.cap-image a {
		position: relative;
		pointer-events: auto;
	}

	.cap-image a::after {
		position: absolute;
		content: "\e8ff";
		font-family: 'Material Symbols Outlined';
		font-weight: normal;
		font-style: normal;
		font-size: 24px;
		display: flex;
		line-height: 1;
		text-transform: none;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		bottom: 8px;
		right: 8px;
		color: #FFF;
		background-color: #000;
		width: 40px;
		aspect-ratio: 1 / 1;
		border-radius: 100vw;
		justify-content: center;
		align-items: center;
		opacity: 0.26;
	}

	.cap-image img {
		object-fit: contain;
		width: 100%;
		height: 100%;
		max-width: 640px;
		max-height: 480px;
	}

	.cap-image.undersize {
		max-width: none;
		max-height: none;
	}

	.cap-image.undersize img {
		object-fit: none;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
	}

}


/*====================================
Text Frame
=====================================*/
.text-frame {
	background-color: var(--colorBgSub);
	border: solid 1px #CCC;
	padding: 0.5em 1em;
}

/*====================================
Accordion
=====================================*/
.acd-wrap:has(.acd-trigger.active) {
	margin-bottom: 40px;
}

.acd-wrap .acd-trigger {
	cursor: pointer;
	position: relative;
	border-right: solid 48px var(--colorLink);
}

.acd-wrap .acd-trigger::after {
	position: absolute;
	display: inline-block;
	content: "";
	height: calc(tan(60deg)* 16px / 2);
    width: 16px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: #fff;
	transition: all 0.3s;
	right: -32px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.acd-wrap .acd-trigger.active::after {
	transform: rotate(180deg);
	transition: all 0.3s;
}

.acd-wrap .acd-target {
	display: none;
}

@media screen and (min-width: 600px) {
	.acd-wrap:has(.acd-trigger.active) {
		margin-bottom: 80px;
	}
}


/*====================================
App Install
=====================================*/
.app-install {
	max-width: 400px;
	margin: 0 auto 48px auto;
}

.app-install .app-btn {
	display: grid;
	grid-template-columns: 0.81fr 1fr;
	gap: 24px;
	width: 90%;
	margin: 24px auto 0 auto;
}

@media screen and (min-width: 768px) {
	.app-install {
		max-width: 60%;
	}

	.app-install .app-btn {
		width: 100%;
	}
}


/*====================================
Fixed Button
=====================================*/
.fixed-btn-wrap {
	position: sticky;
	bottom: 16px;
	background-color: transparent;
	/*max-width: 1100px;*/
	margin: 0 auto;
	z-index: 1;
}

.fixed-btn {
	position: absolute;
	bottom: 0;
	right: 16px;
	opacity: 0;
	transform: scale(0.9);
	transition: all 0.5s;
	z-index: 10;
}

.fixed-btn-wrap.fadein .fixed-btn {
	opacity: 1.0;
	transform: scale(1.0);
	transition: all 0.5s;
}

.fixed-btn a {
	display: block;
	text-align: center;
	color: #FFF;
	font-size: var(--fz12);
	font-weight: bold;
	line-height: 1.4em;
	text-decoration: none;
	background-color: var(--colorLink);
	border-radius: 100vw;
	padding: 8px 16px;
	box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

@media screen and (min-width: 600px) {
	.fixed-btn {
		bottom: 80px;
		/* right: auto;
		left: 16px; */
	}
}



/*====================================
Adjust
=====================================*/
.tL {text-align: left !important;}
.tR {text-align: right !important;}
.tC {text-align: center !important;}
.fL {float: left !important;}
.fR {float: right !important;}

.sp-tL,
.pc-tC {text-align: left !important;}

.mbSS,.mbXL {margin-bottom: 4px !important;}
.mbS {margin-bottom: 8px !important;}
.mbM {margin-bottom: 16px !important;}
.mbL {margin-bottom: 24px !important;}
.mbLL,.mb2L,.mbXL {margin-bottom: 32px !important;}
.mb3L,.mbXXL {margin-bottom: 48px !important;}
.mb4L,.mbXXXL {margin-bottom: 56px !important;}
.mb5L,.mbXXXXL {margin-bottom: 64px !important;}

.mtSS,.mtXS {margin-top: 4px !important;}
.mtS {margin-top: 8px !important;}
.mtM {margin-top: 16px !important;}
.mtL {margin-top: 24px !important;}
.mtLL,.mt2L,.mtXL {margin-top: 32px !important;}
.mt3L,.mtXXL {margin-top: 48px !important;}
.mt4L,.mtXXXL {margin-top: 56px !important;}
.mt5L,.mtXXXXL {margin-top: 64px !important;}

.mb00 {margin-bottom: 0 !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}

.mt00 {margin-top: 0 !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}

.fz10 {font-size: calc(10 / 16 * 1rem) !important;}
.fz11 {font-size: calc(11 / 16 * 1rem) !important;}
.fz12 {font-size: calc(12 / 16 * 1rem) !important;}
.fz13 {font-size: calc(13 / 16 * 1rem) !important;}
.fz14 {font-size: calc(14 / 16 * 1rem) !important;}
.fz15 {font-size: calc(14 / 16 * 1rem) !important;}
.fz16 {font-size: 1rem !important;}
.fz18 {font-size: calc(18 / 16 * 1rem) !important;}
.fz20 {font-size: calc(20 / 16 * 1rem) !important;}
.fz22 {font-size: calc(22 / 16 * 1rem) !important;}
.fz24 {font-size: calc(24 / 16 * 1rem) !important;}
.fz28 {font-size: calc(28 / 16 * 1rem) !important;}
.fz32 {font-size: calc(32 / 16 * 1rem) !important;}
.fz36 {font-size: calc(36 / 16 * 1rem) !important;}
.fz40 {font-size: calc(40 / 16 * 1rem) !important;}

.fz125em {font-size: 1.25em !important;;}
.fz150em {font-size: 1.5em !important;;}
.fz175em {font-size: 1.75em !important;;}
.fz200em {font-size: 2em !important;;}

.fw500 {font-weight: 500 !important;}

.caution {
	color: var(--colorCaution) !important;
}

.underline {
	text-decoration: underline !important;
	text-underline-offset: 0.25em;
}

.inlblock {
	display: inline-block !important;
}

.sp,
.pc-none {
	display: inline;
}

.pc,
.sp-none {
	display: none;
}

@media screen and (min-width: 600px) {
	.sp-tL,
	.pc-tC {text-align: center !important;}

	.sp,
	.pc-none {
		display: none;
	}

	.pc,
	.sp-none {
		display: inline;
	}
}

@media screen and (min-width: 480px) {
	.sp480 {
		display: none;
	}
}

@media screen and (min-width: 600px) {
	.sp600 {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	.sp768 {
		display: none;
	}
}

@media screen and (max-width: 479px) {
	.pc480 {
		display: none;
	}
}

@media screen and (max-width: 599px) {
	.pc600 {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.pc768 {
		display: none;
	}
}