@charset "utf-8";
/* CSS Document */

.expl_block {
  --ex-text: #333;
  --ex-green: #708765;        /* サイトのメインカラー */
  --ex-green-dark: #566b4b;   /* 見出し文字・白文字の背景用（コントラスト確保） */
  --ex-green-pale: #f0f4ee;
  --ex-red: #c0392b;
  --ex-red-pale: #fdf3f1;
  --ex-blue: #1f5fa8;
  --ex-line: #d8e0d3;

  color: var(--ex-text);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  text-align: left;
  overflow-wrap: break-word;
}
.expl_block *,
.expl_block *::before,
.expl_block *::after { box-sizing: border-box; }

.expl_block > :first-child { margin-top: 0; }
.expl_block > :last-child  { margin-bottom: 0; }

/* ---------- 見出し ---------- */
.expl_block h2 {
  margin: 2.6em 0 1em;
  padding: .6em .9em;
  font-size: 1.25em;
  line-height: 1.5;
  color: #fff;
  background: var(--ex-green-dark);
  border-radius: 4px;
}
.expl_block h3 {
  margin: 2.4em 0 1em;
  padding: .15em 0 .35em .7em;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--ex-green-dark);
  border-left: 6px solid var(--ex-green);
  border-bottom: 1px solid var(--ex-line);
}
.expl_block h4 {
  margin: 2em 0 .6em;
  font-size: 1.05em;
  line-height: 1.5;
  color: var(--ex-green-dark);
}
.expl_block h4::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-right: .5em;
  background: var(--ex-green);
  vertical-align: .05em;
}

/* ---------- 本文 ---------- */
.expl_block p { margin: 0 0 1.2em; }
.expl_block strong { font-weight: 500; }
.expl_block img { max-width: 100%; height: auto; vertical-align: middle; }
.expl_block a { color: var(--ex-green-dark); text-decoration: underline; }
.expl_block hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ex-line); }

/* ---------- リスト ---------- */
.expl_block ul,
.expl_block ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.expl_block li { margin: .35em 0; }
.expl_block li::marker { color: var(--ex-green); }

/* ○付きリスト（注意事項など） */
.expl_block ul.ex-circle { list-style: none; padding-left: 0; }
.expl_block ul.ex-circle > li { position: relative; padding-left: 1.5em; }
.expl_block ul.ex-circle > li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--ex-green);
}

/* ---------- 表 ---------- */
.expl_block table {
  width: 100%;
  margin: 0 0 1.6em;
  border-collapse: collapse;
  border-top: 1px solid var(--ex-line);
}
.expl_block th,
.expl_block td {
  padding: .9em 1em;
  border-bottom: 1px solid var(--ex-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.expl_block th {
  width: 10em;
  font-weight: 500;
  color: var(--ex-green-dark);
  background: var(--ex-green-pale);
}
/* th を使わず td だけで作った表でも、左の列を見出し扱いにする */
.expl_block table.ex-spec td:first-child:not(:only-child) {
  width: 10em;
  font-weight: 500;
  color: var(--ex-green-dark);
  background: var(--ex-green-pale);
}
.expl_block td > :last-child { margin-bottom: 0; }

/* ---------- 部品 ---------- */
/* リード文（導入の説明） */
.expl_block .ex-lead {
  padding: 1em 1.2em;
  background: var(--ex-green-pale);
  border-radius: 6px;
}
/* キャッチコピー */
.expl_block .ex-catch {
  margin: 2em 0 1em;
  font-size: 1.2em;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ex-blue);
}
.expl_block .ex-catch.ex-red { color: var(--ex-red); }

/* お知らせ枠（ポイント付与・送料のお知らせなど） */
.expl_block .ex-notice {
  margin: 0 0 1.8em;
  padding: 1em 1.2em;
  background: var(--ex-red-pale);
  border: 2px solid var(--ex-red);
  border-radius: 6px;
}
.expl_block .ex-notice p { margin: 0 0 .5em; }
.expl_block .ex-notice > :last-child { margin-bottom: 0; }
.expl_block .ex-notice strong { color: var(--ex-red); font-size: 1.1em; }
.expl_block .ex-notice img { height: 2.2em; width: auto; margin-right: .6em; }

/* ※注釈 */
.expl_block .ex-small { font-size: .85em; line-height: 1.7; color: #666; }

/* 文字色 */
.expl_block .ex-red   { color: var(--ex-red); }
.expl_block .ex-blue  { color: var(--ex-blue); }
.expl_block .ex-green { color: var(--ex-green-dark); }
.expl_block .ex-center { text-align: center; }

/* 画像を横に並べる（2枚・3枚） */
.expl_block .ex-images {
  display: flex;
  gap: 12px;
  margin: 0 0 1.4em;
}
.expl_block .ex-images > * { flex: 1 1 0; min-width: 0; margin: 0; }
.expl_block .ex-images img { display: block; width: 100%; }

/* ---------- スマホ ---------- */
@media (max-width: 640px) {
  .expl_block { font-size: 14px; }
  .expl_block table,
  .expl_block tbody,
  .expl_block tr,
  .expl_block th,
  .expl_block td { display: block; width: auto; }
  .expl_block table.ex-spec td:first-child:not(:only-child) { width: auto; }
  .expl_block th,
  .expl_block table.ex-spec td:first-child:not(:only-child) { padding-bottom: .4em; border-bottom: 0; }
  .expl_block td { padding-top: .6em; }
  .expl_block .ex-images { flex-direction: column; }
}