@charset "UTF-8";
/***************************************************************
* usecase.css
* 業種別ソリューションの共通スタイル（詳細ページ＋index.html。20260705にindexも読み込む運用に変更）
*
* 運用ルール（詳細は /orange-pos-style-guide.md）
* 1. 新規クラスは必ず uc- 接頭辞を付ける
* 2. 素のタグセレクタ（section p など）は追加禁止
* 3. common/*.css の上書きが必要な場合もこのファイルに書き、
*    日付・名前・理由をコメントで残す（例: 20260705 isa 〜のため上書き）
* 4. 既存の /css/usecase/style.css には追加しない（レガシー扱い・凍結）
*
* 読み込み順:
*   firstview.css → common-header.css → common.css → style.css → usecase.css
****************************************************************/

/* ============================================================
   デザイントークン（foundation-hybrid.css から移植 20260705 isa）
   - 本家は 1rem=16px 前提だが本サイトは html{font-size:62.5%}（1rem=10px）
     のため空間スケールは×1.6補正済み
   - Base層（素のタグセレクタ）は持ち込まない（common.cssと衝突するため）
   - ブランド色はoklch導出ではなくサイト実色にピン留め
   - ルール: uc-コンポーネントは原則トークンを参照し、新しい色を発明しない。
     不足トークンがあれば実装せず報告する
   ============================================================ */
:root {
  /* 20260706 isa 直接参照用の無彩色（foundation-hybrid.css の Layer 1 と同名）
     zebra 背景など「白/グレーそのもの」を指す文脈で使う。
     セマンティックな面（--color-bg/--color-surface）は下段のスロット経由でも参照可 */
  --white: #fff;
  --gray-1: #f7f7f7;
  --gray-2: #F0F0F0;

  /* 無彩色スロット */
  --color-bg: #fff;
  --color-surface: #f7f7f7;
  --color-border: #d8d8d8;
  --color-text-muted: #999;

  /* ブランド色（サイト実色にピン留め） */
  --color-action: #ff8c00;
  /* ボタン・リンク・装飾オレンジ */
  --color-action-hover: #ff4d00;
  --color-action-tint: #ffe9d2;
  /* 白抜きボタンhover等の薄オレンジ */
  --color-emphasis: #FF6600;
  /* 資料DL CTA系（knowledge移植コンポーネント）
     20260729 isa #FFEADBは濃すぎるため #fff5ed に変更。
     ORANGE-CXセクション背景と同値。導入事例の引用背景はFigma指定#fff3eaに近づく */
  --color-emphasis-bg: #fff5ed;

  --uc-kv-overlay: linear-gradient(270deg, rgba(255, 173, 111, 0.7) 1.45%, rgba(255, 109, 29, 0.7) 90.4%);
  --uc-kv-cta-grad: linear-gradient(90deg, #ff4920, #ff5e00);


  /* 空間スケール（×1.6補正済み） */
  --s-1: 0.4rem;
  /*  4px */
  --s-2: 0.8rem;
  /*  8px */
  --s-3: 1.2rem;
  /* 12px */
  --s-4: 1.6rem;
  /* 16px */
  --s-5: 2.4rem;
  /* 24px */
  --s-6: 4rem;
  /* 40px */
  --s-7: 6.4rem;
  /* 64px */
  --s-8: 10.4rem;
  /* 104px */

  /* 関係ベースの余白（本家Layer 2と同名。一体<兄弟<親戚<隣人<他人） */
  --gap-bond: var(--s-2);
  --gap-sibling: var(--s-4);
  --gap-kin: var(--s-5);
  --gap-neighbor: var(--s-6);
  --gap-stranger: var(--s-8);

  /* 形・動き */
  --radius-m: 10px;
  /* 現行DL CTAの角丸に合わせて設定 */
  --radius-s: 5px;
  --motion-quick: 120ms ease-out;
  --motion-smooth: 280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 20260721 isa 白カード用の共通シャドウトークン（border代替）。
     uc-hub-cards li（主要コンテンツ外のためborderのまま維持）以外の
     白カード群に適用。
     実際の値は背景が白/グレーどちらかで各セクション背景ルール側が
     上書きする(.1=白背景 / .08=グレー背景)。ここはその他不明な文脈用の保険値 */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .08);
}

/* 20260721 isa スマホの基準フォントサイズを16px相当に引き上げ
   - style.css（凍結・common扱い）が @media(max-width:559px){ body{font-size:1.4rem} } を
     持っており、html{font-size:62.5%}（1rem=10px）と合わせて実質14pxになっている
   - common側は編集せず、#usecase（=body id）をID特異度で上書きして
     usecaseページのみ1.6rem(=16px)に引き上げる */
@media screen and (max-width: 559px) {
  #usecase {
    font-size: 1.6rem;
  }
}

/* 20260706 isa 縞目背景（zebra）: --white ⇔ --gray-1 の交互配置に変更
   （前回20260705は全セクション白トライアルだったが、構造が目視しにくいため zebra に戻す）
   - 全セクションのデフォルトを --white にし、位置ベースで --gray-1 を上書き
   - common.css の section:nth-of-type(2n-1){#f7f7f7} は特異度で上書きされる
   - .page-title は KV 用背景を保持するため対象外
   - aside.uc-cta-section は section ではないため nth-of-type カウントに影響しない
   - 過去の .uc-bg クラス（個別グレー指定用フック）は zebra 導入により役目終了。
     HTMLに残っていても背景には影響しないため段階的に除去でよい */
#usecase section:not(.page-title) {
  background-color: var(--white);
  padding: 60px 0 80px;
  /* 20260721 isa 白背景セクション内の白カードは背景との差が出にくいため
     shadowをやや濃く(.1)。グレー背景側は次のnth-of-type(2n-1)ルールで
     .08に上書きされる */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .1);
}

@media screen and (max-width: 1119px) {
  #usecase section:not(.page-title) {
    padding: 40px 0;
  }
}

@media screen and (max-width: 559px) {
  #usecase section:not(.page-title) {
    padding: 30px 0;
  }
}

#usecase section:not(.page-title):nth-of-type(2n-1) {
  background-color: var(--gray-1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .08);
}

/* 20260715 isa index（業種ハブページ）は縞目にせず全セクショングレー背景に統一。
   body.uc-hub でスコープし、詳細ページ側のゼブラ仕様には影響させない。
   ただし冒頭リード文セクション（.uc-hub-intro）は白背景のまま維持 */
#usecase.uc-hub section:not(.page-title):not(.uc-hub-intro) {
  background-color: var(--gray-1);
  padding: 40px 0;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .08);
}

/* 20260705 isa h2を中央寄せ＋オレンジバーを見出し下・中央に変更
   common.cssの左バー（::before絶対配置）は廃止し、::afterで下線バーを引く。
   「section > .inner > 直下のh2」に限定＝.column-3等カード内のh2には効かせない。
   ※これに伴い旧「バー縦位置修正」（top:2.24rem）は削除済み */
#usecase section>.inner>h2 {
  text-align: center;
  margin-bottom: 40px;
}

#usecase section>.inner>h2::before {
  content: none;
}

#usecase section>.inner>h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-action);
  margin: 14px auto 0;
}

@media screen and (max-width: 1119px) {
  #usecase section>.inner>h2 {
    margin-bottom: 20px;
    /* common.cssのSP用74px（旧下線バーの余白）を打ち消し */
    font-size: 2.4rem;
  }
}

@media screen and (max-width: 559px) {
  #usecase section>.inner>h2 {
    font-size: 2rem;
  }
}

/* 20260721 isa common.cssのSP用h3下マージンを打ち消すグローバル設定
   （元はFAQセクション付近に紛れていたため先頭寄りに移動） */
@media screen and (max-width: 1119px) {
  section h3 {
    margin-bottom: unset;
  }
}

/* 20260721 isa グローバルh3フォントサイズ、スマホは1.8remに統一
   （.uc-faq h3等クラス側で独自font-sizeを持つ箇所はそちらが優先される） */
@media screen and (max-width: 559px) {
  section h3 {
    font-size: 1.8rem;
  }
}

/* 20260715 isa index（業種ハブページ）はh2を他ページ標準の左寄せ・左バーに戻す。
   detail系ページの中央寄せ仕様（20260705）には影響させない */
#usecase.uc-hub section>.inner>h2 {
  text-align: left;
  margin-bottom: 20px;
}

#usecase.uc-hub section>.inner>h2::before {
  content: "";
  display: block;
  position: absolute;
  left: -80px;
  top: 1.8rem;
  width: 60px;
  height: 3px;
  background-color: var(--color-action);
}

#usecase.uc-hub section>.inner>h2::after {
  content: none;
}

@media screen and (max-width: 1119px) {
  #usecase.uc-hub section>.inner>h2 {
    margin-bottom: 74px;
  }

  #usecase.uc-hub section>.inner>h2::before {
    left: 0;
    top: auto;
    bottom: -24px;
  }
}

/* 20260705 isa h2直後のリード文を中央寄せ */
#usecase section>.inner>h2+p {
  text-align: center;
}

/* 20260715 isa 念押しセクションの格下げ（uc-digest）
   エンティティセクション等で既出の訴求を再掲する「h2＋本文1段落」型は、
   通常の章立てデザインだと冗長に見えるため、h2左・本文右の2カラムで
   「補足ノート」の格に落とす。HTML側は section に uc-digest を付けるだけ。
   アウトライン（h2階層・本文テキスト・順序）には一切影響しない */
#usecase section.uc-digest {
  padding: 35px 0;
  border-bottom: 1px dotted #ccc;
  max-width: 920px;
  margin: 0 auto;
}

/* 20260715 isa ダイジェスト型はゼブラ対象外・常に白
   （縞目がくどいというNatsukoの指摘。zebraルール（1,2,1）と同特異度に
   :not() で揃え、後方定義で勝たせる） */
#usecase section.uc-digest:not(.page-title) {
  background-color: var(--white);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .1);
}

/* 20260715 isa 3つ目のCTA以降（#flow〜他業種リンク）の縞目を明示制御
   このゾーンは手前のdigestセクション数がページごとに違うため、
   位置ベースのzebra（1,2,1）に任せると奇数/偶数がページごとにずれる。
   retail.htmlの該当6セクション（導入の流れ／チェックリスト／向き不向き／
   FAQ／まとめ／他業種リンク）に直接クラスを付与し、flow=グレー始まりで
   固定する。zebraルール（1,2,1）と同特異度に :not() で揃え、
   後方定義で勝たせる（uc-digestと同手法）。他ページは未対応 */
#usecase section.uc-flow-gray:not(.page-title) {
  background-color: var(--gray-1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .08);
}

#usecase section.uc-flow-white:not(.page-title) {
  background-color: var(--white);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, .1);
}

/* 20260715 isa ダイジェストゾーンの束ねラベル
   見出しタグを使わないpラベル＝アウトライン非干渉（CTAのLLMOルールと同じ考え方）。
   sectionではなくdivのためzebraの位置カウントにも影響しない */
.uc-zone-label {
  background-color: var(--white);
  padding: 48px 0 0;
}

/* section外のためcommon.cssの.inner幅指定が効かない（uc-cta-sectionと同じ事情）。
   インナー幅920pxに合わせて罫線もここで止める */
.uc-zone-label .inner {
  max-width: 920px;
  margin: 0 auto;
}

.uc-zone-label .inner p {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0 0 20px 0;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--color-emphasis);
}

.uc-zone-label .inner p::before,
.uc-zone-label .inner p::after {
  content: "";
  height: 1px;
  background-color: var(--color-action);
  flex: 1;
}

@media screen and (max-width: 1119px) {
  .uc-zone-label {
    padding: 32px 20px 0;
  }
}

#usecase section.uc-digest>.inner {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  column-gap: var(--s-6);
  row-gap: var(--s-3);
  align-items: start;
}

#usecase section.uc-digest>.inner>h2 {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* 通常h2の中央下線バーを、左寄せ・見出し上の小バーに変更 */
#usecase section.uc-digest>.inner>h2::after {
  content: none;
}

#usecase section.uc-digest>.inner>h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--color-action);
  margin: 0 0 var(--s-3);
  position: static;
}

/* h2以外（本文p・画像・memo-tag等）はすべて右カラムへ */
#usecase section.uc-digest>.inner> :not(h2) {
  grid-column: 2;
  margin-top: 0;
}

/* リード文中央寄せルールの打ち消し */
#usecase section.uc-digest>.inner>h2+p {
  text-align: left;
}

/* 挿絵は右カラム内で控えめに */
#usecase section.uc-digest>.inner>.uc-section-img {
  max-width: 400px;
  margin: 0 0 var(--s-3);
}

@media screen and (max-width: 1119px) {
  #usecase section.uc-digest {
    padding: 32px 0;
  }

  #usecase section.uc-digest>.inner {
    display: block;
  }

  #usecase section.uc-digest>.inner>h2 {
    margin-bottom: var(--s-4);
  }
}


.uc-section-img {
  max-width: 700px;
  object-fit: contain;
  margin: 0 auto;
  text-align: center;
  display: block;
  margin-bottom: 40px;
  border-radius: var(--radius-m);
}

/* 20260721 isa タブレット・スマホでmax-widthを画面幅基準に変更 */
@media screen and (max-width: 1119px) {
  .uc-section-img {
    max-width: 80%;
  }
}

@media screen and (max-width: 559px) {
  .uc-section-img {
    max-width: 100%;
  }
}

/* 20260713 isa page-titleのKV風デザイン実装（Figmaカンプ 72-338=PC / 72-398=SP、千葉デザイン）
   - common.cssのKV背景画像（title_bg.jpg）は保持し、::beforeでオレンジ半透明
     ＋backdrop-blurのオーバーレイを重ねる（カンプの bg rgba(255,136,71,.8)+blur(50px) 指定）
   - h1文言規則（20260713 Natsuko決定）: 全ページ「〇〇に強いPOSレジ<br>ORANGE POS」に統一
   - 20260713 全8詳細ページに適用済み。KV画像は /images/usecase/{業種}/main.png
     （apparel/hotel/outdoor/salon/wine の5点はグレーのプレースホルダ。差し替え待ち） */
.uc-page-title {
  position: relative;
  padding: 50px 0;
  background-size: cover;
}

.uc-page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--uc-kv-overlay);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.uc-page-title .inner {
  position: relative;
  /* オーバーレイより手前に */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.uc-page-title-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 1 540px;
}

/* style.css の .page-title .inner h1（3.8rem・#000）を上書き */
.uc-page-title .inner h1 {
  margin: 0;
  font-size: 3.1rem;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}

/* common.css の .page-title .inner p（3.8rem・#000）を上書き */
.uc-page-title .inner .uc-page-title-lead {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
}

.uc-page-title .inner .uc-page-title-cta {
  margin: 0;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1.5;
}

.uc-page-title .uc-page-title-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 10px;
  background: var(--uc-kv-cta-grad);
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: opacity var(--motion-quick);
  border-radius: var(--radius-s);
}

.uc-page-title .uc-page-title-cta a::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url(/images/common/icon_mail.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.uc-page-title .uc-page-title-cta a:hover {
  opacity: 0.85;
}

.uc-page-title-img {
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: var(--radius-s);
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.uc-page-title-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1119px) {
.uc-page-title .inner {
  justify-content: center;
  gap: 30px;
  margin: 0 30px;
}
}

@media screen and (max-width: 720px) {

  /* SP: 画像を全幅で上に、テキストは下（Figma 72-398） */
  .uc-page-title {
    padding: 0;
  }

  .uc-page-title .inner {
    width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .uc-page-title-img {
    order: -1;
    width: 100%;
    height: 200px;
  }

  .uc-page-title-content {
    flex: none;
    padding: 20px;
    gap: 20px;
  }

  .uc-page-title .inner h1 {
    font-size: 2.4rem;
  }

  .uc-page-title .inner .uc-page-title-lead {
    font-size: 1.4rem;
  }

  .uc-page-title .uc-page-title-cta a {
    padding: 15px 10px;
    font-size: 1.6rem;
  }
}

/* 20260705 isa 業種ハブリスト
   20260712 isa indexはカード化（下のuc-hub-cards）に移行し、以下は
   詳細ページ下部の他業種リンク（h3＋テキストリンク）専用の暫定スタイルに */
.uc-hub-group {
  margin-bottom: 30px;
}

.uc-hub-group:last-child {
  margin-bottom: 0;
}

/* グループ見出し: indexではh2、詳細ページ（セクションh2の下）ではh3を使う */
.uc-hub-group h2,
.uc-hub-group h3 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.uc-hub-group h2::before,
.uc-hub-group h3::before {
  content: none;
  /* common.cssの左バー（位置ずれ持ち）を無効化 */
}

@media screen and (max-width: 1119px) {

  .uc-hub-group h2,
  .uc-hub-group h3 {
    margin-bottom: 10px;
    /* common.cssのSP用margin打ち消し */
  }
}

/* 20260721 isa グローバルh3フォントサイズ(1.8rem)統一。SP専用サイズを
   個別指定していない箇所に適用（uc-hub-group h3はSP専用指定なし） */
@media screen and (max-width: 559px) {
  .uc-hub-group h3 {
    font-size: 1.8rem;
  }
}

ul.uc-hub-list {
  margin: 0;
}

ul.uc-hub-list li {
  margin-bottom: 8px;
}

/* ============================================================
   20260712 isa 業種ハブカード（index用）
   トップ（/css/top/style.css）の .uc-industries_list カードデザインを
   3カラムで移植。相違点:
   - グリッドを3カラムに（1119px以下2カラム、559px以下1カラム）
   - zebraの白背景セクション上でもカード境界が見えるよう
     デフォルトborderを --color-border に（トップはtransparent）
   - 実値カラー（#f60等）はusecase.cssのトークンに置換
   ============================================================ */
ul.uc-hub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.uc-hub-cards a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  /* 20260721 isa border-radiusはliではなくborder/backgroundを持つa自身に指定。
     li側にradius+overflow:hiddenを付ける方式だと、aの直角ボーダーを
     親のradiusでクリップする形になり、角でボーダー線がずれて重なって見える
     不具合が出ていたため */
  /* ホバー時はcolorのみ変化＝ガタつき防止 */
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-quick);
}

.uc-hub-cards a:hover {
  border-color: var(--color-action);
  text-decoration: none;
}

.uc-hub-card_name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-emphasis);
  margin-bottom: 10px;
}

.uc-hub-card_name::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-emphasis);
  border-bottom: 2px solid var(--color-emphasis);
  transform: rotate(-45deg);
}

.uc-hub-card_desc {
  display: block;
  font-size: 1.4rem;
  line-height: 1.6;
  /* 文字色はaのcolor:inherit経由で本文色（#333）を継承。実値は持たない */
}

@media screen and (max-width: 1119px) {
  ul.uc-hub-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 559px) {
  ul.uc-hub-cards {
    grid-template-columns: 1fr;
  }

  .uc-hub-cards a {
    padding: 15px 20px;
  }
}

/* ---- 量産フォーマット用コンポーネント ---- */

/* 20260705 isa チェックリスト（POS選定チェックリスト等の番号付きリスト）
   html5resetでol.list-styleが消えているためカウンターで採番 */
ol.uc-checklist {
  counter-reset: uc-check;
  list-style: none;
  /* 20260705 isa ブラウザ標準の番号と二重になるため無効化（採番はカウンター側） */
  margin-left: 0;
  padding: 30px 60px;
  background: var(--gray-1);
  border-radius: var(--radius-m);

}

ol.uc-checklist li {
  counter-increment: uc-check;
  position: relative;
  padding-left: 3em;
  margin-bottom: 14px;
  line-height: 1.8;

}

ol.uc-checklist li::before {
  content: counter(uc-check, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-action);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.4;
}

/* 20260716 isa 導入の流れステップ（flowセクションのuc-digest格下げを解除し一章型に格上げ）
   ステップ名をh3で立てて手順を構造化（LLMOでの抽出性・顧客のスキャン読み対応）。
   html5resetでolのlist-styleが消えるため、採番はuc-checklist同様カウンター */
ol.uc-flow-steps {
  counter-reset: uc-step;
  list-style: none;
  margin: var(--gap-kin) 0 0;
}

ol.uc-flow-steps>li {
  counter-increment: uc-step;
  position: relative;
  background: white;
  padding: var(--s-5) 40px var(--s-5) 12rem;
  border-radius: var(--radius-m);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

ol.uc-flow-steps>li p {
  margin-bottom: 0;
}

ol.uc-flow-steps>li::before {
  content: "STEP " counter(uc-step, decimal-leading-zero);
  position: absolute;
  left: 30px;
  top: calc(var(--s-5) + 0.2em);
  color: var(--color-action);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.4;
}

ol.uc-flow-steps>li>h3 {
  margin-bottom: var(--s-2);
  font-size: 20px;
}

ol.uc-flow-steps>li>p {
  line-height: 1.8;
}

@media screen and (max-width: 559px) {
  ol.uc-flow-steps>li {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: var(--s-7);
  }

  ol.uc-flow-steps>li::before {
    top: var(--s-5);
  }

  ol.uc-flow-steps>li::before {
    left: 20px;
  }

  /* 20260721 isa グローバルh3フォントサイズ(1.8rem)統一。SP専用指定なしのため対象 */
  ol.uc-flow-steps>li>h3 {
    font-size: 1.8rem;
  }
}

.uc-reason-lead {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.uc-reason-lead img {
  display: block;
  object-fit: contain;
  max-width: 200px;
  transform: translateX(-30px);
  padding-bottom: 30px;
}

/* 20260705 isa 「選ばれる理由」カード（エンティティセクション用・全ページ共通） */
ul.uc-reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  counter-reset: uc-reason;
  justify-content: center;
}

ul.uc-reason-list li {
  counter-increment: uc-reason;
  width: calc((100% - 40px) / 3);
  box-sizing: border-box;
  padding: 25px 20px 20px;
  box-shadow: var(--shadow-card);
  background-color: var(--color-bg);
  margin: 0;
  border-radius: var(--radius-s);
  text-align: center;
}

/* 20260714 isa 5枚構成のため上段2枚は2カラムで親要素幅を埋める（下段3枚は1/3幅） */
ul.uc-reason-list li:nth-child(-n + 2) {
  width: calc((100% - 20px) / 2);
  padding: 30px 20px 35px;
}

ul.uc-reason-list li::before {
  content: counter(uc-reason, decimal-leading-zero);
  display: block;
  color: var(--color-action);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 12px;
}

ul.uc-reason-list li h3 {
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

ul.uc-reason-list li h3::before {
  content: none;
  /* common.cssのh3装飾（SP時の下線）をカード内では無効化 */
}

/* 20260705 isa カードタイトルのサブコピー（h3=汎用メリット大、subでスコープを絞る） */
ul.uc-reason-list li p.uc-reason-sub {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-emphasis);
  margin: -4px 0 10px;
  text-align: center;
}

ul.uc-reason-list li p {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
}

/* 20260714 isa カード内の注釈（会計を止めないカードの機能制限注記用） */
ul.uc-reason-list li p.uc-reason-note {
  margin-top: 6px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media screen and (max-width: 1119px) {
  ul.uc-reason-list li h3 {
    margin-bottom: 10px;
    /* common.cssのSP用margin(54px)を打ち消し */
  }
}

@media screen and (max-width: 559px) {

  /* 20260714 isa nth-childの2カラム指定より詳細度を上げて1カラムに戻す */
  ul.uc-reason-list li,
  ul.uc-reason-list li:nth-child(-n + 2) {
    width: 100%;
  }

  /* 20260721 isa グローバルh3フォントサイズ(1.8rem)統一。SP専用指定なしのため対象 */
  ul.uc-reason-list li h3 {
    font-size: 1.8rem;
  }
}

/* 20260705 isa 標準機能カード（機能詳細ページへのリンクカード） */
ul.uc-func-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

ul.uc-func-list li {
  width: calc((100% - 30px) / 3);
  margin: 0;
}

ul.uc-func-list li a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  box-shadow: var(--shadow-card);
  background-color: var(--color-bg);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-s);
}

ul.uc-func-list li a:hover {
  border-color: var(--color-action);
}

ul.uc-func-list .uc-func-name {
  display: block;
  font-weight: bold;
  font-size: 1.6rem;
  color: var(--color-action);
  margin-bottom: 5px;
}

ul.uc-func-list .uc-func-desc {
  display: block;
  font-size: 1.3rem;
  line-height: 1.7;
}

ul.uc-func-list.cols-2 li {
  width: calc((100% - 15px) / 2);
}

@media screen and (max-width: 559px) {

  ul.uc-func-list li,
  ul.uc-func-list.cols-2 li {
    width: calc((100% - 15px) / 2);
  }

  ul.uc-func-list.cols-2 li {
    width: 100%;
  }
}

/* 20260715 isa 一章型セクション（h2＋本文のみ、複数h3を持たない単一セクション）
   末尾の a.arw リンクをセンター寄せするための共通クラス。
   a.arw は common.css で display:flex（ブロック幅いっぱい）なので、
   親のpをflex+justify-content:centerにしてリンクの内容幅で中央寄せする */
.uc-arw-center {
  display: flex;
  justify-content: center;
}

/* 20260705 isa 要件セクション: イラスト付きジグザグ行（.reverseで画像を右側に） */
.uc-req-item {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;


}

.uc-req-item.reverse {
  flex-direction: row-reverse;
}

.uc-req-illust {
  flex: 0 0 280px;
}

.uc-req-illust.is-placeholder {
  min-height: 170px;
  border: dashed 2px #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uc-req-illust img {
  width: 100%;
  height: auto;
  display: block;
}

.uc-req-body {
  flex: 1;
  background: var(--gray-1);
  padding: 35px;
  border-radius: var(--radius-s);
  position: relative;
  z-index: 50;
}

.uc-req-body ::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 10px 20px 10px 0;
  border-color: transparent var(--gray-1) transparent transparent;
  translate: -100% -50%;
}

.uc-req-item.reverse .uc-req-body ::after {
  top: 50%;
  right: 0;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent var(--gray-1);
  translate: 100% -50%;
}

.uc-req-body h3 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.uc-req-body h3::before {
  content: none;
  /* common.cssのh3装飾を無効化 */
}

.uc-req-body p {
  margin: 0;
}

/* 20260705 isa 活用セクション: 2カラムのカード
   20260715 isa アイコン案をやめ写真付きカードに変更（画像450×200・未支給のためプレースホルダー運用） */
.uc-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.uc-usage-grid .uc-usage-item {
  box-shadow: var(--shadow-card);
  background-color: var(--color-bg);
  border-radius: var(--radius-s);
  overflow: hidden;
  /* 画像の角をカードの角丸に沿わせる */
}

/* カード上部の写真（450×200比率）。画像支給後は .is-placeholder のdivを
   <img class="uc-usage-img" src="..." alt="..."> に差し替えるだけでOK */
.uc-usage-grid .uc-usage-item .uc-usage-img {
  display: block;
  width: 100%;
  aspect-ratio: 450 / 200;
  object-fit: cover;
}

.uc-usage-grid .uc-usage-item .uc-usage-img.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9e9e9;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}

.uc-usage-grid .uc-usage-item .uc-usage-img.is-placeholder::after {
  content: "IMAGE 450×200";
}

.uc-usage-grid .uc-usage-item h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 8px;
  padding: 24px 30px 0;
}

.uc-usage-grid .uc-usage-item h3::before {
  content: none;
  /* common.cssのh3装飾を無効化 */
}

.uc-usage-grid .uc-usage-item p {
  margin: 0;
  padding: 0 30px 30px;
  font-size: 1.4rem;
  line-height: 1.8;
}

@media screen and (max-width: 1119px) {

  .uc-req-body h3,
  .uc-usage-grid .uc-usage-item h3 {
    margin-bottom: 10px;
    /* common.cssのSP用margin(54px)を打ち消し */
  }

  /* 20260721 isa gap: 20px はタブレット以下(1119px以下)に適用。
     旧実装は559px以下(スマホのみ)に入っており、タブレット幅では
     2カラム・gap30pxのまま変化していなかった */
  .uc-usage-grid {
    gap: 20px;
  }
}

@media screen and (max-width: 559px) {

  .uc-req-item,
  .uc-req-item.reverse {
    flex-direction: column;
    gap: 15px;
  }

  .uc-req-illust {
    flex: none;
    width: 100%;
  }

  /* 20260721 isa スマホは縦積みレイアウトになり吹き出しの向き(左右)が
     成立しないため矢印を非表示に */
  .uc-req-body ::after,
  .uc-req-item.reverse .uc-req-body ::after {
    content: none;
  }

  .uc-usage-grid {
    grid-template-columns: 1fr;
    /* gap は上の1119px以下ブロックで20pxに統一済み */
  }

  /* 20260721 isa グローバルh3フォントサイズ(1.8rem)統一。SP専用指定なしのため対象
     （.uc-usage-grid .uc-usage-item h3 は元々1.8remで既に一致のため対象外） */
  .uc-req-body h3 {
    font-size: 1.8rem;
  }
}

/* 20260713 isa 導入事例アイテムをカード化（Figma: ORANGE POS LLMO対応 76:229 PC / 81:425 SP）
   - zebra背景の上に白カードで乗せる構成
   - サブ事例（写真＋テーブル・引用なし）も同じカードスタイルを共用
   - Figma指定色のうちトークンにない色は最寄りトークンで代用（差分は要すり合わせ）:
     カード枠 #e6e6e6 → --color-border(#d8d8d8)
     引用背景 #fff3ea → --color-emphasis-bg(#fff5ed) ※20260729にほぼ同値へ寄せた
     引用文字 #ff4521 → --color-action-hover(#ff4d00)
     引用飾り“ #ffd0ae → --white（bg代用に合わせ視認性優先） */
.uc-case-item {
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-m);
  padding: 30px 40px 40px;
  margin-bottom: var(--gap-neighbor);
  /* 40px */
}

.uc-case-item:last-child {
  margin-bottom: 0;
}

/* 見出し: 1行目=社名（黒）／2行目=キャッチ（span・オレンジ）の2段構成 */
.uc-case-item h3 {
  margin-bottom: 30px;
}

.uc-case-item h3 span {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-emphasis);
  /* #f60 Figma指定と一致 */
}

/* 写真＋本文（サマリーテーブル or 段落）の横並び（写真280px固定・本文が残り幅） */
/* 20260728 isa 行の高さを本文だけで決めるため、写真は .uc-case-photo（枠）＋
   absoluteのimgに分離。imgを直接グリッドアイテムに置くと置換要素の固有高さ
   （220px）が行の高さを押し上げ、本文が短いと写真の方が縦に長くなる。
   absoluteにするとimgは行の高さ計算に参加せず、枠がstretchで本文の高さに揃う。
   HTML: <div class="uc-case-media"><div class="uc-case-photo"><img></div><p|table></div> */
.uc-case-media {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
  gap: 30px;
  margin-bottom: 30px;
}

.uc-case-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
}

.uc-case-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* 20260728 isa 上起点でクロップ（本文が短いと縦が詰まるため、下側を落とす） */
}

.uc-case-media table.uc-case-summary,
.uc-case-media p {
  margin-bottom: 0;
  /* common.cssのsection table/p余白を打ち消し（横並び時は不要） */
}

/* 引用: common.cssの.quotation（左罫線型）をカード内では面型に上書き */
.uc-case-item .quotation {
  border-left: none;
  background-color: var(--color-emphasis-bg);
  border-radius: var(--radius-m);
  padding: 30px 40px;
}

.uc-case-item .quotation::before {
  color: #ffd0ae;
  /* 20260713 isa Figma指定色。トークン外だがNatsuko指示で直値採用 */
}

.uc-case-item .quotation q {
  display: block;
  font-style: normal;
  font-weight: 500;
}

/* フッター行: 時点表記（左）＋詳細リンク（右）を1行に */
.uc-case-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.uc-case-foot p {
  margin-bottom: 0;
}

.uc-case-link {
  margin-left: auto;
  /* 時点表記がない事例でもリンクは右寄せを維持 */
}

@media screen and (max-width: 1119px) {
  .uc-case-item h3 {
    margin-bottom: 30px;
    /* common.cssのSP用margin(54px)を打ち消し */
  }
}

@media screen and (max-width: 559px) {
  .uc-case-item {
    padding: 20px;
  }

  .uc-case-item h3 {
    margin-bottom: 20px;
  }

  .uc-case-item h3 span {
    font-size: 1.7rem;
    /* h3がSPで1.9remに縮むのに合わせて縮小 */
  }

  .uc-case-media {
    grid-template-columns: minmax(0, 1fr);
    /* 20260728 isa grid化に伴いSPは1カラム縦積み（旧flex-direction:column相当） */
  }

  .uc-case-photo {
    height: 220px;
    /* 縦積み時は本文と揃える相手がいないので高さを明示 */
  }

  .uc-case-item .quotation p.cite {
    font-size: 1.2rem;
    text-align: left;
    /* FigmaのSPでは左寄せ */
  }

  .uc-case-foot {
    flex-direction: column;
    align-items: center;
  }

  .uc-case-link {
    margin-left: 0;
  }
}

/* 20260705 isa 導入事例サマリーテーブル（業態・導入形態・店舗数・連携システム） */
table.uc-case-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  /* 20260713 isa Figma指定14pxに合わせ1.5remから変更 */
}

table.uc-case-summary th,
table.uc-case-summary td {
  border: solid 1px var(--color-border);
  padding: 10px 15px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

table.uc-case-summary th {
  background-color: var(--color-surface);
  width: 9em;
  white-space: nowrap;
  font-weight: bold;
}

/* 20260713 isa SPは横並びをやめて積み上げ型に変更（Figma 81:425）
   th=全幅の帯＋tdがその下に続く。display:blockでborder-collapseが効かなくなるため
   上辺はtable側・各セルは下辺＋左右で線を構成して二重線を回避 */
@media screen and (max-width: 559px) {
  table.uc-case-summary {
    display: block;
    border-top: solid 1px var(--color-border);
  }

  table.uc-case-summary tbody,
  table.uc-case-summary tr {
    display: block;
  }

  table.uc-case-summary th,
  table.uc-case-summary td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-top: none;
  }

  table.uc-case-summary th {
    white-space: normal;
    padding: 5px 10px;
  }

  table.uc-case-summary td {
    padding: 10px;
  }
}

/* 20260705 isa 事例の時点表記（リストアイテム末尾に固定フォーマットで置く） */
.uc-case-note {
  font-size: 1.3rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* 20260705 isa 問い合わせCTAセクション
   <aside>でマークアップ（本筋コンテンツでないことを機械に明示）。
   見出しタグ(h2/h3)は使わない＝見出しアウトラインを汚さない。
   sectionではないためcommon.cssの section .inner 等は効かない→ここで完結させる */
/* 20260706 isa CTA aside の幅を .inner と同一の 920px に変更
   - 変更前: aside 自体はブラウザ幅いっぱいで、内側 .inner だけ 920px
   - 変更後: aside 自体を 920px に絞り、オレンジ背景がブラウザ端まで伸びない箱型に
   - .inner は auto に緩めて、aside の幅がそのまま効くようにする
   - 前後セクションの zebra 背景がブラウザ端まで続き、その上に CTA 箱が乗る絵面 */
.uc-cta-section {
  width: 100vw;
  margin: 0 auto;
  padding: 40px 20px;
  background: var(--uc-kv-overlay);
  text-align: center;
  box-sizing: border-box;

}

.uc-cta-section .inner {
  width: 920px;
  margin: 0 auto;
  background: white;
  padding: 50px 20px;
  border-radius: var(--radius-m);
}

.uc-cta-section .uc-cta-title {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.5;
  /* color: #fff; */
  /* text-shadow: 0 0 25px var(--color-emphasis); */
  margin: 20px 0 10px;
  /* color: var(--color-emphasis); */
}

.uc-cta-section .uc-cta-text {
  font-size: 1.5rem;
  /* color: #fff; */
  /* text-shadow: 0 0 20px var(--color-emphasis); */
  margin: 0 0 30px;
}

.uc-cta-section .uc-cta-btn {
  margin: 0;
}

.uc-cta-section .uc-cta-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 300px;
  box-sizing: border-box;
  padding: 16px 40px;
  background: var(--uc-kv-cta-grad);
  color: white;
  font-weight: bold;
  font-size: 1.6rem;
  text-decoration: none;
  border-radius: var(--radius-s);
}

.uc-cta-section .uc-cta-btn a::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url(/images/common/icon_mail.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.uc-cta-section .uc-cta-btn a:hover {
  background-color: var(--color-action-tint);
}

.uc-cta-section .uc-cta-note {
  font-size: 1.3rem;
  color: var(--color-action-hover);
  margin: 10px 0 0;
  background: var(--color-action-tint);
  display: inline-block;
  padding: 7px 20px 5px;
  border-radius: 100vh;
  position: relative;
}

.uc-cta-section .uc-cta-note::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid var(--color-action-tint);
  ;
}

@media screen and (max-width: 1119px) {
  /* 20260721 isa 旧: width:auto; margin:0 20px; がオレンジ背景自体を20px内側に絞っていたバグを修正。
     オレンジ背景は常に100vw・edge-to-edgeを維持し、余白は既存の padding: 40px 20px（.uc-cta-section）で持たせる */
  .uc-cta-section .inner {
    width: auto;
    margin: 0;
  }
}

@media screen and (max-width: 559px) {
  .uc-cta-section .uc-cta-title {
    font-size: 2rem;
  }

  .uc-cta-section .uc-cta-btn a {
    width: 100%;
    min-width: 0;
  }
}

/* 20260705 isa 資料DL CTA（knowledge/css/knowledge.css の .cta-lg-* を移植・uc-接頭辞化）
   注: 配色は移植元の var(--color-emphasis) のまま（usecaseブランド色 var(--color-action) と微差あり。要判断）
   アイコンは /knowledge/img/dl_orange.svg を絶対パス参照 */
.uc-cta-lg-text {
  text-align: left;
  color: var(--color-emphasis);
  font-weight: bold;
  margin-bottom: 10px;
}

.uc-cta-lg-link-content {
  display: flex;
  justify-content: space-between;
  background: var(--color-emphasis-bg);
  padding: 20px 30px;
  align-items: center;
  border-radius: var(--radius-m);
  gap: 20px;
}

.uc-cta-lg-text-box {
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  /* 20260721 isa タブレットで.uc-cta-lg-link-box側が押し潰されないよう、
     見出しテキスト側が先に縮む/折り返す構成に変更 */
}

.uc-cta-lg-text-sub {
  color: var(--color-emphasis);
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  /* usecase文脈用: common.cssのsection p margin(30px)を打ち消し */
}

.uc-cta-lg-text-main {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0;
  /* 同上 */
}

.uc-cta-lg-link-box {
  background: var(--color-bg);
  padding: 19.5px 50px 19.5px 20px;
  border-radius: var(--radius-m);
  flex-shrink: 0;
  white-space: nowrap;
  /* 20260721 isa タブレットで押し潰されて2行折り返し+アイコンずれが起きていたため、
     ボタン自体のサイズは常に一定（縮まない・改行しない）に固定。
     縮む役割は.uc-cta-lg-text-box側に持たせた */
}

.uc-cta-lg-link-box a {
  color: var(--color-emphasis);
  font-weight: bold;
  position: relative;
}

.uc-cta-lg-link-box a::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 60%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url(/knowledge/img/dl_orange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 20260721 isa right:-15%（aの幅に対する相対値）だとテキスト量で
     アイコン位置がぶれるため固定pxに変更 */
}

/* 20260721 isa スマホ(559px以下)のみ縦積みに。タブレットは横並びのまま維持し、
   間延びを避ける（ボタン側は上のflex-shrink:0/white-space:nowrapで崩れ対策済み） */
@media screen and (max-width: 559px) {
  .uc-cta-lg-link-content {
    flex-wrap: wrap;
  }

  .uc-cta-lg-link-box {
    width: 100%;
    border-radius: 0;
    white-space: normal;
  }

  .uc-cta-lg-text-main {
    margin-bottom: 15px;
    font-size: 20px;
  }
}

/* 20260705 isa FAQ（h3=質問 p=回答 の簡易スタイル） */

.uc-faq{
   --box-padding: 30px;
   --text-indent: 50px;
}
.uc-faq-item{
  box-shadow: var(--shadow-card);
  padding: var(--box-padding);
  border-radius: var(--radius-m);
  background: white;
  margin-bottom: 20px;
}

.uc-faq h3 {
  padding-left: var(--text-indent);
  position: relative;
  font-size: 2rem;
}

.uc-faq h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  color: var(--color-action);
  font-weight: 600;
  background: var(--color-emphasis-bg);
  padding: 7px 10px 10px 10px;
  line-height: 1;
  border-radius: var(--radius-s);
  top: 0;
  bottom: auto;
  /* 20260721 isa common.cssの1119px用 section h3::before{bottom:-14px}を打ち消し。
     bottom未指定だとtop:0と合わさりabsolute要素がtop〜bottomまで縦に伸びて
     Qバッジが縦長になっていた（PCはbottom未指定なので問題なし） */
}

.uc-faq p {
  padding-left: var(--text-indent);
  margin-bottom: 0;
  position: relative;
}

.uc-faq p::before {
  content: "A";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
  font-size: 2rem;
  line-height: 1;
    font-weight: 600;
  background: var(--gray-1);
  padding: 7px 10px 10px 10px;
  line-height: 1;
  border-radius: var(--radius-s);
}
@media screen and (max-width: 1119px) {
  .uc-faq h3 {
    margin-bottom: 15px;

  }
}

/* 20260721 isa グローバルh3フォントサイズ(1.8rem)統一。SP専用指定なしのため対象 */
@media screen and (max-width: 559px) {
  .uc-faq{
   --box-padding: 20px;
   --text-indent: 40px;
}
  .uc-faq h3 {
    font-size: 1.8rem;
  }
}



/* 20260709 isa 対応OS・端末セクション（全ページ共通・標準機能の直後）: 3カラムのOSカード
   設計: サイト直下 共通セクション_対応OS端末_設計v1.md */
.uc-os-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 20260713 isa 2OS化（Android削除）で3→2カラム */
  gap: 20px;
  margin: var(--s-5) 0;
}

.uc-os-item {
  box-shadow: var(--shadow-card);
  background-color: var(--color-bg);
  border-radius: var(--radius-s);
  padding: 20px;
}

.uc-os-item h3 {
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 8px;
  text-align: center;
  font-weight: 600;
}

.uc-os-item h3::before {
  content: none;
  /* common.cssのh3装飾を無効化（uc-usage-gridと同様） */
}

.uc-os-item p {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8;
}

@media screen and (max-width: 1119px) {
  .uc-os-item h3 {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 559px) {
  .uc-os-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* 20260714 isa 対応OSセクションの注釈リスト（費用・バージョン・混在運用の細目） */
.uc-os-notes {
  margin-top: var(--s-4);
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.uc-os-notes li {
  margin-bottom: 4px;
}

/* 20260715 isa 向き不向きセクション（全ページ共通・FAQの手前）
   従来は common.css の catch-list white を借用していたが uc-トーンと
   合わなくなったため独自クラス化。reuse/css/llmo.css の同名スタイルを
   トークン参照に置き換えて移植（HTML側: catch-list white → uc-fit-list） */
.uc-fit-item {
  background: var(--color-bg);
  border-radius: var(--radius-m);
  padding: 25px 30px;
  margin-top: 20px;
  box-shadow: var(--shadow-card);
}

.uc-fit-item h3 {
  margin-top: 0;
}

.uc-fit-list {
  margin-bottom: 0;
  /* common.cssの section ul 下マージンをカード内では解除 */
}

.uc-fit-list li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 10px;
  font-size: 1.6rem;
  line-height: 1.8;
}

.uc-fit-list li:last-child {
  margin-bottom: 0;
}

.uc-fit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-action);
}

.uc-fit-list--ng li::before {
  content: "※";
  color: var(--color-text-muted);
}

@media screen and (max-width: 559px) {
  .uc-fit-item {
    padding: 16px;
  }
}

/* ============================================================
   ORANGE-CX連携セクション（20260715 isa Figmaカンプ node 177:230）
   retail.htmlで初出。CTA（2回目）直前に配置
   20260715 カードリッチ化: 写真ヘッダー（cx-card-title.png、タブレット・
   ロゴ・グラデ焼き込み済み）＋カード本体#fff5edの2段構成に変更。
   単体タブレット画像とカード内ロゴ行は廃止
   ============================================================ */

/* 20260729 isa セクション背景は薄オレンジ固定。
   以前は直前セクションの色に応じてnth-of-typeの偶奇で白と出し分けていたが、
   ページによって見え方が変わるため全ページ統一。
   カード本体は白（下の .uc-cx-card ルール）なので、背景との明度差は常に確保される */
#usecase section.uc-cx:not(.page-title) {
  background-color: var(--color-emphasis-bg);
}


/* リード文：中央寄せ（共通の「h2+p中央寄せ」は section>.inner>h2+p 限定のため明示） */
.uc-cx-lead {
  text-align: center;
  margin-bottom: 30px;
}

/* カード（写真ヘッダー＋本体）
   ※usecaseページ内では直下のルールで白に上書きされる（薄オレンジ背景との明度差確保）。
     この値が効くのは #usecase スコープ外で使う場合 */
.uc-cx-card {
  border-radius: var(--radius-m);
  overflow: hidden;
  /* 写真ヘッダーの角を親の角丸でクリップ */
  margin-bottom: 30px;
  background-color: var(--color-emphasis-bg);
}
#usecase section.uc-cx:not(.page-title) .uc-cx-card{
  background: white;
}

.uc-cx-card-photo {
  display: block;
  width: 100%;
  height: auto;
}

.uc-cx-card-body {
  padding: 40px;
}

ul.uc-cx-features {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

ul.uc-cx-features li {
  flex: 1;
  min-width: 0;
}

.uc-cx-pill {
  display: block;
  background-color: var(--color-action);
  /* カンプの#ff9d00はトークン外のため--color-actionに正規化 */
  border-radius: 20px;
  padding: 5px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

ul.uc-cx-features li img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 580 / 478;
  /* 3枚の元画像の縦横比が揃っていないためボックス側で揃える */
  object-fit: contain;
  border-radius: var(--radius-s);
  /* 20260715 isa指定（重複定義していた2ルールを統合） */
}

.uc-cx-option {
  color: var(--color-emphasis);
  text-align: center;
}

/* SP（カンプはPCのみ。559px以下は縦積みに） */
@media screen and (max-width: 559px) {
  .uc-cx-card-body {
    padding: 20px;
  }

  ul.uc-cx-features {
    flex-direction: column;
    gap: 20px;
  }

  .uc-cx-pill {
    font-size: 1.6rem;
  }
}

/* 20260717 isa 周辺機器カードグリッド（uc-periph）
   推奨機器一覧（営業資料P16-17）を「カテゴリ × OS × 主要メーカー」粒度でカード化。
   - 型番は掲載しない（陳腐化リスク・引用価値・個別互換は商談で確認する方針）
   - tableは使わない（デザイン未確定のためNatsuko指定。カード型の暫定実装、
     トーンはuc-usage-itemを踏襲）
   - 「推奨」は非排他：リスト外機器の相談導線を本文・FAQ側で担保 */
.uc-periph-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.uc-periph-item {
  box-shadow: var(--shadow-card);
  background-color: var(--color-bg);
  border-radius: var(--radius-s);
  padding: 20px;
}

/* 20260717 isa h3はオレンジ1px下線＋中央寄せ（Natsuko指定）
   2px下線はh2の中央下線と装飾かぶりでくどいため、太さを1pxに落として
   オレンジを維持。中央寄せはh3のみ（チップ・注記は左揃えのまま） */
.uc-periph-item h3 {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 14px;
  /* border-bottom: solid 1px var(--color-action); */
  text-align: center;
}

.uc-periph-item h3::before {
  content: none;
  /* common.cssのh3装飾を無効化（uc-usage-itemと同じ） */
}

.uc-periph-os {
  margin: 0;
}

.uc-periph-os>div {
  /* display: flex;
  align-items: baseline;
  gap: 10px; */
}

.uc-periph-os>div+div {
  margin-top: 8px;
}

.uc-periph-os dt {
  flex: none;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  border-radius: var(--radius-s);
  padding: 1px 8px;
  white-space: nowrap;
  background: var(--gray-1);
}

.uc-periph-os dd {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.8;
  padding-left: 8px;
}

.uc-periph-note {
  margin: 10px 0 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* 20260717 isa カード上部のイラスト（Natsuko作画の汎用線画png、images/usecase/直下）
   元画像は1254×1254の正方形・透過。表示は110px角に縮小 */
.uc-periph-icon {
  margin-bottom: 8px;
}

.uc-periph-icon img {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto;
}

@media screen and (max-width: 1119px) {
  .uc-periph-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc-periph-item h3 {
    margin-bottom: 14px;
    /* common.cssのSP用margin(54px)を打ち消し（uc-usage-itemと同じ事情） */
  }
}

@media screen and (max-width: 559px) {
  .uc-periph-grid {
    grid-template-columns: 1fr;
  }

  /* 20260721 isa グローバルh3フォントサイズ(1.8rem)統一。SP専用指定なしのため対象
     （基本1.6remより拡大） */
  .uc-periph-item h3 {
    font-size: 1.8rem;
  }
}



.uc-payment-brands {
  background: var(--gray-2);
  padding: 30px;
  border-radius: var(--radius-m);
}

.uc-payment-brands h3 {
  font-size: 1.8rem;
}

.uc-payment-brands p {
  margin-bottom: 0;
}

/* 20260728 isa 画像に関する注記（include/usecase_imgnote.php）
   本文の最後に置く小さな注記。控えめなグレーで、締めの導線を邪魔しない */
.uc-img-note {
  margin: 44px 0 0;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #767676;
  text-align: left;
}


/* 20260728 isa まとめ本文は左揃え
   「#usecase section>.inner>h2+p」のリード文中央寄せが効いているが、
   まとめは要件の総括で長文になるため中央寄せだと読みにくい。
   まとめセクションのみ左揃えに戻す（h2の中央寄せは維持） */
#usecase section.uc-summary>.inner>h2+p {
  text-align: left;
}