@charset "utf-8";
/* CSS Document */


/* -------------------------------------------------

color

------------------------------------------------- */
#wrapper {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
#wrapper > div{
  background-size: cover;
  background-attachment: fixed;
	background-position: center center;
}
#wrapper > div > section{
	color:#fff;
}

/* PC */
@media print, screen and (min-width:769px) {
#wrapper > div{
  padding: 70px 0;
}
#wrapper > div > section{
	width: 1000px;
	margin: 0 auto;
}
.color01{
	background-image: url(../images/bg_color01.png);
}
.color02{
	background-image: url(../images/bg_color02.png);
}
.color03{
	background-image: url(../images/bg_color03.png);
}
.color04{
	background-image: url(../images/bg_color04.png);
}
.color05{
	background-image: url(../images/bg_color05.png);
}
.color06{
	background-image: url(../images/bg_color06.png);
}
.color07{
	background-image: url(../images/bg_color07.png);
}
}
/* Tablet */
@media screen and (max-width:768px) {
#wrapper > div{
  padding:30px;
	background-image:none;
}
}
/* SP邵ｦ蜷代″ */
@media screen and (max-width:640px) and (orientation: portrait) {
#wrapper > div{
  padding:20px;
}
}

/* -------------------------------------------------

aboutArea

------------------------------------------------- */
.youtubeArea{
		position: relative;
		padding-top: 56.25%;
		width: 100%;
	margin-bottom: 20px;
	}
.youtubeArea iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}	

.aboutArea > h2{
	border-bottom: 1px solid #fff;
	margin: 0 0 25px;
	padding: 0 0 10px;
}
.aboutArea > dl{
	margin-bottom: 30px;
}
.aboutArea dl dt{
	font-weight: 700;
	font-size: 1.1em;
	margin: 0 0 8px;
}
.aboutArea dl dd a{
	display: block;
	background-color: #fff;
	box-shadow:2px 2px 0px 1px rgba(0,0,0,0.5);
	text-align: center;
	font-weight: 700;
	padding: 8px;
	margin:15px 0 0;
	transition: 0.5s;
}
.aboutArea dl dd a.map{
	position: relative;
}
.aboutArea dl dd a.map:after{
	position: absolute;
	right: 15px;
	content: "\f2d2";
	font-family: "Font Awesome 5 Free";
	font-weight: normal;
}
.aboutArea dl dd a:hover{
	transform: translateY(-5px);
}
.aboutArea > div{
	height: auto;
}
.aboutArea > div > dl{
	width: 50%;
	float: left;
}
.aboutArea > div > iframe{
	width: calc(50% - 20px);
	float: right;
}
/* SP邵ｦ蜷代″ */
@media screen and (max-width:640px) and (orientation: portrait) {
.aboutArea > div > dl{
	width:100%;
	float: none;
}
.aboutArea iframe{
	width:100%;
	float: none;
	margin-top: 10px;
}
	
.youtubeArea {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
} 
.youtubeArea iframe,  
.youtubeArea object,  
.youtubeArea embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
	
}

/* -------------------------------------------------

aquaresortsArea

------------------------------------------------- */
.aquaresortsArea > h2{
	margin: 0 0 20px;
}
.aquaresortsArea > p:nth-of-type(2){
	margin: 5px 0 0;
	font-weight: 500;
}
.aquaresortsArea > div{
	height: auto;
}
.aquaresortsArea > div dl{
	width: calc(50% - 15px);
	float: left;
	margin-top: 40px;
}
.aquaresortsArea > div dl:nth-child(2n+1){
	clear: both;
	margin-right: 30px;
}
.aquaresortsArea > div dl dt{
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 5px;
}
.aquaresortsArea > div dl dt a{
	color:#fff;
	padding-left: 5px;
}
.aquaresortsArea > div dl dt a i{
	transition: 0.2s;
}
.aquaresortsArea > div dl dt a:hover i{
	transform:scale(1.2);
}
/* SP邵ｦ蜷代″ */
@media screen and (max-width:640px) and (orientation: portrait) {
.aquaresortsArea > div dl{
	width: 100%;
	float: none;
	margin-top: 30px;
}
.aquaresortsArea > div dl:nth-child(2n+1){
	margin-right: 0;
}
}

/* -------------------------------------------------

attractionArea

------------------------------------------------- */
.attractionArea > h2{
	margin: 0 0 20px;
}
.attractionArea > p:nth-of-type(2){
	margin: 5px 0 0;
	font-weight: 500;
}
.attractionArea > div{
	height: auto;
}
.attractionArea > div dl{
	width: calc(50% - 15px);
	float: left;
	margin-top: 40px;
}
.attractionArea > div dl:nth-child(2n+1){
	clear: both;
	margin-right: 30px;
}
.attractionArea > div dl dt{
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 5px;
}
.attractionArea > div dl dt span{
	font-size: 0.75em;
	display: inline-block;
	background-color: #ff0;
	line-height: 100%;
	padding:3px 5px;
	font-weight: 500;
	color:#111;
	vertical-align: middle;
}
.attractionArea > div dl dt a{
	color:#fff;
	padding-left: 5px;
}
.attractionArea > div dl dt a i{
	transition: 0.2s;
}
.attractionArea > div dl dt a:hover i{
	transform:scale(1.2);
}
 /*  PC */
@media print, screen and (min-width:769px) {
.attractionArea{
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
}
}
/* SP邵ｦ蜷代″ */
@media screen and (max-width:640px) and (orientation: portrait) {
.attractionArea > div dl{
	width: 100%;
	float: none;
	margin-top: 30px;
}
.attractionArea > div dl:nth-child(2n+1){
	margin-right: 0;
}
}

/* -------------------------------------------------

restaurantArea

------------------------------------------------- */
.restaurantArea > section h2{
	margin: 0 0 20px;
}
.restaurantArea > section p{
	font-weight: 500;
}
.restaurantArea > p img{
	width: 100%;
}
/* PC */
@media print, screen and (min-width:769px) {
.restaurantArea{
	height: auto;
}
.restaurantArea > section{
	width:calc(50% - 30px);
	float: left;
}
.restaurantArea > p{
	width: 50%;
	float: right;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.restaurantArea > section > p.photo{
	margin-bottom: 10px;
}
}


/* -------------------------------------------------

shoppingArea

------------------------------------------------- */
.shoppingArea > section h2{
	margin: 0 0 20px;
}
.shoppingArea > section p{
	font-weight: 500;
}
.shoppingArea > p img{
	width: 100%;
}
/* PC */
@media print, screen and (min-width:769px) {
.shoppingArea{
	height: auto;
}
.shoppingArea > section{
	width:calc(50% - 30px);
	float: left;
}
.shoppingArea > p{
	width: 50%;
	float: right;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.shoppingArea > section > p.photo{
	margin-bottom: 10px;
}
}

/* -------------------------------------------------

nightArea

------------------------------------------------- */
.nightArea > h2{
	margin: 0 0 20px;
}
.nightArea > p:nth-of-type(n+2){
	margin: 5px 0 20px;
	font-weight: 500;
}
.nightArea > section > h3{
	margin: 0 0 15px;
	padding: 10px 0 0;
}
.nightArea > section > div{
	height: auto;
	margin: 0 0 30px;
}
.nightArea > section > div dl dt{
	font-weight: 500;
	line-height: 150%;
	font-size: 0.9em;
}
.nightArea > section > div dl dd{
	line-height: 140%;
	font-size: 0.9em;
}
.nightArea > section > p a{
	display: block;
	width: 350px;
	margin: 0 auto;
	background-color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 10px 0;
	transition: 0.5s;
	box-shadow:2px 2px 0px 1px rgba(0,0,0,0.5);
}
.nightArea > section > p a:hover{
	transform: translateY(-5px);
}
/* PC */
@media print, screen and (min-width:769px) {
.nightArea > section > div dl{
	width: calc(20% - 16px);
	float: left;
	border:1px solid #fff;
	padding: 10px;
	box-sizing: border-box;
}
.nightArea > section > div dl:nth-child(n+2){
	margin-left: 20px;
}
.nightArea > section > div dl dt{
	border-bottom: 1px solid #fff;
	padding: 0 0 8px;
	margin: 0 0 8px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.nightArea > section > div dl{
	height: auto;
}
.nightArea > section > div dl:nth-child(n+2){
	margin-top: 10px;
	clear: both;
}
.nightArea > section > div dl dt{
	width: calc(50% - 20px);
	float: left;
	background-color: #fff;
	text-align: center;
	font-weight: 700;
	color:#111;
	padding: 8px 0;
}
.nightArea > section > div dl dd{
	width: 50%;
	float: right;
	padding: 8px 0;
}
}
/* SP邵ｦ蜷代″ */
@media screen and (max-width:640px) and (orientation: portrait) {
.nightArea > section > div dl dt{
	width: 100%;
	float: none;
}
.nightArea > section > div dl dd{
	width: 100%;
	float: none;
	padding: 8px 0;
}
.nightArea > section > p a{
	width:100%;
}
}

/* -------------------------------------------------

hotelArea

------------------------------------------------- */
.hotelArea,
.hotelArea2{
	padding-bottom: 50px;
}
.hotelArea > section{
	margin: 0 0 20px;
}
.hotelArea2 > section{
	margin: 0 20px 20px 0;
}
.hotelArea > section h2,
.hotelArea2 > section h2
{
	margin: 0 0 20px;
}
.hotelArea > section p,
.hotelArea2 > section p{
	font-weight: 500;
	margin: 0 0 20px;
}
.hotelArea > section dl dt,
.hotelArea2 > section dl dt{
	margin: 0 0 5px;
	font-weight: 500;
}
.hotelArea > section dl dd,
.hotelArea2 > section dl dd{
	display: list-item;
	list-style: disc;
	margin-left: 20px;
	font-size: 0.95em;
}
.hotelArea > p.photo img,
.hotelArea2 > p.photo img{
	width: 100%;
}
.hotelArea > p.more a,
.hotelArea2 p.more a{
	clear: both;
	display: block;
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 10px 0;
	transition: 0.5s;
	box-shadow:2px 2px 0px 1px rgba(0,0,0,0.5);
	position: relative;
}
.hotelArea > p.more a:before{
	content: "\f2d2";
	font-family: "Font Awesome 5 Free";
	position: absolute;
	right: 15px;
}
.hotelArea2 p.more a:before{
	content: "\f2d2";
	font-family: "Font Awesome 5 Free";
	position: absolute;
	right: 15px;
}
.hotelArea > p.more a:hover{
	transform: translateY(-5px);
}
.hotelArea2 p.more a:hover{
	transform: translateY(-5px);
}

.hotelArea p.more2 a,
.hotelArea2 p.more2 a{
	display: block;
	background-color: #fff;
	box-shadow:2px 2px 0px 1px rgba(0,0,0,0.5);
	text-align: center;
	font-weight: 700;
	padding: 8px;
	margin:15px 0 0;
	transition: 0.5s;
}

/* PC */
@media print, screen and (min-width:769px) {
.hotelArea,
.hotelArea2{
	height: auto;
}
    .hotelArea2{
        display: flex;
        flex-direction: row;
    }    
.hotelArea > section,
.hotelArea2 > section    {
	width:calc(50% - 30px);
	float: left;
}
.hotelArea > p.photo,
.hotelArea2 > p.photo    {
	width: 50%;
	float: right;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.hotelArea > section > p.photo,
.hotelArea2 > section > p.photo    {
	margin-bottom: 10px;
}
.hotelArea2{
        display: flex;
        flex-direction: column-reverse;
    }      
.hotelArea > section dl dd a,
.hotelArea2 > section dl dd a    {
	color:#fff;
}
}
/* SP邵ｦ蜷代″ */
@media screen and (max-width:640px) and (orientation: portrait) {
.hotelArea > p.more a,
.hotelArea2 p.more a    {
	width:100%;
}
}
.tel-link{color: #FFFFFF;}

/* ------------------------
inview
-------------------------*/
.fade00{
	 opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .5s, transform .5s; /* 透過率と縦方向の移動を0.8秒 */
}
.fade00a{
	opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}
.fade01{
	opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .5s, transform .5s; /* 透過率と縦方向の移動を0.8秒 */
}
.fade01a{
	opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .5s, transform .5s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .3s; /* フェード開始を0.5秒遅らせる */
}