/* === v11b — デザイン洗練10項目 === */

/* =============================================
   ① 固定ヘッダー
   ============================================= */
#header,
.header,
.header-container {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
}

/* =============================================
   ② モバイル固定フッターCTA
   ============================================= */
.ds-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: none; /* JSでフェードイン制御 */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ds-mobile-cta.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.ds-mobile-cta__btn {
  display: block;
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, #c8102e, #8b0a20);
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 56px;
  text-decoration: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
@media (min-width: 769px) {
  .ds-mobile-cta { display: none !important; }
}

/* =============================================
   ③ 蛍光ペン風テキスト強調
   ============================================= */
.ds-highlight {
  background: linear-gradient(transparent 60%, #ffefc2 60%);
  padding: 0 2px;
}

/* =============================================
   ④ 見出し下アニメーションライン
   ============================================= */
.ds-heading__title::after,
.ds-greeting__title::after,
.ds-about-v2__title::after,
.ds-intro-band__title::after,
.ds-remote-band__title::after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background: var(--ds-accent, #8b1a1a);
  margin-top: 10px;
  transition: width 0.6s ease;
}
.ds-heading__title.ds-line-in::after,
.ds-greeting__title.ds-line-in::after,
.ds-about-v2__title.ds-line-in::after,
.ds-intro-band__title.ds-line-in::after,
.ds-remote-band__title.ds-line-in::after {
  width: 100%;
}

/* =============================================
   ⑤ FAQアコーディオン
   ============================================= */
.ds-faq {
  padding: 80px 24px;
  background: #fff;
}
.ds-faq__inner {
  max-width: 820px;
  margin: 0 auto;
}
.ds-faq__list {
  margin-top: 32px;
}
.ds-faq__item {
  border-bottom: 1px solid #e6e7ea;
}
.ds-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #16181d);
  cursor: pointer;
  list-style: none;
  line-height: 1.6;
}
.ds-faq__item summary::-webkit-details-marker {
  display: none;
}
.ds-faq__item summary::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ds-accent, #8b1a1a);
  border-bottom: 2px solid var(--ds-accent, #8b1a1a);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
.ds-faq__item[open] summary::after {
  transform: rotate(-135deg);
}
.ds-faq__answer {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2, #3a3e48);
}

/* =============================================
   ⑥ FV半透明オーバーレイの洗練
   ============================================= */
.dojima-hero__overlay {
  background: linear-gradient(
    to right,
    rgba(40, 0, 0, 0.55) 0%,
    rgba(40, 0, 0, 0.35) 40%,
    rgba(40, 0, 0, 0.10) 70%,
    transparent 100%
  ) !important;
}
@media (max-width: 768px) {
  .dojima-hero__overlay {
    background: rgba(40, 0, 0, 0.50) !important;
  }
}

/* =============================================
   ⑦ 赤の格調アップ（ボルドー寄りにシフト）
   ============================================= */
:root {
  --ds-accent: #8b1a1a;
}
/* ヘッダー/ナビ */
#header .navi,
.header .navi,
.navi-in > ul > li > a {
  /* Cocoonナビは基本的にカスタマイザーで制御されるが、
     背景色を微調整 */
}
/* ヘッダー上の赤ライン（もしある場合） */
.header-top,
.notice-area {
  background: linear-gradient(135deg, #6b0f1d, #8b1a1a) !important;
}
/* フッター */
.ds-cta-banner {
  background: linear-gradient(135deg, #6b0f1d 0%, #8b1a1a 50%, #4a0a12 100%) !important;
}
footer,
#footer,
.footer {
  background: linear-gradient(135deg, #6b0f1d, #4a0a12) !important;
}

/* =============================================
   ⑧ モバイルFVテキスト崩壊修正（clamp）
   ============================================= */
.dojima-hero__title {
  font-size: clamp(24px, 7vw, 48px) !important;
  line-height: 1.3 !important;
}
.dojima-hero__sub {
  font-size: clamp(13px, 3.5vw, 18px) !important;
  line-height: 1.8 !important;
}
.dojima-hero__eyebrow {
  font-size: clamp(10px, 2.5vw, 13px) !important;
}

/* =============================================
   ⑨ ブレークポイント追加
   既存860px/480pxは維持。追加: 400/576/992/1200px
   ============================================= */

/* 1200px: 大型デスクトップ */
@media (max-width: 1200px) {
  .ds-services-grid { gap: 24px; }
  .ds-section__inner,
  .ds-faq__inner,
  .ds-greeting__inner { max-width: 960px; }
}

/* 992px: タブレット/PC境界 */
@media (max-width: 992px) {
  .ds-about-v2__inner { flex-direction: column; }
  .ds-about-v2__visual { height: 280px; }
  .ds-vc-grid { grid-template-columns: 1fr 1fr; }
  .ds-services-grid { grid-template-columns: 1fr 1fr; }
  .ds-flow-rich__row { gap: 24px; }
}

/* 576px: 小型/大型スマホ境界 */
@media (max-width: 576px) {
  .ds-greeting { padding: 48px 16px; }
  .ds-greeting__title { font-size: 24px !important; }
  .ds-greeting__layout { gap: 24px; }
  .ds-vc-grid { grid-template-columns: 1fr; }
  .ds-services-grid { grid-template-columns: 1fr; }
  .ds-flow-rich__photo { height: 160px; }
  .ds-faq { padding: 48px 16px; }
  .ds-faq__item summary { font-size: 14px; padding: 16px 0; }
  .ds-faq__answer { font-size: 14px; }
  .ds-platforms__heading { font-size: 20px; }
}

/* 400px: 極小スマホ */
@media (max-width: 400px) {
  .dojima-hero__content { padding: 0 12px; }
  .dojima-hero__cta { font-size: 14px; padding: 12px 28px; }
  .ds-greeting__title { font-size: 20px !important; }
  .ds-sim-campaign__price b { font-size: 28px !important; }
  .ds-cta-banner__title { font-size: 20px !important; }
  .ds-cta-banner__text { font-size: 14px !important; }
}

/* =============================================
   ⑩ スクロールアニメーション強化（ds-reveal-up）
   ============================================= */
.ds-reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: var(--rd, 0s);
}
.ds-reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}