@charset "UTF-8";
/* =========================================================
   AUG:BASE — product LP (front page, v1.3)
   フロントページ（AUG:Pub LP）でのみ読み込む
   （functions.php / augbase_is_product_lp が front page も対象にしている）

   注意：common.css と一部トークン・レイアウト規則が重複している
   （:root の値、.wrap、.btn 等）。値は同一なので表示上の問題はないが、
   軽量化する場合はこのファイルから重複分を削ってよい。
   ========================================================= */


:root{
  --ink:#1A1D21;
  --indigo:#21456B;
  --indigo-lt:#3D6A96;
  --paper:#FAF9F7;
  --band:#EFEDE8;
  --card:#FFFFFF;
  --muted:#6B6F76;
  --rule:#DCD8D1;
  --note:#8A6D3B;
  --note-bg:#FBF6EA;
  --jp: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pad: 96px;
  --gut: 32px;
  --wrap: 1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--jp);font-size:16px;line-height:1.85;
  letter-spacing:.02em;color:var(--ink);background:var(--paper);
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto}
.wrap--narrow{max-width:860px}
.sec{padding:var(--pad) var(--gut)}
.sec--band{background:var(--band)}
.sec--ink{background:var(--ink);color:#F3F1ED}
.ta-c{text-align:center}
.mt{margin-top:28px}
.mb{margin-bottom:34px}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--indigo);text-transform:uppercase;margin-bottom:22px;
}
.sec--ink .eyebrow{color:#8FB0D0}
h1{font-size:clamp(30px,4.6vw,52px);line-height:1.44;font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(23px,3vw,34px);line-height:1.5;font-weight:700;margin-bottom:26px}
h3{font-size:17.5px;line-height:1.6;font-weight:700;margin-bottom:9px}
.lead{font-size:clamp(15px,1.5vw,17.5px);color:#3E434A;line-height:1.95}
.sec--ink .lead{color:#C3C8CE}
.lead + .lead{margin-top:1.1em}
.sm{font-size:13.5px;color:var(--muted);line-height:1.8}

/* ---------- buttons ---------- */
.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.btn{
  display:inline-block;padding:16px 30px;border-radius:3px;font-size:15px;
  font-weight:700;text-decoration:none;letter-spacing:.03em;text-align:center;
  border:1.5px solid transparent;transition:opacity .15s;
}
.btn:hover{opacity:.85}
.btn--pri{background:var(--indigo);color:#fff}
.btn--sec{background:transparent;color:var(--ink);border-color:#C6C1B8}
.btn--sm{padding:10px 18px;font-size:13px}
.btn--block{display:block;width:100%}
.sec--ink .btn--pri{background:#fff;color:var(--ink)}
.sec--ink .btn--sec{color:#F3F1ED;border-color:#4A4F57}

/* ---------- header ---------- */
.hdr{
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:14px var(--gut);position:sticky;top:0;z-index:40;
}
.hdr__in{max-width:var(--wrap);margin-inline:auto;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.hdr__brand{display:flex;flex-direction:column;line-height:1.3}
.hdr__parent{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.hdr__product{font-size:19px;font-weight:700;letter-spacing:.01em}
.hdr__nav{display:flex;gap:22px;align-items:center;font-size:13.5px}
.hdr__nav a{color:#4A4F57;text-decoration:none}
.hdr__nav a:hover{color:var(--ink)}

/* ---------- 00 サイト冒頭：細帯 ---------- */
.band{
  background:var(--ink);color:#C3C8CE;
  padding:11px var(--gut);font-size:13px;letter-spacing:.03em;
}
.band__in{max-width:var(--wrap);margin-inline:auto}
.band b{color:#F3F1ED;font-weight:700}

/* ---------- credo（最終CTA直前） ---------- */
.credo{text-align:center;padding-block:88px}
.credo__h{
  font-size:clamp(24px,3.4vw,38px);line-height:1.65;font-weight:700;
  letter-spacing:-.005em;
}
.credo__h em{font-style:normal;color:var(--indigo)}
.credo__sub{font-size:14.5px;color:var(--muted);margin-top:24px}

/* ---------- FV ---------- */
.fv{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.fv__h{margin-bottom:26px}
.fv__note{margin-top:12px}
.fv__ast{margin-top:24px;padding-top:14px;border-top:1px solid var(--rule);font-size:12.5px}
.ast{font-size:.42em;vertical-align:super;color:var(--muted);font-weight:400;letter-spacing:0}
.lp-fv{padding-block:100px}

/* ---------- placeholder ---------- */
.ph{
  border:1px dashed #BDB8AE;background:#F4F2EE;color:#8C8880;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:28px;border-radius:2px;
  font-size:13px;line-height:1.75;min-height:300px;
}
.ph span{font-size:12px;opacity:.85;margin-top:4px}
.ph--hero{min-height:400px}
.ph--wide{min-height:280px;margin-top:26px}

/* ---------- grid / card ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:26px 24px}
.sec--band .card{border-color:#DFDAD2}

/* ---------- 課題 ---------- */
.tasks{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule);margin:34px 0 30px}
.tasks li{display:flex;gap:14px;align-items:baseline;
  padding:16px 4px 16px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.tasks li span{font-family:var(--mono);font-size:11px;color:#A8A399;flex:none}
.bigline{font-size:clamp(19px,2.4vw,27px);font-weight:700;line-height:1.6;
  border-left:4px solid var(--indigo);padding-left:20px}
.bigline em{font-style:normal;color:var(--indigo)}

/* ---------- フロー ---------- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:30px}
.flow__step{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:22px 14px 20px;position:relative}
.flow__step .n{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;color:#A8A399;margin-bottom:8px}
.flow__step h3{font-size:15px;margin-bottom:5px}
.flow__step p{font-size:12.5px;color:var(--muted);line-height:1.7}
.flow__step[data-you]::after,
.flow__step[data-by]::after{
  position:absolute;top:-9px;right:10px;font-size:10px;
  padding:2px 8px;border-radius:2px;letter-spacing:.06em;white-space:nowrap;
}
.flow__step[data-you]::after{content:attr(data-you);background:var(--indigo);color:#fff}
.flow__step[data-by]::after{content:attr(data-by);background:#8C8880;color:#fff}

/* ---------- before / after ---------- */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-bottom:44px}
.ba__col{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:28px 26px}
.ba__col--new{border:2px solid var(--indigo)}
.ba__h{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  padding:3px 10px;border-radius:2px;margin-bottom:16px;background:#E3DFD8;color:#5A5750}
.ba__col--new .ba__h{background:var(--indigo);color:#fff}
.ba__big{font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ba__col--new .ba__big{color:var(--indigo)}
.ba__unit{font-size:14px;color:var(--muted);margin-bottom:18px}
.ba__col ul{border-top:1px solid var(--rule);padding-top:14px}
.ba__col li{font-size:14px;padding:6px 0 6px 20px;position:relative;line-height:1.7}
.ba__col li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:2px;background:#C6C1B8}
.ba__col--new li::before{background:var(--indigo)}
.ba__arrow{display:flex;align-items:center;color:#B9B4AC;font-size:26px}

/* ---------- 1か月カレンダー ---------- */
.cal{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:28px 26px 22px}
.cal__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#A8A399;margin-bottom:16px}
.cal__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;min-width:600px}
.cal__dow{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);
  text-align:center;padding-bottom:2px;
}
.cal__dow--sun{color:#B9847C}
.cal__day{
  border:1px solid var(--rule);border-radius:2px;background:var(--paper);
  min-height:74px;padding:7px 8px;display:flex;flex-direction:column;gap:5px;
}
.cal__day b{font-family:var(--mono);font-size:11px;color:#A8A399;font-weight:400}
.cal__day--empty{background:#F7F5F2}
.cal__day--setup{
  background:var(--indigo);border-color:var(--indigo);color:#fff;
  justify-content:flex-start;
}
.cal__day--setup b{color:#B7CBDD}
.cal__day--setup span{font-size:12px;font-weight:700;line-height:1.45}
.cal__dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:auto}
.chip{
  display:inline-block;font-size:10px;line-height:1.5;letter-spacing:.02em;
  padding:2px 7px;border-radius:2px;color:#fff;white-space:nowrap;
}
.chip--sns{background:var(--indigo-lt)}
.chip--art{background:var(--ink)}
.chip--goo{background:#9C8B6E}
.cal__note{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--muted);line-height:1.8}
.cal__note b{color:var(--ink)}
.volume{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:26px}
.volume--3{grid-template-columns:repeat(3,1fr)}
.volume div{border-top:2px solid var(--ink);padding-top:12px}
.volume b{display:block;font-size:13px;margin-bottom:3px;line-height:1.5}
.volume span{font-size:12.5px;color:var(--muted)}

/* ---------- 使い方（カレンダー直下） ---------- */
.howto{margin-top:44px;padding-top:38px;border-top:1px solid var(--rule)}
.howto__h{font-size:clamp(20px,2.4vw,27px);font-weight:700;margin-bottom:8px}
.howto__sub{font-size:14.5px;color:var(--muted);margin-bottom:26px}
.who{
  display:inline-block;margin-left:10px;font-size:10px;font-weight:700;
  letter-spacing:.06em;padding:2px 8px;border-radius:2px;vertical-align:middle;
}
.who--you{background:var(--indigo);color:#fff}
.who--pub{background:#8C8880;color:#fff}
.howto__list{display:grid;gap:14px}
.howto__list li{
  display:flex;gap:22px;align-items:flex-start;
  background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:24px 26px;
}
.howto__list b{
  font-family:var(--mono);font-size:26px;font-weight:400;line-height:1.1;
  color:var(--indigo);flex:none;min-width:44px;
}
.howto__list h3{font-size:18px;margin-bottom:5px}
.howto__list p{font-size:14px;color:var(--muted);line-height:1.85}

/* ---------- 投稿できるもの ---------- */
.kinds{margin-top:44px;padding-top:38px;border-top:1px solid var(--rule)}
.kinds__h{font-size:clamp(19px,2.2vw,24px);font-weight:700;margin-bottom:22px}
.kinds__list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kinds__list li{
  background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:20px 22px;display:flex;gap:14px;align-items:flex-start;
}
.kinds__ic{
  width:28px;height:28px;flex:none;border-radius:3px;
  border:1px dashed #BDB8AE;background:#F4F2EE;
}
.kinds__list b{display:block;font-size:15.5px;margin-bottom:4px}
.kinds__list span{font-size:13px;color:var(--muted);line-height:1.75}

/* ---------- 質問 ---------- */
.qs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.q{display:flex;gap:13px;align-items:baseline;background:var(--card);
  border:1px solid var(--rule);border-radius:3px;padding:18px 20px;font-size:15.5px}
.q span{font-family:var(--mono);font-size:11px;color:var(--indigo);flex:none}

/* ---------- 媒体カード ---------- */
.split .card{display:flex;flex-direction:column;gap:8px}
.split .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--indigo)}
.split p{font-size:13.5px;color:var(--muted);line-height:1.8}

/* ---------- 比較表 ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:660px;background:var(--card);
  border:1px solid var(--rule);border-radius:3px;border-collapse:collapse}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);font-size:14.5px}
.cmp thead th{background:#F5F3EF;font-size:13px;letter-spacing:.03em}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp th[scope=row]{font-weight:600;color:#3E434A;width:26%}
.cmp .col-us{background:#F5F8FB;font-weight:700;color:var(--indigo);width:24%}
.cmp thead .col-us{background:var(--indigo);color:#fff}

/* ---------- 対応媒体 ---------- */
.plat{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.plat li{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:24px 12px;text-align:center}
.plat b{display:block;font-size:14px;margin-bottom:6px}
.plat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.plat .on{color:var(--indigo);font-weight:700}

/* ---------- 料金 ---------- */
.price{background:var(--card);border:2px solid var(--indigo);border-radius:3px;
  padding:44px 40px;text-align:center;max-width:520px;margin-inline:auto}
.price__amt{font-size:clamp(40px,6vw,60px);font-weight:700;line-height:1.2;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price__amt small{font-size:20px;font-weight:600}
.price__per{font-size:14px;color:var(--muted);margin-bottom:22px}
.price ul{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule);text-align:left}
.price li{position:relative;padding:7px 0 7px 22px;font-size:14.5px}
.price li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;background:var(--indigo)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{position:relative;list-style:none;cursor:pointer;
  padding:22px 44px 22px 0;font-size:16.5px;font-weight:700;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:19px;
  font-size:22px;font-weight:400;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq__a{padding-bottom:24px}
.faq__a p{font-size:14.5px;color:#3E434A;line-height:1.95}

/* ---------- 最終CTA ---------- */
.lp-cta{text-align:center;padding-block:100px}
.lp-cta h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:18px}
.lp-cta .btns{justify-content:center}

/* ---------- 読みもの ---------- */
.posts{border-top:1px solid var(--rule)}
.posts li{border-bottom:1px solid var(--rule);padding:20px 0}
.posts .cat{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--indigo)}
.posts .ttl{font-size:17px;font-weight:700;line-height:1.65;margin-top:4px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--rule);background:var(--paper);font-size:13.5px}
.ftr__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.ftr > .ftr__in{padding-block:44px;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.ftr__name{font-weight:700;font-size:16px}
.ftr__by{color:var(--muted);font-size:12.5px}
.ftr__nav{display:flex;gap:26px;flex-wrap:wrap}
.ftr a{color:#4A4F57;text-decoration:none}
.ftr__copy{border-top:1px solid var(--rule);color:var(--muted);font-size:12px}
.ftr__copy .ftr__in{padding-block:18px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--pad:64px;--gut:24px}
  .ba{grid-template-columns:1fr;gap:14px}
  .volume--3{grid-template-columns:1fr}
  .howto__list li{gap:14px;padding:20px 18px}
  .howto__list b{font-size:20px;min-width:32px}
  .kinds__list{grid-template-columns:repeat(2,1fr)}
  .ba__arrow{justify-content:center;transform:rotate(90deg)}
  .cal__day{min-height:62px}
  .fv{grid-template-columns:1fr;gap:36px}
  .lp-fv{padding-block:72px}
  .ph--hero{min-height:260px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .volume,.plat,.g5{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .qs,.tasks{grid-template-columns:1fr}
  .month__grid{height:100px}
  .hdr__nav a:not(.btn){display:none}
}
@media (max-width:520px){
  :root{--pad:52px;--gut:20px}
  .cal{padding:20px 14px 16px}
  .kinds__list{grid-template-columns:1fr}
  .cal__day{min-height:52px;padding:5px 6px}
  .cal__day--setup span{font-size:11.5px}
  .flow,.volume,.plat,.g5{grid-template-columns:1fr}
  .cal__note{font-size:12px}
  .chip{font-size:9.5px;padding:2px 5px}
  .price{padding:32px 22px}
  .lp-cta{padding-block:72px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}