@charset "utf-8";

/*************************
 *  ステータスボタン(SP)   *
 *************************/

/*==============================================
 * 目次
 *==============================================
 * 0. 共通スタイル
 * 1. お気に入りボタン
 * 2. ステータスボタン（カード型）
 * 3. ステータスボタン（リスト型）
 *    3.1 リスト型専用調整
 * 4. ステータスボタン（その他）
 * 5. ステータスボタン（ミニ）
 * 6. アニメーション
 * 7. ステータスボタン（プロフィールページ専用）
 * 8. ステータスボタン（フッター専用）
 * 9. ステータスボタン（ログアウトTOPページ専用）
 *    9.1 初めての方におすすめセクション
 *    9.2 相談の多い悩みセクション
 *    9.3 口コミセクション
 *    9.4 ステータスアイコン（ログアウトTOP用）
 *    9.5 コンパクトボタン共通スタイル（ログアウトTOP・ランキング共通）
 * 10. ステータスボタン（ランキング専用）
 *==============================================*/

/*==============================================
 * 0. 共通スタイル
 *==============================================*/
/* アイコンの基本スタイル */
.icon_status_standby::before,
.icon_status_call::before,
.icon_status_resv::before,
.icon_status_sche::before,
.icon_status_out::before {
  position: relative;
  top: 3px;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 各アイコンの画像とサイズ */
.icon_status_standby::before {
  right: 3px;
  width: 19px;
  height: 19px;
  background-image: url(../../images/cmn_icon_status_standby.svg);
}

.icon_status_call::before {
  right: 5px;
  width: 19px;
  height: 19px;
  background-image: url(../../images/cmn_icon_status_call.svg);
}

.icon_status_resv::before,
.icon_status_sche::before {
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  background-image: url(../../images/cmn_icon_status_sche.svg);
}

.icon_status_out::before {
  top: 2px;
  right: 4px;
  width: 15px;
  height: 15px;
  background-image: url(../../images/cmn_icon_status_wait.svg);
}

/* グラデーション効果（共通） */
.btn_status_gradient::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

/*==============================================
 * 1. お気に入りボタン
 *==============================================*/
#list_card .card_fav {
  position: absolute;
  top: calc(15% + 50px);
  left: calc(45% + 40px);
  z-index: 10;
}

#list_card .btn_fav {
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

#list_card .btn_fav img {
  width: 24px;
  height: 24px;
}

#prf_area_list .btn_fav {
  position: absolute;
  top: 100px;
  right: 10px;
  width: 28px;
  z-index: 1;
}

.js-fav-add-img {
  content: url(../../images/icon_fav-add.svg);
}

.js-fav-del-img {
  content: url(../../images/icon_fav-del.svg);
}

/*==============================================
 * 2. ステータスボタン（カード型）
 *==============================================*/
#btn_area_card {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 10px;
}

#btn_area_card div.btn_status .btn_text_group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  gap: 0;
  line-height: 1;
}

#btn_area_card div.btn_status .btn_text_group p {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

#btn_area_card div.btn_status a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 95%;
  height: 45px;
  line-height: 45px;
  margin: 0 auto;
  font-family: var(--fa-hiragino-maru-gothic);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 10px;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
}

#btn_area_card div.btn_status a::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

/* リスト型のアイコン位置調整 */
#btn_area_list .btn_status .icon_status_call::before {
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
}

#btn_area_list .btn_status .icon_status_resv::before {
  width: 20px;
  height: 20px;
}

#btn_area_list .btn_status .icon_status_out::before {
  top: 3px;
  right: 5px;
  width: 19px;
  height: 19px;
}

/* 分割ボタングループ */
.btn_status_split_group {
  display: flex;
  gap: 3px;
}

.btn_status_split_group a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.btn_status_split_group a > div {
  font-size: 1.1rem;
}

/* LINE連携バナー */
.line_cooperation_banner {
  margin: 10px 20px 20px 20px;
}

/* 分割ボタン用アイコン */
.icon_status_standby_tel::before,
.icon_status_standby_chat::before {
  position: relative;
  top: 2px;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon_status_standby_tel::before {
  right: 2px;
  width: 15px;
  height: 15px;
  background-image: url(../../images/cmn_icon_status_standby.svg);
}

.icon_status_standby_chat::before {
  right: 4px;
  width: 13px;
  height: 13px;
  background-image: url(../../images/cmn_icon_status_chat.svg);
}

.btn_status_standby,
a.btn_status_standby,
span.btn_status_standby {
  color: var(--white)!important;
  background-image: var(--status-standby);
}

/* 共通の影スタイル */
a.btn_status_standby::after,
a.btn_status_call::after,
a.btn_status_resv::after,
a.btn_status_out::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  opacity: 0.3;
  border-radius: 50px;
  filter: blur(3px);
  z-index: -1;
}

a.btn_status_standby::after {
  background: var(--status-standby);
}

.btn_status_call,
a.btn_status_call {
  color: var(--white)!important;
  background-image: var(--status-call);
  position: relative;
  z-index: 1;
}

a.btn_status_call::after {
  background: var(--status-call);
}

.btn_status_resv,
a.btn_status_resv {
  color: var(--white)!important;
  background-image: var(--status-resv);
}

a.btn_status_resv::after {
  background: var(--status-resv);
}

.btn_status_out,
a.btn_status_out {
  color: var(--white)!important;
  background-image: var(--status-out);
  position: relative;
  z-index: 1;
}

a.btn_status_out::after {
  background: var(--status-out);
}

/* 共通テキストカラー */
a.btn_status_call p.btn_text_status,
a.btn_status_out p.btn_text_status,
a.btn_status_resv p.btn_text_status,
a.btn_status_sch p.btn_text_status,
#btn_area_list a.btn_status_call .btn_text_group p,
#btn_area_list a.btn_status_resv .btn_text_group p,
#btn_area_list a.btn_status_sch .btn_text_group p,
#btn_area_list a.btn_status_out .btn_text_group p {
  color: var(--white);
  margin: 0;
  padding: 0;
  line-height: 1;
}

.btn_text_group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  gap: 0;
  line-height: 1;
}

.btn_text_wait {
  font-size: 0.8rem;
  line-height: 1;
}

/* 共通フォントサイズ */
#btn_area_list a.btn_status_call .btn_text_group .btn_text_status,
#btn_area_list a.btn_status_resv .btn_text_group .btn_text_status,
#btn_area_list a.btn_status_sch .btn_text_group .btn_text_status,
#btn_area_list a.btn_status_out .btn_text_group .btn_text_status {
  font-size: 1.6rem;
  line-height: 1.3;
}

#btn_area_list a.btn_status_call .btn_text_group .btn_text_wait,
#btn_area_list a.btn_status_resv .btn_text_group .btn_text_wait,
#btn_area_list a.btn_status_sch .btn_text_group .btn_text_wait,
#btn_area_list a.btn_status_out .btn_text_group .btn_text_wait {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
}

/*==============================================
 * 3. ステータスボタン（リスト型）
 *==============================================*/
#btn_area_list {
  display: flex;
  flex-direction: row;
  padding: 0 15px 10px 15px;
}

#btn_area_list div.btn_status a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 15px;
  padding: 0;
  height: 50px;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--fa-hiragino-maru-gothic);
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
  z-index: 1;
}

#btn_area_list div.btn_status a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

#btn_area_list div.btn_status a.btn_status_sch {
  color: var(--white);
}

.fg_1 {
  flex-grow: 1;
}
.fg_2 {
  flex-grow: 2;
}
.fg_3 {
  flex-grow: 3;
}

.modal_welcome_wrap #btn_area_list .btn_status a {
  height: 50px;
}

/*==============================================
 * 3.1. ステータスボタン（リスト型専用調整）
 *==============================================*/
/* リスト型のボタンエリアに余白を追加して影が見えるようにする */
#prf_area_list #btn_area_list {
  padding: 0 15px 5px 15px !important;
}

#prf_area_list .btn_status_list {
  /* 影が表示されるように余白を確保 */
  margin: 0 0 5px 0;
}

#prf_area_list .btn_status_list a {
  margin: 0 !important;
  font-size: 1.6rem !important;
}

/* リスト型ボタンの影を見えるように調整 */
#prf_area_list .btn_status_list a.btn_status_call::after,
#prf_area_list .btn_status_list a.btn_status_resv::after,
#prf_area_list .btn_status_list a.btn_status_out::after,
#prf_area_list .btn_status_list a.btn_status_standby::after {
  border-radius: 10px !important;
  top: 2px !important;
  height: 50px !important;
}

#prf_area_list .btn_status_split_group a > div {
  font-size: 1.6rem !important;
}

/* リスト型の分割ボタンアイコンサイズ調整 */
#prf_area_list .icon_status_standby_tel::before {
  width: 18px;
  height: 18px;
}

#prf_area_list .icon_status_standby_chat::before {
  width: 16px;
  height: 16px;
}

/*==============================================
 * 4. ステータスボタン（その他）
 *==============================================*/
#btn_area_common {
  padding: 0 15px;
}

#btn_area_common div.btn_status a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

#btn_area_common div.btn_status a.btn_status_standby {
  background-color: #6bafcf;
  border: 2px solid #90c3db;
  color: var(--white);
}

#btn_area_common i {
  margin-right: 5px;
}

#btn_area_common input {
  display: block;
  width: 100%;
  padding: 10px 0;
  margin: 10px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  appearance: none;
  color: #6bafcf;
  background-color: var(--white);
  border: 3px solid #90c3db;
  outline: 0;
}

#btn_area_common button {
  display: block;
  padding: 10px 0;
  margin: auto;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  appearance: none;
  color: #6bafcf;
  background-color: var(--white);
  border: 3px solid #90c3db;
  margin-bottom: 10px;
}

/*==============================================
 * 5. ステータスボタン（ミニ）
 *==============================================*/
#btn_area_item .btn_status a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 60px;
  height: 20px;
  font-family: var(--fa-hiragino-maru-gothic);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  outline: 1px solid rgb(255 255 255 / 25%);
  outline-offset: -2px;
}

#btn_area_item .btn_status a::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

#btn_area_item .btn_status a.btn_status_standby::after,
#btn_area_item .btn_status a.btn_status_call::after,
#btn_area_item .btn_status a.btn_status_resv::after,
#btn_area_item .btn_status a.btn_status_out::after {
  top: 2px;
  height: 20px;
}

/*==============================================
 * 6. アニメーション
 *==============================================*/
/* アニメーション削除済み */

/*==============================================
 * 7. ステータスボタン（プロフィールページ専用）
 *==============================================*/
#btn_area_prof {
  display: block;
  padding: 10px 20px 5px 20px;
}

#btn_area_prof .btn_status {
  margin-bottom: 10px;
}

#btn_area_prof .btn_status .btn_text_group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  gap: 0;
  line-height: 1;
}

#btn_area_prof .btn_status .btn_text_group p {
  margin: 0;
  padding: 0;
  line-height: 1;
}

#btn_area_prof .btn_status a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 50px;
  margin: 0 auto;
  font-family: var(--fa-hiragino-maru-gothic);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 10px;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
  z-index: 1;
}

#btn_area_prof .btn_status a::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

/* プロフィールページのアイコンサイズ調整 */
#btn_area_prof .btn_status .icon_status_resv::before,
#btn_area_prof .btn_status .icon_status_sche::before {
  width: 18px;
  height: 18px;
}

/* 分割ボタングループ（プロフィールページ用） */
#btn_area_prof .btn_status_split_group {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

#btn_area_prof .btn_status_split_group .btn_status {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

#btn_area_prof .btn_status_split_group a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

/* チャット用アイコン */
#btn_area_prof .btn_status .icon_status_standby_chat::before {
  position: relative;
  top: 2px;
  right: 4px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../../images/cmn_icon_status_chat.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

/* 影のスタイル（プロフィールページ用） */
#btn_area_prof .btn_status a.btn_status_standby::after,
#btn_area_prof .btn_status a.btn_status_call::after,
#btn_area_prof .btn_status a.btn_status_resv::after,
#btn_area_prof .btn_status a.btn_status_sche::after,
#btn_area_prof .btn_status a.btn_status_out::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  height: 50px;
  width: 100%;
  opacity: 0.5;
  border-radius: 10px;
  filter: blur(3px);
  z-index: -1;
}

#btn_area_prof .btn_status a.btn_status_standby::after {
  background: var(--status-standby);
}

#btn_area_prof .btn_status a.btn_status_call::after {
  background: var(--status-call);
}

#btn_area_prof .btn_status a.btn_status_resv::after,
#btn_area_prof .btn_status a.btn_status_sche::after {
  background: var(--status-resv);
}

#btn_area_prof .btn_status a.btn_status_out::after {
  background: var(--status-out);
}

/* ステータスカラー（プロフィールページ用） */
#btn_area_prof .btn_status .btn_status_sche,
#btn_area_prof .btn_status a.btn_status_sche {
  color: var(--white)!important;
  background-image: var(--status-resv);
  position: relative;
  z-index: 1;
}

/*==============================================
 * 8. ステータスボタン（フッター専用）
 *==============================================*/
#btn_area_footer {
  width: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#btn_area_footer .btn_status {
  width: 100%;
}

#btn_area_footer .btn_status a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 40px;
  padding: 0;
  font-family: var(--fa-hiragino-maru-gothic);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
  z-index: 1;
}

#btn_area_footer .btn_status a::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

/* フッター用のテキストグループ */
#btn_area_footer .btn_status .btn_text_group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  gap: 0;
  line-height: 1;
}

#btn_area_footer .btn_status .btn_text_group p {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

#btn_area_footer .btn_status .btn_text_status {
  font-size: 1.3rem;
}

#btn_area_footer .btn_status .btn_text_wait {
  font-size: 0.8rem;
}

/* 分割ボタングループ（フッター用） */
#btn_area_footer .btn_status_split_group {
  display: flex;
  gap: 3px;
}

#btn_area_footer .btn_status_split_group a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

#btn_area_footer .btn_status_split_group a > div {
  font-size: 1.1rem;
}

/* フッター用のアイコン位置調整 */
#btn_area_footer .icon_status_out::before {
  top: 3px;
}

/* フッター用の影スタイル */
#btn_area_footer .btn_status a.btn_status_standby::after,
#btn_area_footer .btn_status a.btn_status_call::after,
#btn_area_footer .btn_status a.btn_status_resv::after,
#btn_area_footer .btn_status a.btn_status_out::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  height: 40px;
  width: 100%;
  opacity: 0.3;
  border-radius: 10px;
  filter: blur(3px);
  z-index: -1;
}

#btn_area_footer .btn_status a.btn_status_standby::after {
  background: var(--status-standby);
}

#btn_area_footer .btn_status a.btn_status_call::after {
  background: var(--status-call);
}

#btn_area_footer .btn_status a.btn_status_resv::after {
  background: var(--status-resv);
}

#btn_area_footer .btn_status a.btn_status_out::after {
  background: var(--status-out);
}

/*==============================================
 * 9. ステータスボタン（ログアウトTOPページ専用）
 *==============================================*/

/*==============================================
 * 9.1 初めての方におすすめセクション
 *==============================================*/
.section__first-horizontal-list .item .first_list-btn {
  margin: 10px 0;
}

.section__first-horizontal-list .item .first_list-btn .btn_status a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 3px 0;
  width: 120px;
  height: 30px;
  font-size: 1.2rem;
  font-family: var(--fa-hiragino-maru-gothic);
  border-radius: 50px;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
  position: relative;
}

/* ステータスボタンの影スタイル */
.section__first-horizontal-list
  .item
  .first_list-btn
  .btn_status
  a.btn_status_standby::after,
.section__first-horizontal-list
  .item
  .first_list-btn
  .btn_status
  a.btn_status_call::after,
.section__first-horizontal-list
  .item
  .first_list-btn
  .btn_status
  a.btn_status_resv::after,
.section__first-horizontal-list
  .item
  .first_list-btn
  .btn_status
  a.btn_status_out::after {
  top: 8px;
  height: 30px;
}

.section__first-horizontal-list
  .item
  .first_list-btn
  .btn_status
  a
  .btn_text_wait {
  margin: 8px 0 0 0;
  padding: 0;
  color: #0a246a;
}

/*==============================================
 * 9.2 相談の多い悩みセクション
 *==============================================*/
/* 相談の多い悩み固有：位置・サイズ調整 */
.list__recom-category .btn_status a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 70px;
  left: 105px;
  width: 50%;
  margin: 0;
  padding: 7px 0;
  z-index: -1;
}

/*==============================================
 * 9.3 口コミセクション
 *==============================================*/
#index_lo_section .section__review .btn_status {
  display: block;
  position: absolute;
  bottom: 17px;
  right: 0;
  width: 25%;
  font-family: var(--fa-hiragino-maru-gothic);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  font-size: 0.9rem;
  text-align: center;
}

#index_lo_section .section__review .btn_status div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  border-radius: 50px;
  outline: 1px solid rgb(255 255 255 / 25%);
  outline-offset: -2px;
}

#index_lo_section .section__review .btn_status div::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

/*==============================================
 * 9.4 ステータスアイコン（ログアウトTOP用）
 *==============================================*/
/* 待機中アイコン */
#index_lo_section .section__first .btn_status .icon_status_standby::before,
#index_lo_section
  .section__recom-category
  .btn_status
  .icon_status_standby
  span::before,
#index_lo_section .section__ranking .icon_status_standby::before {
  position: relative;
  top: 2px;
  right: 2px;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../../images/cmn_icon_status_standby.svg) no-repeat;
  background-size: contain;
}

#index_lo_section .section__review .btn_status .icon_status_standby::before {
  width: 13px;
  height: 13px;
}

/* 通話中アイコン */
#index_lo_section .section__first .btn_status .icon_status_call::before,
#index_lo_section
  .section__recom-category
  .btn_status
  .icon_status_call
  span::before,
#index_lo_section .section__ranking .icon_status_call::before {
  position: relative;
  top: 3px;
  right: 4px;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../../images/cmn_icon_status_call.svg) no-repeat;
  background-size: contain;
}

#index_lo_section .section__review .btn_status .icon_status_call::before {
  width: 13px;
  height: 13px;
}

/* 予約受付中アイコン */
#index_lo_section .section__first .btn_status .icon_status_resv::before,
#index_lo_section
  .section__recom-category
  .btn_status
  .icon_status_resv
  span::before,
#index_lo_section .section__ranking .icon_status_resv::before {
  position: relative;
  top: 2px;
  right: 3px;
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(../../images/cmn_icon_status_resv.svg) no-repeat;
  background-size: contain;
}

/* 離席中アイコン */
#index_lo_section .section__first .btn_status .icon_status_out::before,
#index_lo_section
  .section__recom-category
  .btn_status
  .icon_status_out
  span::before,
#index_lo_section .section__ranking .icon_status_out::before {
  position: relative;
  top: 2px;
  right: 4px;
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url(../../images/cmn_icon_status_wait.svg) no-repeat;
  background-size: contain;
}

/*==============================================
 * 9.5 コンパクトボタン共通スタイル（ログアウトTOP・ランキング共通）
 *==============================================*/
/* 基本スタイル（フォント・アウトライン・角丸） */
.list__recom-category .btn_status a,
#top_ranking_contents .top_ranking_status_btn a {
  font-family: var(--fa-hiragino-maru-gothic);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
}

/* グラデーション効果 */
.list__recom-category .btn_status a::before,
#top_ranking_contents .top_ranking_status_btn a::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}

/* 影スタイル */
.list__recom-category .btn_status a.btn_status_standby::after,
.list__recom-category .btn_status a.btn_status_call::after,
.list__recom-category .btn_status a.btn_status_resv::after,
.list__recom-category .btn_status a.btn_status_out::after,
#top_ranking_contents a.btn_status_standby::after,
#top_ranking_contents a.btn_status_call::after,
#top_ranking_contents a.btn_status_resv::after,
#top_ranking_contents a.btn_status_out::after {
  top: 3px;
  height: 35px;
  filter: blur(3px);
}

/*==============================================
 * 10. ステータスボタン（ランキング専用）
 *==============================================*/
/* ランキング固有：位置・サイズ調整 */
/*
 * z-index: 1 について
 * 以前は z-index: -1 が設定されており、カードリンク（.top_ranking_detail_inner）の背後に
 * ボタンが隠れていた。これによりボタンが視覚的につぶれて見える・クリックできない状態だった。
 * z-index: -1 → 1 に変更することでボタンをリンク前面に表示し、正常にクリック可能にする。
 * （.ranking_circle: z-index 3、.top_ranking-flame-circle: z-index 2 より下位のため写真フレームとの重なり順は維持される）
 */
#top_ranking_contents .top_ranking_status_btn {
  position: absolute;
  top: 60px;
  left: 90px;
  width: 45%;
  z-index: 1;
  padding: 5px;
}

#top_ranking_contents .top_ranking_status_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 25px;
  margin: 0 auto;
  padding: 5px;
}