:root {
  --navy:#071b3c;
  --orange:#ff4c21;
  --warm:#f7f5f0;
  --wash:#fff1e9;
  --blue:#dfeaf5;
  --line:#d9dbd8;
  --ink:#353b43;
  --content:min(1180px,calc(100vw - 48px));
  --corner:url("../hybrid/pact-corner.svg");
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
/* iPhone の Safari は body の clip を画面のスクロールに使わない。html の hidden は画面へ移るだけで sticky を壊さない */
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;color:var(--navy);background:#fff;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
::selection{color:var(--navy);background:var(--orange)}
.page-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}
.page-header__inner{width:var(--content);height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.page-logo{width:116px}
.page-logo img{width:100%}
.page-nav{display:flex;align-items:center;gap:26px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.page-nav a{text-decoration:none;transition:color .2s}
.page-nav a:hover,.page-nav a:focus-visible{color:var(--orange)}
.page-nav a[aria-current="page"]{color:var(--orange-text,#CC3A10)}
.page-nav__contact{min-height:40px;padding:0 17px;display:inline-flex;align-items:center;border:1px solid var(--navy);border-radius:8px;color:#fff!important;background:var(--navy)}
.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}
.page-main{overflow-x:clip}
.pact-404__actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.page-hero{position:relative;isolation:isolate;padding:clamp(84px,10vw,142px) 0 clamp(76px,9vw,124px);background:var(--warm);border-bottom:1px solid var(--navy)}
.page-hero__inner{width:var(--content);margin:auto;position:relative;z-index:2}
.page-kicker{margin:0 0 26px;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.page-kicker::before{content:"";width:42px;height:4px;border-radius:9px;background:var(--orange)}
.page-hero h1{max-width:1160px;margin:0;font-size:clamp(52px,6.4vw,92px);line-height:.98;letter-spacing:-.065em}
.page-hero__lead{max-width:700px;margin:34px 0 0;color:var(--ink);font-size:clamp(16px,1.4vw,20px);font-weight:600}
.page-hero__mark{position:absolute;right:clamp(24px,8vw,120px);bottom:-22px;width:clamp(120px,18vw,250px);aspect-ratio:1;background:var(--orange);-webkit-mask:var(--corner) center/contain no-repeat;mask:var(--corner) center/contain no-repeat;transform:rotate(180deg);opacity:.98}
.page-section{padding:clamp(76px,9vw,126px) 0}
.page-section--warm{background:var(--warm)}
.page-section--navy{color:#fff;background:var(--navy)}
/* ABOUT film：ヒーローの直下に、PACT の紹介動画（assets/home/about-film.html・16秒・音は右下のボタンで）を置く（2026-10-08） */
.about-film__title{margin:0;font-size:clamp(28px,3.6vw,52px);line-height:1.15;letter-spacing:-.03em;font-weight:900;color:#fff}
.about-film__frame{position:relative;margin-top:clamp(28px,4vw,52px);aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:var(--navy)}
.about-film__frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
@media (max-width:720px){.about-film__frame{border-radius:10px}}
.page-section__inner{width:var(--content);margin:auto}
.section-label{margin:0 0 18px;font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.section-heading{max-width:850px;margin:0;font-size:clamp(36px,5vw,70px);line-height:1.05;letter-spacing:-.055em}
.section-lead{max-width:720px;margin:24px 0 0;color:var(--ink)}
.page-section--navy .section-lead{color:rgba(255,255,255,.74)}

/* 代表プロフィール（2026-09-07 追加）。白ベースで、前後のネイビーと対比させる。 */
.profile{background:#fff}
.profile__layout{display:grid;grid-template-columns:minmax(0,clamp(190px,22vw,280px)) minmax(0,1fr);gap:clamp(30px,4.6vw,68px);align-items:start;margin-top:34px}
.profile__portrait{margin:0}
.profile__portrait img{width:100%;height:auto;border-radius:50%}
.profile__name{margin:0;font-size:clamp(28px,3.8vw,44px);font-weight:900;letter-spacing:.05em;line-height:1.12}
.profile__role{margin:12px 0 0;color:var(--orange-text,#CC3A10);font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.profile__text{margin-top:clamp(26px,3vw,38px);max-width:760px}
.profile__text p{margin:0 0 21px;color:var(--ink);font-size:clamp(14px,1.1vw,16px);line-height:2.05}
.profile__text p:last-child{margin-bottom:0}
/* 3行の信条。本文と同じ扱いにせず、ここだけ声色を変える。 */
.profile__creed{margin:30px 0 30px!important;padding:2px 0 2px 22px;border-left:4px solid var(--orange);color:var(--navy)!important;font-size:clamp(16px,1.5vw,20px)!important;font-weight:800;line-height:1.95!important}
@media(max-width:860px){
  .profile__layout{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  .profile__portrait{width:min(210px,58vw)}
  .profile__text{text-align:left}
  .profile__creed{margin:26px 0!important;padding-left:18px}
}
.button{min-height:54px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--navy);border-radius:9px;font-size:13px;font-weight:900;text-decoration:none;transition:transform .25s var(--ease),color .2s,background .2s}
.button::before{content:"";width:14px;aspect-ratio:1;background:currentColor;-webkit-mask:var(--corner) center/contain no-repeat;mask:var(--corner) center/contain no-repeat}
.button::after{content:"↗";font-size:17px}
.button:hover,.button:focus-visible{transform:translateY(-3px)}
.button--primary{color:#fff;background:var(--navy)}
.button--light{color:var(--navy);background:#fff}
.channel-grid{margin-top:42px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.channel{min-height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--navy);border-radius:13px;background:#fff;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.channel:hover,.channel:focus-visible{transform:translateY(-6px);box-shadow:0 20px 44px rgba(7,27,60,.1)}
.channel__icon{width:42px;height:42px;padding:9px;border-radius:10px;color:#fff;background:var(--navy)}
.channel__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.channel b{font-size:18px}.channel small{display:block;color:var(--ink);font-size:11px;line-height:1.5}
.assurance{margin-top:22px;padding:18px 22px;display:flex;flex-wrap:wrap;gap:12px 28px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.58);font-size:12px;font-weight:800}
.assurance span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--orange)}
.contact-options--compact{padding:42px 0 44px}
.contact-options__head{display:flex;align-items:end;justify-content:space-between;gap:36px}
.contact-options__head h2{margin:0;font-size:clamp(28px,3.2vw,44px);line-height:1.05;letter-spacing:-.045em}
.contact-options__head>p{max-width:430px;margin:0;color:var(--ink);font-size:13px}
.contact-options--compact .channel-grid{margin-top:20px}
.contact-options--compact .channel{min-height:80px;padding:14px;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}
.contact-options--compact .channel__icon{width:36px;height:36px;flex:0 0 auto;padding:8px}
.contact-options--compact .channel b{font-size:15px}
.contact-options--compact .channel small{font-size:10px}
.contact-options--compact .assurance{margin-top:12px;padding:12px 16px}
.form-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(48px,8vw,110px);align-items:start}
.form-aside{position:sticky;top:118px}
.form-aside h2{margin:0;font-size:clamp(36px,4.5vw,62px);line-height:1.05;letter-spacing:-.05em}
.form-aside p{margin:22px 0 0;color:var(--ink)}
.form-card{padding:clamp(26px,4vw,48px);border:1px solid var(--navy);border-radius:16px;background:#fff;box-shadow:0 26px 70px rgba(7,27,60,.08)}
.field{margin:0 0 28px}
.field label,.field legend{display:block;margin-bottom:8px;font-size:13px;font-weight:900}
.required{margin-left:7px;color:var(--orange-text,#CC3A10);font-size:10px}
.field input,.field textarea,.field select{width:100%;border:1px solid #aab0b7;border-radius:8px;color:var(--navy);background:#fff;outline:none;transition:border .2s,box-shadow .2s}
.field input,.field select{height:52px;padding:0 14px}
.field textarea{min-height:190px;padding:14px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(255,76,33,.14)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.choice{min-height:48px;padding:10px 12px;display:flex!important;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;font-size:12px!important;font-weight:700!important}
.choice input{width:18px!important;height:18px!important;margin:0}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:12px}.consent input{width:18px;height:18px;margin-top:4px;flex:0 0 auto}
.form-card .button{width:100%;margin-top:22px}
.form-status{min-height:1.6em;margin:14px 0 0;color:var(--ink);font-size:12px}
.privacy-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(48px,8vw,110px);align-items:start}
.privacy-nav{position:sticky;top:112px;padding:20px;border:1px solid var(--line);border-radius:11px;background:var(--warm)}
.privacy-nav b{font-size:11px;letter-spacing:.12em}.privacy-nav ol{margin:14px 0 0;padding-left:22px;font-size:12px}.privacy-nav a{text-decoration:none}.privacy-nav a:hover{color:var(--orange)}
.legal-copy{max-width:800px}.legal-copy h2{margin:64px 0 14px;padding-top:10px;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.03em}.legal-copy h2:first-child{margin-top:0}.legal-copy p,.legal-copy li{color:var(--ink)}
.legal-copy .legal-note{padding:18px 20px;border-left:4px solid var(--orange);background:var(--wash);font-size:13px}
.legal-copy a{font-weight:800}.legal-date{margin-top:60px;padding-top:20px;border-top:1px solid var(--line);font-size:12px}
.creative-hero{color:#fff;background:var(--navy)}
.creative-hero .page-kicker::before{background:var(--orange)}
.creative-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.65fr);gap:clamp(44px,7vw,100px);align-items:center}
.creative-hero h1{font-size:clamp(54px,5.7vw,82px)}
.creative-hero__lead{color:rgba(255,255,255,.76)}
.creative-object{min-height:430px;position:relative;display:grid;place-items:center}
.creative-object__frame{width:min(360px,82%);aspect-ratio:1;position:relative;border:1px solid rgba(255,255,255,.45);border-radius:18px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.24);animation:objectFloat 4.8s ease-in-out infinite alternate}
.creative-object__frame::before,.creative-object__frame::after{content:"";position:absolute;width:42%;aspect-ratio:1;-webkit-mask:var(--corner) center/contain no-repeat;mask:var(--corner) center/contain no-repeat}
.creative-object__frame::before{left:10%;top:10%;background:var(--navy)}
.creative-object__frame::after{right:10%;bottom:10%;background:var(--orange);transform:rotate(180deg)}
.creative-object__label{position:absolute;inset:auto 18px 18px;z-index:2;padding:12px;border-radius:8px;color:#fff;background:var(--navy);font-size:11px;font-weight:900;letter-spacing:.12em;text-align:center}
@keyframes objectFloat{to{transform:translateY(-12px) rotate(1.5deg)}}
.detail-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,88px);align-items:start}
.detail-intro__title h2{margin:0;font-size:clamp(32px,3.4vw,48px);line-height:1.08;letter-spacing:-.05em}
.detail-copy{margin-top:26px;font-size:16px}.detail-copy p{margin:0 0 20px;color:var(--ink)}.detail-copy p:last-child{margin-bottom:0}
.detail-cards{display:grid;grid-template-columns:1fr;gap:12px}
.detail-card{padding:24px 26px;border:1px solid var(--navy);border-radius:12px;background:#fff}
.detail-card:nth-child(2){background:var(--blue)}
.detail-card small{font-weight:900;letter-spacing:.12em;text-transform:uppercase}.detail-card h3{margin:18px 0 0;font-size:24px;line-height:1.2}.detail-card p{margin:12px 0 0;font-size:13px}
.deliverables{margin:42px 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.5)}
.deliverables li{padding:20px 0;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,.22);font-weight:800}
.deliverables li::before{content:"";width:14px;aspect-ratio:1;flex:0 0 auto;background:var(--orange);-webkit-mask:var(--corner) center/contain no-repeat;mask:var(--corner) center/contain no-repeat}


.faq-list{max-width:900px;margin:44px 0 0;border-top:1px solid var(--navy)}
.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{padding:23px 42px 23px 0;position:relative;cursor:pointer;font-weight:900}.faq-list summary::after{content:"＋";position:absolute;right:4px}.faq-list details[open] summary::after{content:"−"}.faq-list p{max-width:760px;margin:0;padding:0 0 24px;color:var(--ink)}
.about-hero{background:#fff}
.about-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.68fr);gap:clamp(48px,8vw,110px);align-items:center}
.about-hero__statement{min-height:360px;padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--navy);border-radius:18px;color:#fff;background:var(--navy);box-shadow:0 30px 70px rgba(7,27,60,.12)}
.about-hero__statement small{font-size:10px;font-weight:900;letter-spacing:.15em}.about-hero__statement strong{font-size:clamp(31px,3.4vw,48px);line-height:1.12;letter-spacing:-.045em}
.about-intro{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(50px,8vw,120px);align-items:start}.about-intro__copy{font-size:clamp(17px,1.5vw,21px)}.about-intro__copy p{margin:0 0 24px;color:var(--ink)}
.about-mvv__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:44px;align-items:end}.about-mvv__head>p{margin:0;color:rgba(255,255,255,.7)}
.mvv-grid{margin-top:54px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mvv-card{min-height:360px;padding:28px;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.38);border-radius:14px;background:rgba(255,255,255,.05)}.mvv-card span{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--orange)}.mvv-card h3{margin:auto 0 20px;font-size:clamp(25px,2.6vw,36px);line-height:1.12;letter-spacing:-.04em}.mvv-card p{margin:0;color:rgba(255,255,255,.72);font-size:13px}
.pact-values{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(50px,8vw,120px);align-items:start}.value-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--navy)}.value-list li{padding:27px 0;display:grid;grid-template-columns:52px 1fr;gap:22px;border-bottom:1px solid var(--line)}.value-list>li>span{font-size:11px;font-weight:900;letter-spacing:.13em;color:var(--orange)}.value-list h3{margin:0;font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.035em}.value-list p{margin:10px 0 0;color:var(--ink)}

/* About / story */
body[data-page="about"]{background:var(--warm)}
.story-progress{position:fixed;right:18px;top:50%;z-index:19;width:22px;height:178px;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateY(-50%);color:var(--navy);pointer-events:none}
.story-progress::before{content:"";position:absolute;top:0;bottom:34px;left:10px;width:1px;background:rgba(7,27,60,.2)}
.story-progress__bar{position:absolute;top:0;left:9px;width:3px;height:calc(144px * var(--story-progress,0));border-radius:4px;background:var(--orange);transition:height .12s linear}
.story-progress b{margin-top:auto;font-size:9px;letter-spacing:.1em}
.about-story-hero{min-height:calc(100svh - 78px);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;color:var(--navy);background:#fff}
.about-story-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 35%,rgba(255,76,33,.08),transparent 32%),linear-gradient(135deg,transparent 0 54%,rgba(7,27,60,.025) 54% 55%,transparent 55%);z-index:-2}
.about-story-hero__inner{width:var(--content);margin:auto;padding:86px 0 62px;position:relative;z-index:2}
.about-story-hero h1{margin:0;max-width:1000px;font-size:clamp(68px,9vw,136px);line-height:.86;letter-spacing:-.085em}
.about-story-hero h1 em{font-style:normal;color:var(--orange)}
.about-story-hero__bottom{margin-top:54px;display:flex;align-items:end;justify-content:space-between;gap:40px}
.about-story-hero__bottom p{max-width:630px;margin:0;color:var(--ink);font-size:clamp(16px,1.45vw,21px);font-weight:650}
.story-scroll{display:flex;align-items:center;gap:12px;font-size:9px;font-weight:900;letter-spacing:.16em}
.story-scroll i{width:1px;height:58px;position:relative;background:rgba(7,27,60,.24);overflow:hidden}
.story-scroll i::after{content:"";position:absolute;inset:0;background:var(--orange);transform:translateY(-100%);animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{55%,100%{transform:translateY(100%)}}
.about-story-hero__words{position:absolute;inset:5% -4% auto;z-index:-1;display:grid;gap:0;opacity:.035;font-size:clamp(100px,18vw,260px);font-weight:900;line-height:.62;letter-spacing:-.08em;white-space:nowrap;transform:translate3d(calc(var(--about-shift,0) * -70px),0,0)}
.about-story-hero__words span:nth-child(2){transform:translateX(22%)}.about-story-hero__words span:nth-child(3){transform:translateX(-9%)}
.about-story-hero__corner{position:absolute;width:clamp(130px,20vw,300px);aspect-ratio:1;-webkit-mask:var(--corner) center/contain no-repeat;mask:var(--corner) center/contain no-repeat}
.about-story-hero__corner--navy{left:-5%;top:-5%;background:var(--navy);transform:rotate(6deg);animation:cornerDrift 7s ease-in-out infinite alternate}
.about-story-hero__corner--orange{right:-4%;bottom:-7%;background:var(--orange);transform:rotate(184deg);animation:cornerDrift 8s 1s ease-in-out infinite alternate-reverse}
@keyframes cornerDrift{to{translate:18px -10px;rotate:3deg}}
.story-opening{background:var(--warm)}
.story-opening__grid{display:grid;grid-template-columns:minmax(160px,.38fr) minmax(0,1.62fr);gap:clamp(40px,8vw,130px);align-items:start}
.story-opening h2{margin:0;font-size:clamp(48px,6.7vw,94px);line-height:.98;letter-spacing:-.07em}
.story-opening .reveal>p{max-width:780px;margin:40px 0 0;color:var(--ink);font-size:clamp(17px,1.55vw,22px)}
.story-sequence{position:relative;color:#fff;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.22)}
.story-sequence__rail{position:sticky;top:78px;z-index:2;width:var(--content);height:0;margin:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;transform:translateY(34px);font-size:9px;font-weight:900;letter-spacing:.16em;pointer-events:none}
.story-sequence__rail i{height:1px;background:rgba(255,255,255,.32)}
.story-sequence__chapters{width:var(--content);margin:auto}
.story-chapter{min-height:100svh;padding:130px 0 90px;display:grid;grid-template-columns:minmax(0,.78fr) minmax(480px,1.22fr);gap:clamp(46px,7vw,110px);align-items:center;opacity:.35;transition:opacity .6s var(--ease)}
.story-chapter.is-active{opacity:1}
.story-chapter--reverse .story-chapter__copy{order:2}.story-chapter--reverse .story-media{order:1}
.story-chapter__eyebrow{margin:0 0 26px;color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.16em}
.story-chapter h2{margin:0;font-size:clamp(48px,5vw,76px);line-height:.98;letter-spacing:-.06em}
.story-chapter__copy>p:last-child{margin:34px 0 0;color:rgba(255,255,255,.72);font-size:clamp(15px,1.25vw,18px)}
.story-media{margin:0;position:relative;overflow:hidden;border-radius:18px;background:#fff;transform:translate3d(0,var(--media-shift,26px),0) rotate(.8deg);transition:transform .85s var(--ease),box-shadow .85s var(--ease);box-shadow:0 25px 65px rgba(0,0,0,.2)}
.story-chapter:nth-child(even) .story-media{transform:translate3d(0,var(--media-shift,26px),0) rotate(-.8deg)}
.story-chapter.is-active .story-media{box-shadow:0 42px 100px rgba(0,0,0,.34)}
.story-media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
.story-chapter.is-active .story-media img{transform:scale(1.035)}
.story-media figcaption{position:absolute;left:18px;bottom:16px;padding:7px 10px;border-radius:6px;color:#fff;background:rgba(7,27,60,.88);font-size:8px;font-weight:900;letter-spacing:.14em}
.story-turn{position:relative;overflow:hidden}
.story-turn::after{content:"CONNECT / COMPACT / IMPACT";position:absolute;left:-1%;bottom:-.18em;color:rgba(255,255,255,.035);font-size:clamp(80px,13vw,190px);font-weight:900;line-height:1;white-space:nowrap;letter-spacing:-.08em}
.story-turn h2{position:relative;z-index:1;max-width:1120px;margin:0;font-size:clamp(52px,7vw,100px);line-height:.95;letter-spacing:-.072em}
.context-map{width:min(760px,90%);aspect-ratio:1;margin:80px auto 0;position:relative;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:50%}
.context-map::before,.context-map::after{content:"";position:absolute;inset:15%;border:1px solid rgba(255,255,255,.18);border-radius:50%}.context-map::after{inset:31%}
.context-map strong{z-index:2;width:180px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:var(--navy);background:var(--orange);font-size:30px;line-height:1.1;text-align:center;animation:contextPulse 3.8s ease-in-out infinite}
.context-map span{position:absolute;z-index:2;padding:9px 14px;border:1px solid rgba(255,255,255,.35);border-radius:99px;background:var(--navy);font-size:12px;font-weight:800}
.context-map span:nth-child(1){left:4%;top:27%}.context-map span:nth-child(2){right:10%;top:15%}.context-map span:nth-child(4){right:2%;bottom:24%}.context-map span:nth-child(5){left:16%;bottom:11%}
.context-map i{position:absolute;inset:6%;border:2px dashed rgba(255,76,33,.56);border-radius:50%;animation:orbitSpin 22s linear infinite}
@keyframes contextPulse{50%{transform:scale(1.06);box-shadow:0 0 0 20px rgba(255,76,33,.08)}}@keyframes orbitSpin{to{transform:rotate(360deg)}}
.about-mvv-story{background:var(--warm)}
.about-mvv-story__intro{max-width:1060px}
.about-mvv-story__intro h2{margin:0;font-size:clamp(56px,8vw,112px);line-height:.9;letter-spacing:-.075em}
.about-mvv-story__intro>p:last-child{max-width:620px;margin:30px 0 0;color:var(--ink)}
.mvv-stack{margin-top:90px;display:grid;gap:24px}
.mvv-panel{min-height:390px;padding:clamp(30px,5vw,68px);position:sticky;top:110px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--navy);border-radius:20px;box-shadow:0 22px 60px rgba(7,27,60,.1)}
.mvv-panel:nth-child(2){top:132px}.mvv-panel:nth-child(3){top:154px}
.mvv-panel span{font-size:10px;font-weight:900;letter-spacing:.16em}
.mvv-panel h3{max-width:960px;margin:auto 0 28px;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.06em}
.mvv-panel p{max-width:620px;margin:0;font-weight:650}
.mvv-panel--mission{color:#fff;background:var(--navy)}.mvv-panel--mission span{color:var(--orange)}.mvv-panel--mission p{color:rgba(255,255,255,.72)}
.mvv-panel--vision{color:#fff;background:var(--orange)}.mvv-panel--vision>p:first-child{color:#fff}.mvv-panel--vision h3{color:#fff}.mvv-panel--vision p{color:rgba(255,255,255,.94)}.mvv-panel--value{background:#fff}
.page-cta--gentle{color:var(--navy);background:var(--wash)}
.page-cta--gentle .page-cta__inner{align-items:center}
.page-cta--gentle .button{min-width:210px}

/* PACT APP preparing */
.coming-page{color:var(--navy);background:var(--warm)}
.coming-hero{min-height:calc(100svh - 78px);position:relative;overflow:hidden;display:grid;place-items:center;padding:80px 0}
.coming-hero__inner{width:var(--content);position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:clamp(50px,9vw,140px);align-items:center}
.coming-hero h1{margin:0;font-size:clamp(72px,9.5vw,140px);line-height:.84;letter-spacing:-.085em}
.coming-hero__inner>div:last-child>p:not(.page-kicker){margin:34px 0 0;color:var(--ink);font-size:18px;font-weight:650}
.coming-app-icon{width:min(390px,100%);aspect-ratio:1;position:relative;display:grid;place-items:center;border:1px solid var(--navy);border-radius:26px;background:#fff;box-shadow:0 38px 90px rgba(7,27,60,.14);animation:appFloat 5s ease-in-out infinite alternate}
.coming-app-icon::before{content:"";width:48%;aspect-ratio:1;border:22px solid var(--navy);border-radius:22px}
.coming-app-icon span{position:absolute;right:16%;bottom:16%;width:25%;aspect-ratio:1;border-radius:18px 18px 8px;background:var(--orange)}
.coming-app-icon i,.coming-app-icon b{position:absolute;width:13px;aspect-ratio:1;border-radius:50%;background:var(--orange);animation:appDot 2.4s ease-in-out infinite}
.coming-app-icon i{left:15%;top:17%}.coming-app-icon b{right:13%;top:21%;animation-delay:.8s}
@keyframes appFloat{to{transform:translateY(-13px) rotate(1deg)}}@keyframes appDot{50%{transform:scale(1.8);opacity:.25}}
.coming-actions{margin-top:38px;display:flex;align-items:center;gap:28px}.coming-back{font-size:12px;font-weight:900;text-decoration:none}.coming-back span{display:inline-block;margin-left:8px;transition:transform .25s}.coming-back:hover span{transform:translateX(5px)}
.coming-orbit{position:absolute;inset:0;pointer-events:none}.coming-orbit span{position:absolute;padding:8px 13px;border:1px solid rgba(7,27,60,.25);border-radius:99px;color:rgba(7,27,60,.42);background:rgba(255,255,255,.72);font-size:9px;font-weight:900;letter-spacing:.14em;animation:orbitTag 7s ease-in-out infinite alternate}.coming-orbit span:nth-child(1){left:3%;top:16%}.coming-orbit span:nth-child(2){right:5%;top:21%;animation-delay:1s}.coming-orbit span:nth-child(3){right:12%;bottom:12%;animation-delay:2s}@keyframes orbitTag{to{transform:translate(22px,-15px) rotate(5deg)}}
.page-cta{padding:clamp(70px,8vw,110px) 0;background:var(--orange)}
.page-cta__inner{width:var(--content);margin:auto;display:flex;align-items:end;justify-content:space-between;gap:40px}.page-cta h2{max-width:760px;margin:0;font-size:clamp(38px,5.4vw,76px);line-height:1.02;letter-spacing:-.055em}.page-cta p{margin:18px 0 0;font-weight:700}
.page-cta.page-cta--gentle{color:var(--navy);background:var(--wash)}
.page-cta--gentle .page-cta__inner{align-items:center}
.page-cta--gentle .button{min-width:210px}
.page-footer{overflow:hidden;color:#fff;background:var(--navy)}
.footer-rail{width:max-content;display:flex;color:var(--navy);background:var(--orange);font-size:clamp(20px,2.6vw,36px);line-height:1;font-weight:900;white-space:nowrap;animation:rail 34s linear infinite}.footer-rail span{padding:15px 0 13px}@keyframes rail{to{transform:translateX(-50%)}}
.page-footer__inner{width:var(--content);min-height:230px;margin:auto;padding:48px 0;display:flex;flex-direction:column;justify-content:space-between}.page-footer__top{display:flex;justify-content:space-between;gap:30px}.page-footer__logo{width:104px;filter:brightness(0) invert(1)}.page-footer__links{display:flex;flex-wrap:wrap;gap:18px 28px;font-size:11px;font-weight:900;letter-spacing:.08em}.page-footer__links a{text-decoration:none}.page-footer small{opacity:.68}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.is-visible{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
@media(max-width:900px){.page-nav{gap:14px;font-size:9px}.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-layout,.privacy-shell,.detail-intro,.about-hero__grid,.about-intro,.pact-values{grid-template-columns:1fr}.form-aside,.privacy-nav{position:static}.creative-hero__grid{grid-template-columns:1fr}.creative-object{min-height:360px}.about-hero__statement{min-height:280px}.about-mvv__head{grid-template-columns:1fr}.mvv-grid{grid-template-columns:1fr}.mvv-card{min-height:260px}.page-cta__inner{align-items:flex-start;flex-direction:column}.page-cta .button{min-width:280px}.page-hero__mark{opacity:.2}.story-progress{display:none}.story-opening__grid{grid-template-columns:1fr}.story-chapter{min-height:auto;padding:130px 0 100px;grid-template-columns:1fr}.story-chapter--reverse .story-chapter__copy,.story-chapter--reverse .story-media{order:initial}.story-sequence__rail{top:68px}.mvv-panel{position:relative;top:auto!important}.coming-hero__inner{grid-template-columns:1fr}.coming-app-icon{width:310px;margin:auto}.contact-options__head{align-items:start;flex-direction:column;gap:12px}}
@media(max-width:640px){:root{--content:calc(100vw - 28px)}.page-header__inner{height:68px}.page-logo{width:98px}.page-nav a:not(.page-nav__contact){display:none}.page-hero{padding:68px 0 74px}.page-hero h1,.creative-hero h1{font-size:clamp(43px,13vw,62px)}.page-hero__lead{font-size:15px}.channel-grid{grid-template-columns:1fr}.channel{min-height:112px}.contact-options--compact .channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.contact-options--compact .channel{min-width:0;min-height:80px;padding:11px;gap:9px}.contact-options--compact .channel__icon{width:30px;height:30px}.contact-options--compact .channel small{display:none}.contact-options--compact .assurance{display:grid;gap:6px}.choice-grid,.detail-cards,.form-card{padding:24px 18px}.contact-layout{gap:34px}.creative-object{min-height:300px}.creative-object__frame{width:270px}.page-cta .button{width:100%;min-width:0}.page-footer__top{flex-direction:column}.page-footer__links{display:grid;grid-template-columns:repeat(2,1fr)}.footer-rail{font-size:22px}.about-story-hero{min-height:calc(100svh - 68px)}.about-story-hero__inner{padding:70px 0 42px}.about-story-hero h1{font-size:clamp(58px,17vw,86px)}.about-story-hero__bottom{margin-top:38px;display:block}.story-scroll{margin-top:28px}.about-story-hero__corner{width:130px;opacity:.7}.story-opening h2{font-size:clamp(42px,12vw,62px)}.story-sequence__rail{display:none}.story-chapter{padding:90px 0 70px;gap:38px;opacity:1}.story-chapter h2{font-size:clamp(40px,12vw,58px)}.story-media{border-radius:12px}.story-turn h2{font-size:clamp(46px,13vw,68px)}.context-map{width:100%;margin-top:55px}.context-map strong{width:112px;font-size:20px}.context-map span{padding:5px 8px;font-size:9px}.about-mvv-story__intro h2{font-size:clamp(50px,14vw,72px)}.mvv-stack{margin-top:58px}.mvv-panel{min-height:340px;padding:27px;position:relative;top:auto!important}.mvv-panel h3{font-size:clamp(34px,10vw,48px)}.coming-hero{padding:60px 0}.coming-hero h1{font-size:clamp(65px,20vw,92px)}.coming-app-icon{width:250px}.coming-app-icon::before{border-width:16px}.coming-actions{align-items:flex-start;flex-direction:column}.coming-orbit{opacity:.5}}
@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}}
@media(max-width:640px){.page-nav{display:none}.pact-menu-toggle{display:flex;margin-left:auto}}

/* 2026-08-31: PACT全体のAbout / SERVICE / contact */
.about-businesses{color:#fff;background:var(--navy);overflow:hidden}
.about-business-grid{margin-top:54px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.about-business{min-height:420px;padding:32px;position:relative;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.35);border-radius:18px;color:#fff;text-decoration:none;overflow:hidden;transition:transform .45s var(--ease),background .3s}
.about-business::after{content:"";position:absolute;right:-42px;bottom:-44px;width:160px;aspect-ratio:1;background:var(--orange);-webkit-mask:var(--corner) center/contain no-repeat;mask:var(--corner) center/contain no-repeat;transform:rotate(180deg) translate(-35px,-30px) scale(.55);transition:transform .65s cubic-bezier(.16,1,.3,1)}
.about-business:hover,.about-business:focus-visible{transform:translateY(-10px);background:rgba(255,255,255,.06)}
.about-business:hover::after,.about-business:focus-visible::after{transform:rotate(180deg) translate(0,0) scale(1)}
.about-business>span{color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.16em}.about-business h3{margin:auto 0 18px;font-size:clamp(30px,3vw,46px);line-height:1}.about-business p{margin:0 0 28px;color:rgba(255,255,255,.72);font-size:13px}.about-business b{font-size:12px}
.form-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.service-coming-object{width:min(390px,100%);aspect-ratio:1;position:relative;border:1px solid var(--navy);border-radius:26px;background:var(--navy);box-shadow:0 38px 90px rgba(7,27,60,.18);overflow:hidden;animation:appFloat 5s ease-in-out infinite alternate}
.service-coming-object::before,.service-coming-object::after{content:"";position:absolute;width:58%;aspect-ratio:1;-webkit-mask:var(--corner) center/contain no-repeat;mask:var(--corner) center/contain no-repeat}.service-coming-object::before{left:8%;top:8%;background:#fff}.service-coming-object::after{right:8%;bottom:8%;background:var(--orange);transform:rotate(180deg)}
.service-coming-object span,.service-coming-object i,.service-coming-object b{position:absolute;z-index:2;width:14px;aspect-ratio:1;border-radius:50%;background:var(--orange);animation:appDot 2.4s ease-in-out infinite}.service-coming-object span{left:48%;top:20%}.service-coming-object i{left:21%;bottom:22%;animation-delay:.7s}.service-coming-object b{right:20%;top:48%;animation-delay:1.4s}
@media(max-width:900px){.about-business-grid{grid-template-columns:1fr}.about-business{min-height:280px}.form-columns{grid-template-columns:1fr}.service-coming-object{width:310px;margin:auto}}

/* PACT JOURNAL */
.pact-journal,.pact-journal-article{width:var(--content);margin:auto}.journal-hero{min-height:560px;padding:110px 0 70px;display:grid;grid-template-columns:1.15fr .55fr;gap:80px;align-items:end;border-bottom:1px solid var(--navy)}.journal-hero h1{margin:0;font-size:clamp(64px,8vw,122px);line-height:.86;letter-spacing:-.08em}.journal-hero h1 em{color:var(--orange);font-style:normal}.journal-hero>p{margin:0 0 12px;color:var(--ink)}.journal-tools{padding:32px 0 54px}.journal-tools form{display:grid;grid-template-columns:1fr 220px 140px;gap:10px}.journal-tools label{font-size:9px;font-weight:900;letter-spacing:.15em}.journal-tools input,.journal-tools select,.journal-tools button{width:100%;height:52px;margin-top:5px;padding:0 15px;border:1px solid var(--navy);border-radius:10px;background:#fff}.journal-tools button{align-self:end;color:#fff;background:var(--navy);font-weight:900}.journal-categories{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}.journal-categories a{padding:7px 12px;border:1px solid var(--navy);border-radius:99px;font-size:10px;font-weight:900;text-decoration:none}.journal-categories small{margin-left:6px;color:var(--orange)}.journal-list{padding-bottom:110px}.journal-card{border-top:1px solid var(--navy)}.journal-card__link{padding:28px 0;display:grid;grid-template-columns:minmax(240px,.55fr) 1fr;gap:48px;text-decoration:none}.journal-card__visual{min-height:260px;display:grid;place-items:center;border-radius:18px;background:var(--navy);overflow:hidden}.journal-card__visual img{width:100%;height:100%;object-fit:cover}.journal-card__visual>span{color:var(--orange);font-size:92px;font-weight:900}.journal-card__body{display:flex;flex-direction:column}.journal-card__meta{display:flex;gap:18px;margin:0;font-size:10px;font-weight:900;letter-spacing:.1em}.journal-card__body h2{margin:28px 0 18px;font-size:clamp(28px,3.5vw,54px);line-height:1.04}.journal-card__body>div{color:var(--ink)}.journal-card__body>span{margin-top:auto;font-size:11px;font-weight:900}.journal-pagination{padding-top:30px}.journal-empty{padding:100px 0;text-align:center}.pact-journal-article{max-width:1080px;padding:100px 0}.pact-journal-article article>header h1{margin:22px 0 0;font-size:clamp(26px,2.6vw,38px);line-height:1.35}.journal-article-meta{display:flex;gap:18px;font-size:11px;font-weight:900}.journal-article-cover{margin:60px 0;border-radius:20px;overflow:hidden}.journal-article-cover img{width:100%;height:auto}.journal-article-body{max-width:760px;margin:auto;font-size:17px}.journal-article-body h2{margin-top:2.4em;font-size:36px}.journal-article-body img{border-radius:14px}.journal-article-cta{margin-top:100px;padding:48px;border-radius:20px;color:#fff;background:var(--navy)}.journal-article-cta h2{font-size:clamp(34px,4vw,58px);line-height:1}.journal-article-cta .button{margin-top:24px;color:var(--navy);background:#fff}
@media(max-width:800px){.journal-hero{min-height:auto;padding:72px 0 48px;grid-template-columns:1fr;gap:24px}.journal-hero h1{font-size:clamp(54px,14vw,76px)}.journal-tools form{grid-template-columns:1fr}.journal-card__link{grid-template-columns:1fr;gap:22px}.journal-card__visual{min-height:210px}.pact-journal-article{padding:70px 0}.journal-article-cta{padding:30px 24px}}

/* ============================================================
   v7 — 2026-08-31 フィードバック反映
   見出しの行数、余白、About の図解、準備中ページ、ブログ。
   ============================================================ */

/* 管理バーがある画面でもヘッダーとスクロール追従要素が正しい位置で止まる。 */
.page-header{z-index:60}
body.admin-bar .page-header{top:32px}
body.admin-bar .story-sequence__rail{top:110px}
body.admin-bar .mvv-panel{top:142px}
body.admin-bar .mvv-panel:nth-child(2){top:164px}
body.admin-bar .mvv-panel:nth-child(3){top:186px}
@media screen and (max-width:782px){
  body.admin-bar .page-header{top:0}
  body.admin-bar .story-sequence__rail{top:78px}
  body.admin-bar .mvv-panel{top:110px}
  body.admin-bar .mvv-panel:nth-child(2){top:132px}
  body.admin-bar .mvv-panel:nth-child(3){top:154px}
}

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- 見出しは1〜2行に収める --------------------------------- */
.about-story-hero h1{font-size:clamp(44px,5.6vw,84px);line-height:.96;text-wrap:balance}
.about-story-hero__bottom p{font-size:clamp(15px,1.25vw,18px)}
.story-opening h2{font-size:clamp(30px,3vw,44px);line-height:1.14;text-wrap:balance}
.story-opening .reveal>p{margin-top:26px;font-size:clamp(15px,1.2vw,17px)}
.story-chapter h2{font-size:clamp(28px,2.8vw,44px);line-height:1.12}
.story-chapter__copy>p:last-child{margin-top:22px;font-size:clamp(14px,1.05vw,16px)}
.story-turn h2{font-size:clamp(30px,3.6vw,56px);line-height:1.12;text-wrap:balance}
.story-turn h2 em{font-style:normal;color:var(--orange)}
.about-mvv-story__intro h2{font-size:clamp(32px,3.9vw,58px);line-height:1.08;text-wrap:balance}
.about-mvv-story__intro>p:last-child{margin-top:22px;font-size:15px}
.mvv-panel h3{font-size:clamp(22px,2.4vw,34px);line-height:1.22;margin:auto 0 20px}
.mvv-panel p{font-size:15px}
.mvv-panel{min-height:280px}
.coming-hero h1{font-size:clamp(40px,5.2vw,74px);line-height:1.02;letter-spacing:-.06em;text-wrap:balance}
.page-cta h2{font-size:clamp(28px,3vw,44px);line-height:1.1}
.journal-hero h1{font-size:clamp(36px,4.4vw,64px);line-height:1.06;letter-spacing:-.05em}

/* --- About ヒーロー：角形を枠の中へ収める ------------------- */
.about-story-hero{min-height:0;padding:clamp(28px,4vw,56px) 0}
.about-story-hero__corner{width:clamp(80px,9vw,140px)}
.about-story-hero__corner--navy{left:clamp(14px,2.2vw,34px);top:clamp(14px,2.2vw,34px);transform:none;animation:none}
.about-story-hero__corner--orange{right:clamp(14px,2.2vw,34px);bottom:clamp(14px,2.2vw,34px);transform:rotate(180deg);animation:none}
.about-story-hero__inner{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.about-story-hero__bottom{margin-top:clamp(28px,3.4vw,44px)}

/* --- About 章立て：余白を詰める ----------------------------- */
.story-opening{padding-block:clamp(56px,6vw,88px)}
.story-chapter{min-height:0;padding:clamp(56px,6vw,92px) 0;align-items:center;opacity:1}
.story-chapter__copy>p:last-child{color:rgba(255,255,255,.78)}
.story-sequence__chapters>.story-chapter+.story-chapter{border-top:1px solid rgba(255,255,255,.14)}

/* --- 制作カルテ：情報量を増やし、コンパクトに --------------- */
.karte{
  margin-top:clamp(34px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,2.4vw,36px);
  align-items:stretch;
}
.karte__core{
  position:relative;
  padding:clamp(24px,2.6vw,36px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:14px;
  border-radius:20px;
  color:var(--navy);
  background:var(--orange);
}
.karte__core span{
  width:34px;
  aspect-ratio:1;
  background:var(--navy);
  -webkit-mask:var(--corner) center/contain no-repeat;
  mask:var(--corner) center/contain no-repeat;
}
.karte__core strong{font-size:clamp(24px,2.4vw,34px);line-height:1.12;letter-spacing:-.03em}
.karte__core p{margin:0;font-size:14px;font-weight:700;line-height:1.75}
.karte__items{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.karte__items li{
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:14px;
  background:rgba(255,255,255,.05);
}
.karte__items b{font-size:13px;letter-spacing:.02em}
.karte__items span{color:rgba(255,255,255,.66);font-size:12px;line-height:1.7}

/* --- About / 準備中ページ共通のCTA（トップと同じデザイン） --- */
.cta{padding:clamp(56px,6vw,88px) 0;background:linear-gradient(115deg,#fff 0 64%,var(--wash) 64%)}
.cta-inner{
  width:var(--content);
  margin:auto;
  padding:clamp(28px,3.4vw,44px);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);
  gap:18px 40px;
  border:1px solid var(--navy);
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 70px rgba(7,27,60,.08);
}
.cta-inner::before,.cta-inner::after{content:"";position:absolute;width:58px;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:18px;top:18px}
.cta-inner::after{right:18px;bottom:18px;background:var(--orange);transform:rotate(180deg)}
.cta-label{grid-column:1/-1;position:relative;z-index:2;font-size:11px;font-weight:900;letter-spacing:.14em}
.cta-copy{position:relative;z-index:2;max-width:820px}
.cta-copy h2{margin:0;font-size:clamp(28px,2.9vw,44px);line-height:1.08;text-wrap:balance}
.cta-copy p{max-width:640px;margin:16px 0 0;color:var(--ink);font-size:15px}
.cta .contact-methods{
  align-self:center;
  margin:0;
  padding:0;
  list-style:none;
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}
.cta .contact-methods li{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(7,27,60,.22);
  border-radius:14px;
  background:#fff;
}
.cta .contact-methods svg{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cta .button{grid-column:1/-1;position:relative;z-index:2;width:100%;min-height:64px}
.cta .button.primary{color:#fff;background:var(--navy)}
.cta .button::before{display:none}
@media(max-width:1000px){
  .cta-inner{grid-template-columns:1fr}
  .cta .contact-methods{justify-content:flex-start}
}

/* --- 準備中ページ（APP / SERVICE） -------------------------- */
.coming-hero{min-height:0;padding:clamp(56px,7vw,104px) 0}
.coming-hero__inner{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(36px,5vw,80px);align-items:center}
.coming-app-icon,.service-coming-object{width:min(300px,100%)}
.coming-hero__inner>div:last-child>p:not(.page-kicker){margin:20px 0 0;max-width:620px;font-size:16px}
.coming-actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px}
.coming-actions .button{min-width:200px}
.coming-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:900;text-decoration:none}
/* 浮遊タグは見出しへ重なるので、内容の下に並べた一列へ変える。 */
.coming-orbit{
  position:static;
  inset:auto;
  width:var(--content);
  margin-top:clamp(26px,3vw,42px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.coming-orbit span{position:static;left:auto;right:auto;top:auto;bottom:auto;animation:none;background:#fff;font-size:9px}
@media(max-width:900px){
  .coming-hero__inner{grid-template-columns:1fr;gap:32px}
  .coming-app-icon,.service-coming-object{margin-inline:auto}
  .coming-actions .button{width:100%;min-width:0}
}

/* --- PACT JOURNAL（ブログ） --------------------------------- */
.journal-hero{
  min-height:0;
  padding:clamp(48px,5vw,80px) 0 clamp(28px,3vw,40px);
  display:block;
  border-bottom:1px solid var(--navy);
}
.journal-hero h1{margin:14px 0 0;max-width:16em}
.journal-hero__lead{max-width:640px;margin:18px 0 0;color:var(--ink);font-size:15px}
.journal-category-banner{
  position:relative;margin:clamp(26px,3vw,42px) 0 0;overflow:hidden;
  aspect-ratio:16/6;border-radius:clamp(18px,2vw,28px);background:var(--navy)}
.journal-category-banner img{width:100%;height:100%;object-fit:cover}
.journal-category-banner::after{
  content:"";position:absolute;inset:auto 0 0;height:48%;
  background:linear-gradient(180deg,transparent,rgba(7,27,60,.78));pointer-events:none}
.journal-category-banner figcaption{
  position:absolute;z-index:1;left:clamp(20px,3vw,42px);right:clamp(20px,3vw,42px);bottom:clamp(18px,2.4vw,34px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:#fff}
.journal-category-banner figcaption span{font-size:10px;font-weight:900;letter-spacing:.18em}
.journal-category-banner figcaption strong{font-size:clamp(20px,2.5vw,38px);line-height:1.1;letter-spacing:-.03em}

.journal-layout{
  padding:clamp(28px,3vw,44px) 0 clamp(72px,8vw,120px);
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  gap:clamp(28px,3.4vw,56px);
  align-items:start;
}
.journal-side{position:sticky;top:104px;display:grid;gap:26px}
body.admin-bar .journal-side{top:136px}
.journal-search{display:flex;gap:8px}
.journal-search input{
  width:100%;
  height:46px;
  padding:0 14px;
  border:1px solid var(--navy);
  border-radius:10px;
  background:#fff;
  font-size:13px;
}
.journal-search button{
  width:46px;
  height:46px;
  flex:0 0 auto;
  border:1px solid var(--navy);
  border-radius:10px;
  color:#fff;
  background:var(--navy);
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
.journal-facet__title{
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}
.journal-facet ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.journal-facet a{
  padding:7px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  transition:color .2s,padding .2s;
}
.journal-facet a:hover,.journal-facet a:focus-visible{color:var(--orange);padding-left:6px}
.journal-facet a[aria-current="true"]{color:var(--orange-text,#CC3A10)}
.journal-facet a small{color:var(--ink);font-size:10px;font-weight:900}
.journal-facet--tags ul{display:flex;flex-wrap:wrap;gap:7px}
.journal-facet--tags a{
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:99px;
  font-size:11px;
}
.journal-facet--tags a::before{content:"#";margin-right:3px;color:var(--orange)}
.journal-facet--tags a[aria-current="true"]{border-color:var(--orange);color:var(--orange-text,#CC3A10)}
.journal-order{display:flex;gap:8px}
.journal-order a{
  flex:1;
  padding:9px 0;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:11px;
  font-weight:900;
  text-align:center;
  text-decoration:none;
}
.journal-order a[aria-current="true"]{border-color:var(--navy);color:#fff;background:var(--navy)}

.journal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,28px);padding:0}
.journal-card{border:0}
.journal-card__link{
  height:100%;
  padding:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  text-decoration:none;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.journal-card__link:hover,.journal-card__link:focus-visible{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 22px 46px rgba(7,27,60,.1)}
.journal-card__visual{display:block;text-decoration:none}
.journal-card__visual{
  aspect-ratio:16/9;
  min-height:0;
  display:grid;
  place-items:center;
  border-radius:0;
  background:var(--navy);
  overflow:hidden;
  position:relative;
}
/* iPhone の Safari は、aspect-ratio の箱＋grid の中央寄せで img の height:100% を箱の高さに解決せず、
   画像が箱より低くなって上に紺の帯が出た（2026-10-08 本人の iPhone）。画像は箱に固定して敷き詰める。 */
.journal-card__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.journal-card__visual>span{color:var(--orange);font-size:52px;font-weight:900}
.journal-card__body{padding:20px 22px 24px;flex:1;gap:0}
.journal-card__meta{gap:12px;font-size:10px}
.journal-card__meta b{color:var(--orange-text,#CC3A10)}
.journal-card__body h2{margin:12px 0 10px;font-size:clamp(18px,1.6vw,23px);line-height:1.35}
.journal-card__title{color:inherit;text-decoration:none}
.journal-card__title:hover,.journal-card__title:focus-visible{color:var(--orange)}
.journal-card__body>div{font-size:13px;line-height:1.8}
.journal-card__body>div p{margin:0}
.journal-card__tags{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.journal-card__tags a{padding:3px 9px;border:1px solid var(--line);border-radius:99px;font-size:10px;font-weight:800;text-decoration:none}
.journal-card__tags a:hover,.journal-card__tags a:focus-visible{border-color:var(--orange);color:var(--orange)}
.journal-card__read{margin-top:18px;color:inherit;font-size:11px;font-weight:900;text-decoration:none}
.journal-card__read:hover,.journal-card__read:focus-visible{color:var(--orange)}
.journal-article-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.journal-article-tags a{padding:6px 11px;border:1px solid var(--line);border-radius:99px;font-size:11px;font-weight:800;text-decoration:none}
.journal-article-tags a:hover,.journal-article-tags a:focus-visible{border-color:var(--orange);color:var(--orange)}
.journal-pagination{grid-column:1/-1;padding-top:12px}
.journal-empty{grid-column:1/-1}

@media(max-width:1000px){
  .journal-layout{grid-template-columns:1fr}
  .journal-side{position:static;top:auto;grid-template-columns:1fr;gap:20px}
  .journal-facet ul{display:flex;flex-wrap:wrap;gap:7px}
  .journal-facet a{padding:7px 12px;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:99px;font-size:11px}
}
@media(max-width:680px){
  .journal-list{grid-template-columns:1fr}
  .journal-category-banner{aspect-ratio:4/3}
  .journal-category-banner figcaption{align-items:flex-start;flex-direction:column;gap:7px}
}

/* --- スマートフォン ------------------------------------------ */
@media(max-width:900px){
  .karte{grid-template-columns:1fr}
  .karte__items{grid-template-columns:1fr}
  .story-chapter{padding:44px 0}
}
@media(max-width:640px){
  .about-story-hero h1{font-size:clamp(34px,10vw,46px)}
  .story-opening h2,.story-turn h2,.about-mvv-story__intro h2{font-size:clamp(25px,7.2vw,34px)}
  .story-chapter h2{font-size:clamp(24px,7vw,32px)}
  .coming-hero h1{font-size:clamp(30px,8.4vw,40px)}
  .journal-hero h1{font-size:clamp(24px,7vw,34px)}
  .cta-inner{padding:26px 20px}
  .cta-inner::before{left:12px;top:12px}
  .cta-inner::after{right:12px;bottom:12px}
  .cta .contact-methods li{width:52px;height:52px}
  .about-story-hero__corner{width:clamp(64px,16vw,90px)}
  .about-story-hero__bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .story-scroll{display:none}
}

/* MVVはブロック編集で書き換えられるようにしてある。
   その場合 <article><span> ではなく <div class="wp-block-group"><p> で出力されるため、両方に効かせる。 */
.mvv-panel>p:first-child{margin:0;font-size:10px;font-weight:900;letter-spacing:.16em}
.mvv-panel--mission>p:first-child{color:var(--orange)}
.mvv-panel>h3{margin:auto 0 20px}
.mvv-stack.wp-block-group{display:grid;gap:24px}

/* ============================================================
   v8 — 2026-08-31 3回目のフィードバック
   ============================================================ */

/* PACT STORY の写真の大きさを揃える。
   逆順の章だけ写真が狭い列に入っていたので、列幅も一緒に入れ替える。 */
.story-chapter--reverse{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.story-media{align-self:center}
.story-media img{aspect-ratio:16/10;object-fit:cover}

/* 準備中ページ：見出しは1行。ボタンとタグを外したので下の余白も詰める。 */
.coming-hero h1{font-size:clamp(26px,3.5vw,52px);line-height:1.12;white-space:nowrap}
.coming-hero__inner>div:last-child>p:not(.page-kicker){margin-bottom:0}

/* PACT JOURNAL：一覧を3カラムへ。絞り込みの当たり判定と文字位置も揃える。 */
.journal-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.journal-card__body{padding:18px 20px 22px}
.journal-card__body h2{margin:10px 0 8px;font-size:clamp(17px,1.3vw,20px);line-height:1.4}
.journal-card__body>div{font-size:12.5px;line-height:1.75}
.journal-card__body>span{margin-top:16px}
.journal-search{align-items:stretch}
.journal-search button{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
.journal-search button svg{display:block}
.journal-order a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 8px}

@media(max-width:1240px){
  .journal-layout{grid-template-columns:210px minmax(0,1fr)}
  .journal-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .story-chapter--reverse{grid-template-columns:1fr}
}
@media(max-width:680px){
  .journal-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .coming-hero h1{white-space:normal}
}

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

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

/* 注意書きは左の線をやめ、角丸の面で見せる。 */
.legal-copy .legal-note{
  padding:20px 22px;
  border:1px solid rgba(255,76,33,.3);
  border-radius:14px;
  background:var(--wash);
  font-size:14px;
  line-height:1.95;
}

/* 制作カルテ：オレンジ地に濃紺だと読みにくいので、白地へ。角形でオレンジを残す。 */
.karte__core{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.karte__core span{background:var(--orange)}
.karte__core strong{color:var(--navy)}
.karte__core p{color:var(--ink)}

/* MVV：幅を狭めたときの余りを詰める。 */
.mvv-stack{margin-top:clamp(28px,3.6vw,52px)}
.mvv-panel{min-height:0;padding:clamp(24px,3.2vw,44px);justify-content:flex-start;gap:12px}
.mvv-panel h3{margin:0}
.mvv-panel p{margin:0}
@media(max-width:900px){
  .mvv-panel,.mvv-panel:nth-child(2),.mvv-panel:nth-child(3){position:static;top:auto}
}

/* 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}

/* お問い合わせ：見出しを短く小さく。送信前後の案内をはっきり出す。 */
.page-hero h1{font-size:clamp(30px,3.6vw,54px);line-height:1.1}
.form-aside{top:104px}
.form-aside h2{font-size:clamp(24px,2.6vw,38px);line-height:1.2}
.form-notice{
  margin:0 0 24px;
  padding:16px 18px;
  border:1px solid rgba(7,27,60,.18);
  border-radius:12px;
  background:var(--warm);
  font-size:13px;
  line-height:1.85;
}
.form-notice b{display:block;margin-bottom:4px;font-size:14px}
.form-notice p{margin:0;color:var(--ink)}
.form-notice a{color:var(--orange);font-weight:800}
.form-notice--error{border-color:rgba(255,76,33,.45);background:var(--wash)}

/* PACT BLOG */
.journal-hero{padding-bottom:clamp(22px,2.4vw,32px)}
.journal-hero h1{margin:0;font-size:clamp(32px,4vw,56px);line-height:1.1;letter-spacing:-.02em}
.journal-hero__lead{margin-top:14px}
.journal-search input:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.journal-card__body>span{margin-top:auto;padding-top:16px}

/* 幅ごとの並び。狭い画面ではサイドメニューを一覧の上へ回す。 */
@media(max-width:1240px){
  .journal-layout{grid-template-columns:200px minmax(0,1fr)}
  .journal-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
  .journal-layout{grid-template-columns:1fr;gap:24px}
  .journal-side{position:static;top:auto;display:grid;gap:18px}
  .journal-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .journal-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cta-inner::before{left:12px;top:12px}
  .cta-inner::after{right:12px;bottom:12px}
  .cta-label{padding-left:40px}
  .journal-hero h1{font-size:clamp(28px,8vw,36px)}
}
@media(max-width:1000px){
  .journal-order{max-width:340px}
  .journal-search{max-width:520px}
}

/* ============================================================
   v10 — 2026-08-31 5回目のフィードバック
   ============================================================ */

/* 「本文へ移動」のスキップリンクがトップ以外で素のまま出ていた。
   キーボード操作のための導線なので消さず、フォーカスされたときだけ見せる。 */
.skip-link{
  position:fixed;
  left:16px;
  top:-80px;
  z-index:100;
  padding:10px 16px;
  border-radius:8px;
  color:#fff;
  background:var(--navy);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{top:16px}
/* 親テーマも「コンテンツへスキップ」を出す。自前の「本文へ移動」があるページ（404）では、行き先の無い親テーマの1本を隠す。 */
body:has(> .skip-link:not(.screen-reader-text)) > .skip-link.screen-reader-text{display:none}
.form-notice--success{border-color:rgba(0,163,70,.45);background:#f1f9f3}
.form-notice--success b{color:#0a7a38}

/* ============================================================
   サポート内容一覧（/service/）
   ブログ一覧と同じ見た目を使い、画像が無いときは英字を置く。
   ============================================================ */
.service-card__visual{background:var(--navy);padding:18px}
.service-card__en{
  color:var(--orange);
  font-size:clamp(16px,1.6vw,22px);
  font-weight:900;
  letter-spacing:.06em;
  text-align:center;
  line-height:1.3;
}
.service-list .journal-card__meta b{color:var(--orange-text,#CC3A10);letter-spacing:.08em}
.service-list .journal-card__body h2{margin-top:6px}

/* PACT MEMBER */
.team-page{background:#f7f5f0}.team-shell{width:min(1240px,calc(100vw - 48px));margin:auto}.team-hero{padding:clamp(80px,11vw,150px) 0 72px;background:#fff;border-bottom:1px solid var(--line)}.team-hero h1{margin:8px 0 24px;font-size:clamp(58px,10vw,144px);line-height:.82;letter-spacing:-.075em}.team-hero h1 span{display:block;color:var(--orange)}.team-hero>div>p:last-child{max-width:620px;margin:0 0 0 auto;font-size:clamp(15px,1.4vw,19px);line-height:1.9}.team-roster,.team-relations,.team-profiles{padding:clamp(72px,9vw,130px) 0}.team-section-head{display:grid;grid-template-columns:180px 1fr;gap:28px;margin-bottom:48px}.team-section-head>p{font-size:11px;font-weight:900;letter-spacing:.16em}.team-section-head h2{margin:0;font-size:clamp(38px,5vw,72px);line-height:1.05;letter-spacing:-.05em}.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.team-card{text-decoration:none}.team-card__photo{position:relative;display:grid;place-items:center;aspect-ratio:3/4;overflow:hidden;background:#e7e3dc;border:1px solid rgba(7,27,60,.13)}.team-card__photo span{font-size:11px;letter-spacing:.15em}.team-card__photo b{position:absolute;inset:auto 8px 0;color:transparent;-webkit-text-stroke:1px rgba(7,27,60,.35);font-size:clamp(42px,5vw,72px);line-height:.8;transition:.35s}.team-card p{margin:18px 0 2px;color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.13em}.team-card h3{margin:0;font-size:clamp(28px,3vw,42px)}.team-card strong{display:block;margin-top:9px;font-size:13px;line-height:1.65}.team-card:hover .team-card__photo{background:var(--navy);color:#fff}.team-card:hover .team-card__photo b{color:var(--orange);-webkit-text-stroke:0;transform:translateY(-8px)}.team-relations{color:#fff;background:var(--navy)}.relation-map{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.25)}.relation-node{padding:30px;background:var(--navy)}.relation-node--lead{grid-column:1/-1;background:var(--orange)}.relation-node--guide{background:#fff;color:var(--navy)}.relation-node b,.relation-node span{display:block}.relation-node b{font-size:clamp(26px,3vw,42px)}.relation-node span{font-size:12px;letter-spacing:.08em}.relation-copy{grid-column:1/-1;margin:0;padding:32px;background:#0c2752;font-size:16px;line-height:2}.team-profiles{background:#fff}.team-profile{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:52px 0;border-top:1px solid var(--navy)}.team-profile>span{color:var(--orange);font-size:44px;font-weight:900}.team-profile>div{max-width:760px}.team-profile h2{margin:0;font-size:clamp(42px,6vw,82px);line-height:1}.team-profile h3{margin:30px 0 6px;font-size:12px;letter-spacing:.12em}.team-profile a{display:inline-block;margin-top:24px;font-weight:900;text-decoration-color:var(--orange);text-underline-offset:6px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}.team-section-head{grid-template-columns:1fr}.relation-map{grid-template-columns:1fr 1fr}.relation-node--lead,.relation-copy{grid-column:1/-1}}
@media(max-width:560px){.team-shell{width:min(100% - 32px,1240px)}.team-grid{grid-template-columns:1fr 1fr;gap:12px}.team-card__photo b{font-size:34px}.team-card h3{font-size:25px}.team-card strong{font-size:11px}.relation-map{grid-template-columns:1fr}.relation-node--lead,.relation-copy{grid-column:auto}.team-profile{grid-template-columns:1fr;gap:8px}.team-profile>span{font-size:22px}}

/* TEAM v2: 一覧はカード4枚だけに絞り、詳細をインタビューページへ分ける。 */
.team-card__photo>img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .55s var(--ease),filter .35s}.team-card__photo--pact>img,.team-card__photo--lily>img,.team-card__photo--poppy>img{object-position:100% 50%}.team-card__photo--pp8>img{object-position:10% 65%}.team-card__photo b{-webkit-text-stroke-color:rgba(255,255,255,.72)}.team-card__more{display:block;margin-top:16px;padding-top:12px;border-top:1px solid rgba(7,27,60,.18);font-size:10px;font-weight:900;letter-spacing:.14em}.team-card:hover .team-card__photo>img{transform:scale(1.035);filter:saturate(1.05)}
.team-member-hero{padding:clamp(56px,8vw,110px) 0;background:#fff}.team-member-hero__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);gap:clamp(36px,6vw,84px);align-items:center}.team-member-hero__copy h1{margin:10px 0 22px;font-size:clamp(64px,9vw,132px);line-height:.85;letter-spacing:-.07em}.team-member-hero__copy>p:last-child{max-width:560px;font-size:17px;line-height:1.9}.team-member-visual{margin:0;aspect-ratio:4/3;overflow:hidden;background:#e7e3dc}.team-member-visual img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}.team-member-visual--pp8 img{object-position:8% 65%}.team-interview{padding:clamp(72px,9vw,130px) 0;background:#f7f5f0}.team-interview__intro{display:grid;grid-template-columns:180px 1fr;gap:32px;margin-bottom:56px}.team-interview__intro>p:first-child,.team-facts h3{color:var(--orange);font-size:11px;font-weight:900;letter-spacing:.14em}.team-interview__intro h2{max-width:850px;margin:0;font-size:clamp(34px,4.8vw,68px);line-height:1.12;letter-spacing:-.045em}.team-qa{max-width:900px;margin-left:auto}.team-qa article{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:34px 0;border-top:1px solid var(--navy)}.team-qa h3{margin:0;font-size:15px;line-height:1.65}.team-qa p{margin:0;font-size:16px;line-height:2}.team-quote{margin:64px 0;padding:clamp(28px,4vw,56px);color:#fff;background:var(--navy);font-size:clamp(28px,4vw,54px);font-weight:900;line-height:1.25}.team-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--navy)}.team-facts article{padding:30px;background:#fff}.team-facts p{margin:8px 0 0;line-height:1.9}.team-back{display:inline-block;margin-bottom:22px;font-size:11px;font-weight:900;letter-spacing:.12em;text-decoration:none}
@media(max-width:900px){.team-member-hero__grid{grid-template-columns:1fr}.team-member-visual{order:-1}.team-interview__intro{grid-template-columns:1fr}.team-qa article{grid-template-columns:1fr;gap:10px}}
@media(max-width:560px){.team-card__more{font-size:9px}.team-facts{grid-template-columns:1fr}.team-member-hero__copy h1{font-size:58px}}

/* TEAM v3: 通常は証明写真風、hover/focus時はキャラクターシート全体へ切り替える。 */
.team-card__photo>img.team-card__portrait,.team-card__photo>img.team-card__editorial{position:absolute;inset:0;width:100%;height:100%;transition:opacity .45s var(--ease),transform .6s var(--ease),filter .35s}
.team-card__photo>img.team-card__portrait{z-index:1;object-fit:cover;object-position:center;filter:saturate(.9)}
.team-card__photo>img.team-card__editorial{z-index:2;object-fit:cover;object-position:center;background:#f4f1eb;opacity:0;transform:scale(1.02);filter:saturate(1)}
.team-card__photo b{z-index:3}
@media(hover:hover){.team-card:hover .team-card__portrait{opacity:0;transform:scale(1.05)}.team-card:hover .team-card__editorial{opacity:1;transform:none}}
.team-card:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.team-card:focus-visible .team-card__portrait{opacity:0}.team-card:focus-visible .team-card__editorial{opacity:1;transform:none}

/* 会話のリズムで読ませる、採用ブログ風のインタビュー記事。 */
.team-member-visual img{object-position:center top}
.team-member-visual--pp8 img{object-position:center top}
.team-member-visual--study{aspect-ratio:16/9;background:#fff}
.team-member-visual--study img{object-fit:contain;object-position:center}
.team-member-name--pp8{letter-spacing:0}
.team-member-name__hyphen{display:inline-block;margin:0 .1em}
.team-hero>div>p:last-child{margin:0;max-width:620px}
.team-section-head{grid-template-columns:1fr;gap:10px}
.team-ai-note{margin:22px 0 0;text-align:right;color:rgba(7,27,60,.62);font-size:10px;line-height:1.7;letter-spacing:.04em}
.team-card__photo>img.team-card__portrait{transition:none;filter:none;visibility:visible}
.team-card__photo>img.team-card__editorial{transition:none;filter:none;visibility:hidden}
@media(hover:hover){.team-card:hover .team-card__portrait{opacity:0;visibility:hidden;transform:none}.team-card:hover .team-card__editorial{opacity:1;visibility:visible;transform:none}}
.team-card:focus-visible .team-card__portrait{opacity:0;visibility:hidden;transform:none}.team-card:focus-visible .team-card__editorial{opacity:1;visibility:visible;transform:none}
.team-card{display:grid;grid-template-rows:auto 48px 52px 84px auto;align-content:start}
.team-card p{display:flex;align-items:flex-start;min-height:48px;margin:18px 0 0}
.team-card h3{align-self:start;margin:0;line-height:1.1}
.team-card strong{min-height:84px;margin-top:0;padding-top:9px}
.team-card__more{align-self:end;margin-top:0}
@media(max-width:720px){.team-card{grid-template-rows:auto 56px 42px 112px auto}}

/* TEAM film: 見出しの下に、4名の紹介動画（assets/team/team-film.html）を横いっぱいに置く。
   動画は枠の縦横比で横型・縦型を切り替えるので、720px以下は 4:5 にして文字を読める大きさに保つ。 */
.team-film{position:relative;margin-top:clamp(36px,5vw,64px);aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.team-film iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.team-film__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.team-film__button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:9px;color:#fff;background:var(--navy);font-size:15px;font-weight:900;text-decoration:none}
.team-film__button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(hover:hover){.team-film__button:hover{background:#0d2a58}}
.team-film__cta span{font-size:13px;line-height:1.7}
@media(max-width:720px){.team-film{aspect-ratio:4/5}}
.interview-article{max-width:1000px}.interview-article__head{max-width:850px;margin:0 0 clamp(64px,9vw,110px)}
.interview-article__head>p:first-child{margin:0 0 18px;color:var(--orange-text,#CC3A10);font-size:11px;font-weight:900;letter-spacing:.16em}
.interview-article__head h2{margin:0;font-size:clamp(40px,6vw,76px);line-height:1.12;letter-spacing:-.05em}
.interview-article__head>p:last-child{max-width:620px;margin:26px 0 0;font-size:17px;line-height:1.9}
.interview-chapter{padding:clamp(44px,6vw,72px) 0;border-top:1px solid var(--navy)}
.interview-chapter>h3{margin:0 0 40px;font-size:clamp(24px,3vw,38px);letter-spacing:-.025em}
.interview-dialogue{display:grid;gap:30px}
.interview-turn{display:grid;grid-template-columns:74px minmax(0,1fr);gap:20px;align-items:start;max-width:800px}
.interview-turn--member{grid-template-columns:minmax(0,1fr) 74px;margin-left:auto}
.interview-turn--member>img{grid-column:2;grid-row:1}
.interview-turn--member>div{grid-column:1;grid-row:1}
.interview-turn>img{width:74px;height:74px;object-fit:cover;object-position:center;border-radius:50%;background:#fff;border:1px solid rgba(7,27,60,.18)}
.interview-turn:not(:has(>img))::before{content:"Q";display:grid;place-items:center;width:74px;height:74px;border-radius:50%;color:#fff;background:var(--orange);font-size:18px;font-weight:900}
.interview-turn--member:not(:has(>img))::before{content:"A";background:var(--navy)}
.interview-turn--pp8>img{object-position:center}
.interview-turn>div{padding:22px 26px;background:#fff;color:var(--navy);border:1px solid rgba(7,27,60,.08);border-radius:0 22px 22px 22px;box-shadow:0 10px 30px rgba(7,27,60,.045)}
.interview-turn--member>div{background:#e8f1f8;color:var(--navy);border-color:#d3e2ef;border-radius:22px 0 22px 22px}
.interview-turn b{display:block;margin-bottom:8px;color:var(--orange-text,#CC3A10);font-size:11px;letter-spacing:.13em}
.interview-turn p{margin:0;font-size:16px;line-height:2;text-wrap:pretty}
.interview-dialogue--continuous{gap:22px}.interview-dialogue--continuous .interview-turn:nth-child(4n+1){margin-top:30px}
@media(max-width:600px){.team-section-head h2{font-size:42px}.interview-article__head h2 br{display:none}.interview-turn{grid-template-columns:52px minmax(0,1fr);gap:12px}.interview-turn--member{grid-template-columns:minmax(0,1fr) 52px}.interview-turn>img{width:52px;height:52px}.interview-turn:not(:has(>img))::before{width:52px;height:52px}.interview-turn>div{padding:18px}.interview-turn p{font-size:15px;line-height:1.85}}

/* 制作詳細のアイキャッチ画像。既定の図版と同じ位置・同じ大きさに収める。 */
.creative-photo{
  margin:0;
  border-radius:20px;
  overflow:hidden;
  background:var(--navy);
  box-shadow:0 28px 70px rgba(7,27,60,.18);
}
.creative-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* 連絡手段カードは説明文を外したので、高さを詰めて中央へ揃える。 */
.contact-options--compact .channel{min-height:66px}
.channel span:last-child{display:flex;align-items:center}

/* サポート内容一覧の見出し下の罫線は不要。 */
.pact-hybrid-services .journal-hero{border-bottom:0;padding-bottom:0}

/* 分類の絞り込みボタン。カードとくっついて見えないよう、下に余白を取る。 */
.pact-hybrid-services .service-tags{margin:26px 0 44px}
.pact-hybrid-services .service-tags a{padding:9px 16px}
@media(max-width:800px){.pact-hybrid-services .service-tags{margin:20px 0 30px}}

/* PACTカーソル（2026-09-02）
   トップだけに入っていたものを下層ページへも広げた。
   要素は pages.js が作るので、テンプレート側に markup を足す必要はない。
   矢印は消さない。PACTの角形を矢印の右下へ添える印として出す。 */
.pact-cursor{display:none}
html.has-pact-cursor,
html.has-pact-cursor .page-section{cursor:auto}
html.has-pact-cursor a,
html.has-pact-cursor button,
html.has-pact-cursor summary{cursor:pointer}
html.has-pact-cursor input,
html.has-pact-cursor textarea,
html.has-pact-cursor select{cursor:auto}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pact-cursor{
    --cursor-x:-100px;--cursor-y:-100px;
    position:fixed;z-index:9999;left:0;top:0;width:34px;height:34px;
    display:block;pointer-events:none;
    transform:translate3d(calc(var(--cursor-x) + 5px),calc(var(--cursor-y) + 5px),0);
  }
  .pact-cursor__ring{
    position:absolute;inset:0;border:1px solid rgba(7,27,60,.55);border-radius:50%;
    transition:transform .25s var(--ease),background .25s,border-color .25s;
  }
  .pact-cursor__mark{
    position:absolute;left:9px;top:9px;width:16px;aspect-ratio:1;background:var(--orange);
    -webkit-mask:var(--corner) center / contain no-repeat;
    mask:var(--corner) 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:#fff;transform:rotate(180deg) scale(.8)}
}

/* アイキャッチ画像とテーマ同梱画像で見え方を揃える（2026-09-02）
   WordPress の the_post_thumbnail() は width / height を属性で出力する。
   CSS側で height を指定しないと属性の height が使われ、aspect-ratio が無視されて
   縦長になる。テーマ同梱の <img> は属性を持たないので、同じCSSでも結果が違っていた。
   差し替えても見え方が変わらないよう、対象の画像は必ず height を明示する。 */
.creative-photo img,
.journal-card__visual img,
.journal-article-cover img,
.story-media img{max-width:100%}

.pact-journal-article .pact-cta-section{margin-top:100px}

/* 見出しの中でオレンジにする語。トップのインラインCSSにも同じ規則がある。
   これが無いと、下層ページのCTA見出しだけ紺のままになる。 */
.pact-word{display:inline;color:var(--orange)}

/* ─────────────────────────────────────────────
   Final CTA — つくりたいものが、曖昧でも大丈夫です。
   トップ・About・サポート詳細12件で共有する部品。
   🔴 この規則は index.html のインライン <style> と assets/pages.css の2か所にある。
      直すときは必ず両方を同じ内容にすること（片方だけ直すと下層だけ古い見た目になる）。
   ───────────────────────────────────────────── */
/* 🔴 /service/ とブログ記事ではCTAが本文幅の中（.pact-journal）にあり、背景が途中で切れていた（2026-09-11）。
   影で背景を左右へ伸ばし、clip-path で上下にははみ出させない。横スクロールは生まれない。 */
.pact-cta-section{position:relative;overflow:hidden;padding:clamp(72px,9vw,132px) 0 0;background:var(--warm,#f7f5f0);
  box-shadow:0 0 0 100vmax var(--warm,#f7f5f0);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,#353b43);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,#353b43);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:1000px){
}
@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}
}

/* ─────────────────────────────────────────────
   About — Codexの完成イメージ（2026-09-09）に合わせた見た目。
   参照: work/design-refs/2026-09-09-gpt/about/about-desktop-concept.png
   ───────────────────────────────────────────── */
/* 3事業の VIEW MORE。位置は動かさず、線と色だけ動かす。
   地は紺（.story-sequence）なので文字は白。紺のままだと地に溶けて見えない（2026-09-30 修正）。 */
.story-chapter__more{margin:22px 0 0}
.story-chapter__more a{position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:6px 0;color:#fff;font-size:11px;font-weight:900;letter-spacing:.16em;text-decoration:none}
.story-chapter__more a::after{content:"";width:34px;height:1px;background:currentColor;transition:width .28s var(--ease)}
.story-chapter__more a:focus-visible{color:var(--orange,#FF4C21)}
@media (hover:hover){.story-chapter__more a:hover{color:var(--orange,#FF4C21)}.story-chapter__more a:hover::after{width:52px}}
.story-chapter__more a:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* 3事業の行は「コンパクト」に。完成イメージでは1行あたり画面の1/3ほどしかない。
   2026-09-09: 1行829px・画像675×684（ほぼ正方形）と大きすぎたので詰めた。
   写真は元データと同じ横4:3で、切り取らずに出す。 */
@media (min-width:901px){
  .story-chapter{min-height:0;padding:clamp(40px,3.8vw,64px) 0;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,72px);align-items:center}
  .story-chapter--reverse{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .story-chapter h2{font-size:clamp(26px,2.5vw,40px);line-height:1.12}
  .story-chapter__copy>p:last-child{margin-top:18px}
  .story-media{align-self:center;justify-self:end;width:min(100%,520px);min-height:0;border-radius:14px}
  .story-chapter--reverse .story-media{justify-self:start}
  .story-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
}
@media (max-width:900px){
  .story-chapter{padding:clamp(34px,6vw,52px) 0}
  .story-media img{aspect-ratio:4/3;height:auto}
}

/* ─────────────────────────────────────────────
   サポート詳細の「進め方」— 完成イメージ（2026-09-09）どおりの3列。
   参照: work/design-refs/2026-09-09-gpt/service-detail/
   [説明] | 線 | [説明] | Output  の4列で、説明は左右交互に置く。
   🔴 4列固定・横スクロールに戻さないこと。1112px前後で4工程目が切れていた。
   🔴 意味のある ol / li のまま。JavaScriptが動かなくても4工程すべて読める。
   写真の枠は今回は入れていない（12ページ分＝48枚が無いため）。
   入れるときは .flow__step にもう1列足して、左右交互の空き側へ置く。
   ───────────────────────────────────────────── */
.flow{position:relative;margin:clamp(34px,4vw,56px) 0 0;padding:0;list-style:none;display:grid;gap:0}
.flow__step{position:relative;display:grid;gap:clamp(12px,1.4vw,20px);padding:clamp(18px,2vw,26px) 0}
.flow__head{margin:0 0 8px;display:flex;align-items:baseline;gap:14px}
.flow__no{font-size:clamp(30px,3.4vw,46px);font-weight:400;line-height:1;letter-spacing:.02em;color:rgba(7,27,60,.34)}
.flow__name{font-size:clamp(19px,1.9vw,26px);font-weight:900;letter-spacing:-.02em}
.flow__text{margin:0;color:var(--ink,#353b43);font-size:clamp(14px,1.15vw,16px);line-height:1.8}
.flow__out{display:grid;gap:4px;align-content:start;padding-top:6px;border-top:2px solid var(--navy)}
.flow__out small{font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text,#CC3A10)}
.flow__out b{font-size:clamp(13px,1.15vw,16px);font-weight:900;letter-spacing:.04em}
.flow__out span{color:var(--ink,#353b43);font-size:12px;line-height:1.65}
.flow__dot{display:none}

@media (min-width:901px){
  /* 線は左から1/3あたり。説明が左右へ振れても、線と点の位置は動かさない。 */
  .flow::before{content:"";position:absolute;left:calc((100% - 190px) * .42);top:18px;bottom:18px;width:1px;background:var(--line)}
  .flow__step{grid-template-columns:minmax(0,.42fr) 0 minmax(0,.58fr) minmax(150px,190px);
    column-gap:clamp(20px,2.4vw,40px);align-items:center}
  .flow__dot{display:block;position:absolute;left:calc((100% - 190px) * .42);top:50%;
    width:13px;height:13px;margin:-7px 0 0 -6px;border:2px solid var(--navy);border-radius:50%;background:#fff}
  .flow__step:first-child .flow__dot{background:var(--orange);border-color:var(--orange)}
  .flow__body{grid-column:3;padding-left:clamp(18px,2vw,30px)}
  .flow__step:nth-child(even) .flow__body{grid-column:1;grid-row:1;text-align:right;
    padding-left:0;padding-right:clamp(18px,2vw,30px)}
  .flow__step:nth-child(even) .flow__head{justify-content:flex-end}
  .flow__out{grid-column:4;grid-row:1}
  /* 写真は説明の反対側へ。線を挟んで写真と説明が向かい合う。 */
  .flow__media{grid-column:1;grid-row:1;padding-right:clamp(18px,2vw,30px)}
  .flow__step:nth-child(even) .flow__media{grid-column:3;padding-right:0;padding-left:clamp(18px,2vw,30px)}
}

@media (max-width:900px){
  /* 一本の縦線に沿って1列。順番がそのまま読める並びにする。 */
  .flow{padding-left:26px}
  .flow::before{content:"";position:absolute;left:6px;top:20px;bottom:20px;width:1px;background:var(--line)}
  .flow__dot{display:block;position:absolute;left:0;top:calc(clamp(18px,2vw,26px) + 12px);
    width:13px;height:13px;border:2px solid var(--navy);border-radius:50%;background:#fff}
  .flow__step:first-child .flow__dot{background:var(--orange);border-color:var(--orange)}
  .flow__step+.flow__step{border-top:1px solid var(--line)}
  .flow__out{margin-top:4px}
}

@media (prefers-reduced-motion:reduce){
  .flow__step{transition:none}
}

/* ─────────────────────────────────────────────
   サポート内容の一覧 /service/
   🔴 カードは 1280px以上=3列 / 768〜1279px=2列 / 767px以下=1列。
      4列固定に戻すと1112px前後で右端が切れる（2026-09-09の指摘）。
   ───────────────────────────────────────────── */
.service-purpose{margin:0 0 clamp(26px,3vw,40px);padding:clamp(18px,2vw,26px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-purpose__title{margin:0 0 14px;font-size:10.5px;font-weight:900;letter-spacing:.16em}
.service-purpose__list{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.service-purpose__list a{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 16px;
  border:1px solid var(--navy);border-radius:12px;color:var(--navy);
  font-size:13.5px;font-weight:800;line-height:1.5;text-decoration:none;
  transition:color .2s var(--ease),background-color .2s var(--ease)}
.service-purpose__list a::after{margin-left:auto;content:"→";font-size:14px}
.service-purpose__list a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (hover:hover){
  .service-purpose__list a:hover{color:#fff;background:var(--navy)}
}

.service-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,30px);padding-bottom:clamp(70px,8vw,110px)}
.service-grid .journal-card{border-top:0}
.service-grid .journal-card__link{grid-template-columns:1fr;gap:0;height:100%;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;padding:0;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.service-grid .journal-card__link:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (hover:hover){
  .service-grid .journal-card__link:hover{border-color:var(--navy);box-shadow:0 18px 40px rgba(7,27,60,.10)}
}
.service-grid .journal-card__visual{position:relative;min-height:0;aspect-ratio:4/3;border-radius:0}
.service-grid .journal-card__visual img{width:100%;height:100%;object-fit:cover}
.service-grid .journal-card__body{padding:clamp(18px,1.8vw,24px);gap:0}
.service-grid .journal-card__body h2{margin:12px 0 10px;font-size:clamp(19px,1.7vw,24px);line-height:1.35}
.service-grid .journal-card__body>div{font-size:14px;line-height:1.85}
.service-grid .journal-card__body>span{margin-top:16px;font-size:10.5px;letter-spacing:.12em}

@media (min-width:768px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 価格案内。図解は「まとめる → 工程を整理 → ヒアリング → 見積もり」の一本に絞る。 */
.price-guide{background:#faf9f5;color:var(--navy);border-top:1px solid #e5e1d8;border-bottom:1px solid #e5e1d8}
.price-guide__inner{max-width:1240px;margin:0 auto;padding:clamp(64px,8vw,112px) clamp(20px,4vw,40px)}
.price-guide__header{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(34px,7vw,100px);align-items:end}
.price-guide__eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:0 0 -10px;font-size:10.5px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.price-guide__eyebrow::before{content:"";width:34px;height:3px;background:var(--orange);flex:none}
/* 🔴 左カラムは全体の.9fr（約45%）。4.2vwだと4行に割れる（2026-09-10の指摘）。
   2行で収まる大きさに抑える。上げ直すときは1440pxで行数を数えること。 */
.price-guide__header h2{margin:0;font-size:clamp(26px,2.6vw,38px);font-weight:900;line-height:1.24;letter-spacing:-.045em;text-wrap:balance}
.price-guide__header>p:last-child{margin:0;color:var(--ink);font-size:clamp(15px,1.25vw,18px);line-height:2}

.price-guide__flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:clamp(42px,6vw,76px) 0 0;padding:0;list-style:none}
.price-guide__flow li{position:relative;min-height:174px;padding:24px 22px;border:1px solid #d9e0e8;border-radius:18px;background:#fff;box-shadow:0 12px 28px rgba(7,27,60,.055)}
.price-guide__flow li:not(:last-child)::after{content:"→";position:absolute;z-index:2;right:-25px;top:50%;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#faf9f5;color:var(--orange);font-size:22px;font-weight:900;transform:translateY(-50%)}
.price-guide__flow li>span{display:block;margin:0 0 22px;color:var(--orange-text,#cc3a10);font-size:11px;font-weight:900;letter-spacing:.16em}
.price-guide__flow b{display:block;font-size:clamp(18px,1.6vw,22px);line-height:1.45}
.price-guide__flow small{display:block;margin-top:10px;color:var(--ink);font-size:13px;line-height:1.7}
.price-guide__flow .is-result{border-color:rgba(255,76,33,.38);background:#fff8f4}

.price-guide__chart{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,54px);align-items:end;margin-top:24px;padding:clamp(26px,4vw,48px);border:1px solid #e1ddd3;border-radius:22px;background:#f3f1eb}
.price-guide__chart-copy>p{margin:0;color:#667085;font-size:10px;font-weight:900;letter-spacing:.16em}
/* 🔴 2行（点数が増えるほど、／割引率が上がります。）に収める。語の途中で折らず、はみ出すときだけ折る（2026-09-11）。 */
.price-guide__chart-copy h3{margin:16px 0 22px;font-size:clamp(21px,2.4vw,34px);line-height:1.35;letter-spacing:-.035em;
  word-break:keep-all;overflow-wrap:anywhere}
.price-guide__chart-copy strong{display:inline-flex;padding:10px 15px;border:1px solid rgba(7,27,60,.2);border-radius:999px;font-size:14px}
.price-guide__bars{height:270px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:8px;margin:0;padding:0 0 0 12px;border-left:1px solid #aeb8c5;border-bottom:1px solid #aeb8c5;list-style:none}
.price-guide__bars li{height:100%;display:flex;min-width:0;flex-direction:column;justify-content:flex-end;text-align:center}
.price-guide__bar{height:calc(38px + var(--level) * 11px);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:12px 3px 8px;border-radius:8px 8px 0 0;border:1px solid rgba(255,76,33,.42);border-bottom:0;background:linear-gradient(180deg,rgba(255,76,33,.22),rgba(255,76,33,.06));color:var(--navy)}
.price-guide__bar b{font-size:clamp(16px,1.7vw,27px);line-height:1;letter-spacing:-.04em}
.price-guide__bar small{margin-top:5px;color:var(--orange-text,#cc3a10);font-size:9px;font-weight:900;letter-spacing:.08em}
.price-guide__bars li>strong{padding:10px 0 7px;font-size:12px}
.price-guide__bars li:last-child .price-guide__bar{border-color:#d8390f;background:#d8390f;color:#fff;box-shadow:0 0 0 4px rgba(255,76,33,.12)}
.price-guide__bars li:last-child .price-guide__bar small{color:#fff}

.price-guide__repeat{margin-top:24px;padding:22px 26px;border-left:4px solid var(--orange);background:#fff}
.price-guide__repeat p{display:grid;grid-template-columns:minmax(210px,.42fr) minmax(0,1fr);gap:20px;margin:0}
.price-guide__repeat b{font-size:16px}
.price-guide__repeat span{color:var(--ink);font-size:14px;line-height:1.8}
.price-guide__note{margin:18px 0 0;color:#69717c;font-size:12.5px;line-height:1.8}

/* 最低価格ベースのシミュレーター。白い選択面と紺の結果カードで視線を分ける。 */
.pricing-simulator{background:#fff}
.pricing-simulator__inner{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.pricing-simulator__header{max-width:780px}
/* 🔴 既定の .section-heading（最大70px）だと3行に割れる（2026-09-10の指摘）。 */
.pricing-simulator__header .section-heading{font-size:clamp(26px,2.9vw,42px);line-height:1.22;letter-spacing:-.045em}
.pricing-simulator__header .section-lead{max-width:690px}
.pricing-simulator__layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(30px,5vw,70px);align-items:start;margin-top:44px}
.pricing-simulator fieldset{min-width:0;margin:0;padding:0;border:0}
.pricing-simulator legend{margin:0 0 16px;padding:0;font-size:15px;font-weight:900}
.pricing-simulator__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* 🔴 内側の余白はカードではなく label に持たせる。カードに持たせると、
   余白の部分を押しても反応しない（2026-09-10の指摘「カード全体が反応するように」）。 */
.pricing-choice{display:flex;align-items:center;justify-content:space-between;gap:0;min-width:0;padding:0;border:1px solid #dfe3e8;border-radius:12px;background:#fff;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.pricing-choice.is-selected{border-color:var(--navy);background:#f2f6fb;box-shadow:inset 4px 0 0 var(--orange)}
/* 🔴 カードのどこを押しても反応させる（2026-09-10の指摘）。
   label をカード全体へ広げ、指の目安44pxを満たす高さにする。 */
.pricing-choice>label:first-child{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer;
  flex:1 1 auto;min-height:44px;padding:15px 16px;border-radius:12px}
.pricing-choice input[type="checkbox"]{width:19px;height:19px;flex:none;accent-color:var(--orange)}
.pricing-choice>label span{display:block;min-width:0}
.pricing-choice>label b{display:block;font-size:14px;line-height:1.45}
.pricing-choice>label small{display:block;margin-top:3px;color:#667085;font-size:11.5px}
.pricing-choice__quantity{display:flex!important;align-items:center!important;gap:5px!important;flex:none;padding:15px 16px 15px 0;font-size:11px}
/* 🔴 枠の中の上下ボタンは使わないので消す（2026-09-10の指摘）。
   初期値も入れない。空のまま打てるようにして、計算側が既定値へ落とす。 */
.pricing-choice__quantity input,.pricing-history input{-webkit-appearance:none;-moz-appearance:textfield;appearance:textfield}
.pricing-choice__quantity input::-webkit-outer-spin-button,
.pricing-choice__quantity input::-webkit-inner-spin-button,
.pricing-history input::-webkit-outer-spin-button,
.pricing-history input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pricing-choice__quantity input{width:58px;min-height:44px;padding:7px 8px;border:1px solid #b8c1cc;border-radius:7px;background:#fff;text-align:center;font:inherit}
.pricing-choice__quantity input:disabled{opacity:.45}
.pricing-choice__quantity small{margin:0!important}
.pricing-history{display:grid;grid-template-columns:minmax(0,1fr) 90px 18px;gap:12px;align-items:center;margin-top:18px;padding:18px;border:1px solid #dfe3e8;border-radius:12px;background:#faf9f5}
.pricing-history span,.pricing-history b,.pricing-history small{display:block}
.pricing-history b{font-size:14px}
.pricing-history small{margin-top:4px;color:#667085;font-size:11.5px;line-height:1.5}
.pricing-history input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #b8c1cc;border-radius:8px;background:#fff;text-align:center;font:inherit;font-weight:800}
.pricing-history i{font-style:normal;font-size:12px}

.pricing-result{position:sticky;top:24px;padding:clamp(24px,3vw,36px);border-radius:20px;background:var(--navy);color:#fff;box-shadow:0 24px 50px rgba(7,27,60,.16)}
.pricing-result [hidden]{display:none!important}
.pricing-result__eyebrow{margin:0 0 20px;color:rgba(255,255,255,.58);font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.pricing-result__empty{margin:0 0 24px;color:rgba(255,255,255,.72);font-size:14px;line-height:1.8}
.pricing-result__comparison{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.pricing-result__comparison>div{padding:13px;border:1px solid rgba(255,255,255,.2);border-radius:10px}
.pricing-result dt{font-size:11px;color:rgba(255,255,255,.66)}
.pricing-result dd{margin:6px 0 0;font-weight:900}
.pricing-result__comparison dd{font-size:19px;color:var(--orange)}
.pricing-result__applied{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin:12px 0 22px;padding:15px;border-radius:10px;background:rgba(255,255,255,.08)}
.pricing-result__applied span{font-size:13px;font-weight:800}
.pricing-result__applied b{font-size:23px;color:var(--orange)}
.pricing-result__applied small{grid-column:1/-1;color:rgba(255,255,255,.58);font-size:10.5px}
.pricing-result__totals{margin:0}
.pricing-result__totals>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.pricing-result__totals dd{font-size:15px}
.pricing-result__totals .is-total{margin-top:5px;padding-top:18px;border-bottom:0}
.pricing-result__totals .is-total dt{color:#fff;font-size:13px;font-weight:800}
.pricing-result__totals .is-total dd{font-size:clamp(24px,2.7vw,36px);color:var(--orange);letter-spacing:-.04em}
.pricing-result__quote{margin:0 0 22px;color:#fff;font-size:14px;line-height:1.8}
.pricing-result__cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding:15px 17px;border-radius:9px;background:#fff;color:var(--navy);font-size:13px;font-weight:900;text-decoration:none}
.pricing-result__cta span:last-child{color:var(--orange);font-size:18px}
.pricing-result__note{margin:15px 0 0;color:rgba(255,255,255,.58);font-size:10.5px;line-height:1.7}

@media (hover:hover){
  .pricing-choice:hover{border-color:#96a4b5}
  .pricing-result__cta:hover{background:#fff4ef}
}
@media (max-width:900px){
  .price-guide__header{grid-template-columns:1fr}
  .price-guide__eyebrow{grid-column:auto;margin-bottom:0}
  .price-guide__flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 🔴 2列だと 02 は右上、03 は左下へ折り返す。右向きの矢印は行けないが、
     消すと流れが切れて見える（2026-09-10の指摘）。下向きにして残す。 */
  .price-guide__flow li:nth-child(2)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-25px;
    transform:translateX(-50%)}
  .price-guide__chart{grid-template-columns:1fr}
  .pricing-simulator__layout{grid-template-columns:1fr}
  .pricing-result{position:relative;top:auto}
}
@media (max-width:640px){
  .price-guide__flow{grid-template-columns:1fr;gap:12px}
  .price-guide__flow li{min-height:0;padding:19px 20px}
  .price-guide__flow li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-23px;transform:translateX(-50%)}
  .price-guide__flow li:nth-child(2)::after{display:grid}
  .price-guide__flow li>span{margin-bottom:10px}
  .price-guide__chart{padding:22px 16px}
  .price-guide__bars{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;border:0}
  .price-guide__bars li:nth-child(even){display:none}
  .price-guide__bars li{height:auto;display:block}
  .price-guide__bar{height:auto;min-height:74px;justify-content:center;border:1px solid #ead5cc!important;border-radius:10px!important;background:#fff!important;color:var(--navy)!important}
  .price-guide__bars li:last-child .price-guide__bar{background:#fff4ef!important;box-shadow:none}
  .price-guide__bar small,.price-guide__bars li:last-child .price-guide__bar small{color:var(--orange-text,#cc3a10)}
  .price-guide__repeat p{grid-template-columns:1fr;gap:8px}
  .pricing-simulator__choices{grid-template-columns:1fr}
  .pricing-history{grid-template-columns:minmax(0,1fr) 72px 16px}
}

/* 詳細ページ：価格のすぐ下に置く、まとめ割への一行。 */
.service-meta__set{margin:10px 0 0;font-size:12.5px;line-height:1.7}
/* 🔴 詳細ページのヒーローは紺地。オレンジの小さい文字（#CC3A10）は比3.4で読みにくく、
   ホバーで紺にすると背景に溶けて消えていた（2026-09-10の指摘）。白系の文字にオレンジの下線。
   ホバーは色だけ変え、消えないようにする。 */
.service-meta__set a{color:rgba(255,255,255,.92);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--orange);text-decoration-thickness:1px;text-underline-offset:4px;
  transition:color .2s ease,text-decoration-color .2s ease}
@media (hover:hover){.service-meta__set a:hover{color:#fff;text-decoration-color:#fff}}
.service-meta__set a:focus-visible{color:#fff;text-decoration-color:#fff;outline:2px solid #fff;outline-offset:3px}

/* サポート内容の価格・納期。
   🔴 空のときは行ごと、両方空なら枠ごと出さない（JS / PHP 側で判定）。
   数字は未決定なので、代わりの文字（「未定」「要お問い合わせ」）も出さない。 */
.service-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line)}
.service-meta__row{display:flex;align-items:baseline;gap:10px;margin:0}
/* 🔴 hidden より display:flex のほうが後に来るので、そのままだと空でも枠が出る。
   詳細度を上げて打ち消す（2026-09-09に実際に出た）。 */
.service-meta[hidden],.service-meta__row[hidden]{display:none}
.service-meta dt{margin:0;font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.service-meta dd{margin:0;font-size:clamp(16px,1.5vw,20px);font-weight:900;letter-spacing:-.02em}

/* ─────────────────────────────────────────────
   サポート詳細：ヒーローの下を横に流れる写真の帯（2026-09-10）
   写真の上半分を紺地、下半分を白地に掛けて、ヒーローとAboutをつなぐ。
   常に動く要素。写真に乗ると停止する。停止ボタンは置かない（2026-09-10）、動きを減らす設定でも止めない（2026-09-11）。いずれも本人判断。
   🔴 帯は translateX(-50%) で1周する。2つの並びの幅を必ず同じにする（右端の余白も gap と同じ12px）。
   2026-09-10 本人の指示で小さくした（高さ 180〜280px → 140〜200px）。
   ホバー停止は帯（__track）に掛ける。 */
.svc-reel{--reel-h:clamp(140px,14vw,200px);position:relative;overflow:hidden;padding:0 0 4px;
  background:linear-gradient(to bottom,var(--navy) calc(var(--reel-h) / 2),#fff 0)}
.svc-reel[hidden]{display:none}
.creative-hero:has(+ .svc-reel){padding-bottom:clamp(44px,5vw,72px)}
.svc-reel__track{display:flex;width:max-content;animation:svc-reel var(--reel-duration,40s) linear infinite}
.svc-reel__list{display:flex;gap:12px;margin:0;padding:0 12px 0 0;list-style:none}
.svc-reel__list li{flex:none}
.svc-reel__list img{display:block;width:auto;height:var(--reel-h);border-radius:12px;background:var(--warm);
  outline:1px solid rgba(7,27,60,.1);outline-offset:-1px}
@keyframes svc-reel{to{transform:translateX(-50%)}}
@media (hover:hover){.svc-reel__track:hover{animation-play-state:paused}}
.svc-reel + .page-section{padding-top:clamp(56px,7vw,96px)}
/* 🔴 「動きを減らす」設定の端末でも止めない（2026-09-11 本人の指示「スマホで動いていない」）。
   全体の打ち消し（* に animation-duration:.01ms!important）より詳細度を上げて、同じ速さで流し続ける。 */
@media (prefers-reduced-motion:reduce){
  .svc-reel__track{animation-duration:var(--reel-duration,40s)!important;animation-iteration-count:infinite!important}
}

/* 一覧カードの価格。本文の下、リンクの上。 */
.service-card__price{display:block;margin:10px 0 0;font-size:14px;font-weight:900;letter-spacing:-.01em}
.service-card__price span{margin-left:8px;font-size:11.5px;font-weight:500;color:var(--ink,#353b43)}

/* ─────────────────────────────────────────────
   サポート詳細の「こんなタイミングに」/「PACT VALUE」
   完成イメージ（2026-09-09）どおり、左は生成り・右は紺。写真はカードの下辺まで届かせる。
   写真の上の「制作イメージ」の但し書きは、2026-09-09に本人の指示で全部外した。
   写真が無いサービスでは枠ごと外れる（JS / PHP 側で判定）。

   🔴 カードを .detail-intro の右列（.85fr）へ入れないこと。
      2枚を約190px幅へ押し込むことになり、日本語が1文字ずつ折り返して読めなくなる。
      本文の下に、幅いっぱいで2枚並べる。
   ───────────────────────────────────────────── */
.detail-intro{display:block}
/* 🔴 max-width を親に掛けると、本文だけ幅が足りずカードと境目がずれる（2026-09-09）。
   見出しだけ狭くして、本文はカードと同じ幅いっぱいにする。 */
.detail-intro__title h2{max-width:1000px}
.detail-copy{margin-top:22px}
.detail-cards{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);
  margin-top:clamp(34px,4vw,56px)}
.detail-card{display:grid;grid-template-rows:auto 1fr;gap:0;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;background:var(--warm,#f7f5f0)}
.detail-card__body{padding:clamp(18px,1.8vw,26px)}
.detail-card small{display:block;margin:0 0 14px;font-size:9.5px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-text,#CC3A10)}
.detail-card h3{margin:0;font-size:clamp(19px,1.9vw,26px);font-weight:900;line-height:1.26;letter-spacing:-.035em}
.detail-card p{margin:12px 0 0;font-size:clamp(13.5px,1.05vw,14.5px);line-height:1.8;color:var(--ink,#353b43)}
/* 🔴 既存の .detail-card:nth-child(2) が水色の背景を持っている。
   詳細度で勝つ必要があるので、.detail-card--value 単体では負ける。 */
.detail-cards .detail-card--value{border-color:var(--navy);background:var(--navy);color:#fff}
.detail-cards .detail-card--value small{color:#fff}
.detail-cards .detail-card--value h3{color:#fff}
.detail-cards .detail-card--value p{color:rgba(255,255,255,.82)}
/* 🔴 3/2 だとカードが縦に伸びすぎる（本人指示 2026-09-09）。16/9 に詰めてある。 */
.detail-card__media{position:relative;margin:0;align-self:end;aspect-ratio:16/9;overflow:hidden}
.detail-card__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:768px){
  .detail-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 🔴 本文の2段は、下のカード2枚と同じ列・同じ間隔にする。
     columns だと段間が別の値になり、画面幅によって文字とカードの境目がずれる。
     本文はどのサービスも2段落なので、グリッドで1段落ずつ入れれば必ず揃う。
     切り替え幅もカードと同じ768pxにそろえる（901pxだと途中で食い違う）。 */
  .detail-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 clamp(16px,2vw,24px);align-items:start}
  .detail-copy p{margin:0}
}

/* 工程の写真。無いサービスでは要素ごと出ないので、空きスペースは生まれない。 */
.flow__media{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:12px;background:#ece9e2}
.flow__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .flow__media{margin:0 0 14px}
}

/* ============================================================================
   /ai/ ── PACT SERVICE｜AIコンサルティング
   正本: work/codex-preview/assets/pages.css の末尾に追記する

   設計の下敷き：Apple Human Interface Guidelines（2026-09 時点）
   https://developer.apple.com/design/human-interface-guidelines

   HIGから採ったもの
   - Materials：操作層（ヘッダー・ボタン）は Liquid Glass 相当の半透明面で内容の上に浮かせ、
     内容層には使わない。内容層は「標準マテリアル」＝不透明の面で構造を作る
   - Typography：書体は1系統。本文は iOS の既定 17pt 相当。細いウェイト（Light以下）を使わない。
     太さ・大きさ・色で階層を作る
   - Layout：8ptグリッド。関連する項目は余白・面・区切り線でまとめる。
     重要なものを上と行頭に置く。段階的開示で初期表示を減らす
   - Color：指定どおり白い下地を維持し、高コントラスト設定でも成立させる。
     色だけに意味を持たせない（○×は形でも区別する）
   - Accessibility：タップ領域は44pt以上。透過・動きを減らす設定に追従する

   PACTのブランド色（ネイビー #071B3C ／ オレンジ #FF4C21）は、HIGでいう
   「カスタムのティント」として残す。構造はHIG、色はPACT。

   🔴 このページ専用。他ページに影響させないため、すべて [data-page="ai"] で囲う。
   ============================================================================ */

body[data-page="ai"]{
  /* --- 8ptグリッド ------------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px;
  --section-y:clamp(64px,8vw,120px);
  --gutter:max(20px, env(safe-area-inset-left));
  --measure:34em;            /* 本文1行の上限。長すぎると目が戻れない */

  /* --- 角丸。iOSの連続角に寄せて大きめに取る ------------------------------ */
  --r-card:22px;  --r-inner:16px;  --r-pill:999px;

  /* --- 文字。1系統だけ。日本語はヒラギノ/Noto、英数字はSF ----------------- */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro JP","SF Pro Text","Hiragino Sans",
    "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium",YuGothic,system-ui,sans-serif;

  /* HIGのテキストスタイルに対応させた段階。Dynamic Type の代わりに
     ブラウザの文字サイズ設定へ追従できるよう rem を混ぜる */
  --t-large:clamp(38px,6.2vw,76px);   /* Large Title */
  --t-title1:clamp(27px,3.4vw,42px);
  --t-title2:clamp(21px,2.2vw,27px);
  --t-title3:19px;
  --t-headline:17px;                   /* Headline（太字の見出し） */
  --t-body:17px;                       /* Body。iOSの既定サイズ */
  --t-callout:16px;
  --t-sub:15px;
  --t-foot:13px;
  --t-caption:12px;

  /* --- 色（明るい文脈） ---------------------------------------------------
     ラベルの不透明度はHIGの primary/secondary/tertiary の考え方に合わせた */
  --bg:#FFFFFF;
  --bg-grouped:#F4F3F0;        /* 内容層の地。PACTの warm を少し冷やした値 */
  --surface:#FFFFFF;           /* 標準マテリアル（不透明の面） */
  --label:#071B3C;
  --label-2:rgba(7,27,60,.66);
  --label-3:rgba(7,27,60,.42);
  --separator:rgba(7,27,60,.14);
  --separator-opaque:#E3E2DF;
  --fill:rgba(7,27,60,.05);
  --tint:#FF4C21;              /* PACTのオレンジ。ブランドのティント */
  --tint-ink:#071B3C;          /* オレンジの面に乗せる文字 */
  --tint-soft:rgba(255,76,33,.12);
  --shadow-1:0 1px 2px rgba(7,27,60,.05),0 8px 24px rgba(7,27,60,.06);
  --shadow-2:0 2px 6px rgba(7,27,60,.07),0 22px 60px rgba(7,27,60,.11);

  /* --- Liquid Glass 相当（操作層だけに使う） ------------------------------ */
  --glass-bg:rgba(255,255,255,.72);
  --glass-edge:rgba(255,255,255,.55);
  --glass-blur:saturate(180%) blur(22px);

  color:var(--label);
  background:var(--bg);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* body に overflow-x:hidden を付けない。html も hidden なので body が別のスクロール枠になり、
     sticky のヘッダーが効かなくなり、iPhone では横にずれる（2026-10-08）。横の安全網は html と .page-main */
  width:100%;max-width:100%;
}
[data-page="ai"] .page-main{width:100%;max-width:100%;overflow-x:clip}

/* 共通CTAだけは他ページと同じ欧文書体に戻し、輪郭文字の形を統一する。 */
[data-page="ai"] .pact-cta-section{font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}

/* --- 高コントラスト設定。差をはっきり付ける ------------------------------- */
@media (prefers-contrast:more){
  [data-page="ai"]{
    --label-2:var(--label);
    --label-3:var(--label);
    --separator:rgba(7,27,60,.5);
    --tint-soft:rgba(255,76,33,.3);
    --glass-bg:var(--bg);
  }
}

/* --- 透過・動きを減らす設定に追従する ------------------------------------- */
@media (prefers-reduced-transparency:reduce){
  [data-page="ai"]{--glass-bg:var(--bg);--glass-blur:none}
}
@media (prefers-reduced-motion:reduce){
  [data-page="ai"] *{animation:none!important;transition:none!important}
  body[data-page="ai"]>.page-footer .footer-rail{animation:rail 34s linear infinite!important}
}

/* ============================================================================
   共通の部品
   ========================================================================= */
[data-page="ai"] .ai-wrap{
  width:min(1120px,100% - var(--gutter)*2);max-width:100%;min-width:0;margin-inline:auto}

/* 面（標準マテリアル）。内容層はここで構造を作る */
[data-page="ai"] .ai-card{
  background:var(--surface);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
  border:1px solid transparent}
@media (prefers-contrast:more){
  [data-page="ai"] .ai-card{border-color:var(--separator)}
}

/* iOSのグループ化リスト。関連する項目を1枚の面にまとめ、区切り線で分ける */
[data-page="ai"] .ai-list{
  list-style:none;margin:0;padding:0;
  background:var(--surface);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);overflow:hidden}
[data-page="ai"] .ai-list>li{
  padding:var(--sp-5) var(--sp-6);
  border-top:1px solid var(--separator)}
[data-page="ai"] .ai-list>li:first-child{border-top:0}

/* ボタン。カプセル。タップ領域は44pt以上 */
[data-page="ai"] .ai-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:52px;padding:0 var(--sp-8);border-radius:var(--r-pill);
  font-size:var(--t-headline);font-weight:600;letter-spacing:0;
  text-decoration:none;border:1px solid transparent;
  transition:transform .2s ease,opacity .2s ease,background-color .2s ease}
[data-page="ai"] .ai-btn:hover{transform:translateY(-1px)}
[data-page="ai"] .ai-btn:active{transform:none;opacity:.85}
[data-page="ai"] .ai-btn:focus-visible{outline:3px solid var(--tint);outline-offset:3px}
[data-page="ai"] .ai-btn--filled{background:var(--label);color:var(--bg)}
[data-page="ai"] .ai-btn--tinted{background:var(--tint-soft);color:var(--label)}
[data-page="ai"] .ai-btn--plain{background:transparent;color:var(--label);
  border-color:var(--separator)}
[data-page="ai"] .ai-btn--block{display:flex;width:100%}
[data-page="ai"] .ai-plan .ai-btn--tinted{
  position:relative;overflow:hidden;flex-wrap:nowrap;white-space:nowrap;
  transition:transform .24s ease,background-color .24s ease,
  color .24s ease,box-shadow .24s ease}
[data-page="ai"] .ai-plan .ai-btn--tinted::after{
  content:"↗";margin-left:var(--sp-3);font-size:.9em;transition:transform .24s ease}
@media (hover:hover){
  [data-page="ai"] .ai-plan .ai-btn--tinted:hover{
    transform:translateY(-3px);background:var(--tint);color:#fff;
    box-shadow:0 12px 28px rgba(255,76,33,.24)}
  [data-page="ai"] .ai-plan .ai-btn--tinted:hover::after{transform:translate(3px,-3px)}
}

/* 見出しの組。HIGのテキストスタイルをそのまま当てる */
[data-page="ai"] .ai-head{max-width:min(900px,100%);margin-bottom:var(--sp-12)}
[data-page="ai"] .ai-head .section-label{
  margin:0 0 var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--t-foot);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--label-2)}
[data-page="ai"] .ai-head .section-label::before{
  content:"";width:18px;height:3px;border-radius:2px;background:var(--tint)}
[data-page="ai"] .ai-head h2{
  margin:0;font-size:var(--t-title1);font-weight:700;line-height:1.35;
  letter-spacing:-.02em;color:var(--label)}
[data-page="ai"] .ai-head p{
  margin:var(--sp-4) 0 0;font-size:var(--t-body);color:var(--label-2)}
[data-page="ai"] .ai-foot{
  margin:var(--sp-10) 0 0;padding-top:var(--sp-5);
  border-top:1px solid var(--separator);
  font-size:var(--t-foot);color:var(--label-2);max-width:var(--measure)}

[data-page="ai"] .page-section{padding:var(--section-y) 0;background:var(--bg)}
[data-page="ai"] .page-section--warm{background:var(--bg-grouped)}
[data-page="ai"] .page-section--navy{background:var(--bg-grouped)}
[data-page="ai"] .page-section__inner{
  width:min(1120px,100% - var(--gutter)*2);margin-inline:auto}

/* ============================================================================
   ヒーロー
   ── 内容層はやわらかいブランドのグラデーション。その上に Liquid Glass の
      カードを1枚だけ浮かせる（HIG：豊かな背景の上にだけ透明度の高い面を置く）
   ========================================================================= */
[data-page="ai"] .ai-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(88px,12vw,168px) 0 clamp(48px,6vw,88px);background:var(--bg)}
/* 左右は画面の外へ出さない。ぼかし（filter）付きの層は iPhone の Safari で親の overflow に切られず、横にずれる原因になる */
[data-page="ai"] .ai-hero__rule{
  position:absolute;inset:-30% 0 auto 0;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 18% 18%,rgba(255,76,33,.20),transparent 68%),
    radial-gradient(55% 60% at 82% 8%,rgba(7,27,60,.16),transparent 66%),
    radial-gradient(70% 50% at 50% 92%,rgba(255,76,33,.08),transparent 70%);
  filter:blur(6px)}
[data-page="ai"] .ai-hero__mark{display:none}  /* 装飾は削る（内容を前に） */
[data-page="ai"] .ai-hero__inner{
  position:relative;z-index:1;width:min(1120px,100% - var(--gutter)*2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);gap:clamp(32px,6vw,80px);align-items:center}
[data-page="ai"] .ai-hero__copy{min-width:0}
[data-page="ai"] .ai-hero__visual{
  position:relative;margin:0;min-height:480px;overflow:hidden;border-radius:clamp(28px,4vw,52px);
  background:var(--surface);box-shadow:var(--shadow-2);isolation:isolate}
[data-page="ai"] .ai-hero__visual::after{
  display:none}
[data-page="ai"] .ai-hero__visual img{
  width:100%;height:100%;min-height:480px;display:block;object-fit:cover;object-position:center}
[data-page="ai"] .ai-hero__visual figcaption{
  position:absolute;z-index:1;left:0;right:0;bottom:0;margin:0;
  padding:var(--sp-4) var(--sp-6);background:rgba(7,27,60,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:var(--t-foot);font-weight:600;line-height:1.55}
[data-page="ai"] .ai-hero .page-kicker{
  margin:0 0 var(--sp-5);display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);
  font-size:var(--t-caption);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--label)}
[data-page="ai"] .ai-hero .page-kicker::before{display:none}
[data-page="ai"] .ai-hero h1{
  margin:0;max-width:16em;font-size:clamp(44px,5vw,58px);font-weight:700;
  line-height:1.16;letter-spacing:-.035em;color:var(--label)}
[data-page="ai"] .ai-hero h1 em{display:block;font-style:normal;color:var(--tint);white-space:nowrap}
[data-page="ai"] .ai-hero__lead{
  margin:var(--sp-6) 0 0;max-width:var(--measure);
  font-size:clamp(17px,1.5vw,20px);font-weight:400;color:var(--label-2)}
[data-page="ai"] .ai-hero__actions{
  margin:var(--sp-10) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
[data-page="ai"] .ai-hero__note{
  margin:var(--sp-5) 0 0;max-width:var(--measure);
  font-size:var(--t-foot);color:var(--label-3)}

/* 写真は同じ比率のファイルへ差し替えられる。文言や構造に依存させない。 */
[data-page="ai"] .ai-approach-visual{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  min-height:360px;margin:0 0 var(--sp-12);overflow:hidden;border-radius:var(--r-card);
  background:var(--surface);box-shadow:var(--shadow-1)}
[data-page="ai"] .ai-approach-visual img{
  width:100%;height:100%;min-height:360px;display:block;object-fit:cover}
[data-page="ai"] .ai-approach-visual figcaption{
  display:flex;flex-direction:column;justify-content:center;padding:var(--sp-8);
  background:var(--label);color:var(--bg)}
[data-page="ai"] .ai-approach-visual strong{
  font-size:var(--t-title2);line-height:1.45;color:inherit}
[data-page="ai"] .ai-approach-visual span{
  margin-top:var(--sp-4);font-size:var(--t-sub);line-height:1.8;color:inherit;opacity:.82}

/* 5段。ガラスのカード1枚に、区切り線で並べる */
[data-page="ai"] .ai-stage{
  position:relative;z-index:1;margin:clamp(40px,5vw,72px) auto 0;
  width:min(1120px,100% - var(--gutter)*2);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-radius:var(--r-card);overflow:hidden;
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:var(--shadow-2)}
[data-page="ai"] .ai-stage__item{
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-6);border-left:1px solid var(--separator)}
[data-page="ai"] .ai-stage__item:first-child{border-left:0}
[data-page="ai"] .ai-stage__bar{display:none}   /* 棒グラフはやめる */
[data-page="ai"] .ai-stage__no{
  font-size:var(--t-caption);font-weight:600;letter-spacing:.1em;color:var(--label-2)}
[data-page="ai"] .ai-stage__state{
  font-size:var(--t-title3);font-weight:700;line-height:1.45;
  letter-spacing:-.01em;color:var(--label)}
[data-page="ai"] .ai-stage__plan{
  width:100%;margin-top:var(--sp-2);
  font-size:var(--t-caption);font-weight:600;letter-spacing:.08em;color:var(--label-3)}
[data-page="ai"] .ai-stage__price{
  font-size:var(--t-callout);font-weight:600;color:var(--label);
  font-variant-numeric:tabular-nums}

/* ============================================================================
   お悩み・失うもの・強み・情報の取り扱い ── すべて同じ「グループ化した面」に統一
   （HIG：書体と同じで、面の種類も増やさないほうが階層が読める）
   ========================================================================= */
[data-page="ai"] .ai-voices,
[data-page="ai"] .ai-loss,
[data-page="ai"] .ai-strength,
[data-page="ai"] .ai-rules{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin:0}
[data-page="ai"] .ai-voice,
[data-page="ai"] .ai-loss__item,
[data-page="ai"] .ai-strength__item,
[data-page="ai"] .ai-rules__item{
  padding:var(--sp-8) var(--sp-8);
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-1);
  border:1px solid transparent}
@media (prefers-contrast:more){
  [data-page="ai"] .ai-voice,[data-page="ai"] .ai-loss__item,
  [data-page="ai"] .ai-strength__item,[data-page="ai"] .ai-rules__item{
    border-color:var(--separator)}
}
[data-page="ai"] .ai-voice__quote{
  margin:0;font-size:var(--t-title3);font-weight:600;line-height:1.7;
  letter-spacing:-.01em;color:var(--label)}
[data-page="ai"] .ai-voice__cause{
  margin:var(--sp-4) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--separator);
  font-size:var(--t-sub);font-weight:500;color:var(--label-2)}
[data-page="ai"] .ai-voice__cause::before{
  content:"";display:inline-block;width:14px;height:2px;border-radius:2px;
  margin:0 var(--sp-2) 4px 0;background:var(--tint)}

/* 課題はひと目で比較できる４つのアイコン付きカラムにする。 */
[data-page="ai"] .ai-voices{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--separator)}
[data-page="ai"] .ai-voice{padding:var(--sp-8) var(--sp-5);border:0;border-right:1px solid var(--separator);border-radius:0;background:transparent;box-shadow:none}
[data-page="ai"] .ai-voice:last-child{border-right:0}
[data-page="ai"] .ai-voice__icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto var(--sp-6);border-radius:50%;background:var(--surface);color:var(--tint);font-size:38px;line-height:1}
[data-page="ai"] .ai-voice__quote{text-align:center;font-size:clamp(16px,1.5vw,21px);line-height:1.5}
[data-page="ai"] .ai-voice__cause{margin-top:var(--sp-4);padding-top:0;border:0;text-align:center;font-size:var(--t-foot)}
[data-page="ai"] .ai-voice__cause::before{display:none}
@media(max-width:900px){[data-page="ai"] .ai-voices{grid-template-columns:repeat(2,minmax(0,1fr))}[data-page="ai"] .ai-voice:nth-child(2){border-right:0}[data-page="ai"] .ai-voice:nth-child(n+3){border-top:1px solid var(--separator)}}
@media(max-width:600px){[data-page="ai"] .ai-voices{grid-template-columns:1fr}[data-page="ai"] .ai-voice{border-right:0;border-top:1px solid var(--separator)}[data-page="ai"] .ai-voice:first-child{border-top:0}}

[data-page="ai"] .ai-loss__tag{
  display:inline-block;margin:0 0 var(--sp-4);padding:5px var(--sp-3);
  border-radius:var(--r-pill);background:var(--tint-soft);
  font-size:var(--t-caption);font-weight:600;color:var(--label)}
[data-page="ai"] .ai-loss__name{
  margin:0 0 var(--sp-3);font-size:var(--t-title3);font-weight:700;
  line-height:1.5;color:var(--label)}
[data-page="ai"] .ai-loss__text,
[data-page="ai"] .ai-strength__text,
[data-page="ai"] .ai-rules__text,
[data-page="ai"] .ai-process__text{
  margin:0;font-size:var(--t-sub);color:var(--label-2);line-height:1.8}

[data-page="ai"] .ai-strength__no,
[data-page="ai"] .ai-rules__no{
  margin:0 0 var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--t-foot);font-weight:600;letter-spacing:.1em;color:var(--label-2)}
[data-page="ai"] .ai-strength__no::before,
[data-page="ai"] .ai-rules__no::before{
  content:"";width:16px;height:3px;border-radius:2px;background:var(--tint)}
[data-page="ai"] .ai-strength__name,
[data-page="ai"] .ai-rules__name{
  margin:0 0 var(--sp-3);font-size:var(--t-headline);font-weight:700;
  line-height:1.5;color:var(--label)}

/* ビフォー／アフター */
[data-page="ai"] .ai-shift{
  display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-5);align-items:stretch}
[data-page="ai"] .ai-shift__col{
  padding:var(--sp-8);border-radius:var(--r-card);background:var(--surface);
  box-shadow:var(--shadow-1);border:1px solid transparent}
[data-page="ai"] .ai-shift__col--before{background:var(--fill);box-shadow:none}
[data-page="ai"] .ai-shift__col--after{box-shadow:var(--shadow-2)}
[data-page="ai"] .ai-shift__title{
  margin:0 0 var(--sp-5);font-size:var(--t-headline);font-weight:700;color:var(--label)}
[data-page="ai"] .ai-shift__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-4)}
[data-page="ai"] .ai-shift__list li{
  position:relative;padding-left:30px;font-size:var(--t-sub);
  color:var(--label-2);line-height:1.75}
[data-page="ai"] .ai-shift__list li::before{
  position:absolute;left:0;top:.55em;content:"";width:16px;height:16px;border-radius:50%}
[data-page="ai"] .ai-shift__col--before li::before{
  background:none;border:1.5px solid var(--label-3)}
[data-page="ai"] .ai-shift__col--after li::before{background:var(--tint)}
[data-page="ai"] .ai-shift__col--after li{color:var(--label)}
[data-page="ai"] .ai-shift__arrow{
  align-self:center;justify-self:center;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--fill);color:var(--label-2);font-size:18px;font-weight:600}

/* 5工程 */
[data-page="ai"] .ai-process{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-5)}
[data-page="ai"] .ai-process__step{padding-top:var(--sp-5);border-top:2px solid var(--separator)}
[data-page="ai"] .ai-process__no{
  margin:0 0 var(--sp-3);font-size:var(--t-caption);font-weight:600;
  letter-spacing:.1em;color:var(--label-3)}
[data-page="ai"] .ai-process__name{
  margin:0 0 var(--sp-3);font-size:var(--t-headline);font-weight:700;color:var(--label)}
[data-page="ai"] .ai-results{
  margin:var(--sp-10) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:var(--sp-2)}
[data-page="ai"] .ai-results li{
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
  background:var(--fill);font-size:var(--t-sub);font-weight:600;color:var(--label)}

/* 「AIに直接聞けばよいのでは？」 */
[data-page="ai"] .ai-compare{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);overflow:hidden;font-size:var(--t-sub)}
[data-page="ai"] .ai-compare caption{
  caption-side:top;text-align:left;padding:0 0 var(--sp-5);
  font-size:var(--t-body);color:var(--label-2);max-width:var(--measure)}
[data-page="ai"] .ai-compare th,
[data-page="ai"] .ai-compare td{
  padding:var(--sp-5) var(--sp-5);text-align:left;vertical-align:top;
  border-top:1px solid var(--separator)}
[data-page="ai"] .ai-compare thead th{
  border-top:0;background:var(--fill);font-size:var(--t-caption);font-weight:600;
  letter-spacing:.06em;color:var(--label-2)}
[data-page="ai"] .ai-compare tbody th{width:12%;font-weight:700;color:var(--label)}
[data-page="ai"] .ai-compare td:nth-child(2){width:30%;color:var(--label-3)}
[data-page="ai"] .ai-compare td:nth-child(3){width:36%;color:var(--label);font-weight:500}
[data-page="ai"] .ai-compare td:nth-child(4){width:22%;color:var(--label-2);font-size:var(--t-foot)}

/* ============================================================================
   料金
   ========================================================================= */
[data-page="ai"] .ai-plans{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
[data-page="ai"] .ai-plans--main{
  margin-top:var(--sp-4);grid-template-columns:repeat(3,minmax(0,1fr))}
[data-page="ai"] .ai-plan{
  display:grid;grid-template-rows:auto auto auto 1fr auto;
  background:var(--surface);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);border:1px solid transparent;overflow:hidden}
[data-page="ai"] .ai-plan--accent{box-shadow:var(--shadow-2)}
[data-page="ai"] .ai-plan__bar{display:none}
[data-page="ai"] .ai-plan__body{
  grid-row:1 / -1;grid-template-rows:subgrid;display:grid;row-gap:0;
  padding:var(--sp-8)}
[data-page="ai"] .ai-plan__head{
  display:flex;align-items:baseline;gap:var(--sp-3);min-height:32px}
[data-page="ai"] .ai-plan__no{
  font-size:var(--t-caption);font-weight:600;letter-spacing:.1em;color:var(--label-3)}
[data-page="ai"] .ai-plan__name{
  font-size:var(--t-title2);font-weight:700;letter-spacing:-.01em;color:var(--label)}
[data-page="ai"] .ai-plan__price{
  display:grid;align-content:start;gap:var(--sp-2);
  margin:0;padding:var(--sp-4) 0 var(--sp-6)}
[data-page="ai"] .ai-plan__amount{
  font-size:clamp(30px,3vw,40px);font-weight:700;line-height:1;letter-spacing:-.03em;
  color:var(--label);font-variant-numeric:tabular-nums}
[data-page="ai"] .ai-plan__unit{
  display:block;min-height:1.8em;font-size:var(--t-foot);font-weight:500;color:var(--label-2)}
[data-page="ai"] .ai-plans--main .ai-plan__price{min-height:104px}
[data-page="ai"] .ai-plans--main .ai-plan__unit{display:block}
[data-page="ai"] .ai-plan__state{
  margin:0;padding:var(--sp-5) 0;border-top:1px solid var(--separator);
  border-bottom:1px solid var(--separator);
  font-size:var(--t-headline);font-weight:600;line-height:1.65;color:var(--label)}
[data-page="ai"] .ai-plan__state small{
  display:block;width:fit-content;margin-bottom:var(--sp-3);
  padding:4px var(--sp-3);border-radius:var(--r-pill);background:var(--tint-soft);
  font-size:var(--t-caption);font-weight:600;letter-spacing:.04em;color:var(--label)}
[data-page="ai"] .ai-plan__detail{
  margin:0;padding:var(--sp-5) 0 var(--sp-8);
  font-size:var(--t-sub);line-height:1.85;color:var(--label-2)}
[data-page="ai"] .ai-plan__detail b{color:var(--label);font-weight:600}
[data-page="ai"] .ai-plan__extra{
  grid-column:1 / -1;margin-top:var(--sp-4);padding:var(--sp-6) var(--sp-8);
  border-radius:var(--r-card);background:var(--fill);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-5)}
[data-page="ai"] .ai-plan__extra strong{
  font-size:var(--t-headline);font-weight:700;color:var(--label)}
[data-page="ai"] .ai-plan__extra span{font-size:var(--t-sub);color:var(--label-2)}

/* ============================================================================
   プラン別の支援内容
   ── 色だけで区別しない（HIG）。含む＝塗りつぶした丸、一部＝半分の丸、
      含まない＝線。読み上げ用の文字は別に持たせてある
   ========================================================================= */
[data-page="ai"] .ai-matrix-wrap{
  width:100%;max-width:100%;min-width:0;max-height:min(72vh,760px);overflow:auto;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-1)}
[data-page="ai"] .ai-matrix__scroll-hint{display:none}
[data-page="ai"] .ai-matrix{
  width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:var(--t-sub)}
[data-page="ai"] .ai-matrix th,
[data-page="ai"] .ai-matrix td{
  padding:var(--sp-4) var(--sp-3);text-align:center;border-top:1px solid var(--separator)}
[data-page="ai"] .ai-matrix thead th{
  position:sticky;top:0;z-index:3;border-top:0;background:var(--surface);
  border-bottom:1px solid var(--separator);
  font-size:var(--t-foot);font-weight:700;line-height:1.5;color:var(--label)}
[data-page="ai"] .ai-matrix thead th span{
  display:block;margin-top:2px;font-size:var(--t-caption);font-weight:500;
  color:var(--label-2);font-variant-numeric:tabular-nums}
[data-page="ai"] .ai-matrix thead th:first-child,
[data-page="ai"] .ai-matrix tbody th{
  text-align:left;padding-left:var(--sp-6)}
[data-page="ai"] .ai-matrix thead th:first-child{
  position:sticky;left:0;z-index:4;background:var(--surface);
  box-shadow:1px 0 0 var(--separator)}
[data-page="ai"] .ai-matrix tbody tr:not(.ai-matrix__group)>th{
  position:sticky;left:0;z-index:2;background:var(--surface);
  box-shadow:1px 0 0 var(--separator)}
[data-page="ai"] .ai-matrix tbody th{
  width:34%;font-weight:500;color:var(--label);font-size:var(--t-sub)}
[data-page="ai"] .ai-matrix__group th{
  position:sticky;left:0;z-index:2;background:var(--surface);
  box-shadow:1px 0 0 var(--separator);
  padding-top:var(--sp-8);border-top:1px solid var(--separator);
  font-size:var(--t-caption);font-weight:700;letter-spacing:.08em;color:var(--label)}
[data-page="ai"] .ai-matrix__group td{
  padding-top:var(--sp-8);border-top:1px solid var(--separator);background:var(--surface)}
[data-page="ai"] .ai-matrix__group th::before{
  content:"";display:inline-block;width:16px;height:3px;border-radius:2px;
  margin:0 var(--sp-2) 3px 0;background:var(--tint)}
[data-page="ai"] .ai-matrix__group:first-child th{padding-top:var(--sp-5);border-top:0}

[data-page="ai"] .ai-mark{
  display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;
  font-size:0;line-height:0}
[data-page="ai"] .ai-mark--yes{background:var(--label)}
[data-page="ai"] .ai-mark--part{
  background:linear-gradient(90deg,var(--tint) 0 50%,transparent 50% 100%);
  box-shadow:inset 0 0 0 1.5px var(--tint)}
[data-page="ai"] .ai-mark--no{
  width:16px;height:2px;border-radius:2px;background:var(--label-3)}
[data-page="ai"] .ai-matrix__legend{
  margin:var(--sp-5) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  font-size:var(--t-foot);color:var(--label-2)}
[data-page="ai"] .ai-matrix__legend li{display:inline-flex;align-items:center;gap:var(--sp-2)}
[data-page="ai"] .ai-matrix__note{
  margin:var(--sp-4) 0 0;font-size:var(--t-caption);color:var(--label-3)}

/* ============================================================================
   進め方
   ========================================================================= */
[data-page="ai"] .ai-flow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
[data-page="ai"] .ai-flow__step{
  padding:var(--sp-6);border-radius:var(--r-card);
  background:var(--surface);box-shadow:var(--shadow-1)}
[data-page="ai"] .ai-flow__no{
  margin:0 0 var(--sp-3);font-size:var(--t-caption);font-weight:600;
  letter-spacing:.08em;color:var(--label-2)}
[data-page="ai"] .ai-flow__name{
  margin:0 0 var(--sp-4);font-size:var(--t-headline);font-weight:700;color:var(--label)}
[data-page="ai"] .ai-flow__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-2)}
[data-page="ai"] .ai-flow__list li{
  font-size:var(--t-foot);color:var(--label-2);line-height:1.65}
[data-page="ai"] .ai-flow__list li::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  margin:0 var(--sp-2) 3px 0;background:var(--label-3)}
[data-page="ai"] .ai-quickwin{
  margin:var(--sp-10) 0 0;padding:var(--sp-10);
  border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-1)}
[data-page="ai"] .ai-quickwin h3{
  margin:0 0 var(--sp-3);font-size:var(--t-title2);font-weight:700;
  letter-spacing:-.01em;color:var(--label)}
[data-page="ai"] .ai-quickwin p{
  margin:0;font-size:var(--t-body);color:var(--label-2);max-width:var(--measure)}
[data-page="ai"] .ai-quickwin__steps{
  margin:var(--sp-8) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
[data-page="ai"] .ai-quickwin__steps li{
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);background:var(--fill);
  font-size:var(--t-sub);font-weight:600;color:var(--label)}
[data-page="ai"] .ai-quickwin__steps li:last-child{
  background:var(--label);color:var(--bg)}
[data-page="ai"] .ai-quickwin__steps span{color:var(--label-3);font-weight:400}

/* ============================================================================
   対応範囲・担当者
   ========================================================================= */
[data-page="ai"] .ai-scope{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
[data-page="ai"] .ai-scope>div{
  padding:var(--sp-8);border-radius:var(--r-card);background:var(--surface);
  box-shadow:var(--shadow-1)}
[data-page="ai"] .ai-scope__title{
  margin:0 0 var(--sp-5);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--separator);
  font-size:var(--t-headline);font-weight:700;color:var(--label)}
[data-page="ai"] .ai-scope__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-4)}
[data-page="ai"] .ai-scope__list li{
  position:relative;padding-left:30px;font-size:var(--t-sub);
  color:var(--label-2);line-height:1.75}
[data-page="ai"] .ai-scope__list--no li::before{
  position:absolute;left:0;top:.72em;content:"";width:16px;height:2px;
  border-radius:2px;background:var(--label-3)}
[data-page="ai"] .ai-scope__items{
  margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
[data-page="ai"] .ai-scope__items li{
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-pill);background:var(--fill);
  font-size:var(--t-sub);font-weight:500;color:var(--label)}

[data-page="ai"] .ai-person{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--sp-10);
  align-items:start}
[data-page="ai"] .ai-person__profile{
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--sp-5);align-items:start}
[data-page="ai"] .ai-person__portrait{
  width:112px;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--surface);
  box-shadow:var(--shadow-1)}
[data-page="ai"] .ai-person__name{
  margin:0 0 var(--sp-1);font-size:var(--t-title2);font-weight:700;
  letter-spacing:-.01em;color:var(--label)}
[data-page="ai"] .ai-person__role{
  margin:0 0 var(--sp-5);font-size:var(--t-foot);font-weight:500;color:var(--label-3)}
[data-page="ai"] .ai-person__bio{
  margin:0;font-size:var(--t-sub);line-height:1.9;color:var(--label-2)}
[data-page="ai"] .ai-person__points{
  margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
[data-page="ai"] .ai-person__points li{
  padding:var(--sp-6);border-radius:var(--r-card);background:var(--surface);
  box-shadow:var(--shadow-1)}
[data-page="ai"] .ai-person__points b{
  display:block;margin-bottom:var(--sp-2);font-size:var(--t-headline);
  font-weight:700;color:var(--label)}
[data-page="ai"] .ai-person__points span{
  font-size:var(--t-foot);line-height:1.75;color:var(--label-2)}

/* ============================================================================
   FAQ ── 段階的開示（HIG）。初期表示を減らして、必要な人だけ開く
   ========================================================================= */
[data-page="ai"] .faq-list{
  max-width:860px;margin:0;border:0;border-radius:var(--r-card);
  background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
[data-page="ai"] .faq-list details{border-bottom:1px solid var(--separator)}
[data-page="ai"] .faq-list details:last-child{border-bottom:0}
[data-page="ai"] .faq-list summary{
  position:relative;min-height:60px;display:flex;align-items:center;
  padding:var(--sp-5) var(--sp-16) var(--sp-5) var(--sp-8);
  font-size:var(--t-headline);font-weight:600;color:var(--label);cursor:pointer;
  list-style:none}
[data-page="ai"] .faq-list summary::-webkit-details-marker{display:none}
[data-page="ai"] .faq-list summary::marker{content:""}
[data-page="ai"] .faq-list summary::after{
  content:"";position:absolute;right:var(--sp-8);top:50%;
  width:10px;height:10px;border-right:2px solid var(--label-3);
  border-bottom:2px solid var(--label-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
[data-page="ai"] .faq-list details[open] summary::after{
  transform:translateY(-30%) rotate(-135deg)}
[data-page="ai"] .faq-list details[open] summary{background:transparent}
@media (hover:hover){
  [data-page="ai"] .faq-list summary:hover{background:var(--fill)}
}
[data-page="ai"] .faq-list summary:focus-visible{
  outline:3px solid var(--tint);outline-offset:-3px}
[data-page="ai"] .faq-list p{
  max-width:var(--measure);margin:0;padding:var(--sp-2) var(--sp-8) var(--sp-8);
  font-size:var(--t-sub);line-height:1.85;color:var(--label-2)}

/* 文章や英数字がグリッドを押し広げないよう、主要な子要素を明示的に縮める。 */
[data-page="ai"] .ai-hero__inner>*,[data-page="ai"] .ai-plans>*,
[data-page="ai"] .ai-process>*{min-width:0}
[data-page="ai"] h1,[data-page="ai"] h2,[data-page="ai"] h3,
[data-page="ai"] .ai-process__name,[data-page="ai"] .ai-stage__state,
[data-page="ai"] .ai-plan__state,[data-page="ai"] .ai-process__text{
  overflow-wrap:normal;word-break:auto-phrase;text-wrap:balance}
[data-page="ai"] p,[data-page="ai"] li{
  overflow-wrap:normal;word-break:auto-phrase;text-wrap:pretty}

@media (max-width:900px){
  [data-page="ai"] .ai-hero__inner{grid-template-columns:1fr;gap:var(--sp-10)}
  [data-page="ai"] .ai-hero__visual{min-height:0;aspect-ratio:16/10}
  [data-page="ai"] .ai-hero__visual img{min-height:0}
  [data-page="ai"] .ai-plans,[data-page="ai"] .ai-plans--main{grid-template-columns:1fr}
  [data-page="ai"] .ai-process{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
}

@media (max-width:600px){
  [data-page="ai"] .ai-hero{padding-top:84px}
  [data-page="ai"] .ai-hero h1 br{display:none}
  [data-page="ai"] .ai-hero__visual{aspect-ratio:4/3;border-radius:24px}
  [data-page="ai"] .ai-hero__visual,[data-page="ai"] .ai-hero__visual img{min-height:0;height:auto}
  [data-page="ai"] .ai-process{grid-template-columns:1fr}
  [data-page="ai"] .ai-matrix__scroll-hint{
    display:flex;justify-content:flex-end;gap:var(--sp-2);margin:0 0 var(--sp-3);
    font-size:var(--t-foot);font-weight:600;color:var(--label-2)}
}

/* ============================================================================
   タブレット
   ========================================================================= */
@media (max-width:1080px){
  [data-page="ai"] .ai-hero__inner{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:var(--sp-8)}
  [data-page="ai"] .ai-hero__visual,[data-page="ai"] .ai-hero__visual img{min-height:420px}
  [data-page="ai"] .ai-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-page="ai"] .ai-stage__item{border-left:0;border-top:1px solid var(--separator)}
  [data-page="ai"] .ai-stage__item:nth-child(odd){border-right:1px solid var(--separator)}
  [data-page="ai"] .ai-stage__item:nth-child(-n+2){border-top:0}
  [data-page="ai"] .ai-process{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8)}
  [data-page="ai"] .ai-flow,
  [data-page="ai"] .ai-strength,
  [data-page="ai"] .ai-plans--main{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================================
   スマートフォン
   ========================================================================= */
@media (max-width:760px){
  [data-page="ai"]{--t-large:clamp(34px,9vw,44px);--t-title1:26px;--t-title2:21px}
  [data-page="ai"] .ai-stage{grid-template-columns:1fr}
  [data-page="ai"] .ai-hero__inner{grid-template-columns:1fr}
  [data-page="ai"] .ai-hero__visual{margin-top:var(--sp-4)}
  [data-page="ai"] .ai-hero__visual,[data-page="ai"] .ai-hero__visual img{min-height:360px}
  [data-page="ai"] .ai-approach-visual{grid-template-columns:1fr;min-height:0}
  [data-page="ai"] .ai-approach-visual img{min-height:260px;aspect-ratio:4/3}
  [data-page="ai"] .ai-person__profile{grid-template-columns:80px minmax(0,1fr)}
  [data-page="ai"] .ai-person__portrait{width:80px}
  [data-page="ai"] .ai-stage__item{
    border-left:0;border-right:0;border-top:1px solid var(--separator);
    display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
    gap:var(--sp-1) var(--sp-4);padding:var(--sp-5) var(--sp-6)}
  [data-page="ai"] .ai-stage__item:first-child{border-top:0}
  /* 行を明示しないと、金額が自動配置で次の行へ落ちる */
  [data-page="ai"] .ai-stage__no{grid-column:1;grid-row:1}
  [data-page="ai"] .ai-stage__plan{grid-column:2;grid-row:1;width:auto;margin:0;padding:0;border:0}
  [data-page="ai"] .ai-stage__price{grid-column:3;grid-row:1;text-align:right;white-space:nowrap}

  [data-page="ai"] .ai-voices,[data-page="ai"] .ai-loss,
  [data-page="ai"] .ai-strength,[data-page="ai"] .ai-rules,
  [data-page="ai"] .ai-scope,[data-page="ai"] .ai-person,
  [data-page="ai"] .ai-person__points,[data-page="ai"] .ai-plans,
  [data-page="ai"] .ai-plans--main,[data-page="ai"] .ai-flow,
  [data-page="ai"] .ai-process{grid-template-columns:1fr;gap:var(--sp-4)}
  [data-page="ai"] .ai-shift{grid-template-columns:1fr}
  [data-page="ai"] .ai-shift__arrow{transform:rotate(90deg)}
  [data-page="ai"] .ai-voice,[data-page="ai"] .ai-loss__item,
  [data-page="ai"] .ai-strength__item,[data-page="ai"] .ai-rules__item,
  [data-page="ai"] .ai-shift__col,[data-page="ai"] .ai-scope>div,
  [data-page="ai"] .ai-flow__step,[data-page="ai"] .ai-plan__body,
  [data-page="ai"] .ai-quickwin{padding:var(--sp-6)}
  [data-page="ai"] .ai-btn{width:100%}

  /* 比較表：table/tbody まで block にしないと匿名セルが残って列幅が効いてしまう */
  [data-page="ai"] .ai-compare,
  [data-page="ai"] .ai-compare tbody,
  [data-page="ai"] .ai-compare caption{display:block}
  [data-page="ai"] .ai-compare{padding:var(--sp-2) var(--sp-6)}
  [data-page="ai"] .ai-compare thead{display:none}
  [data-page="ai"] .ai-compare tbody tr{
    display:block;padding:var(--sp-6) 0;border-top:1px solid var(--separator)}
  [data-page="ai"] .ai-compare tbody tr:first-child{border-top:0}
  [data-page="ai"] .ai-compare tbody th,
  [data-page="ai"] .ai-compare td,
  [data-page="ai"] .ai-compare td:nth-child(2),
  [data-page="ai"] .ai-compare td:nth-child(3),
  [data-page="ai"] .ai-compare td:nth-child(4){
    display:block;width:auto;padding:var(--sp-2) 0;border-top:0}
  [data-page="ai"] .ai-compare tbody th{font-size:var(--t-headline);padding-bottom:var(--sp-3)}
  [data-page="ai"] .ai-compare td::before{
    display:block;margin-bottom:2px;font-size:var(--t-caption);font-weight:600;
    letter-spacing:.06em;color:var(--label-3)}
  [data-page="ai"] .ai-compare td:nth-child(2)::before{content:"ご自身で進める場合"}
  [data-page="ai"] .ai-compare td:nth-child(3)::before{content:"PACTが支援する場合"}
  [data-page="ai"] .ai-compare td:nth-child(4)::before{content:"削減・軽減できるもの"}

  [data-page="ai"] .ai-matrix{min-width:620px}
  [data-page="ai"] .faq-list summary{padding:var(--sp-5) var(--sp-12) var(--sp-5) var(--sp-6)}
  [data-page="ai"] .faq-list summary::after{right:var(--sp-6)}
  [data-page="ai"] .faq-list p{padding:var(--sp-2) var(--sp-6) var(--sp-6)}
}

/* AI LPの最終レスポンシブ補正。後段に置き、既存の1080px規則より優先する。 */
@media (max-width:900px){
  [data-page="ai"] .ai-hero__inner{grid-template-columns:1fr;gap:var(--sp-10)}
  [data-page="ai"] .ai-hero__visual{min-height:0;aspect-ratio:16/10}
  [data-page="ai"] .ai-hero__visual img{min-height:0}
  [data-page="ai"] .ai-plans,[data-page="ai"] .ai-plans--main{grid-template-columns:1fr}
  [data-page="ai"] .ai-process{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
}
@media (max-width:600px){
  [data-page="ai"] .ai-hero{padding-top:84px}
  [data-page="ai"] .ai-hero h1 br{display:none}
  [data-page="ai"] .ai-hero h1 em{display:inline;white-space:normal}
  [data-page="ai"] .ai-hero__visual{aspect-ratio:4/3;border-radius:24px}
  [data-page="ai"] .ai-hero__visual,[data-page="ai"] .ai-hero__visual img{min-height:0;height:auto}
  [data-page="ai"] .ai-process{grid-template-columns:1fr}
}
/* PP-8は内容を隠さず、制作写真とセットで見せる。 */
.about-story-hero__inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,78px);align-items:center}
.about-story-hero__content{min-width:0}
.about-story-hero h1{font-size:clamp(42px,5vw,76px)}
.about-story-hero__bottom{display:block}
.about-story-hero__bottom p{max-width:560px}
.about-story-hero__visual{position:relative;min-width:0;padding:20px 24px 36px 0}
.about-story-hero__work{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.about-story-hero__mascot{position:absolute;right:-2%;bottom:0;display:block;width:clamp(140px,17vw,230px);height:auto;pointer-events:none;transform:scaleX(-1)}
[data-page="ai"] .ai-hero__visual-wrap{position:relative;min-width:0;padding-bottom:40px}
[data-page="ai"] .ai-hero__mascot{position:absolute;z-index:2;right:-22px;bottom:0;width:clamp(110px,13vw,175px);height:auto;pointer-events:none;transform:scaleX(-1)}
[data-page="ai"] .ai-hero__visual figcaption{padding-right:clamp(130px,14vw,190px)}
.creative-hero__grid{position:relative}
.pp8-creative{position:absolute;right:clamp(10px,3vw,36px);bottom:0;width:clamp(108px,14vw,170px);height:auto;pointer-events:none;transform:scaleX(-1)}
@media(max-width:900px){
  .about-story-hero__inner{grid-template-columns:1fr;gap:30px}
  .about-story-hero__visual{width:min(100%,620px);margin:auto}
  .about-story-hero__mascot{width:clamp(125px,20vw,180px)}
  .pp8-creative{right:0;bottom:8px;width:110px}
}
@media(max-width:640px){
  .about-story-hero__inner{gap:16px}
  .about-story-hero__visual{padding:0 12px 20px 0}
  .about-story-hero__work{border-radius:12px}
  .about-story-hero__mascot{width:clamp(98px,27vw,135px);right:-4px}
  [data-page="ai"] .ai-hero__visual-wrap{padding-bottom:28px}
  [data-page="ai"] .ai-hero__visual{margin-top:var(--sp-4)}
  [data-page="ai"] .ai-hero__mascot{width:105px;right:-8px}
  [data-page="ai"] .ai-hero__visual figcaption{padding-right:110px;font-size:12px}
  .pp8-creative{width:90px;bottom:0}
}
/* フッターの 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}}

/* TEAM 各メンバーのプロフィール表（2026-10-07）。中身は assets/member-profiles.json。
   静的は scripts/build-team-profiles.mjs、WordPress は pact_hybrid_render_member_profile() が同じ形を出す。 */
.member-profile{padding:clamp(56px,7vw,96px) 0 0;background:#f7f5f0}
.member-profile__sheet{padding:clamp(24px,4.4vw,60px);background:#fff;border:1px solid rgba(7,27,60,.12)}
.member-profile__head{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,15vw,184px);gap:clamp(20px,4vw,48px);align-items:start;padding-bottom:clamp(24px,3vw,36px);border-bottom:2px solid var(--navy)}
.member-profile__kicker{margin:0 0 16px;color:var(--orange-text,#CC3A10);font-size:11px;font-weight:900;letter-spacing:.16em}
.member-profile__kicker span{margin-left:14px;color:var(--navy);font-weight:800;letter-spacing:.1em;opacity:.62}
.member-profile__head h2{margin:0;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.04em}
.member-profile__head h2 small{margin-left:14px;font-size:14px;font-weight:500;letter-spacing:.08em}
.member-profile__role{margin:16px 0 0;font-size:13px;font-weight:900;letter-spacing:.06em}
.member-profile__lead{max-width:640px;margin:14px 0 0;font-size:16px;line-height:1.9}
.member-profile__photo{margin:0;aspect-ratio:4/5;overflow:hidden;background:#e7e3dc;border-radius:8px}
.member-profile__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.member-profile__keys{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:1px;margin:clamp(24px,3vw,36px) 0 clamp(32px,4vw,48px);background:rgba(7,27,60,.14);border:1px solid rgba(7,27,60,.14)}
.member-profile__key{padding:22px 24px;background:#f7f5f0}
.member-profile__key>span,.member-profile__group dt{display:block;color:#5b6577;font-size:11.5px;font-weight:900;letter-spacing:.08em}
.member-profile__key p{margin:10px 0 0;font-size:17px;font-weight:800;line-height:1.6}
.member-profile__key ol{display:flex;flex-wrap:wrap;gap:6px 0;margin:12px 0 0;padding:0;list-style:none;font-size:15px;font-weight:800;line-height:1.6}
.member-profile__key li+li::before{content:"→";margin:0 10px;color:var(--orange-text,#CC3A10);font-weight:900}
.member-profile__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,44px)}
.member-profile__group h3{display:flex;align-items:baseline;gap:10px;margin:0;padding-bottom:12px;border-bottom:1px solid var(--navy);color:var(--orange-text,#CC3A10);font-size:12px;font-weight:900;letter-spacing:.16em}
.member-profile__group h3 small{color:var(--navy);font-size:12px;font-weight:800;letter-spacing:.06em}
.member-profile__group dl{margin:0}
.member-profile__group dl>div{padding:16px 0;border-bottom:1px solid #e4e2dd}
.member-profile__group dd{margin:6px 0 0;font-size:14.5px;line-height:1.85}
.team-fiction-note{margin:clamp(56px,7vw,88px) 0 0;padding-top:16px;border-top:1px solid rgba(7,27,60,.12);color:#6b7280;font-size:11.5px;line-height:1.8}
@media(max-width:900px){.member-profile__keys,.member-profile__groups{grid-template-columns:1fr}.member-profile__groups{gap:28px}}
@media(max-width:560px){.member-profile__head{grid-template-columns:minmax(0,1fr) 96px;column-gap:16px;row-gap:0}.member-profile__id{display:contents}.member-profile__id>*{grid-column:1}.member-profile__photo{grid-column:2;grid-row:1/4}.member-profile__lead{grid-column:1/-1}.member-profile__head h2{font-size:34px}.member-profile__head h2 small{display:block;margin:8px 0 0;font-size:12px}.member-profile__kicker span{display:block;margin:6px 0 0}.member-profile__lead{font-size:15px}.member-profile__key{padding:18px}.member-profile__key p{font-size:16px}}

/* AIコンサルの紹介動画（ai.html・ヒーローの下。2026-10-08）。About・トップの動画と同じく、音なしで自動でくり返し、
   右下の「音を出す」「一時停止」で操作する（pages.js）。JS が動かないときは標準の操作バーで再生できる。 */
[data-page="ai"] .page-section.ai-film{padding:0 0 var(--section-y)}
.ai-film__frame{position:relative;max-width:960px;margin-inline:auto;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:var(--navy)}
.ai-film__frame video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ai-film__controls{position:absolute;right:12px;bottom:12px;z-index:1;display:flex;gap:8px}
.ai-film__controls[hidden]{display:none}
.ai-film__controls button{border:0;border-radius:999px;background:#fff;color:#071B3C;font:700 12px Arial,"Hiragino Sans",sans-serif;letter-spacing:.04em;padding:8px 14px;cursor:pointer;box-shadow:0 4px 14px rgba(7,27,60,.25)}
.ai-film__controls button:focus-visible{outline:3px solid #FF4C21;outline-offset:2px}
@media (max-width:760px){.ai-film__frame{border-radius:12px}.ai-film__controls{right:6px;bottom:6px;gap:5px}.ai-film__controls button{font-size:10px;padding:5px 9px;box-shadow:none}}