/* =========================================================
   legal-notice.css（cancel-policy.css と同じメディアクエリ構成）
   対象HTML：
   <section class="legal-notice"> ... </section>
   ========================================================= */

/* ------------------------------
   共通（ベース）
------------------------------ */
main{
  width: 100%;
  box-sizing: border-box;
}

section.legal-notice{
  background: rgba(246,227,222,0.5);
  width: 100%;
  height: auto;
  margin: 80px auto 40px auto;
  padding: 30px 0 60px;
  position: relative;
  box-sizing: border-box;
}

/* タイトルヘッダー（赤帯＋鍼） */
section.legal-notice > div.legal-notice{
  width: min(96%, 1200px);
  margin: 0 auto 40px;
  position: relative;
  background-color: #E36B71;
  border-radius: 4px;
  padding: 14px 0;
  text-align: center;
  box-sizing: border-box;
}

/* タイトル文字（p.legal-notice） */
section.legal-notice > div.legal-notice > p.legal-notice{
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* 鍼画像（PCで表示、スマホは非表示にする） */
section.legal-notice .acupuncture-image-left,
section.legal-notice .acupuncture-image-right{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none; /* ベースは非表示（PCで表示） */
}

section.legal-notice .acupuncture-image-left{
  left: 18px;
}

section.legal-notice .acupuncture-image-right{
  right: 18px;
}

/* divに付いてるclassとimgにも同名classがあるので、imgは確実にサイズ管理 */
section.legal-notice img.acupuncture-image-left,
section.legal-notice img.acupuncture-image-right{
  width: 150px;
  height: auto;
  display: block;
}

/* 表全体（container） */
section.legal-notice > .container{
  width: min(92%, 1100px);
  margin: 0 auto;
  box-sizing: border-box;
}

/* 1行（表示） */
section.legal-notice .表示{
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(227,107,113,0.35);
  box-sizing: border-box;
}

section.legal-notice .表示:first-child{
  border-top: none;
  padding-top: 0;
}

/* 左：項目 */
section.legal-notice .項目,
section.legal-notice .項目-2行{
  margin: 0;
  color: #E36B71;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
}

/* 右：本文 */
section.legal-notice .コンテンツ,
section.legal-notice .コンテンツ-2行{
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 2.0;
  word-break: break-word;
}

/* “2行”クラスは内容が長いだけなので、スタイルは同等でOK */
section.legal-notice .項目-2行,
section.legal-notice .コンテンツ-2行{
  /* ここは必要に応じて微調整枠（今は同等） */
}

/* 戻るボタン */
.back-to-top{
  display: block;
  width: min(280px, 70%);
  height: auto;
  margin: 30px auto 0;
}

/* cursor-light がページで使われている前提。干渉しないようにだけ */
.cursor-light{
  pointer-events: none;
}

/* =========================================================
   小型スマホ（〜390px） ※cancel-policy.css準拠
========================================================= */
@media (max-width: 390px){

  section.legal-notice{
    margin: 60px auto 30px auto;
    padding: 24px 0 50px;
  }

  section.legal-notice > div.legal-notice{
    width: min(92%, 1100px);
    margin: 0 auto 28px;
    padding: 12px 0;
  }

  section.legal-notice > div.legal-notice > p.legal-notice{
    font-size: 14px;
  }

  /* 鍼はスマホでは非表示 */
  section.legal-notice .acupuncture-image-left,
  section.legal-notice .acupuncture-image-right{
    display: none;
  }

  section.legal-notice > .container{
    width: min(92%, 1100px);
  }

  /* 1カラム化（項目→内容） */
  section.legal-notice .表示{
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 18px 0;
  }

  section.legal-notice .項目,
  section.legal-notice .項目-2行{
    font-size: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(227,107,113,0.35);
  }

  section.legal-notice .コンテンツ,
  section.legal-notice .コンテンツ-2行{
    font-size: 14px;
    line-height: 1.9;
  }
}

/* =========================================================
   スマホ（391px〜767px） ※cancel-policy.css準拠
========================================================= */
@media (min-width: 391px) and (max-width: 767px){

  section.legal-notice{
    margin: 60px auto 30px auto;
    padding: 26px 0 55px;
  }

  section.legal-notice > div.legal-notice{
    width: min(92%, 1100px);
    margin: 0 auto 30px;
    padding: 12px 0;
  }

  section.legal-notice > div.legal-notice > p.legal-notice{
    font-size: 14px;
  }

  /* 鍼はスマホでは非表示 */
  section.legal-notice .acupuncture-image-left,
  section.legal-notice .acupuncture-image-right{
    display: none;
  }

  section.legal-notice > .container{
    width: min(92%, 1100px);
  }

  /* 1カラム化 */
  section.legal-notice .表示{
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 20px 0;
  }

  section.legal-notice .項目,
  section.legal-notice .項目-2行{
    font-size: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(227,107,113,0.35);
  }

  section.legal-notice .コンテンツ,
  section.legal-notice .コンテンツ-2行{
    font-size: 14px;
    line-height: 1.9;
  }
}

/* =========================================================
   タブレット（768px〜1199px） ※cancel-policy.css準拠
========================================================= */
@media (min-width: 768px) and (max-width: 1199px){

  section.legal-notice > div.legal-notice{
    width: min(92%, 1100px);
  }

  section.legal-notice > div.legal-notice > p.legal-notice{
    font-size: 16px;
  }

  section.legal-notice > .container{
    width: min(92%, 1100px);
  }

  section.legal-notice .表示{
    grid-template-columns: 260px 1fr;
  }

  /* 鍼はタブレットでも非表示（必要ならここで表示に切替可） */
  section.legal-notice .acupuncture-image-left,
  section.legal-notice .acupuncture-image-right{
    display: none;
  }
}

/* =========================================================
   PC（1200px〜） ※cancel-policy.css準拠
========================================================= */
@media (min-width: 1200px){

  /* PCで鍼を表示 */
  section.legal-notice .acupuncture-image-left,
  section.legal-notice .acupuncture-image-right{
    display: block;
  }

  section.legal-notice > div.legal-notice{
    width: min(96%, 1200px);
  }

  section.legal-notice > .container{
    width: min(92%, 1100px);
  }
}