@charset "utf-8";

section {
}

section .inner-box {
	width: min(100%,1180px);
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
}

header {
	background-color: transparent;
}

header.fixed {
	background-color: #339AC9;
}

section h2 {
	width: min(calc(100% - 40px),1180px);
	margin: 0 auto 4.2rem;
	padding: 0 1.6rem 1.0rem;
	border-left: 14px solid #172F77;
	border-bottom: 6px solid #172F77;
	line-height: 1.25;
	text-align: left;
	font-weight: 700;
	font-size: var(--font-title);
	color: #172F77;
}

/* Main Visual ----------------------------------- */
.main-visual {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 6.09% 26.25% 0 8%;
	background: #319CCA url("../images/top_mv_bg_s.jpg") 50% 100% no-repeat;
	background-size: 100% auto;
	aspect-ratio: 3 / 2;
}

.main-visual > div p {
	margin: 3.8rem 0 3.4rem;
	line-height: 1.85;
	font-weight: 400;
	font-size: clamp(1.9rem, 2.016vw,2.5rem);;
	color: #FFFFFF;
}

.main-visual > div ul {
	display: flex;
	gap: 12px;
}

.main-visual > div ul li {
	width: calc((100% - 24px) / 3);
	padding: 0.5em 0.25em 0.55em;
	background-color: #0091C0;
	border-radius: 99em;
	text-align: center;
	font-weight: 700;
	color: #FFFFFF;
}

/* section01 ---------------------------------------- */
#sec01 {
	padding-top: var(--space-l);
	padding-bottom: var(--space-l);
}

#sec01 .inner-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#sec01 .inner-box figure {
	width: 42.857%;
}

#sec01 .inner-box p {
	line-height: 2.0;
	font-size: clamp(2.4rem, 2.812vw, 3.6rem);
}

/* section02 ---------------------------------------- */
#sec02 {
	padding-top: var(--space-m);
	padding-bottom: var(--space-s);
	background-color: #CCCCCC;
}

section#sec02 h2 {
	border-left: 0;
	border-bottom: 0;
	text-align: center;
	padding: 0;
}

#sec02 .image-box,
#sec02 .feature-box {
	display: flex;
	gap: 3.0rem;
}

#sec02 .image-box {
	margin-bottom: var(--space-s);
}

#sec02 .feature-box > * {
	width: calc((100% - 3.0rem) / 2);
}

#sec02 .feature-box p {
	line-height: 1.5;
}

#sec02 .feature-box figure {
	text-align: center;
}

#sec02 .feature-box figure img {
	max-width: 80%;
}

/* section03 ---------------------------------------- */
#sec03 {
	padding-top: var(--space-m);
	padding-bottom: var(--space-xl);
}

#sec03 .inner-box {
	display: flex;
	flex-flow: row-reverse nowrap;
	align-items: center;
	justify-content: space-between;
}

#sec03 .inner-box > figure {
	width: 28.84%;
	margin-left: 2.0rem;
}

#sec03 .inner-box > div {
	width: 63.4%;
}

#sec03 .inner-box > div h2 {
	width: 100% !important;
	margin: 0 0 13.24%;
	padding: 1.8rem 2.0rem;
	border-radius: 7px;
	background-color: #172F77;
	text-align: center;
	font-weight: 700;
	font-size: var(--font-l);
	color: #FFFFFF;
}

#sec03 .inner-box > div h2 + p {
	margin-bottom: 1.2rem;
	line-height: 1.25;
	text-align: center;
	font-weight: 700;
	font-size: var(--font-l);
}

#sec03 .balloon-box {
	position: relative;
	margin: 0 0 1.2rem 20px;
	padding: 1.8rem 2.0rem;
	background-color: #CCCCCC;
	border-radius: 12px;
	text-align: center;
}

#sec03 .balloon-box::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 14px; 
	left: -24px;
	border: 8px solid transparent;
	border-right: 24px solid #CCCCCC;
	transform: rotate(15deg);
}

#sec03 .balloon-box p {
	display: inline-block;
	line-height: 1.5;
	text-align: left;
	font-size: clamp(2.0rem, 2.187vw, 2.8rem);
}

#sec03 .balloon-box + small {
	display: block;
	text-align: right;
	font-weight: 700;
}

/* section04 ---------------------------------------- */
#sec04 {
	padding-bottom: var(--space-l);
}

#sec04 .inner-box > p:first-of-type {
	margin-bottom: var(--space-xs);
	line-height: 1.5;
	font-weight: 700;
	font-size: var(--font-l);
}

#sec04 .inner-box > p:first-of-type + p {
	margin-bottom: var(--space-m);
	line-height: 1.5;
}

#sec04 .weather-box {
	display: flex;
	flex-flow: row wrap;
	gap: 2.0rem;
}

#sec04 .weather-box > dl {
	width: calc((100% - 2.0rem) / 2);
}

#sec04 .weather-box dt {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2.4rem;
	padding: 1.7rem 2.0rem;
	font-weight: 700;
	font-size: var(--font-l);
	color: #FFFFFF;
}

#sec04 .weather-box dt::before {
	content: "";
	width: 60px;
	height: 60px;
	margin-right: 2.4rem;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

#sec04 .weather-box > dl:nth-of-type(1) dt {
	background-color: #666666;
}

#sec04 .weather-box > dl:nth-of-type(1) dt::before {
	background-image: url("../images/sec04_icon_rain.svg");
}

#sec04 .weather-box > dl:nth-of-type(2) dt {
	background-color: #FF9900;
}

#sec04 .weather-box > dl:nth-of-type(2) dt::before {
	background-image: url("../images/sec04_icon_sunny.svg");
}

#sec04 .weather-box dd {
	line-height: 1.5;
	text-align: center;
}

#sec04 .weather-box dd p {
	display: inline-block;
	margin: 3.2rem 0;
	text-align: left;
}

#sec04 .weather-box::after {
	content: "";
	width: 100%;
	height: 80px;
	margin: 0 auto 3.0rem;
	background: url("../images/sec04_icon_arrow.svg") 50% 50% no-repeat;
	background-size: contain;
}

#sec04 .weather-box + h3 {
	margin: 0 0 7.0rem;
	padding: 2.4rem 2.0rem;
	background-color: #172F77;
	text-align: center;
	font-weight: 700;
	font-size: var(--font-l);
	color: #FFFFFF;
}

#sec04 .image-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100%,840px);
	margin: 0 auto var(--space-xs);
}

#sec04 .image-box figure:nth-of-type(1) {
	width: 36.428%;
}

#sec04 .image-box figure:nth-of-type(2) {
	width: 53.571%;
}

#sec04 .efficacy {
	margin-bottom: var(--space-s);
	padding: 2.0rem 2.6rem;
	background-color: #85B1DF;
	border-radius: 99em;
}

#sec04 .efficacy p {
	line-height: 1.5;
	text-align: center;
	font-weight: 700;
	font-size: clamp(2.0rem,2.5vw,3.2rem);
	color: #FFFFFF;
}

#sec04 .efficacy p span {
	display: inline-block;
}

#sec04 .point-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.0rem;
}

/* section05 ---------------------------------------- */
#sec05 {
	padding-top: var(--space-s);
	padding-bottom: var(--space-s);
	background-color: #F3FAFE;
}

#sec05 .inner-box > p {
	margin-bottom: var(--space-xs);
	line-height: 1.5;
}

#sec05 .approach-box {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: var(--space-m) 8.928%;
}

#sec05 .approach-box > div {
	width: calc((100% - 8.928% - 8.928%) / 3);
}

.ap-item p {
	line-height: 1.5;
	font-size: var(--font-s);
}

.ap-item p strong {
	display: block;
	margin-bottom: 1em;
	text-align: center;
	font-size: var(--font-base);
}

/* section06 ---------------------------------------- */
#sec06 {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-l);
}

#sec06 h3 {
	width: min(100%,792px);
	margin: 0 auto 1.2rem;
	padding: 3.4rem 3.8rem;
	background-color: #85B1DF;
	border-radius: 99em;
	text-align: center;
}

#sec06 h3 + p {
	text-align: center;
	line-height: 1.5;
	font-weight: 700;
	font-size: var(--font-l);
	color: #0054A7;
}

#sec06 h3 + p span {
	display: inline-block;
}

#sec06 .membership {
	display: flex;
	padding: 5.4rem 0;
	gap: 3.0rem;
}

#sec06 .membership > dl {
	width: calc((100% - 3.0rem) / 2);
	border: 2px solid #000000;
}

#sec06 .membership dt {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.8rem 2.0rem;
	border-bottom: 2px solid #000000;
	background-color: #85B1DF;
	font-weight: 800;
	font-size: clamp(2.2rem, 2.656vw,2.4rem);
	color: #FFFFFF;
}

#sec06 .membership dt::before {
	content: "";
	width: 52px;
	height: 52px;
	margin-right: 2.4rem;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

#sec06 .membership > dl:nth-of-type(1) dt::before {
	background-image: url("../images/sec06_week_icon.svg");
}
#sec06 .membership > dl:nth-of-type(2) dt::before {
	width: 80px;
	background-image: url("../images/sec06_all_icon.svg");
}
#sec06 .membership > dl:nth-of-type(3) dt::before {
	width: 80px;
	background-image: url("../images/sec06_all_icon.svg");
}

#sec06 .membership dd:nth-of-type(1) {
	padding: 1.4rem 1.6rem;
	border-bottom: 2px solid #000000;
	line-height: 1.5;
	text-align: center;
	font-weight: 600;
	font-size: clamp(2.0rem, 1.3vw,3.0rem);
}

#sec06 .membership dd:nth-of-type(2) {
	padding: 1.4rem 1.6rem;
	line-height: 1.5;
	text-align: center;
	font-weight: 600;
	font-size: clamp(2.8rem, 1.3vw,4.2rem);
}

#sec06 .membership dd:nth-of-type(3) {
	padding: 1.4rem 1.6rem;
	line-height: 1.5;
	text-align: center;
	font-weight: 600;
	font-size: clamp(2.8rem, 1.3vw,4.2rem);
}

#sec06 .membership dd:nth-of-type(2) span {
	font-size: clamp(2.0rem, 1.9vw,3.0rem);
}

#sec06 .membership dd:nth-of-type(3) span {
	font-size: clamp(2.0rem, 1.9vw,3.0rem);
}

#sec06 .reserve-btn {
	width: min(100%,450px);
	margin: 0 auto;
}

#sec06 .reserve-btn a {
	display: block;
	width: 100%;
	padding: 1.4rem;
	border-radius: 7px;
	background-color: #0054A7;
	text-align: center;
	font-size: clamp(2.8rem, 3.281vw,4.2rem);
	color: #FFFFFF;
	box-shadow: 2px 2px 0 0 rgba(1,60,109,1.0);
}
/* section07 ---------------------------------------- */
#sec07 {
	padding-bottom: var(--space-l);
}

#sec07 .inner-box > p {
	margin-bottom: var(--space-xs);
	line-height: 1.5;
}

#sec07 .consent-form {
	padding: 3.0rem;
	background-color: #E6E6E6;
	border-radius: 30px;
	line-height: 1.5;
}

#sec07 .consent-form h3 {
	margin: 0 0 1.0rem;
	padding: 0 0 0.5rem;
	border-bottom: 2px solid #172F77;
	line-height: 1.25;
	text-align: center;
	font-weight: 800;
	font-size: clamp(2.8rem, 3.281vw,4.2rem);
}

#sec07 .consent-form h3 + p {
	text-align: center;
}

#sec07 .consent-form h4 {
	margin-top: 1em;
	font-weight: 800;
}

#sec07 .consent-form h4 + p {
	padding: 0 0.5em 0.25em;
}

#sec07 .consent-form p:last-child {
	margin-top: 1em;
	padding: 0 0.5em;
}

#sec07 .consent-form ul {
	display: flex;
	flex-flow: row wrap;
	padding-left: 0.75em;
}

#sec07 .consent-form ul li {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 0 0.5em 0 0;
}

#sec07 .consent-form ul li::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-right: 0.5em;
	background-color: #000000;
	border-radius: 50%;
	flex-shrink: 0;
}

#sec07 .consent-form ul li.br {
	width: 100%;
	height: 1px;
	padding: 0;
	line-height: 0;
}

#sec07 .consent-form ul li.br::before {
	content: none;
}

#sec07 .consent-form p.notes {
	padding-left: 1.5em;
	font-size: var(--font-s);
}

/* section08 ---------------------------------------- */
#sec08 {
	padding-bottom: var(--space-xl);
}

#sec08 .gmap iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 576 / 253;
}

#sec08 p {
	margin-top: var(--space-xs);
	line-height: 1.75;
}

/* ================================================ */
@media (min-width: 1281px) {

.main-visual {
	padding: 6.09% 38.45% 0 10%;
	background: #319CCA url("../images/top_mv_bg.jpg") 50% 100% no-repeat;
	background-size: 100% auto;
}

.main-visual > div {
	max-width: 664px;
}

/* section01 ---------------------------------------- */
/* section02 ---------------------------------------- */
/* section03 ---------------------------------------- */
/* section04 ---------------------------------------- */
/* section05 ---------------------------------------- */
/* section06 ---------------------------------------- */
/* section07 ---------------------------------------- */
/* section08 ---------------------------------------- */

}

/* ================================================ */
@media (max-width: 1000px) {

/* section01 ---------------------------------------- */
/* section02 ---------------------------------------- */
/* section03 ---------------------------------------- */
#sec03 .balloon-box p br {
	display: none;
}

/* section04 ---------------------------------------- */
/* section05 ---------------------------------------- */

/* section06 ---------------------------------------- */
#sec05 .approach-box {
	gap: var(--space-m) 6.4%;
}

#sec05 .approach-box > div {
	width: calc((100% - 6.4% - 6.4%) / 3);
}

/* section07 ---------------------------------------- */
/* section08 ---------------------------------------- */

}

/* ================================================ */
@media (max-width: 768px) {

/* Main Visual ----------------------------------- */
.main-visual {
	padding: 8.2% 27.45% 0 5%;
}

.main-visual > div p {
	margin: 2.4rem 0 2.2rem;
}

.main-visual > div p br {
	display: none;
}

/* section01 ---------------------------------------- */
#sec01 .inner-box {
	flex-flow: column nowrap;
	justify-content: center;
	gap: 3.0rem;
}

#sec01 .inner-box figure {
	width: 60%;
}

/* section02 ---------------------------------------- */
#sec02 .feature-box {
	flex-flow: column nowrap;
}

#sec02 .feature-box > * {
	width: 100%;
}

/* section03 ---------------------------------------- */
#sec03 .inner-box {
	flex-flow: column nowrap;
	justify-content: center;
	gap: 2.0rem;
}

#sec03 .inner-box > figure {
	width: 60%;
	margin-left: 0;
}

#sec03 .inner-box > div {
	width: 100%;
}

#sec03 .inner-box > div h2 {
	margin: 0 0 4.2rem;
}

#sec03 .balloon-box {
	margin: 0 0 1.2rem 0;
}

#sec03 .balloon-box::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: auto;
	bottom: -14px;
	left: 18px;
	border: 8px solid transparent;
	border-right: 24px solid #CCCCCC;
	transform: rotate(235deg);
}

/* section04 ---------------------------------------- */
/* section05 ---------------------------------------- */
#sec05 .approach-box > div {
	width: calc((100% - 8.928%) / 2);
}

/* section06 ---------------------------------------- */

#sec06 h3 {
	width: min(80%,792px);
	padding: 2.8rem 3.4rem;
}

#sec06 h3 img {
	max-width: 92%;
}

#sec06 .membership {
	flex-flow: column nowrap;
	align-items: center;
	padding: 4.2rem 0;
	gap: 3.0rem;
}

#sec06 .membership > dl {
	width: 100%;
	max-width: 80%;
}

/* section07 ---------------------------------------- */
/* section08 ---------------------------------------- */

}

/* ================================================ */
@media (max-width: 640px) {

/* Main Visual -------------------------------------- */
.main-visual {
	align-items: flex-start;
	justify-content: center;
	padding: 26% 10% 5% 10%;
	background: #008EBE url("../images/top_mv_bg_sp.jpg") 50% 100% no-repeat;
	background-size: 100% auto;
	aspect-ratio: 3 / 4;
}

.main-visual > div ul {
	flex-flow: column nowrap;
}

.main-visual > div ul li {
	width: 40%;
}

/* section01 ---------------------------------------- */
/* section02 ---------------------------------------- */
/* section03 ---------------------------------------- */
/* section04 ---------------------------------------- */
#sec04 .weather-box dt {
	padding: 1.2rem 1.6rem;
}

#sec04 .weather-box dt::before {
	margin-right: 2.0rem;
}

#sec04 .weather-box::after {
	height: 60px;
}

/* section05 ---------------------------------------- */
/* section06 ---------------------------------------- */
#sec06 h3 {
	width: min(92%,792px);
	padding: 2.8rem 3.4rem;
}

/* section07 ---------------------------------------- */
/* section08 ---------------------------------------- */
#sec08 .gmap iframe {
  aspect-ratio: 1;
}

}

/* ================================================ */
@media (max-width: 480px) {

/* section01 ---------------------------------------- */
/* section02 ---------------------------------------- */
/* section03 ---------------------------------------- */
/* section04 ---------------------------------------- */
#sec04 .weather-box + h3 {
	margin: 0 0 5.0rem;
	padding: 2.0rem;
}

#sec04 .image-box {
	flex-flow: column nowrap;
	justify-content: center;
	gap: 3.0rem;
}

#sec04 .image-box figure:nth-of-type(1) {
	width: min(60%,320px);
}

#sec04 .image-box figure:nth-of-type(2) {
	width: 100%;
}

#sec04 .efficacy {
	padding: 2.0rem 2.0rem;
}

#sec04 .point-box {
	gap: 1.8rem;
}

/* section05 ---------------------------------------- */

#sec05 .approach-box > div {
	width: min(100%,304px);
}

/* section06 ---------------------------------------- */
/* section07 ---------------------------------------- */
/* section08 ---------------------------------------- */

}