/*
Theme Name: HAKU Child
Template: haku_tcd080
Version: 1.0
*/

/* =================================================
   SORANOME風 追従お問い合わせ（↑無し版）
   PC：右側に縦ボタン
   SP：下部固定バー
   ================================================= */

/* SP（基本）：下部バー */
.ko-fix-right{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  display: grid;
  grid-template-columns: 100%;
  line-height: 3.5em;
}

/* お問い合わせボタン */
.ko-fix-right-contact{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 .5em;

  font-size: 20px;
  color: #fff;
  text-decoration: none !important;

  background: #ab0003; /* 赤 */
}

/* アイコン */
.ko-fix-right-contact-img{
  width: 1.5em;
  line-height: 1;
}

/* PC：右側に縦配置（SORANOMEと同じ） */
@media (min-width: 768px){
  .ko-fix-right{
    left: auto;
    right: 0;
    bottom: 0;
    height: fit-content;

    writing-mode: vertical-rl;
    margin: auto 0;
    grid-template-columns: 100%;
  }

  .ko-fix-right-contact{
    padding: 1em 0;
  }
}

/* =================================================
   SORANOMEに寄せる微調整
   1) 角丸を消して四角に
   2) 余白を増やしてサイズを同等に
   3) 既存の「TOPへ」ボタンと被らないように位置を上げる（PC）
   ================================================= */

/* 1) 角丸を強制で無効化（テーマ側のborder-radius対策） */
.ko-fix-right-contact{
  border-radius: 0 !important;
}

/* 2) 余白（ボタンサイズ）をSORANOME寄せに調整 */
.ko-fix-right{
  line-height: 3.5em; /* SORANOMEと同等 */
}

.ko-fix-right-contact{
  font-size: 22px;
  padding: 0.1em 1.2em;     /* SPの横バーが窮屈な場合に効く */
  gap: 0 .6em;
}

/* PC縦ボタンの余白（SORANOMEは 1em 0） */
@media (min-width: 768px){
  .ko-fix-right-contact{
    padding: 1.2em 0.6em !important; /* 縦ボタンの“厚み”を出す */
  }
}

/* 3) 既存のTOPへ（上矢印）と被らないように、PCだけ少し上げる */
@media (min-width: 768px){
  .ko-fix-right{
    bottom: 90px;  /* ← 被りが消えるまで 70〜140px の間で微調整 */
    right: 0;
  }
}

/* =================================================
   SPで「TOPへ」と共存：右側に避けスペースを作る
   ================================================= */
@media (max-width: 768px){
  /* 右下のTOPへボタン分のスペースを確保（ここで共存できる） */
  .ko-fix-right{
    padding-right: 120px; /* ← TOPへボタンの幅+余白。70〜90で調整 */
    box-sizing: border-box;
  }

  /* バー自体は画面幅いっぱいにしたいので、内側で見た目を保つ */
  .ko-fix-right-contact{
    width: 100%;
  }
}

/* =================================================
   reCAPTCHA バッジ位置調整（デバイス別）
   ================================================= */

/* まずPC（デフォルト） */
.grecaptcha-badge{
  bottom: 300px !important; /* ← PCでお問い合わせと被らない高さに */
  /* right: 14px !important;   念のため少し内側 */
  z-index: 9998 !important;
}

/* スマホ */
@media (max-width: 768px){
  .grecaptcha-badge{
    bottom: 60px !important; /* ← さっきの「いい感じ」の値
    right: 10px !important; */
  }
}