@charset "UTF-8";
#Billboard {position: relative;}
#Billboard figure {overflow: hidden;}
#Billboard figure img {transform: scale(1) rotate(0deg);filter: contrast(.5) brightness(3.5) grayscale(0.7);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: filter transform;}
#Billboard .ttl-style-01 {opacity: 0;transition: opacity 1.8s 1s ease, letter-spacing 4s 1s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: letter-spacing;position: absolute;top: calc(50% + 1.5em);left: 50%;transform: translate(-50%, -50%);z-index: 2;letter-spacing: 0.2em;text-align: center;font-size: 150%;font-family: var(--serif);white-space: nowrap;color: #fff;}
#Billboard .ttl-style-01 span {display: block;margin-bottom: 0.5em;background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 68%) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 400%;font-weight: 400;font-family: var(--garamond);line-height: 1;}

#Billboard.staging figure img {filter: contrast(1) brightness(1) grayscale(0);transform: scale(1.05) rotate(1deg);transition: filter var(--easing) 2000ms, transform var(--easing) 10000ms;}
#Billboard.staging .ttl-style-01 {opacity: 1;letter-spacing: 0.15em;}
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .block-concept-01 {background: transparent url("../img/common/bg_01.webp") no-repeat 50% 0 / cover;}
#Main .block-concept-01 h3 {margin-bottom: 2.5em;font-family: var(--serif);font-size: 137.5%;font-weight: normal;text-align: center;letter-spacing: 0.2em; color: #67473d;}
#Main .block-concept-01 h3 span {display: block;margin-bottom: 1em;opacity: 0.5;font-family: var(--garamond);}
#Main .block-concept-01 .lead {max-width: 42em;margin: 0 auto;}
#Main .block-concept-01 .swiper {position: relative;margin: 4em 0 -10em;overflow: hidden;}
#Main .block-concept-01 .swiper::before {content: "竣工写真（2025年6月撮影）";background-color: #000;padding: 1em;position: absolute;bottom: 0;right: 0;z-index: 2;line-height: 1;font-size: 10px;color: #fff;}
#Main .block-concept-01 .swiper .swiper-wrapper {transition-timing-function: linear;}
#Main .block-concept-01 .swiper .swiper-slide {width: auto;display: flex;gap: 5px;padding-right: 5px;}
#Main .block-concept-01 .swiper .swiper-slide img {width: auto;height: 340px;}

#Main .block-concept-02 {background: transparent url("../img/concept/bg_02.webp") no-repeat 0 0 / cover;}
#Main .block-concept-02 h3 {position: relative;margin-bottom: 0.75em;font-family: var(--serif);font-size: 100%;font-weight: normal;letter-spacing: 0.1em; color: #fff;}
#Main .block-concept-02 h3 small {display: block;font-size: 100%;}
#Main .block-concept-02 h3 strong {margin-right: 1em;font-size: 175%;font-weight: normal;letter-spacing: 0.15em;}
#Main .block-concept-02 h3::before {content: "";position: absolute;top: -9em;left: 0;width: 4em;height: 1px;background-color: rgb(255 255 255 / 20%);}
#Main .block-concept-02 h3::after {content: "Designer";position: absolute;bottom: 100%;left: 0;font-family: var(--garamond);font-size: 750%;letter-spacing: 0.05em;line-height: 1;color: #fff;opacity: 0.1;}
#Main .block-concept-02 h4 {margin-bottom: 0.75em;font-family: var(--serif);font-size: 100%;font-weight: normal;letter-spacing: 0.1em; color: #fff;}
#Main .block-concept-02 .lead {color: #fff;line-height: 2;letter-spacing: 0.05em;text-align: left;}
#Main .block-concept-02 .column > div:nth-child(2) .lead {line-height: 1.9;font-size: 87.5%;}
#Main .block-concept-02 .column > div:nth-child(2) .lead span {display: block;}

#Main .block-concept-03 figure[data-caps]::after {background-color: #000;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-concept-02 .column {display: flex;align-items: flex-end;}
  #Main .block-concept-02 .column > div:nth-child(1) {padding-top: 7.5em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1180px) {
  #Main .block-concept-02 h3,
  #Main .block-concept-02 h3 strong {letter-spacing: 0.05em;}
  #Main .block-concept-02 .lead {letter-spacing: 0;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard figure img {object-fit: cover;height: 100vw;}
  #Billboard .ttl-style-01 {font-size: 125%;}
  #Billboard .ttl-style-01 span {font-size: 200%;}

  #Main .block-concept-01 h3 {font-size: 125%;}
  #Main .block-concept-01 .container {padding-top: 3em;}
  #Main .block-concept-01 .swiper .swiper-slide img {height: 12em;}

  #Main .block-concept-02 {background-position: 40% 0;}
  #Main .block-concept-02 h3::before {top: -5em;}
  #Main .block-concept-02 h3::after {font-size: 400%;}
  #Main .block-concept-02 h3,
  #Main .block-concept-02 h3 strong {letter-spacing: 0.05em;}
  #Main .block-concept-02 .lead {letter-spacing: 0;}
  #Main .block-concept-02 .column > div:nth-child(1) {padding-top: 15em;padding-bottom: 2.5em;}
  #Main .block-concept-02 .column > div:nth-child(3) img {width: 60%;margin-left: auto;margin-top: -5em;}

  #Main .block-concept-03 figure img {aspect-ratio: 1 / 1;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}