@charset "UTF-8";

/*
 * リッチコンテンツ共通スタイル
 *   - GOODS の本文（ACF wysiwyg）のフロント表示と編集画面プレビューを揃えるための定義
 *   - 編集画面では TinyMCE iframe の body に `rich-content` クラスが付与され、本ファイルが content_css として読み込まれる
 *   - フロントでは single-goods.php 側で <div class="rich-content"> ラッパーを付け、本ファイルを enqueue する
 *   - 編集画面 iframe には独立した html/body があるため、フォントサイズ基準（10px ベース）もここで宣言する
 */

html {
  font-size: 62.5%;
}

body.rich-content,
.rich-content {
  color: #333;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 1.5rem;
  line-height: 1.8;
}

.rich-content > *:first-child {
  margin-top: 0;
}

.rich-content p {
  margin: 0 0 1.6rem;
}

.rich-content a {
  color: #1E4EB8;
  text-decoration: underline;
}
.rich-content a:hover {
  text-decoration: none;
}

.rich-content img {
  max-width: 100%;
  height: auto;
}

.rich-content ul,
.rich-content ol {
  margin: 0 0 1.6rem 2rem;
  padding: 0;
}
.rich-content ul li {
  list-style: disc outside;
}
.rich-content ol li {
  list-style: decimal outside;
}
.rich-content li {
  margin-bottom: 0.4rem;
}

.rich-content blockquote {
  margin: 1.6rem 0;
  padding: 1.2rem 1.6rem;
  border-left: 0.4rem solid #1E4EB8;
  background-color: #f5f7fb;
  color: #555;
}
.rich-content blockquote p:last-child {
  margin-bottom: 0;
}

.rich-content strong { font-weight: 700; }
.rich-content em { font-style: italic; }

/* 見出し
 * h2: 背景青 / 白文字
 * h3: 下線 / 青文字
 * h4: 背景青 / 白文字（h2より小ぶり）
 * h5: 下線 / 青文字（h3より小ぶり）
 * h6: 黒
 */
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
  font-weight: 700;
  line-height: 1.4;
}

.rich-content h2 {
  margin: 3.2rem 0 1.6rem;
  padding: 1rem 1.4rem;
  color: #fff;
  background-color: #1E4EB8;
  font-size: 2rem;
}

.rich-content h3 {
  margin: 2.8rem 0 1.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 0.2rem solid #1E4EB8;
  color: #1E4EB8;
  font-size: 1.8rem;
}

.rich-content h4 {
  margin: 2.4rem 0 1.2rem;
  padding: 0.6rem 1rem;
  color: #fff;
  background-color: #1E4EB8;
  font-size: 1.6rem;
}

.rich-content h5 {
  margin: 2rem 0 0.8rem;
  color: #1E4EB8;
  font-size: 1.5rem;
}

.rich-content h6 {
  margin: 2rem 0 0.8rem;
  color: #000;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  body.rich-content,
  .rich-content {
    font-size: 1.3rem;
  }
  .rich-content h2 { font-size: 1.7rem; padding: 0.8rem 1.2rem; }
  .rich-content h3 { font-size: 1.5rem; }
  .rich-content h4 { font-size: 1.4rem; padding: 0.5rem 0.8rem; }
  .rich-content h5 { font-size: 1.3rem; }
  .rich-content h6 { font-size: 1.2rem; }
}