@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*color*/
/*font*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap");
@font-face {
  font-family: 'avenir next', sans-serif;
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/AvenirNext-DemiBold-03.ttf") format("truetype"); }
@font-face {
  font-family: 'avenir next', sans-serif;
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/AvenirNext-Regular-08.ttf") format("truetype"); }
/*layout*/
/*----------------------------------------------------
	楽天パーツ
----------------------------------------------------*/
#htlRmSrch {
  top: 1370px; }

#upfrntPlans {
  top: 2530px; }

#htlSide-A #latest_cstm_review {
  top: 2200px !important; }

/*----------------------------------------------------
	メインビジュアル
----------------------------------------------------*/
#mv {
  width: 1190px;
  margin-left: auto;
  margin-right: auto; }
  #mv #mv_bg {
    width: 2000px;
    margin-left: -405px; }
    #mv #mv_bg iframe {
      width: 2000px;
      height: 950px; }
  #mv h2 span.en {
    font-size: 60px; }
  #mv h2 span.ja {
    margin-top: 10px;
    font-size: 25px; }

/*----------------------------------------------------
	緊急ニュース
----------------------------------------------------*/
#special-news {
  border-bottom: 1px solid #8e8e8e;
  margin-top: 30px; }
  #special-news a {
    display: block;
    text-align: center;
    padding: 20px 30px; }
    #special-news a:hover {
      opacity: .7; }

/*----------------------------------------------------
	導入
----------------------------------------------------*/
#about {
  background: url("../idx/lead_top_bg.png") no-repeat left bottom;
  padding-bottom: 80px;
  padding-top: 70px; }
  @media (max-width: 1770px) {
    #about {
      background: url("../idx/lead_top_bg.png") no-repeat -205px bottom; } }
  #about .lead_box {
    position: relative; }
    #about .lead_box .ilst {
      position: absolute;
      bottom: -30px;
      left: 20px; }
  #about .text_box {
    width: 52.1008403361%;
    padding-left: 8.4033613445%;
    padding-right: 3.3613445378%;
    padding-top: 20px; }
    #about .text_box p {
      margin-bottom: auto; }
  #about .img {
    width: 47.8991596639%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    #about .img .ilst {
      position: absolute;
      top: 240px;
      left: 40px; }
  #about .flex .img02 {
    margin-top: -40px;
    position: relative; }
    @media (max-width: 1340px) {
      #about .flex .img02 {
        margin-top: 10px; } }
    #about .flex .img02 .ilst {
      position: absolute;
      top: 70px;
      left: 0px; }
      @media (max-width: 1340px) {
        #about .flex .img02 .ilst {
          top: 30px; } }
  #about .flex .img03 {
    padding-left: 7.5630252101%;
    padding-top: 90px; }

/*----------------------------------------------------
	USP
----------------------------------------------------*/
#usp01 {
  padding-top: 60px;
  margin-top: 80px;
  position: relative; }
  #usp01 .txt_c {
    margin-bottom: 20px; }
  #usp01 figure {
    position: absolute; }
  #usp01 .text-box {
    position: relative;
    padding-top: 470px;
    width: 600px;
    margin-left: 20px; }
    #usp01 .text-box .tit02 {
      font-size: 23px;
      font-weight: normal;
      line-height: 1.9565217391;
      letter-spacing: 0.1em; }
      #usp01 .text-box .tit02::before {
        display: block;
        width: 0;
        height: 0;
        margin-top: calc((1 - 1.9565217391) * .5em);
        content: ""; }
      #usp01 .text-box .tit02::after {
        display: block;
        width: 0;
        height: 0;
        margin-bottom: calc((1 - 1.9565217391) * .5em);
        content: ""; }
  #usp01 .panel-grid {
    display: grid; }
    #usp01 .panel-grid.grid5 {
      gap: 20px;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    #usp01 .panel-grid > div {
      text-align: center; }
      #usp01 .panel-grid > div img {
        border-radius: 100%;
        overflow: hidden; }
    #usp01 .panel-grid .tit02 {
      margin-top: 10px;
      font-family: "avenir next", sans-serif;
      font-size: 20px;
      text-align: center;
      font-weight: 500; }
    #usp01 .panel-grid p {
      text-align: center; }

/*----------------------------------------------------
	客室
----------------------------------------------------*/
#room {
  padding-top: 70px;
  padding-bottom: 70px;
  background: url("../idx/room_bg__.png") no-repeat center center; }
  #room .tab_wrap input[type="radio"] {
    display: none; }
  #room .tab_area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 190px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #bbbdbf; }
    #room .tab_area label {
      flex-shrink: 0;
      flex-grow: 0;
      padding-bottom: 20px;
      text-align: center;
      cursor: pointer;
      transition: ease 0.2s all;
      font-size: 20px;
      line-height: 1;
      color: #414042;
      position: relative;
      text-align: center;
      width: 50%;
      font-weight: 400; }
      #room .tab_area label:nth-child(4n+1) {
        margin-left: 0; }
      #room .tab_area label:before {
        content: '';
        display: block;
        position: absolute;
        transition: .5s;
        background-color: #c84700;
        width: 0;
        height: 2px;
        left: 0;
        right: 0;
        bottom: -2px;
        margin-left: auto;
        margin-right: auto; }
  #room iframe {
    width: 2000px;
    margin-left: -405px;
    height: 515px; }
  #room .panel_area {
    margin-top: 50px;
    position: relative; }
    #room .panel_area .tab_panel {
      width: 100%;
      opacity: 0;
      visibility: hidden;
      transition: .5s;
      position: absolute;
      top: 0; }
  #room .text-box02 {
    width: 1000px;
    margin: 0 auto;
    padding-top: 40px; }
    #room .text-box02 .flex {
      justify-content: space-between;
      align-items: start;
      padding-top: 30px; }
    #room .text-box02 p {
      width: 610px; }
    #room .text-box02 .btn_arw {
      margin-right: 25px; }

#tab1:checked ~ .wrp .tab_area .tab1_label {
  color: #414042;
  background-color: transparent; }
  #tab1:checked ~ .wrp .tab_area .tab1_label:before {
    width: 100%; }
  #tab1:checked ~ .wrp .tab_area .tab1_label:after {
    opacity: 1; }
#tab1:checked ~ .panel_area #panel1 {
  opacity: 1;
  visibility: visible; }

#tab2:checked ~ .wrp .tab_area .tab2_label {
  color: #414042;
  background-color: transparent; }
  #tab2:checked ~ .wrp .tab_area .tab2_label:before {
    width: 100%; }
  #tab2:checked ~ .wrp .tab_area .tab2_label:after {
    opacity: 1; }
#tab2:checked ~ .panel_area #panel2 {
  opacity: 1;
  visibility: visible; }

#tab3:checked ~ .wrp .tab_area .tab3_label {
  color: #414042;
  background-color: transparent; }
  #tab3:checked ~ .wrp .tab_area .tab3_label:before {
    width: 100%; }
  #tab3:checked ~ .wrp .tab_area .tab3_label:after {
    opacity: 1; }
#tab3:checked ~ .panel_area #panel3 {
  opacity: 1;
  visibility: visible; }

#tab4:checked ~ .wrp .tab_area .tab4_label {
  color: #414042;
  background-color: transparent; }
  #tab4:checked ~ .wrp .tab_area .tab4_label:before {
    width: 100%; }
  #tab4:checked ~ .wrp .tab_area .tab4_label:after {
    opacity: 1; }
#tab4:checked ~ .panel_area #panel4 {
  opacity: 1;
  visibility: visible; }

/*----------------------------------------------------
	レストラン
----------------------------------------------------*/
#restaurant {
  padding-bottom: 10px !important; }
  #restaurant .flex {
    margin-left: -102px;
    width: 1395px; }
    #restaurant .flex .illust_box {
      position: relative;
      padding-bottom: 55px; }
      #restaurant .flex .illust_box .ilst {
        position: absolute;
        bottom: 0;
        right: -40px; }
    #restaurant .flex iframe {
      width: 850px;
      height: 575px; }
    #restaurant .flex .text_box {
      width: 545px;
      padding-top: 65px;
      padding-left: 60px;
      padding-right: 95px;
      position: relative; }

/*----------------------------------------------------
	館内施設
----------------------------------------------------*/
#facilities {
  margin-bottom: -10px; }
  #facilities .flex {
    margin-right: -102px;
    width: 1395px; }
    #facilities .flex .illust_box {
      position: relative;
      padding-bottom: 72px; }
      #facilities .flex .illust_box .ilst {
        position: absolute;
        bottom: 0;
        left: -220px; }
    #facilities .flex iframe {
      width: 850px;
      height: 575px; }
    #facilities .flex .text_box {
      width: 545px;
      padding-top: 65px;
      padding-right: 60px;
      padding-left: 95px;
      position: relative; }
  #facilities .fac-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 100px; }
    #facilities .fac-grid > div {
      width: 300px; }
      #facilities .fac-grid > div:nth-child(4) {
        width: 460px; }
      #facilities .fac-grid > div:nth-child(5) {
        width: 460px; }
      #facilities .fac-grid > div img {
        border-radius: 50%;
        display: block;
        margin: 0 auto; }
      #facilities .fac-grid > div .text {
        padding-left: 10px;
        padding-right: 10px; }
        #facilities .fac-grid > div .text .tit02 {
          margin-top: 20px;
          margin-bottom: 5px; }

/*----------------------------------------------------
	アクセス
----------------------------------------------------*/
#access {
  width: 1000px;
  margin: 0 auto; }
  #access .flex {
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 30px; }
    #access .flex .text_box p {
      margin-top: 0; }

/*----------------------------------------------------
	ご宿泊プラン
----------------------------------------------------*/
#plan .plans {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px; }
  #plan .plans h4 {
    line-height: 1.875;
    padding: 0 10px;
    margin-top: 20px; }
    #plan .plans h4::before {
      display: block;
      width: 0;
      height: 0;
      margin-top: calc((1 - 1.875) * .5em);
      content: ""; }
    #plan .plans h4::after {
      display: block;
      width: 0;
      height: 0;
      margin-bottom: calc((1 - 1.875) * .5em);
      content: ""; }
#plan .wrp {
  width: 910px;
  margin-left: auto;
  margin-right: auto; }

/*----------------------------------------------------
	ニュース
----------------------------------------------------*/
#news .line {
  padding: 50px 0;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000; }
#news .wrp {
  display: flex;
  align-items: center;
  width: 950px; }
#news header {
  width: 180px;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  justify-content: center;
  align-items: center; }
  #news header h3 {
    font-family: "avenir next", sans-serif;
    font-size: 40px;
    font-weight: bold; }
#news dl {
  font-size: 16px;
  line-height: 1.875; }
  #news dl::before {
    display: block;
    width: 0;
    height: 0;
    margin-top: calc((1 - 1.875) * .5em);
    content: ""; }
  #news dl::after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: calc((1 - 1.875) * .5em);
    content: ""; }
  #news dl div {
    display: flex; }
  #news dl dt {
    margin-right: 30px;
    flex: 1; }
  #news dl dd {
    flex: 8; }

/*----------------------------------------------------
	インスタフィード
----------------------------------------------------*/
#insta iframe {
  width: 2000px;
  height: 748px;
  margin-left: -405px; }

/*----------------------------------------------------
	クーポン
----------------------------------------------------*/
#coupon {
  padding-top: 50px;
  padding-bottom: 75px;
  text-align: center; }

/*----------------------------------------------------
	右固定  20230620 追加
----------------------------------------------------*/
#right_fixed_plan {
  position: fixed;
  right: 0;
  bottom: 200px;
  z-index: 3;
  width: 100px; }
  #right_fixed_plan a {
    background-color: #000000;
    color: #fff;
    border: 3px solid #fff;
    transition: .5s;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 103px;
    height: 100px;
    padding: 0 20px;
    transform: translateX(3px);
    /*&:before{
    	@include content;
    	background: url("../com/book_plant.png") no-repeat center center / contain;
    	width: 74px;
    	height: 117px;
    	@include ma;
    	position: absolute;
    	left: 0;
    	right: 0;
    	bottom: calc(100% + 1px);
    }*/ }
    #right_fixed_plan a:hover {
      background-color: #fff;
      color: #000000;
      border: 3px solid #000000; }
    #right_fixed_plan a .en {
      font-weight: bold;
      font-size: 20px; }
    #right_fixed_plan a .jp {
      font-size: 17px; }