@charset "UTF-8";
/* =========================================================
   キャンペーン応募規約セクション
========================================================= */
/* ご要望：.terms_container 以下全ての要素をborder-boxとする */
.terms_container,
.terms_container *,
.terms_container *::before,
.terms_container *::after {
  box-sizing: border-box;
}

.sec_campaign_terms > .in {
  padding: 1rem 0 1.4rem;
}
@media screen and (max-width: 640px) {
  .sec_campaign_terms > .in {
    padding: 0; /* SP版の上下余白 */
    padding-top: 0.1rem;
  }
}

/* 枠組み（PC: 900px / SP: 画面幅いっぱい） */
.terms_container {
  max-width: 9rem;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .terms_container {
    max-width: 100%;
  }
}

/* ヘッダー部分 */
.terms_header {
  background-color: #d2e1d0; /* デザインに合わせた緑 */
  padding: 0.14rem;
  text-align: center;
  border-radius: 0.2rem 0.2rem 0 0;
}
@media screen and (max-width: 640px) {
  .terms_header {
    border-radius: 0;
    padding: 0.2rem 0;
  }
}

.terms_header .title {
  font-family: source-han-serif-japanese, serif;
  font-size: 0.22rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #333;
}
@media screen and (max-width: 640px) {
  .terms_header .title {
    font-size: 0.2rem;
    padding: 0 0.1rem;
    line-height: 1.4;
  }
}

/* コンテンツ本文部分 */
.terms_body {
  padding: 0.26rem 0.28rem 0.3rem 0.28rem;
  background-color: #f7f9f7;
  border-radius: 0 0 0.2rem 0.2rem;
}
@media screen and (max-width: 640px) {
  .terms_body {
    padding: 0.2rem 0.18rem;
    border-radius: 0;
  }
}

/* リード文 */
.terms_body .lead {
  font-size: 0.16rem;
  line-height: 1.8;
  margin-bottom: 0.26rem;
  color: #333;
}
@media screen and (max-width: 640px) {
  .terms_body .lead {
    font-size: 0.15rem;
    margin-bottom: 0.25rem;
  }
}

/* 規約リスト全体 */
.terms_list {
  border-top: 1px solid #dcdcdc; /* リストの一番上の線 */
}

/* =======================================
   グリッドレイアウト（縦線の実装）
======================================= */
.terms_list .item {
  display: grid;
  /* 左列(dt)を2.5rem幅、右列(dd)を残り幅(1fr)に設定 */
  grid-template-columns: 2rem 1fr;
  /* border-bottom: 1px solid #dcdcdc; */ /* リスト下部の線 */
}

.terms_list .item:not(:last-child) {
    border-bottom: 1px solid #dcdcdc;
}

@media screen and (max-width: 640px) {
  .terms_list .item {
    /* SPは1カラムにして縦積み */
    grid-template-columns: 1fr;
  }
}

/* 左側：見出し */
.terms_list dt {
  padding: 0.18rem 0 0 0.2rem;
  border-right: 1px solid #dcdcdc; /* ここで縦線を引く */
  font-weight: 600;
  font-size: 0.16rem;
  color: #333;
}
@media screen and (max-width: 640px) {
  .terms_list dt {
    padding: 0.25rem 0 0.12rem 0;
    border-right: none; /* SPでは縦線を消す */
    font-size: 0.15rem;
  }
}

/* 右側：内容 */
.terms_list dd {
  padding: 0.18rem 0.08rem 0.18rem 0.26rem; /* 縦線からの余白を左paddingで確保 */
  font-size: 0.16rem;
  line-height: 1.8;
  color: #333;
}
@media screen and (max-width: 640px) {
  .terms_list dd {
    padding: 0 0 0.25rem 0; /* SP版の余白調整 */
    font-size: 0.15rem;
  }
}

/* 内容のテキスト装飾 */
.terms_list dd p {
  margin-bottom: 0.24rem;
  line-height: 1.6;
}
.terms_list dd p:last-child {
  margin-bottom: 0;
}
.terms_list dd ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.terms_list dd small {
  font-size: 0.12rem;
  color: #666;
  line-height: 1.6;
  display: inline-block;
}

/* =========================================
   PC用の指定
========================================= */
.period {
  margin: 0; /* pタグのデフォルトの余白をリセット */
  white-space: nowrap; 
}

.sp-br {
  display: none; 
}

/* =========================================
   スマホ用の指定（例：画面幅768px以下）
========================================= */
@media screen and (max-width: 768px) {
  .period {
    white-space: normal;
    padding-left: 4em;
    text-indent: -4em;
    line-height: 1.5;
    padding-bottom: 0.08rem;
  }

  .sp-br {
    display: inline; 
  }
}

/* ユーティリティクラス */
.pc_only {
  display: block;
}
@media screen and (max-width: 640px) {
  .pc_only {
    display: none;
  }
}