@charset "utf-8";


:root{
	--commonPadding: 70px 0 80px 0;
	--MainColor: #50c5cb;
	--PointColor: #ea9259;
	--width:1000px;
}

.commonTtl{
	text-align: center;
	margin-bottom: 30px;
}
.commonTtl .deco{
}
.commonTtl .deco img{
	width: 180px;
}
.commonTtl .main{
	padding-bottom: 5px;
	font-size: 34px;
	line-height: 1.1;
	background: linear-gradient(transparent 60%, #e4e479 0%);
	width: fit-content;
	margin: 0 auto;
	padding: 0 10px;
	margin-bottom: 5px;
}
.commonTtl .main strong{
    font-weight: normal;
    color: var(--MainColor);
}
.commonTtl .sub{
	margin-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 27px;
	color: var(--MainColor);
}
.commonTtl .sub span{
	width: 50px;
}
.commonTtl .sub span img{
	width: 100%;
}
.commonTtl .sub span + span{
	width: auto;
	display: inline-block;
	margin-left: 4px;
}

.owl-theme .owl-controls{
    margin-top: 0;
}

article .min{font-family: "aralet-n", sans-serif;font-weight: 400;font-style: normal;}

article .FontEn{font-family: "longhand-lp", sans-serif;
font-weight: 700;
font-style: normal;}

article .btn{
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
}
article .btn a{
    background-color: var(--PointColor);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    padding: 15px 25px;
    border-radius: 3px;
}
article .btn a:after{position: absolute;right: 8px;top:50%;margin-top:-0.5em;content:"\f105";font-family:FontAwesome;line-height: 1;font-weight: normal;}
article .btn a:hover{background-color: var(--MainColor);}

/*------------------------------menu*/
.header_change{position: fixed !important;transition: .5s;width: 100%;z-index: 1000;background-color: #fff;}
.header_change .Sub{
    display: none !important;
}
.header_change.show{top: 0;border: none;border-bottom: 1px solid #ccc;}
.header_change.show:after{}

.menuArea{
    padding: 18px 0 17px 0px;
    border-top: 1px solid #ccc;
}
.menuArea .humb{
    display: none;
}
.menuArea .Inner{
    width: var(--Width);
    margin: 0 auto;
}
.menuArea .Inner ul{
    display: flex;
    justify-content: center;
    column-gap: 43px;
    line-height: 1;
    width: 1000px;
    margin: 0 auto;
}
.menuArea .Inner li{
    position: relative;
}
.menuArea .Inner li + li:before{content: "";width: 1px;display: block;position: absolute;background-color: var(--MainColor);height: 100%;left: -22px;}
.menuArea .Inner li a{
    text-decoration: none;
    color: var(--MainColor);
    font-size: 15px;
}
.menuArea .Inner li a:hover,
.menuArea .Inner li a.active{
    text-decoration: underline;
    color: var(--PointColor);
}
.menuArea .Inner li a[href="#Tour"]{
    color: var(--PointColor);
}
.menuArea .Inner li a[href="#Tour"]:hover{color: var(--PointColorThin);}

/*--------------------------------------MVbackphoto*/
.MVbackphoto{width: 100%;overflow: hidden;margin-bottom: 3px;position: absolute;z-index: 1;}
.MVbackphoto .slick-list{
	padding: 0 !important;
}
.MVbackphoto .slick-list li{
	height: 550px;
	position: relative;
	margin: 0px 0 0 3px;
}
.MVbackphoto li .img{}
.MVbackphoto li .img img{
	width: 100%;
}
.MVbackphoto li .caption{
	background-color: #000;
	color: #fff;
	font-size: 12px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 0 3px;
}

/*-----------------------#MV*/
#MV{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: rgb(5 37 31 / 80%);
	padding: 40px 0 10px 0;
	width: 720px;
	margin:  auto;
	z-index: 2;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
	height: 550px;
	box-sizing: border-box;
}
#MV .Inner{text-align: center;flex: 1;}
#MV .Inner h1{
	margin-bottom: 30px;
}
#MV .Inner h1:after{content:"";width: 50px;height: 2px;background-color: #fff;display: block;margin: 0 auto;margin-top: 30px;}
#MV .Inner h1 .sub{
    font-size: 23px;
    padding-bottom: 4px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: #fff;
}
#MV .Inner h1 .sub strong{
    font-weight: normal;
    color: var(--PointColor);
}
#MV .Inner h1 .main{
    font-size: 57px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;
    color: #fff;
    background: linear-gradient(transparent 60%, #7e7e2e 0%);
    width: fit-content;
    margin: 0 auto;
    line-height: 1.2;
    margin-bottom: 20px;
}
#MV .Inner h1 .main strong{
    font-weight: normal;
    color: var(--MainColor);
}
#MV .Inner h1 span{
    font-style: italic;
}
#MV .Inner .txt{
	font-size: 15px;
	margin-bottom: 30px;
	line-height: 2;
	color: #fff;
}
#MV .Inner .txt strong{
    font-weight: normal;
    color: var(--PointColor);
}
#MV .Inner .txt br{}
#MV .Inner .btn a{
	display: inline-block;
	position: relative;
	color: #b66666;
	text-decoration: none;
	font-size: 20px;
	padding: 15px 140px;
	border: 1px solid;
}
#MV .Inner .btn a:hover{
	background-color: #b66666;
	color: #fff;
}
#MV .Inner .btn a:after{position: absolute;right: 8px;top:50%;margin-top:-0.5em;content: "\f107";font-family:FontAwesome;line-height: 1}
#MV .Visual{height: 100%;width: 56%;max-width: 900px;}
#MV #container{
	height: 100%;
}
#MV #theTarget{}
#MV #theTarget div{
    height: 560px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
#MV .skippr-nav-container{ display:none}
#MV .skippr-previous{
    left: 2%;
}
#MV .skippr-next{
    right: 3%;
}
#MV #theTarget .MV01{ background-image: url(../images/MV01.webp)}
#MV #theTarget .MV02{ background-image: url(../images/MV02.webp)}
#MV #theTarget .MV03{ background-image: url(../images/MV03.webp)}
#MV #theTarget .MV04{ background-image: url(../images/MV04.webp)}
#MV #theTarget .MV05{ background-image: url(../images/MV05.webp)}

#MV #theTarget .caption{
	background-color: rgb(0 0 0 / 80%);
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0px 5px;
}



/*-----------------------Item--*/
#Item{
    background-color: #efefef;
    padding: var(--commonPadding);
    margin-top: 3px;
}
#Item .MainTxt{
    text-align: center;
    margin-bottom: 40px;
    font-size: 16px;
}
#Item .MainTxt strong{
    font-weight: normal;
    color: var(--PointColor);
}
#Item h2{}

#Item .TitleArea{width: var(--width);margin: 0 auto;position: relative;}
#Item .TitleArea:before,
#Item .TitleArea:after{content:"";background-position: center;background-repeat: no-repeat;width: 230px;height: 170px;display: block;background-size: contain;position: absolute;top: -20px;}
#Item .TitleArea:before{background-image: url(../images/illust_left.webp);left: 30px;}
#Item .TitleArea:after{background-image: url(../images/illust_right.webp);right: 30px;}

/*---------------------------Intro*/
#Intro{
    padding: var(--commonPadding);
    width: 1000px;
    margin: 0 auto;
}
#Intro .Entry{
    display: flex;
    justify-content: space-between;
    column-gap: 40px;
    align-items: center;
}
#Intro .Entry + .Entry{
    margin-top: 50px;
}
#Intro .Entry:nth-of-type(even){
    flex-direction: row-reverse;
}
#Intro .Entry .Main{
    flex: 1;
    margin-bottom: 2em;
}
#Intro .Entry .Main h2{
    color: var(--MainColor);
    font-size: 28px;
    margin-bottom: 20px;
    background: linear-gradient(transparent 60%, #f5f5a5 0%);
    width: fit-content;
    line-height: 1.1;
}
#Intro .Entry .Main h2 span{
    font-size: 70%;
    display: inline-block;
}

#Intro .Entry .Main .txt{
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 20px;
}
#Intro .Entry .photo{
    width: 430px;
}
#Intro .Entry .photo .img{
    line-height: 0;
}
#Intro .Entry .photo .img img{
    width: 100%;
}
#Intro .Entry .photo .caption{
    font-size: 12px;
}

/*------------------------Area*/
#Area{background-image: url(../images/bg01.webp);padding: var(--commonPadding);position: relative;background-position: center;background-size: cover;}
#Area:before{content: "";background-color: rgb(255 255 255 / 80%);top: 0;left: 0;position: absolute;width: 100%;height: 100%;}
#Area h2{
    position: relative;
}

#Area .Entry{
    position: relative;
    width: var(--width);
    margin: 0 auto;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 30px;
    /* box-shadow: 0 0 4px rgb(0 0 0 / 20%); */
}
#Area .Entry + .Entry{
    margin-top: 40px;
}
#Area .Entry + .Entry:before{}
#Area .Entry .photo{
    display: flex;
    margin-bottom: 20px;
}
#Area .Entry .photo li{
    position: relative;
    line-height: 0;
}
#Area .Entry .photo li img{
    width: 100%;
    height: auto;
}
#Area .Entry .photo .caption{
	background-color: #000;
	color: #fff;
	font-size: 12px;
	bottom: 10px;
	left: 10px;
	padding: 2px 3px;
	position: absolute;
	z-index: 3;
	line-height: 1;
}

#Area .Entry .Main{
    display: flex;
    column-gap: 30px;
    align-items: flex-start;
}
#Area .Entry .Main .Title{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
}
#Area .Entry .Main .Title h3{
    color: var(--MainColor);
    font-size: 15px;
}
#Area .Entry .Main .Title h4{
    color: var(--MainColor);
    font-size: 26px;
}
#Area .Entry .Main .Title p{
    margin-top: 5px;
    line-height: 1.9;
    font-size: 15px;
    width: 100%;
}
#Area .Entry .Main .Recom{
    flex: 1;
    margin-top: 10px;
}
#Area .Entry .Main .Recom dl{
    border: 2px solid #ccc;
    padding: 10px;
    border-radius: 4px;
}
#Area .Entry .Main .Recom dt{
    color: var(--PointColor);
    font-size: 15px;
}
#Area .Entry .Main .Recom dd{}
#Area .Entry .Main .Recom dd .txt{}
#Area .Entry .Main .Recom dd .btn{
    margin-top: 10px;
}
#Area .Entry .Main .Recom dd .btn a{
    padding: 10px 30px;
}
#Area .Entry .Main .Recom dl + dl{
    margin-top: 10px;
}


/*-------------------------------Shusse*/
#Shusse{background-color: #3e6160;padding: var(--commonPadding);position: relative;}
#Shusse:before,
#Shusse:after{content:"";background-image: radial-gradient(circle at center, #638382 2px, transparent 2px);background-size: 25px 25px;background-color: #3e6160;position: absolute;width: 20%;height: 100%;top: 0;left: 0;}
#Shusse:after{
    left: auto;
    right: 0;
}
#Shusse h2{}
#Shusse h2 .deco{
    color: #fff;
    font-size: 23px;
    margin-bottom: 10px;
}
#Shusse h2 .main{
    font-size: 43px;
    color: #fff;
    background: linear-gradient(transparent 60%, #7e7e2e 0%);
    line-height: 1.2;
}
#Shusse h2 .sub{}
#Shusse .Inner{position: relative;width: var(--width);margin: 0 auto;color: #fff;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;column-gap: 40px;margin-bottom: 30px;z-index: 3;}
#Shusse .Inner .Main{
    /* flex: 1; */
    text-align: center;
}
#Shusse .Inner .Main .MainTxt{
    font-size: 15px;
    line-height: 1.9;
}
#Shusse .Inner .Main .MainTxt + .MainTxt{
    margin-top: 1em;
}
#Shusse .Inner .Main .MainTxt strong{
    color: var(--PointColor);
    font-weight: normal;
    font-size: 130%;
}
#Shusse .Inner .Main .MainTxt em{
    color: var(--MainColor);
    font-size: 130%;
}

#Shusse .Inner .Illust{
    width: 240px;
}
#Shusse .Inner .Illust img{
    width: 100%;
}
#Shusse .Info{display: flex;color: #fff;justify-content: center;column-gap: 40px;max-width: var(--width);margin: 0 auto;align-items: center;z-index: 3;position: relative;}
#Shusse .Info ul{
    display: flex;
    column-gap: 20px;
}
#Shusse .Info li{
    width: 210px;
    aspect-ratio: 1;
    border: 2px solid #fff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 4px;
    text-align: center;
    font-size: 19px;
}
#Shusse .Info li + li{}
#Shusse .Info li span{}
#Shusse .Info li span strong{
    color: var(--PointColor);
    font-weight: normal;
    font-size: 21px;
}
#Shusse .Info li .small{
    font-size: 14px;
}
#Shusse .Info dl{
}
#Shusse .Info dl dt{
    display: flex;
    line-height: 1;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 10px;
}
#Shusse .Info dl dt span{
    font-size: 35px;
}
#Shusse .Info dl dt span + span{
    font-size: 15px;
}
#Shusse .Info dl dd{
    background-color: #638382;
    padding: 8px 20px;
    border-radius: 3px;
    position: relative;
    padding-left: 80px;
}
#Shusse .Info dl dd + dd{
    margin-top: 25px;
}
#Shusse .Info dl dd strong{
    position: absolute;
    color: var(--MainColor);
    font-size: 22px;
    top: 0;
    left: 11px;
}
#Shusse .Info dl dd + dd:before{content: "▼";position: absolute;top: -21px;left: 50%;transform: translate(-50%, 0px);font-size: 10px;color: var(--MainColor);}
#Shusse .btn{
    text-align: center;
    width: 100%;
    margin-top: 50px;
    position: relative;
    z-index: 3;
}
#Shusse .btn a{
    font-size: 18px;
    margin: 0 auto;
    padding: 20px 70px;
}



/*-------------------------------------------FAQ*/
#FAQ{
    padding: var(--commonPadding);
}

#FAQ .Inner{
    margin-bottom: 60px;
}
#FAQ .Inner dl{width:800px;margin:0 auto}
#FAQ .Inner dl + dl{margin-top: 30px;border-top: 1px solid #ccc;padding-top: 30px;}
#FAQ .Inner dt{color: var(--MainColor);font-size:18px;margin-bottom: 14px;position:relative;padding-left: 33px;}
#FAQ .Inner dd{position:relative;padding-left: 33px;font-size: 15px;line-height: 1.9;}
#FAQ .Inner dd strong{
    color: var(--PointColor);
}
#FAQ .Inner dd .btn{}
#FAQ .Inner dd .btn a{position:relative;display:inline-block;text-decoration:none;background-color: var(--PointColor);color:#fff;font-size: 14px;padding: 8px 30px;margin-top:6px}
#FAQ .Inner dd .btn a:after{position:absolute;right:8px;top:50%;margin-top:-.5em;content:"\f105";font-family:FontAwesome;line-height:1}
#FAQ .Inner dd .btn a:hover{background-color: var(--MainColor);}
#FAQ .Inner .icon{position:relative;font-family:'Cabin',sans-serif;margin-bottom:12px;margin-right:5px;display:flex;padding:0 5px;width:25px;height:25px;text-align:center;color:#FFF;font-size:15px;font-weight:700;border-radius:50%;box-sizing:border-box;align-items:center;justify-content:center;position:absolute;left:0;top:-10px}
#FAQ .Inner .icon:before{content:"";position:absolute;bottom:-3px;right:-5px;border:5px solid transparent;border-left:7px solid #a58eff;z-index:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
#FAQ .Inner dt .icon{content:"Q";background-color: var(--MainColor);}
#FAQ .Inner dd .icon{content:"A";background-color: var(--PointColor);}
#FAQ .Inner dt .icon:before{border-left-color: var(--MainColor);}
#FAQ .Inner dd .icon:before{border-left-color: var(--PointColor);}

/*----------------------Contact*/
#Contact{}
#Contact h2{}
#Contact h2 .main{
    background: none;
    color: var(--MainColor);
}
#Contact .Inner .btn{column-gap: 20px;flex-wrap: wrap;row-gap: 20px;}
#Contact .Inner .btn li{
    margin-left: 0 !important;
    white-space: nowrap;
}
#Contact .Inner .btn li:last-of-type{}
#Contact .Inner .btn a{
    background-color: var(--PointColor);
}
#Contact .Inner .btn a:hover{
    background-color: var(--MainColor);
}