@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: 'classico-urw', 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: 125%;font-weight: normal;font-family: 'classico-urw', serif;color: #fff;text-align: center;letter-spacing: 0.25em;line-height: 1.5;white-space: nowrap;-webkit-font-smoothing: initial;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;background-color: antiquewhite;mix-blend-mode: multiply;opacity: 0.6;}

#Main .block-introduction ul {display: flex;margin: 0 auto;background: linear-gradient(0deg, rgba(255, 255, 255,1) 0%, rgba(243, 246, 247,1) 100%);}
#Main .block-introduction ul li {width: 33.33%;margin: 0;}
#Main .block-introduction ul li a {display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 1em 0;background: linear-gradient(90deg, rgba(49, 137, 137,0) 0%, rgba(49, 137, 137,0) 50%, rgba(49, 137, 137,0) 100%);font-size: 125%;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;letter-spacing: 0.15em;line-height: 1;text-decoration: none;text-align: center;transition: opacity ease 500ms;}
#Main .block-introduction ul li a small {display: block;margin: 1em 0 0;font-size: 50%;line-height: 1;color: #888;transition: color ease 500ms}
#Main .block-introduction ul li a:hover {opacity: 0.6;}
#Main .block-introduction ul li a:hover small,
#Main .block-introduction ul li a:hover strong {}
#Main .block-introduction ul li.current a {background: var(--grad-02);color: #fff;cursor: default;pointer-events: none;}
#Main .block-introduction ul li.current a small {color: #fff;}

#Main .block-life-01 {position: relative;background: #ded9bb url("../img/common/bg_03.webp") no-repeat 50% / cover;background-blend-mode: overlay;}
#Main .block-life-01 h3 {margin-bottom: 1em;font-size: 200%;font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: var(--light-beige);}
#Main .block-life-01 h3 small {display: block;font-size: 50%;}
#Main .block-life-01 figure {position: relative;}
#Main .block-life-01 figure::before {content: "";position: absolute;top: 2em;left: 0;width: 13em;height: 9em;background: transparent url("../img/life/img_02.svg") no-repeat 0 0 / contain;}
#Main .block-life-01 figure:last-child {margin-top: 3em;}
#Main .block-life-01 figure:last-child::before {content: "";position: absolute;top: 2em;left: inherit;right: 0;width: 13em;height: 9em;background: transparent url("../img/life/img_08.svg") no-repeat 0 0 / contain;}
#Main .block-life-01 h4 {margin-bottom: 1em;font-size: 125%;font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: var(--light-beige);}
#Main .block-life-01 .grid-list > div {width: 33.33%}
#Main .block-life-01 .grid-list .caps {width: 100%;font-size: 75%;line-height: 1.5;margin: 0;letter-spacing: 0;}

#Main .block-life-02 {position: relative;background: #ded9bb url("../img/common/bg_03.webp") no-repeat 50% / cover;background-blend-mode: overlay;}
#Main .block-life-02 h3 {margin-bottom: 1em;font-size: 200%;font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: var(--light-beige);}
#Main .block-life-02 h3 small {display: block;font-size: 50%;}
#Main .block-life-02 figure {position: relative;}
#Main .block-life-02 figure::before {content: "";position: absolute;top: 2em;left: 0;width: 13em;height: 9em;background: transparent url("../img/life/img_14.svg") no-repeat 0 0 / contain;}
#Main .block-life-02 h4 {margin-bottom: 1em;font-size: 125%;font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: var(--light-beige);}
#Main .block-life-02 .grid-list > div {width: 33.33%}
#Main .block-life-02 .grid-list .caps {width: 100%;font-size: 75%;line-height: 1.5;margin: 0;letter-spacing: 0;}

#Main .block-life-03 h3 {margin-bottom: 0.5em;font-size: 150%;line-height: 1.25;font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: var(--light-beige);}
#Main .block-life-03 h3 small {margin-left: 1em;font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 62.5%;letter-spacing: 0.2em;color: var(--light-beige);}
#Main .block-life-03 h3 strong {font-weight: normal;font-size: 150%;line-height: 0;}
#Main .block-life-03 h4 {margin-bottom: 0.75em;line-height: 1.5;font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 125%;}
#Main .block-life-03 h4 span {display: inline-block;white-space: nowrap;}
#Main .block-life-03 h4 + p {font-family: "classico-urw", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 100%;letter-spacing: 0.2em;}
#Main .block-life-03 h4 + p span {display: inline-block;white-space: nowrap;}
#Main .block-life-03 .grid-list > div {position: relative;}
#Main .block-life-03 .grid-list > div::before {content: attr(data-title)"";position: absolute;top: 0;left: 0;transform-origin: 0 100%;transform: rotate(90deg) translateX(-1em);background: var(--grad-02);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: "classico-urw", "serif";letter-spacing: 0.15em;line-height: 1;}
#Main .block-life-03 .grid-list > div::after {content: "";position: absolute;bottom: 0;left: 3px;width: 1px;background-color: var(--light-beige);}
#Main .block-life-03 .grid-list > div[data-title="Marinatown Beach Park."]:after {top: 14em;}
#Main .block-life-03 .grid-list > div[data-title="Atago Shrine"]:after {top: 7.75em;}
#Main .block-life-03 .grid-list > div figure {margin-bottom: 1em;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-introduction {position: relative;}
  #Main .block-introduction .container {position: absolute;top: 0;left: 50%;transform: translate(-50%, -50%);z-index: 2;}

  #Main .block-life-01 .column {display: flex;justify-content: space-between;flex-direction: row-reverse;}
  #Main .block-life-01 .column .img {position: relative;width: 50%;margin: -5em 5em -5em 0;}
  #Main .block-life-01 .column .img img {width: 100%;height: 100%;object-fit: cover;}
  #Main .block-life-01 .column .txt {width: calc(50% - 2em);padding: 4.5em 0;}
  #Main .block-life-01 .column .lead {max-width: 30em;text-align: left;}
  #Main .block-life-01 .grid-list {position: relative;margin: 0 auto 0;max-width: 52em;}
  #Main .block-life-01 .container {padding-top: 7.5em;}

  #Main .block-life-02 .column {display: flex;justify-content: space-between;flex-direction: row-reverse;}
  #Main .block-life-02 .column .img {position: relative;width: 50%;margin: -5em 5em -5em 0;}
  #Main .block-life-02 .column .img img {width: 100%;height: 100%;object-fit: cover;}
  #Main .block-life-02 .column .txt {width: calc(50% - 2em);padding: 4.5em 0;}
  #Main .block-life-02 .column .lead {max-width: 30em;text-align: left;}
  #Main .block-life-02 .grid-list {position: relative;margin: 0 auto 0;max-width: 52em;}

  #Main .block-life-03 .grid-list {justify-content: space-between;}
  #Main .block-life-03 .grid-list > div {width: calc(50% - 3em);padding-left: 2em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {font-size: 280%;}

  #Main .block-introduction ul {flex-wrap: nowrap;padding: 0.5em;background: linear-gradient(0deg, rgba(243, 246, 247,1) 0%, rgba(255, 255, 255,1) 100%);}
  #Main .block-introduction ul li {width: 33.33%;margin: 0.25em 0;box-sizing: border-box;}
  #Main .block-introduction ul li a {display: flex;flex-direction: column;justify-content: center;height: 3em;margin: 1px;border-radius: 5px;background-color: #fff;box-shadow: 0 0 0.5em rgb(0 0 0 / 5%);font-size: 112.5%;}
  #Main .block-introduction ul li a small {letter-spacing: 0;line-height: 1.5;}
  #Main .block-introduction .container {margin: 0;padding: 0;}

  #Main .block-life-01 h3 {margin-top: 1em;text-align: center;}
  #Main .block-life-01 h4 {margin-top: 1em;text-align: center;}
  #Main .block-life-01 figure::before {top: 1em;width: 8em;}
  #Main .block-life-01 .grid-list {margin-top: 2em;display: flex;flex-wrap: wrap;}

  #Main .block-life-02 h3 {margin-top: 1em;text-align: center;}
  #Main .block-life-02 h4 {margin-top: 1em;text-align: center;}
  #Main .block-life-02 figure::before,
  #Main .block-life-01 figure:last-child::before {top: 1em;width: 8em;}
  #Main .block-life-02 .grid-list {margin-top: 2em;display: flex;flex-wrap: wrap;}

  #Main .block-life-03 h3 small {display: block;margin-left: 0;}
  #Main .block-life-03 .grid-list > div {width: calc(100% - 2em);padding-left: 2em;}
  #Main .block-life-03 .grid-list > div + div {margin-top: 3em;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}