@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .fit-content .panel .ttl-style-01,
#Main .fit-content .panel .lead {opacity: 0;transform: translateY(30px);transition: opacity 1.8s 1s ease, transform 1.8s 1s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
#Main .fit-content .panel.staging .ttl-style-01,
#Main .fit-content .panel.staging .lead {opacity: 1;transform: translateY(0);}

#Main .block-design-01 .panel[data-panel="01"] figure {position: relative;}
#Main .block-design-01 .panel[data-panel="01"] figure::before {content: "";position: absolute;top: 50%;left: 50%;width: 20vw;aspect-ratio: 1 / 1;background: transparent url("../img/design/mv_01.svg") no-repeat 50% / contain;transform: translate(-50%, -50%);mix-blend-mode: multiply;z-index: 2;}

#Main .block-design-02 footer {padding: 4em 2em;}
#Main .block-design-02 .ttl-style-01 {font-size: 150%;white-space: nowrap;}
#Main .block-design-02 .ttl-style-01 span {margin-bottom: 0.75em;font-size: 66.67%;}
#Main .block-design-02 .lead {max-width: 34em;margin: 2em auto 0;font-size: 93.75%;}

#Main .block-design-03 footer {padding: 4em 2em;}
#Main .block-design-03 .ttl-style-01 {font-size: 150%;white-space: nowrap;}
#Main .block-design-03 .ttl-style-01 span {margin-bottom: 0.75em;font-size: 66.67%;}
#Main .block-design-03 .lead {max-width: 64em;margin: 2em auto 0;font-size: 93.75%;}

#Main .block-design-04 h3 {font-size: 150%;font-family: var(--serif);text-align: center;letter-spacing: 0.3em;color: #fff;white-space: nowrap;line-height: 1;}
#Main .block-design-04 h3 span {display: block;margin-bottom: -0.5em;font-family: "Copperplate Custom", serif;font-size: 433.335%;color: var(--color-04);opacity: 0.1;}
#Main .block-design-04 h3 em {font-style: normal;font-size: 175%;}
#Main .block-design-04 h3 strong {font-weight: normal;font-size: 200%;line-height: 1;background: var(--grad-04);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Main .block-design-04 h4 {position: relative;margin: 0 0 0.5em;padding: 0.7em 0 0.3em;border-bottom: 1px solid rgb(255 255 255 / 15%);letter-spacing: 0.3em;font-size: 112.5%;font-weight: normal;font-family: var(--serif);}
#Main .block-design-04 h4 span strong {font-size: 125%;font-weight: normal;line-height: 1;}
#Main .block-design-04 h4 span small {letter-spacing: 0;}
#Main .block-design-04 h4::after {content: "";position: absolute;top: 100%;left: 0;width: 1em;height: 1px;background: rgb(255 255 255 / 40%);}
#Main .block-design-04 h4 + p {font-size: 87.5%;line-height: 2;}
#Main .block-design-04 h4 + p a {border-bottom: 1px solid #ff5032;padding-bottom: 0.25em;text-decoration: none;font-size: 87.5%;color: #ff5032;}
#Main .block-design-04 h4 + p a::after {content: "";display: inline-block;margin-left: 1em;width: 0.6em;height: 1em;background: transparent url("../img/common/icon_arrow_right.svg") no-repeat 50% 50% / contain;filter: invert(39%) sepia(72%) saturate(1890%) hue-rotate(339deg) brightness(106%) contrast(115%);}
#Main .block-design-04 h4 + p small {display: block;}
#Main .block-design-04 h4 + p span {display: inline-block;white-space: nowrap;}
#Main .block-design-04 .grid-list-wrap {margin-top: 2.5em;}
#Main .block-design-04 .grid-list > div figure img {border-radius: 0.25em;}
#Main .block-design-04 .grid-list > div figure[data-caps]::after {bottom: inherit;right: inherit;top: 0;left: 0;}
#Main .block-design-04 .lead {max-width: 32em;margin: 2em auto 0;font-size: 93.75%;}
#Main .block-design-04 .container {padding-top: 2em;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .fit-content {position: relative;width: 100%;overflow: visible;}
  #Main .fit-content .panels {position: fixed;top: 0;left: 0;width: 100%;overflow: hidden;transform: translateY(0);will-change: transform;}
  #Main .fit-content .panel {position: relative;width: 100%;height: 100vh;padding-bottom: 100vh;will-change: transform;transition: transform 0s;}
  #Main .fit-content .panel figure img {max-height: calc(100vh - 12em);object-position: 50% 100%;object-fit: cover;}
  #Main .fit-content .panel footer {flex: 1;display: flex;align-items: center;justify-content: space-between;gap: 2em;padding: 0 2em;background: transparent url("../img/common/bg_05.webp") no-repeat 50% 0% / cover;}
  #Main .fit-content .panel .container {width: 100%!important;height: 100%;max-width: 100%!important;padding: 0!important;position: relative;display: flex;flex-direction: column;}
  #Main .fit-content .panel .ttl-style-01 {font-size: 150%;text-align: left;white-space: nowrap;}
  #Main .fit-content .panel .ttl-style-01 span {margin-bottom: 0.75em;font-size: 66.67%;}
  #Main .fit-content .panel .lead {max-width: 54em;font-size: 93.75%;text-align: left;}

  #Main .block-design-02 .column {display: flex;justify-content: space-between;}
  #Main .block-design-02 .column > div {display: flex;flex-direction: column;justify-content: end;}
  #Main .block-design-02 .column > div:nth-child(1) {width: 50%;}
  #Main .block-design-02 .column > div:nth-child(1) figure {margin-right: -30%;}
  #Main .block-design-02 .column > div:nth-child(2) {width: 50%;overflow: hidden;}
  #Main .block-design-02 .column > div:nth-child(2) figure {position: relative;transform: translateX(10%);}

  #Main .block-design-04 .grid-list {margin: -0.875em;}
  #Main .block-design-04 .grid-list > div {width: calc(33.3334% - 1.75em);margin: 0.875em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1340px) {
  #Main .fit-content .panel figure img {max-height: calc(100vh - 18em);}
  #Main .fit-content .panel footer {flex-direction: column;justify-content: center;}
  #Main .fit-content .panel .ttl-style-01 {text-align: center;}
  #Main .fit-content .panel .ttl-style-01 br {display: none;}
  #Main .fit-content .panel .lead {text-align: center;}
}
@media only screen and (min-width: 769px) and (max-width: 1260px) {
  #Main .block-design-04 h4 {letter-spacing: 0;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  html,body {overflow-x: hidden;}

  #Main .fit-content {position: relative;height: auto!important;}
  #Main .fit-content .panels,
  #Main .fit-content .panel {transform: translateY(0)!important;}
  #Main .fit-content .panel footer {padding: 4em 1.5em;}
  #Main .fit-content .panel .ttl-style-01 {margin-bottom: 2em;}
  #Main .fit-content .panel .ttl-style-01 span {margin-bottom: 0.75em;font-size: 66.67%;}
  #Main .fit-content .panel .lead {font-size: 93.75%;}

  #Main .block-design-02 .column > div:nth-child(2) figure {margin: -2em 0 -2em 18%;}

  #Main .block-design-04 h3 {font-size: 125%;letter-spacing: 0.15em;}
  #Main .block-design-04 h3 em {font-size: 125%;}
  #Main .block-design-04 h3 span {margin-bottom: 0.5em;font-size: 146.8%;}
  #Main .block-design-04 h4 {letter-spacing: 0.15em;}
  #Main .block-design-04 > figure {overflow: hidden;}
  #Main .block-design-04 > figure img {margin: 0 -12% 0 -8%;width: 120%;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}