/* ===== shared sub-page chrome (header + breadcrumb + page hero) ===== */

/* --- sub-page header bar --- */
.site-header{
  position:relative;z-index:20;background:transparent;
}
.site-header__inner{
  max-width:1500px;margin:0 auto;padding:51px 3.3% 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:30px;
}
.sh-brand{display:flex;align-items:center;gap:10px}
.sh-brand__logo{width:52px;height:auto;display:block}
.sh-brand__mark{width:44px;height:auto}
.sh-brand__name{font-family:var(--latin);font-size:15px;letter-spacing:.12em;line-height:1}
.sh-brand__name span{color:#8f8f8f}

.sh-navs{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.sh-util{display:flex;gap:26px;font-size:11.5px;color:#666;letter-spacing:.04em}
.sh-util a:hover{color:#000}
.sh-main{display:flex;gap:26px;font-size:13px;color:#2b2b2b;letter-spacing:.04em}
.sh-main a:hover{color:#000}
.sh-main a.is-current{font-weight:700}

/* --- breadcrumb --- */
.breadcrumb{
  max-width:1500px;margin:0 auto;padding:16px 40px 0;
  font-size:11.5px;color:#8a8a8a;letter-spacing:.04em;
}
.breadcrumb a:hover{color:#000}
.breadcrumb span{margin:0 8px;color:#bbb}

/* --- page hero (big latin title + jp sub) --- */
.page-hero{text-align:center;padding:40px 24px 10px}
.page-hero__title{
  font-family:var(--latin);font-weight:700;font-size:56px;
  letter-spacing:.14em;color:var(--ink);line-height:1.1;
}
.page-hero__sub{margin-top:14px;font-size:14px;color:#555;letter-spacing:.08em}
.page-hero__desc{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.9}

/* --- generic decorative iridescent blobs (reuse blob.png) --- */
.blob-deco{
  position:absolute;background:url("../images/blob.png") no-repeat center/contain;
  mix-blend-mode:multiply;filter:blur(48px) saturate(1);pointer-events:none;z-index:0;
}

/* --- shared sub-page APPLICATION panel (reuses .app / .app__inner from style.css) --- */
.app .app__inner{
  background:#fff;border:1px solid #ececec;border-radius:12px;
  padding:56px 60px;box-shadow:0 12px 34px rgba(0,0,0,.05);position:relative;
}
.app .phone{margin-top:-70px;margin-bottom:-70px}

/* --- responsive --- */
@media(max-width:900px){
  .app .app__inner{padding:32px 24px}
  .app .phone{margin:0 auto}
  .site-header__inner{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 20px}
  .sh-navs{align-items:flex-start}
  .sh-util,.sh-main{flex-wrap:wrap;gap:12px 18px}
  .breadcrumb{padding:12px 20px 0}
  .page-hero__title{font-size:38px}
}