/* ==========================================================
   CSUPRE 追加CSS
   アップ先: /library/common/css/custom.css
   テーマCSS（/wp-content/themes/insatu/css/）は触らない。

   【フォント】
   Noto Sans JP  … 本文・見出しの基本
   Zen Kaku Gothic New Black … TOPのFVコピーのみ
   Montserrat    … ロゴ（CSUPRE）とTOPのステップ連番（01〜04）

   【目次】
   1. :root                        変数（色・フォント）
   2. テーマ全体の調整             body / ヘッダー / #side / サブメニュー / #contents
   3. フッター
   4. テーマ既定の打ち消し（単発） table.dl-company / .pagetop / .btn.info
   5. 本文の共通スコープ           :is(section.page, .top_wrap, .content) ← 最大。約740行
        5-1 ページタイトル（h2.headline）
        5-2 商品サイズ一覧（.product_size_list）
        5-3 共通の土台（:where() ＝ .title / .text / btn / anchor / カード）
        5-4 見出し（h3 / h3.step / h4 / h5 / h2.type2）
        5-5 パーツ（.cs-full / quotation / btn / anchor）
        5-6 セクション単位のブロック（cs- 接頭辞）
   6. CTA                          .cs-full:has(.cs-cta)
   7. 商品一覧                     TOP・商品一覧ページ・サブメニューのパネル
   8. 商品詳細（小分類）           .product-about / .group_box / フルブリード解放
   9. カート

   【書き方】
   ・ネイティブCSSネストで書く（ビルド工程なし）。@media は各パーツの中に置く
   ・@import はネスト不可なのでファイル先頭固定
   ・共通の記述は「共通の土台」（5-3）に集約し、各ブロックには差分だけ書く
   ・土台は :where() で囲んでいる。:where() は特異度0なので
     ブロック側（.cs-xxx .title 等）が必ず勝つ＝記述順に依存しない
   ・テーマは section.page h3 / section.page a を (0,1,2) で持っている。
     共通スコープ (0,1,1) ＋ 要素かクラス1つで (0,2,1) にすれば !important なしで勝てる
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@700&display=swap");

:root {
  --parts-green: #009a3b; /* Figma変数「差し色　緑」 */
  --parts-green02: #dfebe4;
  --parts-ink: #000000; /* Figma実測（black） */
  --parts-gray: #7d7d7d; /* 仕様テキスト・価格 */
  --parts-gray-bg: #fafafa;
  --parts-blue: #2c46a4;
  --parts-blue-bg: #e9f2ff;
  --parts-red: #ea6053;

  /* CTAカードの2色（お問い合わせ＝緑／見積依頼＝赤）。
     枠・ピルの色と、その薄い地色をセットで持つ */
  --parts-green-bg: #eeffe9;
  --parts-red02: #cc3d3d;
  --parts-red02-bg: #fff6f6;
  --parts-marker: #ffff6e; /* 本文の黄色マーカー */

  --parts-font: "Noto Sans JP", sans-serif; /* 本文・見出しの基本 */
  --zen: "Zen Kaku Gothic New", sans-serif; /* TOPのFVコピーのみ */
  --mont: "Montserrat", sans-serif; /* ロゴとTOPのステップ連番 */
}

/* ==========================================================
   テーマ全体の調整
   ========================================================== */

body {
  font-family: var(--parts-font);
  line-height: 1.7;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
}

input,
textarea,
select {
  font-family: var(--parts-font);
}

.pc-off {
  display: none;
  @media screen and (max-width: 767px) {
    display: block;
  }
}

.sp-off {
  @media screen and (max-width: 767px) {
    display: none;
  }
}

header > .inner {
  width: auto;
  padding-inline: 9%;
  @media screen and (max-width: 1600px) {
    padding-inline: 20px;
  }
  nav.top {
    box-sizing: border-box;
    /* @media screen and (max-width: 1024px) {
      padding: 30px 20px;
  }
  @media screen and (max-width: 767px) {
    padding: 10px 15px;
  } */
    .inner {
      width: 100%;
      box-sizing: border-box;
      @media screen and (max-width: 1024px) {
        padding: 10px 0;
      }
      & #hamburger {
        padding-left: 0;
      }

      .left h1 {
        font-weight: 500;
        line-height: 27px;
        letter-spacing: 0.12em;
        font-feature-settings: "palt";
        &::before {
          content: "";
          display: inline-block;
          width: 2px;
          height: 1em;
          margin-right: 0.8em;
          vertical-align: -0.1em;
          background-color: var(--parts-green);
        }
      }
      .right ul {
        justify-content: flex-end;
        column-gap: 0.8em;
        @media screen and (max-width: 1024px) {
          /* padding-right: 20px; */
        }
      }
    }
  }
}

header nav.bottom {
  padding-block: 20px;
  @media screen and (max-width: 767px) {
  }
}

header .top .inner .right ul li > a:hover {
  color: var(--parts-green);
}

header ul#menu-header {
  display: flex;
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    justify-content: baseline;
  }

  & li {
    flex: auto;
    width: auto;
    padding-top: 7px;

    & > a {
      font-size: 1em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      @media screen and (max-width: 1024px) {
        flex-direction: column;
        gap: 10px;
      }
      @media screen and (max-width: 767px) {
        flex-direction: row;
        height: auto;
        gap: 4px;
        padding-top: 0;
      }
      .icon {
        display: flex;
        align-items: center;
      }
      .text {
        @media screen and (max-width: 1220px) {
          font-size: 12px;
        }
        @media screen and (max-width: 767px) {
          font-size: 13px;
        }
      }
    }
  }
}

header ul#menu-header li {
  & > a:hover,
  &.active > a {
    border-bottom: 2px solid var(--parts-ink);
  }
}

#hamburger.open span {
  border-color: var(--parts-ink);
}

#side .navi {
  @media screen and (max-width: 1024px) {
    padding: 15px 20px;
  }
  ul.menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.8em;
    background-color: #fff;
    border: 1px solid var(--parts-ink);
    padding: 6px 0 7px 10px;
    margin-block: 5px;
    .icon {
      display: flex;
      align-items: center;
      & img {
        width: 1.5em;
      }
    }
    .text {
      color: var(--parts-ink);
    }
  }
}

#sideNavChildrendMenuPanel_0 .products_list_level1 {
  padding-inline: 4px;
  .title {
    margin-top: 10px;
    font-size: 18px;
  }
  .product_box {
    gap: 12px;
    .box {
      width: calc((100% - 12px) / 2);
      .item_title {
        font-size: 13px;
        margin-block: 8px 0;
      }
    }
  }
}

#header_submenu nav.children div.sub-close .sub-bt {
  background-color: var(--parts-ink);
}

/* サブメニューのパネルは div.content を持つため、下の共通スコープ
   :is(section.page, .top_wrap, .content) の & h3 が中の h3.title にも当たる。
   罫線だけ打ち消す（黒四角の ::before は h3.title 側で処理） */
#header_submenu nav.children h3 {
  border: none;
}

#main {
  @media screen and (max-width: 767px) {
    margin-bottom: 50px;
  }
}

.layout_content {
  margin-top: 0;
  margin-bottom: 0;
}

section.page .content-box {
  padding: 0;
}

.pagetop {
  @media screen and (max-width: 767px) {
    bottom: 20px;
  }
}

.alert_caution {
  background-color: var(--parts-gray-bg);
}

/* ボタン */

.btn_primary {
  background-color: var(--parts-green);
  font-family: var(--parts-font);
}

.btn_estimate {
  color: #fff !important;
}

.btn_rows_box .inner a,
.btn_rows_box .inner input[type="submit"],
.btn_rows_box .inner input[type="button"] {
  display: flex;
}

/* リスト */
:where(#contents > *:not(footer)) {
  & ul:not(.product_size_list) {
    & li {
      --mark-width: 4px;
      position: relative;
      padding-left: calc(var(--mark-width) + 0.8em);
      line-height: 1.6;
      &::before {
        content: "";
        position: absolute;
        left: calc((1em - var(--mark-width)) / 2);
        top: calc((1.6em - var(--mark-width)) / 2);
        /* transform: translateY(-50%); */
        display: block;
        width: var(--mark-width);
        height: var(--mark-width);
        background-color: var(--parts-ink);
        border-radius: 50%;
      }
    }
  }
}

aside ul li::before {
  display: none !important;
}

#fsc-lp ul,
.post_terms ul,
#in2cart_flow_navi ul,
.other_links,
.calendar_readme ul,
.price_box,
.total-price-box,
div.pageing ul,
.document-list,
.order-status,
.mypage .order-box .detail-flexbox .menu,
.history_box,
.mypage:is(
  .account,
  .delivery,
  .account_email,
  .account_password,
  .account_escape
) {
  & li::before {
    display: none;
  }
}

#fsc-lp :is(.works-list, .csupre-list, .products-list) > li {
  padding-left: 0 !important;
}

/* マーカー（・）なしの汎用リスト。テーマの liststyle_none（タグ使用例のクラス）は
   li の padding を0にするだけで、上の「リスト」の・に負けていたので打ち消す。
   ①や※など行頭の文字を本文に持つリストに使う。li.note の※は .thecontent 側の指定が勝つ */
ul.liststyle_none > li {
  padding-left: 0;
  &::before {
    display: none;
  }
}

.thecontent ul {
  padding-left: 0;
}

/* 背景色 */
:is(.bg-gray, .bg-green) {
  padding: 30px 30px 32px;
  & > *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.bg-gray {
  background-color: #fafafa;
}

.bg-green {
  background-color: var(--parts-green02);
}

/* スクロールアニメーション */
.scroll-fade {
  opacity: 0;
  transform: translateY(3rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  transition-delay: calc(var(--fade-delay, 0) * 0.08s);
  will-change: opacity, transform;

  &.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* TOPのFV（.cs-fv .inner）の読み込み時フェードイン。値は .scroll-fade に揃えている */
@keyframes cs-fv-fade {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TOPのSPナビをハンバーガーに統一する（下層と揃える）。
   テーマは下層だけナビ行を隠している
   （common_sp.css の `body.side.children header .bottom { display: none }`）。
   TOPは `.children` が付かないので隠れず、ハンバーガーを出すとナビ行と二重になる。
   ブレークポイントはテーマのSP CSS（common_sp.css）に合わせて 1024px。
   バー3本と #side の中身は js/top-hamburger.js が差し込む */
body.home.side header .bottom {
  @media screen and (max-width: 1024px) {
    display: none;
  }
}

#contents {
  width: 1240px;
  max-width: 100%;
  padding-inline: 20px;
  @media screen and (min-width: 600px) and (max-width: 1024px) {
    padding-inline: 60px;
  }
}

/* ==========================================================
   フッター
   ========================================================== */
body.home footer {
  margin-top: 60px;
}

footer .top .navi .menu {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  .menu-item > a {
    color: var(--parts-green);
    font-weight: 700;
    font-size: 18px;
  }
}

footer .top .navi .menu .menu-item > a + ul.sub-item-menu li a {
  @media screen and (max-width: 767px) {
    font-size: 14px;
  }
}

/* 現在ページのマーカーを消す */
footer
  .top
  .navi
  .menu
  .menu-item
  > a
  + ul.sub-item-menu
  li.current-menu-item::before {
  display: none;
}

footer .bottom {
  padding-inline: 0;
  align-items: flex-end;
  justify-content: space-between;
  .logo {
    @media screen and (max-width: 1024px) {
      width: 54%;
    }
  }
}

/* ==========================================================
   テーマ既定の打ち消し（単発）
   ========================================================== */

/* 「項目名＋内容」の一覧表（旧 dl.dl-company）。
   項目名を30%幅の th に固定し、SPでは th / td を縦積みにする */
table.dl-company {
  width: 100%;
  table-layout: fixed;

  & th {
    width: 25%;
    text-align: left;
    padding: 10px 20px;
    background-color: var(--parts-green02);
    @media screen and (max-width: 767px) {
      display: block;
      width: 100%;
    }
  }
  & td {
    @media screen and (max-width: 767px) {
      display: block;
      padding: 10px 20px;
    }
    & iframe {
      max-width: 100%;
    }
  }
}

.pagetop a {
  background-color: var(--parts-green);
}

.btn.info {
  background-color: var(--parts-ink);
}

.thecontent p:has(+ ol),
.thecontent p:has(+ ul) {
  margin-bottom: 0;
}

.thecontent ul,
.thecontent ol {
  text-indent: 0;
  padding-top: 0;
  padding-bottom: 0;
  & li.note {
    padding-left: 0;
    &::before {
      content: "※";
      display: inline;
      position: relative;
      top: 0;
      transform: none;
      width: 1em;
      height: 1em;
      background-color: transparent;
      margin-right: 0.3em;
    }
  }
}

/* 規約の「号」：(1)(2)… で出して「項」の 1. 2. と分ける（1002 平賀さま依頼）
   テーマは ol に list-style: decimal を当てているだけなので、種類を差し替える */
@counter-style gou {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

.thecontent ol.gou {
  list-style-type: gou;
  padding-left: 2.5em;
}

.thecontent a {
  color: var(--parts-green);
  top: 0.35em;
}

section.system a,
section.products a {
  color: var(--parts-green);
}

.nav-below i {
  font-size: 2em;
  color: var(--parts-green);
}

/* ==========================================================
   本文の共通スコープ（ここから約740行）

   固定ページ（section.page）・TOP（.top_wrap）・サブメニューのパネル（.content）
   の3つをまとめて受ける。中身は上から
     ページタイトル → 商品サイズ一覧 → 共通の土台 → 見出し → パーツ → cs-ブロック
   の順。テーマの section.page h3 / section.page a が (0,1,2) なので、
   このスコープ (0,1,0) ＋ 要素/クラス1つで (0,2,1) にして !important なしで勝つ。

   ⚠ .content が入っているためヘッダーのサブメニューにも当たる。
     打ち消しは「テーマ全体の調整」の #header_submenu を参照
   ========================================================== */
:is(section.page, .top_wrap, .content) {
  @media screen and (max-width: 767px) {
    padding-top: 0;
  }
  & h2.headline {
    margin-top: 120px;
    border: none;
    padding-left: 0;
    text-align: left;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    color: var(--parts-ink);
    font-feature-settings: "palt";
    @media screen and (max-width: 767px) {
      margin-top: 35px;
      margin-bottom: 5px;
      font-size: 26px;
    }
  }

  /* FVの中にページタイトルを持つページ（実績・お客様の声／FSC認証紙印刷について）は、
     システムが出力する h2.headline と二重になるのでそちらを消す。
     .cs-page-fv があるページだけに当てたいので :has() で絞る */
  &:has(.cs-page-fv) h2.headline {
    display: none;
  }

  .product_size_list {
    gap: 20px 40px;

    & li {
      width: calc((100% - 40px) / 2);
      margin: 0;

      @media screen and (max-width: 767px) {
        width: 100%;
      }
    }

    .wrap {
      border: 2px solid var(--parts-ink);
      padding: 25px 30px 26px;
      @media screen and (max-width: 767px) {
        padding: 18px 25px 21px;
      }

      &::after {
        content: none;
      }
    }

    & dl {
      padding: 0;
      margin: 0;
    }

    /* 商品名 */
    & dt {
      margin-bottom: 14px;
      font-weight: 700;
      font-size: 20px;
      line-height: 1;
      letter-spacing: 0.08em;
      font-feature-settings: "palt" 1;
      color: var(--parts-ink);
      @media screen and (max-width: 767px) {
        font-size: 18px;
      }
    }

    /* 寸法・仕上げ */
    & dd {
      margin: 0;

      & p {
        margin: 0;
        font-weight: 500;
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0.08em;
        font-feature-settings: "palt" 1;
        color: var(--parts-gray);
        @media screen and (max-width: 767px) {
          font-size: 14px;
        }
      }
    }
  }

  /* ======================================================
       共通の土台

       複数のブロックで同じになる記述をここに集約する。
       :where() で囲んであるので特異度は0＝ブロック側（.cs-xxx .title 等）が
       必ず勝つ。記述順を気にせず、各ブロックには差分だけ書けばよい
       ====================================================== */

  & :where([class*="cs-"]) .title {
    margin: 0;
    font-weight: 700;
    color: var(--parts-ink);
  }

  & :where([class*="cs-"]) .text {
    margin: 0;
    font-weight: 400;
    color: var(--parts-ink);
  }

  & :where(a.btn, a.anchor, input.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--parts-ink);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-feature-settings: "palt" 1;
    text-decoration: none;
    box-sizing: border-box;

    &::after {
      flex: none;
      color: #fff;
      letter-spacing: 0;
    }

    &:hover {
      opacity: 0.8;
      color: #fff;
    }

    @media screen and (max-width: 767px) {
      display: flex;
      width: 100%;
    }
  }

  & :where(.banner, .cs-guide-card) a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--parts-ink);
    box-sizing: border-box;

    &:hover {
      opacity: 0.8;
      color: var(--parts-ink);
    }
  }

  .banner {
    --banner-accent: var(--parts-blue);
    --banner-bg: var(--parts-blue-bg);
    margin: 0;

    &.green {
      --banner-accent: var(--parts-green);
      --banner-bg: var(--parts-green-bg);
    }

    &.red {
      --banner-accent: var(--parts-red02);
      --banner-bg: var(--parts-red02-bg);
    }

    & a {
      gap: 8px;
      border: 2px solid var(--banner-accent);
      background-color: var(--banner-bg);
      border-radius: 8px;
      @media screen and (max-width: 767px) {
        padding: 16px;
        margin: 0 auto;
        max-width: 400px;
      }
    }

    .text {
      font-size: 16px;
      line-height: 1.4;
      background-color: var(--banner-accent);
      color: #fff;
      padding: 0.44em 2.69em 0.48em;
      border-radius: 18px;
      text-align: center !important;
      @media screen and (max-width: 767px) {
        font-size: 13px;
      }
    }

    .title {
      font-size: 20px;
      line-height: 1.4;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-align: center !important;

      @media screen and (max-width: 767px) {
        font-size: 18px;
      }
    }
  }

  /* ======================================================
       見出し
       ====================================================== */

  & h3 {
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.5;
    color: var(--parts-ink);

    @media screen and (max-width: 1024px) {
      margin: 45px 0 16px 0;
    }
    @media screen and (max-width: 767px) {
      font-size: 22px;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    &::before {
      content: "";
      display: inline-block;
      width: 1.167em; /* 35 / 30 */
      height: 1.167em;
      margin-right: 0.4em; /* 12 / 30 */
      border-radius: 4px;
      background: var(--parts-ink);
      vertical-align: middle;
      position: relative;
      top: -0.08em;
    }
  }

  & h3.step {
    &::before {
      display: none;
    }

    .num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6em; /* 18 / 30 */
      width: 1.944em; /* 35 / 18 */
      height: 1.944em;
      margin-right: 0.667em; /* 12 / 18 */
      padding-bottom: 0.1em;
      border-radius: 4px;
      background: var(--parts-ink);
      color: #fff;
      font-weight: 700;
      vertical-align: middle;
      position: relative;
      top: -0.08em;
    }
  }

  & h4 {
    border-bottom: 1px solid var(--parts-ink);
    padding-bottom: 10px;
    margin-top: 40px;
    @media screen and (max-width: 767px) {
      margin-top: 10px;
    }
  }

  & h5,
  .sub-head {
    background: none;
    padding: 0;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1.8;
    color: var(--parts-ink);
    &.mt40 {
      @media screen and (max-width: 767px) {
        margin-top: 5px !important;
      }
    }
  }

  & h2.type2 {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    font-feature-settings: "palt" 1;
    color: var(--parts-ink);
    white-space: nowrap;
    @media screen and (max-width: 767px) {
      margin-inline: calc(50% - 46vw);
      width: 92vw;
      font-size: 24px;
    }

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--parts-ink);
    }
    &::before {
      margin-right: 23px;
      display: none;
      @media screen and (max-width: 767px) {
        display: block;
        margin-right: 10px;
      }
    }
    &::after {
      margin-left: 23px;
      @media screen and (max-width: 767px) {
        margin-left: 10px;
      }
    }
  }

  /* ======================================================
       パーツ
       ====================================================== */
  .cs-full {
    background: #fafafa;
    box-shadow: 0 0 0 100vmax #fafafa;
    clip-path: inset(0 -100vmax);
  }
  .top_2column h2 {
    color: var(--parts-green);
  }
  .text-box {
    flex-basis: 0;
    flex-grow: 1;
    /* @media screen and (max-width: 1024px) {
      display: contents;
    } */
  }
  .img-box {
    flex-shrink: 0;
  }

  & p.quotation {
    border-left: 4px solid var(--parts-ink);
    margin-left: 1em;
    padding: 0.3em 0 0.3em 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: 0.08em;
    font-feature-settings: "palt" 1;
    color: var(--parts-ink);
  }

  /* 注記（強調したい一節だけ黄色マーカー）。
     薄いグリーン地で囲う .cs-note-green（step4の注記）と使い分ける */
  .cs-note-marker {
    margin-top: 30px;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    font-feature-settings: "palt" 1;
    text-align: center;
    @media screen and (max-width: 767px) {
      font-size: 16px;
      text-align: left;
    }

    & strong {
      font-weight: 700;
      background: var(--parts-marker);
    }
  }

  .cs-related-links {
    margin-top: 50px;
    @media screen and (max-width: 767px) {
      margin-top: 30px;
    }

    .head {
      margin: 0;
      font-weight: 700;
      font-size: 18px;
      line-height: 1.8;
      letter-spacing: 0.08em;
      font-feature-settings: "palt" 1;
      color: var(--parts-ink);
      @media screen and (max-width: 767px) {
        font-size: 16px;
      }

      &::before {
        content: "";
        display: inline-block;
        width: 13px;
        height: 13px;
        margin-right: 4px;
        border-radius: 2px;
        background: var(--parts-green);
      }
    }

    .links {
      margin: 6px 0 0;
      font-size: 16px;
      line-height: 1.7;
      letter-spacing: 0.08em;
      font-feature-settings: "palt" 1;
      @media screen and (max-width: 767px) {
        font-size: 15px;
      }

      /* 色はテーマの緑のまま。下線だけ「その他のページ」の
         リンク一覧に揃える（Figmaの青はデザイナーが貼った
         古いスクショの色で、現行サイトは緑） */
      & a {
        text-decoration: underline;
      }
    }
  }

  /* ボタン（緑の四角に矢印） */
  & div:has(> a.btn) {
    margin-bottom: 20px;
  }
  .btn-wrap {
    @media screen and (max-width: 1024px) {
      width: fit-content;
      min-width: 275px;
    }
    @media screen and (max-width: 767px) {
      width: 266px;
      min-width: auto;
    }
    &.center {
      text-align: center;
    }
    @media screen and (max-width: 767px) {
      &.mt82 {
        margin-top: 25px !important;
      }
      &.mt50 {
        margin-top: 25px !important;
      }
    }
  }
  & a.btn {
    min-height: 70px;
    padding: 10px 12px 10px 31px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
    &:not(:first-child) {
      margin-left: 1em;
      @media screen and (max-width: 767px) {
        margin-left: 0;
        margin-top: 1em;
      }
    }
    @media screen and (max-width: 767px) {
      min-height: 50px;
      max-width: 350px;
      padding: 8px 9px 8px 20px;
      font-size: 14px;
      border-radius: 5px;
    }

    &::after {
      content: "→";
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      aspect-ratio: 1;
      border-radius: 4px;
      background: var(--parts-green);
      font-size: 16px;
      @media screen and (max-width: 767px) {
        width: 34px;
      }
    }
  }

  /* 白いボタン（FV・CTAの上に乗るとき。地色だけ反転させる） */
  & a.btn.white {
    background: #fff;
    color: var(--parts-ink);

    &:hover {
      color: var(--parts-ink);
    }
  }

  & a.btn.cta {
    position: relative;
    width: 337px;
    background-color: #fff;
    font-size: 20px;
    color: var(--parts-green);
    border-radius: 48px;
    padding: 14px 68px 15px 33px;
    justify-content: center;
    @media screen and (max-width: 767px) {
      font-size: 14px;
      width: 100%;
      padding: 8px 52px 10px 33px;
    }
    &::after {
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      color: var(--parts-green);
    }
    &[href="/other-service/support/estimate/"] {
      color: var(--parts-blue);
      &::after {
        color: var(--parts-blue);
      }
    }
  }

  & a.anchor {
    min-height: 0;
    padding: 10px 2px;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--parts-ink);
    font-weight: 500;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #dcdcdc;

    &::before {
      content: "↓";
      color: var(--parts-green);
      font-size: 13px;
      translate: 0 2px;
    }

    &:hover {
      opacity: 1;
      color: var(--parts-green);
      border-bottom-color: var(--parts-green);

      &::after {
        color: var(--parts-green);
      }
    }

    @media screen and (max-width: 767px) {
      width: auto;
      font-size: 13px;
      padding: 9px 2px;
    }
  }

  .anchor-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    row-gap: 0;

    @media screen and (max-width: 1024px) {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 24px;
    }

    @media screen and (max-width: 767px) {
      grid-template-columns: 1fr;
      column-gap: 0;
      margin-bottom: 30px;
    }
  }

  /* 横スクロールする表（データ作成ガイドの対応アプリ一覧など） */
  .scroll-hint {
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--parts-gray);

    /* 表は 1200px 固定なので、本文幅がそれを下回る幅（＝ウィンドウ1240px未満）で
       横スクロールが発生する。そこからヒントを出す。
       HTML側の .pc-off はCSSが当たらなかったときの保険 */
    display: none;
    @media screen and (max-width: 1239px) {
      display: block;
    }
  }

  .cs-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    @media screen and (max-width: 767px) {
      /* 横に動くことが分かるよう、スクロールバーを常時見せる */
      scrollbar-width: thin;
      &::-webkit-scrollbar {
        height: 6px;
      }
      &::-webkit-scrollbar-track {
        background: #eeeeee;
      }
      &::-webkit-scrollbar-thumb {
        background: var(--parts-gray);
        border-radius: 3px;
      }
    }
  }

  /* 対応アプリケーション表（データ作成ガイド）
     デザイン：images/data-create/data-img01.jpg（2000px幅）の実測を
     PCの本文幅 1200px（#contents 1240px − padding 40px）基準に落として組んでいる
       ・罫線 #94a3b8 ／ 見出し帯 --parts-green
       ・列幅 20% / 26% / 15% / 39%（画像の 398 / 520 / 300 / 782px）
       ・アイコン 50px角（画像の82px）＋アプリ名との間隔 10px（同16px）
       ・本文 14px（画像の全角1文字 23.8px を 1200/2000 に換算）／アプリ名 16px 太字
     表の幅は 1200px 固定。画面幅で列幅を変えると原稿どおりの改行位置が崩れるため、
     狭い環境は縮めずに横スクロールさせる */
  & table.cs-apps {
    width: 100%;
    /* PCの本文幅と同じ1200pxで固定する。狭い環境でも列幅・改行位置が動かないので
       デザイン画像どおりの3行組みが崩れない。溢れた分は .cs-table-scroll で横スクロール */
    min-width: 1200px;
    /* 列幅を % 指定どおりに固定する（auto だと1列目が伸びる） */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px; /* デザイン実測（画像の全角1文字=23.8px ÷ 1200/2000）*/
    line-height: 1.5;

    & th,
    & td {
      background: #fff;
      border: 1px solid #94a3b8;
      padding: 24px 14px;
      text-align: left;
      vertical-align: middle;

      /* テーマはSPで th / td を display:block にして縦積みにするが、
         この表は横スクロールで見せるのでセルのままにする */
      @media screen and (max-width: 767px) {
        display: table-cell;
      }
    }

    & thead th {
      background: var(--parts-green);
      color: #fff;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
      padding: 12px 14px;
      /* デザインは見出し帯の下に罫線が乗らず、緑がそのまま本文に接する */
      border-bottom-color: var(--parts-green);

      &:nth-child(1) {
        width: 20%;
      }
      &:nth-child(2) {
        width: 26%;
      }
      &:nth-child(3) {
        width: 15%;
      }
      &:nth-child(4) {
        width: 39%;
      }
    }

    & tbody th {
      /* 太字はアプリ名側で付ける。テーマの th 既定を打ち消す */
      font-weight: 400;
      text-align: left;
    }

    /* アプリケーション列：アイコン枠 ＋ アプリ名 */
    .app {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .app-icon {
      flex: 0 0 50px;
      width: 50px;
      height: 50px;

      & img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      /* 画像を入れるまでの枠。src が埋まれば自動で消える */
      &:has(img[src=""]) {
        background: #f2f4f7;
        outline: 1px dashed #94a3b8;
        outline-offset: -1px;
      }
    }

    .app-name {
      font-size: 16px;
      font-weight: 700;
      white-space: nowrap;
    }
  }

  /* ダミーデータのファイル一覧表（/label-flow/download/）
     対応アプリ表（cs-apps）と違ってデザイン指定が無いので、罫線と見出し帯だけ
     そちらに合わせ、列幅は中身なり（table-layout は auto のまま）にしている。
     min-width は4列がファイル名を折り返さずに収まる値 */
  & table.cs-files {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;

    & th,
    & td {
      background: #fff;
      border: 1px solid #94a3b8;
      padding: 12px 14px;
      text-align: left;
      vertical-align: middle;
      width: auto;

      /* テーマはSPで th / td を display:block にして縦積みにするが、
         この表は横スクロールで見せるのでセルのままにする */
      @media screen and (max-width: 767px) {
        display: table-cell;
      }
    }

    & thead th {
      background: var(--parts-green);
      color: #fff;
      font-weight: 700;
      white-space: nowrap;
      border-bottom-color: var(--parts-green);
    }

    & td.folder,
    & td.file {
      white-space: nowrap;
    }

    & td.file a {
      text-decoration: underline;
    }
  }

  /* この表は 680px 幅なので横スクロールが起きるのはSPだけ。
     1200px 固定の cs-apps 用 .scroll-hint（1239px以下で表示）とは別に用意する */
  .scroll-hint-sp {
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--parts-gray);

    display: none;
    @media screen and (max-width: 767px) {
      display: block;
    }
  }

  .other_links {
    & h4 {
      background-color: transparent;
    }
    & a {
      text-decoration: underline;
    }
  }

  /* テキスト+画像 */
  /* .component.column.num2 {
    .wrap {
      flex: 0 0 39.765%;
      &:has(img) {
        flex: 0 0 57.031%;
      }
    }
  } */

  /* ======================================================
       セクション単位のブロック（cs- 接頭辞）

       ・新しく作るブロックには cs- を付ける。テーマは5,713個のクラスを
         持っていて全部が無接頭辞なので、付けないと衝突する
         （title / text / price / btn / num / wrap / item / name / list /
         box / inner / content / products / icon / blue は定義済み）。
         cs- は0ヒットで空き
       ・中の要素には cs- を付けない。テーマの .title（見出しスロット）/
         .text（本文スロット）/ .num（連番）を共通語彙として使い回す
       ・段組みはテーマの component column numN を置き換えず併記する
       ・上の「共通の土台」と違うところだけ書く
       ====================================================== */

  /* FV */
  .cs-fv {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 24px;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 1920/620;
    background-image: url(../images/top/fv-bg.jpg);
    background-size: cover;
    box-sizing: border-box;
    @media screen and (max-width: 1600px) {
      padding-inline: 0;
    }

    @media screen and (max-width: 767px) {
      min-height: 420px;
      gap: 10px;
      align-items: baseline;
      aspect-ratio: initial;
      text-align: left;
      width: 100vw;
      max-width: none;
      margin: 0 calc(50% - 50vw);
    }

    .inner {
      padding: 8.7% 9%;
      @media screen and (max-width: 1600px) {
        width: calc(1280px + 40px);
        max-width: 100%;
        padding-inline: 20px;
        margin: 0 auto;
      }
      @media screen and (max-width: 1024px) {
        width: 100%;
        padding-block: 9% 6%;
      }
      @media screen and (max-width: 767px) {
        padding: 30px;
      }

      /* 読み込み時のフェードイン。LPの .scroll-fade と同じ動き（下から3rem・0.7s・0.08sずつずらす）。
         FVは最初から画面内にあるのでJS（IntersectionObserver）は使わずCSSだけで動かす */
      & > * {
        animation: cs-fv-fade 1.7s ease both;
      }
      & > :nth-child(2) {
        animation-delay: 0.4s;
      }
      & > :nth-child(3) {
        animation-delay: 1.7s;
      }

      @media (prefers-reduced-motion: reduce) {
        & > * {
          animation: none;
        }
      }
    }

    /* FVのコピーだけ Zen Kaku Gothic New の Black（デザイン実測） */
    .title {
      font-family: var(--zen);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.08em;
      color: #fff;

      /* 「サステナブルな印刷」「責任ある方法」＝大きい方 */
      .lg {
        font-size: 42px;
      }

      /* 「を、」「で」だけ一段小さい */
      .sm {
        font-size: 35px;
      }

      @media screen and (max-width: 767px) {
        .lg {
          font-size: 28px;
        }

        .sm {
          font-size: 23px;
        }
      }
    }

    .text {
      font-size: 16px;
      line-height: 1.6;
      color: #fff;
      letter-spacing: 0.12em;

      @media screen and (max-width: 767px) {
        font-size: 13px;
        margin-bottom: 10px;
      }
    }

    .btn-wrap {
      margin-top: 20px;
      .btn {
        min-height: 60px;
        font-size: 14px;
        padding: 13px 9px 13px 20px;
        &::after {
          width: 34px;
        }
      }
    }
  }

  /* お知らせ
     FV直下に置く「添え物」なので、他セクションの見出しと同格にせず
     ふんわり・サラッと読める程度の存在感に抑える */
  .cs-news {
    margin-top: 32px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 4%;
    @media screen and (max-width: 767px) {
      flex-direction: column;
      gap: 8px;
    }
    .en {
      font-family: var(--mont);
      color: var(--parts-green);
      width: 100%;
      margin-bottom: 5px;
      @media screen and (max-width: 767px) {
        font-size: 13px;
      }
    }
    .title {
      display: flex;
      flex-direction: column;
      align-items: baseline;
      justify-content: space-between;
      gap: 6px;
      width: 25%;
      @media screen and (max-width: 767px) {
        width: 100%;
      }
      & h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.08em;
        color: var(--parts-ink);
        @media screen and (max-width: 767px) {
          font-size: 16px;
        }
        &::before {
          display: none;
        }
      }
      .more {
        flex: none;
        font-size: 13px;
        color: var(--parts-green);
        text-decoration: underline;
        @media screen and (max-width: 767px) {
          font-size: 12px;
        }
      }
    }
    & ul {
      flex: 1;
      margin-top: 0;
      @media screen and (max-width: 767px) {
        margin-top: 10px;
        width: 100%;
      }
      & li {
        padding-left: 0;
        border-top: 1px solid #e5e5e5;
        &:not(:first-child) {
          border-bottom: none;
        }
        &:last-child {
          border-bottom: 1px solid #e5e5e5;
        }
        &::before {
          display: none;
        }
        & a {
          display: flex;
          align-items: baseline;
          gap: 20px;
          padding: 11px 2px 12px;
          @media screen and (max-width: 767px) {
            flex-direction: column;
            gap: 2px;
            padding: 10px 2px 11px;
          }
          &:hover {
            text-decoration: none;
            opacity: 0.7;
          }
          & time {
            flex: none;
            font-family: var(--mont);
            font-size: 12px;
            color: var(--parts-ink);
          }
          & p {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.6;
          }
        }
      }
    }
  }

  /* 下層ページ共通のFV。写真の左下に白ボックスを重ね、ページタイトルもこの中に持たせる */
  .cs-page-fv {
    position: relative;
    margin-top: 40px;
    @media screen and (max-width: 767px) {
      margin-top: 25px;
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }

    .img {
      margin: 0;
      aspect-ratio: 1200/510;
      overflow: hidden;
      @media screen and (max-width: 767px) {
        aspect-ratio: 375/240;
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    /* 写真に重ねる白ボックス。左下を写真の角に合わせる */
    .box {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 555px;
      max-width: 62%;
      padding: 40px;
      background: #fff;
      box-sizing: border-box;
      @media screen and (max-width: 1024px) {
        position: static;
        width: 100%;
        max-width: none;
        padding: 25px 0 0;
      }
    }

    
    .title {
      margin: 0;
      border: none;
      padding: 0;
      font-size: 36px;
      line-height: 1.4;
      font-weight: 700;
      letter-spacing: 0.14em;
      font-feature-settings: "palt" 1;
      color: var(--parts-ink);
      @media screen and (max-width: 767px) {
        font-size: 28px;
      }
    }
    
    /* リード。「1,000件以上」だけ一段大きい */
    .sub {
      margin-top: 14px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.8;
      letter-spacing: 0.1em;
      font-feature-settings: "palt" 1;
      color: var(--parts-green);

      & strong {
        font-weight: 700;
        font-size: 26px;
      }

      @media screen and (max-width: 767px) {
        margin-top: 0;
        font-size: 18px;

        & strong {
          font-size: 22px;
        }
      }
    }

    /* titleとsubのsp */
    .title,
    .sub {
      @media screen and (max-width: 767px) {
        background-color: #fff;
        padding-inline: 20px;
      }
    }

    .text {
      margin-top: 14px;
      font-size: 16px;
      line-height: 1.8;
      letter-spacing: 0.08em;
      font-feature-settings: "palt" 1;
      @media screen and (max-width: 767px) {
        font-size: 15px;
        padding-inline: 20px;
      }
    }
  }

  .cs-voice {
    gap: 80px;
    @media screen and (max-width: 1024px) {
      flex-direction: column;
      gap: 0;
    }
    .sub-head {
      @media screen and (max-width: 1024px) {
        order: -2;
      }
      & strong {
        font-weight: 700;
        font-size: 26px;
      }
    }
    .img-box {
      width: 426px;
      aspect-ratio: 426/320;
      overflow: hidden;
      @media screen and (max-width: 1024px) {
        order: -1;
        margin-top: 20px;
        width: 100%;
        aspect-ratio: 426/256;
      }
      & p {
        height: 100%;
        & img {
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .cs-case {
    gap: 45px;
    margin-top: 80px;
    align-items: flex-start;
    background-color: var(--parts-green02);
    padding: 60px;
    @media screen and (max-width: 1024px) {
      flex-direction: column;
      gap: 25px;
      margin-top: 40px;
      padding: 30px 25px;
    }

    .img-box {
      position: relative;
      width: 355px;
      @media screen and (max-width: 1024px) {
        order: -1;
        width: 100%;
        max-width: 420px;
        margin: 20px auto 0;
      }

      & p {
        margin: 0;
        aspect-ratio: 355/444;
        overflow: hidden;

        & a {
          display: block;
          height: 100%;
        }

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .text-box > .title {
      margin: 0 0 17px;
      padding-bottom: 17px;
      border-bottom: 1px solid var(--parts-ink);
      font-size: 20px;
      line-height: 1.8;
      letter-spacing: 0.1em;
      font-feature-settings: "palt" 1;
      @media screen and (max-width: 1024px) {
        order: -2;
      }
      @media screen and (max-width: 767px) {
        font-size: 18px;
      }
    }
    /* お客様名 */
    .name {
      margin: 0;
      font-weight: 700;
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.1em;
      font-feature-settings: "palt" 1;
      color: var(--parts-green);
    }

    /* 業界・仕様 */
    .spec {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 21px;
      margin: 11px 0 0;
      padding: 0;
      list-style: none;
      padding-left: 0 !important;

      & li {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.08em;

        &::before,
        &::after {
          content: none;
        }
      }

      /* 「業界」「仕様」の緑タグ */
      .label {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-width: 58px;
        min-height: 21px;
        padding: 3px 7px;
        border-radius: 2px;
        background: var(--parts-green);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.08em;
        box-sizing: border-box;
      }
    }

    /* 制作物名（左に緑の帯） */
    .item {
      width: fit-content;
      max-width: 100%;
      margin-top: 19px;
      padding: 7px 19px 7px 15px;
      border-left: 4px solid var(--parts-green);
      background: #fafafa;
      box-sizing: border-box;

      .title {
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 0.1em;
        font-feature-settings: "palt" 1;
      }

      .text {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.1em;
        font-feature-settings: "palt" 1;
      }
    }

    /* お客様の声（本文） */
    .text-box > .text {
      margin-top: 30px;
      font-size: 16px;
      line-height: 1.8;
      letter-spacing: 0.08em;
      font-feature-settings: "palt" 1;
      @media screen and (max-width: 767px) {
        font-size: 15px;
      }
    }

    /* ご提案背景（グレー地のボックス） */
    .reason {
      margin-top: 36px;
      padding: 42px;
      background: #fafafa;
      @media screen and (max-width: 767px) {
        margin-top: 25px;
        padding: 25px 20px;
      }

      .label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 7px 12px;
        border-radius: 2px;
        background: var(--parts-green);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: 0.1em;
        font-feature-settings: "palt" 1;
      }

      .text {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.7;
        letter-spacing: 0.08em;
        font-feature-settings: "palt" 1;
      }
    }
  }

  .cs-about {
    gap: 80px;
    @media screen and (max-width: 1024px) {
      flex-direction: column;
      gap: 0;
    }
    .sub-head {
      @media screen and (max-width: 1024px) {
        order: -2;
      }
    }
    .img-box {
      width: 606px;
      max-width: 50%;
      aspect-ratio: 606/403;
      @media screen and (max-width: 1024px) {
        order: -1;
        margin-top: 20px;
        width: 100%;
        max-width: 480px;
        aspect-ratio: 480/326;
      }
      & p {
      }
    }
  }

  /* ======================================================
       about-fsc：FSC認証紙印刷の特徴（3カラムのカード）

       先方指摘「特徴」と「クスプリの〜」が同じ3カラムで単調（No.22）への対応。
       この2ブロックで役割が違うことを形で分ける：
         特徴   → cs-feature  枠で囲んだカード（並列の3点）
         クスプリ → cs-strength 2カラム（実績への導線。下に続く）
       num3 / num2 はテーマのまま。他ページの .num3 には影響しない
       ====================================================== */

  .component.column.num3.cs-feature {
    margin-top: 40px;
    gap: 16px;
    align-items: stretch;
    @media screen and (max-width: 767px) {
      flex-direction: column;
      gap: 16px;
      margin-top: 25px;
    }

    .wrap {
      border: 1px solid var(--parts-ink);
      background: #fff;
      margin-right: 0;
      padding: 28px 24px 24px;
      width: calc((100% - (16px * 2)) / 3);
      @media screen and (max-width: 767px) {
        width: 100%;
        padding: 22px 20px 20px;
      }
    }

    /* 連番は h3.step の .num と同じ黒い四角。見出しから切り離して上に置く */
    .title {
      border-bottom: 0;
      padding-bottom: 0;
      margin-top: 0;
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 0.06em;
      @media screen and (max-width: 767px) {
        font-size: 17px;
      }

      .num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-bottom: 14px;
        border-radius: 4px;
        background: var(--parts-ink);
        color: #fff;
        font-family: "Montserrat", var(--parts-font);
        font-size: 15px;
        font-weight: 700;
        @media screen and (max-width: 767px) {
          width: 30px;
          height: 30px;
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }

    .text {
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.8;
    }
  }

  /* ======================================================
       about-fsc：クスプリのFSC認証紙印刷（左に見出し＋導入＋ボタン）

       左右の比率は「テキスト+画像」の 39.765% : 57.031%（残りが間隔）を流用。
       gap を使わず space-between で空ける
       ====================================================== */

  .component.column.num2.cs-strength {
    margin-top: 80px;
    gap: 0;
    justify-content: space-between;
    align-items: flex-start;
    @media screen and (max-width: 1024px) {
      flex-direction: column;
      margin-top: 60px;
    }

    .wrap {
      flex: 0 0 57.031%;
      margin-right: 0;
      @media screen and (max-width: 1024px) {
        flex: 0 0 auto;
        width: 100%;
      }

      &:first-child {
        flex: 0 0 39.765%;
        @media screen and (max-width: 1024px) {
          display: contents;
          flex: 0 0 auto;
        }

        & h3 {
          margin-top: 0;
        }

        .text {
          margin-top: 20px;
          font-size: 15px;
          line-height: 1.9;
          @media screen and (max-width: 767px) {
            margin-top: 0;
          }
        }

        .btn-wrap {
          margin-top: 28px;
          @media screen and (max-width: 1024px) {
            width: fit-content;
            margin-top: 20px;
            order: 1;
          }
          @media screen and (max-width: 767px) {
            width: 100%;
          }
        }
      }

      &:last-child {
        @media screen and (min-width: 768px) and (max-width: 1024px) {
          display: flex;
          gap: 15px;
        }
        @media screen and (max-width: 1024px) {
        }
        @media screen and (max-width: 767px) {
          /* flex-direction: column;
          gap: 0; */
        }
        & .item {
          @media screen and (min-width: 768px) and (max-width: 1024px) {
            border-bottom: 1px solid #e5e5e5;
          }
        }
      }
    }

    /* 右カラム：3項目を罫線で区切って縦に積む（上下とも罫線で閉じる） */
    .item {
      padding: 22px 0;
      border-top: 1px solid #e5e5e5;
      &:last-child {
        border-bottom: 1px solid #e5e5e5;
      }

      .title {
        border-bottom: 0;
        padding-bottom: 0;
        margin-top: 0;
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: 0.06em;
        @media screen and (max-width: 767px) {
          font-size: 17px;
        }
      }

      .text {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.8;
      }
    }

    @media screen and (max-width: 1024px) {
      .wrap:last-child {
        margin-top: 30px;
      }
    }
  }

  .cs-check {
    width: 930px;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 26px;
    gap: 35px;
    @media screen and (max-width: 1024px) {
      gap: 24px;
    }
    @media screen and (max-width: 767px) {
      flex-direction: column;
      gap: 10px;
    }
    .wrap {
      flex: 1;
    }
    &.lg {
      width: 100%;
      gap: 54px;
      @media screen and (max-width: 1024px) {
        gap: 24px;
      }

      .banner a {
        gap: 12px;
        padding: 23px 20px;
        @media screen and (max-width: 767px) {
          padding: 16px;
        }
        .title {
          font-size: 26px;
          @media screen and (max-width: 767px) {
            font-size: 18px;
          }
        }
      }
    }
  }

  .cs-full:has(.cs-flow) {
    margin-top: 120px;
    padding-block: 100px;
    padding-inline: 100px;
    @media screen and (max-width: 1024px) {
      padding-inline: 0;
    }
    @media screen and (max-width: 767px) {
      margin-top: 65px;
      padding-block: 50px;
    }
    .headline {
      margin-top: 0;
      @media screen and (max-width: 767px) {
        text-align: center;
      }
    }
  }
  .cs-flow {
    margin-top: 58px;
    @media screen and (max-width: 767px) {
      margin-top: 25px;
    }
    .container {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 65px;
      @media screen and (max-width: 1024px) {
        gap: 80px;
      }
      @media screen and (max-width: 767px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 10%;
        width: 92%;
        max-width: 400px;
        margin-inline: auto;
      }
      .wrap {
        width: auto;
        margin-right: 0;
      }
      .img-box {
        border: 2px solid var(--parts-ink);
        border-radius: 50%;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background-color: #fff;
        @media screen and (max-width: 767px) {
          padding: 15px;
        }
        & img {
          max-width: 100%;
          height: auto;
        }
      }
      .num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        aspect-ratio: 1;
        margin: -20px auto 0;
        border-radius: 5.8px;
        background: var(--parts-ink);
        font-family: var(--mont);
        font-weight: 700;
        font-size: 23.2px;
        line-height: 1;
        letter-spacing: 0.04em;
        color: #fff;
        @media screen and (max-width: 767px) {
          font-size: 16px;
          width: 30px;
        }
      }

      /* 工程名 */
      .title {
        font-size: 20px;
        line-height: 1.4;
        text-align: center;
        margin-top: 0.5em;

        @media screen and (max-width: 767px) {
          font-size: 16px;
        }
      }
    }

    .btn-wrap {
      margin-top: 54px;
      text-align: center;
      @media screen and (max-width: 767px) {
        margin-top: 40px;
        margin-inline: auto;
      }
    }
  }

  .cs-guide-card {
    width: 800px;
    max-width: 100%;
    margin-inline: auto;
    .inner {
      margin-top: 58px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 22px;
      @media screen and (max-width: 767px) {
        margin-top: 25px;
      }
      .wrap {
        width: calc((100% - (22px * 2)) / 3);
        @media screen and (max-width: 767px) {
          width: 100%;
        }
        & a {
          gap: 19px;
          height: 100%;
          padding: 24px 50px 17px;
          border: 1px solid var(--parts-ink);
          @media screen and (max-width: 767px) {
            flex-direction: row;
            justify-content: flex-start;
            padding: 1em 7%;
          }
        }

        & img {
          width: 100%;
          @media screen and (max-width: 767px) {
            width: 4em;
          }
        }

        .title {
          font-size: 16px;
          line-height: 1.4;
          text-align: center;
          @media screen and (max-width: 767px) {
            text-align: left;
          }
        }
      }
    }
  }
}

/* ======================================================
       TOP：FV・CTA以外のボタンは幅397pxに統一
       ====================================================== */
.top_wrap a.btn:not(.white):not(.cta) {
  width: 397px;

  @media screen and (max-width: 1024px) {
    width: 100%;
  }
}

/* ======================================================
       CTA
       ====================================================== */

:is(section.page, .top_wrap) .cs-full:has(.cs-cta) {
  margin-top: 54px;
  background-color: var(--parts-ink);
  box-shadow: 0 0 0 100vmax var(--parts-ink);
  .cs-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 60px 20px;
    text-align: center;
    .title {
      font-size: 22px;
      line-height: 1.32;
      letter-spacing: 0.1em;
      color: #fff;
      @media screen and (max-width: 767px) {
        font-size: 20px;
      }
    }
    .wrap {
      display: flex;
      gap: 35px;
      @media screen and (max-width: 767px) {
        flex-direction: column;
        gap: 18px;
      }
    }
  }
}

section.page:not(.top_wrap) .cs-full:has(.cs-cta) {
  margin-top: 80px;
  @media screen and (max-width: 767px) {
    margin-top: 54px;
  }
}

/* ==========================================================
   営業日カレンダー
   ========================================================== */

.wrap:has(.calendar) {
  width: 100%;
}

.holiday {
  background: #ffcccc !important;
}

.calendar_readme ul li {
  padding-left: 0;
  .holiday {
    border-color: #ffcccc !important;
    background-color: #ffcccc !important;
    top: 6px;
  }
  .today {
    top: 6px;
  }
}

/* ======================================================
       商品一覧（TOP・商品一覧ページ・サブメニューのパネル）
====================================================== */

/* 大分類の見出し（h3.title）。サブメニューのパネル内でも使われる */
.products_list_level1 .title {
  margin-bottom: 10px;
  @media screen and (max-width: 767px) {
    font-size: 20px;
  }
  &:before {
    content: "";
  }
}

.cs-product-list {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.product_box {
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.cs-product-list .wrap,
.products_list_level1 .box {
  width: 22.8%;
  margin-right: 0;
  margin-bottom: 0;
  @media screen and (max-width: 1024px) {
    width: calc((100% - 20px) / 2);
  }
}
.cs-product-list .wrap a,
.products_list_level1 .box .image {
  display: flex;
  border: 1px solid var(--parts-ink);
  overflow: hidden;
  & img {
    max-width: 100%;
  }
}

/* 商品名 */
.cs-product-list .wrap .title,
.products_list_level1 .box .item_title {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.1em;

  @media screen and (max-width: 767px) {
    font-size: 16px;
  }
}

/* 価格 */
.cs-product-list .wrap .text {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--parts-ink);

  @media screen and (max-width: 767px) {
    font-size: 14px;
    margin-top: 12px;
  }
}

/* ======================================================
       商品詳細（小分類）
====================================================== */

/* フルブリードの解放。テンプレートの .products_list_level2 に overflow:hidden があり、
   .cs-full が box-shadow で作っている全幅の帯が本文幅（1160px）で切られてしまう。
   CTA帯を持つページだけ解放する（実測で scrollWidth/Height == clientWidth/Height ＝
   はみ出す中身は無く clearfix 目的と判断）。BFCが解けてmarginがcollapseするため縦が約10px詰まる。
   縦方向の影は .cs-full 側の clip-path: inset(0 -100vmax) が止めている */
.page.products .products_list_level2:has(.cs-full) {
  overflow: visible;
}

.page.products {
  .product-about {
    display: flex;
    gap: 60px;
    @media screen and (max-width: 767px) {
      flex-direction: column;
      gap: 20px;
    }
    .img-box {
      width: 32%;
      @media screen and (max-width: 767px) {
        width: 100%;
      }
      & img {
        max-width: 100%;
      }
    }
    .text-box {
      & h3 {
        margin-bottom: 16px;
        @media screen and (max-width: 767px) {
          margin-bottom: 10px;
        }
        &::before {
          display: none;
        }
      }
      .summary-wrap {
      }
      .detail-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
        @media screen and (max-width: 767px) {
          grid-template-columns: 1fr;
          gap: 0;
        }
        & ul li {
          --mark-width: 12px;
          padding-left: 1.2em;
          width: 100%;
          &::before {
            background-color: var(--parts-green);
            border-radius: 2px;
          }
        }
      }
    }
  }

  .recommend {
    & h4 {
      border: none;
      padding-bottom: 0;
    }
    & ul {
      background-color: var(--parts-green02);
    }
  }

  .group_box {
    & h2.sub_title {
      background-color: var(--parts-ink);
      display: inline-block;
      border-radius: 6px;
      min-width: 5em;
      text-align: center;
      font-size: 18px;
      padding: 7px 15px;
      @media screen and (max-width: 767px) {
        font-size: 16px;
      }
    }
    &:not(:first-child) {
      & h2.sub_title {
        margin-top: 40px;
      }
    }
  }
}

/* ==========================================================
   商品詳細
   ========================================================== */
.product_form {
  .product_form_price {
    .product_form_price_table {
      & #in2cartPriceTableWrapper {
        .tbl_scroll {
          & #in2cart_price_table {
            & a {
              color: var(--parts-ink);
            }
            & th {
              width: auto;
            }
            & th.quantity,
            & td.quantity {
              background-color: #fafafa;
            }
            & td.quantity.cross,
            & td.cross {
              background-color: var(--parts-green02);
            }
            & td.selected {
              background-color: var(--parts-green);
            }
            & td.selected span,
            & td.selected a {
              color: #fff;
            }
          }
        }
      }
    }
  }
  .product_form_cart {
    #filter_box {
      .filter_items {
        .filter_items_top {
          .name .help {
            background-color: var(--parts-green);
          }
        }
      }
    }
    .price_any_number_box {
      .filter_items .name .help {
        background-color: var(--parts-green);
      }
    }
  }
}

/* ======================================================
       step1 カート
====================================================== */
section.cart h3 {
  margin-bottom: 20px;
}

.cart-top .cart_box_gawa:last-child {
  padding-top: 0;
  margin-bottom: 0;
}

.btn_3set_box .inner {
  width: fit-content;
  & a {
    &.btn_primary {
      font-size: initial;
      & i {
        display: none;
      }
    }
  }
  .bottom {
    column-gap: 1em;
    @media screen and (max-width: 767px) {
      display: flex;
      align-items: baseline;
    }
    & a {
      &.btn_default,
      &.btn_estimate {
        padding: 0;
        width: auto;
        /* font-size: 14px; */
        color: var(--parts-green) !important;
        background-color: transparent;
        text-decoration: underline;
        @media screen and (max-width: 767px) {
          font-size: 14px;
          min-height: auto;
        }
        &::after {
          display: none;
        }
      }
    }
  }
}

section.page.cart {
  .cart-top > .wrap,
  & #in2cart_flow_navi + .wrap {
    background-color: var(--parts-green02);
    padding: 24px;
  }
  .cart_box_mini .item-no {
    background-color: var(--parts-ink);
    color: #fff;
  }
  .cart_total_box {
    background-color: var(--parts-gray-bg);
  }
}

.btn_rows_box .inner {
  display: flex;
  flex-direction: row-reverse;
  gap: 2em;
  align-items: baseline;
  justify-content: center;
  @media screen and (max-width: 767px) {
    width: auto;
  }
  & a {
    align-items: center;
    white-space: nowrap;
  }
  & input[type="button"] {
    margin-bottom: 0;
  }
}

.tyuui {
  border: none;
  background-color: var(--parts-green02);
  color: var(--parts-ink);
  padding-inline: 20px;
}

/* ======================================================
      step2 お届け先
====================================================== */
.cart-step2 .address-box .number-list .item-no {
  background-color: var(--parts-ink);
  color: #fff;
}

/* ======================================================
      step3 料金確認
====================================================== */
.item_detail_layout > .detail_box .item_box .item-no {
  background-color: var(--parts-ink);
  color: #fff;
}

.step3_applicant_box {
  margin-top: 20px;
}

.step3_estimate_btn_box {
  & a.btn {
    color: var(--parts-green) !important;
    background-color: transparent;
    text-decoration: underline;
    &::after {
      display: none !important;
    }
  }
}

/* ======================================================
      step4 入稿手続き
====================================================== */
.cart-step4 .item-wrapper {
  margin-top: 20px;
  .schedule-date-box {
    padding-left: 30px;
  }
}

.cart-step4 .info {
  & dt {
    background: var(--parts-green02);
    border: 1px solid var(--parts-ink);
    font-weight: 700;
    padding: 10px;
  }
  & dd {
    border: 1px solid var(--parts-ink);
    border-left: none;
    padding: 10px;
  }
  & dt,
  & dd {
    &:not(:last-of-type) {
      border-bottom: none;
    }
  }
  @media screen and (max-width: 767px) {
    & dt,
    & dd {
      border-left: 1px solid var(--parts-ink);
    }
    & dt {
      &:last-of-type {
        border-bottom: none;
      }
    }
  }
}

.item_detail_layout {
  background-color: var(--parts-gray-bg);
  padding: 20px;
}

/* step4 の注記 */
.cs-note-green,
.draft_reorder_message {
  margin: 0;
  padding: 14px 18px;
  background: var(--parts-green02);
  color: var(--parts-ink);
  font-weight: 400;
  line-height: 1.7;
  border: none;
  @media screen and (max-width: 767px) {
    padding: 12px 14px;
    font-size: 14px;
  }
}

.draft_reorder_message {
  margin-bottom: 20px;
}

/* ======================================================
       お知らせ一覧
====================================================== */

/* ======================================================
       お知らせ詳細
====================================================== */

.post_terms ul {
  & li {
    border: 1px solid var(--parts-green);
    padding: 0.6em 1.2em;
    margin-right: 1em;
  }
}

.post_time {
  color: var(--parts-ink);
  margin-top: 1em;
}

/* ======================================================
       ログイン
====================================================== */
#help_list {
  & dt {
    background-color: transparent;
    border: 1px solid var(--parts-ink);
  }
}

/* ======================================================
       フォーム
====================================================== */
th .hissu {
  background-color: var(--parts-green);
}

/* ======================================================
       マイページ
====================================================== */
section.mypage {
  .header_mypage .top .title {
    color: var(--parts-green);
  }
  .top_menu .wrap a {
    &:hover {
      background-color: var(--parts-green);
      .num .count {
        color: var(--parts-green);
      }
    }
  }
  .common_menu {
    & li {
      &.on,
      &:hover {
        border-color: var(--parts-green);
      }
    }
  }
}

/* ======================================================
       注文履歴/入稿手続き
====================================================== */
div.pageing ul li a {
  background-color: var(--parts-green);
}

.mypage .order-wrapper > .order-box {
  & > .time {
    padding: 30px;
    background-color: var(--parts-green02);
  }

  .detail-flexbox {
    @media only screen and (min-width: 767px) and (max-width: 1280px) {
      display: flex;
    }
    @media screen and (max-width: 900px) {
      flex-direction: column;
    }
    .detail.wide {
      width: auto;
      .step-order-flexbox {
        gap: 30px;
        justify-content: flex-start;
        .order-list {
          width: auto;
        }
      }
    }
    .menu {
      width: fit-content;
      @media only screen and (min-width: 767px) and (max-width: 1280px) {
        margin: 0;
      }
    }
  }

  .summary .payment-method ul.document-list li.document a {
    width: fit-content;
  }

  .detail-flexbox .menu {
  }
}