/* Kakizume shared shell (header/footer/font only)
   - Header/Footer/Sidebar font: Yusei Magic (Google Fonts)
   - Body font: Noto Sans JP (Google Fonts)
   - No external CDN except Google Fonts
*/

:root{
  --ink:#26345c;
  --bg:#ffffff;
  --line:#cfd6e5;
}

/* Base */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:#111827;
  font-family:"Noto Sans JP","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.8;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ink);text-decoration:none;}
a:hover{opacity:.85;}

/* Common container width (all pages) */
.container{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
}

/* Decorative font areas */
.font-deco, header, footer{
  font-family:"Yusei Magic",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Header */
.topbar{padding:20px 0 10px;}
.topnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:700;
  letter-spacing:.02em;
  color:#111827;
}
.site-logo{height:28px;width:auto;}
.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.nav-links a{
  display:flex;
  align-items:center;
  gap:6px;
  color:#111827;
  font-size:14px;
}
.nav-links .icon{font-size:16px;color:#111827;}

/* Page body (empty area) */
.card {
  width: 100%;                 /* 全体幅 */
  max-width: 1100px;
  min-height: 520px;            /* 全体高さ */
  margin: 40px auto;
  padding: 24px 20px 20px;
  border: 4px solid #000;       /* 外枠 太線 */
  border-radius: 32px;          /* 角丸 */
  box-sizing: border-box;
  background: #fff;
  text-align: center;
}

/* タイトル */
.card h1 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

/* タイトル下線 */
.card h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #000;
  border-radius: 2px;
  margin: 6px auto 0;
}

/* 内側点線枠 */
.card-inner {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 12px;
}


/* Footer */
.footer{
  margin-top:28px;
  background:var(--ink);
  color:#fff;
  padding:18px 0;
}
.footer__inner{
  display:flex;
  justify-content:center;
}
.footer__text{opacity:.95;}

/* Responsive: tablet */
@media (max-width:1024px){
  .topbar{padding:16px 0 8px;}
  .site-title{font-size:20px;}
  .nav-links{gap:12px;}
}

/* Responsive: smartphone (<=375px) */
@media (max-width:375px){
  .container{width:calc(100% - 24px);}
  .page__title{font-size:28px;}
}