/* CONCEPT and the four-photo gallery follow the visual two-column header in normal flow. */
.home-after-top{max-width:1110px;margin:42px auto 44px}
.home-after-top .home-concept,.home-after-top .home-gallery{max-width:590px}
.home-after-top .home-gallery{margin-top:24px}
@media(min-width:700px){
  .home-top{height:auto;align-items:start}
  .home-top .home-intro{display:block;height:auto;min-height:0}
  .home-after-top .home-concept{margin-top:0;max-height:none;overflow:visible}
}
@media(max-width:699px){
  .page:has(.home-top) .home-after-top{order:5;margin:30px 0}
  .page:has(.home-top) .home-details{order:6}
  .page:has(.home-top) .school-intro{order:7}
  .page:has(.home-top) .common-access{order:8}
  .home-after-top .home-concept,.home-after-top .home-gallery{max-width:none}
  .home-after-top .home-gallery{margin-top:20px}
}

/* PC uses the same three-photo mosaic as mobile, without changing image data or order. */
@media(min-width:700px){
  .home-top{align-items:stretch}
  .home-top .home-photos{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));height:auto;min-height:0;gap:6px;overflow:hidden;align-self:stretch}
  .home-top .home-photos img{width:100%;height:100%;min-height:0;object-fit:cover}
  .home-top .home-photos img:first-child{grid-row:span 2}
  .home-top .home-photos img:only-child{grid-column:1/-1;grid-row:1/-1}
  .home-top .home-photos img:nth-child(2):last-child{grid-column:2;grid-row:1/-1}
}

/* Restore the original left content baseline and the mobile photo-mosaic proportions on PC. */
@media(min-width:700px){
  .page:has(.home-top),.page:has(.event-block){margin-left:0;margin-right:0}
  .home-header,.home-top,.home-details,.home-after-top,.school-intro{margin-left:0;margin-right:0}
  .home-top{align-items:start}
  .home-top .home-photos{height:260px;align-self:start;overflow:visible}
}

/* Public HOME hero: image data remains untouched and is darkened only at display time. */
.home-hero{position:relative;isolation:isolate;display:grid;place-items:center;width:100vw;max-width:100vw;min-height:clamp(440px,48vw,620px);margin-left:calc(50% - 50vw);overflow:hidden;background:#120d0b}
.home-hero::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.42)}
.home-hero>.home-header-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.home-hero-copy{position:relative;z-index:2;display:grid;place-items:center;width:min(100% - 40px,680px);padding:40px 0;text-align:center}
.home-hero .home-intro{max-width:100%;text-align:center}
.home-hero .home-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 18px;text-align:center}
.home-hero .home-brand img{width:clamp(72px,9vw,118px);height:clamp(72px,9vw,118px);object-fit:contain}
.home-hero .home-brand>div{display:grid;gap:8px;justify-items:center}
.home-hero .home-brand .eyebrow,.home-hero .home-brand h1,.home-hero .section-title,.home-hero .copy{color:#ffffff;opacity:1}
.home-hero .home-brand .eyebrow{margin:0;font-family:'Noto Sans JP',sans-serif;font-size:clamp(13px,1.6vw,17px);letter-spacing:.14em}
.home-hero .home-brand h1{margin:0;font-family:'Noto Serif JP','Noto Sans JP',serif;font-weight:500}
#site .home-hero .section-title{margin:0 0 18px;font-family:'Noto Serif JP','Noto Sans JP',serif}
.home-hero .copy{max-width:620px;margin:0;font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif}
.home-after-top{max-width:1110px;margin:42px auto 44px}
.home-after-top .home-gallery{max-width:590px;margin:24px auto 0}
.home-mosaic{width:min(100%,760px);margin:44px auto 56px}
.home-mosaic .home-photos{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));width:100%;height:260px;gap:6px}
.home-mosaic .home-photos img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover}
.home-mosaic .home-photos img:first-child{grid-row:span 2}
.home-mosaic .home-photos img:only-child{grid-column:1/-1;grid-row:1/-1}
.home-mosaic .home-photos img:nth-child(2):last-child{grid-column:2;grid-row:1/-1}
.home-side .notice-mini p{white-space:pre-line}
.page:has(.home-hero) .home-side .notice-mini{position:relative;border:0;background:transparent;padding:15px 0}
.page:has(.home-hero) .home-side .notice-mini::before{content:'';position:absolute;top:15px;bottom:15px;left:-14px;width:2px;background:var(--orange)}
@media(max-width:699px){.home-hero{min-height:clamp(470px,128vw,620px)}.home-hero-copy{width:min(100% - 32px,540px);padding:32px 0}.home-hero .home-brand{gap:9px;margin-bottom:16px}.home-hero .section-title{margin-bottom:16px}.home-after-top{margin:30px 0}.home-after-top .home-concept p,.home-side .notice-mini p{font-size:16px}.home-side .home-mini-title{font-size:20px}.home-side .home-news-item strong{font-size:16px}.home-side .home-news-item .date{font-size:13px}.home-side .home-news-summary{font-size:14px}.school-intro p{font-size:17px}.school-intro a{font-size:14px}.home-after-top .home-gallery{max-width:none;margin:20px auto 0;gap:3px}.home-mosaic{width:100%;margin:34px auto 42px}.home-mosaic .home-photos{height:clamp(220px,66vw,280px)}}

/* The logo belongs only to the upper brand row, not to the catchcopy and body rows. */
.home-hero .home-intro{display:flex;flex-direction:column;align-items:center;text-align:center}
.home-hero .home-intro>.home-brand{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:100%;margin:0;text-align:center}
.home-hero .home-brand img{grid-column:1;justify-self:end;align-self:center;margin-right:clamp(12px,1.6vw,18px)}
.home-hero .home-brand>div{display:grid;grid-column:2;gap:8px;justify-items:center;min-width:0}
#site .home-hero .section-title{margin:28px 0 18px}
.home-hero .copy{font-size:clamp(16px,1.6vw,19px)}
.home-after-top .home-concept p,.home-side .notice-mini p{white-space:pre-line;word-break:normal;overflow-wrap:break-word}
.page:has(.home-hero) .home-after-top .home-concept,.page:has(.home-hero) .home-side .notice-mini{position:relative}
.page:has(.home-hero) .home-after-top .home-concept{padding-bottom:20px}
.page:has(.home-hero) .home-side .notice-mini{padding-bottom:20px}
.page:has(.home-hero) .home-after-top .home-concept::after,.page:has(.home-hero) .home-side .notice-mini::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(255,199,125,.35)}
.page:has(.home-hero) .latest-mini{border-top:0}
.school-intro p{max-width:680px;white-space:pre-line;word-break:normal;overflow-wrap:break-word}
@media(max-width:699px){.home-hero .home-intro>.home-brand{gap:10px}.home-hero .home-brand img{width:62px;height:62px}.home-hero .copy{font-size:16px}.page:has(.home-hero) .home-after-top .home-concept .home-mini-title{font-size:20px}}