:root {
      --navy: #071b3c;
      --orange: #ff4c21;
      --green: #5e6b80; /* PACT APP の色。2026-09-30 に緑から紺寄りのグレーへ変更（変数名は互換のため残す） */
      --purple: #ad6bff;
      --ink-soft: #3a3f45;
      --line: #d9dbd8;
      --paper: #ffffff;
      --paper-warm: #f7f5f0;
      --content: min(1240px, calc(100vw - 48px));
      --ease: cubic-bezier(.2,.8,.2,1);
    }

    * { box-sizing: border-box; }
    /* iPhone の Safari は html の clip を画面のスクロールに使わず、はみ出しがあると横にスワイプできてしまう。
       html の hidden は画面へ移るだけで、sticky のヘッダーは壊れない（body には hidden を付けない） */
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body {
      margin: 0;
      color: var(--navy);
      background: var(--paper);
      font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }

    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; }
    img { max-width: 100%; display: block; }
    ::selection { color: var(--navy); background: var(--orange); }

    .skip-link {
      position: fixed;
      left: 16px;
      top: -80px;
      z-index: 100;
      padding: 10px 16px;
      color: white;
      background: var(--navy);
    }
    .skip-link:focus { top: 16px; }
    /* 親テーマも「コンテンツへスキップ」を出すが、行き先（#main_content）がトップに無い。自前の1本だけ残す。 */
    body:has(> .skip-link:not(.screen-reader-text)) > .skip-link.screen-reader-text { display: none; }

    .site-header {
      position: relative;
      z-index: 20;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }
    .header-inner {
      width: var(--content);
      height: 84px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }
    .brand { width: 126px; flex: 0 0 auto; }
    .brand img { width: 100%; height: auto; }
    .nav { display: flex; align-items: center; gap: clamp(14px, 1.65vw, 28px); }
    .nav a {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      text-decoration: none;
      text-transform: uppercase;
      position: relative;
    }
    .nav a:not(.nav-contact)::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -7px;
      height: 3px;
      background: var(--orange);
      transition: right .25s var(--ease);
    }
    .nav a:hover::after, .nav a:focus-visible::after { right: 0; }
    .nav-contact {
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      justify-content: center;
      padding: 0 17px;
      border: 1px solid var(--navy);
      border-radius: 8px;
      color: white;
      background: var(--navy);
      clip-path: none;
    }

    .hero {
      min-height: calc(100svh - 84px);
      display: grid;
      align-items: center;
      position: relative;
      isolation: isolate;
      /* 角形は出てくるとき80px外から入る。スマホで画面の外へはみ出さないよう、ヒーローの中で切る */
      overflow: hidden;
      overflow: clip;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 1px;
      background: var(--line);
    }
    .hero-inner {
      width: var(--content);
      margin: 0 auto;
      padding: clamp(64px, 8vw, 116px) 0 72px;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
      gap: clamp(48px, 7vw, 112px);
      align-items: center;
    }
    .eyebrow {
      margin: 0 0 30px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 40px; height: 4px; background: var(--orange); }
    .hero h1 {
      margin: 0;
      max-width: 820px;
      font-size: clamp(58px, 7.7vw, 124px);
      line-height: .98;
      letter-spacing: -.075em;
      font-weight: 900;
    }
    .hero h1 > span { display: block; }
    /* 見出しの中でオレンジにする語。ヒーロー以外の節でも使う（デザイン案どおり）。
       乗るのは常に大きな文字なので、白地・生成り・紺地のどれでもAA（大きい文字）を満たす。 */
    .pact-word { display: inline; color: var(--orange); }
    .hero-copy {
      max-width: 620px;
      margin: 36px 0 0;
      font-size: clamp(16px, 1.3vw, 19px);
      line-height: 1.9;
      font-weight: 600;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    .button {
      min-height: 52px;
      padding: 0 24px;
      border: 0;
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .03em;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
      box-shadow: inset 0 0 0 2px var(--navy);
      transition: transform .32s var(--ease), color .25s, background .25s;
    }
    .button::after { content: "↗"; font-size: 17px; }
    .button.primary { color: white; background: var(--navy); }
    .button.secondary { background: white; }
    .button:hover, .button:focus-visible { transform: translateY(-3px); }
    .button.secondary:hover, .button.secondary:focus-visible { color: white; background: var(--navy); }

    .hero-art {
      --mx: 0;
      --my: 0;
      min-height: 550px;
      position: relative;
      display: grid;
      place-items: center;
    }
    .frame-corner {
      position: absolute;
      width: 48%;
      aspect-ratio: 1;
      pointer-events: none;
      clip-path: polygon(0 0, 100% 0, 76% 24%, 29% 24%, 29% 71%, 0 100%);
    }
    .frame-corner.navy { left: 0; top: 0; background: var(--navy); animation: cornerInA 1s .1s both var(--ease); }
    .frame-corner.orange { right: 0; bottom: 0; background: var(--orange); transform: rotate(180deg); animation: cornerInB 1s .2s both var(--ease); }
    @keyframes cornerInA { from { transform: translate(-80px,-80px); opacity: 0; } }
    @keyframes cornerInB { from { transform: translate(80px,80px) rotate(180deg); opacity: 0; } to { transform: rotate(180deg); opacity:1; } }

    /* 制作物の合成画像。PACTの角形2つの上に重ね、透けた部分から角形が見える。
       右端の縦書きラベルと重ならないよう、画像側に右の余白を確保する。 */
    .hero-art { padding-right: 26px; }
    .hero-composite {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: translate(calc(var(--mx) * 7px), calc(var(--my) * 7px));
      transition: transform .2s ease-out;
      animation: heroArtIn .9s .35s both var(--ease);
    }
    @keyframes heroArtIn {
      from { opacity: 0; clip-path: inset(0 0 24% 0); }
      to { opacity: 1; clip-path: inset(0 0 0 0); }
    }
    .hero-note {
      position: absolute;
      right: 0;
      top: 50%;
      writing-mode: vertical-rl;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
      transform: translateY(-50%);
    }

    .kinetic-strip { overflow: hidden; color: white; background: var(--navy); border-bottom: 8px solid var(--orange); }
    .kinetic-strip__track {
      width: max-content;
      padding: 18px 0 16px;
      display: flex;
      align-items: center;
      gap: 36px;
      font-size: clamp(18px, 2vw, 28px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: .06em;
      animation: stripMove 22s linear infinite;
    }
    .kinetic-strip__track span { color: var(--orange); }
    @keyframes stripMove { to { transform: translateX(-50%); } }

    .section { padding: clamp(88px, 11vw, 160px) 0; }
    .section-inner { width: var(--content); margin: 0 auto; }
    .section-head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 40px; margin-bottom: clamp(48px, 7vw, 88px); }
    .section-index { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
    .section-title { margin: 0; max-width: 940px; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.08; letter-spacing: -.055em; }
    .section-lede { max-width: 660px; margin: 24px 0 0; color: var(--ink-soft); font-size: 16px; }
    .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
    .reveal.is-visible { opacity: 1; transform: none; }
    .need-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--navy); }
    .need-list li { padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; font-weight: 800; }
    .need-list li::before { content:""; width:13px; aspect-ratio:1; flex:0 0 auto; background:var(--orange); clip-path:polygon(0 0,100% 0,76% 24%,29% 24%,29% 71%,0 100%); }
    .need-list small { margin-left: auto; color: var(--ink-soft); font-weight: 500; }
    .system-hint { position:absolute; z-index:5; left:18px; bottom:14px; margin:0; font-size:10px; font-weight:900; letter-spacing:.12em; }

    .process { color: #fff; background: var(--navy); }

    .about-section { background:var(--paper-warm); }
    .about-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(48px,8vw,120px); align-items:start; }
    .about-copy h2 { margin:0; font-size:clamp(42px,5.8vw,82px); line-height:1.04; letter-spacing:-.06em; }
    .about-copy p { max-width:570px; margin:30px 0 0; color:var(--ink-soft); }
    .about-points { border-top:1px solid var(--navy); }
    .about-point { position:relative; overflow:hidden; padding:28px 0; border-bottom:1px solid var(--line); transition:padding .4s var(--ease); }
    .about-point::after { content:""; position:absolute; right:0; bottom:20px; width:52px; aspect-ratio:1; background:var(--orange); clip-path:polygon(0 0,100% 0,76% 24%,29% 24%,29% 71%,0 100%); transform:translate(45px,45px) rotate(180deg); transition:transform .42s cubic-bezier(.16,1,.3,1); }
    .about-point:hover { padding-left:18px; }
    .about-point:hover::after { transform:rotate(180deg); }
    .about-point small { font-size:10px; font-weight:900; letter-spacing:.14em; }
    .about-point h3 { margin:10px 0 0; font-size:clamp(25px,3vw,40px); line-height:1.1; letter-spacing:-.045em; }
    .about-point p { max-width:620px; margin:12px 70px 0 0; color:var(--ink-soft); font-size:14px; }

    .signals { padding:0 0 clamp(88px,11vw,160px); }
    .signal-grid { border-top:1px solid var(--navy); }
    .signal {
      --signal-bg:white;
      min-height:178px;
      padding:28px 34px;
      display:grid;
      grid-template-columns:190px minmax(250px,.8fr) 1fr 64px;
      gap:32px;
      align-items:center;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid var(--navy);
      color:var(--navy);
      background:var(--signal-bg);
      text-decoration:none;
      transition:background .35s;
    }
    .signal::after {
      content:"";
      position:absolute;
      right:22px;
      bottom:18px;
      width:78px;
      aspect-ratio:1;
      background:var(--navy);
      clip-path:polygon(0 0,100% 0,76% 24%,29% 24%,29% 71%,0 100%);
      transform:translate(62px,62px) rotate(180deg);
      transition:transform .52s cubic-bezier(.16,1,.3,1);
    }
    .signal:hover { min-height:178px; }
    .signal:hover::after { transform:rotate(180deg); }
    .signal-main { --signal-bg:var(--navy); color:white; }
    .signal-main::after { background:var(--orange); }
    .signal-app { --signal-bg:#d9f6e2; }
    .signal-app::after { background:#74d893; }
    .signal-service { --signal-bg:#eee3ff; }
    .signal-service::after { background:#bd91ff; }
    .signal small { font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
    .signal h3 { margin:0; font-size:clamp(28px,3vw,44px); line-height:1.06; letter-spacing:-.045em; }
    .signal p { margin:0; max-width:560px; font-size:14px; }
    .signal-link { font-size:28px; font-weight:900; transform:translateX(0); transition:transform .3s var(--ease); }
    .signal:hover .signal-link { transform:translateX(10px); }

    .cta { padding: clamp(90px, 12vw, 180px) 0; background:var(--orange); }
    .cta-inner { width:var(--content); margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
    .cta h2 { margin:0; max-width:950px; color:var(--navy); font-size:clamp(44px,7vw,104px); line-height:.98; letter-spacing:-.065em; }
    .cta p { max-width:680px; margin:28px 0 0; color:var(--navy); font-size:16px; font-weight:700; }
    .cta .button { background:white; }

    .footer { color:white; background:var(--navy); }
    .footer-inner { width:var(--content); margin:0 auto; min-height:220px; padding:52px 0; display:flex; flex-direction:column; justify-content:space-between; }
    .footer-top { display:flex; justify-content:space-between; gap:32px; }
    .footer-logo { width:108px; filter:brightness(0) invert(1); }
    .footer-links { display:flex; flex-wrap:wrap; gap:18px 30px; font-size:12px; font-weight:800; letter-spacing:.08em; }
    .footer-links a { text-decoration:none; }
    .copyright { font-size:10px; letter-spacing:.1em; opacity:.75; }

    :focus-visible { outline:3px solid var(--orange); outline-offset:4px; }

    @media (max-width: 980px) {
      .hero-inner { grid-template-columns:1fr; }
      .hero-art { min-height:500px; width:min(560px,100%); margin:0 auto; }
      .about-layout { grid-template-columns:1fr; }
      .signal { grid-template-columns:150px minmax(220px,.8fr) 1fr 44px; }
      .cta-inner { grid-template-columns:1fr; align-items:start; }
    }

    @media (max-width: 760px) {
      :root { --content: min(calc(100% - 32px), 1240px); }
      .header-inner { height:70px; }
      .brand { width:102px; }
      .nav a:not(.nav-contact) { display:none; }
      .nav-contact { min-height:42px; padding:0 16px; font-size:11px !important; }
      .hero { min-height:auto; }
      .hero-inner { padding:68px 0 56px; gap:44px; }
      .hero h1 { font-size:clamp(51px,16vw,78px); }
      .hero-copy { font-size:15px; margin-top:28px; }
      .hero-actions { align-items:stretch; }
      .button { width:100%; }
      .hero-art { min-height:340px; padding-right:0; }
      .hero-note { display:none; }
      .section-head { grid-template-columns:1fr; gap:18px; }
      .section-title { font-size:clamp(38px,12vw,58px); }
      .section-lede { font-size:15px; }
      .need-list small { display:none; }
      .signal { min-height:260px; padding:28px 22px; grid-template-columns:1fr 44px; gap:14px 18px; }
      .signal small, .signal h3, .signal p { grid-column:1; }
      .signal-link { grid-column:2; grid-row:1/4; align-self:center; }
      .footer-top { flex-direction:column; }
    }

    @media (max-width: 390px) {
      :root { --content: calc(100% - 24px); }
      .hero h1 { font-size:49px; }
      .hero-art { min-height:300px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
      .reveal { opacity:1; transform:none; }
      .hero-composite { transform:none !important; clip-path:none !important; opacity:1 !important; }
    }
    /* v4 — actual PACT curve language */
    :root {
      --service-blue: #dfeaf5;
      --orange-wash: #fff1e9;
      --corner-mask: url("../hybrid/pact-corner.svg");
    }

    .site-header {
      position: sticky;
      top: 0;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
    }
    .nav-contact {
      border: 1px solid var(--navy);
      border-radius: 8px;
      clip-path: none;
      transition: color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease);
    }
    .nav-contact:hover,
    .nav-contact:focus-visible {
      color: var(--navy);
      background: var(--orange);
      transform: translateY(-2px) rotate(-1deg);
    }

    .hero h1 { max-width: 940px; font-size: clamp(54px, 6.45vw, 102px); }
    .hero .masu { color: var(--orange); display: inline-block; animation: masuPop 2.8s 1.2s infinite var(--ease); }
    @keyframes masuPop { 0%, 84%, 100% { transform:none; } 90% { transform:translateY(-8px) rotate(8deg) scale(1.12); } }

    .button {
      position: relative;
      border: 1px solid var(--navy);
      border-radius: 9px;
      clip-path: none;
      box-shadow: none;
      overflow: hidden;
    }
    .button::before {
      content: "";
      width: 14px;
      aspect-ratio: 1;
      flex: 0 0 auto;
      background: currentColor;
      -webkit-mask: var(--corner-mask) center / contain no-repeat;
      mask: var(--corner-mask) center / contain no-repeat;
      transition: transform .32s var(--ease);
    }
    .button:hover::before, .button:focus-visible::before { transform: rotate(90deg) scale(1.15); }

    .frame-corner,
    .about-point::after,
    .signal::after,
    .cta-corner {
      clip-path: none !important;
      -webkit-mask: var(--corner-mask) center / contain no-repeat;
      mask: var(--corner-mask) center / contain no-repeat;
    }
    .frame-corner { width: 50%; }
    .compact-lede { max-width: 900px; }
    /* v4 — photography */
    .about-copy h2 { font-size: clamp(40px, 5.25vw, 76px); }

    .signal {
      grid-template-columns: 190px minmax(260px,.85fr) 1fr 64px;
      border-radius: 0;
    }
    .signal-label { display: flex; align-items: center; gap: 15px; }
    .signal-icon { position: relative; width: 40px; height: 40px; flex: 0 0 auto; transition: transform .5s cubic-bezier(.16,1,.3,1); }
    .signal:hover .signal-icon { transform: rotate(8deg) scale(1.12); }
    .signal-icon--design {
      background: var(--orange);
      -webkit-mask: var(--corner-mask) center / contain no-repeat;
      mask: var(--corner-mask) center / contain no-repeat;
    }
    .signal-icon--app { border: 2px solid currentColor; border-radius: 7px; }
    .signal-icon--app::before { content:""; position:absolute; left:6px; right:6px; top:8px; height:2px; background:currentColor; box-shadow:0 6px 0 currentColor; }
    .signal-icon--app::after { content:""; position:absolute; right:5px; bottom:5px; width:10px; height:10px; border-radius:3px; background:var(--orange); }
    .signal-icon--service i { position:absolute; width:11px; height:11px; border-radius:50%; background:var(--navy); }
    .signal-icon--service i:nth-child(1) { left:2px; top:15px; }
    .signal-icon--service i:nth-child(2) { right:2px; top:4px; }
    .signal-icon--service i:nth-child(3) { right:2px; bottom:4px; background:var(--orange); }
    .signal-icon--service::before,
    .signal-icon--service::after { content:""; position:absolute; left:11px; width:22px; height:2px; background:var(--navy); transform-origin:left center; }
    .signal-icon--service::before { top:18px; transform:rotate(-25deg); }
    .signal-icon--service::after { top:22px; transform:rotate(25deg); }
    .signal-main { --signal-bg: var(--navy); }
    .signal-app { --signal-bg: #fff; }
    .signal-app::after { background: var(--navy); }
    .signal-service { --signal-bg: var(--service-blue); }
    .signal-service::after { background: #8aa7c7; }

    .cta { padding: clamp(88px, 10vw, 150px) 0; background: var(--paper-warm); }
    .cta-inner {
      position: relative;
      overflow: hidden;
      padding: clamp(42px, 6vw, 86px);
      border: 1px solid var(--navy);
      border-radius: 18px;
      background: var(--orange-wash);
      align-items: center;
      box-shadow: 0 30px 80px rgba(7,27,60,.08);
    }
    .cta h2 { font-size: clamp(40px, 6.1vw, 86px); }
    .cta-corner { position:absolute; width:130px; aspect-ratio:1; pointer-events:none; }
    .cta-corner--navy { left:-36px; top:-36px; background:var(--navy); animation:ctaCornerA 7s ease-in-out infinite alternate; }
    .cta-corner--orange { right:-34px; bottom:-34px; background:var(--orange); transform:rotate(180deg); animation:ctaCornerB 6s ease-in-out infinite alternate; }
    @keyframes ctaCornerA { to { transform:translate(12px,12px) rotate(4deg); } }
    @keyframes ctaCornerB { to { transform:translate(-12px,-12px) rotate(174deg); } }

    .footer { overflow:hidden; }
    .footer-rail {
      width: max-content;
      display: flex;
      color: var(--navy);
      background: var(--orange);
      border-top: 1px solid var(--navy);
      border-bottom: 1px solid var(--navy);
      font-size: clamp(30px, 5vw, 72px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.04em;
      white-space: nowrap;
      animation: footerRail 26s linear infinite;
    }
    .footer-rail span { padding: 20px 0 15px; }
    @keyframes footerRail { to { transform: translateX(-50%); } }
    .footer-inner { min-height: 310px; padding: 60px 0 44px; }
    .footer-brand p { margin: 18px 0 0; font-size: 12px; letter-spacing: .08em; opacity: .7; }
    .footer-links a { position:relative; transition:color .25s, transform .25s; }
    .footer-links a:hover, .footer-links a:focus-visible { color:var(--orange); transform:translateY(-3px); }
    /* v4 — designed cursor and mobile-safe package */
    .pact-cursor { display:none; }
    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      html.has-pact-cursor,
    html.has-pact-cursor a,
    html.has-pact-cursor button { cursor:none !important; }
      .pact-cursor {
        --cursor-x: -100px;
        --cursor-y: -100px;
        position:fixed;
        z-index:9999;
        left:0;
        top:0;
        width:44px;
        height:44px;
        display:block;
        pointer-events:none;
        transform:translate3d(calc(var(--cursor-x) - 22px),calc(var(--cursor-y) - 22px),0);
      }
      .pact-cursor__ring {
        position:absolute;
        inset:0;
        border:1px solid rgba(7,27,60,.72);
        border-radius:50%;
        transition:transform .25s var(--ease), background .25s, border-color .25s;
      }
      .pact-cursor__mark {
        position:absolute;
        left:15px;
        top:15px;
        width:14px;
        aspect-ratio:1;
        background:var(--orange);
        -webkit-mask:var(--corner-mask) center / contain no-repeat;
        mask:var(--corner-mask) center / contain no-repeat;
        transition:transform .25s var(--ease), background .2s;
      }
      .pact-cursor.is-hover .pact-cursor__ring { transform:scale(1.45); background:rgba(255,76,33,.12); border-color:var(--orange); }
      .pact-cursor.is-hover .pact-cursor__mark { transform:rotate(90deg) scale(1.12); }
      .pact-cursor.is-down .pact-cursor__ring { transform:scale(.72); background:var(--orange); }
      .pact-cursor.is-down .pact-cursor__mark { background:white; transform:rotate(180deg) scale(.8); }
    }

    @media (max-width: 980px) {
      .signal { grid-template-columns: 155px minmax(220px,.85fr) 1fr 44px; }
    }

    @media (max-width: 760px) {
      .hero h1 { font-size: clamp(46px, 14.4vw, 69px); line-height: 1.01; }
      .system-hint { display:none; }
      .signal { min-height: 245px; grid-template-columns:1fr 44px; }
      .signal-label, .signal h3, .signal p { grid-column:1; }
      .signal small { grid-column:auto; }
      .signal-link { grid-column:2; grid-row:1 / 4; }
      .cta-inner { padding: 76px 26px 34px; }
      .cta h2 { font-size: clamp(40px, 12vw, 58px); }
      .cta-corner { width: 92px; }
      .footer-inner { min-height:340px; }
      .footer-links { display:grid; grid-template-columns:repeat(2,1fr); }
      .footer-rail { font-size:38px; }
    }

    @media (max-width: 390px) {
      .hero h1 { font-size: 36px; }
    }

    /* v5 — width-safe layouts and stable interaction states */
    .icon-sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .signal:hover { min-height: 178px; }
    .signal:hover .signal-icon { transform: translateY(-3px); }
    .signal-icon--service svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .signal-icon--service::before,
    .signal-icon--service::after { content: none; }

    .cta-inner {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      overflow: visible;
      border: 0;
      border-radius: 20px;
      background:
        linear-gradient(90deg, var(--navy) 0 10px, transparent 10px),
        linear-gradient(135deg, #fff 0%, #fff 68%, #fff7f2 100%);
      box-shadow: 0 30px 80px rgba(7,27,60,.1);
    }
    .cta-label {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .16em;
    }
    .cta-label span {
      width: 24px;
      aspect-ratio: 1;
      background: var(--orange);
      -webkit-mask: var(--corner-mask) center / contain no-repeat;
      mask: var(--corner-mask) center / contain no-repeat;
    }
    .cta-copy { max-width: 980px; }
    .contact-methods {
      margin: 2px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .contact-methods li {
      min-height: 68px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(7,27,60,.22);
      border-radius: 10px;
      background: rgba(255,255,255,.58);
      font-size: 13px;
      font-weight: 800;
    }
    .contact-methods svg {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      fill: none;
      stroke: var(--navy);
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .cta .button { width: 100%; min-width: 0; }
    .cta .button.primary { color: white; background: var(--navy); }

    .about-teaser {
      display: grid;
      grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
      gap: clamp(52px,8vw,120px);
      align-items: end;
    }
    .about-teaser__body {
      padding: clamp(30px,4vw,52px);
      border: 1px solid var(--navy);
      border-radius: 16px;
      background: white;
      box-shadow: 0 24px 60px rgba(7,27,60,.07);
    }
    .about-teaser__body h3 {
      margin: 0;
      font-size: clamp(28px,3.4vw,46px);
      line-height: 1.05;
      letter-spacing: -.045em;
    }
    .about-teaser__body p { margin: 22px 0 28px; color: var(--ink-soft); }

    .footer-rail {
      font-size: clamp(20px, 2.6vw, 36px);
      letter-spacing: -.025em;
      animation-duration: 34s;
    }
    .footer-rail span { padding: 15px 0 13px; }

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      .pact-cursor {
        width: 28px;
        height: 28px;
        transform: translate3d(calc(var(--cursor-x) - 14px), calc(var(--cursor-y) - 14px), 0);
      }
      .pact-cursor__mark { left: 9px; top: 9px; width: 10px; }
      .pact-cursor.is-hover .pact-cursor__ring { transform: scale(1.18); background: transparent; }
      .pact-cursor.is-hover .pact-cursor__mark { transform: rotate(90deg) scale(1.05); }
      .pact-cursor.is-down .pact-cursor__ring { transform: scale(.78); background: rgba(255,76,33,.2); }
    }

    @media (max-width: 760px) {
      .system-hint { display: none; }
    }

    @media (max-width: 760px) {
      .hero h1 {
        font-size: clamp(38px, 10.5vw, 50px);
        line-height: 1.02;
        letter-spacing: -.07em;
      }
      .cta h2 { font-size: clamp(32px, 9vw, 38px); line-height: 1.06; }
      .hero h1 > span { white-space: nowrap; }
      .about-teaser { grid-template-columns: 1fr; gap: 32px; }
      .signal,
      .signal:hover { min-height: 245px; }
      .contact-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .contact-methods li { min-height: 58px; padding: 11px 12px; }
      .cta .button { width: 100%; min-width: 0; }
      .footer-rail { font-size: 22px; }
    }

    @media (max-width: 390px) {
      .hero h1 { font-size: 36px; }
      .contact-methods li { font-size: 11px; gap: 8px; }
      .contact-methods svg { width: 19px; height: 19px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .footer-rail { transform:none; }
    }

    /* 2026-08-31 design pass: PACTの「圧縮と展開」を全体の動きへ統一 */
    @media (min-width: 1001px) {
      /* 画面いっぱいに広げると、縦の長いディスプレイで中身の倍以上の空白ができる。
         上限を付けて、1画面に収まりつつ余白が空きすぎないようにする（2026-09-09）。 */
      .hero { min-height: min(calc(100svh - 84px), 680px); grid-template-rows:minmax(0,1fr) auto; align-items:stretch; }
      .hero-inner { min-height:0; padding:clamp(28px,4.2vh,54px) 0; grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr); }
      .hero h1 { max-width:none; font-size:clamp(56px,5.5vw,86px); line-height:.96; letter-spacing:-.072em; }
      .hero h1 > span { white-space:nowrap; }
      .hero-art { min-height:400px; max-height:58vh; }
      .hero-copy { margin-top:24px; }
      .hero-actions { margin-top:24px; }
      .kinetic-strip { align-self:end; }
      .kinetic-strip__track { padding:13px 0 11px; font-size:clamp(15px,1.55vw,22px); }
    }
    .compact-lede { max-width:820px; }
    .compact-lede p { margin:0 0 1em; }
    .compact-lede p:last-child { margin-bottom:0; }
    .cta { padding:64px 0; background:linear-gradient(115deg,#fff 0 64%,var(--wash,#fff1e9) 64%); }
    .cta-inner { width:var(--content); margin:auto; padding:42px; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.72fr); gap:20px 48px; border:1px solid var(--navy); border-radius:24px; background:#fff; box-shadow:0 24px 70px rgba(7,27,60,.08); position:relative; overflow:hidden; }
    .cta-inner::before,.cta-inner::after { content:""; position:absolute; width:105px; aspect-ratio:1; background:var(--navy); clip-path:polygon(0 0,100% 0,76% 24%,29% 24%,29% 71%,0 100%); }
    .cta-inner::before { left:-24px; top:-26px; }
    .cta-inner::after { right:-25px; bottom:-28px; background:var(--orange); transform:rotate(180deg); }
    .cta-label { grid-column:1/-1; }
    .cta-copy h2 { margin:0; font-size:clamp(30px,3.4vw,50px); line-height:1.05; }
    .cta-copy p { max-width:670px; margin:18px 0 0; }
    .contact-methods { align-self:center; }
    .cta .button { grid-column:1/-1; min-height:66px; width:100%; position:relative; z-index:2; }
    @media (pointer:fine) and (prefers-reduced-motion:no-preference) {
      .pact-cursor { width:34px; height:34px; transform:translate3d(calc(var(--cursor-x) - 17px),calc(var(--cursor-y) - 17px),0); }
      .pact-cursor__ring { border-color:rgba(7,27,60,.55); }
      .pact-cursor__mark { left:9px; top:9px; width:16px; height:16px; background:var(--orange); clip-path:polygon(0 0,100% 0,73% 27%,40% 27%,40% 60%,0 100%); }
    }
    @media (max-width:1000px) {
      .hero { grid-template-rows:auto auto; }
      .hero .kinetic-strip { margin-top:24px; }
      .cta-inner { grid-template-columns:1fr; padding:34px 26px; }
      .cta-label,.cta .button { grid-column:auto; }
    }
    @media (max-width:760px) {
      .cta { padding:44px 0; }
      .cta-inner { border-radius:18px; }
      .cta-copy h2 { font-size:34px; }
    }

    /* v6 — concise desktop story, stable mobile menu and unclipped PACT details */
    .pact-menu-toggle { width:44px; height:44px; padding:11px; border:1px solid var(--navy); border-radius:10px; display:none; flex-direction:column; justify-content:center; gap:5px; color:var(--navy); background:#fff; cursor:pointer; }
    .pact-menu-toggle span:not(.screen-reader-text) { display:block; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .25s var(--ease),opacity .2s; }
    .pact-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .pact-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
    .pact-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .pact-mobile-nav { position:absolute; left:0; right:0; top:100%; padding:12px var(--content) 18px; border-bottom:1px solid var(--navy); display:grid; background:#fff; box-shadow:0 22px 42px rgba(7,27,60,.1); }
    .pact-mobile-nav[hidden] { display:none; }
    .pact-mobile-nav a { padding:13px 0; border-bottom:1px solid var(--line); font-size:12px; font-weight:900; letter-spacing:.12em; text-decoration:none; }
    /* スマホメニューの「デザイン無料相談」。オレンジの診断ボタンと並ぶ紺のボタン。
       🔴 位置は動かさない。ホバーは色だけ変える。 */
    .pact-mobile-nav .pact-contact-nav { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin:4px 0 4px; padding:0 18px; border:1px solid var(--navy); border-bottom:1px solid var(--navy); border-radius:9px; background:var(--navy); color:#fff; font-size:12px; transition:background .2s ease, border-color .2s ease; }
    @media (hover:hover) { .pact-mobile-nav .pact-contact-nav:hover { background:#0d2a58; border-color:#0d2a58; } }
    .pact-mobile-nav .pact-contact-nav:active { background:#0d2a58; border-color:#0d2a58; }
    .screen-reader-text { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
    .hero-note { white-space:nowrap; }
    .compact-lede { max-width:560px; }
    .compact-lede p { margin:0 0 18px; }
    .cta-inner { overflow:visible; }
    .cta-inner::before,.cta-inner::after { width:58px; z-index:1; }
    .cta-inner::before { left:18px; top:18px; }
    .cta-inner::after { right:18px; bottom:18px; }
    .cta-label,.cta-copy,.contact-methods,.cta .button { position:relative; z-index:2; }
    .cta .button::before { display:none; }
    @media (max-width:1000px) {
      .compact-lede { max-width:760px; }
    }
    @media (max-width:760px) {
      .nav { display:none; }
      .pact-menu-toggle { display:flex; margin-left:auto; }
      .hero-content,.hero-copy,.hero-actions { width:100%; min-width:0; max-width:100%; }
      .hero-copy { overflow-wrap:anywhere; }
      .hero-actions .button { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
      .process .section-lede br { display:block; }
      .cta-inner::before { left:12px; top:12px; }
      .cta-inner::after { right:12px; bottom:12px; }
    }

    /* v7 — 2026-08-31 フィードバック反映（ヘッダー固定・COMPACT PACKAGE・見出し行数・CTA） */

    /* 1. 管理バーがある画面でも、ヘッダーが正しい位置で止まる。 */
    .site-header { position: sticky; top: 0; z-index: 60; }
    body.admin-bar .site-header { top: 32px; }
    @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 0; } }
    .site-header { box-shadow: 0 1px 0 rgba(7,27,60,.07); }
    .pact-mobile-nav { z-index: 61; }

    /* 2. 見出しは1〜2行に収める。 */
    .section-title { font-size: clamp(32px, 4vw, 58px); line-height: 1.06; text-wrap: balance; }
    .cta-copy h2 { font-size: clamp(28px, 2.9vw, 44px); line-height: 1.08; text-wrap: balance; }
    .about-teaser__body h3 { font-size: clamp(26px, 2.6vw, 38px); }

    /* 4. CONTACT — 相談方法はアイコンだけにする（角形と矢印の二重表示も解消）。 */
    .contact-methods {
      max-width: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px;
    }
    .contact-methods li {
      width: 58px;
      height: 58px;
      min-height: 0;
      padding: 0;
      justify-content: center;
      border-radius: 14px;
      background: #fff;
    }
    .contact-methods svg { width: 24px; height: 24px; }
    .cta-label { letter-spacing: .14em; }

    @media (max-width: 1000px) {
      .contact-methods { justify-content: flex-start; }
    }

    @media (max-width: 760px) {
      .section-title { font-size: clamp(28px, 8.2vw, 38px); }
      .cta-copy h2 { font-size: clamp(26px, 7.4vw, 34px); }
      .contact-methods li { width: 54px; height: 54px; }
    }

    /* v8 — 2026-08-31 3回目のフィードバック（カーソル・COMPACT PACKAGE） */

    /* 1. カーソルの中のPACT角形が消えていた。
          マスクとclip-pathが二重にかかって形が残らなくなっていたので、マスクだけにする。 */
    .pact-cursor__mark {
      clip-path: none !important;
      -webkit-mask: var(--corner-mask) center / contain no-repeat;
      mask: var(--corner-mask) center / contain no-repeat;
      background: var(--orange);
    }
    .pact-cursor.is-down .pact-cursor__mark { background: white; }

    /* v9 — 2026-08-31 4回目のフィードバック */

    /* 1. 矢印カーソルを消さない。PACTの輪は矢印に添える印として、右下へずらして出す。 */
    html.has-pact-cursor { cursor: auto !important; }
    html.has-pact-cursor a,
    html.has-pact-cursor button,
    html.has-pact-cursor summary { cursor: pointer !important; }
    html.has-pact-cursor input,
    html.has-pact-cursor textarea,
    html.has-pact-cursor select { cursor: auto !important; }
    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      .pact-cursor {
        transform: translate3d(calc(var(--cursor-x) + 5px), calc(var(--cursor-y) + 5px), 0);
      }
    }

    /* 3. CTAの角形が見出しの「C」に重なっていた。角形を小さくし、ラベルを角形の外へ出す。 */
    .cta-inner::before,
    .cta-inner::after { width: 44px; }
    .cta-inner::before { left: 16px; top: 16px; }
    .cta-inner::after { right: 16px; bottom: 16px; }
    .cta-label { padding-left: 42px; }

    /* 4. スマホメニューの余白指定が幅指定になっていて、項目が画面外へ出ていた。 */
    .pact-mobile-nav { padding: 12px calc((100% - var(--content)) / 2) 18px; }

    @media (max-width: 760px) {
      .cta-inner::before { left: 12px; top: 12px; }
      .cta-inner::after { right: 12px; bottom: 12px; }
      .cta-label { padding-left: 40px; }
    }

    /* サポート内容一覧への導線 */
    .compact-actions { margin: 26px 0 0; }
    .compact-actions .button { min-height: 52px; padding: 0 28px; color: #fff; background: var(--navy); }


    /* ─────────────────────────────────────────────
       01 / One-stop Creative — ONE PARTNER.
       旧 COMPACT PACKAGE（12個のオービット）と旧 WORKS を1つにまとめたもの。
       12件への導線は、CTAの下の COMPACT PACKAGE（.pkg-grid）が担う。消さないこと。
       ───────────────────────────────────────────── */
    .one-partner { position: relative; overflow: hidden; background: var(--paper-warm); }
    /* HOME film: ヒーローの直下に、事業紹介動画（assets/home/pact-film.html）を置く。
       動画は画面外で止まり、動きを減らす設定では締めの1枚で静止する。 */
    .home-film { padding: clamp(64px, 8vw, 120px) 0; color: #fff; background: var(--navy); }
    .home-film .section-title { margin-top: 14px; color: #fff; }
    .home-film__frame { position: relative; margin-top: clamp(28px, 4vw, 52px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--navy); }
    .home-film__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
    @media (max-width: 720px) { .home-film__frame { border-radius: 10px; } }
    .op-grid {
      display: grid;
      grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
      gap: clamp(40px, 5vw, 84px);
      align-items: center;
    }
    /* 🔴 見出しは2行で固定する。3行にすると、狭い列で最後の行が
       「相談先は、ひと／つ。」と割れて4行になる（2026-09-09の指摘）。
       いちばん長い行「ロゴも、Webも、資料も。」が列幅に収まる大きさを上限にしてある。
       balance を効かせると勝手に割られるので normal のまま。 */
    .op-lead .section-title {
      margin-bottom: 0;
      text-wrap: normal;
      /* 🔴 7.6vw は「ロゴも、Webも、資料も。」がちょうど収まる大きさで、余裕がない。
         端末の書体差で1行目が割れて3行になる（2026-09-10の指摘）。6.9vwへ下げて余白を作る。 */
      font-size: clamp(23px, 6.9vw, 48px);
    }
    @media (min-width: 1001px) {
      /* 2列になり、左の列が狭くなるぶん上限を下げる。 */
      .op-lead .section-title { font-size: clamp(24px, 2.8vw, 40px); }
    }
    .op-lead .compact-lede { max-width: 460px; }

    /* 横スライダー。スクロールは奪わない。 */
    .op-showcase { min-width: 0; }
    .op-track {
      display: flex;
      column-gap: clamp(14px, 1.6vw, 22px);
      margin: 0;
      padding: 0 0 4px;
      list-style: none;
      overflow-x: auto;
      /* mandatory は使わない。最後のカードの吸着点が可視領域に入りきらない幅だと、
         滑らかスクロールの着地でブラウザが先頭へ引き戻し、矢印が効かなくなる。
         proximity なら端で止まれる。実測して proximity に決めた（2026-09-09）。 */
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }
    .op-track::-webkit-scrollbar { display: none; }
    .op-track:focus-visible { outline: 2px solid var(--navy); outline-offset: 6px; }
    .op-card { flex: 0 0 clamp(210px, 44%, 300px); scroll-snap-align: start; }
    .op-card:last-child { scroll-snap-align: end; }
    .op-card > a {
      display: block;
      color: var(--navy);
      text-decoration: none;
    }
    .op-card figure {
      margin: 0 0 16px;
      overflow: hidden;
      aspect-ratio: 4 / 5;
      background: #ece9e2;
      clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    }
    .op-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .op-card h3 {
      margin: 0;
      font-size: clamp(15px, 1.3vw, 18px);
      letter-spacing: .04em;
    }
    .op-card span {
      display: block;
      margin-top: 7px;
      padding-top: 9px;
      border-top: 1px solid var(--line);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #5c6b83;
    }
    .op-card > a:hover h3,
    .op-card > a:focus-visible h3 { color: var(--orange-text, #CC3A10); }

    .op-controls {
      display: flex;
      align-items: center;
      gap: clamp(14px, 1.8vw, 26px);
      margin-top: clamp(20px, 2.4vw, 30px);
    }
    .op-count { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
    .op-count b { font-size: 17px; }
    .op-count i { margin: 0 4px; font-style: normal; color: #9aa6b8; }
    .op-count span { color: #9aa6b8; }
    .op-progress { flex: 1; height: 2px; background: var(--line); }
    .op-progress i { display: block; height: 100%; background: var(--orange); transform-origin: left center; transition: transform .3s var(--ease); }
    .op-arrows { display: flex; gap: 10px; }
    .op-arrow {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--navy);
      border-radius: 50%;
      background: transparent;
      color: var(--navy);
      font-size: 15px;
      cursor: pointer;
      transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
    }
    .op-arrow:hover:not(:disabled) { color: #fff; background: var(--navy); }
    .op-arrow:disabled { border-color: var(--line); color: #b6bfcd; cursor: default; }

    /* セクションを締める大きな英字。ヒーローの見出しより必ず小さくする。 */
    .op-word {
      margin: clamp(24px, 3vw, 46px) 0 -.12em;
      padding-left: max(calc((100vw - var(--content)) / 2), 0px);
      color: var(--orange);
      font-size: clamp(52px, 11.2vw, 156px);
      font-weight: 900;
      line-height: .82;
      letter-spacing: -.05em;
      white-space: nowrap;
    }

    @media (max-width: 1000px) {
      .op-grid { grid-template-columns: 1fr; gap: 40px; }
      .op-lead .compact-lede { max-width: 760px; }
      .op-card { flex: 0 0 clamp(210px, 34%, 290px); }
    }
    @media (max-width: 760px) {
      .op-card { flex: 0 0 78%; }
      .op-controls { gap: 14px; }
      .op-arrow { width: 46px; height: 46px; }
      /* スマホは1行に収まらないので2行に落とす。デザイン案と同じ見え方。 */
      .op-word { white-space: normal; font-size: clamp(42px, 14.6vw, 68px); line-height: .86; }
    }
    @media (prefers-reduced-motion: reduce) {
      .op-progress i { transition: none; }
    }

    /* ─────────────────────────────────────────────
       02 / Process — 話す。整える。つくる。
       工程を押すと左の写真が切り替わる。スクロールは奪わない（本人判断・2026-09-09）。
       JavaScriptが動かないときは、5工程の説明が全部開いたまま読める状態になる。
       ───────────────────────────────────────────── */
    .process { position: relative; overflow: hidden; }
    .process .section-index,
    .process .section-lede { color: rgba(255,255,255,.78); }
    .pr-head { max-width: 900px; margin-bottom: clamp(44px, 6vw, 76px); }
    .pr-head .section-title { margin-top: 18px; color: #fff; }
    .pr-head .section-lede { margin-top: 22px; }

    .pr-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
      gap: clamp(36px, 4.6vw, 72px);
      align-items: start;
    }

    /* JavaScriptが動かないときは、5枚を縦に並べて全部見えるようにする。
       重ねて1枚ずつ切り替えるのは、JSが .js-accordion を付けたときだけ。 */
    .pr-media { display: grid; gap: 12px; }
    .pr-shot {
      position: relative;
      margin: 0;
      aspect-ratio: 4 / 3;
      background: #0d2549;
      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    }
    .js-accordion .pr-media {
      display: block;
      position: relative;
      aspect-ratio: 4 / 3;
      background: #0d2549;
    }
    .js-accordion .pr-shot {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
      opacity: 0;
      visibility: hidden;
      transition: opacity .45s var(--ease);
    }
    .js-accordion .pr-shot.is-active { opacity: 1; visibility: visible; }
    .pr-shot img { width: 100%; height: 100%; object-fit: cover; }
    .pr-shot figcaption {
      position: absolute;
      left: 22px;
      bottom: 18px;
      padding: 7px 13px;
      background: rgba(7,27,60,.82);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .18em;
    }

    .pr-steps {
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255,255,255,.24);
    }
    .pr-step { border-bottom: 1px solid rgba(255,255,255,.24); }
    .pr-step h3 { margin: 0; font-size: inherit; font-weight: inherit; }
    .pr-step button {
      width: 100%;
      min-height: 62px;
      padding: 16px 0;
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      border: 0;
      background: none;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }
    .pr-no {
      font-size: clamp(30px, 3vw, 44px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.04em;
      color: rgba(255,255,255,.36);
      transition: color .25s var(--ease);
    }
    .pr-step.is-open .pr-no { color: var(--orange); }
    .pr-name { font-size: clamp(17px, 1.7vw, 23px); font-weight: 800; letter-spacing: -.01em; }
    .pr-meta { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; color: rgba(255,255,255,.6); }
    .pr-step.is-open .pr-meta { color: var(--orange); }
    .pr-step button:hover .pr-name,
    .pr-step button:focus-visible .pr-name { color: var(--orange); }
    .pr-step button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
    .pr-panel { padding: 0 0 22px 90px; }
    .pr-panel p { margin: 0; max-width: 520px; color: rgba(255,255,255,.8); font-size: 14.5px; }

    /* JavaScriptが動いたときだけ折りたたむ。動かなければ全部読める。 */
    .js-accordion .pr-step:not(.is-open) .pr-panel { display: none; }

    /* セクションを締める大きな英字。1行目は塗り、2行目は輪郭だけ。 */
    .pr-word {
      margin: clamp(30px, 3.6vw, 56px) 0 -.14em;
      padding-left: max(calc((100vw - var(--content)) / 2), 0px);
      font-size: clamp(46px, 9.6vw, 134px);
      font-weight: 900;
      line-height: .84;
      letter-spacing: -.05em;
      white-space: nowrap;
    }
    .pr-word span { display: block; }
    .pr-word__fill { color: var(--orange); }
    .pr-word__line {
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(255,255,255,.6);
    }

    @media (max-width: 1000px) {
      .pr-grid { grid-template-columns: 1fr; gap: 30px; }
      .pr-panel { padding-left: 74px; }
    }
    @media (max-width: 760px) {
      .pr-step button { grid-template-columns: 56px minmax(0, 1fr); min-height: 66px; }
      .pr-meta { grid-column: 2; margin-top: 4px; }
      .pr-panel { padding-left: 56px; }
      .pr-word { font-size: clamp(40px, 12.4vw, 62px); }
    }
    @media (prefers-reduced-motion: reduce) {
      /* 🔴 transition は .js-accordion .pr-shot（0,2,0）に付いている。
         .pr-shot（0,1,0）と書くと詳細度で負けて、動きを止められない。 */
      .js-accordion .pr-shot, .pr-shot { transition: none; }
      .pr-no, .pr-meta, .pr-name { transition: none; }
    }
/* ─────────────────────────────────────────────
   Final CTA — つくりたいものが、曖昧でも大丈夫です。
   トップ・About・サポート詳細12件で共有する部品。
   🔴 この規則は index.html のインライン <style> と assets/pages.css の2か所にある。
      直すときは必ず両方を同じ内容にすること（片方だけ直すと下層だけ古い見た目になる）。
   ───────────────────────────────────────────── */
.pact-cta-section{position:relative;overflow:hidden;padding:clamp(72px,9vw,132px) 0 0;background:var(--paper-warm);
  box-shadow:0 0 0 100vmax var(--paper-warm);clip-path:inset(0 -100vmax)}
.pact-cta{width:var(--content);margin:0 auto}
.pact-cta__eyebrow{margin:0 0 22px;display:flex;align-items:center;gap:12px;
  color:var(--navy);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.pact-cta__eyebrow::before{content:"";width:40px;height:4px;background:var(--orange)}
.pact-cta h2{margin:0;color:var(--navy);font-size:clamp(30px,4.4vw,64px);font-weight:900;
  line-height:1.1;letter-spacing:-.05em}
.pact-cta__lead{max-width:560px;margin:22px 0 0;color:var(--ink-soft);font-size:clamp(14px,1.35vw,17px);line-height:1.9}
.pact-cta__actions{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line)}
.pact-cta__actions{display:flex;flex-direction:column}.pact-cta__row--consult{order:1}.pact-cta__row--app{order:2}.pact-cta__row--ai{order:3}
.pact-cta__row{position:relative;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px;align-items:center;
  min-height:74px;padding:14px 0;border-bottom:1px solid var(--line);
  color:var(--navy);text-decoration:none}
.pact-cta__row::before{content:"";position:absolute;z-index:0;inset:0;
  background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .34s var(--ease)}
.pact-cta__row--ai::before{background:var(--orange)}
/* 🔴 :hover を無条件に書かないこと。タッチ端末ではタップ後にホバー状態が居座り、
   面を消したままだと「生成り地に白文字」になって読めなくなる（2026-09-09の不具合）。
   面が伸びるときだけ文字を白にする、という対応を崩さない。 */
.pact-cta__row:focus-visible::before,.pact-cta__row:active::before{transform:scaleX(1)}
.pact-cta__row:focus-visible,.pact-cta__row:active{color:#fff}
@media (hover:hover){
  .pact-cta__row:hover::before{transform:scaleX(1)}
  .pact-cta__row:hover{color:#fff}
}
.pact-cta__row:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.pact-cta__label{position:relative;z-index:1;padding-left:14px;font-size:10px;font-weight:900;letter-spacing:.14em}
.pact-cta__act{position:relative;z-index:1;padding-right:16px;font-size:clamp(17px,1.9vw,25px);font-weight:900;letter-spacing:-.02em}
.pact-cta__act::after{margin-left:14px;content:"↗";font-size:.8em}
.pact-cta__note{margin:20px 0 0;color:var(--ink-soft);font-size:12.5px}
/* セクションを締める大きな英字。1行目は輪郭、2行目は塗り。
   フッターに食い込ませない。下を切ると字が読めなくなる。 */
.pact-cta__word{width:var(--content);margin:clamp(26px,3.2vw,50px) auto 0;padding-bottom:clamp(10px,1.4vw,22px);
  font-size:clamp(34px,7.4vw,112px);font-weight:900;line-height:.86;
  letter-spacing:-.05em;white-space:nowrap}
/* 🔴 --content は 1288px を下回ると左右24pxの固定余白になり、
   大きな文字の帯が画面の端に張りつく（2026-09-10の指摘「左に寄りすぎ・詰まってる」）。
   中くらいの幅だけ、CTAの帯の余白を画面幅に応じて広げる。 */
@media (min-width:641px) and (max-width:1287px){
  .pact-cta,.pact-cta__word{width:min(var(--content),calc(100vw - clamp(64px,9vw,140px)))}
}

.pact-cta__word span{display:block}
.pact-cta__word-line{color:transparent;-webkit-text-stroke:1.5px rgba(7,27,60,.55)}
.pact-cta__word-fill{color:var(--orange)}
@media (max-width:760px){
  .pact-cta,.pact-cta__word{width:calc(100vw - 48px)}
  .pact-cta__row{grid-template-columns:1fr;gap:6px;min-height:82px;padding:16px 14px;align-content:center}
  .pact-cta__label{padding-left:0}
  .pact-cta__act{padding-right:0}
  .pact-cta__lead br{display:none}
  .pact-cta__word{font-size:clamp(30px,10.4vw,52px)}
}
@media (prefers-reduced-motion:reduce){
  .pact-cta__row::before{transition:none}
}

/* ─────────────────────────────────────────────
   COMPACT PACKAGE — CTAの下の帯（トップだけ）。
   サポート内容12ページへの導線はここが担う。12件を減らさないこと。
   🔴 オレンジ地に紺文字を使わない。文字は白（本人の確定指示・5節）。
   ───────────────────────────────────────────── */
.pkg-grid{margin:clamp(38px,4.6vw,66px) 0 0;padding:clamp(16px,1.8vw,26px);list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(76px,auto);
  gap:clamp(10px,1.1vw,16px);border:1px solid var(--line);border-radius:22px;background:#fff}
.pkg-grid>li{min-width:0}
.pkg-grid>li>a{height:100%;padding:14px 12px;display:grid;place-content:center;justify-items:center;gap:9px;
  border:1px solid var(--line);border-radius:14px;color:var(--navy);text-align:center;text-decoration:none;
  transition:color .22s var(--ease),border-color .22s var(--ease),background-color .22s var(--ease)}
.pkg-grid>li>a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pkg-grid>li>a svg use[href="#icon-logo"],
.pkg-grid>li>a svg use[href="#icon-spark"]{fill:currentColor;stroke:none}
.pkg-grid>li>a span{font-size:10px;font-weight:900;letter-spacing:.1em;line-height:1.4}
/* ホバーで位置は動かさない。色だけ変える（本人の確定指示）。 */
.pkg-grid>li>a:hover,.pkg-grid>li>a:focus-visible{color:#fff;border-color:var(--navy);background:var(--navy)}
.pkg-grid>li>a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.pkg-core{grid-column:2 / 4;grid-row:2 / 4;padding:0;border-radius:16px;color:#fff;background:var(--orange)}
/* 中央のパネルごと、まとめて見積もるシミュレーターへの入口にする（2026-09-10 本人指示）。 */
.pkg-core__link{display:grid;align-content:center;gap:14px;height:100%;
  padding:clamp(18px,2.2vw,30px);border-radius:16px;color:#fff;text-decoration:none;text-align:center;
  transition:background .2s ease}
@media (hover:hover){.pkg-core__link:hover{background:#D8390F}}
.pkg-core__link:active{background:#D8390F}
.pkg-core__link:focus-visible{outline:3px solid #fff;outline-offset:-5px}
/* 🔴 横1行で大きく見せる（2026-09-10 本人指示）。2行に折り返さない。
   パネルは4列グリッドの中央2列ぶん。1行で収まる大きさに合わせてある。 */
/* 🔴 タイルのラベル .pkg-grid>li>a span（詳細度0,1,3）が10pxを掛けてくる。
   中央のパネルも a の中の span なので、詳細度を上げないと全部10pxになる（2026-09-10）。 */
.pkg-grid>li>a .pkg-core__title{display:block;margin:0;font-size:clamp(19px,3.4vw,50px);font-weight:900;
  line-height:1.05;letter-spacing:-.045em;white-space:nowrap}
/* オレンジ地の小さい文字。白のまま読ませるため、太さと大きさで補う。 */
.pkg-grid>li>a .pkg-core__note{display:block;margin:0;font-size:15px;font-weight:700;line-height:1.7;
  letter-spacing:0}
/* スマホだけ「必要なものを、一点から。／まとめてのご依頼も。」の2行にする。PCは1続きのまま（2026-09-11）。 */
.pkg-core__br{display:none}
@media (max-width:640px){.pkg-core__br{display:inline}.pkg-core__note{word-break:keep-all;overflow-wrap:anywhere}}
.pkg-grid>li>a .pkg-core__cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  justify-self:center;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.7);
  border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.04em;line-height:1}
/* 閉じている＝中心へ寄って消えている / 開く＝定位置へ広がる。
   旧 COMPACT PACKAGE の演出をそのまま復元（--dx/--dy/--d は当時の値）。
   🔴 これは「常時勝手に動くもの」ではなく、触ったときだけ動く意図的な演出。消さないこと。 */
.pkg-grid>li:not(.pkg-core){opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.84);
  transition:opacity .45s var(--ease) var(--d,0ms),transform .6s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.pkg-grid.is-open>li:not(.pkg-core){opacity:1;transform:none}
.pkg-core{transform:scale(.92);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pkg-grid.is-open .pkg-core{transform:none}
.pkg-grid>li:nth-child(1){grid-column:1;grid-row:1;--dx:58px;--dy:46px;--d:20ms}
.pkg-grid>li:nth-child(2){grid-column:2;grid-row:1;--dx:18px;--dy:58px;--d:45ms}
.pkg-grid>li:nth-child(3){grid-column:3;grid-row:1;--dx:-18px;--dy:58px;--d:70ms}
.pkg-grid>li:nth-child(4){grid-column:4;grid-row:1;--dx:-58px;--dy:46px;--d:95ms}
.pkg-grid>li:nth-child(5){grid-column:1;grid-row:2;--dx:72px;--dy:14px;--d:120ms}
.pkg-grid>li:nth-child(7){grid-column:4;grid-row:2;--dx:-72px;--dy:14px;--d:145ms}
.pkg-grid>li:nth-child(8){grid-column:1;grid-row:3;--dx:72px;--dy:-14px;--d:170ms}
.pkg-grid>li:nth-child(9){grid-column:4;grid-row:3;--dx:-72px;--dy:-14px;--d:195ms}
.pkg-grid>li:nth-child(10){grid-column:1;grid-row:4;--dx:58px;--dy:-46px;--d:220ms}
.pkg-grid>li:nth-child(11){grid-column:2;grid-row:4;--dx:18px;--dy:-58px;--d:245ms}
.pkg-grid>li:nth-child(12){grid-column:3;grid-row:4;--dx:-18px;--dy:-58px;--d:270ms}
.pkg-grid>li:nth-child(13){grid-column:4;grid-row:4;--dx:-58px;--dy:-46px;--d:295ms}
@media (max-width:760px){
  /* スマホは2列。オレンジの説明を先頭へ出して、下に一覧を並べる。 */
  .pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(72px,auto);border-radius:18px}
  .pkg-grid>li{grid-column:auto !important;grid-row:auto !important}
  /* 詳細度で負けるので `.pkg-grid>li` と同じ形で書く。`.pkg-core` 単体だと上の行に負ける。 */
  .pkg-grid>li.pkg-core{grid-column:1 / -1 !important;order:-1}
  /* 指では「ホバー」が無いので、スマホは最初から開いた状態にする。 */
  .pkg-grid>li:not(.pkg-core){opacity:1;transform:none}
  .pkg-core,.pkg-grid.is-open .pkg-core{transform:none}
  .pkg-core__note{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .pkg-grid>li>a{transition:none}
  /* 動きを減らす設定では、開いた完成状態で出す。 */
  .pkg-grid>li:not(.pkg-core){opacity:1;transform:none;transition:none}
  .pkg-core{transform:none;transition:none}
}

/* PP-8は正本の透過画像をそのまま配置する。見出しやリンクは覆わない。 */
.hero-art .pp8--hero{position:absolute;z-index:3;right:7%;bottom:2%;width:clamp(112px,15vw,190px);height:auto;pointer-events:none;transform:scaleX(-1)}
.op-showcase{position:relative}
.op-showcase .pp8--works{position:absolute;z-index:2;left:-48px;top:42%;width:clamp(88px,10vw,132px);height:auto;pointer-events:none}
.process .section-inner{position:relative}
.process .pr-media{position:relative}
.process .pp8--process{position:absolute;z-index:3;right:-12px;bottom:-34px;width:clamp(110px,13vw,170px);height:auto;pointer-events:none;transform:scaleX(-1)}
.pact-cta__body{position:relative}
.pact-cta__body .pp8--cta{position:absolute;right:0;top:0;width:clamp(170px,20vw,250px);height:auto;pointer-events:none}
@media(max-width:1000px){
  .op-showcase .pp8--works{left:0;top:39%;width:104px}
  .process .pp8--process{right:-8px;bottom:-24px;width:130px}
}
@media(max-width:760px){
  .hero-art .pp8--hero{right:2%;bottom:0;width:clamp(80px,23vw,115px)}
  .op-showcase .pp8--works{top:32%;width:82px}
  .process .pp8--process{right:0;bottom:-16px;width:96px}
  .pact-cta__body .pp8--cta{position:relative;display:block;width:clamp(120px,36vw,160px);margin:-12px 0 -20px auto}
}
/* フッターの SNS（2026-10-04）。index.html のインラインと pages.css の2か所に同じものがある。片方だけ直さない。
   ホバーは背景と文字色をセットで、@media (hover:hover) の中だけ。位置は動かさない。 */
.footer-sns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:28px 0 22px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.footer-sns__label{margin:0;font-size:11px;font-weight:900;letter-spacing:.16em;color:#ff4c21}
.footer-sns__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.footer-sns__list a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;font-size:12px;font-weight:900;letter-spacing:.06em;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.footer-sns__list svg{width:16px;height:16px;flex:none}
.footer-sns__list a:focus-visible{outline:2px solid #ff4c21;outline-offset:3px}
@media (hover:hover){.footer-sns__list a:hover{background:#fff;color:#071b3c;border-color:#fff}}
@media (max-width:560px){.footer-sns__list{display:grid;grid-template-columns:1fr 1fr;width:100%}.footer-sns__list a{width:100%;justify-content:center}}