/* =========================
   Global / Base
========================= */
:root{
  --clr-primary:#1a6aa0;
  --clr-secondary:#4f9fd0;
  --comic-yellow:#ffeb00;
  --clr-line:#00c300;
  --clr-line-dark:#00a000;
  --font-sans:'Noto Sans JP',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);font-size:1.05rem;color:#111;background:#fff;line-height:1.6}
.container{width:90%;max-width:1200px;margin:0 auto;padding:0 24px}
a{color:inherit}

/* =========================
   Header
========================= */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:#fff;box-shadow:0 4px 8px rgba(0,0,0,.1)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
.logo{width:160px}
.site-nav ul{display:flex;gap:20px;list-style:none}
.site-nav a{color:#111;font-weight:800;text-decoration:none;transition:transform .15s}
.site-nav a:hover{transform:translateY(-2px)}
.nav-toggle{display:none;background:transparent;border:none;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:3px;background:#111;margin:4px 0;border-radius:2px}

/* =========================
   Hero
========================= */
.hero{position:relative;overflow:hidden;text-align:center}
.hero-pop{background:var(--comic-yellow);min-height:88vh;display:flex;align-items:center;padding:6vh 0}
.hero-pop .pop-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:10px 10px;opacity:.8;pointer-events:none}
.pop-spark{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(30px);opacity:.35;pointer-events:none}
.pop-spark.a{background:#ff3b3b;top:-60px;left:-60px}
.pop-spark.b{background:#4f7fae;bottom:-70px;right:6%}
.pop-spark.c{background:#8ee3ef;top:18%;right:-80px}
.hero-inner{position:relative;z-index:2;max-width:980px;margin:0 auto}

.hero-badge{display:inline-block;background:#111;color:#fff;padding:16px 28px;border-radius:999px;font-weight:900;margin-bottom:26px;font-size:1.55rem;border:6px solid #000;box-shadow:0 12px 0 #000,0 24px 36px rgba(0,0,0,.3)}
.hero-badge span{color:#ffeb00;margin-left:.5em;font-size:1.25em}

.hero-title.pop{font-size:4.4rem;line-height:1.1;font-weight:900;color:#111;text-shadow:0 4px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;align-items:center;margin-inline:auto}
.hero-title.pop .burst{display:inline-block;background:#fff;padding:14px 26px;border-radius:14px;box-shadow:0 10px 0 #111,0 24px 36px rgba(0,0,0,.25);transform:rotate(-0.5deg)}
.hero-title small{display:block;margin-top:34px;font-size:1.55rem}

/* 「AI×公認会計士」強調 */
.hero-title .highlight{
  display:inline-block;margin:0 .35em;padding:0 .06em;color:#e60012;font-weight:900;font-size:1.35em;letter-spacing:.02em;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
     0   2px 0 #fff, 2px  0   0 #fff, -2px 0   0 #fff, 0  -2px 0 #fff,
    -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000,
     0    4px 0 #000, 4px  0   0 #000, -4px 0  0 #000, 0 -4px 0 #000;
  border-radius:.06em;
}

.pop-sub{color:#111;margin:24px 0 34px;font-weight:800;font-size:1.2rem}
.underline{box-shadow:inset 0 -12px 0 rgba(255,255,255,.8)}

/* ==== オファーカード（CTAの下） ==== */
.offer-card{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:18px;
  max-width:960px;
  margin:120px auto 0;
  text-align:left;
}
.offer-badge{
  position:absolute;
  top:-28px; left:-18px;
  z-index:2;
  background:#e60012;color:#fff;border:6px solid #fff;
  box-shadow:0 10px 0 #000,0 16px 24px rgba(0,0,0,.25);
  border-radius:999px;font-weight:900;letter-spacing:.06em;
  padding:.35em 1.2em;transform:rotate(-6deg)
}
.offer-copy{
  background:#fff;border:8px solid #000;border-radius:16px;box-shadow:0 12px 0 #000,0 22px 34px rgba(0,0,0,.25);
  padding:36px 22px 20px 22px;
  flex:1
}
.offer-head{font-weight:900;letter-spacing:.02em}
.offer-head span{background:#ffeb00;padding:0 .3em;border-radius:.4em;box-shadow:0 4px 0 #000;display:inline-block;margin-left:.25em}
.offer-body{font-size:1.02rem;margin-top:8px;line-height:1.7}
.offer-highlight{font-weight:900}

/* 「業界/事業分析レポート」を強調 */
.offer-em{
  color:#e60012;
  font-weight:900;
  letter-spacing:.01em;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  text-decoration: underline;
  text-decoration-thickness: .16em;
  text-underline-offset: .06em;
}

.offer-actions{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}

/* 右側アイコン列 */
.offer-illust{
  width: 220px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 0 4px;
}
.offer-illust .offer-report{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 0 #000) drop-shadow(0 18px 28px rgba(0,0,0,.15));
}

/* CTA Row */
.cta-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:stretch;margin-top:6px}
.cta-row--center{justify-content:center}
.cta-box{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:280px}
.cta-label{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:8px 16px;border:6px solid #000;border-radius:14px;box-shadow:0 6px 0 #000;font-weight:900;letter-spacing:.5px;color:#111}
.cta-emoji{font-size:1.2em;line-height:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;border:none;cursor:pointer;text-decoration:none}
.btn-line{background:var(--clr-line);color:#fff;border-radius:32px;padding:22px 34px;position:relative;display:inline-flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.5px}
.btn-line-fat{border:10px solid #000;box-shadow:0 14px 0 #000,0 22px 32px rgba(0,0,0,.55);border-radius:32px;font-size:2rem;min-width:420px}
.btn-line-sm{border:8px solid #000;box-shadow:0 8px 0 #000,0 14px 22px rgba(0,0,0,.35);padding:12px 18px;border-radius:999px;font-size:1.05rem;min-width:auto}
.btn-line-text{color:#fff;text-shadow:0 2px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 -2px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000}
.btn-line:hover{background:#07a400;transform:translateY(-3px)}
.btn-line:active{transform:translateY(2px);box-shadow:0 10px 0 #000,0 16px 26px rgba(0,0,0,.45)}

.attn{animation:pulse 2.2s ease-in-out 1.2s infinite}
@keyframes pulse{
  0%,100%{transform:translateY(0); box-shadow:0 14px 0 #000, 0 22px 32px rgba(0,0,0,.55)}
  50%{transform:translateY(-2px); box-shadow:0 18px 0 #000, 0 28px 38px rgba(0,0,0,.55)}
}

.btn-form{background:#1a6aa0;color:#fff;border-radius:32px;padding:22px 34px;font-weight:900;border:10px solid #000;box-shadow:0 14px 0 #000,0 22px 32px rgba(0,0,0,.55);letter-spacing:.5px;font-size:2rem;min-width:420px;display:inline-flex;align-items:center;justify-content:center}
.btn-form:hover{transform:translateY(-3px)}
.btn-form:active{transform:translateY(2px);box-shadow:0 10px 0 #000,0 16px 26px rgba(0,0,0,.45)}
.btn-form-text{color:#fff;text-shadow:0 2px 0 #000,2px 0 0 #000,-2px 0 0 #000,0 -2px 0 #000}

/* =========================
   Bands / Cards / Common
========================= */
.section-band{position:relative;padding:18px 0;background:var(--comic-yellow)}
.section-band::before,.section-band::after{content:"";position:absolute;left:0;right:0;height:8px;background:repeating-linear-gradient(45deg,#000 0,#000 8px,transparent 8px,transparent 16px)}
.section-band::before{top:0}.section-band::after{bottom:0}
.section-band span{display:block;text-align:center;font-weight:900;letter-spacing:2px;color:#111}

.comic-title{display:inline-block;background:#fff;padding:8px 14px;border-radius:12px;box-shadow:0 6px 0 #000;border:4px solid #000;transform:skewX(-2deg);margin:24px 0}
.sticker{background:#fff;border:4px solid #000;border-radius:16px;padding:32px;position:relative;box-shadow:0 10px 0 #000,0 18px 28px rgba(0,0,0,.15)}
.card{background:#fff;border:4px solid #000;border-radius:14px;padding:18px;box-shadow:0 6px 0 #000;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.chip{background:#fff;border:3px solid #000;border-radius:999px;padding:12px 18px;box-shadow:0 4px 0 #000;display:inline-flex;align-items:center;gap:8px}

/* =========================
   About
========================= */
.about{background:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/10px 10px var(--comic-yellow);padding:60px 0}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-text p{margin-bottom:16px;line-height:1.8}
.about-points{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px 16px;margin-top:14px}
.about-points .chip{width:100%;justify-content:flex-start}
.about-points .bubble{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#fffbcc;border:3px solid #000;border-radius:50%;box-shadow:0 3px 0 #000}
.about-illustration{position:relative;min-height:360px;background:#fff;border:4px solid #000;border-radius:20px;box-shadow:0 10px 0 #000,0 18px 28px rgba(0,0,0,.15);overflow:hidden}
.about-illustration .ai-cpa-illust{width:100%;height:100%}

/* =========================
   Overview
========================= */
.overview{background:#fff;padding:0 0 80px}
.overview-list.overview-simple{display:grid;grid-template-columns:200px 1fr;gap:0 24px;margin-top:10px}
.overview-list.overview-simple dt,.overview-list.overview-simple dd{padding:10px 0;border-bottom:1px solid #c4c4c4}
.overview-list.overview-simple dd ul{padding-left:1.2em}
.overview-list.overview-simple dd ul li{list-style:disc;margin-bottom:4px}

/* =========================
   Services
========================= */
/* 数字と同じ見た目でテキストを大きく表示 */
.num-text{
  display:inline-block;
  font-weight:900;
  line-height:1;
  color:#ffeb00;
  font-size: clamp(3rem, 6.5vw, 5.2rem);
  text-shadow:0 0 0 #1e59b8,2px 0 #1e59b8,-2px 0 #1e59b8,0 2px #1e59b8,0 -2px #1e59b8,
              3px 3px #1e59b8,-3px 3px #1e59b8,3px -3px #1e59b8,-3px -3px #1e59b8,6px 8px 0 #000;
}
.services{background:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/10px 10px var(--comic-yellow);padding:0 0 80px}
.service{position:relative;overflow:hidden;transition:transform .2s}
.service:hover{transform:translateY(-4px) rotate(-0.3deg)}
.service .service-icon{display:none}
.sub-services{margin-top:30px}
.sub-service-list{list-style:none;display:flex;gap:16px;flex-wrap:wrap}
.sub-service-list li{display:flex;align-items:center;gap:10px}

/* 料金POP（コミック調） */
.service-pricing{margin:30px 0}
.comic-pricing{position:relative;padding:44px 24px 38px;text-align:center;background:#fff;border:6px solid #000;border-radius:22px;box-shadow:0 12px 0 #000,0 22px 34px rgba(0,0,0,.25);overflow:hidden}
.comic-pricing--pop{
  color:#fff;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.35), transparent 60%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.08) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(135deg, #164d70 0%, var(--clr-primary) 40%, var(--clr-secondary) 100%);
  border-color:#000;
}
.comic-pricing--pop::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.15) 1px, transparent 1px) 0 0/10px 10px;opacity:.18;pointer-events:none}
.pricing-burst{position:absolute;left:50%;top:50%;width:720px;height:720px;transform:translate(-50%,-50%) rotate(-6deg);background:conic-gradient(from 0deg, rgba(255,235,0,.6) 0 8deg, transparent 8deg 20deg) 0/56px 56px;filter:blur(1px);opacity:.18;pointer-events:none}
.pricing-badge{position:absolute;top:14px;left:14px;display:inline-block;background:#e60012;color:#fff;padding:12px 20px;border-radius:999px;font-weight:900;font-size:1.25rem;border:4px solid #fff;box-shadow:0 8px 0 #000,0 0 18px rgba(230,0,18,.45);transform:rotate(-3deg);letter-spacing:.05em}
.pricing-title{position:relative;display:inline-block;font-size:1.05rem;font-weight:900;margin-bottom:12px;letter-spacing:.08em;background:#fff;padding:6px 16px;border:4px solid #000;border-radius:999px;color:#111;box-shadow:0 4px 0 #00000055}
.pricing-value{margin:10px 0 0;display:flex;align-items:flex-end;justify-content:center;gap:14px;flex-wrap:wrap}
.pricing-leading{font-weight:900;font-size:2.2rem;color:#fff;background:#111;padding:.1em .5em;border-radius:.6em;box-shadow:0 6px 0 #000}
.pricing-number{font-weight:900;line-height:1;font-size:7.2rem;color:#ffeb00;text-shadow:0 0 0 #1e59b8, 2px 0 #1e59b8, -2px 0 #1e59b8, 0 2px #1e59b8, 0 -2px 0 #1e59b8, 3px 3px #1e59b8, -3px 3px #1e59b8, 3px -3px #1e59b8, -3px -3px #1e59b8, 6px 8px 0 #000;}
.pricing-yen{font-weight:900;line-height:1;font-size:4.2rem;color:#ffeb00;text-shadow:0 0 0 #1e59b8, 2px 0 #1e59b8, -2px 0 #1e59b8, 0 2px #1e59b8, 0 -2px 0 #1e59b8, 3px 3px #1e59b8, -3px 3px #1e59b8, 3px -3px #1e59b8, -3px -3px #1e59b8, 6px 8px 0 #000;}
.pricing-multiply{font-weight:900;font-size:3.2rem;color:#fff;text-shadow:0 3px 0 #000}

/* =========================
   Flow
========================= */
.flow-section{background:#fff}
.flow-banner{background:var(--comic-yellow);position:relative}
.flow-banner::before,.flow-banner::after{content:"";display:block;height:8px;background:repeating-linear-gradient(45deg,#000 0,#000 8px,transparent 8px,transparent 16px)}
.flow-banner::before{position:absolute;top:0;left:0;right:0}
.flow-banner::after{position:absolute;bottom:0;left:0;right:0}
.flow-banner-inner{padding:24px 0;text-align:center;position:relative}
.flow-banner-inner .section-title{font-size:1.8rem;font-weight:900;color:#111}

.timeline{position:relative;margin:40px 0;padding-left:60px}
.timeline::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:4px;background:#111}
.timeline-item{position:relative;margin-bottom:40px}
.timeline-marker{position:absolute;left:16px;top:0;width:28px;height:28px;background:#111;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:2}
.timeline-item:not(:last-child)::after{content:"↓";position:absolute;left:30px;top:32px;transform:translateX(-50%);color:#111;font-size:1.4rem;opacity:.8}
.timeline-content{margin-left:60px}
.timeline-content h3{font-size:1.1rem;margin-bottom:6px;font-weight:900}
.timeline-content ul{list-style:disc;margin:0;padding-left:1.2em}
.timeline-content ul li{margin-bottom:4px}

/* =========================
   News / Contact / Footer
========================= */
.news{background:#fff;padding:0 0 80px}
.news-list{list-style:none;padding:0}
.news-list li{padding:14px 16px;border:none}
.news-date{display:inline-block;width:120px;font-size:.9rem;color:#333;font-weight:800}
.news-list a{color:#111;font-weight:900;text-decoration:none}
.news-list .card:hover a{text-decoration:underline}

.contact{background:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/10px 10px var(--comic-yellow);padding:0 0 80px;text-align:center}
.center{text-align:center}

.site-footer{background:#111;color:#fff;padding:24px 0;box-shadow:0 -10px 0 #000}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.footer-nav ul{display:flex;gap:15px;list-style:none}
.footer-nav a{text-decoration:none;color:#ffeb00;font-weight:900}

/* =========================
   Forms (contact.html)
========================= */
.form{margin-top:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group--full{grid-column:1/-1}
.form-group label{font-weight:900}
.required label::after{content:" *";color:#e60012;font-weight:900}
.input,.select,.textarea{width:100%;padding:12px 14px;border:3px solid #000;border-radius:12px;outline:none;background:#fff;box-shadow:0 6px 0 #000}
.textarea{resize:vertical}

.radio-group{display:flex;flex-wrap:wrap;gap:14px}
.radio{display:inline-flex;gap:6px;align-items:center}
.radio-card{background:#fff;border:4px solid #000;border-radius:14px;box-shadow:0 6px 0 #000;padding:14px 16px}

.checkbox{display:flex;align-items:center;gap:8px;font-weight:700}
.checkbox a{color:#3b2bb3;text-decoration:underline}

.form-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-top:16px;text-align:center}
.form-note{font-size:.9rem;color:#333}
.btn-submit{min-width:unset;width:clamp(240px,50%,420px)}
.form-success{margin-top:22px;padding:18px;border:3px solid #000;border-radius:12px;background:#eaffea}
.success-title{font-weight:900;margin-bottom:6px}

/* =========================
   Effects
========================= */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s ease-out,transform .8s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.fade-in{transition:none}}

/* =========================
   Responsive
========================= */
@media(max-width:900px){
  .offer-card{max-width:100%}
  .offer-illust{display:none}
}

@media(max-width:768px){
  .site-nav{display:none}
  .site-nav.open{display:block;position:absolute;top:60px;right:20px;background:#fff;padding:15px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1)}
  .nav-toggle{display:flex}

  .hero-title.pop{font-size:2.6rem}
  .hero-title small{font-size:1.2rem;margin-top:22px}
  .hero-title .highlight{
    margin:0 .28em;
    text-shadow:
      -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff,
       0    1.5px 0 #fff, 1.5px  0   0 #fff, -1.5px 0 0 #fff, 0 -1.5px 0 #fff,
      -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 3px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 0 -3px 0 #000;
  }

  .btn-line-fat,.btn-form{min-width:unset;width:100%;font-size:1.6rem;border-width:8px}
  .btn-submit{width:100%}

  .hero-pop{padding:8vh 0}

  .about-inner{grid-template-columns:1fr}
  .about-illustration{min-height:300px;margin-top:18px}
  .about-points{grid-template-columns:1fr}

  .overview-list.overview-simple{grid-template-columns:140px 1fr}

  .form-grid{grid-template-columns:1fr}
}

/* === Offer 強調テキストを「AI×公認会計士」と同じデザインに === */
.offer-em{
  display:inline-block;
  margin:0 .35em;
  padding:0 .06em;
  color:#e60012;
  font-weight:900;
  font-size:2.1rem;
  letter-spacing:.02em;
  text-shadow:
    -2px -2px 0 #fff,  2px -2px 0 #fff, -2px  2px 0 #fff,  2px  2px 0 #fff,
     0    2px 0 #fff,  2px  0   0 #fff, -2px  0   0 #fff,  0   -2px 0 #fff,
    -4px -4px 0 #000,  4px -4px 0 #000, -4px  4px 0 #000,  4px  4px 0 #000,
     0     4px 0 #000, 4px   0   0 #000, -4px  0   0 #000,  0   -4px 0 #000;
}

@media (max-width:768px){
  .offer-em{ font-size:1.6rem; }
}

/* 価格表示のはみ出し/被り対策 */
.price-pop{ margin:16px 0 14px; }              /* 下の余白を広げる */
.price-row{ gap:12px; flex-wrap:wrap; }        /* 必要に応じて折り返す */
.price-row .num{
  font-size: clamp(3.2rem, 7vw, 5.2rem);       /* 画面幅で自動縮小 */
}
.price-row .yen{
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);     /* 画面幅で自動縮小 */
}
.price-tilde{ font-size: clamp(1.4rem, 3vw, 2rem); }
/* 見出しや説明との衝突を避けるための余白微調整 */
.service .service-summary{ margin-top:8px; }
.service .service-detail{ margin-top:10px; }

/* --- 応相談の文字サイズを少し縮小 --- */
.num-text {
  display: inline-block;
  font-weight: 900;
  line-height: 1.1;
  color: #ffeb00;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);  /* ← 前回より一段階小さめ */
  text-shadow: 0 0 0 #1e59b8,
               2px 0 #1e59b8, -2px 0 #1e59b8,
               0 2px #1e59b8, 0 -2px #1e59b8,
               3px 3px #1e59b8, -3px 3px #1e59b8,
               3px -3px #1e59b8, -3px -3px #1e59b8,
               6px 8px 0 #000;
}

/* --- 価格ブロック全体 --- */
.price-pop {
  margin: 16px 0 28px;   /* 下の余白をさらに広げる */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- メインの価格行 --- */
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;  /* ← 0.4rem から 0.8rem に拡大 */
}

/* 補足テキスト（× 件数／＋ システム利用料） */
.price-sub {
  font-size: 1rem;       /* ← 0.85rem から少し拡大 */
  margin-top: 0.6rem;    /* 余白は前回の調整のまま */
  font-weight: 500;      /* 少しだけ強調 */
  text-align: center;
}