@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;
}

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  padding: 2rem 0;
}
.plan-detail .plan-header .space {
  font-size: 2.8rem;
  width: 160px;
  text-align: center;
}
.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 .space {
  border-right: 1px solid #fff;
}
.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 .layout .small {
  display: block;
  font-size: 1.4rem;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  letter-spacing: 0;
}
.plan-detail .plan-header .scale {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: "●";
}
.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, 1vw + 17px, 26px);
  -webkit-font-feature-settings: "palt";
          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: 32%;
  margin-left: auto;
}
.plan-detail .plan-body .banner img {
  -webkit-transition: -webkit-filter 0.2s linear;
  transition: -webkit-filter 0.2s linear;
  transition: filter 0.2s linear;
  transition: filter 0.2s linear, -webkit-filter 0.2s linear;
}
.plan-detail .plan-body .banner a:hover img {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.plan-detail .plan-body .banner01 {
  margin-top: -35%;
}
.plan-detail .plan-body .banner02 {
  margin-top: 2rem;
}
.plan-detail .plan-body + .note {
  margin-top: 2rem;
}

.other-details {
  background-color: #ebecf0;
  padding: 4rem 0 8rem;
  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 > .banner {
  max-width: 760px;
  width: 90%;
  margin-inline: auto;
  margin-bottom: 3rem;
}
.other-details > .banner img {
  -webkit-transition: -webkit-filter 0.2s linear;
  transition: -webkit-filter 0.2s linear;
  transition: filter 0.2s linear;
  transition: filter 0.2s linear, -webkit-filter 0.2s linear;
}
.other-details > .banner a:hover img {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.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;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}
.other-details .local-nav ul li a {
  display: block;
  width: 100%;
  background-color: #bfc1cc;
  padding: 1.5rem 1rem;
}
.other-details .local-nav ul li a:hover {
  background-color: #adb0c3;
}
.other-details .local-nav ul li.current a {
  color: #fff;
  background-color: #36374b;
}
.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: #36374b;
  font-size: clamp(22px, 1vw + 19px, 28px);
}
.other-details .section-header .jp {
  font-size: clamp(28px, 1vw + 25px, 34px);
  -webkit-font-feature-settings: "palt";
          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;
  border: 1px solid currentColor;
  color: #36374b;
  font-size: 2rem;
  text-align: center;
  padding: 2rem 5px;
}
#equipment .list li:first-of-type {
  background-color: #36374b;
  color: #fff;
}
#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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
#advanced .item-header .name {
  font-size: clamp(28px, 2vw + 22px, 40px);
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}
#advanced .item-header .name .note {
  font-size: 60%;
}
#advanced .item-header .sub-copy {
  width: 100%;
  font-size: clamp(18px, 1vw + 15px, 24px);
  line-height: 1.4;
  text-align: center;
}
#advanced .item {
  border-top: 8px solid #36374b;
  margin-top: 6rem;
  padding-top: 6rem;
}
#advanced .item .text {
  line-height: 1.8;
}
#advanced .item > .detail {
  border-top: 4px dotted #36374b;
  margin-top: 6rem;
  padding-top: 6rem;
  display: grid;
}
#advanced .item > .detail .title {
  font-size: clamp(22px, 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 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
#advanced .item01 .detail01 .text {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
#advanced .item01 .detail02 {
  grid-template-columns: 0.666fr 1fr;
  gap: var(--gap-row) var(--gap-column);
}
#advanced .item01 .detail02 .title {
  grid-column: span 2;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
#advanced .item01 .detail02 .img {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
#advanced .item01 .detail02 .text {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
#advanced .item01 .detail03 .detail-header {
  text-align: center;
}
#advanced .item01 .detail03 .detail-header .main-copy {
  font-size: clamp(26px, 1vw + 21px, 36px);
}
#advanced .item01 .detail03 .detail-header .sub-copy {
  font-size: clamp(16px, 1vw + 14px, 20px);
  line-height: 1.4;
  margin-top: 2rem;
}
#advanced .item01 .detail03 > .title {
  margin-top: 4rem;
}
#advanced .item01 .detail03 .img-list {
  display: grid;
  grid-template-columns: 1fr 0.8585fr;
  gap: 2rem;
  margin-top: 2rem;
}
#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: #36374b;
  background-color: #ebecf0;
  text-align: center;
  padding: 1rem;
  grid-column: span 2;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
#advanced .item02 .detail01 .img {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
#advanced .item02 .detail01 .text {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          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;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  grid-column: span 2;
}
#advanced .item02 .detail02 .img {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  grid-row: span 3;
}
#advanced .item02 .detail02 .text {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
#advanced .item02 .detail02 .note {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}
#advanced .item03 .item-header {
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          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 {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
#advanced .item03 .detail02 .img {
  grid-row: span 2;
}
#advanced .item03 .detail02 .graph {
  grid-column: span 2;
  border: 4px solid #36374b;
  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, 1vw + 15px, 24px);
  color: #36374b;
  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: "■";
  font-size: 1rem;
  left: 0;
  top: 0;
}

#security .service-list {
  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;
  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, 1vw + 19px, 28px);
  padding: 2rem 1rem;
  -webkit-font-feature-settings: "palt";
          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 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 3rem;
  }
  .plan-detail .plan-header .space,
  .plan-detail .plan-header .layout {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .plan-detail .plan-header .space {
    padding-right: 2rem;
  }
  .plan-detail .plan-header .layout {
    text-align: left;
    padding-left: 2rem;
  }
  .plan-detail .plan-header .scale {
    width: 100%;
    -webkit-box-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
    margin-top: 2rem;
  }
  .other-details .local-nav ul {
    gap: 0.5rem;
  }
  .other-details .local-nav ul li {
    font-size: 1.6rem;
    -webkit-font-feature-settings: "palt";
            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-width: 6px;
    margin-top: 3rem;
    padding-top: 3rem;
  }
  #advanced .item > .detail {
    border-top-width: 3px;
    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 .detail03 .img-list {
    grid-template-columns: 1fr;
  }
  #advanced .item02 .item-header .name {
    text-align: center;
  }
  #advanced .item02 .detail01 .title,
  #advanced .item02 .detail02 .title {
    grid-column: span 1;
  }
  #advanced .item02 .detail01,
  #advanced .item02 .detail02 {
    grid-template-columns: 1fr;
  }
  #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-width: 2px;
    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;
  }
}