/* ═══════════════════════════════════════════════════════════════════
   RE-INNOVATIONS Motion Layer（テーマ v2.4.3）
   ───────────────────────────────────────────────────────────────────
   全ページ共通の「動き」だけを担う1枚のレイヤー。
   ・文言／色トークン／書体／余白は一切変更しない（既存CSSの後に読み込む）
   ・初期状態（非表示など）は JS が付与するクラスにだけ掛けるため、
     JS が動かない環境では元のデザインがそのまま表示される
   ・prefers-reduced-motion では全演出を停止
   モチーフ：光（陽光のスイープ・カーソルの光）／格子（パネルの配列）／
            呼吸（8〜20秒周期のゆっくりした常時モーション）／奥行（視差・焦点）
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --rm-ease:cubic-bezier(.16,1,.3,1);       /* 登場（既存 --ease と同一） */
  --rm-ease-io:cubic-bezier(.77,0,.18,1);   /* 面が切り替わるワイプ */
  --rm-ease-soft:cubic-bezier(.22,1,.36,1); /* 既存 --ease-out と同一 */
  --rm-light:rgba(122,184,212,1);           /* = --blue-light */
}

/* ── スムーススクロール中はCSSのsmoothを切る（JS側で補間するため） ── */
html.rm-smooth{scroll-behavior:auto !important}

/* ── 画面遷移（対応ブラウザのみ：Chrome / Edge / Safari 18.2+） ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:rm-vt-out .5s var(--rm-ease-io) both}
::view-transition-new(root){animation:rm-vt-in .75s var(--rm-ease-io) both}
@keyframes rm-vt-out{to{opacity:.0;transform:translateY(-2.5vh) scale(.985);filter:blur(4px)}}
@keyframes rm-vt-in{
  from{clip-path:polygon(100% 0,100% 0,100% 100%,125% 100%)}
  to{clip-path:polygon(-25% 0,100% 0,100% 100%,0 100%)}}
html.rm-vt body{opacity:1 !important;transition:none !important}

/* スクロール進捗バーの先端に光 */
.rm .scroll-progress{transition:none}
.rm .scroll-progress::after{content:'';position:absolute;right:-1px;top:-3px;width:60px;height:8px;
  background:radial-gradient(ellipse at right center,rgba(255,255,255,.9),rgba(122,184,212,.4) 30%,transparent 70%);
  pointer-events:none}

/* ═══ 1. オープニング（トップ初回のみ・約1.9秒／クリック・スクロールでスキップ） ═══ */
html.rm-intro::after{content:'';position:fixed;inset:0;z-index:100000;background:#081826;
  animation:rm-intro-failsafe .5s 3.6s forwards}
html.rm-intro.rm-intro-run::after{display:none}
@keyframes rm-intro-failsafe{to{opacity:0;visibility:hidden}}
html.rm-intro body{opacity:1 !important}
.rm-intro-el{position:fixed;inset:0;z-index:100001;pointer-events:none}
.rm-intro-el .rm-sh{position:absolute;left:0;right:0;height:50.5%;background:#081826;
  transition:transform 1s var(--rm-ease-io)}
.rm-intro-el .rm-sh.t{top:0}
.rm-intro-el .rm-sh.b{bottom:0}
.rm-intro-el .rm-ln{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
  background:linear-gradient(90deg,transparent,rgba(122,184,212,.85) 30%,#fff 50%,rgba(122,184,212,.85) 70%,transparent);
  transform:scaleX(0);transition:transform 1s var(--rm-ease),opacity .6s ease}
.rm-intro-el .rm-lg{position:absolute;left:50%;top:50%;width:min(260px,52vw);transform:translate(-50%,-50%) translateY(-34px);
  opacity:0;filter:blur(10px);transition:opacity .8s var(--rm-ease),filter .9s var(--rm-ease),transform 1s var(--rm-ease)}
.rm-intro-el .rm-lg img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
.rm-intro-el .rm-cap{position:absolute;left:50%;top:50%;transform:translate(-50%,22px);white-space:nowrap;
  font-family:var(--eng);font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:rgba(122,184,212,.75);
  opacity:0;transition:opacity .8s ease .15s,letter-spacing 1.4s var(--rm-ease)}
.rm-intro-el.s1 .rm-ln{transform:scaleX(1)}
.rm-intro-el.s2 .rm-lg{opacity:1;filter:none;transform:translate(-50%,-50%) translateY(-28px)}
.rm-intro-el.s2 .rm-cap{opacity:1;letter-spacing:.3em}
.rm-intro-el.s3 .rm-lg,.rm-intro-el.s3 .rm-cap{opacity:0;transition-duration:.35s}
.rm-intro-el.s3 .rm-ln{opacity:0;transition-delay:.25s}
.rm-intro-el.s3 .rm-sh.t{transform:translateY(-101%)}
.rm-intro-el.s3 .rm-sh.b{transform:translateY(101%)}

/* ═══ 2. 文字：インクが滲むように現れる（1文字ずつ・焦点が合う） ═══ */
.rm-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rm-ink .rm-ch{opacity:0;filter:blur(5px);
  transition:opacity .4s var(--rm-ease-soft),filter .48s var(--rm-ease-soft);
  transition-delay:calc(var(--i) * var(--st,26ms) + var(--d,0ms))}
.rm-ink.rm-in .rm-ch{opacity:1;filter:blur(0)}

/* 見出し（h1）：1行ずつ下からせり上がる */
.rm-line{display:block;overflow:hidden;padding:.06em 0 .1em;margin:-.06em 0 -.1em}
.rm-line-i{display:inline-block;transform:translate3d(0,108%,0) rotate(.001deg);
  transition:transform 1s var(--rm-ease);transition-delay:calc(var(--l) * .1s + var(--d,0s))}
.rm-lines.rm-in .rm-line-i{transform:none}
/* せり上がり中は行で切り抜くため、影は表示後に付け直す（切り抜きの四角が見えないように） */
.rm-line-i{text-shadow:none}
.rm .hero:not(.rm-hold) .slide-text.active .rm-line{animation:rm-unclip .01s linear 2.7s forwards}
.rm .hero:not(.rm-hold) .slide-text.active .rm-line-i{animation:rm-shadow 1s ease 2.5s forwards}
@keyframes rm-unclip{to{overflow:visible}}
@keyframes rm-shadow{to{text-shadow:0 2px 40px rgba(0,0,0,.3)}}

/* 英字アイブロウ：罫線が伸び、文字が1字ずつ */
.rm-eb::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--rm-ease) .05s}
.rm-eb.rm-in::before{transform:scaleX(1)}
.rm-eb .rm-lt{opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--i) * 20ms + .1s)}
.rm-eb.rm-in .rm-lt{opacity:1}

/* 読み進めると灯る文章（スクロール連動） */
.rm-read .rm-ch{opacity:clamp(.16,calc((var(--rp,0) * (var(--n) + 14) - var(--i)) / 14),1);transition:none}

/* ═══ 3. 写真：斜めに差し込む光のように、ぼかした境目で左上から現れる＋奥行きの視差 ═══
   （下から上へ“窓が開く”方式は、境目が硬く機械的に見えるため v1.7.0 で変更）
   現れ終わったらマスクを外す（rm-done）。ずらした淡い面はその後に、写真の裏から静かに出てくる */
.rm-clip{-webkit-mask-image:linear-gradient(112deg,#000 0%,#000 40%,transparent 60%,transparent 100%);mask-image:linear-gradient(112deg,#000 0%,#000 40%,transparent 60%,transparent 100%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.3s cubic-bezier(.33,.6,.2,1),mask-position 1.3s cubic-bezier(.33,.6,.2,1)}
.rm-clip.rm-in{-webkit-mask-position:0 0;mask-position:0 0}
.rm-clip.rm-done{-webkit-mask-image:none;mask-image:none}
.rm-clip .rm-par{scale:1.2;filter:brightness(1.1) saturate(.9);transition:scale 2s var(--rm-ease),filter 1.6s ease}
.rm-clip.rm-in .rm-par{scale:1.12;filter:none}
.rm-par{will-change:translate}

/* ═══ 4. カーソルの光（暗いセクションで光が手元を照らし、格子が浮かぶ） ═══ */
.rm-glow-host{isolation:isolate}
.rm-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;overflow:hidden}
.rm-glow.z-under{z-index:-1}
.rm-glow::before{content:'';position:absolute;inset:0;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(122,184,212,.13),rgba(122,184,212,.04) 38%,transparent 65%)}
.rm-glow::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(122,184,212,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(122,184,212,.22) 1px,transparent 1px);
  background-size:54px 54px;background-position:var(--gox,0) var(--goy,0);
  -webkit-mask-image:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),#000,transparent 70%);
  mask-image:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),#000,transparent 70%)}
.rm-glow.on{opacity:1}

/* ═══ 5・6. マグネット（ボタンの引き寄せ）とカードの傾きは v1.9.0 で廃止 ═══ */

/* ═══ 8. SVGアイコン：線が描かれる ═══ */
.rm-draw path,.rm-draw circle,.rm-draw line,.rm-draw polyline,.rm-draw rect{
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1.8s var(--rm-ease);transition-delay:calc(var(--j,0) * 90ms + var(--d,.2s))}
.rm-draw.rm-in path,.rm-draw.rm-in circle,.rm-draw.rm-in line,.rm-draw.rm-in polyline,.rm-draw.rm-in rect{stroke-dashoffset:0}

/* ═══ 9. 罫線が描かれる（リスト行・ニュース行） ═══ */
.rm-rule{position:relative}
.rm-rule::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--blue-main);
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--rm-ease) .1s;pointer-events:none;opacity:.55}
.rm-rule.rm-in::before{transform:scaleX(1)}

/* ═══ 出現の順番：.rm-qu は motion.js が順番に .rm-go を付けるまで待つ（英字ラベル → 見出し → 本文 → 画像） ═══ */
html.rm-q .rm-qu:not(.rm-go){opacity:0 !important;transform:translate3d(0,22px,0) !important;transition:none !important}
html.rm-q .rm-qu.rm-go{transition-delay:0s !important}
/* 並んだカードを囲む格子の面・線は、カードが出そろってから（空の面だけが先に見えないように） */
html.rm-q .rm-wrap-pend{background-color:transparent !important;background-image:none !important;border-color:transparent !important;box-shadow:none !important}
html.rm-q .rm-wrap-pend>.rm-crn{opacity:0}
.rm-wrap-in{transition:background-color .7s ease,border-color .7s ease,box-shadow .9s ease}
.rm-wrap-in>.rm-crn{transition:opacity .7s ease}
html.rm-q .sol-row.rm-qu:not(.rm-go)::after{transform:scaleX(0) !important;transition:none !important}
html.rm-q .sol-row.rm-qu:not(.rm-go) .sol-num{opacity:0 !important;transition:none !important}

/* ── 初期状態へは“瞬時に”切り替える（隠す側のアニメーションを見せない） ── */
.rm-eb:not(.rm-in)::before,.rm-eb:not(.rm-in) .rm-lt,
.rm-clip:not(.rm-in) .rm-par,
.rm-draw:not(.rm-in) path,.rm-draw:not(.rm-in) circle,.rm-draw:not(.rm-in) line,.rm-draw:not(.rm-in) polyline,.rm-draw:not(.rm-in) rect,
.rm-lines:not(.rm-in) .rm-line-i{transition:none}

/* ═══════════════════ TOP ═══════════════════ */

/* ── HERO：スライドは“陽光のワイプ”で切り替わる ── */
.rm .hero .hero-slides{transform:translate3d(0,calc(var(--hp,0) * 26vh),0) scale(1.06);   /* v1.8.0：カーソルでは動かさない（スクロールのみ） */
  will-change:transform}
.rm .hero .slide{opacity:1;z-index:1;
  clip-path:polygon(100% 0,100% 0,100% 100%,125% 100%);
  transition:clip-path 0s linear 1.6s}
.rm .hero .slide.active{z-index:2;clip-path:polygon(-25% 0,100% 0,100% 100%,0 100%);
  transition:clip-path 1.55s var(--rm-ease-io)}
.rm .hero.rm-hero-init .slide.active{clip-path:polygon(100% 0,100% 0,100% 100%,125% 100%);transition:none}
.rm .hero .slide:not(.active) .slide-bg{transition:transform 0s linear 1.7s}
.rm .hero .slide.active .slide-bg{transition:transform 9s cubic-bezier(.2,.4,.3,1)}
/* 光の帯（ワイプの縁を陽光が走る） */
.rm-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(var(--rm-angle,67deg),transparent 44%,rgba(122,184,212,.08) 47%,rgba(255,255,255,.28) 49.4%,rgba(255,255,255,.85) 50%,rgba(200,230,245,.3) 50.6%,rgba(122,184,212,.08) 53%,transparent 56%);
  transform:translateX(62.5%)}
.rm-sweep.go{animation:rm-sweep 1.55s var(--rm-ease-io) forwards}
@keyframes rm-sweep{0%{transform:translateX(62.5%);opacity:1}88%{opacity:1}100%{transform:translateX(-62.5%);opacity:0}}
.hero.on-light .rm-sweep{mix-blend-mode:soft-light}

/* 空気感：光の筋と漂う微粒子（canvas） */
.rm-atmos{position:absolute;inset:0;z-index:4;pointer-events:none;width:100%;height:100%;opacity:0;transition:opacity 2s ease .4s}
.rm-atmos.on{opacity:1}
.hero.on-light .rm-atmos{opacity:.35}

/* コンテンツ：マウスで奥行き／スクロールで浮き上がって消える */
.rm .hero .hero-content{transform:translate3d(0,calc(var(--hp,0) * -14vh),0);
  opacity:calc(1 - var(--hp,0) * 1.5);will-change:transform,opacity}
.rm .hero .hero-controls{opacity:calc(1 - var(--hp,0) * 2.2)}

/* スライドの文字：枠ごと動かさず、要素ごとに時間差で */
.rm .hero .slide-text{transform:none;transition:opacity .45s ease}
.rm .hero .slide-text.active{transition:opacity .2s ease}
.rm .hero .slide-text .slide-eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--rm-ease) .7s}
.rm .hero .slide-text.active .slide-eyebrow::before{transform:scaleX(1)}
.rm .hero .slide-text .slide-eyebrow span{display:inline-block;opacity:0;transform:translate3d(-14px,0,0);
  transition:opacity .8s ease .85s,transform 1s var(--rm-ease) .85s}
.rm .hero .slide-text.active .slide-eyebrow span{opacity:1;transform:none}
.rm .hero .slide-text .rm-line-i{transition:transform 1.25s var(--rm-ease) calc(var(--l) * .12s + .95s)}
.rm .hero .slide-text.active .rm-line-i{transform:none}
.rm .hero .slide-text:not(.active) .rm-line-i{transition:transform 0s .5s}
.rm .hero .slide-text .slide-sub{opacity:0;filter:blur(8px);transform:translate3d(0,10px,0);
  transition:opacity 1s ease 1.85s,filter 1.2s var(--rm-ease) 1.85s,transform 1.2s var(--rm-ease) 1.85s}
.rm .hero .slide-text.active .slide-sub{opacity:1;filter:none;transform:none}
.rm .hero .slide-text .slide-btns{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .9s ease 2.2s,transform 1.1s var(--rm-ease) 2.2s}
.rm .hero .slide-text.active .slide-btns{opacity:1;transform:none}
.rm .hero .slide-text:not(.active) .slide-sub,
.rm .hero .slide-text:not(.active) .slide-btns,
.rm .hero .slide-text:not(.active) .slide-eyebrow span{transition:opacity .35s ease,filter 0s .5s,transform 0s .5s}
/* オープニング中は文字を待機させる */
.rm .hero.rm-hold .slide-text.active .rm-line-i{transform:translate3d(0,108%,0);transition:none}
.rm .hero.rm-hold .slide-text.active .slide-sub,
.rm .hero.rm-hold .slide-text.active .slide-btns,
.rm .hero.rm-hold .slide-text.active .slide-eyebrow span{opacity:0;transition:none}
.rm .hero.rm-hold .slide-text.active .slide-eyebrow::before{transform:scaleX(0);transition:none}
/* v2.3.0 スマホのスライド04（RESOLA）：ロゴは文字が出そろってから最後に現れる（ボタンの後） */
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  .rm .hero .bg-4{background-image:none}
  .rm .hero .bg-4::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:url('../images/top_slide4_resola.png') center bottom 20%/auto clamp(90px,15vh,140px) no-repeat;
    opacity:0;transform:translate3d(0,12px,0);transition:opacity .35s ease,transform 0s linear .35s}
  .rm .hero .slide.active .bg-4::after{opacity:1;transform:none;transition:opacity 1.1s ease 2.85s,transform 1.4s var(--rm-ease) 2.85s}
  .rm .hero.rm-hold .slide.active .bg-4::after{opacity:0;transform:translate3d(0,12px,0);transition:none}
}
/* 進捗ドット：番号が現在位置で強調 */
.rm .hero .dot-num{transition:color .4s,transform .6s var(--rm-ease)}
.rm .hero .dot.active .dot-num{transform:translateY(-3px)}

/* ヘッダーの色替えはワイプが通過するタイミングに合わせる */
.rm body.home header:not(.scrolled) .logo .logo-img{transition:filter .5s ease .55s}
.rm body.home header:not(.scrolled) .nav-item>a,.rm body.home header:not(.scrolled) .hc-num,.rm body.home header:not(.scrolled) .hc-hrs{transition:color .5s ease .5s}

/* ── TICKER：スクロールの速さに反応（JSで駆動） ── */
.rm-js-ticker .ticker-track{animation:none !important;will-change:transform}

/* ── 取扱ブランド帯（信頼の可視化） ── */
.rm-brands{position:relative;background:#fff;border-bottom:1px solid var(--border);overflow:hidden}
.rm-brands-in{max-width:var(--content);margin:0 auto;padding:46px 40px 44px;display:grid;
  grid-template-columns:minmax(0,190px) repeat(4,minmax(0,1fr));align-items:center;gap:0}
.rm-brands-h{padding-right:28px}
.rm-brands-h .eyebrow{margin-bottom:10px}
.rm-brands-h .rm-brands-jp{font-family:var(--mincho);font-size:15px;font-weight:500;color:var(--text-main);letter-spacing:.06em;line-height:1.6}
.rm-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 18px;
  text-decoration:none;border-left:1px solid var(--border);position:relative;min-height:116px;transition:background .4s var(--rm-ease)}
/* ロゴは各社の色のまま（白黒にしない）。カーソルを合わせても動かさない */
.rm-brand img{display:block;height:44px;max-width:100%;object-fit:contain}       /* 高さをそろえて、下の肩書きの位置を合わせる */
.rm-brand:focus{outline:none}
.rm-brand:focus-visible{outline:1px solid var(--blue-main);outline-offset:-6px}
.rm-brand-role{font-family:var(--jpn);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--blue-main);
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.rm-brand-role::before{content:'';width:14px;height:1px;background:currentColor;opacity:.6}
.rm-brand::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue-main);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--rm-ease)}
.rm-brand:hover{background:var(--sky)}
.rm-brand:hover::after{transform:scaleX(1)}
/* 帯の中をゆっくり横切る光（14秒周期） */
.rm-brands::after{content:'';position:absolute;top:0;bottom:0;left:-30%;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(122,184,212,.10) 45%,rgba(255,255,255,.55) 50%,rgba(122,184,212,.10) 55%,transparent);
  animation:rm-shine 14s ease-in-out infinite 3s}
@keyframes rm-shine{0%{transform:translateX(0)}22%,100%{transform:translateX(460%)}}
@media(max-width:900px){
  .rm-brands-in{grid-template-columns:repeat(2,minmax(0,1fr));padding:34px 24px 30px;row-gap:18px}
  .rm-brands-h{grid-column:1/-1;padding:0;text-align:center}
  .rm-brands-h .eyebrow{justify-content:center}
  .rm-brand{min-height:96px;padding:10px 8px}
  .rm-brand:nth-child(2),.rm-brand:nth-child(4){border-left:0}
  .rm-brand-role{font-size:10.5px;letter-spacing:.02em;white-space:normal;text-align:center}
  .rm-brand-role::before{display:none}
  .rm-brand img{height:34px}
}

/* ── 我が信条：巨大な「RE」がゆっくり浮かぶ ── */
.rm .manifesto::before{transform:translate3d(0,calc(var(--p,0) * -90px + 40px),0);will-change:transform}

/* ── 4つのソリューション（v1.8.0：カーソルに写真がついてくる演出は廃止） ── */
.rm .sol-row .sol-num{transition-property:opacity,transform,translate,color}

/* ── MLPE：パネルの配列が“1枚ずつ”光る（canvas） ── */
.rm .mlpe.rm-win{clip-path:inset(0 calc(var(--win,0) * 1px) 0 calc(var(--win,0) * 1px))}
.rm-array{position:absolute;left:-30%;width:160%;bottom:-8%;height:140%;z-index:1;pointer-events:none;
  transform-origin:50% 100%;transform:perspective(1300px) rotateX(34deg);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 22%,rgba(0,0,0,.45) 55%,transparent 82%);
  mask-image:linear-gradient(to top,#000 0%,#000 22%,rgba(0,0,0,.45) 55%,transparent 82%);
  opacity:0;transition:opacity 2.2s ease}
.rm-array.on{opacity:1}
.rm .mlpe .mlpe-cards{position:relative;z-index:2}
.rm .mlpe-card{background:rgba(19,45,64,.9)}
.rm .mlpe-card:hover{background:rgba(8,24,38,.92)}

/* ── MLPE「5つのメリット」：セクションの中の舞台で、5つが自動で巡る（幅900px以上） ──
   .rm-mx-on が付いている間だけ有効。外れると、従来の5枚並び＋背景のパネル配列に戻る。 */
.rm-mx-cv,.rm-mx-num,.rm-mx-idx,.rm-mx-hud{display:none}
.rm .mlpe.rm-mx-on .rm-array{display:none}
.rm-mx-on .rm-mx{position:relative;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:0 clamp(32px,4vw,64px);
  min-height:clamp(560px,64vh,660px);align-items:center;margin-top:8px}
.rm-mx-on .rm-mx-col{position:relative;z-index:2;padding:12px 0 8px}
.rm-mx-on .rm-mx-stage{position:relative;align-self:stretch;min-height:520px}
.rm-mx-on .rm-mx-cv{display:block;position:absolute;top:-56px;bottom:-56px;left:-110px;width:calc(100% + 110px + var(--rm-bleed,0px));height:calc(100% + 112px);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 150px),linear-gradient(180deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 150px),linear-gradient(180deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  mask-composite:intersect}
.rm-mx-on .rm-mx-stage{pointer-events:auto}
.rm-mx-on .mlpe-cards-head{margin:0 0 clamp(18px,3.4vh,34px);display:block}
.rm-mx-on .mlpe-cards-head .eyebrow{margin-bottom:10px}

/* 大きな番号：数字が回って切り替わる */
.rm-mx-on .rm-mx-num{display:flex;align-items:flex-end;gap:14px;margin:0 0 clamp(10px,2vh,20px)}
.rm-mx-num-w{display:block;height:1.06em;overflow:hidden;font-family:var(--num);font-weight:500;font-size:clamp(54px,6.4vw,80px);line-height:1.06;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.rm-mx-num-s{display:block;transform:translateY(calc(var(--i,0) * -1.06em));transition:transform 1.1s var(--rm-ease)}
.rm-mx-num-s>span{display:block;height:1.06em}
.rm-mx-num-of{font-family:var(--num);font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.45);padding-bottom:.9em}

/* 5枚のカードは同じ場所に重ね、現在の1枚だけを見せる */
.rm .rm-mx-on .mlpe-cards{display:grid;grid-template-columns:minmax(0,1fr);background:none;border:0;gap:0;min-height:15.5em}
.rm .rm-mx-on .mlpe-card,.rm .rm-mx-on .mlpe-card.reveal{grid-area:1/1;grid-column:1/-1;background:none;padding:0;overflow:visible;
  opacity:1;transform:none;transition:none;pointer-events:none;box-shadow:none;border:0}
.rm .rm-mx-on .mlpe-card.rm-cur{pointer-events:auto}
.rm .rm-mx-on .mlpe-card:hover{background:none}
.rm-mx-on .mlpe-card::before,.rm-mx-on .mlpe-card::after,.rm-mx-on .mlpe-card .rm-sheen{display:none}
.rm-mx-on .mlpe-card-num{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rm-mx-on .mlpe-icon{width:38px;height:38px;margin-bottom:clamp(12px,2vh,20px);opacity:0;transform:translate3d(0,10px,0);transition:none}
.rm-mx-on .mlpe-card-title{font-family:var(--mincho);font-size:clamp(21px,1.95vw,27px);font-weight:500;line-height:1.5;letter-spacing:.03em;
  margin-bottom:clamp(10px,1.8vh,16px);overflow:hidden;padding-bottom:.08em}
.rm-mx-ti{display:block}
.rm-mx-on .rm-mx-ti{transform:translateY(108%);transition:none}
.rm-mx-on .mlpe-card-body{font-size:14px;line-height:2.05;color:rgba(255,255,255,.74);max-width:28em;
  opacity:0;filter:blur(6px);transform:translate3d(0,14px,0);transition:none}
.rm-mx-on .rm-back .mlpe-card:not(.rm-cur):not(.rm-out) .rm-mx-ti{transform:translateY(-108%)}
.rm-mx-on .rm-back .mlpe-card:not(.rm-cur):not(.rm-out) .mlpe-card-body{transform:translate3d(0,-14px,0)}
/* 出ていく1枚：本文 → 見出しの順に消える */
.rm-mx-on .mlpe-card.rm-out .mlpe-card-body{opacity:0;filter:blur(6px);transform:translate3d(0,-12px,0);transition:opacity .3s ease,filter .35s ease,transform .4s ease}
.rm-mx-on .mlpe-card.rm-out .rm-mx-ti{transform:translateY(-108%);transition:transform .45s cubic-bezier(.55,0,.8,.25) .12s}
.rm-mx-on .mlpe-card.rm-out .mlpe-icon{opacity:0;transition:opacity .3s ease}
.rm-mx-on .rm-back .mlpe-card.rm-out .rm-mx-ti{transform:translateY(108%)}
.rm-mx-on .rm-back .mlpe-card.rm-out .mlpe-card-body{transform:translate3d(0,12px,0)}
/* 入ってくる1枚：番号 → アイコン → 見出し → 本文 */
.rm-mx-on .mlpe-card.rm-cur .mlpe-icon{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .9s var(--rm-ease) .25s}
.rm-mx-on .mlpe-card.rm-cur .rm-mx-ti{transform:none;transition:transform 1.05s var(--rm-ease) .45s}
.rm-mx-on .mlpe-card.rm-cur .mlpe-card-body{opacity:1;filter:none;transform:none;
  transition:opacity .9s ease 1.05s,filter 1.1s var(--rm-ease) 1.05s,transform 1.1s var(--rm-ease) 1.05s}

/* 見出しが出てから：番号 → カード（下記）→ 目次 の順に */
.rm-mx-on .rm-mx-num,.rm-mx-on .rm-mx-idx,.rm-mx-on .rm-mx-hud{opacity:0;translate:0 14px;transition:none}
.rm-mx-on .rm-mx.rm-live .rm-mx-num{opacity:1;translate:0 0;transition:opacity .8s ease .45s,translate 1s var(--rm-ease) .45s}
.rm-mx-on .rm-mx.rm-live .rm-mx-idx{opacity:1;translate:0 0;transition:opacity .9s ease 2.4s,translate 1.1s var(--rm-ease) 2.4s}
.rm-mx-on .rm-mx.rm-live .rm-mx-hud{opacity:1;translate:0 0;transition:opacity .9s ease 1.6s,translate 1.1s var(--rm-ease) 1.6s}

/* 目次：番号＋短い見出し。いまの場面の進み具合を細い線で */
.rm-mx-on .rm-mx-idx{display:block;list-style:none;margin:clamp(20px,3.6vh,40px) 0 0;padding:0}
.rm-mx-idx li{margin:0}
.rm-mx-go{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;width:100%;max-width:300px;padding:7px 0 8px;background:none;border:0;
  color:rgba(255,255,255,.42);font:inherit;text-align:left;cursor:pointer;position:relative;transition:color .26s ease}
.rm-mx-go .n{font-family:var(--num);font-size:12px;letter-spacing:.06em}
.rm-mx-go .t{font-size:12.5px;letter-spacing:.06em}
.rm-mx-go i{position:absolute;left:34px;right:0;bottom:0;height:1px;background:rgba(255,255,255,.1);overflow:hidden}
.rm-mx-go i b{position:absolute;inset:0;background:var(--blue-light,#7ab8d4);transform-origin:left;transform:scaleX(var(--f,0))}
.rm-mx-idx li.on .rm-mx-go{color:#fff}
.rm-mx-go:hover{color:rgba(255,255,255,.9)}
.rm-mx-go:focus-visible{outline:1px solid var(--blue-light,#7ab8d4);outline-offset:3px}
.rm-mx.rm-hold .rm-mx-idx li.on .rm-mx-go i b{opacity:.55}

/* 右下の一時停止・再生ボタン */
.rm-mx-pp{display:none}
.rm-mx-on .rm-mx-pp{display:inline-flex;align-items:center;gap:11px;position:absolute;right:0;bottom:6px;z-index:4;height:38px;padding:0 16px 0 14px;
  background:rgba(8,24,38,.38);border:1px solid rgba(122,184,212,.38);border-radius:0;color:rgba(255,255,255,.82);cursor:pointer;
  font-family:var(--eng);font-size:11px;letter-spacing:.22em;text-transform:uppercase;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;translate:0 10px;transition:none}
.rm-mx-on .rm-mx.rm-live .rm-mx-pp{opacity:1;translate:0 0;transition:opacity .9s ease 2.6s,translate 1.1s var(--rm-ease) 2.6s,border-color .3s,background .3s,color .3s}
.rm-mx-on .rm-mx-pp:hover{border-color:rgba(214,236,248,.75);background:rgba(19,45,64,.62);color:#fff}
.rm-mx-on .rm-mx-pp:focus{outline:none}
.rm-mx-on .rm-mx-pp:focus-visible{outline:1px solid #d6ecf8;outline-offset:3px}
.rm-mx-pp-i{position:relative;display:inline-block;width:10px;height:12px}
.rm-mx-pp-i i{position:absolute;top:0;width:3px;height:12px;background:currentColor;transition:opacity .25s}
.rm-mx-pp-i i:first-child{left:0}.rm-mx-pp-i i:last-child{right:0}
.rm-mx-pp-i::before{content:'';position:absolute;left:1px;top:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;opacity:0;transition:opacity .25s}
.rm-paused .rm-mx-pp-i i{opacity:0}
.rm-paused .rm-mx-pp-i::before{opacity:1}

/* 右上の計器表示（いま何が起きているか） */
.rm-mx-on .rm-mx-hud{display:block;position:absolute;right:0;top:0;z-index:3;width:230px;text-align:right;
  font-family:var(--eng);color:rgba(122,184,212,.9);pointer-events:none}
.rm-mx-hud-k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.rm-mx-hud-ph{list-style:none;margin:0;padding:0}
.rm-mx-hud-ph li{font-size:13px;letter-spacing:.14em;text-transform:uppercase;line-height:1.75;opacity:.32;transition:opacity .5s ease,color .5s ease}
.rm-mx-hud-ph li.on{opacity:1;color:#fff}
.rm-mx-hud-ph li.on::before{content:'';display:inline-block;width:14px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}
.rm-mx-hud-g{margin-top:12px}
.rm-mx-hud-gl{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:4px}
.rm-mx-hud-g svg{display:block;width:160px;height:34px;margin-left:auto;overflow:visible}
.rm-mx-hud-g path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.rm-mx-hud-g path.a{stroke:rgba(122,184,212,.22)}
.rm-mx-hud-g path.b{stroke:#d6ecf8;stroke-dasharray:100;stroke-dashoffset:100}
.rm-mx-hud-g circle{fill:#d6ecf8}

/* ── CTA：電話番号 ── */
.rm .cta-tel a{display:inline-block}

/* ═══════════════════ 下層ページ ═══════════════════ */

/* ページヒーロー：床の格子がゆっくり流れ、光の粒が漂う */
.rm .page-hero .ph-texture,.rm .cs-hero-texture{animation:rm-floor 7s linear infinite}
@keyframes rm-floor{from{background-position:0 0}to{background-position:0 54px}}
.rm .page-hero .ph-bg,.rm .cs-hero-bg{transform:translate3d(0,calc(var(--hp,0) * 18vh),0) scale(1.06);will-change:transform}
.rm .page-hero .ph-content,.rm .cs-hero-content{transform:translate3d(0,calc(var(--hp,0) * -10vh),0);
  opacity:calc(1 - var(--hp,0) * 1.35)}
.rm .page-hero .ph-bg::after,.rm .cs-hero-bg::after{content:'';position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(ellipse 45% 55% at 70% 40%,rgba(122,184,212,.16),transparent 70%);
  animation:rm-breathe 16s ease-in-out infinite alternate}
@keyframes rm-breathe{0%{transform:translate3d(-6%,2%,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.12)}100%{transform:translate3d(-2%,4%,0) scale(1.04)}}
.rm-ph .ph-breadcrumb,.rm-ph .cs-breadcrumb{opacity:0;transform:translate3d(0,8px,0);transition:opacity .9s ease .1s,transform 1s var(--rm-ease) .1s}
.rm-ph .ph-sub,.rm-ph .cs-sub{opacity:0;filter:blur(8px);transform:translate3d(0,10px,0);
  transition:opacity 1s ease var(--rm-sub-d,1.1s),filter 1.2s var(--rm-ease) var(--rm-sub-d,1.1s),transform 1.2s var(--rm-ease) var(--rm-sub-d,1.1s)}
/* 見出しの後に出る：数字・右の枠・ボタン */
.rm-ph .rm-ph-late,.rm-ph .rm-ph-late.reveal{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .9s ease var(--rm-late-d,1.4s),transform 1.1s var(--rm-ease) var(--rm-late-d,1.4s)}
.rm-ph:not(.rm-ph-in) .ph-breadcrumb,.rm-ph:not(.rm-ph-in) .cs-breadcrumb,.rm-ph:not(.rm-ph-in) .ph-sub,.rm-ph:not(.rm-ph-in) .cs-sub,.rm-ph:not(.rm-ph-in) .rm-ph-late{transition:none}
.rm-ph.rm-ph-in .ph-breadcrumb,.rm-ph.rm-ph-in .cs-breadcrumb,.rm-ph.rm-ph-in .ph-sub,.rm-ph.rm-ph-in .cs-sub,
.rm-ph.rm-ph-in .rm-ph-late,.rm-ph.rm-ph-in .rm-ph-late.reveal{opacity:1;filter:none;transform:none}

/* 事業ページのヒーロー：右奥のパネル配列（開発＝据え付け／O&M＝点検の光／発電＝電力が流れる など） */
.rm-hf{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity 2.4s ease .5s;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 50%,#000 70%),linear-gradient(to top,#000 16%,rgba(0,0,0,.42) 44%,transparent 74%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 50%,#000 70%),linear-gradient(to top,#000 16%,rgba(0,0,0,.42) 44%,transparent 74%);
  mask-composite:intersect}
.rm-hf.rm-hf-open{-webkit-mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 50%,#000 70%),linear-gradient(to top,#000 16%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.25) 90%);
  mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.5) 50%,#000 70%),linear-gradient(to top,#000 16%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.25) 90%)}
.rm-ph.rm-ph-in .rm-hf{opacity:.74}
.rm-has-hf .ph-right{text-shadow:0 0 16px rgba(8,24,38,.8)}
/* パネルの上に乗るボタンは、すりガラス越しに */
.rm-has-hf .ph-hero-cta .btn-ghost{background:rgba(19,45,64,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:799px){.rm-hf{display:none}}

/* 大きな英字のゴースト：スクロールで横に流れる */
.rm .rp-ghost{will-change:transform}

/* 発電所マップ：地図はひとつの面として現れ（ずらさない）、保有する地域が南西から順に紺に染まる */
html.rm-q .pm-svg-wrap.rm-qu:not(.rm-go),.rm .pm-svg-wrap.reveal{transform:none !important}
.rm-map .pm-region,.rm-map .pm-region path{fill:rgba(74,122,155,.2)}
.rm-map.rm-in .pm-region,.rm-map.rm-in .pm-region path{fill:#2d6189;transition:fill 1s cubic-bezier(.4,.1,.2,1) calc(var(--k) * 140ms + .45s)}
.rm-map.rm-map-done .pm-region,.rm-map.rm-map-done .pm-region path{transition:fill .18s cubic-bezier(.16,1,.3,1)}
.rm .rm-pmc:not(.rm-on){opacity:0 !important;transform:translate3d(0,10px,0) !important;transition:none !important}
.rm .rm-pmc.rm-on{opacity:1 !important;transform:none !important;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.16,1,.3,1) !important}

/* ═══ スマホ・タッチ端末：負荷と誤作動を避けて控えめに ═══ */
@media (hover:none),(pointer:coarse){
  .rm .hero .hero-slides{transform:translate3d(0,calc(var(--hp,0) * 22vh),0) scale(1.04)}
  .rm .hero .hero-content{transform:translate3d(0,calc(var(--hp,0) * -10vh),0)}
  .rm-array{transform:perspective(900px) rotateX(40deg);left:-60%;width:220%}
}
@media(max-width:768px){
  .rm .mlpe.rm-win{clip-path:none}
  .rm .page-hero .ph-bg{transform:none}
  .rm .page-hero .ph-content{transform:translate3d(0,calc(var(--hp,0) * -8vh),0)}
}

/* ═══ 動きを減らす設定：すべて停止し、最終状態で表示 ═══ */
@media (prefers-reduced-motion:reduce){
  .rm-brands::after,.rm .page-hero .ph-texture,.rm .page-hero .ph-bg::after,.rm .cs-hero-texture,.rm .cs-hero-bg::after{animation:none !important}
  .rm-atmos,.rm-array,.rm-glow,.rm-sweep,.rm-intro-el,.rm-hf,.rm-mx-cv{display:none !important}
  html.rm-intro::after{display:none}
  .rm .hero .hero-slides,.rm .hero .hero-content,.rm .page-hero .ph-bg,.rm .page-hero .ph-content{transform:none !important;opacity:1 !important}
  .rm .hero .slide{clip-path:none !important;opacity:0;transition:opacity .01s}
  .rm .hero .slide.active{opacity:1}
  .rm-clip,.rm-clip.rm-in{clip-path:none !important;-webkit-mask-image:none !important;mask-image:none !important}
}

/* ═══════════════════════════════════════════════════════════════════
   装い：箱と写真を“置いた”ように見せる（v1.6.0／v1.7.0 で額装を追加）
   角丸なし・影は不透明度0.1未満。v1.7.0 でご要望により、ずらした淡い面（台紙）と対角2隅の角線を追加
   （旧ガイドライン差分チェック T-02 とは方向が異なるため、ガイドライン側の更新が必要）。
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --rm-paper:0 1px 1px rgba(8,24,38,.03),0 3px 8px -2px rgba(8,24,38,.045),0 24px 48px -28px rgba(8,24,38,.09);
  --rm-paper-hi:0 1px 1px rgba(8,24,38,.03),0 6px 14px -4px rgba(8,24,38,.06),0 34px 60px -30px rgba(8,24,38,.095);
  --rm-photo:0 2px 4px rgba(8,24,38,.04),0 18px 36px -18px rgba(8,24,38,.08),0 50px 80px -50px rgba(8,24,38,.09);
}
/* 明るい面の箱：紙のような淡い厚み */
.rm :is(.show-block,.repower-pillar,.sim-wrap,.case-card,.other-card,.issues-grid-8,.proposal-card,.pm-cbox,.pm-stat,
  .others-card,.cs-related-card,.pos-card,.req-wrap,.channels-grid,.form-wrap,.access-info,
  .pickup-card,.article-nav-card,.profile-table,.cmp-card.old,.brands-grid,.cs-ba-card,section blockquote){
  box-shadow:var(--rm-paper)}
.rm :is(.show-block,.case-card,.other-card,.proposal-card,.pm-cbox,.pm-stat,.others-card,.cs-related-card,.pos-card,.access-info,
  .pickup-card,.article-nav-card,.cmp-card.old,.repower-pillar){
  background-image:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(240,246,250,.55))}
/* 押せる箱：ほんの少し浮く（0.26秒） */
.rm :is(a.cs-related-card,a.pickup-card,a.article-nav-card,a.brand,.show-block,.other-card,.pos-card,.proposal-card){
  transition:box-shadow .26s cubic-bezier(.22,.61,.36,1),translate .26s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){
  .rm :is(a.cs-related-card,a.pickup-card,a.article-nav-card,.other-card,.pos-card,.proposal-card):hover{box-shadow:var(--rm-paper-hi)}
}
/* 角丸はガイドラインに合わせて直角に（元テーマに残っていた箇所） */
.rm :is(.pm-stat,.pm-cbox,.schematic,.schematic-label,.cmp-card,.cmp-title,.total,.pnl,.chip,.chip .fill){border-radius:0}

/* 暗い面の箱：上辺にだけ細い光、面はわずかに明るく */
.rm :is(.nonfit-strat,.cs-stat,.resola-card,.issues-approach,.cmp-card.new,.schematic){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.04)}
.rm :is(.nonfit-strat,.cs-stat){background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 70%)}
.rm .issues-approach{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--rm-paper)}
.rm .mlpe:not(.rm-mx-on) .mlpe-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* 写真：外側にごく淡い影、内側に細い光の縁（.rm-key は motion.js が入れる） */
.rm :is(.portrait,.strength-img,.indust-img,.psite-item,.resola-img,.article-hero-img){box-shadow:var(--rm-photo)}
.rm-key{position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%)}
.rm-key.on-light{box-shadow:inset 0 0 0 1px rgba(19,45,64,.08),inset 0 1px 0 rgba(255,255,255,.5);background:none}

/* ── 画像はカーソルを合わせても動かさない（v1.8.0）：元テーマの拡大・持ち上げを止める ── */
.rm :is(.portrait img,.cs-related-img-bg,.other-img-bg,.pickup-img-bg,.strength-img-bg,.indust-img-bg,.mproof-im img,.psite-item img,
  .resola-img-bg,.resola-img-logo img,.pos-img-bg,.show-img-bg,.work-visual .v-bg,.brand-logo){transform:none !important}
.rm :is(.pickup-card,.brand-card,.brands .brand,.other-card,.pos-card,.cs-related-card,.show-block,.article-nav-card):hover{transform:none !important;translate:none !important}

/* ── 額装（v1.7.0・ご要望により追加）：ずらした淡い面＋対角2隅の細い角線＋写真の札 ──
   面は不透明度0.14の淡い青（影ではなく“台紙”）。角線は1px。写真の札は紺の面に細い内枠。
   箱の中にある写真には面を付けず、箱の面に任せる（二重にしない） */
:root{--rm-plate:rgba(74,122,155,.15);--rm-plate-dk:rgba(122,184,212,.11);--rm-plate-ph:rgba(74,122,155,.17)}
.rm .rm-deco{border-radius:0 !important;box-shadow:9px 9px 0 -1px var(--rm-plate),var(--rm-paper)}
.rm .rm-deco.rm-deco-dk{box-shadow:9px 9px 0 -1px var(--rm-plate-dk),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.04)}
.rm .rm-deco.issues-approach{box-shadow:9px 9px 0 -1px var(--rm-plate),inset 0 1px 0 rgba(255,255,255,.07),var(--rm-paper)}
@media (hover:hover){
  .rm :is(a.cs-related-card,a.pickup-card,a.article-nav-card,.other-card,.pos-card,.proposal-card).rm-deco:hover{box-shadow:9px 9px 0 -1px var(--rm-plate),var(--rm-paper-hi)}
}
.rm .rm-deco:is(a.cs-related-card,a.pickup-card,a.article-nav-card,.show-block,.other-card,.pos-card,.proposal-card){
  transition:box-shadow .26s cubic-bezier(.22,.61,.36,1),translate .26s cubic-bezier(.22,.61,.36,1)}
.rm-crn{position:absolute;inset:-7px;pointer-events:none;z-index:4}
.rm-crn.in{inset:10px}
.rm-crn::before,.rm-crn::after{content:'';position:absolute;width:14px;height:14px;border:0 solid rgba(74,122,155,.5)}
.rm-crn::before{left:0;top:0;border-top-width:1px;border-left-width:1px}
.rm-crn::after{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.rm-deco-dk>.rm-crn::before,.rm-deco-dk>.rm-crn::after{border-color:rgba(122,184,212,.45)}
/* 単独の写真：裏からずらした面が出てくる（現れ終わってから） */
.rm .rm-photo{box-shadow:14px 14px 0 0 var(--rm-plate-ph),var(--rm-photo);transition:box-shadow 1s cubic-bezier(.16,1,.3,1)}
.rm .rm-photo.rm-photo-dk{box-shadow:14px 14px 0 0 var(--rm-plate-dk),var(--rm-photo)}
.rm .rm-photo.rm-clip:not(.rm-done){box-shadow:0 0 0 0 var(--rm-plate-ph),var(--rm-photo)}
/* 写真の現れ方（光のマスク）・裏の面・枠の出入りを1つにまとめる（個別の transition が互いを上書きしないように） */
.rm .rm-clip{transition:-webkit-mask-position 1.3s cubic-bezier(.33,.6,.2,1),mask-position 1.3s cubic-bezier(.33,.6,.2,1),
  opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1),box-shadow 1s cubic-bezier(.16,1,.3,1),translate .26s cubic-bezier(.22,.61,.36,1)}
.rm .rm-photo.rm-photo-dk.rm-clip:not(.rm-done){box-shadow:0 0 0 0 var(--rm-plate-dk),var(--rm-photo)}
/* 写真の内側：対角2隅の細い白線（.rm-key） */
.rm-key::before,.rm-key::after{content:'';position:absolute;width:44px;height:44px;border:0 solid rgba(255,255,255,.62)}
.rm-key::before{left:16px;top:16px;border-top-width:1px;border-left-width:1px}
.rm-key::after{right:16px;bottom:16px;border-right-width:1px;border-bottom-width:1px}
.rm-key.on-light::before,.rm-key.on-light::after{border-color:rgba(255,255,255,.75)}
.rm-sm>.rm-key::before,.rm-sm>.rm-key::after{width:16px;height:16px}
.rm-sm>.rm-key::before{left:8px;top:8px}.rm-sm>.rm-key::after{right:8px;bottom:8px}
.rm .rm-photo.rm-sm{box-shadow:8px 8px 0 0 var(--rm-plate-ph),var(--rm-photo)}
.rm .rm-photo.rm-sm.rm-photo-dk{box-shadow:8px 8px 0 0 var(--rm-plate-dk),var(--rm-photo)}
.rm-crn.br::before{display:none}
/* 写真の札：紺の面＋細い内枠、英字は明朝系で字間を広く */
.rm :is(.show-img-tag,.other-tag,.cs-ba-img-tag,.resola-img-tag,.indust-img-tag){
  background:linear-gradient(135deg,rgba(14,32,50,.9),rgba(30,56,80,.82));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  outline:1px solid rgba(255,255,255,.26);outline-offset:-4px;border-radius:0;
  font-size:11.5px;letter-spacing:.24em;padding:10px 18px 10px 20px;z-index:3}

/* ── 製品ページ「MLPEとは？」の図と比較 ── */
/* v2.1.0：図は「夜の図」に（下の「MLPEの仕組み（夜の図）」） */
.rm .schematic::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(122,184,212,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(122,184,212,.09) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 55% 60%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 55% 60%,#000,transparent 75%)}
.rm .schematic-label{letter-spacing:.16em;padding:7px 18px 7px 16px}
.rm .schematic svg{position:relative}
.rm-sch .sch-rays line{stroke:#9cc6dc;stroke-width:1.4;stroke-linecap:round}
.rm-sch .wire{stroke-width:1.6}
.rm-sch .wire-flow{stroke-width:2.2;stroke-dasharray:5 9}
.rm-sch .sch-rays{transform-box:fill-box;transform-origin:center;animation:rm-sch-rot 60s linear infinite}
.rm-sch .sch-halo{transform-box:fill-box;transform-origin:center;animation:rm-sch-breathe 5s ease-in-out infinite alternate}
.rm-sch .sch-led{animation:rm-sch-led 4.8s ease-in-out infinite;animation-delay:calc(var(--k) * .48s)}
.rm-sch .sch-sweep{animation:rm-sch-sweep 7s cubic-bezier(.6,0,.4,1) infinite}
.rm-sch .sch-graph{stroke-dasharray:100;stroke-dashoffset:100;animation:rm-sch-graph 6s ease-in-out infinite}
.rm-sch .sch-led-z{animation:rm-sch-blink 1.8s ease-in-out infinite}
.rm-sch .sch-led-p{animation:rm-sch-blink 2.4s ease-in-out infinite .6s}
.rm-sch .sch-sig path{opacity:0;animation:rm-sch-sig 2.4s ease-out infinite}
.rm-sch .sch-sig path+path{animation-delay:.35s}
.rm-sch .sch-target{animation:rm-sch-target 3.6s ease-in-out infinite}
.rm-sch .sch-leader{animation:rm-sch-dash 1.6s linear infinite}
@keyframes rm-sch-rot{to{transform:rotate(360deg)}}
@keyframes rm-sch-breathe{from{transform:scale(.92);opacity:.75}to{transform:scale(1.08);opacity:1}}
@keyframes rm-sch-led{0%,62%,100%{opacity:.3}74%{opacity:1}}
@keyframes rm-sch-blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes rm-sch-sweep{0%{transform:skewX(-28deg) translateX(-160px)}60%,100%{transform:skewX(-28deg) translateX(330px)}}
@keyframes rm-sch-graph{0%{stroke-dashoffset:100}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes rm-sch-sig{0%{opacity:0}25%{opacity:.9}100%{opacity:0}}
@keyframes rm-sch-target{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
@keyframes rm-sch-dash{to{stroke-dashoffset:-12}}

.rm .cmp-card.old{border-color:rgba(19,45,64,.1)}
.rm .cmp-card.new{background:linear-gradient(165deg,#12304a,#0a1826 70%)}
.rm .cmp-title{letter-spacing:.06em;padding:11px 10px}
.rm .cmp-card .total{box-shadow:inset 0 0 0 1px rgba(19,45,64,.05)}
.rm .cmp-card.new .total{box-shadow:inset 0 0 0 1px rgba(122,184,212,.12),inset 0 1px 0 rgba(255,255,255,.06)}
/* パネル：3列×6段のセル、ガラスの光、細い枠 */
.rm .pnl{background:linear-gradient(160deg,#3a7299 0%,#25587d 55%,#1b4363 100%);box-shadow:inset 0 0 0 1px rgba(156,198,220,.55),0 1px 2px rgba(8,24,38,.12)}
.rm .pnl::before{background-image:linear-gradient(rgba(214,236,248,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(214,236,248,.16) 1px,transparent 1px);background-size:33.34% 16.67%}
.rm .pnl::after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.18),rgba(255,255,255,0) 42%);pointer-events:none}
/* 葉（絵文字だった部分を、同じ“葉”の線画に） */
.rm .pnl .leaf{font-size:0;line-height:0;filter:brightness(2.25) drop-shadow(0 1px 2px rgba(8,24,38,.45));width:22px;height:22px;top:40%}
.rm .pnl .leaf::before{background:radial-gradient(circle,rgba(214,236,248,.22),transparent 70%)}
.rm-leaf{display:block;width:22px;height:22px}
.rm-leaf .b{fill:#e4ebf0}
.rm-leaf .v{fill:none;stroke:#93a8b7;stroke-width:1.1;stroke-linecap:round}

@media (prefers-reduced-motion:reduce){
  .rm-sch *,.rm .pnl .leaf{animation:none !important}
}

/* ═══════════════════════════════════════════════════════════════════
   仕上げ（v1.9.0）：動かさない・文字組み・スマホの文字の大きさ・フォーム・角・フォーカス
   色は既存トークン（navy / blue-main / blue-light / sky）のみ。文言は変えない。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. カーソルを合わせても、箱・アイコン・行は動かさない（色と影だけが変わる） ── */
.rm :is(.article-nav-card,.brand-card,.case-card,.cs-related-card,.other-card,.pickup-card,.pos-card,.proposal-card,
  .repower-pillar,a.brand,.depth,.show-block,.channel,.why-item,.issue-item):hover{transform:none !important;translate:none !important}
.rm .mlpe:not(.rm-mx-on) .mlpe-card:hover{transform:none}
.rm :is(.channel:hover .ch-icon,.issue-item:hover .issue-icon,.mlpe-icon-row:hover .mlpe-icon-wrap,.show-block:hover .show-num,
  .why-item:hover .why-num,.flow-step:hover .flow-num-dot,.vnode:hover .vnode-badge){transform:none !important}
.rm .ft-col a:hover{padding-left:0}
.rm .ft-col a{transition:color .3s ease}
html[data-rm-page="top"] .news-row:hover{padding-left:0}
html[data-rm-page="news"] .news-row:hover{padding-left:24px}
.rm .news-row{transition:background .4s ease,border-color .4s ease}
.rm .sol-row:hover .sol-arrow{transform:none}
.rm .sol-arrow{transition:background .26s ease,border-color .26s ease,color .26s ease}
.rm .sol-row:hover .sol-name-wrap{transform:none}
.rm .sol-row:hover .sol-num{translate:none}
.rm .sol-row:hover .sol-name{color:var(--blue-main,#2d6189)}
.rm :is(.news-row:hover .news-arrow,.logo:hover){transform:none}

/* ── 2. 文字組み：見出しは約物を詰め（palt）、行の折り返しを整える。本文は最後の行が1〜2文字だけにならないように ── */
.rm :is(.section-title,.cta-title,.ph-h1,.slide-h1,.cs-title,.article-title,.mf-key,.manifesto-philos,.closing-title,.nonfit-title,
  .mlpe-title,.rb-title,.sec-title,.cs-section-title,.cs-narr-title,.message-quote,.mproof-h,.strength-lead,.creed-lead,
  .show-name,.vnode-title,.ch-title,.pos-title,.pickup-title,.merit-panel-title,.repower-pillar-title,.range-item-title,
  .issue-content-title,.im-title,.sim-title,.other-body-title,.mlpe-card-title,.rm-brands-jp,.vorbit-jp,.sol-name){
  font-feature-settings:"palt" 1;font-kerning:normal;text-wrap:balance}
.rm :is(.section-title,.cta-title,.ph-h1,.slide-h1,.cs-title,.article-title,.closing-title,.nonfit-title,.mlpe-title){letter-spacing:.05em}
.rm :is(p,li,dd,.section-lead,.ph-sub,.cta-sub){text-wrap:pretty;line-break:strict;hanging-punctuation:allow-end}
.rm :is(.news-date,.pm-stat-val,.ch-tel,.hc-tel,.mt-num,.cs-stat-val,.ph-price,.cta-tel,.ft-tel,time){font-variant-numeric:tabular-nums lining-nums}
.rm ::selection{background:rgba(74,122,155,.22);color:inherit}
.rm :is(.hero,.page-hero,.cs-hero,.cta,.creed,.closing,footer,.mlpe,.mproof,.resola,.issues-approach,.nonfit,.cmp-card.new,.merits-console){
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── 3. スマホ（幅600px以下）：見出しと導入文が小さすぎたので、階層が分かる大きさに ── */
@media (max-width:600px){
  .rm .slide-h1{font-size:27px;line-height:1.55}
  .rm :is(.ph-h1,.cs-title){font-size:25px;line-height:1.55}
  .rm .article-title{font-size:22px;line-height:1.6}
  .rm :is(.section-title,.sec-title,.rb-title,.closing-title,.nonfit-title,.mlpe-title,.cta-title){font-size:23px;line-height:1.55}
  .rm :is(.cs-section-title){font-size:21px}
  .rm :is(.manifesto-philos){font-size:22px}
  .rm :is(.message-quote){font-size:19px}
  .rm :is(.mproof-h){font-size:20px}
  .rm :is(.repower-pillar-title,.range-item-title,.issue-content-title,.im-title,.sim-title,.pickup-title){font-size:18px}
  .rm .sol-name{font-size:16px;letter-spacing:0}
  .rm .sol-arrow{width:36px;height:36px;font-size:13px}
  .rm :is(.section-lead,.ph-sub,.cta-sub,.article-lead){font-size:13.5px;line-height:1.95}
  .rm .credo-mark{font-size:14px}
}

/* ── 4. フォーカス：キーボードで移った時だけ、細い線で示す（マウスのクリックでは出さない） ── */
.rm :is(a,button,summary,[tabindex]):focus{outline:none}
.rm :is(a,button,summary,[tabindex]):focus-visible{outline:1px solid var(--blue-main,#2d6189);outline-offset:4px}
.rm :is(.hero,.page-hero,.cs-hero,.cta,.creed,.closing,footer,.mlpe,.mproof,.resola,.nonfit,.issues-approach) :is(a,button):focus-visible{outline-color:#d6ecf8}

/* ── 5. フォーム：枠は1pxの直線、入力中の項目は見出しも濃く、項目の間隔をスマホでもそろえる ── */
.rm :is(.form-input,.form-select,.form-textarea){border:1px solid var(--border);border-radius:0;transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.rm :is(.form-input,.form-select,.form-textarea):hover{border-color:#c4d4df}
.rm :is(.form-input,.form-select,.form-textarea):focus{border-color:var(--blue-main);box-shadow:inset 0 -2px 0 var(--blue-main);background:#fcfdfe}
.rm :is(.form-input,.form-textarea)::placeholder{color:#a9b8c2;opacity:1}
.rm .form-row:focus-within .form-label,.rm .form-row-double>div:focus-within .form-label{color:var(--navy)}
.rm .form-label{transition:color .25s ease}
.rm .form-req{border-radius:0;letter-spacing:.12em}
.rm .form-privacy-notice{border-radius:0}
.rm .btn-submit{border-radius:0;letter-spacing:.14em}
.rm .btn-submit[disabled]{opacity:.6;cursor:progress}
.rm .form-wrap .wpcf7-response-output{border-radius:0}
@media (max-width:768px){.rm .form-row-double{margin-bottom:24px}}

/* ── 6. 角：残っていた角丸を直角に（ガイドライン） ── */
.rm :is(.repower-pillar-icon,.sim-chart-bar,.strength-point-icon,.form-privacy-notice,.resola-img-logo img){border-radius:0 !important}

/* ── 7. ページ内リンクで移動した時、見出しが固定ヘッダーの下に隠れないように ── */
.rm [id]{scroll-margin-top:calc(var(--nav-h,72px) + 24px)}

/* ── 8. 404：番号・見出し・ボタンを整え、背景に淡い格子 ── */
.rm .rei-404{position:relative;overflow:hidden;padding:200px 0 160px}
.rm .rei-404::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(74,122,155,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(74,122,155,.08) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000,transparent 75%)}
.rm .rei-404 .inner{position:relative}
.rm .rei-404 .code{font-family:var(--mincho);font-weight:400;font-size:clamp(84px,12vw,148px);color:transparent;-webkit-text-stroke:1px var(--blue-light,#7ab8d4);letter-spacing:.06em;line-height:1}
.rm .rei-404 .code::after{content:'Page Not Found';display:block;margin-top:18px;font-family:var(--eng);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--blue-main);-webkit-text-stroke:0}
.rm .rei-404 h1{font-feature-settings:"palt" 1;letter-spacing:.08em;margin:30px 0 14px}
.rm .rei-404 .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:240px;padding:18px 40px;
  font-family:var(--jpn);font-size:13.5px;letter-spacing:.14em;text-decoration:none;color:#fff !important;background:var(--navy) !important;border:1px solid var(--navy) !important;transition:background .3s ease,border-color .3s ease}
.rm .rei-404 .btn-primary::after{content:'→';font-family:var(--eng)}
.rm .rei-404 .btn-primary:hover{background:var(--blue-main) !important;border-color:var(--blue-main) !important}

/* ── 9. 細部 ── */
.rm hr{border:0;height:1px;background:var(--border)}
.rm img{image-rendering:auto}

/* ── 10. フッターのリンク：横にずらさず、細い下線を左から引く ── */
.rm .ft-col a{width:fit-content;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat;
  transition:color .3s ease,background-size .45s cubic-bezier(.22,.61,.36,1)}
.rm .ft-col a:hover{background-size:100% 1px}
@media (prefers-reduced-motion:reduce){.rm .ft-col a{transition:none}}

/* ═══════════════════════════════════════════════════════════════════
   v2.0.0 専用アイコン（inc/icons.php の rei_icon()）
   32の升目・線1.25px相当・線端は角・強調の青は1か所。
   明るい面＝紺の線＋青の強調／暗い面＝淡い青の線＋白の強調。線の太さは表示する大きさから決める（--ic-sw）
   ═══════════════════════════════════════════════════════════════════ */
/* 線・塗りの基本は global.css（Motion Layer を外してもアイコンが崩れないように）。ここでは使う場所ごとの枠・色・大きさを決める */

/* 明るい面：白い升（1px の罫）＋左上の小さな角線 */
.issue-icon,.strength-point-icon{width:48px;height:48px;background:#fff;border:1px solid var(--border);border-radius:0;position:relative;
  display:flex;align-items:center;justify-content:center;color:var(--navy);--ic-a:var(--blue-main);--ic-bg:#fff;
  transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.strength-point-icon{margin-bottom:16px}
.issue-icon .rei-ic,.strength-point-icon .rei-ic{width:28px;height:28px;--ic-sw:1.43}
.repower-pillar-icon{width:54px;height:54px;border-radius:0;position:relative;color:var(--navy);--ic-a:var(--blue-main);--ic-bg:var(--blue-bg)}
.repower-pillar-icon .rei-ic{width:30px;height:30px;--ic-sw:1.33}
:is(.issue-icon,.strength-point-icon,.repower-pillar-icon)::before{content:'';position:absolute;left:-1px;top:-1px;width:7px;height:7px;
  border-left:1px solid var(--blue-main);border-top:1px solid var(--blue-main);pointer-events:none}
.issue-item:hover .issue-icon{color:var(--blue-light);--ic-a:#f0f6fa;--ic-bg:var(--navy)}
.issue-item:hover .issue-icon::before{border-color:var(--blue-light)}

/* 暗い面：紺の升に淡い青の線 */
.ch-icon{width:56px;height:56px;color:var(--blue-light);--ic-a:#f0f6fa;--ic-bg:var(--navy)}
.ch-icon .rei-ic{width:30px;height:30px;--ic-sw:1.33}
.mlpe-icon-wrap{color:var(--blue-light);--ic-a:#f0f6fa;--ic-bg:var(--navy)}
.mlpe-icon-wrap .rei-ic{width:34px;height:34px;--ic-sw:1.18}
.mlpe-icon-row:hover .mlpe-icon-wrap{--ic-bg:var(--gold)}
.mlpe-icon{color:var(--blue-light);--ic-a:#f0f6fa;--ic-bg:var(--navy)}
.mlpe-icon .rei-ic{width:100%;height:100%;--ic-sw:.9}
.rm-mx-on .mlpe-icon{width:42px;height:42px}
.rm-mx-on .mlpe-icon .rei-ic{--ic-sw:1.05}
.issues-conclusion-icon{width:58px;height:58px;border-radius:0;background:var(--navy);box-shadow:none;color:var(--blue-light);--ic-a:#f0f6fa;--ic-bg:var(--navy)}
.issues-conclusion-icon .rei-ic{width:32px;height:32px;--ic-sw:1.25}
.mobile-tel{--ic-a:#f0f6fa;--ic-bg:var(--navy)}
.mobile-tel .rei-ic{width:21px;height:21px;color:var(--blue-light);--ic-sw:1.95;flex-shrink:0}

/* 線が描かれる演出（motion.js の rm-draw）：塗りと破線は、線が引かれたあとに静かに現れる */
.rm-draw .rei-ic .f,.rm-draw .f{opacity:0;transition:opacity .5s ease calc(var(--j,0) * 90ms + .9s)}
.rm-draw .d{stroke-dasharray:2 1.6 !important;stroke-dashoffset:0 !important;opacity:0;transition:opacity .6s ease calc(var(--j,0) * 90ms + .6s) !important}
.rm-draw.rm-in .f,.rm-draw.rm-in .d{opacity:1}
/* TOP「5つのメリット」の舞台：場面が替わるたびに、その場面のアイコンを描き直す */
.rm-mx-on .mlpe-card:not(.rm-cur) .rm-draw :is(path,rect,circle,line,polyline):not(.d){stroke-dashoffset:var(--len,300) !important;transition:none !important}
.rm-mx-on .mlpe-card:not(.rm-cur) .rm-draw :is(.f,.d){opacity:0 !important;transition:none !important}
.rm-mx-on .mlpe-card.rm-cur .rm-draw :is(path,rect,circle,line,polyline):not(.d){stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--rm-ease) calc(.3s + var(--j,0) * 80ms)}
@media (prefers-reduced-motion:reduce){.rm-draw .f,.rm-draw .d{opacity:1 !important;transition:none !important}}

/* ═══════════════════════════════════════════════════════════════════
   v2.0.0 図の動き（motion.js 15）と、図の作法（明るい面＝精密線画／暗い面＝夜の図）
   ═══════════════════════════════════════════════════════════════════ */

/* ── 製品「従来 vs MLPE」：色は青系だけで「下がった」ことを示す（赤・橙は使わない） ── */
.cmp-card.old .pct.low{color:var(--text-sub)}
.cmp-card.old .chip .fill{background:linear-gradient(90deg,#96a8b2,#5a6e7a)}
.cmp-card.old .total-val{color:var(--text-sub)}
.cmp-card.old .cmp-foot{color:var(--text-sub)}
.cmp .vs{border-radius:0;width:50px;height:50px;font-size:16px;letter-spacing:.08em;box-shadow:0 0 0 6px var(--sky,#f0f6fa),0 0 0 7px var(--border)}
.cmp-mk{display:inline-block;flex-shrink:0;width:13px;height:13px;margin-top:3px;font-size:0;line-height:0;color:transparent;overflow:hidden;
  background:currentColor;-webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat}
.cmp-card.old .cmp-mk{background:var(--text-sub);--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l7 12.5H1z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 6v4.2' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='7.3' y='11.1' width='1.4' height='1.4'/%3E%3C/svg%3E")}
.cmp-card.new .cmp-mk{background:var(--blue-light);--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")}
/* 動き（v2.1.0：くり返し）：影のない時は100% → 影が落ちる → 従来は全体が、MLPEは1枚だけが下がる → 影が去る */
.rm-cmp .chip .fill{transition:width .95s cubic-bezier(.22,.61,.36,1)}
.rm-cmp .pnl{transition:filter .9s ease}
.rm-cmp .pnl .leaf{opacity:0;translate:0 -14px;transition:opacity .45s ease,translate .8s var(--rm-ease)}
.rm-cmp.rm-shade .pnl .leaf{opacity:1;translate:0 0}
/* 数値：影のない時は「100%」を重ねて見せる（文字そのものは元の数値のまま） */
.rm-cmp .pct,.rm-cmp .total-val .big{position:relative;transition:color .5s ease}
.rm-cmp .pct::after,.rm-cmp .total-val .big::after{content:attr(data-alt);position:absolute;left:50%;top:0;translate:-50% 0;white-space:nowrap;opacity:0;transition:opacity .5s ease}
.rm-cmp.rm-full .cmp-card .pct,.rm-cmp.rm-full .cmp-card .total-val .big{color:transparent}
.rm-cmp .total-val .big::after{left:auto;right:0;translate:none}
.rm-cmp.rm-full .pct::after,.rm-cmp.rm-full .total-val .big::after{opacity:1}
.rm-cmp .cmp-card.old .pct::after{color:var(--text-sub)}
.rm-cmp .cmp-card.new .pct::after{color:var(--gold-light)}
.rm-cmp .cmp-card.old .total-val .big::after{color:var(--text-sub)}
.rm-cmp .cmp-card.new .total-val .big::after{color:#fff}
/* 影のない時は下の注記を控えめに */
.rm-cmp .cmp-foot{transition:opacity .5s ease}
.rm-cmp.rm-full .cmp-foot{opacity:.35}

/* ── 商材コンサル「収益改善シミュレーション」：精密線画の棒グラフ ── */
.sim-chart-bars{position:relative;height:150px;margin-top:22px;border-bottom:1px solid var(--navy)}
.sim-chart-bar{border-radius:0;padding-top:0}
.sim-chart-bar.before{background:repeating-linear-gradient(135deg,rgba(19,45,64,.17) 0 1px,transparent 1px 6px),#fff;box-shadow:inset 0 0 0 1px rgba(19,45,64,.38)}
.sim-chart-bar.after{background:linear-gradient(to top,var(--navy),var(--blue-main))}
.sim-chart-bar-val{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:7px;white-space:nowrap;font-size:13px;color:var(--text-sub)}
.sim-chart-bar.after .sim-chart-bar-val{color:var(--navy)}
.sim-chart-bars+div{display:grid !important;grid-template-columns:56px 56px;column-gap:16px !important;gap:0 16px !important;text-align:center;letter-spacing:.06em}
.sim-chart-diff{display:flex;align-items:center;gap:10px;color:var(--blue-main)}
.sim-chart-diff::before{content:'';width:6px;height:6px;background:var(--blue-main)}
/* 改修前の高さから改修後までの寸法線（motion.js が足す） */
.rm-dimg{position:absolute;left:0;right:-24px;bottom:var(--hb);border-top:1px dashed rgba(19,45,64,.42);pointer-events:none}
.rm-dim{position:absolute;right:-27px;bottom:var(--hb);height:calc(var(--ha) - var(--hb));width:13px;pointer-events:none;margin-bottom:-.5px;
  border-top:1px solid var(--blue-main);border-bottom:1px solid var(--blue-main)}
.rm-dim::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--blue-main)}
.rm-dim::after{content:'';position:absolute;left:4px;top:-1px;width:5px;height:5px;border-left:1px solid var(--blue-main);border-top:1px solid var(--blue-main);transform:rotate(45deg);transform-origin:0 0;translate:2.5px 0}
.rm-sim .sim-chart-bar{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.1s var(--rm-ease)}
.rm-sim .sim-chart-bar.after{transition-delay:.22s}
.rm-sim .sim-chart-bar-val{opacity:0;transition:opacity .5s ease 1s}
.rm-sim .sim-chart-bar.after .sim-chart-bar-val{transition-delay:1.2s}
.rm-sim .rm-dimg{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--rm-ease) 1.25s}
.rm-sim .rm-dim{opacity:0;clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--rm-ease) 1.6s,opacity .2s ease 1.6s}
.rm-sim.rm-in .sim-chart-bar{transform:none}
.rm-sim.rm-in .sim-chart-bar-val{opacity:1}
.rm-sim.rm-in .rm-dimg{transform:none}
.rm-sim.rm-in .rm-dim{opacity:1;clip-path:inset(0 0 0 0)}
.rm-sim+div+.sim-chart-diff{opacity:0;transition:opacity .6s ease 2.1s}
.rm-sim.rm-in+div+.sim-chart-diff{opacity:1}
@media (max-width:600px){.rm-dimg,.rm-dim{right:-16px}}

/* ── 開発「3つのステップ」：段の印は角の四角。読み進めた分だけ線が伸び、着いた印が紺に灯る ── */
.flow-num-dot{border-radius:0;background:#fff;box-shadow:0 0 0 4px #fff,inset 0 0 0 1px var(--blue-main);transition:background-color .45s ease,box-shadow .45s ease}
.flow-step:hover .flow-num-dot{transform:none}
.rm-flow .flow-step.rm-reach .flow-num-dot{background:var(--navy);box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(45,97,137,.5)}
.flow-list:not(.rm-flow) .flow-num-dot{background:var(--blue-main)}
.rm-flow-prog{position:absolute;left:78px;top:30px;bottom:30px;width:1px;background:var(--blue-main);transform:scaleY(0);transform-origin:50% 0;pointer-events:none;z-index:1}
@media (max-width:980px){.rm-flow-prog{left:30px}}

/* ── O&M「対応エリア」（夜の図）：輪郭が引かれ → 各地が灯り → 関東から道筋が延び、光の粒が行き交う ── */
.rm-omap>path{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);fill-opacity:0;
  transition:stroke-dashoffset 1s cubic-bezier(.4,.1,.2,1) calc(var(--j,0) * .035s),fill-opacity .7s ease calc(.45s + var(--j,0) * .035s)}
.rm-omap.rm-in>path{stroke-dashoffset:0;fill-opacity:1}
.rm-omap .rm-glowpt{opacity:0;transform:scale(.35);transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity .7s ease calc(.4s + var(--j,0) * .06s),transform .9s var(--rm-ease) calc(.4s + var(--j,0) * .06s)}
.rm-omap.rm-in .rm-glowpt{opacity:1;transform:none;animation:rmBreath 6s ease-in-out calc(1.6s + var(--j,0) * .7s) infinite}
@keyframes rmBreath{0%,100%{opacity:1}50%{opacity:.62}}
.rm-route{fill:none;stroke:rgba(207,230,242,.5);stroke-width:.8;stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset .8s cubic-bezier(.4,.1,.2,1) calc(.7s + var(--j,0) * .05s)}
.rm-omap.rm-in .rm-route{stroke-dashoffset:0}
.rm-route-dot{fill:#f0f6fa;opacity:0;filter:drop-shadow(0 0 2.5px rgba(207,230,242,.95))}
.rm-hub{fill:var(--navy);stroke:#f0f6fa;stroke-width:1;opacity:0;transition:opacity .5s ease .6s}
.rm-omap.rm-in .rm-hub{opacity:1}
@media (prefers-reduced-motion:reduce){.rm-omap .rm-glowpt{animation:none}}

/* ═══════════════════════════════════════════════════════════════════
   v2.0.0 UIの作り込み：メニュー・ドロップダウン・タブ・表
   動くのは「開いた／選んだ」に応える時だけ。カーソルを合わせても項目やボタンは動かさない
   ═══════════════════════════════════════════════════════════════════ */

/* ── PCのドロップダウン：キーボードでも開く／開いた時に項目が上から順に現れる／いま見ているページに印 ── */
.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown a .dd-arrow,.dropdown a:hover .dd-arrow{transform:none}
.dropdown a.rm-cur{background:rgba(255,255,255,.05)}
.dropdown a.rm-cur::before{transform:scaleY(1)}
.dropdown a.rm-cur .dd-jp{color:#fff}
.dropdown a.rm-cur .dd-en{opacity:1}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .nav-item:is(:hover,:focus-within) .dropdown>a{animation:rmDdIn .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(70ms + var(--i,0) * 45ms)}
  .nav-item:is(:hover,:focus-within) .dropdown{animation:rmDdRule .55s cubic-bezier(.16,1,.3,1) both}
}
@keyframes rmDdIn{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes rmDdRule{from{border-top-color:transparent}to{border-top-color:var(--gold-light)}}

/* ── スマホのメニュー：開くと項目が上から順に現れる／＋−は線で描き、開くと縦線がたたまれる／いま見ているページに印 ── */
.mm-acc::after{content:'';width:13px;height:13px;flex-shrink:0;font-size:0;
  background:linear-gradient(var(--gold-light),var(--gold-light)) 50% 50%/13px 1px no-repeat,linear-gradient(var(--gold-light),var(--gold-light)) 50% 50%/1px 13px no-repeat;
  transition:background-size .4s cubic-bezier(.22,.61,.36,1)}
.mm-acc.open::after{content:'';background-size:13px 1px,1px 0}
.mm-item>a.rm-cur,.mm-acc.rm-cur{color:var(--gold-light)}
.mm-item>a.rm-cur::after{content:'';width:6px;height:6px;background:var(--gold-light);flex-shrink:0}
.mm-sub a.rm-cur{box-shadow:inset 2px 0 0 var(--gold-light);background:rgba(255,255,255,.04)}
.mm-sub a.rm-cur .dd-jp{color:#fff}
.mm-sub a .dd-arrow{transform:none}
@media (prefers-reduced-motion:no-preference){
  .mobile-menu .mm-item{opacity:0;translate:0 14px;transition:opacity .3s ease,translate .4s ease}
  .mobile-menu.open .mm-item{opacity:1;translate:0 0;
    transition:opacity .6s ease calc(.24s + var(--i,0) * 55ms),translate .8s cubic-bezier(.16,1,.3,1) calc(.24s + var(--i,0) * 55ms)}
  .mm-sub a{opacity:0;translate:-8px 0;transition:opacity .2s ease,translate .3s ease}
  .mm-sub.open a{opacity:1;translate:0 0;transition:opacity .45s ease calc(.08s + var(--i,0) * 50ms),translate .6s cubic-bezier(.16,1,.3,1) calc(.08s + var(--i,0) * 50ms)}
}

/* ── 製品「5つのメリット」のタブ：キーボードの印 ── */
.merit-tab:focus-visible{outline:1px solid #d6ecf8;outline-offset:-5px}

/* ── 表（会社概要・募集要項・導入事例の仕様）：行にカーソルを合わせると淡く色づく（動かさない） ── */
.profile-td,.req-td,.cs-spec-table td,.cs-spec-table th{transition:background-color .3s ease}
.profile-th,.req-th{transition:box-shadow .3s ease}
.profile-row:hover .profile-td,.req-row:hover .req-td,.cs-spec-table tr:hover td,.cs-spec-table tr:hover th{background-color:#f7fafc}
.profile-row:hover .profile-th,.req-row:hover .req-th{box-shadow:inset 2px 0 0 var(--blue-light)}
.profile-td,.req-td,.cs-spec-table td{font-variant-numeric:tabular-nums}
/* 閉じるボタン：×の2本だけにする（中の横線は消す） */
.hamburger.open span:nth-child(2){opacity:0}

/* ═══════════════════════════════════════════════════════════════════
   v2.1.0 製品「MLPEの仕組み（イメージ）」を夜の図に
   濃紺の面に淡い青の線。パネルの装置が灯り、配線を光の粒が流れて、パワコン → 見える化へ届く
   ═══════════════════════════════════════════════════════════════════ */
.schematic{background:radial-gradient(120% 95% at 70% 22%,#17384f 0%,#0d2335 52%,#081826 100%);border-color:rgba(122,184,212,.18);color:#e8f2f8}
.rm .schematic::before{background-image:linear-gradient(rgba(122,184,212,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(122,184,212,.11) 1px,transparent 1px)}
.schematic-label{background:transparent;color:#cfe6f2;border:1px solid rgba(122,184,212,.45)}
.rm .schematic-label{background:rgba(8,24,38,.55);outline:0}
.schematic .callout{fill:rgba(232,242,248,.62)}
.schematic .callout-b{fill:#e8f2f8;font-weight:500}
.schematic .wire{stroke:rgba(122,184,212,.5)}
.schematic .wire-flow{stroke:#f0f6fa;stroke-dasharray:2.4 15.6;stroke-linecap:square;animation:rm-sch-flow 1.15s linear infinite;
  filter:drop-shadow(0 0 2.2px rgba(207,230,242,.95))}
@keyframes rm-sch-flow{to{stroke-dashoffset:-18}}
.rm-sch .sch-led{filter:drop-shadow(0 0 1.6px rgba(207,230,242,.9))}
.rm-sch .sch-led-z,.rm-sch .sch-led-p{filter:drop-shadow(0 0 2px rgba(207,230,242,.9))}
.rm-sch .sch-rays line{stroke:#7ab8d4}
.rm-sch .sch-graph{filter:drop-shadow(0 0 2px rgba(207,230,242,.6))}
@media (prefers-reduced-motion:reduce){.schematic .wire-flow{animation:none}}


/* ── v2.1.1 製品「MLPEの仕組み」：見本Cの等角図（夜の図）に差し替え ── */
.schematic svg.rei-mlpe{margin-top:34px;overflow:visible}
.rei-mlpe text{font-family:var(--jpn,'Noto Sans JP',sans-serif)}
.rei-mlpe .il-note{font-weight:500}
/* v2.1.2 拡大図：対象の1枚の枠がゆっくり明滅し、破線が拡大図へ流れる。装置の灯りと信号 */
.rm-live .il-target{animation:rm-sch-target 3.6s ease-in-out infinite}
.rm-live .il-zlead{animation:rm-sch-dash 1.6s linear infinite}
.rm-live .il-zled{animation:rm-sch-blink 1.8s ease-in-out infinite;filter:drop-shadow(0 0 2px rgba(207,230,242,.9))}
.rm-live .il-zsig path{opacity:0;animation:rm-sch-sig 2.4s ease-out infinite}
.rm-live .il-zsig path+path{animation-delay:.35s}
.rei-mlpe .il-lens-cap{font-weight:500}
/* 「MLPEとは？」の見出しと、右の図の上端をそろえる（2列の時） */
@media (min-width:901px){
  .mlpe-head{align-items:start}
  .mlpe-head>.schematic{margin-top:calc(41.4px + .2 * clamp(30px,4.5vw,52px))}
}

/* ═══ v2.3.0 製品「5つのメリット」の図（motion.js「15-6」）：選んだメリットを、パネル配列が演じる ═══
   紺の舞台（.merits-console）の右側。PCは文章の右、980px以下は文章の上。canvas の周りはぼかして舞台に溶け込ませる */
.rm-mt-stage{display:none}
.rm-mt-on .rm-mt-stage{display:block;position:absolute;z-index:1;pointer-events:none;top:60px;right:var(--mt-pad);height:var(--mt-h);
  width:calc((100% - var(--mt-pad) * 2 - var(--mt-gap)) * 1.22 / 2.22);opacity:0;transition:opacity 1.2s ease}
.rm-mt-on.rm-mt-live .rm-mt-stage{opacity:1}
.rm-mt-cv{position:absolute;display:block;top:-56px;bottom:-40px;left:-48px;right:calc(var(--mt-pad) * -1);
  width:calc(100% + 48px + var(--mt-pad));height:calc(100% + 96px);
  -webkit-mask:radial-gradient(closest-side at 50% 52%,#000 70%,transparent);mask:radial-gradient(closest-side at 50% 52%,#000 70%,transparent)}
/* 右上の計器表示：いまの段階 */
.rm-mt-hud{position:absolute;right:0;top:0;z-index:2;text-align:right;font-family:var(--eng);opacity:0;translate:0 10px;
  transition:opacity .9s ease 1.4s,translate 1.1s var(--rm-ease) 1.4s}
.rm-mt-live .rm-mt-hud{opacity:1;translate:0 0}
.rm-mt-ph{list-style:none;margin:0;padding:0}
.rm-mt-ph li{font-size:12px;font-weight:500;letter-spacing:.18em;line-height:1.95;text-transform:uppercase;color:rgba(122,184,212,.42);transition:color .5s ease}
.rm-mt-ph li.on{color:#fff}
.rm-mt-ph li.on::before{content:'';display:inline-block;width:14px;height:1px;margin-right:10px;vertical-align:middle;background:currentColor}
@media (max-width:980px){
  .rm-mt-on .rm-mt-stage{top:44px;left:var(--mt-pad);right:var(--mt-pad);width:auto}
  .rm-mt-cv{left:calc(var(--mt-pad) * -1);top:-24px;bottom:-24px;width:calc(100% + var(--mt-pad) * 2);height:calc(100% + 48px)}
}
@media (max-width:768px){
  .rm-mt-on .rm-mt-stage{top:28px}
  .rm-mt-ph li{font-size:10px;letter-spacing:.14em;line-height:1.8}
}

/* ═══════════════════════════════════════════════════════════════════
   v2.2.0 大きな画面（1600px以上）への対応
   1440px前後のPC向けの見え方を基準に、画面幅に応じて「中身の幅」と「文字・余白」を一段ずつ大きくする。
     1600px〜：中身 1320px／文字・余白 1.06倍
     1920px〜：中身 1440px／文字・余白 1.12倍
     2400px〜：中身 1600px／文字・余白 1.20倍
   ・文字と余白はセクションごとに zoom で同じ比率に拡大する（1行の文字数は変わらない）。
     中身の幅は文字より少し多めに広げ、2段組の間隔・写真・図が大きくなる
   ・zoom の中ではマウス位置の px が拡大前の座標になるため、カーソルの光などは motion.js の zf() で換算している
   ・フッター、導入事例の大きな写真の上の文字の左右の端を、本文の列の端にそろえる
   ・ヘッダーと TOP の大きな写真の上（文字・番号・SCROLL）は画面の端を基準にし、余白と大きさを同じ比率で（v2.4.0）
   ・画面いっぱいの背景や写真はそのまま。1600px未満の表示は何も変えない
   ═══════════════════════════════════════════════════════════════════ */
/* zoom に対応していないブラウザ（古い Firefox など）では、この段は丸ごと無効＝今までの表示のまま */
@supports (zoom:1.1){
  @media (min-width:1600px){
    :root{--z:1.06;--content:1245px}            /* 1245 × 1.06 ≒ 1320 */
  }
  @media (min-width:1920px){
    :root{--z:1.12;--content:1286px}            /* 1286 × 1.12 ≒ 1440 */
  }
  @media (min-width:2400px){
    :root{--z:1.2;--content:1334px}             /* 1334 × 1.20 ≒ 1600 */
  }
  @media (min-width:1600px){
    /* 各セクション（とフッター）を同じ比率で拡大。画面の高さで決まるTOPの大きな写真は除く */
    section:not(section section):not(.hero),footer{zoom:var(--z)}
    /* 2026-10-15 記事詳細：本文（article）とアイキャッチ（div）も同じ比率で拡大し、タイトル部分・前後記事ナビと列をそろえる */
    article.article-body,.article-hero{zoom:var(--z)}
    /* 列の幅：どのページも同じ列にそろえる（フッターも本文と同じ列） */
    footer .inner{max-width:var(--content);padding:0 40px}
    .mlpe-inner{max-width:calc(var(--content) - 80px)}
    /* ヘッダー：v2.4.0 から画面の端を基準に（左80px・右40px を同じ比率で）。項目が中央に寄らないように */
    #header .header-inner{padding-left:calc(80px * var(--z));padding-right:calc(40px * var(--z))}
    #header .header-inner>*{zoom:var(--z)}
    /* TOP の大きな写真の上：文字・スライド番号・SCROLL を、ロゴと同じ左端（右は電話番号と同じ右端）にそろえる */
    .hero .hero-content{padding-left:calc(80px * var(--z));padding-right:calc(80px * var(--z))}
    .hero .slide-text{zoom:var(--z)}
    .hero .hero-controls{padding:0 calc(40px * var(--z)) 0 calc(80px * var(--z))}
    .hero .hero-controls>*{zoom:var(--z)}
    /* 導入事例の写真の上（セクションごと拡大されるので、拡大後の座標で列の端に合わせる） */
    .cs-hero .cs-hero-content{padding-left:calc((100% - var(--content)) / 2 + 40px);padding-right:calc((100% - var(--content)) / 2 + 40px)}
  }
}