@charset "UTF-8";
/* CSS Document */
#billboard {overflow: hidden;position: relative;}
#billboard::after {display: block;content: '';width: 100%;height: 100%;background: lightslategrey url("../img/index/bg_02.webp") no-repeat center/cover;mix-blend-mode: multiply;position: absolute;top: 0;left: 0;z-index: 1;pointer-events: none;}
#billboard h2 {position: absolute;bottom: 1.75em;left: 0.5em;z-index: 2;font-size: 500%;line-height: 1.25;letter-spacing: 0.05em;font-weight: 800;text-shadow: 0 0 0.25em #000;color: #fff;}
#billboard h2 strong {transform: translateY(7px);display: inline-block;font-size: 125%;font-weight: 500;line-height: 1;}
#billboard h2 + p {position: absolute;bottom: 1em;left: 1.25em;z-index: 2;font-size: 245%;letter-spacing: 0.15em;font-weight: 800;text-shadow: 0 0 0.5em #000;color: #fff;}
#billboard h2 + p span {display: block;font-size: 66%;letter-spacing: 0.25em;}
#billboard h2 + p span::after {content: "";margin-left: 0.25em;display: inline-block;width: 4em;height: 1px;background-color: #fff;vertical-align: middle;}
#billboard .section-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}

.block-index-01 {background: #006463 url(../img/common/bg03_pc.webp) no-repeat center / cover;background-blend-mode: luminosity;}
.block-index-01 h2 {margin-bottom: 1em;text-align: center;font-size: 200%;font-weight: 800;letter-spacing: 0.15em;color: #fffa7e;}
.block-index-01 h2 + p {text-align: center;line-height: 2;font-size: 137.5%;letter-spacing: 0.15em;color: #fff;}
.block-index-01 h2 + p strong {line-height: 1;font-weight: 500;font-size: 150%;color: #fffa7e;}
.block-index-01 .ruby {margin-top: 1em;text-align: center;line-height: 2;letter-spacing: 0.15em;color: rgb(255 255 255 / 50%);}
.block-index-01 .ruby strong {display: block;margin-bottom: 0.5em;font-size: 125%;color: rgb(255 255 255 / 70%);}
.block-index-01 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 5em 0 10em;}

.block-index-02 {background: tan url("../img/index/bg_01.webp") no-repeat center / cover;background-blend-mode: screen;padding-top: 1px;}
.block-index-02 h3 {margin-bottom: 1em;font-size: 200%;letter-spacing: 0.15em;color: #006463;}
.block-index-02 h3 ~ p {line-height: 2;letter-spacing: 0.15em;}
.block-index-02 h3 ~ p + p {margin-top: 1em;}
.block-index-02 h3 ~ p span {display: inline-block;font-weight: 600;white-space: nowrap;}
.block-index-02 .container {width: calc(100% - 4em);max-width: 1200px;margin: -11em auto 0;padding: 5em 0 0;}

.block-index-03 h3 {margin-bottom: 0.33em;font-weight: 600;font-size: 300%;letter-spacing: 0.15em;}
.block-index-03 h3 small {display: block;color: #006463;font-weight: 500;font-size: 66.66%;}
.block-index-03 h3 ~ p {max-width: 22em;line-height: 2;letter-spacing: 0.15em;}
.block-index-03 h3 ~ p + p {margin-top: 1em;}
.block-index-03 h3 ~ p span {display: inline-block;font-weight: 600;white-space: nowrap;}
.block-index-03 h3 ~ p strong {color: #006463;font-weight: 600;font-size: 112.5%;}
.block-index-03 .more a {position: relative;background: #006463 url(../img/common/bg03_pc.webp) no-repeat 0 0 / cover;background-blend-mode: soft-light;margin-top: 2em;padding: 1em;text-align: center;font-weight: 600;color: #fff;}
.block-index-03 .more a::after {content: '';position: absolute;bottom: calc(50% - 2px);right: 1em;width: 2em;height: 0.8em;background: url("../img/common/icon_arrow.svg") no-repeat 100% 100%/contain;filter: brightness(0) invert(1);transition: 0.4s;}
.block-index-03 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 5em 0;}
.block-index-03 .column > div::after{background: #006463 url(../img/common/bg03_pc.webp) no-repeat 0 0 / cover;background-blend-mode: soft-light;}
.block-index-03 .column > div:nth-child(1)::before {background: transparent url("../img/index/img_03.webp") no-repeat 50% / cover;}
.block-index-03 .column > div:nth-child(2)::before {background: transparent url("../img/index/img_04.webp") no-repeat 50% / cover;}
.block-index-03 .column > div:nth-child(3)::before {background: transparent url("../img/index/img_05.webp") no-repeat 50% 100% / 100% auto;}

@media only screen and (min-width: 768px) {
  #billboard {min-height: 700px;height: 56.25vw;}

  .block-index-02 .column {margin-top: -10em;}
  .block-index-02 .column > div {position: relative;width: 22em;padding: 15em 0 5em;}
  .block-index-02 .column > div::before {content: "";position: absolute;top: 0;bottom: 0;left: calc(100% - 6em);width: calc(50vw + 600px - 16em);background: transparent url("../img/index/img_02.webp") no-repeat 0 0 / cover;z-index: 2;}

  .block-index-03 .column > div {position: relative;padding: 5em 0;}
  .block-index-03 .column > div::before {content: "";position: absolute;top: 3.5em;bottom: 5em;width: 50vw;z-index: 2;}
  .block-index-03 .column > div::after {content: "";position: absolute;top: 5.5em;bottom: 3em;width: calc(50vw + 2em);z-index: 1;}
  .block-index-03 .column > div:nth-child(odd) {margin-left: 50%;padding-left: 5em;}
  .block-index-03 .column > div:nth-child(odd)::before {left: -50vw;}
  .block-index-03 .column > div:nth-child(odd)::after {left: -50vw;}
  .block-index-03 .column > div:nth-child(even) {margin-right: 50%;padding-right: 5em;}
  .block-index-03 .column > div:nth-child(even)::before {right: -50vw;}
  .block-index-03 .column > div:nth-child(even)::after {right: -50vw;}
}
@media only screen and (min-width: 768px) and (max-width: 1264px) {
}
@media only screen and (min-width: 768px) and (max-width: 1040px) {
  #billboard h2 {bottom: 1.75em;font-size: 400%;line-height: 1.2;}
  #billboard h2 + p {font-size: 193%;}
}
@media only screen and (max-width: 767px) {
  #billboard {padding-top: 100dvh;}
  #billboard h2 {bottom: 3em;font-size: 350%;}
  #billboard h2 + p {font-size: 160%;}

  .block-index-01 h2 {font-size: 150%;}
  .block-index-01 h2 + p {font-size: 125%;letter-spacing: 0;}

  .block-index-02 figure {margin: 0 -2em 3em;}
  .block-index-02 .column > div::after {content: "";display: block;width: calc(100% + 4em);height: 100vw;margin-left: -2em;background: transparent url("../img/index/img_02.webp") no-repeat 30% 0 / 120% auto;}

  .block-index-03 h3 {font-size: 150%;}
  .block-index-03 h3 small {font-size: 133.33%;}
  .block-index-03 .column > div + div {margin-top: 3em;}
  .block-index-03 .column > div::before {content: "";display: block;padding-top: 50%;margin-bottom: 2em;border-radius: 5px;}
  .block-index-03 .column > div:nth-child(even) {position: relative;z-index: 2;padding: 3em 0;}
  .block-index-03 .column > div:nth-child(even)::after {content: "";position: absolute;top: 0;left: -2em;right: -2em;bottom: 0;background-color: #eee;z-index: -1;}
}
@media only screen and (max-width: 767px) and (orientation: landscape) {}