@charset "utf-8";
/* オープニング */
.logo_fadein{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2100;
}

.logo_fadein p {
	width: 30%;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 2101;
}

/* main */
main {
    width: 100%;
}

/* 共通クラス */
.shadow {
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.1);
}

.t-shadow {
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1);
}

/* slider */
.firstView {
    position: relative;
}

.slide-logo img {
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 1400;
}

.news-wrap {
    width: 28%;
    position: absolute;
    bottom: 3%;
    left: 2%;
    background-color: #fff;
    opacity: 0.8;
    z-index: 1401;
    text-align: center;
    padding: 1%;
}

.news-wrap a {
    font-size: .9em;
}

  .slider {
    margin-inline: auto;
    overflow: hidden;
    width: 100%;
    height: 100vh;
  }

  .slick-img img {
    width: 100%;
    object-fit: contain;
  }

  @keyframes zoomUp {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.15);
    }
  }
  .add-animation {
    animation: zoomUp 10s linear 0s normal both;
  }
  /* .slider::after{
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: #00000099;
      position: absolute;
      top: 0;
      left: 0;
      mix-blend-mode: color;
  } */

  .shiro {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      background-color: #fff;
      z-index: 11;
  }
  .mo_slide-logo,
  .mo_slider {
      display: none;
  }

/* nav */
.nav-2 {
    display: flex;
    justify-content: center;
    margin-top: 3vh;
    text-align: center;
}



.nav-2-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 50%;
}

.nav-2-items li {
    margin-right: 5%;
}

/* 予約枠 */
/* label {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 36px;
    border: 2px solid #e8debc;
    border-radius: 10px;
  }
  input[type="date"] {
    position: relative;
    padding: 0 10px;
    width: 200px;
    height: 36px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    font-size: 14px;
    color: #e8debc;
  } */


.reserve-wrap {
    border-top: #e8debc solid 1px;
    border-bottom: #e8debc solid 1px;
    margin: 2% 0 0;
}
.max-1100 {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1% 0;
}

.check-wrap {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: #e8debc solid 1px;
    /* padding: 1% 7%; */
}

.check_out {
    margin-left: 11%;
}

.hi {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2em;
    letter-spacing: 0.08em;
}

.room-wrap,
.member-wrap {
    /* border-right: #e8debc solid 1px; */
    padding: 1% 3%;
}

.room_icon-wrap,
.member_icon-wrap {
    width: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: #e8debc solid 1px;
}

.f-gold {
    color: #c0a963;
}

.kazu {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    font-size: 1.2em;
}

.arrow {
    padding-left: 7%;
    font-size: .6em;
}

.search-btn-wrap {
    width: 20%;
    margin-left: 4%;
}

.search-btn {
    width: 100%;
	display: block;
	text-align: center;
	/* vertical-align: middle; */
	padding: 5% 6%;
	border: 0.5px solid #c0a963;
	background: #c0a963;
	color: #fff;
	transition: 0.5s;
    font-size: 1.1em;
}
.search-btn:hover {
	color: #c0a963;
	background: #fff;
}

/* concept */
/* 下からフェードイン */
.fadeIn2 {
    transform: translate3d(0, 100px, 0);
    transition: 1.5s;
    opacity: 0;
    }

    .fadeIn2.animated {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    }

.concept {
    width: 100%;
    height: 48vw;
    text-align: center;
    margin: 10% 0 20%;
    background-image: url(../img/back-logo-left.png),url(../img/back-logo-right.png);
    /*2枚の画像の横幅を、いずれもcontainer幅の半分に指定*/
    background-size: contain;
    /*1枚目の画像を左上、2枚目の画像を右下に配置*/
    background-position: left,right;
    /*2枚の画像をいずれも繰り返さないよう指定*/
    background-repeat: no-repeat,no-repeat;
    /* https://zero-plus.io/media/background-image/ */
}


.concept h2 {
    padding-top: 12%;
    font-size: 1.3em;
    color: #c0a963;
}

.title {
    padding: 2% 0;
    font-size: 2.3em;
    color: #c0a963;
    font-weight: 500;
}

.concept-text {
    line-height: 2.1em;
}

.mo_concept-text {
    display: none;
}

/* 色背景 */
.main-wrap {
    width: 100%;
    position: relative;
}

.back {
    width: 70vw;
    height: 135vh;
    background-color: #e8debc;
    position: absolute;
    right: 0;
    top: -20vh;
    z-index: -1;
}

.back2 {
    width: 100%;
    height: 55vh;
    background-color: #e8debc;
    position: absolute;
    bottom: -3%;
    z-index: -2;
}
/* 共通 */
/* フェードイン */
.fadeIn {
    transition: 3s;
    opacity: 0;
  }

  .fadeIn.animated {
    opacity: 1;
  }

.main-item {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background-color: #fff;
}


.main-item h2 {
    margin: 2% 0 0;
    color: #c0a963;

  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;

}

.h2-sub {
    line-height: .9em;
    font-size: .9em;
}

.text {
    padding: 6% 0 16%;
    line-height: 1.7em;
}


.main-item-pic-sp {
    display: none;
}

.main-item-pic-pc {
    width: 70%;
    object-fit: contain;
}

.stay,
.restaurant,
.wedding {
    width: 100%;
}

.mo_main-item-icon {
    display: none;
}

/* 詳しくみるボタン */
.detail-btn-wrap {
    width: 100%;
}

.detail-btn {
    width: 180px;
    margin: 0  auto;
	display: block;
	text-align: center;
	/* vertical-align: middle; */
	padding: 2.5% 3%;
	border: 0.5px solid #c0a963;
	background: #c0a963;
	color: #fff;
    font-size: 0.9em;
	transition: 0.5s;
}
.detail-btn:hover {
	color: #c0a963;
	background: #fff;
}

/* stay */
.stay-wrap {
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 5%;
}

/* wedding */
.wedding-wrap {
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 40%;
    position: relative;
}

.wed-bk {
    position: absolute;
    width: 40%;
    bottom: -70vh;
    left: -10%;
}

/* restaurant */
.restaurant-wrap {
    margin-right: auto;
    margin-left: 0;
    margin-bottom: 5%;
}

/* access */
.access-wrap {
    width: 70%;
    margin-top: -300p;
    transform: translateY(-270px);

    margin: 0 auto;
    display: flex;
    justify-content:center;
    align-items: center;
    background: #fff;
    color: #4d4428;
    padding: 5% 0 3%;
}

.access-title {
    font-size: 0.8em;
    line-height: .9em;
}

.access h2 {
    color: #c0a963;
}

.access-text {
    font-size: 0.9em;
    padding-top: 8%;
    line-height: 1.7em;
}


.map {
    width: 50%;
    height: 45vh;
    padding-left: 5%;
}

.access-btn-wrap {
    width: 100%;
    margin-top: 13%;
}

.access-btn {
    width: 200px;
    /* margin: 0  auto; */
	display: block;
	text-align: center;
	/* vertical-align: middle; */
	padding: 3% 4%;
	border: 0.5px solid #c0a963;
	background: #c0a963;
	color: #fff;
    font-size: 1em;
	transition: 0.5s;
}
.access-btn:hover {
	color: #c0a963;
	background: #fff;
}

@media screen and (max-width: 800px) {

.news-wrap {
    width: 70%;
    position: absolute;
    bottom: 3%;
    left: 15%;
    background-color: #fff;
    opacity: 0.8;
    z-index: 1401;
    text-align: center;
    padding: 2%;
    text-shadow: 1px 1px 2px #ababab;
}

.news-wrap a {
    font-size: .7em;
}

/* slider */
.slide-logo,
.slider,
.slider img,
.shiro {
    display: none;
}

.mo_slide-logo,
.mo_slider {
    display: block;
}

.mo_slide-logo img {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 1400;
}
  .mo_slider {
    margin-inline: auto;
    overflow: hidden;
    width: 100%;
    height: 100vh;
  }

  .mo_slick-img img {
    width: 100%;
    object-fit: cover;
  }

  @keyframes zoomUp {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.15);
    }
  }
  .add-animation {
    animation: zoomUp 10s linear 0s normal both;
  }

/* nav */
    .nav-2 {
        display: none;
    }

/* 予約枠 */
    .reserve-wrap {
        display: none;
    }

/* concept */
    .concept {
        height: 77vw;
        background-image: url(../img/wedding-bk.png);
        background-size: 50%;
    }
    .concept h2 {
        padding-top: 6%;
        font-size: 1em;
    }

    .title {
        padding: 2% 0 4%;
        font-size: 1.3em;
    }
    .concept-text {
        display: none;
    }

    .concept-wrap {
        justify-content: center;
    }

    .mo_concept-text {
        display: block;
        line-height: 6vw;
        font-size: 2.5vw;
    }

/* 背景色 */
    .back,
    .back2 {
        display: none;
    }

/* main-item */

    /* .main-item {
        display: block;
    } */

    .main-item-pic-pc {
        display: none;
    }

    .main-item-pic-sp {
        display: block;
        width: 100%;
    }

    .main-item h2 {
        color: #fff;
    }
    .stay-wrap,
    .wedding-wrap {
        width: 100%;
        flex-direction: column-reverse;
        margin-left: 0;
    }

    .main-item p {
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1);
    }

    .stay-wrap,
    .restaurant-wrap {
        margin-bottom: 0;
    }

    .wedding-wrap {
        margin-bottom: 90%;
    }
    .main-item-icon {
        display: none;
    }

    .stay {
        margin-top: 10%;
    }
    .mo_main-item-icon {
        display: inline;
    }

    .stay,
    .wedding,
    .restaurant {
        background-color: #c0a963;
        color: #fff;
        padding: 15% 0;
    }
    .wed-bk {
        top: 0;
        left: 0;
    }

    .restaurant-wrap {
        width: 100%;
        flex-direction: column;
        margin-right: 0;
    }

    /* main item btn */
    .detail-btn {
        border: 0.5px solid #fff;
        background: #fff;
        color: #c0a963;
    }
/* access */
.access-wrap {
    width: 100%;
    transform: translateY(-350px);
    display: block;
    text-align: center;
}

.access-btn {
    margin: 0 auto;
}

.map {
    width: 100%;
    padding-left: 0;
    height: 30vh;
    margin-top: 18%;
}
}