/* NOTE: このファイルのナビは css/style.css のグローバルナビと同一の見た目を保つこと。
   片方だけ変更すると本体ページと感想文ページでナビがずれる。 */

/* ============================================================
   サイト共通 chrome（ヘッダー／フッター）の再現
   ------------------------------------------------------------
   /kanso-bun/ 系ページは本体の css/style.css を読み込まない
   （LPの style.css と `*` リセット・body・img・a が全面衝突するため）。
   そこで chrome だけを .site-header / .mobile-nav / .site-footer に
   スコープを閉じて、本体ページの computed style と同じ値で再現する。

   値はすべて /index.html の実測 computed style に一致させてある。
   font-size は px 直指定（本体は html{font-size:16px} 固定 + rem 指定。
   LP側には html の font-size 指定が無いため、px で書かないと
   ブラウザの既定文字サイズ設定によってズレる）。

   ※ css/style.css 側を変更したら、ここも同じ値に追従させること。
   ============================================================ */

.site-header,
.mobile-nav,
.site-footer{
  --oc-dark:#0D47A1;
  --oc-mid:#2196F3;
  --oc-text:#1a2a3a;
  --oc-muted:#5a7080;
  --oc-border:#c8dce8;
  --oc-white:#ffffff;
  --oc-font-en:'Montserrat',sans-serif;
  --oc-font-jp:'Noto Sans JP',sans-serif;
  --oc-header-h:70px;
  --oc-max-w:1100px;
  --oc-transition:.25s ease;
}

/* 固定ヘッダー分の余白（本体の .page-body と同値） */
body.page-body{padding-top:70px;}

/* ===================== HEADER ===================== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--oc-header-h);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--oc-border);
  z-index:1000;
  display:flex;
  align-items:center;
  box-shadow:none;              /* スクロール時にJSで付与 */
  font-family:var(--oc-font-jp);
  line-height:1.75;
}
.site-header .header-inner{
  width:100%;
  max-width:var(--oc-max-w);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ---- ロゴ ---- */
.site-header .site-logo{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  line-height:1.2;
  text-decoration:none;
}
.site-header .site-logo-img{
  height:40px;                  /* 本体の実測値。css/style.css では
                                   .site-logo-img{height:43px} だが、
                                   先行する .site-logo img{max-height:40px}
                                   が詳細度で勝つため実際は 40px */
  max-height:40px;
  width:auto;
  flex-shrink:0;
  display:block;
  margin:0;
}
.site-header .site-logo-text{
  display:flex;
  flex-direction:column;
}
.site-header .site-logo .logo-en{
  font-family:var(--oc-font-en);
  font-weight:700;
  font-size:19.2px;             /* 1.2rem */
  color:var(--oc-dark);
  letter-spacing:.08em;
}
.site-header .site-logo .logo-jp{
  font-family:var(--oc-font-jp);
  font-weight:300;
  font-size:10.4px;             /* 0.65rem */
  color:var(--oc-muted);
  letter-spacing:normal;
}

/* ---- PCナビ ---- */
.site-header .main-nav{
  display:flex;
  gap:32px;
  align-items:center;
}
.site-header .main-nav a{
  font-family:var(--oc-font-en);
  font-weight:600;
  font-size:12.48px;            /* 0.78rem */
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oc-text);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color var(--oc-transition),border-color var(--oc-transition);
}
.site-header .main-nav a:hover,
.site-header .main-nav a.active{
  color:var(--oc-mid);
  border-bottom-color:var(--oc-mid);
}

/* ---- ハンバーガー ---- */
.site-header .hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
}
.site-header .hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--oc-dark);
  border-radius:2px;
  transition:transform var(--oc-transition),opacity var(--oc-transition);
}
.site-header .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-header .hamburger.open span:nth-child(2){opacity:0;}
.site-header .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- モバイルナビ ---- */
.mobile-nav{
  display:none;
  position:fixed;
  top:var(--oc-header-h);
  left:0;
  width:100%;
  background:var(--oc-white);
  border-bottom:1px solid var(--oc-border);
  z-index:999;
  flex-direction:column;
  padding:20px;
  gap:16px;
  box-shadow:0 4px 24px rgba(13,71,161,.10);
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
  font-family:var(--oc-font-en);
  font-weight:600;
  font-size:14.4px;             /* 0.9rem */
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--oc-text);
  text-decoration:none;
  padding:10px 0;
  border-bottom:1px solid var(--oc-border);
}
.mobile-nav a:hover{color:var(--oc-mid);}

/* ===================== FOOTER ===================== */
.site-footer{
  background:var(--oc-dark);
  color:rgba(255,255,255,.7);
  padding:60px 24px 32px;
  text-align:left;              /* LPの footer{text-align:center} を打ち消す */
  font-family:var(--oc-font-jp);
  line-height:1.75;
}
.site-footer .footer-inner{
  max-width:var(--oc-max-w);
  margin:0 auto 40px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:start;
}
.site-footer .footer-logo-brand{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
.site-footer .footer-logo-img{
  height:42px;
  max-height:42px;
  width:auto;
  margin:0 8px 0 0;             /* LPの footer img{margin:0 auto} を打ち消す */
  flex-shrink:0;
  display:block;
}
.site-footer .footer-logo .logo-en{
  font-family:var(--oc-font-en);
  font-weight:700;
  font-size:17.6px;             /* 1.1rem */
  color:var(--oc-white);
  letter-spacing:.1em;
}
.site-footer .footer-logo .logo-jp{
  font-family:var(--oc-font-jp);
  font-size:11.52px;            /* 0.72rem */
  opacity:.6;
  margin-top:4px;
}
.site-footer .footer-tagline{
  font-size:13.12px;            /* 0.82rem */
  margin-top:12px;
  line-height:1.7;
  opacity:.7;
}
.site-footer .footer-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}
.site-footer .footer-nav a{
  font-family:var(--oc-font-en);
  font-weight:600;
  font-size:12px;               /* 0.75rem */
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  transition:color var(--oc-transition);
}
.site-footer .footer-nav a:hover{color:var(--oc-white);}
.site-footer .footer-bottom{
  max-width:var(--oc-max-w);
  margin:0 auto;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;               /* 0.75rem */
  opacity:.5;
  text-align:center;
}

/* ---- レスポンシブ（本体 css/style.css と同じ 768px） ---- */
@media (max-width:768px){
  /* ヘッダーロゴは意図的に縮小しない。
     本体 css/style.css には @media 内に .site-logo-img{height:28px} があるが、
     先行する img[src*="OCI_logo"]{height:auto}（詳細度 0,1,1）が
     .site-logo-img（0,1,0）に勝つため、このMQは実際には効いていない。
     本体の実測値は全幅で 40x40。ここで28pxにすると本体とズレる。 */
  .site-footer .footer-logo-img{height:32px;max-height:32px;}
  .site-header .main-nav{display:none;}
  .site-header .hamburger{display:flex;}
  .site-footer .footer-inner{grid-template-columns:1fr;}
  .site-footer .footer-nav{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:12px;
  }
}

/* ============================================================
   /kanso-bun/ → /kanso-bun/works/ への導線ボタン
   ============================================================ */

.lp-cta-row{text-align:center;}
.lp-cta-row--top{background:var(--deep);padding:4px 0 26px;}
.lp-cta-row--form{padding:0 0 22px;}

.lp-cta{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.03em;text-decoration:none;
  transition:transform .1s ease,box-shadow .1s ease;
}
.lp-cta:active{transform:translateY(3px);}

.lp-cta--sun{
  background:var(--sun);color:var(--deep);
  box-shadow:0 5px 0 rgba(0,0,0,.22);
}
.lp-cta--sun:active{box-shadow:0 2px 0 rgba(0,0,0,.22);}

.lp-cta--blue{
  background:linear-gradient(100deg,var(--mid),var(--bright));color:#fff;
  box-shadow:0 5px 0 rgba(8,36,90,.28);
}
.lp-cta--blue:active{box-shadow:0 2px 0 rgba(8,36,90,.28);}

@media (max-width:400px){
  .lp-cta{font-size:14px;padding:13px 20px;}
}