/* Top page styles (moved from inline styles) */

:root{
  --accent:#02673A;
  --text:#1A1A1A;
  --white:#FFFFFF;
  --border:#DDDDDD;
  --bg:#F7F7F7;
  --muted:#999999;
  --container:1200px;
  --pad:24px;
  --menu-ink:#00351E;
  /* #アンカー時: .ng-header__inner の高さ(7.5rem) + 少し余白（影・丸め誤差対策）。減算すると被る */
  --ng-header-scroll-padding:calc(7.5rem + 12px);
}

*{box-sizing:border-box}
html,body{height:100%}
/* 同一ページ・別ページ問わず #id スクロール時に固定ヘッダー分を空ける（html/body どちらがスクロール根でも効くよう両方指定） */
html,
body{
  scroll-padding-top:var(--ng-header-scroll-padding);
}
body{
  margin:0;
  font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-menuOpen{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}
.ng-container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.ng-srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Page top button */
.ng-pageTop{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:900;
  width:64px;
  height:64px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.ng-pageTop.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.ng-pageTop img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.ng-pageTop:focus-visible{
  outline:3px solid rgba(2,103,58,.35);
  outline-offset:4px;
  border-radius:999px;
}

/* Container width by page type */
.ng-section[aria-label="ページタイトル"]{
  --container:1200px;
}

.ng-features,
.ng-career,
.ng-info,
.ng-schoolLife,
.ng-vdocs,
.ng-ee{
  --container:1370px;
}

.ng-club,
.ng-newsArchive,
.ng-newsSingle{
  --container:1200px;
}

/* Header */
.ng-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10;
  background:#fff;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition: background-color .28s ease, box-shadow .28s ease;
}
/* Home: header is not sticky on hero, becomes sticky after leaving hero */
body.ng-home:not(.is-headerFixed) .ng-header{
  position:absolute;
  background:transparent;
}
body.ng-home.is-headerFixed .ng-header{
  position:fixed;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
/* Non-home pages: always sticky with white bg */
body:not(.ng-home) .ng-header{
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
/* .ng-container の max-width / 中央寄せはヘッダーでは使わない（ズームで幅が変わるとロゴだけ横にずれるため） */
.ng-header .ng-header__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:7.5rem;
  max-width:none;
  width:100%;
  margin-left:0;
  margin-right:0;
  padding-left:var(--pad);
  padding-right:120px;
  box-sizing:border-box;
}
.ng-brand{display:flex;align-items:center;gap:12px}
.ng-brand__logo{
  width: 100%;
  height: 48px;
  object-fit:contain;
}
/* Home hero: swap logo to white before sticky */
.ng-brand__logo--white{display:none}
body.ng-home:not(.is-headerFixed) .ng-brand__logo--default{display:none}
body.ng-home:not(.is-headerFixed) .ng-brand__logo--white{display:block}
.ng-brand__name{
  font-weight:700;
  font-size:24px;
  line-height:1;
  letter-spacing:.02em;
}
.ng-menuBtn{
  position: absolute;
  right: 0;
  top: 0;
  width:120px;
  height:120px;
  background:var(--accent);
  border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  cursor:pointer;
}
body.is-menuOpen .ng-menuBtn{pointer-events:none}
.ng-burger{display:flex;flex-direction:column;gap:12px}
.ng-burger span{width:48px;height:2px;background:var(--white);display:block}
.ng-menuBtn__label{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--white);
  font-size:18px;line-height:1;
}

/* Menu overlay (Figma: 85:317) */
.ng-menuOverlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  background:transparent;
}
.ng-menuOverlay[hidden]{display:none}
.ng-menuOverlay.is-open{display:block}
.ng-menuPanel{
  position:relative;
  height: 750px;
  background:var(--accent);
}
.ng-menuPanel__inner{
  position:relative;
  width:min(1344px, calc(100% - 2*var(--pad)));
  margin:0 auto;
  height:100%;
}
/* Figma Top_sp 418:4152 — ヘッダー帯（Menu / Close） */
.ng-menuHeader{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:120px;
  pointer-events:none;
  z-index:5;
}
.ng-menuHeader > *{
  pointer-events:auto;
}
.ng-menuTitle{
  position:absolute;
  left:0;
  top:32px;
  z-index:3;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size:40px;
  line-height:1;
  color:var(--menu-ink);
  margin:0;
}
.ng-menuRule{
  position:absolute;
  left:0;
  right:72px;
  top:119px;
  z-index:2;
  height:1px;
  background:var(--menu-ink);
  opacity:1;
}
.ng-menuClose{
  position:absolute;
  right:0;
  top:0;
  z-index:5;
  width:120px;height:120px;
  background:var(--white);
  border:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.ng-menuCloseX{
  width:48px;height:48px;
  position:relative;
}
.ng-menuCloseX::before,
.ng-menuCloseX::after{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:2px;
  background:var(--accent);
  transform-origin:center;
}
.ng-menuCloseX::before{transform:translateY(-50%) rotate(45deg)}
.ng-menuCloseX::after{transform:translateY(-50%) rotate(-45deg)}
.ng-menuCloseLabel{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size:18px;
  line-height:1;
  color:var(--accent);
}
.ng-menuNav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:184px;
  z-index:1;
  display:flex;
  gap:80px;
  align-items:flex-start;
}
.ng-menuCol{
  display:flex;
  flex-direction:column;
  gap:40px;
  min-width: 200px;
}
.ng-menuBlock{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.ng-menuBlock__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.ng-menuSub{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.ng-menuToggle{
  display:none;
  border:0;
  background:transparent;
  color:var(--white);
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
}
.ng-menuToggle__icon{
  position:relative;
  display:block;
  width:24px;
  height:24px;
}
.ng-menuToggle__icon::before,
.ng-menuToggle__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:2px;
  background:currentColor;
  transform:translate(-50%, -50%);
}
.ng-menuToggle__icon::after{transform:translate(-50%, -50%) rotate(90deg)}
.ng-menuBlock.is-open .ng-menuToggle__icon::after{opacity:0}
.ng-menuSubItem{
  font-weight:500;
  font-size:16px;
  line-height:1;
  color:rgba(255,255,255,.92);
}
.ng-menuSubItem:hover{opacity:.9}
.ng-menuItem{
  display:flex;
  flex-direction:column;
  gap:10px;
  line-height:1;
}
.ng-menuItem__en{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-weight:600;
  font-size:14px;
  color:var(--menu-ink);
  letter-spacing:.02em;
}
.ng-menuItem__jp{
  font-weight:500;
  font-size: 20px;
  color:var(--white);
}
.ng-menuItem:hover .ng-menuItem__jp{opacity:.9}
.ng-menuBackdrop{
  position:absolute;
  left:0;right:0;
  top:608px;
  bottom:0;
}

/* Hero */
.ng-hero{
  position:relative;
  min-height:900px;
  overflow:hidden;
  background:#e4dcd5;
}
.slide-items{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
}
.slide-items,
.slide-items .slick-list,
.slide-items .slick-track{
  height:100%;
}
.slide-items .slick-slide{height:100%}
.slide-items li{height:100%}
.slide-items img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.slide-items .slick-dots{
  bottom:auto;
  top:50%;
  right:24px;
  left:auto;
  transform:translateY(-50%);
  width:auto;
  display:flex !important;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:0;
}
.ng-hero .slide-items.slick-dotted.slick-slider{margin-bottom:0}
.ng-hero .slide-items .slick-dots li{
  margin:0;
  width:auto;
  height:auto;
}
.ng-hero .slide-items .slick-dots li button{
  width:14px;
  height:14px;
  padding:0;
}
.ng-hero .slide-items .slick-dots li button:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:10px;
  height:10px;
  border-radius:999px;
  border:1.5px solid var(--accent);
  background:transparent;
  opacity:1;
}
.ng-hero .slide-items .slick-dots li.slick-active button:before{
  width:14px;
  height:14px;
  border:0;
  background:transparent;
  background-image:url("../images/icon/fv-dot-active.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.ng-hero__bg{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:translateZ(0);
}
.ng-hero__grad{
  position:absolute;left:0;right:0;bottom:0;height:400px;
  background:linear-gradient(to bottom, rgba(228,220,213,0) 0%, rgba(228,220,213,.8) 54.375%, rgba(228,220,213,.8) 100%);
}
.ng-hero__rule{
  position:absolute;left:24px;right:144px;top:119px;height:1px;background:var(--muted);
  opacity:.8;
}
.ng-hero__copy{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:120px;
  width:min(1344px, calc(100% - 2*var(--pad)));
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
}
.ng-hero__jp{
  font-weight:700;
  color:var(--accent);
  font-size:48px;
  line-height:1.4;
  margin:0;
  white-space:pre-line;
}
.ng-hero__en{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size:16px;
  line-height:1.6;
  margin:0;
  white-space:pre-line;
}

/* Shared section heading */
.ng-section{padding:120px 0}
.ng-section.is-bg{background:var(--bg)}
.ng-kicker{display:flex;align-items:center;gap:8px}
.ng-kicker__dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.ng-kicker__text{font-weight:500;font-size:20px;line-height:1}
.ng-h2{
  margin:12px 0 0;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-weight:600;
  font-size:80px;
  line-height:1;
  letter-spacing:.01em;
}
.ng-sectionHead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:64px;
}
.ng-sectionHead__desc{
  margin:0;
  font-size:16px;
  white-space:pre-line;
}

/* Button */
.ng-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--accent);
  color:var(--white);
  padding:8px 12px;
  border:0;
  cursor:pointer;
}
.ng-btn__text{font-weight:500;font-size:14px;line-height:1.2;width:120px;text-align:center}
.ng-btn__sep{width:1px;height:32px;background:var(--white);opacity:.5}
.ng-btn__icon{width:20px;height:20px;fill:currentColor}
.ng-arrow20{width:20px;height:20px;fill:var(--text);flex:0 0 auto}
.ng-arrow32{width:32px;height:32px;fill:var(--text);flex:0 0 auto}

/* Topics grid */
.ng-topicsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:40px;
  margin-bottom:64px;
}
.ng-topicsGrid.slick-initialized{
  display:block;
}
.ng-topicsGrid.slick-initialized .slick-list{margin:0 -20px}
.ng-topicsGrid.slick-initialized .slick-slide{padding:0 20px}
.ng-topicsGrid.slick-initialized .slick-dots{bottom:-44px}
.ng-topicCard{display:flex;flex-direction:column;gap:20px}
.ng-topicCard__thumb{
  width:100%;
  aspect-ratio: 373 / 210;
  background:#d9d9d9;
  overflow:hidden;
}
.ng-topicCard__thumb img{width:100%;height:100%;object-fit:cover}
.ng-topicCard__date{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size:14px;letter-spacing:.1em;margin:0;
  line-height:1.2;
}
.ng-topicCard__meta{
  display:flex;
  align-items:center;
  gap:12px;
}
.ng-topicCard__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  line-height:1;
  color:var(--text);
  background:var(--white);
  white-space:nowrap;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ng-topicCard__titleRow {
  display:flex;
  align-items:flex-end;gap:12px;
}

.ng-topicCard__titleRow .ng-arrow__icon {
  width: 30px;
  height: 30px;
}

.ng-topicCard__title{margin:0;font-size:18px;font-weight:400;line-height:1.6;flex:1}
.ng-divider{height:1px;background:var(--border);margin:120px 0 0}
.ng-topicsMore{display:flex;justify-content:center}

/* News */
.ng-news{display:grid;grid-template-columns:214px 1fr;gap:64px;align-items:start}
.ng-newsHead{display:flex;flex-direction:column;gap:48px}
.ng-newsRight{display:flex;flex-direction:column;gap:24px}
.ng-newsMore{display:flex;justify-content:flex-start}
.ng-newsList{display:flex;flex-direction:column;gap:24px;padding-top:56px}
.ng-newsItem{display:flex;flex-direction:column;gap:24px}
.ng-newsRow{
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.ng-newsMeta{
  display: flex;
  align-items: center;
  gap: 12px;
}
.ng-newsMeta--left{
  width: 30%;
}
.ng-newsMeta--right{
  width: 70%;
}
.ng-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 16px 8px 12px;
  background:var(--white);
  font-size:14px;
  line-height:1;
  min-width:104px;
  justify-content:center;
}
.ng-pill__icon{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:transparent;
  flex:0 0 auto;
}
.ng-pill__iconImg{
  width:16px;
  height:16px;
  object-fit:contain;
  display:block;
}
.ng-pill__text{display:inline-block}
.ng-pill--important{
  background:#EF1742;
  border-color:#EF1742;
  color:var(--white);
}
.ng-pill--important .ng-pill__iconImg{
  width:24px;
  height:24px;
}
.ng-newsDate{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size:14px;letter-spacing:.1em;margin:0;line-height:1.2;
  width:86px;
}
.ng-newsTitle{
  margin:0;font-size:16px;font-weight:500;line-height:1.6;
  width:min(576px, 100%);
  display:-webkit-box;
  line-clamp:2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
  max-height:calc(1.6em * 2);
}
.ng-newsArrow{width:20px;height:20px}
.ng-newsRule{height:1px;background:var(--border)}

/* For You */
.ng-forYou{padding-top:0}
.ng-forYouGrid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:40px}
.ng-linkList{display:flex;flex-direction:column;gap:40px}
.ng-linkList__head{display:flex;align-items:center;gap:12px}
.ng-linkList__icon{
  width:40px;height:40px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--white);
  display:grid;
  place-items:center;
}
.ng-linkList__icon img{width:24px;height:24px;object-fit:contain}
.ng-linkList__title{font-weight:500;font-size:20px;line-height:1}
.ng-linkList__headArrow{display:inline-flex;align-items:center}
.ng-linkList__headArrow img{width:20px;height:20px;display:block}
.ng-linkList__list{display:flex;flex-direction:column;gap:24px}
.ng-linkList__item{display:flex;align-items:center;gap:8px;width:100%}
.ng-linkList__text{margin:0;font-weight:500;font-size:16px;line-height:1.6;flex:1}
.ng-linkList__arrow{width:20px;height:20px;flex:0 0 auto}
.ng-linkList__rule{height:1px;background:#d9d9d9}

/* About tiles */
.ng-tiles{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px 19px}
.ng-tile{
  background:var(--white);
  padding:24px;
  display:flex;
  align-items:center;
}
.ng-tile__inner{display:flex;flex-direction:column;gap:24px;width:339px;max-width:100%}
.ng-tile__img{aspect-ratio:1/1;background:#d0d0d0;overflow:hidden}
.ng-tile__img img{width:100%;height:100%;object-fit:cover}
.ng-tile__body{display:flex;flex-direction:column;gap:20px}
.ng-tile__title{margin:0;font-size:24px;line-height:1.2;font-weight:500}
.ng-tile__desc{margin:0;font-size:16px;line-height:1.6}
.ng-tile__arrow{
  display:flex;
  justify-content:flex-end;
}
.ng-tile__arrow .ng-arrow__icon{width:30px;height:30px}

/* SNS */
.ng-snsGrid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px}
.ng-snsCol{background:var(--bg);min-height:800px;position:relative;padding:48px 39px}
.ng-snsLogo{width:40px;height:40px;margin:0 auto 48px}
.ng-snsLogo img{width:100%;height:100%;object-fit:contain}
.ng-snsEmbed{background:#d0d0d0;height:616px;width:309px;margin:0 auto}
.ng-snsLabel{margin:16px 0 0;text-align:center;font-size:16px;line-height:1.4}
.ng-snsRight{display:flex;flex-direction:column;align-items:center;gap:32px}
.ng-ytStack{display:flex;flex-direction:column;gap:12px;width:355px;max-width:100%}
.ng-ytThumb {
  background:#8e8a8a;
  height:200px;
  position:relative;
  display:grid;
  place-items:center;
}
.ng-ytThumb.ng-ytThumb__img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display:block;
}
.ng-ytThumb .ng-ytPlay {
  width:60px;
  height:60px;
  object-fit:cover;
  display:block
}
.ng-ytOverlay{position:absolute;inset:0;background:rgba(0,0,0,.2)}
.ng-ytPlay{position:absolute;width:64px;height:64px}
.ng-ytTitle{margin:0;font-size:16px;line-height:1.4}

/* Footer */
.ng-footer{border-top:1px solid var(--border);background:var(--white)}
.ng-footer__inner{padding:64px}
.ng-footerGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px 94px;
  align-items:start;
}
.ng-footerNav{grid-column:2;grid-row:1}
.ng-footerBrochure{grid-column:2;grid-row:2}
.ng-footerInfo{grid-column:1;grid-row:1}
.ng-footerCopy{grid-column:1;grid-row:2}
.ng-footerNav{
  display:flex;
  gap:48px;
  font-size:16px;
  line-height:1;
}
.ng-footerNav__col{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:32px;
}
.ng-footerNav__col a{color:var(--text);text-decoration:none}
.ng-footerNav__col a:hover{opacity:.9}
.ng-footerBrochure{
  width:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px;
  background:var(--accent);
  color:var(--white);
  font-weight:700;
  text-decoration:none;
  border-radius:4px;
}
.ng-footerBrochure:hover{opacity:.9}
.ng-footerBrochure img{width:24px;height:24px;object-fit:contain}
.ng-footerInfo{display:flex;flex-direction:column;gap:24px}
.ng-footerBrand{
  display:flex;
  align-items:center;
  gap:12px;
}
.ng-footerBrand__logo{height:32px;width:auto;display:block}
.ng-footerBrand__name{
  margin:0;
  font-weight:700;
  font-size:16px;
  line-height:1;
  color:var(--text);
}
.ng-footerAddr{margin:0;font-size:16px;line-height:1.8;color:var(--text)}
.ng-footerCopy{margin:0;font-size:12px;line-height:1.4;color:var(--muted)}

/* Responsive */
@media (max-width: 1024px){
  :root{--pad:16px}
  .ng-header .ng-header__inner{padding-right:88px}
  .ng-menuBtn,.ng-menuClose{width:88px;height:88px}
  .ng-brand__name{font-size:18px}
  .ng-hero{min-height:720px}
  .ng-hero__copy{bottom:64px;flex-direction:column;align-items:flex-start}
  .ng-hero__jp{font-size:34px}
  .ng-h2{font-size:56px}
  .ng-topicsGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ng-news{grid-template-columns:1fr;gap:32px}
  .ng-newsList{padding-top:0}
  .ng-forYouGrid{grid-template-columns:1fr}
  .ng-tiles{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ng-snsGrid{grid-template-columns:1fr}
  .ng-footerGrid{grid-template-columns:1fr;gap:40px}
  .ng-footerNav,.ng-footerBrochure,.ng-footerInfo,.ng-footerCopy{grid-column:1;grid-row:auto}
  .ng-footerBrochure{width:100%}

  .ng-menuPanel{height:560px}
  .ng-menuBackdrop{top:560px}
  .ng-menuTitle{font-size:32px}
  .ng-menuNav{top:152px;gap:48px}
  .ng-menuCol{gap:28px;min-width:200px}
  .ng-menuItem__jp{font-size:24px}
}
@media (max-width: 640px){
  :root{
    --pad:20px;
    /* SP: inner は高さ80px（safe-area は border-box 内で相殺）— 被り防止で +12px バッファ */
    --ng-header-scroll-padding:calc(80px + 12px);
  }
  .ng-header .ng-header__inner{
    height:80px;
    min-height:80px;
    padding-top:env(safe-area-inset-top,0);
    padding-right:80px;
  }
  .ng-menuBtn,.ng-menuClose{width:80px;height:80px}
  .ng-brand__logo{height:32px;width:auto}
  .ng-brand__name{font-size:16px}
  .ng-burger span{width:32px}
  .ng-burger{gap:8px}
  .ng-menuBtn__label{font-size:14px}
  .ng-section{padding:64px 0 80px}
  .ng-sectionHead{flex-direction:column;align-items:flex-start;margin-bottom:32px}
  .ng-kicker__text{font-size:14px}
  .ng-h2{font-size:48px}
  .ng-sectionHead__desc{font-size:14px;line-height:1.6}

  /* Hero: スマホ用 */
  .ng-hero{min-height:700px}
  .ng-hero__copy{bottom:48px}
  .ng-hero__jp{font-size:32px;line-height:1.4}
  .ng-hero__en{font-size:14px}
  .ng-hero .slide-items .slick-dots,
  .ng-topicsGrid .slick-dots{
    display:none !important;
  }

  /* Topics: 横スクロールカード（Figma SP） */
  .ng-topicsGrid{
    display:flex;
    flex-wrap:nowrap;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
    margin:0 calc(-1 * var(--pad)) 48px;
    padding:0 var(--pad);
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .ng-topicsGrid::-webkit-scrollbar{height:4px}
  .ng-topicsGrid::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .ng-topicCard{
    flex:0 0 auto;
    min-width:295px;
    max-width:295px;
    scroll-snap-align:start;
    gap:12px;
  }
  .ng-topicCard__thumb{aspect-ratio:295/166}
  .ng-topicCard__date{font-size:14px;letter-spacing:.1em}
  .ng-topicCard__title{font-size:14px;line-height:1.4}
  .ng-topicsMore{margin-bottom:0}
  .ng-divider{margin:48px 0 0}

  /* News: スマホ用縦レイアウト */
  .ng-news{grid-template-columns:1fr;gap:0}
  .ng-newsHead{flex-direction:column;gap:24px;align-items:flex-start}
  .ng-newsRight{gap:32px}
  .ng-newsMore{justify-content:center}
  .ng-newsList{padding-top:0;gap:0}
  .ng-newsItem{gap:0}
  .ng-newsRow{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:0;
  }
  .ng-newsMeta--left,.ng-newsMeta--right{width:100%}
  .ng-newsMeta--left{flex-wrap:wrap;gap:8px}
  .ng-newsDate{width:auto}
  .ng-newsTitle{font-size:14px;max-height:none;-webkit-line-clamp:unset;line-clamp:unset}
  .ng-newsRule{margin:20px 0}
  .ng-pill{
    font-size:12px;
    padding:8px 12px;
  }
  .ng-pill__icon{width:16px;height:16px}

  /* For You: スマホ */
  .ng-forYouGrid{gap:48px}
  .ng-linkList__title{font-size:18px}
  .ng-linkList__text{font-size:14px}
  .ng-linkList__icon{width:32px;height:32px}
  .ng-linkList__icon img{width:20px;height:20px}

  /* About tiles: スマホ縦カード */
  .ng-tiles{grid-template-columns:1fr;gap:20px}
  .ng-tile{padding:12px}
  .ng-tile__inner{width:100%;max-width:none;gap:16px}
  .ng-tile__img{aspect-ratio:auto;height:175px}
  .ng-tile__title{font-size:20px}
  .ng-tile__desc{font-size:14px}

  /* SNS: スマホ縦レイアウト（順序: YouTube → X → Instagram） */
  .ng-snsGrid{
    grid-template-columns:1fr;
    gap:12px;
    display:flex;
    flex-direction:column;
  }
  .ng-snsCol:nth-child(1){order:2}
  .ng-snsCol:nth-child(2){order:3}
  .ng-snsCol:nth-child(3){order:1}
  .ng-snsCol{
    min-height:auto;
    padding:24px 12px 20px;
    background:var(--bg);
  }
  .ng-snsCol:nth-child(3){padding-bottom:24px}
  .ng-snsLogo{
    width:40px;
    height:40px;
    margin:0 auto 20px;
  }
  .ng-snsCol:nth-child(3) .ng-snsLogo{
    width:143px;
    height:32px;
    margin-bottom:20px;
  }
  .ng-snsEmbed{
    width:100%;
    max-width:203px;
    height:320px;
    margin:0 auto;
  }
  .ng-snsLabel{display:none}
  .ng-snsRight{
    width:100%;
    align-items:center;
    gap:20px;
  }
  .ng-ytStack{
    width:100%;
    margin:0 auto;
    gap:16px;
  }
  .ng-ytStack>div{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
  }
  .ng-ytThumb{
    width:100%;
    height:auto;
    aspect-ratio:203 / 114;
    flex-shrink:0;
  }
  .ng-ytThumb__img,
  .ng-ytThumb > img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ng-ytTitle{
    margin:0;
    font-size:14px;
    width:100%;
    min-width:0;
    text-align:left;
    word-break:break-word;
    overflow-wrap:break-word;
    display:-webkit-box;
    line-clamp:2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.4;
  }
  .ng-ytPlay{width:48px;height:48px}
  .ng-ytThumb .ng-ytPlay{width:48px;height:48px}
  .ng-snsCol:nth-child(3) .ng-btn{
    margin-top:0 !important;
    width:163px;
    justify-content:center;
    padding:8px 12px;
  }
  .ng-snsCol:nth-child(3) .ng-btn__text{width:102px;font-size:12px}
  .ng-snsCol:nth-child(3) .ng-btn__sep{height:28px}
  .ng-snsCol:nth-child(3) .ng-btn__icon{width:18px;height:18px}

  /* Footer - SP版（添付画像準拠） */
  .ng-footer__inner{padding:48px var(--pad)}
  .ng-footerGrid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .ng-footerNav,.ng-footerBrochure,.ng-footerInfo,.ng-footerCopy{grid-column:1;grid-row:auto}
  .ng-footerNav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 20px;
    font-size:16px;
  }
  .ng-footerNav__col{gap:20px}
  .ng-footerNav__col a{font-size:14px}
  .ng-footerBrochure{
    width:100%;
    padding:20px;
    font-size:16px;
  }
  .ng-footerInfo{gap:16px}
  .ng-footerBrand__logo{height:32px}
  .ng-footerBrand__name{font-size:16px}
  .ng-footerAddr{font-size:14px;line-height:1.8}
  .ng-footerCopy{font-size:10px}

  /* Menu — Figma Top_sp (418:4152) */
  .ng-menuOverlay{background:var(--accent)}
  .ng-menuPanel{
    height:100svh;
    min-height:100svh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ng-menuPanel__inner{
    width:100%;
    max-width:375px;
    margin:0 auto;
    padding:0 0 48px;
    box-sizing:border-box;
    min-height:100%;
  }
  .ng-menuHeader{
    position:relative;
    height:80px;
    width:100%;
    pointer-events:auto;
  }
  .ng-menuTitle{
    position:absolute;
    left:20px;
    top:28px;
    z-index:3;
    font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    font-size:24px;
    font-weight:400;
    line-height:1;
    color:var(--menu-ink);
  }
  .ng-menuRule{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    z-index:2;
    height:1px;
    margin:0 20px;
    background:var(--menu-ink);
    opacity:1;
  }
  .ng-menuClose{
    position:absolute;
    right:0;
    top:0;
    z-index:6;
    width:80px;
    height:80px;
    gap:8px;
  }
  .ng-menuCloseX{
    width:30px;
    height:30px;
  }
  .ng-menuCloseX::before,
  .ng-menuCloseX::after{
    height:1.5px;
  }
  .ng-menuCloseLabel{
    font-size:14px;
    font-weight:400;
  }
  /* 画像参照: リストは左右20pxでヘッダー「Menu」と揃え、下線も同じ幅に */
  .ng-menuNav{
    position:relative;
    left:auto;
    transform:none;
    top:auto;
    z-index:1;
    width:100%;
    max-width:100%;
    margin:0;
    padding:20px 20px 32px;
    box-sizing:border-box;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .ng-menuCol{
    min-width:auto;
    gap:0;
    display:contents;
  }
  /* Figma Top_sp: 各項目 上下20px + 黒の下線（余白は padding のみ） */
  .ng-menuNav > .ng-menuItem,
  .ng-menuNav > .ng-menuBlock{
    width:100%;
    align-self:stretch;
    box-sizing:border-box;
    padding-top:20px;
    padding-bottom:20px;
    border-bottom:1px solid #000;
  }
  .ng-menuNav > .ng-menuItem:first-child{
    padding-top:0;
  }
  .ng-menuNav > .ng-menuItem{
    display:flex;
    flex-direction:column;
  }
  .ng-menuItem{
    gap:10px;
    flex:1;
    min-width:0;
    padding-bottom:20px;
    margin-bottom:10px;
    text-align:left;
    border-bottom: 1px solid #00351E;
  }
  .ng-menuItem__en{
    font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    font-weight:600;
    font-size:12px;
    line-height:1;
    color:var(--menu-ink);
    letter-spacing:.02em;
    opacity:0.9;
  }
  .ng-menuItem__jp{
    font-weight:700;
    font-size:20px;
    line-height:1;
    color:var(--white);
  }
  .ng-menuNav > .ng-menuBlock{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .ng-menuBlock__head{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:20px;
    margin-bottom: 10px;
    box-sizing:border-box;
    border-bottom: 1px solid #00351E;
  }
  .ng-menuBlock__head .ng-menuItem{
    flex:1;
    min-width:0;
    padding:0;
    margin:0;
    border-bottom:none;
  }
  .ng-menuBlock.is-open .ng-menuBlock__head{
    border-bottom:none;
  }
  .ng-menuToggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex-shrink:0;
    margin:0;
    color:var(--white);
  }
  .ng-menuToggle__icon{
    width:20px;
    height:20px;
  }
  .ng-menuToggle__icon::before,
  .ng-menuToggle__icon::after{
    width:14px;
    height:2px;
    background:var(--white);
  }
  .ng-menuSub{
    display:none;
    flex-direction:column;
    gap:20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
    align-items:flex-start;
  }
  .ng-menuBlock.is-open .ng-menuSub{display:flex}
  /* 画像: サブは英字なし・白16px・親より右にインデント、項目間に区切り線なし */
  .ng-menuSubItem{
    font-weight:500;
    font-size:16px;
    line-height:1;
    color:var(--white);
    padding-left:20px;
    display:block;
    width:100%;
    box-sizing:border-box;
  }
  .ng-menuBackdrop{display:none}
}