/* ONSEN
*****************************************************************/
/* mixin
********************************************************************/
/* color */
/* media query */
#contents {
  background-image: url("../images/bg_nami.svg");
  background-position: center 20px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative; }
  @media all and (max-width: 899px) {
    #contents {
      background-position: center 0px;
      background-size: 130% auto; } }

.area_detail {
  padding: 0 20px; }
  .area_detail .block_detail {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0; }
    @media all and (max-width: 899px) {
      .area_detail .block_detail {
        padding: 20px 0 0; } }
    .area_detail .block_detail .box_ttl {
      width: 100%;
      height: 240px;
      background-image: url("../../common/images/fluid05.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: auto 90%;
      position: relative; }
      @media all and (max-width: 899px) {
        .area_detail .block_detail .box_ttl {
          height: 120px; } }
      .area_detail .block_detail .box_ttl .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%; }
        .area_detail .block_detail .box_ttl .inner p {
          font-size: 1.4rem;
          line-height: 1.5em;
          padding: 0 0 6px; }
        .area_detail .block_detail .box_ttl .inner h2 {
          font-size: 2.8rem;
          line-height: 1.3em;
          letter-spacing: 0.1em; }
    .area_detail .block_detail .box_slide .slider > div {
      line-height: 0em; }
      .area_detail .block_detail .box_slide .slider > div img {
        width: 100%;
        height: auto; }
      .area_detail .block_detail .box_slide .slider > div p {
        line-height: 1.4em;
        font-size: 1.4rem;
        text-align: right;
        padding: 5px 0 0; }
    .area_detail .block_detail .box_slide .slider .single {
      padding: 0 0 30px; }
    .area_detail .block_detail .box_txt {
      text-align: left;
      display: flex;
      flex-wrap: wrap; }
      .area_detail .block_detail .box_txt .side_copy {
        box-sizing: border-box;
        width: 50%;
        padding: 0 40px 0 0; }
        @media all and (max-width: 899px) {
          .area_detail .block_detail .box_txt .side_copy {
            width: 100%;
            padding: 0 0px 0 0; } }
        .area_detail .block_detail .box_txt .side_copy h4 {
          font-size: 2rem;
          line-height: 1.4em; }
        .area_detail .block_detail .box_txt .side_copy p {
          font-size: 1.5rem;
          line-height: 2em;
          padding: 15px 0;
          letter-spacing: 0.05em; }
        .area_detail .block_detail .box_txt .side_copy .btn_reserve {
          padding: 10px 0 0; }
          .area_detail .block_detail .box_txt .side_copy .btn_reserve a {
            max-width: 260px;
            font-size: 1.6rem;
            padding: 12px 0;
            position: relative; }
            @media all and (max-width: 899px) {
              .area_detail .block_detail .box_txt .side_copy .btn_reserve a {
                font-size: 1.8rem; } }
            .area_detail .block_detail .box_txt .side_copy .btn_reserve a::after {
              font-family: "Font Awesome 5 Free";
              font-weight: bold;
              content: "\f152";
              position: absolute;
              top: 48%;
              transform: translateY(-48%);
              right: 7px;
              font-size: 0.9em; }
      .area_detail .block_detail .box_txt .side_spec {
        width: 50%;
        box-sizing: border-box;
        padding: 0 0 0 40px;
        border-left: #666 dotted 1px; }
        @media all and (max-width: 899px) {
          .area_detail .block_detail .box_txt .side_spec {
            width: 100%;
            padding: 5px 0 0 0px;
            border-left: none; } }
        .area_detail .block_detail .box_txt .side_spec dl {
          font-size: 1.4rem;
          line-height: 1.8em; }
          .area_detail .block_detail .box_txt .side_spec dl dd {
            padding: 0 0 20px; }
            @media all and (max-width: 899px) {
              .area_detail .block_detail .box_txt .side_spec dl dd {
                padding: 0 0 10px; } }

.area_bihaku {
  text-align: center;
  padding: 60px 0 0;
  position: relative; }
  @media all and (max-width: 1025px) {
    .area_bihaku {
      padding: 120px 0 0; } }
  @media all and (max-width: 899px) {
    .area_bihaku {
      padding: 200px 0 0; } }
  @media all and (max-width: 480px) {
    .area_bihaku {
      padding: 220px 0 0; } }
  .area_bihaku .block_txt {
    position: absolute;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    z-index: 20;
    top: 60px; }
    @media all and (max-width: 899px) {
      .area_bihaku .block_txt {
        top: 20px; } }
    .area_bihaku .block_txt h2 {
      font-size: 2.8rem;
      line-height: 1.3em; }
    .area_bihaku .block_txt p {
      font-size: 1.4rem;
      line-height: 2em;
      padding: 20px 0 0; }
      @media all and (max-width: 899px) {
        .area_bihaku .block_txt p {
          text-align: left;
          padding: 10px 0 0; } }
  .area_bihaku .block_bihaku {
    background-image: url("../images/bg_bihaku.png");
    background-size: cover;
    background-position: center center;
    width: 100%;
    position: relative;
    padding-top: 40.62%;
    z-index: 10; }
    .area_bihaku .block_bihaku .inner {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      box-sizing: border-box; }