@charset "utf-8";
/* ==========================================================================
   F-Plus / base
   色・字送り・余白のトークンと、全ページ共通の土台
   ========================================================================== */

:root{
  --ink:#1b1a1f;
  --sub:#6e6862;
  --acc:#c32baf;
  --acc-d:#a3248f;
  --line:#e2ded8;
  --line-2:#d9d4cd;
  --paper:#f6f4f1;
  --white:#fff;
  --gray:#9a948d;

  --pad:80px;          /* 画面左右の余白 */
  --max:1280px;        /* 本文の最大幅 */
  --head-h:88px;       /* 固定ヘッダーの高さ */
  --sec-y:104px;       /* セクションの上下余白 */
  --radius:0px;

  --f-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium",
           "游ゴシック Medium",YuGothic,Meiryo,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 16px);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .18s ease,opacity .18s ease}
a:hover{color:var(--acc)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--acc);color:#fff;padding:12px 20px;font-weight:700;
}
.skip:focus{left:0}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------- レイアウト */
.wrap{width:100%;max-width:calc(var(--max) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec-y)}
.sec--paper{background:var(--paper)}
.sec--tight{padding-block:72px}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.flow > * + *{margin-top:var(--flow,18px)}

/* --------------------------------------------------------------- 見出し */
.eyebrow{
  font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--acc);
  margin-bottom:14px;
}
.h-sec{font-size:clamp(26px,3.2vw,46px);font-weight:900;line-height:1.4;letter-spacing:.01em}
.h-page{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.4}
.h-blk{font-size:clamp(22px,2.4vw,30px);font-weight:900;line-height:1.4}
.h-card{font-size:17px;font-weight:700;line-height:1.6}
.lead{font-size:15px;line-height:2.1;color:var(--sub)}
.note{font-size:13px;line-height:2;color:var(--sub)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:38px}
.sec-head--stack{flex-direction:column;align-items:flex-start;gap:14px}

/* ラベル付きの小見出し（下層） */
.blk-head{display:flex;align-items:baseline;gap:20px;margin-bottom:30px}
.blk-head__label{
  font-size:14.5px;letter-spacing:.1em;color:var(--acc);font-weight:700;
  flex-shrink:0;width:120px;
}

/* --------------------------------------------------------------- ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 34px;font-size:15px;font-weight:700;line-height:1.4;
  background:var(--acc);color:#fff;border:1px solid var(--acc);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:var(--acc-d);border-color:var(--acc-d);color:#fff}
.btn--ghost{background:rgba(255,255,255,.92);color:var(--ink);border-color:rgba(27,26,31,.28)}
.btn--ghost:hover{background:#fff;color:var(--acc);border-color:var(--acc)}
.btn--line{background:transparent;color:var(--acc);border-color:var(--acc)}
.btn--line:hover{background:var(--acc);color:#fff}
.btn--block{display:flex;width:100%}
.btn--sm{padding:13px 24px;font-size:14px}

.link-more{
  display:inline-block;font-size:14px;color:var(--acc);
  border-bottom:1px solid currentColor;padding-bottom:4px;
}
.link-more:hover{color:var(--acc-d)}

/* --------------------------------------------------------------- ヘッダー */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--head-h);
  display:flex;align-items:center;gap:28px;
  padding-inline:40px;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid transparent;
  transition:height .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.site-head.is-stuck{
  height:68px;
  border-bottom-color:var(--line);
  box-shadow:0 2px 18px rgba(27,26,31,.06);
}
.site-head__logo img{height:52px;width:auto;transition:height .22s ease}
.site-head.is-stuck .site-head__logo img{height:40px}

.gnav{flex-grow:1;display:flex;align-items:center;justify-content:flex-end;gap:24px}
.gnav a{font-size:14px;font-weight:500;position:relative;padding-block:6px}
.gnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.gnav a:hover::after,.gnav .current-menu-item > a::after{transform:scaleX(1)}

.sns{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid rgba(27,26,31,.22)}
.sns a{
  width:34px;height:34px;border:1px solid rgba(27,26,31,.38);
  display:flex;align-items:center;justify-content:center;
}
.sns a:hover{border-color:var(--acc)}
.sns svg{width:15px;height:15px;fill:currentColor}

.head-cta{background:var(--acc);color:#fff;padding:14px 26px;font-size:14px;font-weight:700}
.head-cta:hover{background:var(--acc-d);color:#fff}

.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:2px;background:var(--ink);transition:transform .22s ease,opacity .22s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--head-h) 0 0 0;z-index:99;
  background:#fff;padding:28px 20px 48px;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer a{display:block;padding:17px 4px;border-bottom:1px solid var(--line);font-size:16px;font-weight:700}
.drawer .btn{margin-top:26px}

body.is-locked{overflow:hidden}

/* ヘッダー分の押し下げ */
.site-main{padding-top:var(--head-h)}
body.home .site-main{padding-top:0}

/* --------------------------------------------------------------- フッター */
.site-foot{background:var(--paper);border-top:1px solid var(--line);padding:64px 0 40px}
.foot-top{display:flex;gap:72px}
.foot-brand{width:340px;flex-shrink:0}
.foot-brand img{height:52px;width:auto}
.foot-addr{margin-top:20px;font-size:13px;line-height:1.95;color:var(--sub)}
.foot-sns{display:flex;gap:10px;margin-top:20px}
.foot-sns a{width:40px;height:40px;border:1px solid rgba(27,26,31,.3);display:flex;align-items:center;justify-content:center}
.foot-sns a:hover{border-color:var(--acc)}
.foot-sns svg{width:16px;height:16px;fill:currentColor}
.foot-map{flex-grow:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;font-size:13px;line-height:2}
.foot-bottom{
  border-top:1px solid var(--line);margin-top:32px;padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:12px;color:var(--sub);
}
.foot-decl{display:flex;align-items:center;gap:14px}
.foot-decl img{height:38px;width:auto}
.foot-legal{display:flex;gap:20px}

/* --------------------------------------------------------------- 下層の共通パーツ */
.phead{position:relative;background:var(--paper);overflow:hidden;min-height:420px;display:flex;align-items:center}
.phead__img{position:absolute;right:0;top:0;width:760px;height:100%;object-fit:cover;
  clip-path:polygon(11% 0,100% 0,100% 100%,0 100%)}
.phead__veil{position:absolute;inset:0 auto 0 0;width:820px;z-index:2;
  background:linear-gradient(90deg,var(--paper) 60%,rgba(246,244,241,0) 100%)}
.phead__body{position:relative;z-index:3;width:min(620px,100%);padding-block:60px}
.phead__sub{margin-top:20px;font-size:16px;line-height:1.9;color:var(--sub)}

.crumb{font-size:12px;color:var(--sub);margin-bottom:26px}
.crumb a{color:var(--sub)}
.crumb span.sep{color:var(--line);padding-inline:6px}
.crumb strong{color:var(--ink);font-weight:400}

/* 目次つき本文 */
.doc{display:flex;gap:72px;align-items:flex-start}
.doc__toc{width:250px;flex-shrink:0;position:sticky;top:calc(var(--head-h) + 24px)}
.doc__toc-ttl{font-size:11px;letter-spacing:.2em;color:var(--acc);font-weight:700;margin-bottom:16px}
.doc__toc a{display:block;font-size:13.5px;color:var(--sub);padding:12px 0 12px 16px;
  border-left:2px solid var(--line);line-height:1.6}
.doc__toc a:hover,.doc__toc a.is-active{color:var(--ink);border-left-color:var(--acc)}
.doc__body{flex-grow:1;min-width:0}
.doc__sec{padding-bottom:54px;margin-bottom:54px;border-bottom:1px solid var(--line)}
.doc__sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.doc__sec > h2{font-size:25px;font-weight:900;margin-bottom:22px}

/* 本文（投稿・固定ページのエディタ出力） */
.rt{font-size:15.5px;line-height:2.15;color:var(--sub)}
.rt > * + *{margin-top:20px}
.rt h2{font-size:24px;font-weight:900;color:var(--ink);margin-top:48px;
  padding-bottom:12px;border-bottom:2px solid var(--acc)}
.rt h3{font-size:19px;font-weight:700;color:var(--ink);margin-top:36px}
.rt h4{font-size:16px;font-weight:700;color:var(--ink);margin-top:28px}
.rt ul,.rt ol{padding-left:1.4em}
.rt ul li{list-style:disc}
.rt ol li{list-style:decimal}
.rt li + li{margin-top:6px}
.rt a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.rt img{margin-block:28px}
.rt blockquote{background:var(--paper);border-left:4px solid var(--acc);padding:24px 28px}
.rt table{font-size:14px}
.rt th,.rt td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.rt th{background:var(--paper);font-weight:700;color:var(--ink);white-space:nowrap}
.rt figure{margin:0}
.rt strong{color:var(--ink)}

/* --------------------------------------------------------------- CTA 帯 */
.cta{position:relative;overflow:hidden;min-height:380px;display:flex;align-items:center}
.cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 34%,
  rgba(255,255,255,.28) 62%,rgba(255,255,255,0) 88%)}
.cta__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;padding-block:56px}
.cta__ttl{font-size:clamp(22px,2.6vw,32px);font-weight:900;line-height:1.4}
.cta__btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}

/* --------------------------------------------------------------- ページ送り */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:56px}
.pager .page-numbers{
  min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;font-size:14px;font-weight:700;color:var(--sub);
  padding-inline:10px;
}
.pager .page-numbers:hover{border-color:var(--acc);color:var(--acc)}
.pager .page-numbers.current{background:var(--acc);border-color:var(--acc);color:#fff}
.pager .page-numbers.dots{border-color:transparent}

/* --------------------------------------------------------------- 未入稿マーク */
.todo{
  background:repeating-linear-gradient(135deg,#fdf3fb 0 10px,#f8e9f6 10px 20px);
  border:2px dashed var(--acc);padding:28px 30px 30px;
}
.todo__badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.12em;padding:6px 13px;margin-bottom:14px;
}

/* --------------------------------------------------------------- 画面幅対応 */
@media (max-width:1280px){
  :root{--pad:48px;--sec-y:88px}
  .site-head{padding-inline:28px}
  .gnav{gap:18px}
  .gnav a{font-size:13px}
}

@media (max-width:1080px){
  .doc{flex-direction:column;gap:36px}
  .doc__toc{width:100%;position:static;display:flex;flex-wrap:wrap;gap:8px}
  .doc__toc-ttl{width:100%}
  .doc__toc a{border-left:0;border:1px solid var(--line);padding:9px 14px}
  .foot-top{flex-direction:column;gap:40px}
  .foot-brand{width:100%}
}

@media (max-width:860px){
  :root{--pad:20px;--head-h:64px;--sec-y:64px}
  body{font-size:15px}
  .site-head{padding-inline:var(--pad);gap:12px}
  .site-head__logo img{height:38px}
  .site-head.is-stuck{height:56px}
  .site-head.is-stuck .site-head__logo img{height:32px}
  .gnav,.sns,.head-cta{display:none}
  .burger{display:flex;margin-left:auto}

  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}

  .blk-head{flex-direction:column;gap:6px;margin-bottom:22px}
  .blk-head__label{width:auto}

  /* 画像を static に戻すため、flex のままだと画像とテキストが横並びになる */
  .phead{min-height:0;display:block}
  .phead__img{position:static;width:100%;height:200px;clip-path:none}
  .phead__veil{display:none}
  .phead__body{width:100%;padding-block:28px 32px}
  .crumb{margin-bottom:16px}

  .doc__sec > h2{font-size:21px}

  .cta{min-height:0}
  .cta__veil{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 70%,rgba(255,255,255,.8) 100%)}
  .cta__btns{flex-direction:column;align-items:stretch}
  .cta__btns .btn{width:100%}

  /* フッター：中央寄せ・サイトマップはハンバーガーに集約 */
  .site-foot{padding:48px 0 32px;text-align:center}
  .foot-brand img{margin-inline:auto}
  .foot-sns{justify-content:center}
  .foot-map{display:none}
  .foot-bottom{flex-direction:column;text-align:center;gap:16px}
  .foot-decl{flex-direction:column;gap:10px}
  .foot-legal{flex-direction:column;gap:8px}

  .rt table{display:block;overflow-x:auto;white-space:nowrap}
}

@media print{
  .site-head,.drawer,.burger,.cta,.pager{display:none !important}
  .site-main{padding-top:0}
  body{font-size:11pt}
}

/* admin bar offset */
body.admin-bar .site-head{top:32px}
body.admin-bar .drawer{top:calc(var(--head-h) + 32px)}
@media screen and (max-width:782px){body.admin-bar .site-head{top:46px}body.admin-bar .drawer{top:calc(var(--head-h) + 46px)}}

/* --------------------------------------------------------------- 告知バー */
:root{--notice-h:0px}
body.has-notice{--notice-h:46px}
html.fp-notice-off body.has-notice{--notice-h:0px}
html.fp-notice-off .fp-notice{display:none}

.fp-notice{
  position:fixed;inset:0 0 auto 0;z-index:101;height:var(--notice-h);
  display:flex;align-items:center;gap:16px;
  padding-inline:40px;
  background:var(--ink);color:#fff;
}
.fp-notice__in{display:flex;align-items:center;gap:18px;flex:1;min-width:0;justify-content:center}
.fp-notice__t{font-size:13.5px;font-weight:700;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-notice__b{flex-shrink:0;font-size:12px;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.5);padding:5px 14px;transition:background .2s,border-color .2s}
.fp-notice__b:hover{background:var(--acc);border-color:var(--acc)}
.fp-notice__x{flex-shrink:0;background:none;border:0;color:rgba(255,255,255,.6);
  font-size:18px;line-height:1;cursor:pointer;padding:6px}
.fp-notice__x:hover{color:#fff}

body.has-notice .site-head{top:var(--notice-h)}
body.has-notice .site-main{padding-top:calc(var(--head-h) + var(--notice-h))}
body.has-notice .drawer{top:calc(var(--head-h) + var(--notice-h))}

@media (max-width:860px){
  body.has-notice{--notice-h:54px}
  .fp-notice{padding-inline:14px;gap:6px;align-items:center}
  .fp-notice__in{gap:10px;justify-content:flex-start}
  .fp-notice__t{font-size:11.5px;line-height:1.4;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .fp-notice__b{font-size:10.5px;padding:4px 9px}
  .fp-notice__x{padding:4px}
}