/* 池永建設LP v16 没入型の演出（見た目だけ。html.fx がないときは元のLPと同じ表示） */

/* 幅320pxでロゴと大見出しの「IKENAGA」がくっつく問題（演出の有無に関係なく直す） */
@media (max-width:360px){.hero-copy{top:15.5%}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 慣性スクロール（Lenis） */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.fx.is-loading{overflow:hidden}

/* ---------- 読み込み画面 ---------- */
.fx-loader{position:fixed;inset:0;z-index:200;background:#171917;color:#f7f7f5;display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1)}
.fx-loader.is-out{clip-path:inset(0 0 100% 0)}
.fx-loader__word{overflow:hidden;font:700 clamp(64px,15vw,240px)/.86 Oswald,sans-serif;letter-spacing:.01em}
.fx-loader__word span{display:block;animation:fx-up 1.1s cubic-bezier(.19,1,.22,1) both}
.fx-loader.is-out .fx-loader__word span{transform:translateY(-30%);transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.fx-loader__sub{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(20px,3vw,36px);font:700 12px Oswald,sans-serif;letter-spacing:.42em;opacity:.7}
.fx-loader__count{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(14px,2.4vw,28px);font:700 clamp(44px,7vw,104px)/1 Oswald,sans-serif;font-variant-numeric:tabular-nums}
.fx-loader__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff1f}
.fx-loader__bar i{display:block;height:100%;background:#287737;transform-origin:left;transform:scaleX(0)}
@keyframes fx-up{from{transform:translateY(105%)}to{transform:none}}

/* ---------- 最初の画面 ---------- */
.hero-picture{position:relative}
.fx-hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s}
html.hero-gl-on .fx-hero-gl{opacity:1}
html.fx .hero-copy{transform:translate3d(0,calc(var(--hs,0) * -140px),0);opacity:calc(1 - var(--hs,0) * 1.15);transition:color .9s,--hp-halo .9s}
.hero[data-tone=dark] .hero-copy{color:#f7f7f5;text-shadow:0 2px 40px #0005}
.hero[data-tone=dark] .hero-copy{--hp-halo:rgba(0,0,0,.5)}
html.fx .site-header{opacity:0;transition:opacity 1s .9s}
html.fx.is-loaded .site-header{opacity:1}
html.fx .hero-copy>p{opacity:0;translate:0 18px;transition:opacity 1s 1.1s,translate 1.2s cubic-bezier(.19,1,.22,1) 1.1s}
html.fx.is-loaded .hero-copy>p{opacity:1;translate:0 0}
html.fx .hero-actions{opacity:0;scale:.6;transition:opacity .8s 1.4s,scale 1s cubic-bezier(.34,1.56,.64,1) 1.4s}
html.fx.is-loaded .hero-actions{opacity:1;scale:1}

/* 1文字ずつ分けた見出し（元の「span は block」指定を打ち消す） */
.hero h1 .split{display:block}
html.fx.is-split .hero h1 .ch,html.fx.is-split .section-title .ch{display:inline-block;overflow:hidden;vertical-align:top}
html.fx.is-split .hero h1 .ch{padding:.06em .03em .16em;margin:-.06em -.03em -.16em}
html.fx.is-split .section-title .ch{padding:.1em .04em .24em;margin:-.1em -.04em -.24em}
html.fx.is-split .hero h1 .ch>span,html.fx.is-split .section-title .ch>span{display:inline-block}
html.fx.is-split .hero h1 .ch>span{transform:translateY(125%);transition:transform 1.3s cubic-bezier(.19,1,.22,1) calc(var(--i) * 45ms + 60ms)}
html.fx.is-split .hero h1>span:nth-child(2) .ch>span{transition-delay:calc(var(--i) * 40ms + 260ms)}
html.fx.is-loaded .hero h1 .ch>span{transform:none}

.fx-scroll-cue{position:absolute;left:50%;bottom:20px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;font:700 10px Oswald,sans-serif;letter-spacing:.38em;color:#fff;mix-blend-mode:difference;opacity:calc(1 - var(--hs,0) * 5);pointer-events:none}
.fx-scroll-cue i{width:1px;height:48px;background:currentColor;animation:fx-cue 2.2s cubic-bezier(.77,0,.18,1) infinite}
@keyframes fx-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.fx-scroll-cue{display:none}}

/* ---------- 大きな英字見出し ---------- */
html.fx .section-title>span{font-size:clamp(72px,12.5vw,200px);line-height:.88;letter-spacing:-.005em;margin-bottom:18px;color:#171917;transform:skewX(var(--skew,0deg));transform-origin:left bottom}
html.fx .services .section-title>span,html.fx .faq .section-title>span{font-size:clamp(60px,7.4vw,120px)}
html.fx.is-split .section-title .ch>span{transform:translateY(150%) rotate(7deg);transform-origin:left bottom;transition:transform 1.15s cubic-bezier(.19,1,.22,1) calc(var(--i) * 48ms)}
html.fx .section-title.is-in .ch>span{transform:none}
html.fx .fx-title{transition:color 1s .45s}
html.fx .fx-title:not(.is-in){color:transparent}
@media (max-width:760px){html.fx .section-title>span,html.fx .services .section-title>span,html.fx .faq .section-title>span{font-size:clamp(54px,18vw,96px);margin-bottom:12px}}

/* ---------- 文章・写真が現れる ---------- */
html.fx .fx-rise{opacity:0;translate:0 34px;transition:opacity 1s cubic-bezier(.19,1,.22,1) var(--d,0ms),translate 1.25s cubic-bezier(.19,1,.22,1) var(--d,0ms)}
html.fx .fx-rise.is-in{opacity:1;translate:0 0}
html.fx .fx-reveal{clip-path:inset(16% 10% 16% 10%);opacity:0;scale:1.06;transition:clip-path 1.4s cubic-bezier(.19,1,.22,1) var(--d,0ms),opacity .9s var(--d,0ms),scale 1.6s cubic-bezier(.19,1,.22,1) var(--d,0ms)}
html.fx .fx-reveal.is-in{clip-path:inset(0 0 0 0);opacity:1;scale:1}
html.fx .about-art{translate:0 var(--py,0px)}
@media (max-width:760px){html.fx .about-art{translate:none}}

/* ---------- 「色を考える」：塗り替わる舞台 ---------- */
html.fx body{overflow-x:clip}
html.fx .fx-color-track{position:relative;height:340vh;height:340svh;width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw) / 2);text-align:left}
.fx-color-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#171917 url('../assets/fk-hero.webp') center/cover}
.fx-color-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s}
.fx-color-track.is-ready .fx-color-gl{opacity:1}
.fx-color-stage .color-comparison{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.fx-color-stage figure{position:absolute;left:clamp(18px,4vw,64px);bottom:clamp(28px,8vh,88px);margin:0;opacity:0;translate:0 -14px;transition:opacity .22s,translate .3s}
.fx-color-stage figure.is-active{opacity:1;translate:0 0;transition:opacity .6s .18s,translate .9s cubic-bezier(.19,1,.22,1) .18s}
.fx-color-stage figure:not(.is-active){translate:0 18px}
.fx-color-stage figure img{position:absolute;width:1px;height:1px;opacity:0;border:0;pointer-events:none}
.fx-color-stage .color-comparison figcaption{margin:0;background:#f7f7f5;color:#171917;font-size:clamp(20px,2.6vw,40px);line-height:1.4;padding:.42em .9em;letter-spacing:.06em}
.fx-color-index{position:absolute;right:clamp(18px,4vw,64px);top:clamp(20px,6vh,64px);display:flex;align-items:flex-start;gap:.12em;color:#fff;text-shadow:0 2px 24px #0006;font:700 clamp(64px,9vw,150px)/.88 Oswald,sans-serif;font-variant-numeric:tabular-nums}
.fx-color-total{font-size:.28em;opacity:.95;margin-top:.15em;text-shadow:0 1px 3px #0007,0 2px 14px #0006}
.fx-color-dots{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(28px,8vh,88px);display:flex;gap:8px}
.fx-color-dots i{width:34px;height:3px;background:#ffffff66;box-shadow:0 1px 6px #0004;transition:background .4s}
.fx-color-dots i.is-on{background:#fff}
@media (max-width:760px){
  .fx-color-stage{background:#f7f7f5;--ph:min(85vw,58svh);--top:calc(50svh - var(--ph) / 2 - 24px)}
  .fx-color-gl{top:var(--top);bottom:auto;height:var(--ph)}
  .fx-color-stage figure{left:18px;bottom:auto;top:calc(var(--top) + var(--ph) + 20px)}
  .fx-color-index{left:18px;right:auto;top:calc(var(--top) - 92px);color:#171917;text-shadow:none;font-size:72px}
  .fx-color-total{text-shadow:none;opacity:.6}
  .fx-color-dots{right:18px;bottom:auto;top:calc(var(--top) - 22px)}
  .fx-color-dots i{width:22px;background:#17191733;box-shadow:none}
  .fx-color-dots i.is-on{background:#171917}
}

/* ---------- 会社名の手前を流れる大きな文字 ---------- */
.fx-marquee{overflow:hidden;margin:-30px 0 26px;padding:6px 0 2px;border-bottom:1px solid #808080}
.fx-marquee__row{display:flex;white-space:nowrap;will-change:transform}
.fx-marquee span{font:700 clamp(72px,13vw,220px)/1.02 Oswald,sans-serif;color:transparent;-webkit-text-stroke:1px #ffffff70;padding-right:.45em}
@media (max-width:760px){.fx-marquee{margin:-25px 0 20px}}

/* ---------- カーソル（マウス操作のときだけ） ---------- */
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor.menu-open,html.has-cursor.menu-open *{cursor:auto!important}
html.menu-open .fx-cursor{display:none}
.fx-cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:difference}
.fx-cursor.is-on{opacity:1}
.fx-cursor__dot{position:fixed;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff}
.fx-cursor__ring{position:fixed;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;transition:width .4s cubic-bezier(.19,1,.22,1),height .4s cubic-bezier(.19,1,.22,1),left .4s cubic-bezier(.19,1,.22,1),top .4s cubic-bezier(.19,1,.22,1),background .3s}
.fx-cursor.is-link .fx-cursor__ring{width:70px;height:70px;left:-35px;top:-35px;background:#fff}
.fx-cursor.is-view .fx-cursor__ring,.fx-cursor.has-label .fx-cursor__ring{width:92px;height:92px;left:-46px;top:-46px}
.fx-cursor__ring b{font:700 11px Oswald,sans-serif;letter-spacing:.2em;color:#fff;opacity:0;transition:opacity .3s}
.fx-cursor.has-label .fx-cursor__ring b{opacity:1}
.fx-cursor.is-link.has-label .fx-cursor__ring b{color:#000}
.fx-magnet{translate:var(--mx,0px) var(--my,0px);transition:translate .6s cubic-bezier(.19,1,.22,1)}

/* ---------- 紙のような粒子感 ---------- */
html.fx body::after{content:"";position:fixed;inset:-40%;z-index:150;pointer-events:none;opacity:.065;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fx-grain 1.4s steps(6) infinite}
@keyframes fx-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- オープニング動画（PC=横型・スマホ=縦型） ---------- */
.fx-op{position:fixed;inset:0;z-index:210;background:#171917;transition:background-color .6s,opacity 1.1s cubic-bezier(.77,0,.18,1),visibility 1.1s}
.fx-op.is-paper{background:#f7f7f5}
.fx-op video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.fx-op--contain video{object-fit:contain}
.fx-op.is-out{opacity:0;visibility:hidden;pointer-events:none}
.fx-op__skip{position:absolute;right:clamp(16px,3vw,36px);top:clamp(16px,3vw,32px);padding:12px 18px 12px 22px;border:1px solid #ffffff99;border-radius:999px;background:none;color:#fff;mix-blend-mode:difference;font:700 12px/1 Oswald,sans-serif;letter-spacing:.32em;cursor:pointer;opacity:0;animation:fx-skip-in .6s .8s forwards}
.fx-op__skip:hover{background:#fff;color:#000}
@keyframes fx-skip-in{to{opacity:1}}
/* 動画の最後の絵とつながるよう、動画のあとは見出しをせり上げずに表示する */
html.op-played .hero h1 .ch>span,html.op-played .hero-copy>p,html.op-played .hero-actions,html.op-played .site-header{transition:none!important}

/* --- v16 点検での調整（2026-10-06） --- */
/* スマホ縦長画面の「塗装の流れ」：説明と絵をひとかたまりで上下中央に置き、絵を画面幅いっぱいにして上下の空きを減らす */
@media (max-width:760px){
  #paint-process .pp-scroll-track.is-animated .pp-stage{grid-template-rows:150px auto;align-content:center}
  #paint-process .pp-scroll-track.is-animated .art svg{height:auto;max-height:64svh;width:calc(100% + 36px);margin:0 -18px}
  /* 完成した絵の下の空きに、締めの文を引き上げる（縦長の画面ほど大きく引き上げる。短い画面では動かさない） */
  #paint-process .pp-scroll-track.is-animated + .pp-ending{position:relative;z-index:2;padding-top:0;margin-top:min(0px, calc((150px + min((100vw + 36px) * .726, 64svh) - 100svh) / 2 + 28px))}
}