@charset "UTF-8";
/* ==========================================================
0～768px
========================================================== */
@media screen and (max-width: 768px) {
  body {
    font-size: 1.5rem; }

  .pc {
    display: none; }

  p {
    line-height: 2.2; }

  th,
  td {
    width: 100%;
    display: block; }

  th {
    border-bottom: none; }

  /* header
  ----------------------------------------------------------- */
  .head__wrap {
    height: auto; }

  .sp__head__inner {
    width: 100%;
    position: relative;
    height: auto;
    margin: 0 auto;
    position: fixed;
    z-index: 9999 !important; }

  .sp__head__logo {
    width: 100%;
    position: relative;
    position: relative;
    display: flex;
    background: #2f2722; }

  .sp__logo {
    width: 120px;
    height: auto;
    margin-right: auto;
    margin-left: 4%;
    padding-top: 12px; }
    .sp__logo a {
      display: block; }

  .sp__cta__head {
    display: flex; }
    .sp__cta__head li {
      text-align: center; }
      .sp__cta__head li a {
        width: 64px;
        height: 64px;
        display: block;
        color: #fff;
        font-size: 1rem;
        position: relative;
        padding-top: 12px; }
        .sp__cta__head li a.fa-calendar {
          background: #608686; }
        .sp__cta__head li a.fa-calendar::before {
          content: '';
          position: absolute;
          background: url("../images/common/icon_cal.svg") no-repeat top center;
          background-size: contain;
          width: 16px;
          height: 24px;
          top: 32px;
          left: 0;
          right: 0;
          margin: 0 auto; }
        .sp__cta__head li a.fa-tel {
          background: #b49d87; }
        .sp__cta__head li a.fa-tel::before {
          content: '';
          position: absolute;
          background: url("../images/common/icon_tel.svg") no-repeat top center/cover;
          width: 16px;
          height: 16px;
          top: 34px;
          left: 0;
          right: 0;
          margin: 0 auto; }

  #nav-toggle {
    background: #e7e5e3;
    width: 64px;
    height: 64px;
    padding: 24px 18px;
    color: #fff;
    z-index: 9999;
    touch-action: manipulation;
    cursor: pointer; }

  #nav-toggle div {
    position: relative; }

  #nav-toggle span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #2f2722;
    transition: .35s ease-in-out; }

  #nav-toggle span:nth-child(1) {
    top: 0; }

  #nav-toggle span:nth-child(2) {
    top: 7px; }

  #nav-toggle span:nth-child(3) {
    top: 14px; }

  /* #nav-toggle animation */
  .open #nav-toggle span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg); }

  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%; }

  .open #nav-toggle span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg); }

  /* #global-nav slide animation */
  .open #sp__global-nav {
    /* #global-nav top(64px) + #mobile-head height */
    transform: translateY(744px); }

  /* gnav
  ----------------------------------------------------------- */
  /*ナビBOX*/
  #sp__global-nav {
    position: absolute;
    /*in*/
    top: -680px;
    width: 100%;
    background: #2f2722;
    padding-bottom: 60px;
    transition: .6s ease-in-out;
    z-index: 9999; }

  .sp__head__nav {
    padding: 60px 10% 0; }

  .sp__menu {
    width: 100%;
    display: block; }
    .sp__menu > li a {
      color: #fff;
      font-size: 2rem;
      font-family: "Cormorant Garamond", serif;
      font-optical-sizing: auto;
      line-height: 1.0;
      font-weight: 300;
      font-style: normal;
      padding: .5em 0;
      display: block; }

  .sp__head__subnav {
    padding: 0 10%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px; }
    .sp__head__subnav a {
      font-size: 1.3rem;
      color: #fff;
      position: relative;
      padding-left: 12px; }
      .sp__head__subnav a::before {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 50%;
        top: calc(50% - (6px / 2));
        left: 0; }

  .sp__head__cta {
    padding: 0 5%;
    margin-top: 40px; }

  .sp__head__tel {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding: 24px 0 20px; }
    .sp__head__tel .sp__head__tel__num {
      font-size: 2rem;
      color: #fff;
      position: relative;
      padding-left: 24px; }
      .sp__head__tel .sp__head__tel__num::before {
        content: '';
        position: absolute;
        background: url("../images/common/icon_tel.svg") left center no-repeat;
        top: calc(60% - (12px / 2));
        left: 0;
        width: 12px;
        height: 12px; }
    .sp__head__tel .sp__head__tel__time {
      font-size: 1.2rem;
      color: #fff;
      letter-spacing: .05em;
      margin-top: .4em;
      padding-left: 24px; }

  .sp__head__cta__btn {
    display: flex;
    justify-content: space-between; }
    .sp__head__cta__btn li {
      flex: 1; }

  .btn--cta {
    width: 100%;
    height: 80px;
    font-size: 1.6rem;
    padding-top: 26px; }

  /* visual
  ----------------------------------------------------------- */
  .tp__visual {
    height: 100svh; }

  .tp__visual__img {
    width: 120px;
    margin-top: 16vw !important; }

  .scroll {
    bottom: 0; }
    .scroll img {
      width: 80px; }

  /* #tp__message
  ----------------------------------------------------------- */
  #tp__intro {
    padding: 60px 0 120px;
    background: url("../images/common/bg_water_br.jpg10.jpg") no-repeat top left;
    background-size: contain; }

  .tp__intro__main {
    width: 90vw; }

  .tp__intro__detail {
    display: block; }

  .tp__intro__txt {
    width: 100%; }

  .tp__intro__ttl {
    margin-top: -10vw;
    margin-left: auto;
    padding-right: 5%; }
    .tp__intro__ttl .ttl--en {
      font-size: 15vw; }
    .tp__intro__ttl .ttl--sub {
      font-size: 1.6rem;
      margin-top: .5em; }
    .tp__intro__ttl .ttl--ja {
      font-size: 2.2rem;
      padding-left: 70px; }
      .tp__intro__ttl .ttl--ja::before {
        width: 50px; }

  .tp__intro__comment {
    width: 100%;
    margin-top: 80px;
    margin-left: 0;
    padding: 0 5% 0 20%; }
    .tp__intro__comment .attent {
      font-size: 1.3rem;
      line-height: 2.0; }

  .tp__intro__mark {
    top: 50vw; }

  .tp__intro__img {
    width: 100%;
    padding-top: 80px;
    display: flex;
    flex-direction: column; }

  .tp__intro__img02 {
    width: 90vw; }

  .tp__intro__img03 {
    width: 65vw;
    margin-top: 50px;
    margin-right: 0; }

  .tp__intro__type {
    margin-top: -2vw;
    padding: 0 5%; }

  /* #tp__bestrate
  ----------------------------------------------------------- */
  #tp__bestrate {
    padding: 60px 0 100px; }

  .tp__bestrate__inner {
    padding-bottom: 60px; }

  .tp__bestrate__benefit .en {
    font-size: 1.2rem; }
  .tp__bestrate__benefit .ja {
    font-size: 1.6rem; }

  .tp__bestrate__ttl h2 {
    font-size: 22px;
    padding: 32px 40px;
    margin-top: 16px;
    white-space: nowrap; }
    .tp__bestrate__ttl h2::before {
      width: 30px; }
    .tp__bestrate__ttl h2::after {
      width: 30px; }

  .tp__bestrate__ttl--en {
    top: 50px; }

  .tp__bestrate__txt {
    margin-top: 20px;
    padding: 0 10%; }
    .tp__bestrate__txt p {
      font-size: 1.5rem;
      text-underline-offset: .5em;
      line-height: 2; }

  .tp__bestrate__condition {
    margin: 40px auto 0;
    display: block; }
    .tp__bestrate__condition dt {
      font-size: 1.6rem;
      padding-top: .2em;
      padding-bottom: 1.2em;
      padding-right: 0;
      margin-right: 0;
      margin-bottom: 1.2em;
      border-right: none;
      border-bottom: 1px solid #c5b5a6;
      text-align: center; }
    .tp__bestrate__condition li {
      font-size: 1.4rem;
      line-height: 1.8; }

  /* #tp__news
  ----------------------------------------------------------- */
  #tp__news {
    padding: 80px 5% 100px; }

  .tp__news__inner {
    display: block; }

  .tp__news__head {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    margin-right: 0; }

  .tp__news__ttl {
    display: flex;
    align-items: baseline; }
    .tp__news__ttl .ttl--en {
      font-size: 5rem; }
    .tp__news__ttl .ttl--ja {
      font-size: 1.5rem;
      margin-top: .8em;
      padding-left: 1em; }

  .tp__news__list {
    width: 100%;
    border-top: none;
    margin-top: 20px; }
    .tp__news__list a {
      padding: 1.6em 0 1.8em; }
    .tp__news__list .news__thum {
      width: 120px;
      margin-right: 30px;
      padding-top: 10px; }
    .tp__news__list .date {
      font-size: 1.2rem; }
    .tp__news__list .ttl {
      font-size: 1.4rem;
      line-height: 1.8; }

  .tp__news__btn {
    flex: 1;
    padding-right: 0;
    margin-top: 60px; }

  .btn--more {
    font-size: 1.6rem;
    padding-right: 60px; }
    .btn--more::after {
      width: 30px;
      top: calc(50% - (80px / 2)); }

  /* #tp__room
  ----------------------------------------------------------- */
  #tp__room {
    padding-bottom: 120px; }

  .tp__room__top {
    display: block; }
    .tp__room__top figure {
      margin-top: 60px;
      width: 80%; }

  .tp__service__ttl {
    padding: 0 2% 0 0;
    margin: 80px 0 0 auto; }
    .tp__service__ttl .ttl--en {
      font-size: 15vw; }
    .tp__service__ttl .ttl--sub {
      font-size: 1.6rem;
      margin-top: .5em; }
    .tp__service__ttl .ttl--ja {
      font-size: 2rem;
      padding-left: 70px; }
      .tp__service__ttl .ttl--ja::before {
        width: 50px; }

  .tp__room__btm {
    display: flex;
    flex-direction: row-reverse;
    position: relative; }
    .tp__room__btm .tp__room__detail {
      width: 85%;
      position: relative;
      margin-top: 70vw; }
    .tp__room__btm figure {
      width: 70%;
      position: absolute;
      top: 0;
      right: 0;
      padding-left: 0;
      padding-right: 0;
      margin-top: 20px; }

  .tp__room__btn {
    margin-top: 60px; }

  .btn--more__corner {
    font-size: 1.6rem;
    padding-right: 50px;
    padding-bottom: 18px; }
    .btn--more__corner::before {
      right: 28px;
      top: 6px; }
    .btn--more__corner::after {
      width: 160px; }

  /* #tp__access
  ----------------------------------------------------------- */
  #tp__access {
    padding-bottom: 120px; }

  .tp__access__map {
    position: relative;
    width: 100%;
    height: 100vw; }

  .tp__access__ttl {
    margin-top: 40px; }
    .tp__access__ttl .ttl--en {
      font-size: 15vw; }
    .tp__access__ttl .ttl--ja {
      font-size: 1.8rem; }
    .tp__access__ttl .ttl--sub {
      font-size: 1.6rem; }

  .tp__access__detail {
    width: min(90%, 1200px);
    margin: 40px auto 0;
    display: block; }

  .tp__access__btn {
    margin-top: 60px; }

  /* footer
  ----------------------------------------------------------- */
  .ft__info {
    padding: 80px 0 60px; }

  .ft__info__logo img {
    width: 120px; }

  .ft__info__inner {
    margin: 60px auto 0;
    display: block; }
    .ft__info__inner p {
      font-size: 1.3rem;
      line-height: 1.8; }
      .ft__info__inner p .small {
        font-size: 1.1rem; }
    .ft__info__inner a {
      line-height: 1.8; }

  .ft__info__address {
    width: 100%;
    border-right: none;
    display: block; }
    .ft__info__address h3 {
      font-size: 1.6rem;
      line-height: 1.6;
      width: 100%;
      margin-bottom: 1.5em; }
    .ft__info__address .address__area {
      padding: 0; }

  .ft__info__detail {
    width: 100%;
    padding-left: 0;
    margin-top: 60px; }
    .ft__info__detail h3 {
      font-size: 1.6rem;
      margin-bottom: 1.5em; }
      .ft__info__detail h3::before {
        display: none; }

  .ft__link__sns {
    margin-top: 60px; }
    .ft__link__sns li {
      padding: 0 16px; }

  .ft__link {
    padding: 60px 7% 80px; }
    .ft__link::after {
      width: 90%;
      bottom: 20px; }

  .ft__link__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px; }
    .ft__link__list li {
      font-size: 1.2rem; }

  .footer__cta {
    margin: 30px auto 0;
    gap: 2px; }
    .footer__cta .btn--cta {
      width: 100%;
      height: 84px;
      font-size: 1.6rem;
      padding-top: 30px; }
      .footer__cta .btn--cta span {
        font-size: 1.2rem; }
    .footer__cta .btn--cta.plan::before {
      background-size: 12px;
      width: 12px;
      height: 10px;
      top: 16px; }
    .footer__cta .btn--cta.cal::before {
      background-size: 12px;
      width: 12px;
      height: 14px;
      top: 14px; }

  .ft__copyright {
    padding-top: 60px; }

  .page-top {
    display: none !important; }

  .sp__side_benefit {
    width: 88px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9998; }

  /* sub_common
  ----------------------------------------------------------- */
  .sub__visual {
    padding-top: 120px; }

  .sub__visual__inner {
    height: 200px; }

  .sub-page-ttl {
    top: 0; }
    .sub-page-ttl .en {
      font-size: 6.4rem; }
    .sub-page-ttl .ja {
      font-size: 1.8rem;
      margin-top: .5em; }

  .sub__visual.noimg {
    padding-bottom: 40px; }
    .sub__visual.noimg .sub__visual__inner {
      height: auto;
      background: none; }

  .breadCrumb {
    padding: 1em 5% 40px; }
    .breadCrumb li {
      font-size: 1rem; }

  /* news
  ----------------------------------------------------------- */
  .news__list {
    background: url("../images/common/bg_water_br.jpg10.jpg") no-repeat top left; }

  .news__inner {
    width: min(100%, 1560px);
    padding-bottom: 120px; }

  .page__inner {
    width: min(100%, 1560px); }

  .card__list {
    width: min(80%, 900px);
    margin: 0 auto;
    padding-top: 0; }
    .card__list a {
      display: block; }
    .card__list .news__thum {
      width: 100%;
      margin-right: 0; }
      .card__list .news__thum img {
        width: 100%; }
    .card__list .date {
      font-size: 1.4rem;
      margin-top: 1em; }
    .card__list .ttl {
      line-height: 1.8; }

  .news__article {
    width: min(80%, 900px);
    padding-top: 40px; }

  .article__ttl {
    padding-bottom: 2em;
    margin-bottom: 2em; }
    .article__ttl .date {
      font-size: 1.4rem; }
    .article__ttl .ttl {
      font-size: 1.8rem;
      line-height: 1.8; }

  .article__content {
    padding-bottom: 30px; }

  .news__btn {
    margin-top: 40px; }

  .btn--back {
    font-size: 1.6rem;
    padding-left: 40px;
    padding-bottom: 18px; }
    .btn--back::before {
      left: 20px;
      top: 6px; }
    .btn--back::after {
      width: 160px; }

  /* WordPress
  ----------------------------------------------------------- */
  .pagenav {
    width: min(80%, 900px);
    padding-top: 60px;
    line-height: 2em; }

  .pagenav a.page-numbers, .pagenav .current {
    font-size: 1.2rem; }

  /* contact
  ----------------------------------------------------------- */
  .contact #sub-visual {
    background-size: cover; }

  .contact footer {
    display: none; }

  .contact-inner {
    width: 100%;
    position: relative;
    padding: 32px 0 0; }
    .contact-inner p {
      padding: 0 5%; }

  .contact-box {
    padding: 24px 5% 40px; }
    .contact-box ul {
      margin-bottom: 32px; }
      .contact-box ul li {
        font-size: 1.2rem; }

  .sup {
    margin-left: 0.5em; }

  input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0; }

  .contact-input th {
    width: 100%;
    display: block;
    vertical-align: top;
    padding: 1em 2%; }
  .contact-input td {
    width: 100%;
    display: block;
    padding: 1em 2%; }

  .contact-input input {
    font-size: 1.5rem; }
    .contact-input input.middle {
      width: 100%;
      height: 2em; }
    .contact-input input.long {
      width: 100%;
      height: 2em; }
  .contact-input textarea {
    width: 100%;
    height: 15em;
    font-size: 1.5rem; }

  .submit.btn input {
    font-size: 2.4rem;
    line-height: 80px;
    margin: 40px auto 0;
    width: 100%; }

  .soushin.btn input {
    font-size: 2.4rem;
    line-height: 80px;
    margin: 30px auto 0;
    width: 100%; }
    .soushin.btn input.inback {
      line-height: 60px;
      position: static;
      width: 50%; }

  .finish-info {
    width: 90%;
    padding: 16px 0;
    margin: 32px auto; }

  .finish-back {
    width: 100%;
    margin: 0 auto; }
    .finish-back .btn {
      display: block;
      margin-right: 0;
      margin-bottom: 24px; }
      .finish-back .btn a {
        display: block;
        width: 70%;
        line-height: 60px; } }
/* -----@media screen and (max-width:768px) ------ */