@charset "UTF-8";
.inner {
  width: 90%;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .inner {
      width: 100%; } }

.grid_column2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* ←左右50% */
  gap: 50px;
  align-items: stretch; }
  @media screen and (max-width: 768px) {
    .grid_column2 {
      grid-template-columns: 1fr;
      gap: 30px; } }

.bg {
  background-image: url("../images/bg_img.png"); }

.text {
  word-break: keep-all;
  overflow-wrap: anywhere; }

#first_view {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  /* slickの領域 */
  /* slickのボタン類は非表示（必要なら後で追加） */
  /* コピー帯 */
  /* ==========================
    first_view 波
  ========================== */
  /* 横移動 */
  /* SVGを「少しだけ重ねる」 */
  /* 波の色 */ }
  @media screen and (max-width: 768px) {
    #first_view {
      height: 80svh; } }
  @media screen and (max-width: 480px) {
    #first_view {
      height: 70svh; } }
  #first_view .fv_slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* slickの高さ崩れ防止 */ }
    #first_view .fv_slider .fv_slide {
      width: 100%;
      height: 100svh;
      background-position: bottom center;
      background-size: cover;
      /* 背景画像（直書きなし） */ }
      @media screen and (max-width: 768px) {
        #first_view .fv_slider .fv_slide {
          height: 80svh; } }
      @media screen and (max-width: 480px) {
        #first_view .fv_slider .fv_slide {
          height: 70svh; } }
      #first_view .fv_slider .fv_slide.slide01 {
        background-image: url("../images/fv1.webp"); }
      #first_view .fv_slider .fv_slide.slide02 {
        background-image: url("../images/fv2.webp"); }
      #first_view .fv_slider .fv_slide.slide03 {
        background-image: url("../images/fv3.webp"); }
      #first_view .fv_slider .fv_slide.slide04 {
        background-image: url("../images/fv4.webp"); }
      #first_view .fv_slider .fv_slide.slide05 {
        background-image: url("../images/fv5.webp"); }
    #first_view .fv_slider .slick-list,
    #first_view .fv_slider .slick-track {
      height: 100%; }
  #first_view .slick-arrow,
  #first_view .slick-dots {
    display: none !important; }
  #first_view .fv_copy {
    position: absolute;
    top: 43%;
    z-index: 5;
    width: 100%;
    padding: 0 16px; }
    #first_view .fv_copy .copy_line {
      margin: 0;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.08em;
      font-size: clamp(26px, 1.6vw, 40px);
      color: #fff; }
      #first_view .fv_copy .copy_line span {
        display: inline-block;
        /* ←背景を文字幅で止める */
        background: rgba(35, 28, 28, 0.88);
        padding: 14px 20px;
        margin: 5px 0; }
      @media screen and (max-width: 480px) {
        #first_view .fv_copy .copy_line {
          font-size: clamp(20px, 4.6vw, 24px); }
          #first_view .fv_copy .copy_line span {
            padding: 12px 16px; } }
  #first_view .fv_wave {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    height: 120px;
    /* PC */ }
    @media screen and (max-width: 768px) {
      #first_view .fv_wave {
        height: 90px; } }
    @media screen and (max-width: 480px) {
      #first_view .fv_wave {
        height: 90px; } }
  #first_view .fv_wave svg {
    width: 200%;
    height: 120px;
    /* PC */
    display: block; }
    @media screen and (max-width: 768px) {
      #first_view .fv_wave svg {
        height: 90px; } }
    @media screen and (max-width: 480px) {
      #first_view .fv_wave svg {
        height: 90px;
        /* ←SVGを大きくして波を細く見せる */
        transform: none; } }
  #first_view .fv_waveInner {
    display: flex;
    width: 200%;
    animation: fvWaveMove 16s linear infinite;
    will-change: transform; }
  #first_view .fv_waveInner svg {
    width: calc(50% + 2px);
    /* ←ここが超重要 */
    height: 120px;
    flex: 0 0 calc(50% + 2px);
    display: block;
    margin-left: -2px;
    /* ←重ねる */ }
  #first_view .fv_waveInner path {
    fill: #fff;
    animation: fvWaveFloat 5.8s ease-in-out infinite;
    transform-origin: center; }

/* 横に流す */
@keyframes fvWaveMove {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-50%, 0, 0); } }
/* 上下ゆらゆら */
@keyframes fvWaveFloat {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(10px); } }
#page_title {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: min(400px, 34vw);
  min-height: 200px; }
  @media screen and (max-width: 480px) {
    #page_title {
      height: 260px;
      min-height: 200px; } }
  #page_title .title_bg, #page_title .title_bg1 {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/title_bg.webp") center/cover no-repeat;
    background-position: center center; }
    #page_title .title_bg::after, #page_title .title_bg1::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.25); }
    #page_title .title_bg div, #page_title .title_bg1 div {
      display: none; }
  #page_title .title_bg1 {
    background: url("../images/title_bg1.webp") center/cover no-repeat; }
  #page_title .title {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    /* 縦中央 */
    justify-content: flex-start;
    /* 左寄せ＆最大幅 */
    width: min(1600px, 97%);
    margin: 50px auto 0; }
    #page_title .title h1 {
      margin: 0; }
      #page_title .title h1 span {
        display: inline-block;
        background: rgba(35, 28, 28, 0.88);
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.10em;
        line-height: 1.2;
        padding: 14px 22px;
        font-size: clamp(22px, 2.6vw, 40px); }
        @media screen and (max-width: 480px) {
          #page_title .title h1 span {
            padding: 10px 16px;
            border-radius: 8px; } }

.content {
  max-width: 1080px;
  width: 90%;
  margin: 0 auto; }

#box1, #box2, #box3, #box4, #box5, #box6, #about1, #about2, #about4, #about5, #dining1 {
  margin: 100px 0; }
  @media screen and (max-width: 768px) {
    #box1, #box2, #box3, #box4, #box5, #box6, #about1, #about2, #about4, #about5, #dining1 {
      margin: 50px 0; } }
  @media screen and (max-width: 480px) {
    #box1, #box2, #box3, #box4, #box5, #box6, #about1, #about2, #about4, #about5, #dining1 {
      margin: 30px 0; } }

#box1 .content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 60px;
  align-items: center; }
  @media (max-width: 900px) {
    #box1 .content {
      grid-template-columns: 1fr;
      gap: 28px; } }
  #box1 .content .photo_area {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 810 / 660;
    /* ★ここが重要 */
    overflow: hidden; }
    #box1 .content .photo_area img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      /* 余白が出ないように */
      object-position: center; }
  #box1 .content .photo_area1 {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 1158 / 1201;
    /* ★ここが重要 */
    overflow: hidden; }
    #box1 .content .photo_area1 img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      /* 余白が出ないように */
      object-position: center; }
  #box1 .content .tate_text {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    z-index: 2;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    /* 2列折り返し防止 */ }
    #box1 .content .tate_text span {
      display: inline-block;
      background: rgba(35, 28, 28, 0.88);
      color: #fff;
      padding: 16px 10px;
      border-radius: 8px;
      font-weight: 600;
      letter-spacing: 0.12em; }
    @media (max-width: 900px) {
      #box1 .content .tate_text {
        right: 16px; }
        #box1 .content .tate_text span {
          padding: 14px 9px; } }
    @media (max-width: 480px) {
      #box1 .content .tate_text {
        right: 12px; }
        #box1 .content .tate_text span {
          padding: 12px 8px; } }

#box2 {
  background-color: #FAF9F5;
  /* 1ブロック */ }
  #box2 h2 {
    margin-top: 30px; }
    @media screen and (max-width: 768px) {
      #box2 h2 {
        margin-top: 20px; } }
  #box2 .inner.guidance1 {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 50px;
    align-items: start;
    padding: 30px 0;
    /* ブロック間の余白 */ }
    #box2 .inner.guidance1 + .inner.guidance1 {
      margin-top: 30px; }
    @media screen and (max-width: 768px) {
      #box2 .inner.guidance1 {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 20px 0; }
        #box2 .inner.guidance1 + .inner.guidance1 {
          margin-top: 20px; } }
    #box2 .inner.guidance1 figure {
      margin: 0;
      position: relative; }
      #box2 .inner.guidance1 figure img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 14px; }
      #box2 .inner.guidance1 figure figcaption {
        position: absolute;
        right: 18px;
        bottom: -18px;
        background: #1f3b5b;
        /* デフォルト（温泉） */
        color: #fff;
        padding: 10px 26px;
        font-weight: 700;
        letter-spacing: 0.25em;
        border-radius: 2px;
        font-size: 18px;
        line-height: 1;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18); }
        @media screen and (max-width: 768px) {
          #box2 .inner.guidance1 figure figcaption {
            right: 14px;
            bottom: -14px;
            padding: 9px 22px;
            font-size: 16px; } }
    #box2 .inner.guidance1:nth-of-type(2) figure figcaption {
      background: #1f5b3b; }
    #box2 .inner.guidance1:nth-of-type(3) figure figcaption {
      background: #7b1f2a; }
    #box2 .inner.guidance1 .info_area {
      padding-top: 10px; }
      #box2 .inner.guidance1 .info_area h3 {
        margin: 0 0 18px;
        font-weight: 700;
        letter-spacing: 0.08em;
        font-size: clamp(20px, 19px + 0.3vw, 24px);
        background-size: 240px;
        background-repeat: no-repeat;
        background-position: bottom left; }
        @media screen and (max-width: 768px) {
          #box2 .inner.guidance1 .info_area h3 {
            margin-bottom: 14px; } }
        #box2 .inner.guidance1 .info_area h3.bg1 {
          background-image: url("../images/sub_title_bg1.png"); }
        #box2 .inner.guidance1 .info_area h3.bg2 {
          background-image: url("../images/sub_title_bg2.png"); }
        #box2 .inner.guidance1 .info_area h3.bg3 {
          background-image: url("../images/sub_title_bg3.png"); }
      #box2 .inner.guidance1 .info_area p {
        margin: 0 0 18px;
        line-height: 2; }
        #box2 .inner.guidance1 .info_area p.btn_area1, #box2 .inner.guidance1 .info_area p.btn_area2 {
          margin-top: 15px;
          text-align: right; }
          #box2 .inner.guidance1 .info_area p.btn_area1 a, #box2 .inner.guidance1 .info_area p.btn_area2 a {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 5px 22px;
            border: 1px solid rgba(0, 0, 0, 0.18);
            border-radius: 999px;
            background: #fff;
            color: #222;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-decoration: none;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.25s ease; }
            #box2 .inner.guidance1 .info_area p.btn_area1 a::after, #box2 .inner.guidance1 .info_area p.btn_area2 a::after {
              content: "→";
              display: inline-block;
              font-size: 1.1em;
              transition: transform 0.25s ease; }
            #box2 .inner.guidance1 .info_area p.btn_area1 a:hover, #box2 .inner.guidance1 .info_area p.btn_area2 a:hover {
              transform: translateY(-2px);
              box-shadow: 0 16px 26px rgba(0, 0, 0, 0.12); }
              #box2 .inner.guidance1 .info_area p.btn_area1 a:hover::after, #box2 .inner.guidance1 .info_area p.btn_area2 a:hover::after {
                transform: translateX(4px); }
        #box2 .inner.guidance1 .info_area p.btn_area1 a {
          color: #1f3b5b;
          border: 1px solid #1f3b5b; }
        #box2 .inner.guidance1 .info_area p.btn_area2 a {
          color: #1f5b3b;
          border: 1px solid #1f5b3b; }

#box3, #about1 {
  /*料金*/
  /* 縦書き2列 */ }
  #box3 h2 span, #about1 h2 span {
    font-size: 0.7em; }
  #box3 h3, #about1 h3 {
    margin-bottom: 0.3em; }
    #box3 h3:nth-of-type(2), #about1 h3:nth-of-type(2) {
      margin-top: 1.5em; }
  #box3 .content, #about1 .content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start; }
    @media screen and (max-width: 768px) {
      #box3 .content, #about1 .content {
        grid-template-columns: 1fr;
        gap: 26px; } }
  #box3 .opening_hours, #about1 .opening_hours {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 12px 16px;
    align-items: center; }
    @media screen and (max-width: 480px) {
      #box3 .opening_hours, #about1 .opening_hours {
        grid-template-columns: 80px 1fr; } }
    #box3 .opening_hours dt, #about1 .opening_hours dt {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background: #2b2422;
      color: #fff;
      font-weight: 700;
      font-size: clamp(16px, 0.9vw, 18px);
      padding: 3px 10px;
      border-radius: 3px;
      white-space: nowrap;
      letter-spacing: 0.08em; }
    #box3 .opening_hours dd, #about1 .opening_hours dd {
      margin: 0;
      font-weight: 700;
      font-size: clamp(20px, 1.6vw, 24px);
      letter-spacing: 0.03em; }
    #box3 .opening_hours dt:nth-of-type(3), #about1 .opening_hours dt:nth-of-type(3) {
      background: #a21b1b; }
    #box3 .opening_hours dd:nth-of-type(3), #about1 .opening_hours dd:nth-of-type(3) {
      font-weight: 600;
      line-height: 1.6;
      font-size: clamp(16px, 1.1vw, 18px); }
  #box3 .usage_fees, #about1 .usage_fees {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 50px; }
    @media screen and (max-width: 768px) {
      #box3 .usage_fees, #about1 .usage_fees {
        margin-bottom: 30px; } }
    #box3 .usage_fees tbody, #about1 .usage_fees tbody {
      width: 100%; }
    #box3 .usage_fees tr, #about1 .usage_fees tr {
      width: 100%; }
    #box3 .usage_fees th,
    #box3 .usage_fees td, #about1 .usage_fees th,
    #about1 .usage_fees td {
      padding: 18px 18px;
      vertical-align: middle;
      /* ←これが超重要 */ }
      @media screen and (max-width: 768px) {
        #box3 .usage_fees th,
        #box3 .usage_fees td, #about1 .usage_fees th,
        #about1 .usage_fees td {
          padding: 14px 14px; } }
    #box3 .usage_fees th, #about1 .usage_fees th {
      width: 70%;
      background: #2f2a25;
      color: #fff;
      font-weight: 600;
      text-align: left;
      line-height: 1.5; }
    #box3 .usage_fees td, #about1 .usage_fees td {
      width: 30%;
      background: #fff;
      text-align: center;
      font-weight: 700;
      font-size: clamp(18px, 1.6vw, 26px);
      white-space: nowrap; }
      @media screen and (max-width: 768px) {
        #box3 .usage_fees td, #about1 .usage_fees td {
          font-size: clamp(18px, 4vw, 22px); } }
    #box3 .usage_fees td span, #about1 .usage_fees td span {
      font-size: 1.25em;
      letter-spacing: .02em; }
    #box3 .usage_fees th span, #about1 .usage_fees th span {
      display: inline-block;
      font-size: .85em;
      opacity: .9;
      font-weight: 400;
      margin-left: .4em; }
    #box3 .usage_fees tr + tr th,
    #box3 .usage_fees tr + tr td, #about1 .usage_fees tr + tr th,
    #about1 .usage_fees tr + tr td {
      border-top: 1px solid rgba(255, 255, 255, 0.15); }
    #box3 .usage_fees tr + tr td, #about1 .usage_fees tr + tr td {
      border-top: 1px solid rgba(0, 0, 0, 0.1); }
  #box3 .tate_text, #about1 .tate_text {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 1050 / 954;
    /* ★box1と同じ：高さ固定しない */
    /*overflow: hidden;*/
    overflow: visible; }
    @media screen and (max-width: 768px) {
      #box3 .tate_text, #about1 .tate_text {
        order: -1;
        /* SPでは上に持ってくる */ } }
    #box3 .tate_text img, #about1 .tate_text img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center; }
  #box3 .tate_caption, #about1 .tate_caption {
    position: absolute;
    top: 65%;
    left: 22px;
    /* ★今回は画像の左寄り */
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    gap: 12px;
    margin: 0; }
    @media screen and (max-width: 768px) {
      #box3 .tate_caption, #about1 .tate_caption {
        top: 60%;
        left: 16px;
        gap: 10px; } }
    @media screen and (max-width: 480px) {
      #box3 .tate_caption, #about1 .tate_caption {
        top: 55%;
        left: 12px;
        gap: 8px; } }
    #box3 .tate_caption span, #about1 .tate_caption span {
      writing-mode: vertical-rl;
      text-orientation: upright;
      white-space: nowrap;
      /* ★2列折り返し防止 */
      background: rgba(35, 28, 28, 0.88);
      color: #fff;
      padding: 16px 10px;
      border-radius: 8px;
      font-weight: 700;
      letter-spacing: 0.12em;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
      height: auto;
      align-self: flex-start; }
      @media screen and (max-width: 480px) {
        #box3 .tate_caption span, #about1 .tate_caption span {
          padding: 14px 9px; } }
  #box3 .tickets, #about1 .tickets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    width: 90%;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      #box3 .tickets, #about1 .tickets {
        grid-template-columns: 1fr;
        gap: 16px; } }
    #box3 .tickets > div, #about1 .tickets > div {
      border: 1px solid rgba(0, 0, 0, 0.25);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      text-align: center;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      transition: transform 0.25s ease, box-shadow 0.25s ease; }
      @media screen and (max-width: 768px) {
        #box3 .tickets > div, #about1 .tickets > div {
          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); } }
    #box3 .tickets > div:hover, #about1 .tickets > div:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16); }
      @media screen and (max-width: 768px) {
        #box3 .tickets > div:hover, #about1 .tickets > div:hover {
          transform: none;
          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); } }
    #box3 .tickets h3, #about1 .tickets h3 {
      margin: 0;
      padding: 16px 12px;
      background: #1f3b5b;
      color: #fff;
      font-weight: 700;
      line-height: 1.35;
      font-size: clamp(16px, 15px + 0.3vw, 18px);
      min-height: 78px; }
      @media screen and (max-width: 768px) {
        #box3 .tickets h3, #about1 .tickets h3 {
          min-height: auto; } }
      #box3 .tickets h3 span, #about1 .tickets h3 span {
        display: block;
        margin-top: 4px;
        font-weight: 500;
        opacity: 0.95;
        font-size: clamp(12px, 11px + 0.3vw, 14px); }
    #box3 .tickets p, #about1 .tickets p {
      margin: 0;
      padding: 18px 10px 22px;
      font-weight: 700;
      color: #111;
      line-height: 1.2;
      font-size: clamp(16px, 15px + 0.4vw, 18px);
      margin-top: auto; }
      #box3 .tickets p span, #about1 .tickets p span {
        font-size: clamp(30px, 28px + 0.8vw, 36px);
        letter-spacing: 0.02em; }

#box4 {
  background-color: #FAF9F5; }
  #box4 .content {
    padding: 50px 0; }
    @media screen and (max-width: 768px) {
      #box4 .content {
        padding: 40px 0; } }
    @media screen and (max-width: 480px) {
      #box4 .content {
        padding: 30px 0; } }
  #box4 .inner {
    width: 100%; }
    #box4 .inner h2 {
      font-size: clamp(22px, 2.2vw, 28px); }
    #box4 .inner ul {
      list-style: none;
      padding-left: 0;
      margin: 1em 0 0; }
      #box4 .inner ul li {
        position: relative;
        padding-left: 1.4em;
        line-height: 1.8; }
        #box4 .inner ul li::before {
          content: "●";
          position: absolute;
          left: 0;
          top: 0;
          font-size: 1em;
          line-height: 1.8;
          color: currentColor; }
    @media screen and (max-width: 768px) {
      #box4 .inner:nth-child(2) {
        border-top: 1px solid #DDD;
        padding-top: 30px; } }

#box5 .photo_map {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    #box5 .photo_map {
      grid-template-columns: 1fr;
      gap: 18px;
      margin-bottom: 40px; } }
  @media screen and (max-width: 480px) {
    #box5 .photo_map {
      gap: 14px;
      margin-bottom: 30px; } }
  #box5 .photo_map figure {
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 18px; }
    @media screen and (max-width: 768px) {
      #box5 .photo_map figure {
        aspect-ratio: 16 / 10; } }
    #box5 .photo_map figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block; }
  #box5 .photo_map iframe {
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    display: block; }
    @media screen and (max-width: 768px) {
      #box5 .photo_map iframe {
        height: 280px;
        min-height: auto; } }
#box5 h3 span {
  font-size: 0.7em;
  margin-left: 1em;
  display: inline-block; }
#box5 .info_area h4 {
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 1.5em; }
  #box5 .info_area h4:first-of-type {
    margin-top: 1em; }
#box5 .info_area p {
  margin-left: 1em; }
  #box5 .info_area p.car {
    margin-left: 0;
    text-indent: -1em;
    padding-left: 1em; }
    #box5 .info_area p.car span {
      font-weight: 700; }
@media screen and (max-width: 768px) {
  #box5 .info_area:nth-child(2) {
    border-top: 1px solid #DDD;
    padding-top: 30px; } }

#box6 {
  background-color: #FAF9F5; }
  #box6 h2 {
    margin-top: 30px; }
    @media screen and (max-width: 768px) {
      #box6 h2 {
        margin-top: 20px; } }
  #box6 .content {
    padding: 50px 0; }
    @media screen and (max-width: 768px) {
      #box6 .content {
        padding: 40px 0; } }
    @media screen and (max-width: 480px) {
      #box6 .content {
        padding: 30px 0; } }
  #box6 .inner {
    width: 100%; }
  #box6 .history-inner {
    max-width: 1200px;
    margin: 0 auto; }
    #box6 .history-inner .history-row {
      display: flex;
      flex-wrap: wrap;
      /*
            align-items:center;
      */
      justify-content: space-between; }
      @media screen and (max-width: 768px) {
        #box6 .history-inner .history-row {
          /*flex-direction:column;*/ } }
      #box6 .history-inner .history-row.reverse {
        flex-direction: row-reverse; }
        @media screen and (max-width: 768px) {
          #box6 .history-inner .history-row.reverse {
            /*flex-direction:column;*/ } }
    #box6 .history-inner .text {
      width: 50%;
      word-break: normal; }
      @media screen and (max-width: 768px) {
        #box6 .history-inner .text {
          width: 100%;
          margin-top: 1.5em; } }
      #box6 .history-inner .text p {
        line-height: 2;
        margin-bottom: 1.5em; }
    #box6 .history-inner .image {
      width: 40%; }
      @media screen and (max-width: 768px) {
        #box6 .history-inner .image {
          width: 80%;
          margin: 0 auto; } }
      #box6 .history-inner .image img {
        width: 100%;
        display: block; }

#box7 {
  text-align: center;
  margin-bottom: 80px; }
  @media screen and (max-width: 768px) {
    #box7 {
      margin-bottom: 50px; } }
  #box7 p {
    font-family: "Noto Serif", serif;
    font-size: clamp(16px, 3vw, 20px);
    line-height: 1.7;
    font-weight: 500;
    color: #919135; }

#about1 {
  background-color: #FAF9F5;
  /* 右の画像エリア */
  /* 表 */ }
  #about1 h2 {
    margin-top: 30px; }
    @media screen and (max-width: 768px) {
      #about1 h2 {
        margin-top: 20px; } }
  #about1 h3 {
    margin-top: 1em; }
  #about1 .content {
    max-width: 1200px;
    width: 92%;
    margin: 0 auto;
    display: grid;
    /* 左右ほぼ半分（少しだけ右を大きく） */
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start; }
    @media screen and (max-width: 768px) {
      #about1 .content {
        grid-template-columns: 1fr;
        gap: 26px; } }
    #about1 .content .info_area {
      margin-bottom: 50px; }
      @media screen and (max-width: 768px) {
        #about1 .content .info_area {
          margin-bottom: 40px; } }
      @media screen and (max-width: 480px) {
        #about1 .content .info_area {
          margin-bottom: 30px; } }
  #about1 .tate_text .tate_caption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    /* 2列にする */
    display: flex;
    flex-direction: row;
    gap: 12px; }
    #about1 .tate_text .tate_caption span {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background: rgba(35, 28, 28, 0.88);
      color: #fff;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 16px 12px;
      border-radius: 10px;
      width: fit-content; }
  #about1 .efficacy {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
    /* 左が狭い */
    /* 右が広い（長文対応） */ }
    #about1 .efficacy th,
    #about1 .efficacy td {
      padding: 16px 16px;
      vertical-align: middle;
      box-sizing: border-box; }
      @media screen and (max-width: 768px) {
        #about1 .efficacy th,
        #about1 .efficacy td {
          padding: 14px 14px; } }
    #about1 .efficacy th {
      width: 28%;
      background: #2f2a25;
      color: #fff;
      font-weight: 600;
      text-align: left;
      line-height: 1.4;
      white-space: nowrap; }
      @media screen and (max-width: 480px) {
        #about1 .efficacy th {
          white-space: normal; } }
    #about1 .efficacy td {
      width: 72%;
      background: #fff;
      text-align: left;
      /* ←重要：長文があるので左寄せ */
      font-weight: 600;
      line-height: 1.6;
      /* 長文があるので nowrap は絶対やめる */
      white-space: normal;
      word-break: break-word;
      font-weight: normal; }
    #about1 .efficacy tr + tr th,
    #about1 .efficacy tr + tr td {
      border-top: 1px solid rgba(0, 0, 0, 0.1); }
  #about1 .gensen_text {
    text-align: center;
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.8em;
    font-weight: 600;
    padding-bottom: 30px; }
    @media screen and (max-width: 768px) {
      #about1 .gensen_text {
        font-size: 1.3rem; } }
    @media screen and (max-width: 480px) {
      #about1 .gensen_text {
        font-size: 1.1rem; } }

#about2 img {
  border-radius: 10px; }

#about3 {
  /* 見出し */
  /* 2カラム */
  /* 左 */
  /* メインスライダー */
  /* 右 */ }
  #about3 .about_box {
    background: #fbfaf6;
    border-radius: 10px;
    padding: 40px 30px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 30px auto; }
    @media screen and (max-width: 768px) {
      #about3 .about_box {
        padding: 25px 18px; } }
    @media screen and (max-width: 480px) {
      #about3 .about_box {
        padding: 20px 14px; } }
  #about3 h3 {
    margin: 0 0 3px;
    font-weight: 700;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px; }
    #about3 h3 span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #2b2422;
      color: #fff;
      padding: 10px 18px;
      border-radius: 2px;
      letter-spacing: .08em;
      white-space: nowrap;
      font-size: 1.4em; }
  #about3 .sub_text {
    font-size: 0.8em;
    line-height: 1.6em;
    margin-bottom: 15px; }
  #about3 .bathroom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start; }
  #about3 .img_area {
    width: 48%; }
    @media screen and (max-width: 768px) {
      #about3 .img_area {
        width: 100%; } }
  #about3 .gallery-wrapper, #about3 .gallery-wrapper1 {
    width: 100%;
    margin: 0 auto 30px; }
    #about3 .gallery-wrapper .main-slider img, #about3 .gallery-wrapper .main-slider1 img, #about3 .gallery-wrapper1 .main-slider img, #about3 .gallery-wrapper1 .main-slider1 img {
      width: 100%;
      display: block;
      border-radius: 8px; }
    #about3 .gallery-wrapper .thumb-wrapper, #about3 .gallery-wrapper .thumb-wrapper1, #about3 .gallery-wrapper1 .thumb-wrapper, #about3 .gallery-wrapper1 .thumb-wrapper1 {
      display: flex;
      justify-content: center;
      /* 中央揃え */
      margin-top: 15px;
      gap: 10px; }
      @media screen and (max-width: 480px) {
        #about3 .gallery-wrapper .thumb-wrapper, #about3 .gallery-wrapper .thumb-wrapper1, #about3 .gallery-wrapper1 .thumb-wrapper, #about3 .gallery-wrapper1 .thumb-wrapper1 {
          gap: 5px; } }
    #about3 .gallery-wrapper .thumb-slide img, #about3 .gallery-wrapper .thumb-slide1 img, #about3 .gallery-wrapper1 .thumb-slide img, #about3 .gallery-wrapper1 .thumb-slide1 img {
      width: 80px;
      height: 60px;
      object-fit: cover;
      border: 2px solid transparent;
      border-radius: 4px;
      cursor: pointer; }
      @media screen and (max-width: 480px) {
        #about3 .gallery-wrapper .thumb-slide img, #about3 .gallery-wrapper .thumb-slide1 img, #about3 .gallery-wrapper1 .thumb-slide img, #about3 .gallery-wrapper1 .thumb-slide1 img {
          width: 50px;
          height: 40px; } }
    #about3 .gallery-wrapper .thumb-slide.active img, #about3 .gallery-wrapper .thumb-slide1.active img, #about3 .gallery-wrapper1 .thumb-slide.active img, #about3 .gallery-wrapper1 .thumb-slide1.active img {
      border-color: #ff6600;
      /* 選択中のサムネイル強調 */ }
  #about3 .bath_info {
    width: 48%; }
    @media screen and (max-width: 768px) {
      #about3 .bath_info {
        width: 100%; } }
  #about3 .bath_info p {
    margin: 0 0 1.0em 0; }
  #about3 ul li {
    list-style: disc;
    margin-left: 2em; }

#about4 {
  background-color: #FAF9F5; }
  #about4 h2 {
    margin-top: 30px; }
    @media screen and (max-width: 768px) {
      #about4 h2 {
        margin-top: 20px; } }

#about5 {
  text-align: center; }
  #about5 p {
    font-family: "Noto Serif", serif;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.7;
    font-weight: 500;
    color: #919135; }

#dining1 {
  background-color: #FAF9F5; }
  #dining1 h2 span {
    font-size: 0.7em; }
  #dining1 h3 {
    text-align: center; }
  #dining1 .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 40px; }
    @media screen and (max-width: 768px) {
      #dining1 .content {
        /*width:100%;*/
        grid-template-columns: 1fr;
        gap: 30px; } }
    #dining1 .content .menu {
      /*
            width: 30%;
            margin-bottom: 50px;
            @include tby {
              width: 47%;
            }
            @include tbt {
              width: 100%;
            }
      */ }
      #dining1 .content .menu figure {
        width: 100%;
        margin: 0 auto 20px; }
        #dining1 .content .menu figure img {
          border-radius: 10%; }
      #dining1 .content .menu .font-red {
        margin-top: 0.6em;
        font-weight: 700;
        color: #ff0004;
        text-indent: -1em;
        padding-left: 1em;
        font-size: 0.8em;
        line-height: 1.4em; }
    #dining1 .content dl {
      display: flex;
      flex-wrap: wrap;
      background-color: #FFF;
      padding: 10px;
      border-radius: 6px; }
      #dining1 .content dl dt {
        width: calc(100% - 5em);
        padding: 2px 0;
        border-top: 1px dotted #CCC; }
        #dining1 .content dl dt:first-child {
          border-top: none; }
        #dining1 .content dl dt span {
          font-size: 0.8em;
          line-height: 1.6em;
          margin-left: 1em;
          display: block; }
      #dining1 .content dl dd {
        text-align: right;
        width: 5em;
        padding: 2px 0;
        border-top: 1px dotted #CCC; }
        #dining1 .content dl dd:nth-child(2) {
          border-top: none; }

#dining2 {
  text-align: center;
  margin-bottom: 80px; }
  @media screen and (max-width: 768px) {
    #dining2 {
      margin-bottom: 50px; } }
  #dining2 p {
    font-family: "Noto Serif", serif;
    font-size: clamp(16px, 3vw, 20px);
    line-height: 1.7;
    font-weight: 500;
    color: #919135; }

/* 波共通 */
.waveWrap {
  width: 100%;
  height: 120px;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  position: relative;
  margin: 0;
  /* ★SPは波を低くする */ }
  @media screen and (max-width: 768px) {
    .waveWrap {
      height: 70px; } }
  @media screen and (max-width: 480px) {
    .waveWrap {
      height: 55px; } }

/* page_title専用の波 */
.waveInTitle {
  position: absolute;
  left: 0;
  bottom: -1px;
  /* 1px隙間対策 */
  width: 100%;
  height: 80px;
  /* 波の高さ。好みで調整OK */
  z-index: 3;
  pointer-events: none; }
  @media screen and (max-width: 768px) {
    .waveInTitle {
      height: 50px; } }
  .waveInTitle path {
    fill: #fff;
    /* 下の白背景と同じ色 */ }

/* 波を2枚並べて横スクロール */
.waveInner {
  display: flex;
  width: 200%;
  height: 100%;
  animation: waveMove 14s linear infinite; }

/* SVG */
.waveWrap svg {
  width: 50%;
  height: 100%;
  flex: 0 0 50%;
  display: block; }

/* 波の色（白場と同じ色にする） */
.waveWrap path {
  fill: #fff; }

/* 上の波は上下反転 */
.waveTop {
  transform: scaleY(-1); }

/* 横移動 */
@keyframes waveMove {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); } }
/* =========================
  スクロールふわっと表示
========================= */
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform; }
  .js-fade.is-show {
    opacity: 1;
    transform: translateY(0); }

/* 左から（必要なら） */
.js-fade-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform; }
  .js-fade-left.is-show {
    opacity: 1;
    transform: translateX(0); }

/* 右から（必要なら） */
.js-fade-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform; }
  .js-fade-right.is-show {
    opacity: 1;
    transform: translateX(0); }

/*成分表*/
.water-analysis {
  width: 100%;
  box-sizing: border-box; }

.water-analysis__inner {
  max-width: 1200px;
  margin: 0 auto; }

.wa-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04); }

.wa-card + .wa-card {
  margin-top: 18px; }

.wa-title {
  font-size: 16px;
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: 0.02em; }

.wa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px; }

.wa-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  /* PCで詰まらない最小幅 */
  background: #fff; }

.wa-table--small {
  min-width: 0;
  /* 2列表は横スクロール不要 */ }

.wa-table th,
.wa-table td {
  border: 1px solid #e9e9e9;
  padding: 10px 10px;
  font-size: 13px;
  line-height: 1.35;
  vertical-align: middle; }

.wa-table th {
  background: #f6f7f9;
  font-weight: 700;
  white-space: nowrap; }

.wa-table td:first-child {
  white-space: nowrap; }

.wa-total td {
  font-weight: 700;
  background: #fbfbfb; }

.wa-note td {
  background: #fcfcff;
  font-weight: 700; }

/* SP */
@media (max-width: 860px) {
  .wa-title {
    font-size: 15px; }

  .wa-table {
    min-width: 0;
    /* SPは横スクロール極力なし */ }

  .wa-table th,
  .wa-table td {
    font-size: 12px;
    padding: 9px 8px; }

  .wa-table td:first-child {
    white-space: normal; } }