:root{
  --primary:#2b2bff;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f6f7fb;
  --border:#e5e7eb;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP",Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.8;}

/* layout */
.container{width:min(1100px,92%);margin:0 auto}
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.sec-title{font-size:28px;margin:0 0 8px}
.sec-desc{color:var(--muted);margin:0 0 24px}
.grid{display:grid;gap:24px}
.cards-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.cards-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards-3{grid-template-columns:1fr}}

/* header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;height:64px}
.logo{font-weight:700;text-decoration:none;color:#111}
.nav{display:flex;gap:18px}
.nav a{color:#111;text-decoration:none;font-weight:600}
.menu-btn{display:none;border:0;background:transparent;font-size:24px}
.hide-sp{display:inline-flex}
@media(max-width:840px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:12px 4%;}
  .nav a{display:block;padding:10px 6px}
  .menu-btn{display:inline-flex}
  .hide-sp{display:none}
}

/* hero */
.hero{background:linear-gradient(180deg,#eef2ff 0%,#fff 100%);padding:64px 0}
.hero-inner{display:grid;gap:24px;grid-template-columns:1.15fr .85fr;align-items:center}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr}}
.eyebrow{color:var(--primary);font-weight:700;margin:0 0 6px}
.hero h1{font-size:40px;line-height:1.2;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 16px}
.badges{display:flex;gap:10px;padding:0;margin:14px 0 0;list-style:none;flex-wrap:wrap}
.badges li{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:#fff;font-size:13px}
.hero-media img{width:100%;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* cards */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:16px}
.card-body h3{margin:0 0 6px;font-size:18px}
.card-body p{margin:0 0 10px;color:var(--muted)}
.chip-row{display:flex;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.chip-row li{font-size:12px;border:1px solid var(--border);border-radius:999px;padding:4px 8px;background:#fff}
.card-foot{display:flex;justify-content:space-between;align-items:center}
.price{font-weight:800}

/* features */
.features{grid-template-columns:repeat(3,1fr)}
.feature{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.feature .icon{font-size:24px}

/* steps */
.steps{counter-reset:st;margin:0;padding-left:0;list-style:none;display:grid;gap:10px}
.steps li{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.steps li strong{margin-right:6px}

/* plans */
.plan{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;position:relative}
.plan .plan-price{font-size:28px;font-weight:800;margin:6px 0 16px}
.plan-list{list-style:none;margin:0 0 18px;padding:0;color:var(--text)}
.plan.featured{border:2px solid var(--primary);box-shadow:0 10px 30px rgba(43,43,255,.08)}
.ribbon{position:absolute;top:-10px;right:-10px;background:var(--primary);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px}

/* review */
.review{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;font-style:italic}

/* accordion */
details{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700}

/* CTA */
.cta{background:#0f172a;color:#fff;padding:72px 0;text-align:center}
.cta .cta-inner{max-width:640px;margin:0 auto}
.cta h2{margin:0 0 8px}
.cta .cta-row{display:flex;gap:12px;justify-content:center;margin-top:12px}
@media(max-width:520px){.cta .cta-row{flex-direction:column}}

/* footer */
.site-footer{border-top:1px solid var(--border);background:#fff}
.footer-inner{display:flex;gap:12px;justify-content:space-between;align-items:center;height:72px}
.footer-inner a{color:var(--muted);text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--border);text-decoration:none;color:#111;background:#fff;font-weight:700}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.ghost{background:#fff;border-color:var(--primary);color:var(--primary)}
.btn.small{padding:8px 12px;font-size:14px}
.btn.large{padding:14px 22px;font-size:16px}
.btn.block{width:100%}

/* === 固定ヘッダー設定 === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
}

.site-header .logo {
  font-weight: bold;
  color: #2f55d4;
  text-decoration: none;
  font-size: 20px;
}

.nav a {
  margin-left: 18px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav a:hover {
  color: #2f55d4;
}

/* 固定ヘッダー分の余白をボディに確保 */
body {
  padding-top: 70px;
}

/* ==== SNSシェアボタン セクション ==== */
.share-section {
  text-align: center;
  margin-top: 50px;
}

.share-section h3 {
  color: #224bdb;
  font-weight: 700;
  margin-bottom: 25px;
  font-size: 1.2em;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  transition: all 0.3s ease;
}

.share-btn.twitter {
  background-color: #000000;
}

.share-btn.line {
  background-color: #06C755;
}

.share-btn.copy {
  background-color: #2f55d4;
  border: none;
  cursor: pointer;
}

.share-btn:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

#copy-msg-01 {
  margin-top: 10px;
  color: #2f55d4;
  font-weight: bold;
  display: none;
}

<style>
.template-get {
  background: #f9fafc;
  padding: 80px 20px;
  text-align: center;
}
.template-get h2 {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
}
.template-get .lead {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.8;
}
.benefits ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 30px;
  text-align: left;
  max-width: 600px;
}
.benefits li {
  font-size: 16px;
  color: #333;
  margin: 8px 0;
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.benefits li::before {
  content: "✅ ";
}
.cta-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}
.btn.primary {
  background: linear-gradient(90deg, #2f55d4, #4a80f0);
  color: #fff;
}
.btn.primary:hover {
  background: #1e3ca3;
  transform: translateY(-3px);
}
.btn.ghost {
  border: 2px solid #2f55d4;
  color: #2f55d4;
  background: #fff;
}
.btn.ghost:hover {
  background: #2f55d4;
  color: #fff;
  transform: translateY(-3px);
}
.note {
  margin-top: 40px;
  color: #555;
  font-size: 15px;
  line-height: 1.7;
}
</style>

/* ==================== footer ==================== */
.site-footer {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 20px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.footer-btn {
  display: inline-block;
  background-color: #2f55d4;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s;
}

.footer-btn:hover {
  background-color: #1e3ca3;
  transform: translateY(-2px);
}

/* 強調された「依頼する」ボタン */
.cta-request-btn {
  display: inline-block;
  background: linear-gradient(135deg, #0056ff, #007bff);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 16px 48px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 85, 255, 0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* ホバー時のアクション */
.cta-request-btn:hover {
  background: linear-gradient(135deg, #0040cc, #0066ff);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 85, 255, 0.45);
}

/* クリック時の軽い押し込み */
.cta-request-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 85, 255, 0.3);
}

/* グラデーションの光エフェクト */
.cta-request-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: all 0.6s ease;
}

.cta-request-btn:hover::after {
  left: 100%;
}

.template-preview-link {
  display: none !important;
}

.back-home {
  text-align: center;
  margin: 60px 0 80px;
}

.home-btn {
  display: inline-block;
  background: #0066ff;
  color: #fff;
  padding: 14px 28px;
  font-size: 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}

.home-btn:hover {
  background: #004bcc;
  transform: translateY(-2px);
}