@charset "UTF-8";

/* -------------------------
  基本
------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }

body {
  margin: 0;
  color: #222;
  font-family: 'Noto Sans JP', sans-serif;
}

h1, h2, h3, h4, h5, h6, p, figure, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p { line-height: 1.8; }
a { color: inherit; text-decoration: none; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:root { --v-space: clamp(90px, 9vw, 120px); }

.w-container {
  width: min(92%, 1280px);
  margin: auto;
}

.no-pc { display: block; }
.no-sp { display: none; }

@media (min-width: 48em) {
  .no-sp { display: block; }
  .no-pc { display: none; }
}

/* -------------------------
  ヘッダー
------------------------- */
.header { height: var(--v-space); }

.header-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 8%;
}

.header-container img { max-width: 54%; }

@media (min-width: 48em) {
  .header-container { padding-left: 6%; }
  .header-container img { max-width: 40%; }
}

@media (min-width: 64em) {
  .header-container { padding-left: 4%; }
  .header-container img { max-width: 30%; }
}

/* -------------------------
  QAエリア（自動連番）
------------------------- */
.question { padding-bottom: var(--v-space); }
.question .w-container { max-width: 980px; }

.question h3 {
  font-size: 1.25em;
  padding: 1em;
}

.update-date {
  text-align: right;
  font-size: .75rem;
}

/* 連番の起点 */
.qa-area {
  counter-reset: qa-counter;
}

/* dl/dt/ddの余白差を抑える */
.qa-card dl,
.qa-card dt,
.qa-card dd {
  margin: 0;
}

/* カード共通 */
.qa-card {
  border: 2px solid #f5f5f5;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0,0,0,.16);
  margin-bottom: 3em;
}

.qa-card.qa--last { margin-bottom: .5rem; }

/* dt共通 */
.qa-card dt {
  color: #333;
  font-weight: 700;
  text-align: left;

  padding-left: 40px;
  margin: .5em auto;
  width: calc(100% - 2.75em);

  line-height: 1.75;
  border-bottom: 2px dotted #dcdcdc;

  position: relative;
  counter-increment: qa-counter;
}

@media (min-width: 48em) {
  .qa-card dt { line-height: 3; }
}

/* dtの番号丸（自動） */
.qa-card dt::before {
  content: counter(qa-counter);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  width: 30px;
  height: 30px;
  line-height: 30px;

  background-color: #A4BFC8;
  border-radius: 50%;
  color: #fff;

  font-size: 1em;
  font-weight: 600;
  text-align: center;
}

/* 例外：dt行間を詰めたいカード */
.qa-card.qa--tight-dt dt { line-height: 2.5; }
@media (min-width: 48em) {
  .qa-card.qa--tight-dt dt { line-height: 3; }
}

/* dd共通（基本は「・」付き） */
.qa-card dd {
  position: relative;
  padding: 1em 1.5em 1em 5em;
  line-height: 1.75;
}

.qa-card dd::before {
  content: "・";
  position: absolute;
  left: 4em;
}

/* 例外：箇条書きマーカー無しカード */
.qa-card.qa--no-bullet dd {
  padding: 1em 1.5em 1em 3em;
}

.qa-card.qa--no-bullet dd::before {
  content: "";
  left: 0;
}



/* ==================================================
  ★6番（コストカード）崩れ対策
  ddの「・」を消して、p側の箇条書きだけで整形する
================================================== */
.qa-card--cost dd {
  padding: 1em 1.5em 1em 3em;
}

.qa-card--cost dd::before {
  content: "";
  left: 0;
}

/* 注釈（※） */
.comment {
  position: relative;
  padding: .5em 1.5em 0 2em;
}

.comment::before {
  content: "※";
  position: absolute;
  left: 1em;
}

/* dd内見出し */
.qa-card h3 {
  font-size: 1rem;
  font-weight: 400;
  padding: 0 1.5em .5em 2em;
}

/* 2番のようにpへ「・」を付けたい場合 */
.qa-card.qa--no-bullet p {
  position: relative;
  padding: 0 1.5em 1em 3em;
}
.qa-card.qa--no-bullet p::before {
  content: "・";
  position: absolute;
  left: 2em;
}

/* costカード内の見出し・本文 */
.qa-card--cost h4 {
  font-size: 1rem;
  font-weight: 400;
  padding: 1em 1.5em 0 0;
}

.qa-card--cost h5 {
  font-size: 1rem;
  font-weight: 400;
  padding: 0 1.5em 0 0;
}

.qa-card--cost p {
  position: relative;
  padding: 0 1.5em .5em 2em;
}

.qa-card--cost p::before {
  content: "・";
  position: absolute;
  left: 1em;
}

.qa-card--cost .come {
  position: relative;
  padding: 0 1.5em .5em 2em;
}

.qa-card--cost .come::before {
  content: "※";
  position: absolute;
  left: 1em;
}

/* -------------------------
  表
------------------------- */

.pad {
  padding: 1.25rem;
  overflow-x: visible;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 86%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

caption {
  text-align: left;
  margin-bottom: .5rem;
}

/* 共通 */
table th,
table td {
  border: 1px solid #000;
  vertical-align: middle;
}

/* 見出し */
table th {
  padding: 6px 10px;
  background-color: #dad5d5;
  text-align: center;
}

/* 本文 */
table td {
  padding: 6px 10px;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 数値・備考の寄せ */
table td:nth-child(2) { text-align: right; }
table td:nth-child(3) { text-align: center; }

/* 10行目の下線（二重線） */
table tr:nth-child(10) td {
  border-bottom: 3px double #000;
}

/* 列幅 */
table th:nth-child(1),
table td:nth-child(1) { width: 60%; }
table th:nth-child(2),
table td:nth-child(2) { width: 25%; }
table th:nth-child(3),
table td:nth-child(3) { width: 15%; }

/* SP */
@media (max-width: 48em) {
  table {
    width: 100%;
    max-width: none;
    font-size: 0.95rem;
  }

  table th,
  table td {
    padding: 8px 8px;
  }
}


/* -------------------------
  画像＋テキスト
------------------------- */
.imgtext-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 48em) {
  .imgtext-container {
    flex-direction: row;
    align-items: center;
  }
}

.imgtext-container > .text {
  flex: 60%;
  min-width: 12em;
}

.imgtext-container > .img { flex: 40%; }

.imgtext-container .img { padding: .25em 1em; }

@media (min-width: 48em) {
  .imgtext-container .img {
    padding: 0;
    margin-right: 1em;
  }
}

/* -------------------------
  出典元一覧
------------------------- */
.area-source { counter-reset: nmb-counter 1; }
.area-source h3 { font-size: 1rem; }
.source-container { margin-bottom: 2em; }

.source-container dt {
  color: #333;
  font-size: .75em;
  text-align: left;
  padding-left: 40px;
  margin: .5em auto;
  width: calc(100% - 2.75em);
  line-height: 1.5;
  counter-increment: nmb-counter;
  position: relative;
}

@media (min-width: 48em) {
  .source-container dt { line-height: 3; }
}

.source-container dt::before {
  content: counter(nmb-counter);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: #A4BFC8;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.source-container dd {
  font-size: .75em;
  padding-left: 5em;
}

/* -------------------------
  フッター
------------------------- */
.copyRight{
  font-size: 8px;
  padding: 15px 0;
  text-align: center;
  background-color: #339802;
  color: #ffffff;
}

/* -------------------------
lightbox2
------------------------- */

a.lb img{
  cursor: zoom-in;
}

a.lb:hover img{
  opacity: 0.9;
}