@charset "UTF-8";
main picture{
	display: block;
}


figure.mainimg {
	display: block;
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}
figure.mainimg > img {
	display: block;
	width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 576px){
	figure.mainimg {
		padding-top: 50%;
	}
}


section {
	position: relative;
	z-index: 1;
}




/*================================
	Page Header
================================*/
main .page__header {
	display: block;
	height: auto;
	padding: 0;
}
main .page__header .mv{
	overflow: hidden;
	width: 100%;
	height: 43.1vw;
	position: relative;
}
main .page__header .mv video{
	width: 105%;
	position:absolute;
	left:50%;top:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
@media (max-width: 575px) {
	main .page__header .container{
		margin-top: 20px;
	}
	main .page__header .container *{
		color: #333;
	}
}
@media (min-width: 576px) {
	main .page__header .container{
		position:absolute;
		left:50%;bottom:5em;
		-webkit-transform:translateX(-50%);
		-moz-transform:translateX(-50%);
		transform:translateX(-50%);
	}
}




/* ============================
   Intro
=============================== */
#intro .container {
	position: relative;
}
#intro .imgBox {
	padding-left: 7%;
}
#intro .txtBox .read {
	padding-top: 2em;
}

@media (max-width: 767px) {
	#intro .txtBox p br {
		display: none;
	}
}
@media (min-width: 576px) {
	#intro .imgBox {
		padding-top: 0;
		min-height: 100%;
	}
	#intro .imgBox div,
	#intro .imgBox figure {
		height: calc(100% - 8em);
	}
	#intro .imgBox figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#intro .txtBox .read {
		padding-top: 3em;
		padding-bottom: 6em;
	}
}
@media (min-width: 992px) {
	#intro .display-txt {
		font-size: 7em;
		top: .2em;
	}
}



/* ============================
   Feature
=============================== */
#feature {
	position: relative;
	z-index: 1;
}
#feature .feature-top {
	position: relative;
}
#feature .feature-top::before {
	content: '';
	display: block;
	border-radius: 0 0 0 10vw;
	background: var(--white);
	position: absolute;
	top: 5em;
	right: 0;
	bottom: -5em;
	left: 5%;
	z-index: -1;
}
#feature .display-txt {
	line-height: 0.7;
	margin-top: -.4em;
	position: absolute;
	z-index: 2;
}
#feature .imgBox .img2 {
	margin-top: -70%;
	margin-bottom: -2em;
}
#feature .txtBox {
	padding-left: 4%;
}
#feature .txtBox .en_ttl {
	display: inline-block;
	position: relative;
}
#feature .feature-top .txtBox .en_ttl {
	display: block;
}
#feature .txtBox .en_ttl .display-txt {
	display: block;
	margin: 0;
	position: absolute;
	top: -.1em;
	left: 70%;
	z-index: -1;
}
#feature .row2 .txtBox .en_ttl {
	padding-left: 10%;
}
#feature .row2 .txtBox .en_ttl .display-txt {
	left: 0;
}
@media (max-width: 575px) {
	#feature .txtBox h3 {
		font-size: 1.385em;
	}
	#feature .txtBox h5 {
		font-size: 1.231em;
	}
	#feature .container + .chapter{
		margin-top: 60px;
	}
	#feature .chapter:nth-of-type(odd) figure{
		padding-left: 10%;
	}
	#feature .chapter:nth-of-type(odd) .details{
		padding-right: 10%;
	}
	#feature .chapter:nth-of-type(even){
		padding-right: 10%;
	}
	#feature .chapter .details{
		margin-top: 30px;
		padding-left: 15%;
	}
	#feature .chapter h3{
		font-size: 1.385em;
	}
	#feature .chapter + .chapter{
		margin-top: 60px;
	}
}
@media (min-width: 576px) {
	#feature .feature-top::before {
		top: 6em;
		left: 2.5%;
		bottom: -10em;
	}
	#feature .display-txt {
		margin-left: .2em;
	}
	#feature .row2 .txtBox .en_ttl {
		padding-left: 0;
	}
	#feature .row2 .txtBox .en_ttl .display-txt {
		left: -20%;
	}
	#feature .imgBox .img2 {
		margin-top: -15%;
		margin-bottom: 0;
	}
	#feature .row2,
	#feature .row3 {
		padding-top: 5em;
	}
	#feature .txtBox {
		padding-right: 4%;
	}
	#feature .txtBox .en_ttl .display-txt {
		font-size: 4.5em;
	}
	#feature .container + .chapter{
		margin-top: 60px;
	}
	#feature .chapter {
		display:flex;
		display: -webkit-flex;
		-webkit-align-items: center;
		align-items: center;
		margin-left: 2.5%;
	}
	#feature .chapter + .chapter{
		margin-top: 30px;
	}
	#feature .chapter:nth-of-type(odd){
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}
	#feature .chapter:nth-of-type(odd) .details{
		-webkit-order:-1;
		order:-1;
	}
	#feature .chapter .imgBox{
		width: 49%;
	}
	#feature .chapter .details{
		width: 35%;
		margin: auto;
	}
}
@media (min-width: 992px) {
	.feature-top::before {
		top: 7em;
	}
	#feature .txtBox {
		padding-right: 7%;
		padding-left: 7%;
	}
}





/* ============================
   Location place
=============================== */
#place {
	position: relative;
	padding-bottom: 2em;
	z-index: 1;
}
#place::before {
	content: '';
	display: block;
	border-radius: 0 0 10vw 0;
	background: var(--white);
	position: absolute;
	top: 1.5em;
	right: 5%;
	bottom: 2em;
	left: 0;
	z-index: -1;
}
#place .display-txt {
	line-height: 0.7;
	margin-top: -.4em;
	position: absolute;
	z-index: 2;
}
#place .imgBox .img2 {
	margin-top: -70%;
	margin-bottom: -2em;
}
@media (max-width: 575px) {
	#place .display-txt {
		left: -.125em;
	}
	#place .txtBox h3 {
		font-size: 1.385em;
	}
}
@media (min-width: 576px) {
	#place::before {
		right: 2.5%;
	}
	#place .mainimg-wrap {
		max-width: 86%;
	}
	#place .imgBox .img2 {
		margin-top: -15%;
		margin-bottom: 0;
	}
}
@media (min-width: 1200px) {
	#place::before {
		top: 2em;
	}
}




/*================================
	Flow
================================*/
#flow {
	background: #fff;
}
#flow .flowlist {
	counter-reset: number;
}
#flow .flowlist li{
	list-style: none;
	position: relative;
}
#flow .flowlist li::before{
	counter-increment: number;
	content: '0' counter(number);
	display: block;
	width: 56px;
	height: 56px;
	background: #C9B7A8;
	border-radius: 50%;
	position:absolute;
	left:50%;top:-28px;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	transform:translateX(-50%);
	text-align: center;
	font-family: var(--font2);
	font-size: 24px;
	line-height: 60px;
	color: #fff;
}
#flow .flowlist h3{
	font-size: 16px;
}
#flow .flowlist .note{
	margin-top: 10px;
}

@media (max-width: 575px){
	#flow {
		margin-right: 5%;
		padding: 60px 6% 70px 10%;
		border-bottom-right-radius: 100px;
	}
	#flow .section__header{
		margin-bottom: 50px;
	}
	#flow .flowlist li:not(:first-of-type){
		margin-top: 50px;
	}
	#flow .flowlist h3{
		margin-top: 15px;
	}
}

@media (min-width: 576px){
	#flow {
		margin-right: 2.5%;
		padding: 110px 0 130px;
		border-bottom-right-radius: 240px;
	}
	#flow > *{
		width: 95%;
		max-width: 1100px;
		margin-left: auto;margin-right: auto;
	}
	#flow .section__header{
		margin-bottom: 80px;
	}
	#flow .flowlist {
		display:flex;
		display: -webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		gap: 70px 30px;
	}
	#flow .flowlist li{
		width: calc((100% - 90px) / 4);
		position: relative;
	}
	#flow .flowlist h3{
		margin-top: 20px;
	}
}





/*================================
	Plan
================================*/
#plan .mv figure{
	position: relative;
	z-index: 2;
}
#plan .price dt,
#plan .price dd{
	display: inline-block;
}
#plan .price dt{
	margin-right: 5px;
}
#plan .price dd{
	font-size: 12px;
}
#plan .price dd em{
	font-style: normal;
	color: #796B32;
}

@media (max-width: 575px){
	#plan {
		margin-top: 70px;
	}
	#plan .mv picture{
		width: 95%;
	}
	#plan .mv{
		overflow: hidden;
	}
	#plan .mv figure{
		width: 70%;
		margin: -15% -8px 0 auto;
		border: 8px solid  #fff;
	}
	#plan .details{
		padding: 40px 10% 0;
	}
	#plan h3{
		font-size: 20px;
	}
    #plan h3 span {
		font-size: 13px;
	}
	#plan .price{
		margin-top: 5px;
	}
	#plan dd em strong{
		font-size: 20px;
	}
	#plan .note{
		margin-top: 20px;
	}
	#plan .more{
		margin-top: 50px;
	}
}

@media (min-width: 576px){
	#plan {
		margin-top: 100px;
	}
	#plan .inner{
		display:flex;
		display: -webkit-flex;
	}
	#plan .mv{
		width: 50%;
	}
	#plan .mv picture{
		width: 90%;
	}
	#plan .mv figure{
		width: 75%;
		margin: -17% 0 0 auto;
		border: 10px solid  #fff;
	}
	#plan .details{
		width: 38%;
		margin-left: 5%;
		padding-top: 50px;
	}
	#plan h3{
		font-size: 24px;
	}
    #plan h3 span {
		font-size: 16px;
	}
	#plan .price{
		margin-top: 10px;
	}
	#plan dd em strong{
		font-size: 23px;
	}
	#plan .note{
		margin-top: 30px;
	}
	#plan .more{
		max-width: 240px;
		margin: 50px 0 0 auto;
	}
}




/*================================
	Other
================================*/
#widget-gallery,
#other{
	padding-top: 200px;
}