/*----------------------------- contents
-------------------------------*/
.cont-section-container { padding-top: 8rem; }
@media screen and (max-width: 960px) { .cont-section-container { padding-top: 6.4rem; } }
@media screen and (max-width: 768px) { .cont-section-container { padding-top: 5.6rem; } }
@media screen and (max-width: 600px) { .cont-section-container { padding-top: 40px; } }

.cate-mv { max-width: 1440px; text-align: center; margin: 4rem auto; position: relative; }
.cate-mv .cate-ttl { width: 100%; max-width: 1056px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
.cate-mv .cate-ttl p { width: calc((524/1056)*100%); max-width: 524px; margin: 0 0 0 auto; }
.cate-mv .image .img { height: 100%; }
.cate-mv .image .img img { object-fit: cover; object-position: center top; }
@media screen and (max-width: 1056px) { .cate-mv { margin: 2.4rem auto; } }
@media screen and (max-width: 864px) { .cate-mv .cate-ttl p { width: calc((524/960)*100%); } }
@media screen and (max-width: 600px) { .cate-mv { margin: 24px auto; }
  .cate-mv .cate-ttl p { width: calc((524/744)*100%); } }

#main .mv-inner { width: 100%; max-width: none; }
#main .image-container { width: 100%; padding: 0; margin: 0; position: relative; }
#main .image-container .mv-head { width: 40%; position: absolute; left: 8%; top: 50%; transform: translate(0, -50%); z-index: 2; }
#main .image-container .image { width: 100%; max-width: none; }
@media screen and (max-width: 600px) { #main .image-container .mv-head { width: 24%; max-width: 378px; } }

.intro { margin-bottom: 8rem; }
.intro .maincopy { text-align: center; }
.intro .lead { text-align: center; }
@media screen and (max-width: 960px) { .intro { margin-bottom: 6.4rem; } }
@media screen and (max-width: 768px) { .intro { margin-bottom: 5.6rem; } }
@media screen and (max-width: 600px) { .intro { margin-bottom: 40px; }
  .intro .lead { text-align: left; }
  .intro .lead .aw { display: inline; } }

.spec .type { text-align: center; line-height: 1.44; }
.spec .type .em { font-size: 192%; margin-right: 4px; }
.spec .layout { line-height: 1.28; }
.spec .areasize { line-height: 1.2; }
.spec .areasize .em { margin: 0 4px; }
.spec .othersize { display: inline-block; width: auto; padding: 1.6rem 1.2rem 0; margin: auto; }
.spec .othersize > ul li { font-size: clamp(13px, 1.4vw, 1.5rem); line-height: 1.28; text-align: left; margin-bottom: 4px; padding-left: 15px; position: relative; }
.spec .othersize > ul li::before { content: ""; display: inline-block; width: 12px; aspect-ratio: 1/1; background-color: #000; position: absolute; top: 0.18em; left: 0; }

.plan-fig figure { margin: 0; }

.legend > ul li { display: inline-block; margin-right: 10px; font-size: 12px; text-align: left; line-height: 1.28; margin-bottom: 4px; }
.legend > ul li:last-of-type { margin-right: 0; }
.legend > ul li .icon { margin-right: 4px; vertical-align: text-bottom; }
.legend > ul li .icon img { width: auto; height: 8px; }
.legend > ul li .icon.outframe { vertical-align: middle; }
.legend > ul li .icon.outframe img { height: 20px; }

.plan-detail-container { display: grid; grid-template-columns: 1fr 56.81818182%; gap: 2.4rem 3%; align-items: flex-start; }
.plan-detail-container .spec { text-align: center; }
.plan-detail-container .spec .type { font-size: clamp(24px, 2.7vw, 3.2rem); padding: 0 1.6rem 0.8rem; border-bottom: thin solid #000; }
.plan-detail-container .spec .layout { font-size: clamp(28px, 3.8vw, 4rem); padding: 0.4rem 1.6rem 0.8rem; border-bottom: thin solid #000; }
.plan-detail-container .spec .areasize { font-size: clamp(14px, 1.2vw, 1.6rem); padding: 0.4rem 1.6rem 0; }
.plan-detail-container .spec .areasize .em { font-size: 400%; }
.plan-detail-container .plan-fig { grid-row: span 4; order: 2; }
.plan-detail-container .legend { padding: 1rem 0; }
.plan-detail-container .merit-container { order: 3; padding: 1.6rem; }
.plan-detail-container .merit-container > ul li { font-size: clamp(14px, 1.4vw, 1.6rem); line-height: 1.28; text-align: left; margin-bottom: 8px; padding-left: 20px; position: relative; }
.plan-detail-container .merit-container > ul li::before { content: "\025ce"; font-size: clamp(12px, 1.1vw, 1.4rem); position: absolute; top: 0.1em; left: 0; }
@media screen and (max-width: 864px) { .plan-detail-container .spec .type { padding: 0 0.8rem 0.8rem; }
  .plan-detail-container .spec .layout { padding: 0.8rem; }
  .plan-detail-container .spec .areasize { padding: 0.8rem 0.8rem 0; }
  .plan-detail-container .spec .areasize .em { font-size: 320%; }
  .plan-detail-container .spec .price .num { font-size: 320%; }
  .plan-detail-container .merit-container { padding: 1.6rem 0.8rem; }
  .plan-detail-container .merit-container > ul li { padding-left: 18px; } }
@media screen and (max-width: 600px) { .plan-detail-container { grid-template-columns: 1fr; gap: 1.6rem 3%; }
  .plan-detail-container .plan-fig { order: 3; grid-row: span 1; }
  .plan-detail-container .plan-fig figure { width: 88%; margin-left: auto; margin-right: auto; }
  .plan-detail-container .plan-fig .legend > ul { text-align: right; }
  .plan-detail-container .merit-container { order: 2; } }

.arrow { text-align: center; line-height: 0; display: flex; align-items: center; }
.arrow p { max-width: 104px; transform: rotate(-90deg); transform-origin: center center; text-align: center; margin: auto; }
@media screen and (max-width: 600px) { .arrow p { max-width: 80px; transform: none; } }

.sample-plan .plan-detail-container { grid-template-columns: 48% 8% auto; align-items: stretch; column-gap: 1%; }
.sample-plan .plan-detail-container .spec { order: 2; grid-column: span 2; align-self: center; }
.sample-plan .plan-detail-container .plan-fig { order: 1; grid-row: span 6; }
.sample-plan .plan-detail-container .plan-fig .legend { padding: 0 0 2rem; }
.sample-plan .plan-detail-container .arrow { order: 4; grid-row: span 4; align-self: flex-end; height: 100%; }
.sample-plan .plan-detail-container .merit-container { order: 3; grid-column: span 2; align-self: center; }
.sample-plan .plan-detail-container .sample-garden-img { order: 5; grid-row: span 4; align-self: flex-end; background-color: #ecf4d9; height: 100%; }
.sample-plan .plan-detail-container .sample-garden-img .image { max-width: 750px; height: 100%; min-height: 448px; padding: 0 8%; display: flex; align-items: center; }
.sample-plan .loan { max-width: 500px; margin: 8rem auto 4rem; }
.sample-plan .loan .img { position: relative; }
.sample-plan .loan .img .loan_balloon { position: absolute; top: -14%; left: -8%; width: 30%; max-width: 150px; }
@media screen and (max-width: 1024px) { .sample-plan .plan-detail-container .sample-garden-img .image { min-height: 400px; } }
@media screen and (max-width: 864px) { .sample-plan .plan-detail-container { grid-template-columns: 48% 6% auto; row-gap: 1.5rem; }
  .sample-plan .plan-detail-container .sample-garden-img { padding-bottom: 4em; }
  .sample-plan .plan-detail-container .sample-garden-img .image { min-height: 240px; padding: 6%; } }
@media screen and (max-width: 768px) { .sample-plan .plan-detail-container { row-gap: 0; }
  .sample-plan .plan-detail-container .merit-container { padding-bottom: 0; }
  .sample-plan .plan-detail-container .sample-garden-img { padding-bottom: 6em; } }
@media screen and (max-width: 600px) { .sample-plan .plan-detail-container { grid-template-columns: 1fr; gap: 0; }
  .sample-plan .plan-detail-container .spec { order: 1; grid-column: span 1; }
  .sample-plan .plan-detail-container .plan-fig { order: 3; grid-row: span 1; }
  .sample-plan .plan-detail-container .plan-fig .legend { padding-bottom: 1rem; }
  .sample-plan .plan-detail-container .arrow { order: 4; grid-row: span 1; padding: 8px 0; }
  .sample-plan .plan-detail-container .arrow p { width: 24%; }
  .sample-plan .plan-detail-container .merit-container { order: 2; grid-column: span 1; padding: 24px 4%; }
  .sample-plan .plan-detail-container .sample-garden-img { margin-inline: calc(50% - 50vw); order: 5; grid-row: span 1; height: auto; padding-inline: calc(50vw - 50%); padding-bottom: 0; }
  .sample-plan .plan-detail-container .sample-garden-img .image { padding: 8% 8% 0; } }

#Garden2 { background-color: #ecf4d9; padding-top: 6.4rem; }
#Garden2 .intro { margin-bottom: 4rem; }
#Garden2 .head-copy { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: clamp(20px, 3vw, 3.2rem); color: #688226; text-align: center; line-height: 1.2; margin-bottom: 1.6rem; }

.garden-merit-list > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; align-items: flex-start; max-width: 880px; margin: 0 auto; padding-bottom: 4rem; }
.garden-merit-list > ul div, .garden-merit-list > ul li { min-height: 0%; }
.garden-merit-list > ul li { width: 46%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; align-items: flex-start; margin-bottom: 4rem; }
.garden-merit-list > ul li div, .garden-merit-list > ul li li { min-height: 0%; }
.garden-merit-list > ul li .merit-num { width: 100%; display: flex; align-items: center; margin-bottom: 8px; }
.garden-merit-list > ul li .merit-num p { font-size: clamp(24px, 2vw, 2.4rem); text-align: center; color: #242424; }
.garden-merit-list > ul li .merit-num p::before { content: "Merit"; font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; margin-right: 8px; }
.garden-merit-list > ul li .merit-num::before, .garden-merit-list > ul li .merit-num::after { content: ""; display: block; width: 100%; height: 1px; background-color: #242424; }
.garden-merit-list > ul li .merit-num::before { margin-right: 2%; }
.garden-merit-list > ul li .merit-num::after { margin-left: 2%; }
.garden-merit-list > ul li .text-container { width: 50%; }
.garden-merit-list > ul li .text-container .merit-title { font-size: clamp(15px, 2vw, 1.6rem); text-align: left; line-height: 1.44; text-shadow: 3px 3px 0 #ecf4d9, -3px 3px 0 #ecf4d9, -3px -3px 0 #ecf4d9, 3px -3px 0 #ecf4d9; }
.garden-merit-list > ul li .text-container .lead { font-size: clamp(13px, 1vw, 1.4rem); margin-top: 8px; }
.garden-merit-list > ul li .text-container .note { margin-top: 8px; }
.garden-merit-list > ul li .image-container { width: 48%; height: 100%; align-self: center; }
.garden-merit-list > ul li .image-container .img { height: 100%; }
.garden-merit-list > ul li .image-container .img img { height: 100%; object-fit: cover; }
.garden-merit-list > ul li:nth-of-type(2n) .text-container { order: 2; }
.garden-merit-list > ul li:nth-of-type(2n) .image-container { order: 1; }
@media screen and (max-width: 768px) { .garden-merit-list > ul li { margin-bottom: 2.4rem; } }
@media screen and (max-width: 600px) { .garden-merit-list > ul li { width: 100%; margin-bottom: 32px; }
  .garden-merit-list > ul li .text-container { width: 46%; } }