@charset "UTF-8";
/* ============================================================
   ミセバコ サービスサイト
   ------------------------------------------------------------
   ★背景は白（#FFFFFF）。セクションの区切りは、色ではなく
     余白と1本の線で作る。色を面で使うのは、最後のCTA帯だけ。
     絵の主役はイラストなので、地の色でうるさくしない。

   ★中立色（ink / sub / line / danger / star）は
     apps/mobile の ThemeTokens と同じ値。ここだけ変えない。
     デザインカンプ（docs/ミセバコ_全画面デザイン.html）の :root とも一致。
   ============================================================ */

:root{
  /* ブランド */
  --brand:#2F4858;
  --brand-d:#1F2C35;
  --brand-soft:#EDF1F4;
  --star:#F5B324;
  --danger:#C4453C;

  /* 地と文字 */
  --bg:#FFFFFF;
  --ink:#111214;
  --body:#4E5055;
  --sub:#8E9096;
  --line:#E8E9EC;
  --tint:#FAFAFB;   /* 表の見出し行など、部品の中だけで使う。面には使わない */

  /* 寸法 */
  --wrap:1160px;
  --wrap-narrow:780px;
  --r:12px;
  --r-lg:18px;
  --head-h:66px;
}

*,*::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}}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.5;margin:0;font-weight:900;letter-spacing:.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
button{font:inherit;color:inherit}

.num{font-family:"Inter",sans-serif;font-feature-settings:"tnum"}

/* スクリーンリーダー専用 */
.sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* フォーカスは必ず見える形で残す */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;
}

/* ============================================================
   レイアウト
   ============================================================ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap--narrow{max-width:var(--wrap-narrow)}
.center{text-align:center}

.sec{padding:84px 0}
.sec--tight{padding:44px 0}
.sec--head{padding:56px 0 24px}
/* 区切りは色ではなく線。背景は白のまま */
.sec--alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--dark{background:var(--brand);color:rgba(255,255,255,.82)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:#fff}

@media (max-width:768px){
  .sec{padding:56px 0}
  .sec--tight{padding:32px 0}
}

/* 見出しのかたまり */
.sec-head{max-width:44em;margin-bottom:34px}
.eyebrow{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:10px;
}
.h1{font-size:clamp(24px,4.4vw,34px)}
.h2{font-size:clamp(20px,3.4vw,27px)}
.h3{font-size:clamp(17px,2.6vw,20px)}
.h2--center{text-align:center}
.lead{margin-top:12px;font-size:14.5px;line-height:2}
.lead--center{text-align:center;margin-inline:auto;max-width:38em}
.note{margin-top:14px;font-size:12px;color:var(--sub);line-height:1.9}

/* ============================================================
   ボタン
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid transparent;border-radius:10px;
  padding:12px 22px;font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;transition:opacity .15s,background .15s;
}
.btn:hover{text-decoration:none;opacity:.86}
.btn--solid{background:var(--brand);color:#fff}
.btn--ghost{background:#fff;color:var(--brand);border-color:#CBD3D9}
.btn--invert{background:#fff;color:var(--brand)}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--sm{padding:9px 16px;font-size:12.5px;border-radius:8px}
.btn--lg{padding:15px 30px;font-size:15px}
.btn--wide{width:100%}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.btns--center{justify-content:center;margin-top:34px}

.cta-note{margin-top:14px;font-size:12px;color:var(--sub);line-height:1.85}
.cta-note--dark{color:rgba(255,255,255,.55);text-align:center}

/* ============================================================
   ヘッダー
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.site-head.is-stuck{border-bottom-color:var(--line)}
.site-head__inner{display:flex;align-items:center;gap:24px;height:var(--head-h)}

.brand{display:flex;align-items:center;gap:9px;color:var(--ink);flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand__mark{width:28px;height:28px;border-radius:8px}
.brand__name{font-size:15px;font-weight:900;letter-spacing:.03em;display:flex;align-items:baseline;gap:6px}
.brand__sub{font-size:10px;font-weight:500;color:var(--sub);letter-spacing:.04em}
/* ロゴタイプは図形。大きさは高さで決め、色は currentColor で親から受ける */
.brand__logotype{display:block;height:15px;width:auto;flex:0 0 auto}

.gnav{flex:1 1 auto;min-width:0}
.gnav__list{display:flex;gap:20px}
.gnav__list a{font-size:13px;color:var(--body);font-weight:500}
.gnav__list a:hover{color:var(--brand);text-decoration:none}

.site-head__cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.login{font-size:12.5px;color:var(--body);font-weight:500}

.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0}
.burger__bars,.burger__bars::before,.burger__bars::after{
  display:block;width:20px;height:1.8px;background:var(--ink);border-radius:2px;
  margin-inline:auto;transition:transform .2s,opacity .2s;
}
.burger__bars{position:relative}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0}
.burger__bars::before{top:-6px}
.burger__bars::after{top:6px}
.burger[aria-expanded="true"] .burger__bars{background:transparent}
.burger[aria-expanded="true"] .burger__bars::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--head-h) 0 0;z-index:99;
  background:#fff;overflow-y:auto;padding:24px 0 120px;
}
.drawer[hidden]{display:none}
.drawer__list{display:flex;flex-direction:column}
.drawer__list a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);font-weight:700}
.drawer__foot{margin-top:24px;display:flex;flex-direction:column;gap:16px;align-items:center}

@media (max-width:900px){
  .gnav,.site-head__cta{display:none}
  .burger{display:block;margin-left:auto}
}

/* ============================================================
   パンくず
   ============================================================ */
.crumb{border-bottom:1px solid var(--line);font-size:11.5px;color:var(--sub)}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;padding:11px 0}
.crumb li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumb a{color:var(--sub)}

/* ============================================================
   01 ファーストビュー
   ============================================================ */
.hero{padding:72px 0 60px}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero__title{font-size:clamp(27px,4.8vw,42px);line-height:1.42;letter-spacing:.01em;margin-top:8px}
.hero__lead{margin-top:20px;font-size:15px;line-height:2.05}
.hero__lead strong{color:var(--ink)}
.hero__art img{width:100%}

@media (max-width:900px){
  .hero{padding:44px 0 40px}
  .hero__inner{grid-template-columns:1fr;gap:32px}
  .hero__art{order:-1}
}

/* ============================================================
   02 4つの数字
   ============================================================ */
.stats-sec{padding-top:0}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.stats__item{padding:24px 16px;text-align:center;border-left:1px solid var(--line)}
.stats__item:first-child{border-left:0}
.stats__value{font-family:"Inter",sans-serif;font-size:34px;font-weight:800;color:var(--brand);line-height:1.2;letter-spacing:-.01em}
.stats__unit{font-size:16px;font-weight:700;margin-left:2px}
.stats__label{font-size:12px;color:var(--sub);margin-top:4px}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats__item:nth-child(odd){border-left:0}
  .stats__item:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ============================================================
   03 工程の比較
   ============================================================ */
.vs{display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:center;margin-top:8px}
.vs__col{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:24px}
.vs__col--on{border-color:var(--brand);background:var(--brand-soft)}
.vs__title{font-size:14px}
.vs__flow{margin-top:16px;display:flex;flex-direction:column;gap:8px;counter-reset:step}
.vs__flow li{
  background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:10px 14px 10px 40px;font-size:13px;position:relative;
}
.vs__flow li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:"Inter",sans-serif;font-size:11px;font-weight:700;color:var(--sub);
}
.vs__col--on .vs__flow li{border-color:#D6DEE3}
.vs__col--on .vs__flow li::before{color:var(--brand)}
.vs__tail{margin-top:16px;font-size:13px;font-weight:700;color:var(--body)}
.vs__col--on .vs__tail{color:var(--brand)}
.vs__arrow{text-align:center;font-size:20px;color:#C9CACE}

.how__art{margin-top:40px}
.how__art img{margin-inline:auto}

@media (max-width:900px){
  .vs{grid-template-columns:1fr}
  .vs__arrow{transform:rotate(90deg)}
}

/* ============================================================
   カード（03 / 04 / 05 / 11 / 事例）
   ============================================================ */
.cards{display:grid;gap:18px;margin-top:36px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;background:#fff;
}
.card--plain{border:0;padding:0}
.card--link{padding:0;overflow:hidden;transition:box-shadow .18s}
.card--link:hover{box-shadow:0 14px 34px -22px rgba(17,18,20,.4)}
.card--link a{display:block;color:inherit;padding:0 0 22px}
.card--link a:hover{text-decoration:none}
.card--link .card__title,.card--link .card__meta,.card--link .card__quote,.card--link .card__shop{padding-inline:22px}

.card__icon{width:72px;height:72px}
.card__shot{border-radius:var(--r);overflow:hidden;background:var(--tint);margin-bottom:16px}
.card--link .card__shot{border-radius:0;margin-bottom:18px}
.card__shot img{width:100%}
.card__title{font-size:15px;margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card--plain .card__title{margin-top:16px}
.card__text{font-size:13px;line-height:1.95;margin-top:8px;color:var(--body)}
.card__meta{font-size:11.5px;color:var(--sub);margin-top:0}
.card__quote{font-size:13.5px;color:var(--ink);font-weight:700;line-height:1.85;margin-top:10px}
.card__shop{font-size:12px;color:var(--sub);margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

.tag{
  display:inline-block;background:var(--brand-soft);color:var(--brand);
  font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.02em;
}

@media (max-width:900px){
  .cards--3,.cards--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cards--3,.cards--4{grid-template-columns:1fr}
}

/* ============================================================
   04 交差流入
   ============================================================ */
.network{margin-top:8px}
.network img{margin-inline:auto}

/* ============================================================
   06 お店側の画面
   ============================================================ */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;margin-top:8px}
.split__title{font-size:15px;margin-top:16px}
.split__text{font-size:13px;line-height:1.95;margin-top:8px}
.shot-frame{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--tint)}
.shot-frame--dark{background:var(--brand-d);border-color:var(--brand-d)}

.points{margin-top:34px;display:grid;gap:12px}
.points li{
  border-top:1px solid var(--line);padding-top:12px;
  font-size:13px;line-height:1.95;
}
.points strong{display:block;color:var(--ink);font-size:13.5px}

@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ============================================================
   07 はじめかた
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.step__n{
  width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;
}
.step__art{width:100%;margin-top:14px}
.step__title{font-size:15px;margin-top:14px}
.step__text{font-size:13px;line-height:1.95;margin-top:8px}
.step__time{font-size:12px;font-weight:700;color:var(--brand);margin-top:12px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* ============================================================
   08 / 09 表
   ============================================================ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.pricing,.compare{
  min-width:640px;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:#fff;
}
.pricing th,.pricing td,.compare th,.compare td{
  padding:14px 16px;font-size:13px;text-align:left;border-bottom:1px solid var(--line);
}
.pricing thead th,.compare thead th{
  background:var(--tint);font-size:11.5px;color:var(--sub);letter-spacing:.05em;font-weight:700;
}
.pricing tbody th,.compare tbody th{font-weight:900;color:var(--ink);white-space:nowrap}
.pricing tr:last-child td,.pricing tr:last-child th,
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
.pricing .price{font-size:16px;font-weight:800;color:var(--ink)}
.pricing .price span,.pricing .num span{font-size:11px;font-weight:500;margin-left:1px}
.pricing .is-recommended{background:var(--brand-soft)}
.pricing .is-recommended th,.pricing .is-recommended td{color:var(--brand)}
.compare .is-us{background:var(--brand-soft);color:var(--brand);font-weight:700}

.badge{
  display:inline-block;background:var(--star);color:#3A2B06;
  font-size:10px;font-weight:900;padding:1px 8px;border-radius:20px;margin-left:8px;vertical-align:1px;
}

.fineprint{margin-top:18px;display:grid;gap:8px}
.fineprint li{position:relative;padding-left:1.1em;font-size:12px;color:var(--sub);line-height:1.9}
.fineprint li::before{content:"・";position:absolute;left:0}

/* ============================================================
   10 アコーディオン
   ============================================================ */
.accordion{margin-top:8px;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc__head{margin:0;font-size:inherit;font-weight:inherit}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:16px;justify-content:space-between;
  background:none;border:0;padding:20px 4px;text-align:left;cursor:pointer;
}
.acc__q{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.7}
.acc__mark{position:relative;flex:0 0 16px;height:16px}
.acc__mark::before,.acc__mark::after{
  content:"";position:absolute;left:0;top:7px;width:16px;height:1.8px;
  background:var(--brand);border-radius:2px;transition:transform .2s;
}
.acc__mark::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__mark::after{transform:rotate(0)}
.acc__panel[hidden]{display:none}
.acc__body{padding:0 4px 22px;font-size:13.5px;line-height:2}
.acc__body p+p{margin-top:1em}
.acc__body a{text-decoration:underline}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.chip{
  border:1px solid var(--line);border-radius:20px;padding:6px 15px;
  font-size:12.5px;color:var(--body);
}
.chip:hover,.chip.is-on{border-color:var(--brand);color:var(--brand);text-decoration:none}

/* ============================================================
   一覧（お知らせ・検索結果）
   ============================================================ */
.newslist{border-top:1px solid var(--line)}
.newslist__item{border-bottom:1px solid var(--line)}
.newslist__item a{display:block;padding:20px 4px;color:inherit}
.newslist__item a:hover{text-decoration:none}
.newslist__item a:hover .newslist__title{color:var(--brand)}
.newslist__meta{display:flex;align-items:center;gap:12px}
.date{font-size:12px;color:var(--sub);letter-spacing:.03em}
.newslist__title{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.75}
.empty{font-size:14px;color:var(--sub);padding:40px 0;text-align:center}

.pagination{margin-top:36px;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{
  min-width:38px;height:38px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--body);
  font-family:"Inter",sans-serif;
}
.pagination .page-numbers.current{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination a.page-numbers:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}

/* ============================================================
   記事本文 / 規約ページ
   ============================================================ */
.prose{font-size:14.5px;line-height:2.05}
.prose>*+*{margin-top:1.4em}
.prose h2{font-size:19px;margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--line)}
.prose h3{font-size:16px;margin-top:2em}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li+li{margin-top:.5em}
.prose a{text-decoration:underline}
.prose table{margin-top:1.4em;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:block;overflow-x:auto}
.prose th,.prose td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line);text-align:left}
.prose th{background:var(--tint);white-space:nowrap}
.prose blockquote{border-left:3px solid var(--line);padding-left:16px;color:var(--sub)}
.prose img{border-radius:var(--r);margin-inline:auto}
.prose code{background:var(--tint);padding:2px 6px;border-radius:5px;font-size:.9em}

.post__meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.post__hero{margin-top:28px}
.post__hero img{border-radius:var(--r-lg)}
.post__nav{display:flex;justify-content:space-between;gap:20px;font-size:13px}
.post__nav-next{margin-left:auto;text-align:right}

/* 導入事例 */
.case__industry{font-size:12px;color:var(--sub);margin-bottom:10px}
.case__quote{
  margin:26px 0 0;padding:22px 24px;background:var(--brand-soft);border-radius:var(--r-lg);
}
.case__quote p{font-size:16px;font-weight:700;color:var(--brand);line-height:1.85}
.case__quote cite{display:block;margin-top:10px;font-size:12px;color:var(--sub);font-style:normal}
.case__hero{margin-top:32px}
.case__hero img{border-radius:var(--r-lg);width:100%}
.case__facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin:32px 0 8px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line);
}
.case__facts>div{background:#fff;padding:16px}
.case__facts dt{font-size:11px;color:var(--sub)}
.case__facts dd{margin:4px 0 0;font-size:13.5px;font-weight:700;color:var(--ink)}
@media (max-width:700px){.case__facts{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   フッター
   ============================================================ */
.site-foot{background:var(--brand-d);color:rgba(255,255,255,.62);padding:56px 0 40px;margin-top:0}
.site-foot__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.site-foot__logo{
  font-size:15px;font-weight:900;color:#fff;letter-spacing:.03em;
  display:flex;align-items:baseline;gap:7px;
}
.site-foot__logotype{display:block;height:15px;width:auto;flex:0 0 auto}
.site-foot__desc{font-size:12.5px;margin-top:10px;line-height:1.95}
.site-foot__brand .btn{margin-top:18px}
.site-foot__h{font-size:12px;color:#fff;letter-spacing:.04em}
.site-foot li{margin-top:9px}
.site-foot a{font-size:12.5px;color:rgba(255,255,255,.62)}
.site-foot a:hover{color:#fff}
.site-foot__bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;
}
@media (max-width:800px){.site-foot__cols{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   スマホの追従CTA
   ★スマホでは、ヘッダーのCTAが隠れる代わりにこれを出す。
     フッターと重ならないよう body に余白を足す。
   ============================================================ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:98;
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:10px 0 max(10px,env(safe-area-inset-bottom));
  display:none;
}
.sticky-cta__inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.sticky-cta__text{font-size:12px;font-weight:700;color:var(--ink)}
@media (max-width:900px){
  .sticky-cta{display:block}
  body{padding-bottom:72px}
}

/* ============================================================
   イラストのプレースホルダ
   ★assets/img に絵が置かれるまでの仮枠。
     本番で見えていたら「置き忘れ」なので、目立つままにしてある。
   ============================================================ */
.illust-placeholder{
  display:grid;place-items:center;text-align:center;
  border:1.5px dashed #CFD0D4;border-radius:var(--r);background:var(--tint);
  color:var(--sub);font-size:11px;line-height:1.8;padding:20px;min-height:120px;width:100%;
}
.illust-placeholder code{font-family:"Inter",monospace;font-size:10.5px;color:#B0B2B7}

/* ============================================================
   検索フォーム
   ============================================================ */
.searchform{display:flex;gap:8px;margin-top:24px}
.searchform input[type="search"]{
  flex:1;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:14px;
  background:#fff;color:var(--ink);
}
.search-wrap{max-width:420px;margin-inline:auto}

/* ============================================================
   Contact Form 7
   ------------------------------------------------------------
   ★フォーム本体はプラグイン側で作る。ここは見た目だけ。
     wpcf7_autop は inc/contact-form-7.php で切ってあるので、
     マークアップは <p> ではなく <div class="f-row"> で組む。
   ============================================================ */
.wpcf7{margin-top:8px}
.f-row{margin-top:22px}
.f-row--2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.f-row--2{grid-template-columns:1fr}}

.f-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.f-req{
  display:inline-block;background:var(--danger);color:#fff;font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:20px;margin-left:8px;vertical-align:1px;
}
.f-opt{
  display:inline-block;border:1px solid var(--line);color:var(--sub);font-size:10px;
  padding:0 7px;border-radius:20px;margin-left:8px;vertical-align:1px;
}
.f-hint{font-size:11.5px;color:var(--sub);margin-top:6px;line-height:1.8}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;background:#fff;color:var(--ink);
  border:1px solid #D5D7DB;border-radius:10px;
  padding:12px 14px;font-size:15px;line-height:1.7;font-family:inherit;
}
/* ★font-size を16px未満にしない。iOS Safari が入力時に勝手にズームする */
.wpcf7 textarea{min-height:180px;resize:vertical}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  border-color:var(--brand);outline:2px solid rgba(47,72,88,.16);outline-offset:0;
}
.wpcf7 .wpcf7-list-item{margin:0 18px 8px 0;display:inline-block}
.wpcf7 .wpcf7-list-item-label{font-size:13.5px}

.wpcf7 .wpcf7-submit{
  background:var(--brand);color:#fff;border:0;border-radius:10px;
  padding:15px 40px;font-size:15px;font-weight:700;cursor:pointer;
}
.wpcf7 .wpcf7-submit:disabled{opacity:.5;cursor:default}
.wpcf7 .wpcf7-spinner{margin-left:12px}

/* エラーと完了 */
.wpcf7 .wpcf7-not-valid-tip{color:var(--danger);font-size:12px;margin-top:6px}
.wpcf7 .wpcf7-not-valid{border-color:var(--danger)}
.wpcf7 form .wpcf7-response-output{
  margin:24px 0 0;padding:14px 16px;border-radius:10px;font-size:13.5px;border-width:1px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{border-color:var(--danger);color:var(--danger);background:#FCF2F1}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

/* ハニーポット。人には見せない（inc/contact-form-7.php と対） */
.mb-hp{
  position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}

/* ============================================================
   印刷
   ============================================================ */
@media print{
  .site-head,.drawer,.sticky-cta,.site-foot,.btns,.crumb{display:none!important}
  body{padding:0;font-size:11pt}
  .sec{padding:12pt 0}
}