@charset "utf-8";

/**
 * @title Knowledge Content
 * @description ナレッジ記事の本文装飾。記事ページ（.p-knowledge-article__content）と
 *              ブロックエディタ（.editor-styles-wrapper .is-root-container）で共用する。
 *              セレクタは :is(記事ページ, エディタ) で両方に同じ指定を当てる。
 */

/* ========================================
Base
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) {
  font-size: calc(15 * var(--u));
  line-height: calc(27/15);
  letter-spacing: 0.08em;
  word-break: break-word;
}

@media screen and (min-width: 48rem) {
  :is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) {
    font-size: calc(17 * var(--u));
    line-height: calc(32/17);
  }
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container)> :first-child {
  margin-top: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) span {
  display: inline;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(p, ul, ol, table, figure, blockquote, details, .wp-block-group, .wp-block-image, .wp-block-table, .wp-block-quote) {
  margin-top: 1.5em;
  margin-bottom: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) p {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .has-text-align-center {
  text-align: center;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .has-text-align-right {
  text-align: right;
}

/* ========================================
Heading
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(h2, h3, h4) {
  font-family: inherit;
  color: var(--black);
  margin-bottom: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) h2 {
  position: relative;
  margin-top: 2.6em;
  padding-left: calc(32 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(30/20);
  font-weight: 700;
  letter-spacing: 0.08em;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) h2::before {
  content: '';
  position: absolute;
  top: calc(5 * var(--u));
  left: 0;
  width: calc(23 * var(--u));
  height: calc(21 * var(--u));
  background: url(../img/top/icon_ttl.png) center / contain no-repeat;
}

@media screen and (min-width: 48rem) {
  :is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) h2 {
    padding-left: calc(36 * var(--u));
    font-size: calc(26 * var(--u));
    line-height: calc(40/26);
  }

  :is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) h2::before {
    top: calc(9 * var(--u));
  }
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) h3 {
  margin-top: 2em;
  color: var(--oragne);
  font-size: calc(18 * var(--u));
  line-height: calc(27/18);
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media screen and (min-width: 48rem) {
  :is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) h3 {
    font-size: calc(22 * var(--u));
    line-height: calc(34/22);
  }
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) h4 {
  margin-top: 1.8em;
  font-size: 1.05em;
  line-height: 1.6;
  font-weight: 700;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(h2, h3, h4)+* {
  margin-top: 0.8em;
}

/* ========================================
Inline
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) a {
  display: inline;
  color: var(--oragne);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (any-hover: hover) {
  :is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) a:hover {
    text-decoration: none;
  }
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(240, 148, 40, 0.25) 62%);
}

/* ========================================
List
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(ul, ol) {
  padding-left: 0;
  list-style: none;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(ul, ol)>li {
  position: relative;
  padding-left: 1.3em;
  list-style: none;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) li+li {
  margin-top: 0.4em;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ul>li::before {
  content: '';
  position: absolute;
  top: 0.9em;
  left: 0.2em;
  width: 0.45em;
  height: 0.45em;
  background: var(--oragne);
  border-radius: 50%;
  transform: translateY(-50%);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol {
  counter-reset: knowledge-ol;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol>li {
  counter-increment: knowledge-ol;
  padding-left: 1.8em;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol>li::before {
  content: counter(knowledge-ol) ".";
  position: absolute;
  left: 0;
  color: var(--oragne);
  font-family: var(--font-inter);
  font-weight: 700;
}

/* チェック */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ul.is-style-qlab-check>li {
  padding-left: 1.8em;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ul.is-style-qlab-check>li::before {
  top: 0.5em;
  left: 0.35em;
  width: 0.4em;
  height: 0.75em;
  background: none;
  border-radius: 0;
  border-right: 3px solid var(--oragne);
  border-bottom: 3px solid var(--oragne);
  transform: rotate(45deg);
}

/* ステップ */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol.is-style-qlab-steps>li {
  padding: 1em 0 1em calc(90 * var(--u));
  border-bottom: 1px dashed var(--border);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol.is-style-qlab-steps>li:first-child {
  border-top: 1px dashed var(--border);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol.is-style-qlab-steps>li+li {
  margin-top: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol.is-style-qlab-steps>li::before {
  content: "STEP " counter(knowledge-ol);
  top: 1.35em;
  display: inline-block;
  padding: 0.45em 0.9em;
  background: var(--oragne);
  border-radius: 50vh;
  color: var(--white);
  font-size: calc(12 * var(--u));
  line-height: 1;
  letter-spacing: 0.06em;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) ol.is-style-qlab-steps>li strong {
  background: none;
}

/* ========================================
Image
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: calc(10 * var(--u));
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) figure {
  line-height: 1;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(figcaption, .wp-element-caption, .wp-caption-text) {
  margin-top: 0.6em;
  margin-bottom: 0;
  font-size: 0.85em;
  line-height: 1.6;
  color: var(--gray);
  text-align: left;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-caption {
  max-width: 100%;
  margin-top: 1.5em;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .alignright {
  display: block;
  margin-left: auto;
  text-align: right;
}

/* ========================================
Quote
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) blockquote {
  margin-inline: 0;
  padding: 1.0em 1.4em;
  background: var(--l-gray);
  border: 0;
  border-radius: calc(10 * var(--u));
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) blockquote> :first-child {
  margin-top: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-size: 0.8em;
  font-style: normal;
  line-height: 1.6;
  color: var(--gray);
}

/* ========================================
Table
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-table {
  overflow-x: auto;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.7;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-table table {
  margin-top: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(th, td) {
  padding: 0.7em 1em;
  border: 1px solid var(--font-gray);
  min-width: 7em;
  vertical-align: top;
  text-align: left;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) th {
  background: var(--l-gray);
  font-weight: 700;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) :is(thead, tfoot) {
  border: 0;
}

/* ========================================
Separator
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) hr {
  width: auto;
  margin: 2.5em 0;
  border: 0;
  border-top: 1px dashed var(--border);
  background: none;
  opacity: 1;
}

/* ========================================
記事パーツ：ボックス（ポイント・注意・まとめ）
ラベル文言は変数で言語別（韓国語は :lang(ko) で上書き。エディタは knowledge-editor.php でインライン指定）
======================================== */
:root:lang(ko) {
  --qlab-label-caution: '주의';
  --qlab-label-summary: '정리';
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group:is(.is-style-qlab-point, .is-style-qlab-caution, .is-style-qlab-summary) {
  position: relative;
  margin-top: 2.2em;
  padding: 1.8em 1.4em 1.4em;
  border-radius: calc(10 * var(--u));
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group:is(.is-style-qlab-point, .is-style-qlab-caution, .is-style-qlab-summary)::before {
  position: absolute;
  top: 0;
  left: 1.2em;
  transform: translateY(-50%);
  padding: 0.55em 1.2em;
  border-radius: 50vh;
  font-family: var(--font-inter);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--oragne);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group:is(.is-style-qlab-point, .is-style-qlab-caution, .is-style-qlab-summary)> :first-child,
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group:is(.is-style-qlab-point, .is-style-qlab-caution, .is-style-qlab-summary)>.wp-block-group__inner-container> :first-child {
  margin-top: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group.is-style-qlab-point {
  background: var(--l-gray);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group.is-style-qlab-point::before {
  content: var(--qlab-label-point, 'POINT');
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group.is-style-qlab-caution {
  background: var(--white);
  border: 1px dashed var(--black);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group.is-style-qlab-caution::before {
  content: var(--qlab-label-caution, '注意');
  background: var(--black);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group.is-style-qlab-summary {
  background: var(--white);
  border: 2px solid var(--oragne);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-group.is-style-qlab-summary::before {
  content: var(--qlab-label-summary, 'まとめ');
}

/* ========================================
記事パーツ：Q&A（details）
======================================== */
:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details {
  padding: 1.1em 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details+.wp-block-details {
  margin-top: 0;
  border-top: 0;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details summary {
  position: relative;
  padding: 0.2em 2em 0.2em 2.6em;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details summary::-webkit-details-marker {
  display: none;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details summary::before {
  content: 'Q';
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  background: url(../img/top/feature_num.png) center / contain no-repeat;
  color: var(--oragne);
  font-family: var(--font-inter);
  font-weight: 700;
  line-height: 1;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details summary::after {
  content: '';
  position: absolute;
  top: 0.75em;
  right: 0.4em;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details[open] summary::after {
  top: 0.95em;
  transform: rotate(-135deg);
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details> :not(summary) {
  position: relative;
  margin-top: 0.8em;
  padding-left: 2.6em;
}

:is(.p-knowledge-article__content, .editor-styles-wrapper .is-root-container) .wp-block-details>summary+ :not(summary)::before {
  content: 'A';
  position: absolute;
  top: 0.1em;
  left: 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  background: var(--black);
  border-radius: 50%;
  color: var(--white);
  font-family: var(--font-inter);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
}