@charset "UTF-8";
#Billboard {position: relative;}
#Billboard .swiper-button-next,
#Billboard .swiper-button-prev {margin: 0;width: 3em;height: 3em;background-size: 30% auto;background-position: 50%;}
#Billboard .swiper-button-prev,
#Billboard .swiper-container-rtl .swiper-button-next {left:0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
#Billboard .swiper-button-next,
#Billboard .swiper-container-rtl .swiper-button-prev {right:0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}

#Billboard .swiper-slide {overflow: hidden;}
#Billboard .swiper-slide 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 .swiper-slide-active img,
#Billboard .swiper-slide-duplicate-active img,
#Billboard .swiper-slide-prev img {filter: contrast(1) brightness(1) grayscale(0);transform: scale(1.05) rotate(1deg);transition: filter var(--easing) 2000ms, transform var(--easing) 10000ms;}

#Billboard .theme {position: absolute;top: 50%;left: 0;right: 0;transform: translateY(-50%);z-index: 2;mix-blend-mode: screen;}
#Billboard .theme h2 {max-width: 1260px;margin: 0 auto;overflow: hidden;}
#Billboard .theme h2 img {width: 79.5%;margin: 0 auto;transition: transform cubic-bezier(0.83, 0, 0.17, 1) 2000ms 500ms;transform: translateY(100%);will-change: transform;filter: invert(100%) sepia(3%) saturate(5092%) hue-rotate(141deg) brightness(78%) contrast(36%);}
#Billboard .theme h3 {max-width: 1260px;margin: 0.5em auto 0;overflow: hidden;}
#Billboard .theme h3 img {width: 79.5%;margin: 0 auto;transition: transform cubic-bezier(0.83, 0, 0.17, 1) 2000ms 500ms;transform-origin: 0 0;transform: translateY(-100%) scale(.6);will-change: transform;filter: invert(100%) sepia(3%) saturate(5092%) hue-rotate(141deg) brightness(78%) contrast(36%);}

#Contents.staging #Billboard .theme h2 img {transform: translateY(0%);}
#Contents.staging #Billboard .theme h3 img {transform: translateY(0%) scale(.6);}

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .merit {background: transparent url("../img/common/bg_05.webp") no-repeat 50% 0% / cover;text-align: center;}
#Main .merit .lead::before {content: "";display: block;width: 100%;height: 1px;margin: 0 auto 0.5em;background: linear-gradient(0deg, rgba(146,155,161,0) 0%, rgba(146,155,161,1) 30%, rgba(146,155,161,0) 100%);}
#Main .merit .lead {padding-bottom: 1em;line-height: 1;font-size: 125%;white-space: nowrap;}
#Main .merit .lead em {font-size: 150%;font-style: normal;}
#Main .merit .lead small {font-size: 100%;letter-spacing: 0.08em;}
#Main .merit .lead strong {font-size: 200%;font-weight: normal;}
#Main .merit .lead strong.price {background: var(--grad-04);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 250%;}

#Main .block-index-01 {position: relative;z-index: 2;}
#Main .block-index-01 h2 img {opacity: 0.1;filter: invert(100%) sepia(3%) saturate(5092%) hue-rotate(141deg) brightness(78%) contrast(36%);}
#Main .block-index-01 h3 img {width: auto;height: 1.5em;margin: -1.5em auto 1.5em;filter: invert(100%) sepia(3%) saturate(5092%) hue-rotate(141deg) brightness(90%) contrast(90%);}
#Main .block-index-01 .lead {max-width: 54em;margin: 0 auto;}
#Main .block-index-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}

#Main .block-index-03 {position: relative;background: var(--grad-05);}
#Main .block-index-03 h3 {position: relative;overflow: hidden;text-align: center;font-size: 100%;font-family: var(--serif);color: var(--color-01);}
#Main .block-index-03 h3 span {position: relative;z-index: 2;display: inline-block;}
#Main .block-index-03 h3 span::before {content: "";position: absolute;top: 50%;right: calc(100% + 1em);width: 50vw;height: 1px;background-color: var(--color-01);}
#Main .block-index-03 h3 span::after {content: "";position: absolute;top: 50%;left: calc(100% + 1em);width: 50vw;height: 1px;background-color: var(--color-01);}
#Main .block-index-03 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-index-03 .grid-list > div {position: relative;background: #000;}
#Main .block-index-03 .grid-list > div figure:before {content: '';width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;background-color: rgb(88, 97, 113);mix-blend-mode: multiply;}
#Main .block-index-03 .grid-list > div figure:after {display: block;content: '';width: calc(100% - 0.5em);height: calc(100% - 0.5em);border: 1px solid rgba(255,255,255,0.2);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;}
#Main .block-index-03 .grid-list > div h4 {font-size: 150%; font-family: var(--serif);color: #fff;text-shadow: 0 0 6px #000;position: absolute;top: calc(50% - 1em);left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;z-index: 2;}
#Main .block-index-03 .grid-list > div h4::before {content: "";display: block;margin: 0 auto;width: 4.5em;height: 1.5em;background: transparent url("../img/common/exclusive.svg") no-repeat 50%;background-size: contain;}
#Main .block-index-03 .grid-list > div small {display: block;padding-top: 0.2em;border: 1px solid rgba(255, 255, 255, 0.3);width: 10em;border-radius: 1.5em;font-family: var(--serif);font-size: 93.75%;letter-spacing: 0.1em;color: #fff;line-height: 2;text-align: center;position: absolute;left: 0;right: 0;bottom: 4em;z-index: 2;margin: auto;}
#Main .block-index-03 .grid-list > div:not(.disabled) small:after {content: '〉';font-size: 75%;line-height: 1;height: 1em; position: absolute;top: 50%;right: 1em;transform: translateY(-50%);}
#Main .block-index-03 .grid-list > div.disabled a {cursor: default;pointer-events: none;}
#Main .block-index-03 .column-list {margin-top: 1.5em;}
#Main .block-index-03 .request a {position: relative;background: linear-gradient(0deg, #766754 0%, #95856c 100%);max-width: 20em;margin: 2em auto 0;box-shadow: 0 0 1em rgb(0 0 0 / 10%);text-align: center;font-size: 137.5%;font-family: var(--serif);letter-spacing: 0.2em;line-height: 3;color: #fff;}
#Main .block-index-03 .request a::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: transparent url("../img/common/bg_02.webp") no-repeat 50% 0 / cover;mix-blend-mode: color-burn;}
#Main .block-index-03 .request a::after {content: "〉";line-height: 1;position: absolute;top: 50%;right: 0.5em;margin-top: -0.5em;transform: scaleY(0.5);}
#Main .block-index-03 .lead {margin: 0 auto;max-width: 44em;}

#Main .block-index-04 {position: relative;}
#Main .block-index-04 h2 {border-bottom: none;text-align: center;}
#Main .block-index-04 h2 span {display: block;}
#Main .block-index-04 h2::before {display: none;}
#Main .block-index-04 h3 {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-index-04 h3 span strong {font-size: 125%;font-weight: normal;line-height: 1;}
#Main .block-index-04 h3 span small {letter-spacing: 0;}
#Main .block-index-04 h3::after {content: "";position: absolute;top: 100%;left: 0;width: 1em;height: 1px;background: rgb(255 255 255 / 40%);}
#Main .block-index-04 h3 + p {font-size: 87.5%;line-height: 2;}
#Main .block-index-04 h3 + p a {border-bottom: 1px solid #ff5032;padding-bottom: 0.25em;text-decoration: none;font-size: 87.5%;color: #ff5032;}
#Main .block-index-04 h3 + 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-index-04 h3 + p small {display: block;}
#Main .block-index-04 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-index-04 figure img {border-radius: 0.25em;}
#Main .block-index-04 figure[data-caps]::after {bottom: inherit;right: inherit;top: 0;left: 0;}
#Main .block-index-04 .container {position: relative;z-index: 2;padding-top: 3em;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-index-01 .container {margin-top: -2em;position: relative;z-index: 2;background: linear-gradient(rgba(7, 16, 34, 1) 10%, rgba(7, 16, 34, 0) 70%);border-radius: 2px 2px 0 0;padding: 2em 2em 0;}

  #Main .block-index-02 .left {width: calc(50% - 1em);}
  #Main .block-index-02 .right {width: calc(50% - 1em);}

  #Main .block-index-03 .grid-list {margin: 0.5em -1em 0;}
  #Main .block-index-03 .grid-list > div {width: calc(33.33% - 2em);margin: 1em;}
  #Main .block-index-03 .column-list > div {width: calc(50% - 1em);}

  #Main .block-index-04 .grid-list {justify-content: space-between;margin-top: -2em;}
  #Main .block-index-04 .grid-list > div {width: calc(33.33% - 1em);max-width: 382px;margin-top: 2em;}
}
@media only screen and (min-width: 769px) and (max-width: 1120px) {
  #Main .block-index-04 h3 {letter-spacing: 0.15em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1040px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard .theme h2 img {width: 65%;}
  #Billboard .theme h3 img {transform-origin: 50% 0;transform: translateY(-100%) scale(.85);}
  #Contents.staging #Billboard .theme h3 img {transform: translateY(10%) scale(0.85);}

  #Main .merit .lead {position: relative;display: inline-block;margin-bottom: 1em;font-size: 125%;letter-spacing: 0;}
  #Main .merit .lead::before {margin-bottom: 1em;}
  #Main .merit .lead strong {font-size: 175%;letter-spacing: 0.06em;}
  #Main .merit .lead strong.price {font-size: 250%;}
  #Main .merit .lead em {font-size: 150%;}
  #Main .merit .lead small {font-size: 62.5%;letter-spacing: 0.08em;position: absolute;bottom: 0.5em;left: 0;}

  #Main .block-index-01 .container {position: relative;background: linear-gradient(rgba(7, 16, 34, 1) 10%, rgba(7, 16, 34, 0) 70%);padding: 3em 2em;}
  #Main .block-index-01 h2 img {opacity: 0.3;width: calc(100% - 2em); margin: 0 auto 0.25em;}
  #Main .block-index-01 h3 img {width: 100%;height: auto;margin-top: 0.5em;}
  #Main .block-index-01 h4 {font-size: 112.5%;}
  #Main .block-index-01 .lead {margin-bottom: -1em;}
  #Main .block-index-01 .grid-list > div {margin-top: 3em;}

  #Main .block-index-02 .left,
  #Main .block-index-02 .right {padding: 1em 0;}
  #Main .block-index-02 .container {padding-bottom: 3em;}

  #Main .block-index-03 .grid-list {margin-top: 1.5em;}
  #Main .block-index-03 .grid-list > div + div {margin-top: 1.5em;}
  #Main .block-index-03 .column-list > div + div {margin-top: 1.5em;}
  #Main .block-index-03 .login a,
  #Main .block-index-03 .request a {margin-top: 0;font-size: 125%;letter-spacing: 0;}
  #Main .block-index-03 .container {padding-top: 3em;}
  #Main .block-index-03 .banner-style-03 {margin-top: 1em;padding: 0;}
  #Main .block-index-03 .banner-style-03 span img {max-width: 100%;width: 80%;}
  #Main .block-index-03 .banner-style-03::before {display: none;}

  #Main .block-index-04 .grid-list > div {margin: 1em;}
  #Main .block-index-04 .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) {}