@charset "UTF-8";
@import url(../css/reset.css);
.delay01 {
  transition-delay: .1s !important; }

.delay02 {
  transition-delay: .2s !important; }

.delay03 {
  transition-delay: .3s !important; }

.delay04 {
  transition-delay: .4s !important; }

.delay05 {
  transition-delay: .5s !important; }

.delay06 {
  transition-delay: .6s !important; }

.delay07 {
  transition-delay: .7s !important; }

.delay08 {
  transition-delay: .8s !important; }

.delay09 {
  transition-delay: .9s !important; }

.delay10 {
  transition-delay: 1s !important; }

/* fade in up */
.fade-in-up {
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  opacity: 0;
  transition: all 1s ease; }
  .fade-in-up.inview-on {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1; }

.inview-on .fade-in-up {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1; }

.sans {
  font-family: YakuHanJP, "Zen Kaku Gothic New", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif; }

.serif {
  font-family: YakuHanMPs, "Noto Serif JP", serif; }

.roboto {
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  font-style: normal; }

.wide {
  letter-spacing: 0.1rem; }
  @media screen and (max-width: 750px) {
    .wide {
      letter-spacing: 0.05rem; } }

.ft_m {
  font-family: manrope,noto sans jp,sans-serif;
  font-style: normal; }

.ft_e {
  font-family: montserrat, sans-serif;
  font-weight: 700;
  font-style: normal; }

.cp-gallery {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

.cp-gallery {
  font-size: 10px; }

@media screen and (min-width: 768px) and (max-width: 1560px) {
  .cp-gallery {
    font-size: calc(100vw * 10 / 1560); } }
@media screen and (max-width: 767px) {
  .cp-gallery {
    font-size: calc(100vw * 10 / 500); } }
.cp-gallery {
  overflow: hidden; }
  @media screen and (max-width: 750px) {
    .cp-gallery .page_hero .mainimage figcaption {
      bottom: auto;
      top: 2em; } }
  @media screen and (min-width: 751px) {
    .cp-gallery .page_hero .bg .ttl_img {
      width: 7%; } }
  @media screen and (max-width: 750px) {
    .cp-gallery .page_hero .bg .ttl_img {
      width: 21%; } }
  .cp-gallery .page_hero .bg .limited_tag {
    position: absolute;
    top: -3em;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #dc4b33;
    color: #fff;
    font-size: 2em;
    padding: 0.5em;
    width: 13em;
    text-align: center; }
  .cp-gallery .sec--lead {
    background: #f5efe7;
    padding: 5% 0 13%; }
    @media screen and (max-width: 750px) {
      .cp-gallery .sec--lead {
        padding: 6em 0 12em; } }
    .cp-gallery .sec--lead .ttl {
      font-size: 4.8em;
      text-align: center;
      font-weight: 400; }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--lead .ttl {
          font-size: 3.5em; } }
    .cp-gallery .sec--lead .text {
      line-height: 2.5;
      text-align: center;
      margin-top: 3em; }
      .cp-gallery .sec--lead .text .kome {
        position: relative; }
        .cp-gallery .sec--lead .text .kome:after {
          content: "※1";
          position: absolute;
          top: -1.8em;
          right: 0;
          font-size: 1.2em; }
  .cp-gallery .sec .ttl_img {
    height: 6em;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    width: auto; }
    @media screen and (max-width: 750px) {
      .cp-gallery .sec .ttl_img {
        height: 5em; } }
    .cp-gallery .sec .ttl_img img {
      height: 100%; }
  .cp-gallery .sec .reserve_btn a {
    width: 100%;
    max-width: 40rem;
    height: 4em;
    margin: 0 auto;
    background: #ff5433;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10em;
    font-size: 2em;
    position: relative; }
    .cp-gallery .sec .reserve_btn a img {
      width: 0.8em;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 4em; }
  .cp-gallery .sec--room {
    background: #f9f9f3;
    padding-top: 8rem;
    padding-bottom: 8rem; }
    @media screen and (max-width: 750px) {
      .cp-gallery .sec--room {
        padding-bottom: 5em; } }
    @media screen and (max-width: 750px) {
      .cp-gallery .sec--room .ttl_img {
        margin-top: -5em; } }
    .cp-gallery .sec--room .tabNav_wrap {
      width: 70em;
      margin: 7em auto 0;
      border: 2px solid #403f3f;
      display: grid;
      grid-template-columns: 1fr 1fr; }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--room .tabNav_wrap {
          width: calc(100% - 5em);
          margin-right: 2.5em;
          margin-left: 2.5em;
          box-sizing: border-box; } }
      .cp-gallery .sec--room .tabNav_wrap .tabNav {
        background: #ffffff;
        border-radius: 0;
        font-size: 2.2em;
        color: #403f3f;
        border: 0;
        padding: 1em 0;
        font-weight: 500; }
        .cp-gallery .sec--room .tabNav_wrap .tabNav.active {
          background: #6e808a;
          /**background: url(../imgs/tab_bg.png) no-repeat;**/
          background-size: cover;
          color: #ffffff;
          position: relative; }
          .cp-gallery .sec--room .tabNav_wrap .tabNav.active:before {
            content: "";
            position: absolute;
            top: 99%;
            left: 50%;
            margin-left: -1em;
            border: 1em solid transparent;
            border-top: 1.5em solid #6e808a; }
    .cp-gallery .sec--room .tabPanel {
      display: none; }
      .cp-gallery .sec--room .tabPanel.active {
        display: block; }
    .cp-gallery .sec--room .mainimage {
      position: relative;
      margin-top: 10em; }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--room .mainimage {
          margin-top: 7em; } }
      @media screen and (min-width: 751px) {
        .cp-gallery .sec--room .mainimage .image {
          width: 55em;
          margin: 0 auto;
          padding-left: 4em; } }
      .cp-gallery .sec--room .mainimage .label {
        position: absolute;
        top: -8em;
        left: 5em;
        width: 20em; }
        @media screen and (max-width: 750px) {
          .cp-gallery .sec--room .mainimage .label {
            top: -4em;
            left: -3em;
            width: 14em; } }
      .cp-gallery .sec--room .mainimage .list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5em; }
        @media screen and (min-width: 751px) {
          .cp-gallery .sec--room .mainimage .list.n--01 {
            position: absolute;
            top: 16em;
            left: -7em; } }
        @media screen and (max-width: 750px) {
          .cp-gallery .sec--room .mainimage .list.n--01 {
            margin-top: 7em; } }
        @media screen and (min-width: 751px) {
          .cp-gallery .sec--room .mainimage .list.n--02 {
            position: absolute;
            top: 16em;
            right: -7em; } }
        @media screen and (max-width: 750px) {
          .cp-gallery .sec--room .mainimage .list.n--02 {
            margin-top: 1.5em; } }
        .cp-gallery .sec--room .mainimage .list li {
          width: 35em;
          background: #ffffff;
          padding: 3em;
          border-radius: 2em;
          position: relative; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--room .mainimage .list li {
              width: 100%; } }
        .cp-gallery .sec--room .mainimage .list .ttl {
          color: #6e808a;
          display: flex;
          align-items: center;
          gap: 1em;
          font-size: 2em;
          font-weight: 600;
          font-family: "Libre Caslon Display", serif;
          font-weight: 400;
          font-style: normal; }
          .cp-gallery .sec--room .mainimage .list .ttl i {
            width: 1.3em;
            height: 1.3em;
            border-radius: 50%;
            background: #6e808a;
            color: #fff;
            font-style: normal;
            font-size: 1em;
            line-height: 1em;
            display: flex;
            align-items: center;
            padding: 0;
            justify-content: center; }
        .cp-gallery .sec--room .mainimage .list .text {
          margin-top: 1em;
          font-size: 1.6em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--room .mainimage .list .text {
              font-size: 1.6em; } }
        .cp-gallery .sec--room .mainimage .list .links {
          position: absolute;
          top: -1em;
          right: -1em;
          width: 6em;
          cursor: pointer; }
          .cp-gallery .sec--room .mainimage .list .links:hover {
            filter: brightness(1.1); }
      .cp-gallery .sec--room .mainimage .note {
        margin-top: 10em; }
        @media screen and (max-width: 750px) {
          .cp-gallery .sec--room .mainimage .note {
            font-size: 1.3em;
            margin-top: 3em; } }
    .cp-gallery .sec--room .slider {
      /**margin-top: 10em;**/
      width: 100%;
      height: 70em;
      overflow: hidden;
      position: relative;
      margin-top: -5em; }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--room .slider {
          height: 38em; } }
      .cp-gallery .sec--room .slider .slide {
        width: 100%;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        transition: opacity 0.5s ease;
        padding-top: 12em; }
        .cp-gallery .sec--room .slider .slide .photo-rad {
          border-radius: 10px;
          overflow: hidden;
          position: relative;
          width: 100%;
          height: 100%; }
        .cp-gallery .sec--room .slider .slide .sl-name {
          position: absolute;
          bottom: 0.5em;
          right: 1em;
          font-family: "Libre Caslon Display", serif;
          font-weight: 400;
          font-style: normal;
          color: #ffffff;
          font-size: 4em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--room .slider .slide .sl-name {
              font-size: 2em; } }
        .cp-gallery .sec--room .slider .slide img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
      .cp-gallery .sec--room .slider .slide.active {
        opacity: 1 !important;
        z-index: 2 !important; }
    .cp-gallery .sec--room .thumbnails {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5em;
      margin-top: 2em; }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--room .thumbnails {
          grid-template-columns: repeat(4, 1fr); } }
      .cp-gallery .sec--room .thumbnails .box {
        cursor: pointer;
        border: 2px solid transparent;
        position: relative; }
        .cp-gallery .sec--room .thumbnails .box:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.6);
          opacity: 0;
          border-radius: 5px; }
        .cp-gallery .sec--room .thumbnails .box:after {
          content: "TEXT";
          color: #ffffff;
          position: absolute;
          top: 50%;
          transform: translateY(-40%);
          left: 0;
          right: 0;
          margin: 0 auto;
          text-align: center;
          font-family: "Libre Caslon Display", serif;
          font-weight: 400;
          font-style: normal;
          opacity: 0;
          font-size: 1.4em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--room .thumbnails .box:after {
              top: 1.8em;
              font-size: 1.2em; } }
        .cp-gallery .sec--room .thumbnails .box img {
          border-radius: 5px; }
        .cp-gallery .sec--room .thumbnails .box.--entrance:after {
          content: "ENTRANCE"; }
        .cp-gallery .sec--room .thumbnails .box.--master:after {
          content: "MASTER BEDROOM"; }
        .cp-gallery .sec--room .thumbnails .box.--bedroom:after {
          content: "BEDROOM"; }
        .cp-gallery .sec--room .thumbnails .box.--bathroom:after {
          content: "BATH ROOM"; }
        .cp-gallery .sec--room .thumbnails .box.--dressing:after {
          content: "DRESSING ROOM"; }
        .cp-gallery .sec--room .thumbnails .box.--kitchen:after {
          content: "KITCHEN"; }
        .cp-gallery .sec--room .thumbnails .box.--living:after {
          content: "LIVING DINING"; }
        .cp-gallery .sec--room .thumbnails .box.--living2:after {
          content: "LIVING DINING"; }
        .cp-gallery .sec--room .thumbnails .box.--all:after {
          content: "BEDROOM \A LIVING DINING"; }
        .cp-gallery .sec--room .thumbnails .box.--all2:after {
          content: "LIVING DINING \A KITCHEN \A BEDROOM"; }
        .cp-gallery .sec--room .thumbnails .box.--all3:after {
          content: "LIVING DINING \A KITCHEN"; }
        .cp-gallery .sec--room .thumbnails .box.--all4:after {
          content: "KITCHEN \A BEDROOM"; }
      .cp-gallery .sec--room .thumbnails .box.active:before {
        opacity: 1; }
      .cp-gallery .sec--room .thumbnails .box.active:after {
        opacity: 1; }
    @media screen and (min-width: 751px) {
      .cp-gallery .sec--room #thumbnails2 {
        grid-template-columns: repeat(7, 1fr);
        width: 105em;
        margin-left: auto;
        margin-right: auto; } }
    .cp-gallery .sec--room .reserve_btn {
      margin-top: 7em; }
  .cp-gallery .sec--guide {
    margin-top: 10em; }
    @media screen and (max-width: 750px) {
      .cp-gallery .sec--guide {
        margin-top: 10em; } }
    .cp-gallery .sec--guide .mainimage {
      margin-top: 8em;
      position: relative; }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--guide .mainimage {
          margin-top: 5em;
          overflow: scroll; }
          .cp-gallery .sec--guide .mainimage .image {
            min-width: 93.5em; } }
      .cp-gallery .sec--guide .mainimage .balloon {
        position: absolute;
        width: 44em;
        top: 2em;
        left: 2em; }
        @media screen and (max-width: 750px) {
          .cp-gallery .sec--guide .mainimage .balloon {
            width: 37em;
            left: 0; } }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--guide .mainimage .scroll {
          position: absolute;
          top: 13em;
          left: 2em;
          width: 5em; } }
      .cp-gallery .sec--guide .mainimage .no {
        position: absolute; }
        .cp-gallery .sec--guide .mainimage .no.n--01 {
          top: 23.5em;
          left: 25em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--01 {
              top: 17.7em;
              left: 19.2em; } }
        .cp-gallery .sec--guide .mainimage .no.n--02 {
          top: 40.5em;
          left: 25em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--02 {
              top: 31em;
              left: 19em; } }
        .cp-gallery .sec--guide .mainimage .no.n--03 {
          top: 35em;
          left: 19em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--03 {
              top: 26em;
              left: 14.5em; } }
        .cp-gallery .sec--guide .mainimage .no.n--04 {
          top: 47em;
          left: 4em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--04 {
              top: 36.5em;
              left: 3em; } }
        .cp-gallery .sec--guide .mainimage .no.n--05 {
          top: 33em;
          left: 55em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--05 {
              top: 25em;
              left: 42.5em; } }
        .cp-gallery .sec--guide .mainimage .no.n--06 {
          top: 41em;
          right: 36em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--06 {
              top: 30em;
              right: -21em; } }
        .cp-gallery .sec--guide .mainimage .no.n--07 {
          top: 3.5em;
          right: 25em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--07 {
              top: 1.5em;
              right: -29em; } }
        .cp-gallery .sec--guide .mainimage .no.n--08 {
          top: 51.5em;
          left: 25.7em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--08 {
              top: 39.5em;
              left: 19.7em; } }
        .cp-gallery .sec--guide .mainimage .no.n--09 {
          top: 49.8em;
          left: 54.3em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--09 {
              top: 37.8em;
              left: 42em; } }
        .cp-gallery .sec--guide .mainimage .no.n--10 {
          top: 46em;
          right: 9em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--10 {
              top: 35em;
              right: -41.9em; } }
        .cp-gallery .sec--guide .mainimage .no.n--11 {
          top: 14em;
          right: 9.5em; }
          @media screen and (max-width: 750px) {
            .cp-gallery .sec--guide .mainimage .no.n--11 {
              top: 10em;
              right: -41.2em; } }
        .cp-gallery .sec--guide .mainimage .no a {
          background: #6e808a;
          color: #ffffff;
          width: 1.5em;
          height: 1.5em;
          font-size: 2em;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: "Libre Caslon Display", serif;
          font-weight: 400;
          font-style: normal;
          line-height: 0;
          padding: 0 !important;
          z-index: 2;
          position: relative; }
        .cp-gallery .sec--guide .mainimage .no:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          z-index: 1;
          background: #c9eaf2;
          animation: ripple 2.5s cubic-bezier(0.3, 0, 0.1, 1) infinite; }
        .cp-gallery .sec--guide .mainimage .no:hover a {
          background: #e89c75;
          opacity: 1; }
        .cp-gallery .sec--guide .mainimage .no:hover:before {
          background: #faebe3; }
    .cp-gallery .sec--guide .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10em 7em;
      margin-top: 15em; }
      @media screen and (max-width: 750px) {
        .cp-gallery .sec--guide .grid {
          margin-top: 10em;
          grid-template-columns: 1fr;
          padding: 0 3em;
          gap: 7em; } }
      .cp-gallery .sec--guide .grid .no-sec {
        position: relative; }
        .cp-gallery .sec--guide .grid .no-sec:before {
          content: "";
          position: absolute;
          top: -3em;
          left: -3em;
          background: #ffffff;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
          width: calc(100% + 6em);
          height: calc(100% + 6em);
          border-radius: 15px;
          opacity: 0;
          z-index: -1; }
        .cp-gallery .sec--guide .grid .no-sec.highlight:before {
          opacity: 1; }
        .cp-gallery .sec--guide .grid .no-sec .image img {
          width: 100%; }
        .cp-gallery .sec--guide .grid .no-sec .ttl {
          font-size: 2.2em;
          display: flex;
          align-items: center;
          gap: 0.5em;
          color: #6e808a;
          margin-top: 2em; }
          .cp-gallery .sec--guide .grid .no-sec .ttl .no {
            background: #6e808a;
            color: #ffffff;
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            position: relative;
            font-family: "Libre Caslon Display", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1em; }
        .cp-gallery .sec--guide .grid .no-sec .text {
          margin-top: 1.8em;
          font-size: 1.7em; }
    .cp-gallery .sec--guide .reserve_btn {
      margin-top: 10em; }
@keyframes ripple {
  0% {
    transform: scale(1, 1);
    opacity: 0; }
  55% {
    transform: scale(1, 1);
    opacity: 0.5; }
  100% {
    transform: scale(3, 3);
    opacity: 0; } }
  .cp-gallery .f_note {
    margin-top: 5em;
    padding-bottom: 20%;
    background: #f9f9f3; }
    @media screen and (max-width: 750px) {
      .cp-gallery .f_note {
        margin-top: 7em;
        padding-bottom: 20em; } }
    .cp-gallery .f_note .wrap {
      margin-top: 10em; }
  .cp-gallery .f_contact {
    margin-top: -8%; }