@font-face{font-family:"LPDisplay";src:url("fonts/shippori-mincho-b1.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
/* ============================================================
   SITE.CSS — shukyaku-guide.com（集客ガイド｜広告代理店・集客サービスの選び方と費用相場）
   コンセプト：読み物の紙面。生成りの紙に深い緑の罫、明朝の見出し。装飾より本文の読みやすさ。
   運営は株式会社ミライバリューだが、本体サイトとは別ブランド（色・書体を変える）。
   SP（〜767px）を先に書き、PC（768px〜）で上書きする。
   border-radius 不使用（clip-path）・色相を変えるグラデ禁止・絵文字禁止。
   ============================================================ */

:root{
  --ink:#1b2420;
  --ink2:#4d5a54;
  --ink3:#86918b;
  --paper:#fbfaf6;      /* 生成りの紙 */
  --soft:#f1efe6;       /* 淡い面 */
  --tint:#e2dfd0;       /* もう一段の淡い面 */
  --base:#2f5d50;       /* 深い緑（中間色） */
  --dark:#1e3a32;       /* 暗い面 */
  --dark2:#14271f;      /* フッター */
  --accent:#2f5d50;     /* 差し色は深い緑1色 */
  --line:#d9d5c6;

  --display:"LPDisplay","Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;

  --fs-hero:40px;  --fs-h1:30px;  --fs-h2:24px;  --fs-h3:18px;
  --fs-lead:16.5px; --fs-body:15.5px; --fs-note:13px; --fs-kick:11.5px;
  --lh-display:1.2; --ls-display:.03em; --ls-kicker:.24em;

  --wrap-sp:390px;
  --wrap-pc:1120px;
  --gutter:22px;
  --head-h:60px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 8px);}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--fs-body);line-height:1.95;word-break:normal;overflow-wrap:anywhere;overflow-x:clip;}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;font-feature-settings:"palt";
  letter-spacing:var(--ls-display);text-wrap:pretty;}
p{margin:0;text-wrap:pretty;}
ul,ol{margin:0;padding:0;list-style:none;}
dl,dt,dd{margin:0;}
figure{margin:0;}
table{border-collapse:collapse;width:100%;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

.wrap{width:100%;max-width:var(--wrap-sp);margin:0 auto;padding:0 var(--gutter);container-type:inline-size;}
.sec{padding:56px 0;}
.sec--tight{padding:36px 0;}
.narrow{max-width:720px;}

/* ---------------------------------------------------------------- 文字 */
.t-kicker{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-kick);
  letter-spacing:var(--ls-kicker);color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.t-h1{font-size:var(--fs-h1);line-height:1.35;}
.t-h2{font-size:var(--fs-h2);line-height:1.4;}
.t-h3{font-size:var(--fs-h3);line-height:1.5;}
.t-hero{font-family:var(--display);font-weight:700;font-size:var(--fs-hero);line-height:var(--lh-display);display:inline-block;}
.t-lead{font-size:var(--fs-lead);line-height:1.95;color:var(--ink2);}
.t-body{font-size:var(--fs-body);line-height:1.95;color:var(--ink2);}
.t-note{font-size:var(--fs-note);line-height:1.75;color:var(--ink3);}
.nw{white-space:nowrap;}
.sp{display:inline;}

/* 結論の段落（h1 直後） */
.ans{margin-top:22px;padding:18px 20px;background:var(--soft);border-left:4px solid var(--base);display:grid;gap:10px;}
.ans p{font-size:var(--fs-lead);line-height:1.9;color:var(--ink);}

/* ---------------------------------------------------------------- ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.06em;text-decoration:none;
  color:#fff;background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 80%,#000));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:transform .12s ease,filter .12s ease;}
.btn:active{transform:translateY(2px);filter:brightness(1.06);}
.btn--ghost{color:var(--ink);background:none;box-shadow:inset 0 0 0 2px var(--ink);}
.btn--ghost.btn--white{color:#fff;box-shadow:inset 0 0 0 2px #fff;}
.btn--wide{width:100%;}

/* ---------------------------------------------------------------- ヘッダー（文字ロゴ） */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);}
.site-head__in{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);
  max-width:var(--wrap-pc);margin:0 auto;padding:0 var(--gutter);}
.site-head__logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:20px;letter-spacing:.08em;color:var(--ink);}
.site-head__logo small{font-family:var(--body);font-size:10.5px;letter-spacing:.06em;color:var(--ink3);font-weight:400;display:none;}
.site-nav__toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:0 8px;-webkit-tap-highlight-color:transparent;}
.site-nav__toggle span{display:block;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease;}
html.js .site-nav{position:fixed;inset:var(--head-h) 0 0 0;z-index:49;background:var(--paper);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1);overflow:auto;}
html.js .site-nav.is-open{transform:none;}
html:not(.js) .site-nav__toggle{display:none;}
html:not(.js) .site-nav{position:absolute;left:0;right:0;top:var(--head-h);background:var(--paper);border-bottom:1px solid var(--line);}
.site-nav__list{padding:12px var(--gutter) 24px;}
.site-nav__item a{display:block;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:16px;}
.site-nav__item a[aria-current="page"]{color:var(--accent);}
.site-nav__cta{padding:16px var(--gutter) 32px;}
body.nav-open{overflow:hidden;}
body.nav-open .site-nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .site-nav__toggle span:nth-child(2){opacity:0;}
body.nav-open .site-nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------------------------------------------------------------- ページ見出し（白地に太い罫。濃色面を使わない） */
.page-head{background:var(--paper);padding:40px 0 30px;border-bottom:1px solid var(--line);}
.page-head .t-h1{max-width:820px;}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink3);padding:0 0 16px;}
.crumbs a{text-decoration:none;}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--ink3);}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:12.5px;color:var(--ink3);}
.meta b{color:var(--accent);font-weight:700;letter-spacing:.06em;}

/* ---------------------------------------------------------------- フッター（運営者を明記） */
.site-foot{background:var(--dark2);color:#d6ddd3;padding:44px 0 40px;font-size:13px;}
.site-foot__in{max-width:var(--wrap-pc);margin:0 auto;padding:0 var(--gutter);display:grid;gap:28px;}
.site-foot__name{font-family:var(--display);font-weight:700;font-size:17px;color:#fff;margin-bottom:8px;letter-spacing:.08em;}
.site-foot__addr{line-height:1.85;}
.site-foot__addr a{color:#fff;}
.site-foot__nav{display:grid;gap:2px;}
.site-foot__nav a{display:inline-block;padding:5px 14px 5px 0;color:#d6ddd3;text-decoration:none;}
.site-foot__h{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.14em;color:#9fb3a8;margin-bottom:6px;}
.site-foot__copy{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:11.5px;color:#8fa298;}

/* ---------------------------------------------------------------- 共通レイアウト */
.cols{display:grid;gap:28px;}
.cols--2,.cols--3{grid-template-columns:1fr;}
.ph{margin:0;overflow:hidden;}
.ph img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;}
.ph--wide img{aspect-ratio:16/9;}
.ph--tall img{aspect-ratio:3/4;}
.ph--band img{aspect-ratio:21/9;}
:root{--grade-a:#1e3a32;--grade-b:#c9cdb8;--grade-amt:.32;}
.grade{position:relative;overflow:hidden;}
.grade img{filter:saturate(.55) contrast(1.02);}
.grade::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,var(--grade-a),var(--grade-b));mix-blend-mode:soft-light;opacity:var(--grade-amt);}

/* 記事一覧（紙面のリスト） */
.arts{border-top:2px solid var(--ink);}
.art{display:grid;gap:14px;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
.art__ph img{aspect-ratio:3/2;}
.art__k{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.16em;color:var(--accent);}
.art__h{font-size:19px;line-height:1.5;margin-top:4px;}
.art__t{font-size:13.5px;line-height:1.85;color:var(--ink2);margin-top:8px;}
.art__d{font-size:12px;color:var(--ink3);margin-top:8px;}

/* 記事本文 */
.article{max-width:720px;}
.article h2{font-size:var(--fs-h2);line-height:1.45;margin-top:52px;padding-top:16px;border-top:2px solid var(--ink);}
.article h3{font-size:var(--fs-h3);margin-top:30px;}
.article p{margin-top:14px;color:var(--ink);}
.article ul,.article ol{margin-top:14px;display:grid;gap:8px;}
.article ul li{position:relative;padding-left:18px;}
.article ul li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--accent);}
.article ol{counter-reset:li;}
.article ol li{position:relative;padding-left:30px;counter-increment:li;}
.article ol li::before{content:counter(li);position:absolute;left:0;top:1px;width:22px;height:22px;font-family:var(--display);font-weight:700;font-size:12px;
  color:#fff;background:var(--base);display:flex;align-items:center;justify-content:center;clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);}
.article .ph{margin-top:28px;}
.article figcaption{font-size:12px;color:var(--ink3);margin-top:8px;}
.article a{color:var(--accent);}
.src{font-size:12.5px;color:var(--ink3);}
.src a{color:var(--ink3);}

/* 表 */
.tbl{margin-top:18px;border-top:2px solid var(--ink);font-size:14px;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 8px;border-bottom:1px solid var(--line);line-height:1.75;}
.tbl th{font-family:var(--display);font-weight:700;background:var(--soft);white-space:nowrap;}
.tbl thead th{background:var(--tint);font-size:13px;}
.tbl caption{text-align:left;caption-side:top;font-size:12.5px;color:var(--ink3);padding:0 0 8px;}
.tbl-wrap{overflow-x:auto;margin-top:18px;}
.tbl-wrap .tbl{margin-top:0;min-width:520px;}
.dl{border-top:2px solid var(--ink);}
.dl div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.dl dt{font-family:var(--display);font-weight:700;color:var(--ink3);}

/* 対応している会社（事実だけの枠） */
.vendor{margin-top:52px;padding:24px 22px;background:var(--soft);border-top:3px solid var(--base);}
.vendor__k{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.16em;color:var(--accent);}
.vendor__h{font-size:var(--fs-h3);margin-top:6px;}
.vendor__n{font-size:12.5px;color:var(--ink3);margin-top:6px;}
.vendor .dl{margin-top:16px;}
.vendor .dl div{grid-template-columns:110px 1fr;font-size:14px;}
.vendor__links{margin-top:14px;font-size:13.5px;display:grid;gap:4px;}

/* 出典 */
.sources{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);}
.sources h2{font-size:15px;border:0;margin-top:0;padding-top:0;}
.sources ol{display:grid;gap:6px;margin-top:10px;font-size:12.5px;color:var(--ink2);}
.sources li{padding-left:0;}
.sources ol li::before{display:none;}
.sources a{color:var(--ink2);overflow-wrap:anywhere;}

/* 関連記事 */
.rel{margin-top:44px;}
.rel__list{display:grid;gap:10px;margin-top:12px;}
.rel__list a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--display);font-weight:700;}

/* 運営者 */
.pub{background:var(--dark);color:#fff;}
.pub .t-kicker{color:#9fb3a8;}
.pub__t{margin-top:12px;color:#d6ddd3;}
.pub__dl{margin-top:20px;border-top:1px solid rgba(255,255,255,.2);}
.pub__dl div{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px;}
.pub__dl dt{color:#9fb3a8;font-family:var(--display);font-weight:700;}
.pub__dl a{color:#fff;}

/* 非対称の小道具 */
.offset{margin-left:0;margin-right:18cqw;}
.offset--rev{margin-left:18cqw;margin-right:0;}
.cut--diagonal{position:relative;z-index:1;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%);padding-bottom:calc(56px + 34px);}
.cut--diagonal + *{margin-top:-34px;}

/* ---------------------------------------------------------------- モーション */
@media (prefers-reduced-motion: no-preference){
  html.js .rvl{opacity:0;transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
  html.js .rvl.is-in{opacity:1;transform:none;}
  html.js .fv__k,html.js .fv__h,html.js .fv__ans,html.js .fv__btns{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;}
  html.js .fv.is-ready .fv__k{opacity:1;transform:none;transition-delay:.05s;}
  html.js .fv.is-ready .fv__h{opacity:1;transform:none;transition-delay:.16s;}
  html.js .fv.is-ready .fv__ans{opacity:1;transform:none;transition-delay:.3s;}
  html.js .fv.is-ready .fv__btns{opacity:1;transform:none;transition-delay:.42s;}
}

/* ================================================================ PC */
@media (min-width:768px){
  :root{
    --fs-hero:60px; --fs-h1:40px; --fs-h2:30px; --fs-h3:21px;
    --fs-lead:18px; --fs-body:16px; --fs-note:13.5px; --fs-kick:12.5px;
    --gutter:32px; --head-h:76px;
  }
  .sp{display:none;}
  .wrap{max-width:var(--wrap-pc);}
  .sec{padding:88px 0;}
  .sec--tight{padding:52px 0;}

  .site-head__logo{font-size:23px;}
  .site-head__logo small{display:inline;}
  .site-nav__toggle,html.js .site-nav__toggle{display:none;}
  .site-nav,html.js .site-nav,html:not(.js) .site-nav{position:static;inset:auto;transform:none;background:none;overflow:visible;
    display:flex;align-items:center;gap:8px;transition:none;border:0;}
  .site-nav__list{display:flex;gap:2px;padding:0;}
  .site-nav__item a{padding:10px 13px;border:0;font-size:14.5px;position:relative;}
  .site-nav__item a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
  .site-nav__item a:hover::after,.site-nav__item a[aria-current="page"]::after{transform:none;}
  .site-nav__cta{padding:0 0 0 10px;}
  .site-nav__cta .btn{min-height:42px;padding:0 18px;font-size:14px;}
  body.nav-open{overflow:auto;}

  .page-head{padding:64px 0 44px;}
  .site-foot{padding:64px 0 40px;}
  .site-foot__in{grid-template-columns:1.3fr 1fr 1fr;align-items:start;}
  .site-foot__copy{grid-column:1/-1;}

  .cols--2{grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .cols--3{grid-template-columns:repeat(3,1fr);gap:32px;}
  .cols--rev>*:first-child{order:2;}

  .art{grid-template-columns:280px 1fr;gap:32px;align-items:start;padding:32px 0;}
  .art__h{font-size:22px;}
  .article h2{margin-top:64px;}
  .tbl th,.tbl td{padding:14px 12px;}
  .dl div{grid-template-columns:170px 1fr;}
  .vendor{padding:30px 32px;}
  .vendor .dl div{grid-template-columns:150px 1fr;}
  .pub__dl div{grid-template-columns:120px 1fr;}
  .offset{margin-right:28%;}
  .offset--rev{margin-left:28%;}
  .cut--diagonal{padding-bottom:calc(88px + 34px);}
}

@media (min-width:1280px){
  :root{--fs-hero:68px;--fs-h1:44px;}
}