@charset "UTF-8";
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-brand-red: #f80203;
  --color-gold-dark: #603b11;
  --color-gold-mid: #886f3c;
  --color-gold-light: #d5b981;
  --color-gold-light-alt: #d5b87b;
  --color-gold-pale: #f4e7ce;
  --color-gold-icon: #fbd892;
  --font-serif-jp:
    "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

@media only screen and (max-width: 640px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media only screen and (max-width: 640px) {
  .sp {
    display: block;
  }
}

.animation {
  opacity: 0;
}

.-fade {
  transform: translate(0, pcpx(40));
}

.isPlay.-fade {
  opacity: 1;
  transform: translate(0, 0);
  transition: 0.75s;
}

.c-contact-button {
  display: block;
  width: clamp(136.5px, 14.21875vw, 273px);
  height: clamp(33.5px, 3.4895833333vw, 67px);
  padding: clamp(2.5px, 0.2604166667vw, 5px);
  border: clamp(2px, 0.1041666667vw, 2px) solid;
  border-image: linear-gradient(to right, #603b11, #fbd892, #603b11) 1;
  background-color: var(--color-black);
}
@media only screen and (max-width: 640px) {
  .c-contact-button {
    width: 35.9375vw;
    height: 9.375vw;
    padding: 0.78125vw;
  }
}

.c-contact-button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(5px, 0.5208333333vw, 10px);
  border: 1px solid;
  border-image: linear-gradient(to right, #603b11, #fbd892, #603b11) 1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-size: clamp(11px, 1.1458333333vw, 22px);
  font-weight: 600;
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .c-contact-button-inner {
    font-size: 2.8125vw;
  }
}

.c-button {
  transition: opacity 0.2s ease;
}
.c-button:hover {
  opacity: 0.8;
}

.c-title {
  margin-top: clamp(12px, 1.25vw, 24px);
  font-size: clamp(18px, 1.875vw, 36px);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.66;
}
@media only screen and (max-width: 640px) {
  .c-title {
    font-size: 4.0625vw;
    margin-top: 3.125vw;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: clamp(8px, 0.8333333333vw, 16px);
  gap: clamp(12px, 1.25vw, 24px);
  padding: clamp(20px, 2.0833333333vw, 40px) clamp(36.5px, 3.8020833333vw, 73px) clamp(8px, 0.8333333333vw, 16px) clamp(55.5px, 5.78125vw, 111px);
}
@media only screen and (max-width: 640px) {
  .site-header {
    padding: 3.125vw 4.6875vw 4.6875vw;
  }
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(180px, 18.75vw, 360px);
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

.site-header__logo a {
  display: block;
  width: clamp(179px, 18.6458333333vw, 358px);
}
@media only screen and (max-width: 640px) {
  .site-header__logo a {
    width: 35.9375vw;
  }
}

.site-header__actions {
  display: flex;
  align-items: flex-start;
  gap: clamp(26px, 2.7083333333vw, 52px);
  margin-left: auto;
}
@media only screen and (max-width: 640px) {
  .site-header__actions {
    gap: 4.6875vw;
  }
}

.site-header__menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.4166666667vw, 8px);
  width: clamp(32.5px, 3.3854166667vw, 65px);
}

.site-header__menu-icon {
  position: relative;
  width: clamp(25px, 2.6041666667vw, 50px);
  height: clamp(25px, 2.6041666667vw, 50px);
}
@media only screen and (max-width: 640px) {
  .site-header__menu-icon {
    width: 5.46875vw;
    height: 5.46875vw;
  }
}

.site-header__menu-icon-line {
  position: absolute;
  background-color: var(--color-brand-red);
}
.site-header__menu-icon-line--h {
  top: 50%;
  left: 0;
  width: 100%;
  height: clamp(2px, 0.1041666667vw, 2px);
  transform: translateY(-50%);
}
.site-header__menu-icon-line--v {
  left: 50%;
  top: 0;
  width: clamp(2px, 0.1041666667vw, 2px);
  height: 100%;
  transform: translateX(-50%);
}

.site-header__menu-label {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-white);
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .site-header__menu-label {
    font-size: 2.1875vw;
    line-height: 1;
  }
}

.nav-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.nav-overlay-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: clamp(338.5px, 35.2604166667vw, 677px);
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(21px, 1.5625vw, 30px);
  padding: clamp(30px, 3.125vw, 60px) clamp(50px, 5.2083333333vw, 100px) clamp(30px, 3.125vw, 60px) clamp(20px, 2.0833333333vw, 40px);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  overflow-y: auto;
}
@media only screen and (max-width: 640px) {
  .nav-overlay {
    padding-right: 6.25vw;
    width: 100%;
  }
}
.nav-overlay.is-open {
  transform: translateX(0);
}

.nav-overlay__close {
  position: absolute;
  top: clamp(21px, 2.1875vw, 42px);
  right: clamp(36.5px, 3.8020833333vw, 73px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.4166666667vw, 8px);
  width: clamp(32.5px, 3.3854166667vw, 65px);
}
@media only screen and (max-width: 640px) {
  .nav-overlay__close {
    right: 4.6875vw;
  }
}

.nav-overlay__close-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(25px, 2.6041666667vw, 50px);
  height: clamp(2px, 0.1041666667vw, 2px);
  background-color: var(--color-brand-red);
}
.nav-overlay__close-line--1 {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-overlay__close-line--2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(25.2px, 1.875vw, 36px);
}

.nav-overlay__link {
  font-size: clamp(12px, 1.25vw, 24px);
  color: var(--color-white);
  white-space: nowrap;
  transition: color 0.2s ease;
}
@media only screen and (max-width: 640px) {
  .nav-overlay__link {
    font-size: 3.4375vw;
  }
}
.nav-overlay__link:hover, .nav-overlay__link:focus-visible {
  color: var(--color-gold-light);
}

.nav-overlay__accent {
  color: var(--color-brand-red);
  margin-right: clamp(2px, 0.2083333333vw, 4px);
}

.nav-overlay__social {
  position: absolute;
  bottom: clamp(25px, 2.6041666667vw, 50px);
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.5208333333vw, 10px);
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-gold-icon);
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .nav-overlay__social {
    font-size: 3.4375vw;
  }
}

.nav-overlay__social-icon {
  width: clamp(15.5px, 1.6145833333vw, 31px);
  height: clamp(15.5px, 1.6145833333vw, 31px);
}

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/1080;
  overflow: hidden;
  background-color: #06131a;
}
@media only screen and (max-width: 640px) {
  .hero {
    aspect-ratio: 4/3;
  }
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active {
  opacity: 1;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(23px, 2.3958333333vw, 46px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.0416666667vw, 20px);
}
@media only screen and (max-width: 640px) {
  .hero__dots {
    bottom: 1.5625vw;
  }
}

.hero__dots-item {
  display: flex;
}

.hero__dot {
  padding: clamp(5px, 0.5208333333vw, 10px) 0;
  cursor: pointer;
}
.hero__dot::before {
  content: "";
  display: block;
  width: clamp(38.5px, 4.0104166667vw, 77px);
  height: clamp(2px, 0.2083333333vw, 4px);
  background-color: var(--color-white);
  transition: background-color 0.3s ease;
}
.hero__dot.is-active::before {
  background-color: var(--color-brand-red);
}

.lead {
  position: relative;
  width: 100%;
  background-color: #000000;
  overflow: hidden;
  padding: clamp(48px, 5vw, 96px) clamp(95px, 9.8958333333vw, 190px) clamp(48px, 5vw, 96px);
}
@media only screen and (max-width: 1200px) {
  .lead {
    padding: 5vw;
  }
}
@media only screen and (max-width: 640px) {
  .lead {
    padding: 12.5vw 6.25vw;
  }
}

.lead__divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.2604166667vw;
  background: linear-gradient(to right, var(--color-gold-dark) 0%, var(--color-gold-icon) 50%, var(--color-gold-dark) 100%);
}
.lead__divider--top {
  top: 0;
  z-index: 1;
}
.lead__divider--bottom {
  bottom: 0;
}

.lead__decor {
  position: absolute;
  width: 21.3020833333vw;
  pointer-events: none;
  opacity: 0.9;
}
@media only screen and (max-width: 640px) {
  .lead__decor {
    width: 46.875vw;
  }
}
.lead__decor--top-left {
  left: -3.0208333333vw;
  top: -5.625vw;
  z-index: 0;
}
@media only screen and (max-width: 640px) {
  .lead__decor--top-left {
    left: -7.8125vw;
    top: -12.5vw;
  }
}
.lead__decor--bottom-right {
  right: -2.9166666667vw;
  bottom: -5.3645833333vw;
  transform: rotate(180deg);
}
@media only screen and (max-width: 640px) {
  .lead__decor--bottom-right {
    right: -7.8125vw;
    bottom: -12.5vw;
  }
}

.lead__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.3333333333vw;
  max-width: 80.2083333333vw;
  margin: 0 auto;
}
@media only screen and (max-width: 1390px) {
  .lead__inner {
    width: 100%;
  }
}
@media only screen and (max-width: 640px) {
  .lead__inner {
    flex-direction: column;
  }
}

.lead__heading {
  flex: 1 1 clamp(365.5px, 38.0729166667vw, 731px);
  min-width: 0;
}
@media only screen and (max-width: 1200px) {
  .lead__heading {
    flex: 1;
  }
}
@media only screen and (max-width: 640px) {
  .lead__heading {
    text-align: center;
  }
}

.lead__headingLine {
  font-size: clamp(20px, 2.0833333333vw, 40px);
  line-height: 1.85;
  font-weight: 400;
  color: var(--color-gold-light);
  white-space: nowrap;
}
@media only screen and (max-width: 1200px) {
  .lead__headingLine {
    font-size: 1.8333333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .lead__headingLine {
    white-space: normal;
    font-size: 4.6875vw;
    line-height: 1.7;
  }
}

.lead__accent {
  position: relative;
  display: inline-block;
  margin: 0 0.05em;
}

.lead__accentSpark {
  position: absolute;
  top: -0.35em;
  left: -0.45em;
  width: 2.65625vw;
  height: 2.65625vw;
  pointer-events: none;
  z-index: 1;
}
@media only screen and (max-width: 640px) {
  .lead__accentSpark {
    width: 4.6875vw;
    height: 4.6875vw;
    top: -1.5625vw;
    left: -1.5625vw;
  }
}

.lead__accentText {
  position: relative;
  display: inline-block;
  font-size: clamp(32px, 3.3333333333vw, 64px);
  line-height: 1;
  padding-bottom: 0.2em;
  background: linear-gradient(180deg, #7c622f 28.906%, #fbd892 39.746%, #ffffff 50.399%, #fbd892 58.507%, #886f3c 72.266%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 1200px) {
  .lead__accentText {
    font-size: 3.3333333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .lead__accentText {
    font-size: 6.25vw;
  }
}
.lead__accentText::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.08em;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--color-gold-mid) 0%, var(--color-gold-icon) 55.7692%, #ffffff 70.0496%, var(--color-gold-icon) 75%, var(--color-gold-dark) 100%);
}

.lead__body {
  flex: 1 1 clamp(337px, 35.1041666667vw, 674px);
  min-width: 0;
  font-size: clamp(10px, 1.0416666667vw, 20px);
  line-height: 2.5;
  font-weight: 400;
  color: var(--color-white);
  white-space: nowrap;
}
@media only screen and (max-width: 1200px) {
  .lead__body {
    flex: 1;
    font-size: 1vw;
  }
}
@media only screen and (max-width: 640px) {
  .lead__body {
    width: 82.8125vw;
    font-size: 3.4375vw;
    white-space: wrap;
    line-height: 2;
    letter-spacing: normal;
  }
}

.concept {
  position: relative;
  background-color: #050505;
  background-image: url("../images/common/concept-marble-texture.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.concept__intro {
  position: relative;
  text-align: center;
  padding: clamp(35px, 3.6458333333vw, 70px) clamp(20px, 2.0833333333vw, 40px) clamp(15px, 1.5625vw, 30px);
}
@media only screen and (max-width: 640px) {
  .concept__intro {
    padding-top: 12.5vw;
    padding-bottom: 4.6875vw;
  }
}

.concept__badge {
  display: inline-block;
  margin: 0 auto;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .concept__badge {
    font-size: 3.125vw;
  }
}

.concept__headingAccent {
  font-weight: 600;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .concept__headingAccent {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.concept__photo {
  width: 100%;
  aspect-ratio: 1920/765;
  overflow: hidden;
}
@media only screen and (max-width: 640px) {
  .concept__photo {
    aspect-ratio: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
.concept__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 640px) {
  .concept__photo img {
    width: 160%;
    height: auto;
    max-width: none;
  }
}

.concept__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(40px, 4.1666666667vw, 80px) clamp(95px, 9.8958333333vw, 190px);
  border-bottom: 1px solid #f80203;
}
@media only screen and (max-width: 1000px) {
  .concept__body {
    padding: 4.1666666667vw 6.6666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .concept__body {
    padding: 4.6875vw 6.25vw 12.5vw;
  }
}

.concept__bodyLeft {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.0833333333vw, 40px);
  padding: 0 clamp(17.5px, 1.8229166667vw, 35px) 0 clamp(15px, 1.5625vw, 30px);
}
@media only screen and (max-width: 640px) {
  .concept__bodyLeft {
    flex-basis: 100%;
    padding: 0;
  }
}

.concept__lead {
  font-size: clamp(18px, 1.875vw, 36px);
  line-height: 1.66;
  font-weight: 400;
  color: var(--color-gold-icon);
}
@media only screen and (max-width: 1000px) {
  .concept__lead {
    font-size: 2vw;
  }
}
@media only screen and (max-width: 640px) {
  .concept__lead {
    font-size: 4.0625vw;
    text-align: center;
  }
}

.concept__statement {
  display: flex;
  flex-direction: column;
}

.concept__statementIntro,
.concept__statementBrand {
  font-size: clamp(12px, 1.25vw, 24px);
  line-height: 1.66;
  font-weight: 600;
  color: var(--color-white);
}
@media only screen and (max-width: 1000px) {
  .concept__statementIntro,
  .concept__statementBrand {
    font-size: 1.8333333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .concept__statementIntro,
  .concept__statementBrand {
    font-size: 3.4375vw;
  }
}

.concept__brandGold {
  font-weight: 400;
  color: var(--color-gold-icon);
}

.concept__paragraph {
  margin-top: 0.2604166667vw;
  font-size: clamp(12px, 1.25vw, 24px);
  line-height: 1.66;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 1000px) {
  .concept__paragraph {
    font-size: 1.6666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .concept__paragraph {
    font-size: 3.4375vw;
    margin-top: 1.5625vw;
  }
}

.concept__cards {
  flex: 1 1 48%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.5625vw, 30px);
}
@media only screen and (max-width: 1000px) {
  .concept__cards {
    flex: 1 1 40%;
  }
}
@media only screen and (max-width: 640px) {
  .concept__cards {
    flex-basis: 100%;
    margin-top: clamp(20px, 2.0833333333vw, 40px);
    gap: 2.34375vw;
  }
}

.concept__card {
  min-height: clamp(93px, 9.6875vw, 186px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.2083333333vw, 4px);
  text-align: center;
  padding: clamp(12px, 1.25vw, 24px) clamp(10px, 1.0416666667vw, 20px);
  background-color: #000000;
  border: 1px solid var(--color-gold-light-alt);
}
@media only screen and (max-width: 1000px) {
  .concept__card {
    padding: 1.6666666667vw 1.25vw;
  }
}
@media only screen and (max-width: 640px) {
  .concept__card {
    min-height: auto;
    padding: 2.34375vw 3.125vw;
  }
}

.concept__cardTitle {
  font-size: clamp(14px, 1.4583333333vw, 28px);
  line-height: 1.66;
  font-weight: 600;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .concept__cardTitle {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
@media only screen and (max-width: 1000px) {
  .concept__cardTitle {
    font-size: 1.5833333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .concept__cardTitle {
    font-size: 3.4375vw;
  }
}

.concept__cardText {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  line-height: 1.66;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 1000px) {
  .concept__cardText {
    font-size: 1.1666666667vw;
    line-height: 2;
  }
}
@media only screen and (max-width: 640px) {
  .concept__cardText {
    font-size: 2.8125vw;
    text-align: left;
  }
}
.concept__cardText .concept__cardText-br {
  display: none;
}
@media only screen and (max-width: 1000px) {
  .concept__cardText .concept__cardText-br {
    display: block;
  }
}

.team {
  background-color: #000000;
  padding: clamp(35px, 3.6458333333vw, 70px) clamp(95px, 9.8958333333vw, 190px) clamp(50px, 5.2083333333vw, 100px);
  border-bottom: 1px solid #f80203;
}
@media only screen and (max-width: 1000px) {
  .team {
    padding: 4.1666666667vw 6.6666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .team {
    padding-left: clamp(20px, 2.0833333333vw, 40px);
    padding-right: clamp(20px, 2.0833333333vw, 40px);
    padding: 9.375vw 6.25vw 6.25vw;
  }
}

.team__intro {
  text-align: center;
  margin-bottom: clamp(45px, 4.6875vw, 90px);
}
@media only screen and (max-width: 640px) {
  .team__intro {
    margin-bottom: 6.25vw;
  }
}

.team__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .team__badge {
    font-size: 3.125vw;
  }
}

.team__headingAccent {
  font-weight: 600;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .team__headingAccent {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.team__list {
  display: flex;
  flex-direction: column;
  gap: clamp(43.5px, 4.53125vw, 87px);
  max-width: clamp(669.5px, 69.7395833333vw, 1339px);
  margin: 0 auto;
}
@media only screen and (max-width: 1000px) {
  .team__list {
    max-width: 100%;
  }
}
@media only screen and (max-width: 640px) {
  .team__list {
    gap: 7.8125vw;
  }
}

.team__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(41px, 4.2708333333vw, 82px);
  border-bottom: 1px solid #1a1a1a;
  background: linear-gradient(to top, rgba(95, 80, 49, 0.7), rgba(95, 80, 49, 0));
}
@media only screen and (max-width: 640px) {
  .team__row {
    gap: 3.125vw;
  }
}
.team__row--right {
  flex-direction: row-reverse;
}
.team__row--right .team__info {
  padding-right: 0;
  padding-left: clamp(35px, 3.6458333333vw, 70px);
}
@media only screen and (max-width: 640px) {
  .team__row {
    flex-wrap: wrap;
  }
  .team__row--right {
    flex-direction: column;
  }
  .team__row--right .team__info {
    padding: 1.5625vw 3.125vw 3.125vw;
  }
}

.team__photo {
  flex-shrink: 0;
  width: clamp(191.5px, 19.9479166667vw, 383px);
  aspect-ratio: 383/366;
  overflow: hidden;
}
@media only screen and (max-width: 640px) {
  .team__photo {
    width: 60%;
    margin: 0 auto;
  }
}
.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.team__info {
  flex: 1 1 clamp(437px, 45.5208333333vw, 874px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.2083333333vw, 4px);
  padding-right: clamp(35px, 3.6458333333vw, 70px);
}
@media only screen and (max-width: 640px) {
  .team__info {
    flex-basis: 100%;
    padding: 1.5625vw 3.125vw 3.125vw;
  }
}

.team__roleBadge {
  margin-bottom: clamp(8px, 0.8333333333vw, 16px);
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.5208333333vw, 10px);
  width: fit-content;
  border-bottom: 1px solid var(--color-brand-red);
}

.team__plus {
  color: var(--color-brand-red);
  font-size: clamp(24px, 2.5vw, 48px);
  line-height: 1;
}

.team__role {
  color: var(--color-white);
  font-size: clamp(18px, 1.875vw, 36px);
  font-weight: 400;
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .team__role {
    white-space: normal;
  }
}

.team__nameRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 1.25vw, 24px);
}

.team__nameJa {
  color: var(--color-gold-icon);
  font-size: clamp(18px, 1.875vw, 36px);
  font-weight: 600;
  white-space: nowrap;
}

.team__nameRomaji {
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 400;
  white-space: nowrap;
}

.team__title {
  color: var(--color-white);
  font-size: clamp(10px, 1.0416666667vw, 20px);
  font-weight: 400;
}
@media only screen and (max-width: 640px) {
  .team__title {
    font-size: 2.8125vw;
    margin-bottom: 1.5625vw;
  }
}

.team__desc {
  margin-top: clamp(6px, 0.625vw, 12px);
  color: var(--color-white);
  font-size: clamp(11px, 1.1458333333vw, 22px);
  line-height: 2;
  font-weight: 400;
}
@media only screen and (max-width: 1000px) {
  .team__desc {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 640px) {
  .team__desc {
    font-size: 3.125vw;
    letter-spacing: 0.1em;
  }
}

.gallery {
  background-color: #050505;
  background-image: url("../images/common/concept-marble-texture.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(35px, 3.6458333333vw, 70px) 0 clamp(45px, 4.6875vw, 90px);
  overflow: hidden;
  border-bottom: 1px solid var(--color-brand-red);
}

.gallery__intro {
  text-align: center;
  padding: 0 clamp(20px, 2.0833333333vw, 40px);
  margin-bottom: clamp(25px, 2.6041666667vw, 50px);
}

.gallery__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .gallery__badge {
    font-size: 3.125vw;
  }
}

.gallery__headingAccent {
  font-weight: 400;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .gallery__headingAccent {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.gallery__viewer {
  width: 100%;
}

.gallery__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(9px, 0.9375vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 clamp(95px, 9.8958333333vw, 190px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar {
  display: none;
}
@media only screen and (max-width: 640px) {
  .gallery__track {
    padding-left: clamp(20px, 2.0833333333vw, 40px);
    padding-right: clamp(20px, 2.0833333333vw, 40px);
  }
}

.gallery__slide {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.gallery__slide img {
  width: 100%;
  height: clamp(242px, 25.2083333333vw, 484px);
  object-fit: cover;
  flex-shrink: 0;
}
.gallery__slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(242px, 25.2083333333vw, 484px);
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.gallery__slide.is-active::after {
  opacity: 0;
}

.gallery__caption {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.2083333333vw, 4px);
  padding: clamp(8px, 0.8333333333vw, 16px) clamp(2px, 0.2083333333vw, 4px) 0;
}

.gallery__captionLocation {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-white);
}

.gallery__captionTag {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-gold-icon);
}

.gallery__footer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(84px, 8.75vw, 168px);
  max-width: clamp(670px, 69.7916666667vw, 1340px);
  margin: clamp(20px, 2.0833333333vw, 40px) auto 0;
  padding: 0 clamp(20px, 2.0833333333vw, 40px);
}
@media only screen and (max-width: 640px) {
  .gallery__footer {
    flex-wrap: wrap;
    row-gap: clamp(12px, 1.25vw, 24px);
  }
}

.gallery__controls {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(7px, 0.7291666667vw, 14px);
  row-gap: clamp(12px, 1.25vw, 24px);
  flex: 0 0 clamp(198px, 20.625vw, 396px);
}
@media only screen and (max-width: 640px) {
  .gallery__controls {
    flex: 1 1 100%;
    order: -1;
  }
}

.gallery__counter {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(12px, 1.25vw, 24px);
  color: var(--color-white);
  white-space: nowrap;
}

.gallery__progress {
  grid-column: 2;
  grid-row: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
}

.gallery__progressBar {
  display: block;
  height: 100%;
  width: 0%;
  background-color: var(--color-brand-red);
  transition: width 0.2s ease;
}

.gallery__arrows {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: clamp(6px, 0.625vw, 12px);
  flex-shrink: 0;
}
@media only screen and (max-width: 640px) {
  .gallery__arrows {
    grid-column: 1/-1;
    justify-content: center;
  }
}

.gallery__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(19px, 1.9791666667vw, 38px);
  height: clamp(19px, 1.9791666667vw, 38px);
  border: 1px solid var(--color-white);
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(10px, 1.0416666667vw, 20px);
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gallery__arrow:hover, .gallery__arrow:focus-visible {
  background-color: var(--color-white);
  color: #000000;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, clamp(72px, 7.5vw, 144px));
  gap: clamp(7px, 0.7291666667vw, 14px);
  flex: 0 0 auto;
}
@media only screen and (max-width: 640px) {
  .gallery__thumbs {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
}

.gallery__thumbItem {
  display: flex;
}

.gallery__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 144/96;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.gallery__thumb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumb.is-active::after, .gallery__thumb:hover::after, .gallery__thumb:focus-visible::after {
  opacity: 0;
}

.hobbyGarage {
  background-color: #000000;
  padding: clamp(46.5px, 4.84375vw, 93px) clamp(95px, 9.8958333333vw, 190px) clamp(100px, 10.4166666667vw, 200px);
  border-bottom: 1px solid var(--color-brand-red);
}
@media only screen and (max-width: 1000px) {
  .hobbyGarage {
    padding: 4.1666666667vw 6.6666666667vw 8.3333333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .hobbyGarage {
    padding-left: clamp(20px, 2.0833333333vw, 40px);
    padding-right: clamp(20px, 2.0833333333vw, 40px);
    padding: 7.8125vw 6.25vw 10.9375vw;
  }
}

.hobbyGarage__intro {
  text-align: center;
  margin-bottom: clamp(30px, 3.125vw, 60px);
}

.hobbyGarage__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .hobbyGarage__badge {
    font-size: 3.125vw;
  }
}

@media only screen and (max-width: 640px) {
  .hobbyGarage__heading {
    letter-spacing: -0.03em;
  }
}

.hobbyGarage__headingAccent {
  font-weight: 400;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .hobbyGarage__headingAccent {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.hobbyGarage__lead {
  margin-top: clamp(32px, 3.3333333333vw, 64px);
  font-size: clamp(11px, 1.1458333333vw, 22px);
  line-height: 2;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .hobbyGarage__lead {
    font-size: 3.4375vw;
    text-align: left;
    letter-spacing: 0.05em;
  }
}

.hobby__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(15px, 1.5625vw, 30px) clamp(20px, 2.0833333333vw, 40px);
  max-width: clamp(605.5px, 63.0729166667vw, 1211px);
  margin: 0 auto clamp(65px, 6.7708333333vw, 130px);
}
@media only screen and (max-width: 1000px) {
  .hobby__grid {
    max-width: 100%;
  }
}

.hobby__item {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.0416666667vw, 20px);
}
@media only screen and (max-width: 640px) {
  .hobby__item {
    gap: 1.5625vw;
  }
}

.hobby__photo {
  width: 100%;
  aspect-ratio: 571/355;
  overflow: hidden;
}
.hobby__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hobby__caption {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.4166666667vw, 8px);
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-white);
}

.hobby__plus {
  color: var(--color-brand-red);
  font-size: clamp(18px, 1.875vw, 36px);
  line-height: 1;
}

.garage__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.0833333333vw, 40px);
  max-width: clamp(605.5px, 63.0729166667vw, 1211px);
  margin: 0 auto;
}
@media only screen and (max-width: 1000px) {
  .garage__grid {
    max-width: 100%;
  }
}

.garage__photo {
  width: 100%;
  aspect-ratio: 571/355;
  overflow: hidden;
}
.garage__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipment {
  position: relative;
  background-color: #050505;
  background-image: url("../images/common/concept-marble-texture.webp");
  background-size: cover;
  background-position: center;
  padding: clamp(57.5px, 5.9895833333vw, 115px) clamp(95px, 9.8958333333vw, 190px) clamp(70.5px, 7.34375vw, 141px);
  border-bottom: 1px solid var(--color-brand-red);
}
@media only screen and (max-width: 1000px) {
  .equipment {
    padding: 4.1666666667vw 6.6666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .equipment {
    padding: 7.8125vw 6.25vw 7.8125vw;
  }
}

.equipment__intro {
  text-align: center;
  margin-bottom: clamp(24px, 2.5vw, 48px);
}

.equipment__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .equipment__badge {
    font-size: 3.125vw;
  }
}

.equipment__headingAccent {
  font-weight: 400;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .equipment__headingAccent {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.equipment__photo {
  max-width: clamp(602.5px, 62.7604166667vw, 1205px);
  aspect-ratio: 1205/666;
  margin: 0 auto;
  overflow: hidden;
}
@media only screen and (max-width: 1000px) {
  .equipment__photo {
    max-width: 100%;
  }
}
.equipment__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipment__lead {
  max-width: clamp(602.5px, 62.7604166667vw, 1205px);
  margin: clamp(20px, 2.0833333333vw, 40px) auto 0;
  font-size: clamp(11px, 1.1458333333vw, 22px);
  line-height: 2.27;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 1000px) {
  .equipment__lead {
    max-width: 100%;
  }
}
@media only screen and (max-width: 640px) {
  .equipment__lead {
    font-size: 3.4375vw;
    line-height: 2;
  }
}

.equipment__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10.5px, 1.09375vw, 21px);
  max-width: clamp(603.5px, 62.8645833333vw, 1207px);
  margin: clamp(20px, 2.0833333333vw, 40px) auto 0;
}
@media only screen and (max-width: 1000px) {
  .equipment__tags {
    max-width: 100%;
    justify-content: center;
  }
}

.equipment__tag {
  padding: clamp(5px, 0.5208333333vw, 10px) clamp(7.5px, 0.78125vw, 15px);
  background-color: #000000;
  border: clamp(3px, 0.15625vw, 3px) solid;
  border-image: linear-gradient(to bottom, #a28d62, #fbd892, #ffffff, #fbd892, #7c622f) 1;
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 500;
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .equipment__tag {
    font-size: 2.8125vw;
    border: 0.46875vw solid;
    border-image: linear-gradient(to bottom, #a28d62, #fbd892, #ffffff, #fbd892, #7c622f) 1;
    width: 25.78125vw;
    text-align: center;
  }
}

.process {
  position: relative;
  background-color: #000000;
  overflow: hidden;
  padding: clamp(45px, 4.6875vw, 90px) clamp(95px, 9.8958333333vw, 190px) clamp(60px, 6.25vw, 120px);
  border-bottom: 1px solid var(--color-brand-red);
}
@media only screen and (max-width: 640px) {
  .process {
    padding: 4.6875vw 6.25vw 12.5vw;
  }
}

.process__decor {
  position: absolute;
  width: clamp(500px, 52.0833333333vw, 1000px);
  opacity: 0.6;
  pointer-events: none;
}
.process__decor--top {
  top: clamp(-230px, -23.9583333333vw, -460px);
  left: clamp(-232.5px, -24.21875vw, -465px);
  transform: rotate(-37.58deg);
}
.process__decor--bottom {
  bottom: clamp(-230px, -23.9583333333vw, -460px);
  right: clamp(-232.5px, -24.21875vw, -465px);
  transform: rotate(-37.58deg);
}

.process__intro {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: clamp(45px, 4.6875vw, 90px);
}

.process__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .process__badge {
    font-size: 3.125vw;
  }
}

.process__headingAccent {
  font-weight: 400;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .process__headingAccent {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.process__lead {
  max-width: clamp(543px, 56.5625vw, 1086px);
  margin: clamp(32px, 3.3333333333vw, 64px) auto 0;
  font-size: clamp(11px, 1.1458333333vw, 22px);
  line-height: 2;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .process__lead {
    font-size: 3.4375vw;
    text-align: left;
  }
}

.process__brandGold {
  color: var(--color-gold-icon);
}

.process__timeline {
  position: relative;
  z-index: 1;
  max-width: clamp(558.5px, 58.1770833333vw, 1117px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.process__timeline::after {
  content: "";
  position: absolute;
  background: var(--color-gold-light-alt);
  width: 2px;
  height: 93%;
  top: 1%;
  left: 3.5%;
}
@media only screen and (max-width: 640px) {
  .process__timeline::after {
    content: "";
    position: absolute;
    background: var(--color-gold-light-alt);
    width: 1px;
    height: 90%;
    top: 3.90625vw;
    left: 3.90625vw;
  }
}

.process__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.25vw, 24px);
  padding-bottom: clamp(45px, 4.6875vw, 90px);
}
.process__step:last-child {
  padding-bottom: 0;
}
@media only screen and (max-width: 640px) {
  .process__step {
    display: grid;
    grid-template-columns: 9.375vw 1fr;
    grid-template-areas: "marker en" "marker body";
    column-gap: clamp(12px, 1.25vw, 24px);
    row-gap: clamp(3px, 0.3125vw, 6px);
    padding-bottom: 6.25vw;
  }
}

.process__marker {
  position: relative;
  flex-shrink: 0;
  width: clamp(37.75px, 3.9322916667vw, 75.5px);
  height: clamp(37.75px, 3.9322916667vw, 75.5px);
  border-radius: 50%;
  background-color: #000000;
  border: clamp(3.2px, 0.1666666667vw, 3.2px) solid transparent;
  background: linear-gradient(#000000, #000000) padding-box, linear-gradient(to bottom, #a28d62, #fbd892, #ffffff, #fbd892, #7c622f) border-box; /* 枠線のグラデーション */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12.95px, 1.3489583333vw, 25.9px);
  color: var(--color-white);
  z-index: 1;
}
@media only screen and (max-width: 640px) {
  .process__marker {
    width: 9.375vw;
    height: 9.375vw;
    font-size: 2.8125vw;
    border: 0.46875vw solid transparent;
  }
}
@media only screen and (max-width: 640px) {
  .process__marker {
    grid-area: marker;
  }
}

.process__en {
  flex-shrink: 0;
  width: clamp(70px, 7.2916666667vw, 140px);
  padding-top: clamp(5px, 0.5208333333vw, 10px);
  font-size: clamp(12.95px, 1.3489583333vw, 25.9px);
  color: var(--color-white);
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .process__en {
    grid-area: en;
    width: auto;
    padding-top: 0;
    font-size: 3.4375vw;
    margin-top: 1.5625vw;
  }
}

.process__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: clamp(1px, 0.1041666667vw, 2px);
}
@media only screen and (max-width: 640px) {
  .process__body {
    grid-area: body;
    padding-top: 0;
  }
}

.process__title {
  font-size: clamp(15.1px, 1.5729166667vw, 30.2px);
  font-weight: 600;
  color: var(--color-gold-light-alt);
}
@media only screen and (max-width: 640px) {
  .process__title {
    font-size: 4.0625vw;
  }
}

.process__desc {
  margin-top: clamp(2px, 0.2083333333vw, 4px);
  font-size: clamp(11.85px, 1.234375vw, 23.7px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .process__desc {
    font-size: 3.125vw;
  }
}

.quality {
  background-color: #050505;
  background-image: url("../images/common/concept-marble-texture.webp");
  background-size: cover;
  background-position: center;
  padding: clamp(55.5px, 5.78125vw, 111px) clamp(95px, 9.8958333333vw, 190px) clamp(136px, 14.1666666667vw, 272px);
  border-bottom: 1px solid var(--color-brand-red);
}
@media only screen and (max-width: 1000px) {
  .quality {
    padding: 4.1666666667vw 6.6666666667vw 13.3333333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .quality {
    padding: 6.25vw 6.25vw 23.4375vw;
  }
}

.quality__intro {
  text-align: center;
  margin-bottom: clamp(40px, 4.1666666667vw, 80px);
}

.quality__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .quality__badge {
    font-size: 3.125vw;
  }
}

.quality__headingAccent {
  font-weight: 400;
  background: linear-gradient(180deg, #a28d62 43.333%, #fbd892 48.67%, #ffffff 54.006%, #fbd892 57.612%, #7c622f 73.333%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .quality__headingAccent {
    background: linear-gradient(180deg, #7c622f 5.906%, #fbd892 45.746%, #ffffff 50.399%, #fbd892 55.507%, #886f3c 90.266%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.quality__lead {
  margin: clamp(34.5px, 3.59375vw, 69px) auto 0;
  font-size: clamp(11px, 1.1458333333vw, 22px);
  line-height: 1.8;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .quality__lead {
    font-size: 3.4375vw;
    line-height: 1.5;
  }
}

.quality__brandGold {
  color: var(--color-gold-icon);
}

.quality__rings {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
@media only screen and (max-width: 640px) {
  .quality__rings {
    flex-wrap: wrap;
    row-gap: 0vw;
    column-gap: 0vw;
  }
}

.quality__ring {
  position: relative;
  flex-shrink: 0;
  width: clamp(233px, 24.2708333333vw, 466px);
  height: clamp(233px, 24.2708333333vw, 466px);
  border-radius: 50%;
  padding: clamp(5px, 0.2604166667vw, 5px);
  background: linear-gradient(to bottom, #a28d62 0%, #fbd892 17.7885%, #ffffff 35.5769%, #fbd892 47.5962%, #7c622f 100%);
}
@media only screen and (max-width: 1000px) {
  .quality__ring {
    width: 29.1666666667vw;
    height: 29.1666666667vw;
    padding: clamp(3px, 0.15625vw, 3px);
  }
}
@media only screen and (max-width: 640px) {
  .quality__ring {
    padding: clamp(2px, 0.1041666667vw, 2px);
    width: 31.25vw;
    height: 31.25vw;
  }
}
.quality__ring:not(:first-child) {
  margin-left: clamp(-15px, -1.5625vw, -30px);
}
@media only screen and (max-width: 640px) {
  .quality__ring:not(:first-child) {
    margin-left: 0;
  }
}
@media only screen and (max-width: 640px) {
  .quality__ring:nth-child(1) .quality__list {
    left: -20.3125vw;
    transform: none;
  }
}
@media only screen and (max-width: 640px) {
  .quality__ring:nth-child(2) {
    margin-left: -1.5625vw;
  }
  .quality__ring:nth-child(2) .quality__list {
    left: 18.75vw;
    right: -15.625vw;
    transform: none;
  }
}
@media only screen and (max-width: 640px) {
  .quality__ring:nth-child(3) {
    margin-top: -4.6875vw;
  }
  .quality__ring:nth-child(3) .quality__list {
    width: 100%;
    left: 9.375vw;
    padding-top: 3.125vw;
  }
  .quality__ring:nth-child(3) .quality__point {
    white-space: nowrap;
  }
}

.quality__ringFill {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quality__ringInner {
  position: absolute;
  inset: clamp(8.75px, 0.9114583333vw, 17.5px);
  border-radius: 50%;
  padding: clamp(2px, 0.1041666667vw, 2px);
  background: linear-gradient(to bottom, #a28d62 0%, #fbd892 17.7885%, #ffffff 35.5769%, #fbd892 47.5962%, #7c622f 100%);
}
@media only screen and (max-width: 640px) {
  .quality__ringInner {
    inset: 0.78125vw;
    padding: clamp(1px, 0.0520833333vw, 1px);
  }
}
.quality__ringInner span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000000;
}

.quality__ringLabel {
  position: relative;
  z-index: 1;
  font-size: clamp(20px, 2.0833333333vw, 40px);
  color: var(--color-gold-icon);
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .quality__ringLabel {
    font-size: 3.75vw;
  }
}

.quality__spark {
  position: absolute;
  top: clamp(33px, 3.4375vw, 66px);
  left: 0;
  width: clamp(40.5px, 4.21875vw, 81px);
  height: clamp(40.5px, 4.21875vw, 81px);
  pointer-events: none;
}
@media only screen and (max-width: 1000px) {
  .quality__spark {
    top: 5.5vw;
    width: 4.1666666667vw;
    height: 4.1666666667vw;
  }
}

.quality__lists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.0833333333vw, 40px);
  max-width: clamp(670px, 69.7916666667vw, 1340px);
  margin: clamp(35px, 3.6458333333vw, 70px) auto 0;
  padding: 0 clamp(20px, 2.0833333333vw, 40px);
}
@media only screen and (max-width: 640px) {
  .quality__lists {
    grid-template-columns: 1fr;
    row-gap: clamp(16px, 1.6666666667vw, 32px);
  }
}

.quality__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.2083333333vw, 4px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-top: clamp(20px, 2.0833333333vw, 40px);
}
@media only screen and (max-width: 640px) {
  .quality__list {
    padding-top: 1.5625vw;
  }
}

.quality__point {
  display: flex;
  gap: clamp(4px, 0.4166666667vw, 8px);
  font-size: clamp(10px, 1.0416666667vw, 20px);
  line-height: 2;
  color: var(--color-white);
  white-space: nowrap;
}
@media only screen and (max-width: 1000px) {
  .quality__point {
    gap: 0.6666666667vw;
    font-size: 1.1666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .quality__point {
    font-size: 2.5vw;
    white-space: wrap;
    line-height: 1.5;
  }
}

.quality__plus {
  flex-shrink: 0;
  color: var(--color-brand-red);
}

.faq {
  background-color: #000000;
  padding: clamp(45px, 4.6875vw, 90px) clamp(95px, 9.8958333333vw, 190px) clamp(60px, 6.25vw, 120px);
  border-top: 1px solid #f80203;
  border-bottom: 1px solid #f80203;
}
@media only screen and (max-width: 640px) {
  .faq {
    padding: 7.8125vw 6.25vw 12.5vw;
  }
}

.faq__intro {
  text-align: center;
  margin-bottom: clamp(40px, 4.1666666667vw, 80px);
}

.faq__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .faq__badge {
    font-size: 3.125vw;
  }
}

.faq__list {
  max-width: clamp(670px, 69.7916666667vw, 1340px);
  margin: 0 auto;
  border-top: 1px solid var(--color-white);
}

.faq__item {
  border-bottom: 1px solid var(--color-white);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.5625vw, 30px);
  padding: clamp(12.5px, 1.3020833333vw, 25px) 0;
  min-height: clamp(54.5px, 5.6770833333vw, 109px);
  text-align: left;
}

.faq__qa {
  flex-shrink: 0;
  font-size: clamp(12px, 1.25vw, 24px);
  color: var(--color-gold-icon);
}
@media only screen and (max-width: 640px) {
  .faq__qa {
    font-size: 3.4375vw;
  }
}
.faq__qa--a {
  color: var(--color-brand-red);
  align-self: flex-start;
}

.faq__questionText {
  flex: 1 1 auto;
  font-size: clamp(11px, 1.1458333333vw, 22px);
  line-height: 2;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .faq__questionText {
    font-size: 3.4375vw;
    line-height: 1.6;
  }
}

.faq__toggle {
  flex-shrink: 0;
  font-size: clamp(24px, 2.5vw, 48px);
  line-height: 1;
  color: var(--color-brand-red);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answerInner {
  overflow: hidden;
  min-height: 0;
}

.faq__answer > .faq__answerInner {
  display: flex;
  gap: clamp(15px, 1.5625vw, 30px);
  padding-bottom: 0;
  transition: padding-bottom 0.3s ease;
}

.is-open .faq__answer > .faq__answerInner {
  padding-bottom: clamp(12.5px, 1.3020833333vw, 25px);
}

.faq__answerText {
  font-size: clamp(11px, 1.1458333333vw, 22px);
  line-height: 2;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .faq__answerText {
    font-size: 3.4375vw;
    line-height: 1.6;
  }
}

.faq__answerTodo {
  color: rgb(255, 255, 255);
}

.faq__button {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 3.125vw, 60px);
}
.faq__button .faq__button-contact {
  width: clamp(225px, 23.4375vw, 450px);
  height: clamp(50px, 5.2083333333vw, 100px);
}
@media only screen and (max-width: 640px) {
  .faq__button .faq__button-contact {
    width: 54.6875vw;
    height: 10.9375vw;
  }
}
.faq__button .faq__button-contact-inner {
  font-size: clamp(18px, 1.875vw, 36px);
}
@media only screen and (max-width: 640px) {
  .faq__button .faq__button-contact-inner {
    font-size: 3.125vw;
  }
}

.contact {
  position: relative;
  background-color: #050505;
  background-image: url("../images/common/concept-marble-texture.webp");
  background-size: cover;
  background-position: center;
  padding: clamp(45px, 4.6875vw, 90px) clamp(95px, 9.8958333333vw, 190px) clamp(60px, 6.25vw, 120px);
}
@media only screen and (max-width: 1000px) {
  .contact {
    padding: 4.1666666667vw 6.6666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .contact {
    padding: 7.8125vw 6.25vw 12.5vw;
  }
}

.contact__intro {
  text-align: center;
  margin-bottom: clamp(40px, 4.1666666667vw, 80px);
}
@media only screen and (max-width: 640px) {
  .contact__intro {
    margin-bottom: 4.6875vw;
  }
}

.contact__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .contact__badge {
    font-size: 3.125vw;
  }
}

.contact__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 3.125vw, 60px);
  max-width: clamp(814px, 84.7916666667vw, 1628px);
  margin: 0 auto;
}
@media only screen and (max-width: 1000px) {
  .contact__grid {
    max-width: 100%;
    gap: 2.5vw;
  }
}
@media only screen and (max-width: 640px) {
  .contact__grid {
    flex-direction: column;
    gap: 4.6875vw;
  }
}

.contact__info {
  flex: 1 1 clamp(300px, 31.25vw, 600px);
  min-width: 0;
}
@media only screen and (max-width: 1000px) {
  .contact__info {
    flex: 1 1 33.3333333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .contact__info {
    flex: 1;
  }
}

.contact__text {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  line-height: 2;
  font-weight: 500;
  color: var(--color-white);
}
@media only screen and (max-width: 1000px) {
  .contact__text {
    font-size: 1.3333333333vw;
  }
}
@media only screen and (max-width: 640px) {
  .contact__text {
    font-size: 3.4375vw;
    line-height: 1.6;
  }
}

.contact__line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.0416666667vw, 20px);
  margin-top: clamp(29px, 3.0208333333vw, 58px);
  padding: clamp(12.5px, 1.3020833333vw, 25px) clamp(35px, 3.6458333333vw, 70px) clamp(12.5px, 1.3020833333vw, 25px) clamp(25px, 2.6041666667vw, 50px);
  border-radius: clamp(4px, 0.4166666667vw, 8px);
  background-color: #06c755;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 640px) {
  .contact__line {
    display: flex;
    width: fit-content;
    margin: 4.375vw auto 0;
    gap: 1.5625vw;
    padding: 3.125vw 8.59375vw 3.125vw 7.03125vw;
    border-radius: 1.25vw;
  }
}
.contact__line img {
  flex-shrink: 0;
  width: clamp(22.5px, 2.34375vw, 45px);
  height: auto;
}
@media only screen and (max-width: 640px) {
  .contact__line img {
    width: 7.8125vw;
  }
}
.contact__line span {
  font-size: clamp(13px, 1.3541666667vw, 26px);
  font-weight: 600;
  letter-spacing: clamp(0.5px, 0.0520833333vw, 1px);
  color: var(--color-white);
  padding-top: clamp(2.5px, 0.2604166667vw, 5px);
}
@media only screen and (max-width: 640px) {
  .contact__line span {
    font-size: 3.75vw;
    padding-top: 0;
  }
}

.contact__phoneLabel {
  margin-top: clamp(43px, 4.4791666667vw, 86px);
  font-size: clamp(12px, 1.25vw, 24px);
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .contact__phoneLabel {
    margin-top: 6.25vw;
    font-size: 3.125vw;
    padding-left: 12.5vw;
  }
}

.contact__phone {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 0.8333333333vw, 16px);
  margin-top: clamp(7.5px, 0.78125vw, 15px);
  border-bottom: 1px solid var(--color-brand-red);
  width: fit-content;
}
@media only screen and (max-width: 640px) {
  .contact__phone {
    margin: 1.5625vw auto;
  }
}

.contact__phoneTel {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  background: linear-gradient(180deg, #7c622f 28.906%, #fbd892 39.746%, #ffffff 50.399%, #fbd892 58.507%, #886f3c 72.266%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 640px) {
  .contact__phoneTel {
    font-size: 4.6875vw;
  }
}

.contact__phoneNumber {
  font-size: clamp(32px, 3.3333333333vw, 64px);
  background: linear-gradient(180deg, #7c622f 28.906%, #fbd892 39.746%, #ffffff 50.399%, #fbd892 58.507%, #886f3c 72.266%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  line-height: 1;
}
@media only screen and (max-width: 640px) {
  .contact__phoneNumber {
    font-size: 8.75vw;
  }
}

.contact__hours {
  margin-top: clamp(20px, 2.0833333333vw, 40px);
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .contact__hours {
    font-size: 2.8125vw;
    margin-top: 3.125vw;
    text-align: center;
  }
}

.contact__hours + .contact__hours {
  margin-top: clamp(5px, 0.5208333333vw, 10px);
}
@media only screen and (max-width: 640px) {
  .contact__hours + .contact__hours {
    margin-top: 0.78125vw;
  }
}

.contact__form {
  flex: 1 1 clamp(359px, 37.3958333333vw, 718px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.0416666667vw, 20px);
  padding: clamp(19px, 1.9791666667vw, 38px) clamp(22.5px, 2.34375vw, 45px);
  background-color: #000000;
  border: 1px solid #a28d62;
}
@media only screen and (max-width: 1000px) {
  .contact__form {
    flex: 1 1 37.5vw;
  }
}
@media only screen and (max-width: 640px) {
  .contact__form {
    flex: 1;
  }
}

.contact__fieldRow {
  display: flex;
  gap: clamp(15px, 1.5625vw, 30px);
  flex-wrap: wrap;
}

.contact__field {
  flex: 1 1 clamp(147.5px, 15.3645833333vw, 295px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.2083333333vw, 4px);
}
@media only screen and (max-width: 1000px) {
  .contact__field {
    flex: 1 1 16.6666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .contact__field {
    flex: auto;
    width: 100%;
  }
}

.contact__label {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.2083333333vw, 4px);
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .contact__label {
    font-size: 3.4375vw;
  }
}

.contact__input,
.contact__textarea {
  width: 100%;
  padding: clamp(6px, 0.625vw, 12px);
  background-color: var(--color-white);
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  font-family: var(--font-serif-jp);
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: #1a1a1a;
}
@media only screen and (max-width: 640px) {
  .contact__input,
  .contact__textarea {
    font-size: 3.4375vw;
  }
}

.contact__input {
  height: clamp(22.5px, 2.34375vw, 45px);
}
@media only screen and (max-width: 640px) {
  .contact__input {
    height: 6.25vw;
    width: 100%;
  }
}

.contact__textarea {
  height: 100%;
  resize: vertical;
}
@media only screen and (max-width: 640px) {
  .contact__textarea {
    height: 39.0625vw;
  }
}

.contact__submit {
  align-self: center;
  width: clamp(180px, 18.75vw, 360px);
  height: clamp(33px, 3.4375vw, 66px);
  margin-top: clamp(5px, 0.5208333333vw, 10px);
  border-radius: 7px;
  background: linear-gradient(180deg, #886f3c 0%, #a28d62 25%, #fbd892 50.962%, #a28d62 74.038%, #886f3c 100%), rgba(255, 147, 70, 0.2);
  background-blend-mode: overlay, normal;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width: 640px) {
  .contact__submit {
    width: 46.875vw;
    height: 9.375vw;
    margin-top: 3.125vw;
  }
}
.contact__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: red;
  mix-blend-mode: multiply;
}
.contact__submit span {
  position: relative;
  font-size: clamp(10px, 1.0416666667vw, 20px);
  font-weight: 600;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
@media only screen and (max-width: 640px) {
  .contact__submit span {
    font-size: 3.4375vw;
  }
}

.contact__formNote {
  text-align: center;
  font-size: clamp(7.5px, 0.78125vw, 15px);
  color: var(--color-gold-icon);
}

.footer {
  position: relative;
  background-color: #000000;
  padding: clamp(32.5px, 3.3854166667vw, 65px) clamp(95px, 9.8958333333vw, 190px) clamp(30px, 3.125vw, 60px);
}
@media only screen and (max-width: 1000px) {
  .footer {
    padding: 4.1666666667vw 6.6666666667vw;
  }
}
@media only screen and (max-width: 640px) {
  .footer {
    padding: 7.8125vw 6.25vw 12.5vw;
  }
}

.footer__topLine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(to right, var(--color-gold-dark) 0%, var(--color-gold-icon) 50%, var(--color-gold-dark) 100%);
}

.footer__banners {
  position: relative;
  display: flex;
  gap: clamp(12.5px, 1.3020833333vw, 25px);
  margin-bottom: clamp(29.5px, 3.0729166667vw, 59px);
}
@media only screen and (max-width: 640px) {
  .footer__banners {
    gap: 3.125vw;
    flex-direction: column;
  }
}

.footer__banner {
  display: block;
  width: clamp(205px, 21.3541666667vw, 410px);
}
@media only screen and (max-width: 640px) {
  .footer__banner {
    width: 90%;
    margin: 0 auto;
  }
}

.footer__main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(30px, 3.125vw, 60px);
}
@media only screen and (max-width: 640px) {
  .footer__main {
    flex-direction: column;
    justify-content: start;
    gap: 4.6875vw;
  }
}

.footer__col {
  flex: 1 1 clamp(250px, 26.0416666667vw, 500px);
  min-width: 0;
}
@media only screen and (max-width: 640px) {
  .footer__col {
    flex: auto;
  }
}

.footer__tagline {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  line-height: clamp(20px, 2.0833333333vw, 40px);
  color: var(--color-gold-icon);
}
@media only screen and (max-width: 640px) {
  .footer__tagline {
    font-size: 2.65625vw;
    padding-left: 15.625vw;
  }
}

.footer__logo {
  margin-top: -1em;
}
@media only screen and (max-width: 640px) {
  .footer__logo {
    margin: 0 0 1.5625vw;
  }
}
.footer__logo a {
  display: block;
  width: clamp(208.5px, 21.71875vw, 417px);
}
@media only screen and (max-width: 640px) {
  .footer__logo a {
    width: 54.6875vw;
    margin: 0 auto;
  }
}

.footer__address {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .footer__address {
    font-size: 2.65625vw;
    text-align: center;
  }
}

.footer__copyright {
  margin-top: clamp(15px, 1.5625vw, 30px);
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .footer__copyright {
    position: absolute;
    bottom: -6.25vw;
    font-size: 2.5vw;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
}

.footer__nav {
  flex: 0 0 auto;
  display: flex;
  gap: clamp(45px, 4.6875vw, 90px);
  position: relative;
  padding-bottom: clamp(40px, 4.1666666667vw, 80px);
}
@media only screen and (max-width: 640px) {
  .footer__nav {
    justify-content: center;
    padding-bottom: 12.5vw;
  }
}

.footer__navCol {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.0416666667vw, 20px);
}

.footer__navLink {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.2083333333vw, 4px);
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-white);
  white-space: nowrap;
  transition: color 0.2s ease;
}
@media only screen and (max-width: 640px) {
  .footer__navLink {
    font-size: 3.125vw;
  }
}
.footer__navLink:hover, .footer__navLink:focus-visible {
  color: var(--color-gold-light);
}

.footer__social {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.5208333333vw, 10px);
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-gold-icon);
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media only screen and (max-width: 640px) {
  .footer__social {
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.4375vw;
    bottom: 1.5625vw;
  }
}

.footer__socialIcon {
  width: clamp(15.5px, 1.6145833333vw, 31px);
  height: clamp(15.5px, 1.6145833333vw, 31px);
}
@media only screen and (max-width: 640px) {
  .footer__socialIcon {
    width: 5.9375vw;
    height: 5.9375vw;
  }
}

:root {
  --header-height: 110px;
}

body {
  font-family: var(--font-serif-jp);
  background-color: #0a0a0a;
  color: var(--color-white);
  overflow-x: hidden;
}

main > section {
  scroll-margin-top: var(--header-height);
}

[data-red] {
  color: var(--color-brand-red);
}

body.is-nav-open {
  overflow: hidden;
}

.thanks {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 2.9166666667vw, 56px);
  padding: clamp(40px, 4.1666666667vw, 80px) clamp(20px, 2.0833333333vw, 40px);
  background-color: #050505;
  background-image: url("../images/common/concept-marble-texture.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .thanks {
    gap: 6.25vw;
    padding: 9.375vw 4.6875vw;
  }
}

.thanks__logo {
  width: clamp(110px, 11.4583333333vw, 220px);
}
@media only screen and (max-width: 640px) {
  .thanks__logo {
    width: 25vw;
  }
}
.thanks__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.thanks__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.25vw, 24px);
  max-width: clamp(380px, 39.5833333333vw, 760px);
}

.thanks__badge {
  display: inline-block;
  padding-bottom: clamp(5px, 0.5208333333vw, 10px);
  border-bottom: 1px solid var(--color-brand-red);
  color: var(--color-gold-icon);
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: clamp(1.2px, 0.125vw, 2.4px);
}
@media only screen and (max-width: 640px) {
  .thanks__badge {
    font-size: 3.125vw;
  }
}

.thanks__heading {
  font-size: clamp(18px, 1.875vw, 36px);
  line-height: 1.66;
  font-weight: 400;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .thanks__heading {
    font-size: 4.0625vw;
  }
}

.thanks__text {
  font-size: clamp(9px, 0.9375vw, 18px);
  line-height: 2;
  font-weight: 500;
  color: var(--color-white);
}
@media only screen and (max-width: 640px) {
  .thanks__text {
    font-size: 3.125vw;
    line-height: 1.8;
  }
}

.thanks__button {
  align-self: center;
  width: clamp(160px, 16.6666666667vw, 320px);
  height: clamp(32px, 3.3333333333vw, 64px);
  margin-top: clamp(8px, 0.8333333333vw, 16px);
  border-radius: 7px;
  background: linear-gradient(180deg, #886f3c 0%, #a28d62 25%, #fbd892 50.962%, #a28d62 74.038%, #886f3c 100%), rgba(255, 147, 70, 0.2);
  background-blend-mode: overlay, normal;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width: 640px) {
  .thanks__button {
    width: 43.75vw;
    height: 9.0625vw;
  }
}
.thanks__button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: red;
  mix-blend-mode: multiply;
}
.thanks__button span {
  position: relative;
  font-size: clamp(9px, 0.9375vw, 18px);
  font-weight: 600;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
@media only screen and (max-width: 640px) {
  .thanks__button span {
    font-size: 3.125vw;
  }
}
.thanks__button:hover {
  filter: brightness(1.08);
}

.formError {
  margin-top: clamp(3px, 0.3125vw, 6px);
  padding: clamp(3px, 0.3125vw, 6px) clamp(6px, 0.625vw, 12px);
  background-color: #1a1a1a;
  border: 1px solid var(--color-brand-red);
  border-radius: 4px;
  cursor: pointer;
}

.formErrorContent {
  font-size: clamp(6.5px, 0.6770833333vw, 13px);
  line-height: 1.4;
  color: var(--color-white);
}