@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;background: var(--grad-03);}
#Billboard h2 {font-size: 200%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;}
#Billboard h2 + p {margin-top: 1em;font-size: 112.5%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;}
#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: transparent url("../img/common/bg_05.webp") no-repeat 50% / cover;mix-blend-mode: multiply;}

#Main .block-security-01 {background: transparent url(../img/common/bg_04.webp) no-repeat 50% 0 / 100% auto;position: relative;}
#Main .block-security-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-security-01 section {padding-top: 1.5em;}
#Main .block-security-01 section h3 {background: var(--grad-02);color: #fff;font-weight: normal;font-family:  YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";padding: 0.2em 0.75em;margin-bottom: 1em;}
#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: bold;font-size: 112.5%;line-height: 1.25; display: block;margin: 0 0 0.5em 0;padding: 0.1em 0 0.5em 0;border-bottom: 1px solid #ddd;}
#Main .block-security-01 section figure img {mix-blend-mode: multiply;}
#Main .block-security-01 .auto-lock .grid-list > div figure[data-caps="住戸前カメラ付ドアホン"]::before {content: "image";position: absolute;bottom: 0;left: 10%;line-height: 1;font-size: 10px;padding: 1em;z-index: 2;}
#Main .block-security-01 .auto-lock .grid-list > div figure[data-caps="住戸前カメラ付ドアホン"]::after {bottom: 0;}
#Main .block-security-01 .auto-lock .grid-list > div:nth-child(3) figure,
#Main .block-security-01 .auto-lock .grid-list > div:nth-child(2) figure {margin-bottom: 1em;border: 1px solid #ddd;}
#Main .block-security-01 .auto-lock .grid-list > div:nth-child(3) p strong {letter-spacing: -0.05em;white-space: nowrap;}
#Main .block-security-01 .elevator-security .grid-list > div:nth-child(1) p {margin-top: 1em;}
#Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) div figure {border: 1px solid #ddd;}
#Main .block-security-01 .entrance .grid-list {counter-reset: number 0;}
#Main .block-security-01 .entrance .grid-list > div {position: relative;}
#Main .block-security-01 .entrance .grid-list > div::before {counter-increment: number 1;content: counter(number) "";background: #e66861;position: absolute;top: 0;left: 0;display: block;width: 1.5em;height: 1.5em;text-align: center;line-height: 1.5;color: #fff;font-size: 75%;z-index: 2;}
#Main .block-security-01 .entrance .grid-list > div p {font-size: 87.5%;line-height: 1.5;}
#Main .block-security-01 .entrance .grid-list > div p strong {font-size: 112.5%;margin: 0 0 0.5em 0;padding: 0 0 0.5em 0;border-bottom: 1px solid #ddd;}
/* =====
* 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 .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 .auto-lock .grid-list-wrap {overflow: hidden;}
  #Main .block-security-01 .auto-lock .grid-list {margin: 0 -1em;}
  #Main .block-security-01 .auto-lock .grid-list > div {width: calc(50% - 2em);margin: 1em;}
  #Main .block-security-01 .auto-lock .grid-list > div + div {width: calc(25% - 2em);margin: 1em;}  
  #Main .block-security-01 .auto-lock .grid-list > div:nth-child(1) figure {padding-bottom: 1em;}
  #Main .block-security-01 .elevator-security .grid-list {justify-content: space-between;margin: 0 -1em;}
  #Main .block-security-01 .elevator-security .grid-list > div {margin: 1em;}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(1) {width: calc(46% - 2em);}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(1) figure {max-width: 532px;}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) {width: calc(54% - 2em);}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) div {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) div + div {margin-top: 1.5em;}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) div figure {width: 40%;max-width: 252px;padding-bottom: 0.75em;}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) div p {width: 56%;}
  #Main .block-security-01 .entrance > figure {float: left;width: 33.5%;max-width: 400px;}
  #Main .block-security-01 .entrance .grid-list-wrap {margin-left: 34%;}
  #Main .block-security-01 .entrance .grid-list > div {width: calc(50% - 1em);margin: 0 0.5em 1em;overflow: hidden;}
  #Main .block-security-01 .entrance .grid-list > div figure {width: 36%;max-width: 136px;float: left;padding-bottom: 1.2em;}
  #Main .block-security-01 .entrance .grid-list > div p {margin-left: 40%;}
  #Main .block-security-01 .entrance .grid-list > div p span {white-space: nowrap;}
  #Main .block-security-01 .entrance .grid-list > div figure[data-caps]::after {padding-bottom: 2.5em;right: inherit;left: 0;} 
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {
  #Main .block-security-01 .auto-lock .grid-list > div:nth-child(1) {width: calc(100% - 36em);}
  #Main .block-security-01 .auto-lock .grid-list > div:nth-child(2),
  #Main .block-security-01 .auto-lock .grid-list > div:nth-child(3) {width: 15em;}
  #Main .block-security-01 .entrance {float: none;width: 100%;}
  #Main .block-security-01 .entrance > figure {width: 45%;max-width: 100%;}
  #Main .block-security-01 .entrance .grid-list-wrap {margin-left: 47%;}
  #Main .block-security-01 .entrance .grid-list > div {width: calc(100% - 1em);}
  #Main .block-security-01 .entrance .grid-list > div + div {border-top: 1px solid #ddd; padding-top: 1em;}
  #Main .block-security-01 .entrance .grid-list > div + div::before {top: 1.25em;}
  #Main .block-security-01 .entrance .grid-list > div figure {width: 24%;}
  #Main .block-security-01 .entrance .grid-list > div p {margin-left: 26%;line-height: 1.4;}
  #Main .block-security-01 .entrance .grid-list > div p strong {font-size: 100%; padding-bottom: 0.5em;margin-bottom: 0;border-bottom: 0 none transparent;}
  #Main .block-security-01 .entrance .grid-list > div figure[data-caps]::after {padding-bottom: 0.5em;padding-left: 0;}  
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 + p {margin-top: 0.5em;}
  #Billboard .container {width: 100%;padding: 5em 0 2em;}
  #Billboard::after {background-size: 200% auto;}

  #Main .block > .container {margin: 0 1em;}
  #Main .block-security-01 section {padding-top: 2em;}
  #Main .block-security-01 section:nth-of-type(1) {padding-top: 0;}
  #Main .block-security-01 .emergency-call > figure {margin-bottom: 1em;}
  #Main .block-security-01 .auto-lock {overflow: hidden;}
  #Main .block-security-01 .auto-lock .grid-list {margin: 0;}
  #Main .block-security-01 .auto-lock .grid-list > div {margin: 0;position: relative;overflow: hidden;}
  #Main .block-security-01 .auto-lock .grid-list > div:nth-child(1) figure {padding-bottom: 1em;}
  #Main .block-security-01 .auto-lock .grid-list > div:nth-child(1) figure img,
  #Main .block-security-01 .auto-lock .grid-list > div:nth-child(1) figure::after {width: 125%;}
  #Main .block-security-01 .auto-lock .grid-list > div + div {margin-top: 1em;padding-top: 1em;}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) div {margin-top: 2em;}
  #Main .block-security-01 .elevator-security .grid-list > div:nth-child(2) div figure {margin-bottom: 1em;}
  #Main .block-security-01 .entrance .grid-list-wrap {background-color: #fafafa; border: 1px solid #ddd;margin-top: 2em;}
  #Main .block-security-01 .entrance .grid-list > div {display: flex;justify-content: space-between;margin: 1em;} 
  #Main .block-security-01 .entrance .grid-list > div figure {width: 8em;}
  #Main .block-security-01 .entrance .grid-list > div figure + p {width: calc(100% - 10em);letter-spacing: 0;}
  #Main .block-security-01 .entrance .grid-list > div figure + p strong {white-space: nowrap;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}