/*
 * 記事ページ（SWELL）用：オリジナルのヘッダー・フッターだけのCSS。
 * SWELL の本文に影響しないよう、リセットは .hd / .ft の中だけにかけている。
 * ヘッダー・フッターのデザインを変えるときは main.css と同じ値に揃えること。
 */
/* Kiwi Maru（SIL Open Font License 1.1 / src/fonts/OFL.txt）。完全版を同梱 */
@font-face{font-family:'Kiwi Maru';src:url('../fonts/KiwiMaru-Regular.woff2') format('woff2');font-weight:100 499;font-style:normal;font-display:swap}
@font-face{font-family:'Kiwi Maru';src:url('../fonts/KiwiMaru-Medium.woff2') format('woff2');font-weight:500 900;font-style:normal;font-display:swap}
:root{
  --pink:#E6207A;      /* ブランドの濃いピンク */
  --pink-d:#C0115F;    /* ボタンのホバー */
  --blush:#FFE0EC;     /* セクション背景の薄ピンク */
  --line:#F7C3D8;      /* 枠線 */
  --ink:#1D1A1C;       /* 本文 */
  --gray:#6B6168;      /* 補足 */
  --yellow:#FFE45C;    /* マーカー */
  --pop:'Kiwi Maru','Hiragino Maru Gothic ProN','Zen Kaku Gothic New',sans-serif;
  --body:'Kiwi Maru','Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif;
}

/* .hd / .ft の中だけのリセット（main.css の全体リセットの代わり） */
.hd,.hd *,.ft,.ft *{box-sizing:border-box}
.hd,.ft{font-family:var(--body);line-height:1.8;-webkit-font-smoothing:antialiased;color:var(--ink)}
.hd img,.ft img{max-width:100%;display:block}
.hd a,.ft a{color:var(--pink)}
.hd a:focus-visible,.hd button:focus-visible,.ft a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hd ul,.hd ol,.ft ul,.ft ol{margin:0;padding:0;list-style:none}
.hd ul li,.ft ul li{margin:0;padding:0}
.hd h1,.hd h2,.hd h3,.hd p,.ft h1,.ft h2,.ft h3,.ft p{margin:0;padding:0;border:0;background:none}
.hd p::before,.ft p::before{content:none}
.ft .ft__ttl::before{content:""}

/* ヘッダー */
.hd{position:relative;z-index:30;background:#fff;isolation:isolate;border-bottom:3px solid var(--pink);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}
.hd__bar{display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative;z-index:32}
.hd__logo{display:block;line-height:0}
.hd__logo img{height:46px;width:auto}
.hd__badge{font-size:11px;font-weight:900;color:#fff;background:var(--ink);padding:2px 7px;border-radius:4px}
.hd__nav{display:none}
.hd__burger{position:relative;z-index:32;width:48px;height:48px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--pink);border:0;border-radius:12px;box-shadow:0 3px 0 var(--pink-d);cursor:pointer}
.hd__burger span{display:block;width:22px;height:3px;border-radius:2px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.hd__burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hd__burger.is-open span:nth-child(2){opacity:0}
.hd__burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.spmenu{position:absolute;left:0;right:0;top:100%;z-index:31;background:#fff;border-bottom:3px solid var(--pink);padding:14px 16px 20px;box-shadow:0 12px 24px rgba(230,32,122,.18)}
.spmenu[hidden]{display:none}
.spmenu__ttl{font-size:12px;font-weight:900;color:var(--gray);margin-bottom:8px}
.spmenu ul{display:flex;flex-direction:column;gap:8px}
.spmenu a{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border-radius:14px;background:var(--blush);color:var(--pink);font-weight:900;font-size:16px;text-decoration:none}
.spmenu__arrow{margin-left:auto;font-size:22px;line-height:1}
.spmenu__bg{position:absolute;left:0;right:0;top:100%;height:100vh;z-index:30;background:rgba(29,26,28,.35);border:0;padding:0;cursor:pointer}
.hd__nav-legacy{min-width:0}
.hd__nav::-webkit-scrollbar{display:none}
.hd__nav ul{display:flex;gap:8px;width:max-content}
.hd__nav a{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 12px;border-radius:999px;background:#fff;border:2px solid var(--pink);box-shadow:0 3px 0 var(--pink-d);color:var(--pink);font-weight:900;font-size:13px;text-decoration:none;white-space:nowrap;transition:transform .1s ease,box-shadow .1s ease,background .15s ease,color .15s ease}
.hd__nav a:hover{background:var(--pink);color:#fff}
.hd__nav a:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pink-d)}

/* フッター */
.ft{background:var(--ink);color:#C9BCC3;font-size:13px;line-height:1.8;border-top:4px solid var(--pink)}
.ft__inner{padding:32px 16px 24px;display:flex;flex-direction:column;gap:28px}
.ft__brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.ft__logo{width:200px;height:auto}
.ft__desc{max-width:34em;font-size:13px}
.ft__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.ft__col ul{display:flex;flex-direction:column;gap:6px}
.ft__ttl{display:flex;align-items:center;gap:6px;font-weight:900;font-size:14px;color:#fff;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #3A3238}
.ft__ttl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);flex-shrink:0}
.ft__col a{color:#C9BCC3;font-size:13px;text-decoration:none}
.ft__col a:hover{color:#fff;text-decoration:underline}
.ft__pr{background:#2A2328;border:1px solid #4A3E45;border-left:4px solid var(--pink);border-radius:10px;padding:14px 16px;font-size:12px;color:#D9CDD3}
.ft__prttl{font-weight:900;font-size:13px;color:#fff;margin-bottom:4px}
.ft__notes{display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:1px solid #3A3238;font-size:12px;color:#9C8F96}
.ft__copy{text-align:center;font-size:12px;color:#9C8F96}

@media (min-width:768px){
  .hd__bar{height:72px;max-width:1120px;margin:0 auto;padding:0 24px}
  .hd{padding:10px max(24px,calc((100vw - 1180px) / 2));gap:16px}
  .hd__logo img{height:62px}
  .hd__nav{display:flex;justify-content:flex-end;flex-grow:1;min-width:0}
  .hd__burger,.spmenu,.spmenu__bg{display:none}
  .hd__nav a{min-height:44px;padding:0 18px;font-size:15px}
  .hd__nav ul{gap:10px}
  .ft__inner{max-width:1180px;margin:0 auto;padding:48px 24px 28px;gap:32px}
  .ft__brand{align-items:flex-start;text-align:left}
  .ft__nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .ft__top{display:grid;grid-template-columns:280px 1fr;gap:40px}
}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hd__logo img{width:auto}

/*
 * SWELL 標準のヘッダー・追従ヘッダー・スマホメニュー・フッター・下部固定メニューを隠す。
 * このCSSは記事ページ（SWELL で表示するページ）でしか読み込まないので、条件なしで隠してよい。
 * （SWELL は body_class を <body> ではなく #body_wrap に付けるため、body.xxx では効かない）
 */
#header.l-header,
.l-header,
#fix_header,
.l-fixHeader,
#sp_menu,
.p-spMenu,
#footer.l-footer,
.l-footer,
#fix_bottom_menu,
.l-fixBottomMenu{display:none!important}