/*
 Theme Name: SERUM Child
 Template: serum_tcd096
 Version: 1.0
*/
@import url("../serum_tcd096/style.css");
/* ここから子テーマ用CSSを書く */

/* テキストカラーを白に統一 */
.service-banner__content,
.service-banner__content span,
.service-banner__en,
.service-banner__jp {
  color: #ffffff !important;
}

/* グリッド（4カラム / 2カラム）はそのまま継続 */
.service-banners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .service-banners {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* カード全体の基本 */
.service-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  color: #ffffff;
}

/* 画像 */
.service-banner__image,
.service-banner__image img {
  width: 100%;
  height: 100%;
}

.service-banner__image img {
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* レイヤー（半透明のかぶせ） */
.service-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 28, 36, 0.55),   /* 上：薄めのネイビー */
    rgba(44, 58, 69, 0.65)  /* 下：濃いめ */
  );
  pointer-events: none;
}

/* テキストを中央に重ねる */
.service-banner__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  z-index: 1;
}

.service-banner__en {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.service-banner__jp {
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ホバー演出（PC） */
.service-banner:hover .service-banner__image img {
  transform: scale(1.05);
}

.service-banner:hover .service-banner__overlay {
  background: linear-gradient(
    to bottom,
    rgba(60, 67, 71, 0.35),
    rgba(60, 67, 71, 0.85)
  );
}

/*
 カレンダー
*/
.offshore-calendar {
  width: 100%;
  margin-bottom: 60px; /* カレンダー同士の余白 */
}

/* スマホ時はカレンダーを横スクロール表示にする */
@media (max-width: 768px) {

  /* カレンダー全体を横スクロール可能に */
  .offshore-calendar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* テーブルの最小幅を固定（画面より広く） */
  .offshore-calendar__table {
    min-width: 720px;   /* 好みに応じて 640〜800px くらいで調整 */
  }

  /* セルの中身を少しコンパクトにする（任意） */
  .offshore-calendar__table th,
  .offshore-calendar__table td {
    padding: 4px;
    font-size: 11px;
  }
}
/* -------------------------------------------
   親テーマ SERUM の Contact Form 7 スタイルを解除
------------------------------------------- */
.wpcf7 {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: inherit !important;
}
/* -------------------------------------------------------
   OFFSHORE フォーム - Modern UI
------------------------------------------------------- */

.contact-request {
  max-width: 720px;
  margin: 0 auto 80px;
  padding: 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

.contact-request h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 24px 0 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid #f0f0f0;
}

.contact-request label {
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.contact-request .required {
  color: #e53935;
  font-size: 12px;
  margin-left: 6px;
  font-weight: 700;
}

.contact-request input[type="text"],
.contact-request input[type="email"],
.contact-request input[type="tel"],
.contact-request input[type="date"],
.contact-request textarea,
.contact-request select {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fafafa;
  transition: all 0.25s ease;
}

.contact-request input:focus,
.contact-request textarea:focus,
.contact-request select:focus {
  border-color: #3b82f6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  outline: none;
}

.contact-request textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-request .form-row {
  margin-bottom: 24px;
}

/* 2カラムレイアウト */
.contact-request .form-row-2col {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.contact-request .form-row-2col .form-col {
  flex: 1 1 0;
}

@media (max-width: 767px) {
  .contact-request .form-row-2col {
    flex-direction: column;
    gap: 16px;
  }
}

.contact-request .agree-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
}

.contact-request .submit-row {
  text-align: center;
  margin-top: 32px;
}

.contact-request input[type="submit"] {
  background: #3b82f6;
  color: #fff;
  font-size: 16px;
  padding: 14px 40px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(59,130,246,0.3);
  transition: 0.25s ease;
}

.contact-request input[type="submit"]:hover {
  background: #2563eb;
  box-shadow: 0 8px 20px rgba(59,130,246,0.4);
}

.contact-request input[type="submit"]:active {
  transform: translateY(2px);
}
/* -------------------------------------------------------
   OFFSHORE CTA BUTTON - Modern UI
------------------------------------------------------- */

.offshore-cta {
  text-align: center;
  margin: 60px auto;
}

.offshore-cta__btn {
  display: inline-block;
  padding: 16px 48px;
  background: #3b82f6;
  color: #ffffff !important;   /* ← テキストを白に固定 */
  font-size: 18px;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(59,130,246,0.35);
  transition: all 0.25s ease;
}

.offshore-cta__btn:hover {
  background: #2563eb;
  color: #ffffff !important;   /* ← ホバー時も白固定 */
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(59,130,246,0.45);
}

.offshore-cta__btn:active {
  background: #1d4ed8;
  color: #ffffff !important;   /* ← クリック時も白固定 */
  transform: translateY(1px);
  box-shadow: 0 4px 14px rgba(59,130,246,0.3);
}

/* =====================================================
   プライバシーポリシーページ
===================================================== */
.policy-page {
  max-width: 860px;
  margin: 60px auto;
  padding: 40px 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  color: #333;
  line-height: 1.9;
  font-size: 15px;
}

/* 見出し */
.policy-page h1 {
  font-size: 26px;
  margin-bottom: 24px;
  font-weight: 700;
  text-align: center;
}

.policy-page h2 {
  font-size: 20px;
  margin: 40px 0 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 700;
}

.policy-page h3 {
  font-size: 17px;
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 700;
}

/* 段落 */
.policy-page p {
  margin-bottom: 16px;
}

/* リスト */
.policy-page ul,
.policy-page ol {
  margin: 12px 0 20px 24px;
}

.policy-page li {
  margin-bottom: 8px;
}

/* テーブル（もし使う場合） */
.policy-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.policy-page th,
.policy-page td {
  border: 1px solid #ddd;
  padding: 10px 14px;
}

.policy-page th {
  background: #f7f7f7;
  font-weight: 700;
}

/* スマホ最適化 */
@media (max-width: 768px) {
  .policy-page {
    padding: 28px 20px;
    margin: 40px auto;
  }

  .policy-page h1 {
    font-size: 22px;
  }

  .policy-page h2 {
    font-size: 18px;
  }
}

/* =====================================================
   特定商取引法ページ
===================================================== */

.tokusho-page {
  max-width: 860px;
  margin: 60px auto;
  padding: 40px 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  color: #333;
  line-height: 1.9;
  font-size: 15px;
}

.tokusho-page h1 {
  font-size: 26px;
  margin-bottom: 32px;
  font-weight: 700;
  text-align: center;
}

/* テーブル */
.tokusho-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.tokusho-table th,
.tokusho-table td {
  border: 1px solid #e5e7eb;
  padding: 16px 18px;
  vertical-align: top;
}

.tokusho-table th {
  width: 28%;
  background: #f9fafb;
  font-weight: 700;
  font-size: 15px;
}

.tokusho-table td {
  background: #ffffff;
  font-size: 15px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .tokusho-page {
    padding: 28px 20px;
    margin: 40px auto;
  }
  .tokusho-table th,
  .tokusho-table td {
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* ----------------------------------------------------
   お問い合わせ一覧ページ
---------------------------------------------------- */

.contact-list-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* カード一覧グリッド */
.contact-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 28px;
}

/* 各カード */
.contact-card {
  display: block;
  padding: 28px 32px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  position: relative;
  text-decoration: none;
  transition: 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* タイトル */
.contact-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #111;
}

/* 説明文 */
.contact-card p {
  color: #444;
  font-size: 14px;
  line-height: 1.6;
}

/* 右矢印アイコン */
.contact-card__icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #0057ff;
  font-weight: 700;
}
/* ----------------------------------------------------
   お問い合わせ一覧ページ
---------------------------------------------------- */

.contact-list-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* カード一覧グリッド */
.contact-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 28px;
}

/* 各カード */
.contact-card {
  display: block;
  padding: 28px 32px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  position: relative;
  text-decoration: none;
  transition: 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* タイトル */
.contact-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #111;
}

/* 説明文 */
.contact-card p {
  color: #444;
  font-size: 14px;
  line-height: 1.6;
}

/* 右矢印アイコン */
.contact-card__icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #0057ff;
  font-weight: 700;
}

/* ----------------------------------------------------
   下部 CTAボタン
---------------------------------------------------- */

.contact-bottom-cta {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.contact-cta-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s ease;
}

/* 電話 */
.contact-cta-btn.tel {
  background: #1f2937;
  color: #fff;
}

.contact-cta-btn.tel:hover {
  background: #111827;
}

/* お問い合わせフォーム */
.contact-cta-btn.form {
  background: #1f2937;
  color: #fff;
}

.contact-cta-btn.form:hover {
  background: #111827;
}

/* アイコン */
.contact-cta-btn .ico {
  font-size: 20px;
}

/* SP */
@media (max-width: 600px) {
  .contact-card-list {
    grid-template-columns: 1fr;
  }
}