@charset 'utf-8';
/*/////////////////cssガイド/////////////////

01.すべてのサイトにおける設定(ブラウザごとの余白リセット/フォントファミリー/リストリセット/画像100%/リンクリセット/見出しリセット/レスポンシブ/フォントサイズ/コンテンツの横幅)

↓以下サイトごとにガイドをリストの通り書いていってください↓
02.TOPへもどる 
03.全ページ共通
04.TOPページ
05.page01(ファイル名)
06.page02(ファイル名)
07.問い合わせフォーム関連

////////////////////////////////////////////*/


/*/////////////////01.すべてのサイトにおける設定ここから/////////////////*/
/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
  display: contents;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:#333;
  text-align:center;
  color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
    z-index: 999;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fff;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*========= レイアウトのためのCSS ===============*/


#container{
    width:100%;
    height: 100vh;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}



* {
	  margin: 0;
	  padding: 0;
}
body {
	font-size: 0;
	font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	position: relative;
}
* {
	font-size: 1.3vw;
    line-height: 3vw;
}
li {
  list-style-type: none;
}
img {
	width:100%;
}

a {
    text-decoration: none;
    color: #fff;
}

h1,h2,h3,h4,h5 {
 font-size:1.8vw;
 text-decoration:none;
 font-weight: normal;
}
@media screen and (max-width: 767px){
* {
	font-size: 4vw;
    line-height: 7.5vw;
}
h1,h2,h3,h4,h5 {
 font-size:5.5vw;
}
}

/*レスポンシブ*/
.forSp {
		display: none;
}
.forPc {
		display: block;
}
@media screen and (max-width: 767px){
.forSp {
		display: block;
}
.forPc {
		display: none;
}
}


/*フォントサイズ*/
body {
font-size:1.1vw;
}
.subTIT02 {
   position:relative;
   font-size:2vw;
   margin-bottom: 2vw;
}
.txtbig {
	font-size: 2vw;
}
.txtmini {
	font-size:1vw;
}


@media screen and (max-width: 767px){
body {
font-size:3.5vw;
}
.txtbig {
	font-size: 5vw;
}
.txtmini {
	font-size:3.5vw;
}
/*フォントサイズ*/
.subTIT02 {
   font-size:6vw;
   margin-bottom: 9vw;
}
}

/*コンテンツ幅*/
.wrapper {
	margin:0 auto;
}
@media screen and (max-width: 767px){
.wrapper {
	width:100%;
    max-width: 100%;
}
}

/*桜*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100&display=swap');

.sakurabox {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
	pointer-events: none;
}

.sakura {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.sakura li{
  position: absolute;
  list-style: none;
  top: -50px;
  background: #f8c7d0;
  border-radius: 0% 70%;  
  animation: fall 4s linear infinite, sway 2s ease-in-out infinite alternate;
}


@keyframes fall {
  to {
    top: 120%;
  }
}

@keyframes sway1 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(-45deg);
  }
}

@keyframes sway2 {
  from {
    transform: translateX(200px) rotate(-45deg);
  }
  to {
    transform: translateX(0px) rotate(0deg);
  }
}

.sakura li:nth-child(1){
  left: 0%;
  width: 24px;
  height: 15px;
  animation: fall 10s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 2s;
}

.sakura li:nth-child(2){
  left: 5%;
  width: 13px;
  height: 9px;
  animation: fall 15s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 8s;
}

.sakura li:nth-child(3){
  left: 15%;
  width: 16px;
  height: 10px;
  animation: fall 9s linear infinite,
             sway1 3.5s ease-in-out infinite alternate;
  animation-delay: 13s;
}

.sakura li:nth-child(4){
  left: 30%;
  width: 16px;
  height: 10px;
  animation: fall 8s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 7s;
}
.sakura li:nth-child(5){
  left: 40%;
  width: 16px;
  height: 10px;
  animation: fall 10s linear infinite,
             sway1 4s ease-in-out infinite alternate;
  animation-delay: 0s;
}
.sakura li:nth-child(6){
  left: 55%;
  width: 24px;
  height: 15px;
  animation: fall 11s linear infinite,
             sway2 3s ease-in-out infinite alternate;
  animation-delay: 3s;
}
.sakura li:nth-child(7){
  left: 65%;
  width: 16px;
  height: 10px;
  animation: fall 7s linear infinite,
             sway2 3.5s ease-in-out infinite alternate;
  animation-delay: 7s;
}
.sakura li:nth-child(8){
  left: 50%;
  width: 13px;
  height: 9px;
  animation: fall 7s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 3s;
}
.sakura li:nth-child(9){
  left: 80%;
  width: 16px;
  height: 10px;
  animation: fall 10s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 4s;
}


/*/////////////////01.すべてのサイトにおける設定ここまで/////////////////*/


/*/////////////////02.MV/キャッチ ここから/////////////////*/
.mvbox {
	position: relative;
	background-image: url(../images/mainvisual2.jpg);
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    height: 49vw;
}
.mv-title {
	position: absolute;
    top: 64%;
    left: 35%;
    width: 30%;
}
.mv-logo {
	position: absolute;
    top: 6vw;
    width: 17%;
    left: 41%;
}
.mv-right {
	position: absolute;
    width: 27%;
    right: 28%;
    bottom: -33%;
}
.catch {
	width: 33%;
    margin: 0 auto;
}

@media screen and (max-width: 767px){
.mvbox {
	position: relative;
	background-image: url(../images/mainvisual2_sp.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    height: 152vw;
}
.mv-title {
	position: absolute;
    top: 62%;
    left: 10%;
    width: 78%;
}
.mv-logo {
	position: absolute;
    top: 9%;
    width: 54%;
    left: 22%;
}
.mv-right {
	position: absolute;
    width: 64%;
    right: 0;
    bottom: -21%;
}
.catch {
	width: 100%;
}
}
/*/////////////////02.TOPへもどる ここまで/////////////////*/


/*/////////////////03.全ページ共通 ここから/////////////////*/
.con01 {
	width: 40%;
    margin: 0 auto;
	position: relative;
    z-index: 10;
	margin-top: 4vw;
}
.con02 {
	position: relative;
	background: #F5F2EF;
    width: 67%;
    margin-left: 33%;
    padding-top: 40vw;
    margin-top: -38vw;
    border-radius: 0 0 0 3vw;
    padding-bottom: 3vw;
}
.con02inner {
	width: 46%;
    margin: 0 auto;
    margin-left: 5%;
    position: relative;
}
.con02innerimg01 {
	width: 90%;
    margin-top: 5vw;
    margin-bottom: 3vw;
}
.con02innerimg02 {
	width: 100%;
    margin-top: 4vw;
    margin-bottom: 2vw;
}

.btmimg {
	position: absolute;
    bottom: -10vw;
    width: 60%;
    right: 0;
}
.btmtxt {
	position: absolute;
    top: 38vw;
    width: 40%;
    right: 0;
}
.flex {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

@media screen and (max-width: 767px){
.con01 {
    width: 100%;
    margin: 0 auto;
}
.con02 {
	width: 95%;
    margin-left: 5%;
    padding-top: 110vw;
    margin-top: -100vw;
    border-radius: 0 0 0 7vw;
    padding-bottom: 1vw;
}
.con02inner {
	width: 90%;
	margin: 0 auto;
	position: relative;
}
.con02innerimg01 {
	width: 90%;
    margin-top: 12vw;
    margin-bottom: 12vw;
}
.con02innerimg02 {
    margin-top: 12vw;
    margin-bottom: 12vw;
}

.btmimg {
	position: absolute;
    bottom: -28vw;
    width: 95%;
}
.btmtxt {
	position: absolute;
    top: 113vw;
    width: 38%;
    right: 3%;
}
}



.deco01 {
	position: relative;
    width: 3%;
    margin-left: 48.5%;
    margin-top: 15vw;
    margin-bottom: 5vw;
    z-index: 1;
}
.deco02 {
	width: 20%;
    margin-left: 40%;
    margin-top: 11vw;
    margin-bottom: 9vw;
    z-index: 1;
}
.deco03 {
	width: 22%;
    margin: 0 auto;
    margin-top: 16vw;
    margin-bottom: 3vw;
    margin-left: 30%;
}
.sec01 .deco01 {
	position: relative;
	width: 8%;
    margin-left: 48.5%;
    margin-top: 6vw;
    margin-bottom: 5vw;
    z-index: 1;
}

@media screen and (max-width: 767px){
.deco01 {
	width: 8%;
    margin-left: 46%;
    margin-top: 25vw;
}
.deco02 {
	width: 48%;
    margin: 0 auto;
    margin-top: 21vw;
    margin-bottom: 12vw;
}
.deco03 {
	width: 55%;
    margin: 0 auto;
    margin-top: 33vw;
    margin-bottom: 4vw;
    margin-left: 0;
}
}

/*/////////////////03.全ページ共通 ここまで/////////////////*/




/*/////////////////04.好きな街を ここから/////////////////*/
.sec02 {
	position: relative;
}
.sec02 .con02 {
    background: #F5F2EF;
	margin-left: 0;
	margin-right: 33%;
	border-radius: 0 0 3vw 0;
	padding-bottom: 16vw;
}
.sec02 .con02inner {
    margin-left: 48%;
}
.spotcon {
	position: relative;
	margin-bottom: 7vw;
	margin-top: 5vw;
}
.spoticon {
	position: absolute;
    width: 22%;
    top: 0%;
    left: -3vw;
}
.shopicon {
	position: absolute;
    width: 44%;
    top: -4vw;
    left: -3vw;
}
.shopimg {
	margin-bottom: 1vw;
}
.shopimg02 {
	width: 80%;
    margin: 0 auto;
    margin-top: 2vw;
    margin-bottom: 2vw
}

.shopifo {
	background: #fff;
    border-radius: 0 0 2vw 0;
    box-sizing: border-box;
    padding: 2vw;
	margin-top: 2vw;
}
.shopimgbox {
	width: 80%;
	margin: 0 auto;
	margin-top: 5vw;
}
.shopimgbox p {
	width: 40%;
	margin-top: 3vw;
}
.shopimgbox div {
	width: 57%;
}

.btn01 {
	background: #142942;
    color: #fff;
    text-align: center;
    line-height: 5vw;
    border-radius: 3vw;
	margin-top: 2vw;
	font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

}
.btn01 a {
	display: block;
    line-height: 5vw;
}
.btn02 {
	width: 90%;
	margin: 0 auto;
	background: #fff;
    color: #142942;
	border: 1px solid #142942;
	box-sizing: border-box;
    text-align: center;
    line-height: 5vw;
    border-radius: 3vw;
	margin-top: 2vw;
	font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

}
.btn02 a {
	display: block;
    line-height: 5vw;
    color: #142942;
}


@media screen and (max-width: 767px){
.sec02 .con02 {
    background: #F5F2EF;
	margin-right: 5%;
	border-radius: 0 0 7vw 0;
	padding-bottom: 38vw;
}
.sec02 .con02inner {
    margin: 0 auto;
}
.spotcon {
	width: 95%;
    margin: 0 auto;
    margin-bottom: 16vw;
    margin-top: 19vw;
}
.spoticon {
	position: absolute;
    width: 47%;
    top: -9%;
    left: -9vw;
}

.shopicon {
	position: absolute;
    width: 48%;
    top: -7%;
    left: -9vw;
}
.shopimg {
	margin-bottom: 5vw;
}
.shopimg02 {
	width: 80%;
    margin: 0 auto;
    margin-top: 6vw;
    margin-bottom: 6vw
}

.shopifo {
	background: #fff;
    border-radius: 0 0 6vw 0;
    box-sizing: border-box;
    padding: 4vw;
	margin-top: 8vw;
}
.shopimgbox {
	width: 80%;
	margin: 0 auto;
	margin-top: 8vw;
}
.shopimgbox p {
	width: 40%;
	margin-top: 15vw;
}
.shopimgbox div {
	width: 57%;
}
.btn01 {
	background: #142942;
    color: #fff;
    text-align: center;
    line-height: 15vw;
    border-radius: 8vw;
	margin-top: 5vw;
}
.btn01 a {
    line-height: 15vw;
}
.btn02 {
	width: 90%;
	margin: 0 auto;
	background: #fff;
    color: #142942;
	border: 1px solid #142942;
	box-sizing: border-box;
    text-align: center;
    line-height: 5vw;
    border-radius: 8vw;
	margin-top: 2vw;
}
.btn02 a {
	display: block;
    line-height: 15vw;
    color: #142942;
}

}
/*/////////////////04.好きな街を ここまで/////////////////*/


/*/////////////////05.page01(ファイル名) ここから/////////////////*/
.sec03 .con02 {
	padding-bottom: 5vw;
	position: relative;
}
.sec03 .con0201 {
	padding-bottom: 13vw;
	border-radius: 0;
}
.sec03 .con0202 {
	padding-top: 5vw;
	margin-top: -8vw;
	padding-bottom: 7vw;
}
.shopimg03 {
	margin-right: -8%;
    margin-top: 8vw;
}
.sec03 .btmimg01 {
    width: 55%;
    top: auto;
    bottom: -8vw;
    right: 50%;
    margin-bottom: 0;
}
.sec03 .deco01 {
	width: 3%;
    margin-left: 48.5%;
	margin-top: -5vw;
}
.sec03 .btmimg02 {
	width: 100%;
    top: auto;
    bottom: -38vw;
    right: 0;
    margin-bottom: 0;
}
.sec03 .btmimg03 {
	margin-top: 5vw;
}

@media screen and (max-width: 767px){
.sec03 .con0201 {
	padding-bottom: 13vw;
}
.sec03 .con0202 {
	padding-top: 41vw;
    margin-top: -32vw;
	padding-bottom: 18vw;
}
.shopimg03 {
	margin-right: -8%;
    margin-top: 8vw;
}
.sec03 .deco01 {
	width: 8%;
    margin-left: 46.5%;
	margin-top: 5vw;
}
.sec03 .btmimg01 {
	width: 100%;
    top: auto;
    bottom: 9vw;
    right: 0;
    margin-bottom: 0;
}
.sec03 .btmimg02 {
	width: 100%;
    top: auto;
    bottom: -38vw;
    right: 0;
    margin-bottom: 0;
}
.sec03 .btmimg03 {
	margin-top: 15vw;
}
}
/*/////////////////05.page01(ファイル名) ここまで/////////////////*/


/*/////////////////06.フッター ここから/////////////////*/
.infomation {
	margin-top: 2vw;
	}
.annotation {
	width: 33%;
    margin: 0 auto;
    margin-bottom: 10vw;
    line-height: 2.4vw;
}
.infomation h3 {
	border-bottom: 1px solid #000;
	padding-left: 0;
	line-height: 5vw;
}
.room {
	width: 35%;
    margin: 0 auto;
}
.roomimg {
    width: 100%;
    margin: 0 auto;
    margin-top: 2vw;
}
.copyright {
	width: 80%;
    margin: 0 auto;
    margin-top: 8vw;
    margin-bottom: 0.5vw;
    padding-top: 0.5vw;
    border-top: 1px solid #ccc;
    text-align: center;
	font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.infomation .btn01 {
	width: 90%;
	margin: 0 auto;
	margin-top: 2vw;
}
.infomation .btn01 a {
	color: #fff;
}
.infomation .btn02 a {
	color: #142942;
}

@media screen and (max-width: 767px){ 
.infomation {
	margin-top: 5vw;
	}
.annotation {
	width: 90%;
    margin: 0 auto;
    margin-bottom: 30vw;
	line-height: 6.5vw;
}
.infomation h3 {
	border-bottom: 1px solid #000;
    padding-left: 5%;
    padding-bottom: 1vw;
    width: 80%;
    margin-bottom: 3vw;
	line-height: 10vw;
}
.room {
	width: 100%;
    margin: 0 auto;
}
.roomimg,.roomtxt {
	width: 90%;
	margin: 0 auto;
    margin-top: 6vw;
}
.roomdata {
	width: 90%;
    margin: 0 auto;
    margin-bottom: 30vw;

}
.infomation .btn01 {
	width: 80%;
	margin: 0 auto;
	margin-top: 4vw;
}
.copyright {
	width: 80%;
    margin: 0 auto;
    margin-top: 10vw;
    margin-bottom: 1vw;
    padding-top: 1vw;
    border-top: 1px solid #ccc;
    text-align: center;
	font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

}
}
/*/////////////////06.フッター ここまで/////////////////*/


/*/////////////////07.問い合わせフォーム関連 ここから/////////////////*/
/*/////////////////07.問い合わせフォーム関連 ここまで/////////////////*/