@charset "utf-8";
:root {
	--cloud: #e6f7ff;
	--sky: #00aaff;
	--navy: #0045a6;
	--lemon: #fff159;
	--yellow: #ffea00;
	--pink: #ff6680;

	--text: var(--black, black);
	--border: var(--cloud, lightgray);
	--base: var(--white, white);
	--accent: var(--pink, orange);
	--action: var(--lemon, blue);
	--alert: var(--red, red);

	--b: 1600;
	--px: clamp(0.8px, (100vw / var(--b)), 1px);
    --main-width: 1200px;
	--wrap-padding-inline: var(--m);
    --header-height: calc(80 * var(--px));

	--huge-size: calc(60 * var(--px));
	--large-size: calc(45 * var(--px));
	--medium-size: calc(28 * var(--px));
	--regular-size: calc(18 * var(--px));

	--m: calc(20 * var(--px));
	
	--transition: 0.3s 0s ease;
}
@media screen and (max-width: 767px) {
	:root {
		--px: 1px;
        --main-width: 100%;
		--header-height: calc(80 * var(--px));

		--huge-size: calc(27 * var(--px));
		--large-size: calc(21 * var(--px));
		--medium-size: calc(18 * var(--px));
		--regular-size: calc(15 * var(--px));
	
		--m: calc(15 * var(--px));
	}
}

html {
	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	scroll-behavior: smooth;

	font-feature-settings: "palt";
}


body {
	width: 100svw;
	background: var(--cloud);
	overflow-x: clip;
	position: relative;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;/* medium:500, bold:700, black:900 */
	font-style: normal;

	font-size: var(--regular-size);
	color: var(--text);
	line-height: 1.75;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/*  common
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

/*  header
-------------------------------------------------------------------- */
/** KV */
section#billboard {
	margin-bottom: calc(-1 * var(--m2));
	position: relative;
	--wrap-padding-inline: 0;
}
section#billboard .tagline {
	position: absolute;
	left: 50%;
	top: 46.97%;
	translate: -50% -50%;
}
@media screen and (min-width: 768px) {
	section#billboard .tagline {
		width: calc(869 * var(--px));
		height: fit-content;
	}
}
@media screen and (max-width: 767px) {
	section#billboard .tagline {
		width: 90%;
	}
}




/** ヘッダー  
-------------------------------------------------------------------- */
header {
	height: var(--header-height);
	pointer-events: none;
}

body:has(header.sticky) {
	scroll-padding-top: var(--header-height, 0px);
}

header nav {
	--main-width: fit-content;
	--wrap-padding-inline: 0;
	background: var(--yellow);
	box-shadow: 10px 10px 0 0 var(--navy);
	pointer-events: all;
}
header nav a {
	display: block;
	width: fit-content;
	padding-block: 0.3lh;
	padding-inline: 1.5ic;

	font-size: var(--medium-size);
	font-weight: 700;
	letter-spacing: 0.1ic;
	color: var(--navy);

	position: relative;
	transition: var(--transition);
}
header nav a:not(:last-child)::after {
	display: block;
	width: 2px;
	height: 1.2ic;
	background: currentColor;

	position: absolute;
	right: 0;
	top: 50%;
	translate: 0 -50%;
}
@media (any-hover: hover) {
	header nav a:hover {
		color: var(--sky);
	}
}
@media screen and (min-width: 768px) {
	header {
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	header {
		margin-inline: var(--m);
	}
	header nav {
		justify-content: center;
	}
	header nav a {
		padding-block: 0.2lh;
		padding-inline: 1ic;
	}
	header nav a:not(:first-child)::after {
		display: none;
	}
}




/** 概要 */
section#overview {
	color: var(--navy);
	background: var(--cloud);
}
section#overview .row {
	gap: var(--m);
}
section#overview .headline {
	margin-bottom: 0.5lh;
	font-size: var(--large-size);
}
@media screen and (min-width: 768px) {
	section#overview .text {
		flex: 1 1 50%;
	}
	section#overview .image {
		flex-shrink: 0;
		width: calc(500 * var(--px));
	}
}
@media screen and (max-width: 767px) {}





/** 募集要項 */
section#guidelines {
	color: white;
	background: var(--sky);
}
section#guidelines details:not(:first-child) {
	margin-top: var(--m5);
}
section#guidelines summary {
	background: var(--navy);
}
section#guidelines details .body {
	padding-block: var(--m5);
	padding-inline: var(--m4);
	background: var(--cloud);
	color: var(--navy);
}
section#guidelines p + dl.ribon {
	margin-top: var(--m3);
}
section#guidelines .body > .headline {
	margin-block: var(--m4) var(--m2);
	padding-block: 0.1lh;
	background: var(--pink);
	border-radius: 0.5lh;
	margin-inline: auto;

	color: white;
	text-align: center;
}
section#guidelines .note {
	font-size: 75%;
}
section#guidelines details dl.scalable {
	margin-block: 0.5lh;
	--dt-size: 9ic;
}
section#guidelines th:first-child {
	width: 9ic;
	box-sizing: content-box;
}
@media screen and (min-width: 768px) {
	section#guidelines details .body > p:first-child {
		text-align: center;
	}
	section#guidelines .body > .headline {
		width: calc(540 * var(--px));
	}
	section#guidelines .container {
		width: fit-content;
		margin-inline: auto;
	}
}
@media screen and (max-width: 767px) {
	section#guidelines details {
		margin-top: var(--m3);
	}
	section#guidelines details:not(:first-child) {
		margin-top: var(--m3);
	}
	section#guidelines details .body {
		padding-block: var(--m2);
		padding-inline: var(--m);
	}
	section#guidelines .body > .headline {
		padding-block: 0.2lh;
	}
	section#guidelines table {
		width: fit-content;
		table-layout: fixed;
	}
	section#guidelines th:nth-child(2) {
		width: calc(100svw - var(--m5));
	}
	section#guidelines th:nth-child(3) {
		width: calc(100svw - var(--m5));
	}
}




/** 応募までの流れ */
section#steps {
	margin-top: var(--m5);
	color: var(--navy);
	background: var(--cloud);
}
section#steps .title {
	font-size: var(--large-size);
}
section#steps .group {
	padding-block: var(--m2);
	padding-inline: var(--m2);
	border-radius: var(--m);
	background: white;
	margin-bottom: var(--m4);
}
section#steps .label {
	padding-block: 0.3lh;
	background: linear-gradient(140deg, var(--lemon), var(--lemon) 25px, var(--navy) 25.5px, var(--navy));

	font-size: var(--medium-size);
	color: white;
	text-align: center;

	position: relative;
}
section#steps .container  {
	counter-reset: number;
	padding-top: var(--m5);
}
section#steps .container + .label {
	margin-top: var(--m5);
}
section#steps .card {
	counter-increment: number;
	align-self: stretch;

	padding-block: var(--m3) var(--m);
	padding-inline: var(--m);
	border-radius: var(--m);
	border: 4px solid var(--cloud);
	background: white;

	position: relative;
}
section#steps .card::before {
	content: counter(number);

	display: flex;
	justify-content: center;
	align-items: center;

	width: var(--m3);
	height: var(--m3);
	border-radius: var(--m3);
	background: var(--pink);

	color: white;
	font-size: calc(41 * var(--px));

	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% -50%;
}
section#steps .card p {
	margin-top: var(--m2);
	width: fit-content;
	margin-inline: auto;

	color: black;
	font-weight: 500;
}
section#steps .card .note {
	margin-top: 0.5lh;
	width: max-content;

	text-align: center;

	position: absolute;
	left: 50%;
	top: 100%;
	translate: -50% 0;
}

@media screen and (min-width: 768px) {
	section#steps .container {
		justify-content: space-between;
		gap: var(--m2);
	}
	section#steps .card {
		flex: 1 0 20%;
	}
	section#steps .card:not(:last-child)::after {
		display: block;
		width: calc(18 * var(--px));
		height: calc(21 * var(--px));
		background: currentColor;
		clip-path: polygon(0 0, 100% 50%, 0 100%);

		position: absolute;
		left: 109%;
		top: 50%;
		translate: -50% -50%;
	}
	section#steps .card > img {
		width: 48%;
		margin-inline: auto;
	}
}
@media screen and (max-width: 767px) {
	section#steps .group {
		padding-block: 5px;
		padding-inline: 5px;
		margin-bottom: var(--m2);
		border-radius: 0;
	}
	section#steps .label {
		background: linear-gradient(140deg, var(--lemon), var(--lemon) 17px, var(--navy) 17.5px, var(--navy));
	}
	section#steps .container  {
		padding-top: var(--m2);
		justify-content: center;
	}
	section#steps .card {
		width: 90%;
		padding-block: var(--m2);
		padding-inline: var(--m2);
	}
	section#steps .card + .card {
		margin-top: var(--m2);
	}
	section#steps .card::before {
		font-size: var(--large-size);
	}
	section#steps .card > img {
		width: 50%;
		margin-inline: auto;
	}
	section#steps .card p {
		margin-top: var(--m);
	}
	section#steps .card .note {
		position: static;
		translate: none;
		font-size: 80%;
		text-align: center;
	}
	
}

section#promote {
	padding-block: var(--m5) 0;
	align-items: center;
}
section#promote > .headline {
	width: 100%;
	padding-block: 0.3lh;
	padding-inline: 1.5ic;
	background: rgb(from var(--pink) r g b /  0.1);
	border-radius: var(--m);
	border: 3px solid rgb(from var(--pink) r g b /  0.3);
	margin-bottom: var(--m);

	color: var(--pink);
	text-align: center;
	font-feature-settings: normal;
	
	position: relative;
}
section#promote > .headline::after {
	display: block;
	width: var(--m6);
	height: var(--m);
	background: rgb(from var(--pink) r g b /  0.3);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	left: 50%;
	top: 110%;
	translate: -50% 0;
}
section#promote .text {
	padding-block: var(--m2);
	padding-inline: var(--m2);
	border-radius: var(--m);
	background: var(--bg);

	color: white;

	position: relative;
}
#members {
	--bg: var(--pink);
}
#invite {
	--bg: var(--sky);
}

#members::after {
	display: block;
	width: calc(30 * var(--px));
	height: calc(27 * var(--px));
	background: var(--bg);
	clip-path: polygon(0 0, 100% 50%, 0 100%);

	position: absolute;
	left: calc(100% - 1px);
	top: 50%;
	translate: 0 -50%;
}
#invite::after {
	display: block;
	width: calc(30 * var(--px));
	height: calc(27 * var(--px));
	background: var(--bg);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);

	position: absolute;
	right: var(--m6);
	bottom: calc(100% - 1px);
}
section#promote .headline {
	margin-bottom: 0.3lh;
	font-size: var(--medium-size);
}
section#promote p {
	font-size: var(--regular-size);
	font-weight: 700;
}
section#promote .button {
	margin-top: var(--m);
	padding-inline: 1.5ic;
	border-radius: 1lh;
	margin-left: auto;
	--button-bg: var(--lemon);
	--button-hover-bg: white;

	color: var(--bg);
	text-align: left;
	font-size: calc(24 * var(--px));
	font-weight: 500;
}

@media screen and (min-width: 768px) {
	section#promote .text {
		flex: 1 1 50%;
	}
	section#promote .image {
		flex-shrink: 0;
		width: 40%;
	}
}
@media screen and (max-width: 767px) {
	section#promote {
		padding-block: var(--m2);
		justify-content: center;
	}
	section#promote > .headline {
		margin-bottom: var(--m2);
	}
	section#promote .text {
		padding-block: var(--m);
	}
	section#promote .image {
		width: 80%;
	}
	#members::after {
		width: calc(24 * var(--px));
		height: calc(18 * var(--px));
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		left: var(--m3);
		top: calc(100% - 1px);
		translate: none;
	}
	#invite::after {
		width: calc(24 * var(--px));
		height: calc(18 * var(--px));
		right: var(--m3);
	}
	section#promote p {
		font-size: calc(15 * var(--px));
		font-weight: 500;
	}
	section#promote .button {
		width: 100%;
		font-size: calc(15 * var(--px));
	}
}

section#result {
	margin-top: var(--m5);
	padding-block: var(--m4);
	padding-inline: var(--m4);
	border-radius: var(--m);
	background: var(--lemon);
	color: var(--navy);
}
section#result dl.scalable {
	margin-block: 0.5lh;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#result {
		margin-top: var(--m3);
		padding-block: var(--m2);
		padding-inline: var(--m);
	}
	section#result dl.scalable {
		--dt-size: 7ic;
	}
}




/** 応募・問い合わせ */
section#apply {
	color: var(--navy);
	background: var(--yellow);
}
section#apply .button {
	width: 100%;
	padding-block: 0.5lh;
	padding-right: 2ic;
	box-shadow: 10px 10px 0 0 var(--navy);
	--button-bg: white;
	--button-hover-bg: var(--sky);
	--button-hover-color: white;
	font-size: var(--large-size);
	font-weight: 900;
	position: relative;
}
section#apply .button + .button {
	margin-top: var(--m3);
}
section#apply .button::after {
	display: block;
	width: calc(22 * var(--px));
	height: calc(25 * var(--px));
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);

	position: absolute;
	right: var(--m3);
	top: 50%;
	translate: 0 -50%;
}
section#apply .headline {
	margin-bottom: 0.5lh;
	text-align: center;
	font-size: var(--large-size);
}
section#apply .button + .headline {
	margin-top: var(--m5);
}
section#apply .nav-alpha {
	--button-color: white;
	--button-bg: var(--navy);
	width: 80%;
	box-shadow: 10px 10px 0 0 white;
	margin-inline: auto;
	font-size: var(--medium-size);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#apply .button {
		text-align: left;
	}
	section#apply .button::after {
		width: calc(15 * var(--px));
		height: calc(18 * var(--px));
		right: var(--m);
	}
	section#apply .nav-alpha {
		width: 100%;
		font-size: calc(17 * var(--px));
	}
}




/** FAQ */
section#faq {
	color: white;
	background: var(--navy);
}
section#faq .label {
	width: fit-content;
	min-width: 70%;
	margin-inline: auto;
	margin-bottom: 1.5lh;

	font-size: var(--medium-size);
	text-align: center;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1ic;
}
section#faq .label::before,
section#faq .label::after {
	display: block;
	flex: 1 0 auto;
	height: 2px;
	background: currentColor;
}
section#faq details + .label {
	margin-top: 3lh;
}
section#faq details + details {
	margin-top: var(--m3);
}
section#faq summary {
	padding-block: 0.75lh;
	padding-left: 3ic;
	background: white;
	color: var(--navy);
	--button-color: currentColor;
	font-size: var(--medium-size);
	font-weight: 700;
	text-align: left;
}
section#faq summary::before {
	border: solid white;
	border-width: 0 2px;
	background: var(--navy);
}
section#faq details .body {
	padding-block: 1.5lh;
	padding-inline: 2.5ic;
	background: var(--navy);
	border: 2px solid white;
	border-top: 0;

	color: white;
	font-size: calc(24 * var(--px));
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#faq summary {
		padding-block: 0.5lh;
		padding-left: 1.5ic;
	}
	section#faq summary button {
		right: 0;
	}
	section#faq details .body {
		padding-block: 0.75lh;
		padding-inline: 1.5ic;
		font-size: var(--regular-size);
	}
}




/** 注意事項・プライバシーポリシー */
section#policies {
	color: white;
	background: var(--sky);
}
section#policies .container {
	margin-inline: 5%;
	padding-block: var(--m2);
	padding-inline: var(--m3);
	border-block: 2px solid white;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#policies .container {
		padding-block: var(--m2);
		padding-inline: var(--m);
	}	
}




/** 主催・後援・協賛 */
section#organization {
	font-size: var(--medium-size);
	color: var(--navy);
	background: white;
}
section#organization ul {
	margin-block: 0;
	justify-content: center;
	gap: var(--m2);
}
section#organization ul + .title {
	margin-top: var(--m8);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#organization ul + .title {
		margin-top: var(--m4);
	}
	
}



/*  footer
-------------------------------------------------------------------- */
footer {
	--wrap-width: fit-content;
	padding-block: var(--m5) var(--m);
	background: var(--cloud);
	text-align: center;
}
footer dl.scalable {
	--dt-size: 7ic;
	margin-block: 0.5lh;
}
footer dl:nth-of-type(2):not(.is_active) {
	display: none;
}
.number::before {
	content: "03-6228-0493";
	display: inline;
}
footer .copyright {
	margin-top: var(--m3);
	text-align: center;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	footer dl.scalable {
		--dt-size: 100%;
		display: block;
	}
	footer dl.scalable dt::after {
		display: none;
	}
	footer dl.scalable dd {
		text-align: center;
	}
}