/* =========================================================
   お店の課題診断 LP  ―  モバイルファースト実装
   Figma: 各種LP制作 / モバイルファースト＿PC
   ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue: #3b82f6;
  --blue-deep: #1f81aa;
  --blue-soft: #bfdbfe;
  --ink: #1f2937;
  --ink-2: #4b5563;
  --orange: #ffa61d;
  --cream: #fff3dd;
/*  --page-w: 390px;*/
  --page-w: 100%;
}

@media (min-width: 800px) {
  :root {
    --page-w: 390px;
  }
  .fixed-cta{
    width: 390px;
  }
}

html { scroll-behavior: smooth; height: 100%; }

body {
  font-family: "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  /* ====== モバイルファースト＿PC の「Background」を固定背景に ====== */
  background-color: #bfdbfe;
/*  background-image: url("./img/background.png");*/
  background-image: url("./img/background.webp");
  background-attachment: fixed;
  background-size: 100% 100%;   /* 縦横ともに画面全体に引き伸ばす（歪む可能性あり） */
  background-size: cover;
  background-position: center center;  /* 上下の余白が均等になる */
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* スマホ実機では fixed が効かないケースがあるため scroll に切り替え */
@media (max-width: 430px) {
  body {
    background-attachment: scroll;
  }
}

img { display: block; max-width: 100%; }

/* 端末幅(390px)に合わせたモバイルキャンバス。背景は body に固定済み */
.app {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  position: relative;
  background: transparent;
  overflow-x: hidden;
  border: 5px solid #96C5FF;
  margin-top: 56px;
  border-top: none;
}

/* ---------- 共通：セクション見出し ---------- */
.section { padding: 33px 20px; }
.section--blue { background: var(--blue-soft); }
.section--white { background: #fff; }

.tagline {
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: var(--ink);
}
.sec-title { text-align: center; margin-bottom: 20px; }

/* 白背景 sec-title（課題セクション用） */
.sec-title--white {
  position: relative;
  background: #fff;
  margin: -33px -20px 20px;
  padding: 24px 20px 32px;
}

/* 検索虫眼鏡アイコン：右下に半分はみ出るように配置 */
.sec-search {
  position: absolute;
  bottom: -36px;
  right: 20px;
  width: 72px;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.sec-title h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin: 12px 0 14px;
}
.sec-title p { font-size: 15px; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: fixed;          /* sticky から fixed に変更して画面全体に固定 */
  top: 0;
  left: 0;                  /* 左端の基準点を固定 */
  width: 100%;              /* 横幅いっぱいに広げる */
  z-index: 999;             /* 他のコンテンツ（ヒーロー画像など）より確実に手前に出す */
  
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e6effb;
  box-sizing: border-box;   /* パディングを含めた横幅計算にする（はみ出し防止） */
}
.site-header .brand {
  font-weight: normal; letter-spacing: .04em; font-size: 20px; color: var(--blue);
}
.site-header .brand small { color: var(--ink-2); font-weight: 600; font-size: 11px; }
.brand {
  display: flex;
  align-items: center; /* 文字と画像の縦方向の真ん中を揃える */
  font-size: 16px;     /* 現在の文字サイズに合わせて調整してください */
}

/* 文字の前に画像を挿入する設定 */
.brand::before {
  content: "";
  display: inline-block;
  background-image: url("./img/favicon.png"); /* 画像のパス */
  background-size: contain;
  background-repeat: no-repeat;
  
  width: 24px;  /* 【調整可】アイコンの横幅 */
  height: 24px; /* 【調整可】アイコンの縦幅（文字の大きさに合わせると綺麗です） */
  margin-right: 8px; /* 【調整可】アイコンと文字の間のすき間 */
}

.hamburger {
  width: 26px; height: 18px; position: relative; cursor: pointer;
  /* PC幅（サイドナビが見える幅）では非表示 */
}
.hamburger span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger span:nth-child(1){ top: 0; }
.hamburger span:nth-child(2){ top: 8px; }
.hamburger span:nth-child(3){ top: 16px; }

/* 開いた状態：× アイコン */
.hamburger.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* 800px 以上ではハンバーガーを非表示（サイドナビが代わりに表示される） */
@media (min-width: 800px) {
  .hamburger { display: none; }
}

/* =========================================================
   ドロワーメニュー（スマホ・タブレット専用）
   ========================================================= */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .45);
  display: flex;
  justify-content: flex-end;
}

.drawer-nav {
  width: min(320px, 85vw);
  height: 100%;
  background: #fff;
  padding: 24px 0 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
}

.drawer-close {
  align-self: flex-end;
  margin-right: 20px;
  margin-bottom: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
}
.drawer-close:hover { color: var(--ink); }

.drawer-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 16px 24px 6px;
  border-top: 1px solid #e5e7eb;
}
.drawer-section-label:first-of-type { border-top: none; }

.drawer-nav a {
  display: block;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid #f3f4f6;
  transition: background .15s, color .15s;
}
.drawer-nav a:hover { background: #eff6ff; color: var(--blue); }

/* Vue transition */
.drawer-enter-active,
.drawer-leave-active { transition: opacity .25s; }
.drawer-enter-active .drawer-nav,
.drawer-leave-active .drawer-nav { transition: transform .25s; }
.drawer-enter-from,
.drawer-leave-to { opacity: 0; }
.drawer-enter-from .drawer-nav,
.drawer-leave-to .drawer-nav { transform: translateX(100%); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero { background: var(--blue-soft); padding: 26px 20px 48px; }
.hero-card {
  background: #fff; border: 2px solid #fff; border-radius: 5px;
  padding: 16px 24px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 0px;
}
.hero-logo { width: 289px; max-width: 100%; }
.hero-lead {
  text-align: center; font-size: 15px; color: var(--ink); font-weight: 500;
}
.hero-lead .em { color: var(--blue); font-weight: 700; }
.hero-lead-nowrap { white-space: nowrap; }
.hero-lead-em {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
}
.hero-cta {

  border-radius: 77px; box-shadow: 0 5px 0 var(--orange);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.hero-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--orange); }
.hero-kiosks { width: 271px; max-width: 100%; margin-top: 4px; }
.hero-scene { width: 271px; max-width: 100%; }

/* 親要素（基準値）の設定 */
.hero-scene-wrapper {
  position: relative;   /* これで子要素の配置基準になります */
  display: inline-block; /* 画像の横幅にピッタリ合わせるための設定 */
  width: 271px;         /* イラスト本来のサイズに固定 */
  max-width: 100%;
}

/* 元のイラスト画像 */
.hero-scene {
  width: 100%;
  display: block;
}

/* 重ねる虫眼鏡アイコンの設定 */
.hero-search-icon {
  position: absolute;
    right: 47px;
    width: 85px;
    height: auto;
    z-index: 10;
}


/* =========================================================
   課題（こんなお悩み）
   ========================================================= */
.problem-list { display: flex; flex-direction: column; gap: 15px; }
.problem {
  background: rgba(255,255,255,.7); border: 2px solid #fff; border-radius: 5px;
  padding: 8px 0 0px; text-align: center; position: relative; overflow: hidden;
}
.problem .pic {
  position: relative; height: 212px; margin: 10px;
  border-radius: 100px 100px 0 0;
  /*background: linear-gradient(180deg, #fff 0%, #bad3fc 50%, var(--blue) 100%);*/
  display: flex; align-items: center; justify-content: center;
}
.problem .pic img { max-height: 200px; width: auto; }
.problem .num {
  position: absolute; top: 4px; left: 14px;
  font-size: 90px; line-height: 1; font-weight: 300; color: #bdd6ff;
  font-family: "Oswald", "Roboto", sans-serif;
}
.problem h3 { font-size: 20px; font-weight: 700; margin: 6px 20px 12px; }
.problem .desc { font-size: 15px; }

/* =========================================================
   解決ソリューション（製品カード）
   ========================================================= */
.product-list { display: flex; flex-direction: column; gap: 12px; }
.product {
  background: #fff; border: 1px solid #fff; border-radius: 5px;
  padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.product .head { width: 302px; max-width: 100%; position: relative; min-height: 120px; }
.product .head .cat { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.product .head .name { font-size: 32px; font-weight: 700; line-height: 1.2; }
.product .head .catch { font-size: 15px; margin-top: 30px; }
.product .head .catch b { font-size: 18px; }
.product .head .icon {
  position: absolute; right: 0; top: -6px; width: 100px; height: auto;
}

.icon4{
  position: absolute; right: 0; top: -6px; width: 80px; height: auto;
} 

.product .points {
  width: 100%; background: #eff6ff; border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.product .points li {
  list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--ink-2); letter-spacing: -.5px;
}
.product .points li::before {
  content: "";
  flex: 0 0 20px; width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233b82f6'/%3E%3Cpath d='M5.5 10.2l3 3 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.product .shot { width: 302px; max-width: 100%; height: 191px; border-radius: 5px; object-fit: cover; }
.product .more {
  width: 293px; max-width: 100%; height: 48px; border-radius: 40px;
  border: 2px solid var(--blue); color: var(--blue); background: #fff;
  font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; font-weight: normal;
}
.product .more::after { content: "›"; font-size: 18px; }

/* =========================================================
   すべてがつながる仕組み（連携）
   ========================================================= */
.flow-headline { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.flow-headline h2 { font-size: 24px; line-height: 1.2; font-weight: 700; text-align: center; }
.flow-tags { text-align: center; font-size: 15px; }
.flow-tags .chip {
  display: inline-block; color: #fff; border-radius: 3px; padding: 1px 4px; margin: 0 2px;
}
.flow-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.flow {
  border-radius: 5px; padding: 15px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.flow .badge {
  color: #fff; border-radius: 24px; padding: 2px 16px; font-size: 14px;
}
.flow h3 { font-size: 20px; font-weight: 700; }
.flow .desc { font-size: 16px; }
.flow img { height: 200px; width: auto; }

/* =========================================================
   導入イメージストーリー（横スライド）
   ========================================================= */
.story-head { padding: 16px 20px 0; }
.story-head .sec-title { margin-bottom: 0; }
.story-head h2 { font-size: 22px; }

.slider { position: relative; padding: 0 0 8px; }
.slider-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 24px 20px; scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track.dragging { cursor: grabbing; scroll-snap-type: none; }

.deck-card {
  flex: 0 0 311px; width: 311px; scroll-snap-align: center;
  background: #fff; border: 1px solid #111; border-radius: 2px;
  overflow: hidden; display: flex; flex-direction: column;
  user-select: none;
}
.deck-card .pic {
  position: relative; height: 265px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.deck-card .pic .bg {
  position: absolute; inset: 0;
}
.deck-card .pic img {
  position: relative; max-height: 100%; max-width: 100%;
  width: auto; object-fit: contain; pointer-events: none;
}
.deck-card .pic .num {
  position: absolute; top: 0; right: 0; width: 42px; height: 42px;
  background: #d9d9d9; border-bottom-left-radius: 40px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 3px 9px 0 0;
  font-family: "Oswald", "Roboto", sans-serif; font-weight: 700; font-size: 17px;
}
.deck-card .body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.deck-card .body h3 { font-size: 20px; font-weight: 700; line-height: 1.4; }
.deck-card .body p { font-size: 15px; line-height: 1.5; }
.deck-card .info {
  margin-top: 16px; background: #e6e6e6; padding: 6px 4px;
  display: flex; align-items: center; gap: 6px; border-radius: 2px;
}
.deck-card .info .tag {
  background: #fff; padding: 4px 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.deck-card .info .sub { font-size: 13px; font-weight: 700; }

/* 診断スタートカード */
.deck-card.cta .pic { padding: 4px; }

/* グラデーション：上は淡い水色→下は青 */
.deck-card.cta .pic .bg {
  background: linear-gradient(180deg, rgba(59,130,246,1.0) 0%, #ffffff 100%) !important;
}

.deck-card.cta .body { padding: 40px 14px 12px; gap: 2px; }
.deck-card.cta .body h3 { font-size: 18px; font-weight: 700; color: var(--ink); }
.deck-card.cta .body > p { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.deck-card.cta .cta-row {
  margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.cta-btn-text{
  color: #000;
  text-decoration: none;
}
.deck-card.cta .cta-row .logo {  width: 449px; }
.deck-card.cta .cta-btn {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
  background: var(--cream); border: 2px solid var(--orange); color: #e8820a;
  border-radius: 40px; padding: 6px 10px; font-weight: 700; text-decoration: none; white-space: nowrap;
}

.card-logo{
  width: 120px;
}

/* 1枚目のカード（.is-first）の画像高さを変更 */
.deck-card .pic.is-first {
  height: 250px;
  margin-top: -30px;
}

.deck-card .pic.is-seven {
  height: 250px;
  margin-top: -19px;
}

/* 最後のカード（.is-last）の画像高さを変更 */
.deck-card .pic.is-last {
  height: 207px;
}
.deck-card .pic.is-last img {
  width: 100%; height: auto;
  position: relative; top: 50%; transform: translateY(-50%);
}

/* スライダー操作 UI */
.slider-ui {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 4px 20px 8px;
}
.slider-ui button {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--blue); color: #fff; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(59,130,246,.4);
}
.slider-ui button:disabled { opacity: .35; cursor: default; box-shadow: none; }
.dots { display: flex; gap: 6px; }
.dots span {
  width: 8px; height: 8px; border-radius: 50%; background: #c3d6f5; transition: .2s;
}
.dots span.active { background: var(--blue); width: 22px; border-radius: 5px; }

/* =========================================================
   お問い合わせ CTA
   ========================================================= */
.contact { background: #fff; padding: 20px 28px 28px; text-align: center; }
.contact h2 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.contact p { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; }
.contact .submit {
  display: block; width: 100%; background: #FFE4E4; color: #3E4A95;
  border: none; border-radius: 6px; padding: 16px; font-size: 16px; font-weight: 700;
  cursor: pointer; text-decoration: none;
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer { background: #2563EB; color: #cdd8ec; padding: 48px 20px 100px; font-size: 13px; }
.site-footer .f-logo {
  text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .08em;
  color: #fff; margin-bottom: 38px;
}
.site-footer .f-block { margin-bottom: 22px; }
.site-footer .f-block .co { color: #fff; font-weight: 700; font-size: 15px; }
.site-footer .f-block a { color: #9fc1ff; }
.site-footer .f-block .lead { margin-top: 20px; line-height: 1.7; }
.site-footer h4 { color: #fff; margin-bottom: 4px; font-size: 14px; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer .divider { border: none; border-top: 1px solid #36476b; margin: 24px 0; }
.site-footer .links { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.site-footer .links a { color: #cdd8ec; text-decoration: none; }
.site-footer .copy { text-align: center; margin-top: 24px; color: #cdd8ec; }

/* =========================================================
   レスポンシブ（PC では中央寄せのモバイルキャンバスを維持）
   ========================================================= */
@media (min-width: 600px) {
  .app { 
   /* box-shadow: 0 0 40px rgba(31,73,138,.15); */
  }
}

/* =========================================================
   PC 左右装飾（top1-4.png / btn_*.png）
   ========================================================= */

/* 基本は非表示 */
.pc-deco { display: none; }

@media (min-width: 800px) {
  /*
   * グリッド構成（3列）:
   *   左エリア | SPフレーム(390px) | 右エリア
   * 行は5行（上イラスト/上ボタン/テキストナビ/下ボタン/下イラスト）
   * → 左右の各行が自動的に同じ高さになりボタン位置が水平に揃う
   */
  .site-header { display: none; }
  .app { margin-top: 0; }

  
  .pc-deco {
    display: grid;
    /*grid-template-columns: 1fr 390px 1fr;*/
    grid-template-columns: 380px 390px 380px;
    justify-content: center;

    grid-template-rows: repeat(5, 1fr);
    position: fixed;
    inset: 0;
    padding: 20px 0;
    pointer-events: none;
    z-index: 2;
    margin-top: 50px;
  }

  /* セル共通：中央寄せ */
  .pc-cell {
    display: flex;
    align-items: center;
/*    justify-content: center;*/
    padding: 4px 16px;
    min-height: 0; /* グリッド内で縮小できるように */
  }

  /* 列配置 */
  .pc-left  { 
    grid-column: 1; 
    justify-content: flex-end;
  }
  .pc-right { 
    grid-column: 3; 
    justify-content: flex-start;
  }

  /* 行配置 */
  .pc-r1 { grid-row: 1; }
  .pc-r2 { grid-row: 2; }
  .pc-r3 { grid-row: 3; }
  .pc-r4 { grid-row: 4; }
  .pc-r5 { grid-row: 5; }

  /* イラスト画像：ボタン行へオーバーラップ */
  .pd-top {
    width: min(210px, 95%);
    height: auto;
    object-fit: contain;
    position: relative;
  }

  /* 上イラスト：下方向へはみ出してボタン行に重なる */
  .pc-r1 {
    align-items: flex-end;
    overflow: visible;
    z-index: 0;
    padding-bottom: 0;
  }
  .pc-r1 .pd-top {
    margin-bottom: -105px;
  }

  .pc-r1-img {
    /*
    margin-bottom: -81px;
    margin-right: 174px;
    */
    margin-right: 128px;
    margin-right: 111px;
    margin-bottom: -4px;
  }
  .pc-r2-img{
    /*
    margin-bottom: -52px;
    margin-left: 207px;
    */
    margin-left: 115px;
  }
   .pc-r3-img{
    margin-left: 115px;
  }
   .pc-r4-img{
    margin-left: 115px;
  }

  /* 下イラスト：上方向へはみ出してボタン行に重なる */
  .pc-r5 {
    align-items: flex-start;
    overflow: visible;
    z-index: 0;
    padding-top: 0;
  }
  .pc-r5 .pd-top {
    margin-top: -100px;
  }

  /* ボタン行は画像より手前に */
  .pc-r2, .pc-r4 {
    position: relative;
    z-index: 1;
  }

  /* ===== 各画像の個別サイズ・位置調整 ===== */
  /* 左上（top1.png） */
  /* 画面幅に合わせてスケール：最小160px ／ 画面幅の15% ／ 最大320px */
  .pd-top-1 { 
    width: 500px;           /* ★vwをやめて固定値に（画面幅が変わっても大きさが変わりません） */
   /* max-width: 100%;  */      /* 万が一画面が狭くなった時は、はみ出さないように自動縮小 */
    max-width: none;
    margin-right: -87px;    /* ★中央画面への食い込み具合（マイナスを大きくすると右＝中央側にめり込みます） */
    margin-bottom: -40px;

  }

  /* 右上（top2.png） */
  .pd-top-2 { 
      width: 470px;
/*      max-width: 100%;*/
      max-width: none;
      margin-left: -67px;
      margin-bottom: -50px;
  
  }

  /* 左下（top3.png） */
  .pd-top-3 { 
    width: 410px; 
    /*max-width: 100%;*/
    max-width: none;
    margin-right: 70px;    /* 左側なので右マージン */
    margin-top: -40px;      /* 上のボタンとの重なり具合 */
  
  }

  /* 右下（top4.png） */
  .pd-top-4 {
    width: 470px; 
    /*max-width: 100%;*/
    max-width: none;
    margin-left: -66px;     /* 右側なので左マージン */
    margin-top: -40px;
    
    }

  /* ボタン画像ラッパー */
  .pd-btn-wrap {
    pointer-events: auto;
    display: block;
/*    width: min(270px, 90%);*/
    width: 320px;          /* 💡 ここを希望のサイズに変更（例：320px, 350pxなど） */
    max-width: none;
    flex-shrink: 0;
  }

  .pd-btn {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity .15s;
  }


  .pd-btn-wrap:hover .pd-btn {
    filter: brightness(0.7);
    transform: scale(0.98); /* 少しだけ縮小させて沈み込みを表現 */
    transition: 0.2s;
}


  /* テキストナビ */
  .pd-nav {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    width: 360px;      /* 文字が1行で綺麗に収まる幅 */
    flex-shrink: 0;
  }

  .pd-nav a {
    display: block;
    color: #036EB7;
    text-decoration: none;
    font-size: 16px;
    
    font-weight: 600;
    line-height: 1.5;
    padding: 2px 4px;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
  }

  .pd-nav a:hover {
    color: #033353;
    border-bottom-color: var(--blue);
  }

  /* どの状態のリンクであっても強制的に下線を消す */
.pd-nav a,
.pd-nav a:link,
.pd-nav a:visited,
.pd-nav a:hover,
.pd-nav a:active {
  text-decoration: none !important;
  border-bottom: none !important; /* 念のためボーダーも消す */
}


  /* 1. グリッドのセル自体を、左右のボタンと同じ幅（100%）に強制的に広げる */
  .pc-cell.pc-r3 {
    width: 100% !important;
    max-width: 380px; /* 上下のボタンの実際の横幅（画像だと280px前後）に合わせて調整してください */
    margin: 0 auto;   /* ボタンの真ん中に位置を合わせる */
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 2. 中にあるnavタグも幅いっぱいに広げて縦並びにする */
  .pc-cell.pc-r3 nav.pd-nav {
    width: 360px !important;     /* 💡 100% ではなく 360px で強制固定する */
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 3. 中のリンク文字自体も幅いっぱいに広げて中央揃え */
  .pc-cell.pc-r3 nav.pd-nav a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .pc-cell.pc-right.pc-r3 nav.pd-nav {
    margin-right: 32px; /* この数値を 20px 〜 40px の間で微調整してください */
  }

  /* =======================================
     2. 診断ページ（shindan.html）限定の修正設定（新規追加）
     ======================================= */
  .shindan-page .pc-cell.pc-r3 {
    max-width: none !important;
    margin: 0 !important;
    flex-direction: row !important; 
  }

  /* 💡 診断ページのみ：左側のナビを右寄せ（スマホ画面側へ） */
  .shindan-page .pc-cell.pc-left.pc-r3 {
    justify-content: flex-end !important;
  }

  /* 💡 診断ページのみ：右側のナビを左寄せ（スマホ画面側へ） */
  .shindan-page .pc-cell.pc-right.pc-r3 {
    justify-content: flex-start !important;
  }


}

/* =========================================================
   スマホ固定CTAバー（800px未満のみ表示）
   ========================================================= */
.fixed-cta {
  display: none;
}

@media (max-width: 799px) {
  .fixed-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    justify-content: center;
    padding: 24px 24px 20px;
    background: #BFDBFE;
    pointer-events: none;
    margin-bottom: 0px;
  }

  .fixed-cta-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 350px;
    padding: 14px 20px;
    background: #FFE4E4;
    border: 2.5px solid #FF4C4C;
    border-bottom: 6px solid #FF4C4C;
    border-radius: 50px;
    color: #3E4A95;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
  }

  .fixed-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--orange);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
  }

  /* 固定バー分の余白をページ下部に確保 */
  .app { 
    padding-bottom: 105px; 
  }
}

/* =========================================================
   お店の課題診断 診断ページ専用スタイル (shindan.html)
   ========================================================= */

.shindan-page {
  --blue-primary: #2563eb;
  --blue-light: #bfdbfe;
  --blue-light2: #96c5ff;
  --blue-medium: #3b82f6;
  --dark-900: #111827;
  --dark-800: #1f2937;
  --dark-700: #374151;
  --dark-500: #6b7280;
  --dark-400: #9ca3af;
  --border: #e5e7eb;
  --border-dark: #d1d5db;
  --red: #dc2626;
  --red-btn: #ff4c4c;
  --orange: #ea580c;
  --navy: #3e4a95;
  --bg-priority-red: #fef2f2;
  --bg-priority-orange: #fff7ed;
  --bg-feature: #eff6ff;

  font-family: "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background-color: #bfdbfe;
  background-image: url(./img/background.webp);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

@media (max-width: 430px) {
  .shindan-page {
    background-attachment: scroll;
  }
}

.shindan-page #app {
  min-height: 100vh;

  display: flex;
  flex-direction: column;


  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  background: var(--blue-light);
  position: relative;
  border-left: 6px solid var(--blue-light2);
  border-right: 6px solid var(--blue-light2);
}

/* ======== HEADER ======== */
.shindan-page .site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 390px;
  z-index: 999;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e6effb;
  box-sizing: border-box;
}

/* index.html用の擬似アイコン画像をリセット */
.shindan-page .brand::before {
  display: none !important;
}

.shindan-page .brand {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--blue-primary);
  text-decoration: none;
  gap: 8px;
  cursor: pointer;
}

.shindan-page .brand img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ======== HAMBURGER ======== */
.shindan-page .hamburger {
  width: 26px;
  height: 18px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
}

.shindan-page .hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--dark-800);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

.shindan-page .hamburger span:nth-child(1) { top: 0; }
.shindan-page .hamburger span:nth-child(2) { top: 8px; }
.shindan-page .hamburger span:nth-child(3) { top: 16px; }

.shindan-page .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.shindan-page .hamburger.open span:nth-child(2) { opacity: 0; }
.shindan-page .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ======== DRAWER ======== */
.shindan-page .drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.45);
  display: flex;
  justify-content: flex-end;
}

.shindan-page .drawer-nav {
  width: min(320px, 85vw);
  height: 100%;
  background: #fff;
  padding: 24px 0 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
}

.shindan-page .drawer-close {
  align-self: flex-end;
  margin-right: 20px;
  margin-bottom: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--dark-500);
  cursor: pointer;
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif;
}
.shindan-page .drawer-close:hover { color: var(--dark-800); }

.shindan-page .drawer-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-primary);
  padding: 16px 24px 6px;
  border-top: 1px solid #e5e7eb;
}
.shindan-page .drawer-section-label:first-of-type { border-top: none; }

.shindan-page .drawer-nav a {
  display: block;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dark-800);
  text-decoration: none;
  border-bottom: 1px solid #f3f4f6;
  transition: background .15s, color .15s;
}
.shindan-page .drawer-nav a:hover { background: #eff6ff; color: var(--blue-primary); }

/* ======== MAIN WRAPPER ======== */
.shindan-page .main-content {
  /*
  padding-top: 56px;
  min-height: 100vh;*/

  flex: 1; /* 空きスペースをすべて埋める */
  padding-top: 56px;
  min-height: auto; /* 💡 100vh から auto に変更 */
  display: flex;    /* 💡 追加：フレックスボックスにして下寄せを制御 */
  flex-direction: column;

}

/* ======== QUIZ SCREEN ======== */
.shindan-page .quiz-screen {
  min-height: calc(100vh - 84px);
  background: var(--blue-light);
  padding: 19px 16px 40px;
  border-top: none;
  border-bottom: none;
}

.shindan-page .quiz-screen,
.shindan-page .result-screen {
  min-height: auto !important;
  flex-grow: 1;
}

.shindan-page .intro-section {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 24px;
  margin-top: 24px;
}

.shindan-page .intro-logo {
  width: 188px;
  height: auto;
}

.shindan-page .intro-tagline {
  font-size: 20px;
  color: var(--dark-800);
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}
.shindan-page .intro-tagline span.blue { color: var(--blue-medium); }

.shindan-page .progress-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}

.shindan-page .progress-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 343px;
}

.shindan-page .progress-step-text {
  font-size: 12px;
  color: #737373;
  letter-spacing: -0.5px;
  font-weight: 400;
}

.shindan-page .progress-track {
  width: 343px;
  height: 8px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}

.shindan-page .progress-fill {
  height: 100%;
  background: var(--blue-primary);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.shindan-page .question-card {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 20px 25px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.shindan-page .question-text {
  font-size: 18px;
  color: var(--dark-800);
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 1.67;
  width: 100%;
}

.shindan-page .options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.shindan-page .option-label {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 312px;
  margin: 0 auto;
  min-height: 60px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 0.15s;
  gap: 10px;
  box-sizing: border-box;
}
.shindan-page .option-label:hover,
.shindan-page .option-label.selected { border-color: #aaa; }

.shindan-page .option-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-dark);
  background: #fff;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.shindan-page .option-radio.checked {
  border-color: #0075ff;
  border-width: 1px;
}
.shindan-page .option-radio.checked::after {
  content: '';
  position: absolute;
  width: 9.6px;
  height: 9.6px;
  border-radius: 50%;
  background: #0075ff;
  top: 50%;
  left: 2.2px;
  transform: translateY(-50%);
}

.shindan-page .option-text {
  font-size: 15px;
  color: var(--dark-800);
  letter-spacing: -0.5px;
  line-height: 24px;
  font-weight: 400;
  flex: 1;
}

.shindan-page .btn-next {
  width: 100%;
  max-width: 312px;
  height: 50px;
  background: var(--blue-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.5px;
}
.shindan-page .btn-next:disabled { opacity: 0.4; cursor: not-allowed; }
.shindan-page .btn-next:not(:disabled):hover { opacity: 0.88; }
.shindan-page .btn-next:not(:disabled):active { transform: scale(0.98); }

/* ======== LOADING SCREEN ======== */
.shindan-page .loading-screen {
  min-height: calc(100vh - 84px);
  background: var(--blue-light);
 /* border: 6px solid var(--blue-light2);*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.shindan-page .loading-spinner {
  width: 80px;
  height: 80px;
  border: 6px solid #c7d2fe;
  border-top: 6px solid var(--blue-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.shindan-page .loading-text {
  font-size: 18px;
  color: var(--dark-800);
  letter-spacing: -0.3px;
  font-weight: 500;
}
.loading-text-small{
  font-size: 16px;
}

/* ======== RESULT SCREEN ======== */
.shindan-page .result-screen {
  background: var(--blue-light);
  min-height: calc(100vh - 84px);
  padding: 19px 16px 100px;
  border-top: none;
}

.shindan-page .result-header-card {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 10px;
  margin-bottom: 16px;
  margin-top: 25px;
}

.shindan-page .result-label-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  color: #3B82F6;
  border-radius: 3px;
  padding: 1px 8px;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  text-align: center;
  justify-content: center;
  display: flex;
}

.shindan-page .result-header-inner { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 15px;}
.shindan-page .result-header-text { flex: 1; min-width: 0; }
.shindan-page .result-type-img { max-width: 100%; height: auto; margin-bottom: 4px; display: block; }
.shindan-page .result-type-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--dark-900);
  line-height: 1.25;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.shindan-page .result-urgency-line { 
  font-size: 18px; color: #1F2937;; margin-bottom: 8px; 
      text-align: center;}
.shindan-page .urgency-high { color: var(--red); font-weight: 700; }
.shindan-page .urgency-mid  { color: var(--orange); font-weight: 700; }
.shindan-page .urgency-low  { color: #16a34a; font-weight: 700; }
.shindan-page .result-urgency-desc { font-size: 16px; color: var(--dark-700); 
  line-height: 1.6; margin-bottom: 6px; font-weight: normal;    text-align: center; 
  white-space: pre-wrap;
}
.shindan-page .result-headline { font-size: 16px; color: var(--dark-800); line-height: 1.7; font-weight: 700; margin-bottom: 4px; }
.shindan-page .result-sub { font-size: 14px; color: var(--dark-700); line-height: 1.7; font-weight: 400; }
.shindan-page .result-illustration { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.result-headlineBox { 
  display: flex;
}
.headlineBoxLeft {
      width: 60%;
    padding: 0 10px;
}
.headlineBoxRight {
  width: 40%;
}

.shindan-page .recommend-section { background: #fff; border: 2px solid #fff; border-radius: 5px; padding: 0px 0px 0px; }
.shindan-page .recommend-section-title { font-size: 20px; color: var(--dark-800); font-weight: 700; text-align: center; margin-bottom: 0px; display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.shindan-page .recommend-section-title img.hand-icon { 
    width: 24px;
    height: 24px;
    object-fit: contain;
    position: relative;
    top: -3px; 
}

.shindan-page .compare-bar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.shindan-page .compare-row { display: flex; align-items: center; gap: 6px; border-radius: 8px; overflow: hidden; }
.shindan-page .compare-product-pill { display: flex; align-items: center; gap: 5px; padding: 8px 10px; flex: 1; min-width: 0; }
.shindan-page .compare-row.row-primary .compare-product-pill { background: #fff0f0; }
.shindan-page .compare-row.row-secondary .compare-product-pill { background: #fff7ed; }
.shindan-page .compare-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.shindan-page .compare-dot.dot-primary { background: var(--red); }
.shindan-page .compare-dot.dot-secondary { background: var(--orange); }
.shindan-page .compare-label { font-size: 11px; font-weight: 700; color: var(--dark-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shindan-page .compare-label em { font-style: normal; font-weight: 400; color: var(--dark-500); }
.shindan-page .compare-priority-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 6px 10px; background: #fff; flex-shrink: 0; }
.shindan-page .compare-priority-label { font-size: 9px; color: var(--dark-500); white-space: nowrap; }
.shindan-page .compare-item-stars { display: flex; gap: 1px; align-items: center; }
.shindan-page .compare-item-stars img { width: 10px; height: 10px; }

/* PC表示時、該当画像に適用 */
.shindan-page .compare-bar img {
  max-width: 1390px; /* 素材の本来の幅に合わせて調整してください */
    margin: 0 auto;
    width: 100%;
}

.shindan-page .product-card { background: #fff; 
    border-radius: 10px; overflow: hidden;  
    margin-bottom: 14px; 
    border: 1px solid var(--border); 
    position: relative; 
    padding-bottom: 10px;
  }
.shindan-page .product-card-inner-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: normal; z-index: 2; }
.shindan-page .product-card-inner-badge.badge-primary { background: var(--red); color: #fff; }
.shindan-page .product-card-inner-badge.badge-secondary { background: var(--red); color: #fff; }
.shindan-page .product-card-inner-badge .badge-medal { font-size: 13px; line-height: 1; }
.shindan-page .product-card-bg { width: 100%; height: 140px; object-fit: cover; display: block; }
.shindan-page .product-card-body { padding: 12px 14px 16px; }
.shindan-page .product-category-pill { display: inline-block; font-size: 10px; font-weight: 700; color: var(--blue-primary);border-radius: 100px; padding: 2px 10px; margin-bottom: 8px; }
.badge-medal{
  width: 14px;
}
.shindan-page { font-size: 12px; color: var(--dark-700); line-height: 1.5; margin-bottom: 10px; }
.product-tagline { font-size: 16px; color: var(--dark-700); line-height: 1.5; margin-bottom: 10px; }

.shindan-page .product-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 0px;
}


.shindan-page .product-icon { width: 72px; height: 93px; object-fit: contain; flex-shrink: 0; border-radius: 8px; }
.shindan-page { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px; /* テキスト同士の行間 */
  flex: 1;
}
.product-name-group { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px; /* テキスト同士の行間 */
  flex: 1;
}

.shindan-page .product-stars { display: flex; gap: 2px; margin-bottom: 3px; align-items: center; }
.shindan-page .product-stars img { width: 13px; height: 13px; object-fit: contain; }
.shindan-page .product-name { 
  font-size: 18px;
  font-weight: normal;
  color: var(--dark-900);
  line-height: 1.2; 
}

.shindan-page .feature-list { background: var(--bg-feature); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.shindan-page .feature-item { display: flex; align-items: flex-start; gap: 8px; }
.shindan-page .feature-item img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.shindan-page .feature-item span { font-size: 16px; color: var(--dark-800); line-height: 1.0; }

.shindan-page .btn-detail { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 42px; background: #fff; color: var(--blue-primary); border: 1.5px solid var(--blue-primary); border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; font-family: 'Noto Sans JP', sans-serif; transition: opacity 0.2s; }
.shindan-page .btn-detail:hover { opacity: 0.8; }
.shindan-page .btn-detail img { 
  width: 14px; 
  height: 14px; 
  flex-shrink: 0; 
  filter: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  
}
/* solu2の青文字スタイル（背景と枠線を消す） */
.shindan-page .product-category-pill {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  color:#3B82F6;
  background: transparent; /* 背景を透明に */
  border: none;            /* 枠線をなくす */
  padding: 0;
  margin-bottom: 2px;
}
/* 右側のイラスト画像 */
.shindan-page .product-icon {
  width: 100px; /* イラストの大きさを調整 */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* solu2のようなチェックリスト（薄い青の背景） */
.shindan-page .feature-list {
    background: #f0f6ff;
    border-radius: 8px;
    padding: 12px 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: auto;
    margin-bottom: 20px;
}

/* solu2のような丸いボタン（角丸を50pxにする） */
.shindan-page .btn-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 46px;
    background: #fff;
    color: #3B82F6;
    border: 1.5px solid var(--blue-primary);
    border-radius: 50px;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    transition: opacity 0.2s;
    transition: opacity 0.2s;
    margin: auto;
}

/* ======== CONTACT SECTION ======== */
.shindan-page .contact-section { 
  border-radius: 5px; 
  padding: 0px 16px 0px; 
  text-align: center; 
  margin-top: 14px; 
  padding-bottom: 60px;
}
.shindan-page .contact-section h2 { font-size: 16px; font-weight: 900; color: var(--dark-900); margin-bottom: 10px; line-height: 1.4; }
.shindan-page .contact-section p { font-size: 13px; color: var(--dark-700); line-height: 1.7; margin-bottom: 0px; }
.shindan-page .btn-contact { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 260px; height: 50px; background: #ffe4e4; border: 2px solid var(--red-btn); border-radius: 50px; color: var(--navy); font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; font-family: 'Noto Sans JP', sans-serif; box-shadow: 0 4px 0 var(--red-btn); transition: box-shadow 0.1s, transform 0.1s; }
.shindan-page .btn-contact:active { box-shadow: 0 1px 0 var(--red-btn); transform: translateY(3px); }
.shindan-page .btn-restart { 
  margin-top: 16px; 
  background: #FFE4E4; 
  border: none; 
  border-radius: 12px; 
  color: #3E4A95; 
  font-size: 13px; 
  padding: 10px 20px; 
  cursor: pointer; 
  transition: background 0.15s; 
  width: 100%;
  color: #3E4A95;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}
.shindan-page .btn-restart:hover { background: #f39393; }


/* ======== FIXED BOTTOM CTA ======== */
.fixed-cta { 
  position: fixed; bottom: 0; left: 50%; 
  transform: translateX(-50%); 
  width: 100%; max-width: 380px; 
  background: #BFDBFE; 
  padding: 10px 16px 14px; z-index: 50; 
  display: block; 
  border: 6px solid var(--blue-light2);
  border-top: none;
}

.fixed-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  background: #FFE4E4;
  border: 2px solid #FF4C4C;
  border-radius: 50px;
  color: #3E4A95;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: 0 4px 0 #FF4C4C;
  transition: box-shadow 0.1s, transform 0.1s;
}

.fixed-cta-btn:active { 
  box-shadow: 0 1px 0 #FF4C4C; 
  transform: translateY(3px); 
}

.fixed-cta-btn img { 
  width: 22px;
  height: auto;
  filter: none;
}
/*---------------------------*/
/* shindan.html お問い合わせ*/

.fixed-shindan-cta { 
  position: fixed; bottom: 0; left: 50%; 
  transform: translateX(-50%); 
  width: 100%; 
  max-width: 378px; 
  background: #BFDBFE; 
  padding: 10px 16px 14px; z-index: 50; 
  display: block; 
  border-top: none;
}

.fixed-shindan-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  background: #FFE4E4;
  border: 2px solid #FF4C4C;
  border-radius: 50px;
  color: #3E4A95;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: 0 4px 0 #FF4C4C;
  transition: box-shadow 0.1s, transform 0.1s;
}

.fixed-shindan-cta-btn:active { 
  box-shadow: 0 1px 0 #FF4C4C; 
  transform: translateY(3px); 
}

.fixed-shindan-cta-btn img { 
  width: 22px;
  height: auto;
  filter: none;
}

/* ヘッダーのテキストロゴのリンク設定（訪問済み・ホバー時も固定） */
.brand_link,
.brand_link:visited,
.brand_link:hover,
.brand_link:active {
  color: #3b82f6 !important;
  text-decoration: none !important;
}


@media (min-width: 431px) {
  .shindan-page #app { 
  
  }
}

/* PC表示のとき（画面幅1025px以上）のヘッダー設定 */
@media screen and (min-width: 1025px) {

  .site-header {
    display: flex !important;       /* もし非表示にされていた場合は強制的に表示する */
    top: 0;
    z-index: 999;
    
    /* 【背景色の調整】白ではなく、スマホ版のような綺麗でおしゃれな半透明にする設定 */
    background: rgba(255, 255, 255, 0.92) !important; /* 背景は白ベースですが、92%の不透明度にして後ろを少し透けさせます */
    backdrop-filter: blur(6px) !important;            /* 背景をすりガラス状にぼかす（スマホ版と同じ設定） */
    
    /* もし背景色を完全に「青系」や「グレー系」など白以外に変えたい場合は以下を有効にしてください */
    /* background-color: #f4f7f9 !important; */ /* 例: 薄いブルーグレー */
    
    border-bottom: 1px solid #e6effb !important; /* 下側のうっすらとした区切り線 */
    background: none !important;
        background-color: transparent !important;
        
        /* 1pxの白い下線が残っていると白っぽく見える原因になるため、不要であれば一度消します */
        border-bottom: none !important; 
        
        /* もし白いモヤがかかる場合は、すりガラス効果が残っているので完全に解除します */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
  }


  
  .brand_link{
    color: var(--blue);
    text-decoration: none;
  }
  /* PC版の左端のテキストロゴの設定 */
  .site-header .brand-link {
    font-size: 18px;               /* PC用に少し大きめに調整 */
    font-weight: bold;
    color: #005bac !important;     /* 企業カラーの青 */
    text-decoration: none !important;
    margin-left: 20px;             /* 左端の余白 */
  }

}
/* ======== PC LAYOUT OVERRIDES (min-width: 800px) ======== */
@media (min-width: 800px) {
  .brand_link{
    color: var(--blue);
    text-decoration: none;
  }

.shindan-page .site-header { 
    display: flex !important; 
    left: 0 !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
  }
  .shindan-page .hamburger { display: none !important; }
  .shindan-page #app { margin-top: -25px !important; }
  .shindan-page .main-content { padding-top: 0 !important; }
  
  .shindan-page .pc-deco {
    /* 👇 1fr をやめて、左右の幅を固定(280px)にします */
    grid-template-columns: 280px 390px 280px !important;
    
    /* 👇 追加: グリッド全体を画面のド真ん中に配置します */
    justify-content: center !important;
  }
}

/* ======== 結果画面の下半分を隙間なく白背景にする設定 ======== */
.shindan-page .result-white-area {
  background: #ffffff;
  margin: 20px -16px -100px -16px; 
  padding: 10px 16px 40px 16px; 
}

.shindan-page .result-gray-area {
  background: #F9FAFB;
  flex-grow: 1;        /* 残りの高さをすべて埋める */
  margin: 0px 0px 0px 0px; 
  padding: 24px 16px 50px 16px; 
}

/* ======== 波のアニメーションローダー (完全版) ======== */
.shindan-page .circle-loader {
  width: 140px;
  height: 140px;
  background: linear-gradient(180deg, rgba(139, 143, 255, 0.40) 11.54%, rgba(2, 10, 212, 0.00) 111.54%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 20px rgba(37, 99, 235, 0.15),
    0 10px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}

.shindan-page .circle-loader svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shindan-page .waveXFront {
  animation: waveXFrontAnim 1.8s linear infinite;
}
.shindan-page .waveXBack {
  animation: waveXBackAnim 3s linear infinite;
}

@keyframes waveXFrontAnim {
  from { transform: translateX(0px); }
  to { transform: translateX(-600px); }
}
@keyframes waveXBackAnim {
  from { transform: translateX(-600px); }
  to { transform: translateX(0px); }
}

.shindan-page .waveYFront {
  animation: waveYAnim 1.2s ease-in-out infinite alternate;
}
.shindan-page .waveYBack {
  animation: waveYAnim 2s ease-in-out infinite alternate;
}
@keyframes waveYAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(20px); }
}

.shindan-page .waveRise {
  animation: waveRiseAnim 3s ease-in-out forwards;
  transform-origin: 50% 50%;
}
@keyframes waveRiseAnim {
  0% { transform: translateY(300px) rotate(-10deg); }
  85% { transform: translateY(20px) rotate(10deg); }
  100% { transform: translateY(-80px) rotate(0deg); }
}

/* =========================================
   お店の課題診断ボタン（PC・スマホ共通スタイル）
   ========================================= */
.hero-search-icon {
  display: block;
  z-index: 9999;
  pointer-events: auto;
  transition: transform 0.2s, opacity 0.2s;
}

.hero-search-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-search-icon:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

@media (max-width: 799px) {
  .hero-search-icon {
        position: fixed;
        bottom: 85px;
        right: 31px;
        width: 85px;
  }
}

@media (min-width: 800px) {
  .hero-search-icon {
    position: fixed;
    bottom: 115px;
    right: 29px;
    width: 86px;
  }
}