@charset "utf-8";

/* ===========================================================
   サービスページのアニメーション（1ページ1モチーフ）
   =========================================================== */
.pagehead.lg{padding:60px 0 58px}
.pagehead.lg .headart{width:330px; opacity:.95; right:280px}
.pagehead .lead{margin:16px 0 0; font-size:13.5px; line-height:1.95; color:#C3D2E6; max-width:34em}
@media(max-width:1400px){ .pagehead.lg .headart{width:300px; right:120px} }
@media(max-width:1240px){ .pagehead.lg .headart{width:280px; right:40px} }
@media(max-width:1040px){ .pagehead.lg .headart{width:250px; right:0; opacity:.45} }

/* 01 財務デューデリジェンス */
.art-dd .dd-scan{animation:ddscan 9s ease-in-out infinite}
@keyframes ddscan{0%{transform:translateY(0)}45%{transform:translateY(132px)}55%{transform:translateY(132px)}100%{transform:translateY(0)}}
.art-dd .dd-hit{opacity:0;animation:ddhit 9s ease-in-out infinite}
.art-dd .h2{animation-delay:1.1s}.art-dd .h3{animation-delay:2.2s}
@keyframes ddhit{0%,10%{opacity:0}18%,72%{opacity:1}82%,100%{opacity:0}}
.art-dd .dd-fly{opacity:0;animation:ddfly 9s ease-in-out infinite}
.art-dd .f2{animation-delay:1.1s}.art-dd .f3{animation-delay:2.2s}
@keyframes ddfly{0%,20%{opacity:0;transform:translate(0,0)}
 26%{opacity:1}52%{opacity:1;transform:translate(150px,36px)}
 60%,100%{opacity:0;transform:translate(150px,36px)}}

/* 02 バリュエーション */
.art-val .val-bar{transform-origin:center 186px;animation:valgrow 9s ease-out infinite}
.art-val .v2{animation-delay:.2s}.art-val .v3{animation-delay:.4s}
@keyframes valgrow{0%{transform:scaleY(0)}18%,84%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
.art-val .val-band,.art-val .val-lbl{opacity:0;animation:valband 9s ease-in-out infinite}
@keyframes valband{0%,34%{opacity:0}46%,84%{opacity:1}92%,100%{opacity:0}}

/* 03 M&A初期検討 */
.art-init .init-o{opacity:0;animation:initdrop 9s ease-in infinite}
.art-init .o2{animation-delay:.5s}.art-init .o3{animation-delay:1s}
.art-init .o4{animation-delay:1.5s}.art-init .o5{animation-delay:2s}
@keyframes initdrop{0%{opacity:0;transform:translateY(-10px)}
 8%{opacity:.9}28%{opacity:.9;transform:translateY(52px)}36%,100%{opacity:0;transform:translateY(70px)}}
.art-init .init-pass{opacity:0;animation:initpass 9s ease-in-out infinite}
@keyframes initpass{0%,30%{opacity:0;transform:translateY(0)}
 40%{opacity:1}62%,84%{opacity:1;transform:translateY(150px)}92%,100%{opacity:0;transform:translateY(150px)}}
.art-init .init-lbl{opacity:0;animation:fadein 9s ease-in-out infinite}

/* 04 フィナンシャルアドバイザリー */
.art-fa .fa-l{animation:faL 9s ease-in-out infinite}
.art-fa .fa-r{animation:faR 9s ease-in-out infinite}
@keyframes faL{0%{transform:translateX(-30px);opacity:.4}30%,86%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.4}}
@keyframes faR{0%{transform:translateX(30px);opacity:.4}30%,86%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.4}}
.art-fa .fa-c{opacity:0;animation:fadein 9s ease-in-out infinite}
.art-fa .fa-arrow{stroke-dasharray:36;stroke-dashoffset:36;animation:draw3 9s ease-in-out infinite}
.art-fa .a2{animation-delay:.4s}
@keyframes draw3{0%,34%{stroke-dashoffset:36}48%,84%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:36}}

/* 05 事業計画策定支援 */
.art-turn .turn-past{stroke-dasharray:190;stroke-dashoffset:190;animation:draw4 10s ease-in-out infinite}
@keyframes draw4{0%{stroke-dashoffset:190}26%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:190}}
.art-turn .turn-plan{stroke-dasharray:5 5;animation:turnplan 10s ease-in-out infinite}
@keyframes turnplan{0%,30%{opacity:0;stroke-dashoffset:200}46%{opacity:1}62%,86%{opacity:1;stroke-dashoffset:0}96%,100%{opacity:0;stroke-dashoffset:200}}
.art-turn .turn-dot,.art-turn .turn-lbl,.art-turn .turn-div{opacity:0;animation:fadein 10s ease-in-out infinite}
.art-turn .turn-dot{animation-name:pulsein}

/* 06 PPA */
.art-ppa .ppa-lump,.art-ppa .ppa-lump-t{animation:ppalump 11s ease-in-out infinite}
@keyframes ppalump{0%,16%{opacity:1}44%,86%{opacity:.28}96%,100%{opacity:1}}
.art-ppa .ppa-cut{opacity:0;animation:ppacut 11s cubic-bezier(.2,.7,.3,1) infinite}
.art-ppa .c2{animation-delay:.28s}.art-ppa .c3{animation-delay:.56s}.art-ppa .c4{animation-delay:.84s}
@keyframes ppacut{0%,18%{opacity:0;transform:translateX(-96px)}
 34%,84%{opacity:1;transform:translateX(0)}92%,100%{opacity:0;transform:translateX(-96px)}}

/* 07 減損テスト */
.art-imp .imp-rec{transform-origin:center 188px;animation:impdrop 10s ease-in-out infinite}
@keyframes impdrop{0%,20%{transform:scaleY(1)}46%,84%{transform:scaleY(.65)}96%,100%{transform:scaleY(1)}}
.art-imp .imp-line{opacity:0;animation:impline 10s ease-in-out infinite}
@keyframes impline{0%,22%{opacity:0;transform:translateY(0)}
 46%,84%{opacity:.9;transform:translateY(46px)}94%,100%{opacity:0;transform:translateY(0)}}
.art-imp .imp-gap{opacity:0;animation:impgap 10s ease-in-out infinite}
@keyframes impgap{0%,48%{opacity:0}62%,84%{opacity:1}92%,100%{opacity:0}}

/* 08 会計コンサルティング・FP&A */
.art-acc .acc-act{transform-origin:center 186px;animation:accgrow 10s cubic-bezier(.2,.7,.3,1) infinite}
.art-acc .a2{animation-delay:.18s}.art-acc .a3{animation-delay:.36s}.art-acc .a4{animation-delay:.54s}
@keyframes accgrow{0%{transform:scaleY(0)}22%,84%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}
.art-acc .acc-var,.art-acc .acc-leg{opacity:0;animation:fadein 10s ease-in-out infinite}
.art-acc .acc-bud{opacity:0;animation:accbud 10s ease-in-out infinite}
@keyframes accbud{0%{opacity:0}12%,86%{opacity:1}96%,100%{opacity:0}}

/* 09 事業の譲り受け */
.art-acq .acq-arc{stroke-dasharray:210;stroke-dashoffset:210;animation:draw6 10s ease-in-out infinite}
@keyframes draw6{0%,8%{stroke-dashoffset:210}34%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:210}}
.art-acq .acq-key{offset-path:path("M84 104 C 130 58, 190 58, 236 104");offset-distance:0%;
  animation:acqkey 10s ease-in-out infinite;opacity:0}
@keyframes acqkey{0%,10%{offset-distance:0%;opacity:0}
 18%{opacity:1}52%{offset-distance:100%;opacity:1}62%,100%{offset-distance:100%;opacity:0}}

/* プレPPA */
.art-pre .pre-f{transform-origin:center 182px;animation:prefill 9s ease-in-out infinite}
.art-pre .f2{animation-delay:.2s}.art-pre .f3{animation-delay:.4s}
@keyframes prefill{0%,20%{transform:scaleY(0)}40%,84%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}
.art-pre .pre-lbl{opacity:0;animation:fadein 9s ease-in-out infinite}

/* 動産評価 */
.art-mov .mov-gear{transform-origin:118px 108px;animation:ringspin 22s linear infinite}
.art-mov .g2{transform-origin:188px 146px;animation:ringspin 16s linear infinite reverse}
.art-mov .mov-cal{stroke-dasharray:340;stroke-dashoffset:340;animation:draw7 9s ease-in-out infinite}
@keyframes draw7{0%,14%{stroke-dashoffset:340}40%,84%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:340}}
.art-mov .mov-lbl{opacity:0;animation:fadein 9s ease-in-out infinite}

/* 割引率 */
.art-disc .disc-r{transform-origin:160px 106px}
.art-disc .r1{animation:discA 11s cubic-bezier(.4,0,.2,1) infinite}
.art-disc .r2{animation:discB 11s cubic-bezier(.4,0,.2,1) infinite}
.art-disc .r3{animation:discC 11s cubic-bezier(.4,0,.2,1) infinite}
@keyframes discA{0%{transform:rotate(-120deg)}44%,86%{transform:rotate(-90deg)}100%{transform:rotate(-120deg)}}
@keyframes discB{0%{transform:rotate(60deg)}44%,86%{transform:rotate(-90deg)}100%{transform:rotate(60deg)}}
@keyframes discC{0%{transform:rotate(200deg)}44%,86%{transform:rotate(-90deg)}100%{transform:rotate(200deg)}}
.art-disc .disc-t{opacity:0;animation:fadein 11s ease-in-out infinite}

/* のれんの償却年数 */
.art-gw .gw-s{transform-origin:center 182px;animation:gwstep 10s ease-out infinite}
.art-gw .s2{animation-delay:.22s}.art-gw .s3{animation-delay:.44s}
.art-gw .s4{animation-delay:.66s}.art-gw .s5{animation-delay:.88s}
@keyframes gwstep{0%{transform:scaleY(0);opacity:0}16%{opacity:1}24%,84%{transform:scaleY(1);opacity:1}94%,100%{transform:scaleY(0);opacity:0}}
.art-gw .gw-lbl{opacity:0;animation:fadein 10s ease-in-out infinite}

/* 第三者レビュー */
.art-rev .rev-ck{stroke-dasharray:30;stroke-dashoffset:30;animation:draw8 10s ease-in-out infinite}
.art-rev .k2{animation-delay:.5s}.art-rev .k3{animation-delay:1s}.art-rev .k4{animation-delay:1.5s}
@keyframes draw8{0%,14%{stroke-dashoffset:30}26%,84%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:30}}
.art-rev .rev-lens{animation:revlens 10s ease-in-out infinite}
@keyframes revlens{0%,10%{transform:translateY(0)}
 26%{transform:translateY(0)}42%{transform:translateY(36px)}58%{transform:translateY(72px)}
 74%,84%{transform:translateY(108px)}94%,100%{transform:translateY(0)}}

/* 共通 */
@keyframes fadein{0%,32%{opacity:0}46%,84%{opacity:1}92%,100%{opacity:0}}
@keyframes pulsein{0%,26%{opacity:0;transform:scale(.4)}38%,84%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.4)}}

@media (prefers-reduced-motion:reduce){
  .headart *{animation:none !important; opacity:1 !important; transform:none !important;
             stroke-dashoffset:0 !important; offset-distance:100% !important}
}

/* ===========================================================
   ヒーローの空（写真：昼 → 夕 → 夜 → 朝）
   =========================================================== */
.hero{
  position:relative; overflow:hidden; background:#050D1C;
  min-height:520px; padding:96px 0 104px;
}
.hero > .wrap{position:relative; z-index:3}
.hero h1{
  font-size:clamp(25px,3.6vw,40px); line-height:1.7; letter-spacing:.09em; color:#fff;
  font-weight:600; text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.hero p{
  margin:24px 0 0; font-size:15px; line-height:2.05; color:#E0E8F2; max-width:40em;
  text-shadow:0 1px 14px rgba(0,0,0,.62);
}
.hero .btns{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.sky{position:absolute; inset:0; z-index:0; overflow:hidden}
.scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(6,20,14,.94) 0%, rgba(6,20,14,.80) 38%,
                    rgba(6,20,14,.42) 64%, rgba(6,20,14,.18) 100%),
    linear-gradient(180deg, rgba(4,10,22,.30) 0%, rgba(4,10,22,0) 26%, rgba(4,10,22,.34) 100%);
}

/* --- 写真レイヤー（同じ一枚を三段階に階調変換して重ねる） --- */
.sky-pan{position:absolute; inset:-3%; animation:kenburns 128s ease-in-out infinite alternate}
.sky-ph{
  position:absolute; inset:0;
  background:url("hero-sky.jpg") center 62% / cover no-repeat;
}
.ph-base{opacity:1}
.ph-day{
  filter:brightness(2.55) saturate(.58) contrast(.76) hue-rotate(-5deg);
  opacity:0; animation:dayfade 72s linear infinite;
}
.ph-night{
  filter:brightness(.48) saturate(1.22) contrast(1.08);
  opacity:1; animation:nightfade 72s linear infinite;
}
@keyframes kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to  {transform:scale(1.15) translate3d(-2.2%,-1.6%,0)}
}
@keyframes dayfade{
  0%,17%{opacity:0} 28%,62%{opacity:1} 74%,100%{opacity:0}
}
@keyframes nightfade{
  0%,9%{opacity:1} 19%{opacity:0} 70%{opacity:0} 84%,100%{opacity:1}
}

/* --- 時刻ごとの色被り --- */
.sky-tint{position:absolute; inset:0; z-index:1; animation:tintcycle 72s linear infinite}
@keyframes tintcycle{
  0%  {background:linear-gradient(180deg,rgba(5,12,32,.62) 0%,rgba(7,16,38,.42) 55%,rgba(9,18,40,.30) 100%)}
  11% {background:linear-gradient(180deg,rgba(6,14,36,.52) 0%,rgba(14,26,52,.36) 55%,rgba(28,32,52,.26) 100%)}
  18% {background:linear-gradient(180deg,rgba(24,44,86,.36) 0%,rgba(126,86,88,.26) 62%,rgba(226,132,74,.26) 100%)}
  26% {background:linear-gradient(180deg,rgba(92,150,218,.38) 0%,rgba(154,194,234,.28) 60%,rgba(212,224,234,.20) 100%)}
  42% {background:linear-gradient(180deg,rgba(120,180,238,.46) 0%,rgba(178,212,242,.34) 58%,rgba(224,234,244,.24) 100%)}
  58% {background:linear-gradient(180deg,rgba(118,174,234,.42) 0%,rgba(178,206,236,.32) 58%,rgba(222,228,234,.22) 100%)}
  69% {background:linear-gradient(180deg,rgba(44,60,112,.34) 0%,rgba(158,96,80,.28) 60%,rgba(232,124,60,.30) 100%)}
  79% {background:linear-gradient(180deg,rgba(12,22,54,.50) 0%,rgba(34,38,66,.38) 58%,rgba(120,62,52,.28) 100%)}
  88%,100%{background:linear-gradient(180deg,rgba(5,12,32,.62) 0%,rgba(7,16,38,.42) 55%,rgba(9,18,40,.30) 100%)}
}

/* --- 星 --- */
.stars{
  position:absolute; inset:0 0 52% 0; z-index:1; animation:starfade 72s linear infinite;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 26% 12%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 38% 34%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 52% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 64% 40%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 73% 15%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 84% 29%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 92% 46%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 18% 52%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 45% 58%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 68% 62%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 88% 8%,  #fff, transparent);
}
@keyframes starfade{
  0%,7%{opacity:.85} 18%{opacity:0} 70%{opacity:0} 85%,100%{opacity:.85}
}

/* --- 太陽と月 --- */
.sun{position:absolute; border-radius:50%; z-index:1}
.sun{
  width:112px; height:112px; left:6%; top:36%;
  background:radial-gradient(circle,#FFF3DA 0%,#FFD08A 38%,rgba(255,176,96,.34) 60%,rgba(255,158,74,0) 74%);
  animation:sunpath 72s linear infinite;
}
@keyframes sunpath{
  0%,15%{opacity:0; transform:translate(0,74px) scale(1.12)}
  21%{opacity:.9; transform:translate(120px,26px) scale(1.06)}
  40%{opacity:.95; transform:translate(440px,-150px) scale(.82)}
  58%{opacity:.92; transform:translate(800px,-62px) scale(1)}
  70%{opacity:.8;  transform:translate(990px,54px) scale(1.16)}
  77%,100%{opacity:0; transform:translate(1050px,88px) scale(1.16)}
}
/* --- 雲 --- */
.cloud{
  position:absolute; z-index:1; border-radius:999px; filter:blur(20px);
  background:rgba(255,255,255,.14); animation:clouddrift 110s linear infinite;
}
.cloud.c1{width:340px; height:40px; top:20%; left:-20%; animation-duration:110s}
.cloud.c2{width:250px; height:30px; top:31%; left:-30%; animation-duration:86s; animation-delay:-30s; opacity:.62}
.cloud.c3{width:420px; height:48px; top:12%; left:-40%; animation-duration:132s; animation-delay:-60s; opacity:.48}
@keyframes clouddrift{from{transform:translateX(0)} to{transform:translateX(190vw)}}

.hero .heroart{filter:drop-shadow(0 3px 16px rgba(0,0,0,.6))}
@media(max-width:980px){
  .hero{min-height:auto; padding:64px 0 76px}
  .sky-ph{background-position:center 58%}
  .sun{width:88px; height:88px}
}
@media (prefers-reduced-motion:reduce){
  .sky-pan,.ph-day,.ph-night,.sky-tint,.stars,.sun,.cloud{animation:none !important}
  .sky-pan{transform:scale(1.04)}
  .ph-day{opacity:0}
  .ph-night{opacity:0}
  .sky-tint{background:linear-gradient(180deg,rgba(10,20,44,.46) 0%,rgba(16,28,56,.30) 56%,rgba(40,42,60,.22) 100%)}
  .stars{opacity:.5}
  .sun{opacity:0}
}

/* ===========================================================
   お客様の声
   =========================================================== */
.voices{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:680px){ .voices{grid-template-columns:1fr 1fr} }
.voice{
  background:#fff; border:1px solid var(--brand-line,var(--line)); border-radius:3px;
  padding:22px 22px 18px; display:flex; flex-direction:column;
}
.voice .vo-head{display:flex; align-items:center; gap:13px; margin-bottom:14px}
.vo-av{width:46px; height:46px; flex:none; border-radius:50%}
.voice .vo-attr{font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; line-height:1.5}
.voice .vo-who{font-family:var(--serif); font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:.03em; margin-top:3px}
.voice .vo-text{font-size:14px; line-height:1.95; color:#2C3531; margin:0 0 14px; flex:1; position:relative; padding-left:16px}
.voice .vo-text::before{
  content:"“"; position:absolute; left:-2px; top:-6px; font-family:var(--serif);
  font-size:30px; color:var(--gold); opacity:.5; line-height:1;
}
.voice .vo-tag{margin-top:auto}
.voice .vo-tag a{
  display:inline-block; font-size:11.5px; padding:4px 11px; border:1px solid var(--line-2);
  color:var(--ink-2); border-radius:2px;
}
.voice .vo-tag a:hover{background:var(--brand-050); border-color:var(--brand-600); color:var(--brand-700); text-decoration:none}