@charset "utf-8";

/* ================================================
   このファイルの位置づけ
================================================ */
/*
  当社が制作するコラム記事だけで共通させる記事共通CSS。
  先方が用意している /column/css/article/common.css は
  セキュリティコラム等とも共通のファイルなので編集せず、
  こちら側で共通させたいCSSはこのファイルに書く。
  （先方確認済み: issue #13 / issue #16）

  数値はすべて DESIGN.md 2.2 の 1rem = 10px 前提。
  ブレークポイントは DESIGN.md 2.4 の 640px。
*/


/* ================================================
   Card Compare（記事下部 カード比較 / .card_compare）
================================================ */
.card_compare {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
}

/* sticky を効かせるため overflow:hidden は使わない。
   同じ理由で border-collapse: separate（collapse だと sticky セルの罫線が消える） */
.card_compare_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
}

.card_compare_table th,
.card_compare_table td {
  width: 50%;
  background: #fff;
}

/* ゴールド列の地色（.--gold_tint を外すと白背景になる） */
.card_compare.--gold_tint .card_compare_table .--gold {
  background: #fdfaf1;
}

/* --- キャッチ（表の外・背景色と罫線なし）--- */
.card_compare_catch_row {
  display: flex;
  align-items: stretch;
  margin-bottom: 10px;
}

.card_compare_catch {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0 16px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.card_compare_catch.--gold {
  color: #8a6a1f;
}

/* ＼ ／ の点線囲み */
.card_compare_catch span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  white-space: nowrap;
}

.card_compare_catch span::before,
.card_compare_catch span::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 100%;
  border-left: 2px dotted currentColor;
}

.card_compare_catch span::before {
  left: 8px;
  transform: rotate(-18deg);
}

.card_compare_catch span::after {
  right: 8px;
  transform: rotate(18deg);
}

/* 幅430px以下は「シンプルに」の後ろで折り返す。
   1行のままだと nowrap のため吹き出しが親（列幅の半分）を左右にはみ出す */
.card_compare_catch .--narrow {
  display: none;
}

@media screen and (max-width: 430px) {
  .card_compare_catch .--narrow {
    display: inline;
  }
}

.card_compare_table th.card_compare_name {
  position: sticky;
  top: 134px;
  z-index: 2;
  padding: 12px 16px;
  background: #e9ecf5;
  color: #6d7076;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.card_compare_table th.card_compare_name.--gold {
  background: #ede2cb;
  color: #9b6828;
}

.card_compare.--gold_tint .card_compare_table .card_compare_name.--gold {
  background: #ede2cb;
}

/* --- 2段目 カード画像＋申込導線 --- */
.card_compare_visual {
  padding: 24px 16px 28px;
  vertical-align: top;
}

.card_compare_visual img {
  width: 100%;
  max-width: 224px;
  height: auto;
}

.card_compare_visual .cmn_btn_wrap {
  margin-top: 20px;
}

.card_compare_visual .cmn_btn_primary {
  max-width: 280px;
  padding: 10px 40px 10px 20px;
  font-size: 1.5rem;
}

/* --- 比較項目名（全幅の帯） --- */
.card_compare_table th.card_compare_label {
  padding: 11px 20px;
  background: #fbe3d5;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.card_compare_label .card_compare_label_sub {
  display: block;
  font-weight: 700;
}

/* --- 比較値 --- */
.card_compare_table td.card_compare_val_cell {
  padding: 20px;
  vertical-align: middle;
  border-bottom: 1px solid #ececec;
  font-size: 1.6rem;
  line-height: 1.7;
}

.card_compare_table td.card_compare_val_cell + td.card_compare_val_cell {
  border-left: 1px solid #ececec;
}

.card_compare_val {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.card_compare_val.--normal {
  font-weight: 400;
}

.card_compare_em {
  font-size: 2.6rem;
  font-weight: 700;
  color: #d23a00;
  letter-spacing: .01em;
}

.card_compare_lead {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.7;
}

.card_compare_sup {
  font-size: 1.2rem;
  font-weight: 500;
  vertical-align: super;
  color: #656565;
}

.card_compare_link {
  margin-top: 12px;
}

.card_compare_link .cmn_text_link {
  font-size: 1.4rem;
}

/* --- 注釈（表内最終行） --- */
.card_compare_note {
  padding: 16px 20px;
  border-top: 1px solid #ececec;
  text-align: left;
  vertical-align: top;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #656565;
}

.card_compare_note + .card_compare_note {
  border-left: 1px solid #ececec;
}

/* --- 表示バリエーション（任意） --- */
/* ゴールド列は色付き、通常カード列（.--std）は黒文字 */
.card_compare_val_cell.--std .card_compare_em {
  color: #000;
  font-weight: 400;
}

.card_compare.--marker .card_compare_em {
  color: #000;
  background: #ffff66;
  padding: 0 2px;
}

.card_compare.--no_link .card_compare_link {
  display: none;
}

/* --- SP（DESIGN.md 2.4 ブレークポイント 640px）--- */
@media screen and (max-width: 640px) {
  .card_compare_catch {
    padding: 0 6px;
    font-size: 1.3rem;
  }

  .card_compare_catch span {
    padding: 0 18px;
  }

  .card_compare_catch span::before {
    left: 4px;
  }

  .card_compare_catch span::after {
    right: 4px;
  }

  .card_compare_table th.card_compare_name {
    top: 61px;
    padding: 9px 8px;
    font-size: 1.4rem;
  }

  .card_compare_visual {
    padding: 14px 8px 18px;
  }

  .card_compare_visual .cmn_btn_wrap {
    margin-top: 14px;
  }

  .card_compare_visual .cmn_btn_primary {
    padding: 8px;
    font-size: 1.2rem;
    background-image: none; /* 幅が狭いため矢印アイコンは出さない */
  }

  .card_compare_table th.card_compare_label {
    padding: 9px 12px;
    font-size: 1.3rem;
  }

  .card_compare_table td.card_compare_val_cell {
    padding: 14px 10px;
    font-size: 1.3rem;
  }

  .card_compare_val {
    font-size: 1.4rem;
  }

  .card_compare_em {
    font-size: 1.9rem;
  }

  .card_compare_lead {
    font-size: 1.3rem;
  }

  .card_compare_link {
    margin-top: 8px;
  }

  .card_compare_link .cmn_text_link {
    font-size: 1.2rem;
  }

  .card_compare_note {
    padding: 12px 10px;
    font-size: 1.1rem;
  }
}


/* ================================================
   FAQ（よくある質問 / .faq_box）
================================================ */
.faq_box {
  background: #fff;
  border: 2px solid #eb5505;
  border-radius: 8px;
  padding: 32px 40px;
}

.faq_box_title {
  position: relative;
  padding-bottom: 18px;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.faq_box_title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d23a00 0%, #df4803 30%, #f39766 75%);
}

.faq_list {
  margin-top: 8px;
}

.faq_q {
  margin-top: 32px;
  color: #d23a00;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}

.faq_a {
  margin-top: 12px;
  font-size: 1.6rem;
  line-height: 1.7;
}

/* 本文内の太字（強さの違う三段階）*/
.faq_a strong,
.faq_a .faq_bold {
  font-weight: 700;
}

.faq_a .faq_bold_em {
  font-weight: 700;
  color: #d23a00;
}

.faq_a .faq_bold_marker {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #ffe9c9 60%);
}

.faq_a p + p{
  margin-top: 1em;
}

.faq_more {
  margin-top: 20px;
}

@media screen and (max-width: 640px) {
  .faq_box {
    padding: 20px;
  }

  .faq_box_title {
    padding-bottom: 14px;
    font-size: 2rem;
  }

  .faq_box_title::after {
    width: 60px;
  }

  .faq_q {
    margin-top: 24px;
    font-size: 1.6rem;
  }

  .faq_a {
    font-size: 1.4rem;
  }

  .faq_more {
    margin-top: 16px;
  }
}

/* ---- 表 --------------------------------------------------- */
.article_table_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article_table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 1.6rem;
  line-height: 1.7;
  text-align: left;
}

.article_table caption {
  margin-bottom: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
}

.article_table th,
.article_table td {
  padding: 1.6rem;
  border: 1px solid #ececec;
  vertical-align: top;
}

.article_table thead th {
  background: #FFF4EE;
  font-weight: 700;
}

.article_table tbody th {
  background: #fffcfb;
  font-weight: 700;
}

.article_table th > p,
.article_table td > p {
  margin: 0;
}

.article_table th > p + p,
.article_table td > p + p {
  margin-top: .8rem;
}
@media screen and (max-width: 640px) {
  .article_table {
    font-size: 1.4rem;
  }

  .article_table caption {
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
  }

  .article_table th,
  .article_table td {
    padding: 1.2rem;
  }
}

/* ---- リンクテキストSP --------------------------------------------------- */
@media screen and (max-width: 640px) {
  .cmn_text_link {
    font-size: inherit;
  }
}