@charset "utf-8";

/* IRページ用の追加スタイル（PC/SP を @media で1ファイルに同梱）
   header.php（/ir/ 配下）と header-en.php（/en/ と /en/ir/ 配下）が自動で読み込む。
   IR-STYLES への登録は不要。 */


@media screen and (min-width: 1024px) {
  /* ------------------------------------------------------------
     ページ内メニュー  .page-index
     ------------------------------------------------------------ */

  .page-index .inner {
    padding: 4px 0 22px;
    border-bottom: 1px solid #1e1e1e;
  }
  .page-index ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
  }
  .page-index li a {
    position: relative;
    display: inline-block;
    padding-left: 15px;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    transition: opacity 300ms ease-out;
  }
  .page-index li a::before {
    position: absolute;
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    left: 0;
    top: 0.45em;
    border-right: 1px solid #1e1e1e;
    border-bottom: 1px solid #1e1e1e;
    transform: rotate(45deg);
  }
  .page-index li a:hover {
    opacity: 0.5;
  }


  /* ------------------------------------------------------------
     下線つき小見出し  .module-d > header.has-line
     （.module-c header と同じ見え方を .module-d でも使う）
     ------------------------------------------------------------ */

  header.has-line {
    padding: 0 0 10px;
    margin: 0 0 25px;
    border-bottom: 1px solid #1e1e1e;
  }


  /* ------------------------------------------------------------
     全幅の図版  .figure-wide
     ------------------------------------------------------------ */

  .figure-wide {
    background: #fff;
  }
  .figure-wide img {
    width: 100%;
    height: auto;
  }


  /* ------------------------------------------------------------
     人物写真2枚組  .portrait-pair
     ------------------------------------------------------------ */

  .portrait-pair {
    display: flex;
    gap: 20px;
  }
  .portrait-pair > div {
    width: calc((100% - 20px) / 2);
  }
  .portrait-pair img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .portrait-pair .name {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ------------------------------------------------------------
     カテゴリ写真の一覧  .category-list
     ------------------------------------------------------------ */

  .category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 24px;
  }
  .category-list li {
    /* 4枚なら4列、3枚なら3列。枚数で等分する */
    flex: 1 1 calc((100% - 24px * 3) / 4);
  }
  .category-list img {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 7;
    object-fit: contain;
    background: #fff;
  }
  .category-list .label {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }

  /* ------------------------------------------------------------
     区分の帯つき写真リスト  .structure-list
     （よくわかる「構成要素」専用。帯を写真の列幅に合わせるため grid で組む）
     ------------------------------------------------------------ */

  .structure-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "h1 h1 h2"
      "a  b  c";
    gap: 20px 24px;
  }
  .structure-list .h1 { grid-area: h1; }
  .structure-list .h2 { grid-area: h2; }
  .structure-list .a  { grid-area: a; }
  .structure-list .b  { grid-area: b; }
  .structure-list .c  { grid-area: c; }
  .structure-list .head {
    padding: 8px 0;
    background: #e4e4e4;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
  }
  .structure-list img {
    width: 100%;
    height: auto;
  }
  .structure-list .label {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }



  /* ------------------------------------------------------------
     指標の並び  .metric-list
     ------------------------------------------------------------ */

  .metric-list {
    display: flex;
    flex-wrap: wrap;
  }
  .metric-list dt {
    box-sizing: border-box;
    width: 230px;
    padding: 24px 20px 24px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #8c8c8c;
    border-bottom: 1px solid #d5d5d5;
  }
  .metric-list dd {
    box-sizing: border-box;
    width: calc(100% - 230px);
    padding: 20px 0 24px;
    border-bottom: 1px solid #d5d5d5;
  }
  .metric-list .row {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .metric-list .row + .row {
    margin-top: 12px;
  }
  .metric-list .name {
    min-width: 7em;
    font-size: 15px;
    line-height: 1.6;
  }
  .metric-list .value {
    font-size: 30px;
    line-height: 1.2;
    font-weight: normal;
    font-family: "Kurashikom-M", HelveticaNeue, Arial, sans-serif;
  }
  .metric-list .unit {
    margin-left: 2px;
    font-size: 16px;
  }
  .metric-list .sub {
    font-size: 12px;
    line-height: 1.6;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .metric-list .tail {
    display: block;
    margin: 10px 0 0;
    font-size: 13px;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ------------------------------------------------------------
     お店のあゆみ 3軸タイムライン  .history-axis
     ------------------------------------------------------------
     ※2026年8月時点では未使用。「北欧、暮らしの道具店」のあゆみ
       セクションを削除したため。復活させる可能性があるので残している。
     ------------------------------------------------------------ */

  .history-axis {
    margin-top: 40px;
  }
  .history-axis .inner {
    position: relative;
  }
  .history-axis .inner::before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: calc(100% - 12px);
    left: 11px;
    top: 12px;
    background: #1e1e1e;
  }
  .history-axis .inner > dl {
    position: relative;
    padding: 0 0 60px 64px;
  }
  .history-axis .inner > dl:last-of-type {
    padding-bottom: 0;
  }
  .history-axis .inner > dl::before {
    position: absolute;
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    left: 0;
    top: 1px;
    border-radius: 12px;
    background: #1e1e1e;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.15);
  }
  .history-axis .inner > dl > dt {
    margin: 0 0 24px;
    font-size: 32px;
    line-height: 1;
    font-weight: normal;
    font-family: "Kurashikom-M", HelveticaNeue, Arial, sans-serif;
  }
  .history-axis .inner > dl > dt span {
    margin: 0 1px;
  }
  .history-axis .inner > dl > dd {
    display: flex;
    gap: 32px;
  }
  .history-axis .axis {
    width: calc((100% - 64px) / 3);
  }
  .history-axis .axis .label {
    padding: 0 0 7px;
    margin: 0 0 13px;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.4;
    color: #8c8c8c;
    border-bottom: 1px solid #d5d5d5;
  }
  .history-axis .axis h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.6;
  }
  .history-axis .axis p {
    font-size: 13px;
    line-height: 1.8;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }




  /* ------------------------------------------------------------
     リンクボタンの横並び  .link-row
     ------------------------------------------------------------ */

  .link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px 0 0;
  }




  /* ============================================================
     ページ単位の余白  よくわかるクラシコム
     ============================================================ */

  /* WordPress の wpautop が section の間に要素を挟むと隣接セレクタ（+）が効かなくなる。
     余白が消えてしまわないよう、まず基本値を置いてから下の指定で詰める。 */
  .ir-about-page section,
  .ir-top-page section,
  .ir-highlight-page section,
  .ir-performance-page section,
  .ir-stock-price-page section,
  .ir-faq-page section {
    margin-top: 80px;
  }
  .ir-about-page > header.content + section,
  .ir-top-page > header.content + section,
  .ir-highlight-page > header.content + section,
  .ir-performance-page > header.content + section,
  .ir-stock-price-page > header.content + section,
  .ir-faq-page > header.content + section {
    margin-top: 0;
  }

  .ir-about-page section + section {
    margin-top: 80px;
  }
  .ir-about-page section.module-a + section {
    margin-top: 45px;
  }
  .ir-about-page .module-d + .module-d {
    margin-top: 60px;
  }
  .ir-about-page .page-index {
    margin-top: 0;
  }
  .ir-about-page .module-a + .sustainability-box {
    margin-top: 40px;
  }
  .ir-about-page .page-updated {
    margin-top: 70px;
  }

  .ir-page .module-d > .note,
  .ir-page .sustainability-box > .note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  /* 本文中の注記番号 ※1 など */
  .ref {
    font-size: 0.75em;
    vertical-align: 2px;
    color: #8c8c8c;
  }
  .page-updated > .note {
    margin: 0;
    text-align: right;
  }
  .ir-about-page .module-a .content.has-image article {
    width: 400px;
  }
  .ir-about-page .module-a .content.has-image figure {
    width: 430px;
  }
  .ir-about-page .module-a article p.notice {
    font-size: 14px;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .ir-about-page .page-nav {
    margin-top: 100px;
  }


  /* ============================================================
     IRトップ 用のコンポーネント
     ============================================================ */

  /* ------------------------------------------------------------
     はじめにご覧いただきたい3つ  .ir-guide
     ------------------------------------------------------------ */

  .ir-guide ul {
    display: flex;
    gap: 20px;
  }
  .ir-guide li {
    width: calc((100% - 40px) / 3);
    background: #fff;
  }
  .ir-guide li a {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 100%;
    padding: 0 0 84px;
    text-decoration: none;
    transition: opacity 300ms ease-out;
  }
  .ir-guide li a:hover {
    opacity: 0.55;
  }
  .ir-guide li .figure {
    display: block;
    display: block;
  }
  .ir-guide li img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 4;
    object-fit: cover;
  }
  .ir-guide li .ja {
    display: block;
    margin: 24px 28px 0;
    font-size: 16px;
    line-height: 1.6;
  }
  .ir-guide li .desc {
    display: block;
    margin: 10px 28px 0;
    font-size: 13px;
    line-height: 1.8;
    color: #767676;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .ir-guide li a::after {
    position: absolute;
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    left: 28px;
    bottom: 32px;
    border-radius: 18px;
    background: #1e1e1e url(/app/themes/kurashicom-journal/img/arrow_go.svg) 55% 50% no-repeat;
    background-size: 11px auto;
  }




  /* ------------------------------------------------------------
     2カラム  .two-column
     ------------------------------------------------------------ */

  .two-column {
    display: flex;
    gap: 36px;
    align-items: flex-start;
  }
  .two-column > .col {
    width: calc((100% - 36px) / 2);
  }


  /* ------------------------------------------------------------
     株価ボード  .stock-board
     ------------------------------------------------------------ */

  .stock-board h2 {
    padding: 0 0 10px;
    font-size: 18px;
    line-height: 1.6;
    border-bottom: 1px solid #1e1e1e;
  }
  .stock-board .board {
    margin-top: 24px;
  }
  .stock-board .board iframe {
    display: block;
    width: 100%;
    border: 0;
  }
  .stock-board .placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 220px;
    text-align: center;
    background: #f2f2f2;
  }
  .stock-board .placeholder-label {
    font-size: 14px;
    line-height: 1.6;
  }
  .stock-board .placeholder p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .stock-board nav {
    margin: 20px 0 0;
  }
  .stock-board .note {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ------------------------------------------------------------
     IRライブラリー  .library-list
     ------------------------------------------------------------ */

  .library-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 72px;
  }
  .library-list li {
    width: calc((100% - 72px) / 2);
  }
  .library-list li a {
    position: relative;
    display: block;
    padding: 0 48px 0 0;
    text-decoration: none;
    transition: opacity 300ms ease-out;
  }
  .library-list li a:hover {
    opacity: 0.55;
  }
  .library-list .title {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    font-weight: normal;
  }
  .library-list .tag {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #8c8c8c;
    border: 1px solid #d5d5d5;
    border-radius: 2px;
    vertical-align: 2px;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .library-list .desc {
    display: block;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: #767676;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .library-list li a::after {
    position: absolute;
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    right: 6px;
    top: calc(50% - 13px);
    border-radius: 14px;
    background: #1e1e1e url(/app/themes/kurashicom-journal/img/arrow_go.svg) 55% 50% no-repeat;
    background-size: 9px auto;
  }


  /* ============================================================
     ページ単位の余白  IRトップ
     ============================================================ */

  .ir-top-page .page-index {
    margin-top: 0 !important;
  }
  .ir-top-page .ir-guide {
    margin-top: 45px !important;
  }
  /* 画像の天地を少し小さくする（9:4 → 5:2） */
  .ir-top-page .ir-guide li img {
    aspect-ratio: 5 / 2;
  }
  .ir-top-page .page-updated {
    margin-top: 70px !important;
  }
  .ir-top-page .related.ir {
    margin-top: 150px;
  }

  /* 2カラム内のIRカレンダーは、996px幅前提の日付レイアウトを詰める */
  .two-column .module-summary-list.calendar ul {
    margin-top: 24px;
  }
  .two-column .module-summary-list.calendar .date {
    width: 120px;
  }
  .two-column .module-summary-list.calendar .title {
    width: calc(100% - 120px);
  }
  .two-column .module-summary-list.calendar .date::after {
    display: none;
  }
  .two-column .module-summary-list .note {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #8c8c8c;
  }



  /* ------------------------------------------------------------
     ページ内リンクのスクロール
     ------------------------------------------------------------ */

  html {
    scroll-behavior: smooth;
  }
  /* 固定ヘッダー（65px）に隠れないよう、着地位置をずらす */
  #wrapper > main section[id] {
    scroll-margin-top: 100px;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }


  /* ============================================================
     仮素材のマーカー  .is-draft
     ------------------------------------------------------------
     IRチーム確認用の作業マーカーです。デザインの一部ではありません。
     公開前に、HTML の class="is-draft" と data-draft="..." を削除してください。
     このCSSブロック自体は残しておいても、HTML側を外せば何も表示されません。
     ============================================================ */

  /* ラベルはページ上から 01, 02, ... と自動で採番されます */
  .ir-page {
    counter-reset: draft;
  }
  .is-draft {
    position: relative;
    counter-increment: draft;
  }
  .is-draft::after {
    position: absolute;
    content: attr(data-draft) " " counter(draft, decimal-leading-zero);
    display: block;
    right: 0;
    top: 0;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #fff;
    background: #c2410c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
    pointer-events: none;
  }



  /* ------------------------------------------------------------
     外部コンテンツの埋め込み枠  .embed-frame
     （業績ハイライト／業績推移詳細）
     ------------------------------------------------------------ */

  .embed-frame {
    /* 罫線は付けない。グラフ自体が枠を持っているため */
  }
  .embed-frame iframe {
    display: block;
    width: 100%;
    border: 0;
  }
  .embed-frame .placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 560px;
    text-align: center;
    background: #f2f2f2;
  }
  .embed-frame .placeholder-label {
    font-size: 18px;
    line-height: 1.6;
  }
  .embed-frame .placeholder p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ============================================================
     ページ単位の余白  業績ハイライト／業績推移詳細
     ============================================================ */

  .ir-highlight-page section + section,
  .ir-performance-page section + section,
  .ir-stock-price-page section + section {
    margin-top: 80px;
  }
  .ir-highlight-page .page-nav,
  .ir-performance-page .page-nav,
  .ir-stock-price-page .page-nav {
    margin-top: 100px;
  }


  /* 黒帯のリンクが複数行になったときの行間 */
  .related.ir li a {
    display: inline-block;
    line-height: 1.6;
  }


  /* ------------------------------------------------------------
     数字で見るクラシコム
     ------------------------------------------------------------
     /sustainability と同じ .sustainability-box > dl.result を流用しています。
     足りないのは下の2つだけです。
     ------------------------------------------------------------ */

  .sustainability-box dl.result dl dd + dd {
    margin-top: 5px;
    color: #8c8c8c;
  }
  /* 「約996万人」のように単位が長く、120px のままだと折り返すため詰める */
  .sustainability-box dl.result dl {
    box-sizing: border-box;
    padding-right: 28px;
  }
  .sustainability-box dl.result dl dt {
    white-space: nowrap;
  }
  .sustainability-box dl.result dl dt strong {
    font-size: 84px;
  }
  .sustainability-box dl.result dl dt > span:not(.approx) {
    font-size: 32px;
  }
  .sustainability-box dl.result dl dt span.approx {
    margin-right: 2px;
    font-size: 28px;
  }

  /* wpautop がHTMLコメントを <p> に包んで挟み込むことがある。
     コメントだけの p は :empty に一致するので、非表示にして余白も殺す */
  .ir-page p:empty {
    display: none;
    margin: 0;
  }

  /* IRニュースは最新3件だけ見せる。
     件数はテーマJS（XjStorageLoaderTopNews.js の len:'5'）で決まっており、
     テーマ更新はデプロイが要るため、当面CSSで4件目以降を隠す。
     テーマを更新できるタイミングで len:'3' に直したらこの指定は削除してよい */
  .ir-top-page #xj-mainlist li:nth-child(n+4) {
    display: none;
  }

  /* ストックウェザー埋め込みの高さ（実測値＋余白。中身が変わったらここを調整） */
  .embed-frame.sw-highlight iframe {
    height: 1180px;
  }
  .embed-frame.sw-generator iframe {
    height: 620px;
  }
  .embed-frame.sw-generator-s iframe {
    height: 540px;
  }
  .embed-frame.sw-chart iframe {
    /* 株価チャート。SWから高さ通知が来ないため固定 */
    height: 900px;
  }
  /* 株価ボード（ウィジェット埋め込み）の余白 */
  .stock-board .board .sw-container {
    padding: 4px 0;
  }

  /* よくある質問。本文HTMLで持たせているので余白をここで揃える */
  .ir-faq-page .page-updated {
    margin-top: 70px;
  }

  /* よくある質問のカテゴリ見出し。
     <section class="faq module-d"> の1階層にしてあるので、
     テーマの section.faq と .module-d h2 がそのまま効く（追加の見た目指定は不要） */
  .ir-faq-page .module-d + .module-d {
    margin-top: 60px;
  }

  /* 黒帯・「IRトップに戻る」が二重に出るのを防ぐ。
     /ir/ はスラッグが ir なので、テンプレートに「デフォルト」を選んでも
     WordPress は page-{slug}.php を優先して page-ir.php を自動で使う。
     page-ir.php は本文のあとに SCFのFAQ・nav.page-nav・.related.ir を出力するため、
     本文側が持っている新しい黒帯と二重になる。
     本文（.ir-page）より後ろに出てくるテーマ側の出力を隠す。
     page-ir.php を更新できたら、本文から黒帯を外してこの指定は削除する。 */
  .ir-page ~ section.faq,
  .ir-page ~ .page-nav,
  .ir-page ~ .related.ir {
    display: none;
  }

  /* 株価ボード（ストックウェザー提供のウィジェット）をサイトになじませる。
     支給CSSは 0.8rem・内側余白1rem・白背景・Noto Sans JP・#000 のため、
     枠の中に小さく収まって見える。余白と背景を外し、文字を一回り大きくする */
  .stock-board #sw-stock-board[data-sw-temp-id] {
    padding: 0;
    background: none;
    font-size: 1rem;
    color: #1e1e1e;
  }
  .stock-board .sw-container > * {
    font-family: inherit;
  }
}


@media screen and (max-width: 1023px) {
  /* ------------------------------------------------------------
     ページ内メニュー  .page-index
     ------------------------------------------------------------ */

  .page-index .inner {
    padding: 2px 0 18px;
    border-bottom: 1px solid #1e1e1e;
  }
  .page-index ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  .page-index li a {
    position: relative;
    display: inline-block;
    padding-left: 13px;
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
  }
  .page-index li a::before {
    position: absolute;
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    left: 0;
    top: 0.5em;
    border-right: 1px solid #1e1e1e;
    border-bottom: 1px solid #1e1e1e;
    transform: rotate(45deg);
  }


  /* ------------------------------------------------------------
     下線つき小見出し
     ------------------------------------------------------------ */

  header.has-line {
    padding: 0 0 8px;
    margin: 0 0 18px;
    border-bottom: 1px solid #1e1e1e;
  }


  /* ------------------------------------------------------------
     全幅の図版  .figure-wide
     ------------------------------------------------------------ */

  .figure-wide {
    background: #fff;
  }
  .figure-wide img {
    width: 100%;
    height: auto;
  }


  /* ------------------------------------------------------------
     人物写真2枚組  .portrait-pair
     ------------------------------------------------------------ */

  .portrait-pair {
    display: flex;
    gap: 12px;
  }
  .portrait-pair > div {
    width: calc((100% - 12px) / 2);
  }
  .portrait-pair img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .portrait-pair .name {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ------------------------------------------------------------
     カテゴリ写真の一覧  .category-list
     ------------------------------------------------------------ */

  .category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 12px;
  }
  .category-list li {
    width: calc((100% - 12px) / 2);
  }
  .category-list img {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 7;
    object-fit: contain;
    background: #fff;
  }
  .category-list .label {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
  }

  /* ------------------------------------------------------------
     区分の帯つき写真リスト  .structure-list
     SPは2列。帯→写真2枚→帯→写真1枚の順に並べる
     ------------------------------------------------------------ */

  .structure-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "h1 h1"
      "a  b"
      "h2 h2"
      "c  .";
    gap: 12px 12px;
  }
  .structure-list .h1 { grid-area: h1; }
  .structure-list .h2 { grid-area: h2; margin-top: 16px; }
  .structure-list .a  { grid-area: a; }
  .structure-list .b  { grid-area: b; }
  .structure-list .c  { grid-area: c; }
  .structure-list .head {
    padding: 6px 0;
    background: #e4e4e4;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
  }
  .structure-list img {
    width: 100%;
    height: auto;
  }
  .structure-list .label {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
  }



  /* ------------------------------------------------------------
     指標の並び  .metric-list
     ------------------------------------------------------------ */

  .metric-list {
  }
  .metric-list dt {
    padding: 16px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #8c8c8c;
  }
  .metric-list dd {
    padding: 6px 0 16px;
    border-bottom: 1px solid #d5d5d5;
  }
  .metric-list .row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  .metric-list .row + .row {
    margin-top: 8px;
  }
  .metric-list .name {
    min-width: 6em;
    font-size: 13px;
    line-height: 1.6;
  }
  .metric-list .value {
    font-size: 24px;
    line-height: 1.2;
    font-weight: normal;
    font-family: "Kurashikom-M", HelveticaNeue, Arial, sans-serif;
  }
  .metric-list .unit {
    margin-left: 2px;
    font-size: 13px;
  }
  .metric-list .sub {
    font-size: 11px;
    line-height: 1.6;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .metric-list .tail {
    display: block;
    margin: 8px 0 0;
    font-size: 12px;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ------------------------------------------------------------
     お店のあゆみ 3軸タイムライン  .history-axis
     ------------------------------------------------------------
     ※2026年8月時点では未使用。「北欧、暮らしの道具店」のあゆみ
       セクションを削除したため。復活させる可能性があるので残している。
     ------------------------------------------------------------ */

  .history-axis {
    margin-top: 28px;
  }
  .history-axis .inner {
    position: relative;
  }
  .history-axis .inner::before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: calc(100% - 7px);
    left: 6px;
    top: 7px;
    background: #1e1e1e;
  }
  .history-axis .inner > dl {
    position: relative;
    padding: 0 0 36px 28px;
  }
  .history-axis .inner > dl:last-of-type {
    padding-bottom: 0;
  }
  .history-axis .inner > dl::before {
    position: absolute;
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    left: 0;
    top: 1px;
    border-radius: 7px;
    background: #1e1e1e;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.15);
  }
  .history-axis .inner > dl > dt {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1;
    font-weight: normal;
    font-family: "Kurashikom-M", HelveticaNeue, Arial, sans-serif;
  }
  .history-axis .inner > dl > dt span {
    margin: 0 1px;
  }
  .history-axis .inner > dl > dd {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .history-axis .axis .label {
    padding: 0 0 6px;
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 1.4;
    color: #8c8c8c;
    border-bottom: 1px solid #d5d5d5;
  }
  .history-axis .axis h3 {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.6;
  }
  .history-axis .axis p {
    font-size: 13px;
    line-height: 1.8;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }




  /* ------------------------------------------------------------
     リンクボタンの縦積み  .link-row
     ------------------------------------------------------------ */

  .link-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 0;
  }




  /* ============================================================
     ページ単位の余白  よくわかるクラシコム
     ============================================================ */

  /* WordPress の wpautop が section の間に要素を挟むと隣接セレクタ（+）が効かなくなる。
     余白が消えてしまわないよう、まず基本値を置いてから下の指定で詰める。 */
  .ir-about-page section,
  .ir-top-page section,
  .ir-highlight-page section,
  .ir-performance-page section,
  .ir-stock-price-page section,
  .ir-faq-page section {
    margin-top: 55px;
  }
  .ir-about-page > header.content + section,
  .ir-top-page > header.content + section,
  .ir-highlight-page > header.content + section,
  .ir-performance-page > header.content + section,
  .ir-stock-price-page > header.content + section,
  .ir-faq-page > header.content + section {
    margin-top: 0;
  }

  /* 2行タイトル（KURASHICOM ESSENTIALS など）のページ。
     テーマの header.content.single は1行h1前提（高さ120px・.ja を top:52px に絶対配置）で、
     h1 が2行になると .ja が2行目に重なる。SPだけ高さを自動にして .ja を h1 の下に置く */
  .ir-about-page > header.content.single,
  .ir-highlight-page > header.content.single,
  .ir-performance-page > header.content.single,
  .ir-stock-price-page > header.content.single {
    height: auto;
    padding-bottom: 40px;
  }
  .ir-about-page > header.content.single .ja,
  .ir-highlight-page > header.content.single .ja,
  .ir-performance-page > header.content.single .ja,
  .ir-stock-price-page > header.content.single .ja {
    position: static;
    margin-top: 8px;
    text-align: right;
  }

  .ir-about-page section + section {
    margin-top: 55px;
  }
  .ir-about-page section.module-a + section {
    margin-top: 32px;
  }
  .ir-about-page .module-d + .module-d {
    margin-top: 45px;
  }
  .ir-about-page .page-index {
    margin-top: 0;
  }
  .ir-about-page .module-a + .sustainability-box {
    margin-top: 28px;
  }
  .ir-about-page .page-updated {
    margin-top: 50px;
  }

  .ir-page .module-d > .note,
  .ir-page .sustainability-box > .note {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  /* 本文中の注記番号 ※1 など */
  .ref {
    font-size: 0.75em;
    vertical-align: 1px;
    color: #8c8c8c;
  }
  .page-updated > .note {
    margin: 0;
    text-align: left;
  }
  .ir-about-page .module-a article p.notice {
    font-size: 13px;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .ir-about-page .page-nav {
    margin-top: 70px;
  }


  /* ============================================================
     IRトップ 用のコンポーネント
     ============================================================ */

  /* ------------------------------------------------------------
     はじめにご覧いただきたい3つ  .ir-guide
     ------------------------------------------------------------ */

  .ir-guide ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ir-guide li {
    background: #fff;
  }
  .ir-guide li a {
    display: block;
    text-decoration: none;
  }
  /* 矢印はテキスト枠（.body）の天地中央に置くため、基準を .body にする */
  .ir-guide li .body {
    display: block;
    position: relative;
    padding: 18px 56px 20px 20px;
  }
  .ir-guide li .figure {
    display: block;
    display: block;
  }
  .ir-guide li img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 3;
    object-fit: cover;
  }
  .ir-guide li .ja {
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
  }
  .ir-guide li .desc {
    display: block;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #767676;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .ir-guide li .body::after {
    position: absolute;
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    right: 20px;
    top: calc(50% - 13px);
    border-radius: 14px;
    background: #1e1e1e url(/app/themes/kurashicom-journal/img/arrow_go.svg) 55% 50% no-repeat;
    background-size: 9px auto;
  }




  /* ------------------------------------------------------------
     2カラム  .two-column（SPでは縦積み）
     ------------------------------------------------------------ */

  .two-column > .col + .col {
    margin-top: 55px;
  }


  /* ------------------------------------------------------------
     株価ボード  .stock-board
     ------------------------------------------------------------ */

  .stock-board h2 {
    padding: 0 0 8px;
    font-size: 16px;
    line-height: 1.6;
    border-bottom: 1px solid #1e1e1e;
  }
  .stock-board .board {
    margin-top: 18px;
  }
  .stock-board .board iframe {
    display: block;
    width: 100%;
    border: 0;
  }
  .stock-board .placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 190px;
    text-align: center;
    background: #f2f2f2;
  }
  .stock-board .placeholder-label {
    font-size: 13px;
    line-height: 1.6;
  }
  .stock-board .placeholder p {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .stock-board nav {
    margin: 18px 0 0;
  }
  .stock-board .note {
    margin: 14px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ------------------------------------------------------------
     IRライブラリー  .library-list
     ------------------------------------------------------------ */

  .library-list ul {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .library-list li a {
    position: relative;
    display: block;
    padding: 0 40px 0 0;
    text-decoration: none;
  }
  .library-list .title {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    font-weight: normal;
  }
  .library-list .tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.6;
    color: #8c8c8c;
    border: 1px solid #d5d5d5;
    border-radius: 2px;
    vertical-align: 1px;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .library-list .desc {
    display: block;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #767676;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }
  .library-list li a::after {
    position: absolute;
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    right: 2px;
    top: calc(50% - 12px);
    border-radius: 13px;
    background: #1e1e1e url(/app/themes/kurashicom-journal/img/arrow_go.svg) 55% 50% no-repeat;
    background-size: 8px auto;
  }


  /* ============================================================
     ページ単位の余白  IRトップ
     ============================================================ */

  .ir-top-page .page-index {
    margin-top: 0 !important;
  }
  .ir-top-page .ir-guide {
    margin-top: 45px !important;
  }
  .ir-top-page .page-updated {
    margin-top: 50px !important;
  }

  /* SPでもIRカレンダーの日付レイアウトを詰める */
  .two-column .module-summary-list.calendar ul {
    margin-top: 18px;
  }
  .two-column .module-summary-list.calendar .date {
    width: 105px;
  }
  .two-column .module-summary-list.calendar .title {
    /* sp.css は width:auto + max-width:calc(100% - 170px) なので max-width を上書きする */
    width: auto;
    max-width: calc(100% - 105px);
  }
  .two-column .module-summary-list.calendar .date::after {
    display: none;
  }
  .two-column .module-summary-list .note {
    margin: 14px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: #8c8c8c;
  }


  /* ------------------------------------------------------------
     ページ内リンクのスクロール
     ------------------------------------------------------------ */

  html {
    scroll-behavior: smooth;
  }
  /* 固定ヘッダー（65px）に隠れないよう、着地位置をずらす */
  #wrapper > main section[id] {
    scroll-margin-top: 90px;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }


  /* ============================================================
     仮素材のマーカー  .is-draft
     ※公開前の外し方は ir-renewal.pc.css の同ブロックを参照
     ============================================================ */

  /* ラベルはページ上から 01, 02, ... と自動で採番されます */
  .ir-page {
    counter-reset: draft;
  }
  .is-draft {
    position: relative;
    counter-increment: draft;
  }
  .is-draft::after {
    position: absolute;
    content: attr(data-draft) " " counter(draft, decimal-leading-zero);
    display: block;
    right: 0;
    top: 0;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #fff;
    background: #c2410c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
    pointer-events: none;
  }



  /* ------------------------------------------------------------
     外部コンテンツの埋め込み枠  .embed-frame
     ------------------------------------------------------------ */

  .embed-frame {
    /* 罫線は付けない。グラフ自体が枠を持っているため */
  }
  .embed-frame iframe {
    display: block;
    width: 100%;
    border: 0;
  }
  .embed-frame .placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 380px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    background: #f2f2f2;
  }
  .embed-frame .placeholder-label {
    font-size: 16px;
    line-height: 1.6;
  }
  .embed-frame .placeholder p {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #8c8c8c;
    font-family: "MFW-HiraginoUDSansStdN-W4", "Hiragino UD Sans W4 JIS2004", sans-serif;
  }


  /* ============================================================
     ページ単位の余白  業績ハイライト／業績推移詳細
     ============================================================ */

  .ir-highlight-page section + section,
  .ir-performance-page section + section,
  .ir-stock-price-page section + section {
    margin-top: 55px;
  }
  .ir-highlight-page .page-nav,
  .ir-performance-page .page-nav,
  .ir-stock-price-page .page-nav {
    margin-top: 70px;
  }


  /* 黒帯のリンクが複数行になったときの行間 */
  .related.ir li a {
    display: inline-block;
    line-height: 1.6;
  }


  /* ------------------------------------------------------------
     数字で見るクラシコム
     ------------------------------------------------------------
     /sustainability と同じ .sustainability-box > dl.result を流用しています。
     足りないのは下の2つだけです。
     ------------------------------------------------------------ */

  .sustainability-box dl.result dl dd + dd {
    margin-top: 4px;
    color: #8c8c8c;
  }
  /* 「約996万人」のように単位が長く、120px のままだと折り返すため詰める */
  .sustainability-box dl.result dl {
    box-sizing: border-box;
    padding-right: 16px;
  }
  .sustainability-box dl.result dl dt {
    white-space: nowrap;
  }
  .sustainability-box dl.result dl dt strong {
    font-size: 46px;
  }
  .sustainability-box dl.result dl dt > span:not(.approx) {
    font-size: 19px;
  }
  .sustainability-box dl.result dl dt span.approx {
    margin-right: 2px;
    font-size: 18px;
  }

  /* wpautop がHTMLコメントを <p> に包んで挟み込むことがある。
     コメントだけの p は :empty に一致するので、非表示にして余白も殺す */
  .ir-page p:empty {
    display: none;
    margin: 0;
  }

  /* IRニュースは最新3件だけ見せる。
     件数はテーマJS（XjStorageLoaderTopNews.js の len:'5'）で決まっており、
     テーマ更新はデプロイが要るため、当面CSSで4件目以降を隠す。
     テーマを更新できるタイミングで len:'3' に直したらこの指定は削除してよい */
  .ir-top-page #xj-mainlist li:nth-child(n+4) {
    display: none;
  }

  /* ストックウェザー埋め込みの高さ（実測値＋余白。中身が変わったらここを調整） */
  .embed-frame.sw-highlight iframe {
    height: 1920px;
  }
  .embed-frame.sw-generator iframe {
    height: 600px;
  }
  .embed-frame.sw-generator-s iframe {
    height: 520px;
  }
  .embed-frame.sw-chart iframe {
    /* 株価チャート。SWから高さ通知が来ないため固定 */
    height: 1320px;
  }
  .stock-board .board .sw-container {
    padding: 2px 0;
  }

  /* よくある質問。本文HTMLで持たせているので余白をここで揃える */
  .ir-faq-page .page-updated {
    margin-top: 50px;
  }

  /* よくある質問のカテゴリ見出し。
     <section class="faq module-d"> の1階層にしてあるので、
     テーマの section.faq と .module-d h2 がそのまま効く（追加の見た目指定は不要） */
  .ir-faq-page .module-d + .module-d {
    margin-top: 45px;
  }

  /* 黒帯・「IRトップに戻る」が二重に出るのを防ぐ。
     /ir/ はスラッグが ir なので、テンプレートに「デフォルト」を選んでも
     WordPress は page-{slug}.php を優先して page-ir.php を自動で使う。
     page-ir.php は本文のあとに SCFのFAQ・nav.page-nav・.related.ir を出力するため、
     本文側が持っている新しい黒帯と二重になる。
     本文（.ir-page）より後ろに出てくるテーマ側の出力を隠す。
     page-ir.php を更新できたら、本文から黒帯を外してこの指定は削除する。 */
  .ir-page ~ section.faq,
  .ir-page ~ .page-nav,
  .ir-page ~ .related.ir {
    display: none;
  }

  /* 株価ボード（ストックウェザー提供のウィジェット）をサイトになじませる。
     支給CSSは 0.8rem・内側余白1rem・白背景・Noto Sans JP・#000 のため、
     枠の中に小さく収まって見える。余白と背景を外し、文字を一回り大きくする */
  .stock-board #sw-stock-board[data-sw-temp-id] {
    padding: 0;
    background: none;
    font-size: 0.95rem;
    color: #1e1e1e;
  }
  .stock-board .sw-container > * {
    font-family: inherit;
  }
}