/* =========================================
   ベース設定 (Variables & Base)
   ========================================= */
:root {
  /* Common Style Variables */

  /* Color */
  --color-black: #000;
  --color-goldenrod: #d4af37;
  --color-gray: #808080;
  --color-gray-100: rgba(255, 255, 255, 0.75);
  --color-gray-200: rgba(0, 0, 0, 0.3);
  --color-gray-300: rgba(255, 255, 255, 0.3);
  --color-white: #fff;
  /* Gap */
  --gap-16: 1rem;
  --gap-20: 1.25rem;
  --gap-30: 1.875rem;
  --gap-60: 3.75rem;
  --gap-118: 7.375rem;
  /* Padding */
  --padding-10: 0.625rem;
  --padding-16: 1rem;
  --padding-30: 1.875rem;
  --padding-60: 3.75rem;
  /* BorderRadius */
  --br-4: 4px;
  --br-10: 10px;
  --br-16: 16px;
  /* Font */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Roboto', sans-serif;
  --font-inter: Inter;
  /* FontSize */
  --fs-16: 1rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-64: 4rem;
  /* Borders */
  --border-1: 4px solid var(--color-white);
  /* Shadows */
  --shadow-drop: 4px 4px 10px rgba(0, 0, 0, 0.75);
  --text-shadow-1: 0px 4px 10px rgba(0, 0, 0, 0.75);
  --text-shadow-2: 0px 4px 4px rgba(0, 0, 0, 0.75);
  /* WidthHeights */
  --height-24: 1.5rem;
  --height-32: 2rem;
  --height-60: 3.75rem;
  --width-24: 1.5rem;
  --width-200: 12.5rem;
  /* LineHeights */
  --lh-40: 2.5rem;
  /* Font colors */
  --color-text-primary: #d4af37;
  --color-text-white: #ffffff;
  --color-text-dark: #0f172a;
}

body {
  font-family: var(--font-jp);
  color: var(--color-white);
  background-color: var(--color-black);
  line-height: 1.6;
}

a {
  color: var(--color-text-white);
  text-decoration: none;
}
a:hover {
  color: var(--color-text-white);
  text-decoration: underline;
}

/* =========================================
   共通クラス (Utility)
   ========================================= */
/* コンテンツ幅を制限するコンテナ */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* セクション共通 */
.section {
  width: 100%;
  min-height: 100vh; /* 画面いっぱいに広げる */
  display: flex;
  align-items: center; /* 垂直中央揃え */
  justify-content: center;
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Header1 */
h1 {
  position: relative;
  font-size: clamp(1.75rem, 5.55vw, 5rem);
  font-family: Inter;
  font-weight: bold;
  color: var(--color-white);
  text-align: left;
  letter-spacing: 0.1rem;
}

/* Header2 */
h2 {
  position: relative;
  font-size: clamp(1.5rem, 4.445vw, 4rem);
  font-family: Inter;
  color: var(--color-white);
  text-align: left;
  text-shadow: var(--text-shadow-1);
}

/* =========================================
   Heroセクション
   ========================================= */
.hero {
  padding: 30px;
  flex-direction: column;
  gap: 32px;
  flex-shrink: 0;
  align-self: stretch;
  aspect-ratio: 16 / 9;
  background-image: url('images/hero/hero-background.jpg');
  background-image: image-set(
    url('images/hero/hero-background.webp') type('image/webp'),
    url('images/hero/hero-background.jpg') type('image/jpeg')
  );
}
@media (max-width: 768px) {
  .hero {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    isolation: isolate;
    gap: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: left;
    font-size: 28px;
    color: #fff;
    font-family: Inter;
    background-image: url('images/hero/hero-background-sp.jpg');
    background-image: image-set(
      url('images/hero/hero-background-sp.webp') type('image/webp'),
      url('images/hero/hero-background-sp.jpg') type('image/jpeg')
    );
  }
}

.tagline {
  position: relative;
  font-size: clamp(1rem, 2.78vw, 2.5rem);
  font-family: Inter;
  color: #fff;
  text-align: left;
}

.scroll-indicator-icon {
  width: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
@media (max-width: 768px) {
  .scroll-indicator-icon {
    width: 40px;
  }
}

/* =========================================
   Serviceセクション
   ========================================= */
.service {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 3.75rem;
  box-sizing: border-box;
  gap: 3.75rem;
  text-align: left;
  aspect-ratio: 16 / 9;
  background-image: url('images/service/service-background.jpg');
  background-image: image-set(
    url('images/service/service-background.webp') type('image/webp'),
    url('images/service/service-background.jpg') type('image/jpeg')
  );
}
@media (max-width: 768px) {
  .service {
    aspect-ratio: unset;
    padding: 1rem;
    gap: 1rem;
    background-image: url('images/service/service-background-sp.jpg');
    background-image: image-set(
      url('images/service/service-background-sp.webp') type('image/webp'),
      url('images/service/service-background-sp.jpg') type('image/jpeg')
    );
  }
}

.service-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--gap-30);
  text-align: center;
}
@media (max-width: 768px) {
  .service-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}

.service-card {
  aspect-ratio: 3 / 4;
  max-height: 80vh;
  align-self: stretch;
  flex: 1;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 4px solid #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.875vw;
  gap: 3vw;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 768px) {
  .service-card {
    aspect-ratio: unset;
    max-height: none;
    padding: 1.5rem;
    gap: 1.5rem;
  }
}

.service-icon {
  position: relative;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.75));
  overflow: hidden;
  object-fit: cover;
  height: 28.933%;
}

.service-title {
  height: 10.648vw;
  min-height: 115px;
  position: relative;
  font-size: clamp(1.25rem, 2.22vw, 1.75rem);
  display: flex;
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: center;
  align-items: flex-start;
  justify-content: center;
  text-shadow: var(--text-shadow-1);
}
@media (max-width: 768px) {
  .service-title {
    height: auto;
    min-height: auto;
  }
}

.service-description {
  font-size: clamp(1rem, 1.48vw, 1.5rem);
  display: inline-block;
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: center;
  text-shadow: var(--text-shadow-1);
}

/* =========================================
   About us セクション
   ========================================= */
.about-us {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 3.75rem;
  box-sizing: border-box;
  gap: 3.75rem;
  text-align: left;
  aspect-ratio: 16 / 9;
  background-image: url('images/service/about-us-background.jpg');
  background-image: image-set(
    url('images/about-us/about-us-background.webp') type('image/webp'),
    url('images/about-us/about-us-background.jpg') type('image/jpeg')
  );
}
@media (max-width: 768px) {
  .about-us {
    aspect-ratio: unset;
    padding: 1rem;
    gap: 1rem;
    background-image: url('images/about-us/about-us-background-sp.jpg');
    background-image: image-set(
      url('images/about-us/about-us-background-sp.webp') type('image/webp'),
      url('images/about-us/about-us-background-sp.jpg') type('image/jpeg')
    );
  }
}

.about-us-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-inter);
  border: 4px solid var(--color-white);
}
@media (max-width: 768px) {
  .about-us-wrapper {
    font-size: var(--fs-24);
  }
}

.about-us-row {
  align-self: stretch;
  background-color: var(--color-gray-200);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: var(--padding-16);
  gap: var(--gap-118);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 768px) {
  .about-us-row {
    flex-direction: column;
    gap: var(--gap-16);
  }
}

.border-top {
  border-top: 4px solid var(--color-white);
}

.about-us-row .label {
  width: 12.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .about-us-row .label {
    width: 100%;
    justify-content: flex-start;
  }
}

.about-us-row .content {
  flex: 1;
  width: 100%;
  position: relative;
  font-size: var(--fs-24);
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: left;
  display: inline-block;
}
@media (max-width: 768px) {
  .about-us-row .content {
    font-size: var(--fs-16);
  }
}

/* =========================================
   Contacts セクション
   ========================================= */
.contacts {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 3.75rem;
  box-sizing: border-box;
  gap: 1rem;
  text-align: left;
  background-image: url('images/contacts/contacts-background.jpg');
  background-image: image-set(
    url('images/contacts/contacts-background.webp') type('image/webp'),
    url('images/contacts/contacts-background.jpg') type('image/jpeg')
  );
}
@media (max-width: 768px) {
  .contacts {
    aspect-ratio: unset;
    padding: 1rem;
    gap: 1rem;
    background-image: url('images/contacts/contacts-background-sp.jpg');
    background-image: image-set(
      url('images/contacts/contacts-background-sp.webp') type('image/webp'),
      url('images/contacts/contacts-background-sp.jpg') type('image/jpeg')
    );
  }
}

.contacts-wrapper {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-20);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white);
  font-family: var(--font-inter);
}
@media (max-width: 768px) {
  .contacts-wrapper {
    gap: var(--gap-30);
  }
}

.contacts-form-group {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .contacts-form-group {
    width: 100%;
  }
}

.contacts-form-group .label {
  align-self: stretch;
  position: relative;
}

.contacts-form-group .input-field {
  align-self: stretch;
  position: relative;
  border-radius: var(--br-10);
  background-color: var(--color-gray-100);
  border: 4px solid var(--color-white);
  box-sizing: border-box;
  padding: 0.5rem;
}

.contacts-form-group .textarea-field {
  align-self: stretch;
  position: relative;
  border-radius: var(--br-10);
  background-color: var(--color-gray-100);
  border: 4px solid var(--color-white);
  box-sizing: border-box;
  padding: 0.5rem;
}

.contacts-checkbox-group {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: left;
  font-size: 1.5rem;
  color: var(--color-white);
  font-family: var(--font-inter);
}

.contacts-checkbox-group .checkbox-field {
  -webkit-appearance: none;
  appearance: none;
  width: var(--height-24);
  height: var(--height-24);
  position: relative;
  border-radius: 4px;
  border: 2px solid var(--color-white);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  background-color: var(--color-white);
}
.contacts-checkbox-group .checkbox-field:checked {
  background-color: var(--color-goldenrod);
}
.contacts-checkbox-group .checkbox-field:checked::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%) rotate(45deg);
  width: 9px;
  height: 16px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
}

.contacts-checkbox-group .privacy-policy-agreement {
  position: relative;
  font-size: 1rem;
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: left;
}

.contacts-form-button {
  width: 22.222vw;
  height: 3.75rem;
  position: relative;
  border-radius: 4px;
  border: 2px solid var(--color-white);
  background-color: var(--color-goldenrod);
  overflow: hidden;
  flex-shrink: 0;
  text-align: center;
  font-size: 1.5rem;
  color: var(--color-white);
  font-family: var(--font-inter);
  cursor: pointer;
}
@media (max-width: 768px) {
  .contacts-form-button {
    width: 100%;
  }
}
.contacts-form-button:disabled {
  background-color: var(--color-gray);
  border-color: var(--color-gray);
  cursor: not-allowed;
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.8);
}
.contacts-form-button:disabled:hover {
  transform: none;
  box-shadow: none;
  background-color: var(--color-gray);
}

/* =========================================
   Footer
   ========================================= */
footer {
  width: 100%;
  position: relative;
  background-color: var(--color-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 1.875rem 0.625rem;
  box-sizing: border-box;
  gap: 0.625rem;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white);
  font-family: var(--font-inter);
}
@media (max-width: 768px) {
  footer {
    flex-direction: column-reverse;
  }
}

footer .copyright {
  position: relative;
  font-size: 1rem;
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: left;
}

footer .link-group {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
  font-size: 1rem;
  color: var(--color-white);
  font-family: var(--font-inter);
}
@media (max-width: 768px) {
  footer .link-group {
    justify-content: center;
  }
}

/* =========================================
   Toast Notification
   ========================================= */
.toast {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 1rem;
  font-family: var(--font-inter);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.toast.show {
  visibility: visible;
  opacity: 1;
}

/* Validation Styles */
.input-field.error,
.textarea-field.error {
  border-color: #ff4d4d;
}
.error-message {
  color: #ff4d4d;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 4px rgba(0,0,0,0.8);
}