/* =======================================================
   AI孫 共通スタイル common.css（最終完成版）
   - Header（主要ナビ）/ Footer（バッジ+リンク群）/ Sticky Footer
   - 既存ページの軽微な差異にも強い互換レイヤー入り
   ======================================================= */

/* ===== 基本リセット＆ベース ===== */
:root{
  --brand:#ff3366;
  --brand-weak:#ffeaf5;
  --ink:#222;
  --muted:#666;
  --bd:#ffd6e7;
  --shadow:0 10px 28px rgba(90,61,78,.12);
  --radius:12px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover, a:focus{ text-decoration:underline; }

/* アクセシビリティ: スキップリンク/不可視テキスト */
.skip, .skip a{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip a:focus{
  position:fixed; left:16px; top:16px; z-index:1000;
  background:#fff; color:#000; padding:10px 14px; border-radius:12px;
  outline:2px solid var(--brand);
}
.visually-hidden{ position:absolute !important; left:-9999px !important; }

/* ===== Sticky Footer（中身が短くても最下部へ）===== */
html, body{ height:100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
header{ flex:0 0 auto; }
/* ページごとに異なるラッパー名を網羅 */
main, #main, .page, .container, .container-main{ flex:1 0 auto; }
footer{ flex:0 0 auto; }

/* ===== Header（共通デザイン）===== */
/* HTML想定：
<header role="banner">
  <div class="header-inner">
    <a class="brand" href="/index.html"> <img ...><span class="brand-name">AI孫</span> </a>
    <nav aria-label="主要"><ul>…</ul></nav>
  </div>
</header>
*/
header{
  background:linear-gradient(135deg,#ffc8da,#ffdfe9);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  max-width:1000px; margin:0 auto; padding:18px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:12px; color:#a43a5a; text-decoration:none;
}
.brand img{ width:56px; height:56px; border-radius:12px; }
.brand-name{ font-weight:900; font-size:1.25rem; letter-spacing:.02em; }

nav[aria-label="主要"]{ margin-top:10px; width:100%; }
nav[aria-label="主要"] ul{
  display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none;
}
nav[aria-label="主要"] a{
  display:inline-block; padding:10px 14px;
  border-radius:12px; font-weight:700; text-decoration:none;
  color:var(--brand); background:#fff; border:1px solid rgba(255,51,102,.25);
  transition:all .2s ease;
}
nav[aria-label="主要"] a:hover,
nav[aria-label="主要"] a:focus,
nav[aria-label="主要"] a[aria-current="page"]{
  background:var(--brand); color:#fff; text-decoration:none;
  box-shadow:0 0 0 3px rgba(255,51,102,.2); outline:none;
}

/* 互換：別ページでグローバルナビを使っている場合 */
nav[aria-label="グローバルナビ"]{ margin-top:10px; width:100%; }
nav[aria-label="グローバルナビ"] ul{
  display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none;
}
nav[aria-label="グローバルナビ"] a{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700;
  color:var(--brand); background:#fff; border:1px solid rgba(255,51,102,.25); transition:all .2s ease;
}
nav[aria-label="グローバルナビ"] a:hover,
nav[aria-label="グローバルナビ"] a:focus,
nav[aria-label="グローバルナビ"] a[aria-current="page"]{
  background:var(--brand); color:#fff; text-decoration:none;
  box-shadow:0 0 0 3px rgba(255,51,102,.2); outline:none;
}

/* スモールスクリーン調整 */
@media(max-width:640px){
  .brand img{ width:52px; height:52px; }
}

/* ===== Footer（共通デザイン）===== */
/* HTML想定：
<footer>
  <div class="foot-inner">
    <div class="foot-badge"><span>AI孫</span><div class="tagline">…</div></div>
    <nav class="links" aria-label="フッターナビ">…</nav>
    <div class="contact">…</div>
    <div class="copyright">…</div>
  </div>
</footer>
*/
footer{
  background:linear-gradient(90deg,#ffeaf5,#fff);
  border-top:3px solid #f7c2d4;
  margin-top:40px; color:#444;
}
.foot-inner{
  max-width:1000px; margin:0 auto; padding:40px 16px; text-align:center;
}
.foot-badge{ margin-bottom:10px; }
.foot-badge > span{
  display:inline-block; background:var(--brand); color:#fff;
  font-weight:bold; padding:6px 16px; border-radius:20px; font-size:18px;
}
.tagline{ margin-top:8px; font-size:14px; color:#666; }

.links{
  margin:16px 0; font-size:14px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.links a{
  color:var(--brand); background:#fff; text-decoration:none;
  padding:6px 10px; border-radius:10px; border:1px solid var(--bd);
  transition:all .2s ease;
}
.links a:hover{ background:var(--brand); color:#fff; }

.contact{ font-size:13px; color:#777; margin-bottom:10px; }
.contact a{ color:var(--brand); }

.copyright{ font-size:12px; color:#777; margin-top:8px; }

/* 互換：foot-links / footer .inner を使うページも同じ見た目に */
.foot-links{ /* 別名でも同じUIに統一 */
  margin:16px 0; font-size:14px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.foot-links a{
  color:var(--brand); background:#fff; text-decoration:none;
  padding:6px 10px; border-radius:10px; border:1px solid var(--bd);
  transition:all .2s ease;
}
.foot-links a:hover{ background:var(--brand); color:#fff; }
footer .inner{ max-width:1000px; margin:0 auto; padding:40px 16px; text-align:center; }

/* ===== 汎用ボタン（サイト内の共通CTA）===== */
.btn{
  display:inline-block; padding:10px 14px; font-weight:800;
  border-radius:10px; text-decoration:none; transition:all .2s ease; border:2px solid transparent;
}
.btn.white{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn.white:hover{ background:var(--brand); color:#fff; text-decoration:none; }
.btn.ghost{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn.ghost:hover{ background:var(--brand); color:#fff; text-decoration:none; }

/* ===== 競合対策（旧スタイルが残っていても“後勝ち”で統一）===== */
/* 旧footerクラスのみの簡易表示を共通UIに寄せる */
footer.footer{
  background:linear-gradient(90deg,#ffeaf5,#fff) !important;
  border-top:3px solid #f7c2d4 !important;
  margin-top:40px !important; color:#444 !important; text-align:center !important;
  padding:40px 16px !important; /* 旧簡易版に余白付与 */
}
/* 旧ヘッダー用の nav 直指定を弱める（主要/グローバル以外には影響しない） */
head + body nav a{ text-decoration:none; }

/* ===== おまけ（軽いカード/見出しの統一トーン、任意）===== */
.card{
  background:#fff; border:1px solid #f3c2d1; border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.card .head{
  background:#fff5f8; padding:12px 16px; font-weight:800; color:#c81f52;
  border-bottom:1px solid #f7d7e1; border-top-left-radius:14px; border-top-right-radius:14px;
}

/* ===== 低減動作（ユーザー設定を尊重）===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}