/* ========================================================================================= ^^
  Main visual
============================================================================================ ^^ */
#container .p-main-visual {
  width: 100%;
  /* padding-top: calc(49 * var(--min-ratio)); */
  background: url(../images/top/top_sp.jpg) no-repeat 50% 0%/ 100% auto;
  /* aspect-ratio: 768/950; */
  aspect-ratio: 768/432;
  position: relative;
}
#container .p-main-visual .video-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#container .p-main-visual .video-loader.loaded {
  opacity: 0;
  pointer-events: none;
}
#container .p-main-visual .spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: rgba(255, 255, 255, 0.3);
  border-top: 5px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#container .p-main-visual .btn_skip {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  cursor: pointer;
}
#container .p-main-visual .btn_replay {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 9;
  cursor: pointer;
}
#container .p-main-visual .btn_skip span,
#container .p-main-visual .btn_replay span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.6s ease;
  text-decoration: none;
  font-size: 16px;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  color: #000;
}
#container .p-main-visual video {
  width: 100%;
}
@media (min-width: 768px) {
  #container .p-main-visual {
    /* padding-top: calc(48 * var(--max-ratio)); */
    background: url(../images/top/top_pc.jpg) no-repeat 50% 100%/cover;
    aspect-ratio: 1300/670;
  }
}
@media (min-width: 1300px) {
  #container .p-main-visual {
    /* padding-top: calc(48 * var(--rem-ratio)); */
  }
}
#container .p-main-visual .c-image-note {
  position: absolute;
  right: 0;
  bottom: 0;
}
#container .p-main-visual h1 {
  padding-top: calc(6 * var(--min-ratio));
  margin-bottom: calc(2 * var(--min-ratio));
  font-family: var(--font-cinzel);
  font-size: clamp(1.688rem, 0.137rem + 6.62vw, 3.313rem);
  color: #685e59;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.18em;
}
@media (min-width: 768px) {
  #container .p-main-visual h1 {
    padding-top: 0;
    margin-bottom: 0;
    font-size: clamp(1.688rem, -1.019rem + 5.64vw, 3.563rem);
  }
}
#container .p-main-visual .c-text {
  font-family: var(--font-shippori);
  font-size: clamp(1.125rem, 0.708rem + 1.78vw, 1.563rem);
  color: #685e59;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.12em;
}
@media (min-width: 768px) {
  #container .p-main-visual .c-text {
    font-size: clamp(1.125rem, 0.403rem + 1.5vw, 1.625rem);
  }
}

/* ========================================================================================= ^^
  Band
============================================================================================ ^^ */
.c-band {
  padding: calc(30 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(30 * var(--min-ratio));
  background-color: #685e59;
}
@media (min-width: 768px) {
  .c-band {
    padding: calc(10 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(40 * var(--max-ratio));
  }
}
@media (min-width: 1320px) {
  .c-band {
    padding: calc(10 * var(--rem-ratio)) 0 calc(40 * var(--rem-ratio));
  }
}
.c-band__inner {
  max-width: 1300px;
  margin: 0 auto;
}
.c-band hr {
  margin: 0;
  border: none;
  border-top: 1px solid #8c8c8d;
}
.c-band__item {
  font-family: var(--font-shippori);
  color: #fff;
  text-align: center;
  letter-spacing: 0.013em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
@media (min-width: 768px) {
  .c-band__item {
    height: calc(100 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  .c-band__item {
    height: calc(100 * var(--rem-ratio));
  }
}
.c-band__item::after {
  width: 1px;
  height: 100%;
  background-color: #8c8c8d;
  content: " ";
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .c-band__item::after {
    height: calc(92 * var(--max-ratio));
    bottom: calc(-24 * var(--max-ratio));
    display: block;
  }
}
@media (min-width: 1300px) {
  .c-band__item::after {
    height: calc(92 * var(--rem-ratio));
    bottom: calc(-24 * var(--rem-ratio));
  }
}
.c-band__item--01 {
  padding-right: calc(10 * var(--min-ratio));
  display: grid;
  grid-template-columns: 1fr calc(64 * var(--min-ratio));
  grid-template-rows: auto auto;
  align-items: end;
}
@media (min-width: 768px) {
  .c-band__item--01 {
    padding-right: 0;
    grid-template-columns: auto auto;
    grid-template-rows: auto calc(44 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  .c-band__item--01 {
    grid-template-rows: auto calc(44 * var(--rem-ratio));
  }
}
.c-band__item--01 > span {
  line-height: 1;
  text-align: left;
}
.c-band__item--01 > span:nth-of-type(1) {
  font-size: clamp(0.75rem, 0.547rem + 0.86vw, 1.25rem);
  grid-column: 1/3;
  grid-row: 1/2;
}
.c-band__item--01 > span:nth-of-type(1) .large {
  font-size: calc(16 * var(--min-ratio));
}
@media (min-width: 768px) {
  .c-band__item--01 > span:nth-of-type(1) {
    font-size: clamp(0.875rem, 0.334rem + 1.13vw, 1.25rem);
  }
}
.c-band__item--01 > span:nth-of-type(2) {
  font-size: clamp(0.875rem, 0.419rem + 1.95vw, 2rem);
  grid-column: 1/2;
  grid-row: 2/3;
}
@media (min-width: 768px) {
  .c-band__item--01 > span:nth-of-type(2) {
    font-size: clamp(1rem, -0.444rem + 3.01vw, 2rem);
    grid-column: 1/2;
    grid-row: 2/3;
  }
}
.c-band__item--01 > span:nth-of-type(2) span {
  font-size: clamp(0.688rem, 0.51rem + 0.76vw, 1.125rem);
}
.c-band__item--01 > span:nth-of-type(3) {
  font-size: clamp(0.813rem, 0.686rem + 0.54vw, 1.125rem);
  text-align: right;
  grid-column: 2/3;
  grid-row: 1/3;
}
@media (min-width: 768px) {
  .c-band__item--01 > span:nth-of-type(3) {
    font-size: clamp(0.813rem, 0.361rem + 0.94vw, 1.125rem);
    margin-bottom: 1px;
    grid-column: 2/3;
    grid-row: 1/3;
  }
}
.c-band__item--01 > span:nth-of-type(3) span {
  font-family: var(--font-eb-garamond);
  font-size: clamp(2.5rem, 0.878rem + 6.92vw, 6.5rem);
  line-height: 0;
}
@media (min-width: 768px) {
  .c-band__item--01 > span:nth-of-type(3) span {
    font-size: clamp(3.938rem, 0.238rem + 7.71vw, 6.5rem);
  }
}
.c-band__item--01 > span:nth-of-type(3) span span {
  font-family: var(--font-shippori);
  font-size: clamp(1rem, 0.595rem + 1.73vw, 2rem);
}
@media (min-width: 768px) {
  .c-band__item--01 > span:nth-of-type(3) span span {
    font-size: clamp(1.125rem, -0.138rem + 2.63vw, 2rem);
  }
}
.c-band__item--02 {
  padding-left: calc(10 * var(--min-ratio));
  display: grid;
  grid-template-columns: 1fr calc(64 * var(--min-ratio));
  grid-template-rows: auto auto;
  align-items: end;
}
@media (min-width: 768px) {
  .c-band__item--02 {
    padding-left: 0;
    grid-template-columns: auto auto;
    grid-template-rows: auto calc(26 * var(--max-ratio));
    -moz-column-gap: calc(10 * var(--max-ratio));
    column-gap: calc(10 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  .c-band__item--02 {
    grid-template-rows: auto calc(26 * var(--rem-ratio));
    -moz-column-gap: calc(10 * var(--rem-ratio));
    column-gap: calc(10 * var(--rem-ratio));
  }
}
@media not all and (min-width: 768px) {
  .c-band__item--02::after {
    display: none;
  }
}
.c-band__item--02 > span {
  line-height: 1;
  text-align: left;
}
.c-band__item--02 > span:nth-of-type(1) {
  font-size: clamp(0.875rem, 0.723rem + 0.65vw, 1.25rem);
  grid-column: 1/2;
  grid-row: 1/2;
}
@media (min-width: 768px) {
  .c-band__item--02 > span:nth-of-type(1) {
    font-size: clamp(0.875rem, 0.334rem + 1.13vw, 1.25rem);
  }
}
.c-band__item--02 > span:nth-of-type(2) {
  font-size: clamp(0.875rem, 0.723rem + 0.65vw, 1.25rem);
  grid-column: 1/2;
  grid-row: 2/3;
}
@media (min-width: 768px) {
  .c-band__item--02 > span:nth-of-type(2) {
    font-size: clamp(0.875rem, 0.334rem + 1.13vw, 1.25rem);
    grid-column: 1/2;
    grid-row: 2/3;
  }
}
.c-band__item--02 > span:nth-of-type(2) span {
  font-size: clamp(0.688rem, 0.51rem + 0.76vw, 1.125rem);
}
.c-band__item--02 > span:nth-of-type(3) {
  text-align: right;
  font-size: clamp(0.813rem, 0.686rem + 0.54vw, 1.125rem);
  grid-column: 2/3;
  grid-row: 1/3;
}
@media (min-width: 768px) {
  .c-band__item--02 > span:nth-of-type(3) {
    font-size: clamp(0.813rem, 0.361rem + 0.94vw, 1.125rem);
    grid-column: 2/3;
    grid-row: 1/3;
  }
}
.c-band__item--02 > span:nth-of-type(3) span {
  font-family: var(--font-eb-garamond);
  font-size: clamp(2.5rem, 0.878rem + 6.92vw, 6.5rem);
  line-height: 0;
}
@media (min-width: 768px) {
  .c-band__item--02 > span:nth-of-type(3) span {
    font-size: clamp(3.938rem, 0.238rem + 7.71vw, 6.5rem);
  }
}
.c-band__item--02 > span:nth-of-type(3) span span {
  font-family: var(--font-shippori);
  font-size: clamp(1rem, 0.595rem + 1.73vw, 2rem);
}
@media (min-width: 768px) {
  .c-band__item--02 > span:nth-of-type(3) span span {
    font-size: clamp(1.125rem, -0.138rem + 2.63vw, 2rem);
  }
}
@media not all and (min-width: 768px) {
  .c-band__item--03 {
    padding-top: calc(20 * var(--min-ratio));
    border-top: 1px solid #8c8c8d;
    grid-column: 1/3;
    grid-row: 2/3;
  }
}
@media (min-width: 768px) {
  .c-band__item--03 {
    padding-top: calc(50 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  .c-band__item--03 {
    padding-top: calc(50 * var(--rem-ratio));
  }
}
.c-band__item--03 span:nth-of-type(1) {
  margin-bottom: calc(8 * var(--min-ratio));
  font-family: var(--font-eb-garamond);
  font-size: clamp(1.75rem, 1.649rem + 0.43vw, 2rem);
  line-height: 1;
  letter-spacing: 0.1em;
}
@media (min-width: 768px) {
  .c-band__item--03 span:nth-of-type(1) {
    margin-bottom: calc(8 * var(--max-ratio));
    font-size: clamp(1.25rem, 0.709rem + 1.13vw, 1.625rem);
  }
}
@media (min-width: 1300px) {
  .c-band__item--03 span:nth-of-type(1) {
    margin-bottom: calc(8 * var(--rem-ratio));
  }
}
.c-band__item--03 span:nth-of-type(1) .small {
  margin: 0 -0.5em;
  font-family: var(--font-noto-serif);
  font-size: clamp(0.75rem, 0.649rem + 0.43vw, 1rem);
}
@media (min-width: 768px) {
  .c-band__item--03 span:nth-of-type(1) .small {
    font-size: clamp(0.75rem, 0.389rem + 0.75vw, 1rem);
  }
}
.c-band__item--03 span:nth-of-type(2) {
  font-size: clamp(1.125rem, 1.074rem + 0.22vw, 1.25rem);
  line-height: 1;
}
@media (min-width: 768px) {
  .c-band__item--03 span:nth-of-type(2) {
    font-size: clamp(1rem, 0.82rem + 0.38vw, 1.125rem);
  }
}
.c-band__item--03 span:nth-of-type(2) span {
  font-family: var(--font-eb-garamond);
  font-size: clamp(1.063rem, 0.885rem + 0.76vw, 1.5rem);
  letter-spacing: -0.1em;
}
.c-band__item--03 span:nth-of-type(3) {
  font-size: clamp(0.875rem, 0.723rem + 0.65vw, 1.25rem);
  line-height: 2.3;
}
@media (min-width: 768px) {
  .c-band__item--03 span:nth-of-type(3) {
    font-size: clamp(0.75rem, 0.028rem + 1.5vw, 1.25rem);
  }
}
.c-band__item--04 {
  font-size: clamp(0.875rem, 0.596rem + 1.19vw, 1.563rem);
  line-height: 1;
  text-align: center;
}
@media not all and (min-width: 768px) {
  .c-band__item--04 {
    padding-right: calc(5 * var(--min-ratio));
    font-size: clamp(0.875rem, -0.117rem + 2.07vw, 1.563rem);
    display: none;
  }
}
.c-band__item--04 span:nth-of-type(2) span {
  margin-right: calc(7 * var(--min-ratio));
  font-family: var(--font-eb-garamond);
  font-size: clamp(2.625rem, 1.637rem + 4.22vw, 5.063rem);
  letter-spacing: -0.08em;
}
@media (min-width: 768px) {
  .c-band__item--04 span:nth-of-type(2) span {
    margin-right: calc(7 * var(--max-ratio));
    font-size: clamp(2.625rem, -0.894rem + 7.33vw, 5.063rem);
  }
}
@media (min-width: 1300px) {
  .c-band__item--04 span:nth-of-type(2) span {
    margin-right: calc(7 * var(--rem-ratio));
  }
}
.c-band__item--05 {
  font-size: clamp(1rem, 0.278rem + 1.5vw, 1.5rem);
  line-height: 1.2857142857;
}
@media not all and (min-width: 768px) {
  .c-band__item--05 {
    padding: 0 calc(5 * var(--min-ratio));
    font-size: clamp(1rem, 0.797rem + 0.86vw, 1.5rem);
  }
}
.c-band__item--06 {
  font-size: clamp(1rem, -0.444rem + 3.01vw, 2rem);
  line-height: 1.2857142857;
}
@media not all and (min-width: 768px) {
  .c-band__item--06 {
    padding-top: calc(20 * var(--min-ratio));
    border-top: 1px solid #8c8c8d;
    font-size: clamp(1.125rem, 0.77rem + 1.51vw, 2rem);
    grid-column: 1/4;
    grid-row: 2/3;
  }
}
@media not all and (min-width: 768px) {
  .c-band__item--06::after {
    display: none;
  }
}
.c-band__item--06 span {
  font-size: clamp(1rem, 0.696rem + 1.3vw, 1.75rem);
}
@media (min-width: 768px) {
  .c-band__item--06 span {
    font-size: clamp(1rem, -0.083rem + 2.26vw, 1.75rem);
  }
}
.c-band__item--06 span span {
  font-size: clamp(1.125rem, 0.77rem + 1.51vw, 2rem);
}
@media (min-width: 768px) {
  .c-band__item--06 span span {
    font-size: clamp(1.125rem, -0.138rem + 2.63vw, 2rem);
  }
}
@media not all and (min-width: 768px) {
  .c-band__item--07 {
    padding-left: calc(5 * var(--min-ratio));
    grid-column: 2/3;
    grid-row: 1/2;
  }
}
.c-band__item--07 span:nth-of-type(1) {
  font-size: clamp(0.875rem, 0.622rem + 1.08vw, 1.5rem);
  line-height: 1;
}
@media (min-width: 768px) {
  .c-band__item--07 span:nth-of-type(1) {
    font-size: clamp(0.875rem, -0.027rem + 1.88vw, 1.5rem);
  }
}
.c-band__item--07 span:nth-of-type(2) {
  font-family: var(--font-eb-garamond);
  font-size: clamp(0.875rem, 0.622rem + 1.08vw, 1.5rem);
}
@media (min-width: 768px) {
  .c-band__item--07 span:nth-of-type(2) {
    font-size: clamp(0.875rem, -0.027rem + 1.88vw, 1.5rem);
  }
}
.c-band__item--07 span:nth-of-type(2) span {
  margin-right: calc(2 * var(--min-ratio));
  margin-left: calc(2 * var(--min-ratio));
  font-size: clamp(2.75rem, 2.649rem + 0.43vw, 3rem);
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .c-band__item--07 span:nth-of-type(2) span {
    margin-right: calc(7 * var(--max-ratio));
    margin-left: 0;
    font-size: clamp(2.75rem, 2.649rem + 0.43vw, 3rem);
  }
}
@media (min-width: 1300px) {
  .c-band__item--07 span:nth-of-type(2) span {
    margin-right: calc(7 * var(--rem-ratio));
  }
}
.c-band__upper {
  padding-bottom: calc(20 * var(--min-ratio));
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: calc(48 * var(--min-ratio)) auto;
  row-gap: calc(20 * var(--min-ratio));
}
@media (min-width: 768px) {
  .c-band__upper {
    padding-bottom: calc(45 * var(--max-ratio));
    grid-template-columns: 38.9162561576% 30.7881773399% 30.2955665025%;
    grid-template-rows: auto;
    gap: unset;
  }
}
@media (min-width: 1300px) {
  .c-band__upper {
    padding-bottom: calc(45 * var(--rem-ratio));
  }
}
.c-band__upper .c-band__item:last-of-type::after {
  display: none;
}
.c-band__lower {
  padding-top: calc(20 * var(--min-ratio));
  display: grid;
  grid-template-columns: repeat(2, 50%);
  row-gap: calc(20 * var(--min-ratio));
}
@media (min-width: 768px) {
  .c-band__lower {
    padding-top: calc(20 * var(--max-ratio));
    grid-template-columns: 36.4532019704% 43.5139573071% 20.0328407225%;
  }
}
@media (min-width: 1300px) {
  .c-band__lower {
    padding-top: calc(20 * var(--rem-ratio));
  }
}
.c-band__lower .c-band__item::after {
  bottom: 0;
}
.c-band__lower .c-band__item:last-of-type::after {
  display: none;
}

/* ========================================================================================= ^^
  Introduction
============================================================================================ ^^ */
#container .p-introduction {
  width: 100vw;
  padding: calc(48 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(70 * var(--min-ratio));
  margin: 0 calc(50% - 50vw);
  background: linear-gradient(90deg, rgb(220, 219, 218) 0%, rgb(239, 238, 238) 17.95%, rgb(251, 251, 251) 36.75%, rgb(255, 255, 255) 54.12%, rgb(250, 250, 250) 68.55%, rgb(235, 235, 234) 86.58%, rgb(220, 219, 218) 100%);
  font-family: var(--font-shippori);
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-introduction {
    padding: calc(48 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(70 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction {
    padding: calc(48 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(70 * var(--rem-ratio));
  }
}
#container .p-introduction .c-title {
  margin-bottom: calc(58 * var(--min-ratio));
  font-size: clamp(1.125rem, 0.821rem + 1.3vw, 1.875rem);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.2em;
}
@media (min-width: 768px) {
  #container .p-introduction .c-title {
    margin-bottom: calc(58 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-title {
    margin-bottom: calc(58 * var(--rem-ratio));
  }
}
#container .p-introduction .c-text.catch {
  margin-bottom: calc(25 * var(--min-ratio));
  font-size: clamp(1.625rem, 1.118rem + 2.16vw, 2.875rem);
  color: #685e59;
  line-height: 1.4;
  letter-spacing: 0.22em;
}
@media (min-width: 768px) {
  #container .p-introduction .c-text.catch {
    margin-bottom: calc(25 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-text.catch {
    margin-bottom: calc(25 * var(--rem-ratio));
  }
}
#container .p-introduction .c-text:not(.catch) {
  margin-bottom: calc(44 * var(--min-ratio));
  font-size: clamp(0.75rem, 0.598rem + 0.65vw, 1.125rem);
  line-height: 1.56;
  letter-spacing: 0.18em;
}
@media (min-width: 768px) {
  #container .p-introduction .c-text:not(.catch) {
    margin-bottom: calc(44 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-text:not(.catch) {
    margin-bottom: calc(44 * var(--rem-ratio));
  }
}
#container .p-introduction .c-button {
  width: 100%;
  height: calc(100 * var(--min-ratio));
  margin: 0 auto;
  filter: drop-shadow(0 5px 5px rgba(133, 124, 118, 0.48));
}
@media (min-width: 768px) {
  #container .p-introduction .c-button {
    width: calc(474 * var(--max-ratio));
    height: calc(142 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-button {
    width: calc(474 * var(--rem-ratio));
    height: calc(142 * var(--rem-ratio));
  }
}
#container .p-introduction .c-button__link .en {
  margin-bottom: calc(15 * var(--min-ratio));
  font-family: var(--font-eb-garamond);
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.22em;
}
@media (min-width: 768px) {
  #container .p-introduction .c-button__link .en {
    margin-bottom: calc(25 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-button__link .en {
    margin-bottom: calc(25 * var(--rem-ratio));
  }
}
#container .p-introduction .c-button__link .jpn {
  margin-bottom: calc(10 * var(--min-ratio));
  font-family: var(--font-shippori);
  font-size: clamp(1.063rem, 0.885rem + 0.76vw, 1.5rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.22em;
}
@media (min-width: 768px) {
  #container .p-introduction .c-button__link .jpn {
    margin-bottom: calc(15 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-button__link .jpn {
    margin-bottom: calc(15 * var(--rem-ratio));
  }
}
#container .p-introduction .c-button__border {
  padding-top: calc(10 * var(--min-ratio));
  justify-content: flex-start;
}
@media (min-width: 768px) {
  #container .p-introduction .c-button__border {
    padding-top: calc(10 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-button__border {
    padding-top: calc(10 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Concept
============================================================================================ ^^ */
#container .p-concept {
  width: 100vw;
  padding: calc(20 * var(--min-ratio));
  margin: 0 calc(50% - 50vw);
  background: url(../images/top/bg-concept.jpg) no-repeat 50% 50%/auto 100%;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  #container .p-concept {
    padding: 0;
    background-size: auto 100%;
  }
}
@media (min-width: 1300px) {
  #container .p-concept {
    background-size: 100% auto;
  }
}
#container .p-concept .l-top-section__inner {
  position: relative;
  z-index: 10;
}
#container .p-concept video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  object-fit: cover;
}
#container .p-concept .c-image-note {
  position: absolute;
  right: 0;
  bottom: 0;
}
#container .p-concept .c-contents {
  max-width: 590px;
  width: 100%;
  height: 100%;
  padding: calc(50 * var(--min-ratio)) calc(30 * var(--min-ratio)) calc(45 * var(--min-ratio));
  margin: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 768px) {
  #container .p-concept .c-contents {
    padding: calc(76 * var(--max-ratio)) calc(70 * var(--max-ratio)) calc(94 * var(--max-ratio)) calc(100 * var(--max-ratio));
    margin-left: calc(20 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-concept .c-contents {
    padding: calc(76 * var(--rem-ratio)) calc(70 * var(--rem-ratio)) calc(94 * var(--rem-ratio)) calc(100 * var(--rem-ratio));
    margin-left: calc(20 * var(--rem-ratio));
  }
}
#container .p-concept .c-title {
  margin-bottom: calc(24 * var(--min-ratio));
  font-family: var(--font-cinzel);
  font-size: clamp(2.625rem, 2.169rem + 1.95vw, 3.75rem);
  color: #685e59;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.16em;
  display: flex;
  flex-direction: column;
  row-gap: calc(37 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-concept .c-title {
    width: calc(290 * var(--max-ratio));
    margin-bottom: calc(24 * var(--max-ratio));
    font-size: clamp(2.625rem, 1.001rem + 3.38vw, 3.75rem);
    row-gap: calc(37 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-concept .c-title {
    width: calc(290 * var(--rem-ratio));
    margin-bottom: calc(24 * var(--rem-ratio));
    row-gap: calc(37 * var(--rem-ratio));
  }
}
#container .p-concept .c-title span {
  font-family: var(--font-eb-garamond);
  font-size: clamp(0.875rem, 0.824rem + 0.22vw, 1rem);
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-concept .c-title span {
    font-size: clamp(0.875rem, 0.695rem + 0.38vw, 1rem);
  }
}
#container .p-concept .c-sub-title {
  margin-bottom: calc(38 * var(--min-ratio));
  font-family: var(--font-shippori);
  font-size: clamp(1.25rem, 1.022rem + 0.97vw, 1.813rem);
  color: #685e59;
  line-height: 1.48;
  font-weight: 500;
  letter-spacing: 0.14em;
}
@media (min-width: 768px) {
  #container .p-concept .c-sub-title {
    margin-bottom: calc(38 * var(--max-ratio));
    font-size: clamp(1.25rem, 0.438rem + 1.69vw, 1.813rem);
  }
}
@media (min-width: 1300px) {
  #container .p-concept .c-sub-title {
    margin-bottom: calc(38 * var(--rem-ratio));
  }
}
#container .p-concept .c-text {
  font-size: clamp(0.75rem, 0.623rem + 0.54vw, 1.063rem);
  color: #685e59;
  line-height: 2.29;
  font-weight: 600;
  letter-spacing: 0.16em;
}
@media (min-width: 768px) {
  #container .p-concept .c-text {
    font-size: clamp(0.75rem, 0.299rem + 0.94vw, 1.063rem);
  }
}

/* ========================================================================================= ^^
  Top contents
============================================================================================ ^^ */
#container .p-top-contents {
  width: 100vw;
  padding: calc(44 * var(--min-ratio)) 0;
  margin: 0 calc(50% - 50vw);
  background-color: #fff;
  filter: drop-shadow(0 3px 15px rgba(133, 124, 118, 0.48));
}
@media (min-width: 768px) {
  #container .p-top-contents {
    padding: calc(44 * var(--max-ratio)) 0;
  }
}
@media (min-width: 1300px) {
  #container .p-top-contents {
    padding: calc(44 * var(--rem-ratio)) 0;
  }
}
#container .p-top-contents .l-top-section__inner {
  display: grid;
}
@media (min-width: 768px) {
  #container .p-top-contents .l-top-section__inner {
    grid-template-columns: 57.6923076923% 36.1538461538%;
    -moz-column-gap: 6.9230769231%;
    column-gap: 6.9230769231%;
  }
}
@media (min-width: 1300px) {
  #container .p-top-contents .l-top-section__inner {
    grid-template-columns: 57.6923076923% 32.3076923077%;
    -moz-column-gap: 10%;
    column-gap: 10%;
  }
}
#container .p-top-contents .c-title {
  margin-bottom: calc(50 * var(--min-ratio));
  font-family: var(--font-cinzel);
  font-size: clamp(2rem, 1.899rem + 0.43vw, 2.25rem);
  color: #685e59;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
}
@media (min-width: 768px) {
  #container .p-top-contents .c-title {
    margin-bottom: calc(50 * var(--max-ratio));
    font-size: clamp(2rem, 1.639rem + 0.75vw, 2.25rem);
  }
}
@media (min-width: 1300px) {
  #container .p-top-contents .c-title {
    margin-bottom: calc(50 * var(--rem-ratio));
  }
}
#container .p-top-contents .c-contents {
  padding: 0 calc(20 * var(--min-ratio)) calc(20 * var(--min-ratio));
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  #container .p-top-contents .c-contents {
    padding: calc(40 * var(--max-ratio)) 0 0;
    grid-column: 2/3;
    grid-row: 1/2;
  }
}
@media (min-width: 1300px) {
  #container .p-top-contents .c-contents {
    padding-top: calc(40 * var(--rem-ratio));
  }
}
@media (min-width: 768px) {
  #container .p-top-contents .c-image {
    grid-column: 1/2;
    grid-row: 1/2;
  }
}
#container .p-top-contents .c-text {
  font-family: var(--font-shippori);
  font-size: clamp(1.063rem, 0.885rem + 0.76vw, 1.5rem);
  color: #685e59;
  font-weight: 400;
  line-height: 1.8;
}
#container .p-top-contents .c-text .small {
  font-size: clamp(0.813rem, 0.736rem + 0.32vw, 1rem);
}
@media (min-width: 768px) {
  #container .p-top-contents .c-text {
    font-size: clamp(1.063rem, 0.431rem + 1.32vw, 1.5rem);
  }
  #container .p-top-contents .c-text .small {
    font-size: clamp(0.813rem, 0.542rem + 0.56vw, 1rem);
  }
}
#container .p-top-contents .c-more {
  margin-top: calc(50 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-top-contents .c-more {
    margin-top: auto;
  }
}
@media (min-width: 768px) {
  #container .p-top-contents.rev .l-top-section__inner {
    padding-left: calc(40 * var(--max-ratio));
    grid-template-columns: 43.1538461538% 57.6923076923%;
    column-gap: 3%;
  }
}
@media (min-width: 1399px) {
  #container .p-top-contents.rev .l-top-section__inner {
    padding-left: calc(40 * var(--rem-ratio));
    grid-template-columns: 37.3076923077% 57.6923076923%;
  }
}
@media (min-width: 768px) {
  #container .p-top-contents.rev .c-contents {
    grid-column: 1/2;
  }
}
@media (min-width: 768px) {
  #container .p-top-contents.rev .c-image {
    grid-column: 2/3;
  }
}
#container .c-grid {
  padding-top: calc(148 * var(--min-ratio));
  padding-bottom: calc(40 * var(--min-ratio));
  row-gap: calc(105 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .c-grid {
    padding-top: calc(148 * var(--max-ratio));
    padding-bottom: calc(40 * var(--max-ratio));
    row-gap: calc(105 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .c-grid {
    padding-top: calc(148 * var(--rem-ratio));
    padding-bottom: calc(40 * var(--rem-ratio));
    row-gap: calc(105 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Top slider
============================================================================================ ^^ */
.p-top-slider {
  padding: 0 calc(10 * var(--min-ratio)) ;
  margin: calc(40 * var(--min-ratio)) 0 calc(93 * var(--min-ratio));
  overflow: visible;
}
@media (min-width: 768px) {
  .p-top-slider {
    margin-top: calc(40 * var(--max-ratio));
    margin-bottom: calc(93 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  .p-top-slider {
    margin-top: calc(40 * var(--rem-ratio));
    margin-bottom: calc(93 * var(--rem-ratio));
  }
}
.p-top-slider .swiper-wrapper {
  display: flex;
}
.p-top-slider .swiper-slide {
  height: auto;
}

/* ========================================================================================= ^^
  Top note
============================================================================================ ^^ */
#container .p-top-note {
  width: 100vw;
  padding: calc(53 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(50 * var(--min-ratio));
  margin: 0 calc(50% - 50vw);
  background-color: #fff;
}
@media (min-width: 768px) {
  #container .p-top-note {
    padding: calc(106 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(100 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-top-note {
    padding: calc(106 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(100 * var(--rem-ratio));
  }
}
#container .p-top-note .c-inner {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
#container .p-top-note .c-text {
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  color: #333;
  line-height: 2;
  letter-spacing: 0.06em;
}

/* ========================================================================================= ^^
  TOP
============================================================================================ ^^ */