@charset "utf-8";


/* --------------------------------------------------- */
/* ティザー */
/* --------------------------------------------------- */
#teaser .separater {
	color: #aacc03;
	border-bottom: 4px dotted;
}
#teaser h2 {
	padding-top: 3.0vw;
	background-image: url('../img/common/mark.svg');
	background-repeat: no-repeat;
	background-size: 3.0vw 3.0vw;
	background-position: 50% 0;
	font-size: 2.0vw;
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}
#teaser h2 + p {
	margin-top: 1.0vw;
	font-size: 1.3vw;
	text-align: center;
}

.asy-block {
	width: 93%;
}
.asy-block.fl-left {
	margin-left: 0;
	margin-right: auto;
}
.asy-block.fl-right {
	margin-left: auto;
	margin-right: 0;
}
.asy-block > div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 0 6%;
}
.asy-block > div > * {
	width: 47%;
}



@media screen and (max-width: 1280px) {
	#teaser h2 {
		padding-top: 4.0vw;
		background-size: 4.5vw 4.5vw;
		font-size: 3.0vw;
	}
	#teaser h2 + p { font-size: 1.8vw; }
}
@media screen and (max-width: 767px) {
	#teaser h2 {
		padding-top: 6.0vw;
		background-size: 6.5vw 6.5vw;
		font-size: 4.0vw;
	}
	#teaser h2 + p { font-size: 2.5vw; }
	.asy-block { width: 94%; }
}
@media screen and (max-width: 480px) {
	#teaser h2 {
		padding-top: 7.5vw;
		background-size: 8.0vw 8.0vw;
		font-size: 6.0vw;
	}
	#teaser h2 + p { font-size: 4.2vw; }
	.asy-block { width: 95%; }
}

/* --------------------------------------------------- */
/* Main Visual */
/* --------------------------------------------------- */
#mv {
	position: relative;
	padding-top: 3.0vw;
}
#mv::before {
	content: '';
	position: absolute;
	top: 66.66%;
	left: 0;
	right: 0;
	display: block;
	padding-top: 44.44%;
	width: 100%;
	background-image: url('../img/teaser/mv-bg.webp');
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateY(-50%);
}
#mv > .asy-block { position: relative; z-index: 2; }
#mv figure {
	padding-top: 40%;
	width: 60%;
	border-radius: 0 4vw 4vw 0;
	background-image: url('../img/teaser/mv.webp');
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 50% 50%;
}
#mv figure + div { width: 34%; }
#mv h1 {
	font-size: 2.4vw;
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	line-height: 1.4;
}
#mv h1 + p {
	margin-top: 1.5em;
	font-size: 1.5vw;
}
#mv h1 + p span { display: block; }

@media screen and (max-width: 1280px) {
	#mv {
		position: relative;
		padding-top: 2.0vw;
	}
	#mv::before { top: 70%; }
	#mv > .asy-block { position: relative; z-index: 2; }
	#mv figure {
		padding-top: 50%;
		width: 50%;
		border-radius: 0 4vw 4vw 0;
	}
	#mv figure + div { width: 44%; }
	#mv h1 { font-size: 3.1vw; }
	#mv h1 + p {
		margin-top: 1.5em;
		font-size: 2.0vw;
	}
}
@media screen and (max-width: 767px) {
	#mv::before {
		top: 75%;
		padding-top: 60%;
		width: 130%;
		background-size: cover;
		transform: translate(-15%, -50%) rotate(-8deg);
	}
	#mv > .asy-block > div {
		flex-direction: column;
		align-items: flex-end;
		gap: 5.0vw 0;
	}
	#mv figure {
		padding-top: 75%;
		width: 100%;
		background-size: cover;
		border-radius: 0 4vw 4vw 0;
	}
	#mv figure + div { width: 95%; }
	#mv h1 { font-size: 4.5vw; text-align: center; }
	#mv h1 + p {
		margin-top: 1.5em;
		font-size: 2.5vw;
		text-align: center; 
	}

}
@media screen and (max-width: 480px) {
	#mv::before {
		top: 70%;
		padding-top: 80%;
		width: 180%;
		background-size: cover;
		transform: translate(-10%, -70%) rotate(-10deg);
	}
	#mv > .asy-block > div { gap: 8.0vw 0; }
	#mv figure {
		padding-top: 115%;
		border-radius: 0 6vw 6vw 0;
	}
	#mv h1 { font-size: 6.2vw; }
	#mv h1 + p {
		margin-top: 1.5em;
		font-size: 4.5vw;
	}

}


/* --------------------------------------------------- */
/* Headline */
/* --------------------------------------------------- */
#headline archive { display:block; }
#headline dl {
	display: table;
	width: 100%;
}
#headline dl dt {
	padding-top: 1.0em;
	width: 15%;
	float: left;
}
#headline dl dd {
	padding: 0.8em 0;
	padding-left: 15%;
}
#headline dl dt p { font-size: 1.3vw; }
#headline dl dd h3 { color: #aacc03;  font-size: 1.4vw; font-weight: 500; }
#headline dl dd p { font-size: 1.3vw; }

@media screen and (max-width: 1280px) {
	#headline dl dt p { font-size: 1.6vw; }
	#headline dl dd h3 { font-size: 1.7vw; }
	#headline dl dd p { font-size: 1.6vw; }
}
@media screen and (max-width: 767px) {
	#headline dl dt {
		padding-top: 1.0em;
		width: 100%;
		float: none;
	}
	#headline dl dd {
		padding: 0.3em 0 1.0em;
		padding-left: 0;
	}
	#headline dl dt p { font-size: 2.3vw; }
	#headline dl dd h3 { font-size: 2.5vw; }
	#headline dl dd p { font-size: 2.3vw; }
}
@media screen and (max-width: 480px) {
	#headline dl dt p { font-size: 4.0vw; }
	#headline dl dd h3 { font-size: 4.5vw; }
	#headline dl dd p { font-size: 4.0vw; }
}

/* --------------------------------------------------- */
/* About */
/* --------------------------------------------------- */
#about { position: relative; }
#about .asy-block p { font-size: 1.3vw; }
#about .asy-block p + p { margin-top: 1.5em; }
#about figure {
	padding-top: 33.33%;
	width: 60%;
	border-radius: 4vw 0 0 4vw;
	background-image: url('../img/teaser/about.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}
#about em { color: #aacc03; }
#about .insurance h3 {
	color: #aacc03;
	font-size: 1.8vw;
	font-weight: 600;
	text-align: center;
}
#about .insurance ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75em 1.5%;
	margin-top: 1.5em;
	font-size: 1.3vw;
}
#about .insurance ul li {
	width: 32%;
	background-color:#eef6e9;
	border-radius: 5px;
	line-height: 2.3;
	text-align: center;
}
#about .btn {
	margin-left: auto;
	margin-right: auto;
	width: 320px;
	text-align: center;
}
#about .btn a {
	display: block;
	padding: 0 1.0em;
	background-color: #aacc03;
	border-radius: 160px;
	color: #fff;
	font-size: 2.1rem;
	line-height: 2.2;
}



@media screen and (max-width: 1280px) {
	#about .asy-block p { font-size: 1.8vw; }
	#about .insurance h3 { font-size: 2.0vw; }
	#about .insurance ul {
		gap: 0.75em 1.5%;
		margin-top: 1.5em;
		font-size: 1.6vw;
	}
	#about .btn a {
		padding: 0 1.0em;
		border-radius: 160px;
		font-size: 1.7vw;
	}
}
@media screen and (max-width: 767px) {
	#about > .asy-block > div {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 5.0vw 0;
	}
	#about figure { padding-top: 50%; }
	#about > .asy-block > div > figure { width: 100%; }
	#about > .asy-block > div > div { width: 94%; }
	#about .asy-block p { font-size: 2.5vw; }
	#about .insurance h3 { font-size: 3.2vw; }
	#about .insurance ul {
		gap: 0.75em 1.5%;
		margin-top: 1.5em;
		font-size: 2.3vw;
	}
	#about .btn { width: 50%; }
	#about .btn a { font-size: 2.3vw; }
}
@media screen and (max-width: 480px) {
	#about .asy-block p { font-size: 4.2vw; }
	#about .insurance h3 { font-size: 5.0vw; }
	#about .insurance ul {
		gap: 0.75em 1.5%;
		margin-top: 1.5em;
		font-size: 4.0vw;
	}
	#about .insurance ul li:nth-last-child(-n+2) { width: 48.5%; }
	#about .btn { width: 66.66%; }
	#about .btn a { font-size: 4.0vw; }
}








/* --------------------------------------------------- */
/* Possible */
/* --------------------------------------------------- */
#possible { position: relative; }
#possible::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: block;
	padding-top: 44.44%;
	width: 100%;
	background-image: url('../img/teaser/possible-bg.webp');
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateY(-50%);
}
#possible .block-m { position: relative; z-index: 2; }
#possible .things {
	display: flex;
	justify-content: center;
	gap: 5vw 3.33%;
	width: 100%;
}
#possible .things > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3.0vw 0;
	background-color: rgba(255,255,255, 0.70);
	border-radius: 3.0vw;
	box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
	width: 18%;
	text-align: center;
}
#possible .things h3 {
	font-size: 1.7vw;
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	line-height: 1.4;
}
#possible .things h3 i {
	display: block;
	margin: 0 auto 0.25em;
	width: 64px;
}
#possible .things div:first-child h3 i .mark-2 { fill: #e4007f; }
#possible .things div:nth-child(2) h3 i .mark-2 { fill: #f8b62d; }
#possible .things div:nth-child(3) h3 i .mark-2 { fill: #a40b5d; }
#possible .things div:nth-child(4) h3 i .mark-2 { fill: #00a0e9; }
#possible .cover {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 2.0em;
}
#possible .cover p { font-size: 1.3vw; }
#possible .cover p em { color: #aacc03; }

@media screen and (max-width: 1280px) {
	#possible .things { gap: 5vw 4%; }
	#possible .things > div {
		padding: 3.0vw 0;
		width: 22%;
	}
	#possible .things h3 { font-size: 2.2vw; }
	#possible .things h3 i {
		margin: 0 auto 0.25em;
		width: 56px;
	}
	#possible .cover p { font-size: 1.8vw; }
}
@media screen and (max-width: 767px) {
	#possible::before {
		top: 35%;
		padding-top: 60%;
		width: 130%;
		transform: translate(-15%, -50%) rotate(-10deg);
	}
	#possible .things { flex-wrap: wrap; gap: 3.5vw 4%; }
	#possible .things > div {
		padding: 3.0vw 0;
		width: 48%;
	}
	#possible .things h3 { width: 100%; font-size: 3.5vw; }
	#possible .things h3 i {
		margin: 0 auto 0.25em;
		width: 15%;
	}
	#possible .cover p { font-size: 2.5vw; }
}
@media screen and (max-width: 480px) {
	#possible::before {
		top: 35%;
		padding-top: 60%;
		width: 140%;
		transform: translate(-15%, -50%) rotate(-20deg);
	}
	#possible .things h3 { width: 100%; font-size: 4.8vw; }
	#possible .things h3 i {
		margin: 0 auto 0.25em;
		width: 20%;
	}
	#possible .cover {
		flex-direction: column;
		gap: 0;
	}
	#possible .cover p { font-size: 4.2vw; }
}





/* --------------------------------------------------- */
/* Policy */
/* --------------------------------------------------- */
#policy { position: relative; }
#policy .asy-block p {
	padding-left: 1.0em;
	text-indent: -1.0em;
	font-size: 1.3vw;
}
#policy .asy-block p em { color: #aacc03; }
#policy figure {
	padding-top: 33.33%;
	width: 60%;
	border-radius: 0 4vw 4vw 0;
	background-image: url('../img/teaser/policy.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;

}

@media screen and (max-width: 1280px) {
	#policy .asy-block p { font-size: 1.8vw; }
}
@media screen and (max-width: 767px) {
	#policy > .asy-block > div {
		flex-direction: column;
		align-items: flex-end;
		gap: 5.0vw 0;
	}
	#policy figure { padding-top: 50%; }
	#policy > .asy-block > div > figure { width: 100%; }
	#policy > .asy-block > div > div { width: 93%; }
	#policy .asy-block p { font-size: 2.5vw; }
}
@media screen and (max-width: 480px) {
	#policy .asy-block p { font-size: 4.2vw; }
}


/* --------------------------------------------------- */
/* Flow */
/* --------------------------------------------------- */
#flow { position: relative; }
#flow .block-m { position: relative; z-index: 2;}
#flow::before {
	content: '';
	position: absolute;
	top: 35%;
	left: 0;
	right: 0;
	display: block;
	padding-top: 35%;
	width: 120%;
	background-image: url('../img/teaser/flow-bg.webp');
	background-repeat: no-repeat;
	background-size: cover;
	transform: translate(-10%, -50%) rotate(-7deg);
}
#flow .steps {
	display: flex;
	justify-content: center;
	gap: 0 2%;
}
#flow .steps > div {
	position: relative;
	padding: 4% 0 6%;
	width: 18%;
	text-align: center;
}
#flow .steps > div::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 103%;
	height: 100%;
	border: 1px solid #eee;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.03);
	transform: translate(-45%, -50%) rotate(40deg);
	
}

#flow .steps p {
	position: relative;
	z-index:3;
	color: #aacc03;
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-size: 4.5vw;
}
#flow .steps h3 {
	position: relative;
	z-index:3;
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-size: 1.5vw;
}


@media screen and (max-width: 1280px) {
	#flow .steps { gap: 0 1%; }
	#flow .steps > div {
		padding: 5% 0 8%;
		width: 23%;
	}
	#flow .steps h3 { font-size: 2.0vw; }
	#flow .steps p { font-size: 5.0vw; }
}
@media screen and (max-width: 767px) {
	#flow .steps { gap: 0 1%; }
	#flow .steps > div {
		padding: 5% 0 8%;
		width: 23%;
	}
	#flow .steps > div::before {
		width: 104%;
		height: 100%;
		border: 1px solid #eee;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
		box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.03);
		transform: translate(-45%, -50%) rotate(25deg);
		
	}
	#flow .steps h3 { font-size: 2.4vw; }
	#flow .steps p { font-size: 6.0vw; }
}
@media screen and (max-width: 480px) {
	#flow::before {
		top: 0;
		padding-top: 100%;
		width: 200%;
		transform: translate(-35%, -50%) rotate(-40deg);
	}
	#flow .steps { flex-direction: column; align-items: center; gap: 0 1%; }
	#flow .steps > div {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0 5%;
		padding: 3% 8% 5%;
		width: 65%;
	}
	#flow .steps > div::before {
		width: 105%;
		transform: translate(-55%, -52%) rotate(-10deg);
		
	}
	#flow .steps h3 { width: 80%; font-size: 4.3vw; line-height: 1.4; text-align:left; }
	#flow .steps p { width: 20%; font-size: 12.0vw; text-align: right; }
}



/* --------------------------------------------------- */
/* Access */
/* --------------------------------------------------- */
#access h4 {
	font-size: 1.5vw;
	font-weight: 500;
}
#access p { margin-top: 1.0em; font-size: 1.3vw; }
#access .way { padding: 3.0vw 0; }
#access .gmap {
	position: relative;
	padding-top: 40vw;
}
#access .gmap iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border-radius: 4.0vw 0 0 4.0vw;
}



@media screen and (max-width: 1280px) {
	#access .gmap { padding-top: 50vw; }
	#access h4 { font-size: 2.0vw; }
	#access p { font-size: 1.8vw; }
}
@media screen and (max-width: 767px) {
	#access > .asy-block > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 5.0vw 0;
	}
	#access > .asy-block > div > .gmap { padding-top: 75%; width: 100%; }
	#access > .asy-block > div > div { width: 94%; }
	#access .way { padding:  0; }
	#access h4 { font-size: 3.0vw; }
	#access p { font-size: 2.5vw; }
}
@media screen and (max-width: 480px) {
	#access > .asy-block > div > .gmap { padding-top: 100%; width: 100%; }
	#access h4 { font-size: 5.0vw; }
	#access p { font-size: 4.2vw; }
}

.timetable {
	margin-top: 1.5em;
	width: 100%;
	font-size: 1.3vw;
	text-align: center;
}
.timetable thead th,
.timetable thead td { border-bottom: 1px solid #ddd; }
.timetable th {
	padding: 0.4em 0;
	width: 34%;
	border-right: 1px solid #ddd;
	vertical-align: middle;
}
.timetable td { padding: 0.4em 0; width:  11%; vertical-align: middle; }
#access .timetable p { margin: 0;  }
#access .timetable thead p { font-size: 1.3vw; }
#access .timetable tbody td p { font-size: 1.8vw; color: #999; }
#access .timetable tbody th p { font-size: 1.3vw; }
#access .timetable tbody td p.open { color: #aacc03; }
 
@media screen and (max-width: 1280px) {
	#access .timetable thead p { font-size: 1.6vw; }
	#access .timetable tbody td p { font-size: 2.0vw; }
	#access .timetable tbody th p { font-size: 1.6vw; }
}
@media screen and (max-width: 767px) {
	#access .timetable thead p { font-size: 2.5vw; }
	#access .timetable tbody td p { font-size: 3.5vw; }
	#access .timetable tbody th p { font-size: 2.5vw; }
}
@media screen and (max-width: 480px) {
	#access .timetable thead p { font-size: 3.5vw; }
	#access .timetable tbody td p { font-size: 5.0vw; }
	#access .timetable tbody th p { font-size: 3.5vw; }
}


/* --------------------------------------------------- */
/* Privacy */
/* --------------------------------------------------- */
#privacy h1 {
	color: #aacc03;
	font-size: 2.5vw;
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}
#privacy h3 {
	color: #aacc03;
	font-size: 1.8vw;
}
#privacy h4 { font-size: 1.5vw; }
#privacy p { font-size: 1.2vw; }


@media screen and (max-width: 1280px) {
	#privacy h1 { font-size: 3.5vw; }
	#privacy h3 { font-size: 2.0vw; }
	#privacy h4 { font-size: 1.9vw; }
	#privacy p { font-size: 1.8vw; }
}
@media screen and (max-width: 767px) {
	#privacy h1 { font-size: 4.5vw; }
	#privacy h3 { font-size: 2.8vw; }
	#privacy h4 { font-size: 2.6vw; }
	#privacy p { font-size: 2.5vw; }
}
@media screen and (max-width: 480px) {
	#privacy h1 { font-size: 6.0vw; }
	#privacy h3 { font-size: 4.0vw; }
	#privacy h4 { font-size: 3.7vw; }
	#privacy p { font-size: 3.5vw; }
}


/* --------------------------------------------------- */
/* モーダル */
/* --------------------------------------------------- */
#modal {
	position: fixed;
	z-index: 888;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 8%;
	display: flex;
	background-color: rgba(0,0,0,0.6);
	visibility: hidden;
	transition: all .5s;
}
#modal.dispon { display: flex; visibility: visible; }
#modal .mdwrap {
	position: relative;
	display: block;
	width: 80%;
	max-width: 480px;
	transition: all 0.5s;
	transition-delay: 0.1s;
	opacity: 0.0;
}
#modal.dispon .mdwrap { opacity: 1.0; }
#modal .mdwrap .btn-close {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 32px;
	height: 32px;
	background-color: #aacc03;
	border-radius: 50%;
	transform: translate(33%, -33%);
	cursor: pointer;
}
#modal .mdwrap .btn-close p {
	position: relative;
	display: block;
	margin: 7px auto ;
	width: 18px;
	height: 18px;
	transform: rotate(45deg);
}
#modal .mdwrap .btn-close p::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
}
#modal .mdwrap .btn-close p::after {
	content: '';
	position: absolute;
	top: 0;
	left: 8px;
	display: block;
	width: 2px;
	height: 100%;
	background-color: #fff;
}
#modal .mdwrap div:first-child {
	display: block;
	background-color: #fff;
	padding: 3.0em 2.0em;
	border-radius: 8px;
	box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.08);
}
#modal .mdwrap h4 {
	margin-bottom: 1.5em;
	color: #aacc03;
	font-size: 2.1rem;
	font-weight: 600;
	text-align: center;
}
#modal .mdwrap div:first-child > p {
	margin-top: 0.5em;
	padding-left: 1.0em;
	text-indent: -1.0em;
	font-size: 1.8rem;
	line-height: 1.6;
}

@media screen and (max-width: 640px) {
	#modal { padding: 7%; }
	#modal .mdwrap {
		width: 100%;
		max-width: 420px;
	}
	#modal .mdwrap div:first-child { padding: 2.0em 5%; }
	#modal .mdwrap h4 { font-size: 1.8rem; }
	#modal .mdwrap div:first-child > p  { font-size: 1.4rem; }
}



/* --------------------------------------------------- */
/* BasicBreakPoint */
/* --------------------------------------------------- */
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 480px) {
}