/* ==========================================================
   /solutions/qualite/ 専用（2026-10 刷新）
   サイト共通レイアウト（main.min.css ＋ solution-detail-v2.css）の骨組みは残し、
   色・文字・カードの見た目だけを LP /lp/hospitality/ と同じ白黒＋金に寄せる。
   すべて [data-page="qualite"] に閉じているので、同じ共通CSSを使う
   mobile-order・acquisition には影響しない。
   ルートの font-size は 10px（1rem = 10px）。
   変更したら solutions/qualite/index.html の ?v= を上げること（1年キャッシュ）。
   ========================================================== */

/* 見出し用の Noto Serif JP。Google Fonts の text= 指定で、このページの見出し文字（約360字）
   だけを1ファイルにしたもの。標準配信は日本語を約120分割で配るため、見出し約280字のために
   31ファイル・約900KBを読んでいた（2026-10-05 計測）。サブセット外の文字は Hiragino Mincho 等の
   フォールバックで表示される。見出しの文字を増やしたら、文字リストに足してファイルを作り直すこと
   （web-marketing 側 data/qualite_serif_subset_regen.js と fetch_qualite_serif_font_*.sh の手順）。
   自社ホスト（assets/fonts/）。差し替えたら src の ?v= と index.html の <link rel="preload"> の
   ?v= を同じ値で上げる。キャッシュ期間は本番サーバーの woff2 の設定による（反映後にヘッダを確認）。
   ライセンスは SIL OFL 1.1。 */
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-jp-qualite-subset.woff2?v=20261005") format("woff2");
}

[data-page="qualite"] {
  --q-ink: #1b1b1a;
  --q-soft: #3d3d39;
  --q-mute: #6b6b65;
  --q-line: #dcdcd6;
  --q-ivory: #f5f5f2;
  --q-ivory2: #ebebe6;
  --q-gold: #a89010;
  --q-gold-dk: #7e6c0c;
  --q-mark: #ebe4d3;
  --q-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* 段落末の1〜2文字だけが次行に落ちるのを防ぐ */
[data-page="qualite"] .l-main p, [data-page="qualite"] .l-main li { text-wrap: pretty; }

/* ---------- 共通部品の色替え ---------- */
[data-page="qualite"] .l-main .c-btn.-gradient { background: var(--q-ink); }
[data-page="qualite"] .l-main .c-btn.-gradient .c-btn__icon { background: rgba(255, 255, 255, .12); border-radius: 2px; }
[data-page="qualite"] .l-main .c-btn.-border { border-color: var(--q-ink); color: var(--q-ink); }
[data-page="qualite"] .l-main .c-btn.-border .c-btn__txt { color: var(--q-ink); }
/* ページ下部のリンクボタン（機能一覧を見る など）：白地に黒の枠 */
[data-page="qualite"] .l-main .c-btn.-arrow { background: #fff; border: 1px solid var(--q-ink); color: var(--q-ink); }
[data-page="qualite"] .l-main .c-btn.-arrow .c-btn__txt { color: var(--q-ink); }
[data-page="qualite"] .l-main .c-btn.-arrow .c-btn__icon img { filter: brightness(0); }
[data-page="qualite"] .l-main .c-btn.-border .c-btn__icon { background: var(--q-ivory2); }
[data-page="qualite"] .l-main .c-btn.-border .c-btn__icon img { filter: grayscale(1) brightness(.4); }
[data-page="qualite"] .l-main .c-btn { border-radius: 2px; }
[data-page="qualite"] .l-main .c-btn__txt { font-weight: 700; letter-spacing: .06em; }

/* KV下のページ内リンク（課題と解決 など）：共通CSSのミント枠を黒に */
[data-page="qualite"] .p-solutionDetail-nav__link { border-color: var(--q-ink); }
[data-page="qualite"] .p-solutionDetail-nav__link::after { border-color: var(--q-ink); }
@media (any-hover: hover) {
  [data-page="qualite"] .p-solutionDetail-nav__link:hover { background: var(--q-ink); border-color: var(--q-ink); }
}

/* ---------- 見出し・ラベル ---------- */
[data-page="qualite"] .q-eyebrow {
  font-family: var(--q-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--q-mute);
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 14px;
}
[data-page="qualite"] .q-title {
  font-family: var(--q-serif);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
  color: var(--q-ink);
}
[data-page="qualite"] .q-title::after {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  margin: 24px auto 0;
  background: var(--q-ink);
}
[data-page="qualite"] .q-title--sm { font-size: 2rem; margin-bottom: 8px; }
@media (min-width: 768px) {
  [data-page="qualite"] .q-title { font-size: 3.2rem; }
  [data-page="qualite"] .q-title--sm { font-size: 2.6rem; }
}

[data-page="qualite"] .q-section { padding: 72px 20px; }
[data-page="qualite"] .q-inner { max-width: 1080px; margin: 0 auto; }
[data-page="qualite"] .q-inner--narrow { max-width: 820px; }
@media (min-width: 768px) { [data-page="qualite"] .q-section { padding: 104px 40px; } }

/* ---------- KV ---------- */
/* KVの背景は白の和紙（2026-09-30決定）。素材は data/qualite_doc_assets/build_kv_textures.py で生成した継ぎ目なしのタイル */
[data-page="qualite"] .l-section-solutionDetailKv {
  background: #fdfdfb url("/assets/img/solutions/qualite/bg-kv-washi.webp?v=2") repeat;
  background-size: 640px 640px;
  border-bottom: 1px solid var(--q-line);
}
/* 広い画面で写真が右端に取り残されないよう、写真の右端をヘッダーの右端（最大1432pxの枠）にそろえる。
   共通CSSは写真を画面の右端まで寄せる（right: calc(50% - 50vw)）が、写真の幅は枠の53.82%で止まるため、
   画面が広いほど文字と写真の間が空く。ヘッダーが最大幅に達する1453px以上だけ、寄せる量を
   (1432 - 1280) / 2 = 76px で止める。それより狭い画面は従来どおり画面の右端まで */
@media screen and (min-width: 1453px) {
  [data-page="qualite"] .p-solutionDetail-kv__img { right: -76px; }
}
/* KVはA案（2026-09-30決定）：コピー → ロゴ → 説明文 */
[data-page="qualite"] .p-solutionDetail-kv__title { margin-top: 26px; }
[data-page="qualite"] .p-solutionDetail-kv__title .q-logo { display: block; width: 180px; height: auto; margin: 0; overflow: visible; }

/* ロゴのアニメーション：最初に「QUALITÉ」だけが大きく出て、右下へ移動しながら小さくなり、
   キューブと「poscube」が出てくる。コピーを先に読ませるため0.3秒遅らせて始める。1回だけ再生。数値は正式ロゴの座標から計算したもの
   （QUALITÉの最終位置の左上が原点。2.746倍＝ロゴ全幅の大きさから始める） */
[data-page="qualite"] .q-logo__qualite {
  animation:
    qLogoFadeIn .5s ease-out .3s both,
    qLogoSettle 1s cubic-bezier(.65, 0, .35, 1) 1.2s both;
}
[data-page="qualite"] .q-logo__cube { animation: qLogoCube .7s ease-out 1.8s both; }
[data-page="qualite"] .q-logo__pos  { animation: qLogoPos  .7s ease-out 2s both; }
@keyframes qLogoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qLogoSettle {
  from { transform: translate(-79.244px, -19.321px) scale(2.7461); }
  to   { transform: none; }
}
@keyframes qLogoCube { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes qLogoPos  { from { opacity: 0; transform: translateX(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-page="qualite"] .q-logo__qualite,
  [data-page="qualite"] .q-logo__cube,
  [data-page="qualite"] .q-logo__pos { animation: none; }
}
[data-page="qualite"] .q-kv-catch {
  margin: 0;
  font-family: var(--q-serif);
  font-size: clamp(2.2rem, 6.8vw, 2.7rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--q-ink);
}
[data-page="qualite"] .p-solutionDetail-kv__txt { color: var(--q-soft); font-weight: 400; line-height: 1.9; }
[data-page="qualite"] .p-solutionDetail-kv__head .p-solutionDetail-kv__txt { margin-top: 20px; }
@media (min-width: 768px) {
  [data-page="qualite"] .p-solutionDetail-kv__title { margin-top: 36px; }
  [data-page="qualite"] .p-solutionDetail-kv__title .q-logo { width: 210px; }
  /* PC：文字を大きく・字間と行間をゆったり。2行に収まるよう vw で上限を決める */
  [data-page="qualite"] .q-kv-catch {
    margin-top: 48px;   /* パンくずとの間 */
    font-size: clamp(2.2rem, 2.75vw, 4rem);
    line-height: 1.7;
    letter-spacing: .08em;
  }
  [data-page="qualite"] .p-solutionDetail-kv__head .p-solutionDetail-kv__txt { margin-top: 24px; line-height: 2; }
}

/* ---------- 課題 ---------- */
[data-page="qualite"] .p-solutionDetail-question .q-title { margin-bottom: 36px; }
[data-page="qualite"] .p-solutionDetail-question__img img { filter: grayscale(.35); }
[data-page="qualite"] .p-solutionDetail-question__txt { font-family: var(--q-serif); font-weight: 600; color: var(--q-ink); }
[data-page="qualite"] .q-issue-txt { margin-top: 8px; font-size: 1.3rem; line-height: 1.7; color: var(--q-soft); text-align: left; }
[data-page="qualite"] .p-solutionDetail-question__item { align-self: start; }

/* 人手不足のデータ */
[data-page="qualite"] .q-stats { margin-top: 56px; padding: 28px 20px; background: var(--q-ivory); text-align: left; }
[data-page="qualite"] .q-stats__lead { font-family: var(--q-serif); font-size: 1.7rem; font-weight: 600; line-height: 1.6; color: var(--q-ink); }
[data-page="qualite"] .q-stats__list { margin-top: 20px; display: grid; gap: 14px; }
[data-page="qualite"] .q-stats__item { background: #fff; padding: 20px; }
[data-page="qualite"] .q-stats__label { font-size: 1.2rem; font-weight: 700; color: var(--q-soft); letter-spacing: .06em; }
[data-page="qualite"] .q-stats__num { margin-top: 6px; font-family: var(--q-serif); font-size: 4.4rem; font-weight: 600; line-height: 1.1; color: var(--q-gold-dk); }
[data-page="qualite"] .q-stats__num span { font-size: 1.8rem; margin-left: 4px; }
[data-page="qualite"] .q-stats__txt { margin-top: 8px; font-size: 1.3rem; line-height: 1.7; color: var(--q-ink); }
[data-page="qualite"] .q-stats__src { margin-top: 16px; font-size: 1.05rem; line-height: 1.6; color: var(--q-mute); }
@media (min-width: 768px) {
  [data-page="qualite"] .q-stats { padding: 36px 40px; }
  [data-page="qualite"] .q-stats__list { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  [data-page="qualite"] .q-stats__num { font-size: 5.2rem; }
}

/* ---------- ブリッジ（考え方） ---------- */
/* 共通CSSが __inner に上112px・下32pxの余白を持っているので打ち消し、上下を揃える */
[data-page="qualite"] .l-section-solutionDetailBridge { background: var(--q-ink); padding: 64px 24px; }
[data-page="qualite"] .l-section-solutionDetailBridge__inner { padding: 0; }
[data-page="qualite"] .q-bridge { max-width: 880px; margin: 0 auto; text-align: center; color: #fff; }
[data-page="qualite"] .q-bridge__catch {
  font-family: var(--q-serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .08em;
}
/* コピーと引用の区切り：金の細い縦線 */
[data-page="qualite"] .q-bridge__catch::after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 28px auto 0;
  background: var(--q-gold);
}
[data-page="qualite"] .q-bridge__quote {
  margin: 24px auto 0;
  max-width: 40em;
  font-family: var(--q-serif);
  font-size: 1.45rem;
  line-height: 2;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .85);
}
[data-page="qualite"] .q-bridge__quote span {
  display: block;
  margin-top: 12px;
  font-family: var(--q-sans, inherit);
  font-size: 1.2rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
}
@media (min-width: 768px) {
  [data-page="qualite"] .l-section-solutionDetailBridge { padding: 96px 40px; }
  [data-page="qualite"] .q-bridge__catch { font-size: clamp(2.8rem, 2.5vw, 3.6rem); line-height: 1.9; letter-spacing: .12em; }
  [data-page="qualite"] .q-bridge__catch::after { height: 36px; margin-top: 36px; }
  [data-page="qualite"] .q-bridge__quote { margin-top: 32px; font-size: 1.7rem; line-height: 2.1; }
  [data-page="qualite"] .q-bridge__quote span { margin-top: 16px; font-size: 1.3rem; }
}

/* ---------- 3つのこと ---------- */
[data-page="qualite"] .l-section-solutionDetailPoint { padding-top: 64px; }
[data-page="qualite"] .p-lower-detailPoint__item { background: var(--q-ivory); border-radius: 0; }
[data-page="qualite"] .p-lower-detailPoint__icon { background: #fff; color: var(--q-gold-dk); border: 1.5px solid var(--q-gold); font-family: var(--q-serif); }
[data-page="qualite"] .p-lower-detailPoint__title { font-family: var(--q-serif); color: var(--q-ink); }
[data-page="qualite"] .p-lower-detailPoint__txt { color: var(--q-soft); }
[data-page="qualite"] .p-lower-detailPoint__img img { filter: saturate(.3); }
[data-page="qualite"] .q-point-key {
  display: block;
  margin-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--q-gold-dk);
}
/* PC：3つを横に並べる（共通CSSは縦積み＋画像左の横長カード） */
@media (min-width: 1024px) {
  [data-page="qualite"] .p-lower-detailPoint {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
  }
  [data-page="qualite"] .p-lower-detailPoint__item,
  [data-page="qualite"] .p-lower-detailPoint__item:first-child { margin: 36px 0 0; }
  [data-page="qualite"] .p-lower-detailPoint__icon {
    width: 72px;
    height: 72px;
    top: -36px;
    left: 50%;
    translate: -50% 0;
    font-size: 1.1rem;
  }
  [data-page="qualite"] .p-lower-detailPoint__icon span { font-size: 2.8rem; }
  [data-page="qualite"] .p-lower-detailPoint__contents {
    grid-template-areas: "title" "img" "txt";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0;
    padding: 56px 28px 32px;
    align-items: start;
    height: 100%;
  }
  [data-page="qualite"] .p-lower-detailPoint__title { font-size: 1.9rem; line-height: 1.55; text-align: center; }
  [data-page="qualite"] .p-lower-detailPoint__img { max-width: 150px; margin: 22px auto 0; }
  [data-page="qualite"] .p-lower-detailPoint__txt { margin: 20px 0 0; font-size: 1.5rem; line-height: 1.85; }
}

/* ---------- 活用イメージ ---------- */
[data-page="qualite"] .q-usecase { border-top: 1px solid var(--q-line); }
[data-page="qualite"] .q-steps { margin-top: 44px; border-top: 1px solid var(--q-ink); }
[data-page="qualite"] .q-step { display: grid; gap: 20px; padding: 36px 0; border-bottom: 1px solid var(--q-line); }
[data-page="qualite"] .q-step__phase { display: flex; align-items: baseline; gap: 12px; font-size: 1.4rem; font-weight: 700; letter-spacing: .14em; color: var(--q-soft); }
[data-page="qualite"] .q-step__phase span { font-family: var(--q-serif); font-size: 4rem; font-weight: 500; line-height: 1; letter-spacing: .02em; color: var(--q-ink); }
[data-page="qualite"] .q-step__title { margin-top: 12px; font-family: var(--q-serif); font-size: 2rem; font-weight: 600; line-height: 1.55; color: var(--q-ink); }
[data-page="qualite"] .q-step__body { margin-top: 14px; font-size: 1.5rem; line-height: 1.9; color: var(--q-soft); }
[data-page="qualite"] .q-step__body a { color: var(--q-ink); text-underline-offset: 3px; }
[data-page="qualite"] .q-step__note { margin-top: 16px; padding: 12px 16px; border-left: 2px solid var(--q-ink); background: var(--q-ivory); font-size: 1.4rem; line-height: 1.8; color: var(--q-ink); }
[data-page="qualite"] .q-step__note span { display: block; margin-bottom: 2px; font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; color: var(--q-soft); }
[data-page="qualite"] .q-step__media img { width: 100%; height: auto; border: 1px solid var(--q-ivory2); background: #fff; }
[data-page="qualite"] .q-step__media--pair { display: grid; gap: 12px; }
[data-page="qualite"] .q-step__media--pay { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
[data-page="qualite"] .q-step__media--pay img { aspect-ratio: 780 / 522; object-fit: contain; }
[data-page="qualite"] .q-step__scene { filter: saturate(.55); }
@media (min-width: 768px) {
  [data-page="qualite"] .q-step { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 56px; padding: 52px 0; }
  [data-page="qualite"] .q-step__title { font-size: 2.4rem; }
  [data-page="qualite"] .q-step__body { font-size: 1.6rem; }
  [data-page="qualite"] .q-step__media--pair { grid-template-columns: 1fr 1fr; }
  [data-page="qualite"] .q-step__media--pair img { aspect-ratio: 780 / 522; object-fit: cover; }
}

/* ---------- 機能特徴 ---------- */
[data-page="qualite"] .l-section-lowerFeature { background: var(--q-ivory); }
[data-page="qualite"] .p-solutionDetail-feature__title { font-family: var(--q-serif); color: var(--q-ink); }
[data-page="qualite"] .p-solutionDetail-feature__lead { color: var(--q-soft); }
[data-page="qualite"] .p-card-feature__title { color: var(--q-ink); font-family: var(--q-serif); font-weight: 600; }
[data-page="qualite"] .p-card-feature__txt { color: var(--q-soft); }
[data-page="qualite"] .p-card-feature__txt a { color: var(--q-ink); }
[data-page="qualite"] .q-morefeat { margin-top: 48px; padding: 28px 20px; background: #fff; }
[data-page="qualite"] .q-morefeat__title { font-family: var(--q-serif); font-size: 1.8rem; font-weight: 600; color: var(--q-ink); }
[data-page="qualite"] .q-morefeat__list { margin-top: 16px; display: grid; gap: 16px; }
[data-page="qualite"] .q-morefeat__list li { padding-left: 16px; border-left: 2px solid var(--q-gold); font-size: 1.4rem; line-height: 1.8; color: var(--q-soft); }
[data-page="qualite"] .q-morefeat__list strong { display: block; font-size: 1.5rem; color: var(--q-ink); }
@media (min-width: 768px) {
  [data-page="qualite"] .q-morefeat { padding: 36px 40px; }
  [data-page="qualite"] .q-morefeat__list { grid-template-columns: 1fr 1fr; gap: 20px 40px; }
}

/* ---------- 新人・外国人スタッフ ---------- */
[data-page="qualite"] .q-staff__grid { margin-top: 44px; display: grid; gap: 28px; }
[data-page="qualite"] .q-staff__stat { padding: 28px 24px; background: #f4f0dc; }
[data-page="qualite"] .q-staff__label { font-size: 1.4rem; font-weight: 700; color: var(--q-soft); }
[data-page="qualite"] .q-staff__num { margin-top: 8px; font-family: var(--q-serif); font-size: 6rem; font-weight: 600; line-height: 1; color: var(--q-gold-dk); }
[data-page="qualite"] .q-staff__num span { font-size: 2.2rem; margin-left: 4px; }
[data-page="qualite"] .q-staff__quote { margin-top: 16px; font-family: var(--q-serif); font-size: 1.5rem; line-height: 1.9; color: var(--q-ink); }
[data-page="qualite"] .q-staff__who { margin-top: 10px; font-size: 1.2rem; color: var(--q-mute); }
[data-page="qualite"] .q-staff__list { display: grid; gap: 20px; }
[data-page="qualite"] .q-staff__list li { padding-bottom: 18px; border-bottom: 1px solid var(--q-line); font-size: 1.4rem; line-height: 1.8; color: var(--q-soft); }
[data-page="qualite"] .q-staff__list li:last-child { border-bottom: 0; padding-bottom: 0; }
[data-page="qualite"] .q-staff__list strong { display: block; font-size: 1.6rem; color: var(--q-ink); }
@media (min-width: 768px) {
  [data-page="qualite"] .q-staff__grid { grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; }
  [data-page="qualite"] .q-staff__stat { padding: 36px 32px; }
  [data-page="qualite"] .q-staff__num { font-size: 7.2rem; }
}

/* ---------- 導入事例 ---------- */
[data-page="qualite"] .l-section-lowerDetailCaseStudy { background: var(--q-ivory); }
[data-page="qualite"] .p-lower-detailCaseStudy__title { font-family: var(--q-serif); color: var(--q-ink); }
[data-page="qualite"] .p-lower-detailCaseStudy__name { font-weight: 700; color: var(--q-ink); }
[data-page="qualite"] .p-lower-detailCaseStudy__txt { color: var(--q-soft); }
[data-page="qualite"] .q-case-lead { margin-top: 14px; font-size: 1.4rem; line-height: 1.9; color: var(--q-soft); }
@media (min-width: 768px) { [data-page="qualite"] .q-case-lead { font-size: 1.5rem; } }
/* 事例は4件。共通CSSは3列前提なので、PCは4列・タブレットは2列にする */
[data-page="qualite"] .p-lower-detailCaseStudy__list { grid-auto-rows: max-content; }
@media (min-width: 768px) {
  [data-page="qualite"] .p-lower-detailCaseStudy__list { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
}
@media (min-width: 1024px) {
  [data-page="qualite"] .p-lower-detailCaseStudy__list { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
}

/* ---------- FAQ ---------- */
[data-page="qualite"] .q-faq__list { margin-top: 40px; border-top: 1px solid var(--q-ink); }
[data-page="qualite"] .q-faq__item { border-bottom: 1px solid var(--q-line); }
[data-page="qualite"] .q-faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 40px 20px 36px; font-size: 1.5rem; font-weight: 700; line-height: 1.7; color: var(--q-ink);
}
[data-page="qualite"] .q-faq__item summary::-webkit-details-marker { display: none; }
[data-page="qualite"] .q-faq__item summary::before { content: "Q"; position: absolute; left: 4px; top: 17px; font-family: var(--q-serif); font-size: 2rem; font-weight: 600; }
[data-page="qualite"] .q-faq__item summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--q-soft); border-bottom: 1.5px solid var(--q-soft);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
[data-page="qualite"] .q-faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
[data-page="qualite"] .q-faq__answer { padding: 0 8px 22px 36px; font-size: 1.4rem; line-height: 1.9; color: var(--q-soft); }
[data-page="qualite"] .q-faq__more { margin-top: 24px; font-size: 1.4rem; text-align: center; color: var(--q-soft); }
[data-page="qualite"] .q-faq__more a { color: var(--q-ink); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 768px) {
  [data-page="qualite"] .q-faq__item summary { font-size: 1.6rem; padding: 22px 48px 22px 44px; }
  [data-page="qualite"] .q-faq__answer { padding: 0 16px 26px 44px; font-size: 1.5rem; }
}

/* ---------- 資料のご案内 ---------- */
[data-page="qualite"] .q-doc { background: var(--q-ivory); }
[data-page="qualite"] .q-doc__grid { margin-top: 40px; display: grid; gap: 24px; }
[data-page="qualite"] .q-doc__pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-page="qualite"] .q-doc__pages img { width: 100%; height: auto; border: 1px solid var(--q-line); background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
[data-page="qualite"] .q-doc__cover { grid-column: 1 / -1; }
[data-page="qualite"] .q-doc__label { font-family: var(--q-serif); font-size: 1.8rem; font-weight: 600; color: var(--q-ink); }
[data-page="qualite"] .q-doc__list { margin-top: 12px; display: grid; gap: 10px; }
[data-page="qualite"] .q-doc__list li { position: relative; padding-left: 26px; font-size: 1.5rem; line-height: 1.7; color: var(--q-ink); }
[data-page="qualite"] .q-doc__list li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px;
  border-left: 2px solid var(--q-ink); border-bottom: 2px solid var(--q-ink); transform: rotate(-45deg);
}
[data-page="qualite"] .q-doc__meta { margin-top: 14px; font-size: 1.2rem; color: var(--q-mute); }
@media (min-width: 768px) {
  [data-page="qualite"] .q-doc__grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
  [data-page="qualite"] .q-doc__label { font-size: 2rem; }
  [data-page="qualite"] .q-doc__list li { font-size: 1.6rem; }
}

/* ---------- ショールームの案内 ---------- */
[data-page="qualite"] .p-lower-otherNav { background: var(--q-ivory); background-image: none; border-radius: 0; }
[data-page="qualite"] .p-lower-otherNav__link { border-color: var(--q-line); border-radius: 0; background: #fff; }
[data-page="qualite"] .p-lower-otherNav__title { font-family: var(--q-serif); color: var(--q-ink); }
[data-page="qualite"] .p-lower-otherNav__arrow { background: var(--q-ink); border-radius: 2px; }

/* ---------- 下部のCTA帯 ---------- */
[data-page="qualite"] .l-section-lowerContactLinkBlock.-bg-green { background: var(--q-ivory); }

/* 明朝（Noto Serif JP）は 500・600 だけを読み込んでいる。それ以外の太さを指定すると
   ブラウザが近い太さで代用したり疑似的に太らせたりして揃わなくなるので、500／600 に寄せる */
[data-page="qualite"] .q-bridge__quote,
[data-page="qualite"] .q-staff__quote { font-weight: 500; }
[data-page="qualite"] .p-lower-detailPoint__title { font-weight: 600; }
[data-page="qualite"] .p-lower-detailPoint__icon { font-weight: 500; }
[data-page="qualite"] .p-lower-detailPoint__icon span,
[data-page="qualite"] .p-solutionDetail-feature__title,
[data-page="qualite"] .p-lower-detailCaseStudy__title { font-weight: 600; }

/* ==========================================================
   機能特徴（2026-10 見直し）：3つのまとまり＋まとまりごとの見せ方
   01 伝票で伝える：HTMLで組んだ伝票を「紙」として見せる（下端はミシン目のギザギザ、影付き）
   02 画面で進める：画面の画像を白い台紙で額装
   03 つながる    ：連携先のロゴを小さく並べる
   ========================================================== */
[data-page="qualite"] .q-feat { margin-top: 36px; }
[data-page="qualite"] .q-feat__group + .q-feat__group { margin-top: 56px; }
[data-page="qualite"] .q-feat__head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--q-line);
}
[data-page="qualite"] .q-feat__num { grid-row: span 2; font-family: var(--q-serif); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--q-gold); letter-spacing: .04em; }
[data-page="qualite"] .q-feat__heading { font-family: var(--q-serif); font-size: 2rem; font-weight: 600; line-height: 1.5; color: var(--q-ink); letter-spacing: .04em; }
[data-page="qualite"] .q-feat__lead { margin-top: 4px; font-size: 1.4rem; line-height: 1.8; color: var(--q-soft); }

[data-page="qualite"] .q-feat__list { margin-top: 24px; display: grid; gap: 32px; }
[data-page="qualite"] .q-feat__title { margin-top: 14px; font-family: var(--q-serif); font-size: 1.8rem; font-weight: 600; line-height: 1.5; color: var(--q-ink); }
[data-page="qualite"] .q-feat__txt { margin-top: 6px; font-size: 1.4rem; line-height: 1.8; color: var(--q-soft); }
[data-page="qualite"] .q-feat__txt a { color: var(--q-ink); text-decoration: underline; }

/* 画像の枠：3つのまとまりで縦横比をそろえる */
[data-page="qualite"] .q-feat__visual { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }

/* ---------- 01 伝票 ---------- */
[data-page="qualite"] .q-feat__visual.-slip {
  padding: 14px 8%;
  /* 影は伝票の形（ギザギザ）に沿わせたいので、box-shadow ではなく drop-shadow で付ける */
  filter: drop-shadow(0 1px 1px rgba(40, 32, 10, .08)) drop-shadow(0 8px 14px rgba(40, 32, 10, .10));
}
[data-page="qualite"] .q-slip {
  --z: 8px;   /* ギザギザの深さ */
  width: 100%;
  max-width: 320px;
  padding: 16px 20px calc(18px + var(--z));
  background: #fff;
  color: #2a2a28;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat,
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / calc(var(--z) * 2) var(--z) repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat,
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / calc(var(--z) * 2) var(--z) repeat-x;
}
[data-page="qualite"] .q-slip__head { text-align: center; font-weight: 700; letter-spacing: .12em; }
[data-page="qualite"] .q-slip__status { display: table; margin: 6px auto 12px; padding: 0 .35em; background: #2a2a28; color: #fff; font-weight: 700; letter-spacing: .04em; }
[data-page="qualite"] .q-slip__table { padding-bottom: 6px; border-bottom: 2px dotted #3a3a38; font-size: 1.2rem; color: #4a4a47; }
[data-page="qualite"] .q-slip__rows { margin-top: 12px; display: grid; gap: 8px; }
[data-page="qualite"] .q-slip__rows > li { display: grid; grid-template-columns: 1.15em 1.1em 1fr auto; column-gap: .55em; align-items: center; }
[data-page="qualite"] .q-slip__chk { width: .95em; height: .95em; border: 2px solid #3a3a38; }
[data-page="qualite"] .q-slip__qty { font-size: 1.25em; font-weight: 700; line-height: 1; text-align: center; }
[data-page="qualite"] .q-slip__name { font-weight: 600; min-width: 0; line-height: 1.35; }   /* 長い料理名は切らずに折り返す */
[data-page="qualite"] .q-slip__pos { width: 1.9em; background: #2a2a28; color: #fff; font-weight: 700; line-height: 1.35; text-align: center; }
/* シートポジションの列を金の枠で囲む（以前の画像の囲み枠を金にしたもの） */
[data-page="qualite"] .q-slip__rows.-pos { position: relative; }
[data-page="qualite"] .q-slip__rows.-pos::after {
  content: "";
  position: absolute;
  top: -6px; bottom: -6px; right: -6px;
  width: calc(1.9em + 12px);
  border: 2px solid var(--q-gold);
  pointer-events: none;
}
/* ファイヤーの「出」の印 */
[data-page="qualite"] .q-slip__mark {
  width: 1.15em; height: 1.15em;
  display: grid; place-items: center;
  border: 2px solid #2a2a28;
  font-size: .9em; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--q-gold);
}
/* メモ（ご要望） */
[data-page="qualite"] .q-slip__rows > li.q-slip__memo {
  display: block;
  justify-self: start;
  margin-top: 2px;
  padding: 2px 10px;
  border: 2px solid var(--q-gold);
  font-weight: 700;
}

/* ---------- 02 画面（白い台紙で額装） ---------- */
[data-page="qualite"] .q-feat__visual.-screen { padding: 4%; background: #fff; border: 1px solid var(--q-line); }
[data-page="qualite"] .q-feat__visual.-screen img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- 03 連携（ロゴを並べる） ---------- */
[data-page="qualite"] .q-feat__visual.-logos { flex-direction: column; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--q-line); }
[data-page="qualite"] .q-feat__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; }
[data-page="qualite"] .q-feat__logos li { height: 24px; display: flex; align-items: center; }
[data-page="qualite"] .q-feat__logos li.is-tall { height: 36px; }   /* Resty は縦長のロゴなので高めにして見た目をそろえる */
[data-page="qualite"] .q-feat__logos img { height: 100%; width: auto; max-width: 120px; object-fit: contain; }
[data-page="qualite"] .q-feat__visual.-devices .q-feat__logos li { height: 28px; }
[data-page="qualite"] .q-feat__logos li.is-stera { height: 40px !important; }   /* stera のロゴ画像は余白が大きいので、ほかのロゴと見た目をそろえるため高めにする */
[data-page="qualite"] .q-feat__devices { width: auto; max-width: 88%; height: 52%; object-fit: contain; }

/* SP：02・03 は「画像を左・説明を右」の横並びにして縦に長くなりすぎないようにする */
@media screen and (max-width: 767.98px) {
  [data-page="qualite"] .q-feat__heading { font-size: 1.8rem; }
  /* 伝票は枠の縦横比をやめ、伝票の高さに合わせる（上下の余白が空きすぎるため） */
  [data-page="qualite"] .q-feat__visual.-slip { aspect-ratio: auto; padding: 16px 6% 20px; }
  [data-page="qualite"] .q-feat__list.-compact { gap: 20px; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__item {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-areas: "v t" "v x";
    column-gap: 14px;
    align-items: start;
  }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__visual { grid-area: v; align-self: center; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__title { grid-area: t; margin-top: 0; font-size: 1.6rem; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__txt { grid-area: x; font-size: 1.3rem; line-height: 1.7; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__visual.-logos { padding: 10px; gap: 8px; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__logos { gap: 8px 12px; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__logos li { height: 14px; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__logos li.is-tall { height: 22px; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__visual.-devices .q-feat__logos li { height: 16px; }
  [data-page="qualite"] .q-feat__list.-compact .q-feat__logos li.is-stera { height: 24px !important; }
}
@media screen and (min-width: 768px) {
  [data-page="qualite"] .q-feat { margin-top: 48px; }
  [data-page="qualite"] .q-feat__group + .q-feat__group { margin-top: 72px; }
  [data-page="qualite"] .q-feat__heading { font-size: 2.4rem; }
  [data-page="qualite"] .q-feat__lead { font-size: 1.5rem; }
  [data-page="qualite"] .q-feat__list { margin-top: 32px; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
  [data-page="qualite"] .q-feat__list.-two { grid-template-columns: repeat(2, 1fr); }
  [data-page="qualite"] .q-feat__list.-two .q-feat__visual { aspect-ratio: 12 / 5; }
  [data-page="qualite"] .q-slip { max-width: 340px; font-size: 1.6rem; }
  [data-page="qualite"] .q-feat__visual.-slip { padding: 14px 6%; }
  [data-page="qualite"] .q-feat__logos { gap: 16px 30px; }
  [data-page="qualite"] .q-feat__logos li { height: 30px; }
  [data-page="qualite"] .q-feat__logos li.is-tall { height: 44px; }
  [data-page="qualite"] .q-feat__visual.-devices .q-feat__logos li { height: 32px; }
  [data-page="qualite"] .q-feat__devices { height: 56%; }
  [data-page="qualite"] .q-feat__title { font-size: 2rem; }
}
/* 360px未満のスマホは、長い料理名の折り返しを減らすため伝票の文字を少し小さくする */
@media screen and (max-width: 359.98px) {
  [data-page="qualite"] .q-slip { font-size: 1.35rem; padding: 14px 14px calc(16px + var(--z)); }
}
/* 3列で1枚が狭くなる幅（タブレット〜小さめのPC）は、伝票の文字を一段小さくする */
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
  [data-page="qualite"] .q-slip { font-size: 1.35rem; padding: 14px 14px calc(16px + var(--z)); }
  [data-page="qualite"] .q-feat__visual.-slip { padding: 12px 4%; }
}