/*!
 * theme.css — コンポーネント（セクション・見出し・ヒーロー・課題・解決方法・サービス・料金・流れ・実績・FAQ・会社概要・記事）
 * Ohashi Method 2.1.0 — 2026年11月版
 * このファイルはビルドで展開された版です。1行に1宣言、ルールごとに用途コメントを付けています。
 * 同じソースからクリティカル CSS（header.php）とアセットマニフェスト（*.asset.php）も生成されます。
 */

/* ==========================================================================
   Ohashi Method — components (Studio layout, pop / line-art skin): sections,
   selection-frame headings, hero, statement, what, problems, method loop,
   points, services, fees, flow, cases, FAQ, area, about, contact, page heads,
   cards, article overrides. Depends on the tokens in style.css.
   ========================================================================== */

/* ========================================================================
   1. Sections & waves
   ======================================================================== */

/* [1. Sections & waves] .om-section */
.om-section {
  position: relative;  /* 配置方法 */
  padding: clamp(72px, 9vw, 120px) 0;  /* 内側の余白 */
}

/* [1. Sections & waves] .om-section > .om-container */
.om-section > .om-container {
  position: relative;  /* 配置方法 */
  z-index: 2;  /* 重なり順 */
}

/* [1. Sections & waves] .om-section > .om-container > *:not(.om-deco):not(.om-wave) */
.om-section > .om-container > *:not(.om-deco):not(.om-wave) {
  position: relative;  /* 配置方法 */
  z-index: 1;  /* 重なり順 */
}

/* [1. Sections & waves] .om-section--tight */
/* バリエーション: tight */
.om-section--tight {
  padding: clamp(48px, 6vw, 80px) 0;  /* 内側の余白 */
}

/* [1. Sections & waves] .om-section--sky */
/* バリエーション: sky */
.om-section--sky {
  background: var(--om-sky);  /* 背景 */
}

/* [1. Sections & waves] .om-section--cream */
/* バリエーション: cream */
.om-section--cream {
  background: var(--om-cream);  /* 背景 */
}

/* [1. Sections & waves] .om-section--blush */
/* バリエーション: blush */
.om-section--blush {
  background: var(--om-blush);  /* 背景 */
}

/* [1. Sections & waves] .om-section--gray */
/* バリエーション: gray */
.om-section--gray {
  background: var(--om-band-gray);  /* 背景 */
}

/* [1. Sections & waves] .om-section--mint */
/* バリエーション: mint */
.om-section--mint {
  background: var(--om-mint-soft);  /* 背景 */
}

/* [1. Sections & waves] .om-section--pink */
/* バリエーション: pink */
.om-section--pink {
  background: var(--om-grad-pink);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [1. Sections & waves] .om-section--pink::before */
/* 疑似要素、バリエーション: pink */
.om-section--pink::before {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  inset: 0;  /* 上下左右の位置 */
  background-image: var(--om-pattern-dots);
  background-size: 18px 18px;
  pointer-events: none;  /* クリック可否 */
  z-index: 0;  /* 重なり順 */
}

/* [1. Sections & waves] .om-section--pink .om-section__lead */
/* バリエーション: pink */
.om-section--pink .om-section__lead,
.om-section--pink .om-section__num,
.om-section--pink .om-frame__title {
  color: #fff;  /* 文字色 */
}

/* [1. Sections & waves] .om-section--pink .om-section__num */
/* バリエーション: pink */
.om-section--pink .om-section__num {
  background: #fff;  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
}

/* [1. Sections & waves] .om-section--pink .om-frame::before */
/* 疑似要素、バリエーション: pink */
.om-section--pink .om-frame::before,
.om-section--pink .om-frame__corner {
  border-color: #fff;
}

/* [1. Sections & waves] .om-section--pink .om-frame__corner */
/* バリエーション: pink */
.om-section--pink .om-frame__corner {
  background: var(--om-accent);  /* 背景 */
}

/* [1. Sections & waves] .om-section--pink .om-frame__title.is-typing::after */
/* 疑似要素、バリエーション: pink */
.om-section--pink .om-frame__title.is-typing::after {
  background: #fff;  /* 背景 */
}

/* [1. Sections & waves] .om-section--pink .om-frame__seg.om-c-pink */
/* バリエーション: pink */
.om-section--pink .om-frame__seg.om-c-pink,
.om-section--pink .om-frame__seg.om-c-blue {
  color: var(--om-yellow);  /* 文字色 */
}

/* [1. Sections & waves] .om-section--pink .om-frame__label */
/* バリエーション: pink */
.om-section--pink .om-frame__label {
  background: #fff;  /* 背景 */
  color: var(--om-accent);  /* 文字色 */
}

/* [1. Sections & waves] .om-section--pink .om-btn--primary */
/* バリエーション: primary */
.om-section--pink .om-btn--primary {
  background: var(--om-ink);  /* 背景 */
  color: #fff;  /* 文字色 */
  border-color: var(--om-ink);
  box-shadow: 3px 3px 0 #fff;  /* 影 */
}

/* [1. Sections & waves] .om-section--pink .om-btn--primary .om-btn__arrow */
/* バリエーション: primary */
.om-section--pink .om-btn--primary .om-btn__arrow {
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [1. Sections & waves] .om-section--pink .om-btn--ghost */
/* バリエーション: ghost */
.om-section--pink .om-btn--ghost {
  box-shadow: 3px 3px 0 #fff;  /* 影 */
}

/* [1. Sections & waves] .om-section--waved */
/* バリエーション: waved */
.om-section--waved {
  padding-top: clamp(96px, 11vw, 150px);
  padding-bottom: clamp(96px, 11vw, 150px);
}

/* [1. Sections & waves] .om-wave */
.om-wave {
  position: absolute;  /* 配置方法 */
  left: 0;  /* 左端 */
  right: 0;  /* 右端 */
  height: 60px;  /* 高さ */
  line-height: 0;  /* 行間 */
  pointer-events: none;  /* クリック可否 */
  z-index: 1;  /* 重なり順 */
}

/* [1. Sections & waves] .om-wave--top */
/* バリエーション: top */
.om-wave--top {
  top: -1px;  /* 上端 */
}

/* [1. Sections & waves] .om-wave--bottom */
/* バリエーション: bottom */
.om-wave--bottom {
  bottom: -1px;  /* 下端 */
}

/* [1. Sections & waves] .om-wave__svg */
.om-wave__svg {
  display: block;  /* 表示形式 */
  width: 100%;  /* 幅 */
  height: 100%;  /* 高さ */
}

@media (max-width: 767px) {

  /* [1. Sections & waves] .om-wave */
  .om-wave {
    height: 34px;  /* 高さ */
  }
}

/* [1. Sections & waves] .om-section__head */
.om-section__head {
  max-width: 840px;  /* 最大幅 */
  margin: 0 auto clamp(36px, 5vw, 56px);  /* 外側の余白 */
  text-align: center;  /* 行揃え */
}

/* [1. Sections & waves] .om-section__head--left */
/* バリエーション: left */
.om-section__head--left {
  margin-left: 0;
  text-align: left;  /* 行揃え */
}

/* [1. Sections & waves] .om-section__head--left .om-section__num */
/* バリエーション: left */
.om-section__head--left .om-section__num {
  margin-left: 0;
}

/* [1. Sections & waves] .om-section__lead */
.om-section__lead {
  margin: 24px 0 0;  /* 外側の余白 */
  font-size: clamp(1rem, 1.6vw, 1.1rem);  /* 文字サイズ */
  font-weight: 500;  /* 太さ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [1. Sections & waves] .om-section__num */
.om-section__num {
  display: flex;  /* 表示形式 */
  width: max-content;  /* 幅 */
  max-width: 100%;  /* 最大幅 */
  justify-content: center;  /* 横の揃え */
  align-items: center;  /* 縦の揃え */
  gap: 10px;  /* 要素の間隔 */
  margin: 0 auto 18px;  /* 外側の余白 */
  padding: 6px 16px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  letter-spacing: 0.12em;  /* 字間 */
  color: var(--om-ink);  /* 文字色 */
  box-shadow: var(--om-sh-xs);  /* 影 */
}

/* [1. Sections & waves] .om-section__num::before */
/* 疑似要素 */
.om-section__num::before {
  content: "";  /* 生成内容 */
  width: 10px;  /* 幅 */
  height: 10px;  /* 高さ */
  background: var(--om-accent);  /* 背景 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
}

/* [1. Sections & waves] .om-section__num::after */
/* 疑似要素 */
.om-section__num::after {
  content: "";  /* 生成内容 */
  width: 10px;  /* 幅 */
  height: 10px;  /* 高さ */
  background: var(--om-yellow);  /* 背景 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
}

/* [1. Sections & waves] .om-section__title */
.om-section__title {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);  /* 文字サイズ */
  margin: 0;  /* 外側の余白 */
}

/* [1. Sections & waves] .om-section__foot */
.om-section__foot {
  margin-top: clamp(32px, 5vw, 48px);
  text-align: center;  /* 行揃え */
}

/* ========================================================================
   2. Selection-frame heading (typed)
   ======================================================================== */

/* [2. Selection-frame heading (typed)] .om-frame */
.om-frame {
  position: relative;  /* 配置方法 */
  display: inline-block;  /* 表示形式 */
  padding: 18px 34px;  /* 内側の余白 */
  margin: 0;  /* 外側の余白 */
}

/* [2. Selection-frame heading (typed)] .om-frame::before */
/* 疑似要素 */
.om-frame::before {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  inset: 0;  /* 上下左右の位置 */
  border: 3px solid var(--om-frame);  /* 枠線 */
  pointer-events: none;  /* クリック可否 */
}

/* [2. Selection-frame heading (typed)] .om-frame__corner */
.om-frame__corner {
  position: absolute;  /* 配置方法 */
  width: 12px;  /* 幅 */
  height: 12px;  /* 高さ */
  background: #fff;  /* 背景 */
  border: 2px solid var(--om-frame);  /* 枠線 */
}

/* [2. Selection-frame heading (typed)] .om-frame__corner--tl */
/* バリエーション: tl */
.om-frame__corner--tl {
  left: -7px;  /* 左端 */
  top: -7px;  /* 上端 */
}

/* [2. Selection-frame heading (typed)] .om-frame__corner--tr */
/* バリエーション: tr */
.om-frame__corner--tr {
  right: -7px;  /* 右端 */
  top: -7px;  /* 上端 */
}

/* [2. Selection-frame heading (typed)] .om-frame__corner--bl */
/* バリエーション: bl */
.om-frame__corner--bl {
  left: -7px;  /* 左端 */
  bottom: -7px;  /* 下端 */
}

/* [2. Selection-frame heading (typed)] .om-frame__corner--br */
/* バリエーション: br */
.om-frame__corner--br {
  right: -7px;  /* 右端 */
  bottom: -7px;  /* 下端 */
}

/* [2. Selection-frame heading (typed)] .om-frame__label */
.om-frame__label {
  position: absolute;  /* 配置方法 */
  left: 14px;  /* 左端 */
  top: -16px;  /* 上端 */
  padding: 3px 12px;  /* 内側の余白 */
  border: 2px solid var(--om-frame);  /* 枠線 */
  background: var(--om-yellow);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  font-family: var(--om-font-round);  /* 書体 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  letter-spacing: 0.08em;  /* 字間 */
  line-height: 1.6;  /* 行間 */
  white-space: nowrap;  /* 改行の扱い */
}

/* [2. Selection-frame heading (typed)] .om-frame__title */
.om-frame__title {
  margin: 0;  /* 外側の余白 */
  font-size: clamp(1.55rem, 3.6vw, 2.5rem);  /* 文字サイズ */
  line-height: 1.4;  /* 行間 */
  letter-spacing: 0.02em;  /* 字間 */
}

/* [2. Selection-frame heading (typed)] .om-frame__title .om-frame__seg */
.om-frame__title .om-frame__seg {
  display: inline;  /* 表示形式 */
}

/* [2. Selection-frame heading (typed)] .om-frame__title.is-typing::after */
/* 疑似要素 */
.om-frame__title.is-typing::after {
  content: "";  /* 生成内容 */
  display: inline-block;  /* 表示形式 */
  width: 4px;  /* 幅 */
  height: 0.95em;  /* 高さ */
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--om-frame);  /* 背景 */
  animation: om-blink 0.8s steps(1) infinite;  /* アニメーション */
}

/* [2. Selection-frame heading (typed)] .om-frame__title.is-typing .om-frame__seg > span */
.om-frame__title.is-typing .om-frame__seg > span {
  visibility: hidden;  /* 可視 */
}

/* [2. Selection-frame heading (typed)] .om-frame__title.is-typing .om-frame__seg > span.is-on */
.om-frame__title.is-typing .om-frame__seg > span.is-on {
  visibility: visible;  /* 可視 */
}

/* [2. Selection-frame heading (typed)] .om-frame--white::before */
/* 疑似要素、バリエーション: white */
.om-frame--white::before,
.om-frame--white .om-frame__corner {
  border-color: #fff;
}

/* [2. Selection-frame heading (typed)] .om-frame--white .om-frame__corner */
/* バリエーション: white */
.om-frame--white .om-frame__corner {
  background: var(--om-accent);  /* 背景 */
}

/* [2. Selection-frame heading (typed)] .om-frame--white .om-frame__title */
/* バリエーション: white */
.om-frame--white .om-frame__title {
  color: #fff;  /* 文字色 */
}

/* [2. Selection-frame heading (typed)] .om-frame--white .om-frame__label */
/* バリエーション: white */
.om-frame--white .om-frame__label {
  background: #fff;  /* 背景 */
  color: var(--om-accent);  /* 文字色 */
  border-color: #fff;
}

/* [2. Selection-frame heading (typed)] .om-frame--pink::before */
/* 疑似要素、バリエーション: pink */
.om-frame--pink::before,
.om-frame--pink .om-frame__corner {
  border-color: var(--om-accent);
}

/* [2. Selection-frame heading (typed)] .om-frame--pink .om-frame__label */
/* バリエーション: pink */
.om-frame--pink .om-frame__label {
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [2. Selection-frame heading (typed)] .om-frame--sm */
/* バリエーション: sm */
.om-frame--sm {
  padding: 12px 24px;  /* 内側の余白 */
}

/* [2. Selection-frame heading (typed)] .om-frame--sm::before */
/* 疑似要素、バリエーション: sm */
.om-frame--sm::before {
  border-width: 2px;
}

/* [2. Selection-frame heading (typed)] .om-frame--sm .om-frame__title */
/* バリエーション: sm */
.om-frame--sm .om-frame__title {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);  /* 文字サイズ */
}

@keyframes om-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@media (max-width: 480px) {

  /* [2. Selection-frame heading (typed)] .om-frame */
  .om-frame {
    padding: 14px 18px;  /* 内側の余白 */
  }

  /* [2. Selection-frame heading (typed)] .om-frame__title */
  .om-frame__title {
    font-size: 1.5rem;  /* 文字サイズ */
  }
}

/* ========================================================================
   3. Decorations
   ======================================================================== */

/* [3. Decorations] .om-deco */
.om-deco {
  position: absolute;  /* 配置方法 */
  inset: 0;  /* 上下左右の位置 */
  overflow: hidden;  /* はみ出し */
  pointer-events: none;  /* クリック可否 */
  z-index: 0;  /* 重なり順 */
}

/* [3. Decorations] .om-deco__item */
.om-deco__item {
  position: absolute;  /* 配置方法 */
  display: block;  /* 表示形式 */
  border-radius: 50%;  /* 角丸 */
  border: 2px solid var(--om-ink);  /* 枠線 */
  opacity: 0.95;  /* 不透明度 */
  animation: om-float 7s ease-in-out infinite;  /* アニメーション */
  animation-delay: calc(var(--om-deco-i, 0) * -1.1s);
}

/* [3. Decorations] .om-deco__item--c-yellow-xl */
/* バリエーション: c-yellow-xl */
.om-deco__item--c-yellow-xl {
  width: 160px;  /* 幅 */
  height: 160px;  /* 高さ */
  background: var(--om-yellow);  /* 背景 */
  border-width: 3px;
}

/* [3. Decorations] .om-deco__item--c-yellow-md */
/* バリエーション: c-yellow-md */
.om-deco__item--c-yellow-md {
  width: 60px;  /* 幅 */
  height: 60px;  /* 高さ */
  background: var(--om-yellow);  /* 背景 */
}

/* [3. Decorations] .om-deco__item--c-pink-md */
/* バリエーション: c-pink-md */
.om-deco__item--c-pink-md {
  width: 56px;  /* 幅 */
  height: 56px;  /* 高さ */
  background: var(--om-accent);  /* 背景 */
}

/* [3. Decorations] .om-deco__item--c-pink-sm */
/* バリエーション: c-pink-sm */
.om-deco__item--c-pink-sm {
  width: 20px;  /* 幅 */
  height: 20px;  /* 高さ */
  background: var(--om-accent);  /* 背景 */
}

/* [3. Decorations] .om-deco__item--c-blue-md */
/* バリエーション: c-blue-md */
.om-deco__item--c-blue-md {
  width: 50px;  /* 幅 */
  height: 50px;  /* 高さ */
  background: var(--om-navy);  /* 背景 */
}

/* [3. Decorations] .om-deco__item--c-blue-sm */
/* バリエーション: c-blue-sm */
.om-deco__item--c-blue-sm {
  width: 18px;  /* 幅 */
  height: 18px;  /* 高さ */
  background: var(--om-navy);  /* 背景 */
}

/* [3. Decorations] .om-deco__item--c-mint-sm */
/* バリエーション: c-mint-sm */
.om-deco__item--c-mint-sm {
  width: 16px;  /* 幅 */
  height: 16px;  /* 高さ */
  background: var(--om-mint);  /* 背景 */
}

/* [3. Decorations] .om-deco__item--c-mint-md */
/* バリエーション: c-mint-md */
.om-deco__item--c-mint-md {
  width: 40px;  /* 幅 */
  height: 40px;  /* 高さ */
  background: var(--om-mint);  /* 背景 */
}

/* [3. Decorations] .om-deco__item--ring */
/* バリエーション: ring */
.om-deco__item--ring {
  width: 34px;  /* 幅 */
  height: 34px;  /* 高さ */
  border: 3px solid var(--om-ink);  /* 枠線 */
  background: transparent;  /* 背景 */
}

/* [3. Decorations] .om-deco__item--dots */
/* バリエーション: dots */
.om-deco__item--dots {
  width: 72px;  /* 幅 */
  height: 72px;  /* 高さ */
  border: 0;  /* 枠線 */
  border-radius: 0;  /* 角丸 */
  background-image: var(--om-pattern-dots-ink);
  background-size: 12px 12px;
  opacity: 0.9;  /* 不透明度 */
}

/* [3. Decorations] .om-deco__item--cross */
/* バリエーション: cross */
.om-deco__item--cross {
  width: 20px;  /* 幅 */
  height: 20px;  /* 高さ */
  border: 0;  /* 枠線 */
  border-radius: 0;  /* 角丸 */
  background: linear-gradient(var(--om-ink), var(--om-ink)) center/100% 4px no-repeat, linear-gradient(var(--om-ink), var(--om-ink)) center/4px 100% no-repeat;  /* 背景 */
}

/* [3. Decorations] .om-section--pink .om-deco__item */
/* バリエーション: pink */
.om-section--pink .om-deco__item {
  border-color: #fff;
}

/* [3. Decorations] .om-section--pink .om-deco__item--ring */
/* バリエーション: ring */
.om-section--pink .om-deco__item--ring {
  border-color: #fff;
}

/* [3. Decorations] .om-section--pink .om-deco__item--cross */
/* バリエーション: cross */
.om-section--pink .om-deco__item--cross {
  background: linear-gradient(#fff, #fff) center/100% 4px no-repeat, linear-gradient(#fff, #fff) center/4px 100% no-repeat;  /* 背景 */
}

/* [3. Decorations] .om-section--pink .om-deco__item--dots */
/* バリエーション: dots */
.om-section--pink .om-deco__item--dots {
  background-image: var(--om-pattern-dots);
}

/* [3. Decorations] .om-deco__pos--l */
/* バリエーション: l */
.om-deco__pos--l {
  left: 2%;  /* 左端 */
  top: 8%;  /* 上端 */
}

/* [3. Decorations] .om-mv .om-deco__pos--l */
/* バリエーション: l */
.om-mv .om-deco__pos--l {
  left: -1.5%;  /* 左端 */
  top: 3%;  /* 上端 */
  opacity: 0.6;  /* 不透明度 */
}

/* [3. Decorations] .om-mv .om-deco__pos--l2 */
/* バリエーション: l2 */
.om-mv .om-deco__pos--l2 {
  left: 0.5%;  /* 左端 */
  top: 95%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--l2 */
/* バリエーション: l2 */
.om-deco__pos--l2 {
  left: 3%;  /* 左端 */
  top: 78%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--l3 */
/* バリエーション: l3 */
.om-deco__pos--l3 {
  left: 1%;  /* 左端 */
  top: 46%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--l4 */
/* バリエーション: l4 */
.om-deco__pos--l4 {
  left: 6%;  /* 左端 */
  top: 92%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--r */
/* バリエーション: r */
.om-deco__pos--r {
  right: 5%;  /* 右端 */
  top: 14%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--r2 */
/* バリエーション: r2 */
.om-deco__pos--r2 {
  right: 10%;  /* 右端 */
  top: 58%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--r3 */
/* バリエーション: r3 */
.om-deco__pos--r3 {
  right: 3%;  /* 右端 */
  top: 80%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--r4 */
/* バリエーション: r4 */
.om-deco__pos--r4 {
  right: 2%;  /* 右端 */
  top: 36%;  /* 上端 */
}

/* [3. Decorations] .om-deco__pos--r5 */
/* バリエーション: r5 */
.om-deco__pos--r5 {
  right: 6%;  /* 右端 */
  top: 70%;  /* 上端 */
}

@keyframes om-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (max-width: 767px) {

  /* [3. Decorations] .om-deco__item--c-yellow-xl */
  /* バリエーション: c-yellow-xl */
  .om-deco__item--c-yellow-xl {
    width: 96px;  /* 幅 */
    height: 96px;  /* 高さ */
  }

  /* [3. Decorations] .om-deco__item--c-pink-md */
  /* バリエーション: c-pink-md */
  .om-deco__item--c-pink-md,
  .om-deco__item--c-blue-md,
  .om-deco__item--c-yellow-md {
    width: 32px;  /* 幅 */
    height: 32px;  /* 高さ */
  }
}

/* ========================================================================
   4. Mascots, bubbles
   ======================================================================== */

/* [4. Mascots, bubbles] .om-kobito */
.om-kobito {
  display: block;  /* 表示形式 */
  width: 100%;  /* 幅 */
  height: auto;  /* 高さ */
}

/* [4. Mascots, bubbles] .om-kobito-wrap */
.om-kobito-wrap {
  display: inline-block;  /* 表示形式 */
  width: 110px;  /* 幅 */
  animation: om-bob 3.6s ease-in-out infinite;  /* アニメーション */
}

/* [4. Mascots, bubbles] .om-kobito-wrap--sm */
/* バリエーション: sm */
.om-kobito-wrap--sm {
  width: 72px;  /* 幅 */
}

/* [4. Mascots, bubbles] .om-kobito-wrap--lg */
/* バリエーション: lg */
.om-kobito-wrap--lg {
  width: 150px;  /* 幅 */
}

/* [4. Mascots, bubbles] .om-kobito-wrap:nth-child(2n) */
.om-kobito-wrap:nth-child(2n) {
  animation-delay: -1.2s;
}

/* [4. Mascots, bubbles] .om-kobito-wrap:nth-child(3n) */
.om-kobito-wrap:nth-child(3n) {
  animation-delay: -2.1s;
}

@keyframes om-bob {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

/* [4. Mascots, bubbles] .om-kobito-row */
.om-kobito-row {
  display: flex;  /* 表示形式 */
  justify-content: center;  /* 横の揃え */
  align-items: flex-end;  /* 縦の揃え */
  gap: 10px;  /* 要素の間隔 */
  margin-top: 32px;
}

/* [4. Mascots, bubbles] .om-bubble */
.om-bubble {
  display: inline-block;  /* 表示形式 */
  position: relative;  /* 配置方法 */
  padding: 10px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  line-height: 1.5;  /* 行間 */
  box-shadow: var(--om-sh-sm);  /* 影 */
  white-space: nowrap;  /* 改行の扱い */
}

/* [4. Mascots, bubbles] .om-bubble::after */
/* 疑似要素 */
.om-bubble::after {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 22px;  /* 左端 */
  bottom: -9px;  /* 下端 */
  width: 14px;  /* 幅 */
  height: 14px;  /* 高さ */
  background: inherit;  /* 背景 */
  border-right: var(--om-line);
  border-bottom: var(--om-line);
  transform: rotate(45deg);  /* 変形 */
}

/* [4. Mascots, bubbles] .om-bubble--blue */
/* バリエーション: blue */
.om-bubble--blue {
  background: var(--om-navy);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [4. Mascots, bubbles] .om-bubble--pink */
/* バリエーション: pink */
.om-bubble--pink {
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [4. Mascots, bubbles] .om-bubble--yellow */
/* バリエーション: yellow */
.om-bubble--yellow {
  background: var(--om-yellow);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
}

/* [4. Mascots, bubbles] .om-bubble--mint */
/* バリエーション: mint */
.om-bubble--mint {
  background: var(--om-mint);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [4. Mascots, bubbles] .om-bubble--paper */
/* バリエーション: paper */
.om-bubble--paper {
  background: #fff;  /* 背景 */
}

/* [4. Mascots, bubbles] .om-bubble--tail-right::after */
/* 疑似要素、バリエーション: tail-right */
.om-bubble--tail-right::after {
  left: auto;  /* 左端 */
  right: 22px;  /* 右端 */
}

/* [4. Mascots, bubbles] .om-bubble--tail-top::after */
/* 疑似要素、バリエーション: tail-top */
.om-bubble--tail-top::after {
  bottom: auto;  /* 下端 */
  top: -9px;  /* 上端 */
  border: 0;  /* 枠線 */
  border-left: var(--om-line);
  border-top: var(--om-line);
}

/* ========================================================================
   5. Hero (MV)
   ======================================================================== */

/* [5. Hero (MV)] .om-mv */
.om-mv {
  position: relative;  /* 配置方法 */
  overflow: hidden;  /* はみ出し */
  isolation: isolate;
  padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 7vw, 100px);  /* 内側の余白 */
  background: #fff;  /* 背景 */
}

/* [5. Hero (MV)] .om-mv::before */
/* 疑似要素 */
.om-mv::before {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  inset: 0;  /* 上下左右の位置 */
  background-image: var(--om-pattern-dots-ink);
  background-size: 22px 22px;
  opacity: 0.45;  /* 不透明度 */
  pointer-events: none;  /* クリック可否 */
  z-index: 0;  /* 重なり順 */
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* [5. Hero (MV)] .om-mv::after */
/* 疑似要素 */
.om-mv::after {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 0;  /* 左端 */
  right: 0;  /* 右端 */
  bottom: 0;  /* 下端 */
  height: 6px;  /* 高さ */
  background: var(--om-ink);  /* 背景 */
  z-index: 1;  /* 重なり順 */
}

/* [5. Hero (MV)] .om-mv__grid */
.om-mv__grid {
  position: relative;  /* 配置方法 */
  z-index: 2;  /* 重なり順 */
  display: grid;  /* 表示形式 */
  grid-template-columns: minmax(0, 1fr);  /* グリッドの列 */
  gap: 36px;  /* 要素の間隔 */
  align-items: center;  /* 縦の揃え */
}

@media (min-width: 1024px) {

  /* [5. Hero (MV)] .om-mv__grid */
  .om-mv__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);  /* グリッドの列 */
    gap: 36px;  /* 要素の間隔 */
  }
}

/* [5. Hero (MV)] .om-mv__eyebrow */
.om-mv__eyebrow {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 8px;  /* 要素の間隔 */
  padding: 6px 16px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: var(--om-yellow);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  margin-bottom: 22px;
  box-shadow: var(--om-sh-xs);  /* 影 */
  animation: om-pop 0.6s var(--om-m-spring) both;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__eyebrow .om-ico */
.om-mv__eyebrow .om-ico {
  width: 16px;  /* 幅 */
  height: 16px;  /* 高さ */
}

/* [5. Hero (MV)] .om-mv__title */
.om-mv__title {
  margin: 0 0 22px;  /* 外側の余白 */
  font-size: clamp(1.7rem, 2.75vw, 2.6rem);  /* 文字サイズ */
  line-height: 1.25;  /* 行間 */
  letter-spacing: 0.01em;  /* 字間 */
}

/* [5. Hero (MV)] .om-mv__title .om-mv__line */
.om-mv__title .om-mv__line {
  display: inline-block;  /* 表示形式 */
  margin: 0 0 12px;  /* 外側の余白 */
  padding: 0.12em 0.5em 0.14em;  /* 内側の余白 */
  border: 3px solid var(--om-ink);  /* 枠線 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-md);  /* 影 */
  animation: om-pop 0.7s var(--om-m-spring) both;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__title .om-mv__line:nth-child(2) */
.om-mv__title .om-mv__line:nth-child(2) {
  animation-delay: 0.12s;
  margin-left: 0.6em;
}

/* [5. Hero (MV)] .om-mv__title .om-mv__line--blue */
/* バリエーション: blue */
.om-mv__title .om-mv__line--blue {
  color: var(--om-navy-deep);  /* 文字色 */
  background: #fff;  /* 背景 */
}

/* [5. Hero (MV)] .om-mv__title .om-mv__line--blue::first-letter */
/* バリエーション: blue */
.om-mv__title .om-mv__line--blue::first-letter {
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [5. Hero (MV)] .om-mv__title.is-typing .om-mv__line > span */
.om-mv__title.is-typing .om-mv__line > span {
  visibility: hidden;  /* 可視 */
}

/* [5. Hero (MV)] .om-mv__title.is-typing .om-mv__line > span.is-on */
.om-mv__title.is-typing .om-mv__line > span.is-on {
  visibility: visible;  /* 可視 */
}

/* [5. Hero (MV)] .om-mv__title.is-typing .om-mv__line.is-active::after */
/* 疑似要素 */
.om-mv__title.is-typing .om-mv__line.is-active::after {
  content: "";  /* 生成内容 */
  display: inline-block;  /* 表示形式 */
  width: 4px;  /* 幅 */
  height: 0.9em;  /* 高さ */
  margin-left: 4px;
  vertical-align: -0.1em;
  background: var(--om-accent);  /* 背景 */
  animation: om-blink 0.8s steps(1) infinite;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__sub */
.om-mv__sub {
  margin: 0 0 16px;  /* 外側の余白 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);  /* 文字サイズ */
  line-height: 1.7;  /* 行間 */
  animation: om-pop 0.7s 0.25s var(--om-m-spring) both;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__text */
.om-mv__text {
  margin: 0 0 28px;  /* 外側の余白 */
  max-width: 560px;  /* 最大幅 */
  color: var(--om-ink-soft);  /* 文字色 */
  animation: om-pop 0.7s 0.32s var(--om-m-spring) both;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__copy .om-actions */
.om-mv__copy .om-actions {
  animation: om-pop 0.7s 0.4s var(--om-m-spring) both;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__trust */
.om-mv__trust {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 8px 18px;  /* 要素の間隔 */
  margin: 20px 0 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  color: var(--om-ink);  /* 文字色 */
}

/* [5. Hero (MV)] .om-mv__trust li */
.om-mv__trust li {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
}

/* [5. Hero (MV)] .om-mv__trust .om-ico */
.om-mv__trust .om-ico {
  width: 18px;  /* 幅 */
  height: 18px;  /* 高さ */
  padding: 2px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-mint);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [5. Hero (MV)] .om-mv__scene */
.om-mv__scene {
  position: relative;  /* 配置方法 */
  width: min(100%, 640px);  /* 幅 */
  margin-inline: auto;
  animation: om-pop 0.8s 0.2s var(--om-m-spring) both;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__scene .om-illust--hero */
/* バリエーション: hero */
.om-mv__scene .om-illust--hero {
  display: block;  /* 表示形式 */
  width: 100%;  /* 幅 */
}

/* [5. Hero (MV)] .om-mv__bubble */
.om-mv__bubble {
  position: absolute;  /* 配置方法 */
  z-index: 3;  /* 重なり順 */
  animation: om-bob 4s ease-in-out infinite;  /* アニメーション */
}

/* [5. Hero (MV)] .om-mv__bubble--1 */
/* バリエーション: 1 */
.om-mv__bubble--1 {
  left: 2%;  /* 左端 */
  top: 30%;  /* 上端 */
  animation-delay: -0.6s;
}

/* [5. Hero (MV)] .om-mv__bubble--2 */
/* バリエーション: 2 */
.om-mv__bubble--2 {
  right: 0;  /* 右端 */
  top: 46%;  /* 上端 */
  animation-delay: -1.8s;
}

/* [5. Hero (MV)] .om-mv__bubble--3 */
/* バリエーション: 3 */
.om-mv__bubble--3 {
  left: 28%;  /* 左端 */
  bottom: 4%;  /* 下端 */
  animation-delay: -2.6s;
}

/* [5. Hero (MV)] .om-mv__hand */
.om-mv__hand {
  position: absolute;  /* 配置方法 */
  left: 62%;  /* 左端 */
  top: 27%;  /* 上端 */
  width: 7%;  /* 幅 */
  transform-origin: 70% 90%;
  animation: om-wave-hand 2.6s ease-in-out infinite;  /* アニメーション */
}

@keyframes om-wave-hand {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(18deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(14deg);
  }
  80% {
    transform: rotate(-4deg);
  }
}

@keyframes om-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* [5. Hero (MV)] .om-mv__kobito */
.om-mv__kobito {
  position: absolute;  /* 配置方法 */
  z-index: 3;  /* 重なり順 */
  width: 11%;  /* 幅 */
}

/* [5. Hero (MV)] .om-mv__kobito--1 */
/* バリエーション: 1 */
.om-mv__kobito--1 {
  left: -2%;  /* 左端 */
  bottom: 10%;  /* 下端 */
}

/* [5. Hero (MV)] .om-mv__kobito--2 */
/* バリエーション: 2 */
.om-mv__kobito--2 {
  right: 3%;  /* 右端 */
  top: 10%;  /* 上端 */
}

/* [5. Hero (MV)] .om-mv__kobito--3 */
/* バリエーション: 3 */
.om-mv__kobito--3 {
  right: 14%;  /* 右端 */
  bottom: 2%;  /* 下端 */
  width: 9%;  /* 幅 */
}

/* [5. Hero (MV)] .om-mv__by */
.om-mv__by {
  position: absolute;  /* 配置方法 */
  right: 2%;  /* 右端 */
  top: 4%;  /* 上端 */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
  padding: 6px 14px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-xs);  /* 影 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-ink);  /* 文字色 */
  z-index: 3;  /* 重なり順 */
}

/* [5. Hero (MV)] .om-mv__by .om-ico */
.om-mv__by .om-ico {
  color: var(--om-yellow-deep);  /* 文字色 */
  fill: var(--om-yellow);
}

/* [5. Hero (MV)] .om-mv__scroll */
.om-mv__scroll {
  position: absolute;  /* 配置方法 */
  left: 50%;  /* 左端 */
  bottom: 16px;  /* 下端 */
  transform: translateX(-50%);  /* 変形 */
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  align-items: center;  /* 縦の揃え */
  gap: 4px;  /* 要素の間隔 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 10px;  /* 文字サイズ */
  letter-spacing: 0.3em;  /* 字間 */
  color: var(--om-ink);  /* 文字色 */
  z-index: 3;  /* 重なり順 */
}

/* [5. Hero (MV)] .om-mv__scroll::after */
/* 疑似要素 */
.om-mv__scroll::after {
  content: "";  /* 生成内容 */
  width: 3px;  /* 幅 */
  height: 26px;  /* 高さ */
  background: var(--om-ink);  /* 背景 */
  animation: om-scroll 1.6s ease-in-out infinite;  /* アニメーション */
}

@keyframes om-scroll {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@media (max-width: 1023px) {

  /* [5. Hero (MV)] .om-mv__scroll */
  .om-mv__scroll {
    display: none;  /* 表示形式 */
  }

  /* [5. Hero (MV)] .om-mv__text */
  .om-mv__text {
    max-width: none;  /* 最大幅 */
  }
}

@media (max-width: 640px) {

  /* [5. Hero (MV)] .om-mv__title */
  .om-mv__title {
    font-size: clamp(1.35rem, 5.6vw, 1.7rem);  /* 文字サイズ */
  }

  /* [5. Hero (MV)] .om-mv__title .om-mv__line */
  .om-mv__title .om-mv__line {
    border-width: 2px;
    box-shadow: var(--om-sh-sm);  /* 影 */
    margin-bottom: 10px;
    padding-inline: 0.4em;
  }

  /* [5. Hero (MV)] .om-mv__title .om-mv__line:nth-child(2) */
  .om-mv__title .om-mv__line:nth-child(2) {
    margin-left: 0;
  }

  /* [5. Hero (MV)] .om-mv__scene */
  .om-mv__scene {
    width: 100%;  /* 幅 */
  }

  /* [5. Hero (MV)] .om-mv__bubble */
  .om-mv__bubble {
    font-size: 11px;  /* 文字サイズ */
    padding: 6px 10px;  /* 内側の余白 */
  }

  /* [5. Hero (MV)] .om-mv__bubble::after */
  /* 疑似要素 */
  .om-mv__bubble::after {
    width: 10px;  /* 幅 */
    height: 10px;  /* 高さ */
    bottom: -7px;  /* 下端 */
    left: 16px;  /* 左端 */
  }

  /* [5. Hero (MV)] .om-mv__bubble--1 */
  /* バリエーション: 1 */
  .om-mv__bubble--1 {
    left: 0;  /* 左端 */
    top: 18%;  /* 上端 */
  }

  /* [5. Hero (MV)] .om-mv__bubble--2 */
  /* バリエーション: 2 */
  .om-mv__bubble--2 {
    right: 0;  /* 右端 */
    top: 60%;  /* 上端 */
  }

  /* [5. Hero (MV)] .om-mv__bubble--3 */
  /* バリエーション: 3 */
  .om-mv__bubble--3 {
    left: 34%;  /* 左端 */
    bottom: -3%;  /* 下端 */
  }

  /* [5. Hero (MV)] .om-mv__by */
  .om-mv__by {
    font-size: 10px;  /* 文字サイズ */
    padding: 4px 10px;  /* 内側の余白 */
    top: 0;  /* 上端 */
  }

  /* [5. Hero (MV)] .om-mv__kobito--2 */
  /* バリエーション: 2 */
  .om-mv__kobito--2 {
    top: 16%;  /* 上端 */
  }
}

@media (max-width: 767px) {

  /* [5. Hero (MV)] .om-mv__bubble */
  .om-mv__bubble {
    font-size: var(--om-fs-xs);  /* 文字サイズ */
    padding: 7px 12px;  /* 内側の余白 */
  }

  /* [5. Hero (MV)] .om-mv__by */
  .om-mv__by {
    font-size: 10px;  /* 文字サイズ */
  }
}
/* features under the hero */

/* [5. Hero (MV)] .om-features */
.om-features {
  position: relative;  /* 配置方法 */
  z-index: 2;  /* 重なり順 */
  display: grid;  /* 表示形式 */
  gap: 22px;  /* 要素の間隔 */
  margin-top: clamp(36px, 5vw, 56px);
}

@media (min-width: 768px) {

  /* [5. Hero (MV)] .om-features */
  .om-features {
    grid-template-columns: repeat(3, 1fr);  /* グリッドの列 */
  }
}

/* [5. Hero (MV)] .om-feature */
.om-feature {
  position: relative;  /* 配置方法 */
  padding: 30px 26px 26px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-md);  /* 影 */
  transition: transform var(--om-m-fast) ease-out, box-shadow var(--om-m-fast) ease-out;  /* 変化のアニメーション */
}

/* [5. Hero (MV)] .om-feature:hover */
/* ホバー時 */
.om-feature:hover {
  transform: translate(2px, 2px);  /* 変形 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [5. Hero (MV)] .om-feature__icon */
.om-feature__icon {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 60px;  /* 幅 */
  height: 60px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  margin-bottom: 16px;
  color: var(--om-ink);  /* 文字色 */
}

/* [5. Hero (MV)] .om-feature__icon .om-ico */
.om-feature__icon .om-ico {
  width: 28px;  /* 幅 */
  height: 28px;  /* 高さ */
}

/* [5. Hero (MV)] .om-feature:nth-child(1) .om-feature__icon */
.om-feature:nth-child(1) .om-feature__icon {
  background: var(--om-navy-soft);  /* 背景 */
}

/* [5. Hero (MV)] .om-feature:nth-child(2) .om-feature__icon */
.om-feature:nth-child(2) .om-feature__icon {
  background: var(--om-accent-soft);  /* 背景 */
}

/* [5. Hero (MV)] .om-feature:nth-child(3) .om-feature__icon */
.om-feature:nth-child(3) .om-feature__icon {
  background: var(--om-yellow);  /* 背景 */
}

/* [5. Hero (MV)] .om-feature__num */
.om-feature__num {
  position: absolute;  /* 配置方法 */
  right: -2px;  /* 右端 */
  top: -2px;  /* 上端 */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  min-width: 48px;
  height: 32px;  /* 高さ */
  padding: 0 10px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: 0 var(--om-r-xl) 0 var(--om-r-lg);  /* 角丸 */
  background: var(--om-ink);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  letter-spacing: 0.1em;  /* 字間 */
}

/* [5. Hero (MV)] .om-feature__title */
.om-feature__title {
  margin: 0 0 8px;  /* 外側の余白 */
  font-size: 1.2rem;  /* 文字サイズ */
}

/* [5. Hero (MV)] .om-feature__text */
.om-feature__text {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* ========================================================================
   6. Statement ("らしさ" block)
   ======================================================================== */

/* [6. Statement ("らしさ" block)] .om-statement */
.om-statement {
  position: relative;  /* 配置方法 */
  overflow: hidden;  /* はみ出し */
  text-align: center;  /* 行揃え */
}

/* [6. Statement ("らしさ" block)] .om-statement__inner */
.om-statement__inner {
  position: relative;  /* 配置方法 */
  z-index: 2;  /* 重なり順 */
  max-width: 880px;  /* 最大幅 */
  margin: 0 auto;  /* 外側の余白 */
}

/* [6. Statement ("らしさ" block)] .om-statement__title */
.om-statement__title {
  margin: 0 0 28px;  /* 外側の余白 */
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);  /* 文字サイズ */
  line-height: 1.5;  /* 行間 */
}

/* [6. Statement ("らしさ" block)] .om-statement__title .om-quote */
.om-statement__title .om-quote {
  position: relative;  /* 配置方法 */
  display: inline-block;  /* 表示形式 */
  padding: 0 0.1em;  /* 内側の余白 */
  color: var(--om-ink);  /* 文字色 */
}

/* [6. Statement ("らしさ" block)] .om-statement__title .om-quote::after */
/* 疑似要素 */
.om-statement__title .om-quote::after {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 0;  /* 左端 */
  right: 0;  /* 右端 */
  bottom: 0.1em;  /* 下端 */
  height: 0.42em;  /* 高さ */
  background: var(--om-yellow);  /* 背景 */
  z-index: -1;  /* 重なり順 */
}

/* [6. Statement ("らしさ" block)] .om-statement__text */
.om-statement__text {
  margin: 0 auto;  /* 外側の余白 */
  max-width: 720px;  /* 最大幅 */
  font-size: clamp(1rem, 1.6vw, 1.1rem);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [6. Statement ("らしさ" block)] .om-statement__cursor */
.om-statement__cursor {
  position: absolute;  /* 配置方法 */
  width: 36px;  /* 幅 */
  z-index: 1;  /* 重なり順 */
  color: var(--om-accent);  /* 文字色 */
  animation: om-bob 5s ease-in-out infinite;  /* アニメーション */
}

/* [6. Statement ("らしさ" block)] .om-statement__cursor--1 */
/* バリエーション: 1 */
.om-statement__cursor--1 {
  left: 6%;  /* 左端 */
  top: 18%;  /* 上端 */
}

/* [6. Statement ("らしさ" block)] .om-statement__cursor--2 */
/* バリエーション: 2 */
.om-statement__cursor--2 {
  right: 8%;  /* 右端 */
  bottom: 22%;  /* 下端 */
  animation-delay: -2.2s;
}

/* [6. Statement ("らしさ" block)] .om-statement--last .om-statement__title */
/* バリエーション: last */
.om-statement--last .om-statement__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);  /* 文字サイズ */
}

/* ========================================================================
   7. "What is it" section
   ======================================================================== */

/* [7. "What is it" section] .om-what__intro */
.om-what__intro {
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  gap: 14px;  /* 要素の間隔 */
  margin-bottom: 28px;
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);  /* 文字サイズ */
  color: #fff;  /* 文字色 */
}

/* [7. "What is it" section] .om-what__intro::before */
/* 疑似要素 */
.om-what__intro::before,
.om-what__intro::after {
  content: "";  /* 生成内容 */
  width: 38px;  /* 幅 */
  height: 4px;  /* 高さ */
  background: #fff;  /* 背景 */
}

/* [7. "What is it" section] .om-what__intro .om-what__q */
.om-what__intro .om-what__q {
  color: var(--om-yellow);  /* 文字色 */
  font-size: 1.3em;  /* 文字サイズ */
}

/* [7. "What is it" section] .om-what__intro .om-what__text */
.om-what__intro .om-what__text {
  white-space: nowrap;  /* 改行の扱い */
}

@media (max-width: 480px) {

  /* [7. "What is it" section] .om-what__intro */
  .om-what__intro {
    gap: 8px;  /* 要素の間隔 */
    font-size: 1.15rem;  /* 文字サイズ */
  }

  /* [7. "What is it" section] .om-what__intro::before */
  /* 疑似要素 */
  .om-what__intro::before,
  .om-what__intro::after {
    width: 18px;  /* 幅 */
    flex: none;  /* 伸縮 */
  }
}

/* [7. "What is it" section] .om-what__grid */
.om-what__grid {
  display: grid;  /* 表示形式 */
  gap: 32px;  /* 要素の間隔 */
  align-items: center;  /* 縦の揃え */
  padding: clamp(24px, 4vw, 44px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-2xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

@media (min-width: 900px) {

  /* [7. "What is it" section] .om-what__grid */
  .om-what__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);  /* グリッドの列 */
  }
}

/* [7. "What is it" section] .om-what__fig */
.om-what__fig {
  max-width: 400px;  /* 最大幅 */
  margin-inline: auto;
}

/* [7. "What is it" section] .om-what__body */
.om-what__body {
  text-align: center;  /* 行揃え */
}

@media (min-width: 900px) {

  /* [7. "What is it" section] .om-what__body */
  .om-what__body {
    text-align: left;  /* 行揃え */
  }
}

/* [7. "What is it" section] .om-what__body .om-frame */
.om-what__body .om-frame {
  padding: 12px 22px;  /* 内側の余白 */
}

/* [7. "What is it" section] .om-what__body .om-frame::before */
/* 疑似要素 */
.om-what__body .om-frame::before {
  border-width: 2px;
  border-color: var(--om-ink);
}

/* [7. "What is it" section] .om-what__body .om-frame__corner */
.om-what__body .om-frame__corner {
  border-color: var(--om-ink);
  background: #fff;  /* 背景 */
}

/* [7. "What is it" section] .om-what__body .om-frame__title */
.om-what__body .om-frame__title {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);  /* 文字サイズ */
  color: var(--om-ink);  /* 文字色 */
}

/* [7. "What is it" section] .om-what__body .om-frame__title.is-typing::after */
/* 疑似要素 */
.om-what__body .om-frame__title.is-typing::after {
  background: var(--om-ink);  /* 背景 */
}

/* [7. "What is it" section] .om-what__body .om-frame__seg.om-c-pink */
.om-what__body .om-frame__seg.om-c-pink {
  color: var(--om-accent);  /* 文字色 */
}

/* [7. "What is it" section] .om-what__text */
.om-what__text {
  margin: 22px 0 0;  /* 外側の余白 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [7. "What is it" section] .om-what__points */
.om-what__points {
  display: grid;  /* 表示形式 */
  gap: 12px;  /* 要素の間隔 */
  margin: 26px 0 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  text-align: left;  /* 行揃え */
}

/* [7. "What is it" section] .om-what__point */
.om-what__point {
  display: flex;  /* 表示形式 */
  gap: 14px;  /* 要素の間隔 */
  align-items: flex-start;  /* 縦の揃え */
  padding: 14px 16px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
}

/* [7. "What is it" section] .om-what__point-num */
.om-what__point-num {
  flex: 0 0 auto;  /* 伸縮 */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 36px;  /* 幅 */
  height: 36px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [7. "What is it" section] .om-what__point-title */
.om-what__point-title {
  margin: 0 0 2px;  /* 外側の余白 */
  font-size: 1.05rem;  /* 文字サイズ */
}

/* [7. "What is it" section] .om-what__point-text */
.om-what__point-text {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* ========================================================================
   8. Problems (5)
   ======================================================================== */

/* [8. Problems (5)] .om-problems */
.om-problems {
  display: grid;  /* 表示形式 */
  gap: 22px;  /* 要素の間隔 */
}

@media (min-width: 640px) {

  /* [8. Problems (5)] .om-problems */
  .om-problems {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

@media (min-width: 1024px) {

  /* [8. Problems (5)] .om-problems */
  .om-problems {
    grid-template-columns: repeat(5, 1fr);  /* グリッドの列 */
    gap: 16px;  /* 要素の間隔 */
  }
}

/* [8. Problems (5)] .om-problem */
.om-problem {
  position: relative;  /* 配置方法 */
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  align-items: center;  /* 縦の揃え */
  text-align: center;  /* 行揃え */
  padding: 28px 16px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-md);  /* 影 */
}

/* [8. Problems (5)] .om-problem__num */
.om-problem__num {
  position: absolute;  /* 配置方法 */
  left: -2px;  /* 左端 */
  top: -2px;  /* 上端 */
  padding: 2px 12px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl) 0 var(--om-r-lg) 0;  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  letter-spacing: 0.1em;  /* 字間 */
}

/* [8. Problems (5)] .om-problem__fig */
.om-problem__fig {
  width: 116px;  /* 幅 */
  margin-bottom: 10px;
}

/* [8. Problems (5)] .om-problem__title */
.om-problem__title {
  margin: 0 0 8px;  /* 外側の余白 */
  font-size: 1.1rem;  /* 文字サイズ */
}

/* [8. Problems (5)] .om-problem__text */
.om-problem__text {
  margin: 0 0 14px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [8. Problems (5)] .om-problem__voice */
.om-problem__voice {
  margin-top: auto;
  padding: 8px 12px;  /* 内側の余白 */
  border: 1.5px dashed var(--om-accent);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: var(--om-accent-soft);  /* 背景 */
  color: var(--om-accent-deep);  /* 文字色 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [8. Problems (5)] .om-problem__voice::before */
/* 疑似要素 */
.om-problem__voice::before {
  content: "「";  /* 生成内容 */
}

/* [8. Problems (5)] .om-problem__voice::after */
/* 疑似要素 */
.om-problem__voice::after {
  content: "」";  /* 生成内容 */
}

/* [8. Problems (5)] .om-problems__kobito */
.om-problems__kobito {
  display: flex;  /* 表示形式 */
  justify-content: center;  /* 横の揃え */
  margin-top: 28px;
}

/* ========================================================================
   9. Method loop (解決方法)
   ======================================================================== */

/* [9. Method loop (解決方法)] .om-loop */
.om-loop {
  position: relative;  /* 配置方法 */
  display: grid;  /* 表示形式 */
  gap: 18px;  /* 要素の間隔 */
  counter-reset: om-loop;
}

@media (min-width: 768px) {

  /* [9. Method loop (解決方法)] .om-loop */
  .om-loop {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

@media (min-width: 1100px) {

  /* [9. Method loop (解決方法)] .om-loop */
  .om-loop {
    grid-template-columns: repeat(4, 1fr);  /* グリッドの列 */
  }
}

/* [9. Method loop (解決方法)] .om-loop__item */
.om-loop__item {
  position: relative;  /* 配置方法 */
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  padding: 22px 20px 20px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [9. Method loop (解決方法)] .om-loop__item--client */
/* バリエーション: client */
.om-loop__item--client {
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [9. Method loop (解決方法)] .om-loop__item--repeat */
/* バリエーション: repeat */
.om-loop__item--repeat {
  box-shadow: var(--om-sh-pink);  /* 影 */
}

/* [9. Method loop (解決方法)] .om-loop__num */
.om-loop__num {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 40px;  /* 幅 */
  height: 40px;  /* 高さ */
  margin-bottom: 12px;
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-navy);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
}

/* [9. Method loop (解決方法)] .om-loop__item--client .om-loop__num */
/* バリエーション: client */
.om-loop__item--client .om-loop__num {
  background: var(--om-yellow);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
}

/* [9. Method loop (解決方法)] .om-loop__role */
.om-loop__role {
  display: inline-block;  /* 表示形式 */
  margin-bottom: 8px;
  padding: 2px 10px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  background: var(--om-navy-soft);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
}

/* [9. Method loop (解決方法)] .om-loop__item--client .om-loop__role */
/* バリエーション: client */
.om-loop__item--client .om-loop__role {
  background: #fff;  /* 背景 */
}

/* [9. Method loop (解決方法)] .om-loop__title */
.om-loop__title {
  margin: 0 0 8px;  /* 外側の余白 */
  font-size: 1.05rem;  /* 文字サイズ */
  line-height: 1.45;  /* 行間 */
}

/* [9. Method loop (解決方法)] .om-loop__text */
.om-loop__text {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [9. Method loop (解決方法)] .om-loop__arrow */
.om-loop__arrow {
  position: absolute;  /* 配置方法 */
  right: -16px;  /* 右端 */
  top: 26px;  /* 上端 */
  width: 30px;  /* 幅 */
  height: 30px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  display: none;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  z-index: 2;  /* 重なり順 */
}

/* [9. Method loop (解決方法)] .om-loop__arrow .om-ico */
.om-loop__arrow .om-ico {
  width: 16px;  /* 幅 */
  height: 16px;  /* 高さ */
}

@media (min-width: 1100px) {

  /* [9. Method loop (解決方法)] .om-loop__item:not(:nth-child(4n)) .om-loop__arrow */
  .om-loop__item:not(:nth-child(4n)) .om-loop__arrow {
    display: inline-flex;  /* 表示形式 */
  }
}

/* [9. Method loop (解決方法)] .om-loop__return */
.om-loop__return {
  grid-column: 1 / -1;
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  gap: 12px;  /* 要素の間隔 */
  padding: 14px 20px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
  text-align: center;  /* 行揃え */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [9. Method loop (解決方法)] .om-loop__return .om-ico */
.om-loop__return .om-ico {
  width: 22px;  /* 幅 */
  height: 22px;  /* 高さ */
}

/* [9. Method loop (解決方法)] .om-loop__legend */
.om-loop__legend {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  justify-content: center;  /* 横の揃え */
  gap: 10px 22px;  /* 要素の間隔 */
  margin: 0 0 20px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [9. Method loop (解決方法)] .om-loop__legend li */
.om-loop__legend li {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 8px;  /* 要素の間隔 */
}

/* [9. Method loop (解決方法)] .om-loop__legend i */
.om-loop__legend i {
  width: 16px;  /* 幅 */
  height: 16px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
}

/* [9. Method loop (解決方法)] .om-loop__legend i.is-ohashi */
.om-loop__legend i.is-ohashi {
  background: var(--om-navy);  /* 背景 */
}

/* [9. Method loop (解決方法)] .om-loop__legend i.is-client */
.om-loop__legend i.is-client {
  background: var(--om-yellow);  /* 背景 */
}

/* [9. Method loop (解決方法)] .om-loop__answer */
.om-loop__answer {
  margin: 32px auto 0;  /* 外側の余白 */
  max-width: 760px;  /* 最大幅 */
  padding: 24px 28px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-md);  /* 影 */
  text-align: center;  /* 行揃え */
}

/* [9. Method loop (解決方法)] .om-loop__answer-title */
.om-loop__answer-title {
  margin: 0 0 6px;  /* 外側の余白 */
  font-size: 1.3rem;  /* 文字サイズ */
}

/* [9. Method loop (解決方法)] .om-loop__answer-title .om-c-pink */
.om-loop__answer-title .om-c-pink {
  font-size: 1.2em;  /* 文字サイズ */
  background: linear-gradient(transparent 55%, var(--om-yellow) 55%);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  padding: 0 0.1em;  /* 内側の余白 */
}

/* [9. Method loop (解決方法)] .om-loop__answer-text */
.om-loop__answer-text {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* ========================================================================
   10. Points (differentiators)
   ======================================================================== */

/* [10. Points (differentiators)] .om-points */
.om-points {
  display: grid;  /* 表示形式 */
  gap: clamp(32px, 5vw, 56px);  /* 要素の間隔 */
  counter-reset: om-point;
}

/* [10. Points (differentiators)] .om-point */
.om-point {
  position: relative;  /* 配置方法 */
  display: grid;  /* 表示形式 */
  gap: 24px;  /* 要素の間隔 */
  align-items: center;  /* 縦の揃え */
  padding: clamp(24px, 4vw, 44px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-2xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

@media (min-width: 860px) {

  /* [10. Points (differentiators)] .om-point */
  .om-point {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);  /* グリッドの列 */
  }

  /* [10. Points (differentiators)] .om-point:nth-child(even) .om-point__fig */
  .om-point:nth-child(even) .om-point__fig {
    order: -1;
  }
}

/* [10. Points (differentiators)] .om-point__index */
.om-point__index {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 10px;  /* 要素の間隔 */
  margin-bottom: 14px;
  padding: 4px 14px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: var(--om-yellow);  /* 背景 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  letter-spacing: 0.12em;  /* 字間 */
  color: var(--om-ink);  /* 文字色 */
}

/* [10. Points (differentiators)] .om-point__index::after */
/* 疑似要素 */
.om-point__index::after {
  content: "";  /* 生成内容 */
  width: 10px;  /* 幅 */
  height: 10px;  /* 高さ */
  background: var(--om-accent);  /* 背景 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
}

/* [10. Points (differentiators)] .om-point__title */
.om-point__title {
  margin: 0 0 12px;  /* 外側の余白 */
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);  /* 文字サイズ */
}

/* [10. Points (differentiators)] .om-point__copy */
.om-point__copy {
  margin: 0 0 14px;  /* 外側の余白 */
  padding: 12px 18px;  /* 内側の余白 */
  border: 1.5px dashed var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
}

/* [10. Points (differentiators)] .om-point__text */
.om-point__text {
  margin: 0;  /* 外側の余白 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [10. Points (differentiators)] .om-point__fig */
.om-point__fig {
  position: relative;  /* 配置方法 */
  max-width: 300px;  /* 最大幅 */
  margin-inline: auto;
}

/* [10. Points (differentiators)] .om-point__kobito */
.om-point__kobito {
  position: absolute;  /* 配置方法 */
  right: -10px;  /* 右端 */
  bottom: -14px;  /* 下端 */
  width: 70px;  /* 幅 */
}

/* ========================================================================
   11. Services (2)
   ======================================================================== */

/* [11. Services (2)] .om-services */
.om-services {
  display: grid;  /* 表示形式 */
  gap: 28px;  /* 要素の間隔 */
}

@media (min-width: 860px) {

  /* [11. Services (2)] .om-services */
  .om-services {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

/* [11. Services (2)] .om-service */
.om-service {
  position: relative;  /* 配置方法 */
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  padding: clamp(26px, 3.5vw, 40px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-top-width: 10px;
  border-top-color: var(--om-navy);
  border-radius: var(--om-r-2xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

/* [11. Services (2)] .om-service--02 */
/* バリエーション: 02 */
.om-service--02 {
  border-top-color: var(--om-accent);
}

/* [11. Services (2)] .om-service__head */
.om-service__head {
  display: flex;  /* 表示形式 */
  align-items: flex-start;  /* 縦の揃え */
  gap: 18px;  /* 要素の間隔 */
  margin-bottom: 14px;
}

/* [11. Services (2)] .om-service__fig */
.om-service__fig {
  flex: 0 0 110px;  /* 伸縮 */
}

/* [11. Services (2)] .om-service__label */
.om-service__label {
  display: inline-block;  /* 表示形式 */
  padding: 2px 10px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  background: var(--om-navy);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  letter-spacing: 0.14em;  /* 字間 */
}

/* [11. Services (2)] .om-service--02 .om-service__label */
/* バリエーション: 02 */
.om-service--02 .om-service__label {
  background: var(--om-accent);  /* 背景 */
}

/* [11. Services (2)] .om-service__title */
.om-service__title {
  margin: 8px 0 6px;  /* 外側の余白 */
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);  /* 文字サイズ */
}

/* [11. Services (2)] .om-service__status */
.om-service__status {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
}

/* [11. Services (2)] .om-service__status .om-ico */
.om-service__status .om-ico {
  width: 14px;  /* 幅 */
  height: 14px;  /* 高さ */
}

/* [11. Services (2)] .om-service__text */
.om-service__text {
  margin: 0 0 16px;  /* 外側の余白 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [11. Services (2)] .om-service__list */
.om-service__list {
  margin: 0 0 20px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  display: grid;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
}

/* [11. Services (2)] .om-service__list li */
.om-service__list li {
  position: relative;  /* 配置方法 */
  padding-left: 30px;
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 500;  /* 太さ */
}

/* [11. Services (2)] .om-service__list li::before */
/* 疑似要素 */
.om-service__list li::before {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 0;  /* 左端 */
  top: 3px;  /* 上端 */
  width: 20px;  /* 幅 */
  height: 20px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;  /* 背景 */
}

/* [11. Services (2)] .om-service__scope */
.om-service__scope {
  margin: auto 0 0;  /* 外側の余白 */
  padding: 14px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [11. Services (2)] .om-service--02 .om-service__scope */
/* バリエーション: 02 */
.om-service--02 .om-service__scope {
  background: var(--om-blush);  /* 背景 */
}

/* [11. Services (2)] .om-service__scope strong */
.om-service__scope strong {
  display: block;  /* 表示形式 */
  margin-bottom: 6px;
  font-family: var(--om-font-round);  /* 書体 */
}

/* [11. Services (2)] .om-service__chain */
.om-service__chain {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [11. Services (2)] .om-service__chain li */
.om-service__chain li {
  padding: 3px 12px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [11. Services (2)] .om-service__chain li + li::before */
/* 疑似要素 */
.om-service__chain li + li::before {
  content: "→";  /* 生成内容 */
  margin-right: 6px;
  color: var(--om-ink);  /* 文字色 */
}

/* [11. Services (2)] .om-service__chain li.is-goal */
.om-service__chain li.is-goal {
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* ========================================================================
   12. Fees (料金とトライアル)
   ======================================================================== */

/* [12. Fees (料金とトライアル)] .om-fees */
.om-fees {
  display: grid;  /* 表示形式 */
  gap: 26px;  /* 要素の間隔 */
  align-items: stretch;  /* 縦の揃え */
}

@media (min-width: 900px) {

  /* [12. Fees (料金とトライアル)] .om-fees */
  .om-fees {
    grid-template-columns: repeat(3, 1fr);  /* グリッドの列 */
  }
}

/* [12. Fees (料金とトライアル)] .om-fee */
.om-fee {
  position: relative;  /* 配置方法 */
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  padding: 34px 26px 26px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

/* [12. Fees (料金とトライアル)] .om-fee--primary */
/* バリエーション: primary */
.om-fee--primary {
  border-width: 3px;
  box-shadow: 8px 8px 0 var(--om-ink);  /* 影 */
}

/* [12. Fees (料金とトライアル)] .om-fee__tag */
.om-fee__tag {
  position: absolute;  /* 配置方法 */
  left: 50%;  /* 左端 */
  top: -17px;  /* 上端 */
  transform: translateX(-50%);  /* 変形 */
  padding: 4px 16px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: var(--om-yellow);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  white-space: nowrap;  /* 改行の扱い */
}

/* [12. Fees (料金とトライアル)] .om-fee--primary .om-fee__tag */
/* バリエーション: primary */
.om-fee--primary .om-fee__tag {
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-fee__fig */
.om-fee__fig {
  width: 86px;  /* 幅 */
  margin: 0 auto 10px;  /* 外側の余白 */
}

/* [12. Fees (料金とトライアル)] .om-fee__name */
.om-fee__name {
  margin: 0 0 4px;  /* 外側の余白 */
  text-align: center;  /* 行揃え */
  font-size: 1.25rem;  /* 文字サイズ */
  color: var(--om-accent-deep);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-fee__per */
.om-fee__per {
  margin: 0 0 14px;  /* 外側の余白 */
  text-align: center;  /* 行揃え */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-fee__price */
.om-fee__price {
  display: flex;  /* 表示形式 */
  align-items: baseline;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  gap: 4px;  /* 要素の間隔 */
  margin-bottom: 6px;
  padding: 10px 0;  /* 内側の余白 */
  border-top: 2px solid var(--om-ink);
  border-bottom: 2px solid var(--om-ink);
  font-family: var(--om-font-display);  /* 書体 */
  color: var(--om-ink);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-fee--primary .om-fee__price */
/* バリエーション: primary */
.om-fee--primary .om-fee__price {
  color: var(--om-ink);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-fee__num */
.om-fee__num {
  font-size: clamp(2.8rem, 5vw, 3.6rem);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  line-height: 1;  /* 行間 */
  letter-spacing: -0.02em;  /* 字間 */
}

/* [12. Fees (料金とトライアル)] .om-fee__unit */
.om-fee__unit {
  font-size: 1.15rem;  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  color: var(--om-accent);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-fee__desc */
.om-fee__desc {
  margin: 10px 0 16px;  /* 外側の余白 */
  text-align: center;  /* 行揃え */
  font-weight: 700;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [12. Fees (料金とトライアル)] .om-fee__list */
.om-fee__list {
  margin: 0 0 16px;  /* 外側の余白 */
  padding: 16px 0 0;  /* 内側の余白 */
  border-top: 2px dashed var(--om-ink);
  list-style: none;  /* リスト記号 */
  display: grid;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [12. Fees (料金とトライアル)] .om-fee__list li */
.om-fee__list li {
  position: relative;  /* 配置方法 */
  padding-left: 24px;
}

/* [12. Fees (料金とトライアル)] .om-fee__list li::before */
/* 疑似要素 */
.om-fee__list li::before {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 0;  /* 左端 */
  top: 0.5em;  /* 上端 */
  width: 12px;  /* 幅 */
  height: 12px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
}

/* [12. Fees (料金とトライアル)] .om-fee__note */
.om-fee__note {
  margin: auto 0 0;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-fees__plus */
.om-fees__plus {
  display: flex;  /* 表示形式 */
  justify-content: center;  /* 横の揃え */
  margin: 26px 0;  /* 外側の余白 */
}

/* [12. Fees (料金とトライアル)] .om-fees__plus span */
.om-fees__plus span {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 56px;  /* 幅 */
  height: 56px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-yellow);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 2rem;  /* 文字サイズ */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [12. Fees (料金とトライアル)] .om-judge */
.om-judge {
  position: relative;  /* 配置方法 */
  padding: clamp(24px, 3.5vw, 40px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

/* [12. Fees (料金とトライアル)] .om-judge__title */
.om-judge__title {
  margin: 0 0 18px;  /* 外側の余白 */
  text-align: center;  /* 行揃え */
  font-size: 1.3rem;  /* 文字サイズ */
}

/* [12. Fees (料金とトライアル)] .om-judge__list */
.om-judge__list {
  display: grid;  /* 表示形式 */
  gap: 14px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 768px) {

  /* [12. Fees (料金とトライアル)] .om-judge__list */
  .om-judge__list {
    grid-template-columns: repeat(3, 1fr);  /* グリッドの列 */
  }
}

/* [12. Fees (料金とトライアル)] .om-judge__item */
.om-judge__item {
  padding: 18px 18px 16px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
}

/* [12. Fees (料金とトライアル)] .om-judge__item strong */
.om-judge__item strong {
  display: block;  /* 表示形式 */
  margin-bottom: 6px;
  font-family: var(--om-font-round);  /* 書体 */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-judge__item p */
.om-judge__item p {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-judge__kobito */
.om-judge__kobito {
  position: absolute;  /* 配置方法 */
  right: 14px;  /* 右端 */
  top: -58px;  /* 上端 */
  width: 80px;  /* 幅 */
}

/* [12. Fees (料金とトライアル)] .om-judge__foot */
.om-judge__foot {
  margin: 18px 0 0;  /* 外側の余白 */
  text-align: center;  /* 行揃え */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [12. Fees (料金とトライアル)] .om-pricing-table */
.om-pricing-table {
  margin-top: 32px;
  overflow-x: auto;  /* 横のはみ出し */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  box-shadow: var(--om-sh-sm);  /* 影 */
  background: #fff;  /* 背景 */
}

/* [12. Fees (料金とトライアル)] .om-pricing-table table */
.om-pricing-table table {
  margin: 0;  /* 外側の余白 */
  min-width: 640px;
}

/* [12. Fees (料金とトライアル)] .om-pricing-table th */
.om-pricing-table th {
  background: var(--om-yellow-soft);  /* 背景 */
  white-space: nowrap;  /* 改行の扱い */
}

/* ========================================================================
   13. Flow (導入の流れ) + proposal examples
   ======================================================================== */

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-steps */
.om-flow-steps {
  position: relative;  /* 配置方法 */
  display: grid;  /* 表示形式 */
  gap: 22px 18px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  counter-reset: om-flow;
}

@media (min-width: 640px) {

  /* [13. Flow (導入の流れ) + proposal examples] .om-flow-steps */
  .om-flow-steps {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

@media (min-width: 1024px) {

  /* [13. Flow (導入の流れ) + proposal examples] .om-flow-steps */
  .om-flow-steps {
    grid-template-columns: repeat(7, 1fr);  /* グリッドの列 */
    gap: 14px;  /* 要素の間隔 */
  }
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step */
.om-flow-step {
  position: relative;  /* 配置方法 */
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  align-items: center;  /* 縦の揃え */
  text-align: center;  /* 行揃え */
  padding: 44px 12px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step--free */
/* バリエーション: free */
.om-flow-step--free {
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step__index */
.om-flow-step__index {
  position: absolute;  /* 配置方法 */
  left: 50%;  /* 左端 */
  top: -18px;  /* 上端 */
  transform: translateX(-50%);  /* 変形 */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 40px;  /* 幅 */
  height: 40px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-navy);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step--free .om-flow-step__index */
/* バリエーション: free */
.om-flow-step--free .om-flow-step__index {
  background: var(--om-yellow);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step__fig */
.om-flow-step__fig {
  width: 72px;  /* 幅 */
  margin-bottom: 10px;
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step__title */
.om-flow-step__title {
  margin: 0 0 6px;  /* 外側の余白 */
  font-size: 1rem;  /* 文字サイズ */
  line-height: 1.45;  /* 行間 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step__text */
.om-flow-step__text {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step__free */
.om-flow-step__free {
  position: absolute;  /* 配置方法 */
  right: -2px;  /* 右端 */
  top: -2px;  /* 上端 */
  padding: 2px 8px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: 0 var(--om-r-lg) 0 var(--om-r-md);  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-size: 10px;  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-step::after */
/* 疑似要素 */
.om-flow-step::after {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  right: -16px;  /* 右端 */
  top: 50%;  /* 上端 */
  width: 14px;  /* 幅 */
  height: 2px;  /* 高さ */
  background: repeating-linear-gradient(90deg, var(--om-ink) 0 3px, transparent 3px 6px);  /* 背景 */
  transform: translateY(-50%);  /* 変形 */
  display: none;  /* 表示形式 */
}

@media (min-width: 1024px) {

  /* [13. Flow (導入の流れ) + proposal examples] .om-flow-step:not(:last-child)::after */
  /* 疑似要素 */
  .om-flow-step:not(:last-child)::after {
    display: block;  /* 表示形式 */
  }
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-nopay */
.om-flow-nopay {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 8px;  /* 要素の間隔 */
  margin-bottom: 30px;
  padding: 8px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: var(--om-blue-light);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  box-shadow: var(--om-sh-xs);  /* 影 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-flow-nopay .om-ico */
.om-flow-nopay .om-ico {
  width: 16px;  /* 幅 */
  height: 16px;  /* 高さ */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-examples */
.om-examples {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 3.5vw, 40px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-md);  /* 影 */
  position: relative;  /* 配置方法 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-examples__head */
.om-examples__head {
  text-align: center;  /* 行揃え */
  margin-bottom: 24px;
}

/* [13. Flow (導入の流れ) + proposal examples] .om-examples__list */
.om-examples__list {
  display: grid;  /* 表示形式 */
  gap: 14px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 640px) {

  /* [13. Flow (導入の流れ) + proposal examples] .om-examples__list */
  .om-examples__list {
    grid-template-columns: repeat(5, 1fr);  /* グリッドの列 */
  }
}

/* [13. Flow (導入の流れ) + proposal examples] .om-example-item */
.om-example-item {
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  align-items: center;  /* 縦の揃え */
  text-align: center;  /* 行揃え */
  gap: 8px;  /* 要素の間隔 */
  padding: 18px 10px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-example-item .om-illust */
.om-example-item .om-illust {
  width: 64px;  /* 幅 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-examples__kobito */
.om-examples__kobito {
  position: absolute;  /* 配置方法 */
  right: 18px;  /* 右端 */
  top: -70px;  /* 上端 */
  display: flex;  /* 表示形式 */
  align-items: flex-end;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
}

/* [13. Flow (導入の流れ) + proposal examples] .om-examples__kobito .om-kobito-wrap */
.om-examples__kobito .om-kobito-wrap {
  width: 84px;  /* 幅 */
}

@media (max-width: 767px) {

  /* [13. Flow (導入の流れ) + proposal examples] .om-examples__kobito */
  .om-examples__kobito {
    position: static;  /* 配置方法 */
    justify-content: center;  /* 横の揃え */
    margin-bottom: 10px;
  }
}

/* ========================================================================
   14. Proof / cases
   ======================================================================== */

/* [14. Proof / cases] .om-proof-stats */
.om-proof-stats {
  display: grid;  /* 表示形式 */
  gap: 16px;  /* 要素の間隔 */
  margin: 0 0 clamp(32px, 5vw, 48px);  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 640px) {

  /* [14. Proof / cases] .om-proof-stats */
  .om-proof-stats {
    grid-template-columns: repeat(3, 1fr);  /* グリッドの列 */
  }
}

/* [14. Proof / cases] .om-proof-stat */
.om-proof-stat {
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  text-align: center;  /* 行揃え */
  padding: 22px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-md);  /* 影 */
}

/* [14. Proof / cases] .om-proof-stat__label */
.om-proof-stat__label {
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [14. Proof / cases] .om-proof-stat__value */
.om-proof-stat__value {
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: clamp(2.2rem, 4vw, 3rem);  /* 文字サイズ */
  line-height: 1.1;  /* 行間 */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [14. Proof / cases] .om-proof-stat__value small */
.om-proof-stat__value small {
  font-size: 0.45em;  /* 文字サイズ */
  margin-left: 2px;
}

/* [14. Proof / cases] .om-proof-stat--pink .om-proof-stat__value */
/* バリエーション: pink */
.om-proof-stat--pink .om-proof-stat__value {
  color: var(--om-accent-deep);  /* 文字色 */
}

/* [14. Proof / cases] .om-proof-stat__sub */
.om-proof-stat__sub {
  margin-top: 4px;
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [14. Proof / cases] .om-proof-stat__stars */
.om-proof-stat__stars {
  display: inline-flex;  /* 表示形式 */
  gap: 2px;  /* 要素の間隔 */
  color: var(--om-ink);  /* 文字色 */
}

/* [14. Proof / cases] .om-proof-stat__stars .om-ico */
.om-proof-stat__stars .om-ico {
  width: 18px;  /* 幅 */
  height: 18px;  /* 高さ */
  fill: var(--om-yellow);
  stroke: var(--om-ink);
}

/* [14. Proof / cases] .om-cases */
.om-cases {
  display: grid;  /* 表示形式 */
  gap: 26px;  /* 要素の間隔 */
}

@media (min-width: 900px) {

  /* [14. Proof / cases] .om-cases */
  .om-cases {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

/* [14. Proof / cases] .om-case */
.om-case {
  position: relative;  /* 配置方法 */
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  padding: clamp(24px, 3.5vw, 36px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

/* [14. Proof / cases] .om-case__head */
.om-case__head {
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 16px;  /* 要素の間隔 */
  margin-bottom: 14px;
}

/* [14. Proof / cases] .om-case__fig */
.om-case__fig {
  flex: 0 0 96px;  /* 伸縮 */
}

/* [14. Proof / cases] .om-case__label */
.om-case__label {
  display: inline-block;  /* 表示形式 */
  padding: 2px 10px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  letter-spacing: 0.14em;  /* 字間 */
}

/* [14. Proof / cases] .om-case__meta */
.om-case__meta {
  margin: 6px 0 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [14. Proof / cases] .om-case__title */
.om-case__title {
  margin: 0 0 16px;  /* 外側の余白 */
  font-size: clamp(1.15rem, 2vw, 1.4rem);  /* 文字サイズ */
  line-height: 1.5;  /* 行間 */
}

/* [14. Proof / cases] .om-case__stats */
.om-case__stats {
  display: grid;  /* 表示形式 */
  grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  gap: 10px;  /* 要素の間隔 */
  margin: 0 0 16px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 480px) {

  /* [14. Proof / cases] .om-case__stats */
  .om-case__stats {
    grid-template-columns: repeat(4, 1fr);  /* グリッドの列 */
  }
}

/* [14. Proof / cases] .om-case__stat */
.om-case__stat {
  padding: 12px 8px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  text-align: center;  /* 行揃え */
}

/* [14. Proof / cases] .om-case__stat--hi */
/* バリエーション: hi */
.om-case__stat--hi {
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [14. Proof / cases] .om-case__stat-label */
.om-case__stat-label {
  display: block;  /* 表示形式 */
  font-size: 11px;  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  color: var(--om-ink-soft);  /* 文字色 */
  line-height: 1.4;  /* 行間 */
}

/* [14. Proof / cases] .om-case__stat-value */
.om-case__stat-value {
  display: block;  /* 表示形式 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 1.5rem;  /* 文字サイズ */
  line-height: 1.2;  /* 行間 */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [14. Proof / cases] .om-case__stat-value small */
.om-case__stat-value small {
  font-size: 0.55em;  /* 文字サイズ */
  margin-left: 1px;
}

/* [14. Proof / cases] .om-case__flow */
.om-case__flow {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
  margin: 0 0 16px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [14. Proof / cases] .om-case__flow li */
.om-case__flow li {
  padding: 3px 12px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [14. Proof / cases] .om-case__flow li + li::before */
/* 疑似要素 */
.om-case__flow li + li::before {
  content: "→";  /* 生成内容 */
  margin-right: 6px;
  color: var(--om-ink);  /* 文字色 */
}

/* [14. Proof / cases] .om-case__flow li:last-child */
.om-case__flow li:last-child {
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [14. Proof / cases] .om-case__bars */
.om-case__bars {
  display: grid;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
  margin: 0 0 16px;  /* 外側の余白 */
}

/* [14. Proof / cases] .om-case__bar */
.om-case__bar {
  display: grid;  /* 表示形式 */
  grid-template-columns: 72px 1fr 80px;  /* グリッドの列 */
  align-items: center;  /* 縦の揃え */
  gap: 8px;  /* 要素の間隔 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [14. Proof / cases] .om-case__bar-track */
.om-case__bar-track {
  display: block;  /* 表示形式 */
  height: 16px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-sm);  /* 角丸 */
  background: #fff;  /* 背景 */
  overflow: hidden;  /* はみ出し */
}

/* [14. Proof / cases] .om-case__bar-fill */
.om-case__bar-fill {
  display: block;  /* 表示形式 */
  height: 100%;  /* 高さ */
  background: var(--om-navy);  /* 背景 */
  transform-origin: left;
  animation: om-grow 1.2s var(--om-m-ease-out) both;  /* アニメーション */
}

/* [14. Proof / cases] .om-case__bar--pink .om-case__bar-fill */
/* バリエーション: pink */
.om-case__bar--pink .om-case__bar-fill {
  background: var(--om-accent);  /* 背景 */
}

/* [14. Proof / cases] .om-case__bar-value */
.om-case__bar-value {
  font-weight: 700;  /* 太さ */
  text-align: right;  /* 行揃え */
}

@keyframes om-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* [14. Proof / cases] .om-case__text */
.om-case__text {
  margin: 0 0 18px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [14. Proof / cases] .om-case__more */
.om-case__more {
  margin-top: auto;
}

/* [14. Proof / cases] .om-cases__more */
.om-cases__more {
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  align-items: center;  /* 縦の揃え */
  gap: 10px;  /* 要素の間隔 */
  margin-top: 34px;
  text-align: center;  /* 行揃え */
}

/* [14. Proof / cases] .om-cases__more .om-bubble */
.om-cases__more .om-bubble {
  margin-bottom: 6px;
}

/* [14. Proof / cases] .om-cases__note */
.om-cases__note {
  margin: 14px 0 0;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
  text-align: center;  /* 行揃え */
}

/* ========================================================================
   15. FAQ
   ======================================================================== */

/* [15. FAQ] .om-faq */
.om-faq {
  max-width: 860px;  /* 最大幅 */
  margin: 0 auto;  /* 外側の余白 */
}

/* [15. FAQ] .om-faq__title */
.om-faq__title {
  margin: 0 0 18px;  /* 外側の余白 */
  font-size: 1.3rem;  /* 文字サイズ */
}

/* [15. FAQ] .om-faq__item */
.om-faq__item {
  margin: 0 0 14px;  /* 外側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
  transition: box-shadow var(--om-m-fast);  /* 変化のアニメーション */
}

/* [15. FAQ] .om-faq__item[open] */
/* 開いた状態 */
.om-faq__item[open] {
  box-shadow: var(--om-sh-pink);  /* 影 */
}

/* [15. FAQ] .om-faq__q */
.om-faq__q {
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 14px;  /* 要素の間隔 */
  padding: 18px 20px;  /* 内側の余白 */
  cursor: pointer;  /* カーソル */
  list-style: none;  /* リスト記号 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
  font-size: 1.02rem;  /* 文字サイズ */
  line-height: 1.5;  /* 行間 */
}

/* [15. FAQ] .om-faq__q::-webkit-details-marker */
.om-faq__q::-webkit-details-marker {
  display: none;  /* 表示形式 */
}

/* [15. FAQ] .om-faq__mark */
.om-faq__mark {
  flex: 0 0 auto;  /* 伸縮 */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 36px;  /* 幅 */
  height: 36px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: var(--om-ink);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 1rem;  /* 文字サイズ */
}

/* [15. FAQ] .om-faq__qtext */
.om-faq__qtext {
  flex: 1 1 auto;  /* 伸縮 */
}

/* [15. FAQ] .om-faq__icon */
.om-faq__icon {
  flex: 0 0 auto;  /* 伸縮 */
  width: 30px;  /* 幅 */
  height: 30px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-yellow);  /* 背景 */
  position: relative;  /* 配置方法 */
  transition: transform var(--om-m-base) var(--om-m-ease);  /* 変化のアニメーション */
}

/* [15. FAQ] .om-faq__icon::before */
/* 疑似要素 */
.om-faq__icon::before,
.om-faq__icon::after {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 50%;  /* 左端 */
  top: 50%;  /* 上端 */
  width: 12px;  /* 幅 */
  height: 3px;  /* 高さ */
  background: var(--om-ink);  /* 背景 */
  transform: translate(-50%, -50%);  /* 変形 */
}

/* [15. FAQ] .om-faq__icon::after */
/* 疑似要素 */
.om-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);  /* 変形 */
}

/* [15. FAQ] .om-faq__item[open] .om-faq__icon */
/* 開いた状態 */
.om-faq__item[open] .om-faq__icon {
  transform: rotate(45deg);  /* 変形 */
}

/* [15. FAQ] .om-faq__a */
.om-faq__a {
  display: flex;  /* 表示形式 */
  gap: 14px;  /* 要素の間隔 */
  padding: 0 20px 20px 20px;  /* 内側の余白 */
  border-top: 2px dashed var(--om-ink);
  margin: 0 20px;  /* 外側の余白 */
  padding-top: 16px;
}

/* [15. FAQ] .om-faq__a .om-faq__mark */
.om-faq__a .om-faq__mark {
  background: var(--om-accent);  /* 背景 */
}

/* [15. FAQ] .om-faq__a-body */
.om-faq__a-body {
  flex: 1 1 auto;  /* 伸縮 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [15. FAQ] .om-faq__a-body p */
.om-faq__a-body p {
  margin: 0 0 0.8em;  /* 外側の余白 */
}

/* [15. FAQ] .om-faq__a-body p:last-child */
.om-faq__a-body p:last-child {
  margin: 0;  /* 外側の余白 */
}

/* [15. FAQ] .om-faq__a-body a */
.om-faq__a-body a {
  font-weight: 700;  /* 太さ */
}

/* [15. FAQ] .om-faq__short */
.om-faq__short {
  font-weight: 700;  /* 太さ */
  color: var(--om-ink);  /* 文字色 */
}

/* [15. FAQ] .om-faq__alt */
.om-faq__alt {
  margin-top: 10px;
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [15. FAQ] .om-faq__kobito */
.om-faq__kobito {
  position: absolute;  /* 配置方法 */
  left: -10px;  /* 左端 */
  top: -40px;  /* 上端 */
  width: 90px;  /* 幅 */
}

/* [15. FAQ] .om-faq-wrap */
.om-faq-wrap {
  position: relative;  /* 配置方法 */
}

@media (max-width: 900px) {

  /* [15. FAQ] .om-faq__kobito */
  .om-faq__kobito {
    position: static;  /* 配置方法 */
    display: block;  /* 表示形式 */
    width: 72px;  /* 幅 */
    margin: 0 auto 8px;  /* 外側の余白 */
  }
}

/* [15. FAQ] .om-faq-cats */
.om-faq-cats {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  justify-content: center;  /* 横の揃え */
  gap: 8px;  /* 要素の間隔 */
  margin: 0 0 28px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [15. FAQ] .om-faq-cats a */
.om-faq-cats a {
  display: inline-block;  /* 表示形式 */
  padding: 6px 14px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  text-decoration: none;  /* 下線 */
  color: var(--om-ink);  /* 文字色 */
}

/* [15. FAQ] .om-faq-cats a:hover */
/* ホバー時 */
.om-faq-cats a:hover {
  background: var(--om-yellow);  /* 背景 */
}

/* [15. FAQ] .om-faq-group */
.om-faq-group {
  margin-bottom: 40px;
}

/* [15. FAQ] .om-faq-group__title */
.om-faq-group__title {
  margin: 0 0 16px;  /* 外側の余白 */
  font-size: 1.25rem;  /* 文字サイズ */
  padding-left: 14px;
  border-left: 8px solid var(--om-yellow);
}

/* ========================================================================
   16. Area (47 prefectures)
   ======================================================================== */

/* [16. Area (47 prefectures)] .om-area */
.om-area {
  text-align: center;  /* 行揃え */
}

/* [16. Area (47 prefectures)] .om-area__intro */
.om-area__intro {
  max-width: 720px;  /* 最大幅 */
  margin: 0 auto 24px;  /* 外側の余白 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [16. Area (47 prefectures)] .om-area__regions */
.om-area__regions {
  display: grid;  /* 表示形式 */
  gap: 14px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  text-align: left;  /* 行揃え */
}

@media (min-width: 640px) {

  /* [16. Area (47 prefectures)] .om-area__regions */
  .om-area__regions {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

@media (min-width: 1024px) {

  /* [16. Area (47 prefectures)] .om-area__regions */
  .om-area__regions {
    grid-template-columns: repeat(4, 1fr);  /* グリッドの列 */
  }
}

/* [16. Area (47 prefectures)] .om-area__region */
.om-area__region {
  padding: 16px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-xs);  /* 影 */
}

/* [16. Area (47 prefectures)] .om-area__region-name */
.om-area__region-name {
  display: block;  /* 表示形式 */
  margin-bottom: 8px;
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [16. Area (47 prefectures)] .om-area__prefs */
.om-area__prefs {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 6px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [16. Area (47 prefectures)] .om-area__prefs li */
.om-area__prefs li,
.om-area__prefs a {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  padding: 2px 9px;  /* 内側の余白 */
  border: 1px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  text-decoration: none;  /* 下線 */
}

/* [16. Area (47 prefectures)] .om-area__prefs a:hover */
/* ホバー時 */
.om-area__prefs a:hover {
  background: var(--om-yellow);  /* 背景 */
}

/* [16. Area (47 prefectures)] .om-area--compact .om-area__list */
/* バリエーション: compact */
.om-area--compact .om-area__list {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  justify-content: center;  /* 横の揃え */
  gap: 6px;  /* 要素の間隔 */
  margin: 0 0 20px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [16. Area (47 prefectures)] .om-area--compact .om-area__list li */
/* バリエーション: compact */
.om-area--compact .om-area__list li {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  padding: 3px 10px;  /* 内側の余白 */
  border: 1px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
}

/* [16. Area (47 prefectures)] .om-area__note */
.om-area__note {
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [16. Area (47 prefectures)] .om-marquee */
.om-marquee {
  overflow: hidden;  /* はみ出し */
  margin-top: 24px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* [16. Area (47 prefectures)] .om-marquee__track */
.om-marquee__track {
  display: flex;  /* 表示形式 */
  gap: 10px;  /* 要素の間隔 */
  width: max-content;  /* 幅 */
  animation: om-marquee 60s linear infinite;  /* アニメーション */
}

/* [16. Area (47 prefectures)] .om-marquee__track span */
.om-marquee__track span {
  padding: 6px 14px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  white-space: nowrap;  /* 改行の扱い */
}

@keyframes om-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ========================================================================
   17. About / company
   ======================================================================== */

/* [17. About / company] .om-about__grid */
.om-about__grid {
  display: grid;  /* 表示形式 */
  gap: 36px;  /* 要素の間隔 */
  align-items: center;  /* 縦の揃え */
}

@media (min-width: 900px) {

  /* [17. About / company] .om-about__grid */
  .om-about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* グリッドの列 */
  }
}

/* [17. About / company] .om-about__title */
.om-about__title {
  margin: 0 0 18px;  /* 外側の余白 */
  font-size: clamp(1.5rem, 3vw, 2.1rem);  /* 文字サイズ */
  line-height: 1.45;  /* 行間 */
}

/* [17. About / company] .om-about__text */
.om-about__text {
  margin: 0;  /* 外側の余白 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [17. About / company] .om-about__fig */
.om-about__fig {
  max-width: 380px;  /* 最大幅 */
  margin-inline: auto;
}

/* [17. About / company] .om-profile */
.om-profile {
  margin-top: clamp(32px, 5vw, 48px);
  padding: clamp(24px, 3.5vw, 40px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

/* [17. About / company] .om-profile__title */
.om-profile__title {
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 14px;  /* 要素の間隔 */
  margin: 0 0 18px;  /* 外側の余白 */
  font-size: 1.3rem;  /* 文字サイズ */
}

/* [17. About / company] .om-profile__title::after */
/* 疑似要素 */
.om-profile__title::after {
  content: "";  /* 生成内容 */
  flex: 1 1 auto;  /* 伸縮 */
  height: 4px;  /* 高さ */
  background: var(--om-yellow);  /* 背景 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
}

/* [17. About / company] .om-profile__list */
.om-profile__list {
  display: grid;  /* 表示形式 */
  margin: 0;  /* 外側の余白 */
}

/* [17. About / company] .om-profile__row */
.om-profile__row {
  display: grid;  /* 表示形式 */
  grid-template-columns: 1fr;  /* グリッドの列 */
  gap: 4px;  /* 要素の間隔 */
  padding: 14px 0;  /* 内側の余白 */
  border-bottom: 2px dashed var(--om-ink);
}

@media (min-width: 640px) {

  /* [17. About / company] .om-profile__row */
  .om-profile__row {
    grid-template-columns: 160px 1fr;  /* グリッドの列 */
    gap: 16px;  /* 要素の間隔 */
  }
}

/* [17. About / company] .om-profile__row:last-child */
.om-profile__row:last-child {
  border-bottom: 0;
}

/* [17. About / company] .om-profile__dt */
.om-profile__dt {
  margin: 0;  /* 外側の余白 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [17. About / company] .om-profile__dd */
.om-profile__dd {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [17. About / company] .om-supervisor */
.om-supervisor {
  display: grid;  /* 表示形式 */
  gap: 20px;  /* 要素の間隔 */
  margin-top: 26px;
  padding: 24px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
}

@media (min-width: 640px) {

  /* [17. About / company] .om-supervisor */
  .om-supervisor {
    grid-template-columns: 96px 1fr;  /* グリッドの列 */
  }
}

/* [17. About / company] .om-supervisor__avatar */
.om-supervisor__avatar {
  width: 96px;  /* 幅 */
  height: 96px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: #fff;  /* 背景 */
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  overflow: hidden;  /* はみ出し */
}

/* [17. About / company] .om-supervisor__avatar .om-kobito */
.om-supervisor__avatar .om-kobito {
  width: 80px;  /* 幅 */
}

/* [17. About / company] .om-supervisor__role */
.om-supervisor__role {
  margin: 0 0 2px;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  color: var(--om-accent-deep);  /* 文字色 */
  letter-spacing: 0.06em;  /* 字間 */
}

/* [17. About / company] .om-supervisor__name */
.om-supervisor__name {
  margin: 0 0 4px;  /* 外側の余白 */
  font-size: 1.2rem;  /* 文字サイズ */
}

/* [17. About / company] .om-supervisor__name small */
.om-supervisor__name small {
  font-size: 0.7em;  /* 文字サイズ */
  font-weight: 500;  /* 太さ */
  color: var(--om-gray-600);  /* 文字色 */
  margin-left: 6px;
}

/* [17. About / company] .om-supervisor__org */
.om-supervisor__org {
  margin: 0 0 10px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [17. About / company] .om-supervisor__bio */
.om-supervisor__bio {
  margin: 0 0 10px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [17. About / company] .om-supervisor__fields */
.om-supervisor__fields {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 6px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [17. About / company] .om-supervisor__fields li */
.om-supervisor__fields li {
  padding: 3px 10px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* ========================================================================
   18. Contact section
   ======================================================================== */

/* [18. Contact section] .om-contact */
.om-contact {
  position: relative;  /* 配置方法 */
}

/* [18. Contact section] .om-contact__inner */
.om-contact__inner {
  max-width: 840px;  /* 最大幅 */
  margin: 0 auto;  /* 外側の余白 */
}

/* [18. Contact section] .om-contact__lead */
.om-contact__lead {
  margin: 0 0 26px;  /* 外側の余白 */
  text-align: center;  /* 行揃え */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [18. Contact section] .om-contact__box */
.om-contact__box {
  padding: clamp(24px, 3.5vw, 44px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-lg);  /* 影 */
}

/* [18. Contact section] .om-contact__meta */
.om-contact__meta {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  justify-content: center;  /* 横の揃え */
  gap: 10px 24px;  /* 要素の間隔 */
  margin: 24px 0 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [18. Contact section] .om-contact__meta li */
.om-contact__meta li {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
}

/* [18. Contact section] .om-contact__meta .om-ico */
.om-contact__meta .om-ico {
  width: 18px;  /* 幅 */
  height: 18px;  /* 高さ */
  color: var(--om-ink);  /* 文字色 */
}

/* [18. Contact section] .om-contact__fig */
.om-contact__fig {
  width: 150px;  /* 幅 */
  margin: 0 auto 10px;  /* 外側の余白 */
}

/* [18. Contact section] .om-contact__missing */
.om-contact__missing {
  padding: 18px 20px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-yellow-soft);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [18. Contact section] .om-contact__fallback */
.om-contact__fallback {
  display: grid;  /* 表示形式 */
  gap: 16px;  /* 要素の間隔 */
}

/* [18. Contact section] .om-contact__kobito */
.om-contact__kobito {
  position: absolute;  /* 配置方法 */
  right: 4%;  /* 右端 */
  top: 40px;  /* 上端 */
  width: 90px;  /* 幅 */
}

@media (max-width: 1100px) {

  /* [18. Contact section] .om-contact__kobito */
  .om-contact__kobito {
    display: none;  /* 表示形式 */
  }
}

/* ========================================================================
   19. CTA band (light)
   ======================================================================== */

/* [19. CTA band (light)] .om-cta */
.om-cta {
  position: relative;  /* 配置方法 */
  margin: 40px 0;  /* 外側の余白 */
  padding: clamp(28px, 4vw, 44px);  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: var(--om-yellow-soft);  /* 背景 */
  color: var(--om-ink);  /* 文字色 */
  text-align: center;  /* 行揃え */
  overflow: hidden;  /* はみ出し */
  box-shadow: var(--om-sh-md);  /* 影 */
}

/* [19. CTA band (light)] .om-cta--navy */
/* バリエーション: navy */
.om-cta--navy,
.om-cta--blue {
  background: var(--om-sky);  /* 背景 */
}

/* [19. CTA band (light)] .om-cta--pink */
/* バリエーション: pink */
.om-cta--pink {
  background: var(--om-blush);  /* 背景 */
}

/* [19. CTA band (light)] .om-cta__inner */
.om-cta__inner {
  position: relative;  /* 配置方法 */
  z-index: 1;  /* 重なり順 */
  max-width: 720px;  /* 最大幅 */
  margin: 0 auto;  /* 外側の余白 */
}

/* [19. CTA band (light)] .om-cta__title */
.om-cta__title {
  margin: 0 0 10px;  /* 外側の余白 */
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);  /* 文字サイズ */
  color: var(--om-ink);  /* 文字色 */
}

/* [19. CTA band (light)] .om-cta__text */
.om-cta__text {
  margin: 0 0 20px;  /* 外側の余白 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [19. CTA band (light)] .om-cta__actions */
.om-cta__actions {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  justify-content: center;  /* 横の揃え */
  gap: 14px;  /* 要素の間隔 */
}

/* [19. CTA band (light)] .om-cta__note */
.om-cta__note {
  margin: 14px 0 0;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [19. CTA band (light)] .om-cta .om-btn--primary */
/* バリエーション: primary */
.om-cta .om-btn--primary {
  color: #fff;  /* 文字色 */
}

/* [19. CTA band (light)] .om-cta__kobito */
.om-cta__kobito {
  position: absolute;  /* 配置方法 */
  right: 18px;  /* 右端 */
  bottom: 0;  /* 下端 */
  width: 80px;  /* 幅 */
  opacity: 0.95;  /* 不透明度 */
}

@media (max-width: 640px) {

  /* [19. CTA band (light)] .om-cta__kobito */
  .om-cta__kobito {
    display: none;  /* 表示形式 */
  }
}

/* ========================================================================
   20. Page head / breadcrumbs / cards
   ======================================================================== */

/* [20. Page head / breadcrumbs / cards] .om-page-head */
.om-page-head {
  position: relative;  /* 配置方法 */
  padding: clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 40px);  /* 内側の余白 */
  background: var(--om-sky);  /* 背景 */
  border-bottom: var(--om-line);
  overflow: hidden;  /* はみ出し */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head::before */
/* 疑似要素 */
.om-page-head::before {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  inset: 0;  /* 上下左右の位置 */
  background-image: var(--om-pattern-dots-ink);
  background-size: 20px 20px;
  opacity: 0.35;  /* 不透明度 */
  pointer-events: none;  /* クリック可否 */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head > .om-container */
.om-page-head > .om-container {
  position: relative;  /* 配置方法 */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head__eyebrow */
.om-page-head__eyebrow {
  display: inline-block;  /* 表示形式 */
  margin: 0 0 10px;  /* 外側の余白 */
  padding: 2px 12px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  background: var(--om-yellow);  /* 背景 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-ink);  /* 文字色 */
  letter-spacing: 0.1em;  /* 字間 */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head__title */
.om-page-head__title {
  margin: 0 0 12px;  /* 外側の余白 */
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);  /* 文字サイズ */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head__lead */
.om-page-head__lead {
  margin: 0;  /* 外側の余白 */
  max-width: 760px;  /* 最大幅 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head__facts */
.om-page-head__facts {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 8px;  /* 要素の間隔 */
  margin: 16px 0 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head__facts li */
.om-page-head__facts li {
  padding: 4px 12px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
}

/* [20. Page head / breadcrumbs / cards] .om-page-head__search */
.om-page-head__search {
  margin-top: 20px;
  max-width: 560px;  /* 最大幅 */
}

/* [20. Page head / breadcrumbs / cards] .om-breadcrumbs */
.om-breadcrumbs {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
  margin: 0 0 18px;  /* 外側の余白 */
}

/* [20. Page head / breadcrumbs / cards] .om-breadcrumbs__list */
.om-breadcrumbs__list {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 4px 8px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [20. Page head / breadcrumbs / cards] .om-breadcrumbs__item + .om-breadcrumbs__item::before */
/* 疑似要素 */
.om-breadcrumbs__item + .om-breadcrumbs__item::before {
  content: "›";  /* 生成内容 */
  margin-right: 8px;
  color: var(--om-gray-500);  /* 文字色 */
}

/* [20. Page head / breadcrumbs / cards] .om-breadcrumbs a */
.om-breadcrumbs a {
  color: var(--om-gray-600);  /* 文字色 */
  text-decoration: none;  /* 下線 */
}

/* [20. Page head / breadcrumbs / cards] .om-breadcrumbs a:hover */
/* ホバー時 */
.om-breadcrumbs a:hover {
  color: var(--om-navy-deep);  /* 文字色 */
  text-decoration: underline;  /* 下線 */
}

/* [20. Page head / breadcrumbs / cards] .om-cards */
.om-cards {
  display: grid;  /* 表示形式 */
  gap: 22px;  /* 要素の間隔 */
}

@media (min-width: 640px) {

  /* [20. Page head / breadcrumbs / cards] .om-cards */
  .om-cards {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

@media (min-width: 1024px) {

  /* [20. Page head / breadcrumbs / cards] .om-cards */
  .om-cards {
    grid-template-columns: repeat(3, 1fr);  /* グリッドの列 */
  }
}

/* [20. Page head / breadcrumbs / cards] .om-cards--related */
/* バリエーション: related */
.om-cards--related {
  margin-top: 10px;
}

/* [20. Page head / breadcrumbs / cards] .om-card */
.om-card {
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  padding: 22px 22px 20px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
  transition: transform var(--om-m-fast) ease-out, box-shadow var(--om-m-fast) ease-out;  /* 変化のアニメーション */
}

/* [20. Page head / breadcrumbs / cards] .om-card:hover */
/* ホバー時 */
.om-card:hover {
  transform: translate(-2px, -2px);  /* 変形 */
  box-shadow: var(--om-sh-md);  /* 影 */
}

/* [20. Page head / breadcrumbs / cards] .om-card__eyebrow */
.om-card__eyebrow {
  margin: 0 0 6px;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  color: var(--om-accent-deep);  /* 文字色 */
}

/* [20. Page head / breadcrumbs / cards] .om-card__title */
.om-card__title {
  margin: 0 0 8px;  /* 外側の余白 */
  font-size: 1.08rem;  /* 文字サイズ */
  line-height: 1.5;  /* 行間 */
}

/* [20. Page head / breadcrumbs / cards] .om-card__title a */
.om-card__title a {
  color: var(--om-ink);  /* 文字色 */
  text-decoration: none;  /* 下線 */
}

/* [20. Page head / breadcrumbs / cards] .om-card__title a:hover */
/* ホバー時 */
.om-card__title a:hover {
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [20. Page head / breadcrumbs / cards] .om-card__excerpt */
.om-card__excerpt {
  margin: 0 0 12px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [20. Page head / breadcrumbs / cards] .om-card__meta */
.om-card__meta {
  margin-top: auto;
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 6px 12px;  /* 要素の間隔 */
}

/* [20. Page head / breadcrumbs / cards] .om-card__link */
.om-card__link {
  margin-top: 12px;
  font-weight: 700;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
}

/* [20. Page head / breadcrumbs / cards] .om-pagination */
.om-pagination {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  justify-content: center;  /* 横の揃え */
  gap: 8px;  /* 要素の間隔 */
  margin: 40px 0 0;  /* 外側の余白 */
}

/* [20. Page head / breadcrumbs / cards] .om-pagination .page-numbers */
.om-pagination .page-numbers {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  min-width: 44px;
  height: 44px;  /* 高さ */
  padding: 0 12px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-xs);  /* 影 */
  text-decoration: none;  /* 下線 */
  color: var(--om-ink);  /* 文字色 */
  font-weight: 700;  /* 太さ */
}

/* [20. Page head / breadcrumbs / cards] .om-pagination .page-numbers.current */
.om-pagination .page-numbers.current {
  background: var(--om-ink);  /* 背景 */
  color: #fff;  /* 文字色 */
}

/* [20. Page head / breadcrumbs / cards] .om-pagination .page-numbers:hover */
/* ホバー時 */
.om-pagination .page-numbers:hover {
  background: var(--om-yellow);  /* 背景 */
}

/* [20. Page head / breadcrumbs / cards] .om-empty */
.om-empty {
  text-align: center;  /* 行揃え */
  padding: 40px 0;  /* 内側の余白 */
}

/* [20. Page head / breadcrumbs / cards] .om-empty .om-illust */
.om-empty .om-illust {
  width: 200px;  /* 幅 */
  margin: 0 auto 16px;  /* 外側の余白 */
}

/* [20. Page head / breadcrumbs / cards] .om-notice */
.om-notice {
  padding: 14px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [20. Page head / breadcrumbs / cards] .om-notice--warning */
/* バリエーション: warning */
.om-notice--warning {
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [20. Page head / breadcrumbs / cards] .om-note */
.om-note {
  padding: 14px 18px;  /* 内側の余白 */
  border: 1.5px dashed var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* ========================================================================
   21. Hub (topic index) / directory
   ======================================================================== */

/* [21. Hub (topic index) / directory] .om-hub */
.om-hub {
  padding: clamp(40px, 6vw, 64px) 0;  /* 内側の余白 */
}

/* [21. Hub (topic index) / directory] .om-hub__head */
.om-hub__head {
  text-align: center;  /* 行揃え */
  margin-bottom: 28px;
}

/* [21. Hub (topic index) / directory] .om-hub__title */
.om-hub__title {
  margin: 0 0 8px;  /* 外側の余白 */
}

/* [21. Hub (topic index) / directory] .om-hub__lead */
.om-hub__lead {
  margin: 0;  /* 外側の余白 */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [21. Hub (topic index) / directory] .om-hub__list */
.om-hub__list {
  display: grid;  /* 表示形式 */
  gap: 16px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 640px) {

  /* [21. Hub (topic index) / directory] .om-hub__list */
  .om-hub__list {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

@media (min-width: 1024px) {

  /* [21. Hub (topic index) / directory] .om-hub__list */
  .om-hub__list {
    grid-template-columns: repeat(4, 1fr);  /* グリッドの列 */
  }
}

/* [21. Hub (topic index) / directory] .om-hub__item */
.om-hub__item {
  margin: 0;  /* 外側の余白 */
}

/* [21. Hub (topic index) / directory] .om-hub__link */
.om-hub__link {
  display: flex;  /* 表示形式 */
  flex-direction: column;  /* 並ぶ方向 */
  gap: 4px;  /* 要素の間隔 */
  height: 100%;  /* 高さ */
  padding: 16px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
  text-decoration: none;  /* 下線 */
  color: var(--om-ink);  /* 文字色 */
  transition: transform var(--om-m-fast) ease-out, box-shadow var(--om-m-fast) ease-out;  /* 変化のアニメーション */
}

/* [21. Hub (topic index) / directory] .om-hub__link:hover */
/* ホバー時 */
.om-hub__link:hover {
  transform: translate(-2px, -2px);  /* 変形 */
  box-shadow: var(--om-sh-md);  /* 影 */
  color: var(--om-ink);  /* 文字色 */
}

/* [21. Hub (topic index) / directory] .om-hub__label */
.om-hub__label {
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
}

/* [21. Hub (topic index) / directory] .om-hub__persona */
.om-hub__persona,
.om-hub__intent {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [21. Hub (topic index) / directory] .om-hub__count */
.om-hub__count {
  margin-top: auto;
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  color: var(--om-accent-deep);  /* 文字色 */
}

/* [21. Hub (topic index) / directory] .om-directory */
.om-directory {
  padding: clamp(32px, 5vw, 56px) 0;  /* 内側の余白 */
}

/* [21. Hub (topic index) / directory] .om-directory__title */
.om-directory__title {
  margin: 0 0 18px;  /* 外側の余白 */
  font-size: 1.3rem;  /* 文字サイズ */
}

/* [21. Hub (topic index) / directory] .om-directory__list */
.om-directory__list {
  display: grid;  /* 表示形式 */
  gap: 12px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 640px) {

  /* [21. Hub (topic index) / directory] .om-directory__list */
  .om-directory__list {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

@media (min-width: 1024px) {

  /* [21. Hub (topic index) / directory] .om-directory__list */
  .om-directory__list {
    grid-template-columns: repeat(3, 1fr);  /* グリッドの列 */
  }
}

/* [21. Hub (topic index) / directory] .om-directory__item a */
.om-directory__item a {
  display: block;  /* 表示形式 */
  padding: 12px 16px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: #fff;  /* 背景 */
  text-decoration: none;  /* 下線 */
  color: var(--om-ink);  /* 文字色 */
  font-weight: 700;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [21. Hub (topic index) / directory] .om-directory__item a:hover */
/* ホバー時 */
.om-directory__item a:hover {
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [21. Hub (topic index) / directory] .om-directory__desc */
.om-directory__desc,
.om-directory__count {
  display: block;  /* 表示形式 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 500;  /* 太さ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* ========================================================================
   22. Article (reading layout, single column)
   ======================================================================== */

/* [22. Article (reading layout, single column)] .om-article */
.om-article {
  padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 7vw, 80px);  /* 内側の余白 */
}

/* [22. Article (reading layout, single column)] .om-article .om-container--content */
/* バリエーション: content */
.om-article .om-container--content {
  max-width: calc(var(--om-w-content) + var(--om-gutter) * 2);  /* 最大幅 */
}

/* [22. Article (reading layout, single column)] .om-article__header */
.om-article__header {
  margin-bottom: 28px;
}

/* [22. Article (reading layout, single column)] .om-article__eyebrow */
.om-article__eyebrow {
  display: inline-block;  /* 表示形式 */
  margin: 0 0 10px;  /* 外側の余白 */
  padding: 2px 12px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  background: var(--om-yellow);  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  color: var(--om-ink);  /* 文字色 */
  letter-spacing: 0.06em;  /* 字間 */
}

/* [22. Article (reading layout, single column)] .om-article__title */
.om-article__title {
  margin: 0 0 12px;  /* 外側の余白 */
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);  /* 文字サイズ */
  line-height: 1.45;  /* 行間 */
}

/* [22. Article (reading layout, single column)] .om-article__lead */
.om-article__lead {
  margin: 0 0 14px;  /* 外側の余白 */
  font-size: 1.02rem;  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-article__meta */
.om-article__meta {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 6px 16px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 14px 0;  /* 内側の余白 */
  border-top: 2px dashed var(--om-ink);
  border-bottom: 2px dashed var(--om-ink);
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
  list-style: none;  /* リスト記号 */
}

/* [22. Article (reading layout, single column)] .om-article__meta li */
.om-article__meta li {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 6px;  /* 要素の間隔 */
}

/* [22. Article (reading layout, single column)] .om-article__body */
.om-article__body {
  font-size: 1.02rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-prose h2 */
.om-prose h2 {
  position: relative;  /* 配置方法 */
  margin: 2.4em 0 1em;  /* 外側の余白 */
  padding: 0.5em 0.8em 0.5em 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-left-width: 10px;
  border-left-color: var(--om-accent);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);  /* 文字サイズ */
  line-height: 1.45;  /* 行間 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
  border-radius: var(--om-r-md);  /* 角丸 */
}

/* [22. Article (reading layout, single column)] .om-prose h3 */
.om-prose h3 {
  margin: 2em 0 0.8em;  /* 外側の余白 */
  padding-bottom: 0.4em;
  border-bottom: 4px solid var(--om-yellow);
  font-size: clamp(1.15rem, 2vw, 1.3rem);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-prose h4 */
.om-prose h4 {
  margin: 1.6em 0 0.6em;  /* 外側の余白 */
  font-size: 1.08rem;  /* 文字サイズ */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-prose p */
.om-prose p {
  margin: 0 0 1.5em;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-prose ul */
.om-prose ul,
.om-prose ol {
  margin: 0 0 1.5em;  /* 外側の余白 */
  padding-left: 1.5em;
}

/* [22. Article (reading layout, single column)] .om-prose li */
.om-prose li {
  margin: 0.4em 0;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-prose img */
.om-prose img {
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
}

/* [22. Article (reading layout, single column)] .om-prose table */
.om-prose table {
  display: block;  /* 表示形式 */
  overflow-x: auto;  /* 横のはみ出し */
  white-space: normal;  /* 改行の扱い */
  margin: 0 0 1.6em;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-prose figure */
.om-prose figure {
  margin: 0 0 1.8em;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-prose .om-figcaption */
.om-prose .om-figcaption,
.om-prose figcaption {
  margin-top: 8px;
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
  text-align: center;  /* 行揃え */
}

/* [22. Article (reading layout, single column)] .om-prose .om-svg */
.om-prose .om-svg,
.om-prose svg {
  max-width: 100%;  /* 最大幅 */
  height: auto;  /* 高さ */
}

/* [22. Article (reading layout, single column)] .om-prose .om-illust */
.om-prose .om-illust {
  max-width: 440px;  /* 最大幅 */
  margin-inline: auto;
}

/* [22. Article (reading layout, single column)] .om-prose blockquote */
.om-prose blockquote,
.om-prose .om-art-quote {
  margin: 0 0 1.5em;  /* 外側の余白 */
  padding: 1em 1.3em;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-left-width: 6px;
  border-left-color: var(--om-accent);
  background: var(--om-blush);  /* 背景 */
  border-radius: var(--om-r-md);  /* 角丸 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-prose .om-art-quote::before */
/* 疑似要素 */
.om-prose .om-art-quote::before {
  content: "“";  /* 生成内容 */
  font-family: var(--om-font-round);  /* 書体 */
  font-size: 2em;  /* 文字サイズ */
  line-height: 0;  /* 行間 */
  color: var(--om-accent);  /* 文字色 */
  margin-right: 4px;
  vertical-align: -0.3em;
}

/* [22. Article (reading layout, single column)] .om-toc */
.om-toc {
  margin: 0 0 32px;  /* 外側の余白 */
  padding: 22px 24px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [22. Article (reading layout, single column)] .om-toc__details > summary */
.om-toc__details > summary,
.om-toc__summary {
  cursor: pointer;  /* カーソル */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 1.05rem;  /* 文字サイズ */
  list-style: none;  /* リスト記号 */
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 8px;  /* 要素の間隔 */
}

/* [22. Article (reading layout, single column)] .om-toc__summary::-webkit-details-marker */
.om-toc__summary::-webkit-details-marker {
  display: none;  /* 表示形式 */
}

/* [22. Article (reading layout, single column)] .om-toc__summary::before */
/* 疑似要素 */
.om-toc__summary::before {
  content: "";  /* 生成内容 */
  width: 10px;  /* 幅 */
  height: 10px;  /* 高さ */
  border-right: 3px solid var(--om-ink);
  border-bottom: 3px solid var(--om-ink);
  transform: rotate(45deg);  /* 変形 */
  transition: transform var(--om-m-fast);  /* 変化のアニメーション */
}

/* [22. Article (reading layout, single column)] .om-toc__details[open] .om-toc__summary::before */
/* 開いた状態、疑似要素 */
.om-toc__details[open] .om-toc__summary::before {
  transform: rotate(-135deg);  /* 変形 */
}

/* [22. Article (reading layout, single column)] .om-toc__list */
.om-toc__list {
  margin: 14px 0 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  counter-reset: om-toc;
}

/* [22. Article (reading layout, single column)] .om-toc__item */
.om-toc__item {
  margin: 0;  /* 外側の余白 */
  padding: 7px 0;  /* 内側の余白 */
  border-top: 1px dashed var(--om-ink);
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-toc__item--h2 */
/* バリエーション: h2 */
.om-toc__item--h2 {
  counter-increment: om-toc;
}

/* [22. Article (reading layout, single column)] .om-toc__item--h2 > a::before */
/* 疑似要素、バリエーション: h2 */
.om-toc__item--h2 > a::before {
  content: counter(om-toc, decimal-leading-zero);  /* 生成内容 */
  display: inline-block;  /* 表示形式 */
  min-width: 28px;
  margin-right: 8px;
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  color: var(--om-accent-deep);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-toc__item a */
.om-toc__item a {
  color: var(--om-ink);  /* 文字色 */
  text-decoration: none;  /* 下線 */
}

/* [22. Article (reading layout, single column)] .om-toc__item a:hover */
/* ホバー時 */
.om-toc__item a:hover {
  color: var(--om-navy-deep);  /* 文字色 */
  text-decoration: underline;  /* 下線 */
}

/* [22. Article (reading layout, single column)] .om-toc__sub */
.om-toc__sub {
  margin: 6px 0 0 36px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [22. Article (reading layout, single column)] .om-toc__item--h3 */
/* バリエーション: h3 */
.om-toc__item--h3 {
  padding: 4px 0;  /* 内側の余白 */
  border: 0;  /* 枠線 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-answer-first */
.om-answer-first {
  margin: 0 0 28px;  /* 外側の余白 */
  padding: 22px 24px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [22. Article (reading layout, single column)] .om-answer-first__label */
.om-answer-first__label {
  display: inline-block;  /* 表示形式 */
  margin: 0 0 8px;  /* 外側の余白 */
  padding: 2px 12px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  background: var(--om-ink);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-answer-first__text */
.om-answer-first__text,
.om-answer-first__body {
  margin: 0;  /* 外側の余白 */
  font-weight: 700;  /* 太さ */
  line-height: 1.8;  /* 行間 */
}

/* [22. Article (reading layout, single column)] .om-evidence */
.om-evidence {
  margin: 36px 0;  /* 外側の余白 */
  padding: 22px 24px;  /* 内側の余白 */
  border: 2px dashed var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-evidence__label */
.om-evidence__label {
  margin: 0 0 8px;  /* 外側の余白 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-evidence__list */
.om-evidence__list {
  margin: 0;  /* 外側の余白 */
  padding-left: 1.3em;
}

/* [22. Article (reading layout, single column)] .om-evidence__list--refs a */
/* バリエーション: refs */
.om-evidence__list--refs a {
  word-break: break-all;
}

/* [22. Article (reading layout, single column)] .om-evidence__col + .om-evidence__col */
.om-evidence__col + .om-evidence__col {
  margin-top: 14px;
}

/* [22. Article (reading layout, single column)] .om-author */
.om-author {
  display: grid;  /* 表示形式 */
  gap: 18px;  /* 要素の間隔 */
  margin: 40px 0;  /* 外側の余白 */
  padding: 24px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

@media (min-width: 560px) {

  /* [22. Article (reading layout, single column)] .om-author */
  .om-author {
    grid-template-columns: 84px 1fr;  /* グリッドの列 */
  }
}

/* [22. Article (reading layout, single column)] .om-author__avatar */
.om-author__avatar {
  width: 84px;  /* 幅 */
  height: 84px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: #fff;  /* 背景 */
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  overflow: hidden;  /* はみ出し */
}

/* [22. Article (reading layout, single column)] .om-author__avatar .om-kobito */
.om-author__avatar .om-kobito,
.om-author__avatar svg {
  width: 70px;  /* 幅 */
}

/* [22. Article (reading layout, single column)] .om-author__title */
.om-author__title {
  margin: 0 0 2px;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  color: var(--om-accent-deep);  /* 文字色 */
  letter-spacing: 0.06em;  /* 字間 */
}

/* [22. Article (reading layout, single column)] .om-author__name */
.om-author__name {
  margin: 0 0 6px;  /* 外側の余白 */
  font-size: 1.15rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-author__body */
.om-author__body,
.om-author__bio {
  margin: 0 0 8px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-author__links */
.om-author__links {
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-related */
.om-related {
  margin-top: 48px;
  padding: clamp(32px, 5vw, 56px) 0;  /* 内側の余白 */
  background: var(--om-band-gray);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-related__title */
.om-related__title {
  margin: 0 0 20px;  /* 外側の余白 */
  text-align: center;  /* 行揃え */
  font-size: 1.4rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-article__topics */
.om-article__topics {
  margin: 24px 0 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-article__pages */
.om-article__pages {
  margin: 20px 0;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-honeycomb */
.om-honeycomb {
  margin: 32px 0;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-honeycomb__title */
.om-honeycomb__title {
  font-size: 1.1rem;  /* 文字サイズ */
  margin: 0 0 10px;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-table--honeycomb */
/* バリエーション: honeycomb */
.om-table--honeycomb {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-defs */
.om-defs {
  margin: 0 0 28px;  /* 外側の余白 */
  padding: 18px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-yellow-soft);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-defs__label */
.om-defs__label {
  margin: 0 0 6px;  /* 外側の余白 */
  font-weight: 900;  /* 太さ */
  font-family: var(--om-font-round);  /* 書体 */
}

/* [22. Article (reading layout, single column)] .om-defs__list */
.om-defs__list {
  margin: 0;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-defs__row */
.om-defs__row {
  display: grid;  /* 表示形式 */
  grid-template-columns: minmax(110px, 160px) 1fr;  /* グリッドの列 */
  gap: 10px;  /* 要素の間隔 */
  padding: 6px 0;  /* 内側の余白 */
  border-top: 1px dashed var(--om-ink);
}

/* [22. Article (reading layout, single column)] .om-defs__row dt */
.om-defs__row dt {
  font-weight: 700;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-defs__row dd */
.om-defs__row dd {
  margin: 0;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-defs__example */
.om-defs__example {
  color: var(--om-gray-600);  /* 文字色 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-related-searches */
.om-related-searches {
  margin: 32px 0;  /* 外側の余白 */
  padding: 20px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-related-searches__title */
.om-related-searches__title {
  margin: 0 0 8px;  /* 外側の余白 */
  font-size: 1.05rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-related-searches__lead */
.om-related-searches__lead {
  margin: 0 0 10px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-related-searches__list */
.om-related-searches__list {
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 6px;  /* 要素の間隔 */
}

/* [22. Article (reading layout, single column)] .om-related-searches__list li */
.om-related-searches__list li {
  padding: 4px 12px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-glossary */
.om-glossary {
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-article-links */
.om-article-links {
  margin: 32px 0;  /* 外側の余白 */
  padding: 20px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-article-links__title */
.om-article-links__title {
  margin: 0 0 10px;  /* 外側の余白 */
  font-size: 1.05rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-article-links__list */
.om-article-links__list {
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  display: grid;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
}

/* [22. Article (reading layout, single column)] .om-article-links__link */
.om-article-links__link {
  font-weight: 700;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-article-links__desc */
.om-article-links__desc {
  display: block;  /* 表示形式 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-article-links__hub */
.om-article-links__hub {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-navy-deep);  /* 文字色 */
}
/* article body components (used inside the 300 articles) */

/* [22. Article (reading layout, single column)] .om-art-intro */
.om-art-intro {
  margin: 0 0 32px;  /* 外側の余白 */
  display: grid;  /* 表示形式 */
  gap: 14px;  /* 要素の間隔 */
}

/* [22. Article (reading layout, single column)] .om-art-box */
.om-art-box {
  padding: 20px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-art-box--points */
/* バリエーション: points */
.om-art-box--points {
  background: var(--om-sky);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-art-box--reader */
/* バリエーション: reader */
.om-art-box--reader {
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-art-box--result */
/* バリエーション: result */
.om-art-box--result {
  background: var(--om-mint-soft);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-art-box__label */
.om-art-box__label {
  margin: 0 0 8px;  /* 外側の余白 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-art-box--reader .om-art-box__label */
/* バリエーション: reader */
.om-art-box--reader .om-art-box__label {
  color: var(--om-ink);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-art-box--result .om-art-box__label */
/* バリエーション: result */
.om-art-box--result .om-art-box__label {
  color: #15765f;  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-art-box__text */
.om-art-box__text {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-art-points */
.om-art-points {
  margin: 0;  /* 外側の余白 */
  padding-left: 1.3em;
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-art-points li */
.om-art-points li {
  margin: 0.35em 0;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-art-checklist-title */
.om-art-checklist-title,
.om-art-evidence-title,
.om-art-faq-title,
.om-art-howto-title,
.om-art-mistakes-title,
.om-art-next-title {
  margin: 2.2em 0 0.8em;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-art-needs */
.om-art-needs {
  display: grid;  /* 表示形式 */
  gap: 14px;  /* 要素の間隔 */
  margin: 0 0 1.6em;  /* 外側の余白 */
}

@media (min-width: 640px) {

  /* [22. Article (reading layout, single column)] .om-art-needs */
  .om-art-needs {
    grid-template-columns: 1fr 1fr;  /* グリッドの列 */
  }
}

/* [22. Article (reading layout, single column)] .om-art-needs__col */
.om-art-needs__col {
  padding: 16px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-art-needs__label */
.om-art-needs__label {
  margin: 0 0 6px;  /* 外側の余白 */
  font-weight: 900;  /* 太さ */
  font-family: var(--om-font-round);  /* 書体 */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-art-needs__list */
.om-art-needs__list {
  margin: 0;  /* 外側の余白 */
  padding-left: 1.2em;
}

/* [22. Article (reading layout, single column)] .om-art-evidence */
.om-art-evidence {
  margin: 2em 0;  /* 外側の余白 */
  padding: 20px 22px;  /* 内側の余白 */
  border: 2px dashed var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-art-evidence__label */
.om-art-evidence__label {
  font-weight: 900;  /* 太さ */
  margin: 0 0 6px;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-art-evidence__list */
.om-art-evidence__list,
.om-art-evidence__refs {
  margin: 0 0 10px;  /* 外側の余白 */
  padding-left: 1.3em;
}

/* [22. Article (reading layout, single column)] .om-art-evidence__note */
.om-art-evidence__note {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-art-mistakes */
.om-art-mistakes {
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-art-next */
.om-art-next {
  margin: 2.4em 0 0;  /* 外側の余白 */
  padding: 24px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-yellow-soft);  /* 背景 */
  text-align: center;  /* 行揃え */
  box-shadow: var(--om-sh-md);  /* 影 */
}

/* [22. Article (reading layout, single column)] .om-art-next__text */
.om-art-next__text {
  margin: 0 0 14px;  /* 外側の余白 */
  font-weight: 700;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-art-next__action */
.om-art-next__action {
  display: inline-flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  gap: 10px;  /* 要素の間隔 */
  justify-content: center;  /* 横の揃え */
}

/* [22. Article (reading layout, single column)] .om-art-next__button */
.om-art-next__button {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  min-height: 52px;  /* 最小高さ */
  padding: 0 28px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 700;  /* 太さ */
  text-decoration: none;  /* 下線 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [22. Article (reading layout, single column)] .om-art-next__button:hover */
/* ホバー時 */
.om-art-next__button:hover {
  background: var(--om-accent-deep);  /* 背景 */
  color: #fff;  /* 文字色 */
  transform: translate(2px, 2px);  /* 変形 */
  box-shadow: 1px 1px 0 var(--om-ink);  /* 影 */
}

/* [22. Article (reading layout, single column)] .om-art-table */
.om-art-table,
.om-table {
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-art-table th */
.om-art-table th,
.om-table th {
  background: var(--om-sky);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-table--mistakes th */
/* バリエーション: mistakes */
.om-table--mistakes th {
  background: var(--om-blush);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-stack-table th */
.om-stack-table th,
.om-stack-table td {
  vertical-align: top;
}

@media (max-width: 640px) {

  /* [22. Article (reading layout, single column)] .om-stack-table thead */
  .om-stack-table thead {
    display: none;  /* 表示形式 */
  }

  /* [22. Article (reading layout, single column)] .om-stack-table tr */
  .om-stack-table tr {
    display: block;  /* 表示形式 */
    margin-bottom: 12px;
    border: var(--om-line);  /* 枠線 */
    border-radius: var(--om-r-md);  /* 角丸 */
  }

  /* [22. Article (reading layout, single column)] .om-stack-table td */
  .om-stack-table td {
    display: block;  /* 表示形式 */
    border: 0;  /* 枠線 */
    border-top: 1px solid var(--om-gray-200);
  }

  /* [22. Article (reading layout, single column)] .om-stack-table td::before */
  /* 疑似要素 */
  .om-stack-table td::before {
    content: attr(data-label);  /* 生成内容 */
    display: block;  /* 表示形式 */
    font-size: var(--om-fs-xs);  /* 文字サイズ */
    color: var(--om-gray-600);  /* 文字色 */
    font-weight: 700;  /* 太さ */
  }
}

/* [22. Article (reading layout, single column)] .om-flow-figure */
.om-flow-figure {
  margin: 0 0 1.8em;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-flow */
.om-flow {
  display: grid;  /* 表示形式 */
  gap: 10px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  counter-reset: om-flow-fig;
}

/* [22. Article (reading layout, single column)] .om-flow__step */
.om-flow__step {
  display: grid;  /* 表示形式 */
  grid-template-columns: 44px 1fr;  /* グリッドの列 */
  gap: 12px;  /* 要素の間隔 */
  align-items: flex-start;  /* 縦の揃え */
  padding: 14px 16px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-xs);  /* 影 */
}

/* [22. Article (reading layout, single column)] .om-flow__num */
.om-flow__num {
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 40px;  /* 幅 */
  height: 40px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-navy);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-flow__title */
.om-flow__title {
  margin: 0 0 4px;  /* 外側の余白 */
  font-size: 1rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-flow__text */
.om-flow__text,
.om-flow__body {
  margin: 0;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  color: var(--om-ink-soft);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-bars */
.om-bars {
  display: grid;  /* 表示形式 */
  gap: 10px;  /* 要素の間隔 */
  margin: 0 0 1.6em;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-bars__row */
.om-bars__row {
  display: grid;  /* 表示形式 */
  grid-template-columns: minmax(90px, 140px) 1fr 90px;  /* グリッドの列 */
  gap: 10px;  /* 要素の間隔 */
  align-items: center;  /* 縦の揃え */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-bars__row--line */
/* バリエーション: line */
.om-bars__row--line {
  grid-template-columns: 1fr;  /* グリッドの列 */
  border-top: 2px dashed var(--om-ink);
  height: 0;  /* 高さ */
}

/* [22. Article (reading layout, single column)] .om-bars__label */
.om-bars__label {
  font-weight: 700;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-bars__track */
.om-bars__track {
  height: 16px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-sm);  /* 角丸 */
  background: #fff;  /* 背景 */
  overflow: hidden;  /* はみ出し */
}

/* [22. Article (reading layout, single column)] .om-bars__fill */
.om-bars__fill {
  height: 100%;  /* 高さ */
  background: var(--om-navy);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-bars__row--cost .om-bars__fill */
/* バリエーション: cost */
.om-bars__row--cost .om-bars__fill {
  background: var(--om-accent);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-bars__row--gain .om-bars__fill */
/* バリエーション: gain */
.om-bars__row--gain .om-bars__fill {
  background: var(--om-mint);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-bars__row--warn .om-bars__fill */
/* バリエーション: warn */
.om-bars__row--warn .om-bars__fill {
  background: var(--om-yellow);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-bars__value */
.om-bars__value {
  text-align: right;  /* 行揃え */
  font-weight: 700;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-calc */
.om-calc {
  margin: 0 0 1.8em;  /* 外側の余白 */
  padding: 20px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-calc__title */
.om-calc__title {
  margin: 0 0 10px;  /* 外側の余白 */
  font-size: 1.05rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-calc__text */
.om-calc__text {
  margin: 0 0 10px;  /* 外側の余白 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-calc__label */
.om-calc__label {
  font-weight: 700;  /* 太さ */
}

/* [22. Article (reading layout, single column)] .om-calc__note */
.om-calc__note {
  margin: 8px 0 0;  /* 外側の余白 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-calc__table */
.om-calc__table {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-calc__table--grid td */
/* バリエーション: grid */
.om-calc__table--grid td,
.om-calc__table--grid th {
  text-align: center;  /* 行揃え */
}

/* [22. Article (reading layout, single column)] .om-calc__chart */
.om-calc__chart {
  margin-top: 10px;
}

/* [22. Article (reading layout, single column)] .om-checklist */
.om-checklist {
  margin: 0 0 1.6em;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  display: grid;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
}

/* [22. Article (reading layout, single column)] .om-checklist li */
.om-checklist li {
  position: relative;  /* 配置方法 */
  padding: 10px 14px 10px 44px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: #fff;  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-checklist li::before */
/* 疑似要素 */
.om-checklist li::before {
  content: "";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 14px;  /* 左端 */
  top: 11px;  /* 上端 */
  width: 20px;  /* 幅 */
  height: 20px;  /* 高さ */
  border-radius: 4px;  /* 角丸 */
  border: 2px solid var(--om-ink);  /* 枠線 */
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [22. Article (reading layout, single column)] .om-example */
.om-example {
  margin: 0 0 1.6em;  /* 外側の余白 */
  padding: 16px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-blush);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-example__title */
.om-example__title {
  margin: 0 0 6px;  /* 外側の余白 */
  font-weight: 900;  /* 太さ */
  font-family: var(--om-font-round);  /* 書体 */
  color: var(--om-accent-deep);  /* 文字色 */
}

/* [22. Article (reading layout, single column)] .om-example__text */
.om-example__text {
  margin: 0;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-list */
.om-list,
.om-list--ordered {
  font-size: 1rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-faq-q */
.om-faq-q {
  margin: 1.6em 0 0.4em;  /* 外側の余白 */
  padding-left: 40px;
  position: relative;  /* 配置方法 */
  font-size: 1.05rem;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-faq-q::before */
/* 疑似要素 */
.om-faq-q::before {
  content: "Q";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 0;  /* 左端 */
  top: 0;  /* 上端 */
  width: 30px;  /* 幅 */
  height: 30px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-sm);  /* 角丸 */
  background: var(--om-ink);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
}

/* [22. Article (reading layout, single column)] .om-faq-a */
.om-faq-a {
  position: relative;  /* 配置方法 */
  margin: 0 0 1em;  /* 外側の余白 */
  padding-left: 40px;
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-faq-a::before */
/* 疑似要素 */
.om-faq-a::before {
  content: "A";  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 0;  /* 左端 */
  top: 2px;  /* 上端 */
  width: 30px;  /* 幅 */
  height: 30px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-sm);  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
}

/* [22. Article (reading layout, single column)] .om-howto */
.om-howto {
  margin: 0 0 1.6em;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  counter-reset: om-howto;
  display: grid;  /* 表示形式 */
  gap: 10px;  /* 要素の間隔 */
}

/* [22. Article (reading layout, single column)] .om-howto li */
.om-howto li {
  position: relative;  /* 配置方法 */
  padding: 12px 16px 12px 52px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  counter-increment: om-howto;
}

/* [22. Article (reading layout, single column)] .om-howto li::before */
/* 疑似要素 */
.om-howto li::before {
  content: counter(om-howto);  /* 生成内容 */
  position: absolute;  /* 配置方法 */
  left: 14px;  /* 左端 */
  top: 12px;  /* 上端 */
  width: 28px;  /* 幅 */
  height: 28px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-navy);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
}

/* [22. Article (reading layout, single column)] .om-howto li strong */
.om-howto li strong {
  display: block;  /* 表示形式 */
  margin-bottom: 2px;
}

/* [22. Article (reading layout, single column)] .om-figcaption */
.om-figcaption {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
  text-align: center;  /* 行揃え */
}
/* diagrams (includes/diagrams.php) — pop line-art: black outlines, flat fills */

/* [22. Article (reading layout, single column)] .om-diagram */
.om-diagram {
  margin: 0 0 1.8em;  /* 外側の余白 */
}

/* [22. Article (reading layout, single column)] .om-diagram .om-dg */
.om-diagram .om-dg,
.om-dg {
  display: block;  /* 表示形式 */
  width: 100%;  /* 幅 */
  max-width: 760px;  /* 最大幅 */
  height: auto;  /* 高さ */
  margin-inline: auto;
}

/* [22. Article (reading layout, single column)] .om-dg text */
.om-dg text {
  font-family: var(--om-font-sans);  /* 書体 */
  fill: var(--om-ink);
}

/* [22. Article (reading layout, single column)] .om-dg-text */
.om-dg-text {
  fill: var(--om-ink);
  font-size: 14px;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-dg-text-on */
.om-dg-text-on {
  fill: #fff;
  font-size: 13px;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-dg-title */
.om-dg-title {
  fill: var(--om-ink);
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 18px;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-dg-title-on */
.om-dg-title-on {
  fill: #fff;
  font-family: var(--om-font-round);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 18px;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-dg-sub */
.om-dg-sub {
  fill: var(--om-gray-600);
  font-size: 12px;  /* 文字サイズ */
}

/* [22. Article (reading layout, single column)] .om-dg-num */
.om-dg-num {
  fill: var(--om-accent-deep);
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: 14px;  /* 文字サイズ */
  letter-spacing: 0.1em;  /* 字間 */
}

/* [22. Article (reading layout, single column)] .om-dg-box */
.om-dg-box {
  fill: #fff;
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-box-navy */
.om-dg-box-navy {
  fill: var(--om-navy);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-box-accent */
.om-dg-box-accent {
  fill: var(--om-accent);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-box-light */
.om-dg-box-light {
  fill: var(--om-sky);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-road */
.om-dg-road {
  fill: var(--om-yellow);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-road-line */
.om-dg-road-line {
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-dot */
.om-dg-dot {
  fill: var(--om-accent);
  stroke: var(--om-ink);
  stroke-width: 3;
}

/* [22. Article (reading layout, single column)] .om-dg-line */
.om-dg-line {
  stroke: var(--om-gray-500);
  stroke-width: 2;
  fill: none;
}

/* [22. Article (reading layout, single column)] .om-dg-arrow */
.om-dg-arrow {
  stroke: var(--om-ink);
  stroke-width: 2.5;
  fill: none;
}

/* [22. Article (reading layout, single column)] .om-dg-arrowhead */
.om-dg-arrowhead {
  fill: var(--om-ink);
}

/* [22. Article (reading layout, single column)] .om-dg-loop */
.om-dg-loop {
  stroke: var(--om-accent);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 6 6;
}

/* [22. Article (reading layout, single column)] .om-dg-funnel */
.om-dg-funnel {
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-funnel-0 */
.om-dg-funnel-0 {
  fill: var(--om-gray-300);
}

/* [22. Article (reading layout, single column)] .om-dg-funnel-1 */
.om-dg-funnel-1 {
  fill: var(--om-blue-light);
}

/* [22. Article (reading layout, single column)] .om-dg-funnel-2 */
.om-dg-funnel-2 {
  fill: var(--om-navy);
}

/* [22. Article (reading layout, single column)] .om-dg-funnel-3 */
.om-dg-funnel-3 {
  fill: var(--om-navy-deep);
}

/* [22. Article (reading layout, single column)] .om-dg-funnel-4 */
.om-dg-funnel-4 {
  fill: var(--om-accent);
}

/* [22. Article (reading layout, single column)] .om-dg-bar */
.om-dg-bar {
  fill: var(--om-gray-100);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-bar-accent */
.om-dg-bar-accent {
  fill: var(--om-navy);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-tri */
.om-dg-tri {
  fill: none;
  stroke: var(--om-ink);
  stroke-width: 2;
  stroke-dasharray: 8 6;
}

/* [22. Article (reading layout, single column)] .om-dg-layer */
.om-dg-layer {
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-layer-0 */
.om-dg-layer-0 {
  fill: var(--om-navy-deep);
}

/* [22. Article (reading layout, single column)] .om-dg-layer-1 */
.om-dg-layer-1 {
  fill: var(--om-navy);
}

/* [22. Article (reading layout, single column)] .om-dg-layer-2 */
.om-dg-layer-2 {
  fill: var(--om-accent);
}

/* [22. Article (reading layout, single column)] .om-dg-layer-3 */
.om-dg-layer-3 {
  fill: var(--om-yellow-soft);
}

/* [22. Article (reading layout, single column)] .om-dg-pillar */
.om-dg-pillar {
  fill: var(--om-navy);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-node */
.om-dg-node {
  fill: var(--om-accent);
  stroke: var(--om-ink);
  stroke-width: 2;
}

/* [22. Article (reading layout, single column)] .om-dg-link */
.om-dg-link {
  stroke: var(--om-gray-500);
  stroke-width: 1.5;
}

/* [22. Article (reading layout, single column)] .om-dg-row */
.om-dg-row {
  fill: #fff;
  stroke: var(--om-ink);
  stroke-width: 1.5;
}

/* [22. Article (reading layout, single column)] .om-dg-row-alt */
.om-dg-row-alt {
  fill: var(--om-gray-50);
  stroke: var(--om-ink);
  stroke-width: 1.5;
}

/* ========================================================================
   23. Interview / case sheet
   ======================================================================== */

/* [23. Interview / case sheet] .om-interview */
.om-interview {
  display: grid;  /* 表示形式 */
  gap: 16px;  /* 要素の間隔 */
}

/* [23. Interview / case sheet] .om-interview__q */
.om-interview__q {
  display: flex;  /* 表示形式 */
  gap: 12px;  /* 要素の間隔 */
  align-items: flex-start;  /* 縦の揃え */
}

/* [23. Interview / case sheet] .om-interview__a */
.om-interview__a {
  display: flex;  /* 表示形式 */
  gap: 12px;  /* 要素の間隔 */
  align-items: flex-start;  /* 縦の揃え */
  flex-direction: row-reverse;  /* 並ぶ方向 */
  text-align: left;  /* 行揃え */
}

/* [23. Interview / case sheet] .om-interview__avatar */
.om-interview__avatar {
  flex: 0 0 48px;  /* 伸縮 */
  width: 48px;  /* 幅 */
  height: 48px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: #fff;  /* 背景 */
  overflow: hidden;  /* はみ出し */
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
}

/* [23. Interview / case sheet] .om-interview__avatar .om-kobito */
.om-interview__avatar .om-kobito {
  width: 40px;  /* 幅 */
}

/* [23. Interview / case sheet] .om-interview__bubble */
.om-interview__bubble {
  max-width: 86%;  /* 最大幅 */
  padding: 14px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [23. Interview / case sheet] .om-interview__a .om-interview__bubble */
.om-interview__a .om-interview__bubble {
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-sm);  /* 影 */
}

/* [23. Interview / case sheet] .om-interview__name */
.om-interview__name {
  display: block;  /* 表示形式 */
  margin-bottom: 4px;
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 900;  /* 太さ */
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [23. Interview / case sheet] .om-case-sheet */
.om-case-sheet {
  margin: 0 0 1.8em;  /* 外側の余白 */
  padding: 20px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [23. Interview / case sheet] .om-case-sheet dl */
.om-case-sheet dl {
  display: grid;  /* 表示形式 */
  grid-template-columns: minmax(100px, 140px) 1fr;  /* グリッドの列 */
  gap: 8px 12px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
}

/* [23. Interview / case sheet] .om-case-sheet dt */
.om-case-sheet dt {
  font-weight: 700;  /* 太さ */
}

/* [23. Interview / case sheet] .om-case-sheet dd */
.om-case-sheet dd {
  margin: 0;  /* 外側の余白 */
}

/* [23. Interview / case sheet] .om-case-nav */
.om-case-nav {
  display: grid;  /* 表示形式 */
  gap: 12px;  /* 要素の間隔 */
  margin: 0 0 2em;  /* 外側の余白 */
}

@media (min-width: 640px) {

  /* [23. Interview / case sheet] .om-case-nav */
  .om-case-nav {
    grid-template-columns: repeat(5, 1fr);  /* グリッドの列 */
  }
}

/* [23. Interview / case sheet] .om-case-nav a */
.om-case-nav a {
  display: block;  /* 表示形式 */
  padding: 10px 12px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: var(--om-sky);  /* 背景 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
  text-align: center;  /* 行揃え */
  text-decoration: none;  /* 下線 */
  color: var(--om-ink);  /* 文字色 */
}

/* [23. Interview / case sheet] .om-case-nav a:hover */
/* ホバー時 */
.om-case-nav a:hover {
  background: var(--om-yellow);  /* 背景 */
}

/* [23. Interview / case sheet] .om-result-first */
.om-result-first {
  margin: 0 0 2em;  /* 外側の余白 */
  padding: 24px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: var(--om-yellow-soft);  /* 背景 */
  box-shadow: var(--om-sh-md);  /* 影 */
}

/* [23. Interview / case sheet] .om-result-first__title */
.om-result-first__title {
  margin: 0 0 12px;  /* 外側の余白 */
  font-size: 1.2rem;  /* 文字サイズ */
}

/* [23. Interview / case sheet] .om-result-first__grid */
.om-result-first__grid {
  display: grid;  /* 表示形式 */
  grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  gap: 10px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 640px) {

  /* [23. Interview / case sheet] .om-result-first__grid */
  .om-result-first__grid {
    grid-template-columns: repeat(4, 1fr);  /* グリッドの列 */
  }
}

/* [23. Interview / case sheet] .om-result-first__grid li */
.om-result-first__grid li {
  padding: 12px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: #fff;  /* 背景 */
  text-align: center;  /* 行揃え */
}

/* [23. Interview / case sheet] .om-result-first__grid strong */
.om-result-first__grid strong {
  display: block;  /* 表示形式 */
  font-family: var(--om-font-display);  /* 書体 */
  font-size: 1.5rem;  /* 文字サイズ */
  color: var(--om-navy-deep);  /* 文字色 */
  line-height: 1.2;  /* 行間 */
}

/* [23. Interview / case sheet] .om-result-first__grid span */
.om-result-first__grid span {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [23. Interview / case sheet] .om-honeycomb-score */
.om-honeycomb-score {
  display: grid;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
  margin: 0 0 1.6em;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 640px) {

  /* [23. Interview / case sheet] .om-honeycomb-score */
  .om-honeycomb-score {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

/* [23. Interview / case sheet] .om-honeycomb-score li */
.om-honeycomb-score li {
  display: flex;  /* 表示形式 */
  justify-content: space-between;  /* 横の揃え */
  gap: 10px;  /* 要素の間隔 */
  padding: 10px 14px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [23. Interview / case sheet] .om-honeycomb-score b */
.om-honeycomb-score b {
  color: var(--om-navy-deep);  /* 文字色 */
}

/* ========================================================================
   24. Search / 404 / comments
   ======================================================================== */

/* [24. Search / 404 / comments] .om-searchform */
.om-searchform {
  display: flex;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
}

/* [24. Search / 404 / comments] .om-searchform__input */
.om-searchform__input {
  flex: 1 1 auto;  /* 伸縮 */
  min-height: 52px;  /* 最小高さ */
  padding: 10px 18px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
}

/* [24. Search / 404 / comments] .om-searchform__input:focus */
/* フォーカス時 */
.om-searchform__input:focus {
  outline: none;  /* フォーカス枠 */
  box-shadow: var(--om-sh-pink);  /* 影 */
}

/* [24. Search / 404 / comments] .om-searchform__submit */
.om-searchform__submit {
  flex: 0 0 auto;  /* 伸縮 */
  width: 52px;  /* 幅 */
  height: 52px;  /* 高さ */
  border: var(--om-line);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  box-shadow: var(--om-sh-xs);  /* 影 */
}

/* [24. Search / 404 / comments] .om-search */
.om-search {
  padding: clamp(32px, 5vw, 56px) 0;  /* 内側の余白 */
}

/* [24. Search / 404 / comments] .om-404 */
.om-404 {
  padding: clamp(48px, 7vw, 96px) 0;  /* 内側の余白 */
  text-align: center;  /* 行揃え */
}

/* [24. Search / 404 / comments] .om-404__links */
.om-404__links {
  margin-top: 32px;
  text-align: left;  /* 行揃え */
}

/* [24. Search / 404 / comments] .om-404__links-title */
.om-404__links-title {
  font-size: 1.1rem;  /* 文字サイズ */
  margin: 0 0 10px;  /* 外側の余白 */
}

/* [24. Search / 404 / comments] .om-404__links-list */
.om-404__links-list {
  display: grid;  /* 表示形式 */
  gap: 8px;  /* 要素の間隔 */
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

@media (min-width: 640px) {

  /* [24. Search / 404 / comments] .om-404__links-list */
  .om-404__links-list {
    grid-template-columns: repeat(2, 1fr);  /* グリッドの列 */
  }
}

/* [24. Search / 404 / comments] .om-404__links-list a */
.om-404__links-list a {
  display: block;  /* 表示形式 */
  padding: 10px 14px;  /* 内側の余白 */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-md);  /* 角丸 */
  background: #fff;  /* 背景 */
  text-decoration: none;  /* 下線 */
  font-weight: 700;  /* 太さ */
  color: var(--om-ink);  /* 文字色 */
}

/* [24. Search / 404 / comments] .om-404__links-list a:hover */
/* ホバー時 */
.om-404__links-list a:hover {
  background: var(--om-yellow-soft);  /* 背景 */
}

/* [24. Search / 404 / comments] .om-comments */
.om-comments {
  margin-top: 48px;
}

/* [24. Search / 404 / comments] .om-comments__title */
.om-comments__title {
  font-size: 1.3rem;  /* 文字サイズ */
}

/* [24. Search / 404 / comments] .om-comments__list */
.om-comments__list {
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [24. Search / 404 / comments] .om-comment */
.om-comment {
  padding: 18px 0;  /* 内側の余白 */
  border-top: 1px dashed var(--om-ink);
}

/* [24. Search / 404 / comments] .om-comment__meta */
.om-comment__meta {
  display: flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 10px;  /* 要素の間隔 */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* [24. Search / 404 / comments] .om-comment__avatar img */
.om-comment__avatar img {
  border-radius: 50%;  /* 角丸 */
}

/* [24. Search / 404 / comments] .om-comment__content */
.om-comment__content {
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [24. Search / 404 / comments] .om-comment-form */
.om-comment-form {
  margin-top: 24px;
}

/* [24. Search / 404 / comments] .om-comment-form__submit */
.om-comment-form__submit {
  margin-top: 10px;
}

/* [24. Search / 404 / comments] .om-comment-policy */
.om-comment-policy {
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
}

/* ========================================================================
   25. Sidebar / widgets (blog only)
   ======================================================================== */

/* [25. Sidebar / widgets (blog only)] .om-with-sidebar */
.om-with-sidebar {
  display: grid;  /* 表示形式 */
  gap: 40px;  /* 要素の間隔 */
}

@media (min-width: 1024px) {

  /* [25. Sidebar / widgets (blog only)] .om-with-sidebar */
  .om-with-sidebar {
    grid-template-columns: minmax(0, 1fr) 300px;  /* グリッドの列 */
  }
}

/* [25. Sidebar / widgets (blog only)] .om-sidebar */
.om-sidebar {
  display: grid;  /* 表示形式 */
  gap: 20px;  /* 要素の間隔 */
  align-content: start;
}

/* [25. Sidebar / widgets (blog only)] .om-widget */
.om-widget {
  padding: 20px 22px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  background: var(--om-gray-50);  /* 背景 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
}

/* [25. Sidebar / widgets (blog only)] .om-widget__title */
.om-widget__title {
  margin: 0 0 12px;  /* 外側の余白 */
  font-size: 1.05rem;  /* 文字サイズ */
}

/* [25. Sidebar / widgets (blog only)] .om-widget__list */
.om-widget__list {
  margin: 0;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
}

/* [25. Sidebar / widgets (blog only)] .om-widget__list li */
.om-widget__list li {
  padding: 6px 0;  /* 内側の余白 */
  border-top: 1px dashed var(--om-ink);
}

/* [25. Sidebar / widgets (blog only)] .om-widget__list a */
.om-widget__list a {
  text-decoration: none;  /* 下線 */
  color: var(--om-ink);  /* 文字色 */
}

/* [25. Sidebar / widgets (blog only)] .om-widget__list a:hover */
/* ホバー時 */
.om-widget__list a:hover {
  color: var(--om-navy-deep);  /* 文字色 */
}

/* [25. Sidebar / widgets (blog only)] .om-widget--cta */
/* バリエーション: cta */
.om-widget--cta {
  background: var(--om-yellow-soft);  /* 背景 */
  text-align: center;  /* 行揃え */
}

/* [25. Sidebar / widgets (blog only)] .om-widget ul */
.om-widget ul {
  padding-left: 1.2em;
}

/* ========================================================================
   26. Reveal (additive only; content visible without JS)
   ======================================================================== */

/* [26. Reveal (additive only; content visible without JS)] .om-js [data-om-animate] */
.om-js [data-om-animate] {
  opacity: 0;  /* 不透明度 */
  transform: translateY(18px);  /* 変形 */
  transition: opacity 0.7s var(--om-m-ease-out), transform 0.7s var(--om-m-ease-out);  /* 変化のアニメーション */
}

/* [26. Reveal (additive only; content visible without JS)] .om-js [data-om-animate].is-inview */
/* 表示状態 */
.om-js [data-om-animate].is-inview {
  opacity: 1;  /* 不透明度 */
  transform: none;  /* 変形 */
}

/* [26. Reveal (additive only; content visible without JS)] .om-js .om-reveal-done [data-om-animate] */
.om-js .om-reveal-done [data-om-animate] {
  opacity: 1;  /* 不透明度 */
  transform: none;  /* 変形 */
}

/* [26. Reveal (additive only; content visible without JS)] .om-reduced-motion [data-om-animate] */
.om-reduced-motion [data-om-animate] {
  opacity: 1 !important;  /* 不透明度 */
  transform: none !important;  /* 変形 */
}

/* ========================================================================
   27. Figures (diagrams.php)
   ======================================================================== */

/* [27. Figures (diagrams.php)] .om-figure */
.om-figure {
  margin: 32px 0;  /* 外側の余白 */
}

/* [27. Figures (diagrams.php)] .om-figure__canvas */
.om-figure__canvas {
  padding: 16px;  /* 内側の余白 */
  background: #fff;  /* 背景 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-lg);  /* 角丸 */
  box-shadow: var(--om-sh-sm);  /* 影 */
  overflow-x: auto;  /* 横のはみ出し */
  -webkit-overflow-scrolling: touch;
}

/* [27. Figures (diagrams.php)] .om-figure__canvas svg */
.om-figure__canvas svg {
  display: block;  /* 表示形式 */
  width: 100%;  /* 幅 */
  height: auto;  /* 高さ */
  min-width: 320px;
  max-width: 760px;  /* 最大幅 */
  margin-inline: auto;
  font-family: var(--om-font-sans);  /* 書体 */
}

/* [27. Figures (diagrams.php)] .om-figure--mobile */
/* バリエーション: mobile */
.om-figure--mobile {
  display: block;  /* 表示形式 */
}

/* [27. Figures (diagrams.php)] .om-figure--desktop */
/* バリエーション: desktop */
.om-figure--desktop {
  display: none;  /* 表示形式 */
}

@media (min-width: 768px) {

  /* [27. Figures (diagrams.php)] .om-figure--mobile */
  /* バリエーション: mobile */
  .om-figure--mobile {
    display: none;  /* 表示形式 */
  }

  /* [27. Figures (diagrams.php)] .om-figure--desktop */
  /* バリエーション: desktop */
  .om-figure--desktop {
    display: block;  /* 表示形式 */
  }
}

/* [27. Figures (diagrams.php)] .om-figure__caption */
.om-figure__caption {
  margin-top: 10px;
  font-size: var(--om-fs-xs);  /* 文字サイズ */
  color: var(--om-gray-600);  /* 文字色 */
  text-align: center;  /* 行揃え */
}

/* [27. Figures (diagrams.php)] .om-case-chart */
.om-case-chart {
  max-width: 640px;  /* 最大幅 */
  margin-inline: auto;
}

/* [27. Figures (diagrams.php)] .om-page-end-form */
.om-page-end-form {
  background: var(--om-band-gray);  /* 背景 */
}

/* [27. Figures (diagrams.php)] .om-contact-steps */
.om-contact-steps {
  display: flex;  /* 表示形式 */
  flex-wrap: wrap;  /* 折り返し */
  justify-content: center;  /* 横の揃え */
  gap: 10px;  /* 要素の間隔 */
  margin: 0 0 26px;  /* 外側の余白 */
  padding: 0;  /* 内側の余白 */
  list-style: none;  /* リスト記号 */
  counter-reset: om-cs;
}

/* [27. Figures (diagrams.php)] .om-contact-steps li */
.om-contact-steps li {
  counter-increment: om-cs;
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  gap: 8px;  /* 要素の間隔 */
  padding: 8px 16px 8px 8px;  /* 内側の余白 */
  border: var(--om-line);  /* 枠線 */
  border-radius: var(--om-r-pill);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-xs);  /* 影 */
  font-size: var(--om-fs-sm);  /* 文字サイズ */
  font-weight: 700;  /* 太さ */
}

/* [27. Figures (diagrams.php)] .om-contact-steps li::before */
/* 疑似要素 */
.om-contact-steps li::before {
  content: counter(om-cs);  /* 生成内容 */
  display: inline-flex;  /* 表示形式 */
  align-items: center;  /* 縦の揃え */
  justify-content: center;  /* 横の揃え */
  width: 26px;  /* 幅 */
  height: 26px;  /* 高さ */
  border: 1.5px solid var(--om-ink);  /* 枠線 */
  border-radius: 50%;  /* 角丸 */
  background: var(--om-accent);  /* 背景 */
  color: #fff;  /* 文字色 */
  font-family: var(--om-font-display);  /* 書体 */
  font-weight: 900;  /* 太さ */
  font-size: var(--om-fs-xs);  /* 文字サイズ */
}

/* [27. Figures (diagrams.php)] .om-contact-form-wrap */
.om-contact-form-wrap {
  padding: clamp(22px, 3.5vw, 44px);  /* 内側の余白 */
  border: 3px solid var(--om-ink);  /* 枠線 */
  border-radius: var(--om-r-xl);  /* 角丸 */
  background: #fff;  /* 背景 */
  box-shadow: var(--om-sh-xl);  /* 影 */
}

/* [27. Figures (diagrams.php)] .om-contact-form-wrap .wpcf7 input[type="submit"] */
.om-contact-form-wrap .wpcf7 input[type="submit"],
.om-contact-form-wrap .wpcf7 button[type="submit"] {
  min-width: min(100%, 360px);
}