@charset "UTF-8";

html {
	width: 100%;
	height: 100%;
	color: #000;
	margin: 0;
	padding: 0;
	font-feature-settings: "palt" 1;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure {
	margin: 0;
	padding: 0;
}

:root {
	--color-red: #ff0000;
	--color-blue: #003893;
	--color-yachtBlue: #35a1d6;
	--color-yellow: #f4ca1d;
	--color-pink: #ff6ec8;
}
body{
	font-size: 14px;
	font-family: "Noto Sans JP", sans-serif, sans-serif;
	line-height: 1.5;
	background-color: var(--color-yachtBlue);
	counter-reset:number;
	height: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	-webkit-text-size-adjust: none;
}

table {
	font: 100%;
	font-size: inherit;
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th { text-align:left; }

fieldset,img { border: 0;}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
address,caption,cite,code,dfn,em,th,var {
	font-style: normal;
	font-weight: normal;
}
ol,ul { list-style: none;}

q:before,q:after { content:'';}
abbr,acronym {
	border: 0;
	font-variant: normal;
}
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom;}
input,textarea,select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	outline: 0;
}
legend{ color:inherit;}

select,input,button,textarea{ font-family: "Noto Sans JP", sans-serif, sans-serif; }

pre,code,kbd,samp,tt{
	font-family: monospace;
	line-height: 100%;
}

main { display: block; }

a {
	color: inherit;
	outline: none;
	text-decoration: none;
}
a:hover,
a:focus,
a:active { text-decoration: none; }

a img { border: none; }

li img,
dt img,
dd img{ vertical-align: top; }

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

html, body {
	height: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
body { -webkit-text-size-adjust: 100%; }

.red { color: var(--color-red); }
.bold { font-weight: bold; }
@media screen and (min-width:769px), print{
	.sp { display: none !important; }
	a[href^="tel:"] { pointer-events: none; }
	.inner {
		width: 730px;
		margin-inline: auto;
		box-sizing: border-box;
	}
}
@media screen and (max-width:768px){
	.pc { display: none !important; }
}

#header .logo {
	top: 0;
	left: 0;
	position: absolute;
	a {
		display: block;
	}
}
@media screen and (min-width:769px), print{
	#header .logo a {
		width: 153px;
		padding: 26px 33px;
	}
}
@media screen and (max-width:768px){
	#header .logo a {
		width: 105.5px;
		padding: 16px 17px;
	}
}

#mainVis {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
@media screen and (min-width:769px), print{
	#mainVis {
		height: 100vh;
		max-width: 856px;
		min-height: 800px;
		margin-inline: auto;
		&::after {
			content: "";
			display: block;
			width: 595px;
			height: 312px;
			height: 312px;
			margin-top: -43px;
			background: url(../images/mainvis_img.png) no-repeat center center;
			background-size: cover;
		}
	}
}
@media screen and (max-width:768px){
	#mainVis {
		min-height: 100vh;
		padding-bottom: 40%;
		box-sizing: border-box;
		background: url(../images/mainvis_img.png) no-repeat center bottom;
		background-size: auto 35%;
		img {
			width: 85%;
			margin-bottom: ;
		}
	}
}

#cpPeriod {
	text-align: center;
	background: url(../images/campaign_period_bg.svg) no-repeat center top;
	background-size: auto 100%;
	box-sizing: border-box;
}
@media screen and (min-width:769px), print{
	#cpPeriod {
		height: 245px;
		padding-top: 45px;
		img { width: 693px; }
	}
}
@media screen and (max-width:768px){
	#cpPeriod {
		padding-block: 5% 8%;
		img {
			width: 78.7%;
		}
	}
}

#overview{
	.title { text-align: center; }
	.table table {
		width: 100%;
		table-layout: fixed;
		tr > * {
			font-weight: bold;
			box-sizing: border-box;
		}
		th {
			color: #fff;
			font-size: 16px;
			line-height: 21px;
			text-align: center;
			vertical-align: middle;
			background-color: var(--color-blue);
			sup {
				font-size: 9px;
			}
		}
		td {
			background-color: #fff;
		}
		.list li {
			padding-left: 2em;
			text-indent: -2em;
			.number {
				width: 2em;
				text-indent: 0;
				display: inline-block;
			}
		}
	}
	.notice {
		color: #fff;
		a {
			font-weight: bold;
			color: var(--color-blue);
		}
	}
}
@media screen and (min-width:769px), print{
	#overview {
		padding: 53px 0 0;
		.title img { height: 42.5px; }
		.table {
			margin-top: 40px;
			table {
				max-width: 100%;
				tr > * {
					padding: 16px 26px;
				}
				th {
					width: 295px;
				}
				tr + tr {
					th {
						border-top: 1px solid #fff;
					}
					td {
						border-top: 1px solid var(--color-blue);
					}
				}
				tr:first-child th {
					border-top-left-radius: 14px;
				}
				tr:last-child {
					td {
						padding-block: 31px;
					}
					th {
						border-bottom-left-radius: 14px;
					}
				}
				.list {
					margin-top: 1em;
					li {
						margin-top: 0.8em;
					}
				}
			}
		}
	}
	.notice {
		margin-top: 20px;
	}
}
@media screen and (max-width:768px){
	#overview {
		.title {
			padding-block: 24px;
			img {
				height: 5.68vw;
				min-height: 21.3px;
			}
		}
		.table {
			padding-inline: 40px;
			table, tbody, tr, tr> * {
				display: block;
			}
			tr:first-child th {
				border-radius: 17px 17px 0 0;
			}
			th {
				height: 68px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			td {
				padding: 14px 16px;
			}
			.list {
				margin-top: 1em;
				li {
					margin-top: 0.3em;
				}
			}
		}
		.notice {
			padding: 20px 40px 0;
		}
	}
}

#contact {
	.title { text-align: center; }
}
#sendTo {
	overflow: hidden;
	font-weight: bold;
	dt {
		color: #fff;
		font-size: 16px;
		line-height: 21px;
		text-align: center;
		background-color: var(--color-blue);
	}
	dd {
		background-color: #fff;
		.list li {
			padding-left: 1.4em;
			text-indent: -1.4em;
			&::before {
				content: "";
				width: 0.9em;
				height: 0.9em;
				margin-top: -0.1em;
				margin-right: 0.5em;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				background-color: var(--color-yellow);
			}
		}
	}
}
@media screen and (min-width:769px), print{
	#contact {
		margin-top: 100px;
		.title img { height: 42.5px; }
	}
	#sendTo {
		display: flex;
		margin-top: 40px;
		& > * {
			display: flex;
			align-items: center;
			padding-block: 16px;
		}
		dt {
			width: 278px;
			position: relative;
			justify-content: center;
			border-radius: 14px 0 0 14px;
			&::after {
				content: "";
				display: block;
				position: relative;
				width: 20px;
				height: 100%;
				position: absolute;
				background: url(../images/contact_bg.svg) no-repeat right center;
				background-size: cover;
				top: 0;
				left: 100%;
				aspect-ratio: 21.374 / 123.017;
			}
		}
		dd {
			box-sizing: border-box;
			width: calc(100% - 278px);
			padding-left: 53px;
			justify-content: flex-start;
		}
	}
}
@media screen and (max-width:768px){
	#contact {
		margin-top: 56px;
		.title {
			img {
				height: 5.68vw;
				min-height: 21.3px;
			}
		}
		#sendTo {
			margin: 21px 40px 0;
			dt {
				height: 85px;
				padding-top: 16px;
				border-radius: 17px 17px 0 0;
				background: url(../images/sendto_bg.svg) #fff no-repeat center top;
				background-size: auto 100%;
				box-sizing: border-box;
			}
			dd {
				padding: 19px 18px 20px;
			}
		}
	}
}

#noApp {
	background-color: var(--color-yellow);
	.title {
		text-align: center;
		box-sizing: border-box;
		background: url(../images/campaign_period_bg.svg) no-repeat center top;
		background-size: auto 100%;
	}
	#step {
		.subTitle {
			text-align: center;
		}
		.flow {
			dl {
				background: #fff;
				font-weight: bold;
				text-align: center;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				aspect-ratio: 1 / 1;
			}
		}
	}
	.link a {
		display: block;
		margin-inline: auto;
		border-radius: 999px;
		background-color: var(--color-pink);
		img {
			vertical-align: middle;
		}
	}
}
@media screen and (min-width:769px), print{
	#noApp {
		margin-top: 111px;
		padding-bottom: 78px;
		.title {
			height: 245px;
			padding-top: 41px;
			img { height: 107.5px; }
		}
		#step {
			.subTitle img {
				width: 709px;
				margin-block: 50px 54px;
			}
			.flow {
				display: flex;
				justify-content: center;
				dl {
					width: 294px;
					margin-inline: 12px;
					dt img {
						height: 165px;
						margin-bottom: 16px;
					}
				}
			}
		}
		.link a {
			width: 295px;
			margin-top: 43px;
			&:hover {
				background-color: var(--color-yachtBlue);
			}
		}
	}
}
@media screen and (max-width:768px){
	#noApp {
		margin-top: 64px;
		padding-bottom: 55px;
		.title {
			height: 32.26vw;
			padding-top: 5.5%;
			margin-bottom: 11.2vw;
			img {
				width: 73.6%;
			}
		}
		#step {
			.subTitle img {
				width: 88.5%;
			}
			.flow {
				margin-top: 27px;
				dl {
					width: 294px;
					max-width: 90%;
					margin: 6px auto 0;
					dt img {
						width: 153.7px;
						max-width: 100%;
						margin-block: 16px;
					}
				}
			}
		}
		.link a {
			width: 294px;
			max-width: 90%;
			margin-top: 32px;
		}
	}
}

#faq {
	.title {
		text-align: center;
	}
	.questions {
		max-width: 506px;
		margin-inline: auto;
		li + li { margin-top: 22px; }
		.faq_q, .faq_a > div {
			position: relative;
			padding-left: 50px;
			padding-block: 13px;
			box-sizing: border-box;
			background-size: 26px;
			background-repeat: no-repeat;
		}
		.faq_q {
			display: flex;
			cursor: pointer;
			align-items: center;
			min-height: 70px;
			font-weight: bold;
			position: relative;
			padding-right: 37px;
			background-color: #fff;
			background-image: url(../images/faq_icon_q.svg);
			background-position: 11px 22px;
			&::before, &::after {
				content: "";
				top: 0;
				bottom: 0;
				margin-block: auto;
				display: block;
				position: absolute;
				background-color: var(--color-yachtBlue);
			}
			&::before {
				width: 14px;
				height: 2px;
				right: 14px;
			}
			&::after {
				width: 2px;
				height: 14px;
				right: 20px;
				transition-duration: .3s;
				transition-property: height;
			}
			&:hover {
				background-color: var(--color-yellow);
			}
		}
		li.open .faq_q::after {
			height: 0
		}
		.faq_a {
			display: none;
			& > div {
				color: #fff;
				padding-right: 25px;
				background-image: url(../images/faq_icon_a.svg);
				background-position: 11px 10px;
				a {
					font-weight: bold;
					color: var(--color-blue);
				}
			}
		}
	}
}
@media screen and (min-width:769px), print{
	#faq {
		padding-block: 80px 75px;
		.title img {
			width: 330px;
		}
		.questions {
			margin-top: 44px;
		}
	}
}
@media screen and (max-width:768px){
	#faq {
		padding: 62px 20px 40px;
		.title img {
			width: 163.5px;
		}
	}
}

#footer {
	color: #fff;
	background-color: var(--color-blue);
	.returnPageTop {
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #fff;
	}
	.information {
		padding-top: 40px;
		.logo {
			width: 105px;
		}
		.affiliation {
			font-size: 10px;
			line-height: 21px;
			margin-top: 15px;
		}
		.copyright {
			font-size: 8px;
		}
	}
	.link a {
		height: 81px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--color-pink);
		img {
			max-width: 295px;
		}
	}
}
@media screen and (min-width:769px), print{
	#footer {
		.returnPageTop:hover {
			font-weight: bold;
			color: var(--color-blue);
			background-color: #fff;
		}
		.information {
			padding-bottom: 28px;
		}
		.affiliation {
			margin-block: 45px;
		}
		.link a:hover {
			background-color: var(--color-yellow);
		}
	}
}
@media screen and (max-width:768px){
	#footer {
		.information {
			padding-inline: 40px;
			padding-bottom: 17px;
			.copyright {
				margin-top: 30px;
				text-align: center;
			}
		}
	}
}