/* ============================================================
 * lflow.net WordPress 追加CSS（整理版）
 * 更新: 2026-06-03
 *
 * 構成
 *   1. レイアウト
 *      1-1. コラム本文・サイドバー・関連記事
 *      1-2. コラム一覧（2カラム）
 *      1-3. 事例一覧 works（2カラム）
 *      1-4. 事例詳細 works（2カラム）
 *   2. タイポグラフィ
 *      2-1. コラム本文（見出し・本文・目次）
 *      2-2. 事例本文 works（見出し・本文）
 *   3. コンポーネント
 *      3-1. ボックス（ポイント／注意／注釈／悩み／具体例）
 *      3-2. CTAボックス
 *      3-3. 関連記事カード
 *      3-4. 表・リスト（表L／比較表／料金表／選択肢リスト）
 *      3-5. 特殊（組み合わせ／1行強調／数値比較／概念比較）
 *   4. 一覧カード（事例カード works-card）
 *   5. 事例一覧 カテゴリフィルタ
 *   6. ユーティリティ
 *
 * 2026-06-03 整理で行ったこと（機能等価／表示は変えていない）
 *   - works h2/h3 の二重定義を1つに統合。死んでいた
 *     @media(min-width:1025px){h2 22/h3 20} を削除（後勝ちで未適用だった）
 *   - 重複していた works 目次非表示(#rtoc-mokuji-wrapper)を1つに集約
 *   - works 関連ルールを番号体系へ統合
 *   - !important・旧セレクタ(.entry-content/.post-content/article)は互換維持
 *
 * 要判断メモ
 *   - works スマホ(≤600px)は現状 h2 24 / h3 21。コラム(≤600)は h2 22 / h3 22。
 *     「コラムと完全一致」にする場合は 2-2 の @media(max-width:600px) を
 *     h2 22 / h3 22 に変更（今は現状値=24/21を保持）。
 * ============================================================ */


/* ============================================================
   1. レイアウト
   ============================================================ */

/* --- 1-1. コラム本文・サイドバー・関連記事 --- */

/* 全体コンテナを1200pxに */
.inner {
  max-width: 1200px !important;
}

/* 本文を残り全幅に広げる */
.column-single__content {
  max-width: none !important;
  flex: 1 !important;
}

/* gap を50pxに固定 */
.column-single__wrap {
  gap: 50px !important;
}

/* 人気記事サイドバー：1024px以下は非表示 */
@media (max-width: 1024px) {
  .popular.is-pc {
    display: none !important;
  }
}

/* 人気記事サイドバー：PC幅でスクロール追従 */
@media (min-width: 1025px) {
  .popular.is-pc {
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
  }
}

/* 関連記事2列グリッド */
.related__wrap {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
.related__wrap > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .related__wrap {
    grid-template-columns: 1fr !important;
  }
}

/* --- 1-2. コラム一覧（PC 1025px以上で2カラム化） --- */
@media (min-width: 1025px) {
  .column-archive__wrap.flex {
    margin: 40px 0 40px !important;
    gap: 28px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .column-archive__wrap.flex .column-archive__items {
    flex: 1 1 66% !important;
    width: 66% !important;
    max-width: 66% !important;
    min-width: 0 !important;
  }
  .column-archive__items > .column-card {
    width: calc((100% - 31px) / 2) !important;
    max-width: calc((100% - 31px) / 2) !important;
    flex: 0 0 calc((100% - 31px) / 2) !important;
  }
  .column-archive__wrap.flex > *:not(.column-archive__items) {
    flex: 0 0 31% !important;
    width: 31% !important;
    max-width: 31% !important;
  }
  .column-archive__wrap.flex > *:not(.column-archive__items) a,
  .column-archive__wrap.flex > *:not(.column-archive__items) p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .column-archive__wrap.flex > *:not(.column-archive__items) > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --- 1-3. 事例一覧 works（コラム一覧と同じ2カラム＋人気記事サイドバー） --- */
.works-archive__wrap.flex {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* タブレット以下：1カラム（カードを全幅、人気記事はその下に） */
@media (max-width: 1024px) {
  .works-archive__wrap.flex .works-archive__items,
  .works-archive__wrap.flex .popular {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* PC(1025px以上)：左カード2列(66%) ＋ 右サイドバー(31%) */
@media (min-width: 1025px) {
  .works-archive__wrap.flex {
    margin: 40px 0 40px !important;
    gap: 28px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .works-archive__wrap.flex .works-archive__items {
    flex: 1 1 66% !important;
    width: 66% !important;
    max-width: 66% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .works-archive__items > .works-card {
    width: calc((100% - 31px) / 2) !important;
    max-width: calc((100% - 31px) / 2) !important;
    flex: 0 0 calc((100% - 31px) / 2) !important;
  }
  .works-archive__wrap.flex > *:not(.works-archive__items) {
    flex: 0 0 31% !important;
    width: 31% !important;
    max-width: 31% !important;
  }
  .works-archive__wrap.flex > *:not(.works-archive__items) a,
  .works-archive__wrap.flex > *:not(.works-archive__items) p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .works-archive__wrap.flex > *:not(.works-archive__items) > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 事例一覧：カード直下のページネーションを全幅に（flex内で潰れないように） */
.works-archive__items .pagination {
  width: 100% !important;
  flex: 0 0 100% !important;
  margin-top: 24px;
}

/* --- 1-4. 事例詳細 works（コラム詳細と同じ2カラム） --- */
.works-single__wrap.flex {
  gap: 50px !important;
  align-items: flex-start !important;
}
.works-single__content {
  max-width: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* 事例詳細：カテゴリ(--hollow)を白地＋ティール文字に（白文字埋もれ対策） */
.works-single .category.--hollow {
  background: #fff !important;
  color: #01b1ae !important;
  border: 1px solid #01b1ae !important;
}


/* ============================================================
   2. タイポグラフィ
   ============================================================ */

/* --- 2-1. コラム本文 --- */

/* PC版（1025px以上）：本文16px・行間1.9 */
@media (min-width: 1025px) {
  .column-single__content,
  .column-single__content p,
  .column-single__content li {
    font-size: 16px !important;
    line-height: 1.9;
  }
}

/* h2/h3 サイズ・余白・行間（PC/Tabletとも適用、SPは下記で上書き） */
.column-single__content h2 {
  font-size: 24px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin-top: 2em !important;
}
.column-single__content h3 {
  font-size: 22px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 24px !important;
}
.column-single__content h2,
.column-single__content h3 {
  line-height: 1.5 !important;
}

/* h2/h3 太字を通常のboldに（旧セレクタも互換のため残置） */
.entry-content h2,
.post-content h2,
article h2,
.entry-content h2.wp-block-heading,
article h2.wp-block-heading,
.entry-content h3,
.post-content h3,
article h3,
.entry-content h3.wp-block-heading,
article h3.wp-block-heading {
  font-weight: 600 !important;
}

/* h4：◆プレフィックス（軽量） */
.column-single__content h4 {
  font-size: 18px !important;
  font-weight: bold;
  color: #333;
  padding: 4px 0;
  margin: 1.6em 0 .6em;
  line-height: 1.5;
}
.column-single__content h4::before {
  content: "◆";
  color: #01b1ae;
  margin-right: 8px;
  font-size: 14px;
}

/* PC：h1 */
.column-single__content h1 {
  font-size: 30px !important;
  line-height: 1.6 !important;
}

/* スマホ・タブレット：h2/h3 */
@media (max-width: 1024px) {
  .column-single__content h2 { font-size: 22px !important; }
  .column-single__content h3 { font-size: 20px !important; }
}

/* スマホ（600px以下）：h1/h2/h3 と本文の調整 */
@media (max-width: 600px) {
  .column-single__content h1 {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }
  .column-single__content h2,
  .column-single__content h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
  }
  .column-single__content h4 {
    font-size: 17px !important;
  }
  .column-single__content p {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }
  .column-single__content,
  .column-single__content p,
  .column-single__content li {
    font-weight: 300 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .column-single__content strong,
  .column-single__content b {
    font-weight: 700 !important;
  }
}

/* 目次：本文と幅を揃える */
#rtoc-mokuji-wrapper,
.rtoc-mokuji-content {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- 2-2. 事例本文 works（コラムとサイズ・行間・見出しデザインを統一） --- */
/* ※旧「【置き換え版】」と「事例本文…」の2ブロックを統合。
      死んでいた @media(min-width:1025px){h2 22/h3 20} は削除済み */

/* h1：コラムと同じ30px */
.works-single h1 {
  font-size: 30px !important;
  line-height: 1.6 !important;
}

/* 本文 p / li：16px・行間1.9（PC） */
@media (min-width: 1025px) {
  .works-single .article,
  .works-single .article p,
  .works-single .article li {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }
}

/* h2：ティール背景ボックス＋左ボーダー（コラムと同一） */
.works-single .article h2.wp-block-heading {
  font-size: 24px !important;
  line-height: 1.5 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin-top: 2em !important;
}

/* h3：左ボーダー（コラムと同一） */
.works-single .article h3.wp-block-heading {
  font-size: 22px !important;
  line-height: 1.5 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 24px !important;
}

/* h4：◆プレフィックス（コラムと同一） */
.works-single .article h4 {
  font-size: 20px !important;
  font-weight: bold;
  color: #333;
  padding: 4px 0;
  margin: 1.6em 0 .6em;
  line-height: 1.5;
}
.works-single .article h4::before {
  content: "◆";
  color: #01b1ae;
  margin-right: 8px;
  font-size: 14px;
}

/* タブレット以下：h2 22 / h3 20 */
@media (max-width: 1024px) {
  .works-single .article h2.wp-block-heading { font-size: 22px !important; }
  .works-single .article h3.wp-block-heading { font-size: 20px !important; }
}

/* スマホ（600px以下）：見出し・本文
   ※コラムに合わせる場合は h2 22 / h3 22 に変更（現状は 24 / 21 を保持） */
@media (max-width: 600px) {
  .works-single h1 {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }
  .works-single .article h2.wp-block-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
  }
  .works-single .article h3.wp-block-heading {
    font-size: 21px !important;
    font-weight: 700 !important;
  }
  .works-single .article h4 { font-size: 19px !important; }
  .works-single .article p {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }
  .works-single .article,
  .works-single .article p,
  .works-single .article li {
    font-weight: 300 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .works-single .article strong,
  .works-single .article b {
    font-weight: 700 !important;
  }
}

/* 事例ページ：目次を非表示 */
.works-single #rtoc-mokuji-wrapper {
  display: none !important;
}


/* ============================================================
   3. コンポーネント
   ============================================================ */

/* ------------------------------------------------------------
   3-1. ボックスコンポーネント
   ------------------------------------------------------------ */

/* ポイントボックス（ここがポイント） */
.point-box {
  background: #f5fbfb;
  border: 1px  solid #ace8e3;
  border-radius: 8px;
  padding: 24px;
  margin: 1.5em 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.point-box__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #01b1ae;
  margin-bottom: 8px;
  font-size: 16px;
}
.point-box__title::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #01b1ae;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: bold;
  flex-shrink: 0;
}
.point-box a { color: #01b1ae; text-decoration: underline; }
.point-box .formula {
  background: #fff;
  border: 1px dashed #d4ecec;
  padding: 12px 16px;
  border-radius: 4px;
  margin: 10px 0 8px;
  font-size: 18px !important;
  color: #01b1ae;
  font-weight: bold;
  text-align: center;
}

/* 注意喚起ボックス（オレンジ） */
.alert-box {
  background: #fff8e8;
  border: 1px  solid #fce7be;
  border-radius: 8px;
  padding: 24px;
  margin: 1.5em 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.alert-box__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #d97f1a;
  margin-bottom: 8px;
  font-size: 16px;
}
.alert-box__title::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #f39c2a;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
  font-family: Georgia, serif;
  font-style: italic;
}
.alert-box a { color: #01b1ae; text-decoration: underline; }

/* 注釈ボックス（※） */
.note-box {
  background: #fafafa !important;
  border-radius: 4px !important;
  padding: 12px 16px 12px 36px !important;
  margin: 1em 0 !important;
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.7 !important;
  position: relative !important;
}
.note-box::before {
  content: "※" !important;
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;
  color: #01b1ae !important;
  font-weight: bold !important;
}
.note-box a {
  color: #01b1ae !important;
  text-decoration: none !important;
  border-bottom: 1px dotted #01b1ae !important;
}

/* 悩み共感ボックス（グレー版） */
.concern-box {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 1.4em 0;
}
.concern-box__title {
  font-size: 20px !important;
  font-weight: bold;
  color: #555;
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #d4d4d4;
}
.concern-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.concern-box li {
  font-size: 16px !important;
  color: #555;
  line-height: 1.7;
  padding: 5px 0 5px 26px;
  position: relative;
}
.concern-box li::before {
  content: "×";
  position: absolute;
  left: 4px;
  top: 6px;
  color: #c62828;
  font-weight: bold;
  font-size: 18px;
}
@media (max-width: 600px) {
  .concern-box__title { font-size: 20px !important; }
  .concern-box li { font-size: 16px !important; }
  .concern-box li::before { font-size: 17px; top: 5px; }
}

/* 悩み共感ボックス（イエロー版） */
.concern-box--yellow {
  background: #fffef5;
  border-color: #f4d96b;
}
.concern-box--yellow .concern-box__title {
  color: #f4b400;
  border-bottom-color: #e6cd6b;
}
.concern-box--yellow li {
  color: #333;
}
.concern-box--yellow li::before {
  content: "★";
  color: #f4b400;
  font-size: 18px;
}

/* 具体例リスト（グレー版） */
.exlist-a {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 1.4em 0;
}
.exlist-a__title {
  font-size: 17px !important;
  font-weight: bold;
  color: #555;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #d4d4d4;
  letter-spacing: .03em;
}
.exlist-a__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.exlist-a__list li {
  font-size: 16px !important;
  color: #1a1a1a;
  font-weight: normal !important;
  line-height: 1.7;
  padding: 6px 0 6px 22px;
  position: relative;
}
.exlist-a__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 5px;
  color: #666;
  font-weight: bold;
  font-size: 18px;
}
@media (max-width: 600px) {
  .exlist-a__title { font-size: 16px !important; }
  .exlist-a__list li { font-size: 15px !important; }
}

/* 具体例リスト（薄緑版） */
.exlist-a--teal {
  background: #f5fbfb;
  border-color: #d4ecec;
}
.exlist-a--teal .exlist-a__title {
  color: #01b1ae;
  border-bottom-color: #d4ecec;
}
.exlist-a--teal .exlist-a__title::before {
  color: #01b1ae;
}
.exlist-a--teal .exlist-a__list li::before {
  color: #01b1ae;
}


/* ------------------------------------------------------------
   3-2. CTAボックス
   ------------------------------------------------------------ */

.cta-box {
  background: linear-gradient(135deg, #01b1ae 0%, #02c9c6 100%);
  border-radius: 14px;
  padding: 36px 28px;
  margin: 2em 0;
  color: #fff;
  text-align: center;
  box-shadow: 0 6px 20px rgba(1,177,174,.25);
}
.cta-box__title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px;
  line-height: 1.4;
}
.cta-box__body {
  font-size: 15px;
  margin: 0 0 24px;
  line-height: 1.7;
  opacity: .95;
}
.cta-box__button {
  display: inline-block;
  padding: 16px 64px;
  background: #fff;
  color: #01b1ae !important;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  min-width: 320px;
  box-sizing: border-box;
  transition: transform .2s, box-shadow .2s;
}
.cta-box__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* 末尾CTA：2ボタン構成 */
.cta-box__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cta-box__buttons .cta-box__button {
  min-width: 280px;
}
.cta-box__button--secondary {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff;
}
.cta-box__button--secondary:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  .cta-box { padding: 24px 18px; }
  .cta-box__title { font-size: 22px; }
  .cta-box__button {
    width: 100%;
    min-width: 0;
    padding: 16px 20px;
  }
  .cta-box__buttons { flex-direction: column; }
  .cta-box__buttons .cta-box__button {
    width: 100%;
    min-width: 0;
  }
}


/* ------------------------------------------------------------
   3-3. 関連記事カード
   ------------------------------------------------------------ */

.related-card {
  display: block;
  position: relative;
  margin: 2em 0;
  padding: 1.2em 1em 1em;
  border: 2px solid #01b1ae;
  border-radius: 10px;
  background: #fff;
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow .2s;
}
.related-card:hover {
  box-shadow: 0 4px 12px rgba(1,177,174,.3);
}
.related-card__label {
  position: absolute;
  top: -12px;
  left: 16px;
  display: inline-block;
  padding: 2px 12px;
  background: #fff;
  border: 2px solid #01b1ae;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  color: #01b1ae;
}
.related-card__label::before { content: "✓ "; }
.related-card__inner {
  display: flex;
  align-items: center;
  gap: 1em;
}
.related-card__thumb {
  width: 140px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.related-card__body { flex: 1; min-width: 0; }
.related-card p.related-card__title {
  margin: 0 0 .4em;
  font-size: 18px !important;
  font-weight: bold;
  color: #01b1ae;
  text-decoration: underline;
  line-height: 1.5;
}
.related-card p.related-card__excerpt {
  margin: 0 0 .4em;
  font-size: 14px !important;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-card__more {
  display: block;
  text-align: right;
  font-size: 14px;
  color: #01b1ae;
  font-weight: bold;
}
@media (max-width: 600px) {
  .related-card__thumb { width: 100px; height: 70px; }
  .related-card p.related-card__title { font-size: 14px !important; }
  .related-card p.related-card__excerpt { display: none !important; }
}


/* ------------------------------------------------------------
   3-4. 表・リスト
   ------------------------------------------------------------ */

/* 表L：丸数字バッジ付き */
@counter-style circled-numerals {
  system: fixed;
  symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469";
  suffix: " ";
}

.table-l {
  counter-reset: row;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1em 0 !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.table-l thead { display: none !important; }
.table-l tr { border-bottom: 1px solid #f0f0f0 !important; }
.table-l tr:last-child { border-bottom: none !important; }
.table-l th,
.table-l td {
  border: none !important;
  padding: 18px 16px !important;
  font-size: 15px !important;
  vertical-align: middle !important;
  background: transparent !important;
}
.table-l td:first-child {
  width: 42% !important;
  font-weight: 600 !important;
  color: #333 !important;
  padding: 18px 16px 18px 50px !important;
  position: relative !important;
  line-height: 1.5 !important;
}
.table-l td:first-child::before {
  content: counter(row) !important;
  counter-increment: row !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  background: #01b1ae !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: bold !important;
}
.table-l td:last-child { color: #555 !important; }

@media (max-width: 600px) {
  .table-l td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  .table-l td:first-child {
    width: 100% !important;
    padding: 16px 16px 4px 54px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .table-l td:first-child::before {
    top: 16px !important;
    transform: none !important;
  }
  .table-l td:last-child {
    padding: 0 16px 16px 54px !important;
    font-size: 14px !important;
    color: #555 !important;
  }
}

/* 表L：常時縦並び版 */
.table-l--stacked td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-sizing: border-box !important;
}
.table-l--stacked td:first-child {
  width: 100% !important;
  padding: 16px 16px 4px 54px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.table-l--stacked td:last-child {
  padding: 0 16px 16px 48px !important;
  font-size: 15px !important;
  color: #555 !important;
}
.table-l--stacked td:first-child::before {
  top: 16px !important;
  transform: none !important;
}

/* 比較表（メリット／デメリット色分け） */
.table-cmp-c {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  background: #fff;
  font-size: 15px !important;
}
.table-cmp-c thead {
  background: #f5fbfb;
  border-bottom: 2px solid #01b1ae;
}
.table-cmp-c th {
  padding: 14px;
  color: #01b1ae;
  font-weight: bold;
  text-align: left;
  letter-spacing: .03em;
  font-size: 15px !important;
}
.table-cmp-c td {
  padding: 14px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px !important;
  vertical-align: top;
}
.table-cmp-c td:first-child {
  font-weight: bold;
  color: #01b1ae;
  background: #f5fbfb;
  width: 18%;
  white-space: nowrap;
}
.table-cmp-c tbody tr:last-child td { border-bottom: none; }
.table-cmp-c .pro { color: #01b1ae; }
.table-cmp-c .pro::before { content: "○ "; font-weight: bold; }
.table-cmp-c .con { color: #d97f1a; }
.table-cmp-c .con::before { content: "△ "; font-weight: bold; }

@media (max-width: 600px) {
  .table-cmp-c { display: block; overflow-x: auto; white-space: nowrap; }
  .table-cmp-c th,
  .table-cmp-c td { min-width: 110px; font-size: 14px !important; }
}

/* 料金表（月額を大きく強調） */
.price-a {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1em 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  table-layout: fixed;
}
.price-a thead {
  background: linear-gradient(135deg, #01b1ae 0%, #00a09d 100%);
}
.price-a thead th {
  color: #fff;
  padding: 18px 12px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.2);
}
.price-a thead th:first-child {
  background: #f5fbfb;
  color: #555;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  padding-left: 18px;
}
.price-a thead th:first-child,
.price-a tbody td:first-child {
  width: 20%;
}
.price-a thead th:last-child { border-right: none; }
.price-a tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
}
.price-a tbody td:first-child {
  background: #f5fbfb;
  color: #01b1ae;
  font-weight: bold;
  text-align: left;
  padding-left: 18px;
  border-right: 1px solid #d4ecec;
}
.price-a tbody td:last-child { border-right: none; }
.price-a tbody tr:last-child td { border-bottom: none; }
.price-a .price-main {
  font-size: 22px;
  font-weight: bold;
  color: #01b1ae;
  line-height: 1.2;
  display: block;
}
.price-a .price-main--free { color: #888; }
.price-a .price-unit {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.price-a small {
  font-size: 13px !important;
  font-weight: normal !important;
  color: #999 !important;
}
.price-a thead small {
  color: rgba(255,255,255,0.85) !important;
  font-weight: normal !important;
}
@media (max-width: 600px) {
  .price-a { display: block; overflow-x: auto; white-space: nowrap; }
  .price-a thead th,
  .price-a tbody td { min-width: 110px; }
}

/* 選択肢判断リスト（CASE番号付き） */
.decide-c {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5em 0 !important;
  counter-reset: step;
}
.decide-c__item {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 18px 18px 18px 60px !important;
  margin-bottom: 12px !important;
  position: relative;
  border: 1px solid #d4ecec !important;
}
.decide-c__item:last-child {
  margin-bottom: 0 !important;
}
.decide-c__item::before {
  counter-increment: step;
  content: "CASE " counter(step);
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  background: #01b1ae;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .1em;
}
.decide-c__condition {
  color: #555 !important;
  font-size: 15px !important;
  margin-bottom: 2px !important;
  margin-left: 15px !important;
}
.decide-c__answer {
  color: #01b1ae !important;
  font-size: 18px !important;
  font-weight: bold !important;
  margin-left: 15px !important;
}
.decide-c__answer::before {
  content: "→ ";
}
@media (max-width: 600px) {
  .decide-c__item {
    padding: 16px 14px 16px 14px !important;
    padding-top: 32px !important;
    margin-bottom: 15px !important;
  }
  .decide-c__item::before {
    left: 14px;
    top: 12px;
    transform: none;
  }
  .decide-c__condition {
    margin-top: 15px !important;
  }
}


/* ------------------------------------------------------------
   3-5. 特殊コンポーネント
   ------------------------------------------------------------ */

/* 組み合わせカード（プラン×金額） */
.combo-c {
  background: #f5fbfb;
  border: 1px solid #d4ecec;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.4em 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.combo-c__plans { flex: 1; min-width: 260px; }
.combo-c__plans-text {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}
.combo-c__plans-text strong { color: #01b1ae; }
.combo-c__cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #d4ecec;
  border-radius: 20px;
  font-size: 12px;
}
.combo-c__cap-label {
  color: #888;
  font-weight: bold;
  letter-spacing: .03em;
}
.combo-c__cap-value {
  color: #01b1ae;
  font-weight: bold;
  font-size: 13px;
}
.combo-c__price {
  text-align: right;
  border-left: 1px dashed #d4ecec;
  padding-left: 24px;
  min-width: 140px;
}
.combo-c__price-label {
  font-size: 11px;
  color: #888;
  font-weight: bold;
  letter-spacing: .05em;
}
.combo-c__price-main {
  font-size: 24px;
  font-weight: bold;
  color: #01b1ae;
  line-height: 1.1;
}
@media (max-width: 600px) {
  .combo-c { flex-direction: column; align-items: stretch; }
  .combo-c__plans-text { font-size: 15px; }
  .combo-c__price {
    border-left: none;
    border-top: 1px dashed #d4ecec;
    padding-left: 0;
    padding-top: 12px;
    text-align: left;
  }
}

/* 1行強調（ピル背景） */
.hl-pill {
  display: block;
  background: #f5fbfb;
  border: 1px solid #d4ecec;
  border-radius: 6px;
  padding: 12px 18px;
  margin: 1em 0;
  color: #01b1ae;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.6;
}
.hl-pill::before {
  content: "◆";
  margin-right: 8px;
  color: #01b1ae;
}

/* 数値比較（vs型） */
.stat-vs {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 1.4em 0;
}
.stat-vs__card {
  flex: 1;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
}
.stat-vs__card--highlight {
  background: #f5fbfb;
  border: 2px solid #01b1ae;
}
.stat-vs__label {
  font-size: 13px !important;
  color: #888;
  font-weight: bold;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.stat-vs__card--highlight .stat-vs__label {
  color: #01b1ae;
}
.stat-vs__value {
  font-size: 28px !important;
  font-weight: bold;
  color: #333;
  line-height: 1.1;
}
.stat-vs__card--highlight .stat-vs__value {
  color: #01b1ae;
}
.stat-vs__sub {
  font-size: 12px !important;
  color: #888;
  margin-top: 4px;
}
.stat-vs__op {
  display: flex;
  align-items: center;
  font-size: 18px !important;
  font-weight: bold;
  color: #888;
  padding: 0 4px;
}
@media (max-width: 600px) {
  .stat-vs__value { font-size: 24px !important; }
  .stat-vs__op { font-size: 16px !important; }
}

/* 概念比較ブロック（階層表示） */
.concept-step { margin: 1.4em 0; }
.concept-step__item {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.concept-step__item--small {
  background: #fafafa;
  border: 1px solid #e5e7eb;
}
.concept-step__item--big {
  background: #f5fbfb;
  border: 2px solid #01b1ae;
}
.concept-step__name {
  font-size: 17px !important;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}
.concept-step__item--big .concept-step__name {
  color: #01b1ae;
}
.concept-step__detail {
  font-size: 15px !important;
  color: #555;
  line-height: 1.6;
}


/* ============================================================
   4. 一覧カード（事例カード works-card をコラムカードと同デザインに）
   ============================================================ */

/* カード全体：block化（コラムと同じ） */
.works-card { display: block !important; }

/* 画像：全周角丸＋下マージン（コラムと同じ） */
.works-card .img {
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}
@media (max-width: 767px) {
  .works-card .img img { aspect-ratio: 327/199 !important; } /* コラムと同じ比率 */
}

/* グレーの本文ボックスを廃止（コラムは白地に直接） */
.works-card .body {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* カテゴリ：黒ピル型（コラムと同じ） */
.works-card .category {
  line-height: 1.8 !important;
  background: #1A1A1A !important;
  color: #fff !important;
  display: inline-block !important;
  padding: 0 24px !important;
  border-radius: 4px !important;
}

/* タイトル：下マージンをコラムと同じに */
.works-card .title {
  margin: 8px 0 4px !important;
}

/* 支援内容の行はコラムに無い＆現状空なので非表示 */
.works-card .works-card__service {
  display: none !important;
}

/* タイトルの高さ固定(81px)を解除＝日付を直下に寄せる（コラムと同じ挙動） */
.works-archive__items .works-card .title {
  min-height: 0 !important;
}


/* ============================================================
   5. 事例一覧：カテゴリフィルタ（横スクロール・チップ＋自前スクロールバー）
   ============================================================ */
.works-archive .archive-category {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  scrollbar-width: none;            /* ネイティブバーは隠す */
}
.works-archive .archive-category::-webkit-scrollbar { display: none; }

.works-archive .archive-category a {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 99px;
  border: 1px solid #d4ecec;
  color: #666;
  background: #fff;
  white-space: nowrap;
  text-decoration: none !important;
}
.works-archive .archive-category a:hover {
  color: #01b1ae;
  border-color: #01b1ae;
  text-decoration: none !important;
}
.works-archive .archive-category a.current {
  background: #01b1ae !important;
  border-color: #01b1ae !important;
  color: #fff !important;
  font-weight: bold;
  text-decoration: none !important;
}

/* 自前スクロールバー（細め4px） */
.works-archive .cat-bar {
  position: relative;
  height: 4px;
  background: #eef5f5;
  border-radius: 4px;
  margin-top: 10px;
}
.works-archive .cat-bar__thumb {
  position: absolute;
  top: 0;
  height: 4px;
  background: #01b1ae;
  border-radius: 4px;
  left: 0;
  width: 30%;
}

/* カテゴリ一式を左カラム幅に収める */
.works-archive .cat-scroll {
  width: 100%;
  margin-bottom: 12px;
}

/* PC（1025px以上）：チップは折り返し表示、横スクロールバーは出さない */
@media (min-width: 1025px) {
  .works-archive .archive-category {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .works-archive .cat-bar { display: none !important; }
}


/* ============================================================
   6. ユーティリティ
   ============================================================ */

/* コラム本文に紛れ込んだ canvas を非表示 */
.column-single__content canvas {
  display: none !important;
}
.column-single__content p:has(> canvas) {
  display: none !important;
}
.column-single__content p:empty {
  display: none !important;
}

/* SP版のeyechatchをPC側の比率（約3:2）に揃える */
@media (max-width: 768px) {
  .column-single__content .eyechatch {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 68.75% !important;  /* 537/781 = 0.6875 */
    height: 0 !important;
    overflow: hidden !important;
  }
  .column-single__content .eyechatch img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* スマホ横スクロール矢印 */
.table-scroll-wrap {
  position: relative;
}
@media (max-width: 600px) {
  .table-scroll-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8px;
    width: 36px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95));
    pointer-events: none;
    z-index: 2;
  }
  .table-scroll-wrap::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: #888;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 3;
    opacity: 0.4;
  }
}

/* ブロックエディタのカラム間隔（本文限定）
   PC: 横並びの隙間は狭く / モバイル: 縦並びの隙間も詰める */
.column-single__content .wp-block-columns,
.works-single .article .wp-block-columns {
  gap: 10px !important;
  margin-bottom: 10px !important;
}
@media (max-width: 781px) {
  .column-single__content .wp-block-columns,
  .works-single .article .wp-block-columns {
    gap: 10px !important;
  }
}

/* スマホ：事例一覧の上部余白を詰める（page-contentの上padding 50pxを相殺） */
@media (max-width: 767px) {
  .works-archive { margin-top: -10px; }
  .works-archive__wrap.flex { margin-top: 0 !important; }
  .works-archive__items { margin-top: 24px !important; }
}

@media (max-width: 768px) {
  .column-single__content .eyechatch,
  .works-single__content .eyechatch {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 68.75% !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  .column-single__content .eyechatch img,
  .works-single__content .eyechatch img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* コラム一覧：カテゴリフィルタ（事例と同仕様） */
.column-archive .archive-category {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  scrollbar-width: none;
}
.column-archive .archive-category::-webkit-scrollbar { display: none; }

.column-archive .archive-category a {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 99px;
  border: 1px solid #d4ecec;
  color: #666;
  background: #fff;
  white-space: nowrap;
  text-decoration: none !important;
}
.column-archive .archive-category a:hover {
  color: #01b1ae;
  border-color: #01b1ae;
  text-decoration: none !important;
}
.column-archive .archive-category a.current {
  background: #01b1ae !important;
  border-color: #01b1ae !important;
  color: #fff !important;
  font-weight: bold;
  text-decoration: none !important;
}

.column-archive .cat-bar {
  position: relative;
  height: 4px;
  background: #eef5f5;
  border-radius: 4px;
  margin-top: 10px;
}
.column-archive .cat-bar__thumb {
  position: absolute;
  top: 0;
  height: 4px;
  background: #01b1ae;
  border-radius: 4px;
  left: 0;
  width: 30%;
}
.column-archive .cat-scroll {
  width: 100%;
  margin-bottom: 12px;
}

@media (min-width: 1025px) {
  .column-archive .archive-category {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .column-archive .cat-bar { display: none !important; }
}
.concern-box--yellow li::before {
  content: "★";
  color: #f4b400;
  font-size: 14px;   /* 大きすぎると重心が下がる。14〜15pxが収まりやすい */
  left: 4px;         /* ← 左右の位置 */
  top: 7px;          /* ← 上下の位置 */
}




/* トップ：works/column の3カードを中央に寄せる */
.top-works__items { justify-content: center !important; }

/* トップ：works・column カードのタイトルを2行省略＋日付との間隔を詰める */
.top-works__items .works-card .title,
.top-works__items .column-card .title {
  -webkit-line-clamp: 2 !important;
  min-height: 54px !important;   /* 3行分(81px)→2行分。日付が近づく */
}


/* トップ：works/column の「事例紹介」「コラム」ボタンを上に詰める */
.top-works__items { margin-bottom: 24px !important; }


/* サイト標準の本文pを15px→16pxに */
p { font-size: 17px !important;}


/* サービスセクションの説明文：15px＋行間を詰める */
.top-service__items p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}



/* ① 標準の本文p：17px＋行間を少し広げる */
p {
  font-size: 17px;
  line-height: 1.9;
  font-weight: 450;                 /* 500→400で軽く */
  -webkit-font-smoothing: antialiased;   /* Macで線が締まって見える */
  -moz-osx-font-smoothing: grayscale;
}


/* スマホ：標準の本文pは16px */
@media (max-width: 767px){
  p { font-size: 16px !important; }
}

/* ② サービスページ：ADVANTAGE・FLOW の見出しを 20px→24px */
.service-advantage__items h3,
.service-flow__items .title h3 {
  font-size: 24px !important;
	line-height: 1.58;
}

/* ③ サービスページ：ADVANTAGE・FLOW の説明文を 14px→15px */
.service-advantage__items p,
.service-flow__items .body {
  font-size: 16px !important;
}


/* トップh1：太さ（PC） */
.mv h1 { font-weight: 800 !important;
	font-size: 56px !important;
}

/* トップh1：スマホ（767px以下）も明示指定 */
@media (max-width: 767px){
  .mv h1 {
    font-weight: 800 !important;
    font-size: 40px !important; 
  }
}



/* ABOUT US「作るだけでは意味がない」を大きく */
.top-about .catchcopy { font-size: 40px !important; }

@media (max-width: 767px){
  .top-about .catchcopy { font-size: 30.5px !important; }
}



/* トップ SERVICE：左右の要素を中央に寄せて間隔を詰める */
.top-service__wrap.flex {
  justify-content: center !important;
  gap: 100px !important;   /* 左右の間隔。狭めたいので調整可 */
}



/* トップ ABOUT US：左右の要素を中央に寄せて間隔を詰める */
.top-about__wrap.flex {
  justify-content: center !important;
  gap: 100px !important;   /* 左右の間隔。調整可 */
}



/* ABOUT USラベルと見出しの間隔を広げる */
.top-about .content .sec-title-small {
  margin-bottom: 8px !important;
}



/* 会社概要の表の文字を16pxに */
.about-outline__table th,
.about-outline__table td {
  font-size: 16px;
}


/* SERVICE/ABOUT：スマホは縦並びになるので、PC用の大きいgapを小さくする */
@media (max-width: 767px){
  .top-service__wrap.flex { gap: 16px !important; }
  .top-about__wrap.flex   { gap: 16px !important; }
}

/* スマホ：コラム・事例カードのタイトルを15pxに */
@media (max-width: 767px){
  .column-card .title,
  .works-card .title { font-size: 15px !important; }
}





/* ============================================================
   トップページ：縦積み（スマホ）レイアウトを 960px まで拡張
   ・home セクション限定（ヘッダー/フッター/他ページは不変）
   ・768〜960px を ≤767px と同じ挙動にする
   ============================================================ */
@media (max-width: 960px){

  /* --- 表示切替：is-pc/is-tab を隠し、is-sp を表示（home限定） --- */
  .mv .is-tab,
  .top-about .img.is-pc,
  .top-service .catchcopy.is-pc,
  .top-service .btn.is-pc { display: none !important; }

  .top-about .content .img.is-sp { display: inline-block !important; }
  .top-about .content p .is-sp   { display: inline !important; }
  .top-service .catchcopy.is-sp  { display: block !important; }
  .top-service .btn.is-sp        { display: inline-block !important; }

  /* --- MV：縦積み（画像を下へ・中央） --- */
  .mv {
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    padding: 113px 0 48px;
  }
  .mv .inner { padding: 0 16px !important; text-align: center !important; }
  .mv h1 { font-size: 40px; }
  .mv p  { font-size: 14px; margin: 19px 0 27px; }
  .mv .btn-download {
    background: url(https://lflow.net/wp-content/themes/LFLOW-theme/img/btn-download_FV-SP.png) no-repeat center center/contain;
  }
  .mv .img {
    position: relative; top: auto; right: auto; left: auto;
    width: 100%; padding: 0 16px;
    margin: 0 auto;
  }

  /* --- ABOUT：縦積み＋間隔調整 --- */
  .top-about { text-align: center; }
  .top-about__wrap.flex {
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }
  .top-about .catchcopy { margin-bottom: 24px; }
  .top-about__wrap .content p { margin: 24px 0 32px; }

  /* --- SERVICE：縦積み＋間隔調整 --- */
  .top-service { text-align: center; }
  .top-service__wrap.flex {
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    max-width: 380px;
    margin: 0 auto;
  }
  .top-service__wrap .catchcopy { font-size: 24px; margin-bottom: 12px; }
  .top-service__items { margin-bottom: 8px; }
  .top-service__items .item { width: 100%; max-width: none; min-height: 245px; }
  .top-service__items .num { left: 24px; }

  /* --- WORKS / COLUMN：縦1列 --- */
  .top-works__items {
    flex-direction: column !important;
    gap: 24px;
    max-width: 380px;
    margin: 0 auto 24px;
  }
  .top-works__items .works-card,
  .top-works__items .column-card { width: 100% !important; max-width: none !important; }

  /* --- NEWS --- */
  .top-news__items { margin-bottom: 40px; max-width: 500px; }

  /* --- 見出しまわり --- */
  .top-title-wrap { margin-bottom: 32px; }
}


.fadeUpTrigger,
.fadeUp {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}


.contact__item .title,
.contact__item input,
.contact__item select,
.contact__item textarea,
.contact__item .wpcf7-list-item-label {
  font-size: 16px;
}

.contact__item .title.--required::before {
  content: "*";
  background: none;
  color: #01B1AE;
  padding: 0;
  border-radius: 0;
  right: -14px;
  font-size: 20px;
}

.contact__btn {
  font-size: 18px;
  font-weight: 500;
  border-radius: 999px;
}


/* ニュース記事本文：コラムとタイポグラフィを統一 */

@media (min-width: 1025px) {
  .news-single .article,
  .news-single .article p,
  .news-single .article li {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }
}
.news-single .article h2 { font-size: 24px !important; line-height: 1.5 !important; }
.news-single .article h3 { font-size: 22px !important; line-height: 1.5 !important; }
.news-single .article h2,
.news-single .article h3 { font-weight: 600 !important; }
.news-single .article h4 { font-size: 18px !important; font-weight: bold; line-height: 1.5; }
.news-single .article h1 { font-size: 30px !important; line-height: 1.6 !important; }

@media (max-width: 1024px) {
  .news-single .article h2 { font-size: 22px !important; }
  .news-single .article h3 { font-size: 20px !important; }
}

@media (max-width: 600px) {
  .news-single .article h1 { font-size: 24px !important; line-height: 1.4 !important; }
  .news-single .article h2,
  .news-single .article h3 { font-size: 22px !important; font-weight: 700 !important; line-height: 1.5 !important; }
  .news-single .article h4 { font-size: 17px !important; }
  .news-single .article p { font-size: 16px !important; line-height: 1.9 !important; }
  .news-single .article,
  .news-single .article p,
  .news-single .article li { font-weight: 300 !important; }
  .news-single .article strong,
  .news-single .article b { font-weight: 700 !important; }
}

.news-single .inner h1 {
  font-size: 30px !important;
  line-height: 1.6 !important;
}
@media (max-width: 600px) {
  .news-single .inner h1 {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }
}

/* ===================================================================
   LFLOW 共通ヘッダー / フッター（2026-08-18）
   ※このブロックに * や body へのリセットを書かないこと。
     全ページに効くため、他ページのレイアウトが壊れます。
   =================================================================== */

/* ---------- サイト全体のフォント ---------- */
body{font-family:"Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}


:root{
  --teal:#01b1ae;--teal-dark:#018583;--teal-bright:#00c9a7;--teal-pale:#b3e9e8;--teal-mist:#e6f7f6;
  --ink:#122323;--gray:#5c6a6a;--line:#e4eeee;--maxw:1280px;
}
.lftop-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- ヘッダー ---------- */
.lftop-siteheader{z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);}
.lftop-siteheader .lftop-wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
.lftop-logo{display:inline-flex;align-items:center;}
.lftop-logo-img{height:38px;width:auto;display:block;}
.lftop-nav{display:flex;align-items:center;gap:34px;font-size:15px;}
.lftop-nav .lftop-links{display:flex;gap:30px;}
.lftop-nav .lftop-links a{color:var(--ink);text-decoration:none;font-weight:500;}
.lftop-nav .lftop-links a:hover{color:var(--teal);opacity:1;}
.lftop-btn-head{background:var(--teal);color:#fff;text-decoration:none;padding:12px 24px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 6px 16px rgba(1,177,174,.28);}
.lftop-btn-head:hover{background:var(--teal-dark);color:#fff;opacity:1;}
.lftop-menu-check{display:none;}
.lftop-menu-btn{display:none;}
.lftop-sp-menu{display:none;}
.lftop-menu-ovl{display:none;}

/* ---------- ボタン（CONTACTセクション用） ---------- */
.lftop-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;border-radius:12px;padding:20px 30px;font-size:16px;line-height:1.85;transition:.22s;white-space:nowrap;}
.lftop-btn-primary{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-bright) 100%);color:#fff;box-shadow:0 14px 30px rgba(1,177,174,.34);}
.lftop-btn-primary:hover{transform:translateY(-3px);color:#fff;opacity:1;}
.lftop-btn-line{background:#fff;color:var(--teal);border:1.5px solid var(--teal);}
.lftop-btn-line:hover{border-color:var(--teal-dark);background:#e9f7f7;transform:translateY(-3px);color:var(--teal);opacity:1;}

/* ---------- CONTACT（全ページ共通） ---------- */
.lftop-contact{position:relative;overflow:hidden;background:
    radial-gradient(1000px 520px at 92% -12%, #bfeeeb 0%, transparent 58%),
    radial-gradient(860px 500px at 4% 112%, #bfeeeb 0%, transparent 58%),
    #fff;}
.lftop-contact .lftop-wrap{position:relative;z-index:2;text-align:center;padding:96px 24px;}
.lftop-contact .lftop-en{display:block;color:var(--teal);font-weight:800;font-size:12px;letter-spacing:.22em;}
.lftop-contact h2{font-size:32px;font-weight:800;margin-top:10px;color:var(--ink);line-height:1.4;}
.lftop-contact .lftop-lead{max-width:680px;margin:22px auto 0;color:var(--gray);font-size:16px;line-height:1.85;}
.lftop-contact .lftop-row{display:flex;gap:18px;justify-content:center;margin:40px auto 0;max-width:540px;}
.lftop-contact .lftop-row .lftop-btn{flex:1;padding-left:16px;padding-right:16px;}

/* ---------- フッター ---------- */
.lftop-footer{background:#0f1c1c;color:#c7d2d2;}
.lftop-footer .lftop-wrap{padding:56px 24px;display:flex;align-items:center;justify-content:space-between;gap:40px;}
.lftop-footer .lftop-flogo{height:38px;width:auto;display:block;}
.lftop-footer .lftop-fcopy{font-size:12.5px;color:#839797;margin-top:18px;line-height:1.6;}
.lftop-fnav{display:flex;align-items:center;flex-wrap:wrap;}
.lftop-fnav a{color:#c7d2d2;text-decoration:none;font-size:14px;font-weight:500;line-height:1;padding:0 22px;border-right:1px solid rgba(255,255,255,.24);}
.lftop-fnav a:first-child{padding-left:0;}
.lftop-fnav a:last-child{padding-right:0;border-right:0;}
.lftop-fnav a:hover{color:#fff;opacity:1;}

/* ---------- 1200px以下（タブレット・スマホ） ---------- */
@media(max-width:1200px){
  .lftop-wrap{padding:0 22px;}
  .lftop-nav .lftop-links{display:none;}
  /* 狭い画面（〜340px）でボタン内の文字が2行に折り返して崩れるため、
     ハンバーガーが出る幅では非表示。導線はドロワー内のCTAへ集約 */
  .lftop-btn-head{display:none;}
  .lftop-nav{gap:14px;}
  .lftop-menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:44px;height:42px;padding:0 10px;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:#fff;}
  .lftop-menu-btn span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.25s;}
  .lftop-menu-check:checked ~ .lftop-siteheader .lftop-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .lftop-menu-check:checked ~ .lftop-siteheader .lftop-menu-btn span:nth-child(2){opacity:0;}
  .lftop-menu-check:checked ~ .lftop-siteheader .lftop-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .lftop-menu-check:checked ~ .lftop-siteheader{z-index:60;}
  .lftop-menu-ovl{display:block;position:fixed;inset:0;background:rgba(12,35,33,.35);opacity:0;pointer-events:none;transition:opacity .25s;z-index:58;}
  .lftop-menu-check:checked ~ .lftop-menu-ovl{opacity:1;pointer-events:auto;}
  .lftop-sp-menu{display:block;position:fixed;top:0;right:0;bottom:0;width:min(76vw,300px);background:#fff;z-index:59;transform:translateX(105%);transition:transform .28s ease;box-shadow:-10px 0 34px rgba(6,60,58,.16);padding:92px 26px 24px;overflow-y:auto;}
  .lftop-menu-check:checked ~ .lftop-sp-menu{transform:translateX(0);}
  .lftop-sp-menu a{display:block;text-align:left;padding:15px 4px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid var(--line);}
  .lftop-sp-menu .lftop-sp-menu-cta{margin-top:22px;background:var(--teal);color:#fff;text-align:center;border-radius:10px;padding:14px;border-bottom:none;}
  .lftop-sp-menu .lftop-sp-menu-line{margin-top:10px;background:#fff;color:var(--teal);text-align:center;border:1.5px solid var(--teal);border-radius:10px;padding:12px;font-size:14px;}
  .lftop-contact .lftop-wrap{padding:64px 22px;}
  .lftop-contact h2{font-size:26px;}
  .lftop-contact .lftop-row{flex-direction:column;max-width:none;}
  .lftop-footer .lftop-wrap{flex-direction:column;align-items:flex-start;gap:26px;padding:44px 22px;}
}
@media(max-width:640px){
  .lftop-fnav a{font-size:12.5px;padding:0 12px;}
}

/* ===================================================================
   既存の p 指定への対抗
   このサイトには全ページに効く p{font-size:17px!important} があり、
   新デザインの <p> が全部17pxに上書きされてしまうため戻す。
   ※新デザインに <p> を追加したときは、ここにも1行足すこと。
   =================================================================== */
.lftop-hero .lftop-eyebrow{font-size:18px !important;}
.lftop-hero .lftop-sub{font-size:18px !important;}
.lftop-hero .lftop-disclaimer{font-size:11px !important;}
.lftop-hero .lftop-cta-note{font-size:13px !important;}
.lftop-fvform .lftop-privacy{font-size:11.5px !important;}
.lftop-results-lead{font-size:16px !important;}
.lftop-sec-head p{font-size:16px !important;}
.lftop-worry .lftop-card p{font-size:16px !important;}
.lftop-step p{font-size:14px !important;}
.lftop-midcta p{font-size:16px !important;}
.lftop-talk .lftop-note{font-size:13px !important;}
.lftop-faq details p{font-size:16px !important;}
.lftop-contact .lftop-lead{font-size:16px !important;}
.lftop-footer .lftop-fcopy{font-size:12.5px !important;}

@media(max-width:640px){
  .lftop-hero .lftop-eyebrow{font-size:14px !important;}
  .lftop-hero .lftop-sub{font-size:min(calc((100vw - 61px) / 17.3),16px) !important;}
}

/* ---------- 全ページ共通の等比拡大（JSが効かない場合の保険） ---------- */
@media(min-width:1201px) and (max-width:1399px){ body{zoom:.9;} }
@media(min-width:1600px){ body{zoom:1.2;} }

/* ============================================================
   1000〜1200px も PC レイアウトで表示する（2026-09-04）
   既存の @media(max-width:1200px) は無改変。カラム幅も PC のまま変えない。
   ============================================================ */
@media(min-width:1000px) and (max-width:1200px){
  /* ---- ヘッダー ---- */
  .lftop-nav .lftop-links{display:flex;}
  .lftop-btn-head{display:inline-block;}
  .lftop-menu-btn,.lftop-menu-ovl,.lftop-sp-menu{display:none;}

  /* ---- FV：PC と同じ配置・同じ幅・同じ余白に戻す ---- */
  .lftop-hero{min-height:720px;background:#fff url('https://lflow.net/wp-content/themes/LFLOW-theme/img/toppage/fv-back_s30.webp') no-repeat center center;background-size:cover;}
  .lftop-hero .lftop-wrap{flex-direction:row;align-items:center;justify-content:space-between;
    text-align:left;gap:16px;padding:0 24px;}
  .lftop-hero .lftop-copy{display:block;flex:1 1 auto;max-width:640px;min-width:0;
    padding:0;transform:translateY(-5px);}
  .lftop-fvform{display:block;flex:0 0 540px;}
  .lftop-hero .lftop-eyebrow,.lftop-hero h1,.lftop-hero .lftop-sub,
  .lftop-medals,.lftop-cta-row,.lftop-hero .lftop-disclaimer,.lftop-features{order:0;}
  .lftop-hero .lftop-eyebrow{margin-bottom:14px;}
  .lftop-hero h1{font-size:56px;}
  .lftop-hero .lftop-sub{margin-top:26px;max-width:none;}
  .lftop-hero .lftop-sub br{display:inline;}
  .lftop-medals{justify-content:flex-start;margin-top:31px;margin-bottom:22px;}
  .lftop-cta-row{flex-direction:row;width:auto;max-width:520px;margin-top:34px;}
  .lftop-hero .lftop-disclaimer{margin-top:12px;}
  .lftop-features{flex-wrap:nowrap;width:fit-content;justify-content:flex-start;gap:4px;margin-top:38px;}
  .lftop-fvd{display:none;}
  .lftop-fv-visual{position:absolute;top:116px;right:0;width:660px;margin:0;}

  /* ---- 余白・文字サイズは 1200px 以下の値のまま。段組みだけ戻す ---- */
  .lftop-worry .lftop-grid{grid-template-columns:repeat(3,calc((100% - 66px)/4));justify-content:center;}
  .lftop-steps{grid-template-columns:repeat(4,1fr);}
  .lftop-cardgrid{grid-template-columns:repeat(3,1fr);}
  .lftop-midcta .lftop-row,.lftop-contact .lftop-row{flex-direction:row;}
  .lftop-news .lftop-item{flex-wrap:nowrap;}
  .lftop-footer .lftop-wrap{flex-direction:row;align-items:center;}
}
/* JSが効かない場合の保険（FVのみ） */
@media(min-width:1000px) and (max-width:1200px){ .lftop-hero{zoom:.78;} }

/* CONTACTのリード文の改行はPCのみ（2026-09-04） */
.lftop-pcbr{display:inline;}
@media(max-width:999px){ .lftop-pcbr{display:none;} }

/* タブレット（768〜999px）のカード段組み（2026-09-04）
   ※「弊社のご支援内容」と「運用開始までの流れ」は同じ .lftop-steps を使っているため、
     流れの方は .lftop-flow を付けて2列に分けている。 */
@media(min-width:768px) and (max-width:999px){
  /* 導入事例・対談動画・コラム → 3列 */
  .lftop-cardgrid{grid-template-columns:repeat(3,1fr);gap:16px;}
  /* そのLINE運用、売上に繋がっていますか？ → 3列 */
  .lftop-worry .lftop-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  /* 弊社のご支援内容（4枚）・運用開始までの流れ（4枚） → どちらも2列 */
  .lftop-steps{grid-template-columns:repeat(2,1fr);gap:20px;}
}