#contents img { width: 100%; height: auto; line-height: 0; vertical-align: middle; }
#contents a { display: block; width: 100%; transition: .4s all; }
@media screen and (max-width: 700px) { #contents .js-scrollable { padding-bottom: 8px; }
  #contents .js-scrollable > img { width: auto; } }

.bg { background-color: #f4f1f4; }

.sec_maincopy { font-size: 2.4rem; line-height: 1.44; text-align: center; margin-bottom: 2.4rem; }
.sec_maincopy .em { color: #7c5271; }
.sec_maincopy .sub { font-size: 64%; }
.sec_maincopy img { width: 64%; max-width: 336px; }
.sec_maincopy + .lead { text-align: center; }

.top-main .page-name { max-width: 48%; left: 0; transform: translateY(-50%); }
.top-main .page-name .en { width: 48%; margin: auto; }
.top-main .page-name .kana { font-size: clamp(2rem, 2vw, 4rem); }
@media screen and (max-width: 700px) { .top-main .page-name { left: -2%; }
  .top-main .page-name .en { width: 64%; max-width: 280px; } }

#Sec01 > .inner { padding-top: 4rem; }
#Sec01 .sec_maincopy { font-size: 3.2rem; font-feature-settings: 'palt'; }
#Sec01 .recommend { margin-top: 5.6rem; }
#Sec01 .recommend .head { font-size: 2rem; text-align: center; line-height: 1.28; color: #fff; background-color: #7c5271; padding: 4px 8px; margin-bottom: 2.4rem; }
#Sec01 .recommend .recommend-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3.63636364%; }
#Sec01 .recommend .recommend-list .recommend-wrap { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0 !important; }
#Sec01 .recommend .recommend-list .image { margin-bottom: 1.6rem; }
#Sec01 .recommend .recommend-list .recommend-title { font-size: 2.24rem; text-align: center; line-height: 1.44; margin-bottom: 1rem; }
#Sec01 .recommend .recommend-list .lead { line-height: 1.6; }
#Sec01 .recommend .recommend-list .btn { margin-top: 1.2rem; }
#Sec01 .recommend .recommend-list .btn a { height: 100%; display: flex; justify-content: center; align-items: center; background-color: #e2d9e0; text-align: center; padding: 1.2rem 4rem; position: relative; }
#Sec01 .recommend .recommend-list .btn a .txt { font-size: clamp(1.3rem, 1.6vw, 1.6rem); color: #7c5271; text-align: center; line-height: 1.28; }
#Sec01 .recommend .recommend-list .btn a::before { content: ""; display: block; height: 2rem; width: calc(2rem / 2 * tan(60deg)); clip-path: polygon(0 0, 100% 50%, 0 100%); background-color: #7c5271; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
#Sec01 .column { margin-top: 6.4rem; background-color: #fff; padding: 4rem 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3.63636364%; position: relative; }
#Sec01 .column::before { content: ""; display: block; width: 1px; height: calc(100% - 8rem); background-color: #b8b8b8; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#Sec01 .column .block { padding: 0.8rem 2.4rem; display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0 !important; }
#Sec01 .column .block .clm-title { font-size: 2.24rem; text-align: center; line-height: 1.28; align-self: flex-end; margin-bottom: 2.4rem; }
#Sec01 .column .block .clm-title .cross { display: inline-block; padding: 0 4px; }
#Sec01 .column .block .clm-title .em { font-size: 136%; }
#Sec01 .column .block .lead { line-height: 1.6; }
#Sec01 .column .block .lead .aw { display: inline; }
#Sec01 .column .block .fig { margin-top: 2.4rem; }
#Sec01 .column .block .fig .fig-title { font-size: 1.4rem; text-align: left; line-height: 1.2; margin-bottom: 1.6rem; }
#Sec01 .column .block .fig .note { margin-top: 1.2rem; }
@media screen and (max-width: 960px) { #Sec01 .recommend .recommend-list .btn a { padding: 1.2rem 3rem; }
  #Sec01 .recommend .recommend-list .btn a::before { height: 1.6rem; width: calc(1.6rem / 2 * tan(60deg)); } }
@media screen and (max-width: 700px) { #Sec01 .recommend .head { font-size: 2.5rem; }
  #Sec01 .recommend .recommend-list { grid-template-columns: 1fr; grid-row-gap: 5rem; }
  #Sec01 .recommend .recommend-list .image { margin-bottom: 2rem; }
  #Sec01 .recommend .recommend-list .recommend-title { font-size: 2.25rem; margin-bottom: 0; }
  #Sec01 .recommend .recommend-list .btn { margin-top: 2rem; }
  #Sec01 .recommend .recommend-list .btn a { min-height: 8em; }
  #Sec01 .recommend .recommend-list .btn a .txt { font-size: 2rem; }
  #Sec01 .recommend .recommend-list .btn a::before { height: 2rem; width: calc(2rem / 2 * tan(60deg)); }
  #Sec01 .column { padding: 3rem 2.5rem; grid-template-columns: 1fr; grid-row-gap: 3rem; }
  #Sec01 .column::before { content: none; }
  #Sec01 .column .block { padding: 0 0 2.5rem; border-bottom: thin solid #b8b8b8; }
  #Sec01 .column .block:last-of-type { padding-bottom: 0; border-bottom: none; }
  #Sec01 .column .block .clm-title .cross { display: block; width: 100%; text-align: center; margin: auto; }
  #Sec01 .column .block .lead { text-align: center; }
  #Sec01 .column .block .lead .aw { display: inline-block; } }

#Sec02 .sec_maincopy .img { display: block; width: 64%; max-width: 336px; margin: auto auto 4rem; }
#Sec02 .plan-detail .overview { max-width: 860px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 6.97674419%; margin-top: 8rem; }
#Sec02 .plan-detail .overview .spec { color: #7c5271; display: grid; grid-template-columns: 28% auto; align-content: flex-start; gap: 2.4rem 0; }
#Sec02 .plan-detail .overview .spec .type { font-family: "joly-headline", serif; font-weight: 400; font-style: normal; text-align: center; line-height: 1.12; font-size: 2rem; padding: 0 4%; align-self: center; }
#Sec02 .plan-detail .overview .spec .type .em { font-size: 264%; margin-right: 2px; }
#Sec02 .plan-detail .overview .spec .area-size { border-left: thin solid #7c5271; padding: 0 0.8rem 0 6%; }
#Sec02 .plan-detail .overview .spec .area-size .all-area { font-size: 1.6rem; line-height: 1.12; font-feature-settings: 'palt'; }
#Sec02 .plan-detail .overview .spec .area-size .all-area .em { font-size: 280%; margin-left: 4px; }
#Sec02 .plan-detail .overview .spec .area-size .all-area .em2 { font-size: 200%; }
#Sec02 .plan-detail .overview .spec .area-size .all-area small { margin-right: 2px; }
#Sec02 .plan-detail .overview .spec .area-size .all-area + .note { line-height: 1.2; }
#Sec02 .plan-detail .overview .spec .area-size .other-size { margin-top: 8px; }
#Sec02 .plan-detail .overview .spec .area-size .other-size li { font-size: 1.4rem; line-height: 1.12; margin-top: 4px; }
#Sec02 .plan-detail .overview .spec .area-size .other-size li::before { content: ""; display: inline-block; width: 1.24rem; aspect-ratio: 1/1; background-color: #7c5271; margin-right: 4px; vertical-align: text-bottom; }
#Sec02 .plan-detail .overview .spec .layout { grid-column: 1/3; padding: 1.6rem 4% 2rem; border-top: thin solid #7c5271; border-bottom: thin solid #7c5271; text-align: center; line-height: 1.24; }
#Sec02 .plan-detail .overview .spec .layout .main-layout { font-size: 4.8rem; }
#Sec02 .plan-detail .overview .spec .layout .other-layout { font-size: 2rem; }
#Sec02 .plan-detail .overview .spec .merit-box { grid-column: 1/3; }
#Sec02 .plan-detail .overview .spec .merit-box .box-list { max-width: 400px; margin: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2%; }
#Sec02 .plan-detail .overview .figure { grid-row: span 5; align-content: center; }
#Sec02 .plan-detail .overview .figure .usage-guide ul { justify-content: center; }
#Sec02 .usage-guide { max-width: 664px; margin: 1.6rem auto 0; }
#Sec02 .usage-guide ul { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
#Sec02 .usage-guide ul:not(:first-child) { margin-top: 1rem; }
#Sec02 .usage-guide ul li { display: flex; align-items: center; gap: 5px; }
#Sec02 .usage-guide ul li img { width: auto; height: 7.5px; }
#Sec02 .usage-guide ul li.outpole img { height: 10px; }
#Sec02 .equipment-container .item-list { padding-top: 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 6.97674419%; }
#Sec02 .equipment-container .item-list .num { width: 2rem; aspect-ratio: 1/1; background-color: #7c5271; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; }
#Sec02 .equipment-container .item-list .num p { font-family: "joly-headline", serif; font-weight: 400; font-style: normal; font-size: 1.6rem; color: #fff; line-height: 1; }
#Sec02 .equipment-container .item-list .item-name { font-size: clamp(15px, 2vw, 16px); color: #fff; line-height: 1.28; text-align: left; margin-bottom: 1.6rem; }
#Sec02 .equipment-container .item-list .text { padding-bottom: 1.6rem; }
#Sec02 .equipment-container .item-list .text .lead { font-size: clamp(13px, 1vw, 16px); line-height: 1.6; color: #fff; }
#Sec02 .equipment-container .item-list .item-wrap { background-color: #b8a2b2; display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 6; margin-top: 2.4rem; padding: 2.24rem 4% 2rem; position: relative; }
#Sec02 .equipment-container .item-list .item-wrap.divide { padding: 0; align-items: stretch; }
#Sec02 .equipment-container .item-list .item-wrap.divide .item-name { padding-top: 2.24rem; padding-left: 2rem; }
#Sec02 .equipment-container .item-list .item-wrap.divide .text { grid-column-start: 1; padding-left: 8%; }
#Sec02 .equipment-container .item-list.list1 .item-wrap { grid-column: span 2; }
#Sec02 .equipment-container .item-list.list1 .item-wrap#Closet { grid-template-columns: 0.8fr 1fr; gap: 0 2%; }
#Sec02 .equipment-container .item-list.list1 .item-wrap#Closet .item-name { grid-column: span 2; }
#Sec02 .equipment-container .item-list.list1 .item-wrap#Closet .images { display: flex; justify-content: space-between; gap: 0 3px; align-self: center; }
#Sec02 .equipment-container .item-list.list1 .item-wrap#Closet .images .image { grid-column-start: initial; }
#Sec02 .equipment-container .item-list.list1 .item-wrap#Storage { grid-template-columns: 2fr 1.5fr; gap: 0 3%; }
#Sec02 .equipment-container .item-list.list1 .item-wrap#Storage .image { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; }
#Sec02 .equipment-container .item-list.list2 { max-width: 860px; margin-inline: auto; padding-top: 0; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Kitchen .image .img .note { color: #fff; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom { grid-row: span 6; grid-template-columns: 1fr 1fr; gap: 0 4%; padding: 2.24rem 4% 2rem; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .item-name { padding: 0; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .text { grid-row: span 5; padding: 0; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .text .img { width: 64%; max-width: 160px; margin: 2.4rem 0 0 auto; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .text .img .note { right: 4px; bottom: 2rem; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .image { grid-row-start: 1; grid-row-end: 6; grid-column-start: 2; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .image .img { height: 100%; }
#Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .image .img img { height: 100%; object-fit: cover; }
@media screen and (max-width: 988px) { #Sec02 .equipment-container .item-list.list1 .item-wrap#Closet { grid-template-columns: 1fr 2fr; } }
@media screen and (max-width: 700px) { #Sec02 .plan-detail > .inner:first-of-type { padding-top: 0; }
  #Sec02 .plan-detail .overview { grid-template-columns: 1fr; gap: 0; }
  #Sec02 .plan-detail .overview .figure { margin: 4rem auto 1rem; }
  #Sec02 .plan-detail .overview .figure .img { width: 50%; margin-left: auto; margin-right: auto; }
  #Sec02 .plan-detail .overview .figure + .usage-guide { margin-top: 0; }
  #Sec02 .equipment-container .item-list { grid-template-columns: 1fr; }
  #Sec02 .equipment-container .item-list .item-wrap { grid-column: span 1; grid-row: span 3; padding-bottom: 1.2rem; }
  #Sec02 .equipment-container .item-list .item-wrap.divide { padding-bottom: 0; }
  #Sec02 .equipment-container .item-list.list1 .item-wrap#Closet { grid-template-columns: 1fr; padding: 2.24rem 4% 1.2rem; }
  #Sec02 .equipment-container .item-list.list1 .item-wrap#Closet .item-name { grid-column: span 1; padding: 0; }
  #Sec02 .equipment-container .item-list.list1 .item-wrap#Closet .text { padding: 0 0 1.6rem; }
  #Sec02 .equipment-container .item-list.list1 .item-wrap#Storage { grid-row: span 6; grid-template-columns: 1.25fr 1.5fr; grid-column-gap: 2%; }
  #Sec02 .equipment-container .item-list.list1 .item-wrap#Storage .item-name { width: 128%; }
  #Sec02 .equipment-container .item-list.list1 .item-wrap#Storage .text { grid-row: span 4; }
  #Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom { grid-row: span 2; grid-template-columns: 1.25fr 1.5fr; padding: 0; }
  #Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .item-name { padding-top: 2.24rem; padding-left: 2rem; }
  #Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .text { padding-left: 8%; padding-bottom: 1.2rem; }
  #Sec02 .equipment-container .item-list.list2 .item-wrap#Bathroom .image { grid-row-end: 3; } }

#Sec03 .sec_maincopy .img { display: block; width: 64%; max-width: 336px; margin: auto auto 4rem; }
#Sec03 .life-container .life-list { padding-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6.4rem 7.27272727%; }
#Sec03 .life-container .life-list .life-wrap { background-color: #fff; box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.4); display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0.8rem 0; position: relative; padding: 3.2rem 6.95652174%; }
#Sec03 .life-container .life-list .life-wrap .num { width: calc((90/460)*100%); position: absolute; top: -2.5%; left: -5%; }
#Sec03 .life-container .life-list .life-wrap .title { font-size: 2.24rem; color: #7c5271; text-align: center; line-height: 1.44; margin-bottom: 0.4rem; padding-left: 10%; padding-bottom: 2.4rem; border-bottom: thin solid #7c5271; }
#Sec03 .life-container .life-list .life-wrap .title p { transform: translateX(-5%); }
#Sec03 .life-container .life-list .life-wrap .text .lead { line-height: 1.6; }
#Sec03 .life-container .life-list .life-wrap .text .note { margin-top: 1rem; }
#Sec03 .life-container .life-list .life-wrap .images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2%; align-items: stretch; margin-top: 0.4rem; }
#Sec03 .life-container .life-list .life-wrap .images > .note { grid-column: span 2; margin-top: 4px; }
#Sec03 .life-container .life-list .life-wrap .images > .note.cap { font-size: 1rem; text-align: right; margin-top: 1px; }
#Sec03 .life-container .life-list .life-wrap:nth-of-type(1) { padding-bottom: 4px; }
#Sec03 .life-container .life-list .life-wrap:nth-of-type(5) { grid-template-columns: 2fr 0.48fr; grid-column-gap: 2%; }
#Sec03 .life-container .life-list .life-wrap:nth-of-type(5) .title p { transform: none; }
#Sec03 .life-container .life-list .life-wrap:nth-of-type(5) > .image { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; }
#Sec03 .life-container .life-list .life-wrap:nth-of-type(5) .images { grid-column: span 2; }
#Sec03 .life-container .life-list .life-wrap:nth-of-type(5) .images .image { grid-column: span 2; }
@media screen and (max-width: 1200px) { #Sec03 .life-container .life-list { gap: 5.6rem 6%; }
  #Sec03 .life-container .life-list .life-wrap:nth-of-type(5) .title { grid-column: span 2; }
  #Sec03 .life-container .life-list .life-wrap:nth-of-type(5) .title p { transform: translateX(-5%); }
  #Sec03 .life-container .life-list .life-wrap:nth-of-type(5) > .image { grid-row-start: 2; } }
@media screen and (max-width: 700px) { #Sec03 .life-container .life-list { grid-template-columns: 1fr; } }