@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Noto+Serif+JP:wght@300;600&display=swap");
section { max-width: 1100px; margin-inline: auto; }
section .text { font-size: 1.6rem; }
section .cap, section .note { font-feature-settings: "halt"; letter-spacing: 0.05em; }

.plan-detail { max-width: 900px; margin-inline: auto; margin-top: 8rem; }
.plan-detail .plan-header { background: url(../img/plan/bg01.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center; color: #fff; padding: 2rem 0; }
.plan-detail .plan-header .space { font-size: 2.8rem; width: 160px; text-align: center; border-right: 1px solid #fff; }
.plan-detail .plan-header .space .large { font-family: 'EB Garamond', serif; font-weight: 300; font-style: normal; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; font-size: 260%; }
.plan-detail .plan-header .layout { font-family: 'EB Garamond', serif; font-weight: 300; font-style: normal; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; font-size: 4.4rem; width: 180px; text-align: center; }
.plan-detail .plan-header .scale { display: flex; flex-wrap: wrap; flex: 1; gap: 0 1.5rem; }
.plan-detail .plan-header .scale li { font-size: 2rem; line-height: 1; }
.plan-detail .plan-header .scale li:not(.floor) { width: 100%; }
.plan-detail .plan-header .scale li::before { content: '\025cf'; }
.plan-detail .plan-header .scale li.floor { font-size: 1.7rem; margin-top: 1rem; }
.plan-detail .plan-header .scale li .large { font-family: 'EB Garamond', serif; font-weight: 300; font-style: normal; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; font-size: 160%; }
.plan-detail .merit-copy { font-size: clamp(20px, calc(1vw + 17px), 26px); font-feature-settings: "palt"; line-height: 1.5; margin-top: 4rem; }
.plan-detail .plan-body { margin-top: 5rem; position: relative; }
.plan-detail .plan-body .zeh { width: 39.54%; margin-left: auto; }
.plan-detail .plan-body .layout-image { margin-top: -2rem; }
.plan-detail .plan-body .banner { width: 35.45%; position: absolute; top: 14.5%; right: 0; }
.plan-detail .plan-body .banner img { transition: filter 0.2s linear; }
.plan-detail .plan-body .banner a:hover img { filter: brightness(110%); }
.plan-detail .plan-body + .note { margin-top: 2rem; }

.other-details { background-color: #eff0e8; padding: 8rem 0; margin-top: 8rem; margin-bottom: 4rem; position: relative; }
.other-details > section { padding-top: 8rem; }
.other-details > section > .text { text-align: center; line-height: 2; margin-top: 2rem; }
.other-details .local-nav { padding: 1rem; position: sticky; top: var(--local-nav-sticky-top, 0px); z-index: 10; }
.other-details .local-nav ul { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; gap: 1.5rem; margin-inline: auto; }
.other-details .local-nav ul li { text-align: center; font-size: 2rem; font-feature-settings: "palt"; }
.other-details .local-nav ul li a { display: block; width: 100%; background-color: #c4d7ba; padding: 1.5rem 1rem; }
.other-details .local-nav ul li a:hover { background-color: #84b076; }
.other-details .local-nav ul li.current a { color: #fff; background-color: #84b076; }
.other-details .section-header { text-align: center; }
.other-details .section-header .en { font-family: 'EB Garamond', serif; font-weight: 300; font-style: normal; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; color: #7a9366; font-size: clamp(22px, calc(1vw + 19px), 28px); }
.other-details .section-header .jp { font-size: clamp(28px, calc(1vw + 25px), 34px); font-feature-settings: "palt"; margin-top: 1rem; line-height: 1.4; }
.other-details .section-body { background-color: #fff; padding: 8rem; margin-top: 4rem; }
.other-details .item { --gap-column: 4rem; --gap-row: 3rem; }

#equipment .list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
#equipment .list li { display: grid; place-content: center; color: #91ae78; /*font-size: 2rem;*/ font-size: 1.8rem; border: 1px solid currentColor; text-align: center; padding: 2rem 5px; font-feature-settings: "halt"; }
#equipment .list li .note { font-size: 80%; line-height: 1.4; margin-top: 5px; }
#equipment .image-photo { display: grid; grid-template-columns: repeat(2, 1fr); }

#advanced .item-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
#advanced .item-header .name { font-size: clamp(28px, calc(2vw + 22px), 40px); font-feature-settings: "palt"; }
#advanced .item-header .name .note { font-size: 60%; }
#advanced .item-header .sub-copy { width: 100%; font-size: clamp(18px, calc(1vw + 15px), 24px); line-height: 1.4; text-align: center; }
#advanced .item { border-top: 8px solid #84b076; margin-top: 6rem; padding-top: 6rem; }
#advanced .item .text { line-height: 1.8; }
#advanced .item > .detail { border-top: 4px dotted #91ae79; margin-top: 6rem; padding-top: 6rem; display: grid; }
#advanced .item > .detail .title { font-size: clamp(22px, calc(1vw + 19px), 28px); line-height: 1.4; }
#advanced .item > .detail.detail01 { border-top: 0; padding-top: 0; }
#advanced .item01 { border-top: 0; margin-top: 0; padding-top: 0; }
#advanced .item01 .item-header .logo { max-width: 406px; }
#advanced .item01 .detail01 { grid-template-columns: 1fr 0.52fr; gap: var(--gap-row) var(--gap-column); }
#advanced .item01 .detail01 .img { order: 2; }
#advanced .item01 .detail01 .text { order: 1; }
#advanced .item01 .detail02 { /*grid-template-columns: 0.666fr 1fr;
gap: var(--gap-row) var(--gap-column);*/ gap: var(--gap-row) var(--gap-column); grid-template-columns: 0.91fr 1fr; grid-template-rows: repeat(3, auto) 1fr; }
#advanced .item01 .detail02 .title { grid-column: span 2; order: 1; }
#advanced .item01 .detail02 .img { order: 3; grid-row: span 3; }
#advanced .item01 .detail02 .text { order: 2; }
#advanced .item01 .detail02 .note { order: 4; }
#advanced .item01 .detail03 .detail-header { text-align: center; }
#advanced .item01 .detail03 .detail-header .main-copy { font-size: clamp(26px, calc(1vw + 21px), 36px); }
#advanced .item01 .detail03 .detail-header .sub-copy { font-size: clamp(16px, calc(1vw + 14px), 20px); line-height: 1.4; margin-top: 2rem; }
#advanced .item01 .detail03 > .title { margin-top: 4rem; }
#advanced .item01 .detail03 .imgbox { display: flex; gap: 2rem 1.9148%; margin-top: 3rem; }
#advanced .item01 .detail03 .imgbox .img11 { width: 52.766%; }
#advanced .item01 .detail03 .imgbox .img12 { width: 45.3192%; }
#advanced .item01 .detail03 .text, #advanced .item01 .detail03 .note { margin-top: 3rem; }
#advanced .item02 .detail01 { gap: var(--gap-row) var(--gap-column); grid-template-columns: 0.91fr 1fr; }
#advanced .item02 .detail01 .title { color: #55764e; background-color: #eaf1eb; text-align: center; padding: 1rem; grid-column: span 2; order: 1; }
#advanced .item02 .detail01 .img { order: 3; }
#advanced .item02 .detail01 .text { order: 2; }
#advanced .item02 .detail02 { gap: var(--gap-row) var(--gap-column); grid-template-columns: 0.91fr 1fr; grid-template-rows: repeat(3, auto) 1fr; }
#advanced .item02 .detail02 .title { text-align: center; order: 1; grid-column: span 2; }
#advanced .item02 .detail02 .img { order: 3; grid-row: span 3; }
#advanced .item02 .detail02 .text { order: 2; }
#advanced .item02 .detail02 .note { order: 4; }
#advanced .item03 .item-header { column-gap: 4rem; }
#advanced .item03 .item-header .name { font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; font-weight: bold; margin-top: 1rem; }
#advanced .item03 .item-header .logo { max-width: 235px; }
#advanced .item03 .detail01 { grid-template-columns: 0.91fr 1fr; grid-template-rows: repeat(2, auto) 1fr; gap: var(--gap-row) var(--gap-column); }
#advanced .item03 .detail01 .img { grid-row: span 3; }
#advanced .item03 .detail02 { grid-template-columns: 1fr 0.44fr; grid-template-rows: repeat(2, auto) 1fr; gap: var(--gap-row) var(--gap-column); }
#advanced .item03 .detail02 .title { align-self: flex-end; }
#advanced .item03 .detail02 .img { grid-row: span 2; }
#advanced .item03 .detail02 .graph { grid-column: span 2; border: 4px solid #84b076; padding: 3rem 4rem; }
#advanced .item03 .detail02 .graph .title { font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; font-size: clamp(18px, calc(1vw + 15px), 24px); color: #55764e; font-weight: bold; }
#advanced .item03 .detail02 .graph .img { margin-top: 2rem; }
#advanced .item03 .detail02 .graph .note { margin-top: 3rem; }
#advanced .item03 .detail03 { grid-template-columns: 1fr 0.95fr; gap: var(--gap-row) var(--gap-column); }
#advanced .item03 .detail03 .img { grid-row: span 3; }
#advanced .item03 .detail03 .note li { position: relative; padding-left: 1rem; }
#advanced .item03 .detail03 .note li::before { position: absolute; content: '\025a0'; font-size: 1rem; left: 0; top: 0; }
#advanced .item03 .detail03 .note li .indent { text-indent: -2.5em; padding-left: 2.5em; }
#advanced .item03 .detail03 .note li .indent02 { text-indent: -4.5em; padding-left: 4.5em; }

#security .service-list { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 6rem; margin-top: 6rem; }
#security .service01 { width: 100%; }
#security .service02 { width: 44.68%; }
#security .service03 { width: 51.06%; }
#security .service04 { width: 48.93%; }
#security .service05 { width: 47.76%; }
#security .service05 .note { font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; margin-top: 5px; line-height: 1.4; }
#security .basic { margin-top: 6rem; }
#security .basic > .title { background-color: #249cad; color: #fff; text-align: center; font-size: clamp(22px, calc(1vw + 19px), 28px); padding: 2rem 1rem; font-feature-settings: "palt"; letter-spacing: 0.1em; }
#security .basic .unit-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.2rem; padding: 4rem; border: 1px solid #249cad; }
#security .basic .unit { font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
#security .basic .unit .name { text-align: center; font-weight: bold; font-size: 2rem; }
#security .basic .unit .img { margin-top: 2rem; }
#security .basic .unit .text { margin-top: 2rem; font-size: 1.4rem; line-height: 1.6; }

@media screen and (max-width: 930px) { .plan-detail .plan-header { flex-wrap: wrap; padding: 3rem; }
  .plan-detail .plan-header .space, .plan-detail .plan-header .layout { width: fit-content; }
  .plan-detail .plan-header .space { padding-right: 2rem; }
  .plan-detail .plan-header .layout { padding-left: 2rem; }
  .plan-detail .plan-header .scale { width: 100%; flex: inherit; margin-top: 2rem; }
  .other-details .local-nav ul { gap: 0.5rem; }
  .other-details .local-nav ul li { font-size: 1.6rem; font-feature-settings: "palt"; }
  .other-details .local-nav ul li a { padding: 1rem 0.5rem; }
  .other-details .section-body { padding: 4rem; }
  .other-details .item { --gap-column: 2.5rem; --gap-row: 2rem; }
  #equipment .list { grid-template-columns: repeat(3, 1fr); }
  #security .basic .unit-list { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
@media screen and (max-width: 640px) { section .text { font-size: 1.4rem; }
  .plan-detail { margin-top: 3rem; }
  .plan-detail .plan-header { padding: 2rem; }
  .plan-detail .plan-header .space { font-size: 2.2rem; }
  .plan-detail .plan-header .layout { font-size: 4rem; }
  .plan-detail .plan-header .scale { margin-top: 1rem; }
  .plan-detail .plan-header .scale li { font-size: 1.6rem; }
  .plan-detail .plan-header .scale li.floor { font-size: 1.4rem; }
  .plan-detail .plan-body .zeh { width: 100%; max-width: 360px; margin-left: inherit; margin-inline: auto; }
  .plan-detail .plan-body .layout-image { margin-top: 3rem; }
  .plan-detail .plan-body .banner { max-width: 320px; width: 100%; position: static; margin-inline: auto; margin-top: 4rem; }
  .other-details { padding: 3rem 0; }
  .other-details > section { padding-top: 5rem; }
  .other-details .section-body { padding: 3rem; }
  #equipment .list { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  #equipment .list li { font-size: 1.6rem; padding: 1.5rem 5px; }
  #advanced .item { border-top: 6px solid #84b076; margin-top: 3rem; padding-top: 3rem; }
  #advanced .item > .detail { border-top: 3px dotted #91ae79; margin-top: 3rem; padding-top: 3rem; }
  #advanced .item01 { border-top: 0; margin-top: 0; padding-top: 0; }
  #advanced .item01 .item-header { gap: 0; }
  #advanced .item01 .item-header .logo { margin-top: 1.5rem; }
  #advanced .item01 .detail01, #advanced .item01 .detail02 { grid-template-columns: 1fr; }
  #advanced .item01 .detail02 .title { grid-column: span 1; }
  #advanced .item01 .detail02 .img { order: 4; }
  #advanced .item01 .detail02 .note { order: 3; }
  #advanced .item01 .detail03 .imgbox { flex-direction: column; }
  #advanced .item01 .detail03 .imgbox .img11 { width: 100%; }
  #advanced .item01 .detail03 .imgbox .img12 { width: 100%; }
  #advanced .item02 .item-header .name { text-align: center; }
  #advanced .item02 .detail01, #advanced .item02 .detail02 { grid-template-columns: 1fr; }
  #advanced .item02 .detail01 .title, #advanced .item02 .detail02 .title { grid-column: span 1; }
  #advanced .item03 .item-header .name { margin-top: 0; }
  #advanced .item03 .detail01, #advanced .item03 .detail02, #advanced .item03 .detail03 { grid-template-columns: 1fr; }
  #advanced .item03 .detail02 .graph { grid-column: span 1; border: 2px solid #84b076; padding: 2rem; }
  #security .service-list { row-gap: 3rem; }
  #security .service { width: 100% !important; }
  #security .basic .unit-list { grid-template-columns: 1fr; padding: 3rem 2rem; }
  #security .basic .unit .name { font-size: 1.8rem; } }