@charset "UTF-8";
/*
 * v2 拡張コンポーネント（RULES 8）。common.css の後に読み込む。
 * markup は _v2_migration/catalogue_extend.html を参照。
 */

/* ------------------------------------------------------------
 * FaqAccordion：よくあるご質問。details / summary で開閉する（JS 不要）
 * ------------------------------------------------------------ */
[id$=v2] .faq-accordion {
  border-top: 1px solid var(--solid-gray-200);
}

[id$=v2] .faq-accordion__item {
  border-bottom: 1px solid var(--solid-gray-200);
}

[id$=v2] .faq-accordion__question {
  position: relative;
  display: block;
  padding: var(--space-24) calc(var(--space-16) + 1.6rem + var(--space-16)) var(--space-24) var(--space-8);
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--dark-blue);
  transition: color 0.3s;
}

[id$=v2] .faq-accordion__question::-webkit-details-marker {
  display: none;
}

/* ＋ / − アイコン */
[id$=v2] .faq-accordion__question::before,
[id$=v2] .faq-accordion__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-16);
  width: 1.6rem;
  height: 2px;
  margin-top: -1px;
  background-color: currentColor;
  transition: transform 0.3s;
}

[id$=v2] .faq-accordion__question::after {
  transform: rotate(90deg);
}

[id$=v2] .faq-accordion__item[open] > .faq-accordion__question::after {
  transform: rotate(0);
}

[id$=v2] .faq-accordion__question:hover {
  color: var(--blue);
}

[id$=v2] .faq-accordion__question:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

[id$=v2] .faq-accordion__answer {
  padding: 0 var(--space-8) var(--space-32);
}

/* 回答内の段落・リスト・表・枠は 16px 間隔で並べる（gen-list などの大きな上下余白を打ち消す） */
[id$=v2] .faq-accordion__answer > *,
[id$=v2] .faq-accordion__answer .notice-block__inner > * {
  margin-block: 0;
}

[id$=v2] .faq-accordion__answer > * + *,
[id$=v2] .faq-accordion__answer .notice-block__inner > * + * {
  margin-top: var(--space-16);
}

/* ------------------------------------------------------------
 * DataTable：複数列の表。SP で表が収まらないときは横スクロール
 * ------------------------------------------------------------ */
[id$=v2] .data-table,
[id$=v2] .ticker-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

[id$=v2] .data-table__table,
[id$=v2] .ticker-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-14);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--base-text-color);
}

/* 列が多い表：SP では最小幅を保って横スクロールさせる */
[id$=v2] .data-table--wide .data-table__table {
  min-width: 72rem;
}

[id$=v2] .data-table__table :where(th, td),
[id$=v2] .ticker-list :where(th, td) {
  padding: var(--space-8);
  border: 1px solid var(--solid-gray-200);
  text-align: left;
  vertical-align: top;
}

[id$=v2] .data-table__table thead th,
[id$=v2] .ticker-list thead th {
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
  color: var(--white);
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap; /* 見出しは 1 文字ずつ折り返さない。収まらなければ横スクロール */
}

[id$=v2] .data-table__table tbody th,
[id$=v2] .ticker-list tbody th {
  background-color: var(--light-gray);
  font-weight: 700;
}

@media screen and (min-width: 768px) {
  [id$=v2] .data-table__table,
  [id$=v2] .ticker-list table {
    font-size: var(--font-size-16);
  }

  [id$=v2] .data-table__table :where(th, td) {
    padding: var(--space-16) var(--space-24);
  }

  /* 銘柄一覧は行数が多い（最大 96 行）ので PC でも詰める */
  [id$=v2] .ticker-list :where(th, td) {
    padding: var(--space-8) var(--space-16);
  }
}

/* DataTable の詰めた表示（--compact）：行数・列数の多い一覧表（corporatefinance の上場会社一覧など） */
[id$=v2] .data-table--compact .data-table__table {
  font-size: var(--font-size-14);
}

[id$=v2] .data-table--compact .data-table__table :where(th, td) {
  padding: var(--space-8) var(--space-16);
}

/* 折り返さないセル：日付（2012年9月25日）や、<br> で区切った短い会社名など */
[id$=v2] .data-table__table .data-table__cell--nowrap {
  white-space: nowrap;
}

/* ------------------------------------------------------------
 * gen-definition-table--compact：項目の多い「項目：内容」の表を詰めて表示する
 * （gen-definition-table は PC で上下 32px・中央寄せ。会社情報が 81 社並ぶ ipo などには大きすぎる）
 * ------------------------------------------------------------ */
[id$=v2] .gen-definition-table.gen-definition-table--compact {
  margin-inline: 0;
  max-width: none;
}

[id$=v2] .gen-definition-table--compact :is(.gen-definition-table__label, .gen-definition-table__value) {
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-size-14);
}

@media screen and (min-width: 768px) {
  [id$=v2] .gen-definition-table.gen-definition-table--compact {
    grid-template-columns: 20rem 1fr;
  }

  [id$=v2] .gen-definition-table--compact :is(.gen-definition-table__label, .gen-definition-table__value) {
    padding: var(--space-8) var(--space-24);
    font-size: var(--font-size-16);
  }
}

/* ------------------------------------------------------------
 * TickerList：取扱銘柄一覧。旧ページと共用の include（import_TickerList.php）を
 * そのまま読み込み、旧 markup（h4 / table / caption / a.pdf）を DataTable と同じ見た目にする
 * ------------------------------------------------------------ */
[id$=v2] .ticker-list h4 {
  margin: var(--space-48) 0 var(--space-16);
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--dark-blue);
}

[id$=v2] .ticker-list h4:first-child {
  margin-top: 0;
}

[id$=v2] .ticker-list caption {
  caption-side: top;
  padding-bottom: var(--space-8);
  text-align: left;
}

/* 銘柄コード列は折り返さない（GOOGL が GOOG / L に割れないように） */
[id$=v2] .ticker-list tbody > tr > :first-child {
  white-space: nowrap;
}

[id$=v2] .ticker-list td a {
  text-decoration: underline;
}

[id$=v2] .ticker-list td a:hover {
  color: var(--dark-blue);
}

/* 個別ページがない銘柄（href="javascript:;"）はリンクに見せない */
[id$=v2] .ticker-list a[href^="javascript"] {
  text-decoration: none;
  pointer-events: none;
}

[id$=v2] .ticker-list a.pdf::before {
  content: "";
  display: inline-block;
  width: 1lh;
  aspect-ratio: 1/1;
  margin-right: var(--space-4);
  vertical-align: top;
  background: url("../images/icon-pdf.png") 50% 50% / contain no-repeat;
}

/* TickerSummary：銘柄ページの 英名 / 業種（notice-block--info + definition-table--attributes）。行間を詰める */
[id$=v2] .ticker-summary .definition-table--attributes {
  gap: var(--space-4);
}

/* ------------------------------------------------------------
 * section--nav：ページ末尾の関連ページ一覧（旧ページの左メニューの置き換え、RULES 4.7）。
 * 本文と区別するため、上に区切り線を引く（背景色は付けない）
 * ------------------------------------------------------------ */
[id$=v2] .section.section--nav {
  margin-bottom: var(--space-96);
}

[id$=v2] .section--nav > .section__inner {
  padding-top: var(--space-48);
  border-top: 1px solid var(--solid-gray-200);
}

@media screen and (min-width: 768px) {
  [id$=v2] .section--nav > .section__inner {
    padding-top: var(--space-64);
  }
}

/* 表示中のページ（aria-current="page"）：太字・濃い青、下線なし */
[id$=v2] .section--nav .gen-link[aria-current="page"] {
  color: var(--dark-blue);
  font-weight: 700;
  text-decoration: none;
}

/* 項目の多い一覧は u-grid-cols-* で段組みにする。段組みのときは項目の上余白を grid の gap に任せる */
[id$=v2] .link-list[class*="u-grid-cols-"] > .link-list__item {
  margin-top: 0;
}

/* 項目の多いグループ（v2_nav_render の第 3 引数）：grid の 2 列分の幅。リンクは 2 段組み（上から下、次に右の段）。
   段の頭で余白が消えないよう、項目の間隔は margin ではなく padding で取る（他の列と同じ 32px / PC 16px） */
[id$=v2] .section--nav .section-nav__group--wide {
  grid-column: span 2;
}

/* 他の列では見出しの下余白（8px）と 1 項目目の margin が相殺されるため、ここでは見出しの下余白をなくして揃える */
[id$=v2] .section--nav .section-nav__group--wide > .gen-paragraph {
  margin-bottom: 0;
}

[id$=v2] .link-list.link-list--cols-2 {
  columns: 2;
  column-gap: 18px;
}

[id$=v2] .link-list.link-list--cols-2 > .link-list__item {
  margin-top: 0;
  padding-top: var(--space-32);
  break-inside: avoid;
}

@media screen and (min-width: 768px) {
  [id$=v2] .link-list.link-list--cols-2 {
    column-gap: var(--space-24);
  }

  [id$=v2] .link-list.link-list--cols-2 > .link-list__item {
    padding-top: var(--space-16);
  }
}

/* ------------------------------------------------------------
 * StepFlow：手続きの流れ（STEP1 → STEP2 …）。項目の間に下向き矢印
 * ------------------------------------------------------------ */
[id$=v2] .step-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

[id$=v2] .step-flow__item {
  position: relative;
}

[id$=v2] .step-flow__item + .step-flow__item {
  margin-top: var(--space-48);
}

[id$=v2] .step-flow__item + .step-flow__item::before {
  content: "";
  position: absolute;
  top: -3rem; /* 48px の間隔の中央 */
  left: 50%;
  border-style: solid;
  border-width: 1.2rem 1.6rem 0;
  border-color: var(--note-mark-color, #c00) transparent transparent;
  transform: translateX(-50%);
}

[id$=v2] .step-flow__heading {
  margin: 0;
  padding: var(--space-8) var(--space-16);
  border-bottom: 2px solid var(--solid-gray-200);
  background-color: var(--light-gray);
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--dark-blue);
}

[id$=v2] .step-flow__body {
  margin-top: var(--space-16);
}

[id$=v2] .step-flow__body > * + * {
  margin-top: var(--space-16);
}

@media screen and (min-width: 768px) {
  [id$=v2] .step-flow__heading {
    font-size: var(--font-size-18);
  }
}

/* ------------------------------------------------------------
 * media-block--thumb：小さなアイコン画像（100px 程度）を文章の左に回り込ませる（SP / PC 共通）
 * media-block--float と組み合わせる
 * ------------------------------------------------------------ */
[id$=v2] .media-block--thumb .media-block__media {
  float: left;
  width: 8rem;
  margin: 0 var(--space-16) var(--space-8) 0;
}

[id$=v2] .media-block--thumb .media-block__row::after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (min-width: 768px) {
  [id$=v2] .media-block--thumb .media-block__media {
    width: 10rem;
    margin: 0 var(--space-16) var(--space-8) 0;
  }
}

/* ------------------------------------------------------------
 * media-block--profile：人物写真（縦長）＋ 紹介文。PC は写真を 30% の列にする（既定の media-block は 50 / 50）
 * SP は写真を縦に積み、幅を抑える。knowledge/authors/index.php
 * ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  [id$=v2] .media-block--profile .media-block__media {
    max-width: 24rem;
  }
}

@media screen and (min-width: 768px) {
  [id$=v2] .media-block--profile:not(.media-block--float) .media-block__media {
    width: 30%;
  }

  [id$=v2] .media-block--profile:not(.media-block--float) .media-block__body {
    width: calc(70% - var(--space-32));
  }
}

/* ------------------------------------------------------------
 * media-block--author：コラム末尾「執筆者紹介」。小さな顔写真の列 ＋ 紹介文の列（SP / PC 共通の 2 列。
 * 文章は写真の下に回り込まない）。旧ページの .well-lg .media-item（写真 150px）の置き換え
 * ------------------------------------------------------------ */
[id$=v2] .media-block.media-block--author .media-block__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-16);
}

[id$=v2] .media-block.media-block--author .media-block__media {
  flex: 0 0 8rem;
  width: 8rem;
  margin: 0;
}

[id$=v2] .media-block.media-block--author .media-block__body {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

@media screen and (min-width: 768px) {
  [id$=v2] .media-block.media-block--author .media-block__row {
    gap: var(--space-24);
  }

  [id$=v2] .media-block.media-block--author .media-block__media {
    flex-basis: 15rem;
    width: 15rem;
  }
}

/* ------------------------------------------------------------
 * gen-list--compact：表のセルなど狭い場所で使う詰めたリスト（gen-list の上下余白・項目間を小さくする）
 * ------------------------------------------------------------ */
[id$=v2] .gen-list.gen-list--compact {
  margin-block: 0;
}

[id$=v2] .gen-list.gen-list--compact > li {
  margin-block: var(--space-4);
}

/* ------------------------------------------------------------
 * gen-list--tight：本文中の短い項目のリスト（旧ページの list_decimal / list_disc）。
 * gen-list の項目間（SP 32px / PC 48px）は短い項目には広すぎるので、項目間 8px・リストの上下 24px にする
 * ------------------------------------------------------------ */
[id$=v2] .gen-list.gen-list--tight {
  margin-block: var(--space-24);
}

[id$=v2] .gen-list.gen-list--tight li {
  margin-block: var(--space-8);
}

[id$=v2] .gen-list.gen-list--tight :is(ul, ol) {
  margin-block: var(--space-8);
}

/* ------------------------------------------------------------
 * legal-list--compact：※ 注記など短い注意書きを詰めて並べる（data-marker="※" と組み合わせる）
 * ------------------------------------------------------------ */
[id$=v2] .legal-list.legal-list--compact {
  margin-block: var(--space-8) 0;
}

[id$=v2] .legal-list.legal-list--compact > li {
  margin-block: var(--space-4);
}

/* ※ の色（旧ページの .red / .in_note と同じく赤）。本文中の（※1）などは <span class="note-mark"> で囲む */
[id$=v2] .legal-list--compact > .legal-list__item::before,
[id$=v2] .note-mark {
  color: var(--note-mark-color, #c00);
}

/* 文中の強調（旧ページの .red.bold） */
[id$=v2] .text-accent,
[id$=v2] .gen-paragraph .text-accent {
  color: var(--note-mark-color, #c00);
  font-weight: 700;
}

/* ------------------------------------------------------------
 * 見出しと本文の間隔：同じブロックの見出し（section__heading）と内容を近づける
 * ------------------------------------------------------------ */
[id$=v2] .gen-h2.section__heading {
  margin-bottom: var(--space-16);
}

@media screen and (min-width: 768px) {
  [id$=v2] .gen-h2.section__heading {
    margin-bottom: var(--space-24);
  }
}

/* ------------------------------------------------------------
 * notice-block の色違い（旧ページの bg-warning・risk__box = 黄、bg-info = 青）
 * ------------------------------------------------------------ */
[id$=v2] .notice-block--caution .notice-block__inner {
  background-color: #fcf8e3;
}

[id$=v2] .notice-block--info .notice-block__inner {
  background-color: #e3f1f9;
}

/* 枠の中の表は白地にする（旧 bg-info 内の表と同じ） */
[id$=v2] .notice-block .data-table__table td {
  background-color: var(--white);
}

[id$=v2] .notice-block__inner > .legal-list--compact:first-child {
  margin-top: 0;
}

/* 枠の中の見出し＋リスト：見出し直後の余白を詰め、最後の要素の下余白をなくす */
[id$=v2] .notice-block__inner > .gen-heading + .gen-list {
  margin-top: var(--space-16);
}

[id$=v2] .notice-block__inner > :last-child {
  margin-bottom: 0;
}

/* DataTable の強調行（旧 tr.warning） */
[id$=v2] .data-table__table .data-table__row--highlight > * {
  background-color: #fcf8e3;
}

/* ------------------------------------------------------------
 * PostBody：WordPress（/information/）の記事本文。gen-article と組み合わせる（div.gen-article.post-body）。
 * 本文は旧サイトの class（bootstrap 3 + style.css）で書かれているので、同じ意味の見た目を v2 の色・余白で当てる。
 * 表は表示時に div.data-table で囲まれる（テーマの v2-information.php）
 * ------------------------------------------------------------ */
[id$=v2] .post-body {
  font-size: var(--font-size-16);
  line-height: 1.8;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

[id$=v2] .post-body::after {
  content: "";
  display: table;
  clear: both;
}

[id$=v2] .post-body > * {
  margin-block: 0;
}

[id$=v2] .post-body > * + * {
  margin-top: var(--space-24);
}

[id$=v2] .post-body > :is(h2, h3, h4, h5, h6) {
  margin-top: var(--space-48);
  margin-bottom: 0;
}

[id$=v2] .post-body > :is(h2, h3, h4, h5, h6) + * {
  margin-top: var(--space-16);
}

[id$=v2] .post-body > :first-child {
  margin-top: 0;
}

/* リンクは文中のリンク（link--inline）と同じ。gen-article の矢印は付けない */
[id$=v2] .post-body a {
  display: inline;
  padding-left: 0;
  color: var(--solid-gray-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[id$=v2] .post-body a::before {
  content: none;
}

[id$=v2] .post-body a:hover {
  color: var(--dark-blue);
}

[id$=v2] .post-body a.pdf::before {
  content: "";
  position: static;
  display: inline-block;
  width: 1lh;
  height: auto;
  aspect-ratio: 1/1;
  margin-right: var(--space-4);
  border: 0;
  transform: none;
  vertical-align: top;
  background: url("../images/icon-pdf.png") 50% 50% / contain no-repeat;
}

/* リスト：gen-article の大きな行間を本文向けに詰める */
[id$=v2] .post-body :is(ul, ol) {
  margin-block: var(--space-16);
}

[id$=v2] .post-body :is(ul, ol) li {
  margin-block: var(--space-8);
}

/* 記号なしの項目（旧 list_none、エディタが入れる <li style="list-style-type: none">。中に入れ子のリストだけがある） */
[id$=v2] .post-body ul.list_none > li,
[id$=v2] .post-body li[style*="list-style-type: none"] {
  padding-left: 0;
}

[id$=v2] .post-body ul.list_none > li::before,
[id$=v2] .post-body li[style*="list-style-type: none"]::before {
  content: none;
}

[id$=v2] .post-body li[style*="list-style-type: none"] > :is(ul, ol) {
  margin-block: 0;
  padding-left: 0;
}

/* 入れ子だが見た目は 1 段目なので、記号も 1 段目と同じにする */
[id$=v2] .post-body li[style*="list-style-type: none"] > ul > li::before {
  content: "・";
}

[id$=v2] .post-body img {
  max-width: 100%;
  height: auto;
}

[id$=v2] .post-body .pull-left {
  float: left;
  margin: 0 var(--space-16) var(--space-8) 0;
}

[id$=v2] .post-body .pull-right {
  float: right;
  margin: 0 0 var(--space-8) var(--space-16);
}

@media screen and (max-width: 767px) {
  /* SP：大きな画像は回り込ませない */
  [id$=v2] .post-body img.pull-left,
  [id$=v2] .post-body img.pull-right {
    max-width: 40%;
  }
}

/* 文字の装飾（旧 style.css と同じ意味） */
[id$=v2] .post-body .bold {
  font-weight: 700;
}

[id$=v2] .post-body .red {
  color: var(--note-mark-color, #c00);
}

[id$=v2] .post-body .fontS {
  font-size: var(--font-size-12);
}

[id$=v2] .post-body .fontM {
  font-size: var(--font-size-14);
}

[id$=v2] .post-body .fontL {
  font-size: var(--font-size-18);
}

[id$=v2] .post-body .center {
  text-align: center;
}

[id$=v2] .post-body :is(.right, .text-right) {
  text-align: right;
}

[id$=v2] .post-body .kome {
  padding-left: 1em;
  text-indent: -1em;
}

/* 枠（旧 well / well-lg。bg-info = 青、bg-warning = 黄。notice-block と同じ見た目） */
[id$=v2] .post-body :is(.well, .well-lg) {
  padding: var(--space-24);
  background-color: var(--light-gray);
}

[id$=v2] .post-body :is(.well, .well-lg).bg-info {
  background-color: #e3f1f9;
}

[id$=v2] .post-body :is(.well, .well-lg).bg-warning {
  background-color: #fcf8e3;
}

[id$=v2] .post-body :is(.well, .well-lg) > :first-child {
  margin-top: 0;
}

[id$=v2] .post-body :is(.well, .well-lg) > :last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  [id$=v2] .post-body :is(.well, .well-lg) {
    padding: var(--space-24) var(--space-32);
  }
}

/* 手順の見出し（旧 .step）。StepFlow の見出しと同じ */
[id$=v2] .post-body .step {
  padding: var(--space-8) var(--space-16);
  border-bottom: 2px solid var(--solid-gray-200);
  background-color: var(--light-gray);
  font-weight: 700;
  color: var(--dark-blue);
}

/* 表：DataTable の見た目。旧 class の色付きセル（r1 = 赤、y1 = 黄、c1 = 灰、w1 = 白）はそのまま残す */
[id$=v2] .post-body .data-table__table caption {
  caption-side: top;
  padding-bottom: var(--space-8);
  text-align: left;
}

[id$=v2] .post-body .data-table__table :is(th, td) p {
  margin: 0;
}

[id$=v2] .post-body .data-table__table .r1 {
  background-color: #fcc;
}

[id$=v2] .post-body .data-table__table .y1 {
  background-color: #ffc;
}

[id$=v2] .post-body .data-table__table .c1 {
  background-color: #eee;
}

[id$=v2] .post-body .data-table__table .w1 {
  background-color: var(--white);
}

[id$=v2] .post-body .data-table__table .center {
  text-align: center;
}

/* 枠線なしの表（旧 tableNone） */
[id$=v2] .post-body .data-table__table.tableNone :is(th, td) {
  border: 0;
  background-color: transparent;
  color: inherit;
}

[id$=v2] .post-body .youtube-wrapper {
  max-width: 64rem;
}

/* 旧 table.fxcalendar の国の旗（td.jn など。/img/cal_*.png）。fx/imm・futures/cftc の記事本文（Wave 12） */
[id$=v2] .post-body .fxcalendar td.jn,
[id$=v2] .post-body .fxcalendar td.us,
[id$=v2] .post-body .fxcalendar td.ec,
[id$=v2] .post-body .fxcalendar td.uk,
[id$=v2] .post-body .fxcalendar td.au,
[id$=v2] .post-body .fxcalendar td.nz,
[id$=v2] .post-body .fxcalendar td.ca,
[id$=v2] .post-body .fxcalendar td.sz,
[id$=v2] .post-body .fxcalendar td.sa,
[id$=v2] .post-body .fxcalendar td.ge,
[id$=v2] .post-body .fxcalendar td.fr,
[id$=v2] .post-body .fxcalendar td.it,
[id$=v2] .post-body .fxcalendar td.hk,
[id$=v2] .post-body .fxcalendar td.ch {
  padding-left: calc(var(--space-8) + 3rem);
  background-repeat: no-repeat;
  background-position: var(--space-8) 50%;
  background-size: 2.4rem 2.4rem;
}
[id$=v2] .post-body .fxcalendar td.jn { background-image: url("/img/cal_jn.png"); }
[id$=v2] .post-body .fxcalendar td.us { background-image: url("/img/cal_us.png"); }
[id$=v2] .post-body .fxcalendar td.ec { background-image: url("/img/cal_ec.png"); }
[id$=v2] .post-body .fxcalendar td.uk { background-image: url("/img/cal_uk.png"); }
[id$=v2] .post-body .fxcalendar td.au { background-image: url("/img/cal_au.png"); }
[id$=v2] .post-body .fxcalendar td.nz { background-image: url("/img/cal_nz.png"); }
[id$=v2] .post-body .fxcalendar td.ca { background-image: url("/img/cal_ca.png"); }
[id$=v2] .post-body .fxcalendar td.sz { background-image: url("/img/cal_sz.png"); }
[id$=v2] .post-body .fxcalendar td.sa { background-image: url("/img/cal_sa.png"); }
[id$=v2] .post-body .fxcalendar td.ge { background-image: url("/img/cal_ge.png"); }
[id$=v2] .post-body .fxcalendar td.fr { background-image: url("/img/cal_fr.png"); }
[id$=v2] .post-body .fxcalendar td.it { background-image: url("/img/cal_it.png"); }
[id$=v2] .post-body .fxcalendar td.hk { background-image: url("/img/cal_hk.png"); }
[id$=v2] .post-body .fxcalendar td.ch { background-image: url("/img/cal_ch.png"); }

/* 記事の日付とカテゴリ（PostBody の上） */
[id$=v2] .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin-bottom: var(--space-32);
}

[id$=v2] .post-meta__date {
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--solid-gray-400);
}

/* ------------------------------------------------------------
 * Pagination：一覧のページ送り（WordPress の wp-pagenavi。nav.pagination で出力）
 *   span.pages = 「1 / 64」、span.current = 現在のページ、a.page / a.first / a.last、span.extend = 「...」
 * ------------------------------------------------------------ */
[id$=v2] .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-64);
  font-size: var(--font-size-14);
  line-height: 1;
}

[id$=v2] .pagination > :is(a, span) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 var(--space-8);
  border: 1px solid var(--solid-gray-200);
  background-color: var(--white);
  color: var(--solid-gray-800);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

[id$=v2] .pagination > a:hover {
  border-color: var(--dark-blue);
  color: var(--dark-blue);
}

[id$=v2] .pagination > .current {
  border-color: var(--dark-blue);
  background-color: var(--dark-blue);
  color: var(--white);
  font-weight: 700;
}

[id$=v2] .pagination > :is(.pages, .extend) {
  min-width: 0;
  border: 0;
  background-color: transparent;
}

[id$=v2] .pagination > .pages {
  flex-basis: 100%;
  height: auto;
  margin-bottom: var(--space-8);
  color: var(--solid-gray-400);
}

/* ------------------------------------------------------------
 * RateBoard：レート一覧（外部 iframe rt-market.phillip-mt5.jp/market-watch）。cfd/index.php・fx/index.php
 *   div.rate-board > iframe
 * iframe の中身は iframe 自身の幅 768px でレイアウトが切り替わり、高さが変わる（2026-10-22 計測、高い方の FX タブ）:
 *   幅 768px 未満：最大 665px ／ 768px 以上：最大 505px
 * 別ドメインのため JS で高さを取れない → 中身の高さに少し余裕を足した固定値にして、iframe 内のスクロールバーを出さない。
 * 切り替えは画面幅ではなく枠の幅で判定する（container query）。
 * ------------------------------------------------------------ */
[id$=v2] .rate-board {
  container-type: inline-size;
}

[id$=v2] .rate-board iframe {
  display: block;
  width: 100%;
  height: 672px;
  border: 0;
}

@container (min-width: 768px) {
  [id$=v2] .rate-board iframe {
    height: 512px;
  }
}

/* ------------------------------------------------------------
 * YoutubeWrapper：common.css は aspect-ratio を var(--youtube-wrapper-aspect-ratio) で指定するが既定値がなく、
 * 変数を指定しないと高さ 0（動画が見えない）になる → 既定値 16:9。company/index.php のように style 属性で指定した値が優先される
 * ------------------------------------------------------------ */
[id$=v2] .youtube-wrapper {
  --youtube-wrapper-aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------
 * CodeBlock：プログラムのコード（knowledge の MQL5 コラムなど）。pre.code-block > code
 *   折り返さずに横スクロール（コードの改行・字下げをそのまま保つ）
 * ------------------------------------------------------------ */
[id$=v2] .code-block {
  margin-block: var(--space-24);
  padding: var(--space-16);
  overflow-x: auto;
  border: 1px solid var(--solid-gray-200);
  background-color: var(--light-gray);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--font-size-12);
  line-height: 1.6;
  color: var(--solid-gray-800);
  white-space: pre;
  tab-size: 4;
}

[id$=v2] .code-block code {
  font: inherit;
}

@media screen and (min-width: 768px) {
  [id$=v2] .code-block {
    padding: var(--space-24);
    font-size: var(--font-size-14);
  }
}

/* ------------------------------------------------------------
 * TintedPanel：灰色の地のパネル。旧ページの色付きの帯（cfd の特長、futures のサービス概要〜はじめての方へ）の置き換え。
 *   div.tinted-panel の中にブロック（h2 ＋内容、media-block、カード など）を縦に並べる。ブロックの間隔は gap で取る
 * MediaBlock--center：見出し＋文章 | 写真 の 2 列（PC）で、文章を写真の高さの中央に置く
 * ------------------------------------------------------------ */
[id$=v2] .tinted-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--space-32) var(--space-16);
  background-color: var(--light-gray);
}

[id$=v2] .tinted-panel .media-block + .media-block {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  [id$=v2] .tinted-panel {
    gap: var(--space-64);
    padding: var(--space-64) var(--space-48);
  }

  [id$=v2] .media-block.media-block--center:not(.media-block--float) .media-block__row {
    align-items: center;
  }
}

/* ------------------------------------------------------------
 * FeatureCard：アイコン（小さな PNG）＋ 見出し ＋ 説明文のリンクカード（横並び）。matrix + u-grid-cols-1-2 で並べる
 *   a.feature-card > img.feature-card__icon + div.feature-card__body > h3.feature-card__title + p.feature-card__text
 * アイコンは左の固定幅の列、文章は右の列で上揃え（media-block--thumb の回り込みを使わない）。
 * cfd/index.php「初心者の方も安心…」、futures/index.php「便利なマーケット情報」
 * ------------------------------------------------------------ */
[id$=v2] .feature-card {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  align-items: start;
  gap: var(--space-16);
  height: 100%;
  padding: var(--space-24) var(--space-16);
  border: 1px solid var(--solid-gray-200);
  background-color: var(--white);
  color: var(--base-text-color);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

[id$=v2] .feature-card:hover {
  border-color: var(--dark-blue);
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}

[id$=v2] .feature-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

[id$=v2] .feature-card__icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

[id$=v2] .feature-card__title {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--dark-blue);
}

/* 見出しの右に「›」（リンクであることを示す） */
[id$=v2] .feature-card__title::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-0.1em) rotate(45deg);
  transition: transform 0.2s;
}

[id$=v2] .feature-card:hover .feature-card__title {
  text-decoration: underline;
}

[id$=v2] .feature-card:hover .feature-card__title::after {
  transform: translate(0.2em, -0.1em) rotate(45deg);
}

[id$=v2] .feature-card__text {
  margin: 0;
  font-size: var(--font-size-14);
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  [id$=v2] .feature-card {
    grid-template-columns: 8rem 1fr;
    gap: var(--space-24);
    padding: var(--space-24);
  }

  [id$=v2] .feature-card__title {
    font-size: var(--font-size-18);
  }
}

/* 濃紺の地（旧ページの濃紺の箱。白いアイコン用：fx/index.php「豊富なマーケット情報」） */
[id$=v2] .feature-card.feature-card--dark {
  border-color: var(--dark-blue);
  background-color: var(--dark-blue);
  color: var(--white);
}

[id$=v2] .feature-card--dark .feature-card__title {
  color: var(--white);
}

[id$=v2] .feature-card.feature-card--dark:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
}

@media (prefers-reduced-motion: reduce) {
  [id$=v2] .feature-card,
  [id$=v2] .feature-card__title::after {
    transition: none;
  }
}

/* 前後のページへのリンクだけのページ送り（cfd の配当カレンダーの前月 / 翌月）。a.prev は左、a.next は右 */
[id$=v2] .pagination.pagination--prev-next {
  justify-content: space-between;
  margin-block: var(--space-24);
}

[id$=v2] .pagination--prev-next > .next {
  margin-left: auto;
}

/* ------------------------------------------------------------
 * IconCard：アイコン画像（小さな PNG）＋ 項目名のリンクカード。matrix + u-grid-cols-* で並べる
 *   a.icon-card > img.icon-card__icon + span.icon-card__title
 * （grid-card は写真用で画像を枠いっぱいに広げるため、アイコンには使わない。futures/index.php・servicelist.php）
 * ------------------------------------------------------------ */
[id$=v2] .icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  height: 100%;
  padding: var(--space-24) var(--space-16);
  border: 1px solid var(--solid-gray-200);
  background-color: var(--white);
  text-align: center;
  text-decoration: none;
  color: var(--dark-blue);
  transition: border-color 0.2s, box-shadow 0.2s;
}

[id$=v2] .icon-card:hover {
  border-color: var(--dark-blue);
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}

[id$=v2] .icon-card__icon {
  width: auto;
  max-width: 100%;
  height: 6.4rem;
  object-fit: contain;
}

[id$=v2] .icon-card__title {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  [id$=v2] .icon-card__icon {
    height: 8rem;
  }

  [id$=v2] .icon-card__title {
    font-size: var(--font-size-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  [id$=v2] .icon-card {
    transition: none;
  }
}

/* ------------------------------------------------------------
 * CtaBlock：口座開設などの申込ボタンを目立たせるブロック（中央寄せ、薄いグレーの背景）
 *   div.cta-block > p.cta-block__lead + a.button.button--filled
 * button--filled：塗りつぶしのボタン（ヘッダーの「口座開設」と同じ見た目）。通常の .button より大きい。色は button--primary（濃い青）／button--red
 * ------------------------------------------------------------ */
[id$=v2] .cta-block {
  padding: var(--space-32) var(--space-24);
  background-color: var(--light-gray);
  text-align: center;
}

[id$=v2] .cta-block__lead {
  margin: 0 0 var(--space-16);
  font-size: var(--font-size-18);
  font-weight: 700;
  line-height: 1.6;
  color: var(--dark-blue);
}

[id$=v2] .button.button--filled {
  width: 100%;
  max-width: 36rem;
  height: 6.4rem;
  background-color: var(--button-theme-color);
  color: var(--button-theme-color-versa);
  font-size: var(--font-size-18);
  font-weight: 700;
}

[id$=v2] .button.button--filled span::before,
[id$=v2] .button.button--filled span::after {
  border-color: var(--button-icon-theme-color-versa);
}

[id$=v2] .button.button--filled:hover {
  background-color: var(--button-theme-color-versa);
  color: var(--button-theme-color);
}

[id$=v2] .button.button--filled:hover span::before,
[id$=v2] .button.button--filled:hover span::after {
  border-color: var(--button-icon-theme-color);
}

/* 赤のボタン（旧ページの「口座開設」ボタン画像と同じ赤 #c80033。common.css の --red #ff1515 は明るすぎるため）。button--filled と組み合わせる */
[id$=v2] .button.button--red {
  --button-theme-color: #c80033;
  --button-theme-color-versa: var(--white);
  --button-icon-theme-color: #c80033;
  --button-icon-theme-color-versa: var(--white);
  border-color: #c80033;
}

@media (prefers-reduced-motion: reduce) {
  [id$=v2] .pagination > :is(a, span) {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [id$=v2] .faq-accordion__question,
  [id$=v2] .faq-accordion__question::before,
  [id$=v2] .faq-accordion__question::after {
    transition: none;
  }
}

/* ------------------------------------------------------------
 * Tabs：タブ切り替え（旧 idTabs / nav-tabs / nav-pills）。JS: /v2/js/extend-tabs.js
 * JS が動くまでは各パネル（見出し＋内容）を順に全部表示する。JS がタブ列を作り、is-ready を付ける
 * ------------------------------------------------------------ */
[id$=v2] .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-24);
  border-bottom: 2px solid var(--dark-blue);
}

/* SP：1 行に 2 つずつ（長いタブ名は折り返す） */
[id$=v2] .tabs__tab {
  flex: 1 1 calc(50% - var(--space-4));
  min-width: 0;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--solid-gray-200);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background-color: var(--light-gray);
  font-family: inherit;
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--dark-blue);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

[id$=v2] .tabs__tab:hover {
  background-color: var(--blue-50);
}

[id$=v2] .tabs__tab[aria-selected="true"] {
  border-color: var(--dark-blue);
  background-color: var(--dark-blue);
  color: var(--white);
}

[id$=v2] .tabs__tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

[id$=v2] .tabs.is-ready > .tabs__panel[hidden] {
  display: none;
}

/* タブ列があるときはパネルの見出しを隠す（スクリーンリーダーには残す） */
[id$=v2] .tabs.is-ready > .tabs__panel > .tabs__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* JS なし・印刷：パネルを順に並べる */
[id$=v2] .tabs__panel + .tabs__panel {
  margin-top: var(--space-48);
}

[id$=v2] .tabs.is-ready > .tabs__panel + .tabs__panel {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  [id$=v2] .tabs__tab {
    flex: 0 1 auto;
    padding: var(--space-8) var(--space-24);
    font-size: var(--font-size-16);
  }
}

@media print {
  [id$=v2] .tabs__list {
    display: none;
  }

  [id$=v2] .tabs.is-ready > .tabs__panel[hidden] {
    display: block;
  }

  [id$=v2] .tabs.is-ready > .tabs__panel > .tabs__heading {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 var(--space-16);
    clip: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [id$=v2] .tabs__tab {
    transition: none;
  }
}

/* ------------------------------------------------------------
 * matrix--boxed：grid-card を枠付きのカードにする（トップページのサービスカードと同じ見た目）。
 *   白地のページでも区切りが見えるよう薄い枠線を付け、文字に左右の余白を取る。ホバーで影を付ける。
 *   div.matrix.matrix--boxed > a.grid-card（knowledge の一覧ページ）
 * ------------------------------------------------------------ */
[id$=v2] .matrix--boxed .grid-card {
  border: 1px solid var(--solid-gray-200);
  border-radius: var(--rd-sm);
  background-color: var(--white);
  box-shadow: none;
}

[id$=v2] .matrix--boxed .grid-card:hover {
  box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.2);
}

[id$=v2] .matrix--boxed .grid-card__inner {
  padding: var(--space-16);
}

@media screen and (min-width: 768px) {
  [id$=v2] .matrix--boxed .grid-card__inner {
    padding: var(--space-24);
  }
}

/* ------------------------------------------------------------
 * DataTable の並べ替え・検索・ページ送り（旧 jQuery DataTables）。JS: /v2/js/extend-data-table.js
 *   div.data-table.js-data-table の前に .data-table__controls、後に .data-table__footer を JS が作る
 * ------------------------------------------------------------ */
[id$=v2] .data-table__controls,
[id$=v2] .data-table__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  font-size: var(--font-size-14);
}

[id$=v2] .data-table__controls {
  margin-bottom: var(--space-16);
}

[id$=v2] .data-table__footer {
  margin-top: var(--space-16);
}

[id$=v2] .data-table__select,
[id$=v2] .data-table__input {
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--solid-gray-400);
  border-radius: var(--rd-sm);
  background-color: var(--white);
  font: inherit;
}

[id$=v2] .data-table__input {
  width: 16rem;
  margin-left: var(--space-4);
}

[id$=v2] .data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* 並び順の印：未選択は ⇅、昇順 ▲、降順 ▼ */
[id$=v2] .data-table__sort::after {
  content: "⇅";
  opacity: 0.5;
  font-size: 0.85em;
}

[id$=v2] th[aria-sort="ascending"] .data-table__sort::after {
  content: "▲";
  opacity: 1;
}

[id$=v2] th[aria-sort="descending"] .data-table__sort::after {
  content: "▼";
  opacity: 1;
}

[id$=v2] .data-table__empty td {
  text-align: center;
}

[id$=v2] .data-table__pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

[id$=v2] .data-table__page {
  min-width: 3.6rem;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--solid-gray-200);
  border-radius: var(--rd-sm);
  background-color: var(--white);
  color: var(--dark-blue);
  font: inherit;
  cursor: pointer;
}

[id$=v2] .data-table__page[aria-current="page"] {
  border-color: var(--dark-blue);
  background-color: var(--dark-blue);
  color: var(--white);
}

[id$=v2] .data-table__page:disabled {
  color: var(--solid-gray-400);
  cursor: default;
}

/* ------------------------------------------------------------
 * FxCalendar：経済指標カレンダー（fx/fxcalendar*.php）。DataTable と組み合わせる
 *   行：重要指標 / 日時未定 / 時間未定 を旧ページと同じ色分け。国：旗アイコン（/img/cal_*.png）＋国名
 * ------------------------------------------------------------ */
[id$=v2] .fx-calendar .is-important > * {
  background-color: #ffcce6;
}

[id$=v2] .fx-calendar .is-uncertain-date > * {
  background-color: #ffe6f3;
}

[id$=v2] .fx-calendar .is-uncertain-time > * {
  background-color: #ffd9ec;
}

[id$=v2] .fx-calendar__country {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--solid-gray-800);
  font-size: var(--font-size-12);
}

[id$=v2] .fx-calendar__flag {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
}