@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {font-size: 200%;font-weight: normal;font-family: 'Cardo', serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;transition: letter-spacing var(--easing) 2000ms;}
#Billboard h2 + p {margin-top: 1em;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;transition: letter-spacing var(--easing) 2000ms;}
#Billboard .container {position: relative;z-index: 2;width: calc(100% - 4em);max-width: 1260px;padding: 6em 2em 3em;margin-left: auto;margin-right: auto;box-sizing: border-box;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #9aa url("../img/common/bg_06.webp") no-repeat 0 0 / cover;background-blend-mode: color-burn;filter: contrast(.5) brightness(3.5) grayscale(0.7);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
.staging #Billboard::after {filter: contrast(1) brightness(1) grayscale(0);transition: filter var(--easing) 2000ms;}
.transitionend #Billboard h2,
.transitionend #Billboard h2 + p {letter-spacing: 0.2em;}
#Main .block-security-01 {position: relative;}
#Main .block-security-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-security-01 .container h4 {display: block;width: 100%;background: var(--teal-green);margin: 1.5em 0 1em;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 137.5%;font-weight: normal;text-align: center;color: #fff;}
#Main .block-security-01 .container h5 {position: relative;border-bottom: 1px solid #dcdcdc;margin: 0.5em 0;padding: 0.75em 0 0.5em 0;font-weight: normal;font-size: 112.5%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;line-height: 1.5;}
#Main .block-security-01 .container h5::after {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
#Main .block-security-01 .container h5 + p {padding: 0 0 1em;font-size: 87.5%;}
#Main .block-security-01 .container + p small {display: block;color: #666;}
#Main .block-security-01 .emergency-call figure {padding-bottom: 2em;}
#Main .block-security-01 .emergency-call figure::after {padding-right: 0;}
#Main .block-security-01 .emergency-call > div h5 {position: relative;}
#Main .block-security-01 .emergency-call > div h5::before {content: "";display: block;padding-top: 30%;margin-bottom: 1em; background: transparent url("../img/security/security_02.webp") no-repeat 50% 100%;background-size: cover;}
#Main .block-security-01 .emergency-call > div h5::after {content: "image";position: absolute;top: 0;right: 0;font-size: 10px;line-height: 1;color: #fff;padding: 1em;z-index: 3;}
#Main .block-security-01 .auto-lock .grid-list > div:nth-child(1) figure::after {padding: 1em 0 0 1em;}
#Main .block-security-01 .elevator-security .grid-list {margin: 0 -0.75em;}
#Main .block-security-01 .elevator-security .grid-list > div {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;width: calc(33.33% - 1.5em);margin: 0.75em;}
#Main .block-security-01 .elevator-security .grid-list > div div {width: 56%;}  
#Main .block-security-01 .elevator-security .grid-list > div figure {width: 40%;max-width: 150px;position: relative;}
#Main .block-security-01 .entrance-security .grid-list > div {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
#Main .block-security-01 .entrance-security .grid-list > div ~ div p strong {padding-left: 2.25em;}
#Main .block-security-01 .entrance-security .grid-list > div ~ div p strong::before {display: inline-block;content: attr(data-num);background: #3da7ba;width: 2em;height: 2em;text-align: center;line-height: 2;color: #fff;font-size: 87.5%;position: absolute;top: 0;left: 0;z-index: 2;}
#Main .block-security-01 .entrance-security .grid-list > div:nth-child(3) p:last-child strong:last-child {margin-top: 1em;}
#Main .block-security-01 .entrance-security .grid-list > div ~ div p {width: 56%;margin: 0;}
#Main .block-security-01 .entrance-security .grid-list > div ~ div figure {width: 40%;margin-bottom: 1em;position: relative;}  
#Main .block-security-01 .entrance-layout figcaption {padding: 0 1em 0 0.5em;}
#Main .block-security-01 .entrance-layout figcaption strong {display: block;position: relative;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 112.5%;font-weight: normal;white-space: nowrap;color: var(--teal-green);}
#Main .block-security-01 .entrance-layout figcaption strong:nth-of-type(2) {margin-top: 0.5em;}
#Main .block-security-01 .entrance-layout figcaption strong[data-num] {padding-left: 2em;}
#Main .block-security-01 .entrance-layout figcaption strong[data-num]::before {content: attr(data-num)"";background-color: var(--teal-green);position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1.5em;height: 1.5em;text-align: center;line-height: 1.5em;color: #fff;}
#Main .block-security-01 .entrance-layout {display: flex;gap: 1.5em;}
#Main .block-security-01 .entrance-layout > div:nth-child(2) figure,
#Main .block-security-01 .entrance-layout > div:nth-child(3) figure {display: flex;align-items: flex-start;}
#Main .block-security-01 .entrance-layout > div:nth-child(2) figure + figure,
#Main .block-security-01 .entrance-layout > div:nth-child(3) figure + figure {margin-top: 1.75em;}
#Main .block-security-01 .entrance-layout > div:nth-child(2) figure::after,
#Main .block-security-01 .entrance-layout > div:nth-child(3) figure::after {right: inherit;left: 0;padding: 0.5em;}
#Main .block-security-01 .entrance-layout > div:nth-child(2) figure img,
#Main .block-security-01 .entrance-layout > div:nth-child(3) figure img {width: 5em;}
#Main .block-security-01 .entrance-layout > div:nth-child(3) figure:last-child img {width: 8em;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-security-01 .emergency-call {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;overflow: hidden;margin: 0 -1em;}
  #Main .block-security-01 .emergency-call figure {width: calc(66.66% - 2em);margin: 1em;}
  #Main .block-security-01 .emergency-call figure img {max-width: 786px;}
  #Main .block-security-01 .emergency-call div {width: calc(33.33% - 2em);margin: 1em;}
  #Main .block-security-01 .emergency-call > div h5 {padding-top: 0;margin-top: 0;}
  #Main .block-security-01 .emergency-call > div p {position: relative;}
  #Main .block-security-01 .auto-lock .grid-list {margin: 0 -0.75em;}
  #Main .block-security-01 .auto-lock .grid-list > div {width: calc(50% - 1.5em);margin: 0.75em;}
  #Main .block-security-01 .auto-lock .grid-list > div + div {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
  #Main .block-security-01 .auto-lock .grid-list > div + div div,
  #Main .block-security-01 .auto-lock .grid-list > div + div figure {width: 49%;max-width: 285px;position: relative;}
  #Main .block-security-01 .entrance-security .grid-list {align-items: flex-start;margin: 0 -0.75em;}
  #Main .block-security-01 .entrance-security .grid-list > div {width: calc(33.33% - 1.5em);margin: 0.75em;}
  #Main .block-security-01 .entrance-security .grid-list > div:nth-child(1) figure {max-width: 382px;}
  #Main .block-security-01 .entrance-layout figcaption {font-size: 87.5%;}
  #Main .block-security-01 .entrance-layout > div:nth-child(1) {min-width: 230px;}
  #Main .block-security-01 .entrance-layout > div:nth-child(1) figure {position: relative;height: 100%;}
  #Main .block-security-01 .entrance-layout > div:nth-child(1) figure img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
  #Main .block-security-01 .entrance-layout > div + div {flex: 1;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {
  #Main .block-security-01 .elevator-security .grid-list > div {width: calc(50% - 1.5em);align-items: center;}
  #Main .block-security-01 .elevator-security .grid-list > div figure {max-width: 100%;}
}

/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard .container {width: 100%;padding: 6em 0 2em;}
  #Billboard::after {background-position: 50% calc(50% + 2em - 2px);background-size: 100% calc(100% + 4em);}

  #Main .block-security-01 .container {padding-top: 2em;}
  #Main .block-security-01 .container .introduction h2 {margin-bottom: 0;}
  #Main .block-security-01 .container .introduction span {font-size: 100%;}
  #Main .block-security-01 .container h4 {font-size: 125%;line-height: 1.25;margin-top: 1em;padding: 0.25em 0;}
  #Main .block-security-01 .container h5 {margin-top: 0;}
  #Main .block-security-01 .auto-lock .grid-list > div {margin: 1em 0;}
  #Main .block-security-01 .emergency-call > figure {margin-bottom: 1em;}
  #Main .block-security-01 .emergency-call > div h5::after {padding: 0.5em;}
  #Main .block-security-01 .elevator-security .grid-list > div {width: calc(100% - 2em);margin: 1em;}
  #Main .block-security-01 .elevator-security .grid-list > div figure {width: 30%;padding-bottom: 0.75em;background: #f8f8f8;}
  #Main .block-security-01 .elevator-security .grid-list > div div {letter-spacing: 0;width: 66%;}
  #Main .block-security-01 .entrance-security .grid-list > div:nth-child(1) figure {width: 60%;margin: 0 auto 2em;} 
  #Main .block-security-01 .entrance-security .grid-list > div ~ div p strong {line-height: 1.5;}

  #Main .block-security-01 .entrance-layout {display: block;}
  #Main .block-security-01 .entrance-layout figcaption {font-size: 87.5%;padding: 0 1em;}
  #Main .block-security-01 .entrance-layout figcaption strong {margin-bottom: 0.25em;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-weight: normal;font-size: 112.5%;}
  #Main .block-security-01 .entrance-layout > div:nth-child(1) figure {border: 1px solid #ddd;padding: 0.5em 4em;width: auto!important;}
  #Main .block-security-01 .entrance-layout > div:nth-child(1) figure::after {color: #222;}
  #Main .block-security-01 .entrance-layout > div:nth-child(2),
  #Main .block-security-01 .entrance-layout > div:nth-child(3) {margin-top: 1em;}
  #Main .block-security-01 .entrance-layout > div:nth-child(2) figure,
  #Main .block-security-01 .entrance-layout > div:nth-child(3) figure {width: auto;}
  #Main .block-security-01 .entrance-layout > div:nth-child(2) figure + figure,
  #Main .block-security-01 .entrance-layout > div:nth-child(3) figure + figure {margin-top: 1.25em !important;}
  #Main .block-security-01 .entrance-layout > div:nth-child(2) figure img,
  #Main .block-security-01 .entrance-layout > div:nth-child(3) figure img {width: 6em;}
  
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}