@font-face{font-family:"LPDisplay";src:url("fonts/biz-udpgothic.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
/* ============================================================
   SITE.CSS — miraivalue-guide.com（株式会社ミライバリュー｜Instagram広告の運用代行の案内サイト）
   コンセプト：見積書のように数字で読めるサイト。答えを先に、数字を大きく、条件を表で。
   SP（〜767px）を先に書き、PC（768px〜）で上書きする。
   border-radius 不使用（clip-path）・色相を変えるグラデ禁止・絵文字禁止。
   ============================================================ */

:root{
  /* --- 配色（brand.json のオレンジ #f0732a を軸に明度だけ変えた段。差し色は濃いオレンジ1色） --- */
  --ink:#2d2c2c;
  --ink2:#57534c;
  --ink3:#8d877d;
  --paper:#ffffff;
  --soft:#fff4ea;       /* 最も淡い面（brand.json の light） */
  --tint:#fbe0cb;       /* 淡い面 */
  --base:#f0732a;       /* ブランドのオレンジ（中間色） */
  --dark:#4a2a16;       /* 暗い面 */
  --dark2:#2a170b;      /* さらに暗い面（フッター） */
  --accent:#d85f1a;     /* 差し色は1色だけ（白抜きでも読める濃いオレンジ） */
  --line:#eedbcf;

  /* --- 書体（fonts.py が --display の先頭に "LPDisplay" を差し込む） --- */
  --display:"LPDisplay","BIZ UDPGothic","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;

  /* --- 文字スケール（SP） --- */
  --fs-hero:40px;  --fs-h1:32px;  --fs-h2:26px;  --fs-h3:18.5px;
  --fs-lead:16.5px; --fs-body:15px; --fs-note:13px; --fs-kick:11.5px;
  --lh-display:1.14; --ls-display:.01em; --ls-kicker:.22em;

  /* --- 幅 --- */
  --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.85;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:60px 0;}
.sec--tight{padding:40px 0;}
.narrow{max-width:680px;}

/* ---------------------------------------------------------------- 文字ユーティリティ */
.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.24;}
.t-h2{font-size:var(--fs-h2);line-height:1.3;}
.t-h3{font-size:var(--fs-h3);line-height:1.45;}
.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.9;color:var(--ink2);}
.t-body{font-size:var(--fs-body);line-height:1.85;color:var(--ink2);}
.t-note{font-size:var(--fs-note);line-height:1.7;color:var(--ink3);}
.nw{white-space:nowrap;}
.sp{display:inline;}

/* 「答え」の段落：h1 直後に置く結論。左に太い罫で見分ける */
.ans{margin-top:20px;padding:4px 0 4px 18px;border-left:4px solid var(--base);display:grid;gap:10px;}
.ans p{font-size:var(--fs-lead);line-height:1.85;color:var(--ink);}
.ans b{color:var(--accent);}

/* 本文中の見出し群 */
.sec__head{margin-bottom:26px;}
.sec__head .t-h2+.t-body{margin-top:12px;}

/* ---------------------------------------------------------------- ボタン（角丸なし・単色＋明度差） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em;text-decoration:none;
  color:#fff;background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 82%,#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:center;gap:10px;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--ink);}
.site-head__logo img{height:26px;width:auto;}
.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(--soft);padding:40px 0 34px;border-bottom:4px solid var(--base);}
.page-head .t-kicker{color:var(--accent);}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink3);padding:14px 0 0;}
.crumbs a{text-decoration:none;}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--ink3);}

/* ---------------------------------------------------------------- フッター */
.site-foot{background:var(--dark2);color:#e9d9cd;padding:44px 0 92px;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:16px;color:#fff;margin-bottom:8px;}
.site-foot__addr{line-height:1.8;}
.site-foot__addr a{color:#fff;}
.site-foot__nav a{display:inline-block;padding:6px 14px 6px 0;color:#e9d9cd;text-decoration:none;}
.site-foot__copy{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:11.5px;color:#b59d8d;}

/* 固定CTA（SPのみ） */
.fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px var(--gutter);
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-top:1px solid var(--line);}
.fixed-cta .btn{flex:1;min-height:48px;padding:0 10px;font-size:14px;}

/* ---------------------------------------------------------------- 共通レイアウト部品 */
.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:4/3;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:#4a2a16;--grade-b:#f0a06a;--grade-amt:.22;}
.grade{position:relative;overflow:hidden;}
.grade img{filter:saturate(.9) contrast(1.04);}
.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);}

/* 表（料金・条件・会社概要） */
.tbl{border-top:2px solid var(--ink);font-size:14.5px;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px 8px;border-bottom:1px solid var(--line);line-height:1.7;}
.tbl th{font-family:var(--display);font-weight:700;width:34%;color:var(--ink);background:var(--soft);}
.tbl td b{color:var(--accent);font-family:var(--display);}
.tbl--3 th{width:30%;}
.tbl caption{text-align:left;font-size:var(--fs-note);color:var(--ink3);padding:0 0 8px;caption-side:top;}
.dl{border-top:2px solid var(--ink);}
.dl div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.dl dt{font-family:var(--display);font-weight:700;color:var(--ink3);}

/* 大きな数字（料金の主役） */
.num{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.01em;}
.num__v{font-size:64px;}
.num__u{font-size:22px;margin-left:4px;}
.num__l{display:block;font-size:13px;color:var(--ink2);margin-top:8px;font-weight:700;letter-spacing:.06em;}

/* 番号付きステップ（縦のタイムライン。PC で横に並べる版は各ページで） */
.steps{display:grid;gap:0;margin-top:26px;}
.step{position:relative;padding:0 0 24px 56px;}
.step::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--tint);}
.step:last-child::before{display:none;}
.step__n{position:absolute;left:0;top:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:15px;color:#fff;background:var(--dark);
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);}
.step__h{font-size:17px;line-height:1.45;padding-top:7px;}
.step__t{margin-top:6px;font-size:14px;line-height:1.8;color:var(--ink2);}

/* チェック行（できること） */
.checks{display:grid;gap:0;border-top:1px solid var(--line);}
.checks li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7;}
.checks li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:7px;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg);}
.checks--dark li{border-color:rgba(255,255,255,.16);color:#fff;}
.checks--dark li::before{border-color:#f6b48a;}

/* カード（入口カード） */
.card{display:block;background:var(--paper);text-decoration:none;color:inherit;padding:22px 20px 24px;
  border-top:4px solid var(--base);box-shadow:0 6px 18px rgba(74,42,22,.08);}
.card__k{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.14em;color:var(--accent);}
.card__h{font-size:18px;line-height:1.45;margin-top:4px;}
.card__t{font-size:13.5px;line-height:1.8;color:var(--ink2);margin-top:8px;}
.card__more{display:inline-block;margin-top:12px;font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--accent);}

/* 写真帯 */
.photoband{position:relative;overflow:hidden;}
.photoband img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.photoband__cap{position:absolute;left:0;bottom:0;background:var(--paper);padding:12px 26px 10px var(--gutter);
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1.5;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%);}

/* FAQ（details/summary。JS 無し） */
.faq__list{margin-top:20px;border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{display:flex;gap:11px;align-items:flex-start;position:relative;cursor:pointer;
  padding:18px 36px 18px 2px;list-style:none;-webkit-tap-highlight-color:transparent;
  font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.65;color:var(--ink);}
.faq__q::-webkit-details-marker{display:none;}
.faq__ico{position:absolute;right:5px;top:25px;width:15px;height:15px;}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--accent);}
.faq__ico::before{left:0;top:6.5px;width:15px;height:2px;}
.faq__ico::after{left:6.5px;top:0;width:2px;height:15px;transition:opacity .18s ease;}
.faq__item[open] .faq__ico::after{opacity:0;}
.faq__a{display:flex;gap:11px;font-size:14px;line-height:1.9;color:var(--ink2);padding:0 2px 20px;}
.faq__m{flex:0 0 auto;width:21px;height:21px;font-family:var(--display);font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;color:#fff;margin-top:2px;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);}
.faq__q .faq__m{background:var(--dark);}
.faq__a .faq__m{background:var(--base);}
.faq__t{flex:1 1 auto;min-width:0;}
.faq__t a{color:var(--accent);}
@media (prefers-reduced-motion: no-preference){
  .faq__item[open] .faq__a{animation:faqin .26s ease both;}
  @keyframes faqin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
}

/* CTA 帯（濃色） */
.cta{background:var(--dark);color:#fff;}
.cta .t-kicker{color:#f6b48a;}
.cta__h{font-size:var(--fs-h2);line-height:1.3;}
.cta__t{margin-top:12px;color:#e9d9cd;font-size:15px;line-height:1.85;}
.cta__contacts{margin-top:22px;display:grid;gap:8px;font-family:var(--display);font-weight:700;font-size:17px;}
.cta__contacts a{color:#fff;text-decoration:none;}
.cta__contacts small{display:block;font-size:12px;color:#d9bfae;font-weight:400;letter-spacing:.06em;}
.cta__btns{display:grid;gap:10px;margin-top:24px;}

/* 形状のある区切り（1〜2箇所まで） */
.cut--diagonal{position:relative;z-index:1;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%);padding-bottom:calc(60px + 34px);}
.cut--diagonal + *{margin-top:-34px;}

/* 非対称の小道具 */
.offset{margin-left:0;margin-right:18cqw;}
.offset--rev{margin-left:18cqw;margin-right:0;}
.overlap{position:relative;margin-top:-42px;z-index:3;}

/* ---------------------------------------------------------------- モーション */
@media (prefers-reduced-motion: no-preference){
  html.js .rvl{opacity:0;transform:translateY(20px);
    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（768px〜） */
@media (min-width:768px){
  :root{
    --fs-hero:64px; --fs-h1:46px; --fs-h2:34px; --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:92px 0;}
  .sec--tight{padding:56px 0;}

  .site-head__logo img{height:32px;}
  .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 11px;border:0;font-size:14px;position:relative;}
  .site-nav__item a::after{content:"";position:absolute;left:11px;right:11px;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:44px;padding:0 20px;font-size:14px;}
  body.nav-open{overflow:auto;}

  .page-head{padding:72px 0 56px;}
  .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;}
  .fixed-cta{display:none;}

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

  .ans{margin-top:26px;padding-left:24px;}
  .tbl th,.tbl td{padding:16px 14px;}
  .tbl th{width:26%;}
  .dl div{grid-template-columns:180px 1fr;padding:16px 0;}
  .num__v{font-size:96px;}
  .num__u{font-size:30px;}
  .cta__btns{grid-template-columns:auto auto;justify-content:start;gap:14px;}
  .cta__contacts{grid-template-columns:auto auto;gap:40px;}
  .photoband img{aspect-ratio:21/8;}
  .cut--diagonal{padding-bottom:calc(92px + 34px);}
  .offset{margin-right:30%;}
  .offset--rev{margin-left:30%;}
}

/* ================================================================ 横幅の広い PC（1280px〜） */
@media (min-width:1280px){
  :root{--fs-hero:72px;--fs-h1:52px;}
}