@charset "utf-8";
/* all
-------------------------------------------------------------------*/
html {
	background: #FFFFFF;
	color: #333333;
	font-family: "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4", "Zen Maru Gothic", sans-serif;
	font-size: 16px;
	line-height: 1.4;
}
body {
	width: 100%;
	font-size: 100%;
	text-align: center;
}
main {
	margin-bottom: 0;
	font-weight: bold;
	font-size: 18px;
	overflow: hidden;
}
.sitewrap {
	width: 1100px;
	min-width: 0;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
}
a.page_link {
	display: block;
	position: relative;
	z-index: -5;
	height: 0;
}
@media screen and (max-width:1200px) {
	.sitewrap {
		width: 100%;
		min-width: 0;
	}
}
@media screen and (max-width:768px) {
	html {
		color: #000000;
		font-size: 14px;
	}
	.sitewrap {
		width: 100%;
		min-width: 0;
	}
}
/* headerfooter
-------------------------------------------------------------------*/
header,
footer {
	padding: 12px 0;
	background: #7cc4f8;
	text-align: center;
}
#pageTop {
	position: fixed;
	bottom: 15px;
	right: 5%;
	width: 70px;
	z-index: 500;
}
@media screen and (max-width:768px) {
	#pageTop {
		width: 49px;
		right: 10px;
		bottom: 10px;
	}
}
section {
	padding-block:3.125em;
	background:var(--bg);
}
section#section00 {
	padding-top:0;
	--bg: #f0f9f8;
}
section:is(#section01,#section05,#section08) {
	--bg: url(../img/bg01.png);
}
section:is(#section02,#section06) {
	--bg: url(../img/bg02.png);
}
section:is(#section03,#section07) {
	--bg: url(../img/bg03.png);
}
section:is(#section04) {
	--bg: url(../img/bg04.png);
}
section img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.navis {
	display: flex;
	flex-wrap:wrap;
	gap: 0.5em;
	font-size: min(2.1vw,1.5rem);
	width: min(calc(5 * 8.75em + 0.5em * 4),100%);
	margin-inline: auto;
}
.navis a {
	--bg:#f7c4d1;
	display: flex;
	align-items: center;
	justify-content: center;
	width:8.75em;
	height:5.833333333333333em;
	color: #87767c;
	font-weight:bold;
	background:var(--bg);
	border-radius:1.041666666666667em;
	paint-order: stroke;
    -webkit-text-stroke: 5px #fff;
	text-decoration: none;
	transition:translate .4s;
}
.navis a:nth-child(2) {
	--bg:#fffde4;
}
.navis a:nth-child(3) {
	--bg:#d2ecfb;
}
.navis a:nth-child(4) {
	--bg:#bfe9b4;
}
.navis a:nth-child(5) {
	--bg:#ddd7ec;
}
.navis a:nth-child(6) {
	--bg:#fedb91;
}
.navis a:nth-child(7) {
	--bg:#cfdbfa;
}
.navis a:nth-child(8) {
	--bg:#e2ecaf;
}
.navis a:nth-child(9) {
	--bg:#f8c8f8;
}
.navis a:nth-child(10) {
	--bg:#f6bca8;
}
.mv-lead {
	margin-block:3em;
}
.section_title {
	margin-bottom:3.125em;
}
.content-image {
	width:90.90909090909091%;
	margin-inline:auto;
	display: block;
}
.content-image:not(:first-of-type) {
	margin-top: 3em;
}
.btn {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	gap:0.3em;
	font-size:2.25rem;
	font-weight:bold;
	color:#fff;
	background:#ff566e;
	border-radius:10em;
	padding:0.5em;
	margin-top:1.25em;
	text-decoration: none;
	transition:translate .4s;
	position: relative;
	z-index: 0;
}
.btn::after {
position: absolute;
	z-index: 1;
	margin: auto;
	inset: 0 4% 0 auto;
	content:"";
	width:0.4em;
	aspect-ratio:4/9;
	background:#fff;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
.flex-box {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:1vw 0;
	width:90.90909090909091%;
	margin-inline:auto;
	margin-top:2em;
}
.flex-box a {
	display:block;
	width:49.8%;
	transition:translate .4s;
}
@media (any-hover: hover) {
	:is(.navis,.flex-box) a:hover {
		translate:0 0.2em;
	}
	.btn:hover {
		translate:0 10px;
		text-decoration: none;
	}
}
@media screen and (max-width:768px) {
	section {
		padding-block:2em;
	}
	.sitewrap {
		padding-inline:10px;
	}
	.mv-image {
		max-width:inherit;
		width:calc(100% + 20px);
		margin-left:-10px;
	}
	.mv-lead {
		margin-block:1.5em;
	}
	.navis {
		justify-content:center;
		font-size: 2.05vw;
		width: 100%;
	}
	.navis a {
		height:5em;
	    -webkit-text-stroke: 2px #fff;
	}
	.section_title {
		margin-bottom: 1.25em;
	}
	.content-image,
	.flex-box {
		width:100%;
	}
	.content-image:not(:first-of-type),
	.flex-box {
		margin-top: 0.75em;
	}
	.btn {
		font-size:1.5rem;
	}
}
@media screen and (max-width:374px) {
	.navis {
		font-size: 2vw;
	}
}