/* 会社概要 MVV欄 上位版プロトタイプ（2026-11-13）。色・書体・ヘッダーは本番（prod_*.css）のまま。
   切り替え幅は 920px（PC／スマホ）と 1100px（バリューの列数）だけ。位置はすべてCSSで決める（JSは段の切り替えと進み具合の数字だけ） */
:root{--m-accent:#52bcb1;--v2-dark:#0f3f3b;--v2-paper:#f3f8f1;--v2-ease:cubic-bezier(.22,1,.36,1)}
html,body{overflow-x:clip}
.v2-body main{word-break:auto-phrase;line-break:strict}
.v2-body main section{position:relative;scroll-margin-top:84px}
.v2-body main .wrap{position:relative;z-index:2}

/* ---- くねくねした区切り（形だけ。色は隣のセクションの地色） ---- */
.v2-wave{position:absolute;left:0;z-index:1;display:block;width:100%;height:clamp(46px,7.4vw,118px);pointer-events:none}
.v2-wave--bottom{bottom:-1px}
.v2-wave--top{top:-1px;transform:scaleY(-1)}
.v2-wave path{fill:var(--wf)}
.v2-wave path{transform-box:fill-box;transform-origin:50% 50%}
.v2-wave-b{opacity:.42;animation:v2-sway 11s ease-in-out infinite alternate}
@keyframes v2-sway{from{transform:translateX(-2%) scaleX(1.06)}to{transform:translateX(2%) scaleX(1.06)}}

/* ---- 英字の大見出しと小ラベル（全セクション共通の部品） ---- */
.v2-en{margin:0;font:900 clamp(64px,11.4vw,168px)/.9 Inter,sans-serif;letter-spacing:-.045em;color:var(--deep);white-space:nowrap}
.v2-en .m-ch,.v2-en:not(:has(.m-ch)){background:linear-gradient(180deg,#1f6f68 8%,#52bcb1 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2-en--light .m-ch,.v2-en--light:not(:has(.m-ch)){background-image:linear-gradient(180deg,#fff 10%,rgba(255,255,255,.55) 95%)}
.v2-en--dark .m-ch,.v2-en--dark:not(:has(.m-ch)){background-image:linear-gradient(180deg,#b9f0e8 5%,rgba(82,188,177,.5) 95%)}
.v2-ja{display:flex;align-items:center;gap:12px;margin:18px 0 0;color:var(--deep)}
.v2-ja b{padding:7px 16px 6px;border-radius:999px;background:var(--deep);color:#fff;font:800 12px/1.2 Inter,"Noto Sans JP",sans-serif;letter-spacing:.18em;transform:rotate(-4deg)}
.v2-ja span{font-size:13px;font-weight:700;letter-spacing:.08em}
.v2-phrase{margin:26px 0 0;font-size:clamp(27px,3.5vw,50px);font-weight:900;line-height:1.5;letter-spacing:.01em;text-wrap:balance}
.v2-text{margin:24px 0 0;max-width:34em;font-size:15px;line-height:2.05;text-wrap:pretty}

/* ---- 1. 導入（今のHPの濃いティール） ---- */
.v2-head{overflow:hidden;padding:clamp(72px,8vw,120px) 0 calc(clamp(46px,7.4vw,118px) + clamp(56px,6vw,96px));background:radial-gradient(90% 70% at 88% -8%,rgba(82,188,177,.42),transparent 62%),radial-gradient(70% 60% at 0% 100%,rgba(82,188,177,.2),transparent 65%),linear-gradient(165deg,#0d3834 0%,#134b46 52%,#185a55 100%);color:#fff}
.v2-head::before{content:"MVV";position:absolute;right:-1vw;top:-.1em;color:rgba(255,255,255,.05);font:900 clamp(200px,32vw,500px)/1 Inter,sans-serif;letter-spacing:-.06em;pointer-events:none}
.v2-head-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(36px,5vw,84px)}
.v2-head-text{min-width:0}
.v2-head h2{margin:26px 0 0;color:#fff;font-size:clamp(30px,4.1vw,58px);line-height:1.42;letter-spacing:.01em}
.v2-head h2>span{display:block}
.v2-lead{margin:26px 0 0;max-width:36em;color:#d4eeea;font-size:15px;line-height:2.05;text-wrap:pretty}
.v2-head-ph{min-width:0;margin:0}
.v2-blob{overflow:hidden;border-radius:150px 40px 150px 40px;box-shadow:0 34px 80px rgba(0,0,0,.4);outline:1px solid rgba(255,255,255,.22);outline-offset:-1px;--m-float-dist:-12px;--m-float-dur:4.2s}
.v2-blob img{display:block;width:100%;height:auto}

/* ---- 2. ミッション（白い紙。絵を右上から、角をぼかして溶け込ませる） ---- */
.v2-mission{overflow:hidden;padding:clamp(64px,7vw,110px) 0 clamp(96px,10vw,150px);background:#fff;color:var(--text)}
.v2-mission-art{position:absolute;top:0;right:0;z-index:0;width:min(64%,980px);margin:0;-webkit-mask-image:radial-gradient(118% 118% at 100% 0%,#000 36%,transparent 74%),linear-gradient(180deg,transparent 0%,#000 20%);-webkit-mask-composite:source-in;mask-image:radial-gradient(118% 118% at 100% 0%,#000 36%,transparent 74%),linear-gradient(180deg,transparent 0%,#000 20%);mask-composite:intersect;pointer-events:none}
.v2-mission-art img{display:block;width:100%;height:auto}
.v2-mission .v2-phrase{color:var(--ink);max-width:13.2em}
.v2-mission .v2-mv-in{padding-top:clamp(40px,7vw,110px)}

/* ---- 3. ビジョン（写真を全面に。上下とも曲線でつなぐ） ---- */
.v2-vision{overflow:hidden;padding:calc(clamp(46px,7.4vw,118px) + clamp(70px,8vw,130px)) 0 calc(clamp(46px,7.4vw,118px) + clamp(90px,10vw,160px));background:#0c2f2c;color:#fff}
.v2-vision-bg{position:absolute;inset:-12% 0;z-index:0}
.v2-vision-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.v2-vision::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,40,37,.9) 0%,rgba(8,40,37,.62) 42%,rgba(8,40,37,0) 74%);pointer-events:none}
.v2-vision .v2-wave-b{display:none}
.v2-vision .v2-ja{color:#fff}
.v2-vision .v2-ja b{background:#fff;color:var(--deep)}
.v2-vision .v2-phrase{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.v2-vision .v2-text{color:#e3f3f0}
.v2-vision .v2-en .m-ch,.v2-vision .v2-en:not(:has(.m-ch)){background-image:linear-gradient(180deg,#fff 10%,rgba(255,255,255,.5) 95%)}

/* ---- 4. マップ（山の頂上へ。パーツを重ねて、スクロールで登る） ---- */
.v2-map{background:var(--v2-paper);color:var(--text)}
.v2-map.m-pin{height:calc(100svh + 13 * 44svh)}
.v2-map-stage{background:var(--v2-paper)}
.v2-map-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);height:100%;padding-top:104px;padding-bottom:28px}
.v2-map-side{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding-left:34px}
.v2-map-side .v2-ja{margin:0}
.v2-map-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:20px 0 0;color:var(--deep);font:900 clamp(15px,1.5vw,20px)/1 Inter,sans-serif;letter-spacing:.14em}
.v2-map-title i{width:clamp(18px,2.4vw,34px);height:2px;background:currentColor;opacity:.45}
.v2-steps{position:relative;height:clamp(250px,36svh,330px);margin-top:clamp(20px,3.4svh,44px)}
.v2-step{display:flex;flex-direction:column;justify-content:flex-start}
.v2-step-tag{display:flex;align-items:baseline;gap:14px;margin:0;color:var(--deep)}
.v2-step-tag b{font:900 13px/1 Inter,sans-serif;letter-spacing:.24em}
.v2-step-tag span{font-size:12.5px;font-weight:700}
.v2-step-no{font:900 clamp(56px,6.4vw,92px)/.9 Inter,sans-serif!important;letter-spacing:-.04em;color:var(--teal)}
.v2-step-no i{margin-left:6px;font:800 16px/1 Inter,sans-serif;font-style:normal;letter-spacing:.06em;color:var(--muted)}
.v2-step-ttl{margin:18px 0 0;color:var(--ink);font-size:clamp(22px,2.5vw,34px);font-weight:900;line-height:1.5;text-wrap:balance}
.v2-step-big{margin:14px 0 0;font:900 clamp(52px,6vw,88px)/.95 Inter,sans-serif;letter-spacing:-.04em;color:var(--teal)}
.v2-step-sub{margin:12px 0 0;color:var(--ink);font-size:clamp(18px,1.9vw,24px);font-weight:900;letter-spacing:.08em}
.v2-step-ttl,.v2-val h4{word-break:keep-all;overflow-wrap:anywhere}
.v2-nb{white-space:nowrap}
.v2-step-more{align-self:flex-start;margin-top:18px;color:var(--deep);font-size:13px;font-weight:800;letter-spacing:.06em}
.v2-rail{position:absolute;left:0;top:50%;width:4px;height:min(60svh,460px);border-radius:4px;background:rgba(31,111,104,.14);transform:translateY(-50%)}
.v2-rail span{position:absolute;inset:0;border-radius:4px;background:linear-gradient(0deg,var(--deep),var(--teal));transform-origin:50% 100%;transform:scaleY(var(--m-progress,1))}
.v2-view{position:relative;min-width:0;min-height:0;overflow:hidden;container-type:size;border-radius:120px 36px 120px 36px;background:#e3f1e8}
.v2-pan{position:absolute;inset:0;background:url(../img/sky.jpg) center/cover;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.v2-pan{isolation:isolate}
.v2-world{--ww:min(100cqw,88cqh);--wh:calc(var(--ww) * 1.5);position:absolute;z-index:1;left:calc(50% - var(--ww) / 2);top:max(0px,calc(100cqh - var(--wh)));width:var(--ww);height:var(--wh);transform:translateY(min(0px,calc((100cqh - var(--wh)) * (1 - var(--m-progress,1)))))}
.v2-world--mt{mix-blend-mode:multiply}
.v2-world--pts{z-index:3;pointer-events:none}
.v2-world--pts .v2-pt{pointer-events:auto}
.v2-mt{position:absolute;inset:0;display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 92%,transparent 100%)}
.v2-pt{--on:clamp(0,calc((var(--m-progress,1) - var(--t)) * 220 + 1),1);--act:0;position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:2;display:grid;place-items:center;width:clamp(24px,5.6cqw,36px);aspect-ratio:1;margin:calc(clamp(24px,5.6cqw,36px) / -2) 0 0 calc(clamp(24px,5.6cqw,36px) / -2);border:2px solid var(--deep);border-radius:50%;background:color-mix(in srgb,var(--deep) calc(var(--on) * 100%),#fff);color:color-mix(in srgb,#fff calc(var(--on) * 100%),var(--deep));box-shadow:0 0 0 calc(var(--act) * 7px) rgba(82,188,177,.42),0 4px 10px rgba(22,51,49,.22);scale:calc(.86 + var(--on) * .14 + var(--act) * .2);transition:scale .45s var(--v2-ease),box-shadow .45s ease}
.v2-pt b{font:900 clamp(10px,2.3cqw,13px)/1 Inter,sans-serif;letter-spacing:.02em}
.v2-pt:focus-visible{outline:3px solid #fff;outline-offset:3px}
.v2-climber{position:absolute;left:calc(var(--cx) * 1%);top:calc(var(--cy) * 1%);z-index:3;width:clamp(48px,12.5cqw,84px);aspect-ratio:1;margin:calc(clamp(48px,12.5cqw,84px) * -1.14) 0 0 calc(clamp(48px,12.5cqw,84px) / -2);pointer-events:none;transition:left .9s var(--v2-ease),top .9s var(--v2-ease)}
.v2-climber img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(22,51,49,.28));transition:opacity .4s ease}
.v2-climber-go{opacity:0}
.v2-map:has(.m-pin__step.is-active) .v2-climber-go{opacity:1}
.v2-map:has(.m-pin__step.is-active) .v2-climber-top{opacity:0}
.v2-map:has(.m-pin__step:last-child.is-active) .v2-climber-go{opacity:0}
.v2-map:has(.m-pin__step:last-child.is-active) .v2-climber-top{opacity:1}
.v2-cloud{position:absolute;z-index:2;display:block;width:46cqw;height:auto;max-width:none;opacity:.92;pointer-events:none}
.v2-cloud--1{z-index:0;left:-6cqw;top:8cqh;translate:0 calc((1 - var(--m-progress,1)) * 16cqh);animation:v2-drift 26s ease-in-out infinite alternate}
.v2-cloud--2{right:-24cqw;top:52cqh;width:46cqw;opacity:.85;translate:0 calc((1 - var(--m-progress,1)) * -42cqh);animation:v2-drift 32s ease-in-out infinite alternate-reverse}
@keyframes v2-drift{from{transform:translateX(-5cqw)}to{transform:translateX(7cqw)}}

/* ---- 5. バリュー（濃いティール。番号札＋右下に薄いアイコン） ---- */
.v2-values{overflow:hidden;padding:calc(clamp(46px,7.4vw,118px) + clamp(56px,6vw,96px)) 0 calc(clamp(46px,7.4vw,118px) + 40px);background:radial-gradient(70% 40% at 100% 0%,rgba(82,188,177,.3),transparent 62%),radial-gradient(60% 40% at 0% 100%,rgba(82,188,177,.2),transparent 65%),linear-gradient(165deg,#0d3834 0%,#134b46 52%,#185a55 100%);color:#fff}
.v2-values-head{position:relative}
.v2-values .v2-ja{color:#c4ece7}
.v2-values .v2-ja b{background:#86ded3;color:#0d3834}
.v2-values-head h3{margin:22px 0 0;color:#fff;font-size:clamp(24px,2.7vw,36px);line-height:1.5;text-wrap:balance}
.v2-values-sk{position:absolute;right:0;bottom:-6px;width:clamp(72px,8vw,112px);height:auto;--m-float-dist:-8px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.v2-val-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 16px;margin:64px 0 0;padding:0;list-style:none}
.v2-val{position:relative;display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:10px;min-width:0;padding:44px 22px 30px;border:1px solid rgba(255,255,255,.2);border-radius:14px 30px 76px 30px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));transition:translate .35s var(--v2-ease),background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.v2-val:nth-child(even){border-radius:30px 14px 30px 76px}
.v2-val-no{position:absolute;left:16px;top:-22px;display:flex;align-items:baseline;gap:5px;margin:0;padding:9px 16px 8px;border-radius:999px;background:#86ded3;color:#0d3834;transform:rotate(-5deg);box-shadow:0 8px 18px rgba(0,0,0,.24);transition:transform .35s var(--v2-ease)}
.v2-val-no b{font:900 24px/1 Inter,sans-serif;letter-spacing:-.01em}
.v2-val-no i{font:800 11px/1 Inter,sans-serif;font-style:normal;letter-spacing:.04em;opacity:.7}
.v2-val h4{position:relative;z-index:1;margin:0;color:#fff;font-size:17px;line-height:1.6;text-wrap:balance}
.v2-val-text{position:relative;z-index:1;margin:0;color:#d3ece8;font-size:13px;line-height:1.9;text-wrap:pretty}
.v2-val-ic{position:absolute;right:10px;bottom:10px;z-index:0;width:min(46%,116px);height:auto;opacity:.17;transition:opacity .4s ease,transform .5s var(--v2-ease);pointer-events:none}
.v2-val:nth-child(even) .v2-val-ic{right:14px}
.v2-val:target{border-color:#86ded3;background-color:rgba(134,222,211,.16);box-shadow:0 0 0 3px rgba(134,222,211,.35)}
.v2-val:target .v2-val-ic{opacity:.42}
@media(hover:hover){
	.v2-val:hover{translate:0 -6px;border-color:rgba(134,222,211,.8);background-color:rgba(134,222,211,.12);box-shadow:0 22px 44px rgba(0,0,0,.26)}
	.v2-val:hover .v2-val-ic{opacity:.5;transform:translate(-4px,-4px) rotate(-6deg) scale(1.08)}
	.v2-val:hover .v2-val-no{transform:rotate(3deg) scale(1.06)}
}
.v2-marq{margin-top:clamp(56px,6vw,90px);--m-gap:clamp(28px,4vw,64px);color:rgba(255,255,255,.07);font:900 clamp(54px,9vw,132px)/1 Inter,sans-serif;letter-spacing:-.03em}
.v2-marq span:nth-child(3n+2){color:rgba(134,222,211,.2)}

/* ---- 6. 合宿の写真（大小・縦横を散らして重ねる。写真は camp_photos/ に入れて作り直すと入る） ---- */
.v2-camp{overflow:hidden;padding:clamp(40px,5vw,72px) 0 clamp(96px,10vw,150px);background:#fff;color:var(--text)}
.v2-camp-title{margin:16px 0 0;color:var(--ink);font-size:clamp(24px,2.7vw,36px);line-height:1.5}
.v2-ph-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"a a a a a b b b c c c c" "d d d e e e e e f f f f";align-items:center;gap:clamp(14px,2vw,28px);margin-top:44px}
.v2-ph{min-width:0;margin:0;padding:10px 10px 30px;border-radius:6px;background:#fff;box-shadow:0 14px 34px rgba(22,51,49,.16),0 0 0 1px rgba(22,51,49,.06);rotate:var(--r);transition:rotate .45s var(--v2-ease),translate .45s var(--v2-ease),box-shadow .45s ease}
.v2-ph--a{grid-area:a}.v2-ph--b{grid-area:b;translate:0 18px}.v2-ph--c{grid-area:c;translate:0 -14px}.v2-ph--d{grid-area:d}.v2-ph--e{grid-area:e;translate:0 12px}.v2-ph--f{grid-area:f;margin-inline:8%}
.v2-ph-in{position:relative;overflow:hidden;aspect-ratio:var(--ar);border-radius:3px;background:linear-gradient(135deg,#e9f7f4,#d9f1ed)}
.v2-ph-in img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.v2-ph-slot{position:absolute;left:10px;bottom:8px;color:#6d8581;font:800 10px/1 Inter,sans-serif;letter-spacing:.18em}
.v2-ph-in:has(img) .v2-ph-slot{display:none}
@media(hover:hover){.v2-ph:hover{rotate:0deg;translate:0 -6px;z-index:2;box-shadow:0 26px 54px rgba(22,51,49,.24)}}

/* ---- 1100px以下：バリューは3列 ---- */
@media(max-width:1100px){
	.v2-val-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---- 920px以下（スマホ・縮めたブラウザ） ---- */
@media(max-width:920px){
	.v2-head-in{grid-template-columns:minmax(0,1fr);gap:36px}
	.v2-head-ph{max-width:520px;margin-inline:auto}
	.v2-mission{padding-top:0}
	.v2-mission-art{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 40%,transparent 96%),linear-gradient(90deg,transparent 0%,#000 46%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 40%,transparent 96%),linear-gradient(90deg,transparent 0%,#000 46%);mask-composite:intersect}
	.v2-mission .v2-mv-in{padding-top:min(52vw,420px)}
	.v2-vision::before{background:linear-gradient(180deg,rgba(8,40,37,.82) 0%,rgba(8,40,37,.6) 58%,rgba(8,40,37,.12) 100%)}
	.v2-map-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px;padding-top:66px;padding-bottom:16px}
	.v2-map-side{justify-content:flex-start;padding-left:18px}
	.v2-map-title{margin-top:12px;font-size:12px}
	.v2-steps{height:128px;margin-top:12px}
	.v2-step-no{font-size:44px!important}
	.v2-step-no i{font-size:12px}
	.v2-step-ttl{margin-top:10px;font-size:19px;line-height:1.45}
	.v2-step-big{margin-top:8px;font-size:44px}
	.v2-step-sub{margin-top:6px;font-size:16px}
	.v2-step-more{margin-top:8px;font-size:12px}
	.v2-rail{top:0;height:100%;transform:none}
	.v2-view{border-radius:72px 24px 72px 24px}
	.v2-val-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 10px;margin-top:52px}
	.v2-val{padding:36px 14px 24px;border-radius:12px 22px 52px 22px}
	.v2-val:nth-child(even){border-radius:22px 12px 22px 52px}
	.v2-val-no{left:10px;top:-20px;padding:8px 13px 7px}
	.v2-val-no b{font-size:20px}
	.v2-val h4{font-size:15px}
	.v2-val-text{font-size:12.5px;line-height:1.85}
	.v2-val-ic{width:min(40%,70px);right:8px;bottom:8px;opacity:.13}
	.v2-ph-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"a a a a b b" "c c c d d d" "e e e e f f";gap:14px}
	.v2-ph--f{margin-inline:0}
	.v2-ph{padding:7px 7px 20px}
	.v2-ph--b,.v2-ph--c,.v2-ph--e{translate:none}
}
/* 横に広く縦が低い画面（スマホ横・拡大表示）：マップは左右2列のまま、文字を小さく */
@media(max-width:920px) and (orientation:landscape){
	.v2-map-in{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
	.v2-steps{height:150px}
}
@media(min-width:921px) and (max-height:620px){
	.v2-map-in{padding-top:92px;padding-bottom:12px}
	.v2-steps{height:210px;margin-top:14px}
	.v2-step-no{font-size:52px!important}
	.v2-step-ttl{font-size:22px;margin-top:10px}
	.v2-step-big{font-size:52px;margin-top:8px}
}
/* ---- 動きを減らす設定：マップは止めて全体を見せ、段は一覧にする ---- */
@media(prefers-reduced-motion:reduce){
	.v2-wave-b,.v2-cloud{animation:none}
	.v2-map.m-pin{height:auto}
	.v2-map-stage{padding:72px 0}
	.v2-map-in{height:auto;padding-top:0;padding-bottom:0}
	.v2-steps{height:auto;display:grid;gap:14px}
	.v2-step-no{font-size:28px!important}
	.v2-step-ttl{margin-top:4px;font-size:17px}
	.v2-step-big{font-size:28px;margin-top:4px}
	.v2-step-sub{display:none}
	.v2-step-more{display:none}
	.v2-rail{display:none}
	.v2-view{height:min(150vw,820px)}
	.v2-world{--ww:min(100cqw,66.6cqh)}
	.v2-climber,.v2-pt{transition:none}
}