/* ─────────────────────────────────────────────
     営功社 問診票ポップアップ
     WordPressに組み込んでも既存CSSと衝突しないよう、
     すべて .eks- 接頭辞でスコープしています
     ───────────────────────────────────────────── */
  
  :root{
    --eks-red:  #CE2601;   /* メインレッド */
    --eks-text: #231916;   /* テキストカラー */
    --eks-sub:  #6b6360;
    --eks-line: rgba(206, 38, 1, .38);
  }
  /* Popup Maker標準の閉じるボタン・タイトルを非表示（このポップアップのみ） */
  #pum-4294 .pum-close,
  #pum-4294 .pum-title{ display: none !important; }

  .eks-popup, .eks-popup *{ margin:0; padding:0; box-sizing:border-box; }
  .eks-popup br{ display: none; }
  .eks-popup p:empty{ display: none; }
  /* ── オーバーレイ全体（背面のサイトがうっすら透ける） ── */
  .eks-popup{
    position: fixed; inset: 0; z-index: 99999;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.90) 42%,
      rgba(252,228,222,.93) 48%,
      rgba(250,222,215,.95) 100%
    );
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--eks-text);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    opacity: 1; transition: opacity .3s ease;
  }
  .eks-popup.is-hidden{ opacity: 0; pointer-events: none; }
  .eks-popup[hidden]{ display: none; }

  /* ── ロゴ ── */
  .eks-logo{
    display: flex; justify-content: center; align-items: center;
    height: 102px;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
  }
  .eks-logo h1{ max-width: 176px; height: auto; width: auto; display: block; }
  /* ロゴ画像未設定時のテキスト表示 */
  .eks-logo .eks-logo-text{
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 30px; font-weight: 700; letter-spacing: .12em;
  }

  /* ── CLOSEボタン ── */
  .eks-close{
    position: absolute; top: 0; right: 0; z-index: 100000;
    width: 60px; height: 60px;
    background: var(--eks-red); color: #fff;
    border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1;
    transition: background .18s ease;
  }
  .eks-close:hover{ background: #a81f00; }
  .eks-close:focus-visible{ outline: 3px solid var(--eks-text); outline-offset: 2px; }
  .eks-close svg{ width: 28px; height: 28px; }

  /* ── メイン画像＋ご挨拶 ── */
  .eks-hero{
    position: relative;
    max-width: 1080px; margin: 0 auto;
  }
  .eks-hero img{
    display: block; width: 100%; height: auto;
  }
  .eks-sign{
    position: absolute; left: 0; bottom: 0;
    width: 64%;
    background: rgba(255,255,255,.9);
    border-left: 6px solid var(--eks-red);
    padding: 22px 26px 20px 20px;
    font-size: 16px; line-height: 2.2; letter-spacing: .04em;
  }
  .eks-sign .eks-lead{ font-size: 18px; font-weight: 700; }
  .eks-sign .eks-ask{
    display: inline;
    font-weight: 500;
    background-image: linear-gradient(var(--eks-red), var(--eks-red));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    padding-bottom: 2px;
  }

  /* ── 問診票リスト ── */
  .eks-voices{
    max-width: 1080px; margin: 0 auto;
    padding: 6px 0 100px;
  }
  /* 区切り線：両端が透明に消えていくグラデーション線（1px） */
  .eks-item{
    border-bottom: none;
    background-image: linear-gradient(
      to right,
      rgba(206, 38, 1, 0)   0%,
      rgba(206, 38, 1, .55) 30%,
      rgba(206, 38, 1, .55) 70%,
      rgba(206, 38, 1, 0)   100%
    );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
  }

  /* 棚札：hover時に左へ●・文字色変化・文字が右へずれる */
  .eks-voices{
    --eks-pl: 62px;     /* 通常時の文字の左位置 */
    --eks-shift: 8px;   /* hover時に右へずれる量 */
    --eks-dot: 19px;     /* ●の直径 */
  }
  .eks-voice{
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    padding: 26px 94px 26px var(--eks-pl);
    font-family: inherit; font-size: 18px; font-weight: 500;
    letter-spacing: .05em; line-height: 1.7;
    color: var(--eks-text); position: relative;
    transition: color .18s ease, padding-left .18s ease;
  }
  /* ●（項目の上下中央に配置） */
  .eks-voice::before{
    content:""; position:absolute;
    left: calc(var(--eks-pl) - 35px);
    top: 52%;
    width: var(--eks-dot); height: var(--eks-dot);
    margin-top: calc(var(--eks-dot) / -2);
    border-radius: 50%;
    background: var(--eks-red); opacity: 0; transition: opacity .18s ease;
  }
  .eks-voice .eks-chev{
    flex: none; width: 20px; height: 20px; color: var(--eks-red);
    transition: transform .25s ease;
  }
  .eks-voice:hover,
  .eks-voice:focus-visible{ color: var(--eks-red); padding-left: calc(var(--eks-pl) + var(--eks-shift)); outline: none; }
  .eks-voice:hover::before,
  .eks-voice:focus-visible::before{ opacity: 1; }
  .eks-item.open .eks-voice{ color: var(--eks-red); padding-left: calc(var(--eks-pl) + var(--eks-shift)); }
  .eks-item.open .eks-voice::before{ opacity: 1; }
  .eks-item.open .eks-chev{ transform: rotate(90deg); }

  .eks-detail{
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
  }
  .eks-detail-inner{ padding: 2px 94px 32px calc(var(--eks-pl) + var(--eks-shift)); }
  .eks-detail p.eks-real{
    font-size: 15.5px; line-height: 2.1; letter-spacing: .04em;
    color: #3d3431;
  }
  .eks-detail .eks-douzo{
    margin-top: 20px; font-size: 13.5px; color: var(--eks-sub);
  }
  /* 商品バナー画像のボタン（322×76px・枠線込み）
     参考画像に合わせ、左右の余白を揃えて
     「画像｜→」を横並び・上下中央に配置 */
  .eks-detail a.eks-go{
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    width: 322px; max-width: 100%;
    aspect-ratio: 322 / 76;
    padding: 0 24px 0 22px;          /* 左右の余白をほぼ均等に */
    border: 1px solid #CE2601;
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .eks-detail a.eks-go img{
    display: block;
    flex: 0 1 auto; min-width: 0;
    height:100%; width: auto; max-width: 100%;
    object-fit: contain;             /* 見切れないよう枠内に縮小して収める */
    object-position: left center;
  }
  /* ボタン右側の赤い右向き矢印 */
  .eks-detail a.eks-go .eks-go-arrow{
    flex: none;
    width: 8px; height: 13px;
    color: #CE2601; pointer-events: none;
  }
  .eks-detail a.eks-go:hover{ opacity: .85; transform: translateY(-2px); }
  .eks-detail a.eks-go:focus-visible{ outline: 3px solid var(--eks-red); outline-offset: 3px; }

  .eks-footer{
    max-width: 1080px; margin: 0 auto; padding: 0 0 56px;
    text-align: center; font-size: 12px; color: var(--eks-sub); letter-spacing: .1em;
  }

  /* ── タブレット ── */
  @media (max-width: 1240px){
    .eks-close{ right: 0; }
    .eks-hero, .eks-voices{ margin: 0 24px; }
    .eks-voices{ margin-bottom: 0; }
  }
  @media (max-width: 860px){
    .eks-sign{ width: 82%; font-size: 14.5px; }
    .eks-sign .eks-lead{ font-size: 16px; }
    .eks-voices{ --eks-pl: 24px; }
    .eks-voice{ padding-top: 22px; padding-bottom: 22px; padding-right: 28px; font-size: 16.5px; }
    .eks-detail-inner{ padding-right: 28px; padding-bottom: 28px; }
  }
  /* ── スマホ：ご挨拶を画像の下に回す ── */
  @media (max-width: 600px){
    .eks-logo{ height: 72px; justify-content: flex-start; padding-left: 20px; }
    .eks-logo img{ height: 40px; }
    .eks-close{ width: 52px; height: 52px; font-size: 11px; }
    .eks-close svg{ width: 22px; height: 22px; }
    .eks-hero, .eks-voices{ margin: 0 16px; }
    .eks-sign{
      position: static; width: 100%;
      background: #fff;
      padding: 18px 16px 16px 16px;
      font-size: 14px; line-height: 2;
    }
    .eks-sign .eks-lead{ font-size: 15.5px; }
    .eks-voices{ --eks-pl: 20px; --eks-dot: 7px; }
    .eks-voice{ padding-top: 20px; padding-bottom: 20px; padding-right: 8px; font-size: 16px; }
    .eks-detail-inner{ padding-right: 12px; padding-bottom: 26px; }
  }

  @media (prefers-reduced-motion: reduce){
    .eks-popup, .eks-voice, .eks-voice::before, .eks-chev, .eks-detail, .eks-detail a.eks-go{ transition: none; }
  }

  /* 奥田ボタン */
  @media screen and (max-width: 600px) {
  .popup-fixed-button {
    right: 10px;
    bottom: 10px;
    width: 92px;
    height: auto;
  }

  .popup-fixed-button img {
    width: 92px;
    height: auto;
  }
}

/* ─────────────────────────────────────────────
   Popup Maker：右下追従画像ボタン
   ───────────────────────────────────────────── */
body button.popup-fixed-button {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 999999 !important;

  display: block !important;
  width: 122px !important;
  height: 199px !important;
  margin: 0 !important;
  padding: 0 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;

  transform: none;
  transition: transform .3s ease;
}

body button.popup-fixed-button img {
  display: block !important;
  width: 122px !important;
  height: 199px !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain;
}

body button.popup-fixed-button:hover {
  transform: translateY(-8px) !important;
}

body button.popup-fixed-button:focus-visible {
  outline: 3px solid #16489e !important;
  outline-offset: 4px;
}

@media screen and (max-width: 600px) {
  body button.popup-fixed-button {
    right: 10px !important;
    bottom: 10px !important;
    width: 92px !important;
    height: auto !important;
  }

  body button.popup-fixed-button img {
    width: 92px !important;
    height: auto !important;
  }
}