/* ===============================
   IndeY Herbs CTA - external CSS (100px, text visible)
   PC: right-edge compact blocks (100x100) with multiline labels (via ::after)
   SP: bottom fixed bar (3 columns)
   =============================== */

/* projectテンプレート調整（PC） */
@media screen and (min-width:769px){
  .project-template-default.single.single-project #main_contents.single_col #main_col{
    margin:0 auto; width:100%; max-width:100%;
  }
  .project-template-default.single.single-project #project_title_area .image{
    height:600px;
  }
}

/* 共通ベース */
#cta-float{position:fixed;z-index:9999;font-family:inherit;line-height:1;}
#cta-float .cta-float__btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;color:#fff;white-space:normal;
  transition:filter .15s ease, opacity .15s ease;
  box-sizing:border-box;
}
#cta-float .cta-float__btn:hover{filter:brightness(1.06);}
#cta-float .cta-float__btn:active{opacity:.88;}
#cta-float .cta-float__btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ===== PC（1025px以上）：右端 100x100・角丸・常時表示ラベル ===== */
@media (min-width:1025px){
  #cta-float{
    top:70%; right:0; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:12px;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
  }
  #cta-float .cta-float__btn{
    position:relative;
    width:100px; height:100px; min-width:100px;
    border-radius:14px; padding:10px;
    text-indent:-9999px; /* テキストは隠し、擬似要素で整形表示 */
  }

  /* 背景色（調整可） */
  #cta-b2b    { background:#6B5B95; }  /* 業務用：パープル */
  #cta-store  { background:#6B4F2A; }  /* 通常EC：ブラウン */
  #cta-contact{ background:#1E8E57; }  /* お問い合わせ・サンプル請求：明るめグリーン */

  /* ラベル（明示改行） */
  #cta-float .cta-float__btn::after{
    position:absolute; left:8px; right:8px; top:50%;
    transform:translateY(-50%);
    display:block; text-align:center; color:#fff;
    line-height:1.2; letter-spacing:.02em;
    font-size:12.5px; font-weight:700;
    white-space:pre-line; text-indent:0; /* ← これで可視化（親のtext-indentを打ち消す） */
    content:"";
  }
  #cta-b2b::after     { content:"【業務用】\AONLINE\ASTORE"!important; }
  #cta-store::after   { content:"ONLINE\ASTORE"!important; }
  #cta-contact::after { content:"お問い合わせ\Aサンプル請求"!important; }
}

/* ===== SP（1024px以下）：下部バーを画面下辺にピッタリ ===== */
@media (max-width:1024px){
  /* 下辺ジャスト（安全域を使わず完全に0にする） */
  #cta-float{
    left: 0;
    right: 0;
    bottom: 0 !important;     /* ← ここを0に固定 */
    display: flex;
    gap: 0;
  }

  /* バー高さ（#return_top退避用の基準値） */
  :root{ --cta-sp-bar-h: 52px; }  /* 必要なら 48〜56pxで微調整 */

  /* ボタン文字は通常表示のまま */
  #cta-float .cta-float__btn{
    flex: 1 1 33.33%;
    padding: 12px 8px;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 0;
    text-align: center;
    text-indent: 0;
    min-width: 0;
    height: var(--cta-sp-bar-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,.25);
  }
  #cta-float .cta-float__btn:first-child{ border-left: none; }

  /* 既存のTOPボタンをCTAの“上”に退避（重なり回避） */
  #return_top{
    bottom: var(--cta-sp-bar-h) !important;
    right: 12px;
    z-index: 10000;           /* CTAより前面にしたい場合は 10000、背面なら <9999 */
  }
  /* ログイン中（管理バー表示）だけさらに上げる */
  body.admin-bar #return_top{
    bottom: calc(var(--cta-sp-bar-h) + 46px) !important;
  }

  /* 配色はそのまま（必要なら変更） */
  #cta-b2b    { background:#6B5B95; }
  #cta-store  { background:#6B4F2A; }
  #cta-contact{ background:#1E8E57; }
}

}