@charset "UTF-8";
/* レンタルスペース独自 */
/* //レンタルスペース独自 */
html {
  overflow-y: scroll; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset, img {
  border: 0; }

img {
  vertical-align: bottom; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

li {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

q:before, q:after {
  content: ''; }

abbr, acronym {
  border: 0;
  font-variant: normal; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit; }

/*to enable resizing for IE*/
input, textarea, select {
  *font-size: 100%; }

/*because legend doesn't inherit in IE */
legend {
  color: #000; }

del, ins {
  text-decoration: none; }

.slidemain .photo .inner.p01 {
  background: url("../images/slide-u-8.jpg") center center; }
.slidemain .photo .inner.p02 {
  background: url("../images/slide-u-9.jpg") center center; }
.slidemain .photo .inner.p03 {
  background: url("../images/slide-u-3.jpg") center center; }
.slidemain .photo .inner.p04 {
  background: url("../images/slide-u-4.jpg") center center; }
.slidemain .photo .inner.p05 {
  background: url("../images/slide-u-6.jpg") center center; }
.slidemain .photo .inner.p06 {
  background: url("../images/slide-u-10.jpg") center center; }

.wrapper {
  width: 100%;
  max-width: 2800px; }
  .wrapper *, .wrapper *:before, .wrapper *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

.contents {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .contents.pb50 {
    padding-bottom: 50px; }
  .contents .ttl-en {
    text-align: center; }
  .contents a {
    color: #111;
    text-decoration: none; }

h2.rs-sub-ttl {
  font-size: 1.5rem;
  text-align: center;
  margin: 1rem auto;
  letter-spacing: .25rem; }

.pc {
  display: block; }
  @media screen and (max-height: 768px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-height: 768px) {
    .sp {
      display: block; } }

.kominka-logo {
  text-align: center;
  padding: 4rem 0;
  width: 60%;
  max-width: 175px;
  margin: auto; }
  .kominka-logo img {
    width: 100%;
    height: auto; }

h5.ryokan-h5 {
  text-align: center;
  margin-top: 3rem;
  color: #111;
  font-weight: bold;
  text-decoration: none;
  font-size: 24px;
  padding-bottom: 24px; }

.img {
  position: relative; }
  .img img {
    width: 100%;
    height: auto; }
  .img .cap {
    font-size: 10px;
    line-height: 1;
    position: absolute;
    bottom: 6px;
    right: 6px;
    color: #111; }
  .img .fff {
    color: #fff; }

.social-area {
  width: 100%;
  padding: 10px 0;
  text-align: center; }
  .social-area li {
    width: 40px;
    display: inline-block;
    margin: 5px; }
    .social-area li a {
      display: block; }
    .social-area li img {
      width: 100%;
      height: auto;
      display: block; }

.btn-list {
  width: 90%;
  max-width: 1000px;
  margin: 50px auto 0 auto;
  padding-bottom: 3rem; }
  .btn-list a {
    width: 100%;
    display: block;
    margin-top: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    transition: .3s; }
    .btn-list a div, .btn-list a li {
      min-height: 0%; }
    .btn-list a:hover {
      opacity: .6; }
    .btn-list a .img-box {
      width: 50%;
      position: relative; }
      .btn-list a .img-box img {
        width: 100%;
        height: auto; }
    .btn-list a .btn-txt {
      width: 50%;
      background: #614C3F;
      position: relative; }
      .btn-list a .btn-txt .txt {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        text-align: center;
        line-height: 2;
        letter-spacing: .1rem; }
  @media screen and (max-width: 768px) {
    .btn-list a .img-box {
      width: 100%; }
    .btn-list a .btn-txt {
      width: 100%;
      text-align: center;
      padding: 1rem; }
      .btn-list a .btn-txt .txt {
        position: relative;
        top: auto;
        left: auto;
        transform: none; } }

.u-btn {
  width: 90%;
  margin: auto;
  display: block; }
  .u-btn img {
    width: 100%;
    height: auto; }
  .u-btn.btn-pay {
    margin: 3rem auto 0 auto;
    max-width: 200px; }

.img01 {
  margin-top: 4rem; }

.k-bg {
  width: 100%;
  padding: 0;
  margin: 0; }
  .k-bg img {
    width: 100%;
    height: auto;
    margin: 0; }
  .k-bg .k-inner {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative; }
  .k-bg .txtbox {
    background: #604C3F;
    padding-top: 30px;
    padding-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .k-bg .txtbox div, .k-bg .txtbox li {
      min-height: 0%; }
  .k-bg#kominka01 {
    background: #40220F;
    padding-bottom: 50px; }
    .k-bg#kominka01 .img01-1 {
      width: 68.8%; }
    .k-bg#kominka01 .img01-2 {
      width: 31.2%;
      position: absolute;
      top: 0;
      right: 0; }
    .k-bg#kominka01 .txt01 {
      width: 50%;
      position: relative;
      z-index: 9;
      margin-left: 4.4%;
      margin-top: -5%; }
      .k-bg#kominka01 .txt01 img {
        max-width: 365px; }
    .k-bg#kominka01 .img01-3 {
      width: 45.6%;
      position: absolute;
      bottom: 0;
      right: 0; }
  .k-bg#kominka02 {
    padding-top: 50px;
    padding-bottom: 50px; }
    .k-bg#kominka02 .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; }
      .k-bg#kominka02 .flex div, .k-bg#kominka02 .flex li {
        min-height: 0%; }
    .k-bg#kominka02 .k-inner {
      text-align: center; }
    .k-bg#kominka02 .img02-1 {
      width: 59.1%; }
    .k-bg#kominka02 .txt02 {
      width: 40.9%; }
      .k-bg#kominka02 .txt02 img {
        max-width: 235px; }
    .k-bg#kominka02 .img02-2 {
      width: 50%;
      margin-top: -5%; }
    .k-bg#kominka02 .img02-3 {
      width: 36.4%;
      margin-top: -5%; }
  .k-bg#kominka03 {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #40220F; }
    .k-bg#kominka03 .img03-1 {
      width: 63.7%;
      padding-bottom: 2%; }
    .k-bg#kominka03 .txt03 {
      width: 40%;
      position: absolute;
      right: 0;
      top: 0; }
      .k-bg#kominka03 .txt03 img {
        max-width: 273px;
        padding-bottom: 10px; }
    .k-bg#kominka03 .img03-2 {
      position: absolute;
      bottom: 0;
      right: 4.5%;
      width: 31.9%; }
    .k-bg#kominka03 .btn {
      width: 90%;
      max-width: 500px;
      margin: 50px auto 0 auto; }
      .k-bg#kominka03 .btn a, .k-bg#kominka03 .btn span {
        display: block;
        transition: .3s; }
        .k-bg#kominka03 .btn a img, .k-bg#kominka03 .btn span img {
          width: 100%;
          height: auto; }
      .k-bg#kominka03 .btn a:hover {
        opacity: .7; }
      .k-bg#kominka03 .btn span {
        opacity: .3; }
  .k-bg#kominka04 {
    background: #BEC1AB;
    padding-top: 50px;
    padding-bottom: 50px; }
    .k-bg#kominka04 .img04-1 {
      width: 36.5%; }
    .k-bg#kominka04 .img04-2 {
      width: 63.5%;
      position: absolute;
      right: 0;
      top: 0; }
    .k-bg#kominka04 .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      margin-top: -2%;
      position: relative;
      z-index: 9; }
      .k-bg#kominka04 .flex div, .k-bg#kominka04 .flex li {
        min-height: 0%; }
    .k-bg#kominka04 .txt04 {
      width: 50%; }
      .k-bg#kominka04 .txt04 img {
        max-width: 361px; }
    .k-bg#kominka04 .img04-3 {
      width: 41%; }
  .k-bg#kominka05 {
    background: #BEC1AB;
    padding-bottom: 50px; }
    .k-bg#kominka05 .flex {
      margin: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; }
      .k-bg#kominka05 .flex div, .k-bg#kominka05 .flex li {
        min-height: 0%; }
    .k-bg#kominka05 .img05-1 {
      width: 67.5%; }
    .k-bg#kominka05 .txt05 {
      width: 32.5%;
      padding-bottom: 10%; }
      .k-bg#kominka05 .txt05 img {
        max-width: 181px; }
    .k-bg#kominka05 .flex2 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      width: 95%;
      margin: -5%	auto 0 0; }
      .k-bg#kominka05 .flex2 div, .k-bg#kominka05 .flex2 li {
        min-height: 0%; }
    .k-bg#kominka05 .img05-2 {
      width: 24%; }
    .k-bg#kominka05 .img05-3 {
      width: 50%; }
    .k-bg#kominka05 .img05-4 {
      margin-top: 5%;
      width: 26%; }
  @media screen and (max-width: 768px) {
    .k-bg .txtbox {
      position: relative;
      z-index: 9;
      padding: 20px; }
    .k-bg#kominka01 .img01-2 {
      margin-top: 10%; }
    .k-bg#kominka01 .txt01 {
      width: 100%;
      margin-left: 0; }
    .k-bg#kominka01 .img01-3 {
      width: 100%;
      position: relative;
      bottom: auto;
      right: auto; }
    .k-bg#kominka02 .img02-1 {
      width: 100%; }
    .k-bg#kominka02 .txt02 {
      width: 100%; }
    .k-bg#kominka02 .img02-2 {
      width: 55%; }
    .k-bg#kominka02 .img02-3 {
      width: 45%; }
    .k-bg#kominka03 .img03-1 {
      width: 100%;
      padding-bottom: 0; }
    .k-bg#kominka03 .txt03 {
      width: 100%;
      position: relative;
      right: auto;
      top: auto; }
      .k-bg#kominka03 .txt03 img {
        padding-bottom: 0; }
    .k-bg#kominka03 .img03-2 {
      width: 100%;
      position: relative;
      bottom: auto;
      right: auto; }
    .k-bg#kominka04 .flex {
      margin-top: 0; }
    .k-bg#kominka04 .txt04 {
      width: 100%; }
    .k-bg#kominka04 .img04-3 {
      width: 100%; }
    .k-bg#kominka05 .img05-1 {
      width: 100%; }
    .k-bg#kominka05 .txt05 {
      width: 100%; }
    .k-bg#kominka05 .flex2 {
      width: 100%;
      margin: 0; }
    .k-bg#kominka05 .img05-2 {
      width: 43.5%; }
    .k-bg#kominka05 .img05-3 {
      width: 100%;
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3; }
    .k-bg#kominka05 .img05-4 {
      width: 56.5%;
      margin-top: 0; } }

/* ============= 間取り図 ============= */
.photo-ttl {
  width: 90%;
  max-width: 400px;
  margin-right: auto;
  margin-left: auto; }
  .photo-ttl img {
    width: 100%;
    height: auto; }
  @media screen and (max-width: 768px) {
    .photo-ttl {
      display: none; } }

.madori {
  width: 100%;
  position: relative; }
  .madori img {
    width: 100%;
    height: auto; }
  .madori .pin {
    width: 3%;
    position: absolute; }
    @media screen and (max-width: 768px) {
      .madori .pin {
        display: none; } }
  .madori #pin01 {
    top: 75%;
    left: 20%;
    transform: rotate(-30deg); }
  .madori #pin02 {
    top: 73%;
    left: 43%;
    transform: rotate(-70deg); }
  .madori #pin03 {
    top: 75%;
    left: 50%;
    transform: rotate(20deg); }
  .madori #pin04 {
    top: 85%;
    left: 35%;
    transform: rotate(-90deg); }
  .madori #pin05 {
    top: 45%;
    left: 44%;
    transform: rotate(-45deg); }
  .madori #pin06 {
    top: 75%;
    left: 90%;
    transform: rotate(135deg); }
  .madori #pin07 {
    top: 35%;
    left: 77%;
    transform: rotate(40deg); }

.sp-photolist {
  width: 90%;
  margin: auto;
  display: none; }
  @media screen and (max-width: 768px) {
    .sp-photolist {
      display: block; } }
  .sp-photolist img {
    width: 100%;
    height: auto; }
  .sp-photolist .img-box {
    margin-top: 1rem;
    position: relative; }
    .sp-photolist .img-box .cap {
      position: absolute;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.8);
      padding: 3px;
      margin-top: .5rem;
      text-align: right;
      font-size: 10px;
      line-height: 1;
      color: #fff; }

.icon-box {
  background: #604C3F;
  padding: 20px;
  position: relative;
  margin-top: 50px;
  outline: 1px solid #fff;
  outline-offset: -10px; }
  .icon-box .iconlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    .icon-box .iconlist div, .icon-box .iconlist li {
      min-height: 0%; }
    .icon-box .iconlist .li-ttl {
      width: 100%;
      font-size: 16px;
      padding-bottom: 20px;
      color: #fff; }
    .icon-box .iconlist img {
      width: 90px;
      height: auto;
      margin: 5px; }
    .icon-box .iconlist .li01 {
      width: 70%; }
      .icon-box .iconlist .li01 .iconbox02 {
        margin-top: 20px; }
    .icon-box .iconlist .li02 {
      width: 25%; }
    .icon-box .iconlist .note {
      text-align: right;
      color: #fff;
      margin-top: 20px; }
  @media screen and (max-width: 768px) {
    .icon-box {
      padding: 10px;
      outline-offset: -5px; }
      .icon-box .iconlist {
        text-align: center; }
        .icon-box .iconlist img {
          width: 23%;
          margin: 1%; }
        .icon-box .iconlist .li01 {
          width: 100%; }
        .icon-box .iconlist .li02 {
          width: 100%;
          margin-top: 20px; } }

/* ============= //間取り図 ============= */
/* ============= アクセス ============= */
.access-box {
  margin-top: 50px;
  max-width: 1000px;
  width: 100%;
  background: #DED1B6;
  padding: 1rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }
  .access-box div, .access-box li {
    min-height: 0%; }
  .access-box .ttl-en {
    width: 100%;
    margin: 2rem 0;
    text-align: center; }
  .access-box .rs-acc-list {
    width: calc(100% - (600px + 1rem));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .access-box .rs-acc-list div, .access-box .rs-acc-list li {
      min-height: 0%; }
    @media screen and (max-width: 900px) {
      .access-box .rs-acc-list {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 600px; } }
    @media screen and (max-width: 768px) {
      .access-box .rs-acc-list {
        width: 100%; } }
    .access-box .rs-acc-list li {
      font-size: .7rem;
      margin-bottom: .5rem;
      letter-spacing: .1rem; }
      .access-box .rs-acc-list li.rs-acc-txt {
        width: 100%; }
        .access-box .rs-acc-list li.rs-acc-txt .logo {
          width: 90%;
          margin: auto;
          padding-bottom: 10px;
          max-width: 125px; }
          .access-box .rs-acc-list li.rs-acc-txt .logo img {
            width: 100%;
            height: auto; }
      .access-box .rs-acc-list li.rs-acc-ttl {
        width: 43%; }
      .access-box .rs-acc-list li.rs-acc-con {
        width: 55%; }
      .access-box .rs-acc-list li.rs-acc-note {
        width: 100%;
        font-size: 0.625rem; }
      .access-box .rs-acc-list li.form a {
        padding-bottom: 3px;
        border-bottom: solid 1px #614C3F; }
  .access-box .ac-map {
    width: 600px;
    margin-bottom: 2rem; }
    @media screen and (max-width: 900px) {
      .access-box .ac-map {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        margin-top: 1rem;
        max-width: 600px; } }
    @media screen and (max-width: 768px) {
      .access-box .ac-map {
        width: 100%;
        margin-top: 1rem; } }
    .access-box .ac-map iframe {
      max-width: 100%; }
  .access-box .root {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    font-size: .95rem;
    color: #362A25; }
    .access-box .root div, .access-box .root li {
      min-height: 0%; }
    .access-box .root img {
      width: 100%;
      height: auto; }
    .access-box .root .map-bus {
      width: 49%;
      margin-top: 1rem; }
    .access-box .root .ac-img {
      width: 49%;
      margin-top: 1rem; }
    @media screen and (max-width: 768px) {
      .access-box .root .map-bus {
        width: 100%; }
      .access-box .root .ac-img {
        width: 100%; } }

/* ============= //アクセス ============= */
/* ===================== slider ===================== */
#overraySlide_container {
  width: 100%;
  height: 100vh;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 1s ease 0s opacity;
  transition: 1s ease 0s opacity;
  display: none\0; }
  #overraySlide_container.active {
    opacity: 1;
    pointer-events: auto;
    display: block\0; }

.overraySlide_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8); }

.overraySlide_inner {
  width: 80%;
  max-width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  @media (max-width: 600px) {
    .overraySlide_inner {
      width: 85%; } }

.overraySlider {
  width: 100%;
  position: relative;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden; }

.overraySlider_pic {
  position: relative;
  display: inline-block; }
  .overraySlider_pic .caption {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #FFFFFF; }

.overraySlider img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  outline: none;
  display: block; }

.overraySlider_close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  -webkit-transition: 0.5s ease 0s transform;
  transition: 0.5s ease 0s transform; }
  .overraySlider_close:hover {
    cursor: pointer;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  .overraySlider_close img {
    width: 100%;
    height: auto; }

@media screen and (max-height: 700px) {
  .overraySlide_inner {
    -webkit-transform: translate(-50%, -50%) scale(0.8, 0.8);
    transform: translate(-50%, -50%) scale(0.8, 0.8);
    /*    -webkit-transform: translate(-50%, -50%) scale(0.75, 0.75);
        transform: translate(-50%, -50%) scale(0.75, 0.75);*/ } }
@media screen and (max-height: 530px) {
  .overraySlide_inner {
    -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5);
    transform: translate(-50%, -50%) scale(0.5, 0.5); } }
/* ===================== //slider ===================== */
.float-box {
  top: 50px;
  z-index: 9999; }
  @media screen and (max-width: 768px) {
    .float-box {
      top: auto; }
      .float-box a {
        width: 33.33%; }
        .float-box a.res2 {
          background: #2F89A4; } }