/* =========================================================
   LEXUS FAN 記事共通デザイン
   Theme : JIN:R Child

   対象：
   ・通常投稿
   ・WordPress Gutenberg ブロックエディター

   重要：
   H1 / H2 / H3 / H4 / H5 / H6 の
   見出しデザインには一切干渉しません。
   見出しはJIN:Rテーマ標準設定を使用します。

   内容：
   ・POINT
   ・CAUTION
   ・MEMO
   ・この記事でわかること
   ・マーカー
   ・FAQ
   ・テーブル
   ・横スクロール
   ・通常リスト
   ・引用
   ・画像キャプション
   ・レスポンシブ
========================================================= */


/* =========================================================
   0. 共通カラー
========================================================= */

:root {
  --lf-navy: #263746;
  --lf-navy-dark: #1e3446;

  --lf-gold: #9b7939;

  --lf-text: #263238;
  --lf-text-light: #666666;

  --lf-border: #d9dde1;
  --lf-border-light: #e3e6e8;

  --lf-point-bg: #f5f8fa;
  --lf-point-border: #ccd5de;

  --lf-caution-bg: #fff8f6;
  --lf-caution-border: #ead2cc;
  --lf-caution-main: #a34e43;

  --lf-memo-bg: #f8f8f6;
  --lf-memo-border: #d9dad5;
  --lf-memo-main: #77786f;

  --lf-table-stripe: #f7f8f9;

  --lf-radius: 8px;
}


/* =========================================================
   1. box-sizing
========================================================= */

.box-point,
.box-caution,
.box-memo,
.box-point *,
.box-caution *,
.box-memo *,
.faq-box,
.faq-box *,
.scroll-box,
.scroll-box *,
.wp-block-table,
.wp-block-table * {
  box-sizing: border-box;
}


/* =========================================================
   2. BOX 共通
========================================================= */

.box-point,
.box-caution,
.box-memo {
  position: relative;

  display: block;

  width: 100%;
  max-width: 100%;

  margin: 1.8em 0;

  padding: 1.25em 1.4em 1.35em;

  border-radius: var(--lf-radius);

  font-size: 0.97em;
  line-height: 1.85;
}


/*
 * JIN:Rの段落余白がBOX内へ
 * そのまま入るのを防ぐ
 */

.box-point > p,
.box-caution > p,
.box-memo > p {
  margin: 0 0 0.9em !important;

  padding: 0 !important;

  line-height: 1.85 !important;
}


/*
 * BOX内の最初の要素
 */

.box-point > :first-child,
.box-caution > :first-child,
.box-memo > :first-child {
  margin-top: 0 !important;
}


/*
 * BOX内の最後の要素
 */

.box-point > :last-child,
.box-caution > :last-child,
.box-memo > :last-child {
  margin-bottom: 0 !important;
}


/*
 * 段落が連続した場合
 */

.box-point > p + p,
.box-caution > p + p,
.box-memo > p + p {
  margin-top: 0 !important;
}


/*
 * BOX内のstrong
 */

.box-point strong,
.box-caution strong,
.box-memo strong {
  font-weight: 700;
}


/* =========================================================
   3. POINT BOX
========================================================= */

.box-point {
  border: 1px solid var(--lf-point-border);

  border-left: 4px solid var(--lf-navy);

  background: var(--lf-point-bg);

  color: var(--lf-text);
}


/*
 * POINTラベル
 */

.box-point::before {
  content: "POINT";

  display: block;

  width: fit-content;

  margin: 0 0 1em 0;

  padding: 0;

  border: 0;

  background: none;

  color: var(--lf-navy);

  font-family: inherit;

  font-size: 0.66rem;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.box-point strong {
  color: var(--lf-navy-dark);
}


/* =========================================================
   4. CAUTION BOX
========================================================= */

.box-caution {
  border: 1px solid var(--lf-caution-border);

  border-left: 4px solid var(--lf-caution-main);

  background: var(--lf-caution-bg);

  color: #443330;
}


.box-caution::before {
  content: "CAUTION";

  display: block;

  width: fit-content;

  margin: 0 0 1em 0;

  padding: 0;

  border: 0;

  background: none;

  color: #98453b;

  font-family: inherit;

  font-size: 0.66rem;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.box-caution strong {
  color: #88382f;
}


/* =========================================================
   5. MEMO BOX
========================================================= */

.box-memo {
  border: 1px solid var(--lf-memo-border);

  border-left: 4px solid var(--lf-memo-main);

  background: var(--lf-memo-bg);

  color: #383936;
}


.box-memo::before {
  content: "MEMO";

  display: block;

  width: fit-content;

  margin: 0 0 1em 0;

  padding: 0;

  border: 0;

  background: none;

  color: #686960;

  font-family: inherit;

  font-size: 0.66rem;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.box-memo strong {
  color: #53544e;
}


/* =========================================================
   6. BOX 内リンク
========================================================= */

.box-point a,
.box-caution a,
.box-memo a {
  font-weight: 600;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* =========================================================
   7. BOX 内リスト共通
========================================================= */

.box-point ul,
.box-caution ul,
.box-memo ul,
.box-point ol,
.box-caution ol,
.box-memo ol {
  margin-top: 0.75em !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   8. 「この記事でわかること」
========================================================= */

/*
 * HTML想定：
 *
 * <div class="box-point box-point-list">
 *   <p><strong>この記事でわかること</strong></p>
 *   <ul>
 *     <li>...</li>
 *   </ul>
 * </div>
 */

.box-point-list {
  padding-bottom: 1.25em;
}


/* -------------------------
   タイトル
------------------------- */

.box-point-list > p:first-child {
  margin: 0 0 0.85em !important;

  padding: 0 !important;

  color: var(--lf-navy-dark);

  font-weight: 700;

  line-height: 1.6 !important;
}


.box-point-list > p:first-child strong {
  color: var(--lf-navy-dark);

  font-weight: 700;
}


/* -------------------------
   ULを完全リセット
------------------------- */

.box-point-list > ul,
.box-point-list > ul.jinr-list,
.box-point-list ul,
.box-point-list ul.jinr-list {
  position: relative;

  display: block;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  list-style: none !important;

  list-style-type: none !important;
}


/* -------------------------
   LIのテーマ装飾をリセット
------------------------- */

.box-point-list ul > li,
.box-point-list ul.jinr-list > li {
  position: relative !important;

  display: block !important;

  width: 100%;

  margin: 0 !important;

  padding: 0.68em 0 0.68em 1.6em !important;

  border: 0 !important;

  border-bottom:
    1px solid
    rgba(38, 55, 70, 0.13) !important;

  border-radius: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  color: inherit;

  line-height: 1.7 !important;

  list-style: none !important;
  list-style-type: none !important;

  text-indent: 0 !important;
}


/*
 * ブラウザ/JIN:R側の
 * 標準マーカー「●」を消す
 */

.box-point-list ul > li::marker,
.box-point-list ul.jinr-list > li::marker {
  content: "" !important;

  color: transparent !important;

  font-size: 0 !important;
}


/*
 * 最後の項目
 */

.box-point-list ul > li:last-child,
.box-point-list ul.jinr-list > li:last-child {
  padding-bottom: 0.1em !important;

  border-bottom: 0 !important;
}


/* -------------------------
   ✓ アイコン
------------------------- */

.box-point-list ul > li::before,
.box-point-list ul.jinr-list > li::before {
  content: "✓" !important;

  position: absolute !important;

  top: 0.68em !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;

  display: block !important;

  width: 1em !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  color: var(--lf-gold) !important;

  font-family: Arial, sans-serif !important;

  font-size: 0.9em !important;
  font-weight: 700 !important;

  line-height: 1.7 !important;

  text-align: left !important;

  transform: none !important;
}


/*
 * JIN:Rがafterを使った場合の
 * 追加アイコンを除去
 */

.box-point-list ul > li::after,
.box-point-list ul.jinr-list > li::after {
  content: none !important;

  display: none !important;

  width: 0 !important;
  height: 0 !important;

  border: 0 !important;

  background: none !important;

  box-shadow: none !important;
}


/* =========================================================
   9. マーカー
========================================================= */

.marker {
  padding: 0 0.08em;

  background:
    linear-gradient(
      transparent 62%,
      rgba(209, 181, 93, 0.43) 62%
    );

  color: inherit;

  font-weight: 600;
}


/* =========================================================
   10. FAQ 全体
========================================================= */

.faq-box {
  width: 100%;

  margin: 2.2em 0;
}


.faq-item {
  width: 100%;

  margin: 0 0 1em;

  overflow: hidden;

  border: 1px solid var(--lf-border);

  border-radius: var(--lf-radius);

  background: #ffffff;

  box-shadow:
    0 2px 10px
    rgba(20, 30, 40, 0.045);
}


.faq-item:last-child {
  margin-bottom: 0;
}


/* =========================================================
   11. FAQ 質問
========================================================= */

.faq-question {
  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  min-height: 64px;

  margin: 0;

  padding: 1em 3.5em 1em 1.1em;

  border: 0;

  background: var(--lf-navy);

  color: #ffffff;

  font-size: 1em;

  font-weight: 700;

  line-height: 1.65;

  cursor: pointer;

  list-style: none;

  -webkit-tap-highlight-color: transparent;

  transition: background-color 0.2s ease;
}


.faq-question::-webkit-details-marker {
  display: none;
}


.faq-question::marker {
  content: "";
}


.faq-question:focus {
  outline: none;
}


.faq-question:focus-visible {
  outline:
    3px solid
    rgba(155, 121, 57, 0.48);

  outline-offset: -3px;
}


@media (hover: hover) {

  .faq-question:hover {
    background: #314858;
  }

}


/* =========================================================
   12. FAQ Qアイコン
========================================================= */

.faq-q {
  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2em;

  height: 2em;

  margin-right: 0.85em;

  border-radius: 50%;

  background: #ffffff;

  color: var(--lf-navy);

  font-family: Arial, sans-serif;

  font-size: 0.8rem;

  font-weight: 700;

  line-height: 1;
}


.faq-question-text {
  flex: 1 1 auto;

  min-width: 0;

  color: #ffffff;
}


/* =========================================================
   13. FAQ ＋ / −
========================================================= */

.faq-question::before,
.faq-question::after {
  content: "";

  position: absolute;

  top: 50%;

  right: 1.35em;

  width: 15px;

  height: 2px;

  border-radius: 2px;

  background: #ffffff;

  transform: translateY(-50%);

  transition: transform 0.25s ease;
}


.faq-question::after {
  transform:
    translateY(-50%)
    rotate(90deg);
}


.faq-item[open] .faq-question::after {
  transform:
    translateY(-50%)
    rotate(0deg);
}


.faq-item[open] .faq-question {
  background: var(--lf-navy);
}


/* =========================================================
   14. FAQ 回答
========================================================= */

.faq-answer {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 0.9em;

  padding: 1.3em 1.4em;

  border-top:
    1px solid
    var(--lf-border-light);

  background: #ffffff;

  color: #333333;
}


.faq-a {
  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2em;

  height: 2em;

  margin-top: 0.05em;

  border-radius: 50%;

  background: var(--lf-gold);

  color: #ffffff;

  font-family: Arial, sans-serif;

  font-size: 0.8rem;

  font-weight: 700;

  line-height: 1;
}


.faq-answer p {
  flex: 1 1 auto;

  margin: 0 !important;

  padding: 0 !important;

  color: #333333;

  font-size: 0.97em;

  line-height: 1.9;
}


.faq-answer a {
  font-weight: 600;

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;
}


/* =========================================================
   15. FAQ 開閉アニメーション
========================================================= */

.faq-item[open] .faq-answer {
  animation: lexusFaqOpen 0.22s ease;
}


@keyframes lexusFaqOpen {

  from {
    opacity: 0;

    transform: translateY(-4px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }

}


/* =========================================================
   16. 横スクロール
========================================================= */

.scroll-box {
  display: block;

  width: 100%;

  max-width: 100%;

  margin: 1.6em 0;

  overflow-x: auto;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
}


.scroll-box > * {
  max-width: none;
}


.scroll-box table {
  width: 100%;

  min-width: 680px;
}


/* =========================================================
   17. WordPress標準テーブル
========================================================= */

.wp-block-table {
  display: block;

  width: 100%;

  max-width: 100%;

  margin: 1.8em 0;

  overflow-x: auto;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
}


.wp-block-table table {
  width: 100%;

  min-width: 650px;

  margin: 0;

  border-collapse: collapse;

  border-spacing: 0;

  background: #ffffff;

  font-size: 0.94em;

  line-height: 1.65;
}


.wp-block-table th,
.wp-block-table td {
  padding: 0.85em 0.95em;

  border: 1px solid #dce1e5;

  vertical-align: middle;

  word-break: normal;

  overflow-wrap: break-word;
}


.wp-block-table thead th {
  background: var(--lf-navy) !important;

  color: #ffffff !important;

  font-weight: 700;

  text-align: center;
}


.wp-block-table tbody tr:nth-child(even) {
  background: var(--lf-table-stripe);
}


@media (hover: hover) {

  .wp-block-table tbody tr {
    transition: background-color 0.2s ease;
  }


  .wp-block-table tbody tr:hover {
    background: #f1f4f6;
  }

}


.wp-block-table figcaption {
  margin: 0.7em 0 0;

  padding: 0;

  color: #71767b;

  font-size: 0.8rem;

  line-height: 1.65;

  text-align: left;
}


/* =========================================================
   18. 通常リスト
========================================================= */

/*
 * BOX外だけを対象にすることで、
 * box-point-listとの競合を避ける
 */

ul.wp-block-list:not(.jinr-list),
ol.wp-block-list {
  margin-top: 1.2em;

  margin-bottom: 1.7em;
}


ul.wp-block-list:not(.jinr-list) > li,
ol.wp-block-list > li {
  margin-bottom: 0.45em;

  line-height: 1.75;
}


ul.wp-block-list:not(.jinr-list) > li:last-child,
ol.wp-block-list > li:last-child {
  margin-bottom: 0;
}


/* =========================================================
   19. 引用
========================================================= */

.wp-block-quote {
  margin: 1.8em 0;

  padding: 1.2em 1.4em;

  border: 0;

  border-left:
    3px solid
    var(--lf-gold);

  background: #f8f8f6;

  color: #444444;
}


.wp-block-quote p {
  margin-top: 0;

  line-height: 1.85;
}


.wp-block-quote p:last-child {
  margin-bottom: 0;
}


.wp-block-quote cite {
  display: block;

  margin-top: 0.8em;

  color: #777777;

  font-size: 0.82em;
}


/* =========================================================
   20. 画像
========================================================= */

.wp-block-image {
  margin-top: 2em;

  margin-bottom: 2em;
}


.wp-block-image img {
  max-width: 100%;

  height: auto;
}


.wp-block-image figcaption {
  margin-top: 0.65em;

  color: #777777;

  font-size: 0.8rem;

  line-height: 1.65;

  text-align: center;
}


/* =========================================================
   21. セパレーター
========================================================= */

.wp-block-separator {
  margin: 2.5em auto;

  border: 0;

  border-top: 1px solid #d9dde1;

  opacity: 1;
}


/* =========================================================
   22. スマートフォン
========================================================= */

@media screen and (max-width: 767px) {


  /* -------------------------
     BOX
  ------------------------- */

  .box-point,
  .box-caution,
  .box-memo {
    margin: 1.5em 0;

    padding: 1.05em 1.05em 1.15em;

    border-left-width: 4px;

    border-radius: 7px;

    font-size: 0.94em;

    line-height: 1.8;
  }


  .box-point::before,
  .box-caution::before,
  .box-memo::before {
    margin-bottom: 0.85em;

    font-size: 0.63rem;
  }


  .box-point > p,
  .box-caution > p,
  .box-memo > p {
    margin-bottom: 0.8em !important;

    line-height: 1.8 !important;
  }


  /* -------------------------
     この記事でわかること
  ------------------------- */

  .box-point-list > p:first-child {
    margin-bottom: 0.7em !important;
  }


  .box-point-list ul > li,
  .box-point-list ul.jinr-list > li {
    padding:
      0.6em
      0
      0.6em
      1.5em !important;

    font-size: 0.94em;

    line-height: 1.65 !important;
  }


  .box-point-list ul > li::before,
  .box-point-list ul.jinr-list > li::before {
    top: 0.6em !important;

    font-size: 0.88em !important;

    line-height: 1.65 !important;
  }


  /* -------------------------
     FAQ
  ------------------------- */

  .faq-box {
    margin: 1.8em 0;
  }


  .faq-item {
    margin-bottom: 0.9em;

    border-radius: 8px;
  }


  .faq-question {
    min-height: 58px;

    padding:
      0.95em
      3.2em
      0.95em
      0.9em;

    font-size: 0.94em;

    line-height: 1.6;
  }


  .faq-q {
    width: 1.85em;

    height: 1.85em;

    margin-right: 0.7em;

    font-size: 0.75rem;
  }


  .faq-question::before,
  .faq-question::after {
    right: 1.1em;

    width: 13px;
  }


  .faq-answer {
    gap: 0.7em;

    padding: 1.1em 1em;
  }


  .faq-a {
    width: 1.85em;

    height: 1.85em;

    font-size: 0.75rem;
  }


  .faq-answer p {
    font-size: 0.93em;

    line-height: 1.8;
  }


  /* -------------------------
     TABLE
  ------------------------- */

  .wp-block-table {
    margin: 1.5em 0;
  }


  .wp-block-table table {
    min-width: 620px;

    font-size: 0.86em;
  }


  .wp-block-table th,
  .wp-block-table td {
    padding: 0.7em 0.72em;

    line-height: 1.6;
  }


  .wp-block-table figcaption {
    font-size: 0.75rem;
  }


  /* -------------------------
     横スクロール案内
  ------------------------- */

  .wp-block-table::after,
  .scroll-box::after {
    content: "← 横にスクロールできます →";

    display: block;

    width: 100%;

    margin: 0.6em 0 0;

    color: #777777;

    font-size: 0.72rem;

    line-height: 1.4;

    text-align: center;

    letter-spacing: 0.02em;
  }


  /* -------------------------
     通常リスト
  ------------------------- */

  ul.wp-block-list:not(.jinr-list),
  ol.wp-block-list {
    padding-left: 1.4em;
  }


  ul.wp-block-list:not(.jinr-list) > li,
  ol.wp-block-list > li {
    line-height: 1.7;
  }


  /* -------------------------
     画像
  ------------------------- */

  .wp-block-image {
    margin-top: 1.6em;

    margin-bottom: 1.6em;
  }

}


/* =========================================================
   23. 小さいスマートフォン
========================================================= */

@media screen and (max-width: 480px) {

  .box-point,
  .box-caution,
  .box-memo {
    margin: 1.4em 0;

    padding: 1em 0.95em 1.05em;
  }


  .box-point::before,
  .box-caution::before,
  .box-memo::before {
    margin-bottom: 0.8em;
  }


  .faq-question {
    padding-left: 0.85em;

    padding-right: 3em;
  }


  .faq-answer {
    padding: 1em 0.9em;
  }


  .wp-block-table table {
    min-width: 580px;
  }

}


/* =========================================================
   24. 非常に狭い画面
========================================================= */

@media screen and (max-width: 360px) {

  .box-point,
  .box-caution,
  .box-memo {
    padding: 0.95em 0.9em 1em;

    font-size: 0.92em;
  }


  .faq-question {
    font-size: 0.92em;
  }


  .faq-answer p {
    font-size: 0.91em;
  }

}


/* =========================================================
   25. 動きを減らす設定
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .faq-question,
  .faq-question::before,
  .faq-question::after {
    transition: none;
  }


  .faq-item[open] .faq-answer {
    animation: none;
  }

}


/* =========================================================
   26. 印刷
========================================================= */

@media print {

  .box-point,
  .box-caution,
  .box-memo,
  .faq-item {
    box-shadow: none;

    break-inside: avoid;
  }


  .faq-item:not([open]) .faq-answer {
    display: flex;
  }


  .wp-block-table,
  .scroll-box {
    overflow: visible;
  }


  .wp-block-table table,
  .scroll-box table {
    min-width: 0;
  }


  .wp-block-table::after,
  .scroll-box::after {
    display: none;
  }

}