:root{
  --bg-start:#6f7f95;
  --bg-end:#4a5b70;
  --ink:#0b1324;
  --muted:#e9edf3;
  --panel:rgba(255,255,255,.06);
  --maxw:1120px;
  --radius:24px;
  --mv-overhang: 0px;    
  --mv-top-gap: 120px;    
  --mv-news-top: 320px;  
  --section-gap: clamp(40px, 6vw, 96px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg,var(--bg-start),var(--bg-end));
}

/* MV全体 */
.mv{
  background: none;
  position: relative;
  display: grid;
  place-items: start center;
  min-height: 60vh;
  isolation: isolate;
  overflow: visible;
  padding-top: clamp(12px,2.5vw,20px);
  padding-bottom: clamp(16px,2vw,24px);
}
@media (min-width:1280px){
  .mv{ min-height: 830px; }
}

/* 背景装飾 */
.mv::before,
.mv::after {
  mix-blend-mode: normal;
}
.mv::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(135deg,var(--bg-start),var(--bg-end));
}
.mv::after{
  content:"";
  position:absolute;
  top:-90px; right:-170px;
  width:40vw;
  max-width:600px;
  aspect-ratio:1/1;
  background:url("./img/mv-bg1.png") no-repeat top right / contain;
  z-index:1;
  opacity:.9;
  pointer-events:none;
}
.bg-leftbottom{
  position:absolute;
  left:-220px; bottom:-150px;
  width:45vw;
  max-width:640px;
  aspect-ratio:1/1;
  background:url("./img/mv-bg2.png") no-repeat left bottom / contain;
  z-index:1;
  opacity:.85;
  pointer-events:none;
}

/* コンテンツ */
.mv__inner{ 
  position: relative;
  z-index: 2;
  margin-top: var(--mv-top-gap);
  width:100%;
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
  display:flex; align-items:center; justify-content:center;
  gap: clamp(16px,3.5vw,28px);
  padding:0;
}

/* 装飾を MV内に閉じ込める（未使用） */
.shapes{
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  overflow:hidden; display:none;
}

/* ブランド要素 */
.brand{display:flex; align-items:center; gap:18px;}
.mark{inline-size: clamp(72px,10vw,112px); aspect-ratio: 1/1.1; flex:0 0 auto;}
.copy{display:flex; flex-direction:column; gap:0px;}
.badge{
  width:fit-content;
  font-weight:700;
  font-size: clamp(12px,1.9vw,15px);
  line-height:1;
  color:#586A9E;
  background:#ffffff;
  border:1px solid #b8ccff;
  border-radius:999px;
  padding:8px 12px;
}
.title{
  font-weight:900;
  font-size: clamp(28px,5.8vw,56px);
  letter-spacing:.02em;
  margin:6px 0;
  line-height:1.05; 
  color:#ffffff;
  text-shadow:0 2px 14px rgba(12,22,34,.25);
}
.title .sub{
  display:block;
  font-weight:800;
  font-size: clamp(20px,4.5vw,40px);
  opacity:.95;
}

/* ニュースカード */
.mvnews__card{
  max-width:min(var(--maxw),1040px);
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 18px 36px rgba(16,24,40,.12);
  padding: clamp(16px, 3vw, 24px);
}
.mvnews__title{
  margin:0 0 clamp(10px,2.5vw,16px);
  text-align:center;
  font-weight:900;
  font-size:clamp(18px,3.6vw,26px);
}
.mvnews__item{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:clamp(12px,2.8vw,20px);
  align-items:start;
  padding:clamp(6px,1.5vw,8px);
  border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .mvnews__item:hover{
    transform:scale(0.97);
    box-shadow:0 6px 14px rgba(0,0,0,0.08);
  }
}
.mvnews__thumb{
  width:100%; aspect-ratio:1/1;
  border-radius:8px;
  background:#dedfe2;
}
.mvnews__body{min-width:0}
.mvnews__label{margin:0 0 4px;font-size:12px;font-weight:700;color:#6b7280;}
.mvnews__heading{margin:0 0 6px;font-weight:800;font-size:clamp(16px,2.6vw,20px);}
.mvnews__meta{margin:0;color:#1f2937;line-height:1.8;font-size:clamp(13px,2vw,15px);}
.mvnews__date{display:block;margin-top:6px;font-size:12px;color:#6b7280;}
.mvnews__rule{border:none;border-top:1px solid rgba(15,23,42,.08);margin:clamp(10px,2.6vw,16px) 0;}
.mvnews__thumb > img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px;}
@media (max-width:560px){
  .mvnews__item{grid-template-columns:1fr;}
  .mvnews__thumb{max-width:120px;}
}

/* レスポンシブ */
@media (max-width:720px){
  .mv__inner{flex-direction:column;text-align:left;}
  .brand{align-items:flex-start;}
  .mark{inline-size:84px;}
}

/* About */
.about{
  background:#f3f5f8;
  padding:var(--section-gap) 0;
  color:#0b1324;
}
.about__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(20px,4vw,32px);
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  gap:clamp(24px,5vw,48px);
  align-items:center;
}
.about__avatar{
  width:min(56vw,440px);
  max-width:300px;
  aspect-ratio:1/1;
  border-radius:50%;
  background:#e3e5e9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 24px rgba(16,24,40,.08);
}
.about__avatar.is-image{background:none;overflow:hidden;}
.about__avatar.is-image img{width:100%;height:100%;object-fit:cover;display:block;}
.about__body{min-width:0}
.about__kicker{margin:0 0 10px;font-size:clamp(14px,1.6vw,18px);color:#324154;}
.about__title{margin:0 0 18px;font-weight:900;font-size:clamp(28px,4.6vw,44px);line-height:1.2;}
.about__lead{margin:0 0 14px;font-size:clamp(15px,2vw,18px);line-height:1.9;color:#1c2a3d;}
.about__list{margin:6px 0 0;padding-left:1.2em;font-size:clamp(15px,2vw,18px);line-height:1.9;}
.about__list li{list-style:disc;}
.about__etc{margin:8px 0 0;font-size:clamp(15px,2vw,18px);line-height:1.9;color:#1c2a3d;}
@media (max-width:880px){
  .about__inner{grid-template-columns:1fr;gap:clamp(20px,5vw,32px);}
  .about__avatar{justify-self:center;}
}

/* Sites */
.sites{background:#fff;padding:var(--section-gap) 0;}
.sites__inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,32px);}
.sites__title{margin:0 0 clamp(20px,3vw,28px);font-size:clamp(22px,4vw,32px);font-weight:900;text-align:center;}
.sitecard{
  display:grid;grid-template-columns:164px 1fr;gap:clamp(16px,3vw,28px);
  background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 24px rgba(16,24,40,.06);
  padding:clamp(16px,3.2vw,28px);margin:0 0 clamp(28px,4.5vw,44px);
}
.sitecard__thumb{width:100%;aspect-ratio:1/1;border-radius:12px;background:#dedfe2;}
.sitecard__kicker{margin:2px 0 6px;font-size:clamp(12px,1.8vw,14px);color:#374151;}
.sitecard__heading{margin:0 0 8px;font-size:clamp(18px,2.6vw,22px);font-weight:800;}
.sitecard__desc{margin:0;color:#1f2937;line-height:1.9;font-size:clamp(14px,2vw,16px);}
.sitecard__link{display:inline-block;margin-top:14px;padding:10px 14px;border-radius:999px;background:#0b1324;color:#fff;text-decoration:none;font-weight:700;font-size:14px;}
@media (max-width:720px){
  .sitecard{grid-template-columns:1fr;}
  .sitecard__thumb{max-width:220px;justify-self:start;}
}

/* Links */
.links{background:#f7f8fa;padding:var(--section-gap) 0;}
.links__inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,32px);}
.links__title{margin:0 0 clamp(20px,3vw,28px);font-size:clamp(22px,4vw,32px);font-weight:900;text-align:center;}
.links__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(20px,3vw,28px);}
.linkcard{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(14px,2.5vw,20px);
  background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 18px rgba(16,24,40,.06);
  padding:clamp(14px,2.8vw,22px);
}
.linkcard__thumb{width:100%;aspect-ratio:1/1;border-radius:12px;background:#d9dadc;}
.linkcard__kicker{margin:0 0 6px;font-size:clamp(12px,1.6vw,14px);color:#374151;}
.linkcard__heading{margin:0 0 8px;font-size:clamp(16px,2.6vw,20px);font-weight:800;}
.linkcard__desc{margin:0;font-size:clamp(14px,2vw,16px);line-height:1.8;color:#1f2937;}
@media (max-width:600px){
  .linkcard{grid-template-columns:1fr;}
  .linkcard__thumb{max-width:140px;justify-self:start;}
}

/* Footer */
:root{
  --footer-bg:#2e2f31;
  --footer-ink:#f5f6f7;
  --footer-dim:#cfd3d8;
  --footer-rule:#bfc4ca;
}
.footer{background:var(--footer-bg);color:var(--footer-ink);padding:clamp(40px,7vw,96px) 0;}
.footer a{color:var(--footer-ink);text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,32px);}
.footer__kicker{margin:0;font-weight:700;font-size:clamp(13px,1.6vw,16px);color:var(--footer-dim);}
.footer__title{margin:8px 0 28px;font-size:clamp(26px,4.6vw,40px);font-weight:900;}
.footnav{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:clamp(16px,3vw,40px);margin-bottom:clamp(24px,5vw,48px);}
.footnav__col{list-style:none;margin:0;padding:0;}
.footnav__head{margin:0 0 8px;font-weight:800;color:var(--footer-ink);}
.footnav__col li{margin:8px 0;font-size:clamp(14px,2vw,16px);}
.footer__rule{border:none;border-top:1px solid var(--footer-rule);opacity:.6;margin:clamp(20px,4vw,36px) 0;}
.sns__title{margin:0 0 16px;font-weight:900;font-size:clamp(18px,3.4vw,24px);}
.sns__cols{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:clamp(16px,3vw,40px);margin-bottom:clamp(24px,5vw,44px);}
.sns__head{margin:0 0 8px;font-size:clamp(15px,2.2vw,18px);}
.sns__sub{color:var(--footer-dim);font-weight:600;font-size:.95em;}
.sns__col ul{margin:0;padding-left:1.1em;}
.sns__col li{margin:6px 0;}
.copyright{margin:0;font-size:clamp(13px,1.8vw,16px);color:var(--footer-dim);line-height:1.9;}
.copyright__sub{opacity:.95;}
@media (max-width:720px){.footnav{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footnav{grid-template-columns:1fr;}.sns__cols{grid-template-columns:1fr;}}

/* カード凹み制御 */
.sitecard, .linkcard, .mvnews__card {transition:transform 0.2s ease;}
.is-bouncy:hover{transform:scale(0.97);}

/* ===== ニュース配置の修正版 ===== */

/* デスクトップ（≧1100px）はみ出し */
@media (min-width:1100px){
  .mv{padding-bottom:clamp(120px,20vw,280px);}
  .mv__news{
    position:absolute; left:0; right:0;
    top:var(--mv-news-top);
    z-index:3;
    padding-inline:clamp(20px,4vw,32px);
  }
  .mv__spacer{display:block;height:clamp(120px,22vw,280px);}
}

/* タブレット以下（≦1099.98px）は通常フロー */
@media (max-width:1099.98px){
  .mv{min-height:auto;padding-bottom:0;}
  .mv__news{
    position:static !important;
    margin-top:var(--section-gap);
    margin-bottom:var(--section-gap);
    padding-inline:clamp(16px,4vw,24px);
    z-index:3;
  }
  .mv__spacer{display:none;}
}

/* 汎用 */
html, body {overflow-x:clip;}
@supports not (overflow:clip){html, body {overflow-x:hidden;}}
.mv::after,.bg-leftbottom{max-width:100vw;contain:layout paint;}
:focus-visible{outline:2px solid #fff;outline-offset:2px;}