.btn {
  @apply transition-transform duration-200 active:scale-95;
}

.glass {
  backdrop-filter : blur(10px);
  background      : rgba(255, 255, 255, 0.75);
}

/* ============ 店舗経営サポート（固定幅 main 内の微調整） ============ */

/* 見出しは折り返しOK。括弧付きラベルだけノーワープ */
.hero-title {
  line-height : 1.22;
  word-break  : keep-all;
}

.hero-title .addon {
  white-space : nowrap;
}

/* ヒーロー：KPIカードとの干渉回避（固定幅帯での余白） */
@media (max-width : 900px) {
  .glass.kpi-card, .glass {
    margin-top : 12px;
  }
}

/* About セクションの縦の間延びを圧縮 */
#about .md\:col-span-2 + aside {
  margin-top : 8px;
}

/* 2カラム切替時の段差吸収 */
#about p {
  line-height : 1.75;
}

#about .space-y-1 > li {
  margin : 2px 0;
}

/* ご利用条件の行間を詰める */

/* FAQ：開閉で幅がブレないよう固定（main が固定幅でも安定） */
#faqWrap {
  max-width : 820px;
  width     : 100%;
}

#faq details {
  width : 100%;
}

/* 価格ブロック：固定幅内でのギャップ最適化 */
#price .md\:items-end > div:first-child {
  margin-bottom : 6px;
}

/* 左塊の下余白を微減 */
#price .text-5xl {
  line-height : 0.95;
}

/* 大きな価格の行高調整 */

/* 内部リンクボタンの行高を少し締める（1行化しやすく） */
.btn {
  line-height : 1.15;
}

/* もし sticky のサブヘッダーと重なる場合の緩衝（このLPの最上部だけ） */
section.relative:first-of-type {
  scroll-margin-top : 80px;
}

/* ===== FAQ 幅ブレ対策（main 固定幅でも安定） ===== */
#faqWrap {
  margin-left  : auto;
  margin-right : auto;
  max-width    : 820px;
  width        : 100%;
}

#faqWrap details {
  display : block;
  width   : 100%;
}

#faqWrap summary {
  align-items     : center;
  display         : flex;
  justify-content : space-between;
  min-width       : 0; /* flex内のはみ出し防止 */
  width           : 100%;
}

/* ブラウザ既定の三角マーカーを無効化（横幅に影響しないように） */
#faqWrap summary::-webkit-details-marker {
  display : none;
}

/* 内側要素の box-sizing を統一して開閉時の寸法ズレを防止 */
#faqWrap * {
  box-sizing : border-box;
}

/* パディング/余白の微調整（狭幅でもはみ出さない） */
#faqWrap .p-5 {
  padding : 16px;
}

#faqWrap .group-open\:rotate-180 {
  transform-origin : center;
}

/* 念のため：開閉で display が変わっても幅は維持 */
#faqWrap details[open],
#faqWrap details:not([open]) {
  width : 100%;
}

/* main の固定幅環境向け：820px前後での安定化 */
@media (max-width : 900px) {
  #faqWrap {
    max-width : 820px;
  }
}

#faq {
  width : 100%;
}

#faq > .container, #faq > div {
  margin    : 0 auto !important;
  max-width : 820px !important;
  width     : 100% !important;
}