@charset "UTF-8";
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.5;
  box-sizing: border-box;
  color: #111;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 100%;
  background: #FFFF9B;
}
body {
    height: auto;
    position: relative;
}
 

/*-- 共通カラー --*/
:root {
  --blue1: #08328F;
  --blue2: #1295CB;
  --blue3: #0276AD;
  --pink1: #E54977;
  --brown1: #564256;
}


/*--------------------------------------------------------
　header
--------------------------------------------------------*/
header {
	width: 100%;
	z-index: 10;
	margin: 0 auto;
    padding: 0px 0 0 0;
    position: relative;
    text-align: center;
    background: #A8D8EE;
    background: url(../img/main_bg2026.png) repeat-x;
    background-size: cover;
}
header img {
	width: 100%;
	max-width: 1100px;
}



/*--------------------------------------------------------
　main
--------------------------------------------------------*/
main {
	width: 96%;
	max-width: 1000px;
	margin: 0 auto;
}
main section {
	width: 100%;
	margin: 50px 0 100px 0;
	border: 5px solid var(--blue1);
	border-radius: 15px;
	background: #FFF;
	padding: 20px;
	@media screen and (max-width:750px) { padding: 10px; }
}

main section h2 {
	display: block;
	width: 50%;
	background-color: var(--blue1);
	color: #FFF;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	margin: -50px auto 20px auto;
	@media screen and (max-width:750px) {
		width: 60%;
		margin: -40px auto 10px auto;
	}
}


/*--------------------------------------------------------
　period
--------------------------------------------------------*/
main section.period {
	text-align: center;
	color: var(--blue1);
}
main section.period strong {
	text-align: center;
	font-weight: bold;
	font-size: 36px;
	font-size: clamp(1.75rem, 0.25rem + 3.2vw, 2.25rem);
}
main section.period p {
	display: block;
	line-height: 1.8;
	margin-top: 15px;
	font-size: 20px;
	font-size: clamp(0.875rem, -0.25rem + 2.4vw, 1.25rem);
}


/*--------------------------------------------------------
　apply
--------------------------------------------------------*/
main section.apply {
	text-align: center;
	font-size: 16px;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
}
main section.apply ul.step {
	display: block;
	width: 90%;
	margin: 20px auto;
	display: flex;
	justify-content: space-between;
	@media screen and (max-width:750px) { display: block; }
}
main section.apply ul.step li {
	width: 30%;
	font-size: 16px;
	@media screen and (max-width:750px) { width: 100%; }
}
main section.apply ul.step li img {
	width: 100%;
	margin-bottom: 10px;
}
@media screen and (max-width:750px) {
	main section.apply ul.step li:nth-child(2), 
	main section.apply ul.step li:nth-child(3) {
	margin-top: 30px;
	}
}
main section.apply h3 {
	display: block;
	margin: 80px auto 20px auto;
	padding: 5px 0 5px 0;
	width: 90%;
	background: var(--pink1);
	color: #FFF;
	border-radius: 100px;
	font-size: 24px;
	@media screen and (max-width:750px) { width: 100%; }
}
main section.apply p.note {
	display: block;
	margin: 20px auto 20px auto;
	width: 90%;
	@media screen and (max-width:750px) { width: 100%; }
	text-align: left;
	font-size: 16px;
}
main section.apply p.note span {
	text-indent: 1em;
	padding-left: -1em;
}

@media screen and (max-width:750px) {
main section.apply p.warning1 img {
	width: 100%;
}
}



main section.apply ul.warning2 {
	display: block;
	margin: 20px auto 20px auto;
	width: 90%;
	display: flex;
	justify-content: space-between;
	@media screen and (max-width:750px) { display: block; }
}
main section.apply ul.warning2 li:nth-child(1) {
	width: 50%;
	@media screen and (max-width:750px) { width: 100%; }
}
main section.apply ul.warning2 li:nth-child(2) {
	width: 47%;
	@media screen and (max-width:750px) { width: 100%; }
}
main section.apply ul.warning2 li:nth-child(1) img {
	width: 100%;
}
main section.apply ul.warning2 li:nth-child(2) img {
	width: 140px;
	display: block;
	margin: 0px auto 10px auto;
}
main section.apply ul.warning2 li:nth-child(2) {
	text-align: left;
	line-height: 1.8;
}
main section.apply ul.warning2 li hr {
	border: none;
	border-bottom: 1px solid #CCC;
	margin: 20px 0 20px 0;
}
main section.apply ul.warning2 .pink {
	color: var(--pink1);
}
main section.apply ul.warning2 .blue {
	color: var(--blue2);
}
@media screen and (max-width:750px) { 
	main section.apply ul.warning2 li img.good {
	margin-top: 30px;
	}
}



/*--------------------------------------------------------
　caution
--------------------------------------------------------*/
main section.caution {
	margin-bottom: 30px;
}
main section.caution h3 {
	display: block;
	margin: 30px auto 10px auto;
	padding: 7px 0 7px 0;
	width: 100%;
	background: var(--blue2);
	color: #FFF;
	font-weight: normal;
	text-align: center;
	border-radius: 5px;
	font-size: 18px;
}
main section.caution p {
	display: block;
	margin: 0 auto 0 auto;
	width: 98%;
	text-indent: -1em;
	padding-left: 1em;
	font-size: 16px;
	line-height: 1.8;
	@media screen and (max-width:750px) { line-height: 1.6; }
}
main section.caution p.nonindent {
	text-indent: 0em;
	padding-left: 0em;
}



.btn {
	width: 100%;
}
.btn a {
	display: block;
	width: 90%;
	text-decoration: none;
	color: #FFF;
	font-weight: 500;
	text-align: center;
	border-radius: 5px;
	background-image: linear-gradient(#FF9FB2, #E54977);
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0px auto 50px auto;
	padding: 25px 0 25px 0;
	position: relative;
	font-size: 36px;
	font-size: clamp(1.25rem, -1.75rem + 6.4vw, 2.25rem);
	@media screen and (max-width:750px) {
	width: 100%;
	padding: 35px 0 35px 0;
	}
}
.btn a::after {
	content: "";
	background: url(../img/arrow2.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	right: 20px;
	width: 30px;
	height: 30px;
}

.btn a:hover {
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: ripple 1.5s infinite;
	opacity: 0.8;
}
@keyframes ripple {
	0% {box-shadow: 0 0 0 0 #FF9FB2;}
	70% {box-shadow: 0 0 0 10px rgb(255 159 178 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(255 159 178 / 0%);}
}




/*--------------------------------------------------------
　footer
--------------------------------------------------------*/
footer {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	background: var(--blue2);
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 20px 15% 50px 15%;
	color: #FFF;
	line-height: 1.8;
	@media screen and (max-width:750px) { padding: 20px 10% 30px 10%; }
	@media screen and (max-width:450px) { padding: 20px 3% 30px 3%; }
	font-size: 16px;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
	text-align: center;
}
footer a {
	background-image: linear-gradient(#f7f7f7, #b8b8b8);
	color: #333;
	display: block;
	width: 60%;
	text-decoration: none;
	padding: 10px;
	margin: 15px auto 15px auto;
	position: relative;
	border-radius: 6px;
	@media screen and (max-width:750px) { width: 70%; }
	@media screen and (max-width:450px) { width: 90%; padding: 15px 0 15px 0; }
}
footer a::after {
	content: "→";
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	right: 15px;
	font-size: 16px;
	width: 30px;
	height: 30px;
}
footer a:hover {
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: ripple2 1.5s infinite;
	opacity: 0.8;
}
@keyframes ripple2 {
	0% {box-shadow: 0 0 0 0 #F7F7F7;}
	70% {box-shadow: 0 0 0 10px rgb(247 247 247 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(247 247 247 / 0%);}
}

footer strong {
	display: block;
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 1px solid #FFF;
	margin-bottom: 10px;
	font-size: 16px;
}




/* --- pagetop --- */
.pagetop {
	position: fixed;
	bottom: 5px;
	right: 5px;
	opacity: 0;
	filter: alpha(opacity=0);
	transform: scale(0.3);
	transition: all .6s;
	z-index: 10000;
}

.pagetop a {
	background: rgba(50, 50, 50, 1);
	background-color: var(--blue3);
	display: table-cell;
	width: clamp(3.125rem, 2.708rem + 1.67vw, 3.75rem);
	height: clamp(3.125rem, 2.708rem + 1.67vw, 3.75rem);
	text-align: center;
	vertical-align: middle;
	color: #fff !important;
	font-size: 1.6rem;
	text-decoration: none;
	background: -moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 50px;
}

.pagetop.show {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.pagetop a:hover {
	background: rgba(50, 50, 50, 0.8);
	text-decoration: none;
}





.pcLayer {
	display: block;
}
.spLayer {
	display: none;
}


/*--------------------------------------------------------
　setting for SP
--------------------------------------------------------*/
@media screen and (max-width:750px) {
.pcLayer {
	display: none;
}
.spLayer {
	display: block;
}

} /**** END setting for SP *****/