@charset "UTF-8";
/* Moca Works v6 見本（2026-10-08 ミヤギ）。本番 style.css の後に読む
 * 構成：書体 → 間の部分（v6） → ヒーローの3つの特長・ヘッダー・フッター（v5 から引き継ぎ）
 */
/* ── 書体（2026-10-08）：このページで使う文字だけを含んだ Noto Sans JP（v6/make_font6.py で作成・500/700/900 で計174KB）
   ⚠️Google Fonts の Noto Sans JP をそのまま読むと 34ファイル・約700KB。端末の標準書体だけだと Windows で游ゴシックになり細く見えた（タクヤ指摘）
   ⚠️文章を変えたら make_font.py で作り直す（無い文字は端末の標準書体で出る）
   ⚠️ヒーローは本番の書体のまま（文字の大きさが変わるとキャラクターの位置がずれる） */
@font-face { font-family: "MocaJP"; src: url("assets/fonts/moca-jp6-500.woff2?v=8856054c") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "MocaJP"; src: url("assets/fonts/moca-jp6-700.woff2?v=2edbf5a5") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "MocaJP"; src: url("assets/fonts/moca-jp6-900.woff2?v=51cd3e63") format("woff2"); font-weight: 900; font-display: swap; }

/* =====================================================================
   Moca Works v6 見本：間の部分（2026-10-08 ミヤギ・タクヤ承認）
   方針：ヒーローの熱量をページ全体に通す
     ・見出しはピンクの英字ラベル＋大きな日本語（中央）
     ・カードはお問い合わせと同じ「角丸の白いカード＋影」
     ・背景を 濃紺 → 薄ピンク → 白 → ピンク → 薄青 → 白 → 薄ピンク と切り替える
   ⚠️色・書体・幅は .v6 の中だけで決める。本番 style.css の details／summary／nav の全体指定は打ち消す
   幅の区切り：1100px／900px／760px（本番に合わせる）
   ===================================================================== */
.v6 {
  --ink: #111014; --ink-2: #3d3840; --ink-3: #6b6470; --line: #f0e7ea;
  --pink: #f36087; --pink-deep: #e04a72; --pink-pale: #fde3eb; --pink-mist: #fff4f7;
  --navy: #1b2a4a; --navy-pale: #f4f6fb;
  --v-jp: "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
  --v-disp: "Archivo Black", "Arial Black", sans-serif;
  --r: 20px;
  --sh: 0 22px 50px -34px rgba(60, 20, 45, .34);
  position: relative; padding: 112px 0; font-family: var(--v-jp); font-size: 17px; line-height: 1.9; font-weight: 500; color: var(--ink);
  text-wrap: pretty;
}
:where(.v6) *, :where(.v6) *::before, :where(.v6) *::after { box-sizing: border-box; }
:where(.v6) h2, :where(.v6) h3 { margin: 0; font-weight: 900; text-wrap: wrap; }
:where(.v6) p { margin: 0; }
:where(.v6) ul, :where(.v6) ol { margin: 0; padding: 0; list-style: none; }
:where(.v6) b { font-weight: 700; }
:where(.v6) img { max-width: 100%; height: auto; display: block; }
.v6-wrap { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.v6-center { text-align: center; }
.v6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 62px; padding: 0 40px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 17px/1 var(--v-jp); text-decoration: none; box-shadow: 0 16px 34px -16px rgba(243, 96, 135, .9); transition: background .2s, transform .2s; }
.v6-btn:hover { background: var(--pink-deep); transform: translateY(-2px); color: #fff; }
.link6 { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--pink-deep); text-decoration: none; border-bottom: 2px solid var(--pink-pale); padding-bottom: 2px; }
.link6:hover { border-color: var(--pink); }
.card6 { background: #fff; border: 1px solid #f3e8ec; border-radius: var(--r); box-shadow: var(--sh); }

/* 出てくる動き（v6.js が v6-rv を付ける。JS が止まっていれば何も隠れない） */
.v6-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.v6-rv.is-in { opacity: 1; transform: none; }

/* ── 見出し ── */
.hd6 { text-align: center; margin-bottom: 56px; }
.hd6-en { display: inline-flex; align-items: center; gap: 12px; font: 400 14px/1 var(--v-disp); letter-spacing: .22em; color: var(--pink); }
.hd6-en::before, .hd6-en::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.hd6 h2 { margin-top: 16px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.35; color: var(--navy); letter-spacing: .01em; }
.hd6-lead { max-width: 40em; margin: 18px auto 0; color: var(--ink-2); }
.hd6-lead b { color: var(--ink); background: linear-gradient(transparent 62%, var(--pink-pale) 62%); }
.hd6-light .hd6-en { color: #ff9cb6; }
.hd6-light h2 { color: #fff; }
.hd6-light .hd6-lead { color: rgba(255, 255, 255, .78); }
.hd6-en-white { color: #fff; }

/* ── 制作実績（濃紺） ── */
.v6-works { overflow: hidden; background: var(--navy); color: #fff; }
.v6-works::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 45% at 88% 6%, rgba(243, 96, 135, .32), transparent 70%), radial-gradient(40% 35% at 6% 96%, rgba(243, 96, 135, .18), transparent 70%); pointer-events: none; }
.v6-works .v6-wrap { position: relative; }
.works6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; }
/* ⚠️互い違いは top でずらす（出てくる動きの transform と重なると消えるため） */
.work6 { position: relative; margin: 0; }
.work6:nth-child(3n+2) { top: 48px; }
.v6-ph { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75); cursor: default; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.v6-ph img { width: 100%; aspect-ratio: 900 / 1273; object-fit: cover; }
.v6-ph:hover { transform: translateY(-6px); }
.work6 figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.work6-size { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--pink); color: #fff; font: 400 11.5px/1.5 var(--v-disp); letter-spacing: .04em; }
.works6-cta { margin-top: 96px; text-align: center; }

/* ── 選ばれる理由（薄ピンク） ── */
.v6-reason { background: var(--pink-mist); }
.need6 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: end; }
.need6-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.need6-list li { position: relative; padding: 24px 26px 24px 62px; border-radius: 16px; background: #fff; border: 1px solid #f3e8ec; box-shadow: var(--sh); }
.need6-list li::before { content: ""; position: absolute; left: 22px; top: 27px; width: 26px; height: 26px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 15px no-repeat; }
.need6-list b { display: block; font-size: 17.5px; font-weight: 900; line-height: 1.55; color: var(--navy); }
.need6-list span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.reason6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.reason6 li { position: relative; padding: 40px 40px 36px; overflow: hidden; }
.reason6-no { position: absolute; right: 24px; top: 14px; font: 400 76px/1 var(--v-disp); color: var(--pink-pale); letter-spacing: -.02em; pointer-events: none; }
.reason6 h3 { position: relative; font-size: 23px; line-height: 1.45; color: var(--navy); padding: 0 84px 0 18px; border-left: 5px solid var(--pink); }   /* 右の 84px は大きな番号の逃げ */
.reason6 p { position: relative; margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.reason6 .link6 { position: relative; margin-top: 18px; }

/* ── 対応内容と料金（白） ── */
.v6-price { background: #fff; }
.svc6 { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.svc6 li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 14px 22px; border-radius: 18px; background: var(--navy-pale); }
.svc6-ic { width: 46px; height: 46px; margin-bottom: 10px; color: var(--navy); }
.svc6-ic svg { width: 100%; height: 100%; }
.svc6 b { font-size: 16.5px; font-weight: 900; color: var(--navy); line-height: 1.5; }
.svc6 li > span:last-child { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.price6-top { display: flex; align-items: center; gap: 16px; max-width: 920px; margin: 48px auto 28px; padding: 20px 28px; border-radius: 16px; background: var(--pink-mist); border: 2px solid var(--pink-pale); color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.price6-top-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink); color: #fff; font: 400 17px/1 var(--v-disp); }
.price6-top b { display: block; font-size: 17.5px; font-weight: 900; color: var(--navy); }
.price6-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.price6-main li { padding: 34px 26px 30px; text-align: center; }
.price6-main h3 { font-size: 18px; color: var(--navy); }
.price6-yen { margin: 14px 0 10px; font-size: 17px; font-weight: 700; color: var(--pink-deep); line-height: 1; }
.price6-yen b { font: 400 clamp(46px, 4.8vw, 62px)/1 var(--v-disp); letter-spacing: -.02em; margin-right: 4px; }
.price6-desc { font-size: 14px; line-height: 1.8; color: var(--ink-3); }
.price6-sub { display: inline-block; margin-top: 12px; padding: 4px 14px; border-radius: 999px; background: var(--pink-mist); font-size: 13.5px; color: var(--ink-2); }
.price6-sub b { color: var(--pink-deep); }
.price6-more { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px 48px; margin-top: 22px; padding: 30px 36px 28px; }
.price6-list { margin: 0; }
.price6-cap { margin-bottom: 4px; font-size: 15.5px; font-weight: 900; color: var(--navy); }
.price6-list div { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.price6-list div:last-child { border-bottom: 0; }
.price6-list div dt { font-weight: 700; font-size: 15px; }
.price6-list div dt small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.price6-list div::after { content: ""; flex: 1; order: 1; border-bottom: 2px dotted #ecc6d2; transform: translateY(-4px); min-width: 24px; }
.price6-list div dd { order: 2; margin: 0; white-space: nowrap; font-weight: 900; color: var(--pink-deep); }
.price6-inc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.price6-inc-h { font-weight: 900; color: var(--navy); font-size: 15px; }
.price6-inc ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.price6-inc li { position: relative; padding-left: 22px; font-size: 14.5px; }
.price6-inc li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 2.5px solid var(--pink); border-bottom: 2.5px solid var(--pink); transform: rotate(-45deg); }
.price6-note { margin: 16px 0 40px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ── 継続のご依頼（ピンク） ── */
.v6-partner { overflow: hidden; background: linear-gradient(135deg, #f36087 0%, #f0779a 100%); color: #fff; }
.partner6 { display: block; }
.partner6-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 64px; align-items: start; }
.partner6-copy > .partner6-merits { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
.partner6 h2 { margin-top: 16px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.35; color: #fff; }
.partner6-lead { margin-top: 18px; color: rgba(255, 255, 255, .94); }
.partner6-lead b { color: #fff; border-bottom: 2px solid rgba(255, 255, 255, .75); }
.partner6-merits { display: grid; gap: 12px; margin-top: 28px; }
.partner6-merits li { display: grid; grid-template-columns: 50px 1fr; align-items: start; padding: 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); font-size: 14.5px; line-height: 1.8; color: rgba(255, 255, 255, .94); }
.partner6-merits li > span { font: 400 22px/1.3 var(--v-disp); color: #fff; }
.partner6-merits b { display: block; color: #fff; font-size: 17.5px; font-weight: 900; }

/* ── 流れ（薄青） ── */
.v6-flow { background: var(--navy-pale); }
.flow6 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.flow6 li { position: relative; padding: 34px 26px 28px; text-align: center; }
.flow6 li:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 50%; width: 12px; height: 12px; border-top: 3px solid var(--pink); border-right: 3px solid var(--pink); transform: translateY(-50%) rotate(45deg); }
.flow6-no { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; font: 400 16px/1 var(--v-disp); }
.flow6 li:last-child .flow6-no { background: var(--pink); }
.flow6 h3 { margin-top: 18px; font-size: 20px; color: var(--navy); }
.flow6 p { margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.flow6-note { margin-top: 28px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ── よくある質問・発注情報（白） ──
   ⚠️本番の style.css は details／summary 全体に枠・余白・「Q」「＋」を付けている。ここで全部打ち消す */
.v6-faq { background: #fff; }
.faq6 { max-width: 920px; margin: 0 auto; }
.faq6-list { display: grid; gap: 12px; }
.v6 .faq6-q { margin: 0; padding: 0; border: 1px solid #f3e8ec; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px -26px rgba(60, 20, 45, .5); overflow: hidden; }
.v6 .faq6-q summary { position: relative; display: block; list-style: none; cursor: pointer; margin: 0; padding: 22px 64px 22px 68px; border-radius: 0; background: none; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.v6 .faq6-q summary:hover { background-color: var(--pink-mist); color: var(--navy); }
.v6 .faq6-q summary::-webkit-details-marker { display: none; }
.v6 .faq6-q summary::before { content: "Q"; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: var(--pink); color: #fff; font: 400 14px/1 var(--v-disp); }
.v6 .faq6-q summary::after, .v6 .faq6-q[open] summary::after { content: ""; position: absolute; right: 24px; top: 50%; left: auto; width: 16px; height: 2px; margin: 0; padding: 0; border: 0; background: var(--pink); transform: none; font-size: 0; }
.v6 .faq6-q:not([open]) summary { background-image: linear-gradient(var(--pink), var(--pink)); background-repeat: no-repeat; background-size: 2px 16px; background-position: calc(100% - 31px) 50%; }
.v6 .faq6-a { padding: 0 28px 24px 68px; color: var(--ink-2); font-size: 15.5px; }
.v6 .faq6-a p { margin: 0; padding: 0; font-size: inherit; color: inherit; }
.v6 .faq6-a a { color: var(--pink-deep); font-weight: 700; }
.v6 .faq6-a b { color: var(--ink); }
.about6 { max-width: 920px; margin: 56px auto 0; padding: 34px 40px 26px; }
.about6 h3 { font-size: 20px; color: var(--navy); padding-left: 14px; border-left: 5px solid var(--pink); line-height: 1.4; }
.about6 dl { margin: 16px 0 0; }
.about6 dl div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.about6 dl div:last-child { border-bottom: 0; }
.about6 dt { font-weight: 900; color: var(--navy); }
.about6 dd { margin: 0; color: var(--ink-2); }

/* ── コラム（薄ピンク） ── */
/* ⚠️すぐ下のお問い合わせが薄いピンクなので、境目が消えないよう薄い青にする（2026-10-08 タクヤ指摘） */
.v6-column { background: var(--navy-pale); }
.col6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 36px; }
.col6 a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 30px 28px 26px; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.col6 a:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(60, 20, 45, .45); }
.col6-tag { align-self: flex-start; padding: 3px 12px; border-radius: 999px; background: var(--pink-pale); color: var(--pink-deep); font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.col6 h3 { font-size: 18px; line-height: 1.55; color: var(--navy); }
.col6 p { flex: 1; font-size: 14.5px; line-height: 1.8; color: var(--ink-3); }
.col6 time { font: 400 13px/1 var(--v-disp); color: var(--ink-3); letter-spacing: .04em; }

/* ===== タブレット（〜1100px） ===== */
@media (max-width: 1100px) {
  .v6 { padding: 96px 0; font-size: 16px; }
  .works6 { gap: 36px 22px; }
  .v6-ph { cursor: zoom-in; }
  .need6 { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
      .need6-list { grid-template-columns: 1fr; gap: 12px; }
  .reason6 li { padding: 34px 30px 30px; }
  .reason6 h3 { font-size: 20px; padding-right: 64px; }
  .reason6-no { font-size: 54px; right: 18px; }
  .svc6 li { flex: 1 1 calc(33.333% - 14px); max-width: calc(33.333% - 10px); }
  .price6-main { gap: 16px; }
  .price6-main li { padding: 28px 16px 24px; }
  .price6-more { grid-template-columns: 1fr; padding: 26px 28px; }
  .partner6-copy { column-gap: 36px; }
        .flow6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .flow6 li::after { display: none; }
  .col6 { gap: 16px; }
  .col6 a { padding: 26px 22px 22px; }
}
@media (max-width: 900px) {
  .price6-main { grid-template-columns: 1fr; }
  .price6-main li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "h yen" "desc yen" "sub sub"; align-items: center; column-gap: 16px; text-align: left; padding: 22px 24px; }
  .price6-main h3 { grid-area: h; }
  .price6-yen { grid-area: yen; margin: 0; }
  .price6-yen b { font-size: 44px; }
  .price6-desc { grid-area: desc; }
  .price6-sub { grid-area: sub; justify-self: start; margin-top: 10px; }
  .partner6-copy { grid-template-columns: 1fr; }
  .partner6-copy > .partner6-merits { grid-column: auto; grid-row: auto; margin-top: 28px; }
    .col6 { grid-template-columns: 1fr; }
}

/* ===== スマホ（〜760px） ===== */
@media (max-width: 760px) {
  .v6 { padding: 72px 0; font-size: 15.5px; }
  .v6-wrap { width: calc(100% - 40px); }
  .hd6 { margin-bottom: 36px; }
  .hd6-en { font-size: 12.5px; gap: 10px; }
  .hd6 h2, .partner6 h2 { font-size: 26px; }
  .hd6-lead { font-size: 15px; text-align: left; }
  .v6-btn { width: 100%; height: 58px; font-size: 16px; }

  .works6 { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .work6:nth-child(3n+2) { top: 0; }
  .work6:nth-child(2n) { top: 32px; }
  .work6 figcaption { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13.5px; margin-top: 10px; }
  .works6-cta { margin-top: 64px; }

  .need6 { grid-template-columns: 1fr; gap: 16px; }
          .need6-list li { padding: 18px 18px 18px 54px; }
  .need6-list li::before { left: 16px; top: 21px; width: 24px; height: 24px; }
  .need6-list b { font-size: 16px; }
  .need6-list span { font-size: 13.5px; }
  .reason6 { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .reason6 li { padding: 28px 22px 24px; }
  .reason6-no { font-size: 50px; right: 14px; top: 10px; }
  .reason6 h3 { padding-right: 58px; }
  .reason6 h3 { font-size: 18.5px; }
  .reason6 p { font-size: 14.5px; }

  /* 対応内容：1枚の白いカードの中に、アイコン・名前・説明の一覧 */
  .svc6 { display: block; padding: 6px 20px; border-radius: 18px; background: var(--navy-pale); }
  .svc6 li { max-width: none; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; text-align: left; gap: 0 16px; padding: 16px 0; border-radius: 0; background: none; border-bottom: 1px solid #e3e7f0; }
  .svc6 li:last-child { border-bottom: 0; }
  .svc6-ic { grid-row: 1 / span 2; width: 36px; height: 36px; margin: 0; }
  .svc6 b { font-size: 16px; }
  .price6-top { align-items: flex-start; margin: 32px 0 20px; padding: 16px 18px; font-size: 14px; }
  .price6-top-ic { width: 28px; height: 28px; font-size: 14px; }
  .price6-top b { font-size: 15.5px; }
  .price6-main li { padding: 18px 18px; }
  .price6-main h3 { font-size: 16px; }
  .price6-yen { font-size: 13px; }
  .price6-yen b { font-size: 36px; }
  .price6-desc { font-size: 12.5px; }
  .price6-more { padding: 20px 18px; }
  .price6-list div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
  .price6-list div::after { content: none; }
  .price6-list div dt { font-size: 14px; }
  .price6-inc { flex-direction: column; align-items: flex-start; }
  .price6-inc ul { flex-direction: column; gap: 6px; }
  .price6-note { text-align: left; }

  .partner6-merits li { grid-template-columns: 40px 1fr; padding: 16px 16px; font-size: 13.5px; }
  .partner6-merits li > span { font-size: 18px; }
  .partner6-merits b { font-size: 16px; }

  .flow6 { grid-template-columns: 1fr; gap: 12px; }
  .flow6 li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: center; text-align: left; padding: 18px 18px; }
  .flow6-no { grid-row: 1 / span 2; width: 48px; height: 48px; font-size: 14px; }
  .flow6 h3 { margin-top: 0; font-size: 17px; }
  .flow6 p { margin-top: 2px; font-size: 13.5px; }
  .flow6-note { text-align: left; }

  .v6 .faq6-q summary { padding: 18px 46px 18px 54px; font-size: 15px; }
  .v6 .faq6-q summary::before { left: 16px; width: 26px; height: 26px; font-size: 12.5px; }
  .v6 .faq6-q summary::after, .v6 .faq6-q[open] summary::after { right: 18px; width: 14px; }
  .v6 .faq6-q:not([open]) summary { background-size: 2px 14px; background-position: calc(100% - 24px) 50%; }
  .v6 .faq6-a { padding: 0 18px 20px 54px; font-size: 14.5px; }
  .about6 { margin-top: 40px; padding: 24px 20px 16px; }
  .about6 h3 { font-size: 18px; }
  .about6 dl div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; font-size: 14.5px; }
  .about6 dt { font-size: 13.5px; }

  .col6 a { padding: 22px 20px 20px; }
  .col6 h3 { font-size: 16.5px; }
  .col6 p { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .v6-rv { opacity: 1; transform: none; transition: none; }
}



/* 制作実績の背景：パチンコホールの光のぼかし（2026-10-08 タクヤ作成。元：会社/プロジェクト/Moca_参考画像/背景_制作実績（光のぼかし）.png）
   ⚠️作品が主役なので、濃紺を上に重ねて暗くしてある。スマホは軽い版 */
.v6-works { background: var(--navy) url("assets/bg-works.webp") center / cover no-repeat; }
.v6-works::before { background: linear-gradient(180deg, rgba(27, 42, 74, .72) 0%, rgba(27, 42, 74, .55) 45%, rgba(27, 42, 74, .78) 100%); }
@media (max-width: 760px) { .v6-works { background-image: url("assets/bg-works-sm.webp"); } }

/* =====================================================================
   画像を使わない部品（2026-10-08 タクヤ「ヒーローとお問い合わせ以外は画像を使わずに」。実績のポスターは残す）
   ===================================================================== */
/* 流れる帯：販促物の名前を文字だけで流す */
.tick6 { overflow: hidden; background: var(--pink, #f36087); color: #fff; padding: 18px 0; }
.tick6-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: tick6 38s linear infinite; font: 900 22px/1 "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; letter-spacing: .06em; white-space: nowrap; }
.tick6-track i { font-style: normal; font-size: 16px; color: #1b2a4a; }
@keyframes tick6 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tick6-track { animation: none; } }

/* 数字の帯 */
.stat6 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 56px; border-radius: var(--r); background: var(--navy); box-shadow: var(--sh); overflow: hidden; }
.stat6 li { padding: 30px 18px 26px; text-align: center; color: #fff; border-left: 1px solid rgba(255, 255, 255, .14); }
.stat6 li:first-child { border-left: 0; }
/* 数字は Archivo Black、日本語（最短・修正）は MocaJP の太字で出す（Archivo Black に日本語が無く、細い端末の書体になっていた） */
.stat6 b { display: block; font: 900 clamp(34px, 3.6vw, 48px)/1 "Archivo Black", "MocaJP", "Hiragino Kaku Gothic ProN", sans-serif; font-synthesis: none; letter-spacing: -.01em; color: #fff; }
.stat6 b small { margin-left: 4px; font: 900 .42em/1 var(--v-jp); color: #ff9cb6; letter-spacing: .04em; }
.stat6 span { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .78); }

/* こんなとき：キャラクターの代わりに大きな言葉 */
.need6 { grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); align-items: center; gap: 48px; }
.need6-say-en { font: 400 13px/1 var(--v-disp); letter-spacing: .22em; color: var(--pink); }
.need6-say-big { margin-top: 14px; font-size: clamp(28px, 2.8vw, 38px); font-weight: 900; line-height: 1.4; color: var(--navy); }
.need6-say-big em { font-style: normal; background: linear-gradient(transparent 64%, var(--pink-pale) 64%); }
.need6-say-sub { margin-top: 16px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }


@media (max-width: 1100px) {
  .stat6 li { padding: 24px 10px 20px; }
  .stat6 span { font-size: 12.5px; }
  .need6 { grid-template-columns: 1fr; gap: 24px; }
  .need6-say { text-align: center; }
  .need6-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tick6 { padding: 14px 0; }
  .tick6-track { font-size: 17px; gap: 20px; }
  .stat6 { grid-template-columns: 1fr 1fr; margin-bottom: 40px; }
  .stat6 li { padding: 22px 8px 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .stat6 li:nth-child(odd) { border-left: 0; }
  .stat6 li:nth-child(-n+2) { border-top: 0; }
  .stat6 b { font-size: 32px; }
  .stat6 span { font-size: 12px; margin-top: 8px; }
  .need6-say { text-align: left; }
  .need6-say-big { font-size: 25px; }
  .need6-list { grid-template-columns: 1fr; }
}

/* =====================================================================
   ヒーローの3つの特長（.tri）だけ作り直し（2026-10-08 タクヤ「ここもっとデザインして」）
   ⚠️キャラクターの位置はヒーローの文字の塊の高さで決まる。.tri の高さを本番と端数まで同じにすること
     本番の実測（拡大縮小する前の値）：1120px以上 134.625px／768〜1119px 181.9375px／761〜767px 310.672px／760px以下 186.03125px
     ⚠️135px にしたらキャラクターが 0.37px ずれた。幅の区切りはヒーローの台の切り替え（JS：1120／768）と本番 CSS（760）
   ⚠️HTML は本番のまま。アイコン（svg）は本番のものを白にして、ピンクの丸の中に置く（CSS の fill は svg の fill 属性より強い）
   ===================================================================== */
.hero .tri { box-sizing: border-box; display: grid; gap: 10px; margin-left: 0; margin-right: 0; padding: 0; counter-reset: tri; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .tri > div { box-sizing: border-box; position: relative; display: grid; min-width: 0; max-width: none; margin: 0; overflow: hidden; counter-increment: tri;
  border: 1px solid rgba(243, 96, 135, .18); border-radius: 14px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 16px 30px -22px rgba(60, 20, 45, .55); transition: transform .25s, box-shadow .25s; }
.hero .tri > div:first-child { border-top: 1px solid rgba(243, 96, 135, .18); }
.hero .tri > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #f36087, #ff9cb6); }
.hero .tri > div::after { content: counter(tri, decimal-leading-zero); position: absolute; right: 10px; bottom: -6px; font: 400 34px/1 "Archivo Black", "Arial Black", sans-serif; letter-spacing: -.02em; color: rgba(243, 96, 135, .12); pointer-events: none; }
@media (hover: hover) { .hero .tri > div:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -22px rgba(243, 96, 135, .6); } }
.hero .tri svg { display: block; box-sizing: border-box; grid-row: 1 / span 2; align-self: center; width: 34px; height: 34px; margin: 0; padding: 7px; border-radius: 50%; background: #f36087; fill: #fff; box-shadow: 0 6px 14px -6px rgba(243, 96, 135, .9); }
.hero .tri b { display: block; margin: 0; font: 800 15px/1.4 "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #1b2a4a; align-self: end; }
.hero .tri b br { display: none; }
.hero .tri span { display: block; margin: 0; font: 500 12px/1.55 "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #6e656a; align-self: start; }

/* パソコン：横に3枚のカード（アイコン＋見出し、その下に説明） */
@media (min-width: 1120px) {
  .hero .tri { height: 134.625px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 1段目：アイコン＋「POINT 01」、2段目：見出し（横幅いっぱい・1行）、3段目：説明。見出しが「応」だけ落ちていたため */
  .hero .tri > div { grid-template-columns: 28px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 0; align-content: center; padding: 12px 12px 12px 18px; }
  .hero .tri svg { grid-row: 1; grid-column: 1; width: 28px; height: 28px; padding: 6px; }
  .hero .tri > div::after { content: "POINT " counter(tri, decimal-leading-zero); position: static; grid-row: 1; grid-column: 2; align-self: center; font-size: 11px; letter-spacing: .14em; color: #f36087; }
  .hero .tri b { grid-row: 2; grid-column: 1 / -1; margin-top: 9px; font-size: 15px; white-space: nowrap; }
  .hero .tri span { grid-row: 3; grid-column: 1 / -1; margin-top: 3px; }
}
/* タブレット・スマホ：縦に3枚の横長カード */
@media (max-width: 1119px) {
  .hero .tri { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero .tri > div { grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center; padding: 0 44px 0 18px; }
}
@media (min-width: 768px) and (max-width: 1119px) { .hero .tri { height: 181.9375px; } }
@media (min-width: 761px) and (max-width: 767px) { .hero .tri { height: 310.672px; } }
@media (max-width: 760px) {
  .hero .tri { height: 186.03125px; gap: 6px; }
  .hero .tri > div { grid-template-columns: 30px 1fr; column-gap: 12px; padding: 0 36px 0 14px; border-radius: 12px; }
  .hero .tri svg { width: 30px; height: 30px; padding: 6px; }
  .hero .tri b { font-size: 14px; }
  .hero .tri span { font-size: 11.5px; line-height: 1.45; }
  .hero .tri > div::after { font-size: 28px; right: 8px; }
}


/* =====================================================================
   ヒーローのボタン（2026-10-08 タクヤ「デザインとホバーを変えて」）
   ⚠️HTML・大きさ（余白・文字の大きさ・枠の太さ）は本番のまま。変えるとヒーローの高さが変わり、キャラクターがずれる
   ⚠️見た目とホバーだけ変える：色が左から流れ込んで入れ替わる（本番の「浮かせず色を入れ替える」方針は引き継ぐ）
   ===================================================================== */
.hero .btns .btn { transform: none; transition: background-position .45s cubic-bezier(.2, .7, .2, 1), color .3s, border-color .3s, box-shadow .3s; background-size: 220% 100%; background-repeat: no-repeat; }
.hero .btns .btn::after { display: none; }
.hero .btns .btn-fill { color: #fff; border-color: transparent;
  background-image: linear-gradient(90deg, #1b2a4a 0 50%, #f36087 50% 100%); background-position: 100% 0;
  box-shadow: 0 16px 30px -16px rgba(243, 96, 135, .95), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.hero .btns .btn-line { color: #1b2a4a; border-color: #1b2a4a;
  background-color: transparent; background-image: linear-gradient(90deg, #f36087 0 50%, rgba(255, 255, 255, .92) 50% 100%); background-position: 100% 0;
  box-shadow: 0 12px 26px -20px rgba(27, 42, 74, .6); }
@media (hover: hover) {
  .hero .btns .btn-fill:hover { background-position: 0 0; color: #fff; transform: none; box-shadow: 0 16px 30px -16px rgba(27, 42, 74, .8), inset 0 0 0 1px rgba(255, 255, 255, .15); }
  .hero .btns .btn-line:hover { background-position: 0 0; color: #fff; border-color: #f36087; transform: none; box-shadow: 0 16px 30px -16px rgba(243, 96, 135, .9); }
}
.hero .btns .btn:focus-visible { outline: 3px solid #f36087; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero .btns .btn { transition: none; } }

/* =====================================================================
   ヘッダー（2026-10-08 タクヤ「ヘッダーとフッターも変えていい」）
   ⚠️高さは本番のまま（--head-h：PC 96px／スマホ 62px）。変えるとヒーローの位置がずれる
   ⚠️下の線は box-shadow で描く（border だと高さが1px増える）
   ===================================================================== */
header { box-shadow: 0 1px 0 #f0e7ea; }
.head nav { gap: 28px; }
.head nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 9px; border-bottom: 2px solid transparent; font: 400 13.5px/1.1 "Archivo Black", "Arial Black", sans-serif; letter-spacing: .08em; color: #1b2a4a; }
.head nav a b { font-weight: 400; }
.head nav a span { font: 700 11px/1.2 "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif; letter-spacing: .04em; color: #6e656a; }
.head nav a:hover, .head nav a[aria-current] { color: #f36087; border-color: #f36087; }
.head nav a:hover span, .head nav a[aria-current] span { color: #e04a72; }
.head-cta b { font-family: "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif; font-weight: 900; letter-spacing: .02em; }
.head-cta span { font-size: 12.5px; }
@media (max-width: 1240px) and (min-width: 1101px) { .head nav { gap: 18px; } .head nav a { font-size: 12.5px; } }

/* =====================================================================
   フッター：1行だけだったものを作り直し（会社の説明・メニュー・コラムへのリンク）
   ⚠️本番 CSS の nav／nav a の全体指定（横並び・英字・1100px以下で非表示）を打ち消す
   ⚠️スマホは下の固定帯（83px）の逃げを本番のまま残す（padding-bottom は触らない）
   ===================================================================== */
footer { padding-top: 0; }
@media (min-width: 761px) { footer { padding-bottom: 0; } }
.ft5 { width: min(1200px, calc(100% - 64px)); margin: 0 auto; padding-top: 80px; text-wrap: pretty; font-family: "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif; }
.ft5-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1.15fr); gap: 56px; }
.ft5-logo { display: inline-block; line-height: 0; }
.ft5-logo img { width: 210px; height: auto; filter: brightness(0) invert(1); }
.ft5-brand p { margin-top: 18px; font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .8); }
.ft5-brand .ft5-meta { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.ft5-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; height: 50px; padding: 0 26px; border-radius: 999px; background: #f36087; color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: background .2s; }
.ft5-btn:hover { background: #e04a72; color: #fff; }
footer .ft5-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
.ft5-h { margin: 0 0 12px; font: 400 12px/1 "Archivo Black", "Arial Black", sans-serif; letter-spacing: .2em; color: #ff9cb6; }
footer .ft5-nav a, footer .ft5-nav a[aria-current] { display: block; padding: 7px 0; border: 0; font: 500 14px/1.6 "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .85); text-decoration: none; }
footer .ft5-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ft5-copy { margin-top: 64px; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, .14); text-align: center; }
.ft5-copy small { font-size: 12px; color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
@media (max-width: 1100px) {
  .ft5-main { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ft5-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ft5 { width: calc(100% - 40px); padding-top: 56px; }
  .ft5-main { grid-template-columns: 1fr; gap: 36px; }
  .ft5-logo img { width: 180px; }
  .ft5-btn { display: flex; justify-content: center; }
  footer .ft5-nav[aria-label="フッターメニュー"] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  footer .ft5-nav[aria-label="フッターメニュー"] .ft5-h { grid-column: 1 / -1; }
  .ft5-copy { margin-top: 40px; padding-bottom: 8px; }
}

/* =====================================================================
   改行（2026-10-08 タクヤ「スマホの改行がおかしい」）
   ⚠️iPhone の Safari は word-break: auto-phrase に未対応で、言葉の途中で切れていた
   文に入れた <wbr>（v6/wbr.py・BudouX で文節ごと）と空白でだけ折り返す。はみ出しそうな時だけ例外で折る
   ===================================================================== */
.v6, .ft5, .art6 .page-head, .art6 .article { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }

/* =====================================================================
   タブレットのヒーロー：絵の下端（太ももの途中）がヒーローの下から約20px上に浮き、切れて見えた（2026-10-08 タクヤ指摘）
   下端がヒーローの下に隠れるところまで下げる（本番 CSS：bottom:-44px）。⚠️基準は .hero-inner、負の値を増やすと下がる
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1119px) { .hero-char { bottom: -70px; } }

/* =====================================================================
   書体をそろえる（2026-10-08 タクヤ「ヒーローとお問い合わせの書体がほかと違っていたら合わせて」）
   ⚠️ヒーロー・お問い合わせは端末の標準書体（Windows は游ゴシック）、入力欄とボタンは Arial、見出しだけ Noto Sans JP だった
   ⚠️英字の PACHINKO PROMOTION（.display）は本番どおり英字の書体のまま
   ⚠️文字の幅・行の高さは変わらない（和文は全角幅・行の高さは数値指定）。キャラクターの位置は hero_snap.py で照合
   ===================================================================== */
.hero, .contact, .contact input, .contact textarea, .contact button, .contact .btn, .hero .btn, .contact-left .msg {
  font-family: "MocaJP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", sans-serif;
}
.hero .display { font-family: var(--en); }

/* =====================================================================
   そろえ方（2026-10-08 タクヤ「中央ぞろえにする？」）
   ・見出しの下の説明文：どの幅でも中央（見出しが中央なので）。行の長さもそろえる
   ・「こんなとき」「継続のご依頼」：PC は横並びなので左、タブレット・スマホで1列になったら中央
   ・カードの中・一覧は読みやすさのため左のまま
   ===================================================================== */
.hd6-lead { text-wrap: balance; }
@media (max-width: 760px) {
  .hd6-lead { text-align: center; }
  .need6-say { text-align: center; }
  .price6-note, .flow6-note { text-align: center; }
}
@media (max-width: 900px) {
  .partner6-copy > .hd6-en, .partner6-copy > h2, .partner6-lead { text-align: center; justify-self: center; }
  .partner6-lead { text-wrap: balance; }
}
/* ヒーローの説明文（2026-10-08 タクヤ「フォントおかしい」）：Noto Sans JP は「ト」「、」の周りが空いて間延びして見えた
   → 文字ごとの幅で詰める（palt）＋少し太く・濃く。⚠️行の高さは変わらない（キャラクターの位置は照合済み） */
.hero .desc { font-feature-settings: "palt" 1; letter-spacing: .04em; font-weight: 500; color: #2b2629; }