/* /jp/v2/ トップ専用: ヒーロースライダー・入場アニメーション・動く背景。
   index.html だけが読む（下層ページ・/jp/・en には効かない）。素の CSS（ライブラリなし）。 */

.marea_block{position:relative}
.marea_block header{position:relative;z-index:5}
.marea_block .v2-hero{position:relative;z-index:2}

/* ---- ロゴ（スライドが替わっても動かさない）---- */
.v2-herologo{height:42px;margin:0 0 18px;background:url('../images/kv_logo.png') no-repeat center top;background-size:284px auto}
@media screen and (min-width:768px){
  .v2-herologo{height:100px;margin:0 0 35px;background-size:685px 100px}
}

/* ---- スライダー本体: 全スライドを同じ枠に重ね、いちばん高いものに高さを合わせる（切替でガタつかない）---- */
.v2-slides{display:grid;touch-action:pan-y}
.v2-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.v2-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.v2-slide .mlead{background:none;padding-top:0;margin-bottom:15px;min-height:2.9em;display:flex;align-items:center;justify-content:center}
.v2-slide .mex.v2-hero-ex{min-height:3.4em;display:grid;align-content:center;justify-items:center}
@media screen and (min-width:768px){
  .v2-slide .mlead{min-height:3em;margin-bottom:30px}
  .v2-slide .mex.v2-hero-ex{margin-bottom:34px}
}

/* ---- 入場アニメーション（見出し 1 行ずつ → 説明 → ボタン → リンク）---- */
.v2-slide .ln{display:block;overflow:hidden;padding-bottom:.08em}
.v2-slide .ln>span{display:block}
.v2-slide.is-active .ln>span{animation:v2-line .85s cubic-bezier(.2,.8,.2,1) both}
.v2-slide.is-active .ln:nth-child(2)>span{animation-delay:.14s}
.v2-slide.is-active .v2-a{animation:v2-rise .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.14s + .2s)}
@keyframes v2-line{from{transform:translateY(110%)}to{transform:none}}
@keyframes v2-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ボタンのまわりをやさしく光らせる（opacity だけ動かす） */
.v2-slide .btnbox a:before{content:"";position:absolute;inset:0;border-radius:80px;box-shadow:0 0 30px 4px rgba(226,202,75,.55);opacity:0;pointer-events:none}
.v2-slide.is-active .btnbox a:before{animation:v2-glow 3s ease-in-out 1.6s infinite}
@keyframes v2-glow{0%,100%{opacity:0}50%{opacity:1}}

/* ---- 動く背景（グラデーションの光・チャート線・粒子）---- */
.v2-fx{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:none;z-index:0;--v2-glow:224,193,74}
.v2-orb{position:absolute;border-radius:50%;opacity:.5;will-change:transform;transition:background 1.2s ease}
.v2-orb-a{width:70vw;height:70vw;max-width:900px;max-height:900px;left:-12%;top:-18%;
  background:radial-gradient(circle,rgba(var(--v2-glow),.42) 0,rgba(var(--v2-glow),0) 62%);animation:v2-drift-a 19s ease-in-out infinite alternate}
.v2-orb-b{width:60vw;height:60vw;max-width:780px;max-height:780px;right:-10%;bottom:-24%;
  background:radial-gradient(circle,rgba(70,120,220,.38) 0,rgba(70,120,220,0) 62%);animation:v2-drift-b 23s ease-in-out infinite alternate}
@keyframes v2-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14%,18%,0) scale(1.18)}}
@keyframes v2-drift-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-16%,-14%,0) scale(.9)}}

.v2-chart{position:absolute;left:0;top:14%;width:100%;height:72%}
.v2-ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.v2-ln1{stroke:url(#v2-g1);animation:v2-draw 11s ease-in-out infinite}
.v2-ln2{stroke:url(#v2-g2);animation:v2-draw 11s ease-in-out 2.6s infinite}
@keyframes v2-draw{0%{stroke-dashoffset:1;opacity:0}6%{opacity:.9}52%{stroke-dashoffset:0;opacity:.9}84%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}

.v2-p{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#f3d977;opacity:0;
  animation:v2-float var(--d) linear var(--t) infinite;will-change:transform,opacity}
@keyframes v2-float{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.8}85%{opacity:.5}100%{transform:translate3d(18px,-760px,0);opacity:0}}

/* スライドに合わせて光の色をゆっくり変える */
.marea_block.is-s1 .v2-fx{--v2-glow:120,170,255}
.marea_block.is-s2 .v2-fx{--v2-glow:236,150,90}

/* 一時停止中・画面の外・タブ非表示のときは背景も止める */
.marea_block.v2-still .v2-fx *{animation-play-state:paused!important}

/* ---- 操作（前へ・ドット・次へ・一時停止）。スクリプトが作る ---- */
.v2-ctrl{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px}
.v2-ctrl button{font:inherit;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v2-arrow,.v2-pp{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(12,10,8,.45);padding:0;position:relative}
.v2-arrow:hover,.v2-pp:hover{border-color:#e0c14a;background:rgba(12,10,8,.7)}
.v2-arrow:before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border:solid #fff;border-width:2px 2px 0 0;transform:translate(-30%,-50%) rotate(-135deg)}
.v2-arrow.v2-next:before{transform:translate(-70%,-50%) rotate(45deg)}
.v2-pp:before,.v2-pp:after{content:"";position:absolute;top:50%;width:3px;height:14px;background:#fff;transform:translateY(-50%);left:14px}
.v2-pp:after{left:23px}
.v2-pp[data-state="paused"]:before{left:16px;width:0;height:0;background:none;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.v2-pp[data-state="paused"]:after{display:none}
.v2-dots{display:flex;gap:8px;align-items:center;margin:0 4px}
.v2-dot{width:34px;height:20px;padding:0;border:0;background:none;position:relative}
.v2-dot:before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(255,255,255,.35)}
.v2-dot i{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#e0c14a;width:0}
.v2-dot[aria-current="true"] i{width:100%}
.v2-dots.is-running .v2-dot[aria-current="true"] i{width:0;animation:v2-fill var(--v2-int,6500ms) linear forwards;animation-play-state:paused}
.v2-hero.is-playing .v2-dots.is-running .v2-dot[aria-current="true"] i{animation-play-state:running}
@keyframes v2-fill{from{width:0}to{width:100%}}
.v2-ctrl button:focus-visible{outline:2px solid #e0c14a;outline-offset:2px}

@media screen and (max-width:767px){
  .v2-ctrl{gap:6px}
  .v2-dot{width:26px}
  .v2-p:nth-child(n+11){display:none}
  .v2-ln2{display:none}
}
@media screen and (min-width:768px){
  .marea_block .block1.v2-hero{padding-bottom:86px}
  .v2-ctrl{bottom:22px}
}

/* ---- 動きを減らす設定の人には、動きを止める ---- */
@media (prefers-reduced-motion:reduce){
  .v2-slide,.v2-slide.is-active{transition:none}
  .v2-slide.is-active .ln>span,.v2-slide.is-active .v2-a,.v2-slide .btnbox a:before,
  .v2-orb,.v2-ln,.v2-p,.v2-dots.is-running .v2-dot[aria-current="true"] i{animation:none!important}
  .v2-ln{stroke-dashoffset:0;opacity:.6}
  .v2-p{display:none}
  .v2-dots.is-running .v2-dot[aria-current="true"] i{width:100%}
}

/* ---- タブレット（768〜1199px）: common.css の PC の固定幅（#wrapper の min-width・.block1 の width 1160px）で横にスクロールしないように（下層は sub.css で直してある）---- */
@media screen and (min-width:768px) and (max-width:1199px){
  #wrapper{min-width:0}
  .block1{width:auto;max-width:1160px}
  .type_block{width:auto;max-width:1000px;overflow-x:auto}
  .step_block{width:auto;max-width:1000px}
  .block_area1 .bannerarea,.block_area1 .about_block{width:auto;max-width:860px}
  .block_area2 .ex_block .imagebox{height:auto}
  .block_area2 .ex_block .imagebox b{position:static;width:auto}
  .point_block .pointbox{width:23%}
}
/* MT4 の 4 つの特徴（1 つ 240px）が入りきらない幅では 2 列に */
@media screen and (min-width:768px) and (max-width:1023px){
  .point_block{flex-wrap:wrap;row-gap:30px}
  .point_block .pointbox{width:48%}
}