@charset "utf-8";

/* =========================================================
   プライバシーポリシー（privacy-1.html）専用 追補CSS
   - 読み込み順：reset.css → privacy_sp.css → common_sp.css（←共通が後）
   - 共通に上書きされにくいよう #main 配下に限定しつつ、セレクタを強めています
   ========================================================= */

/* -----------------------------
   カード風レイアウト（本文）
------------------------------*/
#main .policy {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  /* common_sp.css で main に padding があるため、内側だけ整える */
  padding: 2rem 1.6rem;
  box-sizing: border-box;
  /* PC時に横幅が広がりすぎないよう中央寄せを補助 */
  max-width: 960px;
  margin: 0 auto 2rem auto;
}

/* h1 と導入文・更新日の整形 */
#main .policy__header h1 {
  font-size: 2.0rem;
  line-height: 1.3;
  margin: 0 0 0.8rem 0;
}
#main .policy__header .lead {
  font-size: 1.5rem;
  color: #667085;
  margin: 0 0 1rem 0;
}
#main .policy__header .meta {
  font-size: 1.3rem;
  color: #667085;
  margin: 0 0 0.8rem 0;
}

/* -----------------------------
   目次（TOC）
------------------------------*/
#main .toc {
  background: #fff;
  border: 1px dashed #e6e6e6;
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
  margin: 1.8rem 0 2.4rem;
}
#main .toc__title {
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
  color: #667085;
}
#main .toc ol {
  margin: 0;
  padding-left: 1.8rem;
}
#main .toc a {
  color: #0f766e;
  text-decoration: none;
}
#main .toc a:hover {
  text-decoration: underline;
}

/* -----------------------------
   セクション見出し・本文
------------------------------*/
#main .section {
  margin: 2.4rem 0;
}
#main .section h2 {
  /* common_sp.css の main h2（下線）に加えて区別がつくよう左線を追加 */
  border-left: 4px solid #0f766e;
  padding-left: 1rem;
  margin: 0 0 1.2rem 0;
  font-size: 1.8rem; /* 既存ルールと整合 */
}
#main .section p,
#main .section li {
  font-size: 1.4rem;
  line-height: 1.8;
}
#main .section ul {
  padding-left: 2rem;
  margin: 0;
}

/* -----------------------------
   お問い合わせボックス
------------------------------*/
#main .contact address {
  font-style: normal;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
}

/* -----------------------------
   記事フッター
------------------------------*/
#main .policy__footer {
  margin-top: 2.4rem;
  text-align: right;
  color: #667085;
  font-size: 1.3rem;
}

/* -----------------------------
   リンク色（本文内だけ）
------------------------------*/
#main a {
  color: #0f766e;
}
#main a:hover {
  opacity: .9;
}

/* -----------------------------
   横ズレ/はみ出し対策（本文エリア限定）
------------------------------*/
#main, 
#main * {
  box-sizing: border-box;
}
#main img, 
#main table, 
#main pre, 
#main code {
  max-width: 100%;
  height: auto;
  overflow-wrap: anywhere;
}

/* -----------------------------
   タブレット以上の微調整
------------------------------*/
@media screen and (min-width: 768px) {
  /* common_sp.css では main が右浮動 76%、sidebar ありの2カラム。
     中身の policy は中央寄せ＋最大幅保持で読みやすく。 */
  #main .policy {
    padding: 2.4rem 2rem;
    margin: 0 auto 2.4rem auto;
  }
}

/* -----------------------------
   デスクトップの微調整
------------------------------*/
@media screen and (min-width: 1200px) {
  #main .policy {
    padding: 2.8rem 2.4rem;
    margin-bottom: 3rem;
  }
}

/* -----------------------------
   印刷（目次は非表示・装飾オフ）
------------------------------*/
@media print {
  #main .toc { display: none; }
  #main .policy {
    box-shadow: none;
    border: none;
    background: #fff;
  }
}
/* ==== フッターの絡み落ち対策（タブレット以上） ==== */
@media screen and (min-width: 768px) {
  /* main の下にある要素は浮動解除して1段下へ */
  #pagetop,
  footer {
    clear: both;
    float: none;
    width: 100%;
  }
}

/* 念のため：本文カードも左右はみ出さないよう中央寄せ維持 */
@media screen and (min-width: 768px) {
  #main .policy {
    margin-left: auto;
    margin-right: auto;
  }
}
/* ===== 1) タブレット以上で #main を中央寄せ（右ズレ解消） ===== */
@media screen and (min-width: 768px) {
  #gradation #main {
    float: none !important;      /* common_sp.css の float:right を無効化 */
    width: 100% !important;      /* 幅をいったん100%に */
    max-width: 960px;            /* 読み幅の上限 */
    margin: 0 auto;              /* 中央寄せ */
    padding-top: 50px;           /* 既存の余白を維持 */
  }
  /* サイドバーを使わない前提なら保険として無効化 */
  #sidebar { display: none !important; }
}

/* ===== 2) カード風レイアウトを無効化（背景/枠/影/丸みを外す） ===== */
#main .policy {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;         /* 余白も不要なら0。本文に余白を残したい場合は適宜調整 */
  max-width: none !important;
  margin: 0 !important;
}

/* プライバシーポリシーページの見出し上の横線を消す */
.policy__header,
.policy__header h1 {
  border-top: none !important;
}

.policy__header h1::before,
.policy__header h1::after {
  content: none !important;
  border: none !important;
  background: none !important;
}
/* プライバシーポリシーページ - 見出し上の余白を減らす */
#gradation #topic-path {
  margin-bottom: 0.5em !important;  /* パンくず下の余白を縮小 */
}

#gradation #main {
  padding-top: 0 !important;        /* mainの内側余白を削除 */
  margin-top: 0 !important;         /* mainの外側余白を削除 */
}

#gradation #main .policy {
  margin-top: 0 !important;         /* articleの上余白を削除 */
  padding-top: 0 !important;
}

#gradation #main .policy__header {
  margin-top: 1em !important;     /* header自体の余白を調整 */
  margin-bottom: 2em !important;     /* header自体の余白を調整 */}
/* プライバシーポリシーページの見出しスタイル */
.policy__header h1 {
  border-top: none !important;                   /* 上の線は消す */
  border-bottom: solid 2px #145a24 !important;   /* 暗い緑で細めの下線 */
  padding-bottom: 0.2em;                         /* 下線との間隔を少し狭める */
  margin-bottom: 0.8em;                          /* 本文との余白もやや狭め */
}
/* ページトップアイコンを親幅の15%に */
#pagetop img {
  width: 15%;
  height: auto;         /* アスペクト比を維持 */
  max-width: 50px;      /* これ以上大きくしない */
  min-width: 30px;      /* これ以上小さくしない（お好みで） */
}
/* フッターのSNSアイコンをレスポンシブに */
.icon img {
  width: 5%;           /* 親幅に対しての％指定（お好みで調整） */
  height: auto;
  max-width:50px;     /* PCでの上限サイズ */
  min-width: 30px;     /* スマホでの下限サイズ */
}
/* フッターのリンク：通常時は黒、hover時に緑 */
footer .sub a {
  color: #000 !important;      /* 通常時は黒に固定 */
  text-decoration: none;
  transition: color 0.3s;
}

footer .sub a:hover {
  color: #1d9a39 !important;   /* hover時だけ緑に */
}
/* フッターの会社名リンクだけ上書き */
footer address a {
  color: #000 !important;       /* 通常時は黒 */
  text-decoration: none;
  transition: color 0.3s;
}

footer address a:hover {
  color: #1d9a39 !important;    /* hover時に緑 */
}
/* #main 内のすべての h2 に下線を付ける */
#main h2 {
  display: block;
  width: 100%;                        /* #main の幅いっぱい */
  border-bottom: 2px solid #145a24;   /* 暗い緑の実線 */

}
/* ==== モバイル & タブレット時に両サイド余白をつける ==== */

/* モバイル（～767px） */
@media screen and (max-width: 767px) {
  #main .policy {
    margin-left: 3% !important;
    margin-right: 3% !important;
    width: auto !important;
  }
}

/* タブレット（768～1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #main .policy {
    margin-left: 3% !important;
    margin-right: 3% !important;
    width: auto !important;
  }
}