@charset "utf-8";


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

    そのサイトの基本設定
    ページによって変更のないもの・どのページでも使用するもの、できるもの

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


:root {
  /* font-weight */
    --fontweight_regular: 400;
    --fontweight_midium: 500;
    --fontweight_semibold: 600;
    --fontweight_bold: 700;
    --fontweight_black: 900;

  --text_color: #333;
  --bg_color: #f4f2ec;


  --color_white: #fff;
  --color_black: #201815;
  --color_gray090909: #909090;
  --color_red: #843C3C;
  --color_red_hover: #be5858;

  --fontsize_12: 0.75em;
  --fontsize_14: 0.875em;
  --fontsize_20: 1.25em;
  --fontsize_21: 1.313em;
  --fontsize_28: 1.75em;
  --fontsize_32: 2em;
  --fontsize_35: 2.188em;
  --fontsize_47: 2.938em;

}


html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-H_pc);
}

body {
  position: relative;
  margin: 0 auto;
  padding: 0;
  font-size: 16px;
  color: #000000;
  height: 100%;
  font-family: "Zen Old Mincho", serif;

  background-image: url("../img/background_ziiro.jpg");
  background-repeat: repeat-y;
  background-color: var(--color_white);

}


img {
  max-width: 100%;
  height: auto;

  vertical-align: bottom;
  border: none;
  text-decoration: none;
}



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

 * aタグの設定

---------------------------------------------- */
a {
	-webkit-transition: 0.5s;
 	transition: 0.5s;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
  a:active {
    background-color: rgba(0, 183, 255, 0.5);
  }
}


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

 * テーブル

---------------------------------------------- */
table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
}
  
  table th {
    padding: 1em;
    white-space: nowrap;
    vertical-align: middle;
  }
    table th span.note {
      font-size: 1rem;
      font-weight: normal;
    }
  table td {
    padding: 1em 1em 1em 0;
  }
    table td hr {
      margin: 2em 0;
    }
    table td h3 {
      margin-bottom: 1em;
      font-size: var(--fontsize_20);
    }




/* チェックインなど */
table dt {
  float: left;
  margin-right: 1em;
}

table dt,
table dd {
  margin-bottom: 0.5em;
}


/* 1280px以下 */
@media not all and (min-width : 1280px) {
  table.white tr {
    border-top: 2px solid var(--color_white);
    border-bottom: 2px solid var(--color_white);
  }
  table.black tr {
    border-top: 2px solid var(--color_black);
    border-bottom: 2px solid var(--color_black);
  }
  
  table th,
  table td {
    display: block;

    width: 100%;
  }

    table th {
      padding: 1em 0;
    }
      table.white th {
        border-bottom: 2px solid var(--color_white);
      }
      table.black th {
        border-bottom: 2px solid var(--color_black);
      }

    table td {
      padding: 2em 0;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  table.white tr {
    border-top: 1px solid var(--color_white);
    border-bottom: 1px solid var(--color_white);
  }
  table.black tr {
    border-top: 2px solid var(--color_black);
    border-bottom: 2px solid var(--color_black);
  }

  table div.line {
    position: relative;
    padding-left: 1em;
    border-left: 1px solid var(--color_gray090909);
  }
}

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

 * 見出し

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

.title35px {
  font-size: var(--fontsize_35);
}

/* 1280px以下 */
@media not all and (min-width : 1280px) {}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  .title35px span.note {
    font-size: 1.313rem;
    font-weight: var(--fontweight_regular);
  }
}

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

 * 見出し縦書き

---------------------------------------------- */
.h_vertical {
  margin-bottom: 32px;

  color: var(--color_black);
  font-weight: var(--fontweight_bold);

  writing-mode: vertical-rl;
  text-orientation: upright;/* すべて縦方向に表示 */
}
  .h_vertical span:not(.note) {
    color: var(--color_red);
  }

/* 1280px以下 */
@media not all and (min-width : 1280px) {
 
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  
}


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

 * 見出し横書き

---------------------------------------------- */
.h_horizontal {
  margin-bottom: 32px;
}
  .h_horizontal span:not(.note) {
    color: var(--color_red);
  }



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

 * お問い合わせのところ

---------------------------------------------- */
.section_title {
  display: flex;
  align-items: center;
  flex-direction: column;
}

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

 * 横並びにするリスト

---------------------------------------------- */
ul.horizontally {
  display: flex;
  flex-wrap: wrap;
}
  ul.horizontally li {
    line-height: 1.6;
  }

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

 * 横並びにし、右にスラッシュをつけたリスト

---------------------------------------------- */
ul.horizontally.slash li:not(:last-child)::after {
  content: "／";
  margin: 0 0.5em;
}

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

 * 右に▶のついたリンク（白）

---------------------------------------------- */
a.arrow_right_white::after {
  content: url("../../common/img/arrow_right_white.png");
}

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

 * 右に▶のついたリンク（黒）

---------------------------------------------- */
a.arrow_right_black::after {
  content: url("../../common/img/arrow_right_black.png");
}

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

 * 改行調整

---------------------------------------------- */
.wordbreak_all {
  /* CJKテキストでの折り返しを無効化 */
  word-break: keep-all;

  /* 長い単語でも折り返しを可能にする */
  overflow-wrap: anywhere;
}

.wordbreak_auto {
  word-break: auto-phrase;

  /* 長い単語でも折り返しを可能にする */
  overflow-wrap: anywhere;
}

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

 * ゴシック体

---------------------------------------------- */
.goth {
  font-family: "Zen Kaku Gothic New", sans-serif;
}


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

 * 基本設定

---------------------------------------------- */
main h2 {
  text-align: center;
}

main p {
  line-height: 1.6;
}

/* 1280px以下 */
@media not all and (min-width : 1280px) {
  main h2 {
    margin-bottom: 20px;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  main h2 {
    margin-bottom: 40px;
  }
}


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

 * ヘッダー

---------------------------------------------- */
header {
  position: fixed;
  top: 0;

  width: 100%;

  display: flex;
  justify-content: space-between;

  z-index: 1000;

  /* ヘッダーの背景色とブラー */
  /* background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1px); */
}


#siteLogo {
  position: relative;
  display: flex;
  align-items: center;

  padding: 12px 16px;

  transition: color 0.5s ease;

  z-index: 2;
}

#siteLogo img {
  width: 165px;
  transition: opacity 0.5s ease;
  opacity: 1;
}
  #siteLogo img.hide {
    opacity: 0;
  }

#siteLogo.default {
    color: var(--color_black);
    transition: opacity 0.5s ease;
}

#siteLogo.change {
    color: var(--color_white);
    transition: opacity 0.5s ease;
}

/* 1280px以下 */
@media not all and (min-width : 1280px) {
  #siteLogo a {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: var(--fontsize_12);
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  #siteLogo {
    font-size: var(--fontsize_14);
  }
  #siteLogo a {
    display: flex;
    gap: 1em;
  }
    #siteLogo .text {
      align-self: center;
    }
}


/* ハンバーガーメニュー */
.humburger_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;  
}

/* ボタン */
.menu_button {
  display: block;
  position: fixed;
  z-index: 2;

  top: 0;
  right: 0;

  border: none;
  background: var(--color_red);

  cursor: pointer;

  transition: .5s;
}


/* メニューボタンのアニメーション */
.bar {
  display: block;
  height: 1px;
  margin: 8px 0;
  background-color: var(--color_white);
  transition: transform 0.4s, opacity 0.4s;
}

.menu_button.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(7px, 6px);
}

.menu_button.open .bar:nth-child(2) {
  opacity: 0;
}

.menu_button.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}


/* 1280px以下 */
@media not all and (min-width : 1280px) {
  .menu_button {
    padding: 22px 25px;
  }

  .bar {
    width: 26px;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  .menu_button {
    padding: 18px 20px;
  }
  .bar {
    width: 31px;
  }

  .menu_button:hover {
    background: var(--color_red_hover);
  }
}



/* メニュー本体 */
header .menu {
  position: fixed;
  top: -2000px;
  left: 0;

  color: var(--color_white);
  background-color: var(--color_black);

  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .5);

  transition: 0.4s;
  z-index: 1;
  overflow-y: auto;
}

header .menu.open {
  top: 0;
}


/* 1280px以下 */
@media not all and (min-width : 1280px) {
  header .menu {
    width: 100%;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  header .menu {
    width: 100%;
    min-height: 30svh;
  }
}



/* メニューの中（フッターと共通） */
    .navigation_area {
        border-bottom: 1px solid var(--color_white);
    }

    header .navigation_area {
        padding: 0 0 72px;
    }

    header .menu  ul li,
    #footer_details .navigation_area ul li {
        line-height: 1.6;
    }


    header .menu  ul ul,
    #footer_details .navigation_area ul ul {
        margin-top: 0.5em;
        color: #808080;
    }
  

/* 1280px以下 */
@media not all and (min-width : 1280px) {
    #footer_details .navigation_area {
        padding: 36px 0;
    }

    header .menu .navigation,
    #footer_details ul.navigation {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }

}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
    header .menu,
    #footer_details .navigation_area {
        padding: 72px 0;
    }

    header .menu ul.navigation,
    #footer_details ul.navigation {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 17%;
        grid-template-rows: repeat(3, 1fr);
    }

    .home { grid-area: 1 / 1 / 4 / 2; }
    .onsen { grid-area: 1 / 2 / 4 / 3; }
    .compartment { grid-area: 1 / 3 / 4 / 4; }
    .food { grid-area: 1 / 4 / 4 / 5; }
    .access { grid-area: 1 / 5 / 4 / 6; }
    .guide { grid-area: 1 / 6 / 4 / 7; }


    header .menu .navigation li a:hover,
    #footer_details .navigation_area>ul li a:hover {
        color: var(--color_black);
        background-color: var(--color_white);
    }

}



/* ロゴ、住所等 */

  .site_profile .profile p {
    line-height: 2;
  }



/* ヘッダー */

/* 1280px以下 */
@media not all and (min-width : 1280px) {
  header .menu {
    height: 100svh;
  }
  header .menu .contents {
    padding-top: 110px;
    padding-bottom: 40px;
  }

  header .menu .site_profile {
    padding: 34px 0 0;
  }

  .site_profile #copyright {
    margin-top: 1em;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  header .menu .contents {
    padding-top: 72px;
  }

  .site_profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;

    font-size: var(--fontsize_14);
  }

  .site_profile .profile {
    display: flex;
    align-items: end;
    gap: 3em;
  }

  .site_profile #copyright {
    display: flex;
    justify-content: flex-end;
  }

  header .menu .site_profile {
    padding: 72px 0 0;
  }
}


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

 * ページ内メニュー

---------------------------------------------- */
.inPageLinks .menu {
  
}
    .inPageLinks .menu li a {
      display: block;
    }
      .inPageLinks .menu li a::after {
        content: url("../img/arrow_bottom_black.png");
        display: inline-block;

        vertical-align: text-top;

        transition: .3s;
      }

      

@keyframes loop_animation_iconMove {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(30%);
  }
}


/* 1280px以下 */
@media not all and (min-width : 1280px) {
  .inPageLinks {
    width: 100%;
    margin: 3em 0 0;
    font-size: var(--fontsize_20);
    
    background-color: var(--color_white);
  }

    .inPageLinks .menu {
      display: flex;
      gap: 1em;

      overflow-x: scroll;
      white-space: nowrap;

      padding: 1em 38%;

      scrollbar-width: none;
    }

      .inPageLinks .menu li a::after {
        margin-left: 0.5em;
      }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  .inPageLinks {
    width: 55.2%;
    min-width: 1060px;
    margin: auto;
  }

    .inPageLinks .menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1em;
      margin-top: 125px;
      margin-bottom: -60px;
    }
      .inPageLinks .menu li {
        width: 100%;
        padding-bottom: 0.5em;
        font-size: var(--fontsize_21);
        border-bottom: 3px solid var(--color_black);
      }

      .inPageLinks .menu li a::after {
        margin-left: 0.7em;
      }

      .inPageLinks .menu li a:hover::after {
        animation: loop_animation_iconMove .5s linear infinite;
      }
}

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

 * ご宿泊予約

---------------------------------------------- */
#reservation {
  position: fixed;

  z-index: 999;

  color: var(--color_white);
  

  letter-spacing: 0.12em;

  transition: .5s;
}
  #reservation span {
    font-size: 1rem;
  }


  #reservation a {
    display: block;
    padding: 24px 32px;
    background-color: rgba(0, 0, 0, 0.75);
  }

/* 1280px以下 */
@media not all and (min-width : 1280px) {
  #reservation {
    right: 0;
    bottom: 0;
  }
    #reservation a::before {
      content: url("../img/icon_calendar_white_sp.png");
      margin-right: 0.25em;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
    #reservation {
      right: 0;
      bottom: 50%;
      transform: translateY(50%);

      font-size: var(--fontsize_20);

      writing-mode: vertical-rl;
      text-orientation: upright; /* すべて縦方向に表示 */
    }

      #reservation a:hover {
        background-color: var(--color_red);
      }

      #reservation a::before {
        content: url("../img/icon_calendar_white_pc.png");
        margin-bottom: 0.25em;
      }
}

/* ノートパソコンよりも大きな画面 */
@media print, screen and ( min-width : 1600px ) {
  #reservation {
    
    font-size: var(--fontsize_32);
  }
    #reservation span {
      font-size: 1.25rem;
    }

    #reservation a {
      padding: 37px 43px;
    }
}



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

 * 背景に模様が入っている（黒）

---------------------------------------------- */
main .bg_black {
  padding: 72px 0;
  color: var(--color_white);
  background: url("../img/background_black01.jpg");
}

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

 * 背景に模様が入っている（白）

---------------------------------------------- */
main .bg_paper {
  padding: 72px 0;
  background: url("../img/background_ziiro.jpg");
}

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

 * 背景（白）

---------------------------------------------- */
main .bg_white {
  padding: 72px 0;
  background-color: var(--color_white);
}

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

 * ブロックリンク 白

---------------------------------------------- */
.blockLink_white {
  margin: 2em 0;
  display: inline-block;
  border: 1px solid var(--color_white);
}
  .blockLink_white a {
    display: block;
    

    transition: .5s;
  }
    .blockLink_white a::after {
      content: url("../img/arrow_right_white.png");
      margin-left: 1em;
    }

    

/* 1280px以下 */
@media not all and (min-width : 1280px) {
  .blockLink_white {
    width: 100%;
  }
  .blockLink_white a {
    
    padding: 1em ;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  .blockLink_white a {
    padding: 1em 6em;
  }

  .blockLink_white a:hover {
    color: var(--color_black);

    background-color: var(--color_white);
  }

  .blockLink_white a:hover::after {
    content: url("../img/arrow_right_black.png");
    margin-left: 1em;
  }
}

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

 * ブロックリンク 黒

---------------------------------------------- */
.blockLink_black {
  display: inline-block;
  border: 1px solid var(--color_black);
}
  .blockLink_black a {
    display: block;
    

    transition: .5s;
  }
    .blockLink_black a::after {
      content: url("../img/arrow_right_black.png");
      margin-left: 1em;
    }

    

/* 1280px以下 */
@media not all and (min-width : 1280px) {}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  .blockLink_black a:hover {
    color: var(--color_white);

    background-color: var(--color_black);
  }

  .blockLink_black a:hover::after {
    content: url("../img/arrow_right_white.png");
    margin-left: 1em;
  }
}


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

 * 縦書き文字組用　英数字の向き（縦中横）

---------------------------------------------- */
.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

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

 * コンテンツ幅

---------------------------------------------- */
.contents {
  margin: 0 auto;
}

/* 1280px以下 */
@media not all and (min-width : 1280px) {
  .contents {
    width: 90%;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  .contents {
    width: 55.2%;
    min-width: 1060px;
  }
}

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

 * ページ　導入部分

---------------------------------------------- */
#pageIntro {
  display: flex;
  align-items: center;
  flex-direction: column;

  background-image: url("../img/background_ziiro.jpg");
  background-repeat: repeat-y;
}
  #pageIntro p {
    font-weight: var(--fontweight_midium);
    text-align: center;
  }


/* 1280px以下 */
@media not all and (min-width : 1280px) {
  #pageIntro {
    padding: 120px 0 0;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  #pageIntro { 
    padding: 120px 0;
  }
}

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

 * ページ　お問い合わせ部分

---------------------------------------------- */
#contact {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  padding: 120px 0;

  background-color: var(--color_white);
}

  #contact .bts {
    margin: 2em 0;
  }

  #contact .bt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    color: var(--color_white);
    border: 1px solid var(--color_black);
    background: url("../img/background_black01.jpg");
  }
     #contact .bt a {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 1em;
     }

      #contact .toForm.bt a::after {
        content: url("../img/arrow_right_white.png");
        margin-left: 1em;
      }
    

/* 1280px以下 */
@media not all and (min-width : 1280px) {}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  #contact .bt {
    width: 48.1%;
  }

  #contact a:hover:not(#phone_link) {
    color: var(--color_black);

    background-color: var(--color_white);
  }
  #contact .toForm.bt a:hover::after {
    content: url("../img/arrow_right_black.png");
    margin-left: 1em;
  }
}


  #contact .bt h3 {
    font-size: var(--fontsize_35);
    text-align: center;
    line-height: 1.2;
  }
    #contact .bt h3 span {
      font-size: 1rem;
    }



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

 * フッター　メニュー・住所等

---------------------------------------------- */
footer {
  position: relative;
}

#footer_details {
  color: var(--color_white);
  background-color: var(--color_black);
}
  

/* ロゴ、住所等 */


/* 1280px以下 */
@media not all and (min-width : 1280px) {
  footer {
    padding-bottom: 10em;
    background-color: var(--color_black);
  }

  #footer_details .site_profile {
    
    padding: 72px 0;
    
  }
    #footer_details .site_profile .logo {
      margin-bottom: 1em;
      text-align: center;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  #footer_details .site_profile {
    padding: 72px 0 152px;
  }
}

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

 * ページのトップへ

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

#pageToTop .box {
  position: relative;
  

  display: flex;
  align-items: flex-end;
}
#pageToTop .square {
  position: absolute;
  bottom: 0;
  left: -4em;
  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 16px;

  aspect-ratio: 1/1;

  color: var(--color_white);
  font-size: 0.875em;
  background-color: var(--color_black);
}
#pageToTop .tama {
  position: relative;
  z-index: 2;
}

  #pageToTop .square {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;

    border: 1px solid rgba(255, 255, 255, 0.25);

    transition: .25s;
  }
  #pageToTop .square::before {
    content: url("../img/arrow_top_white.png");
    display: block;
  }
  

/* 1280px以下 */
@media not all and (min-width : 1280px) {
  #pageToTop {
    position: absolute;
    transform: scale(0.75) translateX(-50%);
    left: 50%;
    bottom: 5em;
  }
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  #pageToTop {
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 1000;
  }

    #pageToTop a:hover .square {
      color: var(--color_black);
      background-color: var(--color_white);
    }

    #pageToTop a:hover .square::before {
      content: url("../img/arrow_top_black.png");
    }

}

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

 * Swiper

---------------------------------------------- */
.swiper {
  width: 100%;
}



.swiper.slider-thumbnail .swiper-slide {
  cursor: pointer;

  background-color: var(--color_black);
}

.swiper.slider-thumbnail .swiper-slide img {
  opacity: 0.5;
}

.swiper.slider-thumbnail .swiper-slide.swiper-slide-thumb-active img {
  opacity: 1;
}

/* 1280px以下 */
@media not all and (min-width : 1280px) {}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
  .swiper.slider-thumbnail {
    width: 50%;
    margin-right: initial;
    margin-left: auto;
  }
}


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

　   XXX

--------------------------------------------------------------------------------------------- */
/* モバイル＞タブレット＞パソコン */

/* 1280px以下 */
@media not all and ( min-width : 1280px ) {
}
/* パソコン */
@media print, screen and ( min-width : 1280px ) {
}