/* =========================================================
   mel-link 共通スタイル  /css/style.css
   （ヘッダー〜フッター、全ページ共通セクション一式）
   ========================================================= */
/* 見出し用の正式フォント（太字の質感を固定） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;800;900&display=swap");

/* ---------- Tokens / Base ---------- */
:root{
  --brand:#0b63b6; --brand-2:#2c83c6; --ink:#1f2a44; --muted:#6b7b8c;
  --bg:#f7f9fc; --card:#fff; --line:#e8eef5; --lite:#e8f3ff;
  --accent:#ffa733; --accent-d:#ff8c00;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Arial,system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.7;
}

/* ページ共通のパディング（必要ページで付与） */
.header-offset{ padding-top:120px; }
@media (max-width:768px){ .header-offset{ padding-top:100px; } }

/* =========================================================
   Header（plan準拠・完全統一）
   ========================================================= */
header{
  background:#2c83c6; color:#fff; position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; margin:10px 20px; border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
header h1{ margin:0; font-size:20px; }
header h1 img{ width:150px; height:auto; display:block; }

/* ナビ */
nav{ display:flex; gap:30px; }
nav a{
  color:#fff; text-decoration:none; font-weight:bold;
  padding:10px 20px; border-radius:5px; transition:background-color .3s;
  white-space:nowrap;
}
nav a:hover{ background:#005bb5; }
nav .active{ background:#005bb5; }

/* 右側CTA（オレンジ2つ） */
.header-cta{ display:flex; align-items:center; gap:12px; margin-right:16px; }
header .btn-cta{
  background:#ff8000; color:#fff; text-decoration:none; font-weight:700;
  border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 20px; width:168px; line-height:1; box-shadow:0 2px 0 rgba(0,0,0,.08);
  transition:filter .2s, transform .2s;
}
header .btn-cta:hover{ filter:brightness(.95); transform:translateY(-1px); }

/* ハンバーガー */
.menu-toggle{
  display:block; font-size:30px; cursor:pointer; color:#fff;
  position:absolute; right:20px; top:10px;
}
/* PCで隠す */
@media (min-width:1025px){ header .menu-toggle{ display:none !important; } }

/* タブレット以下：CTA微縮小＆☰出す */
@media (max-width:1024px){
  .menu-toggle{ display:inline-block !important; margin-left:8px; font-size:24px; }
  header .btn-cta{ width:auto; padding:0 16px; height:40px; }
}

/* モバイルのドロップダウン */
@media (max-width:768px){
  nav{
    display:none; flex-direction:column; position:absolute; top:80px; right:10px;
    background:#0060b1; padding:10px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.1);
  }
  nav a{ margin:10px 0; padding:10px 15px; text-align:center; }
  nav.show{ display:flex; }
  .menu-toggle{ display:block; }
  header{ padding:8px 10px; margin-left:10px; margin-right:10px; }
  header h1 img{ width:120px; }
  header .btn-cta{ height:34px; padding:0 12px; font-size:13px; border-radius:6px; width:auto; }
}

/* =========================================================
   Footer / Floating CTA（全ページ）
   ========================================================= */
footer{
  background:#0066cc; color:#fff; text-align:center;
  padding:40px 20px; margin-top:50px;
}
footer a{ color:#fff; text-decoration:none; margin:0 10px; }
footer .logo{ font-size:30px; font-weight:bold; margin-bottom:20px; }

/* 右下固定CTA */
.f-cta{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:1100; }
.f-cta .cta{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:800; text-decoration:none;
  box-shadow:0 10px 22px rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s;
}
.f-cta .cta:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.22); }
.cta-trial{ background:var(--accent); color:#222; }
.cta-pricing{ background:var(--brand-2); color:#fff; }
@media (max-width:560px){ .f-cta{ right:10px; bottom:10px; } .f-cta .cta{ padding:10px 14px; font-size:14px; } }

/* =========================================================
   トップページ（index.html）各セクション
   ========================================================= */
/* ヒーロー */
.main-content{ display:flex; justify-content:space-between; padding:120px 20px 0; }
.left-side{ width:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.right-side{ width:50%; display:flex; align-items:center; justify-content:center; position:relative; background-image:url('../images/sitetop_left.jpg'); background-size:cover; background-position:center 40%; height:600px; border-radius:20px; box-shadow:0 0 15px rgba(0,0,0,.1); }
.right-side img{ display:none; }
.catch-copy{ font-size:32px; font-weight:bold; line-height:1.4; color:#333; margin-bottom:20px; text-align:center; text-shadow:1px 1px 4px rgba(0,0,0,.3); }
.service-description{ font-size:28px; font-weight:bold; color:#005bb5; margin-bottom:10px; text-align:center; text-shadow:1px 1px 4px rgba(0,0,0,.2); }
.service-name{ font-size:40px; font-weight:bold; color:#0066cc; margin-top:20px; text-align:center; text-shadow:2px 2px 5px rgba(0,0,0,.3); }
.sub-text{ font-size:14px; color:#888; margin-bottom:40px; text-align:center; }
.cta-button-order{ background:#ff8000; color:#fff; padding:15px 30px; font-size:18px; text-decoration:none; border-radius:5px; display:inline-block; margin-top:20px; }

/* ヒーロー文言 */
.animated-text{ position:absolute; z-index:2; font-size:80px; font-weight:bold; color:#004080; text-align:center; width:100%; top:45%; left:0; padding:10px 0; }
.animated-text span{ display:block; font-size:80px; text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,4px 4px 6px rgba(0,0,0,.3); }

/* 実績バッジ */
.icons-wrapper{ display:flex; justify-content:space-around; gap:20px; margin-top:20px; }
.icon{ width:150px; height:150px; object-fit:contain; margin-bottom:10px; }
.icon-container{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.icon-text{ font-size:18px; font-weight:bold; color:#005bb5; }

/* Features（青帯の3カード） */
.features{ margin:50px 20px 0; padding:40px 20px; background:#2c83c6; border-radius:12px; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.features-title{ text-align:center; font-size:clamp(22px,3vw,32px); font-weight:800; margin:0 0 28px; letter-spacing:.02em; }
.features-grid{ display:grid; gap:22px; grid-template-columns:repeat(3,1fr); }
.feature-card{ background:#2c83c6; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px; display:flex; flex-direction:column; align-items:center; gap:14px; transition:transform .2s, box-shadow .2s; }
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.18); }
.feature-illust{ width:100%; aspect-ratio:16/10; border-radius:10px; background:#10151b; display:grid; place-items:center; color:#6f8199; user-select:none; overflow:hidden; }
.feature-illust img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-heading{ font-size:clamp(14px,1.8vw,16px); font-weight:bold; color:#005bb5; text-align:center; margin-bottom:8px; }
.feature-text{ color:#eaf3ff; line-height:1.7; font-size:clamp(14px,1.9vw,16px); text-align:center; margin:0; }
.feature-text strong{ color:#fff; font-weight:800; }

/* Steps */
.steps-section{ background:#fff; padding:60px 20px; text-align:center; margin:40px 0; }
.steps-title{ font-size:28px; font-weight:bold; color:#333; margin-bottom:40px; }
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.step-card{ background:#f9f9f9; border-radius:12px; padding:20px; transition:.3s; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.step-card:hover{ background:#e8f3ff; transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.step-header{ font-size:14px; font-weight:bold; color:#fff; background:#0072c6; display:inline-block; padding:6px 16px; border-radius:20px; margin-bottom:12px; }
.step-title{ font-size:20px; font-weight:bold; color:#333; margin:10px 0; }
.step-illust{ margin:16px 0; height:150px; display:flex; justify-content:center; align-items:center; }
.step-illust img{ max-width:100%; max-height:100%; object-fit:contain; }
.step-text{ font-size:15px; color:#555; line-height:1.6; margin-top:10px; }

/* CTA（下矢印＋丸ボタン） */
.cta-section{ text-align:center; padding:60px 20px; background:#fff; }
.arrow-down{ font-size:50px; color:#0072c6; margin-bottom:20px; animation:bounce 1.5s infinite; }
@keyframes bounce{ 0%,20%,50%,80%,100%{ transform:translateY(0);} 40%{ transform:translateY(10px);} 60%{ transform:translateY(5px);} }
.cta-big-order-button{ display:inline-block; background:#ff8000; color:#fff; font-size:22px; font-weight:bold; padding:20px 60px; border-radius:50px; text-decoration:none; transition:background .3s, transform .2s; }
.cta-big-order-button:hover{ background:#df7000; transform:translateY(-3px); }
.cta-subtext{ font-size:16px; color:#555; margin-top:20px; }

/* More features */
.more-features{ background:#fff; padding:60px 20px; text-align:center; }
.more-features .features-title{ font-size:28px; font-weight:bold; margin-bottom:40px; color:#333; }
.more-features .features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:0 auto 50px; }
.more-features .feature-card{ background:#f9f9f9; border-radius:12px; padding:20px; box-shadow:0 2px 6px rgba(0,0,0,.08); text-align:left; transition:transform .2s; }
.more-features .feature-card:hover{ transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.more-features .feature-title{ font-size:18px; font-weight:bold; margin-bottom:12px; color:#005bb5; }
.more-features .feature-text{ font-size:15px; line-height:1.7; color:#555; }
.more-link{ margin-top:40px; }
.more-link .arrow-down{ font-size:40px; color:#0072c6; animation:bounce 1.5s infinite; margin-bottom:20px; }
.more-link .cta-big-button{ display:inline-block; background:#0072c6; color:#fff; font-size:20px; padding:18px 50px; border-radius:40px; text-decoration:none; font-weight:bold; transition:background .3s, transform .2s; }
.more-link .cta-big-button:hover{ background:#005bb5; transform:translateY(-3px); }

/* Achievements */
.achievements{ background:#f7f9fc; padding:60px 20px; text-align:center; }
.achievements-title{ font-size:28px; font-weight:bold; color:#333; margin-bottom:40px; }
.achievements-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1000px; margin:0 auto; }
.achievement-card{ background:#fff; border-radius:12px; padding:30px 20px; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:transform .2s; }
.achievement-card:hover{ transform:translateY(-5px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.achievement-icon{ font-size:40px; margin-bottom:12px; color:#0072c6; }
.achievement-card h3{ font-size:20px; font-weight:bold; color:#005bb5; margin-bottom:10px; }
.achievement-card p{ font-size:15px; color:#555; line-height:1.6; }

/* Voices（カルーセル） */
.voices{ background:#fff; padding:60px 20px; text-align:center; }
.voices-title{ font-size:28px; font-weight:800; color:#333; margin-bottom:24px; }
.voices-carousel{ position:relative; max-width:1200px; margin:0 auto; }
.voices-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc(33.333% - 16px); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 8px 16px; scrollbar-width:none; }
.voices-track::-webkit-scrollbar{ display:none; }
.voice-card{ scroll-snap-align:start; background:#f9fbff; border:1px solid rgba(0,0,0,.06); border-radius:14px; overflow:hidden; text-align:left; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.voice-top{ position:relative; }
.voice-top img{ display:block; width:100%; height:160px; object-fit:cover; }
.voice-tag{ position:absolute; left:12px; bottom:12px; background:#0072c6; color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; }
.voice-body{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; }
.pill{ display:inline-block; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; letter-spacing:.04em; margin-bottom:6px; }
.pill-before{ background:#ffe9ea; color:#c23b3b; border:1px solid #ffc7cc; }
.pill-after{ background:#e6f4ff; color:#0b63b6; border:1px solid #c8e6ff; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid rgba(0,0,0,.12); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:#0b3a6b; cursor:pointer; z-index:2; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.carousel-btn:hover{ background:#e8f3ff; }
.carousel-btn.prev{ left:-6px; } .carousel-btn.next{ right:-6px; }
.voices-cta{ margin-top:28px; }
.arrow-down.small{ font-size:34px; color:#0072c6; margin-bottom:12px; animation:bounce 1.5s infinite; }

/* =========================================================
   料金（plan.html）
   ========================================================= */
.pricing-title{ margin-top:120px; text-align:center; font-size:32px; font-weight:bold; color:#333; }
.subnote{ margin-top:8px; text-align:center; color:#555; font-size:14px; }
.campaign{ max-width:1100px; margin:16px auto 0; background:#fff; border:1px dashed #2c83c6; color:#1c3a5e; padding:12px 16px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.billing-toggle{ display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0 10px; }
.toggle{ position:relative; width:96px; height:38px; border-radius:999px; cursor:pointer; background:#2c83c6; transition:background .2s; }
.toggle.on{ background:#ff6a00; }
.dot{ position:absolute; top:4px; left:4px; width:30px; height:30px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:left .2s; display:flex; align-items:center; justify-content:center; }
.toggle.on .dot{ left:62px; }
.dot-text{ font-size:14px; font-weight:800; color:#2c83c6; line-height:1; user-select:none; }
.toggle.on .dot-text{ color:#ff6a00; }
.billing-state{ text-align:center; margin-top:6px; font-size:12px; font-weight:800; color:#0b63b6; }

.pricing-section{ display:flex; justify-content:center; gap:30px; padding:20px; margin:20px 0 50px; flex-wrap:wrap; }
.price-card{ width:30%; min-width:280px; max-width:350px; background:#fff; padding:26px; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08); text-align:center; transition:transform .25s, box-shadow .25s; position:relative; }
.price-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.12); }
.price-card.highlight{ background:#eaf6fc; border:2px solid #0066cc; transform:scale(1.08) translateY(-12px); z-index:2; box-shadow:0 12px 32px rgba(0,0,0,.18); }
.plan-badge{ position:absolute; top:12px; right:12px; background:#ff6a00; color:#fff; font-size:12px; font-weight:bold; padding:4px 8px; border-radius:999px; }
.price-card h2{ font-size:22px; margin:6px 0 2px; color:#333; }
.quota{ color:#0b63b6; font-weight:bold; margin-bottom:8px; }
.price{ font-size:30px; font-weight:800; color:#0066cc; margin:10px 0 6px; }
.lump{ font-size:13px; color:#555; margin-bottom:8px; }
.taxnote{ font-size:12px; color:#777; margin-bottom:10px; }
.feat-title{ margin-top:6px; color:#333; font-weight:bold; }
.price-card ul{ margin:6px 0 0 18px; text-align:left; color:#555; }
.cta-button{ background:#005bb5; color:#fff; padding:14px 20px; font-size:16px; border-radius:8px; display:inline-block; margin-top:14px; width:85%; transition:.2s; }
.cta-button:hover{ background:#004f9c; }
.cta-button.secondary{ background:#ff6a00; }
.cta-button.secondary:hover{ background:#e65f00; }
.cta-button.outline{ background:#fff; color:#ff8000; border:2px solid #ff8000; }
.cta-button.outline:hover{ background:#ff8000; color:#fff; }

/* プラン比較 */
.plan-compare{ max-width:1120px; margin:0 auto 50px; padding:0 16px; }
.pc-title{ text-align:center; font-size:24px; font-weight:800; color:#1c3a5e; margin:14px 0 18px; }
.pc-table{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden; }
.pc-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; border-top:1px solid #eef3f8; }
.pc-row:first-child{ border-top:none; }
.pc-head{ background:#f4f9ff; font-weight:800; color:#0b63b6; }
.pc-cell{ padding:14px 16px; display:flex; align-items:center; justify-content:center; }
.pc-item{ font-weight:700; color:#1f2a44; gap:8px; justify-content:flex-start; }
.pc-col{ text-align:center; justify-content:center; color:#1f2a44; }
.pc-yes{ color:#0a7a3b; font-weight:900; justify-content:center; }
.pc-section{ background:#f9fbff; color:#50739a; font-weight:800; text-align:center; padding:8px 10px; border-top:1px solid #eef3f8; }
.pc-note{ padding:6px 16px; color:#6b7b8c; font-size:12px; border-top:1px dashed #eef3f8; }
.pc-hint{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#e8f3ff; color:#0b63b6; font-size:12px; cursor:help; user-select:none; position:relative; }
.pc-hint::after{ content:attr(data-hint); position:absolute; left:0; top:100%; transform:translateY(8px); background:#1c2b3a; color:#fff; font-size:12px; line-height:1.5; padding:8px 10px; border-radius:8px; min-width:180px; max-width:320px; box-shadow:0 8px 18px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:.15s; z-index:5; }
.pc-hint::before{ content:""; position:absolute; left:8px; top:100%; transform:translateY(2px); border:6px solid transparent; border-bottom-color:#1c2b3a; opacity:0; transition:.15s; z-index:5; }
.pc-hint:hover::after,.pc-hint:focus::after{ opacity:1; }
.pc-hint:hover::before,.pc-hint:focus::before{ opacity:1; }

/* =========================================================
   機能一覧（system.html）
   ========================================================= */
.wrap{ max-width:1200px; margin:0 auto; padding:120px 16px 64px; }
h1.tit{ font-size:28px; font-weight:800; text-align:center; margin:8px 0 24px; }
.lead{ max-width:880px; margin:0 auto 6px; text-align:center; color:#425466; }
.note{ text-align:center; color:#8091a1; font-size:13px; margin:0 auto 20px; }
h2.sec{ margin:24px 0 12px; color:var(--brand); font-size:18px; font-weight:800; text-align:center; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(2,18,44,.06); transition:.2s ease; display:flex; flex-direction:column; gap:8px; }
.card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(2,18,44,.1); }
.card h3{ margin:0; color:#1f2a44; font-size:16px; }
.card p{ margin:0; color:#4a5668; font-size:14px; line-height:1.75; }
.card code{ background:#f4f7fb; padding:0 4px; border-radius:4px; }

.ico{ width:42px; height:42px; border-radius:10px; background:var(--lite); display:grid; place-items:center; }
.ico svg{ width:26px; height:26px; stroke:var(--brand); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Voices Grid（下部お客様の声グリッド） */
.voices-grid{ max-width:1200px; margin:0 auto 48px; padding:0 16px; }
.voices-title{ text-align:center; font-size:24px; font-weight:800; color:#1c3a5e; margin:14px 0 18px; }
.voices-list{ display:grid; grid-template-columns:repeat(3, minmax(260px,1fr)); gap:24px; }
@media (max-width:980px){ .voices-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .voices-list{ grid-template-columns:1fr; } }
.voice-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.12); }

/* =========================================================
   お申込み（order.html / order-monthly.html）
   ========================================================= */
main{ max-width:960px; margin:0 auto; padding:120px 16px 64px; }
h1{ font-size:28px; font-weight:800; margin:0 0 8px; }
.lead{ color:#425466; margin:0 0 18px; }

.policy-wrap{ background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 18px rgba(2,18,44,.06); padding:16px; margin:6px 0 18px; }
.policy-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.policy-head h2{ font-size:16px; margin:0; color:#0b63b6; }
.policy-box{ height:10.5em; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:12px; background:#fbfdff; color:#334; }
.policy-box p{ margin:.5em 0; font-size:14px; line-height:1.7; }
.policy-links{ margin-top:8px; font-size:13px; }
.policy-links a{ color:#0b63b6; text-decoration:none; }

.card.form{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:22px; }
.grid.two{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:800px){ .grid.two{ grid-template-columns:1fr; } }
.row.two{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:800px){ .row.two{ grid-template-columns:1fr; } }

label{ display:block; font-weight:700; margin:0 0 6px; color:#334e68; }
.req{ color:#d93c3c; font-size:12px; margin-left:6px; }
input,select,textarea{
  width:100%; height:46px; padding:10px 14px; border:1px solid #cbd5e1; border-radius:10px; background:#f9fbfe; font-size:16px; color:#1f2937; outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
textarea{ min-height:160px; resize:vertical; line-height:1.7; }
input:focus,select:focus,textarea:focus{ border-color:#0b63b6; background:#fff; box-shadow:0 0 0 4px rgba(11,99,182,.12); }
input.error, select.error, textarea.error{ border-color:#c23b3b !important; box-shadow:0 0 0 3px rgba(194,59,59,.2) !important; }
.error-msg{ margin-top:12px; color:#c23b3b; font-size:14px; font-weight:600; text-align:center; }

/* ラジオ（契約種類） */
.inline{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.inline label{ font-weight:600; margin:0; display:inline-flex; align-items:center; gap:6px; }
.inline input[type="radio"]{ width:auto; height:auto; accent-color:#ff8000; }

/* ボタン行 */
.actions{ display:flex; justify-content:center; margin-top:12px; }
.btn{ display:inline-block; border:none; border-radius:999px; padding:14px 28px; font-weight:800; cursor:pointer; transition:.15s; }
.btn-primary{ background:var(--accent); color:#222; box-shadow:0 10px 22px rgba(255,167,51,.35); font-size:18px; }
.btn-primary:hover{ background:var(--accent-d); color:#fff; transform:translateY(-2px); }

/* =========================================================
   お問い合わせ（contact.html）
   ========================================================= */
#contactForm{ max-width:960px; margin:0 auto; padding:24px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.06); box-sizing:border-box; }
#contactForm .grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
@media (max-width:800px){ #contactForm .grid{ grid-template-columns:1fr; } }
#contactForm textarea{ min-height:140px; resize:vertical; }
#contactForm .actions{ text-align:center; margin-top:20px; }
#contactForm .btn-primary{ display:inline-flex; align-items:center; justify-content:center; padding:14px 32px; border-radius:28px; background:#ff8000; color:#fff; font-weight:800; border:none; cursor:pointer; }

/* =========================================================
   会社概要（company.html）
   ========================================================= */
.container{ max-width:1040px; margin-inline:auto; padding:120px 20px 0; }
.page-title,.title{ font-size:clamp(22px,3.2vw,32px); font-weight:800; text-align:center; margin:8px 0 28px; letter-spacing:.04em; }
.underline{ width:72px; height:3px; background:var(--brand); margin:10px auto 30px; border-radius:4px; }

.profile-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 18px rgba(2,18,44,.06); overflow:hidden; }
.row{ display:grid; grid-template-columns:200px 1fr; border-top:1px solid var(--line); }
.row:first-child{ border-top:none; }
.th,.td{ padding:18px 20px; }
.th{ background:#fbfdff; color:var(--brand); font-weight:800; letter-spacing:.05em; border-right:1px solid var(--line); }
.td p{ margin:0 0 10px; }
.list{ margin:0; padding-left:18px; }
.caption{ color:var(--muted); font-size:13px; margin-top:2px; }

/* マップ2列 */
.maps{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.map-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 18px rgba(2,18,44,.06); overflow:hidden; }
.map-head{ padding:14px 16px; border-bottom:1px solid var(--line); }
.map-head h3{ margin:0 0 6px; font-size:16px; font-weight:800; color:var(--brand); }
.map-head p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.map-wrap{ aspect-ratio:16/9; background:#eaf3ff; }
.map-wrap iframe{ width:100%; height:100%; border:0; }

@media (max-width:820px){
  .row{ grid-template-columns:140px 1fr; }
  .maps{ grid-template-columns:1fr; }
}

/* =========================================================
   特定商取引法（law.html）
   ========================================================= */
.law .container{ max-width:1040px; padding:120px 20px 0; }
.law .card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 18px rgba(2,18,44,.06); overflow:hidden; }
.law .row{ display:grid; grid-template-columns:240px 1fr; border-top:1px solid var(--line); }
.law .row:first-child{ border-top:none; }
.law .th{ background:#fbfdff; color:var(--brand); font-weight:800; border-right:1px solid var(--line); }
.law .td p{ margin:0 0 10px; }
.law .note{ color:var(--muted); font-size:13px; margin-top:6px; }

/* =========================================================
   プライバシーポリシー（policy.html）／利用規約（terms.html）
   ========================================================= */
.policy .container, .terms .container{ max-width:1040px; padding:120px 20px 0; }
.policy h1, .terms h1{ text-align:center; font-size:28px; font-weight:800; margin-bottom:10px; }
.policy .underline, .terms .underline{ width:80px; height:3px; background:#0b63b6; margin:0 auto 40px; border-radius:3px; }
.terms-box{ background:#fff; border:1px solid #e6edf5; border-radius:10px; padding:20px; height:70vh; overflow-y:scroll; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.policy p,.policy li,.terms p,.terms li{ font-size:15px; }

/* =========================================================
   レスポンシブ（共通）
   ========================================================= */
@media (max-width:1024px){
  .features-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .steps-grid{ grid-template-columns:1fr; }
  .achievements-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .features{ padding:28px 16px; }
  .features-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .main-content{ display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:100px 16px 0; }
  .left-side,.right-side{ width:100%; }
  .right-side{ height:clamp(240px,45vh,420px); background-position:center; border-radius:12px; }
  .animated-text{ top:50%; transform:translateY(-50%); font-size:clamp(32px,12vw,64px); }
  .animated-text span{ font-size:inherit !important; text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,2px 2px 4px rgba(0,0,0,.25); }
  .icons-wrapper{ flex-wrap:wrap; }
  .icon{ width:110px; height:110px; }
}
/* =========================
   HOTFIX: indexの3箇所の崩れ
   ========================= */

/* 1) 申込みフォーム（indexのtrial-form）を必ずカード化＆入力を箱型に */
.trial-form{
  max-width:960px !important;
  margin:0 auto !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:14px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
  padding:24px !important;
  box-sizing:border-box !important;
}
.trial-form .form-field label{
  display:block; font-weight:700; color:#334e68; margin-bottom:8px;
}
.trial-form .form-field input,
.trial-form .form-field select{
  width:100% !important; height:46px !important;
  padding:10px 14px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#f9fbfe !important;
  font-size:16px !important; color:#1f2937 !important;
  outline:none !important;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.trial-form .form-field input:focus,
.trial-form .form-field select:focus{
  border-color:#0072c6 !important; background:#fff !important;
  box-shadow:0 0 0 4px rgba(0,114,198,.12) !important;
}

/* 2) 「さらに声を見る」を必ず丸ボタン化（voices / more-link 両対応） */
.voices-cta .cta-big-button,
.more-link .cta-big-button{
  display:inline-block !important;
  background:#0072c6 !important;
  color:#fff !important;
  font-size:20px !important; font-weight:700 !important;
  padding:18px 50px !important;
  border-radius:40px !important;
  text-decoration:none !important;
  transition:background .3s, transform .2s !important;
}
.voices-cta .cta-big-button:hover,
.more-link .cta-big-button:hover{
  background:#005bb5 !important; transform:translateY(-3px) !important;
}
/* 下線が勝ってしまう環境対策 */
.voices-cta a, .more-link a{ text-decoration:none !important; }

/* 3) 青帯「顧客へのメール送信で…」カードの見栄えを固定 */
.features{ padding:40px 20px !important; }
.features .feature-card{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
}
.features .feature-heading{ color:#eaf3ff !important; opacity:1 !important; }
.features .feature-text{ color:#eaf3ff !important; }

/* indexヒーローの“3行テキスト”が下に被るのを再度ブロック（安全網） */
@media (max-width:768px){
  .right-side{ overflow:hidden !important; }
  .animated-text{ font-size:clamp(28px, 11vw, 56px) !important; line-height:1.05 !important; }
}

/* Safari等でリンク下線が局所的に復活するのを全体で抑止（必要最小限） */
a:where(.cta-big-button){ text-decoration:none !important; }
/* =========================
   FIX 1) 「顧客へのメール送信で…」の3カード
   背景：必ず白カードに（青帯はセクションだけ）
   ========================= */
.features{ background:#2c83c6; } /* セクションは青のまま */
.features .features-grid{ isolation:isolate; } /* 影の重なり防止（任意） */
.features .feature-card{
  background:#f9f9f9 !important;            /* ← 白カードに固定 */
  border:1px solid rgba(0,0,0,.08) !important;
  color:#1f2a44 !important;
}
.features .feature-heading{ color:#1f2a44 !important; }
.features .feature-text{ color:#555 !important; }

/* =========================
   FIX 2) index の申込みフォーム（trial-form）
   デスクトップは2カラム固定、900px未満で1カラム
   ========================= */
.trial-form .form-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important; /* ← 2カラム強制 */
  gap:20px !important;
}
@media (max-width: 900px){
  .trial-form .form-grid{ grid-template-columns: 1fr !important; }
}

/* 入力の見た目（線だけになるのを防ぐ／念押し） */
.trial-form .form-field input,
.trial-form .form-field select{
  width:100% !important; height:46px !important;
  padding:10px 14px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#f9fbfe !important;
  font-size:16px !important; color:#1f2937 !important;
}
.trial-form .form-field input:focus,
.trial-form .form-field select:focus{
  border-color:#0072c6 !important; background:#fff !important;
  box-shadow:0 0 0 4px rgba(0,114,198,.12) !important;
}
/* ========== FIX: index の崩れ（見出し色／フォームタイトル行） ========== */

/* 1) 「顧客へのメール送信で…」3カードの見出し色（黒→ブランド青） */
.features .feature-heading{
  color: var(--brand) !important;   /* #0b63b6 */
  font-weight: 800;
}

/* 2) 申込みフォームのタイトル行を“常に”揃える（.trial-head が有無どちらもOK） */

/* 見出しの見た目（左右余白・大きめ・濃色） */
.trial-section h2,
.trial-head h2{
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #23384d !important;
  margin: 0 !important;
}

/* タイトル行レイアウト：.trial-head があれば横並び、無くても崩れない */
.trial-head{
  max-width: 960px !important;
  margin: 0 auto 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* ボタンの正式スタイル（plan と同じ丸枠） */
.btn-outline{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:10px 18px !important;
  border:2px solid #0072c6 !important;
  color:#0072c6 !important;
  background:#fff !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-weight:700 !important;
  transition:.2s !important;
  white-space: nowrap;
}
.btn-outline:hover{ background:#e8f3ff !important; }

/* フォールバック：.trial-head が無い／aに .btn-outline が付いていない場合でも右上に丸枠で表示 */
.trial-section > a[href*="plan"]{
  /* 見た目は btn-outline と同一 */
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border:2px solid #0072c6; color:#0072c6;
  background:#fff; border-radius:999px; text-decoration:none; font-weight:700;
  /* 右寄せ配置 */
  float:right; margin:0 0 12px 12px;
}
.trial-section > a[href*="plan"]:hover{ background:#e8f3ff; }

/* フォームはデスクトップ2カラム、900px未満で1カラム（念押し） */
.trial-form .form-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:20px !important;
}
@media (max-width: 900px){
  .trial-form .form-grid{ grid-template-columns: 1fr !important; }
}
/* ============== Voices 正式デザイン（1枚目に合わせる） ============== */

/* BEFORE / AFTER のピル（サイズ・雰囲気を揃える） */
.pill{
  display:inline-block;
  font-size:13px !important;
  font-weight:800 !important;
  padding:6px 14px !important;
  border-radius:999px !important;
  letter-spacing:.02em;
  line-height:1 !important;
}
.pill-before{
  background:#ffe9ea !important;
  color:#c23b3b !important;
  border:1px solid #ffc7cc !important;
}
.pill-after{
  background:#e6f4ff !important;
  color:#0b63b6 !important;
  border:1px solid #c8e6ff !important;
}

/* 「AFTER が ✓ になってしまう」の修正 → 両方とも「・」に統一 */
.voice-before ul, .voice-after ul{
  margin:0; padding-left:18px; /* 既存のインデント維持 */
  list-style: disc;             /* ブラウザ標準の丸ポチ */
}
.voice-before ul li::marker{ content: "・ "; color:#c23b3b; }  /* 赤系の中黒 */
.voice-after  ul li::marker{ content: "・ "; color:#1f2a44; }  /* 濃紺の中黒 */

/* 行間と可読性（1枚目の詰まり感に寄せる） */
.voice-before ul li,
.voice-after  ul li{
  line-height:1.9 !important;
  font-size:16px !important;
}

/* カード見出し/ラベルの位置ズレ防止（環境差異の保険） */
.voice-top{ position:relative; }
.voice-tag{
  left:12px !important; bottom:12px !important;
  font-size:12px !important; padding:6px 10px !important;
}

/* 影やボーダーが薄くなる環境向けの補強（見た目を1枚目に合わせる） */
.voice-card{
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
  border-radius:14px !important;
}
/* =========================================================
   FIX-A: お客様の声（1枚目＝正の見た目に強制）
   - AFTER の ✓ をやめて「・」に統一
   - BEFORE/AFTER ピルの大きさ・太さを統一
   ========================================================= */

/* ピル（BEFORE/AFTER） */
.voices .pill{
  display:inline-block;
  font-size:13px !important;
  font-weight:800 !important;
  padding:6px 14px !important;
  border-radius:999px !important;
  letter-spacing:.02em;
  line-height:1 !important;
}
.voices .pill-before{
  background:#ffe9ea !important;
  color:#c23b3b !important;
  border:1px solid #ffc7cc !important;
}
.voices .pill-after{
  background:#e6f4ff !important;
  color:#0b63b6 !important;
  border:1px solid #c8e6ff !important;
}

/* 箇条書き：ブラウザ標準の記号を消して中黒「・」を描画 */
.voices .voice-before ul,
.voices .voice-after  ul{
  list-style:none !important;
  margin:0;
  padding-left:18px !important;
}
.voices .voice-before ul li,
.voices .voice-after  ul li{
  position:relative;
  line-height:1.9 !important;
  font-size:16px !important;
}
.voices .voice-before ul li::before{
  content:"・" !important;
  color:#c23b3b !important;
  position:absolute; left:-18px; top:0;
}
.voices .voice-after  ul li::before{
  content:"・" !important;
  color:#1f2a44 !important;
  position:absolute; left:-18px; top:0;
}

/* =========================================================
   FIX-B: 申込みボタン（index/order とも同じ丸ボタンに）
   - class が無くても submit ボタンなら同じ見た目に
   ========================================================= */
.trial-form .actions{ display:flex !important; justify-content:center !important; margin-top:20px !important; }

.trial-form .actions .btn-primary,
.trial-section .actions .btn-primary,
#signupForm .actions .btn-primary,
.trial-form button[type="submit"],
#signupForm  button[type="submit"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px 48px !important;
  border-radius:999px !important;
  background:#ff8000 !important;
  color:#fff !important;
  border:none !important;
  font-size:18px !important;
  font-weight:800 !important;
  box-shadow:0 10px 24px rgba(0,114,198,.25) !important;
  cursor:pointer !important;
  transition:transform .15s, background .2s, box-shadow .2s !important;
}
.trial-form .actions .btn-primary:hover,
.trial-section .actions .btn-primary:hover,
#signupForm .actions .btn-primary:hover,
.trial-form button[type="submit"]:hover,
#signupForm  button[type="submit"]:hover{
  background:#df7000 !important;
  transform:translateY(-2px) !important;
}

/* 念押し：index の trial-form を2カラム、900px未満で1カラム */
.trial-form .form-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
}
@media (max-width:900px){
  .trial-form .form-grid{ grid-template-columns:1fr !important; }
}
/* =========================
   Voices: BEFORE＝・ / AFTER＝✓（二重防止付き）
   ========================= */
.voices .voice-before ul,
.voices .voice-after  ul{
  list-style: none !important;
  margin: 0;
  padding-left: 22px !important;
}
/* 先頭に本文として書かれた「・」を無効化（二重防止） */
.voices .voice-before ul li::first-letter,
.voices .voice-after  ul li::first-letter{
  font-size: 0 !important;
}

.voices .voice-before ul li,
.voices .voice-after  ul li{
  position: relative;
  line-height: 1.9 !important;
  font-size: 16px !important;
}

/* BEFORE → ・（赤系） */
.voices .voice-before ul li::before{
  content: "・" !important;
  position: absolute; left: -18px; top: .1em;
  color: #c23b3b !important;
  font-weight: 900;
}

/* AFTER → ✓（ブランド青） */
.voices .voice-after ul li::before{
  content: "✓" !important;
  position: absolute; left: -20px; top: 0;
  color: #0b63b6 !important;
  font-weight: 900;
}

/* =========================
   申込みボタンを“丸オレンジ”で統一（input/button どちらでも）
   ========================= */
.trial-form .actions{ display:flex !important; justify-content:center !important; margin-top:20px !important; }

.trial-form input[type="submit"],
#signupForm  input[type="submit"],
.trial-form button[type="submit"],
#signupForm  button[type="submit"],
.trial-form .actions .btn-primary,
#signupForm  .actions .btn-primary{
  -webkit-appearance:none; appearance:none;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px 48px !important;
  border-radius:999px !important;
  background:#ff8000 !important;
  color:#fff !important;
  border:none !important;
  font-size:18px !important;
  font-weight:800 !important;
  box-shadow:0 10px 24px rgba(0,114,198,.25) !important;
  cursor:pointer !important;
  transition:transform .15s, background .2s, box-shadow .2s !important;
}
.trial-form input[type="submit"]:hover,
#signupForm  input[type="submit"]:hover,
.trial-form button[type="submit"]:hover,
#signupForm  button[type="submit"]:hover,
.trial-form .actions .btn-primary:hover,
#signupForm  .actions .btn-primary:hover{
  background:#df7000 !important;
  transform:translateY(-2px) !important;
}
/* ===== Voices: BEFORE=・ / AFTER=✓（1文字目が消えない版） ===== */

/* 先頭文字を消してしまう旧指定の打ち消し */
.voices .voice-before ul li::first-letter,
.voices .voice-after  ul li::first-letter{
  font-size: inherit !important;   /* ← 1文字目を戻す */
}

/* 素のマーカーは使わない */
.voices .voice-before ul,
.voices .voice-after  ul{
  list-style: none !important;
  margin: 0;
  padding-left: 1.4em !important;  /* 疑似マーカーぶんの余白 */
}

/* 行間・サイズ */
.voices .voice-before ul li,
.voices .voice-after  ul li{
  position: relative;
  line-height: 1.9 !important;
  font-size: 16px !important;
}

/* BEFORE → ・（赤） */
.voices .voice-before ul li::before{
  content: "・" !important;
  position: absolute; left: -1.05em; top: .06em;
  color: #c23b3b !important; font-weight: 900;
}

/* AFTER → ✓（ブランド青） */
.voices .voice-after ul li::before{
  content: "✓" !important;
  position: absolute; left: -1.15em; top: -.05em;
  color: #0b63b6 !important; font-weight: 900;
}

/* テキストとして残っている中点「・」だけを覆う“狭いマスク”
   （本文1文字目には触れない幅に調整） */
.voices .voice-before ul li::after,
.voices .voice-after  ul li::after{
  content: "";
  position: absolute;
  left: -1.15em; top: .02em;
  width: .8em; height: 1.2em;       /* ← 中点だけ覆う幅 */
  background: #f9fbff;              /* voice-card の背景色に合わせる */
  pointer-events: none;
  z-index: 0;
}
/* =========================
   Voices 最終FIX
   - BEFORE: ・ / AFTER: ✓ を維持
   - 先頭文字が消える副作用を無効化
   - テキストを太字寄りに戻す
   ========================= */

/* 先頭文字を消す旧指定の完全無効化（色/サイズの両方を元に） */
.voices .voice-before ul li::first-letter,
.voices .voice-after  ul li::first-letter{
  font-size: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
}

/* 素のマーカーは使わず、疑似マーカーで統一表示 */
.voices .voice-before ul,
.voices .voice-after  ul{
  list-style: none !important;
  margin: 0;
  padding-left: 1.6em !important;   /* マーカーぶんの余白 */
}

/* 本文の太さを戻す（細く見えるのを防止） */
.voices .voice-before ul li,
.voices .voice-after  ul li{
  position: relative;
  line-height: 1.9 !important;
  font-size: 16px !important;
  font-weight: 600 !important;      /* ← 太字寄りに（従来の見え方へ） */
  font-family: Arial, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif !important;
}

/* BEFORE → 赤い中黒「・」 */
.voices .voice-before ul li::before{
  content: "・" !important;
  position: absolute; left: 0; top: .06em;
  transform: translateX(-1.2em);
  color: #c23b3b !important;
  font-weight: 900 !important;
}

/* AFTER → 青いチェック「✓」 */
.voices .voice-after ul li::before{
  content: "✓" !important;
  position: absolute; left: 0; top: -.05em;
  transform: translateX(-1.25em);
  color: #0b63b6 !important;
  font-weight: 900 !important;
}
/* ===== 見出しフォントを正に統一（太字800・擬似ボールド無効） ===== */
:root{ --heading-font: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Meiryo", "メイリオ", system-ui, sans-serif; }

/* すべての大見出しを対象（フォーム見出し/各セクション見出しを網羅） */
.trial-head h2,
.trial-section h2,
.pricing-title,
.features-title,
.steps-title,
.more-features .features-title,
.achievements-title,
.voices-title,
.page-title,
.title,
h1.tit,
.pc-title {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;          /* 正の太さ */
  font-synthesis-weight: none !important; /* 擬似ボールドを禁止（にじみ防止） */
  letter-spacing: .02em !important;     /* ほんの少し締める */
  -webkit-font-smoothing: antialiased;  /* 視認性UP（Mac系） */
  text-rendering: optimizeLegibility;   /* Winでも滑らかさUP */
}

/* フォーム見出しのサイズは正のまま維持（必要なら調整） */
.trial-head h2, .trial-section h2{ font-size: 32px !important; color:#23384d !important; margin:0 !important; }
/* ===== Voices: マーカーを確実表示（BEFORE=・／AFTER=✓） ===== */

/* 既存のマーカー／インデントを一旦リセット */
.voices .voice-before ul,
.voices .voice-after  ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* li をフレックス化して、記号は ::before を“文字”として並べる */
.voices .voice-before ul li,
.voices .voice-after  ul li{
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  line-height: 1.9 !important;
  font-size: 16px !important;
  font-weight: 600 !important; /* ← 太めに戻す */
  font-family: Arial, system-ui, -apple-system, "Hiragino Sans",
               "Noto Sans JP", sans-serif !important;
}

/* BEFORE → 赤い中黒「・」 */
.voices .voice-before ul li::before{
  content: "・" !important;
  flex: 0 0 auto !important;
  color: #c23b3b !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* AFTER → 青いチェック「✓」 */
.voices .voice-after ul li::before{
  content: "✓" !important;
  flex: 0 0 auto !important;
  color: #0b63b6 !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* 先頭文字を消してしまう旧ルールの影響を確実に無効化 */
.voices .voice-before ul li::first-letter,
.voices .voice-after  ul li::first-letter{
  font-size: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
}
/* ===== Voices: マーカーを元の仕様に完全復帰（BEFORE=・ / AFTER=✔） ===== */

/* 1) UL/LI の状態を“リスト本来の表示”に戻す */
.voices .voice-before ul,
.voices .voice-after  ul{
  list-style: initial !important;   /* ← none を打ち消す */
  padding-left: 18px !important;    /* 既定インデント */
  margin: 0 !important;
}
.voices .voice-before ul li,
.voices .voice-after  ul li{
  display: list-item !important;    /* ← flex等の上書きを解除 */
  position: static !important;      /* 疑似要素用の相対配置を解除 */
  line-height: 1.9 !important;
  font-size: 16px !important;
  font-weight: 600 !important;      /* 太字寄りに戻す（細く見える対策） */
  font-family: Arial, system-ui, -apple-system, "Hiragino Sans",
               "Noto Sans JP", sans-serif !important;
}

/* 2) 過去の ::before / ::after で追加した記号やマスクを“無効化” */
.voices .voice-before ul li::before,
.voices .voice-after  ul li::before,
.voices .voice-before ul li::after,
.voices .voice-after  ul li::after{
  content: none !important;
  background: none !important;
}

/* 3) 本来の ::marker で記号を描画（BEFORE=・、AFTER=✔） */
.voices .voice-before ul li::marker{
  content: "• " !important;
  color: #c23b3b !important;
  font-weight: 900 !important;
}
.voices .voice-after  ul li::marker{
  content: "✔ " !important;
  color: #0b63b6 !important;
  font-weight: 900 !important;
}

/* 4) 念押し：先頭文字を消す指定が残っていても無効化 */
.voices .voice-before ul li::first-letter,
.voices .voice-after  ul li::first-letter{
  font-size: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
}
/* ==== 右下固定CTAをヘッダーと同じオレンジに統一 ==== */
:root{
  --btn-orange: #ff8000;
  --btn-orange-hover: #df7000;
}

/* 2つとも強制オレンジ化（既存の青を上書き） */
.f-cta .cta,
.f-cta .cta-trial,
.f-cta .cta-pricing{
  background: var(--btn-orange) !important;
  color: #fff !important;
  border: none !important;
  text-decoration: none !important;
  border-radius: 999px !important;    /* 形状はそのまま丸 */
  font-weight: 800 !important;        /* ヘッダーと同じ太さ感 */
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

/* ホバーもヘッダーと同じトーンに */
.f-cta .cta:hover,
.f-cta .cta-trial:hover,
.f-cta .cta-pricing:hover{
  background: var(--btn-orange-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;
}

/* 万一のリンク状態も白文字で固定 */
.f-cta .cta:link,
.f-cta .cta:visited{ color:#fff !important; }
/* ▼「顧客へのメール送信で…」の3カードだけ幅を絞って中央寄せ */
#feature-cards .features-grid{
  max-width: 1200px !important;  /* 正と同値：箱幅を作る */
  margin: 0 auto !important;     /* 中央寄せ */
  padding: 0 16px !important;    /* 帯の端とカード列の間に少し余白 */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 24px !important;
}

/* タブレット以下は従来レスポンシブを維持 */
@media (max-width: 1024px){
  #feature-cards .features-grid{ max-width: 900px !important; }
}
@media (max-width: 640px){
  #feature-cards .features-grid{
    max-width: none !important;
    padding: 0 12px !important;
    grid-template-columns: 1fr !important;
  }
}
/* === Hero タイトルのサイズ調整（上：小さめ／下：大きめ） === */
.service-name{
  text-align:center;
  line-height:1.1;
  margin-top: 18px;            /* 好みで調整 */
  color:#0066cc;
  font-weight:800;             /* ベースの太さ */
}

/* 上の「メール配信サービス」 */
.service-name .label{
  display:inline-block;
  font-weight:700;
  font-size: clamp(22px, 3vw, 36px);   /* ← 小さめ */
  letter-spacing:.02em;
}

/* 下の「mel-link」 */
.service-name .brand{
  display:block;
  font-weight:900;
  font-size: clamp(44px, 7vw, 80px);   /* ← 大きめ */
  letter-spacing:.02em;
}

/* 余白や影のバランス（任意） */
@media (max-width:640px){
  .service-name{ margin-top: 14px; }
}
/* ===== 機能一覧ページの最小パッチ ===== */

/* 1) Voices：マーカーを正しく出す（BEFORE=・／AFTER=✓） */
.wrap .voices .voice-before ul,
.wrap .voices .voice-after  ul{
  list-style: initial !important;          /* 既存の none を打ち消し */
  padding-left: 18px !important;
  margin: 0 !important;
}
.wrap .voices .voice-before ul li,
.wrap .voices .voice-after  ul li{
  display: list-item !important;           /* flex などを打ち消し、基準に戻す */
  line-height: 1.9 !important;
  font-size: 16px !important;
  font-weight: 600 !important;             /* 文字が細く見える対策 */
}
/* BEFORE → 赤い中黒 */
.wrap .voices .voice-before ul li::marker{
  content: "• " !important;
  color: #c23b3b !important;
  font-weight: 900 !important;
}
/* AFTER → 青いチェック */
.wrap .voices .voice-after ul li::marker{
  content: "✔ " !important;
  color: #0b63b6 !important;
  font-weight: 900 !important;
}

/* 2) 説明文のズレを補正（リード文とカード本文） */
.wrap .lead{
  max-width: 960px !important;
  margin: 0 auto 10px !important;
  text-align: center !important;
  line-height: 1.9 !important;
  color:#445 !important;
}
.wrap .card p{ margin: .4em 0 !important; line-height: 1.9 !important; }

/* 3) 「独自」バッジを見出し左にきれいに並べる */
.wrap .card h3{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin:6px 0 8px !important;
}
.wrap .card h3 .badge{
  display:inline-block !important;
  margin-right: 0 !important;
  transform: translateY(-1px);  /* ベースラインを微調整 */
}

/* 参考：voices セクション全体の余白（縦）だけ整える */
.wrap .voices{ padding: 60px 16px !important; }
.wrap .voices-title{ margin: 14px 0 18px !important; }
.wrap .voices-list{ gap:24px !important; }
/* 見出し用フォント（未読込なら有効、既に読んでいれば2重読込されません） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;800;900&display=swap");

/* orderページのトップ見出しを太字ロック（正の見た目） */
main > h1:first-of-type,
body.order-page h1,                /* ← bodyにclassがあればここでも効く */
.trial-head h2 {                   /* 既存の体験フォーム見出しも揃える */
  font-family: "Noto Sans JP","Hiragino Sans","メイリオ",system-ui,sans-serif !important;
  font-weight: 800 !important;          /* 太さを固定 */
  font-synthesis-weight: none !important; /* 擬似ボールド無効化（にじみ防止） */
  color: #23384d !important;
  letter-spacing: .02em !important;
  margin: 0 0 8px !important;
}
/* ===== plan: ボタンの下線リンクを消す（全状態） ===== */
.price-card a,
.price-card a:link,
.price-card a:visited,
.price-card a:hover,
.price-card a:active,
.cta-button,
.cta-button:link,
.cta-button:visited,
.cta-button:hover,
.cta-button:active,
.cta-button.outline,
.cta-button.outline:hover,
.cta-big-button,
.cta-big-button:link,
.cta-big-button:visited,
.cta-big-button:hover,
.cta-big-button:active {
  text-decoration: none !important;
  border-bottom: 0 !important; /* 万一の下線系も無効化 */
}

/* アクセシビリティ用にフォーカスだけ見えるように */
.price-card a:focus-visible,
.cta-button:focus-visible,
.cta-big-button:focus-visible{
  outline: 2px solid #0b63b6;
  outline-offset: 2px;
}
/* ▼ ボタンの枠線を復活（アウトライン型） */
.price-card .cta-button.outline{
  border: 2px solid #ff8000 !important;         /* 下側も含めて枠線を再設定 */
  border-radius: 12px !important;
  background: transparent !important;
  color: #ff8000 !important;
}
.price-card .cta-button.outline:hover{
  background:#ff8000 !important;
  color:#fff !important;
}

/* ▼ 下線を消す対象を“ボタン以外のリンク”に限定（安全版） */
.price-card a:not(.cta-button):not(.cta-big-button),
.price-card a:not(.cta-button):not(.cta-big-button):link,
.price-card a:not(.cta-button):not(.cta-big-button):visited,
.price-card a:not(.cta-button):not(.cta-big-button):hover,
.price-card a:not(.cta-button):not(.cta-big-button):active{
  text-decoration: none !important;           /* 下線だけ外す */
  /* ※ border-bottom は触らない */
}
