/* ==================================================
   富士梱包 お問い合わせページ STYLES
   Figmaに専用デザインなし。内部ページ共通パターン＋CF7フォーム
   ================================================== */

/* ---------- Global (contact-page) ---------- */
.contact-page *, .contact-page *::before, .contact-page *::after {
  box-sizing: border-box;
}
.contact-page { margin: 0; padding: 0; background: var(--color-bg-gray, #f3f3f3); }
.contact-page ul  { list-style: none; margin: 0; padding: 0; }
.contact-page a   { text-decoration: none; color: inherit; }
.contact-page img { display: block; max-width: 100%; }
.contact-page p   { margin: 0; }
.contact-page h1, .contact-page h2, .contact-page h3 { margin: 0; }

/* Header（内部ページは Navy Black 背景） */
.contact-page .top-header {
  background: rgba(0, 12, 33, .9);
}

/* ==================================================
   PAGE HEADER（company-header と同パターン）
   ================================================== */
.contact-header {
  background: #000c21;
  width: 100%;
}

.contact-header__title {
  padding: 100px 40px 60px;
  display: flex;
  align-items: flex-end;
  min-height: 250px;
}

.contact-header__title-inner {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.contact-title-group {
  display: flex;
  align-items: stretch;
  gap: 30px;
  flex-shrink: 0;
}

.contact-title-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.contact-title-en {
  font-family: var(--font-deco, 'Helvetica Neue', sans-serif);
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
}

.contact-title-ja {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2.4px;
}

.contact-title-sep {
  width: 5px;
  background: var(--color-red, #ca242e);
  align-self: stretch;
}

/* ==================================================
   SECTIONS
   ================================================== */
.contact-section {
  padding: 80px 40px;
}

.contact-section__container {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.contact-section--form {
  background: #fff;
}

.contact-intro {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 2;
  color: var(--color-text, #3e3e3e);
  text-align: center;
}

/* ---- 電話カード ---- */
.contact-tel-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-tel-card {
  background: #fff;
  padding: 35px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, 100%);
}

.contact-tel-card__office {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.7px;
  color: var(--color-text, #3e3e3e);
}

.contact-tel-card__address {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 14px;
  letter-spacing: .7px;
  color: var(--color-text, #3e3e3e);
}

.contact-tel-card__number {
  font-family: var(--font-en, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 2.8px;
}

.contact-tel-card__number a { color: var(--color-blue, #0050d1); }

.contact-tel-card__fax {
  font-family: var(--font-en, 'Poppins', sans-serif);
  font-size: 14px;
  letter-spacing: 1.4px;
  color: #666;
}

/* ==================================================
   CF7 FORM
   ================================================== */
.contact-form {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  color: var(--color-text, #3e3e3e);
}

.cf7-field {
  margin-bottom: 28px;
}

.cf7-field label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1.6;
}

.cf7-required {
  display: inline-block;
  background: var(--color-red, #ca242e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 3px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text, #3e3e3e);
  background: var(--color-bg-gray, #f3f3f3);
  border: 1px solid #ddd;
  border-radius: 4px;
}

.contact-form textarea { min-height: 200px; resize: vertical; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-blue, #0050d1);
  outline-offset: 0;
  background: #fff;
}

.cf7-submit {
  text-align: center;
  margin-top: 40px;
}

.contact-form input[type="submit"] {
  background: var(--color-blue, #0050d1);
  color: #fff;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  border: none;
  width: 220px;
  height: 50px;
  cursor: pointer;
  transition: opacity .2s;
}
.contact-form input[type="submit"]:hover { opacity: .85; }

/* CF7 バリデーション表示の色味調整 */
.contact-form .wpcf7-not-valid-tip {
  font-size: 13px;
  margin-top: 6px;
}
.contact-form .wpcf7-response-output {
  margin: 30px 0 0;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: .7px;
}

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 767px) {
  .contact-header__title {
    padding: 90px 20px 40px;
    min-height: 180px;
  }
  .contact-title-en { font-size: 40px; }

  .contact-section { padding: 50px 20px; }
  .contact-tel-card { padding: 25px 20px; }
  .contact-tel-card__number { font-size: 24px; }
}

/* 送信ボタンのホバー：薄くする → デザインの青ボタンと同じ濃紺に（2026-10-08） */
.contact-form input[type="submit"] { transition: background-color .2s; }
.contact-form input[type="submit"]:hover { opacity: 1; background: var(--color-blue-hover, #00307d); }