@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {position: absolute;top: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 500%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.15em;line-height: 0.58;}
#Billboard h2 + p {position: absolute;bottom: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 180%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.25em;line-height: 1;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;background-color: dimgray;mix-blend-mode: multiply;opacity: 0.6;}

#Main .block-security-01 {position: relative;z-index: 2;}
#Main .block-security-01 section {padding-top: 1.5em;}
#Main .block-security-01 section p {font-size: 87.5%;}
#Main .block-security-01 section p small {display: block;margin-top: 0.5em;letter-spacing: 0;font-size: 75%;}
#Main .block-security-01 section p strong {font-weight: normal;font-size: 112.5%;line-height: 1.25;white-space: nowrap;display: block;margin: 0 0 0.5em 0;padding: 0.25em 0 0.75em;border-bottom: 1px solid #ddd;position: relative;}
#Main .block-security-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-security-01 .emergency-call > div p {position: relative;}
#Main .block-security-01 .emergency-call > div p::before {content: "";display: block;padding-top: 30%;margin-bottom: 1em; background: transparent url("../img/security/img_02.webp") no-repeat 50% 100%;background-size: cover;}
#Main .block-security-01 .emergency-call > div p::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 .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(25% - 1.5em);margin: 0.75em;}
#Main .block-security-01 .elevator-security .grid-list > div p {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: #6e5526;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 {display: flex;gap: 1em;}
#Main .block-security-01 .entrance-layout ol li {display: flex;justify-content: space-between;}
#Main .block-security-01 .entrance-layout ol li figure {width: 6em;min-height: 6em;}
#Main .block-security-01 .entrance-layout ol li figure img {object-fit: cover;object-position: 50%;height: 100%;}
#Main .block-security-01 .entrance-layout ol li p {width: calc(100% - 8em);}
#Main .block-security-01 .entrance-layout ol li p strong {display: block;position: relative;padding: 0.25em 0 0.25em 2em;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 112.5%;font-weight: normal;white-space: nowrap;color: #6e5526;}
#Main .block-security-01 .entrance-layout ol li p strong:nth-of-type(2) {margin-top: 1em;}
#Main .block-security-01 .entrance-layout ol li p strong::before {content: attr(data-num)"";background-color: #6e5526;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 figcaption {font-size: 87.5%;}
#Main .block-security-01 .entrance-layout figcaption strong {display: block;position: relative;border-bottom: 1px solid #ddd;margin: 0 0 0.5em 0;padding: 0.25em 0 0.25em 2em;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 112.5%;font-weight: normal;line-height: 1.25;white-space: nowrap;color: #6e5526;}
#Main .block-security-01 .entrance-layout .door figure {width: 100%;display: flex;justify-content: space-around;}
#Main .block-security-01 .entrance-layout .door img {max-width: 10em;margin-right: 1em;width: 50%;height: auto;object-fit: contain;object-position: 0 0;}
#Main .block-security-01 .entrance-layout .door figcaption {padding-left: 0;}
#Main .block-security-01 .entrance-layout .door figcaption strong {padding-left: 0;}
#Main .block-security-01 .entrance-layout .door figcaption strong::before {display: none;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-security-01 .emergency-call {overflow: hidden;clear: both;}
  #Main .block-security-01 .emergency-call > figure {float: left;width: calc(100% - 24em);}
  #Main .block-security-01 .emergency-call > div {float: right;width: 22.5em;}
  #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 p,
  #Main .block-security-01 .auto-lock .grid-list > div + div figure {width: 49%;max-width: 285px;position: relative;}
  #Main .block-security-01 .elevator-security figure[data-caps]::after {transform: translateY(100%);padding: 0.5em 0;}
  #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 > div:nth-child(1) figure {position: relative;height: 100%;overflow: hidden;}
  #Main .block-security-01 .entrance-layout > div:nth-child(1) figure img {position: absolute;top: 50%;left: 50%;width: auto;height: 100%;transform: translate(-50%, -50%);}
  #Main .block-security-01 .entrance-layout > div:nth-child(2) {flex: 1;}
  #Main .block-security-01 .entrance-layout ol {column-count: 2;}
  #Main .block-security-01 .entrance-layout ol li {height: auto!important;break-inside: avoid;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {
  #Main .block-security-01 .container .introduction span {font-size: 137.5%;}
  #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%;}
  #Main .block-security-01 .elevator-security .grid-list > div figure[data-caps]::after {transform: translateY(0);padding: 0.5em;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {font-size: 280%;}
  #Billboard h2 + p {white-space: nowrap;font-size: 150%;}

  #Main .block-security-01 .ttl-style-02 span {display: block;}
  #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 .auto-lock .grid-list > div {margin: 1em 0;}
  #Main .block-security-01 .auto-lock .grid-list > div + div p {margin-top: 1em;}
  #Main .block-security-01 .emergency-call > figure {margin-bottom: 1em;}
  #Main .block-security-01 .emergency-call > div p::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 p {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 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;margin-bottom: 1.5em;padding: 0.5em 4em;width: auto!important;}
  #Main .block-security-01 .entrance-layout > div:nth-child(1) figure::after {color: #222;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 360px) {}