@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.key-image { background-image: url(../img/interact/key-image.jpg); }

/* --------------------------------------------------------------------------------------
	リード
--------------------------------------------------------------------------------------- */

.lead-section.box { width: min(100% - 60px, 840px); }

.lead-section .lead-title strong {
	display: block;
	font-size: 20px;
	font-weight: var(--Bold);
	line-height: 180%;
}

.lead-section .lead-title strong:nth-of-type(n+2) { margin-top: 16px; }

.lead-section .lead-text { margin-top: 40px; }

.lead-section .lead-text p {
	color: rgba(255, 255, 255, 0.80);
	line-height: 200%;
}

.lead-section .lead-text p:nth-of-type(n+2) { margin-top: 16px; }

@media (max-width: 900px) {

	.lead-section .lead-title strong { font-size: 3.745vw; }

	.lead-section .lead-title strong:nth-of-type(n+2) { margin-top: 1.998vw; }

	.lead-section .lead-text { margin-top: 4.994vw; }

	.lead-section .lead-text p {
		font-size: 2.996vw;
		line-height: 200%;
	}

	.lead-section.box { width: min(100% - 12.484vw, 840px); }

	.lead-section .lead-text p:nth-of-type(n+2) { margin-top: 1.998vw; }

}

/* --------------------------------------------------------------------------------------
	関わり方アコーディオン（共通）
--------------------------------------------------------------------------------------- */

.engage-list {
	margin-left: auto;
	margin-right: auto;
	width: min(100% - 60px, 1100px);
}

.engage summary {
	background-color: #333;
	border-top: 1px solid #4f4f4f;
	display: block;
	transition: background-color .3s ease-in-out;
}

.engage:nth-of-type(n+2) > summary { border-top: 1px solid rgba(255, 255, 255, 0.15); }

.engage .engage-head {
	align-items: stretch;
	display: flex;
	min-height: 110px;
}

.engage .engage-target {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: var(--SemiBold);
	justify-content: center;
	padding: 24px 16px;
	text-align: center;
	width: 220px;
}

.engage .engage-title {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 32px;
	text-align: left;
	width: 100%;
}

.engage .engage-title strong {
	font-size: 22px;
	font-weight: var(--Bold);
	line-height: 150%;
}

.engage .engage-title small {
	display: block;
	font-size: 14px;
	margin-top: 4px;
}

.engage .engage-toggle {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 16px;
	justify-content: flex-end;
	padding-right: 32px;
}

.engage .engage-toggle .label-close { display: none; }

.engage[open] > summary .engage-toggle .label-open { display: none; }

.engage[open] > summary .engage-toggle .label-close { display: block; }

.engage .engage-toggle::after {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	content: "";
	display: block;
	height: 10px;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .3s ease-in-out;
	width: 10px;
}

.engage[open] > summary .engage-toggle::after { transform: translateY(3px) rotate(-135deg); }

.engage .engage-content { overflow: hidden; }

@media (any-hover: hover) {

	.engage summary:hover { background-color: #2a2a2a; }

}

@media (max-width: 900px) {

	.engage-list { width: min(100% - 12.484vw, 1100px); }

	.engage summary { text-align: left; }

	.engage .engage-head {
		display: block;
		min-height: 0;
		padding: 3.995vw;
		position: relative;
	}

	.engage .engage-target {
		display: inline-flex;
		font-size: 3.497vw;
		padding: 0;
		width: auto;
	}

	.engage .engage-title { padding: 2.497vw 0 0; }

	.engage .engage-title strong { font-size: 4.245vw; }

	.engage .engage-title small {
		font-size: 2.497vw;
		margin-top: 0.999vw;
	}

	.engage .engage-toggle {
		font-size: 2.497vw;
		gap: 1.998vw;
		padding-right: 0;
		position: absolute;
		right: 3.995vw;
		top: 3.995vw;
	}

	.engage .engage-toggle::after {
		height: 1.498vw;
		width: 1.498vw;
	}

}

/* --------------------------------------------------------------------------------------
	関わり方アコーディオン（導入文｜ホバー・展開時に表示）
--------------------------------------------------------------------------------------- */

.engage .engage-lead {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s ease-in-out;
}

.engage .engage-lead-body { overflow: hidden; }

.engage .engage-lead-inner {
	display: block;
	padding: 8px 12px 56px 252px;
	text-align: left;
}

.engage .engage-lead-inner strong {
	display: block;
	font-weight: var(--Bold);
	line-height: 180%;
}

.engage .engage-lead-inner .text {
	color: rgba(255, 255, 255, 0.70);
	display: block;
	font-size: 14px;
	line-height: 165%;
	margin-top: 17px;
}

.engage[open] > summary .engage-lead { grid-template-rows: 1fr; }

@media (any-hover: hover) {

	.engage summary:hover .engage-lead { grid-template-rows: 1fr; }

}

@media (max-width: 900px) {

	.engage .engage-lead-inner { padding: 0 3.995vw 5.993vw; }

	.engage .engage-lead-inner strong { font-size: 3.246vw; }

	.engage .engage-lead-inner .text {
		font-size: 2.996vw;
		margin-top: 2.996vw;
	}

}

/* --------------------------------------------------------------------------------------
	関わり方アコーディオン（詳細）
--------------------------------------------------------------------------------------- */

.engage-detail {
	background-color: var(--color-gray);
	color: #000;
	padding-bottom: 80px;
	padding-top: 64px;
}

.engage-detail .engage-inner {
	padding-left: 252px;
	padding-right: 56px;
	position: relative;
	text-align: left;
}

.engage-detail .engage-rail {
	left: 35px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 40px;
}

.engage-detail .engage-rail .rail-title {
	font-size: 20px;
	font-weight: var(--Medium);
	letter-spacing: 4px;
	line-height: 1;
	margin-left: auto;
	margin-right: auto;
	writing-mode: vertical-rl;
}

.engage-detail .engage-rail .rail-close {
	appearance: none;
	background-color: transparent;
	border: none;
	color: #000;
	cursor: pointer;
	display: block;
	font-size: 14px;
	line-height: 1;
	margin: 48px auto auto;
	outline: none;
	padding: 0;
	transition: opacity .3s ease-in-out;
}

.engage-detail .engage-rail .rail-close span {
	display: block;
	left: 1px;
	letter-spacing: 2px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	writing-mode: vertical-rl;
}

.engage-detail .engage-rail .rail-close::after {
	content: "×";
	display: block;
	font-size: 18px;
	margin-top: 12px;
}

.engage-detail .engage-section:nth-of-type(n+2) { margin-top: 80px; }

.engage-detail .section-title { text-align: left; }

.engage-detail .section-title strong {
	border-bottom: 1px solid var(--color-gold);
	display: inline-block;
	font-size: 20px;
	font-weight: var(--Bold);
	padding-bottom: 8px;
}

.engage-detail .section-text {
	line-height: 200%;
	margin-top: 32px;
}

.engage-detail .section-text + .section-text { margin-top: 20px; }

.engage-detail .note {
	font-size: 14px;
	line-height: 200%;
	margin-top: 24px;
}

@media (any-hover: hover) {

	.engage-detail .engage-rail .rail-close:hover { opacity: .6; }

}

@media (max-width: 900px) {

	.engage-detail {
		padding-bottom: 9.988vw;
		padding-top: 7.99vw;
	}

	.engage-detail .engage-inner {
		padding-left: 3.995vw;
		padding-right: 3.995vw;
	}

	.engage-detail .engage-rail {
		align-items: center;
		display: flex;
		justify-content: space-between;
		position: static;
		text-align: left;
		width: auto;
	}

	.engage-detail .engage-rail .rail-title {
		font-size: 3.496vw;
		font-weight: var(--Bold);
		letter-spacing: normal;
		margin-left: 0;
		margin-right: 0;
		writing-mode: horizontal-tb;
	}

	.engage-detail .engage-rail .rail-close {
		align-items: center;
		display: flex;
		font-size: 2.497vw;
		gap: 1.248vw;
		margin: 0;
	}

	.engage-detail .engage-rail .rail-close span {
		margin-left: 0;
		margin-right: 0;
		writing-mode: horizontal-tb;
	}

	.engage-detail .engage-rail .rail-close::after {
		font-size: 3.496vw;
		margin-top: 0;
	}

	.engage-detail .engage-body { margin-top: 5.993vw; }

	.engage-detail .engage-body.full { margin-top: 0; }

	.engage-detail .engage-section:nth-of-type(n+2) { margin-top: 9.988vw; }

	.engage-detail .section-title strong { font-size: 3.496vw; }

	.engage-detail .section-text {
		font-size: 2.996vw;
		margin-top: 3.995vw;
	}

	.engage-detail .section-text + .section-text { margin-top: 2.497vw; }

	.engage-detail .note {
		font-size: 2.497vw;
		margin-top: 2.996vw;
	}

}

/* --------------------------------------------------------------------------------------
	協賛の意義（カード）
--------------------------------------------------------------------------------------- */

.merit-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 40px;
}

.merit-list dl {
	align-content: center;
	border: 1px solid var(--color-gold);
	border-top-left-radius: 16px;
	column-gap: 16px;
	display: grid;
	grid-template-columns: 88px 1fr;
	padding: 24px;
	width: calc(50% - 12px);
}

.merit-list .thum {
	align-self: center;
	grid-row: 1 / 3;
	text-align: center;
}

.merit-list dt {
	font-size: 20px;
	font-weight: var(--Medium);
}

.merit-list dd {
	font-size: 14px;
	line-height: 160%;
	margin-top: 8px;
}

@media (max-width: 900px) {

	.merit-list {
		gap: 2.996vw;
		margin-top: 4.994vw;
	}

	.merit-list dl {
		border-top-left-radius: 2.996vw;
		column-gap: 2.996vw;
		grid-template-columns: 13.739vw 1fr;
		padding: 2.996vw;
		width: 100%;
	}

	.merit-list dt { font-size: 3.496vw; }

	.merit-list dd {
		font-size: 2.497vw;
		margin-top: 0.999vw;
	}

}

/* --------------------------------------------------------------------------------------
	定義リスト（提供する機会・特典・ポータル）
--------------------------------------------------------------------------------------- */

.detail-list { margin-top: 32px; }

.detail-list dl {
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	display: flex;
	gap: 24px;
	padding: 24px 0;
}

.detail-list dt {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: var(--Medium);
	line-height: 175%;
	width: 45%;
}

.detail-list dd {
	color: #333;
	font-size: 14px;
	line-height: 175%;
	width: 100%;
}

.detail-list.icon dl {
	align-items: center;
	display: grid;
	gap: 0 24px;
	grid-template-columns: 64px minmax(0, 280px) 1fr;
}

.detail-list.icon .thum { width: 64px; }

.detail-list.icon dt {
	font-size: 20px;
	width: auto;
}

@media (max-width: 900px) {

	.detail-list { margin-top: 4.994vw; }

	.detail-list dl {
		display: block;
		padding: 2.996vw 0;
	}

	.detail-list dt {
		font-size: 3.496vw;
		width: auto;
	}

	.detail-list dd {
		font-size: 2.996vw;
		margin-top: 1.498vw;
		width: auto;
	}

	.detail-list.icon dl {
		align-items: center;
		display: grid;
		gap: 0 2.996vw;
		grid-template-columns: 9.988vw 1fr;
	}

	.detail-list.icon .thum {
		align-self: center;
		width: 9.988vw;
	}

	.detail-list.icon dt { font-size: 3.496vw; }

	.detail-list.icon dd {
		grid-column: 2;
		margin-top: 0.999vw;
	}

}

/* --------------------------------------------------------------------------------------
	番号付きリスト
--------------------------------------------------------------------------------------- */

.number-list {
	counter-reset: number 0;
	margin-top: 32px;
}

.number-list li {
	line-height: 200%;
	padding-left: 1.9em;
	position: relative;
}

.number-list li::before {
	content: counter(number) ".";
	counter-increment: number 1;
	left: 0;
	position: absolute;
	top: 0;
}

@media (max-width: 900px) {

	.number-list { margin-top: 3.995vw; }

	.number-list li {
		font-size: 2.996vw;
		padding-left: 3.33vw;
	}

}

/* --------------------------------------------------------------------------------------
	会員区分・会費・期間
--------------------------------------------------------------------------------------- */

.plan-list {
	display: flex;
	gap: 32px;
	margin-top: 32px;
}

.plan-list .column {
	border: 1px solid var(--color-gold);
	border-top-left-radius: 16px;
	overflow: hidden;
	width: 100%;
}

.plan-list .column h5 {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.06);
	display: flex;
	font-size: 18px;
	font-weight: var(--Bold);
	justify-content: center;
	min-height: 120px;
	padding: 24px;
	text-align: center;
}

.plan-list .column dl { padding: 24px; }

.plan-list .column dt { font-weight: var(--Medium); }

.plan-list .column dd {
	color: #666;
	font-size: 14px;
	line-height: 180%;
	margin-top: 12px;
}

@media (max-width: 900px) {

	.plan-list {
		flex-direction: column;
		gap: 2.996vw;
		margin-top: 4.994vw;
	}

	.plan-list .column { border-top-left-radius: 2.996vw; }

	.plan-list .column h5 {
		font-size: 3.496vw;
		min-height: 0;
		padding: 3.995vw 2.996vw;
	}

	.plan-list .column dl { padding: 2.996vw; }

	.plan-list .column dt { font-size: 3.246vw; }

	.plan-list .column dd {
		font-size: 2.497vw;
		margin-top: 1.498vw;
	}

}

/* --------------------------------------------------------------------------------------
	インスペクターの役割
--------------------------------------------------------------------------------------- */

.role-wrap {
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin-top: 40px;
}

.role-list {
	counter-reset: number 0;
	width: 45%;
}

.role-list li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 18px;
	line-height: 180%;
	padding: 20px 0;
}

.role-list li::before {
	content: counter(number) ".";
	counter-increment: number 1;
}

.role-photo {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	height: 100%;
	width: 55%;
}

.role-photo .thum:first-of-type { width: 100%; }

.role-photo .thum:nth-of-type(n+2) { width: calc(50% - 8px); }

.role-photo .thum img { width: 100%; }

@media (max-width: 900px) {

	.role-wrap {
		display: block;
		margin-top: 4.994vw;
	}

	.role-list { width: auto; }

	.role-list li {
		font-size: 3.246vw;
		padding: 2.497vw 0;
	}

	.role-photo {
		gap: 1.998vw;
		margin-top: 4.994vw;
		width: auto;
	}

	.role-photo .thum:nth-of-type(n+2) { width: calc(50% - 0.999vw); }

}

/* --------------------------------------------------------------------------------------
	お問い合わせ・お申し込み
--------------------------------------------------------------------------------------- */

.cta-section {
	background: #a8814a url(../img/interact/bg-cta-small.jpg) no-repeat center center / cover;
	padding-top: 64px;
	text-align: center;
}

#supporting-members .cta-section { background-image: url(../img/interact/bg-cta.jpg); }

.cta-section .box { text-align: center; }

.cta-section:has(.flow-area) { padding-bottom: 0; }
.cta-section:not(:has(.flow-area)) { padding-bottom: 64px; }

.cta-section .cta-title {
	font-size: 24px;
	font-weight: var(--SemiBold);
	line-height: 150%;
}

.cta-section .cta-text {
	color: rgba(255, 255, 255, 0.80);
	font-size: 14px;
	margin-top: 10px;
}

.cta-section .cta-action {
	align-items: center;
	display: flex;
	gap: 32px;
	justify-content: center;
	margin-top: 40px;
}

.cta-section .cta-action .qr { width: 88px; }

.cta-section .banner a,
.cta-section .banner span {
	gap: 12px;
	min-width: 328px;
}

.cta-section .banner.red a {
	background-color: var(--color-orange);
	border-color: var(--color-orange);
	color: #fff;
}

.cta-section .banner.soon span {
	align-items: center;
	background-color: #4f4f4f;
	border-radius: var(--border-radius);
	color: rgba(255, 255, 255, 0.80);
	display: flex;
	font-weight: var(--Bold);
	justify-content: center;
	letter-spacing: 2px;
	min-height: 64px;
	min-width: 253px;
	padding: 16px;
}

.cta-section .icon-blank {
	flex-shrink: 0;
	height: 20px;
	width: 20px;
}

.cta-section .flow-area {
	background-color: rgba(0, 0, 0, 0.40);
	margin-top: 32px;
	padding-bottom: 24px;
	padding-top: 24px;
}

.cta-section .flow-list {
	display: flex;
	gap: 30px;
}

.cta-section .flow-list dl { width: 100%; }

.cta-section .flow-list dt {
	align-items: center;
	display: flex;
	gap: 16px;
}

.cta-section .flow-list dt .num {
	align-items: center;
	border: 1px solid #fff;
	display: flex;
	font-size: 20px;
	height: 40px;
	justify-content: center;
	line-height: 1;
	width: 40px;
}

.cta-section .flow-list dt strong {
	font-size: 20px;
	font-weight: var(--SemiBold);
}

.cta-section .flow-list dd {
	color: rgba(255, 255, 255, 0.80);
	font-size: 14px;
	line-height: 175%;
	margin-top: 16px;
	text-align: left;
}

@media (any-hover: hover) {

	.cta-section .banner.red a:hover {
		background-color: #fff;
		border-color: #fff;
		color: var(--color-orange);
	}

}

@media (max-width: 900px) {

	.cta-section { padding-top: 8.988vw; }

	.cta-section:not(:has(.flow-area)) { padding-bottom: 8.988vw; }

	.cta-section .cta-title { font-size: 3.995vw; }

	.cta-section .cta-text {
		font-size: 2.996vw;
		margin-top: 1.998vw;
	}

	.cta-section .cta-action {
		flex-direction: column;
		gap: 3.995vw;
		margin-top: 4.994vw;
	}

	.cta-section .cta-action .qr { width: 19.975vw; }

	.cta-section .banner a,
	.cta-section .banner span {
		gap: 1.498vw;
		min-width: 0;
		width: 100%;
	}

	.cta-section .banner.soon span {
		min-height: 7.99vw;
		padding: 2.985vw;
	}

	.cta-section .banner { width: 100%; }

	.cta-section .icon-blank {
		height: 3.496vw;
		width: 3.496vw;
	}

	.cta-section .flow-area {
		margin-top: 7.99vw;
		padding-bottom: 5.993vw;
		padding-top: 5.993vw;
	}

	.cta-section .flow-list {
		flex-direction: column;
		gap: 4.994vw;
	}

	.cta-section .flow-list dt { gap: 2.497vw; }

	.cta-section .flow-list dt .num {
		font-size: 3.246vw;
		height: 6.242vw;
		width: 6.242vw;
	}

	.cta-section .flow-list dt strong { font-size: 3.496vw; }

	.cta-section .flow-list dd {
		font-size: 2.497vw;
		margin-top: 1.998vw;
	}

}

/* --------------------------------------------------------------------------------------
	クロージング
--------------------------------------------------------------------------------------- */

.closing-section {
	background-color: #fff;
	color: #000;
	margin-bottom: 88px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 64px;
	padding-top: 64px;
	width: min(100% - 60px, 1100px);
}

.closing-section .closing-text {
	font-size: 20px;
	font-weight: var(--Bold);
	line-height: 180%;
	text-align: center;
}

.closing-section .closing-text::before {
	background: url(../img/common/icon-steam.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 66px;
	margin: auto auto 30px;
	width: 64px;
}

@media (max-width: 900px) {

	.closing-section {
		margin-bottom: 9.988vw;
		padding-bottom: 7.99vw;
		padding-top: 7.99vw;
		width: min(100% - 12.484vw, 1100px);
	}

	.closing-section .closing-text {
		font-size: 3.246vw;
		line-height: 160%;
	}

	.closing-section .closing-text::before {
		height: 10.986vw;
		margin-bottom: 3.995vw;
		width: 10.487vw;
	}

}