:root{
  --bg:#0b0f17;
  --fg:#eaf0ff;
  --muted:rgba(234,240,255,.7);
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --accent:#7aa7ff;
  --radius:18px;

  /* iOS/Safariのアドレスバー考慮：JSで更新 */
  --app-height: 100dvh;

  /* 固定CTAバー高さ（見た目上の目安） */
  --cta-bar-h: 72px;

  /* 進捗バー */
  --progress-thickness: 6px;
  --progress-length: 56vh;

  /* 埋め込み（スライドスクロール方式用） */
  --embed-iframe-h: 1600px;

  /* 横スワイプ（内側）デフォルト：個別ウィジェットで上書き可能 */
  --hslides-gap: 12px;
  --hslides-peek: 10%;
  --hslide-basis: calc(100% - var(--hslides-peek));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* モーダルオープン中：背景の操作を抑止 */
body.modalOpen{ overflow:hidden; }

/* 上部UI（カウンター/進捗バー） */
.topUi{ position:fixed; inset:0; pointer-events:none; z-index:20; }
.counter{
  pointer-events:none;
  position:fixed;
  top:calc(12px + env(safe-area-inset-top, 0px));
  right:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.28);
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  backdrop-filter: blur(10px);
}

/* 進捗バー（デフォルトは右側縦） */
.progress{
  position:fixed;
  pointer-events:none;
  right:12px;
  top:calc(54px + env(safe-area-inset-top, 0px));
  height:var(--progress-length);
  width:var(--progress-thickness);
  display:flex;
  align-items:stretch;
}
.progressTrack{
  width:100%;
  height:100%;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.progressFill{
  width:100%;
  height:0%;
  background:var(--accent);
  border-radius:999px;
}

/* 上部横バーに切り替え */
.progress.isTop{
  left:12px;
  right:12px;
  top:calc(12px + env(safe-area-inset-top, 0px));
  height:var(--progress-thickness);
  width:auto;
}
.progress.isTop .progressTrack{ width:100%; height:100%; }
.progress.isTop .progressFill{ height:100%; width:0%; }

/* スナップ領域 */
.snap{
  height:var(--app-height);
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* 各スライド */
.panel{
  height:var(--app-height);
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    24px
    calc(24px + var(--cta-bar-h) + env(safe-area-inset-bottom, 0px))
    24px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}

/* 背景画像（hero等） */
.panel.hasBg::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bg-url);
  background-size:cover;
  background-position:center;
  opacity:.22;
  filter:saturate(1.05);
}
.panel.hasBg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,15,23,.55), rgba(11,15,23,.92));
}

/* 埋め込みスライド：スライド側でスクロール */
.panel.isEmbed{ align-items:stretch; }
.panel.isEmbed .inner{
  height:100%;
  max-height:100%;
  display:flex;
  flex-direction:column;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.panel.isEmbed .embedBox{
  flex:0 0 auto;
  margin-top:14px;
}
.panel.isEmbed .embedBox iframe{
  height:var(--embed-iframe-h);
}

/* inner */
.inner{
  width:min(980px, 100%);
  padding:28px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  position:relative;
  z-index:1;
}
.heroGlow{
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(122,167,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  margin:0 0 10px;
  font-size:12px;
}

h1{font-size:clamp(32px, 5vw, 56px); margin:6px 0 12px}
h2{font-size:clamp(24px, 3vw, 36px); margin:0 0 12px}
h3{margin:0 0 6px}
.lead{font-size:18px; color:var(--muted); line-height:1.7}

.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.9}

.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:16px;
}
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:16px;
  padding:14px;
  color:var(--muted);
}

.ctaRow{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn.primary{
  border-color:transparent;
  background:linear-gradient(90deg, rgba(122,167,255,.95), rgba(122,255,220,.75));
  color:#071018;
  font-weight:700;
}
.btn.ghost{color:var(--muted)}
.btn.big{padding:14px 18px; font-size:16px}

.hint{margin-top:14px; color:rgba(234,240,255,.5); font-size:12px}
.small{color:rgba(234,240,255,.55); font-size:12px}

/* ========== カスタムブロック ========== */
.blocks{ margin-top:12px; display:flex; flex-direction:column; gap:14px; }
.blocks.isCompact{ gap:10px; margin-top:10px; }
.blockText{ color:var(--muted); line-height:1.85; }
.blockText.lead{ font-size:18px; color:var(--muted); }
.blockDivider{ height:1px; background:var(--line); border-radius:1px; opacity:.9; }
.figure{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.22);
}
.figure img{
  width:100%;
  height:auto;
  display:block;
}
.figcap{
  padding:10px 12px;
  color:rgba(234,240,255,.6);
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* テーブル */
.tableWrap{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(0,0,0,.22);
  overflow:hidden;
}
.tableScroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:640px;
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(234,240,255,.78);
  font-size:14px;
  text-align:left;
  vertical-align:top;
}
.table th{
  position:sticky;
  top:0;
  background:rgba(11,15,23,.86);
  backdrop-filter: blur(10px);
  font-weight:700;
  color:rgba(234,240,255,.9);
}
.table tr:last-child td{ border-bottom:0; }

/* ✅ 実績（grid） */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.gcard{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
}
.gthumb{
  aspect-ratio: 16 / 10;
  width:100%;
  overflow:hidden;
  background:rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gbody{ padding:14px; }
.gbody .gtag{
  display:inline-block;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(234,240,255,.7);
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  margin-bottom:10px;
  background:rgba(0,0,0,.18);
}
.gbody h4{ margin:0 0 6px; font-size:16px; color:rgba(234,240,255,.95); }
.gbody p{ margin:0; color:rgba(234,240,255,.68); line-height:1.7; font-size:13px; }
.gcta{ padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:10px; flex-wrap:wrap; }

/* ✅ FAQ（accordion） */
.faq{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.18);
}
.faqItem{
  border-top:1px solid rgba(255,255,255,.08);
}
.faqItem:first-child{ border-top:0; }
.faqItem summary{
  list-style:none;
  cursor:pointer;
  padding:14px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  color:rgba(234,240,255,.9);
  font-weight:600;
}
.faqItem summary::-webkit-details-marker{ display:none; }
.faqQ{
  display:flex; gap:10px; align-items:flex-start;
}
.qBadge, .aBadge{
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(234,240,255,.85);
}
.faqChevron{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(234,240,255,.8);
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.faqItem[open] .faqChevron{ transform: rotate(180deg); }
.faqA{
  display:flex;
  gap:10px;
  padding:0 14px 14px;
  color:rgba(234,240,255,.68);
  line-height:1.85;
  font-size:14px;
}
.faqA .aBadge{
  margin-top:2px;
  background:rgba(122,167,255,.14);
  border-color: rgba(122,167,255,.35);
}

/* ========== 横スワイプ（内側） ========== */
.hslides{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(0,0,0,.20);
  overflow:hidden;
}
.hslidesHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(234,240,255,.75);
  font-size:12px;
}
.hslidesTitle{ font-weight:600; }
.hslidesRight{
  display:flex;
  align-items:center;
  gap:10px;
}
.hslidesNav{ display:flex; align-items:center; gap:8px; }

.hnavBtn{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(234,240,255,.86);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:18px;
}
.hnavBtn:active{ transform: translateY(1px); }
.hnavBtn:disabled{
  opacity:.35;
  cursor:default;
}

.hslidesCounter{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:4px 8px;
}

.hslidesViewport{
  display:flex;
  gap:var(--hslides-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:12px;
  padding-right:calc(12px + var(--hslides-peek));
}
.hslide{
  flex:0 0 var(--hslide-basis);
  scroll-snap-align:start;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px;
}
.hslide p{ margin:8px 0 0; color:rgba(234,240,255,.70); line-height:1.75; }
.hslide .hslideImg{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  margin-top:10px;
}
.hslide .hslideImg img{ width:100%; height:auto; display:block; }

.hslide .blocks{ margin-top:8px; }
.hslide h3{ margin:0; }

.hslidesDots{
  display:flex;
  gap:8px;
  padding:10px 12px 12px;
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.08);
}
.hdot{
  width:8px; height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.hdot[aria-current="true"]{
  background:var(--accent);
  border-color:transparent;
}

/* embed */
.embedBox{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.22);
}
.embedBox iframe{
  width:100%;
  border:0;
  display:block;
}
.embedActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.embedHint{
  margin-top:10px;
  color:rgba(234,240,255,.55);
  font-size:12px;
}

/* 固定CTA */
.fixedCta{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(11,15,23,.68);
  border-top:1px solid var(--line);
  backdrop-filter: blur(12px);
  z-index:30;
}
.fixedCtaInner{
  width:min(980px, 100%);
  margin:0 auto;
}

/* ✅ 固定CTAボタン：ふわふわアニメーション */
@keyframes ctaFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0); }
}
@keyframes ctaGlow{
  0%{ filter: drop-shadow(0 8px 20px rgba(122,167,255,.15)); }
  50%{ filter: drop-shadow(0 12px 30px rgba(122,167,255,.32)); }
  100%{ filter: drop-shadow(0 8px 20px rgba(122,167,255,.15)); }
}

.fixedCtaBtn{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  gap:8px;
  text-decoration:none;
  border-radius:999px;
  padding:14px 16px;
  font-weight:800;
  border:1px solid transparent;
  background:linear-gradient(90deg, rgba(122,167,255,.95), rgba(122,255,220,.75));
  color:#071018;

  will-change: transform;
  animation: ctaFloat 2.2s ease-in-out infinite, ctaGlow 2.2s ease-in-out infinite;
  transform-origin: center;
}
.fixedCta.isHidden{ display:none; }

/* ========== 全画面モーダル ========== */
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
}
.modal.isOpen{ display:block; }
.modalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
}
.modalPanel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:rgba(11,15,23,.96);
  border-left:1px solid rgba(255,255,255,.08);
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
  border-bottom:1px solid var(--line);
  background:rgba(11,15,23,.88);
  backdrop-filter: blur(12px);
}
.modalTitle{
  font-weight:700;
  color:var(--fg);
  font-size:14px;
}
.modalClose{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  width:36px;
  height:36px;
  border-radius:12px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.modalBody{
  flex:1;
  min-height:0;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.modalBody iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:16px;
  background:rgba(0,0,0,.22);
}

/* タブレット/PC：余白を出す */
@media (min-width:768px){
  .modalPanel{
    inset:24px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 70px rgba(0,0,0,.55);
    max-width:980px;
    margin:auto;
    height:calc(var(--app-height) - 48px);
  }
  .modalBackdrop{ background:rgba(0,0,0,.62); }
}

/* レスポンシブ */
@media (max-width:980px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .inner{padding:22px}
  .cards{grid-template-columns:1fr}
  .progress{ --progress-length: 46vh; }
  :root{
    --embed-iframe-h: 1500px;
    --hslides-peek: 14%;
    --hslide-basis: calc(100% - var(--hslides-peek));
  }
  .table{ min-width:560px; }
}
@media (min-width:1024px){
  :root{
    --progress-length: 60vh;
    --embed-iframe-h: 1800px;
    --hslides-peek: 6%;
    --hslide-basis: calc(100% - var(--hslides-peek));
  }
  .panel{ padding-left:40px; padding-right:40px; }
}


/* ✅ アニメーションが苦手なユーザー向け（OS設定で無効化） */
@media (prefers-reduced-motion: reduce){
  .fixedCtaBtn{ animation: none !important; }
}