@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap");
/*#container{
    &.plan-contents{
        background-color: #fff;
    }
} */
.page-head .inner {
  padding-bottom: 5rem; }

.floorplan-container .howto {
  width: 88%;
  max-width: 720px;
  margin: auto auto 4rem;
  background-color: #fff;
  border-radius: 50vh;
  padding: 4px;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.2; }
.floorplan-container .tab-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.6rem 2%;
  width: 88%;
  max-width: 640px;
  margin: auto auto 4rem; }
  .floorplan-container .tab-list li {
    cursor: pointer; }
    .floorplan-container .tab-list li > div {
      width: 100%;
      height: 100%;
      background-color: #fff;
      border: thin solid #9E905B;
      color: #9E905B;
      font-size: 1.6rem;
      text-align: center;
      line-height: 1.2;
      padding: 8px;
      transition: all .8s 0s ease; }
    .floorplan-container .tab-list li.active > div, .floorplan-container .tab-list li:hover > div {
      background-color: #9E905B;
      color: #fff; }
.floorplan-container .tab-contents-list {
  background: #fff;
  margin: auto;
  max-width: 900px;
  padding: 2rem 0 4rem;
  margin-bottom: 8rem;
  /**background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 24%, rgba(255, 255, 255, 1) 76%, rgba(255, 255, 255, 0) 100%,);**/ }
  .floorplan-container .tab-contents-list .tab-content {
    display: none;
    width: 88%;
    max-width: 760px;
    margin: auto; }
    .floorplan-container .tab-contents-list .tab-content.show {
      display: block;
      animation: panel-show 1s ease-in-out forwards; }
@keyframes panel-show {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@media screen and (max-width: 480px) {
  .floorplan-container .howto {
    position: relative;
    margin-bottom: 2.4rem; }
    .floorplan-container .howto .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
      .floorplan-container .howto .arrow.d1 {
        left: 4%; }
      .floorplan-container .howto .arrow.d2 {
        right: 4%; }
  .floorplan-container .tab-list {
    margin-bottom: 2.4rem; }
  .floorplan-container .tab-contents-list {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-bottom: 4rem;
    /**background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 16%, rgba(255, 255, 255, 1) 84%, rgba(255, 255, 255, 0) 100%);
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 16%, rgba(255, 255, 255, 1) 84%, rgba(255, 255, 255, 0) 100%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 16%, rgba(255, 255, 255, 1) 84%, rgba(255, 255, 255, 0) 100%);**/ } }

.plan-btn-list {
  padding-bottom: 8rem; }
  .plan-btn-list .btn-list {
    width: 100%;
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3.2rem 3.636363636363636%;
    margin: auto auto 4rem; }
    .plan-btn-list .btn-list li {
      background-color: #ccc; }
      .plan-btn-list .btn-list li a {
        /*display: block;*/
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background-color: #CDC8BE;
        transition: all .6s; }
        .plan-btn-list .btn-list li a .type {
          width: 100%;
          background-color: #282822;
          padding: 0 8px; }
          .plan-btn-list .btn-list li a .type p {
            font-family: "a-otf-ryumin-pr6n", serif;
            font-weight: 300;
            font-style: normal;
            font-size: 1.2rem;
            color: #fff;
            line-height: 1.44;
            text-align: center;
            letter-spacing: 0.2em; }
            .plan-btn-list .btn-list li a .type p b {
              font-family: "linotype-didot", serif;
              font-weight: 400;
              font-style: normal;
              font-size: 257.142857142857143%;
              color: #9E905B; }
        .plan-btn-list .btn-list li a .spec {
          padding: 2rem 2.4rem; }
          .plan-btn-list .btn-list li a .spec img {
            width: 100%;
            height: auto;
            line-height: 1; }
        .plan-btn-list .btn-list li a .btn {
          margin-top: auto;
          padding: 0 2.4rem 2rem; }
        .plan-btn-list .btn-list li a .cta {
          padding: 1rem 8px;
          background-color: #9E905B;
          position: relative;
          overflow: hidden; }
          .plan-btn-list .btn-list li a .cta p {
            color: #fff;
            font-family: "a-otf-ryumin-pr6n", serif;
            font-weight: 300;
            font-style: normal;
            font-size: 1.4rem;
            text-align: center;
            line-height: 1.2;
            position: relative;
            z-index: 2; }
          .plan-btn-list .btn-list li a .cta::before {
            content: "";
            background-color: #282822;
            width: 0;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s ease 0s;
            z-index: 1; }
        .plan-btn-list .btn-list li a:hover {
          filter: brightness(108%);
          opacity: 0.8; }
          .plan-btn-list .btn-list li a:hover .cta::before {
            width: 100%; }
  @media screen and (max-width: 600px) {
    .plan-btn-list {
      padding-bottom: 4rem; }
      .plan-btn-list .btn-list {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 2.4rem; } }
  @media screen and (max-width: 480px) {
    .plan-btn-list .btn-list {
      grid-row-gap: 1.6rem; }
      .plan-btn-list .btn-list li a .type b {
        font-size: 200%; }
      .plan-btn-list .btn-list li a .spec {
        padding: 1.6rem; }
      .plan-btn-list .btn-list li a .btn {
        padding: 0 1.6rem 1.6rem; } }

.guide {
  width: 100%;
  max-width: 960px;
  margin: auto; }
  .guide li {
    display: inline-block;
    margin-right: 0.4rem; }
    .guide li .color {
      display: inline-block;
      width: 2rem;
      height: 1rem;
      line-height: 1;
      border: thin solid #9d9b9b; }
    .guide li.floorheating .color {
      background-color: #E0CCC7; }
    .guide li.stock .color {
      background-color: #DAD1C5; }
    .guide li.tsufu img, .guide li.saiko img {
      width: auto;
      height: 14px;
      vertical-align: text-bottom; }

/******************************************************

plan_detail

******************************************************/
.plan-detail-container {
  padding-bottom: 8rem;
  position: relative;
  display: grid;
  grid-template-columns: 32% 64%;
  grid-template-rows: auto auto auto;
  grid-gap: 2.4rem 4%;
  /*&::after{
      content: "";
      display: block;
      padding-bottom: 8rem;
  } */
  /*    .text-container{
  //        width: 32%;
          grid-column: 1/2;
          grid-row: 1/2;
      } */ }
  .plan-detail-container .figure-container {
    /*        width: 64%;
            position: absolute;
            top:0;
            right: 0;*/
    grid-column: 2/3;
    grid-row: 1/4; }
  .plan-detail-container .figure {
    background-color: white;
    border: thin solid #9E905B;
    padding: 6.4rem 2.4rem; }
  .plan-detail-container .spec-container {
    grid-column: 1/2;
    grid-row: 1/2; }
  .plan-detail-container .spec-box {
    background-color: #CDC8BE; }
    .plan-detail-container .spec-box .type {
      width: 100%;
      background-color: #282822;
      padding: 0 8px; }
      .plan-detail-container .spec-box .type p {
        font-family: "a-otf-ryumin-pr6n", serif;
        font-weight: 300;
        font-style: normal;
        font-size: 1.4rem;
        color: #fff;
        line-height: 1.44;
        text-align: center;
        letter-spacing: 0.2em; }
        .plan-detail-container .spec-box .type p b {
          font-family: "linotype-didot", serif;
          font-weight: 400;
          font-style: normal;
          font-size: 320%;
          color: #9E905B; }
    .plan-detail-container .spec-box .spec {
      /*padding: 2rem 2.4rem;*/
      padding: 2rem 2.4rem 0; }
      .plan-detail-container .spec-box .spec img {
        width: 100%;
        height: auto;
        line-height: 1; }
      .plan-detail-container .spec-box .spec::after {
        content: "";
        display: block;
        padding: 2rem 2.4rem 0;
        border-bottom: 1px solid #9E905B; }
    .plan-detail-container .spec-box .other-spec {
      padding: 2rem 2.4rem 4rem; }
      .plan-detail-container .spec-box .other-spec li {
        font-size: 1.4rem;
        line-height: 1.28;
        text-align: left;
        margin-bottom: 4px; }
        .plan-detail-container .spec-box .other-spec li::before {
          content: "\025a1";
          display: inline-block;
          font-size: 0.75rem;
          margin-right: 0.25rem; }
  .plan-detail-container .guide {
    grid-column: 1/2;
    grid-row: 2/3; }
  .plan-detail-container .sub-buttons-container {
    grid-column: 1/2;
    grid-row: 3/4; }
  @media screen and (max-width: 600px) {
    .plan-detail-container {
      display: block;
      /*&::after{
          padding-bottom: 4rem;
      } */
      /*.text-container{
          width: 100%;
          padding-bottom: 0;
      } */ }
      .plan-detail-container .figure-container {
        margin-bottom: 1.6rem; }
      .plan-detail-container .figure {
        padding: 4.8rem 1.6rem 4rem;
        border-top: none; }
      .plan-detail-container .spec-box .other-spec {
        /*padding: 0 2.4rem 1.6rem;*/
        padding: 2rem 2.4rem 1.6rem; } }

/******************************************************

print

******************************************************/
.sub-buttons-container {
  width: 96%;
  margin: auto;
  padding: 4rem 0; }
  .sub-buttons-container .sub-buttons {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0.8rem 2%; }
    .sub-buttons-container .sub-buttons li {
      width: 88%;
      max-width: 480px;
      margin: auto; }
      .sub-buttons-container .sub-buttons li a {
        display: block;
        width: 100%;
        padding: 8px;
        text-align: center;
        font-size: 1.6rem;
        line-height: 1.2;
        color: #fff;
        background-color: #282822;
        border: thin solid #faf9f9;
        transition: all 0.25s 0s linear; }
        .sub-buttons-container .sub-buttons li a:hover {
          background-color: #ccc;
          color: #282822; }

.p-detail #container {
  background: #e8e9e2; }

.bg-b .note.guide {
  color: #fff; }