/* =====================================================
   キカクヤアキタ（Uniquer）コーポレートサイト v2
   トンマナ：白ベース＋淡ブルーグレーの大型角丸パネル／
   チャコール文字のモノクローム基調／ピル型ボタン／
   ゴールドアクセント（CTA専用・極少量）
   - CTAアクセント色（--c-accent）はCTAボタン専用。他用途で使用しないこと
===================================================== */
:root{
  --c-base:#ffffff;
  --c-text:#292f32;        /* チャコール（本文・見出し） */
  --c-ink:#131619;         /* 最濃色（ダーク面・フッター） */
  --c-slate:#525a5e;
  --c-muted:#6f787d;
  --c-primary:#292f32;
  --c-surface:#edf2f5;     /* 淡ブルーグレー面 */
  --c-line:#d3dde2;
  --c-accent:#e3bc5c;      /* ゴールド（CTA専用） */
  --c-accent-dark:#d3a83f; /* CTA hover専用 */
  --r-panel:clamp(28px,4.5vw,48px);
  --r-card:24px;
  --r-ui:14px;
  --shadow:0 10px 30px rgba(19,22,25,.07);
  --shadow-sm:0 4px 14px rgba(19,22,25,.08);
  --header-h:60px;
  --sticky-h:78px;
}
@media (min-width:1024px){:root{--sticky-h:0px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 32px)}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","BIZ UDPGothic",Meiryo,sans-serif;
  font-size:16px;line-height:1.85;color:var(--c-text);background:var(--c-base);
  -webkit-text-size-adjust:100%;letter-spacing:.02em;
  padding-bottom:var(--sticky-h);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-text)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}
h1,h2,h3{line-height:1.45;font-weight:700;color:var(--c-text);margin:0 0 .6em;letter-spacing:.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:800px}
.center{text-align:center}
.page-main{padding-top:calc(var(--header-h) + 28px)}

/* ---------- buttons（すべてピル型） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.75em 1.9em;border-radius:999px;font-weight:700;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-size:15.5px;line-height:1.4;text-align:center;transition:background .2s,color .2s,transform .2s,box-shadow .2s;font-family:inherit;letter-spacing:.02em}
.btn--cta{background:var(--c-accent);color:var(--c-ink);border-color:var(--c-accent);box-shadow:0 6px 18px rgba(227,188,92,.45)}
.btn--cta:hover{background:var(--c-accent-dark);border-color:var(--c-accent-dark);transform:translateY(-1px)}
.btn--navy{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.btn--navy:hover{background:var(--c-slate);border-color:var(--c-slate)}
.btn--outline{border-color:var(--c-text);color:var(--c-text);background:transparent}
.btn--outline:hover{background:var(--c-text);color:#fff}
.btn--light{background:#fff;color:var(--c-ink);border-color:#fff}
.btn--light:hover{background:var(--c-surface);border-color:var(--c-surface);transform:translateY(-1px)}
.btn--lg{min-height:58px;padding:.9em 2.4em;font-size:16.5px}

/* ---------- header（浮遊ピル型） ---------- */
.site-header{position:fixed;top:12px;left:12px;right:12px;height:var(--header-h);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-radius:999px;box-shadow:0 8px 28px rgba(19,22,25,.12);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:1160px;margin:0 auto;padding:0 10px 0 22px;gap:12px}
.logo{font-weight:700;color:var(--c-ink);text-decoration:none;font-size:16.5px;letter-spacing:.02em;white-space:nowrap}
.logo-sub{font-size:11.5px;color:var(--c-muted);font-weight:700;letter-spacing:.08em}
.menu-toggle{width:44px;height:44px;border:0;background:var(--c-surface);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:10px;margin-right:4px}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--c-ink);border-radius:2px;transition:transform .25s,opacity .25s}
.site-header.is-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.is-open .menu-toggle span:nth-child(2){opacity:0}
.site-header.is-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.gnav{position:fixed;top:calc(var(--header-h) + 20px);left:12px;right:12px;background:#fff;border-radius:28px;box-shadow:var(--shadow);display:none;flex-direction:column;padding:18px 22px 24px;max-height:calc(100vh - var(--header-h) - 40px);overflow-y:auto}
.site-header.is-open .gnav{display:flex}
.gnav a{padding:12px 4px;text-decoration:none;font-weight:600;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--c-text);border-radius:999px}
.gnav a:not(.gnav-cta):hover{background:var(--c-surface)}
.gnav .gnav-cta{margin-bottom:10px;color:var(--c-ink)}
@media (min-width:1024px){
  .menu-toggle{display:none}
  .gnav{position:static;display:flex;flex-direction:row;align-items:center;gap:2px;background:none;border-radius:0;box-shadow:none;padding:0;overflow:visible;max-height:none}
  .gnav a{padding:8px 13px;font-size:14px;min-height:44px}
  .gnav .gnav-cta{order:99;margin:0 0 0 10px;min-height:44px;padding:.45em 1.4em;font-size:14px}
}

/* ---------- ダーク面（FV動画差し替え前提の代替背景） ---------- */
.gradient-bg{background:linear-gradient(140deg,#131619,#292f32 42%,#3c464c 68%,#1a1f22 100%);background-size:220% 220%;animation:bgshift 18s ease-in-out infinite;color:#fff}
@keyframes bgshift{0%{background-position:0% 40%}50%{background-position:100% 60%}100%{background-position:0% 40%}}

/* ---------- gateway（index） ---------- */
.gateway{min-height:calc(100vh - 24px - var(--sticky-h));margin:12px;border-radius:var(--r-panel);display:flex;flex-direction:column;position:relative;overflow:hidden}
.gateway-video,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.gateway-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 22px 48px;text-align:center}
.gateway-logo{font-size:clamp(46px,9vw,88px);font-weight:700;letter-spacing:.04em;color:#fff;margin:0 0 6px;line-height:1.1}
.gateway-tagline{font-size:clamp(13.5px,2.6vw,18px);letter-spacing:.16em;opacity:.88;margin:0 0 52px}
.gateway-cards{display:grid;gap:14px;width:min(720px,100%)}
.gw-card{border:1px solid rgba(255,255,255,.28);border-radius:var(--r-card);padding:20px 24px;color:#fff;text-decoration:none;text-align:left;display:flex;flex-direction:column;gap:4px;transition:transform .2s,background .2s;background:rgba(255,255,255,.06)}
.gw-card:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.gw-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gw-title{font-weight:700;font-size:18px}
.gw-arrow{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.gw-note{font-size:13px;opacity:.82}
.gw-card--main{background:#fff;color:var(--c-ink);padding:30px 28px;border:0;box-shadow:0 16px 44px rgba(0,0,0,.35)}
.gw-card--main .gw-title{font-size:24px}
.gw-card--main .gw-note{color:var(--c-muted);opacity:1;font-size:14px}
.gw-card--main .gw-arrow{border-color:var(--c-line);background:var(--c-surface);color:var(--c-ink)}
.gw-card--main:hover{background:#fff;transform:translateY(-3px)}
@media (min-width:768px){
  .gateway-cards{grid-template-columns:1fr 1fr}
  .gw-card--main{grid-column:1/-1}
}
.gateway-footer{position:relative;z-index:1;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:18px 16px 24px;font-size:12px;color:rgba(255,255,255,.7)}
.gateway-footer a{color:rgba(255,255,255,.7)}

/* ---------- hero carousel（corporate FV：角丸ダークパネル） ---------- */
.hero{position:relative;overflow:hidden;margin:0 12px;border-radius:var(--r-panel)}
.carousel{position:relative;z-index:1}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start}
.slide-inner{display:flex;flex-direction:column;justify-content:center;min-height:clamp(440px,68vh,600px);padding-top:52px;padding-bottom:100px;max-width:1000px}
.slide-copy{font-size:clamp(29px,6.2vw,52px);font-weight:700;line-height:1.4;color:#fff;margin:0 0 .55em;letter-spacing:.02em}
.slide-sub{font-size:clamp(14.5px,2.2vw,17.5px);opacity:.88;max-width:620px;margin:0 0 1.8em;line-height:2}
.carousel-dots{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;gap:4px;z-index:2}
.carousel-dots button{width:30px;height:30px;border:0;background:transparent;position:relative;cursor:pointer;padding:0}
.carousel-dots button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.45);transition:width .25s,background .25s}
.carousel-dots button.is-active::after{width:26px;background:#fff}

/* ---------- sections ---------- */
.section{padding:64px 0}
@media (min-width:768px){.section{padding:92px 0}}
.section--compact{padding:48px 0}
/* 淡ブルーグレーの大型角丸パネル */
.section--bg{padding:22px 0;background:transparent}
.section--bg>.container{background:var(--c-surface);border-radius:var(--r-panel);padding:clamp(44px,7vw,76px) clamp(22px,5vw,64px)}
.sec-head{margin-bottom:36px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-label{display:block;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--c-muted);margin-bottom:12px;text-transform:uppercase}
.sec-label--light{color:rgba(255,255,255,.62)}
.sec-title{font-size:clamp(25px,4.4vw,34px);margin-bottom:.45em}
.sec-lead{max-width:760px;color:var(--c-slate)}
.sec-head.center .sec-lead{margin-left:auto;margin-right:auto}
.lead-strong{font-size:clamp(16px,2.4vw,19px);font-weight:700;line-height:2.1}
.micro-link{margin-top:20px;font-weight:700}
.micro-link a{text-decoration:none;border-bottom:2px solid var(--c-line);padding-bottom:2px}
.micro-link a:hover{border-color:var(--c-text)}

/* ---------- page head（下層：角丸パネル） ---------- */
.page-head{padding:24px 0 6px}
.page-head .container{background:var(--c-surface);border-radius:var(--r-panel);padding:clamp(36px,5vw,52px) clamp(24px,5vw,56px) clamp(44px,5vw,60px)}
.page-head h1{font-size:clamp(25px,4.6vw,38px);margin:16px 0 0}
.page-lead{margin:16px 0 0;max-width:760px;color:var(--c-slate)}
.page-head--navy .container{background:linear-gradient(140deg,#131619,#2e373c);color:#fff}
.page-head--navy h1{color:#fff}
.page-head--navy .page-lead{color:rgba(255,255,255,.85)}
.breadcrumb{font-size:12.5px;color:var(--c-muted)}
.breadcrumb a{color:var(--c-muted);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.bc-sep{margin:0 8px}
.page-head--navy .breadcrumb,.page-head--navy .breadcrumb a{color:rgba(255,255,255,.7)}
.tag{display:inline-block;background:#fff;color:var(--c-text);border:1px solid var(--c-line);border-radius:999px;font-size:12px;font-weight:700;padding:4px 16px;letter-spacing:.04em}
.tag--light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.page-head--navy .tag{margin-top:6px}

/* ---------- checklist ---------- */
.checklist{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:12px}
.checklist li{background:#fff;border-radius:18px;padding:16px 18px 16px 54px;position:relative;font-weight:600;line-height:1.75;box-shadow:var(--shadow-sm)}
.checklist li::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--c-surface)}
.checklist li::after{content:"";position:absolute;left:22px;top:50%;width:11px;height:6px;border-left:2.5px solid var(--c-ink);border-bottom:2.5px solid var(--c-ink);transform:translateY(-72%) rotate(-45deg)}
.section:not(.section--bg) .checklist li{box-shadow:none;border:1px solid var(--c-line)}
.section:not(.section--bg) .checklist li::before{background:var(--c-surface)}

/* ---------- cards ---------- */
.card-grid{display:grid;gap:18px}
@media (min-width:768px){
  .card-grid--2{grid-template-columns:repeat(2,1fr)}
  .card-grid--3{grid-template-columns:repeat(3,1fr)}
}
.card{background:#fff;border-radius:var(--r-card);padding:28px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;border:1px solid rgba(211,221,226,.6)}
a.card{text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(19,22,25,.12)}
.card h3{font-size:19px;margin-bottom:.5em}
.card p{font-size:14.5px;color:var(--c-slate)}
.card .tag{align-self:flex-start;margin-bottom:14px;background:var(--c-surface);border-color:transparent}
.card-more{margin-top:auto;padding-top:18px;font-weight:700;color:var(--c-text);font-size:14.5px;display:flex;align-items:center;gap:8px}
.card-more::after{content:"→";width:30px;height:30px;border-radius:50%;background:var(--c-surface);display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s,color .2s}
a.card:hover .card-more::after{background:var(--c-ink);color:#fff}
.effect-list{list-style:none;padding:14px 16px;margin:16px 0 4px;background:var(--c-surface);border-radius:16px;font-size:13.5px;display:grid;gap:7px}
.effect-list li{padding-left:22px;position:relative;font-weight:600;color:var(--c-text)}
.effect-list li::before{content:"";position:absolute;left:2px;top:.64em;width:9px;height:5px;border-left:2px solid var(--c-ink);border-bottom:2px solid var(--c-ink);transform:rotate(-45deg)}

/* ---------- flow / funnel（ピル型ステップ） ---------- */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:24px 0}
.flow-step{background:#fff;color:var(--c-text);font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;line-height:1.5;box-shadow:var(--shadow-sm)}
.flow-arw{color:var(--c-muted);font-weight:700}
.funnel .flow-step{font-size:15px;padding:13px 20px;display:flex;flex-direction:column;gap:2px;border-radius:22px}
.funnel .flow-step small{font-size:11.5px;font-weight:600;color:var(--c-muted);letter-spacing:.02em}
.section:not(.section--bg) .flow-step{box-shadow:none;background:var(--c-surface)}

/* ---------- steps（進め方） ---------- */
.steps{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;gap:14px}
@media (min-width:768px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:st;background:#fff;border-radius:20px;padding:20px 18px 18px;box-shadow:var(--shadow-sm)}
.steps li::before{content:"STEP 0" counter(st);display:block;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;color:var(--c-muted);font-size:11px;letter-spacing:.18em;margin-bottom:8px}
.steps b{display:block;color:var(--c-text);font-size:16px;margin-bottom:4px}
.steps p{font-size:13.5px;margin:0;color:var(--c-muted)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--c-surface);border-radius:20px;padding:0 22px}
.faq summary{cursor:pointer;font-weight:700;padding:17px 0;min-height:44px;display:flex;align-items:center;color:var(--c-text);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";margin-right:12px;color:var(--c-muted);font-family:"Helvetica Neue",Arial,sans-serif}
.faq .faq-a{padding:0 0 18px;margin:0;font-size:15px;color:var(--c-slate)}
.faq .faq-a::before{content:"A.";margin-right:12px;font-weight:700;color:var(--c-muted);font-family:"Helvetica Neue",Arial,sans-serif}
.section--bg .faq details{background:#fff;box-shadow:var(--shadow-sm)}

/* ---------- news ---------- */
.news-list{list-style:none;padding:0;margin:0}
.news-list li+li{border-top:1px solid var(--c-line)}
.section--bg .news-list li+li{border-top-color:rgba(211,221,226,.9)}
.news-list a{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:18px 10px;text-decoration:none;color:inherit;min-height:44px;border-radius:16px;transition:background .2s}
.news-list a:hover{background:#fff}
.section:not(.section--bg) .news-list a:hover{background:var(--c-surface)}
.news-date{font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;color:var(--c-muted);font-weight:600;letter-spacing:.04em}
.news-cat{font-size:11px;background:#fff;border:1px solid var(--c-line);color:var(--c-text);border-radius:999px;padding:2px 12px;font-weight:700;white-space:nowrap}
.section:not(.section--bg) .news-cat{background:var(--c-surface);border-color:transparent}
.news-title{flex:1 1 100%;font-weight:600;line-height:1.7}
@media (min-width:768px){.news-title{flex:1}}
.news-more{text-align:right;margin-top:20px;font-weight:700}
.news-more a{text-decoration:none;border-bottom:2px solid var(--c-line);padding-bottom:2px}
.news-more a:hover{border-color:var(--c-text)}

/* ---------- article（お知らせ詳細・規約） ---------- */
.article{max-width:800px}
.article-meta{display:flex;gap:12px;align-items:center;margin:14px 0 0}
.article h2{font-size:20px;margin-top:2.2em;padding-left:16px;border-left:4px solid var(--c-ink);border-radius:2px}
.legal h2{font-size:17.5px;margin-top:2.4em;border:0;padding:0}
.legal p{color:var(--c-slate)}

/* ---------- CTA band（角丸ダークパネル） ---------- */
.cta-band{padding:22px 0;text-align:center}
.cta-band>.container{background:linear-gradient(140deg,#131619,#2a3237 60%,#1a1f22);border-radius:var(--r-panel);color:#fff;padding:clamp(56px,8vw,84px) clamp(24px,5vw,64px)}
.cta-band h2{color:#fff;font-size:clamp(24px,4.2vw,32px)}
.cta-band>.container>p{max-width:660px;margin:0 auto 2em;opacity:.88;line-height:2}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:18px}
.cta-note{font-size:13px;letter-spacing:.06em;opacity:.75;margin:0}
.cta-note--dark{color:var(--c-muted);opacity:1;margin-top:14px}

/* ---------- forms ---------- */
.form{display:grid;gap:22px;max-width:640px}
.form-note{font-size:13.5px;color:var(--c-muted);margin:0}
.form label{font-weight:700;font-size:14.5px;display:block;margin-bottom:8px;color:var(--c-text)}
.req{display:inline-block;background:var(--c-ink);color:#fff;font-size:11px;border-radius:999px;padding:2px 10px;margin-left:8px;font-weight:700;vertical-align:middle}
.form input[type=text],.form select,.form textarea{width:100%;font-size:16px;padding:13px 18px;border:1.5px solid var(--c-line);border-radius:var(--r-ui);background:#fff;color:var(--c-text);min-height:50px;font-family:inherit}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--c-ink) 50%),linear-gradient(135deg,var(--c-ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.form textarea{min-height:140px;resize:vertical;border-radius:20px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--c-ink);outline-offset:1px;border-color:var(--c-ink)}
.form details{border:1.5px dashed var(--c-line);border-radius:20px;padding:0 18px 8px}
.form summary{padding:13px 0;cursor:pointer;font-weight:600;color:var(--c-muted);min-height:44px;display:flex;align-items:center;list-style:none}
.form summary::-webkit-details-marker{display:none}
.form summary::before{content:"＋";margin-right:10px;font-weight:700}
.form details[open] summary::before{content:"－"}

/* ---------- table ---------- */
.info-table{width:100%;border-collapse:separate;border-spacing:0;max-width:820px}
.info-table th,.info-table td{border-bottom:1px solid var(--c-line);padding:18px 16px;text-align:left;vertical-align:top;font-size:15px;line-height:1.85}
.info-table th{width:30%;color:var(--c-text);background:var(--c-surface);font-weight:700;white-space:nowrap}
.info-table tr:first-child th{border-radius:16px 0 0 0}
.info-table tr:last-child th{border-radius:0 0 0 16px;border-bottom:0}
.info-table tr:last-child td{border-bottom:0}

/* ---------- profile（代表挨拶） ---------- */
.profile{display:grid;gap:26px;align-items:start}
@media (min-width:768px){.profile{grid-template-columns:230px 1fr}}
.profile-ph{aspect-ratio:3/4;background:linear-gradient(160deg,#fff,#d3dde2);border-radius:28px;display:flex;align-items:center;justify-content:center;color:var(--c-muted);font-size:13px;font-weight:700}
.profile-sign{font-weight:700;color:var(--c-text);margin-top:16px}

/* ---------- coming soon / thanks ---------- */
.cs-wrap{min-height:44vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}

/* ---------- sticky CTA bar（浮遊ピル型） ---------- */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:99;display:grid;grid-template-columns:1.15fr 1fr;background:#fff;border-radius:999px;box-shadow:0 12px 34px rgba(19,22,25,.22);overflow:hidden;border:1px solid rgba(211,221,226,.7)}
.sticky-cta a{min-height:56px;display:flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none;font-size:15px}
.sticky-cta .s-consult{background:var(--c-accent);color:var(--c-ink)}
.sticky-cta .s-line{background:#fff;color:var(--c-text)}
@media (min-width:1024px){.sticky-cta{display:none}}

/* ---------- footer（角丸ダークパネル） ---------- */
.site-footer{background:var(--c-ink);color:#c7cfd4;margin:28px 12px 12px;border-radius:var(--r-panel);padding:60px 0 0;overflow:hidden}
.footer-grid{display:grid;gap:36px}
@media (min-width:768px){.footer-grid{grid-template-columns:1.2fr 1fr}}
.footer-logo{font-weight:700;color:#fff;font-size:18px;margin:0 0 6px}
.footer-tag{font-size:13px;opacity:.72;margin:0 0 20px;letter-spacing:.08em}
.footer-info{font-size:13.5px;opacity:.85;line-height:2}
.footer-sns{display:flex;gap:12px;margin-top:18px}
.footer-sns a{width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:11px;font-weight:700;font-family:"Helvetica Neue",Arial,sans-serif;transition:background .2s}
.footer-sns a:hover{background:rgba(255,255,255,.14)}
.footer-nav{display:grid;gap:2px;align-content:start}
@media (min-width:768px){.footer-nav{grid-template-columns:1fr 1fr}}
.footer-nav a{color:#c7cfd4;text-decoration:none;padding:9px 0;font-size:14px;min-height:44px;display:flex;align-items:center}
.footer-nav a:hover{color:#fff}
.copyright{text-align:center;font-size:12px;opacity:.6;padding:26px 16px;margin:44px 0 0;border-top:1px solid rgba(255,255,255,.12);font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:.06em}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gradient-bg{animation:none}
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important}
}

/* =====================================================
   v3：参照サイト準拠の写真配置・アニメーション・装飾
===================================================== */
:root{--tint-blue:#6fa3d8;--tint-green:#78bd8e;--tint-coral:#e08a6a;--tint-violet:#8f7fc7}

/* ---------- セクションラベルのスパークドット ---------- */
.sec-label{display:flex;align-items:center;gap:9px}
.sec-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-accent);flex:none}
.sec-head.center .sec-label{justify-content:center}

/* ---------- 写真プレースホルダー（実写真差し替え前提・画像0KB） ---------- */
.card--photo{overflow:hidden}
.card--photo .card-ph{display:block;height:152px;margin:-28px -26px 22px;border-radius:var(--r-card) var(--r-card) 0 0;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
a.card--photo:hover .card-ph{transform:scale(1.06)}
.media-ph{display:block;margin-top:30px;aspect-ratio:16/8;border-radius:22px;min-height:150px}
@media (min-width:768px){.media-ph{aspect-ratio:16/5}}
/* カテゴリ別デュオトーン（アブストラクト） */
.svc-pr .card-ph,.pkg-a .card-ph,.mp-pr,.mp-vision{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-blue),#c2d9f0 62%,#edf2f5)}
.svc-ai .card-ph,.pkg-c .card-ph,.mp-ai,.mp-why{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-green),#cae7d4 62%,#edf2f5)}
.svc-event .card-ph,.pkg-b .card-ph,.mp-event{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-coral),#f3d4c6 62%,#edf2f5)}
.pkg-d .card-ph,.mp-poli{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-violet),#ddd4f0 62%,#edf2f5)}

/* パッケージ下層ヘッダーのカテゴリ色グロー */
.page-head.ph-a>.container{background:linear-gradient(140deg,#131619 34%,#2e373c 62%,rgba(111,163,216,.5))}
.page-head.ph-b>.container{background:linear-gradient(140deg,#131619 34%,#2e373c 62%,rgba(224,138,106,.5))}
.page-head.ph-c>.container{background:linear-gradient(140deg,#131619 34%,#2e373c 62%,rgba(120,189,142,.5))}
.page-head.ph-d>.container{background:linear-gradient(140deg,#131619 34%,#2e373c 62%,rgba(143,127,199,.55))}

/* ---------- 浮遊ボケ（ヒーロー・ゲートウェイのわくわく装飾） ---------- */
.orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.45;z-index:0;pointer-events:none;animation:orbfloat 15s ease-in-out infinite}
.orb--1{width:300px;height:300px;background:var(--tint-blue);top:-70px;right:-60px}
.orb--2{width:230px;height:230px;background:var(--tint-coral);bottom:-80px;left:-60px;animation-delay:-5s;opacity:.32}
.orb--3{width:180px;height:180px;background:var(--tint-green);top:42%;left:58%;animation-delay:-10s;opacity:.28}
@keyframes orbfloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-32px) scale(1.1)}}

/* ---------- ヒーロー入場アニメーション ---------- */
.slide-inner>*{animation:rise .9s cubic-bezier(.22,.61,.36,1) both}
.slide-inner>*:nth-child(2){animation-delay:.14s}
.slide-inner>*:nth-child(3){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- スクロールリビール ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv-in{opacity:1;transform:translateY(0)}

/* ---------- ヘッダー圧縮（スクロール時） ---------- */
.site-header{transition:height .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s}
.site-header.is-scrolled{height:50px;box-shadow:0 12px 32px rgba(19,22,25,.18)}
.site-header.is-scrolled .gnav .gnav-cta{min-height:38px}

/* ---------- カルーセル矢印（PC・円形ボタン） ---------- */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);border:0;cursor:pointer;z-index:3;display:none;align-items:center;justify-content:center;color:var(--c-ink);box-shadow:var(--shadow-sm);transition:transform .2s,background .2s}
.carousel-arrow::before{font-size:18px;font-weight:700}
.carousel-arrow.prev{left:24px}.carousel-arrow.prev::before{content:"←"}
.carousel-arrow.next{right:24px}.carousel-arrow.next::before{content:"→"}
.carousel-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
@media (min-width:1024px){.carousel-arrow{display:flex}}

/* ---------- ニュース行の円形矢印 ---------- */
.news-list a::after{content:"→";width:32px;height:32px;border-radius:50%;background:#fff;color:var(--c-ink);display:none;align-items:center;justify-content:center;font-weight:700;margin-left:12px;flex:none;transition:transform .25s,background .25s,color .25s}
@media (min-width:768px){.news-list a::after{display:inline-flex}}
.news-list a:hover::after{background:var(--c-ink);color:#fff;transform:translateX(3px)}
.section:not(.section--bg) .news-list a::after{background:var(--c-surface)}

/* ---------- カード円形矢印のホバー挙動 ---------- */
.card-more::after{transition:background .25s,color .25s,transform .25s}
a.card:hover .card-more::after{transform:translateX(4px)}
.gw-arrow{transition:transform .25s,background .25s,color .25s}
.gw-card:hover .gw-arrow{transform:translateX(4px)}
.gw-card--main:hover .gw-arrow{background:var(--c-ink);color:#fff}

/* ---------- フッター巨大ワードマーク ---------- */
.footer-wordmark{overflow:hidden;padding:48px 20px 0;text-align:center}
.footer-wordmark::after{content:"Uniquer";display:block;font-weight:700;font-size:clamp(64px,14vw,170px);line-height:.95;letter-spacing:.02em;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .orb,.slide-inner>*{animation:none}
}

/* ===== v4：自社コンテンツ・差替え反映 ===== */
.card-grid--4{grid-template-columns:1fr}
@media (min-width:640px){.card-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.card-grid--4{grid-template-columns:repeat(4,1fr)}}
.card-grid--4 .card{padding:22px 20px}
.card-grid--4 .card--photo .card-ph{height:118px;margin:-22px -20px 18px}
.card-grid--4 .card h3{font-size:17px}
.card-grid--4 .card p{font-size:13.5px}
.svc-own .card-ph,.mp-own,.ct-vr .card-ph{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-violet),#ddd4f0 62%,#edf2f5)}
.ct-akitabi .card-ph{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-coral),#f3d4c6 62%,#edf2f5)}
.ct-live .card-ph{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-blue),#c2d9f0 62%,#edf2f5)}
.ct-osa .card-ph{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.6),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(19,22,25,.16),transparent 62%),
  linear-gradient(135deg,var(--tint-green),#cae7d4 62%,#edf2f5)}
.ct-yame .card-ph{background:
  radial-gradient(150px 150px at 84% 8%,rgba(255,255,255,.35),transparent 62%),
  radial-gradient(230px 210px at 6% 104%,rgba(0,0,0,.25),transparent 62%),
  linear-gradient(135deg,#292f32,#525a5e 62%,#98a2a8)}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.card .tag-row .tag{margin-bottom:0;align-self:auto}
.tag--soon{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden}

/* ===== v5：事業領域ダイアグラム ===== */
.domain-diagram{margin:6px 0 48px}
.dg-points{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.dg-point{border:1.5px dashed var(--c-slate);border-radius:12px;padding:9px 20px;font-weight:700;font-size:14px;background:#fff;display:flex;align-items:center;gap:12px}
.dg-point b{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10.5px;letter-spacing:.18em;color:var(--c-muted)}
.dg-flow{display:flex;flex-direction:column;align-items:center;gap:16px}
@media (min-width:1024px){.dg-flow{flex-direction:row;justify-content:center;gap:20px}}
.dg-arrow{font-size:30px;font-weight:700;color:var(--c-ink);transform:rotate(90deg);line-height:1}
@media (min-width:1024px){.dg-arrow{transform:none}}
.dg-box{background:#fff;border:1.5px solid var(--c-ink);border-radius:20px;padding:26px 24px;width:min(300px,100%);text-align:center;box-shadow:var(--shadow-sm)}
.dg-box-title{font-weight:700;font-size:18px;margin:0 0 12px;color:var(--c-ink);display:flex;flex-direction:column;line-height:1.4}
.dg-box-title small{font-family:"Helvetica Neue",Arial,sans-serif;font-size:9.5px;letter-spacing:.22em;color:var(--c-muted);font-weight:700;margin-top:2px}
.dg-tag{display:inline-block;background:var(--c-ink);color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:3px 16px;margin:0 0 14px}
.dg-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13.5px;font-weight:600;line-height:1.6}
.dg-wheel{width:min(340px,86vw);flex:none}
.dg-ring{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from -126deg,var(--tint-blue) 0 72deg,var(--tint-coral) 0 144deg,var(--tint-violet) 0 216deg,var(--tint-green) 0 288deg,var(--c-slate) 0 360deg);box-shadow:var(--shadow)}
.dg-seg{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:15px;text-align:center;line-height:1.25;display:flex;flex-direction:column;text-shadow:0 1px 5px rgba(0,0,0,.3);pointer-events:none}
.dg-seg small{font-family:"Helvetica Neue",Arial,sans-serif;font-size:8px;letter-spacing:.12em;font-weight:700;opacity:.92}
.dg-s1{top:14%;left:50%}
.dg-s2{top:39%;left:84%}
.dg-s3{top:79%;left:71%}
.dg-s4{top:79%;left:29%}
.dg-s5{top:39%;left:16%}
.dg-core{position:absolute;inset:19%;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:10px}
.dg-core::before{content:"";position:absolute;inset:-10.5%;border:2px dashed rgba(255,255,255,.8);border-radius:50%;animation:dgspin 46s linear infinite}
.dg-core-title{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--c-muted);margin:0}
.dg-core-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-weight:700;font-size:14px;color:var(--c-ink);line-height:1.5}
@keyframes dgspin{to{transform:rotate(360deg)}}
@media (max-width:420px){.dg-seg{font-size:13px}.dg-core-list{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.dg-core::before{animation:none}}

/* ===== v6：FV背景動画・スクリム（文字可読性の確保） ===== */
.video-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(165deg,rgba(19,22,25,.6),rgba(19,22,25,.3) 48%,rgba(19,22,25,.62));pointer-events:none}
.carousel{z-index:2}
.gateway-inner{z-index:2}
.gateway-footer{z-index:2}

/* ===== v7：修正対応（ロゴ画像・9工程ステッパー・ダイアグラム可読性） ===== */
/* ゲートウェイ：ロゴ画像 */
.gateway-logo--img{margin:0 0 12px}
.gateway-logo--img img{width:min(560px,84vw);height:auto;margin:0 auto;filter:drop-shadow(0 10px 34px rgba(0,0,0,.5))}
/* ダイアグラム：回転点線と文字の重なり対策（目立たない程度の白背景） */
.dg-seg{background:rgba(255,255,255,.16);padding:5px 13px;border-radius:14px;backdrop-filter:blur(1px)}
/* 9工程ステッパー（about METHOD） */
.fs-legend{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 12px;align-items:center}
.fs-key{color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 13px;letter-spacing:.04em}
.flow-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:900px){.flow-steps{grid-template-columns:repeat(9,1fr);gap:13px}}
.flow-steps li{position:relative;background:#fff;border-radius:14px;padding:13px 6px 12px;text-align:center;font-weight:700;font-size:12.5px;line-height:1.45;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px}
.flow-steps li small{font-weight:600;font-size:10px;color:var(--c-muted)}
.fs-no{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;color:#fff;border-radius:999px;padding:2.5px 9px;line-height:1.4}
.fs-p1 .fs-no,.fs-key.fs-p1{background:var(--tint-blue)}
.fs-p2 .fs-no,.fs-key.fs-p2{background:var(--tint-coral)}
.fs-p3 .fs-no,.fs-key.fs-p3{background:var(--tint-violet)}
.fs-p4 .fs-no,.fs-key.fs-p4{background:var(--tint-green)}
.fs-p5 .fs-no,.fs-key.fs-p5{background:var(--c-slate)}
@media (min-width:900px){.flow-steps li:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--c-muted);font-weight:700;font-size:12px}}
/* カード本文の行末孤立（「に。」だけの行）防止 */
.card p{text-wrap:pretty}

/* =====================================================
   v8：パッケージLP強化 — すべて .pkg-lp（強化版パッケージページの<main>）
   スコープ内のみ有効。他ページへの影響なし。
   ※ゴールド（--c-accent）はここでは使用しない（CTAボタン専用ルール維持）
===================================================== */
/* --- FV（page-head--navy）：装飾オーブ＋要素の順次エントランス --- */
.pkg-lp .page-head--navy>.container{position:relative;overflow:hidden;padding-bottom:clamp(48px,6vw,68px)}
.pkg-lp .page-head--navy>.container>:not(.pkg-orb){position:relative;z-index:1}
.pkg-lp .page-head h1{font-size:clamp(28px,5vw,44px)}
.pkg-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,0) 70%);z-index:0;pointer-events:none;animation:orbfloat 13s ease-in-out infinite}
.pkg-orb--1{width:400px;height:400px;top:-150px;right:-100px}
.pkg-orb--2{width:300px;height:300px;bottom:-130px;left:-80px;animation-delay:-6s;animation-duration:17s}
.pkg-lp .page-head--navy>.container.rv:not(.rv-in) :is(.tag,h1,.page-lead,.pkg-fv){opacity:0}
.pkg-lp .page-head--navy>.container.rv-in :is(.tag,h1,.page-lead,.pkg-fv){animation:rise .7s cubic-bezier(.22,.61,.36,1) both}
.pkg-lp .page-head--navy>.container.rv-in h1{animation-delay:.1s}
.pkg-lp .page-head--navy>.container.rv-in .page-lead{animation-delay:.2s}
.pkg-lp .page-head--navy>.container.rv-in .pkg-fv{animation-delay:.32s}
/* --- FV：効果ピル＋CTA --- */
.pkg-fv{margin-top:28px}
.pkg-fv-pills{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:10px}
.pkg-fv-pills li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.26);color:#fff;font-weight:700;font-size:13.5px;line-height:1.5;padding:9px 18px 9px 40px;border-radius:999px;position:relative}
.pkg-fv-pills li::before{content:"";position:absolute;left:16px;top:50%;width:12px;height:7px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-70%) rotate(-45deg)}
.pkg-fv .cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin:0 0 14px}
/* --- 見出し・導入文のセンター揃え（LP構成） --- */
.pkg-lp .sec-head{text-align:center;margin-left:auto;margin-right:auto}
.pkg-lp .sec-head .sec-label{justify-content:center}
.pkg-lp .section .container>p{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
/* --- 悩み：吹き出しグリッド＋ブリッジ矢印 --- */
.worry-grid{list-style:none;padding:0;margin:0 0 4px;display:grid;gap:18px}
@media (min-width:768px){.worry-grid{grid-template-columns:repeat(3,1fr)}}
.worry-grid li{background:#fff;border-radius:20px;padding:24px 20px 26px;font-weight:700;line-height:1.9;text-align:center;box-shadow:var(--shadow-sm);position:relative}
.worry-grid li::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);border:10px solid transparent;border-top:11px solid #fff;border-bottom:0}
.worry-grid li.rv{transform:translateY(26px) scale(.93)}
.pkg-bridge{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:32px}
.pkg-bridge span{width:16px;height:16px;border-right:3px solid var(--c-muted);border-bottom:3px solid var(--c-muted);transform:rotate(45deg);animation:bridgebob 1.5s ease-in-out infinite}
.pkg-bridge span:nth-child(2){opacity:.5;animation-delay:.15s}
@keyframes bridgebob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}
/* --- ファネル図：大型ステップカード（番号サークル付き）＋順次ポップ --- */
.pkg-lp .flow.funnel{justify-content:center;gap:10px;margin:30px 0 26px;counter-reset:fn}
.pkg-lp .funnel .flow-step{counter-increment:fn;font-size:15.5px;padding:24px 16px 18px;border-radius:22px;flex:1 1 0;min-width:150px;text-align:center;align-items:center;position:relative;margin-top:15px}
.pkg-lp .funnel .flow-step::before{content:counter(fn);position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--c-ink);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:"Helvetica Neue",Arial,sans-serif}
.pkg-lp .funnel .flow-step small{font-size:12px}
.pkg-lp .funnel .flow-arw{font-size:18px}
@media (max-width:640px){
  .pkg-lp .flow.funnel{flex-direction:column}
  .pkg-lp .funnel .flow-step{width:100%}
  .pkg-lp .funnel .flow-arw{transform:rotate(90deg)}
}
.pkg-lp .flow.funnel.rv:not(.rv-in)>*{opacity:0}
.pkg-lp .flow.funnel.rv-in>*{animation:rise .55s cubic-bezier(.22,.61,.36,1) both}
.pkg-lp .flow.funnel.rv-in>*:nth-child(2){animation-delay:.1s}
.pkg-lp .flow.funnel.rv-in>*:nth-child(3){animation-delay:.2s}
.pkg-lp .flow.funnel.rv-in>*:nth-child(4){animation-delay:.3s}
.pkg-lp .flow.funnel.rv-in>*:nth-child(5){animation-delay:.4s}
.pkg-lp .flow.funnel.rv-in>*:nth-child(6){animation-delay:.5s}
.pkg-lp .flow.funnel.rv-in>*:nth-child(7){animation-delay:.6s}
.pkg-lp .flow.funnel.rv-in>*:nth-child(8){animation-delay:.7s}
.pkg-lp .flow.funnel.rv-in>*:nth-child(9){animation-delay:.8s}
/* --- REASON/PLAN：ゴーストナンバリングカード＋ホバー時トップライン --- */
.num-grid{counter-reset:pn}
.num-grid .card{counter-increment:pn;position:relative;overflow:hidden;text-align:left;transition:transform .3s,box-shadow .3s}
.num-grid .card::before{content:"0" counter(pn);position:absolute;top:-12px;right:8px;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:74px;line-height:1;letter-spacing:-.02em;color:var(--c-surface);pointer-events:none}
.num-grid .card>*{position:relative}
.num-grid .card::after{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--c-ink);transition:width .35s cubic-bezier(.22,.61,.36,1)}
.num-grid .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.num-grid .card:hover::after{width:100%}
/* --- EFFECT：3カラム大型チェックカード --- */
@media (min-width:768px){.pkg-lp .checklist{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.pkg-lp .checklist li{padding:66px 20px 26px;text-align:center;border-radius:22px;line-height:1.85}
.pkg-lp .checklist li::before{left:50%;top:16px;transform:translateX(-50%);width:36px;height:36px}
.pkg-lp .checklist li::after{left:50%;top:34px;width:14px;height:8px;margin-left:-8px;border-left:3px solid var(--c-ink);border-bottom:3px solid var(--c-ink);transform:translateY(-60%) rotate(-45deg)}
/* --- FLOW：番号サークル付きステッパー --- */
.pkg-lp .steps{gap:18px}
.pkg-lp .steps li{text-align:center;padding:60px 18px 22px;position:relative}
.pkg-lp .steps li::before{content:"0" counter(st);position:absolute;top:16px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--c-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;letter-spacing:.04em;margin:0}
@media (min-width:768px){.pkg-lp .steps li:not(:last-child)::after{content:"→";position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:var(--c-muted);font-weight:700;font-size:13px}}
/* --- マーキー（アウトライン英字・装飾） --- */
.pkg-marquee{overflow:hidden;white-space:nowrap;padding:34px 0 0;pointer-events:none;display:flex}
.pkg-marquee span{flex:none;display:block;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:clamp(42px,6.5vw,78px);letter-spacing:.04em;line-height:1.15;color:transparent;-webkit-text-stroke:1px var(--c-line);animation:pkgmarquee 32s linear infinite}
@supports not (-webkit-text-stroke:1px #000){.pkg-marquee span{color:var(--c-surface)}}
@keyframes pkgmarquee{to{transform:translateX(-100%)}}
/* --- WORKS：実績ロゴのプレースホルダ枠 --- */
.logo-ph-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0;margin:26px 0 0}
@media (min-width:768px){.logo-ph-grid{grid-template-columns:repeat(6,1fr)}}
.logo-ph-grid li{aspect-ratio:16/9;border-radius:14px;background:repeating-linear-gradient(45deg,var(--c-surface),var(--c-surface) 8px,#f6f9fb 8px,#f6f9fb 16px);border:1px dashed var(--c-line)}
/* --- CTA帯：＼スラッシュ／飾り＋ボタンの白ハイライト流光 --- */
.pkg-lp .cta-band h2::before{content:"＼ "}
.pkg-lp .cta-band h2::after{content:" ／"}
.pkg-lp .btn--cta{position:relative;overflow:hidden}
.pkg-lp .btn--cta::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-18deg);animation:ctasheen 3.6s ease-in-out infinite;pointer-events:none}
@keyframes ctasheen{0%,55%{left:-70%}90%,100%{left:140%}}
/* --- reduced-motion：無限アニメーションを停止 --- */
@media (prefers-reduced-motion:reduce){
  .pkg-orb,.pkg-bridge span,.pkg-lp .btn--cta::before,.pkg-marquee span{animation:none}
  .pkg-lp .page-head--navy>.container.rv-in :is(.tag,h1,.page-lead,.pkg-fv),.pkg-lp .flow.funnel.rv-in>*{animation:none;opacity:1}
}

/* =====================================================
   v9：フィードバック対応（改行調整・チェックリスト強調・9工程アニメ 等）
===================================================== */
/* --- 文節改行（content.py nb()ヘルパー）：PC/スマホとも文節単位で折り返す --- */
.nb{display:inline-block}
/* --- 強調テキスト色（チェックリスト等。ゴールドはCTA専用のため不使用） --- */
:root{--c-em:#c05a3a}
/* --- チェックリスト：チェックを緑丸＋白チェックにして目立たせる --- */
.checklist li::before{background:var(--tint-green)}
.section:not(.section--bg) .checklist li::before{background:var(--tint-green)}
.checklist li::after{border-left-color:#fff;border-bottom-color:#fff}
.pkg-lp .checklist li::after{border-left-color:#fff;border-bottom-color:#fff}
/* --- チェックリスト内の重要フレーズ強調 --- */
.checklist .hl{font-style:normal;font-weight:700;color:var(--c-em)}
/* --- 見出しルビ（about WHY） --- */
.sec-title rt{font-size:.38em;font-weight:600;letter-spacing:.18em;color:var(--c-muted)}
/* --- 9工程ステッパー：単語内の不自然な改行を防止（<wbr>位置でのみ改行） --- */
.flow-steps li{word-break:keep-all}
.flow-steps li small{white-space:nowrap}
/* --- 9工程ステッパー：スクロールで順次ポップイン --- */
.flow-steps.rv:not(.rv-in) li{opacity:0}
.flow-steps.rv-in li{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}
.flow-steps.rv-in li:nth-child(2){animation-delay:.07s}
.flow-steps.rv-in li:nth-child(3){animation-delay:.14s}
.flow-steps.rv-in li:nth-child(4){animation-delay:.21s}
.flow-steps.rv-in li:nth-child(5){animation-delay:.28s}
.flow-steps.rv-in li:nth-child(6){animation-delay:.35s}
.flow-steps.rv-in li:nth-child(7){animation-delay:.42s}
.flow-steps.rv-in li:nth-child(8){animation-delay:.49s}
.flow-steps.rv-in li:nth-child(9){animation-delay:.56s}
/* --- 事業領域図：工程ラベル（設計/企画/制作/運用/改善）の字間を拡げる --- */
.dg-seg{letter-spacing:.12em}
/* --- ゲートウェイ3分岐タイトルのh2化（セマンティクスのみ変更・見た目は従来のまま） --- */
.gw-title{margin:0;line-height:inherit;letter-spacing:inherit;color:inherit}
/* --- パッケージ4カード：subgridで行位置（タグ/見出し/本文/効果枠/リンク）を横並びで統一 --- */
.card-grid--2 .card--photo .effect-list{margin-top:auto} /* subgrid非対応時のフォールバック（下端揃え） */
@supports (grid-template-rows:subgrid){
  .card-grid--2 .card--photo{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
  .card-grid--2 .card--photo .tag{justify-self:start}
  .card-grid--2 .card--photo .effect-list{margin-top:0}
}