/* =====================================================================
   _shared.css｜業務効率化AIエージェント導入（いちから出版）
   下層ページ共通デザインシステム。トップ(index.html)と同じトークンを使う。
   トップはインライン<style>のまま（FVの自己完結性を保つ・二重定義しない）
   ===================================================================== */

:root{
  --cream:#F7F1E5; --sumi:#3A3630; --coral:#E8896B; --leaf:#A8C686; --leaf-deep:#7FA05C;
  --card:#FFFDF8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--sumi);
  font-family:"Zen Maru Gothic",-apple-system,sans-serif;line-height:1.9}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{word-break:auto-phrase;text-wrap:pretty}

/* ===== ヘッダー（下層用・通常ナビ） ===== */
.site-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:1rem;
  padding:1rem 1.6rem;background:rgba(247,241,229,.88);backdrop-filter:blur(8px)}
.site-nav .logo{font-weight:900;font-size:.95rem;letter-spacing:.03em;display:flex;align-items:center;
  gap:.5rem;white-space:nowrap;text-decoration:none}
.site-nav .logo .dot{width:.9em;height:.9em;border-radius:50%;background:var(--leaf);display:inline-block;
  box-shadow:0 0 0 3px rgba(168,198,134,.3)}
.site-nav ul{display:flex;gap:.2rem;list-style:none;margin-left:auto;
  background:rgba(255,253,248,.75);border-radius:999px;padding:.3rem}
.site-nav ul a{display:block;font-size:.8rem;font-weight:700;text-decoration:none;
  padding:.42rem .8rem;border-radius:999px;white-space:nowrap;transition:.25s}
.site-nav ul a:hover{background:rgba(232,137,107,.14)}
.site-nav ul a[aria-current="page"]{background:var(--coral);color:#fff}
.site-nav .cta{background:var(--sumi);color:#fff;font-weight:700;font-size:.82rem;text-decoration:none;
  padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap}

/* ===== ページヒーロー（タイトル帯・FVではない） ===== */
.page-hero{position:relative;padding:4.6rem 6vw 3.4rem;overflow:hidden}
.page-hero .eyebrow{font-family:"Space Grotesk",monospace;font-size:.75rem;letter-spacing:.28em;
  color:var(--leaf-deep);margin-bottom:.9rem;font-weight:500}
.page-hero h1{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:900;line-height:1.5;letter-spacing:.02em}
.page-hero .lede{margin-top:1rem;font-weight:700;opacity:.8;max-width:38rem}
.page-hero .hero-mascot{position:absolute;right:4vw;bottom:-1.2rem;width:clamp(96px,14vw,170px);
  opacity:.9;pointer-events:none}

/* ===== セクション ===== */
main section.block{padding:3.2rem 6vw;max-width:64rem;margin:0 auto}
.block .eyebrow{font-family:"Space Grotesk",monospace;font-size:.72rem;letter-spacing:.26em;
  color:var(--leaf-deep);font-weight:500;margin-bottom:.7rem}
.block h2{font-size:clamp(1.25rem,2.4vw,1.8rem);font-weight:900;line-height:1.6;margin-bottom:1.1rem}
.block h3{font-size:1.05rem;font-weight:900;margin:1.6rem 0 .5rem}
.block p{max-width:44rem}
.block p+p{margin-top:.9rem}
.note{font-size:.78rem;opacity:.65;font-weight:700}

/* カード（納品物・相談例など） */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.4rem 0}
.card{background:var(--card);border-radius:1.1rem;padding:1.3rem 1.4rem;
  box-shadow:0 4px 14px rgba(58,54,48,.07)}
.card .cname{font-weight:900;color:var(--leaf-deep);font-size:.95rem;margin-bottom:.4rem}
.card p{font-size:.88rem}

/* 流れ（ステップ） */
.steps{list-style:none;counter-reset:step;margin:1.4rem 0;display:grid;gap:.8rem}
.steps li{background:var(--card);border-radius:1.1rem;padding:1.05rem 1.2rem 1.05rem 3.4rem;position:relative;
  box-shadow:0 4px 14px rgba(58,54,48,.07);font-weight:700;font-size:.92rem}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:1.05rem;top:50%;
  transform:translateY(-50%);width:1.7rem;height:1.7rem;border-radius:50%;background:var(--leaf);
  color:#fff;font-family:"Space Grotesk",monospace;font-weight:700;display:flex;align-items:center;
  justify-content:center;font-size:.85rem}
.steps li small{display:block;font-weight:500;font-size:.8rem;opacity:.75;margin-top:.15rem}

/* 料金（トップのprice-cardと同系） */
.price-strip{display:flex;gap:.8rem;margin:1.4rem 0;flex-wrap:wrap}
.price-card{background:var(--card);border-radius:1rem;padding:1rem 1.3rem;
  box-shadow:0 4px 14px rgba(58,54,48,.08);min-width:11rem}
.price-card .pname{font-size:.75rem;font-weight:700;color:var(--leaf-deep)}
.price-card .was{font-size:.72rem;opacity:.55;text-decoration:line-through;margin-top:.2rem}
.price-card .now{font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:900;color:var(--coral)}
.price-card .now small{font-size:.68rem;font-weight:700;color:var(--sumi);opacity:.7}
.tax-note{width:100%;font-size:.66rem;opacity:.6;font-weight:700}

/* 実績・数字の抜き */
.fact{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.fact .big{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:900;color:var(--leaf-deep);
  font-family:"Space Grotesk","Zen Maru Gothic",monospace;line-height:1}
.fact .unit{font-weight:900}

/* FAQ（details/summary＝JS不要・AIが読める形） */
.faq-list{display:grid;gap:.7rem;margin:1.4rem 0}
.faq-list details{background:var(--card);border-radius:1rem;box-shadow:0 4px 14px rgba(58,54,48,.07);
  overflow:hidden}
.faq-list summary{cursor:pointer;list-style:none;font-weight:900;font-size:.95rem;
  padding:1.05rem 2.8rem 1.05rem 1.2rem;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"Q";color:var(--coral);font-family:"Space Grotesk",monospace;
  margin-right:.6rem}
.faq-list summary::after{content:"＋";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  color:var(--leaf-deep);font-weight:700;transition:.2s}
.faq-list details[open] summary::after{content:"−"}
.faq-list .a{padding:0 1.2rem 1.1rem;font-size:.9rem}
.faq-list .a::before{content:"A．";color:var(--leaf-deep);font-weight:900}

/* 会社情報表 */
.info-table{width:100%;border-collapse:collapse;margin:1.4rem 0;background:var(--card);
  border-radius:1.1rem;overflow:hidden;box-shadow:0 4px 14px rgba(58,54,48,.07)}
.info-table th,.info-table td{text-align:left;padding:.95rem 1.2rem;font-size:.9rem;
  border-bottom:1px solid rgba(58,54,48,.08);vertical-align:top}
.info-table th{width:9.5rem;font-weight:900;color:var(--leaf-deep);white-space:nowrap}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:0}

/* CTA */
.btn{display:inline-block;background:var(--coral);color:#fff;text-decoration:none;font-weight:700;
  padding:.9rem 2rem;border-radius:999px;font-size:.95rem;box-shadow:0 6px 20px rgba(232,137,107,.35)}
.btn small{display:block;font-size:.68rem;font-weight:500;opacity:.85;margin-top:.15rem}
.cta-band{background:linear-gradient(180deg,rgba(168,198,134,.16),rgba(232,137,107,.12));
  border-radius:1.4rem;padding:2.4rem 2rem;text-align:center;margin:2.4rem auto}
.cta-band h2{margin-bottom:.4rem}
.cta-band p{margin:0 auto .5rem}

/* ===== フッター（全ページ共通・NAP可視表示） ===== */
.site-footer{background:#F1E9D8;padding:2.6rem 6vw 2rem;margin-top:3rem}
.site-footer .cols{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:space-between;
  max-width:64rem;margin:0 auto}
.site-footer .brand{font-weight:900;display:flex;align-items:center;gap:.5rem}
.site-footer .brand .dot{width:.9em;height:.9em;border-radius:50%;background:var(--leaf);display:inline-block}
.site-footer .nap{font-size:.8rem;font-weight:700;opacity:.75;margin-top:.5rem}
.site-footer nav ul{list-style:none;display:grid;grid-template-columns:repeat(2,auto);gap:.35rem 1.6rem}
.site-footer nav a{font-size:.82rem;font-weight:700;text-decoration:none;opacity:.85}
.site-footer nav a:hover{opacity:1;color:var(--coral)}
.site-footer .copyright{max-width:64rem;margin:1.8rem auto 0;font-size:.72rem;opacity:.55;font-weight:700}

/* ===== モバイル ===== */
@media (max-width:768px){
  .site-nav{flex-wrap:wrap;gap:.4rem;padding:.8rem .9rem}
  .site-nav .logo{font-size:.7rem;letter-spacing:0}
  .site-nav .cta{margin-left:auto;font-size:.7rem;padding:.45rem .75rem}
  .site-nav ul{order:3;width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none}
  .site-nav ul::-webkit-scrollbar{display:none}
  .page-hero{padding:3rem 6vw 2.4rem}
  .page-hero .hero-mascot{display:none}
  main section.block{padding:2.4rem 6vw}
  .site-footer .cols{gap:1.4rem}
}

/* フォーム安全弁（将来フォームを手貼りしてもモバイルではみ出さない保険） */
input,textarea,select{max-width:100%;box-sizing:border-box}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{width:100%;font-size:16px}