@charset "UTF-8";

/* root内のフォントサイズをremを使えるようにhtmlを先に記述させるよう位置を変更しています。 */

html {
    font-size: 62.5%;
    touch-action: manipulation;
}

:root {
    /* 基本色 */
    --main-color: #fff;
    --sub-color: #f2f2f2;
    --bk-color: #231815;
    --bg-color: #f8f8f8;
    --gray-color: #cccccc;
    --darkgray-color: #707070;
    --red-color: #ce054f;
    --yellow-color: #ece49c;

    /* 文字色 */
    --baseTxt-color: #231815;
    --whtTxt-color: #fff;

    /* 文字サイズ */
    --basefont-size: 1.4rem;
    --largefont-size: 1.6rem;
    --xlargefont-size: 1.7rem;

    /* 余白 */
    --cardInsidemargin-bottom: 1.2rem;
    --basemargin-bottom: 2.4rem;
    --largemargin-bottom: 3.2rem;
    --section-bottom: 4.3rem;

    /* ----------------------

    --xlargefont-size タイトルとかの見出し
    --largefont-size 中見出しとボタン
    --basefont-size 本文

  ------------------------*/

    /* 文字の太さ */
    --baseTxt-weight: normal;
    --bolderTxt-weight: 500;
    --boldTxt-weight: bold;

    /* ドロップシャドウ */
    --main-filter-drop-shadow: drop-shadow(0 2px 9px rgba(136, 136, 136, 0.24));
    --sub-filter-drop-shadow: drop-shadow(0 2px 10px rgba(88, 88, 88, 1));
}

body {
    font-family: "M PLUS 1p", sans-serif;
    background-color: var(--bg-color);
    width: 100%;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

li {
    padding: 0;
    margin: 0;
}

img {
    vertical-align: bottom;
}

a {
    text-decoration: none;
    color: #000;
    word-wrap: break-word;
}

a:hover {
    color: var(--baseTxt-color);
}

input {
    caret-color: var(--bk-color);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0px;
}

ol,
ul {
    padding-left: 0;
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0;
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: var(--bs-gutter-x);
    padding-left: var(--bs-gutter-x);
    margin-top: var(--bs-gutter-y);
}

.Section_Wht_Bg {
    background-color: var(--main-color);
    padding-bottom: var(--section-bottom);
    margin-bottom: 1.2rem;
}

.SubTtl {
    padding: 2rem 0 2.6rem;
    font-weight: var(--boldTxt-weight);
    font-size: var(--xlargefont-size);
}

main {
    /* Header分下に */
    padding-top: 65.5px;
}

#Index main {
    padding-top: 0;
}

/* 見出し */
.Simple_Section_Ttl {
    font-size: var(--largefont-size);
    font-weight: var(--boldTxt-weight);
    color: var(--baseTxt-color);
    margin-top: var(--basemargin-bottom);
}

.Simple_Section_Ttl.Small {
    font-size: var(--basefont-size);
    margin-top: 2rem;
}

/* 真っ白背景 */
.BG_WHITE {
    background-color: var(--main-color);
}

/* ---------------------------------------------------------

  Header 

----------------------------------------------------------*/

/* ----------------------

  Header共通 

------------------------*/
#Header_Wrap {
    height: 65.5px;
    width: 100%;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--sub-color);
    position: fixed;
    top: 0;
    z-index: 10;
}

#Index #Header_Wrap {
    position: initial;
}

main,
footer,
#Footer_Wrap {
    z-index: 1;
}

.Header_Inner {
    font-size: 1.4rem;
    font-weight: var(--baseTxt-weight);
}

/* Header z-index */

/* ----------------------

  ログイン後Header 

------------------------*/
.Login_Header {
    position: relative;
}

.Header_Point {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: auto 0;
}

.Header_Point {
    font-weight: var(--baseTxt-weight);
    display: flex;
    align-items: center;
}

.Header_Point span {
    font-weight: var(--bolderTxt-weight);
    margin-right: 0.4rem;
}

.Header_Point img {
    height: 2rem;
    width: auto;
    margin-right: 0.4rem;
}

.Header_Logo {
    width: 25%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

.Header_Logo img {
    width: 100%;
    height: auto;
}

.Header_User {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: auto 0;
}

.Header_User span {
    font-weight: var(--bolderTxt-weight);
    margin-right: 0.4rem;
}

/* ----------------------

  ログイン前Header 

------------------------*/
.Header_Reg {
    display: inline-block;
    background: var(--bk-color);
    padding: 0.9rem 1.5rem;
    border-radius: 2.5rem;
    color: var(--whtTxt-color);
    font-weight: var(--boldTxt-weight);
    margin-right: 1.5rem;
}

.Header_Reg:hover {
    color: var(--whtTxt-color);
}

.Header_Login {
    font-weight: var(--boldTxt-weight);
}

.Header_Logo_Left {
    width: 30%;
}

.Header_Logo_Left img {
    width: 100%;
    height: auto;
}

/* ----------------------

  下層ページHeader 

------------------------*/
.Header_Back {
    width: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.Header_Back img {
    height: 1.6rem;
    width: auto;
    vertical-align: top;
    margin-top: 0.2rem;
}

.Header_Ttl {
    font-size: 1.7rem;
    font-weight: var(--boldTxt-weight);
}

/* ---------------------------------------------------------

  Button各種

----------------------------------------------------------*/

/* ----------------------

  Button各種共通
  一番使っている横幅最大のボタンを基準に作っています。

------------------------*/
.Btn_Base {
    width: 100%;
    padding: 1.1rem 0;
    font-size: var(--largefont-size);
    font-weight: var(--boldTxt-weight);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* ----------------------

  Buttonサイズ

------------------------*/
.Btn_Large {
    padding: 2rem 0 !important;
}

.Btn_Small {
    width: auto;
    padding: 0.7rem 1.3rem;
}

.Btn_Tiny {
    width: auto;
    padding: 1.1rem;
}

/* ----------------------

  Button色

------------------------*/
.Btn_Bk {
    background: var(--bk-color);
    color: var(--whtTxt-color);
    font-weight: var(--boldTxt-weight);
}

.Btn_Bk:hover {
    color: var(--whtTxt-color);
}

.Btn_Bk a {
    color: var(--whtTxt-color);
}

.Btn_Wht {
    background: var(--main-color);
    color: var(--baseTxt-color);
    border: 1px solid var(--bk-color);
}


/* 戻るボタン */
.Back_Btn {
    position: relative;
}

.Back_Btn img {
    width: 1.6rem;
    height: 1.2rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2rem;
    margin: auto 0;
    display: block !important;
}


/* ---------------------------------------------------------

  Card

----------------------------------------------------------*/
/* ----------------------

  全Card共通

------------------------*/
.Card {
    padding: 1.8rem 1.6rem;
    background: var(--main-color);
    border-radius: 0.8rem;
    filter: var(--main-filter-drop-shadow);
    margin-bottom: var(--cardInsidemargin-bottom);
    position: relative;
    display: block;
    border: none;
}

/* ----------------------

  Card_Favorite &Insatagram
  お気に入りのハートボタンとインスタグラムアイコン

------------------------*/
.Card_Favorite {
    height: 3.8rem;
    width: 3.8rem;
    background: var(--main-color);
    filter: var(--main-filter-drop-shadow);
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1.8rem;
    right: 1.6rem;
}

.With_Card_Favorite {
    height: 3.8rem;
    width: 3.8rem;
    background: var(--main-color);
    filter: var(--main-filter-drop-shadow);
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1.8rem;
    right: 1.6rem;
}

#Card_Favorite_SVG {
    height: 1.8rem;
    width: 1.8rem;
    fill-rule: evenodd;
    clip-rule: evenodd;
    animation-duration: 0.45s;
    animation-name: like-button-animation;
    animation-timing-function: ease-in-out;
    transform: scale(1);
}

@keyframes like-button-animation {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.15);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.Card_Favorite_SVG_Fill {
    fill: #ff0080;
}

.Card_Favorite_SVG_None {
    display: none;
}

.Card_IG {
    height: 2rem;
    width: 2rem;
    position: absolute;
    top: 2.1rem;
    right: 7.5rem;
}

/* ----------------------

  Card_Reserve
  予約中・キャンセルのラベルと日時

------------------------*/
.Card_Reserve {
    margin-bottom: var(--cardInsidemargin-bottom);
}

.Card_Reserve_Inner {
    display: flex;
    align-items: center;
}

.Card_Reserve_Label {
    background: var(--main-color);
    font-size: 1.1rem;
    color: var(--baseTxt-color);
    border: 1px solid var(--bk-color);
    padding: 0.2rem 1.2rem;
    margin-right: 1.6rem;
}

.Card_Cancel_Label {
    background: var(--gray-color);
    padding: 0.4rem 0.6rem;
    margin-right: 1.6rem;
    font-size: 1.1rem;
}

.Card_Visited_Label {
    background: var(--bk-color);
    padding: 0.4rem 0.6rem;
    color: var(--main-color);
    margin-right: 1.6rem;
    font-size: 1.1rem;
}

.Card_Reserve_Inner time {
    font-size: var(--basefont-size);
    font-weight: var(--boldTxt-weight);
}

/* ----------------------

  Card_Practitioner_Label
  施術者アイコン・名前・評価

------------------------*/
.Card_Practitioner_Label {
    margin-bottom: 0.6rem;
    font-size: 1.6rem;
}
.Card_Practitioner_Label span {
    padding: 0.6rem;
    background-color: var(--bk-color);
    color: var(--main-color);
    border-radius: 0.4rem;
    font-size: 1rem;
    font-weight: bold;
}

/* ----------------------

  Card_Practitioner
  施術者アイコン・名前・評価

------------------------*/
.Card_Practitioner {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: var(--cardInsidemargin-bottom);
}

.Card_Practitioner_Icon {
    height: 6rem;
    width: 6rem;
    border-radius: 6rem;
    object-fit: cover;
    margin-right: 16px;
}

.Card_Practitioner_Detail h3 {
    font-size: 1.8rem;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    font-weight: var(--boldTxt-weight);
}

/* 星の評価 */

.Card_Practitioner_Star {
    display: flex;
    align-items: center;
}

.Card_Practitioner_Star span {
    padding-top: 0.2rem;
    font-weight: var(--boldTxt-weight);
}

.Card_Practitioner_Star img {
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.6rem;
}

/* ネイルなどの施術ジャンル */
.Card_Practitioner_Genre {
    color: var(--whtTxt-color);
    font-weight: var(--bolderTxt-weight);
    background: var(--bk-color);
    padding: 0.2rem 1rem;
    font-size: 1rem;
    border-radius: 0.4rem;
    margin-bottom: 0.2rem;
    display: inline-block;
}

/* ----------------------

  Card_Sns
  SNSアイコン

------------------------*/
.Card_Sns {
    margin-bottom: var(--cardInsidemargin-bottom);
}

.Card_Sns a {
    display: inline-block;
    height: 3rem;
    width: 3rem;
    margin-right: 0.6rem;
}

.Card_Sns a:last-of-type {
    margin-right: 0;
}

.Card_Sns img {
    height: 3rem;
    width: 3rem;
}

/* ----------------------

  Evaluation_Btn
  評価ボタン

------------------------*/
.Evaluation_Btn {
    border: 2px solid var(--bk-color);
    margin-bottom: 2.4rem;
    display: flex;
    align-items: center;
}

.Evaluation_Btn_Star {
    display: flex;
    align-items: center;
    margin-right: 2.4rem;
}

.Evaluation_Btn_Star img {
    margin-left: 0.6rem;
}

.Evaluation_Btn_Date {
    background: var(--yellow-color);
    padding: 0.3rem 0.9rem;
    border-radius: 0.8rem;
}

/* ----------------------

  Card_Menu
  施術メニュー

------------------------*/
.Card_Menu h3 {
    font-size: var(--largefont-size);
    font-weight: var(--boldTxt-weight);
    margin-bottom: var(--cardInsidemargin-bottom);
}

.Card_Menu_Info {
    display: flex;
    justify-content: space-between;
    align-items: top;
}

.Card_Menu_Img {
    position: relative;
    margin-right: 15px;
}

.Card_Menu_Imagepicture {
    height: 8.4rem;
    width: 8.4rem;
}

.Card_Menu_Img_Icon {
    width: 1.1rem;
    height: 1rem;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
}

.Card_Menu_Text {
    font-size: 1.3rem;
}

.Card_Menu_Text,
.Card_Menu_Text_short {
    width: 100%;
    margin-bottom: 0.8rem;
}

.Card_Menu_Text_short {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 2行以上表示しない */
    overflow: hidden;
    text-overflow: ellipsis;
}

.Card_Menu_Detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Card_Menu_Time {
    display: flex;
    align-items: center;
}

.Card_Menu_Time img {
    margin-right: 0.4rem;
}

.Card_Menu_Price {
    font-weight: var(--boldTxt-weight);
    font-size: 1.8rem;
}

/* チェックボックス */
.Card_Menu_Checkbox {
    padding-left: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: top;
}

.Card_Menu_Checkbox_Input {
    margin: 0;
    width: 0;
    opacity: 0;
}

.Card_Menu_Checkbox_Input:checked + .Card_Menu_Checkbox_Dummy {
    background: #333333;
}

.Card_Menu_Checkbox_Input:checked + .Card_Menu_Checkbox_Dummy::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: 4px;
    transform: translate(-6px, 5px) rotateZ(-135deg);
    transform-origin: 2px 2px;
    background: #ffffff;
}

.Card_Menu_Checkbox_Input:checked + .Card_Menu_Checkbox_Dummy::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76%;
    height: 4px;
    transform: translate(-6px, 5px) rotateZ(-45deg);
    transform-origin: 2px 2px;
    background: #ffffff;
}

.Card_Menu_Checkbox_Dummy {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border: solid 2px var(--bk-color);
    border-radius: 0.4rem;
}

/* モーダル内スライダー */
.modal {
    opacity: 0;
    transition: 0.4s all;
}

.show {
    opacity: 1;
}

.Slider_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s all;
    opacity: 0;
    z-index: 0;
    background-color: #000;
}

.Slider_Modal_Open {
    opacity: 1;
    z-index: 100;
}

.Slider_modal_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* モーダルのコンテンツ */
.Slider_modal_content {
    display: block;
    width: 100vw;
}

/* モーダルを閉じるボタン */
.modal_close_btn {
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    position: absolute;
    left: 30px;
    top: 30px;
}

.modal_close_btn::before {
    content: "";
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
    margin: auto;
}

.modal_close_btn::after {
    content: "";
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
    margin: auto;
}

.Slider_modal_content .swiper-wrapper {
    display: flex;
    align-items: center;
}

.modal_slide img {
    width: 100%;
    height: auto;
}

/* 画像枚数 */
.Slider_modal .swiper-pagination {
    font-size: 18px;
    color: var(--main-color);
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
}

/* スクロール禁止 */
.All_Wrap_Modal {
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: none;
}

.All_Wrap_Modal::-webkit-scrollbar {
    display: none;
}

/* ----------------------

  Card_Text
  説明文

------------------------*/
.Card_Text {
    margin-bottom: var(--cardInsidemargin-bottom);
}

.Card_Text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 2行以上表示しない */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--basefont-size);
    font-weight: var(--bolderTxt-weight);
}

.Card_Text.full p {
    display: -webkit-box;
    -webkit-box-orient: inherit;
    -webkit-line-clamp: inherit;
    /* 2行以上表示しない */
    overflow: inherit;
    text-overflow: inherit;
}

/* ----------------------

  Card_Imagepicture
  施術のイメージ画像

------------------------*/
.Card_Imagepicture img {
    border-radius: 0.8rem;
    width: 100%;
    height: auto;
}

/* ----------------------

  Card_Use_Menu
  ご利用メニュー

------------------------*/
.Card_Use_Menu {
    background: var(--bg-color);
    border-radius: 0.8rem;
    padding: 1.2rem;
    font-weight: var(--bolderTxt-weight);
    margin-bottom: 2rem;
}

.Card_Use_Menu h4 {
    font-size: 1.3rem;
}

.Card_Use_Menu ul {
    font-size: var(--basefont-size);
}

.Card_Use_Menu ul li {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 2行以上表示しない */
    overflow: hidden;
    text-overflow: ellipsis;
}

.Card_Use_Menu ul li::before {
    content: "・";
}

/* ----------------------

  Card_Cancel
  この予約をキャンセルする

------------------------*/
.Card_Cancel {
    font-size: var(--basefont-size);
    display: flex;
    align-items: center;
    justify-content: right;
}

.Card_Cancel img {
    margin-right: 0.6rem;
}

/* ---------------------------------------------------------

  Form

----------------------------------------------------------*/
/* ----------------------

  Form共通

------------------------*/
:focus {
    outline: none;
}

.Form_Wrap {
    font-size: var(--basefont-size);
    margin-bottom: 1.8rem;
}

.Form_Base {
    background: var(--sub-color);
    border: none;
    border-radius: 0.8rem;
    padding: 1.2rem 1.6rem;
    font-size: var(--basefont-size);
    position: relative;
}

.Form_Base::placeholder {
    color: #aeaeae;
}

/* フォームクリック時のBootstrapの動き消去 */
.form-control:focus,
.form-select:focus {
    color: none;
    background: var(--sub-color);
    border-color: none;
    outline: 0;
    box-shadow: none;
}

/* タイトル */
.Form_Ttl {
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;
    padding-left: 0.3rem;
    font-size: var(--basefont-size);
    font-weight: var(--boldTxt-weight);
}

/* タイトル横必須 */
.Form_Ttl span {
    color: var(--red-color);
    margin-left: 1rem;
}

/* 注意書き */
.Form_Warning {
    display: inline-block;
    margin-top: 0.8rem;
    margin-left: 1.6rem;
    position: relative;
}

.Form_Warning::before {
    content: "※";
    position: absolute;
    top: 0;
    left: -1.6rem;
}

.Form_Warning_Red {
    color: var(--red-color);
}

/* Conf用 */
.Check_Form .Form_Base {
    background: none;
}

.Check_Form img {
    display: none;
}

/* ----------------------

  Select

------------------------*/
.Form_Select {
    position: relative;
}

/* selectの矢印 */
.Form_Select img {
    width: 0.6rem;
    height: 1.2rem;
    transform: rotate(-90deg);
    position: absolute;
    top: 2.7rem;
    bottom: 0;
    right: 2rem;
    margin: auto 0;
}

/* ----------------------

  生年月日

------------------------*/
.User_Birthday_Wrap {
    display: flex;
    justify-content: space-between;
}

.User_Birthday {
    display: inline-block;
    width: 30%;
    position: relative;
    display: flex;
    align-items: center;
}

.User_Birthday span {
    margin-left: 0.8rem;
    font-size: var(--basefont-size);
    font-weight: var(--bolderTxt-weight);
}

.User_Birthday img {
    width: 0.6rem;
    height: 1.2rem;
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3.3rem;
    margin: auto 0;
}

/* ----------------------

  検索フォーム 

------------------------*/

.Form_Search {
    position: relative;
}

.Form_Search .Form_Base {
    padding-left: 4.6rem;
}

.Form_Search span img {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    margin-left: 1.6rem;
}

/* ----------------------

  パスワード入力フォーム

------------------------*/
.Form_Password_Icon_Wrap {
    position: relative;
}

.Form_Password_Icon_Wrap .Password_Icon {
    position: absolute;
    top: 63%;
    transform: translateY(-50%);
    margin: auto 0;
    right: 1.6rem;
}

.Password_Eye {
    display: inline-block;
    background-image: url(../img/eye-sharp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.3rem;
    height: 2.3rem;
}

.Password_Eye_Off {
    margin-top: -0.3rem;
    display: inline-block;
    background-image: url(../img/eye-off.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.3rem;
    height: 2.3rem;
}

/* ---------------------------------------------------------

  トップページ
  Index.php

----------------------------------------------------------*/
/* タブ切り替えメニュー */
.Top_Menu {
    position: sticky;
    top: 0;
    z-index: 10;
}

.Top_Menu ul {
    display: flex;
    justify-content: space-between;
    align-items: top;
}

.Top_Menu ul li {
    width: 25%;
    display: inline-block;
    background: var(--sub-color);
    text-align: center;
    font-size: var(--largefont-size);
    border-bottom: 2px solid var(--bk-color);
    position: relative;
}

.Top_Menu ul li .tab_item {
    width: 100%;
    padding-top: 1.4rem;
    padding-bottom: 1.8rem;
    display: block;
}

.Top_Menu ul li input[name="tab_item"] {
    display: none;
}

.Top_Menu input:checked + .tab_item {
    background-color: var(--bk-color);
    color: var(--sub-color);
    font-weight: var(--boldTxt-weight);
}

.Top_Menu input:checked + .tab_item::after {
    content: "";
    display: inline-block;
    background: var(--sub-color);
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.6rem;
    position: absolute;
    bottom: 1rem;
    right: 0;
    left: 0;
    margin: 0 auto;
}

/* スライダー */

.Top_Slider {
    margin-bottom: 1.6rem;
    position: relative;
    width: 100vw;
    height: 180px;
}
@media screen and (min-width: 768px) {
    .Top_Slider {
        height: 615px;
    }
}
.Top_Slider .swiper-slide {
    width: 100%;
}

.Top_Slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    min-height: 180px;
}

.Top_Slider .swiper-pagination-bullet-active {
    background-color: var(--bk-color);
}

.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 6px;
}

/* トップ検索セクション */
.Top_Search {
    padding-top: 3.2rem;
}

.Top_Search h3 {
    font-size: var(--xlargefont-size);
    font-weight: var(--boldTxt-weight);
    margin-bottom: 1rem;
}

.Top_Keyword_Search {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.Top_Keyword_Search .Btn_Bk {
    width: 5.6rem;
    padding: 0;
}

.Top_Keyword_Search .Form_Wrap {
    margin-bottom: 0;
    width: 80%;
}

.Top_Date_Search_Wrap {
    display: flex;
    justify-content: space-between;
    font-weight: var(--boldTxt-weight);
    margin-bottom: 1.8rem;
}

.Top_Date_Search_Wrap button {
    width: 30%;
    border: 2px solid var(--bk-color);
}

.Top_Date_Search_Wrap button span {
    margin-left: 0.2rem;
}

.Top_Date_Search .Btn_Bk {
    margin-bottom: 2rem;
}

.Top_Date_Search .Btn_Large img {
    margin-right: 1.3rem;
}

.Top_Calendar_Ttl {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 1.2rem;
}

.Top_Calendar_Ttl::before {
    content: "";
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    background-image: url(../img/calendar.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    margin: auto 0;
    left: 0;
}

.Top_Treatment_Ttl {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 1.2rem;
}

.Top_Treatment_Ttl::before {
    content: "";
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    background-image: url(../img/flag.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    margin: auto 0;
    left: 0;
}

.Top_Treatment {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #ddd;
}

.History_Btn img {
    margin-right: 1.5rem;
}

/* アーティストセクション */
.Top_Staff {
    padding-top: 3.2rem;
}

.Top_Staff_Ttl {
    font-size: var(--xlargefont-size);
    font-weight: var(--boldTxt-weight);
    margin-bottom: 2.4rem;
}

.Top_Staff .Card {
    margin-bottom: 3.2rem;
}

.Top_Staff .Card:last-of-type {
    margin-bottom: 0;
}

.Practitioner_List_Wrap div {
    margin-bottom: 1.2rem;
}

/* ---------------------------------------------------------

  予約内容確認・予約内容詳細ページ・マイページのセクション
  Other_Section UserInfo

----------------------------------------------------------*/
/* 予約内容確認・予約内容詳細ページ */
.Other_Section_Ttl {
    background: var(--bg-color);
    width: 100vw;
    padding: 1.6rem 0 1.6rem 1.5rem;
    margin-left: -1.5rem;
    font-size: var(--xlargefont-size);
    font-weight: var(--boldTxt-weight);
}

.Other_Section_Content {
    margin: 1.6rem 0 1.6rem;
    font-size: 2rem;
}

.Other_Section_Sub_Text {
    font-size: var(--basefont-size);
}

/* マイページ 予約内容確認/支払い方法選択ページ */
.Userinfo_Ttl {
    background: var(--bg-color);
    padding: 1.6rem 1.5rem;
    font-size: var(--xlargefont-size);
    font-weight: var(--boldTxt-weight);
}

.Userinfo_Box {
    padding: 2.3rem 1.5rem;
    border-bottom: 1px solid #e6e6e6;
}

.Userinfo_Box_Inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--basefont-size);
    font-weight: var(--boldTxt-weight);
}

.Userinfo_Box_Inner div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Userinfo_Box_Inner div img {
    margin-right: 0.8rem;
    height: auto;
    width: 1.8rem;
}

.Userinfo_Box_Inner p {
    font-size: var(--xlargefont-size);
    margin-bottom: 0;
}

.Userinfo_Box_Inner p span {
    font-size: var(--basefont-size);
    font-weight: var(--baseTxt-weight);
    margin-left: 0.6rem;
}

.Userinfo_Arrow {
    transform: rotate(180deg);
    height: 1.2rem;
    width: auto;
}

.Userinfo_Case {
    display: flex;
    width: 60%;
    justify-content: right;
}

.Userinfo_Case .Form_Wrap {
    width: calc(100% - 5rem);
    margin-bottom: 0;
}

.Userinfo_Case button {
    width: 5rem;
    padding: 1rem 0;
    margin-left: 1rem;
}

.User_Point {
    padding: 1.3rem 0 1.6rem;
}

.User_Point .Userinfo_Box {
    padding: 0;
    border-bottom: none;
}

.User_Point .Userinfo_Box:first-of-type {
    margin-bottom: 1.1rem;
}

.User_Pay .Userinfo_Box_Inner p {
    font-weight: var(--bolderTxt-weight);
}

.User_Pay .Userinfo_Box {
    padding: 2rem 0;
}

.Userinfo_Money {
    font-size: 2rem !important;
}

.User_Pay .Userinfo_Box:last-of-type {
    border-bottom: none;
}

.Customer {
    padding-bottom: 4.8rem;
}

.Customer .Userinfo_Box {
    border-bottom: none;
    padding: 0;
}

.Customer .Form_Wrap {
    margin-bottom: 0;
}

.Customer_Warning {
    background: #fef5f8;
    padding: 1.3rem 1.7rem;
    border-radius: 0.8rem;
    margin-bottom: 2rem;
}

.Customer_Warning h3 {
    color: var(--red-color);
    font-weight: var(--boldTxt-weight);
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 1.2rem;
}

.Customer_Warning h3::before {
    content: "";
    width: 1.63rem;
    height: 1.63rem;
    background-image: url(../img/exclamation_circle.svg);
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}

.Customer_Warning ul {
    font-size: 1.3rem;
}

.Customer_Warning ul li {
    padding-left: 1.6rem;
    position: relative;
}

.Customer_Warning ul li::before {
    content: "・";
    font-weight: var(--boldTxt-weight);
    position: absolute;
    left: 0;
}

.Reserve_Conf_Agreement {
    font-size: 1.3rem;
    padding-bottom: 3.2rem;
}

.Reserve_Conf_Agreement p a {
    text-decoration: underline !important;
}

/* ---------------------------------------------------------

  Footer

----------------------------------------------------------*/
#Footer_Wrap {
    font-size: var(--basefont-size);
    padding-top: 13.9rem;
    padding-bottom: 12.6rem;
}

.Footer_Inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Footer_Inner a {
    text-decoration: underline;
}

#Privacy {
    margin-bottom: 2.8rem;
}

#Terms {
    margin-bottom: 5.2rem;
}

/* ---------------------------------------------------------

  Footer Menu

----------------------------------------------------------*/
#Footer_Menu_Wrap {
    height: 8.7rem;
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--main-color);
    position: fixed;
    bottom: 0;
    border-top: 1px solid var(--sub-color);
}

.Footer_Menu_Inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.8rem;
}

.Footer_Menu_Btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.1rem;
    font-weight: var(--boldTxt-weight);
    padding-top: 0.8rem;
}

.Footer_Menu_Btn img {
    height: 2.2rem;
    width: 2.2rem;
    margin-bottom: 0.5rem;
}

#Footer_QR {
    background: var(--bk-color);
    color: var(--whtTxt-color);
    border-radius: 100%;
}

#Footer_QR img {
    margin-bottom: 0.4rem;
}

/* ---------------------------------------------------------

  Hero_Logo
  ログインページ・ユーザー新規登録ページ・退会手続き/完了ページのロゴ

----------------------------------------------------------*/
.Hero_Logo {
    background: var(--main-color);
}

.Hero_Logo_Box {
    text-align: center;
    margin-top: 7.8rem;
    margin-bottom: 5.9rem;
}

/* ---------------------------------------------------------

  User_Reg.php

----------------------------------------------------------*/
.User_Reg_Text {
    font-size: 1.5rem;
    font-weight: var(--bolderTxt-weight);
    margin-bottom: 5.6rem;
}

.User_Reg_Text span {
    display: block;
}

/* ---------------------------------------------------------

  Login.php

----------------------------------------------------------*/
.Login_Re_Password {
    text-align: right;
    font-size: var(--basefont-size);
    font-weight: var(--boldTxt-weight);
    margin-bottom: 6.4rem;
}

.Login_Re_Password a {
    text-decoration: underline;
}

/* ---------------------------------------------------------

  RePassword.php

----------------------------------------------------------*/
.RePassword_Text {
    padding-top: 2.5rem;
    font-size: 1.5rem;
    font-weight: var(--bolderTxt-weight);
}

/* ---------------------------------------------------------

  RePassword_Reg.php

----------------------------------------------------------*/
.RePassword_Reg_Text {
    padding-top: 2.5rem;
    font-size: 1.5rem;
    font-weight: var(--bolderTxt-weight);
    margin-bottom: 2.6rem;
}

#RePassword_Reg .Form_Password_Wrap {
    margin-bottom: 6.3rem;
}

/* ---------------------------------------------------------

  User_Edit.php

----------------------------------------------------------*/
.Form_Password_Wrap {
    margin-bottom: 4.8rem;
}

/* ---------------------------------------------------------

  RePassword_Comp.php

----------------------------------------------------------*/
.RePassword_Comp_Text {
    padding-top: 2.5rem;
    font-size: 1.5rem;
    font-weight: var(--bolderTxt-weight);
    margin-bottom: 2.6rem;
}

#RePassword_Comp .Btn_Bk {
    margin-bottom: 2rem;
}

/* ---------------------------------------------------------

  User_Reg.php

----------------------------------------------------------*/
.User_Reg_Form {
    padding-bottom: 8.6rem;
}

.User_Reg_Form form {
    margin-bottom: 4rem;
}

/* ---------------------------------------------------------

  User_Reg_Conf.php

----------------------------------------------------------*/
#User_Reg_Conf {
    padding-top: 2.2rem;
    font-size: 1.5rem;
    font-weight: var(--bolderTxt-weight);
    padding-bottom: 8.6rem;
}

#User_Reg_Conf .Btn_Bk {
    margin-bottom: 2rem;
}

/* ---------------------------------------------------------

  User_Reg_Comp.php

----------------------------------------------------------*/
#User_Reg_Comp .Btn_Bk {
    margin-bottom: 2rem;
}

/* ---------------------------------------------------------

  Mypage.php

----------------------------------------------------------*/
#Mypage .Section_Wht_Bg {
    padding-bottom: 0;
}

/* ---------------------------------------------------------

  History.php

----------------------------------------------------------*/
.History_Ttl {
    padding-top: 3.2rem;
    padding-bottom: 2.4rem;
    font-size: var(--xlargefont-size);
    font-weight: var(--boldTxt-weight);
}

/* ---------------------------------------------------------

  History_Detail.php

----------------------------------------------------------*/
.History_Detail_Ttl {
    font-size: 2rem;
    text-align: center;
    padding: 2rem 0;
}

.History_Detail_evaluation {
    margin: 1.8rem 0 3.6rem;
}

.History_Detail_evaluation p {
    font-size: var(--basefont-size);
    font-weight: var(--bolderTxt-weight);
    margin-bottom: 2.2rem;
}

.History_Detail_evaluation .Btn_Base {
    width: 75%;
    margin: 0 auto;
}

/* 評価するの星 */
.History_Detail_Rate {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-bottom: 2.3rem;
}
.History_Detail_Rate input[type="radio"] {
    display: none;
}
.History_Detail_Rate .History_Detail_Rate_Star {
    background-image: url(../img/star.svg);
    width: 3.2rem;
    height: 3rem;
    margin-right: 3.2rem;
}
.History_Detail_Rate .History_Detail_Rate_Star:first-of-type {
    margin-right: 0;
}
.History_Detail_Rate .History_Detail_Rate_Star:hover {
    background-image: url(../img/star-fill.svg);
    background-size: cover;
    width: 3.2rem;
    height: 3rem;
}
.History_Detail_Rate
    .History_Detail_Rate_Star:hover
    ~ .History_Detail_Rate_Star {
    background-image: url(../img/star-fill.svg);
    background-size: cover;
    width: 3.2rem;
    height: 3rem;
}
.History_Detail_Rate
    .History_Detail_Rate_Input2:checked
    ~ .History_Detail_Rate_Star {
    background-image: url(../img/star-fill.svg);
    background-size: cover;
    width: 3.2rem;
    height: 3rem;
}

/* ２個目 */
.History_Detail_Rate2 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin-bottom: 2.3rem;
}
.History_Detail_Rate2 input[type="radio"] {
    display: none;
}
.History_Detail_Rate2 .History_Detail_Rate_Star2 {
    background-image: url(../img/star.svg);
    width: 3.2rem;
    height: 3rem;
    margin-right: 3.2rem;
}
.History_Detail_Rate2 .History_Detail_Rate_Star2:first-of-type {
    margin-right: 0;
}
.History_Detail_Rate2 .History_Detail_Rate_Star2:hover {
    background-image: url(../img/star-fill.svg);
    background-size: cover;
    width: 3.2rem;
    height: 3rem;
}
.History_Detail_Rate2
    .History_Detail_Rate_Star2:hover
    ~ .History_Detail_Rate_Star2 {
    background-image: url(../img/star-fill.svg);
    background-size: cover;
    width: 3.2rem;
    height: 3rem;
}
.History_Detail_Rate2
    .History_Detail_Rate_Input2:checked
    ~ .History_Detail_Rate_Star2 {
    background-image: url(../img/star-fill.svg);
    background-size: cover;
    width: 3.2rem;
    height: 3rem;
}

/* ---------------------------------------------------------

  QR.php

----------------------------------------------------------*/
#QR {
    background: var(--main-color);
    /* height: calc(100vh - (65.5px + 8.7rem)); */
    min-height: calc(100vh - (65.5px + 8.7rem));
    min-height: calc(100dvh - (65.5px + 8.7rem));
    text-align: center;
    margin-top: 65.5px;
    margin-bottom: 8.7rem;
    padding-top: 0;
    padding-bottom: 2.4rem;
}

.QR_Text {
    font-size: 2rem;
    font-weight: var(--boldTxt-weight);
    padding-top: 5.6rem;
    padding-bottom: 2rem;
}

.QR_Name p {
    margin-top: 3.2rem;
    font-size: 2.9rem;
    margin-bottom: 0.4rem;
}

.QR_Name span {
    font-size: 2.5rem;
    margin-left: 1.1rem;
}

.QR_Name small {
    font-size: var(--basefont-size);
}

/* ---------------------------------------------------------

  Reserve_Comp.php

----------------------------------------------------------*/
#Reserve_Comp section {
    text-align: center;
    padding-top: 4.8rem;
}

#Reserve_Comp section h3 {
    font-size: 2rem;
    font-weight: var(--boldTxt-weight);
    margin-bottom: 2.8rem;
}

#Reserve_Comp section p {
    font-size: var(--largefont-size);
}

/* ---------------------------------------------------------

  Practitioner_List.php

----------------------------------------------------------*/
#Practitioner_List_Wrap {
    margin-top: var(--cardInsidemargin-bottom);
}

#Practitioner_List_Search_Wrap {
    display: flex;
    align-items: center;
    background-color: var(--main-color);
    border-bottom: 1px solid var(--sub-color);
    padding: 1rem var(--bs-gutter-x);
    justify-content: space-between;
}

#Practitioner_List_Search_Wrap .Form_Wrap {
    width: calc(100% - 88px);
}

#Practitioner_List_Search_Btn_Wrap {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.Practitioner_List_Option_Wrap {
    background-color: var(--main-color);
    border-bottom: 1px solid var(--sub-color);
    padding: 1rem var(--bs-gutter-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Search_Result {
    font-size: 2rem;
    font-weight: var(--boldTxt-weight);
}

.Search_Result span {
    margin-left: 0.4rem;
    font-size: var(--basefont-size);
    font-weight: var(--baseTxt-weight);
}

.Search_Sort {
    position: relative;
}

.Search_Sort select {
    border: none;
    font-size: var(--basefont-size);
    font-weight: var(--boldTxt-weight);
    color: var(--baseTxt-color);
    appearance: none;
    background: none;
    padding-right: 2rem;
    direction: rtl;
}

.Search_Sort select option {
    display: inline-block;
}

.Search_Sort img {
    transform: rotate(-90deg);
    position: absolute;
    right: 0.6rem;
    top: 0.2rem;
    bottom: 0;
    margin: auto 0;
    width: 0.6rem;
    height: auto;
}

#Practitioner_List_Search_Wrap button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    font-size: var(--basefont-size);
    font-weight: var(--bolderTxt-weight);
    display: inline-block;
    padding: 0 1.2rem;
    margin: auto;
    color: var(--baseTxt-color);
}

/* ---------------------------------------------------------

  Practitioner_Detail.php

----------------------------------------------------------*/
#Practitioner_Info_Wrap {
    margin-bottom: var(--basemargin-bottom);
}

#Practitioner_Info_ImgWrap {
    width: 100vw;
    height: 240px;
    max-height: 33.333vh;
    position: relative;
}

#Practitioner_Info_ImgWrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
}

#Practitioner_Info_Wrap > .Card {
    width: calc(100% - calc(var(--bs-gutter-x) * 2));
    margin: -4rem auto auto auto;
}

#Practitioner_Menu_Wrap {
    padding: var(--basemargin-bottom) 0 3.2rem;
}

#Practitioner_Menu_Wrap .Small {
    padding-bottom: 1.2rem;
}

/* ～ 同時施術可能メニュー ～ */
.Practitioner_Menu_Slider_Ttl {
    text-align: center;
    margin-top: 6rem;
}

.Practitioner_Menu_Slider_Ttl span {
    font-size: var(--basefont-size);
    font-weight: var(--bolderTxt-weight);
    margin-bottom: 0.4rem;
    display: inline-block;
    position: relative;
}

.Practitioner_Menu_Slider_Ttl span::before {
    content: "";
    height: 60%;
    width: 2px;
    background: var(--bk-color);
    transform: rotate(-30deg);
    position: absolute;
    top: 3px;
    bottom: 0;
    left: -1.4rem;
    margin: auto 0;
}

.Practitioner_Menu_Slider_Ttl span::after {
    content: "";
    height: 60%;
    width: 2px;
    background: var(--bk-color);
    transform: rotate(30deg);
    position: absolute;
    top: 3px;
    bottom: 0;
    right: -1.4rem;
    margin: auto 0;
}

.Practitioner_Menu_Slider_Ttl h3 {
    font-size: 2.2rem;
    font-weight: var(--boldTxt-weight);
    margin-bottom: 0.8rem;
}

.Practitioner_Menu_Slider_Ttl div {
    font-size: var(--largefont-size);
    font-weight: var(--bolderTxt-weight);
    width: 100%;
}

.Practitioner_Menu_Slider_Box {
    width: 100vw;
    margin-left: -1.5rem;
}

.Practitioner_Menu_Slider_Box .Card {
    margin: 0 0 0 var(--bs-gutter-x);
}

.Practitioner_Menu_Slider_Box .swiper {
    padding-right: 10% !important;
    padding-top: 1.6rem !important;
    padding-bottom: 4rem !important;
    position: relative;
}

.swiper-wrapper {
    height: auto !important;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 0.6rem !important;
}

/* ページネーションのサイズと色 */
.Practitioner_Menu_Slider_Box .swiper-pagination-bullet {
    background-color: var(--bk-color) !important;
    height: 0.8rem;
    width: 0.8rem;
}

.Practitioner_Menu_Slider_Box .Card_Menu_Text h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 2行以上表示しない */
    overflow: hidden;
}

.Practitioner_Menu_Slider_Box .Card_Menu_Info {
    position: relative;
}

.Practitioner_Menu_Slider_Box .Card_Menu_Text {
    margin-bottom: 0;
    margin-top: 1rem;
}

.Practitioner_Menu_Slider_Box .Card_Menu:first-of-type {
    margin-top: 1.2rem;
}

.Practitioner_Menu_Slider_Box .Card_Menu {
    border-bottom: 1px #d6d6d6 solid;
    padding-bottom: 1.8rem;
    margin-bottom: 1.8rem;
}

.Practitioner_Menu_More p {
    text-align: right;
    font-size: var(--basefont-size);
    font-weight: var(--boldTxt-weight);
    position: relative;
    padding-right: 1.6rem;
}

.Practitioner_Menu_More p img {
    height: 1.4rem;
    width: auto;
    transform: rotate(180deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
}

/* メニュー選択したら表示 */
#SelectMenu_Btn_Wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 60;
}

.SelectMenu_Btn_Wrap_Inner {
    background-color: var(--main-color);
    padding: var(--cardInsidemargin-bottom) 0;
}

#SelectMenu_Btn_Wrap ul {
    margin-bottom: 0.8rem;
    font-weight: bold;
    font-size: 1.3rem;
}

#SelectMenu_Btn_Wrap ul > li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--bolderTxt-weight);
}

#SelectMenu_Btn_Wrap ul > li::before {
    content: "・";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* ----------------------

  同時施術メニューもチェック

------------------------*/
.With_Treatment_Check_Fixed {
    margin-bottom: 1.2rem;
}

.With_Treatment_Check_Fixed_Inner {
    padding: 0.9rem 3.5rem 0.9rem 1.2rem;
    background: var(--bk-color);
    color: var(--main-color);
    border-radius: 0.5rem;
    font-size: 1.4rem;
    font-weight: var(--boldTxt-weight);
    position: relative;
    margin-left: -0.8rem;
}

.With_Treatment_Check_Fixed_Inner:hover {
    color: var(--main-color);
}

.With_Treatment_Check_Fixed_Inner img {
    width: auto;
    height: 2.4rem;
    position: absolute;
    top: 0.3rem;
    bottom: 0;
    right: 1.2rem;
    margin: auto 0;
}

/* ---------------------------------------------------------

  カレンダー

----------------------------------------------------------*/
/* 同時施術 */
#Calendar_Modal_TreatmentSelect {
    background: var(--sub-color);
    padding: 2rem 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    margin: 0 1.5rem calc(var(--largemargin-bottom) * 2);
}

.Calendar_Modal_TreatmentCheckbox {
    cursor: pointer;
    position: relative;
    margin-right: 1rem;
}

.Calendar_Modal_TreatmentSelect_Input {
    margin: 0;
    width: 0;
    opacity: 0;
    position: absolute;
}

.Calendar_Modal_TreatmentSelect_Input:checked
    + .Calendar_Modal_TreatmentSelect_Dummy {
    background: #333333;
}

.Calendar_Modal_TreatmentSelect_Input:checked
    + .Calendar_Modal_TreatmentSelect_Dummy::before {
    content: "";
    display: block;
    position: absolute;
    top: 30%;
    left: 50%;
    width: 40%;
    height: 3px;
    transform: translate(-6px, 5px) rotateZ(-135deg);
    transform-origin: 2px 2px;
    background: #ffffff;
}

.Calendar_Modal_TreatmentSelect_Input:checked
    + .Calendar_Modal_TreatmentSelect_Dummy::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    left: 60%;
    width: 76%;
    height: 3px;
    transform: translate(-6px, 5px) rotateZ(-45deg);
    transform-origin: 2px 2px;
    background: #ffffff;
}

.Calendar_Modal_TreatmentSelect_Dummy {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border: solid 2px var(--bk-color);
    border-radius: 0.4rem;
}

#Calendar_Modal_TreatmentSelect p {
    margin-bottom: 0;
    margin-top: 0.2rem;
    font-weight: var(--boldTxt-weight);
}

/* ---------------------------------------------------------

  Terms.php
  Privacy.php

----------------------------------------------------------*/
#Terms,
#Privacy {
    font-size: var(--basefont-size);
    font-weight: var(--baseTxt-weight);
}

#Terms p,
#Privacy p {
    padding: 2.8rem 0 1.8rem;
}

.Terms_Ttl,
.Privacy_Ttl {
    font-size: var(--largefont-size);
    padding-bottom: 1rem;
}

.Terms_Text,
.Privacy_Text {
    margin-bottom: 2.4rem;
}

#Terms .Terms_Text p,
#Privacy .Privacy_Text p {
    padding: 0rem;
}

.Terms_Text ol,
.Privacy_Text ol {
    list-style-position: inside;
}

.Terms_Text ol li {
    padding-bottom: 1.8rem;
}

.Terms_Text ol li:last-of-type,
.Privacy_Text ol li:last-of-type {
    padding-bottom: 0;
}

.Terms_Text ol li ol,
.Privacy_Text ol li ol {
    padding-left: 1.6rem;
    padding-top: 0.4rem;
}

.Terms_Text ol li ol li,
.Privacy_Text ol li ol li {
    padding-bottom: 0;
}

.Privacy_Text ol li {
    padding-bottom: 0.4rem;
}

/* ---------------------------------------------------------

  Credit_Info.php

----------------------------------------------------------*/
.Credit_Info_Text {
    padding-top: 2.4rem;
    padding-bottom: 1.6rem;
    font-size: 1.5rem;
    font-weight: var(--bolderTxt-weight);
}

.Credit_Info_Box {
    display: flex;
    justify-content: space-between;
}

.Credit_Info_Box .Form_Wrap {
    width: 35%;
}

.Credit_Info_Box .Form_Wrap:last-of-type {
    width: 60%;
}

.Credit_Info_Box .Form_Wrap .Form_Warning {
    font-size: 1.1rem;
}

#Credit_Info .Form_Wrap {
    margin-bottom: 2.4rem;
}

#Credit_Info .Credit_Info_Box .Form_Wrap {
    margin-bottom: 0.8rem;
}

#Credit_Info .Credit_Info_Input_Margin {
    margin-bottom: 4.8rem;
}

/* ---------------------------------------------------------

  Chat_Practitioner_List.php

----------------------------------------------------------*/
#Chat_Practitioner_List .Section_Wht_Bg {
    padding-top: 1.8rem;
}

#Chat_Practitioner_List .Card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.6rem;
}

#Chat_Practitioner_List .Card .Card_Practitioner {
    margin-bottom: 0;
}

/* ---------------------------------------------------------

  Topics.php

----------------------------------------------------------*/
.Topics_Img {
    padding-top: var(--bs-gutter-x);
    margin-bottom: 1.8rem;
}

.Topics_Img img {
    width: 100%;
    height: auto;
}

.Topics_Ttl {
    font-size: var(--largefont-size);
    font-weight: var(--bolderTxt-weight);
    margin-bottom: 1.2rem;
}

.Topics_Text {
    font-size: var(--basefont-size);
    font-weight: var(--baseTxt-weight);
}

.Topics_Text span {
    display: block;
}

/* ---------------------------------------------------------

  Favorite.php

----------------------------------------------------------*/
.Favorite_Practitioner_List_Card_Wrap {
    margin-top: var(--cardInsidemargin-bottom);
}

/* ---------------------------------------------------------

  Practitioner_Detailのメニューモーダル

----------------------------------------------------------*/
.Modal_Menu_Detail_Wrap .Modal_Search_Calendar_Scroll {
    height: auto;
    max-height: calc(90dvh - 14rem);
    padding: 0 var(--cardInsidemargin-bottom);
    margin-top: var(--cardInsidemargin-bottom);
}

.Modal_Menu_Detail_Wrap .Modal_Menu_Detai_Text {
    text-align: center;
}

.Modal_Menu_Detail_Wrap .Modal_Menu_Detai_Text p {
    font-size: var(--largefont-size);
}

.Modal_Menu_Detail_Wrap .Modal_Menu_Detai_Text p span {
    display: inline-block;
}

.Modal_Menu_Detai_listen {
    font-weight: var(--boldTxt-weight);
    font-size: 1.7rem;
    margin-bottom: 2.8rem;
}

.Modal_Menu_Detail_Wrap #Modal_Search_Calendar_Footer {
    border-top: none;
}

.Modal_Menu_List_Wrap.Show {
    z-index: 80 !important;
}

.Modal_Menu_List_Close.Show {
    z-index: 70 !important;
}

.Modal_Menu_Detail_Wrap.Show {
    z-index: 100 !important;
}

.Modal_Menu_Detail_Close.Show {
    z-index: 90 !important;
}

.Modal_Menu_List_Wrap .Modal_Menu_List_Practitioner {
    padding: 0 var(--cardInsidemargin-bottom);
    margin-top: 0.4rem;
}

.Modal_Menu_List_Wrap .Modal_Menu_List_Practitioner p {
    font-size: var(--basefont-size);
    font-weight: var(--bolderTxt-weight);
}

.Modal_Menu_List_Wrap .Modal_Search_Calendar_Scroll {
    height: auto;
    max-height: calc(90dvh - 18rem);
    padding: 1.8rem var(--cardInsidemargin-bottom) 0;
}

/* お支払方法選択画面 */
.Payment_Section_Ttl {
    background: var(--bg-color);
    width: 100%;
    padding: 1.6rem 0 1.6rem 1.5rem;
    font-size: var(--xlargefont-size);
    font-weight: var(--boldTxt-weight);
    text-align: left;
}

.Payment_Section_Content {
    padding: 1.6rem 1.5rem 1.6rem 1.5rem;
    font-size: 2rem;
    text-align: left;
}

.Payment_Section_Confirm_Text {
    font-size: var(--xlargefont-size);
}

#Payment_Section_ThanksText {
    padding: 14rem 0 1.5rem;
    font-size: 1.8rem;
    font-weight: var(--boldTxt-weight);
    text-align: center;
}

.Amount_Total_Box {
    width: 88%;
    padding: 1.6rem 0 1.6rem 0;
    font-size: var(--xlargefont-size);
    font-weight: var(--boldTxt-weight);
    margin: 0 auto 1.1rem;
    display: flex;
    justify-content: space-between;
}

.PayPay_Btn {
    margin-top: 17px;
    padding: 0.5rem 0 !important;
}

.PayPay_Btn img {
    width: 148px;
    margin: 0 auto;
    display: block;
}

/* ========================================= */

/* エラーテキスト */
.ErrorText {
    font-size: var(--basefont-size);
    font-weight: var(--boldTxt-weight);
    text-align: center;
    width: 80%;
    margin: 2rem auto;
    color: var(--red-color);
}

#Userinfoerror_Txt {
    margin-top: 80px;
    /* color: var(--red-color); */
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
    font-size: var(--basefont-size);
}

#Userinfoerror_Txt span {
    display: block;
    color: var(--red-color);
    margin-bottom: 24px;
}

.Userinfoerror_Link {
    color: var(--baseTxt-color);
    border-bottom: 1px solid var(--baseTxt-color);
}

/* ========================================= */

/* ========================================= */

/* 予約タブレット */

main#Tablet {
    background-color: var(--main-color);
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    padding: 0;
}
.Center_Content_Wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    padding: 0 1.6rem;
}

.Center_Content_Wrap h1 {
    display: flex;
    justify-content: center;
}

.Center_Content_Wrap h1 img {
    width: 400px;
    height: auto;
}

.Btn_Base.Btn_Wht.arrow {
    position: relative;
    padding: 1.5rem 4rem;
}

.Btn_Base.Btn_Bk {
    position: relative;
    padding: 0.9rem 4rem;
}

.Btn_Base.arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.6rem;
    width: 1rem;
    height: 1rem;
    border-top: solid 2px var(--baseTxt-color);
    border-right: solid 2px var(--baseTxt-color);
    transform: translateY(-50%) rotate(45deg);
}

/* TOP */

.Center_Content h1 {
    margin-bottom: 4rem;
}

/* お間違いないですか */
#Header_Content_Wrap {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    padding: 0 1.6rem;
    position: relative;
}

.Header_Content h1 {
    padding: 4rem 0 0 4rem;
}
.Header_Content h1 img {
    max-height: 4rem;
    width: auto;
}

.Center_Content_Wrap > .Center_Content > div {
    padding: 0 2.4rem;
}

.Main_Content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Main_Content p {
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3.2rem;
}

.Main_Content button {
    margin-bottom: 5.4rem;
}

.BackLink a {
    font-size: var(--baseTxt-color);
    text-decoration: underline;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}

.BackLink {
    display: flex;
    align-items: center;
    justify-content: center;
}

.BackLink span {
    width: 1rem;
    height: 1rem;
    border-top: solid 2px var(--baseTxt-color);
    border-right: solid 2px var(--baseTxt-color);
    transform: rotate(220deg);
    display: inline-block;
    margin-right: 1.4rem;
}

/* ========================================= */

.Gest_Text {
    font-size: 16px;
    padding-top: 8px;
    margin-bottom: 0;
}


/* 店頭タブレットのボタン系 */

#QR_View_Btn{
  width: 680px;
  margin: 4rem auto 0;
}

#Reserve_Number_Btn{
  width: 680px;
  margin: 6rem auto 1rem;
}
#Reserve_Number_Send {
  width: 680px;
  margin-bottom: 5rem;
}

.Reserve_Number_Label {
  font-size: var(--basefont-size);
  font-weight: var(--boldTxt-weight);
}

#Reserve_Number {
    background: var(--sub-color);
    border: none;
    border-radius: 0.8rem;
    padding: 1.2rem 1.6rem;
    font-size: var(--basefont-size);
    position: relative;
    /* margin-bottom: 3rem; */
}