/* ==============================================================================
 * 1. タブパネルの表示・非表示制御（ベース：スマホ縦向き）
 * ============================================================================== */
/* 初期状態はすべてのパネルを非表示にする */
.p-policy-tab-content .p-policy-panel {
  display: none;
  scroll-margin-top: 80px;
}
@media screen and (min-width: 768px) and (min-height: 501px) {
  .p-policy-tab-content .p-policy-panel {
    scroll-margin-top: 95px;
  }
}
/* 「is-active」というクラスがついているパネルだけを画面に表示する */
.p-policy-tab-content .p-policy-panel.is-active {
  display: block;
}

/* ==============================================================================
 * 2. タブナビゲーションボタンの装飾（ベース：スマホ縦向き）
 * ============================================================================== */
.p-policy-nav-btn {
  display: block;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: bold;
  color: #142f40;
  background: transparent;
  border: 2px solid #142f40;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* アクティブ（選択中）のボタンの見た目 */
.p-policy-nav-btn.is-active-btn {
  background: #142f40;
  color: #e7decd;
  border-color: #142f40;
  box-shadow: 0 4px 15px rgba(20, 47, 64, 0.3);
}

/* 🚀 長い文字ボタン（Webサイトご利用に伴う…）のレスポンシブ制御 */
/* スマホ時（〜767px）：1行を占有させて綺麗に折り返す */
.p-policy-nav-item:has([data-target="tab-panel-web-policy"]) {
  width: 100%;
}

.p-policy-nav-item:has([data-target="tab-panel-web-policy"]) .p-policy-nav-btn {
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ==============================================================================
 * 3. ポリシーコンテンツ：基本構造 ＆ テキスト（ベース：スマホ縦向き）
 * ============================================================================== */
.p-policy-nav-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 20px;
  text-align: center;
}

.p-policy-nav-list {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  gap: 12px 16px;
  list-style: none;
}

.p-policy-privacy {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px; /* モバイルファースト：スマホ用の上下padding */
  font-family: sans-serif;
  color: #333333;
}

.p-policy-privacy-hero {
  margin-bottom: 40px;
}

.p-policy-privacy-main-title {
  font-size: 1.5rem; /* モバイルファースト：スマホ用のフォントサイズ */
  color: #142f40;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
}

.p-policy-privacy-section-title {
  font-size: 1.3rem; /* モバイルファースト：スマホ用のフォントサイズ */
  color: #142f40;
  border-bottom: 2px solid #142f40;
  padding-bottom: 8px;
  margin: 40px 0 20px; /* モバイルファースト：スマホ用の余白 */
  font-weight: bold;
}

.p-policy-privacy-sub-title {
  font-size: 1.1rem; /* モバイルファースト：スマホ用のフォントサイズ */
  color: #142f40;
  margin: 30px 0 15px; /* モバイルファースト：スマホ用の余白 */
  font-weight: bold;
  line-height: 1.5;
}

.p-policy-privacy-lead {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
}

.p-policy-privacy-text {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 12px 0;
}

.p-policy-privacy-text--bold {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 25px 0 10px 0;
  font-weight: bold;
}

.p-policy-privacy-text--noborder {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.p-policy-privacy-text--note {
  font-size: 0.85rem;
  color: #666666;
  margin-top: 15px;
}

.p-policy-privacy-strong-label {
  font-weight: bold;
  color: #142f40;
}

.p-policy-privacy-span--block {
  display: block;
  margin-bottom: 5px;
}

/* ==============================================================================
 * 4. ポリシーコンテンツ：各種リスト ＆ ボックス（ベース：スマホ縦向き）
 * ============================================================================== */
.p-policy-privacy-statement-list {
  padding-left: 20px;
  margin: 30px 0;
}

.p-policy-privacy-statement-list li {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 15px;
}

.p-policy-privacy-indent-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 20px 0;
}

.p-policy-privacy-indent-list li {
  font-size: 0.95rem;
  line-height: 1.7;
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 8px;
}

.p-policy-privacy-signature {
  text-align: right;
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 40px 0;
}

.p-policy-privacy-contact-box,
.p-policy-privacy-destination-box {
  background-color: #f7f9fa;
  border-left: 4px solid #142f40;
  padding: 20px;
  margin: 20px 0;
}

.p-policy-privacy-destination-ttl {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: #142f40;
}

.p-policy-privacy-sub-section {
  margin-top: 15px;
  padding-left: 10px;
}

.p-policy-privacy-sub-section-label {
  display: block;
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 5px;
}

.p-policy-privacy-email-img {
  vertical-align: middle;
  display: inline-block;
}

/* ==============================================================================
 * 5. ポリシーコンテンツ：テーブル設計（ベース：スマホ縦向き）
 * ============================================================================== */
.p-policy-privacy-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 30px;
}

.p-policy-privacy-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.6;
}

.p-policy-privacy-table th,
.p-policy-privacy-table td {
  border: 1px solid #cccccc;
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
}

.p-policy-privacy-table th {
  background-color: #f2f5f7;
  color: #142f40;
  font-weight: bold;
  text-align: center;
}

.p-policy-privacy-td--category {
  background-color: #fafbfc;
  font-weight: bold;
  color: #142f40;
}

.p-policy-privacy-td--indent {
  font-weight: bold;
  background-color: #fafbfc;
}

.p-policy-privacy-td--center {
  text-align: center !important;
  vertical-align: middle;
}

.p-policy-privacy-nested-list-wrapper {
  padding: 0;
}

.p-policy-privacy-nested-list {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.p-policy-privacy-nested-list li {
  margin-bottom: 4px;
}

/* ==============================================================================
 * 6. コンバージョン・アクションエリア（ベース：スマホ縦向き）
 * ============================================================================== */
.p-policy-privacy-action-box {
  background-color: #f0f4f7;
  border: 1px solid #d1dbe0;
  border-radius: 6px;
  padding: 30px 20px;
  text-align: center;
  margin: 50px 0 20px;
}

.p-policy-privacy-action-text {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 20px 0;
  color: #142f40;
}

.p-policy-privacy-action-text--small {
  font-size: 0.85rem;
  font-weight: normal;
  color: #555555;
}

.p-policy-privacy-btn-wrapper {
  display: block;
}

.p-policy-privacy-btn {
  display: inline-block;
  background-color: #d9534f;
  color: #ffffff;
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition:
    background-color 0.2s ease-in-out,
    transform 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ==============================================================================
 * 7. 指定ブレイクポイントに基づくレスポンシブ対応
 * ============================================================================== */

/* ── タブレット・PC（768px以上 ＆ 501px以上） ── */
@media screen and (min-width: 768px) and (min-height: 501px) {
  /* 🚀 PC表示：幅を自動（インライン）に戻し、折り返しを防止して他のボタンと馴染ませる */
  .p-policy-nav-item:has([data-target="tab-panel-web-policy"]) {
    width: auto;
  }

  .p-policy-nav-item:has([data-target="tab-panel-web-policy"])
    .p-policy-nav-btn {
    white-space: nowrap;
    padding: 10px 24px;
  }

  /* PC環境限定のホバーインタラクション効果 */
  .p-policy-nav-btn:hover {
    background: #142f40;
    color: #ffffff;
  }

  .p-policy-privacy-btn:hover {
    background-color: #c9302c;
    color: #ffffff;
  }

  .p-policy-privacy-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }

  /* PC用にテキストサイズとレイアウト余白を最適化 */
  .p-policy-privacy {
    padding: 60px 20px;
  }

  .p-policy-privacy-main-title {
    font-size: 2rem;
  }

  .p-policy-privacy-section-title {
    font-size: 1.6rem;
    margin: 50px 0 25px;
  }

  .p-policy-privacy-sub-title {
    font-size: 1.15rem;
    margin: 35px 0 15px;
  }
}

/* ── 大型モニター（1024px以上 ＆ 501px以上） ── */
@media screen and (min-width: 1024px) and (min-height: 501px) {
  /* 必要に応じて記述 */
}

/* ==============================================================================
 * 追加：コンテンツ内のリンクテキスト制御
 * ============================================================================== */
.p-policy-privacy a {
  color: #142f40; /* テキストと同じか、やや濃いめのブランドカラー */
  text-decoration: underline; /* 常に下線を表示してリンクと認識させる */
  font-weight: bold; /* 少し太くして視認性をアップ */
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

/* マウスホバー時のインタラクション */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .p-policy-privacy a:hover {
    color: #d9534f; /* アクションボタンと同系色の赤などで変化をつける */
    text-decoration: underline;
  }
}

/* ==============================================================================
 * 追加：行動規範・規程向け微調整（既存のスタイルを壊さない追加クラス）
 * ============================================================================== */

/* 1. 見出し（.p-policy-privacy-sub-title）の前に、スクリーンショットにあるようなアイコンや、程よい余白を補助する設定 */
.p-policy-privacy-body .p-policy-privacy-sub-title {
  position: relative;
  padding-left: 0;
  margin-top: 35px;
  margin-bottom: 12px;
}

/* 2. リード文（.p-policy-privacy-lead）の行間や文字間を読みやすく調整 */
.p-policy-privacy-lead {
  text-align: justify;
  text-justify: inter-character;
}

/* 3. 署名エリア（.p-policy-privacy-signature）の文字揃え・PC時の配置調整 */
.p-policy-privacy-signature {
  text-align: right;
  margin-top: 50px;
  font-size: 0.95rem;
  line-height: 2;
}

/* タブレット・PC時（768px以上）の余白補正 */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .p-policy-privacy-body .p-policy-privacy-sub-title {
    margin-top: 45px;
    margin-bottom: 15px;
  }
}