@charset "UTF-8";
/******************************
温泉
*******************************/
/* 
イントロ
*/
.intro__wrap {
  display: flex; }
.intro__image {
  width: 30%; }
  .intro__image img {
    border-radius: 0.5rem;
    height: 100%;
    object-fit: cover; }
.intro__msg {
  width: 60%; }
  @media screen and (max-width: 1024px) {
    .intro__msg {
      padding: 5rem 0 0 3rem; } }
  @media screen and (min-width: 1025px) {
    .intro__msg {
      padding: 15rem 0 0 5rem; } }
  .intro__msg p {
    margin-bottom: 4rem; }

/* 
展望風呂
*/
.tenbouburo {
  padding: 10rem 0; }
  .tenbouburo__wrap {
    position: relative;
    background-image: url("../images/onsen/bg_image_tenbouburo.jpg");
    border-radius: 0.5rem 0 0 0.5rem; }
    @media screen and (max-width: 1024px) {
      .tenbouburo__wrap {
        margin-left: 6vw; } }
    @media screen and (min-width: 1025px) {
      .tenbouburo__wrap {
        margin-left: 13vw; } }
  .tenbouburo__body {
    display: grid;
    width: 100%; }
    @media screen and (max-width: 1024px) {
      .tenbouburo__body {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 120px;
        column-gap: 0px;
        row-gap: 0px; } }
    @media screen and (min-width: 1025px) {
      .tenbouburo__body {
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 100px;
        column-gap: 10px;
        row-gap: 10px; } }
  @media screen and (max-width: 1024px) {
    .tenbouburo__title {
      grid-row: 1/4;
      grid-column: 1/2;
      justify-self: center;
      padding-top: 3rem;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      text-orientation: upright; } }
  @media screen and (min-width: 1025px) {
    .tenbouburo__title {
      grid-row: 1/2;
      grid-column: 1/3;
      padding: 5rem 0 0 5rem; } }
  .tenbouburo__title h2 {
    font-size: 2.4rem;
    font-weight: 600; }
  @media screen and (max-width: 1024px) {
    .tenbouburo__msg {
      grid-row: 4/5;
      grid-column: 1/7;
      padding: 0 1.5rem 0 2rem; } }
  @media screen and (min-width: 1025px) {
    .tenbouburo__msg {
      grid-row: 2/5;
      grid-column: 1/3;
      padding: 0 3rem 0 5rem;
      line-height: 3rem; } }
  .tenbouburo__image {
    overflow: hidden;
    position: relative; }
    @media screen and (max-width: 1024px) {
      .tenbouburo__image {
        grid-row: 1/4;
        grid-column: 2/7;
        top: -30px; } }
    @media screen and (min-width: 1025px) {
      .tenbouburo__image {
        grid-row: 1/5;
        grid-column: 3/6;
        top: -50px; } }
    .tenbouburo__image img {
      border-radius: 0.5rem 0 0 0.5rem;
      height: 100%;
      object-fit: cover; }

/* 
内風呂
*/
.uchiburo {
  padding: 10rem 0; }
  .uchiburo__wrap {
    position: relative;
    background-image: url("../images/onsen/bg_image_tenbouburo.jpg");
    border-radius: 0 0.5rem 0.5rem 0; }
    @media screen and (max-width: 1024px) {
      .uchiburo__wrap {
        margin-right: 6vw; } }
    @media screen and (min-width: 1025px) {
      .uchiburo__wrap {
        margin-right: 13vw; } }
  .uchiburo__body {
    display: grid;
    width: 100%; }
    @media screen and (max-width: 1024px) {
      .uchiburo__body {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 120px;
        column-gap: 0px;
        row-gap: 0px; } }
    @media screen and (min-width: 1025px) {
      .uchiburo__body {
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 100px;
        column-gap: 10px;
        row-gap: 10px; } }
  @media screen and (max-width: 1024px) {
    .uchiburo__title {
      grid-row: 1/4;
      grid-column: 6/7;
      justify-self: center;
      padding-top: 3rem;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      text-orientation: upright; } }
  @media screen and (min-width: 1025px) {
    .uchiburo__title {
      grid-row: 1/2;
      grid-column: 4/6;
      padding: 5rem 0 0 4rem; } }
  .uchiburo__title h2 {
    font-size: 2.4rem;
    font-weight: 600; }
  @media screen and (max-width: 1024px) {
    .uchiburo__msg {
      grid-row: 4/5;
      grid-column: 1/7;
      padding: 0 1.5rem 0 2rem; } }
  @media screen and (min-width: 1025px) {
    .uchiburo__msg {
      grid-row: 2/5;
      grid-column: 4/6;
      padding: 0 3rem 0 4rem;
      line-height: 3rem; } }
  .uchiburo__image {
    overflow: hidden;
    position: relative; }
    @media screen and (max-width: 1024px) {
      .uchiburo__image {
        grid-row: 1/4;
        grid-column: 1/6;
        top: -30px; } }
    @media screen and (min-width: 1025px) {
      .uchiburo__image {
        grid-row: 1/5;
        grid-column: 1/4;
        top: -50px; } }
    .uchiburo__image img {
      border-radius: 0 0.5rem 0.5rem 0;
      height: 100%;
      object-fit: cover; }

/* 
効能と泉質
*/
.efficacy {
  padding: 10rem 0; }
  .efficacy__wrap {
    display: flex;
    flex-wrap: wrap; }
    @media screen and (min-width: 1025px) {
      .efficacy__wrap {
        margin-left: 13vw; } }
  @media screen and (max-width: 1024px) {
    .efficacy__msg {
      width: 100%;
      order: 2;
      padding: 0 2rem; } }
  @media screen and (min-width: 1025px) {
    .efficacy__msg {
      width: 60%;
      padding: 0 8rem 0 0; } }
  .efficacy__msg h2 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 4rem; }
  @media screen and (max-width: 1024px) {
    .efficacy__msg dl {
      border-top: 1px solid #C9C9C9; }
    .efficacy__msg dt {
      padding: 2rem 2rem 1rem 2rem; }
    .efficacy__msg dd {
      padding: 0 2rem 2rem 3rem;
      border-bottom: 1px solid #C9C9C9; } }
  @media screen and (min-width: 1025px) {
    .efficacy__msg dl {
      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid #C9C9C9; }
    .efficacy__msg dt {
      width: 20%;
      padding: 2rem 3rem;
      border-bottom: 1px solid #C9C9C9; }
    .efficacy__msg dd {
      width: 80%;
      padding: 2rem 3rem;
      border-bottom: 1px solid #C9C9C9; } }
  @media screen and (max-width: 1024px) {
    .efficacy__image {
      width: 100%;
      order: 1;
      margin-bottom: 6rem; } }
  @media screen and (min-width: 1025px) {
    .efficacy__image {
      width: 40%; }
      .efficacy__image img {
        height: 100%;
        object-fit: cover;
        border-radius: 0.5rem 0 0 0.5rem; } }

/*
ご利用案内
*/
.information {
  position: relative;
  background-color: #FFD7CA; }
  @media screen and (max-width: 1024px) {
    .information {
      padding: 5rem 0; } }
  @media screen and (min-width: 1025px) {
    .information {
      padding: 10rem 0 5rem 0; } }
  .information h2 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 4rem; }
  @media screen and (max-width: 1024px) {
    .information dl {
      padding: 0 3rem; }
    .information dd {
      padding: 0 2rem 2rem 3rem; }
      .information dd span {
        display: block; } }
  @media screen and (min-width: 1025px) {
    .information dl {
      display: flex;
      flex-wrap: wrap;
      padding: 0 2rem; }
    .information dt {
      width: 20%;
      padding: 2rem 3rem; }
    .information dd {
      width: 80%;
      padding: 2rem 3rem; }
      .information dd span {
        margin-right: 5rem; } }

/*
ネクストコンテンツ
*/
.next_contents {
  position: relative;
  background-image: url("../images/onsen/next_contents_image.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center; }
  @media screen and (max-width: 1024px) {
    .next_contents {
      padding: 10rem 0; } }
  @media screen and (min-width: 1025px) {
    .next_contents {
      padding: 20rem 0; } }
  .next_contents__title {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #fff;
    font-size: 3.6rem;
    font-weight: 800;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 1.4rem;
    display: inline-block; }
  .next_contents .btnwrap {
    text-align: center; }
  .next_contents .btnarrow {
    color: #fff;
    border: 1px solid #fff; }
  .next_contents .btnarrow::before,
  .next_contents .btnarrow::after {
    background: #fff; }