/* 現行MAMPのピル型バー・二段ナビ・丸いメールボタンを試作へ反映。 */
:root{--header-top:16px;--header-inset:16px;--header-bar:64px;--header-clearance:80px}
.prototype-site-header{top:var(--header-top);left:var(--header-inset);right:var(--header-inset);width:auto;height:var(--header-bar);padding:0 24px;gap:20px;border:1px solid #de648424;border-radius:999px;background:#fffffff0;box-shadow:0 6px 22px #1f2c3a12;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.prototype-site-header .brand{width:219px}
.prototype-site-header .prototype-global-nav{flex:1;justify-content:center;gap:clamp(16px,2.2vw,34px)}
.prototype-global-nav>a,.prototype-global-nav>.nav-group>a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0;font-size:14px;line-height:1.2;white-space:nowrap}
.nav-caption{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brand-text)}
.prototype-site-header .nav-group{gap:2px}
.prototype-site-header .nav-disclosure summary{color:var(--brand-text)}
.prototype-site-header .mega{top:calc(100% + 12px);border:1px solid #de648424;border-radius:24px;box-shadow:0 8px 24px #1f2c3a12}
.prototype-site-header .header-contact{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0!important;border-radius:50%;background:var(--pink);color:#fff;transition:background .2s,transform .2s}
.header-contact svg{width:21px;height:21px;fill:currentColor}
.prototype-site-header .header-contact:hover{background:var(--brand-text);transform:translateY(-1px)}
.prototype-site-header .menu-button{flex-shrink:0}
.motion .service-stage{top:var(--header-clearance);height:calc(100svh - var(--header-clearance))}
@media(min-width:901px){
  .motion .journal{top:var(--header-clearance);height:calc(100svh - var(--header-clearance))}
  .motion .company{top:var(--header-clearance);min-height:calc(100svh - var(--header-clearance))}
}
@media(max-width:1023px){
  .prototype-site-header{gap:12px}
  .prototype-site-header .brand{margin-right:auto;width:195px}
  .prototype-site-header .header-contact{flex-basis:40px;width:40px;height:40px}
  .header-contact svg{width:19px;height:19px}
  .prototype-site-header .menu-button{display:flex;border:0;background:none;padding:0;color:var(--ink)}
  .prototype-site-header .prototype-global-nav{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;width:auto;max-height:calc(100svh - 108px);overflow-y:auto;padding:22px 24px;background:white;border:1px solid #de648424;border-radius:24px;box-shadow:0 8px 24px #1f2c3a12;gap:8px;justify-content:flex-start;align-items:stretch}
  .prototype-site-header .prototype-global-nav.is-open{display:flex;flex-direction:column}
  .prototype-global-nav>a,.prototype-global-nav>.nav-group>a{align-items:flex-start;flex:1;gap:5px;padding:12px 0}
  .prototype-site-header .nav-group{position:relative;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .prototype-site-header .nav-disclosure{position:static;display:block}
  .prototype-site-header .nav-disclosure summary{padding:12px}
  .prototype-site-header .nav-disclosure[open]{width:100%}
  .prototype-site-header .nav-disclosure[open]>summary{position:absolute;right:0;top:7px;margin:0}
  .prototype-site-header .mega{position:static;width:100%;display:flex;flex-direction:column;gap:22px;padding:14px 0 22px;border:0;border-radius:0;box-shadow:none}
  .prototype-site-header .display-settings summary{width:auto;justify-content:flex-start;gap:12px;padding:12px 0;height:auto}
  .prototype-site-header .display-settings summary>span{display:inline;font-size:13px}
  .prototype-site-header .display-settings>div{position:static;box-shadow:none;border:0;padding:6px 0 15px}
}
@media(max-width:767px){
  :root{--header-top:10px;--header-inset:10px;--header-clearance:74px}
  .prototype-site-header{padding:0 14px 0 20px;gap:8px;background:#fffffff7}
  .prototype-site-header .brand{width:clamp(145px,46vw,195px)}
}
@media(prefers-reduced-motion:reduce){.prototype-site-header .header-contact{transition:none}}

/* 画像の下にインライン文字の余白を作らず、ヘッダー中央へ揃える。 */
.prototype-site-header .brand{display:flex;align-items:center;line-height:0}
.prototype-site-header .brand img{display:block;width:100%;height:auto}