/* LINE の追従ボタン。説明は line-float.php。見た目は平ら（LINE の緑一色・影は薄く） */
html .rh-line { --rh-line-g: #06c755; --rh-line-g-dark: #05b04c; --rh-line-bottom: 24px; --rh-line-h: 56px; }
html .rh-line.is-closed { display: none !important; }

/* 位置は外枠で持つ（閉じるボタンを、伸び縮みするボタンの左上に付けるため） */
html .rh-line__wrap {
  position: fixed; right: 6px; bottom: var(--rh-line-bottom); z-index: 89;
  transition: opacity .3s, transform .3s, bottom .3s;
}
html .rh-line.is-away .rh-line__wrap { opacity: 0; transform: translateY(16px); pointer-events: none; }

html .rh-line__btn {
  position: relative; display: flex; flex-direction: row-reverse; align-items: center;
  height: var(--rh-line-h); max-width: var(--rh-line-h); overflow: hidden;
  border-radius: calc(var(--rh-line-h) / 2);
  background: var(--rh-line-g); color: #fff; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  transition: max-width .45s cubic-bezier(.2, .9, .25, 1), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
/* 元のテーマの a:hover { color: inherit } で文字が黒くなるのを止める */
html .rh-line a.rh-line__btn, html .rh-line a.rh-line__btn:hover, html .rh-line a.rh-line__btn:focus, html .rh-line a.rh-line__btn:visited { color: #fff; text-decoration: none; }

html .rh-line__icon { display: grid; place-items: center; flex: none; width: var(--rh-line-h); height: var(--rh-line-h); }
html .rh-line__logo { display: block; width: 29px; height: auto; }

html .rh-line__text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding-left: 20px; white-space: nowrap;
  opacity: 0; transform: translateX(10px);
  transition: opacity .2s, transform .3s cubic-bezier(.2, .9, .25, 1);
}
html .rh-line__text small { padding: 1px 7px; border-radius: 20px; background: #fff; color: var(--rh-line-g-dark); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
html .rh-line__text b { font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; }

/* 伸びた形（PC はマウスを載せたとき・最初に一度。スマホはふだん） */
html .rh-line.is-open .rh-line__btn { max-width: 320px; }
html .rh-line.is-open .rh-line__text { opacity: 1; transform: none; transition-delay: .08s, 0s; }

html .rh-line__btn:focus-visible { outline: 3px solid #1a5cff; outline-offset: 3px; }

/* 閉じる（スマホだけ） */
html .rh-line__close { display: none; }

/* PC（マウスあり）：右端の青い追従ボタンの下。載せると左へ伸びる（浮き上がりなし） */
@media (hover: hover) and (min-width: 768px) {
  html .rh-line__btn:hover, html .rh-line__btn:focus-visible { max-width: 320px; background-color: var(--rh-line-g-dark); }
  html .rh-line__btn:hover .rh-line__text, html .rh-line__btn:focus-visible .rh-line__text { opacity: 1; transform: none; transition-delay: .08s, 0s; }
}

/* スマホ・タブレット（マウスなし）：少し小さく。ふだんは伸びた形、下へスクロールで丸に縮む。左上の×で閉じる */
@media (max-width: 767px), (hover: none) {
  html .rh-line { --rh-line-h: 46px; }
  html .rh-line__wrap { right: 10px; }
  html .rh-line__text { padding-left: 15px; gap: 2px; }
  html .rh-line__text small { font-size: 9px; padding: 0 6px; }
  html .rh-line__text b { font-size: 13px; }
  html .rh-line__logo { width: 25px; }
  html .rh-line:not(.is-small) .rh-line__btn { max-width: 260px; }
  html .rh-line:not(.is-small) .rh-line__text { opacity: 1; transform: none; }
  html .rh-line__close {
    position: absolute; top: -9px; left: -9px; z-index: 1;
    display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 50%; background: #555; color: #fff;
    font: 700 13px/1 sans-serif; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  }
  /* 見た目は小さく、押せる範囲は広く */
  html .rh-line__close::before { content: ""; position: absolute; inset: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  html .rh-line__btn, html .rh-line__text, html .rh-line__wrap { transition: opacity .2s; }
}