@charset "UTF-8";

.font-forum {
  font-family: 'Forum', 'Noto Serif JP', serif;
}
.plan-container{
  background: url('../images/plan/plan-bg.webp');
  background-size: cover;
}
.plan-heading{
  font-family: 'Forum', 'Noto Serif JP', serif;
  font-size: clamp(34px, 4vw, 68px);
  color: #7c6c5c;
  margin-bottom: 70px;
}
@media screen and (max-width: 767px) {
  .plan-heading{
    margin-bottom: 30px;
    margin-top: 20px;
  }
}
.plan-heading-sub{
  font-size: clamp(13px, 1.5vw, 26px);
  color: #595757;
  text-align: center;
  margin-bottom: 60px;
}





.plan-list-area-container{
  padding: 5% 0;
  /* min-height: 228px; */
  border-bottom: 1px solid #fff;
}
.plan-lists-wrap{
  margin: 0 auto ;
  max-width: 960px;
}
.plan-lists{
  display: flex;
  flex-wrap: wrap;
  gap: 40px 5%;
}
.plan-list{
  width: 47%;
  background-color: rgba(91,78,67,0.5);
}
.plan-list-btn{
  padding: 8% 6%;
  color: #fff;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.plan-list-btn:hover{
  color: #fff;
}
.plan-list-mask{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(91, 78, 67, 0.8);
  transition: all 0.6s ease;
  opacity: 0;
}
.plan-mask-text{
  transform: translateY(-60px);
  opacity: 0;
  transition: .7s ease;
  pointer-events: none;
  text-align: center;
  color: #fff;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.plan-list-btn:hover .plan-list-mask{
    opacity: 1;
}
.plan-list-btn:hover .plan-mask-text{
    transform: translateY(0);
    opacity: 1;
}
.plan-list-ttl{
  margin-bottom: 3%;
  text-align: center;
  font-size: 50px; /* clampの最大値に固定 */
  font-family: 'Forum', 'Noto Serif JP', serif;
  letter-spacing: .08em;
}
.plan-list-ttl .text-large{
  font-size: 80px;
}
.plan-list-floor{
  padding: 7px 0 8px;
  font-family: 'Forum', 'Noto Serif JP', serif;
  font-size: 28px;
  text-align: center;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  letter-spacing: .1em;
}
.plan-list-area-wrap{
  padding-bottom: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 4px;
}
.plan-list-area-ttl{
  margin-top: 4%;
  width: 36%;
  font-size: 16px;
  text-align: right;
}
.plan-list-area{
  font-size: 66px;
  position: relative;
  font-family: 'Forum', 'Noto Serif JP', serif;
  flex: 1;
}
.plan-list-area .text-large{
  font-size: 80px;
}
.plan-list-area .text-small{
  font-size: 30px;
}
.plan-list-area-sub{
  font-size: 16px;
}
.plan-list-area-sub{
  position: absolute;
  bottom: -12%;
  left: 4px;
}
.plan-list-none{
  height: 34px;
  margin: 2% auto 0;
}
@media screen and (max-width: 870px) {
  .plan-list-none{
    display: none;
  }
}
.plan-list-balcony{
  width: 84%;
  margin: 0 auto;
  font-size: 34px;
  font-family: 'Forum', 'Noto Serif JP', serif;
}
.plan-list-balcony .text-small{
  font-size: 16px;
  font-family: "a-otf-ryumin-pr6n", serif;
}
.plan-list-service-balcony{
  width: 84%;
  margin: 2% auto 0;
  font-size: 34px;
  font-family: 'Forum', 'Noto Serif JP', serif;
}
.plan-list-service-balcony .text-small{
  font-size: 16px;
  font-family: "a-otf-ryumin-pr6n", serif;
}

.plan-list-icons-wrap{
  margin: 6% auto 0;
}
.plan-list-icons{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px 3%;
  margin: 0 auto;
}
.plan-list-icon{
  width: 48.5%;
  font-size: 18px;
  background: linear-gradient(
    to right,
    #ebf1f4 0%,
    #d6dce0 25%,
    #bec4c8 50%,
    #b1b7ba 75%,
    #b8bec2 100%
  );
  padding: 3.6% 0;
  text-align: center;
  color: #333;
  letter-spacing: -.07rem;
}
.plan-list-icon.icon-red{
  background: linear-gradient(
    to right,
    #560d14 0%,
    #7e1b1f 25%,
    #ac2427 50%,
    #610f16 75%,
    #871b22 100%
  );
  color: #fff;
}




@media screen and (max-width: 870px) {
  .plan-lists-wrap {
    max-width: 70%;
  }
  .plan-lists{
    flex-direction: column;
    gap: 40px 0;
  }
  .plan-list{
    width: 100%;
  }
  .plan-list-btn{
    padding: 10% 8%; 
    /* min-height: 340px; */
  }
}
@media screen and (max-width: 767px) {
  .plan-lists-wrap {
    max-width: 90%;
  }
  .plan-lists {
    gap: 20px 0;
  }
  .plan-mask-text{
    transform: translateY(0);
    opacity: 1;
    font-size: 16px;
  }
  .plan-list-area-container{
    padding: 3% 0;
    min-height: auto;
  }
  .plan-list-ttl {
    font-size: 30px; /* 50px × 0.6 */
  }
  .plan-list-ttl .text-large {
    font-size: 48px; /* 80px × 0.6 */
  }
  .plan-list-floor {
    padding: 5px 0 6px;
    font-size: 17px; /* 28px × 0.6 */
  }
  .plan-list-area-ttl {
    font-size: 10px; /* 16px × 0.6 */
  }
  .plan-list-area {
    font-size: 40px; /* 66px × 0.6 */
  }
  .plan-list-area .text-large {
    font-size: 48px; /* 90px × 0.6 */
  }
  .plan-list-area .text-small {
    font-size: 18px; /* 30px × 0.6 */
  }
  .plan-list-area-sub {
    font-size: 10px; /* 16px × 0.6 */
  }
  .plan-list-balcony {
    font-size: 20px; /* 34px × 0.6 */
  }
  .plan-list-balcony .text-small {
    font-size: 10px; /* 16px × 0.6 */
  }
  .plan-list-service-balcony {
    font-size: 20px; /* 34px × 0.6 */
  }
  .plan-list-service-balcony .text-small {
    font-size: 10px; /* 16px × 0.6 */
  }
  .plan-list-icon {
    font-size: 11px; /* 18px × 0.6 */
  }
}

/*--------------------------------
plan detail 詳細
--------------------------------*/
.p-plan-detail {
  padding: 60px 0 0;
}
@media screen and (max-width: 767px) {
  .p-plan-detail {
    padding: 10% 0 0;
  }
}
.p-plan-detail__ttl{
      width: calc(100% - 64px);
      max-width: 1200px;
      margin: 0 auto 100px;
      color: #4e4239;
      letter-spacing: .7rem;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__ttl{
        width: calc(100% - 48px);
        margin: 0 auto 11%;
        font-size: 4vw;
  }
}
.p-plan-detail .menseki-box{
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
}
@media screen and (max-width: 767px) {
  .p-plan-detail .menseki-box{
    display: flex;
    justify-content: center;
  }
}
.p-plan-detail .menseki01{
  margin-bottom: 20px;
}
.p-plan-detail .menseki02 + .menseki02{
  margin-top: 5px;
}
.p-plan-detail .menseki{
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 0 2.6%;
}
@media screen and (max-width: 767px) {
  .p-plan-detail .menseki{
    display: flex;
    gap: 1rem;
  }
  .p-plan-detail .menseki01{
    margin-bottom: 14px;
  }
}
.p-plan-detail .menseki01 span:first-child{
  margin-bottom: 16px;
}
.p-plan-detail .menseki01 .detail{
  font-size: 90%;
}
.p-plan-detail .menseki01 .num1{
  font-size: 450%;
}
.p-plan-detail .menseki01 .num2{
  font-size: 330%;
}
.p-plan-detail .menseki01 .num3{
  font-size: 150%;
}
.p-plan-detail .menseki01 .num4{
  font-size: 130%;
}
.p-plan-detail .menseki02 .num1{
  font-size: 212%;
}
.p-plan-detail .menseki02 .num2{
  font-size: 187%;
}
.p-plan-detail-spec{
  color: #4e4239;
}
.p-plan-detail-spec .spec02{
  border-block: 1px solid #898583;
  padding: 23px 0;
  line-height: 1;
  font-size: clamp(2rem, 3.5vw,  3.3rem);
}
@media screen and (max-width: 767px) {
  .p-plan-detail-spec .spec02{
    text-align: center;
    padding: 3.5% 0;
    font-size: 5.3vw;
  }
}
.p-plan{
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),url(../images/plan/plan-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.p-plan-detail__back{
    background: url(../images/plan/plan-bg.webp);
    background-size: cover;
}
.p-plan-detail__container {
  width: calc(100% - 64px);
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  row-gap: 80px;
  grid-template: 
  "txt1 . pic" auto
  /42% 13% 45%;
}
.p-plan-detail__container.wide-plan {
  grid-template: 
  "txt1 . pic" auto
  /42% 8% 50%;
}

@media screen and (max-width: 930px) {
  .p-plan-detail__container {
    grid-template: 
      "txt1 . pic" auto
      /47% 5% 48%;
  }
}
@media screen and (max-width: 767px) {
  .p-plan-detail__container {
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .p-plan-detail__container > *{
    grid-area: auto;
    grid-column: auto;
  }
}
@media screen and (max-width: 767px) {
  .p-plan-detail__container {
    row-gap: 12vw;
  }
}
.p-plan-detail__txt1 {
  grid-area: txt1;
}
.p-plan-detail__txt1 .spec01 {
  font-weight: 400;
  font-size: 9rem;
  margin-bottom: 20px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 {
    width: 100%;
  }
  .p-plan-detail__txt1 .spec01 {
    margin-bottom: 5%;
    font-size: 2rem;
    text-align: center;
  }
}
.p-plan-detail__txt1 .spec01 .num1 {
  font-size: 6rem;
  margin-left: 2.8%;
  letter-spacing: .9rem;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 .spec01 span {
    font-size: 5rem;
  }
  .p-plan-detail__txt1 .spec01 .num1 {
    font-size: 3rem;
  }
}
.p-plan-detail__txt1 .spec02 {
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 31px;
  word-break: break-all;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 .spec02 {
    font-size: 5vw;
    margin-bottom: 6%;
    /* letter-spacing: 0.05em; */
  }
}
.p-plan-detail__txt1 dl dt {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 dl dt {
    font-size: 1.5rem;
  }
}
.p-plan-detail__txt1 dl dt span.num1 {
  font-size: 6.8rem;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 dl dt span.num1 {
    font-size: 4rem;
  }
}
.p-plan-detail__txt1 dl dt span.num2 {
  font-size: 4.2rem;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 dl dt span.num2 {
    font-size: 2.5rem;
  }
}
.p-plan-detail__txt1 dl dt em {
  display: block;
  font-style: normal;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 dl dt em {
    font-size: 1.2rem;
  }
}
.p-plan-detail__txt1 dl dd {
  font-size: 1.8rem;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__txt1 dl dd {
    font-size: 1.4rem;
  }
}
.p-plan-detail figure {
  grid-area: pic;
}
.p-plan-detail__back {
  margin-top: 100px;
  padding: 42px 0;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__back {
    margin-top: 11%;
    padding: 6% 0;
  }
}
.p-plan-detail__back a {
  position: relative;
  display: block;
  width: 90%;
  max-width: 385px;
  line-height: 50px;
  height: 50px;
  color: #fff;
  font-size: 2.1rem;
  margin: 0 auto;
  transition: 0.3s;
  background : #484039;
  border-radius : 25px;
}
.p-plan-detail__back a::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #a3a09c;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__back a {
    width: 64%;
    font-size: 1.6rem;
    line-height: 40px;
    height: 40px;
    border-radius : 27px;
  }
  .p-plan-detail__back a::after {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #a3a09c;
  }
}
.p-plan-detail__back a:hover {
  opacity: 0.8;
}
.p-plan .hanrei-box {
  margin-top: 120px;
}
.p-plan .hanrei-box .detail {
  margin-bottom: 11px;
  font-size: clamp(1.1rem, 1.1vw, 1.5rem);
  color: #4b4949;
  line-height: 1.4;
}
.p-plan .hanrei-box .caption{
  color: #4b4949;
  font-size: 1.1rem;
}
.p-plan .hanrei img {
  vertical-align: bottom;
  margin-bottom: 22px;
}
.p-plan-list-icons-wrap{
    margin: 6% 0 0 0;
    width: 71%;
}
@media screen and (max-width: 1000px) {
  .p-plan-list-icons-wrap{
      width: 85%;
  }
}
.p-plan-list-icons{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px 4%;
  margin: 0 auto;
}
.p-plan-list-icon{
  max-width: 172px;
  width: 48%;
  font-size: clamp(11px, 1.3vw, 16px);
  background: linear-gradient(
    to right,
    #ebf1f4 0%,
    #d6dce0 25%,
    #bec4c8 50%,
    #b1b7ba 75%,
    #b8bec2 100%
  );
  padding: 3.6% 0;
  text-align: center;
  color: #333;
  letter-spacing: -.07rem;
}
.p-plan-list-icon.icon-red{
  background: linear-gradient(
    to right,
    #560d14 0%,
    #7e1b1f 25%,
    #ac2427 50%,
    #610f16 75%,
    #871b22 100%
  );
  color: #fff;
}
.p-plan .madori.type_z{
  width: 97%;
  margin-right: 0;
  margin-left: auto;
}
.p-plan .madori.type_h{
  width: 78%;
  margin-right: 0;
  margin-left: auto;
  min-width: 360px;
}
@media screen and (max-width: 767px) {
  .p-plan .madori.type_z{
    width: 100%;
    margin: 0 auto;
  }
  .p-plan .madori.type_h{
    width: 93%;
    margin-right: 0;
    margin-left: auto;
    min-width: unset;
  }
}



@media screen and (max-width: 767px) {
  .p-plan .hanrei-box .detail {
  margin-bottom: 6px;
  font-size: clamp(1.1rem, 1.1vw, 1.5rem);
  color: #4b4949;
}
  .p-plan .madori.type_i{
    width: 93%;
    margin-right: 0;
    margin-left: auto;
  }
  .p-plan .hanrei img {
    margin-bottom: 10px;
  }
  .p-plan .hanrei-box {
    margin-top: 0;
    width: 100%;
  }
  .p-plan .hanrei-box .caption{
    font-size: 1rem;
  }
  .p-plan-list-icons-wrap{
    margin: 7% auto 0;
    width: 100%;
    max-width: none;
  }
  .p-plan-list-icons{
    gap: 10px 3%;
    justify-content: flex-start;
  }
  .p-plan-list-icons.sp-center {
    justify-content: center;
  }
  .p-plan-list-icon {
    width: 48.5%;
    max-width: unset;
    font-size: 3.6vw;
    padding: 3.2% 0;
  }
}

.p-plan-detail__container.is-fullwide{
  display: flex;
  flex-direction: column;
  row-gap: 100px;
  max-width: 1450px;
}
.p-plan-detail__container.is-fullwide .hanrei-box{
  margin-top: -30px;
}
.p-plan-detail__container.is-fullwide > *{
  grid-area: auto;
  grid-column: auto;
}
.p-plan-detail__container.is-fullwide .p-plan-spec-box{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 7%;
}
.p-plan-detail__container.is-fullwide .p-plan-main-spec{
  width: 42%;
}
.p-plan-detail__container.is-fullwide .menseki-box{
  margin-bottom: 23px;
}
.p-plan-detail__container.is-fullwide .p-plan-list-icons-wrap{
  width: 100%;
  margin: 1% 0 0 0;
}
.p-plan-detail__container.is-fullwide .p-plan-list-icon {
  width: 18%;
  font-size: clamp(11px, 1.3vw, 15px);
  padding: 1% 0;
}
.p-plan-detail__container.is-fullwide .p-plan-list-icons{
  gap: 10px;
}
.p-plan-detail__ttl.is-fullwide{
  max-width: 1450px;
}
@media screen and (max-width: 767px) {
  .p-plan-detail__container.is-fullwide{
    row-gap: 12vw;
    max-width: unset;
  }
  .p-plan-detail__container.is-fullwide .p-plan-spec-box{
    display: block;
  }
  .p-plan-detail__container.is-fullwide .p-plan-main-spec{
    width: 100%;
  }
  .p-plan-detail__container.is-fullwide .p-plan-list-icon {
    width: 48.5%;
    max-width: unset;
    font-size: 3.6vw;
    padding: 3.2% 0;
  }
  .p-plan-detail__container.is-fullwide .p-plan-list-icons {
    gap: 10px 3%;
  }
  .p-plan-detail__container.is-fullwide .hanrei-box{
    margin-top: 0;
  }
}


.plan-btnwrap{
  background-color: rgba(27, 20, 16, 0.55);
}
.plan-btn {
  margin: 0 auto ;
  font-size: min(1.83vw, 30.8px);
  letter-spacing: calc(16 / 1000 * 1em);
  color: #fff;
  background: linear-gradient(106deg, #421314 5%, #6f4b26 13%, #b1954f 45%, #eadcba 61%, #a38358 86%, #8d5429 100%) center;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(37.1428571429vw, 624px);
  height: min(5.1785714286vw, 87px);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 0;
  transition: background-size 0.5s;
}
.plan-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  margin: auto;
  aspect-ratio: 14/18;
  width: 14px;
  background: url(../images/teaser/svg/icon_arrow.svg) center no-repeat;
  background-size: contain;
}
.plan-btn:hover {
  color: #fff;
  background-size: 130%;
}
@media screen and (max-width: 767px) {
  .plan-btn {
    font-size: min(36 / 750 * 100vw, 36px);
    width: min(605 / 750 * 100vw, 605px);
    text-indent: calc(7 / 750 * 100vw);
    height: min(83 / 750 * 100vw, 83px);
  }
}