/* ══════════════════════════════════════════
   contact.css — Contact ページ専用スタイル
══════════════════════════════════════════ */

/* ─────────────────────
   nav active
───────────────────── */

/* ─────────────────────
   Hero
───────────────────── */
.ct-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
}

.ct-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.ct-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(21,20,21,0)    0%,
    rgba(21,20,21,0)    60%,
    rgba(21,20,21,.8)   85%,
    rgba(21,20,21,1)   100%
  );
  z-index: 1;
}

.ct-hero-content {
  position: absolute;
  bottom: clamp(32px, 6vw, 70px);
  left: clamp(5%, 8vw, 10%);
  z-index: 2;
}

.ct-hero-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: .1em;
  color: rgba(239,228,211,.75);
  margin-bottom: 12px;
}

.ct-hero-title-img {
  width: clamp(260px, 42vw, 700px);
  height: auto;
  display: block;
}

.ct-hero-title-text {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 600;
  color: var(--cream);
  line-height: 1;
}

/* ─────────────────────
   Body
───────────────────── */
.ct-body {
  background: var(--dark);
  padding: clamp(32px, 4vw, 60px) clamp(5%, 8vw, 10%) clamp(60px, 8vw, 120px);
}

.ct-heading {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .08em;
  color: #fff;
  margin: 0 0 clamp(20px, 2.5vw, 36px);
}

.ct-inner {
  display: flex;
  gap: clamp(48px, 8vw, 120px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

/* ─── Left ─── */
.ct-left {
  flex: 0 0 auto;
  width: clamp(260px, 36vw, 480px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

.ct-desc {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(12px, 1.3vw, 18px);
  line-height: 2;
  letter-spacing: .06em;
  color: var(--cream);
}

.ct-sns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.ct-sns-btn {
  width: fit-content;
}

/* ─── Right: Form ─── */
.ct-form {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ct-form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-label {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .1em;
  color: #fff;
}

.ct-input,
.ct-textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: .06em;
  padding: 14px 18px;
  outline: none;
  transition: border-color .3s;
  -webkit-appearance: none;
  border-radius: 8px;
}

.ct-input::placeholder,
.ct-textarea::placeholder {
  color: rgba(255,255,255,.3);
}

.ct-input:focus,
.ct-textarea:focus {
  border-color: rgba(255,255,255,.9);
}

.ct-textarea {
  resize: vertical;
  min-height: 160px;
}

.ct-submit-wrap {
  display: flex;
  justify-content: center;
}

.ct-submit {
  cursor: pointer;
  background: none;
  font-family: 'Shippori Mincho', serif;
  width: 240px;
  justify-content: center;
}

.ct-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-privacy-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(12px, 1.1vw, 14px);
  color: rgba(239,228,211,.75);
  letter-spacing: .06em;
}

.ct-privacy-check {
  width: 16px;
  height: 16px;
  accent-color: rgba(200,90,28,.9);
  cursor: pointer;
  flex-shrink: 0;
}

.ct-privacy-link {
  color: var(--cream);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: rgba(239,228,211,.4);
  transition: text-decoration-color .25s;
}

@media (hover: hover) and (pointer: fine) {
  .ct-privacy-link:hover {
    text-decoration-color: var(--cream);
  }
}

.ct-heading-em {
  font-style: normal;
  font-weight: 600;
  color: rgba(200,90,28,.9);
  letter-spacing: .1em;
}


/* ─────────────────────
   スマホ
───────────────────── */
@media (max-width: 700px) {
  .ct-hero {
    height: 55vh;
    min-height: 340px;
  }

  .ct-hero-title-img {
    width: clamp(220px, 72vw, 400px);
  }

  .ct-inner {
    flex-direction: column;
    gap: 48px;
  }

  .ct-left {
    width: 100%;
  }

  .ct-desc {
    font-size: 13px;
    text-align: justify;
  }

  .ct-sns {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .ct-sns-btn {
    width: auto;
  }

  .ct-form {
    width: 100%;
    margin-top: 0;
    box-sizing: border-box;
  }

  .ct-submit {
    width: 200px;
    padding: 16px 0;
  }
}

/* 大画面でも送信ボタンの文字は大きくしすぎない */
@media (min-width: 1440px) {
  .ct-submit { font-size: 16px; }
}