/* 採用MVを既存サイト内に限定して適用。装飾だけをブランドのネイビーへ変換。 */
.brand-mv *{box-sizing:border-box}
.brand-mv a{color:inherit;text-decoration:none}
.brand-mv button{font:inherit}
.brand-mv img{display:block;max-width:100%}
.brand-mv a:focus-visible,.brand-mv button:focus-visible{outline:3px solid #bd7b00;outline-offset:6px}
.brand-mv .skip{position:fixed;z-index:99;left:12px;top:12px;background:white;padding:12px;transform:translateY(-160%)}
.brand-mv .skip:focus{transform:none}
.brand-mv .stage{position:relative;width:100%;max-width:1920px;margin:0 auto;aspect-ratio:3/2;isolation:isolate;overflow:hidden;container-type:inline-size}
.brand-mv .background{position:absolute;inset:0;z-index:-1;pointer-events:none}
.brand-mv .background img{width:100%;height:auto}
.brand-mv .header{position:absolute;z-index:10;top:1.3cqw;left:1.82cqw;right:3.06cqw;display:flex;align-items:center;gap:3.7cqw;min-height:44px}
.brand-mv .brand{width:10.16cqw;display:flex;align-items:center;min-height:44px}
.brand-mv .brand img{width:100%;height:auto}
.brand-mv .desktop-nav{margin-left:auto;display:flex;align-items:center;gap:3.25cqw;font-size:1cqw;font-weight:700}
.brand-mv .desktop-nav a{display:flex;align-items:center;min-height:44px;white-space:nowrap}
.brand-mv .contact{display:flex;gap:1cqw;align-items:center;justify-content:center;color:white;background:var(--blue);font-size:1.05cqw;font-weight:600;min-height:44px;padding:1cqw 2.15cqw;white-space:nowrap}
.brand-mv .contact img{width:1.6cqw;height:auto}
.brand-mv .menu-toggle,.brand-mv .mobile-menu{display:none}
.brand-mv .copy{position:absolute;z-index:3;left:3.65%;top:28.45%;width:40.5%}
.brand-mv h1{font-size:4.12cqw;line-height:1.52;letter-spacing:-.03em;font-weight:900;margin:0;color:#06132f}
.brand-mv h1 span{display:block;white-space:nowrap}
.brand-mv .tagline{font-weight:700;font-size:1.57cqw;margin:1.8cqw 0 2.4cqw;letter-spacing:.01em;white-space:nowrap}
.brand-mv .disciplines{font-family:Arial,"Noto Sans JP",sans-serif;font-size:.92cqw;font-weight:700;letter-spacing:.06em;display:flex;gap:1cqw;align-items:center;margin:0 0 3.25cqw;white-space:nowrap}
.brand-mv .disciplines::before{content:"";display:block;width:2.85cqw;height:2px;background:#dfad2a;margin-right:.4cqw}
.brand-mv .disciplines i{font-style:normal}
.brand-mv .actions{display:flex;gap:1.3cqw;align-items:center;white-space:nowrap}
.brand-mv .actions a{display:flex;align-items:center;justify-content:center;min-height:44px;height:3.85cqw;font-size:1.1cqw;gap:.7cqw;padding:0 1.1cqw;border:1px solid var(--ink);font-weight:600;transition:background .18s,box-shadow .18s}
.brand-mv .actions .line{background:var(--line);border-color:var(--line);color:white;width:16.2cqw}
.brand-mv .line img{width:2cqw;height:auto}
.brand-mv .actions svg{width:1.6cqw;height:1.6cqw;fill:none;stroke:currentColor;stroke-width:1.3;margin-left:auto}
.brand-mv .works-link{width:12.1cqw}
.brand-mv .scene{position:absolute;inset:0;z-index:1}
.brand-mv .tile{position:absolute;margin:0;border-radius:3px;box-shadow:1px 5px 9px #1a2b4321;transform:rotate(var(--angle,0deg));transform-origin:center;overflow:hidden;background:#fff}
.brand-mv .tile img{width:100%;height:auto}
.brand-mv .tile:is(a){transition:box-shadow .2s,translate .2s}
.brand-mv .tile:is(a):hover{translate:0 -4px;box-shadow:2px 10px 20px #1a2b4330}
.brand-mv .tile:focus-visible{z-index:6}
.brand-mv .yamasei{left:52.5%;top:11.7%;width:20.2%;--angle:-1.4deg}
.brand-mv .kikuchi{left:76.2%;top:11.5%;width:13.7%;--angle:-1.8deg}
.brand-mv .kikuchi img{aspect-ratio:1.12;object-fit:cover;object-position:center 28%}
.brand-mv .sanwa{left:60.15%;top:31.55%;width:30.35%;--angle:-1.1deg}
.brand-mv .aoki{left:46.75%;top:37.9%;width:9.65%;--angle:-.8deg}
.brand-mv .aoki img{aspect-ratio:1.03;object-fit:cover;object-position:center 15%}
.brand-mv .dogfes{left:45.5%;top:58.5%;width:19.8%;--angle:1.7deg}
.brand-mv .todaka{left:70.5%;top:57.5%;width:25.7%;--angle:2.2deg}
.brand-mv .shinmaiko{left:70.55%;top:81.1%;width:13.9%;--angle:3deg}
.brand-mv .turbine{position:absolute;z-index:4;left:84.3%;top:33.6%;width:18%;height:auto;pointer-events:none;user-select:none}
@media(hover:hover){.brand-mv .line:hover{background:#00660a;box-shadow:0 5px 12px #00830c24}
.brand-mv .contact:hover{background:#002cbf}
.brand-mv .works-link:hover{background:#fff8}
}
@media(min-width:761px) and (max-width:1100px){.brand-mv .desktop-nav{font-size:12px;gap:2cqw}
.brand-mv .contact{font-size:12px}
.brand-mv .actions a{font-size:12px}
.brand-mv .actions .line{width:19cqw}
.brand-mv .works-link{width:15cqw}
.brand-mv .actions svg{width:16px;height:16px}
.brand-mv .tagline{font-size:clamp(12px,1.57cqw,18px)}
}
@media(max-width:760px){.brand-mv .stage{aspect-ratio:auto;padding-bottom:0;min-height:0;overflow:clip}
.brand-mv .background{top:auto;bottom:0;height:auto}
.brand-mv .background img{width:100%;height:auto}
.brand-mv .header{position:relative;top:auto;left:auto;right:auto;padding:12px 4.5%;gap:12px;min-height:68px}
.brand-mv .brand{width:80px;min-height:44px}
.brand-mv .desktop-nav{display:none}
.brand-mv .contact{margin-left:auto;min-height:44px;padding:0 12px;font-size:12px;gap:8px}
.brand-mv .contact img{width:18px}
.brand-mv .menu-toggle{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;padding:8px;background:transparent;color:var(--ink);cursor:pointer}
.brand-mv .menu-toggle span{height:2px;width:24px;background:currentColor;transition:transform .18s,opacity .18s}
.brand-mv .menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.brand-mv .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.brand-mv .menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.brand-mv .mobile-menu:not([hidden]){display:flex;position:absolute;top:calc(100% - 2px);left:4.5%;right:4.5%;padding:12px 20px;flex-direction:column;background:#fffaf5;box-shadow:0 8px 25px #07153626;border:1px solid #0615361f}
.brand-mv .mobile-menu a{padding:14px 0;border-bottom:1px solid #06153615;font-size:15px}
.brand-mv .mobile-menu a:last-child{border-bottom:0}
.brand-mv .copy{position:relative;top:auto;left:auto;width:auto;margin:13px 7.2% 0;z-index:3}
.brand-mv h1{font-size:clamp(27px,8.6cqw,60px);line-height:1.42;letter-spacing:-.045em}
.brand-mv .tagline{font-size:clamp(12px,3.25cqw,23px);margin:16px 0 14px;letter-spacing:0}
.brand-mv .tagline span{white-space:nowrap}
.brand-mv .disciplines{font-size:clamp(9px,2.12cqw,14px);gap:2cqw;letter-spacing:.04em;margin-bottom:16px}
.brand-mv .disciplines::before{width:5.3cqw;height:2px;margin-right:.5cqw}
.brand-mv .actions{gap:12px}
.brand-mv .actions a{height:46px;min-height:46px;font-size:clamp(11px,3.1cqw,18px);padding:0 10px;gap:6px}
.brand-mv .actions .line{width:55%}
.brand-mv .actions .works-link{width:45%}
.brand-mv .line img{width:23px}
.brand-mv .actions svg{width:18px;height:18px;flex-shrink:0}
.brand-mv .scene{position:relative;inset:auto;width:100%;aspect-ratio:430/420;margin-top:25px}
.brand-mv .yamasei{left:4.65%;top:1.9%;width:41.16%;--angle:-2deg}
.brand-mv .kikuchi{left:52%;top:1%;width:22%;--angle:-2deg}
.brand-mv .sanwa{left:27%;top:24%;width:56%;--angle:-1deg}
.brand-mv .aoki{left:4.65%;top:32%;width:18.14%;--angle:-3deg}
.brand-mv .dogfes{left:3%;top:59%;width:23.5%;--angle:1deg}
.brand-mv .todaka{left:27%;top:57%;width:57.2%;--angle:1.2deg}
.brand-mv .shinmaiko{left:5%;top:79%;width:24%;--angle:3deg}
.brand-mv .turbine{top:auto;bottom:8.2cqw;left:73%;width:43%;z-index:4}
}
@media(prefers-reduced-motion:reduce){.brand-mv *,.brand-mv *::before,.brand-mv *::after{transition:none!important;scroll-behavior:auto!important}
}

.hero.brand-mv{padding:0;background:var(--paper);--ink:var(--navy);--blue:var(--navy);--cream:var(--paper);--line:#ebe6dc}
.hero.brand-mv::before,.hero.brand-mv::after{display:none}
.brand-mv .stage{background:var(--paper)}
.brand-mv h1{color:var(--navy);text-wrap:initial}
.brand-mv .tagline{color:var(--navy)}
.brand-mv .disciplines::before{background:var(--amber)}
.brand-mv .actions a{border-radius:6px;letter-spacing:0;line-height:1.4}
.brand-mv .actions .line{background:#087b40;border-color:#087b40}
.brand-mv .brand-coast{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:url(#free-brand-navy)}
.brand-mv .brand-coast img{width:100%;height:auto}
.brand-mv .turbine{filter:url(#free-brand-navy)}
.brand-mv .brand-color-filter{position:absolute;pointer-events:none}
.brand-mv .mv-followup{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:30px;padding-bottom:20px;font-size:14px;color:var(--body)}
.brand-mv .mv-contact{display:grid;grid-template-columns:auto auto;gap:4px 14px;align-items:center;flex-shrink:0}
.brand-mv .mv-phone{font-family:Outfit,sans-serif;color:var(--navy);font-size:21px;font-weight:600}
.brand-mv .mv-contact span{font-size:11px}.brand-mv .mv-form{grid-column:1/-1;color:var(--navy);font-weight:700;text-underline-offset:5px;text-decoration:underline}
.brand-mv .mv-news{padding-bottom:35px}.brand-mv .hero-news{margin-top:0}
@media(max-width:760px){
 .brand-mv .copy{margin-top:112px}
 .brand-mv .brand-coast{top:auto;bottom:0;height:auto}
 .brand-mv .mv-followup{display:block;padding:24px;font-size:13px}
 .brand-mv .mv-contact{margin-top:18px;justify-content:start}
 .brand-mv .mv-news{padding:0 24px 28px}
}

.brand-mv .copy{border:0;padding:0;text-align:left;color:var(--navy)}

/* 左側は「悩み→約束→相談」の順で一息に読める構成へ。 */
@media(min-width:761px){
 .brand-mv .copy{left:7.25%;top:18.5%;width:48%;}
 .brand-mv .hero-question{position:relative;display:inline-flex;align-items:center;min-height:4.2cqw;margin:0 0 3.25cqw;padding:0 2.15cqw;border:1px solid #dcd5c9;border-radius:999px;background:#fffcf8;color:var(--navy);font-size:1.32cqw;font-weight:700;letter-spacing:.015em}
 .brand-mv .hero-question::after{content:"";position:absolute;left:3.45cqw;bottom:-.68cqw;width:1.25cqw;height:1.25cqw;background:#fffcf8;border-right:1px solid #dcd5c9;border-bottom:1px solid #dcd5c9;transform:rotate(45deg)}
 .brand-mv h1{font-size:clamp(52px,5.25cqw,86px);line-height:1.42;letter-spacing:-.055em}
 .brand-mv .tagline{font-size:1.78cqw;margin:2.1cqw 0 2.4cqw;font-weight:800;letter-spacing:-.02em}
 .brand-mv .tagline span{display:inline;padding:0 .35cqw .12cqw;background:linear-gradient(transparent 55%,#efd49e 55%)}
 .brand-mv .disciplines{display:none}
 .brand-mv .hero-description{margin:0;color:#606a7c;font-size:1.35cqw;line-height:1.85;letter-spacing:.035em}
 .brand-mv .hero-contact-row{display:flex;align-items:center;gap:2.1cqw;margin-top:3.2cqw}
 .brand-mv .actions .line{width:22.5cqw;height:4.75cqw;min-height:56px;border-radius:999px;background:var(--navy);border-color:var(--navy);padding:0 1.8cqw;font-size:1.32cqw;box-shadow:0 12px 28px #0c243f1d}
 .brand-mv .actions .line img{display:none}
 .brand-mv .actions .line svg{width:1.55cqw;height:1.55cqw;margin-left:.6cqw}
 .brand-mv .hero-phone{display:grid;gap:.25cqw;white-space:nowrap}
 .brand-mv .hero-phone a{font-family:Outfit,"Noto Sans JP",sans-serif;color:var(--navy);font-size:1.7cqw;font-weight:750;letter-spacing:.01em}
 .brand-mv .hero-phone span{color:#6f7786;font-size:.85cqw}
}

@media(max-width:760px){
 .brand-mv .hero-question{position:relative;display:inline-flex;align-items:center;min-height:34px;margin:0 0 18px;padding:0 14px;border:1px solid #dcd5c9;border-radius:999px;background:#fffcf8;color:var(--navy);font-size:11px;font-weight:700;white-space:nowrap}
 .brand-mv .hero-question::after{content:"";position:absolute;left:21px;bottom:-6px;width:11px;height:11px;background:#fffcf8;border-right:1px solid #dcd5c9;border-bottom:1px solid #dcd5c9;transform:rotate(45deg)}
 .brand-mv .tagline{margin:16px 0 20px;font-weight:800}
 .brand-mv .tagline span{padding:0 3px 2px;background:linear-gradient(transparent 56%,#efd49e 56%)}
 .brand-mv .disciplines{display:none}
 .brand-mv .hero-description{margin:0;color:#606a7c;font-size:13px;line-height:1.8;letter-spacing:.01em}
 .brand-mv .hero-contact-row{display:block;margin-top:23px}
 .brand-mv .actions .line{width:100%;height:54px;min-height:54px;border-radius:999px;background:var(--navy);border-color:var(--navy);font-size:14px;box-shadow:0 9px 20px #0c243f1d}
 .brand-mv .actions .line img{display:none}
 .brand-mv .hero-phone{display:flex;align-items:baseline;gap:10px;margin-top:14px}
 .brand-mv .hero-phone a{font-family:Outfit,"Noto Sans JP",sans-serif;color:var(--navy);font-size:20px;font-weight:750;white-space:nowrap}
 .brand-mv .hero-phone span{color:#6f7786;font-size:10px;white-space:nowrap}
}

/* 旧TOPの余白と文字スケールを基準に、PC左カラムを整える。 */
@media(min-width:761px){
 .brand-mv .copy{left:12.8%;top:17.6%;width:43%}
 .brand-mv .hero-question{min-height:3.2cqw;margin-bottom:1.8cqw;padding:0 1.55cqw;font-size:1.02cqw}
 .brand-mv .hero-question::after{left:2.45cqw;bottom:-.53cqw;width:1cqw;height:1cqw}
 .brand-mv h1{font-size:clamp(48px,4.2cqw,68px);line-height:1.46;letter-spacing:-.05em}
 .brand-mv .tagline{font-size:1.55cqw;margin:1.55cqw 0 2.15cqw}
 .brand-mv .hero-description{font-size:1.15cqw;line-height:1.8}
 .brand-mv .hero-contact-row{gap:1.65cqw;margin-top:2.65cqw}
 .brand-mv .actions .line{width:20.7cqw;height:4.05cqw;font-size:1.08cqw}
 .brand-mv .hero-phone a{font-size:1.45cqw}
 .brand-mv .hero-phone span{font-size:.74cqw}
}

/* 間隔ごと同じ倍率で縮小し、写真群のまとまりを保つ。 */
.brand-mv .scene{transform:scale(.87);transform-origin:75% 52%}
.brand-mv .brand-coast{z-index:2}
.brand-mv .iesuma-sp{left:64%;top:59%;width:6.8%;--angle:-2.5deg}
.brand-mv .medallion-sp{left:92%;top:16%;width:8%;--angle:2deg}
.brand-mv .dogfes{width:17%;left:45.5%}
@media(max-width:760px){
 .brand-mv .scene{transform:scale(.88);transform-origin:50% 25%}
 .brand-mv .iesuma-sp{left:85%;top:35%;width:12%;--angle:2deg}
 .brand-mv .medallion-sp{left:82%;top:2%;width:13%;--angle:2deg}
 .brand-mv .dogfes{left:3%;width:23.5%}
}

@media(min-width:761px){.brand-mv .shinmaiko{top:87%}}

/* イエスマを山盛の左へ。横長事例のサイズを抑え、地域写真を右上へ。 */
@media(min-width:761px){
 .brand-mv .iesuma-sp{left:43.5%;top:12%;width:6.8%}
 .brand-mv .sanwa{left:59%;top:34%;width:25%}
 .brand-mv .todaka{left:65%;top:67%;width:22%}
 .brand-mv .shinmaiko{left:85%;top:47%;width:18%;--angle:2deg}
}
@media(max-width:760px){
 .brand-mv .iesuma-sp{left:3%;top:2%;width:12%;--angle:-2deg}
 .brand-mv .yamasei{left:18%;top:2%;width:36%}
 .brand-mv .kikuchi{left:57%;top:1%;width:20%}
 .brand-mv .sanwa{left:25%;top:30%;width:44%}
 .brand-mv .todaka{left:29%;top:61%;width:47%}
 .brand-mv .shinmaiko{left:72%;top:32%;width:27%;--angle:2deg}
}

/* 戸高を小さくし、新舞子写真と上下・左右の配置を交換。 */
@media(min-width:761px){
 .brand-mv .todaka{left:84%;top:47%;width:19%}
 .brand-mv .shinmaiko{left:65%;top:67%;width:18%}
}
@media(max-width:760px){
 .brand-mv .todaka{left:70%;top:33%;width:32%}
 .brand-mv .shinmaiko{left:29%;top:61%;width:27%}
}

/* 戸高を下段へ戻し、メダリオン直下は空ける。 */
@media(min-width:761px){
 .brand-mv .todaka{left:65%;top:67%;width:19%}
 .brand-mv .shinmaiko{left:45.5%;top:77%;width:18%}
}
@media(max-width:760px){
 .brand-mv .todaka{left:29%;top:61%;width:40%}
 .brand-mv .shinmaiko{left:3%;top:80%;width:27%}
}

@media(max-width:760px){.brand-mv .shinmaiko{top:76%;width:25%}}

/* 新舞子の原写真を淡い背景に。画像データは加工しない。 */
.brand-mv .mv-local-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.14;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0%,#000 65%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 65%)}
@media(min-width:761px){.brand-mv .todaka{left:64%;top:60%;width:22%}}
@media(max-width:760px){
 .brand-mv .todaka{left:29%;top:56%;width:46%}
 .brand-mv .mv-local-background{object-position:70% center;opacity:.12;mask-image:linear-gradient(180deg,transparent 10%,#000 55%);-webkit-mask-image:linear-gradient(180deg,transparent 10%,#000 55%)}
}

/* 戸高は風車へ少し重ね、メダリオンを上へ寄せて写真群を締める。 */
@media(min-width:761px){
 .brand-mv .todaka{left:65.5%;top:58%;width:22%} /* 2026-09-07 少し左へ（69%→65.5%） */
 .brand-mv .medallion-sp{top:11%}
}
@media(max-width:760px){
 .brand-mv .todaka{left:35%;top:54%;width:46%}
 .brand-mv .medallion-sp{top:-2%}
}

/* MVの最初の一呼吸。読みやすさを優先し、動きは控えめにする。 */
@media(prefers-reduced-motion:no-preference){
 .brand-mv .copy{animation:mv-copy-in .7s cubic-bezier(.16,1,.3,1) both}
 .brand-mv .tile{opacity:0;will-change:margin-top;animation:mv-tile-in .72s cubic-bezier(.16,1,.3,1) both,mv-card-float 8.6s cubic-bezier(.45,0,.55,1) 1.1s infinite;animation-delay:var(--enter-delay,0s),var(--float-delay,1.1s)}
 .brand-mv .iesuma-sp{--enter-delay:.05s;--float-delay:1.4s}.brand-mv .yamasei{--enter-delay:.1s;--float-delay:2.5s}.brand-mv .kikuchi{--enter-delay:.15s;--float-delay:1.8s}.brand-mv .medallion-sp{--enter-delay:.2s;--float-delay:3s}.brand-mv .aoki{--enter-delay:.24s;--float-delay:2.1s}.brand-mv .sanwa{--enter-delay:.29s;--float-delay:1.2s}.brand-mv .dogfes{--enter-delay:.34s;--float-delay:2.8s}.brand-mv .todaka{--enter-delay:.39s;--float-delay:1.6s}
 .brand-mv .turbine{transform-origin:50% 100%;animation:mv-turbine-sway 7.5s cubic-bezier(.45,0,.55,1) .8s infinite}
}
@keyframes mv-copy-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes mv-tile-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes mv-card-float{0%,100%{margin-top:0}50%{margin-top:-3px}}
@keyframes mv-turbine-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(.42deg)}}

/* SPは戸高を抑え、他の事例と人物を少し大きく見せる。 */
@media(max-width:760px){
 .brand-mv .iesuma-sp{width:14%}
 .brand-mv .yamasei{left:17%;width:39%}
 .brand-mv .kikuchi{left:58%;width:22%}
 .brand-mv .medallion-sp{width:15%}
 .brand-mv .aoki{width:20%}
 .brand-mv .sanwa{left:24%;width:47%}
 .brand-mv .dogfes{width:26%}
 .brand-mv .todaka{left:34%;top:55%;width:40%}
}

/* SPでは縦長カードと左側の小さな事例群をほんの少し左へ寄せる。 */
@media(max-width:760px){
 .brand-mv .iesuma-sp{left:1.5%}
 .brand-mv .medallion-sp{left:78%}
 .brand-mv .aoki{left:2.5%}
 .brand-mv .dogfes{left:1.5%}
}
