/* =========================
   business.css（完成版 / 安定）
   - businessページだけの上書きに限定
   - 重複/上書き地獄を排除
========================= */

/* =========================
   0) iOS/全体の安定化
========================= */
html, body{
  overflow-x: hidden;
  background: #070b14; /* iOSで引っ張った時に見える色を統一 */
}

/* =========================
   1) Header（追従 + 透けすぎ抑制）
   ※ main に余白を作らず、hero側で確保する
========================= */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  background: rgba(7,11,20,.82);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* mainは下げない（iOSの“謎帯”原因になりやすい） */
main{ padding-top: 0 !important; }

/* ヘッダー分の余白はHeroが持つ（84pxは必要なら 92px へ） */
.hero{
  padding-top: calc(84px + env(safe-area-inset-top)) !important;
}

/* common.cssの980px系誤爆対策（.nav-linksではなく .navlinks が正） */
@media (max-width: 980px){
  .navlinks{ display:none !important; }
}

/* =========================
   2) HERO（見出し/リード/CTA）
========================= */
.hero-content{ max-width: 860px; }

.hero h1{
  margin: 14px 0 14px;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.18;
  letter-spacing: .02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 24ch;
}

.hero-position{
  margin-top: 14px;
  font-size: 13px;
  color:#8b9bb0;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero .lead{
  font-size: 15px;
  line-height: 1.9;
  max-width: 62ch;
  overflow-wrap: anywhere;
}

/* pills */
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 12px; }
.pill{ display:inline-flex; align-items:center; min-height:36px; line-height:1; }

/* CTA */
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 12px 0 18px;
}
.hero-actions .btn{
  min-height: 48px;
  padding: 12px 16px;
  line-height: 1;
}
@media (max-width: 920px){
  .hero-actions .btn{ flex: 1 1 160px; }
}

/* =========================
   3) BULLETS（ドットのズレ）
========================= */
.bullets{ display:grid; gap:14px; margin-top:18px; }

.bullet{
  display:grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items:start;
}
.bullet .dot{
  margin-top: 8px;
  box-shadow: 0 0 0 5px rgba(123,183,255,.12);
}
.bullet b{ display:block; line-height:1.45; }
.bullet span{ display:block; margin-top:6px; line-height:1.85; }

/* =========================
   4) grid-3（HTMLに合わせる）
========================= */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* =========================
   5) Services → Fit（余白 + “帯”対策）
   - 帯＝主にカード影のはみ出しが原因
========================= */

/* 余白：ここだけ調整すればOK */
#services.section{ padding-bottom: 40px !important; }
#fit.section{ padding-top: 40px !important; }

@media (max-width: 920px){
  #services.section{ padding-bottom: 32px !important; }
  #fit.section{ padding-top: 32px !important; }
}

/* 帯対策：影のはみ出しを止める（基本これでOK） */
#services.section{ overflow:hidden; }

/* それでも残る場合に備えて：light内カードは影を消して境界線に */
#services.section.light .card{
  box-shadow: none !important;
  border: 1px solid rgba(11,18,32,.10);
}

/* =========================
   6) Fit（読みやすさ：横に広がりすぎ防止 + 行間）
========================= */
#fit .container{ max-width: 860px; }

#fit h3{ margin: 0 0 10px; }
#fit .fit-lead{ margin: 0 0 12px; }

#fit .fit-lead,
#fit li{
  font-size: 15px;
  line-height: 1.75;
}

#fit ul{ margin: 0; padding-left: 18px; }
#fit li{ margin: 0 0 6px; }
#fit li:last-child{ margin-bottom: 0; }

/* =========================
   7) SLA（契約条件）
========================= */
.sla .row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:12px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.10);
}
.section.light .sla .row{ border-top-color: rgba(11,18,32,.10); }
.sla .row:first-child{ border-top:none; }

@media (max-width: 980px){
  .sla .row{ grid-template-columns: 1fr; }
}

/* =========================
   8) フォーム送信メッセージ
========================= */
.alert{ display:none; padding:12px; border-radius:12px; }
.alert.ok{
  border:1px solid rgba(123,183,255,.28);
  background:rgba(123,183,255,.10);
  color:rgba(255,255,255,.90);
}
.alert.ng{
  border:1px solid rgba(255,140,140,.35);
  background:rgba(255,140,140,.10);
  color:rgba(255,255,255,.90);
}
.alert.show{ display:block; }

/* =========================
   9) “詰まり”見出しに下線が入る誤爆対策
========================= */
.card h2::after,
.panel h2::after{
  content: none !important;
  display: none !important;
}
/* ===== 価格が小さくなるのを防ぐ（強制）===== */
#pricing .card.featured .price{
  font-size: clamp(22px, 5vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em;
}

#pricing .card.featured .plan-note{
  font-size: 13px !important;
  opacity: .85;
}
#pricing .card strong{
  font-size: 18px;
}
.more-note {
  margin-top: 6px;
}

.more-note summary {
  cursor: pointer;
  opacity: 0.7;
}

.more-note summary:hover {
  opacity: 1;
}

.more-note p {
  margin-top: 8px;
  line-height: 1.6;
}
.creative-partner .btn{
  display:inline-block;
  margin-top:20px;
  padding:12px 22px;
  border-radius:8px;
  background:#0b1b34;
  color:#fff;
  text-decoration:none;
  font-weight:500;
}

.creative-partner{
  margin-bottom: 24px;
}

.shino-link-btn{
  display:inline-block;
  margin-top:20px;
  margin-bottom:50px;
  padding:12px 22px;
  border-radius:12px;
  background:#0b1b34 !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:500;
  border:1px solid #0b1b34 !important;
}

.shino-link-btn:visited{
  color:#ffffff !important;
}

.shino-link-btn:hover{
  background:#132b4f !important;
  border-color:#132b4f !important;
  color:#ffffff !important;
}