@charset "UTF-8";

/* =====================================
   1. 共通変数・基本設定
   ===================================== */
.contents {
  /* --- 変数定義 --- */
  color: var(--text-base);
  background: var(--bg-base);
  --bg-base: #e6f5ff;
  --text-base: #0a163d;
  --highlight: #008CD0;
  --light: #F7FBFF;
  --medium: #bfe3ff;
  --medium-highlight: #5B9DEA;
  --medium-dark: #4187DB;
  --white: #fff;
  --grd: linear-gradient(130deg, rgba(0, 140, 208, 1) 0%, rgba(0, 112, 208, 1) 100%);
  --shadow: drop-shadow(1px 2px 6px rgba(30, 87, 154, 0.2));

  /* --- スタイル適用 --- */
  width: 100%;
  margin: 0 auto;
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-base);
  background: var(--bg-base);
  overflow-x: hidden;
  user-select: none;
}

/* =====================================
   2. 共通コンポーネント (タイトル・ボタン)
   ===================================== */
.bottom-section h2::before {
  background: url('/img/usr/genre/rA4/title_ribbon.png') no-repeat center/contain;
}

/* リンクを無効にする */
.disable-link {
  pointer-events: none;
  cursor: default;
}


/* =====================================
   3. 各セクション設定 (SP基準)
   ===================================== */
.top-section {
  background-image:
    linear-gradient(rgba(230, 245, 255, 0.4), rgba(230, 245, 255, 0.4)),
    url('/img/usr/genre/rA4/bg_top-section.webp');
  background-repeat: no-repeat;
  background-position: top;
  /* background-size: contain; */
  background-size: cover;
}

/* メインビジュアル */
.mv-section::before {
  top: -20px;
  right: -25px;
  z-index: 1;
  background: url('/img/usr/genre/rA4/bg_top_img.webp') no-repeat center/contain;
  width: 250px;
  height: 214px;
}

/* リード文 (アコーディオン) */
.read-section {
  padding: 20px 20px 10px;
  background: linear-gradient(to bottom, transparent 0px, var(--white) 40px, var(--white) 100%);
}

.open-label {
  padding: 8px 0 0 0;
}

/* テーマから選ぶ */
.thema-section::before {
  top: 15px;
  right: -30px;
  z-index: 1;
  background: url('/img/usr/genre/rA4/bg_thema.webp') no-repeat center/contain;
  width: 100px;
  height: 92px;
}

/* 読み物 */
.reading-section::before {
  background-image: url('/img/usr/genre/rA4/bg_reading_r.png');
}

.reading-section::after {
  background-image: url('/img/usr/genre/rA4/bg_reading_l.png');
}

/* ボトム (カテゴリ・予算) */
.bottom-section::before {
  top: 35px;
  right: -10px;
  background: url('/img/usr/genre/rA4/bg_bottom.webp') no-repeat center/contain;
  width: 100px;
  height: 118px;
}

/* =====================================
   4. PC用設定 (780px以上)
   ===================================== */
@media only screen and (min-width: 780px) {
  .contents {
    width: 900px;
    font-size: var(--font-size-base);
  }

  /* メインビジュアル */
  .mv-section::before {
    top: -65px;
    right: -20px;
    width: 480px;
    height: 411px;
  }

  /* リード文 PC */
  .open-label {
    padding: 8px 0 10px 0;
  }

  /* テーマから選ぶ pc*/
  .thema-section::before {
    top: 15px;
    right: 120px;
    width: 130px;
    height: 119px;
  }

  /* ボトム (カテゴリ・予算) PC*/
  .bottom-section::before {
    top: 35px;
    right: -5px;
    width: 120px;
    height: 142px;
  }
}