@charset "utf-8";

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

/* ==============================================
 * 目次
 *==============================================
 * 1. ステータスボタン（一覧）
 *    1.1 基本スタイル
 *    1.2 カラーバリエーション
 *    1.3 アイコン
 *    1.4 光沢・影
 * 2. ステータスボタン（プロフィール）
 *    2.1 大サイズ
 *    2.2 カラーバリエーション（光沢付き）
 *    2.3 影
 *    2.4 アイコン
 *    2.5 その他アイコン
 * 3. ステータスボタン（小・その他）
 * 4. アニメーション
 *============================================== */

/* ==============================================
 * 1. ステータスボタン（一覧）
 *============================================== */

/* 1.1 基本スタイル */
a.btn_status {
  display: block;
  position: relative;
  margin-bottom: 5px;
  width: 160px;
  height: 38px;
  line-height: 38px;
  color: var(--white);
  font-family: var(--fa-hiragino-maru-gothic);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.3s ease-out;
  will-change: opacity;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
}

a.btn_status:hover {
  opacity: 0.7;
}

/* 1.2 カラーバリエーション */
a.btn_status-on {
  color: var(--white);
  background-image: var(--status-call);
}

a.btn_status-sche {
  color: var(--white);
  background-image: var(--status-resv);
}

a.btn_status-standby {
  color: var(--white);
  background-image: var(--status-standby);
}

a.btn_status-out {
  color: var(--white);
  background-image: var(--status-out);
}

a.btn_status.btn_status-box {
  color: var(--gray-black);
  border: 1px solid var(--gray);
  background: var(--white);
}

a.btn_status.btn_status-box > span {
  position: relative;
  z-index: 1;
}

/* 1.3 アイコン */

/* アイコン共通スタイル */
a.btn_status-standby .icon_status-standby::before,
.icon_status_standby_tel::before,
.icon_status_standby_chat::before,
a.btn_status-on .icon_status-on::before,
a.btn_status-on span.btn_text_status::before,
a.btn_status-sche .icon_status-sche::before,
a.btn_status-out .icon_status-out::before,
a.btn_status-out span.btn_text_status::before,
a.btn_status .icon_mail-square::before {
  position: relative;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}

a.btn_status-standby .icon_status-standby::before,
.icon_status_standby_tel::before {
  top: 2px;
  right: 3px;
  width: 17px;
  height: 17px;
  background-image: url(../images/cmn_icon_status_standby.svg);
}

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

a.btn_status-on .icon_status-on::before,
a.btn_status-on span.btn_text_status::before {
  top: 3px;
  right: 5px;
  width: 18px;
  height: 18px;
  background-image: url(../images/cmn_icon_status_call.svg);
}

a.btn_status-sche .icon_status-sche::before {
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  background-image: url(../images/cmn_icon_status_sche.svg);
}

a.btn_status-out .icon_status-out::before,
a.btn_status-out span.btn_text_status::before {
  top: 2px;
  right: 5px;
  width: 14px;
  height: 14px;
  background-image: url(../images/cmn_icon_status_wait.svg);
}

a.btn_status .icon_mail-square::before {
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  background-image: url(../images/cmn_icon_mail_square.svg);
}

/* 1.4 光沢・影 */

/* ステータスボタンの光沢（共通） */
a.btn_status-standby::before,
a.btn_status-on::before,
a.btn_status-sche::before,
a.btn_status-out::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(120deg, rgb(255 255 255 / 30%), rgb(255 255 255 / 0%));
  border-radius: 8px 8px 0 0;
}

/* ステータスボタンの影（共通） */
a.btn_status-standby::after,
a.btn_status-on::after,
a.btn_status-sche::after,
a.btn_status-out::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 40px;
  opacity: 0.5;
  border-radius: 8px;
  filter: blur(3px);
  z-index: -1;
}

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

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

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

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

.btn_status-inner {
  line-height: 1em;
}

.btn_status-text-wait {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.btn_status-margin-01 {
  padding: 1px 0;
}

.btn_status-margin-02 {
  padding: 5px 0;
}

/* 待機中ボタン分割表示 */
.list_card-button-split .btn_status {
  flex: 1;
  min-width: 0;
}

/* ==============================================
 * 2. ステータスボタン（プロフィール）
 *============================================== */

/* 2.1 大サイズ */
.profile_btn-status {
  position: absolute;
  top: 15px;
  right: 0;
}

.btn_status-lg,
a.btn_status-lg {
  display: block;
  position: relative;
  width: 250px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 7px;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--fa-hiragino-maru-gothic);
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity 0.3s ease-out;
  will-change: opacity;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -3px;
  cursor: pointer;
}

a.btn_status-lg:hover,
a.btn_status-sr:hover,
a.btn_status-lg.btn_status-standby:hover,
a.btn_status-lg.btn_status-on:hover,
a.btn_status-lg.btn_status-sche:hover,
a.btn_status-lg.btn_status-out:hover,
a.btn_status-lg.btn_status-chat:hover {
  opacity: 0.7 !important;
}

.btn_status-lg-inner {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  line-height: 1;
}

.btn_status-text-wait-lg {
  font-size: 10px;
}

/* 2.2 カラーバリエーション（光沢付き） */
a.btn_status-lg.btn_status-standby {
  color: var(--white);
  background-image: var(--status-standby);
}

a.btn_status-lg.btn_status-on {
  color: var(--white);
  background-image: var(--status-call);
}

a.btn_status-lg.btn_status-sche {
  color: var(--white);
  background-image: var(--status-resv);
}

a.btn_status-lg.btn_status-out {
  color: var(--white);
  background-image: var(--status-out);
}

a.btn_status-lg.btn_status-box {
  color: var(--gray-black);
  border: 1px solid var(--gray);
  background: var(--white);
}

a.btn_status-lg.btn_status-box > span {
  position: relative;
  z-index: 1;
}

a.btn_status-lg.btn_status-chat {
  color: var(--white);
  background-image: var(--status-standby);
  opacity: 0.88;
}

/* 大サイズボタンの光沢（共通） */
a.btn_status-lg.btn_status-standby::before,
a.btn_status-lg.btn_status-on::before,
a.btn_status-lg.btn_status-sche::before,
a.btn_status-lg.btn_status-out::before,
a.btn_status-lg.btn_status-box::before,
a.btn_status-lg.btn_status-chat::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(120deg, rgb(255 255 255 / 30%), rgb(255 255 255 / 0%));
  border-radius: 8px 8px 0 0;
}

/* 2.3 影 */

/* 大サイズボタンの影（共通） */
a.btn_status-lg.btn_status-standby::after,
a.btn_status-lg.btn_status-on::after,
a.btn_status-lg.btn_status-sche::after,
a.btn_status-lg.btn_status-out::after,
a.btn_status-lg.btn_status-chat::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 52px;
  opacity: 0.5;
  border-radius: 8px;
  filter: blur(3px);
  z-index: -1;
}

a.btn_status-lg.btn_status-standby::after,
a.btn_status-lg.btn_status-chat::after {
  background: var(--status-standby);
}

a.btn_status-lg.btn_status-on::after {
  background: var(--status-call);
}

a.btn_status-lg.btn_status-sche::after {
  background: var(--status-resv);
}

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

/* 2.4 アイコン（プロフィール大サイズ） */

/* アイコン共通スタイル */
a.btn_status-lg .icon_status_standby_tel::before,
a.btn_status-lg .icon_status_standby_chat::before,
a.btn_status-lg .icon_status_call::before,
a.btn_status-lg .icon_status_out::before,
a.btn_status-lg .icon_status_sche::before,
a.btn_status-lg .icon_mail-square-lg::before,
.icon_status-profile::before,
.icon_line_square::before {
  position: relative;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 電話・チャット分割ボタン用アイコン */
a.btn_status-lg .icon_status_standby_tel::before {
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  background-image: url(../images/cmn_icon_status_standby.svg);
}

a.btn_status-lg .icon_status_standby_chat::before {
  top: 3px;
  right: 3px;
  width: 19px;
  height: 19px;
  background-image: url(../images/cmn_icon_status_chat.svg);
}

a.btn_status-lg .icon_status_call::before {
  top: 4px;
  right: 5px;
  width: 21px;
  height: 21px;
  background-image: url(../images/cmn_icon_status_call.svg);
}

a.btn_status-lg .icon_status_out::before {
  top: 3px;
  right: 5px;
  width: 18px;
  height: 18px;
  background-image: url(../images/cmn_icon_status_wait.svg);
}

a.btn_status-lg .icon_status_sche::before {
  top: 3px;
  right: 5px;
  width: 19px;
  height: 19px;
  background-image: url(../images/cmn_icon_status_sche.svg);
}

a.btn_status-lg .icon_mail-square-lg::before {
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background-image: url(../images/cmn_icon_mail_square.svg);
}

.icon_status-profile::before {
  top: 4px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-image: url(../images/cmn_icon_profile.svg);
}

.icon_line_square::before {
  top: 3px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-image: url(../images/cmn_icon_line_square.svg);
}

/* 2.5 その他アイコン */

/* アイコン共通スタイル */
.icon_clock-square::before,
.icon_mail-square-lg::before,
.icon_clock_disabled_square::before,
.icon_mail_disabled_square::before {
  position: relative;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon_clock-square::before {
  top: 2px;
  right: 3px;
  width: 13px;
  height: 13px;
  background-image: url(../images/cmn_icon_clock_square.svg);
}

.icon_mail-square-lg::before {
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background-image: url(../images/cmn_icon_mail_square.svg);
}

.icon_clock_disabled_square::before {
  top: 2px;
  right: 5px;
  width: 13px;
  height: 13px;
  background-image: url(../images/cmn_icon_clock_disabled_square.svg);
}

.icon_mail_disabled_square::before {
  top: 3px;
  right: 5px;
  width: 18px;
  height: 18px;
  background-image: url(../images/cmn_icon_mail_disabled_square.svg);
}

/* ==============================================
 * 3. ステータスボタン（小・その他）
 *============================================== */
a.btn_status-small {
  display: block;
  margin: 0 0 10px;
  padding: 4px 0;
  font-family: var(--fa-hiragino-maru-gothic);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
  outline: 2px solid rgb(255 255 255 / 25%);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

a.btn_status-small.btn_status-standby::after,
a.btn_status-small.btn_status-on::after,
a.btn_status-small.btn_status-sche::after,
a.btn_status-small.btn_status-out::after,
a.btn_status-small.btn_status-standby.btn_status-chat::after,
a.btn_status.btn_status-small.btn_status-standby::after,
a.btn_status.btn_status-small.btn_status-on::after,
a.btn_status.btn_status-small.btn_status-sche::after,
a.btn_status.btn_status-small.btn_status-out::after,
a.btn_status.btn_status-small.btn_status-standby.btn_status-chat::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 25px;
  opacity: 0.5;
  border-radius: 25px;
  filter: blur(3px);
  z-index: -1;
}

a.btn_status-small.btn_status-standby::after,
a.btn_status.btn_status-small.btn_status-standby::after,
a.btn_status-small.btn_status-standby.btn_status-chat::after,
a.btn_status.btn_status-small.btn_status-standby.btn_status-chat::after {
  background: var(--status-standby);
}

a.btn_status-small.btn_status-on::after,
a.btn_status.btn_status-small.btn_status-on::after {
  background: var(--status-call);
}

a.btn_status-small.btn_status-sche::after,
a.btn_status.btn_status-small.btn_status-sche::after {
  background: var(--status-resv);
}

a.btn_status-small.btn_status-out::after,
a.btn_status.btn_status-small.btn_status-out::after {
  background: var(--status-out);
}

a.btn_status-xs {
  display: block;
  width: 150px;
  padding: 3px 0 2px;
  background: var(--white);
  border: 1px var(--gray) solid;
  border-radius: 20px;
  color: var(--gray-black);
  font-size: 1.2rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* お気に入りアイコン共通スタイル */
.icon_star_del::before,
.icon_star_add::before,
.icon_star_del-lg::before,
.icon_star_add-lg::before {
  position: relative;
  top: 2px;
  right: 3px;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon_star_del::before,
.icon_star_add::before {
  width: 14px;
  height: 14px;
}

.icon_star_del-lg::before,
.icon_star_add-lg::before {
  width: 18px;
  height: 18px;
}

.icon_star_del::before,
.icon_star_del-lg::before {
  background-image: url(../images/cmn_icon_star_del.svg);
}

.icon_star_add::before,
.icon_star_add-lg::before {
  background-image: url(../images/cmn_icon_star_add.svg);
}

/* ==============================================
 * 4. アニメーション
 *============================================== */

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

/* ==============================================
 * 5. レイアウト
 *============================================== */

/* プロフィール分割ボタンレイアウト */
.profile_btn-status-split {
  display: flex;
  gap: 8px;
}

.profile_btn-status-split > div {
  flex: 1;
  min-width: 0;
}

/* 縦並びレイアウト（幅が狭い枠内で使用） */
.profile_btn-status-split--vertical {
  flex-direction: column;
  gap: 4px;
}