:root{
    --blue:#0078a4;
    --deep:#026386;
    --green:#18c38d;
    --muted:#898989;
    --bgLight:#e7f1f5;
    --border:#f0f0f0;
    --shadow:0 2px 4px rgba(0,0,0,0.1);
    --font:"Noto Sans JP", sans-serif;
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{ font-family:var(--font); font-size:14px; line-height:1.4; color:#000; background:#fff; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; height:auto; display:block; }
  .page{ width:100%; }
  
  /* helpers */
  .container{ max-width:1280px; width:90%; margin:0 auto; }
  .center{ text-align:center; }
  .mt8{ margin-top:8px; }
  .mt20{ margin-top:20px; }
  .mb8{ margin-bottom:8px; }
  .fw700{ font-weight:700; }
  .c-green{ color:var(--green); }
  .c-deep{ color:var(--deep); }
  .muted{ color:var(--muted); }
  .muted12{ font-size:12px; color:var(--muted); }
  .strike{ text-decoration:line-through; color:var(--muted); font-size:14px; }
  .strike12{ text-decoration:line-through; color:var(--muted); font-size:12px; }
  .redTiny{ color:#e51520; font-size:12px; margin:0; }
  .blueSmall{ color:var(--blue); font-size:14px; margin:4px 0 0; }
  
  /* Header */
  .header{
    position:fixed; top:0; left:0; right:0;
    z-index:999;
    background:#fff;
    border-top:6px solid var(--blue);
    box-shadow:var(--shadow);
    padding:18px 40px 24px;
  }
  .header__inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
  }
  .brand__title{
    font-size:24px; font-weight:800; color:var(--blue);
    display:flex; align-items:center;
  }
  .brand__img{ height:32px; width:auto; }
  .brand__sub{
    font-size:12px; font-weight:500; color:var(--muted); margin-left:8px;
  }
  .nav{ display:flex; align-items:center; gap:0; }
  .nav__link{
    padding:8px 16px;
    border-right:1px solid #f0f0f0;
    font-size:14px; font-weight:700;
  }
  .nav__link:last-child{ border-right:none; }
  .header__cta{ display:flex; align-items:center; gap:16px; }
  
  .header-spacer{ height:100px; }
  
  /* Buttons */
  .btn{
    display:inline-block;
    border-radius:100px;
    font-weight:700;
    text-align:center;
    line-height:1.35;
    transition:0.2s;
  }
  .btn--sm{ padding:9px 20px; font-size:12px; background:var(--green); color:#fff; }
  .btn--sm2{ padding:17px 20px; font-size:12px; color:#fff; background:linear-gradient(90deg, #017eac 0%, #059db0 100%); }
  .btn--xl{
    padding:20px 40px;
    font-size:18px; font-weight:800;
    color:#fff;
    background:linear-gradient(90deg, #18c38d 0%, #0fa67a 100%);
    box-shadow:0 4px 8px rgba(24,195,141,0.3);
  }
  .btn__note{ display:block; font-size:14px; margin-bottom:4px; }
  .btn__mini{ display:block; font-size:12px; font-weight:700; }
  .btn--outlineBlue{
    display:inline-flex; align-items:center; gap:8px;
    padding:16px 32px;
    border:2px solid var(--blue);
    background:#fff;
    color:var(--blue);
    font-size:16px; font-weight:700;
  }
  .btn--md{
    display:inline-flex; align-items:center; gap:8px;
    padding:16px 32px;
    border-radius:100px;
    font-size:16px; font-weight:700;
    color:#fff;
    background:linear-gradient(90deg, #18c38d 0%, #0fa67a 100%);
  }
  .btn--white{
    padding:16px 32px;
    background:#fff;
    color:var(--blue);
    font-size:16px; font-weight:700;
    border-radius:100px;
  }
  
  /* Hero */
  .hero{
    background:linear-gradient(to right, rgba(255,255,255,0.1), rgba(1,126,172,0.1));
  }
  .hero__inner{
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    gap:24px;
  }
  .hero__left{
    flex:1;
    padding:38px 0 35px;
  }
  .hero__badgeWrap{ text-align:center; margin-bottom:18px; }
  .hero__badge{
    display:inline-block;
    padding:8px 24px;
    background:var(--blue);
    color:#fff;
    border-radius:100px;
    font-size:14px;
    font-weight:700;
  }
  .hero__title{
    margin-top:18px;
    line-height:1.35;
    font-weight:bold;
    text-align:center;
  }
  .t24{ font-size:24px; }
  .t38{ font-size:38px; }
   .t58{ font-size:58px; }
    .hero__bubbles{
      display:flex;
      justify-content:center;
      gap:32px;
      padding:34px 0;
      flex-wrap:wrap;
    }
    
    /* --- 修正箇所: 円形から角丸正方形へ --- */
    .bubble{
      width:140px; height:140px;
      /* border-radius:90px; 元の丸い指定 */
      border-radius:20px; /* 新しい指定: 角丸正方形 */
      background:var(--blue);
      box-shadow:0 2px 4px rgba(0,0,0,0.15);
      display:flex; align-items:center; justify-content:center;
      text-align:center;
      color:#fff;
      font-size:16px;
      font-weight:bold;
      line-height:1.33;
    }
    
    .hero__cta{ text-align:center; }
    
  
  .hero__right{
    flex:0 0 400px;
    text-align:right;
    padding-bottom:20px;
  }
  .priceBox{
    background:#fff;
    border:3px solid var(--green);
    border-radius:16px;
    padding:20px;
    display:inline-block;
    text-align:center;
    margin-bottom:20px;
  }
  .priceBox__strike{ font-size:14px; color:var(--muted); text-decoration:line-through; margin:0; }
  .priceBox__lead{ font-size:16px; color:var(--blue); font-weight:700; margin:6px 0 0; }
  .priceBox__price{
    font-family:Roboto, sans-serif;
    font-size:48px; font-weight:800; color:var(--green);
    margin:4px 0 0;
  }
  .priceBox__yen{ font-size:24px; }
  .priceBox__foot{ font-size:14px; color:var(--blue); font-weight:700; margin:4px 0 0; }
  .priceBox__warn{ font-size:12px; color:#e51520; margin:8px 0 0; }
  
  .heroImg{
    width:300px; height:300px;
    background:var(--bgLight);
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    margin-left:auto;
    color:var(--muted);
    font-size:14px;
    overflow:hidden;
  }
  .heroImg img{ width:100%; height:100%; object-fit:cover; }
  
  /* Authority */
  /* Authority */
  /* --- 修正箇所: 実績エリアをボックス化 --- */
  .authority{ background:#ededed; padding:24px 0; }
  .authority__card{
    border-radius:24px; /* ボックスが収まりやすいよう少し丸みを抑える */
    background:#fff;
    display:flex;
    padding:20px 32px;
    align-items:center;
    gap:24px;
    justify-content:center;
    max-width:960px; /* ボックスが横並びしやすいよう幅を拡張 */
    margin:0 auto;
    flex-wrap:wrap;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
  }
  .authority__label{ 
    color:var(--muted); 
    font-size:16px; 
    font-weight:700; 
    white-space:nowrap; 
  }
  .authority__grid{ 
    display:flex; 
    align-items:stretch; 
    gap:16px; 
    flex-wrap:wrap; 
    justify-content:center; 
    flex:1;
  }
  .authority__item{ 
    background:var(--bgLight); /* 背景色を追加 */
    border:1px solid rgba(0,120,164,0.1); /* 薄い青枠 */
    border-radius:12px; /* 角丸 */
    padding:12px 20px;
    text-align:center; 
    font-size:12px; 
    color:var(--blue); 
    font-weight:700; 
    flex:1;
    min-width:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .authority__big{ 
    font-size:22px; 
    display:block; 
    margin-top:4px; 
    color:var(--deep);
  }
  .authority__mid{ 
    font-size:15px; 
    display:block; 
    margin-top:4px; 
    color:var(--deep);
  }
  
  /* Headings */
  .h2{
    font-size:42px;
    font-weight:800;
    line-height:1.4;
    margin:0;
  }
  .h2--blue{ color:var(--blue); }
  .h2--white{ color:#fff; }
  .h2__sub{ font-size:36px; }
  .h2__sub2{ font-size:36px; }
  
  /* About */
  .about{ padding:40px 0 80px; text-align:center; }
  .about__lead{
    margin-top:16px;
    font-size:24px;
    font-weight:500;
    color:var(--muted);
  }
  .flowCard{
    margin-top:40px;
    background:var(--bgLight);
    border-radius:16px;
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
  }
  .flowCard__box{
    background:#fff;
    border-radius:16px;
    padding:20px;
    margin-bottom:10px;
    min-width:260px;
  }
  .flowCard__arrow{ font-size:40px; color:var(--blue); }
  .flowCard__right{
    background:var(--blue);
    border-radius:16px;
    padding:30px 40px;
    color:#fff;
    text-align:center;
    min-width:320px;
  }
  .flowCard__title{ font-size:20px; font-weight:700; margin:0; }
  .flowCard__big{ font-size:48px; font-weight:800; color:var(--green); margin:10px 0; }
  .flowCard__desc{ font-size:16px; margin:0; }
  
  /* Promo */
  .promo{ position:relative; }
  .promo__triangle{
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:0; height:0;
    border-top:28px solid #fff;
    border-bottom:28px solid transparent;
    border-left:37px solid transparent;
    border-right:37px solid transparent;
  }
  .promo--light{ background:var(--bgLight); }
  .promo--dark{ background:var(--deep); }
  .promo__triangle--dark{ border-top-color:#fff; }
  .promo__inner{ padding:40px 0; text-align:center; }
  .promo__text{ font-size:24px; font-weight:800; margin:0; }
  .promo__text--blue{ color:var(--blue); }
  .promo__text--white{ color:#fff; }
  .promo__sub{ display:block; font-size:16px; margin-top:4px; }
  .num48{ font-family:Roboto, sans-serif; font-size:48px; }
  .num28{ font-size:28px; }
  .promo__btns{ display:flex; justify-content:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
  
  /* Features */
  .features{ background:var(--deep); padding:40px 0 90px; }
  .features__grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    max-width:1200px;
    margin:40px auto 0;
  }
  .featureCard{
    background:#fff;
    border-radius:16px;
    padding:24px 32px;
    display:flex;
    align-items:center;
    gap:20px;
  }
  .featureCard__tag{
    background:var(--bgLight);
    border-radius:8px;
    padding:8px 12px;
    font-size:12px;
    color:var(--blue);
    font-weight:700;
    text-align:center;
  }
  .featureCard__num{ font-size:20px; }
  .featureCard__body{ flex:1; }
  .featureCard__title{ color:var(--blue); font-size:20px; font-weight:800; margin:0 0 8px; }
  .featureCard__desc{ color:var(--muted); font-size:14px; margin:0; }
  /* --- 修正箇所: アイコン画像を1.25倍に拡大 (75px -> 94px) --- */
  .featureCard__icon{
    width:94px; height:94px; /* 75px * 1.25 */
    background:var(--bgLight);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted);
    font-size:10px;
    flex-shrink:0; /* 横幅が狭くなってもアイコンが潰れないように固定 */
  }
  .featureCard__icon img{ width:100%; height:100%; object-fit:contain; }

/* AI Comparison Section - デザイン調整版 */
.ai-compare {
  padding: 60px 0 80px;
  background: var(--bgLight); /* サイト共通の薄い水色背景 */
}

/* 見出しをサイト共通の青色スタイルに合わせる */
.ai-compare .h2 {
  font-size: 36px; /* サイトのh2に近いサイズ */
  color: var(--blue);
  text-align: center;
  margin-bottom: 24px;
}

/* リード文を .about__lead 等に合わせる */
.ai-compare__lead {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  margin-bottom: 48px;
  line-height: 1.8;
}

.ai-compare__grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch; /* 高さを揃える */
}

/* Box Common Styles - カードデザインの統一 */
.ai-box {
  flex: 1;
  background: #fff;
  border-radius: 16px; /* サイト共通の丸み（featureCard等と同じ） */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* authority__cardと同じ柔らかい影 */
}

.ai-box__head {
  padding: 24px;
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.05em;
}

.ai-box__list {
  list-style: none;
  padding: 32px;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-box__list li {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #333;
}
.ai-box__list li:last-child {
  margin-bottom: 0;
}

/* Left Box (ChatGPT - Bad) */
.ai-box--bad {
  border: 2px solid #e0e0e0; /* 控えめなグレー枠 */
}
.ai-box--bad .ai-box__head {
  background: #f0f0f0; /* サイトの薄いグレー */
  color: var(--muted);
}
/* ×アイコンのデザイン */
.ai-box--bad .ai-box__list li.bad::before {
  content: "×";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: #fff0f0; /* 薄い赤背景 */
  color: #e51520; /* 赤文字 */
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Right Box (Uchidori - Good) */
.ai-box--good {
  /* 比較表やプラン表に合わせてブランドカラーで強調 */
  border: 4px solid var(--blue); 
  position: relative;
}
.ai-box--good .ai-box__head {
  background: var(--blue); /* ブランドカラー背景 */
  color: #fff; /* 白文字 */
}
/* ◎アイコンのデザイン */
.ai-box--good .ai-box__list li.good::before {
  content: "◎";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: #eafbf6; /* 薄い緑背景 */
  color: var(--green); /* 緑文字 */
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .ai-compare__grid {
    flex-direction: column;
    gap: 24px;
  }
  .ai-compare .h2 { font-size: 26px; }
  .ai-compare__lead { font-size: 14px; text-align: left; }
  .ai-box__list { padding: 24px; }
}
/* Box Common Styles */
.ai-box {
  flex: 1;
  background: #fff;
  border-radius: 4px; /* 画像に合わせて角丸は小さめ */
  overflow: hidden;
}

.ai-box__head {
  background: #dcdde0; /* 画像のようなグレー背景 */
  padding: 20px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: #000;
}

.ai-box__list {
  list-style: none;
  padding: 32px;
  margin: 0;
}

.ai-box__list li {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-box__list li:last-child {
  margin-bottom: 0;
}

/* Left Box (Bad) */
.ai-box--bad {
  border: 1px solid #ccc;
}
.ai-box--bad .ai-box__list li.bad::before {
  content: "×";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #e51520; /* 赤色 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  width: 24px;
}

/* Right Box (Good - Uchidori) */
.ai-box--good {
  border: 2px solid var(--deep); /* 画像に合わせて右側を太枠強調 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ai-box--good .ai-box__head {
  background: #d1d5db; /* 少し濃いめ、または左と同じでも可 */
}
.ai-box--good .ai-box__list li.good::before {
  content: "◎";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--green); /* サイト共通の緑色 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  width: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .ai-compare__grid {
    flex-direction: column;
    gap: 24px;
  }
  .sp-only { display: block; }
  .pc-only { display: none; }
  .ai-compare .h2 { font-size: 24px; }
  .ai-compare__lead { text-align: left; font-size: 13px; }
}
@media (min-width: 769px) {
  .sp-only { display: none; }
  .pc-only { display: inline; }
}
  
  /* Comparison */
  .comparison{ padding:40px 0 80px; }
  .comparison__lead{
    margin-top:16px;
    font-size:24px;
    font-weight:500;
    color:var(--muted);
  }
  .tableWrap{ margin-top:40px; overflow-x:auto; }
  .compareTable{ width:100%; border-collapse:collapse; font-size:14px; min-width:860px; }
  .compareTable th, .compareTable td{ padding:16px; border-bottom:1px solid #e0e0e0; }
  .compareTable thead th{ color:#fff; font-weight:700; }
  .th--brand{ background:var(--blue); font-size:16px; }
  .th--brand span{ font-size:12px; font-weight:700; }
  .th--gray{ background:#666; }
  .compareTable thead th:first-child{ background:var(--muted); }
  .td--label{ background:#f5f5f5; font-weight:700; }
  .td--brand{ background:var(--bgLight); text-align:center; font-weight:700; color:var(--blue); }
  .compareTable tbody td:not(.td--label):not(.td--brand){ text-align:center; color:#666; }
  
  /* Pricing */
  .pricing{ background:#fff; padding:40px 0 80px; }
  .pricing__lead{
    margin-top:16px;
    font-size:24px;
    font-weight:500;
    color:var(--blue);
  }
  .pricing__grid{
    display:flex;
    gap:24px;
    margin:40px auto 0;
    max-width: 1080px; /* 全体の幅を少し狭めて引き締める */
    width: 100%;
    align-items: stretch;
  }
  .plan{ background:#fff; border-radius:16px; }
  
  /* --- メインプラン調整 --- */
  .plan--main{
    flex:1.2; /* 幅の比率を調整し、横に広がりすぎないようにする */
    border:4px solid var(--green);
    overflow:hidden;
    box-shadow:0 4px 16px rgba(24,195,141,0.2);
    display: flex;
    flex-direction: column;
  }
  .plan__head{
    background:var(--green);
    color:#fff;
    padding:16px;
    text-align:center;
  }
  .plan__mini{ font-size:14px; margin:0; font-weight:700; opacity:0.95; }
  .plan__title{ font-size:26px; font-weight:800; margin:4px 0 0; }
  
  .plan__body{ 
    padding:32px; /* 内部余白を増やして密度感を出す */
    text-align:center; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; /* 上詰めにして間延び防止 */
  }
  
  .plan__term{ font-size:32px; font-weight:800; color:var(--blue); margin:0; }
  .plan__term span{ font-size:16px; margin-left:4px; }
  
  /* 価格ボックスのデザイン強化とサイズ調整 */
  .plan__priceBox{
    margin:20px 0 24px; /* 上下の隙間を調整 */
    padding:24px 16px;
    background:#f0fcf8; /* 背景色をつけてエリアを明確化 */
    border:2px solid #bcece0;
    border-radius:12px;
  }
  .strike{ text-decoration:line-through; color:var(--muted); font-size:14px; display:block; margin-bottom:4px; }
  .blueSmall{ color:var(--blue); font-size:16px; font-weight:700; margin:0; }
  
  /* 価格を目立たせる */
  .plan__price{
    font-family:Roboto, sans-serif;
    font-size:62px; /* サイズアップ */
    font-weight:800;
    color:var(--green);
    margin:4px 0;
    line-height:1;
    letter-spacing:-2px;
  }
  .plan__price span{ font-size:24px; font-weight:700; margin-left:4px; letter-spacing:0; }
  .redTiny{ color:#e51520; font-size:13px; font-weight:700; margin:0; }
  
  /* リストのデザイン調整と配置 */
  .plan__list{ 
    text-align:left; 
    font-size:14px; 
    color:#333; 
    margin-top:0; /* autoを削除して隙間を詰める */
    background:var(--bgLight); /* 背景色追加でボックス感 */
    padding:20px;
    border-radius:12px;
  }
  .plan__list p{ text-align:center; margin-bottom:12px; }
  .plan__list ul{ padding-left:0; list-style:none; margin:0; }
  .plan__list li{ 
    margin-bottom:8px; 
    display:flex; 
    align-items:center; 
    font-weight:700;
    color:var(--deep);
  }
  .plan__list li::before{
    content:"✔";
    color:var(--green);
    margin-right:8px;
    font-weight:800;
  }
  
  /* サブプラン側 */
  .subPlans{ display:flex; flex-direction:column; gap:20px; flex: 1; }
  .plan--sub{
    border:2px solid #e0e0e0;
    padding:24px;
    width:100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sub__title{ font-size:18px; font-weight:700; color:var(--blue); margin:0 0 12px; }
  .sub__price{ font-size:24px; font-weight:800; color:var(--green); margin:0; }
  .sub__price span{ font-size:14px; }
  
  .payOpt{
    margin-top:24px;
    background:#f5f5f5;
    border-radius:8px;
    padding:16px 24px;
    text-align:center;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    color:#666;
  }
  
  /* Speed */
  .speed{ background:#ededed; padding:40px 0 80px; }
  .speed__pill{
    display:inline-block;
    padding:10px 40px;
    background:var(--blue);
    color:#fff;
    border-radius:90px;
    font-size:24px;
    font-weight:800;
  }
  .speed__lead{
    margin-top:16px;
    font-size:24px;
    font-weight:500;
  }
  .steps{
    margin-top:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .step{ text-align:center; }
  .step__bubble{
    width:80px; height:80px; border-radius:50%;
    background:var(--green);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700;
    margin:0 auto 10px;
  }
  .step__label{ font-size:14px; color:var(--blue); font-weight:700; margin:0; }
  .step__arrow{ font-size:24px; color:var(--blue); }
  .stepCard{
    background:#fff;
    border-radius:16px;
    padding:24px;
    text-align:center;
    min-width:180px;
  }
  .stepCard__num{
    background:var(--blue);
    color:#fff;
    border-radius:8px;
    padding:4px 12px;
    font-size:12px;
    font-weight:700;
    display:inline-block;
    margin-bottom:8px;
  }
  .stepCard__title{ font-size:16px; font-weight:700; color:var(--blue); margin:0; }
  .stepCard__desc{ font-size:12px; color:var(--muted); margin:4px 0 0; }
  /* Cases */
  .cases{ padding:40px 0 80px; }
  
  /* --- 修正箇所: 縦積みから横3カラムへ変更 --- */
  .caseList{ 
    margin-top:40px; 
    display:grid; 
    grid-template-columns:repeat(3, 1fr); /* 3列指定 */
    gap:24px; 
  }
  
  .caseItem{ 
    border-radius:16px; 
    border:3px solid var(--bgLight); 
    overflow:hidden; 
    display:flex;          /* 中身の高さを揃えるためにFlexbox化 */
    flex-direction:column;
    background:#fff;
  }
  
  .caseItem__head{
    display:flex; 
    align-items:center; 
    gap:12px; 
    padding:16px;
    border-bottom:1px solid var(--bgLight);
    min-height:80px; /* タイトルが2行になっても高さをある程度揃える */
  }
  
  .caseItem__badge{
    background:var(--blue);
    color:#fff;
    border-radius:90px;
    padding:6px 12px;
    font-size:12px;
    font-weight:700;
    flex-shrink:0;
  }
  
  .caseItem__title{ 
    color:var(--blue); 
    font-size:18px; /* 横並び用に少し文字サイズを調整 */
    font-weight:800; 
    line-height:1.4;
  }
  
  .caseItem__body{ 
    background:var(--bgLight); 
    padding:16px; 
    flex:1; /* 下部エリアを伸ばす */
    display:flex;
    flex-direction:column;
  }
  
  .caseImg{ 
    border-radius:12px; 
    margin-bottom:12px; 
    width:100%; 
    aspect-ratio:16/9; /* 画像の高さを統一 */
    object-fit:cover;
  }
  
  .caseItem__text{
    background:#fff;
    border-radius:12px;
    padding:16px;
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
    margin:0;
    flex:1; /* テキストエリアの高さを揃える */
  }

  /* Responsive エリアに追加・修正 */
  @media (max-width: 980px){
    /* ...existing code... */
    .caseList{ grid-template-columns:1fr; } /* スマホ等では1列に戻す */
  }
  
  /* FAQ */
  .faq{ padding:40px 0 80px; }
  .faqList{ margin-top:40px; list-style:none; padding:0; margin-left:0; }
  .faqItem{
    border-radius:16px;
    border:3px solid #f0f0f0;
    background:#fff;
    margin-bottom:24px;
    overflow:hidden;
    transition:0.3s;
  }
  .faqItem.is-open{ background:var(--blue); }
  .faqQ{
    width:100%;
    display:flex;
    align-items:center;
    gap:24px;
    padding:21px 74px 21px 32px;
    cursor:pointer;
    position:relative;
    background:transparent;
    border:none;
    text-align:left;
  }
  .faqQ__q{
    font-size:24px;
    font-weight:700;
    color:#2da5d1;
  }
  .faqItem.is-open .faqQ__q{ color:#fff; }
  .faqQ__text{
    font-size:18px;
    font-weight:500;
    color:#000;
  }
  .faqItem.is-open .faqQ__text{ color:#fff; }
  
  .faqQ__icon{
    position:absolute;
    right:32px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .faqQ__icon::before{
    content:"";
    display:block;
    width:20px;
    height:3px;
    background:var(--blue);
  }
  .faqQ__icon::after{
    content:"";
    position:absolute;
    display:block;
    width:3px;
    height:20px;
    background:var(--blue);
  }
  .faqItem.is-open .faqQ__icon::before{ background:#fff; }
  .faqItem.is-open .faqQ__icon::after{ display:none; }
  
  .faqA{
    display:flex;
    align-items:flex-start;
    gap:24px;
    padding:0 32px 21px;
    color:#fff;
  }
  .faqA__a{ font-size:22px; font-weight:700; }
  .faqA__text{ font-size:16px; line-height:1.6; }
  
  /* Contact */
  .contact{ background:var(--bgLight); padding:60px 0; }
  .contact__inner{ max-width:800px; }
  .contact__head{
    background:var(--blue);
    border-radius:16px;
    padding:32px;
    text-align:center;
    color:#fff;
    margin-bottom:32px;
  }
  .contact__kicker{ font-size:18px; margin:0 0 8px; }
  .contact__title{ font-size:32px; font-weight:800; margin:0; }
  
  .form{
    background:#fff;
    border-radius:16px;
    padding:32px;
  }
  .field{ margin-bottom:16px; }
  .label{ display:block; margin-bottom:8px; font-weight:700; }
  .req{ color:#e51520; }
  .hint{ font-size:12px; color:var(--muted); margin:0 0 8px; }
  
  .input, .select, .textarea{
    width:100%;
    padding:12px;
    border:1px solid #959494;
    border-radius:3px;
    background:#f5f8fa;
    font-size:14px;
    outline:none;
  }
  .textarea{ resize:vertical; }
  
  .checks{ display:flex; gap:24px; flex-wrap:wrap; }
  .check{ display:flex; align-items:center; gap:8px; cursor:pointer; }
  
  .privacy{
    font-size:12px;
    color:#666;
    margin:0 0 16px;
    line-height:1.6;
  }
  .submit{
    width:100%;
    padding:16px;
    background:var(--blue);
    color:#fff;
    border:none;
    border-radius:3px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
  }
  
  /* Footer */
  .footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:40px;
    border-top:6px solid var(--blue);
    flex-wrap:wrap;
    gap:30px;
  }
  .footer__left{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
  .footer__brand{ font-size:24px; font-weight:800; color:var(--blue); }
  .footer__nav{ display:flex; gap:40px; flex-wrap:wrap; }
  .footer__link{ color:var(--blue); font-size:15px; font-weight:500; text-decoration:underline; }
  .footer__copy{ color:var(--muted); font-size:12px; margin:0; }
  
  /* Responsive */
  @media (max-width: 980px){
    .header{ padding:14px 16px 18px; }
    .nav{ display:none; }
    .hero__inner{ flex-direction:column; align-items:stretch; }
    .hero__right{ flex:1; text-align:center; }
    .heroImg{ margin:0 auto; }
    .features__grid{ grid-template-columns:1fr; }
    .plan--main{ flex:1 1 360px; }
  }

  /* Responsive */
@media (max-width: 980px){
  .header{ padding:14px 16px 18px; }
  .nav{ display:none; }
  .hero__inner{ flex-direction:column; align-items:stretch; }
  .hero__right{ flex:1; text-align:center; }
  .heroImg{ margin:0 auto; }
  
  .features__grid{ grid-template-columns:1fr; }
  
  /* Pricingレスポンシブ修正 */
  .pricing__grid{ 
    flex-direction:column; 
    max-width:500px;
    margin: 40px auto 0;
  }
  .plan--main{ flex:auto; width:100%; }
  
  /* --- 修正箇所: 価格のはみ出し防止 --- */
  /* カードと価格ボックスの左右余白を詰めて、文字スペースを確保 */
  .plan__body{ padding: 24px 12px; }
  .plan__priceBox{ padding: 20px 8px; }
  
  /* フォントサイズを縮小し、1行に収める */
  .plan__price{ 
    font-size:28px; /* 30pxから縮小 */
    white-space: nowrap; 
    letter-spacing: -1px;
  }
  .plan__price span{ font-size:14px; margin-left:2px; }
  
  .caseList{ grid-template-columns:1fr; }
}