@charset "utf-8";
/* CSS Document */


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

基本設定

----------------------------------------------------------*/
html{
    font-size: 62.5%;/* 1rem = 10px */
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    color: var(--font_color_1);
}

:root{
    /* 色 */
    /* --色に関するメモ------------
    同名の色は、名前の最後の数字が小さいものほど明るい。
    ----------------------------*/
    --color_1: #2E2E2E; /*  */
    --color_2: #1E1E1E;/*  */
    --color_3: #EAEAEA ;/**/
    --color_4: #9B999B;/*  */
    --color_5: #1A1A1A;/*  */
    --color_6: #4D4D4D;/*  */
    --color_7: #988F8F;/*  */
    --color_8: #848484;
    --color_9: #414141;
    --accent_color_1: #7657FF;/* #7657FF */
    --accent_color_2: #D88239;/* #D88239 */
    --alert_color: #E05151;/* #FF5454 */
    --Tournament_color: #7657FF;
    --RingGame_color: green;
    /* カレンダーページのイベントカードの背景色 */
    --CalendarList_bg_color: #414141;
    /* 色　rgba */
    --color_1_rgb: 46, 46, 46; /* #2E2E2E */
    --color_2_rgb: 30, 30, 30;/* #1E1E1E */
    --color_3_rgb: 234,234,234;/* #EAEAEA */
    --color_4_rgb: 155,153,155;/* #9B999B */
    --color_5_rgb: 26,26,26;/* #1A1A1A */
    --accent_color_1_rgb: 118,87,255;/* #7657FF */
    --accent_color_2_rgb: 216,130,57;/* #D88239 */
    --alert_color_rgb: 224,81,81;/* #E05151 */
    /* 文字色 */
    --font_color_1: #FAFAFC; /*  */
    --font_color_2: #FFFFFF;/*  */
    /* フォントサイズ */
    /* --フォントに関するメモ------
    基本的に下以外でフォントサイズの指定は行わない。
    ※例外：ヘッダーのロゴで画像指定がない場合のcss
    ----------------------------*/
    --largest_font: 2.5rem;
    --large_font: 1.6rem;
    --normal_font: 1.4rem; 
    --small_font: 1.2rem; 
    --smallest_font: 1.0rem;
    /* box-shadow */
    --shadow_1: -1px 4px 7px -4px rgba(0, 0, 0, 0.16);
    --shadow_2: -3px -4px 7px -4px rgba(0, 0, 0, 0.16);
    /* spacer */
    /* --間隔に関するメモ------
    要素間の間隔は原則以下の変数を用いる。
    数字が大きいほど間隔は狭くなる
    ----------------------------*/
    /* 縦 */
    --column_space_1: 5.8rem;
    --column_space_2: 3.8rem; 
    --column_space_3: 2.5rem; 
    --column_space_4: 2rem; 
    --column_space_5: 1.2rem; 
    --column_space_6: 0.7rem;
    --column_space_7: 0.4rem; 
    /* 横 */
    --row_space_1: 1.2rem;
    --row_space_2: 0.7rem;
}

body{
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: var(--color_2);
}

.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);
}

h1{
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--color_4);
    display: inline-block;
}

h2{
    font-size: var(--largest_font);
    color: var(--font_color_2);
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0;
}

h3{
    margin-bottom: 0;
}

h4{
    margin-bottom: 0;
}

a{
    text-decoration: none;
}

p{
    margin-bottom: 0;
}

ul{
    padding-left: 0;
    margin-bottom: 0;
}

li{
    list-style: none;
}

a,p,li,div,span{
    /* font-size: var(--normal_font); */
    color: var(--font_color_1);
}

main{
    margin: 5.6rem 0 8rem;
    min-height: calc(100vh - 13.6rem);
    min-height: calc(100dvh - 13.6rem);
}

section{
    padding-bottom: var(--column_space_2);
}

.Aleart_Txt{
    color: var(--alert_color);
    font-size: var(--small_font);
}


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

各パーツ

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

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

ボタン

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

button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* ボタン基本 */
.Btn_Base{
    padding: 0.8rem 1.2rem;
    border-radius: 1rem;
    box-shadow: 0px 3px 4px 1px rgba(57, 82, 87, 0.16);
    box-shadow: var(--shadow_1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--column_space_6);
    font-size: 1.3rem;
}

/* 線ボタン */
.Btn_Line{
    border: solid 1px var(--font_color_2);
    color: var(--font_color_2);
}

/* 塗りボタン */
.Btn_Fill{
    background-color: var(--accent_color_1);
    color: var(--font_color_2);
}

/* 戻るボタン */
.Btn_Cancel{
    background-color: var(--color_4);
    color: var(--font_color_2);
}

/* 退会など特定のキャンセルボタン */
.Btn_Alert{
    border: solid 1px var(--alert_color);
    /* color: var(--alert_color); */
    color: var(--font_color_2);
    background-color: var(--alert_color);
}

/* まん丸ボタン */
.Btn_Round{
    padding: 0.7rem;
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 100%;
}

/* 小さいボタン */
.Btn_Sm{
    padding: var(--column_space_7) var(--row_space_2);
}

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

各アイコン設定

------------------------*/
/* ホーム */
#HOME{
    mask-image: url('../img/icon/home.svg');
    -webkit-mask-image: url('../img/icon/home.svg');
}

/* カレンダー */
#CALENDAR{
    mask-image: url('../img/icon/calendar.svg');
    -webkit-mask-image: url('../img/icon/calendar.svg');
}

/* 店舗検索 */
#SHOP_RESEARCH{
    mask-image: url('../img/icon/search.svg');
    -webkit-mask-image: url('../img/icon/search_shop.svg');
}

/* 会員証 */
#USER_CARD{
    mask-image: url('../img/icon/user_card.svg');
    -webkit-mask-image: url('../img/icon/user_card.svg');
}

/* マイページ */
#MYPAGE{
    mask-image: url('../img/icon/user.svg');
    -webkit-mask-image: url('../img/icon/user.svg');
}

/* 会員登録 */
#ADD_USER{
    mask-image: url('../img/icon/add_user.svg');
    -webkit-mask-image: url('../img/icon/add_user.svg');
}

/* ログイン */
#TICKET{
    mask-image: url('../img/icon/ticket.svg');
    -webkit-mask-image: url('../img/icon/ticket.svg');
}

#CHIP{
    mask-image: url('../img/icon/chip.svg');
    -webkit-mask-image: url('../img/icon/chip.svg');
}

/* ログイン */
#LOGIN{
    mask-image: url('../img/icon/login.svg');
    -webkit-mask-image: url('../img/icon/login.svg');
}

/* ログアウト */
#LOGOUT{
    mask-image: url('../img/icon/logout.svg');
    -webkit-mask-image: url('../img/icon/logout.svg');
}

/* 加盟店一覧 */
#SHOP_LIST{
    mask-image: url('../img/icon/shop.svg');
    -webkit-mask-image: url('../img/icon/shop.svg');
}

/* ランキング */
#RANK{
    mask-image: url('../img/icon/crown.svg');
    -webkit-mask-image: url('../img/icon/crown.svg');
}

/* 実績 */
#AWARD{
    mask-image: url('../img/icon/award.svg');
    -webkit-mask-image: url('../img/icon/award.svg');
}

/* 入店者一覧 */
#INSHHOP_USER{
    mask-image: url('../img/icon/users.svg');
    -webkit-mask-image: url('../img/icon/users.svg');
}

/* メール */
#MAIL{
    mask-image: url('../img/icon/mail.svg');
    -webkit-mask-image: url('../img/icon/mail.svg');
}

/* パスワード */
#PASSWORD{
    mask-image: url('../img/icon/lock.svg');
    -webkit-mask-image: url('../img/icon/lock.svg');
}


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

ページタイトル

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

#PageTtl_Wrap{
    padding: var(--column_space_4) 0 var(--column_space_3);
}

#PageTtl_Inner{
    position: relative;
    height: 3.1rem;
}

#PageTtl_BackArrow_Wrap{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#PageTtl_BackArrow_Wrap > button > span{
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_3);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../img/icon/L_arrow.svg');
    -webkit-mask-image: url('../img/icon/L_arrow.svg');
}

#PageTtl_Content_Wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 6.2rem);
    padding: 0 var(--row_space_2);
}

/* タイトル文字小さめ */
#PageTtl_Content_Wrap > .SmallFont{
    font-size: calc(var(--largest_font) * 0.8);
}



#PageTtl_Content_Wrap .Icon_Wrap{
    margin-right: var(--row_space_2);
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--font_color_2);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

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

１つ前のページに戻る

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

#PageTtl_BackArrow_Wrap > button{
    width: 3.2rem;
    height: 3.2rem;
}

#PageTtl_BackArrow_Wrap > button > img{
    transform: translateY(0.1rem);
}


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

サブタイトル

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

.SubTtl{
    font-size: var(--large_font);
    font-weight: normal;
    color: var(--accent_color_1);
    margin-bottom: var(--column_space_4);
}

/* 複数行の文章 */
.Document_Wrap{
    margin-bottom: var(--column_space_4);
}

.Document_Wrap.SmallFont{
    font-size: var(--small_font);
}

.Document_Wrap > a{
    text-decoration: underline;
}

.Document_Wrap.SmallFont > a{
    font-size: var(--small_font);
}
/* ----------------------

白いsectionの囲い部分
※フォームやcalendarで使用

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

.White_Box_Wrap{
    background-color: var(--color_1);
    border-radius: 1.8rem;
    padding: var(--column_space_4) var(--bs-gutter-x);
    box-shadow: var(--shadow_1);
}

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

フォーム

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

.One_Form_Wrap{
    margin-bottom: var(--column_space_3);
}

.form-control,
.form-select,
option{
    background-color: var(--color_1);
    color: var(--font_color_2);
}

.form-control:focus{
    color: var(--font_color_2);
}

.form-select{
    background-image: url(../img/icon/bottomarrow.png);
    background-size: 12px auto;

}



/* フォームラベル */
.One_Form_Wrap > label{
    font-size: var(--small_font);
    color: var(--color_4);
    font-weight: bold;
    display: flex;
    margin-bottom: 0;
}

.OtherTypeForm{
    margin-bottom: var(--column_space_5);
}

/* 必須バッジ */
.Form_Req{
    background-color: var(--alert_color);
    color: var(--font_color_2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--smallest_font);
    padding: 0.2rem 0.4rem;
    border-radius: 0.6rem;
    margin-left: var(--row_space_1);
}

/* 入力補足情報 */
.Form_Remark{
    font-size: var(--small_font);
    color: var(--color_4);
}

/* フォーム入力部分（テキスト系） */
.Form_Input_Wrap{
    position: relative;
}

.Form_Input_Wrap > .FormLabelIcon{
    position: absolute;
    top: 50%;
    left: 0.1rem;
    transform: translateY(-50%);
    max-width: 1.8rem;
    max-height: 1.8rem;
}

/* アイコンなし */
.Form_Input_Wrap > .form-control{
    border: none;
    border-bottom: solid 1px var(--color_3);;
    padding: 0.4rem 0;
    font-size: var(--large_font);
    background-color: var(--color_1);
    border-radius: 0;
}


/* アイコンなし・画像 */
.One_Form_Wrap .form-control.Img{
    font-size: var(--normal_font);
}

.One_Form_Wrap .form-control.Img:focus{
    background-color: var(--color_1)
}

/* アイコンなし・セレクト */
.form-select.Form_Input_Wrap{
    font-size: var(--normal_font);
    margin-top: 0.4rem;
}

/* アイコンあり */
.Form_Input_Wrap.Icon > .form-control{
    border: none;
    border-bottom: solid 1px var(--color_3);;
    padding: 0.7rem 0.7rem 0.7rem 3.2rem;
    font-size: var(--large_font);
    background-color: var(--color_1);
}

.FormLabelIcon{
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_3);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* パスワード有り */
.Form_Input_Wrap.Pass > .form-control{
    padding-right: 4rem;
    background-color: var(--color_1);
}

#PASSWORD.FormLabelIcon{
    -webkit-mask-size: contain;
    width: 1.392rem;
    height: 1.8rem;
}

.Form_Input_Wrap > .form-control::-webkit-input-placeholder{
    color: var(--color_4);
    font-size: var(--small_font);
}

.Form_Input_Wrap > .form-control::-moz-placeholder{
    color: var(--color_4);
    font-size: var(--small_font);
}

.Form_Input_Wrap > .form-control:-ms-input-placeholder{
    color: var(--color_4);
    font-size: var(--small_font);
}

.Form_Input_Wrap > .form-control::-ms-input-placeholder{
    color: var(--color_4);
    font-size: var(--small_font);
}

.Form_Input_Wrap > .form-control::placeholder{
    color: var(--color_4);
    font-size: var(--small_font);
}

.Form_Input_Wrap > .form-control:focus{
    border-bottom: solid 1px var(--accent_color_1);
    box-shadow: none;
    background-color: var(--color_1);
}

.Form_Input_Wrap > .form-control:focus-visible{
    border-bottom: solid 1px var(--accent_color_1);
    box-shadow: none;
    background-color: var(--color_1);
}

.Form_Input_Wrap > .form-control:visited{
    border-bottom: solid 1px var(--accent_color_1);
    box-shadow: none;
    background-color: var(--color_1);
}

.Form_Input_Wrap > input[type=text]:-webkit-autofill::first-line{
    border-bottom: solid 1px var(--accent_color_1);
    box-shadow: none;
    background-color: var(--color_1);
}

/* パスワード表示・非表示 */

.Form_Input_Wrap > #PassEyeIcon{
    position: absolute;
    top: 50%;
    right: 0.1rem!important;
    transform: translateY(-50%);
    max-width: 20px;
    height: 39px;
    width: 20px;
    background-image: url(../img/icon/eye_close.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.Form_Input_Wrap > #PassEyeIcon.Txt{
    height: 18px;
    background-image: url(../img/icon/eye_open.svg);
}
/* チェックボックス */

.Form_Input_Wrap.checkbox{
    display: flex;
    align-items: center;
    padding: 0.7rem 0;
}
.form-check-input[type=checkbox]{
    width: 2.2rem;
    height: 2.2rem;
    margin-top: 0;
    border: solid 2px var(--accent_color_1);
    border-radius: 0.6rem;
    transition: 0.3s all;
    background-color: transparent;
}

.form-check-input[type=checkbox]:checked{
    background-color: var(--accent_color_1);
    background-image: url(../img/icon/check.svg);
    background-size: inherit;
}

.form-check-label{
    margin-left: var(--row_space_1);
    font-size: var(--small_font);
    font-weight: bold;
    color: var(--font_color_2);
}


/* ラジオボタン */
.Radio_Wrap{
    display: flex;
    margin-top: 0.4rem;
}

.form-check.radio{
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    margin-bottom: var(--column_space_6);
    margin-right: 1.6rem;
}

.form-check-input[type=radio]{
    width: 2.2rem;
    height: 2.2rem;
    position: relative;
    border: solid 2px var(--accent_color_1);
    background-color: var(--color_1);
    border-radius: 100%;
    margin-top: 0;
}

.form-check-input[type=radio]::before{
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    transform: translate(-50% , -50%);
    background-color: var(--accent_color_1);
    opacity: 0;
    transition: 0.3s all;
}

.form-check-input[type=radio]:checked::before{
    opacity: 1;
}

/* 切り替えスイッチ */
.form-switch.switch .form-check-input{
    width: 4rem;
    height: 2.4rem;
    border-radius: 9999px;
    border: solid 2px var(--accent_color_1);
    background-image: none;
    position: relative;
    transition: 0.4s all;
}

.form-switch.switch .form-check-input::before{
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    background-color: var(--accent_color_1);
    position: absolute;
    top: 50%;
    left: 0.2rem;
    transform: translateY(-50%);
    transition: 0.4s all;
}

.form-switch.switch .form-check-input:checked{
    background-color: var(--accent_color_1);
}

.form-switch.switch .form-check-input:checked::before{
    background-color: var(--color_1);
    left: calc(100% - 1.8rem)
}


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

カード

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

.One_Card_Wrap{
    margin-bottom: var(--column_space_5);
}

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

.One_Card_Wrap > a{
    background-color: var(--color_1);
    box-shadow: var(--shadow_1);
    display: flex;
    border-radius: 1.6rem;
    overflow: hidden;
}

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

画像

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

.Card_Img_Wrap{
    margin: var(--column_space_6) var(--row_space_2);
    width: calc(25% - var(--row_space_2));
    height: 0;
    padding-bottom: calc(25% - var(--row_space_2));
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.Card_Img_Wrap > img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    -o-object-fit: cover;
       object-fit: cover;
}


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

テキスト情報エリア

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

.Card_Txt_Wrap{
    width: calc(100% - ((25% + var(--row_space_2)) + 2.3rem));
    padding: var(--column_space_6) var(--row_space_2) var(--column_space_6) 0;
    color: var(--font_color_2);
    font-size: var(--small_font);
}

.Card_Txt_Wrap p{
    font-size: var(--small_font);
} 

.Card_Ttl_Wrap{
    font-size: var(--normal_font);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: solid 1px var(--color_3);;
    padding-bottom: 0.2rem;
    margin-bottom: var(--column_space_7);
}

.Card_Txt_Flex{
    display: flex;
    align-items: center;
    font-size: var(--small_fonts);
}

.CardInfo_Icon{
    margin-right: var(--row_space_2);
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_3);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    flex-shrink: 0;
}

#SHOP.CardInfo_Icon{
    mask-image: url('../img/icon/shop.svg');
    -webkit-mask-image: url('../img/icon/shop.svg');
}

#MONEY.CardInfo_Icon{
    mask-image: url('../img/icon/yen.svg');
    -webkit-mask-image: url('../img/icon/yen.svg');
}

#LIMITTIME.CardInfo_Icon{
    mask-image: url('../img/icon/sand_timer.svg');
    -webkit-mask-image: url('../img/icon/sand_timer.svg');

}

#TIME.CardInfo_Icon{
    mask-image: url('../img/icon/time.svg');
    -webkit-mask-image: url('../img/icon/time.svg');
    background-color: var(--alert_color);
}

/* 店名 */
.Card_ShopName_Wrap{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.Card_ShopName_Wrap p{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 申し込み可能時間 */
.Card_TimeLimit_Wrap.Card_Txt_Flex > .CardInfo_Icon{
    width: 1rem;
    height: 2rem;
    background-color: var(--alert_color);
}

/* 開催時間 */
.Card_Time_Wrap.Card_Txt_Flex > p,
.Card_TimeLimit_Wrap.Card_Txt_Flex > p{
    color: var(--alert_color);
}

.Card_Time_Wrap.Card_Txt_Flex > .CardInfo_Icon{
    background-color: var(--alert_color);
}

/* カード下部 */
.Card_Btm_Info_Wrap.Card_Txt_Flex{
    justify-content: space-between;
    margin-bottom: 0;
}

/* 料金 */
.Card_Money_Wrap.Card_Txt_Flex{
    margin-bottom: 0;
}

/* 参加人数 */
.Card_Member_Vol_Wrap.Card_Txt_Flex{
    margin-bottom: 0;
}

.Card_Member_Vol_Wrap.Card_Txt_Flex > .CardInfo_Icon{
    width: 2rem;
    height: 2rem;
}

/* 順位 */
.Card_Rank_Wrap.Card_Txt_Flex p{
    font-size: var(--normal_font);
    font-weight: bold;
}

.Card_State_Wrap{
    background-color: var(--accent_color_1);
    color: var(--font_color_2);
    padding: 0rem 1rem;
    border-radius: 0.4rem;
    font-weight: bold;
    margin-left: var(--row_space_2);
    display: inline-block;
}

dd > .Card_State_Wrap{
    margin-left: 0;
}

.Card_State_Wrap.End{
    background-color: transparent;
    border: solid 1px var(--font_color_2);
}

.Card_State_Wrap.Active{
    background-color: var(--accent_color_1);
}

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

カード内やじるし

------------------------*/
.Card_Arrow_Wrap{
    flex-shrink: 0;
    width: 2.3rem;
    background-color: var(--accent_color_1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.Card_Arrow_Wrap > span{
    width: 0.72rem;
    height: 0.72rem;
    border-top: solid 2px var(--font_color_2);
    border-right: solid 2px var(--font_color_2);
    transform: rotate(45deg);
}


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

ヘッダー

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

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

ヘッダーレイアウト

------------------------*/
#Header_Wrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5.6rem;
    background-color: var(--color_1);
    box-shadow: var(--shadow_1);
    z-index: 10;
}

#Header_Inner{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.4rem 0;
}


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

フッター

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

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

フッターレイアウト

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

#Footer_Wrap{
    background-color: var(--color_1);
    box-shadow: var(--shadow_2);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.2rem 0 1.6rem 0;
    height: 8rem;
}

#Footer_Inner{
    width: 100%;
}

#Footer_Main_Nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


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

フッターのアイコンリンク

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

#Footer_Main_Nav li{
    list-style: none;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Icon_Txt_Link{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--font_color_1);
}

.Icon_Txt_Link > span{
    font-weight: bold;
    margin-top: 0.4rem;
    font-size: var(--smallest_font);
}

.Footer_Icon_Wrap {
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_3);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}


/* Footerアイコン各自サイズ調整 */

#CALENDAR.Footer_Icon_Wrap{
    width: 3rem;
    height: 3rem;
}

#SHOP_RESEARCH.Footer_Icon_Wrap{
    width: 3.4rem;
    height: 3rem;
}

#USER_CARD.Footer_Icon_Wrap{
    width: 3.6rem;
}

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

ハンバーガーボタンデザイン

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


#Btn_Hamburger{
    border-radius: 100%;
    background-color: var(--accent_color_1);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: 0;
    z-index: 50;
    transition: 0.5s all;
}

#Btn_Hamburger div{
    width: 2rem;
    height: 1.6rem;
    position: relative;
    transition: 0.5s all;
}

#Btn_Hamburger span{
    width: 2rem;
    height: 0.2rem;
    background-color: var(--color_3);
    position: absolute;
    transition: 0.45s all;
}

#Btn_Hamburger span:first-of-type{
    left: 0;
    top: 0;
}

#Btn_Hamburger span:nth-of-type(2){
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#Btn_Hamburger span:last-of-type{
    left: 0;
    bottom: 0;
}

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

ハンバーガーボタンOPEN

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

#Btn_Hamburger.Open div{
    height: 2rem;
}


#Btn_Hamburger.Open span:first-of-type{
    transform: translate(0px, 9px) rotate(45deg);
}

#Btn_Hamburger.Open span:nth-of-type(2){
    opacity: 0;
}

#Btn_Hamburger.Open span:last-of-type{
    transform: translate(0px, -9px) rotate(-45deg);
}

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

ハンバーガーボタンCLOSE時のメニュー

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

#Hum_Nav_Content_Wrap{
    position: fixed;
    bottom: -100%;
    left: 0;
    transform: scale(0,1);
    width: 100%;
    height: auto;
    transition: 0.8s all;
    overflow-x: hidden;
}

#Hum_Nav_Content_Inner{
    background: rgb(var(--color_4_rgb), 0.90);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 2rem 2rem 0 0;
    padding: var(--column_space_3) var(--column_space_4) var(--column_space_1)  var(--column_space_4);
}

#Hum_Nav_Content_Inner ul{
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    transition: 0.3s;
}

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

ハンバーガーボタンOPEN時のメニュー

------------------------*/
#Hum_Nav_Content_Wrap.Open{
    bottom: 0;
    left: 0;
    transform: scale(1, 1);
}

#Hum_Nav_Content_Wrap.Open #Hum_Nav_Content_Inner ul{
    opacity: 1;
}

#Hum_Nav_Content_Inner ul > li{
    width: 25%;
    margin-bottom: var(--column_space_4);
}

.FooterNav_Icon_Wrap{
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--font_color_2);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}


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

カレンダー

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

#Calendar_CardList_Wrap{
    padding-top: var(--column_space_5);
    padding-bottom: var(--column_space_5);
    background-color: var(--CalendarList_bg_color);
    margin-bottom: 0;
    border-radius: 1.8rem 1.8rem 0 0;
    overflow: hidden;
    
}

.CardList_Wrap{
    padding: var(--column_space_5) 0 var(--column_space_4) 0;
    overflow-y: scroll;
}

#Calendar_Wrap{
    width: 100%;
    /* font-weight: bold; */
    color: var(--font_color_2);
}

@media screen and (max-width:410px) { 
    /*　画面サイズが375pxからはここを読み込む　*/
    #Calendar.irregular_section { 
        padding-bottom: var(--column_space_5)!important;
    }
}

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

年～月タイトルエリア

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

#Calender_MonthYear_Wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px var(--color_3);;
    margin-bottom: var(--column_space_5);
    padding: 0 var(--row_space_1);
    padding-bottom: var(--column_space_6);
}

#Calender_MonthYear_Wrap > a{
    font-size: var(--smallest_font);
    color: var(--color_4);
}

#Calender_MonthYear_Wrap > h4{
    font-size: var(--normal_font);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Calender_MonthYear_Wrap > h4 > span{
    font-size: var(--smallest_font);
    display: block;
}


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

TOPページの左右のやじるしボタン

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

#Tournament_Next_Date_Btn.Btn_Arrow,
#Tournament_Prev_Date_Btn.Btn_Arrow{
    width: 1rem;
    height: 1rem;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

#Tournament_Next_Date_Btn.Btn_Arrow > button,
#Tournament_Prev_Date_Btn.Btn_Arrow > button{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Tournament_Next_Date_Btn.Btn_Arrow > button > span{
    display: block;
    width: 0.72rem;
    height: 0.72rem;
    border-top: solid 2px var(--font_color_2);
    border-right: solid 2px var(--font_color_2);
    transform: rotate(45deg);
}

#Tournament_Prev_Date_Btn.Btn_Arrow > button > span{
    display: block;
    width: 0.72rem;
    height: 0.72rem;
    border-top: solid 2px var(--font_color_2);
    border-right: solid 2px var(--font_color_2);
    transform: rotate(-135deg);
}

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

カレンダー部分の全体レイアウト設定

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

#Calender_Content_Wrap{
    width: 100%;
}

#Calender_Content_Wrap tr{
    display: flex;
}

@media screen and (max-width:375px) { 
    #Calender_Content_Wrap tr{
        height: 2.8rem;
    }
}

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

曜日部分

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

#Calender_Content_Wrap thead{
    color: var(--color_4);
}

@media screen and (max-width:375px) { 
    #Calender_Content_Wrap thead > tr{
        height: 2rem;
    }

    #Calender_Content_Wrap thead > tr > th{
        padding-bottom: 1rem;
    }
}

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

日にち部分

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

#Calender_Content_Wrap th,
#Calender_Content_Wrap td{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% / 7);
    font-size: var(--smallest_font);
    position: relative;
}

#Calender_Content_Wrap .TargetDay::after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(1px);
    background-color: var(--accent_color_1);
    border-radius: 100%;
    width: 1.6rem;
    height: 1.6rem;
    z-index: -1;
}

#Calender_Content_Wrap .TargetDay.Sun,
#Calender_Content_Wrap .TargetDay.Sat{
    color: var(--font_color_2);
}

#Calender_Content_Wrap .Sun{
    color: #EF7F88;
}

#Calender_Content_Wrap .Sat{
    color: #8E9EF4;
}

#Calender_Content_Wrap #today::after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(1px);
    background-color: var(--accent_color_1);
    border-radius: 100%;
    width: 1.6rem;
    height: 1.6rem;
    z-index: -1;
}

#Calender_Content_Wrap th{
    padding-bottom: 1.6rem;
}
#Calender_Content_Wrap .LastMonth,
#Calender_Content_Wrap .NextMonth{
    color: var(--color_4);
}


/* イベント有無の表示 */

.Calendar_Event_Wrap{
    display: flex;
    justify-content: center;
    height: 2.4rem;
}

.Calendar_Event_Wrap > span{
    width: 0.4rem;
    height: 0.4rem;
    margin: 0.4rem 0.1rem 0.4rem auto;
    border-radius: 100%;
}

.Calendar_Event_Wrap > .Tournament{
    background-color: var(--Tournament_color);
}


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

2項目の表

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

.Bsc_Tbl_Wrap{
    color: var(--font_color_1);
}

.Bsc_Tbl_Wrap > h3{
    font-size: var(--normal_font);
    color: var(--accent_color_1);
    margin-bottom: var(--column_space_6);
    padding: 0 var(--row_space_1);
    font-weight: bold;
}

.Bsc_Tbl_Wrap > .Bsc_Tbl_Document_Box{
    border-top: solid 1px var(--color_3);
    padding: var(--column_space_5) var(--row_space_1);
}

.Bsc_Tbl_Wrap dl{
    border-top: solid 1px var(--color_6);
    padding: var(--column_space_5) var(--row_space_1);
    margin-bottom: 0;
}

.Bsc_Tbl_Wrap.NoTop_Border dl:first-of-type{
    border-top: none;
}

.Bsc_Tbl_Wrap dt{
    font-size: var(--small_font);
    color: var(--font_color_2);
    margin-bottom: 0.4rem;
    font-weight: bold;
    line-height: 1;
}

.Bsc_Tbl_Wrap dd{
    font-size: var(--normal_font);
    margin-bottom: 0;
    display: block;
}


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

折り畳み

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

.collapse_Ttl_Wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* height: 3.2rem; */
}

.collapse_Ttl_Wrap h3{
    color: var(--font_color_2);
    padding: var(--column_space_5) var(--column_space_5);
    display: block;
    font-weight: bold;
    position: relative;
}

.collapse_Ttl_Wrap h3::before{
    content: "";
    background-color: var(--accent_color_1);
    width: 0.4rem;
    height: calc(100% - 1.6rem);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.collapse_Ttl_Wrap .collapse_arrow{
    width: 0.75rem;
    height: 0.75rem;
    border-top: solid 1px var(--color_4);
    border-right: solid 1px var(--color_4);
    transform: rotate(-45deg);
    transition: 0.5s all;
}

.collapse_Ttl_Wrap .collapse_arrow.collapsed{
    transform: rotate(135deg);
}


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

会員証モーダル

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

#User_QR.modal-content{
    border: none;
    background-color: transparent;
    width: 300px;
    margin: auto;
}

#User_QR .modal-body{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#User_QR > .modal-body > #QR_Close{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 3.8rem;
    height: 3.8rem;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

#User_QR > .modal-body > #QR_Close > span{
    width: 3rem;
    height: 3rem;
    background-color: var(--font_color_2);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../img/icon/white_cross.svg');
    -webkit-mask-image: url('../img/icon/white_cross.svg');
}

#QR_Img_Wrap{
    margin: 3.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-backdrop.show{
    opacity: 0.7;
}


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

ランキング

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

ランキングタイトル

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

#Rank_Ttl_Wrap{
    padding-bottom: var(--column_space_6);
    border-bottom: solid 1px var(--color_7);
    margin-bottom: var(--column_space_3);
}

#Rank_Ttl_Wrap > h3{
    font-weight: normal;
    font-size: var(--large_font);
    color: var(--font_color_1);
    display: -webkit-box;
    -webkit-line-clamp: 2;/*表示行数*/
    -webkit-box-orient: vertical;
    overflow: hidden; 
}

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

ランキングカード

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

.One_RankCard_Wrap{
    width: 100%;
    background-color: var(--color_1);
    box-shadow: var(--shadow_1);
    display: flex;
    align-items: center;
    padding: var(--column_space_6) var(--row_space_1);
    margin-bottom: var(--column_space_6);
    border-radius: 1rem;
}

/* プレイヤーアイコン */

.Rank_UserImg_Wrap{
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    margin: auto var(--column_space_5);
    flex-shrink: 0;
}

.Rank_UserImg_Wrap img{
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

/* 順位 */

.Rank_Num_Wrap{
    font-weight: bold;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 100%;
    box-sizing: content-box;
    flex-shrink: 0;
}

/* 1位 */

#Rank_1 > .Rank_Num_Wrap{
    background-color: #FAB600;
    border: solid 0.2rem #FCF33D;
    color: var(--color_1);
}

/* 2位 */
#Rank_2 > .Rank_Num_Wrap{
    background-color: #A8B0B9;
    border: solid 0.2rem #D9DDE0;
    color: var(--color_1);
}

/* 3位 */
#Rank_3 > .Rank_Num_Wrap{
    background-color: #D97B5D;
    border: solid 0.2rem #F0A077;
    color: var(--color_1);
}


/* ユーザー情報 */
.Rank_Info_Wrap{
    display: flex;
    width: calc(100% - 3rem);
}

.Rank_InfoTxt_Wrap{
    display: flex;
    justify-content: space-between;
    /* width: calc(100% - (3.2rem + var(--column_space_5))); */
    width: calc(100% - (5.8rem));
}

.Rank_UserName_Wrap{
    display: flex;
    align-items: center;
    width: auto;
    max-width: calc(100% - 59px);
    /* min-width: calc(100% - 70px); */
}

.Rank_UserName_Wrap > p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--small_font);
}

.Rank_UserPoint_Wrap{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}



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

タブ切り替え

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

#Tab_Wrap{
    box-shadow: var(--shadow_1);
}

.Tab_Category_Btn_Wrap{
    border-bottom: none;
    background-color: var(--color_8);
    border-radius: 0.6rem;
    margin-bottom: var(--column_space_4);
    justify-content: space-between;
    padding: 0.4rem;
}

.Tab_Category_Btn{
    width: calc(50% - 0.5rem);
}

.Tab_Category_Btn > .nav-link{
    padding: var(--column_space_7);
    background-color: var(--color_8);
    color: var(--font_color_2)!important;
    font-weight: bold!important;
    font-size: var(--normal_font)!important;
    border-radius: 0.6rem;
    border: none;
    width: 100%;
}

.Tab_Category_Btn > .nav-link.active{
    color: var(--font_color_2)!important;
    border: none;
    background-color: var(--color_1);
}


#myTabContent{
    padding: var(--column_space_4) var(--bs-gutter-x);
    background-color: var(--color_9);
    /* width: 100vw; */
    min-height: calc(100vh - 26.8rem);
}
/* ---------------------------------------------------------

マイページ

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

/* 編集ボタン */
#UserProfile.White_Box_Wrap{
    position: relative;
    padding-top: 4.8rem;
}

#UserEdit_Link{
    position: absolute;
    top: var(--bs-gutter-x);
    right: var(--bs-gutter-x);
    width: 6rem;
}

/* ユーザーアイコン */
#User_Icon_Name_Wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--column_space_4);
}

#User_Icon_Wrap{
    width: 13.6rem;
    height: 13.6rem;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

#User_Icon_Wrap img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    width: 100%;
    height: 100%;
}

/* ユーザー名 */
#User_Icon_Name_Wrap h3{
    font-size: var(--large_font);
    color: var(--font_color_2);
    margin-top: var(--column_space_6);
}

/* プロフィール画像 */
#User_Icon_Edit{
    display: flex;
    align-items: center;
    margin-top: 0.4rem 
}

#User_Edit_IconImg_Wrap > #User_Icon_Wrap{
    max-width: 12rem;
    height: 0;
    padding-bottom: 100%;
}

#User_Edit_IconBtn_Wrap{
    max-width: calc(100% - 12rem);
    width: 100%;
    margin-left: calc(var(--row_space_2) * 2);
}

#User_Edit_IconBtn_Wrap > button,
#User_Edit_IconBtn_Wrap > label{
    max-width: 14rem;
    padding: 0.6rem 1.2rem;
}

#User_Edit_IconBtn_Wrap > label > input[type="file"]{
    display: none;
}
/* ----------------------

各ページリンク

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

.White_Box_Link_Inner li > a{
    display: flex;
    position: relative;
    color: var(--font_color_1);
    padding: var(--column_space_5) var(--row_space_1);
    border-top: solid 1px var(--color_6);
}

.White_Box_Link_Inner li:first-of-type > a{
    border-top: none;
}

.White_Box_Link_Inner li > a::after{
    content: "";
    border-top: solid 1px var(--color_4);
    border-right: solid 1px var(--color_4);
    width: 0.75rem;
    height: 0.75rem;
    position: absolute;
    top: 50%;
    right: var(--row_space_1);
    transform: translateY(-50%) rotate(45deg);
}


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

チケット一覧

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

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

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

チケット一枚分

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

.One_Ticket_Wrap{
    width: calc(50% - var(--column_space_5));
    margin-bottom: var(--column_space_4);
}

.One_Ticket_Wrap > a{
    background-color: var(--color_1);
    box-shadow: var(--shadow_1);
    border-radius: 1.2rem;
    padding: var(--column_space_5);
    display: block;
    color: var(--color_5);
    
}

.Ticket_Img_Wrap{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 1.2rem;
    overflow: hidden;
    position: relative;
}

.Ticket_Img_Wrap > img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.Ticket_Txt_Wrap{
    margin-top: var(--column_space_6);
}

.Ticket_Txt_Wrap > h3{
    font-size: var(--normal_font);
    margin-bottom: var(--column_space_6);
    color: var(--font_color_1);
}


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

チケット詳細

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

.TicketDtl_Wrap > .Ticket_Img_Wrap{
    margin-bottom: var(--column_space_4);
}

.TicketDtl_Wrap .Ticket_Ttl_Wrap{
    font-size: var(--large_font);
}

.TicketDtl_Wrap > .Ticket_Txt_Wrap > div,
.TicketDtl_Wrap > .Ticket_Txt_Wrap > h3{
    margin-bottom: var(--column_space_4);
}


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

チケット利用モーダル

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

#Use_Ticket_Modal,
#Achievement_Modal{
    background-color: var(--color_1);
    border-radius: 2rem;
    width: calc(100% - 3rem);
    margin: auto;
    max-width: 360px;
}

#Use_Ticket_Modal > .modal-body{
    padding: var(--column_space_4) var(--row_space_1);
}

#Ticket_Detail .modal-backdrop.fade.show{
    opacity: 0.75;
}

#Use_Ticket_Modal .Aleart_Txt{
    display: block;
    margin-bottom: var(--column_space_4);
}
#Use_Ticket_Modal .Btn_Wrap > button{
    width: calc(50% - 0.7rem)
}


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

チップ閲覧

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

#Tip_TotalVol_Wrap > .ShopName{
    color: var(--color_4);
    text-align: center;
    margin-bottom: var(--column_space_5);
}


#Tip_TotalVol_Txt{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--largest_font);
}

#Tip_TotalVol_Txt > span{
    margin-right: var(--row_space_2);
    font-size: var(--largest_font);
}

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

チップ履歴表

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

#Tip_Table_Inner{
    width: 100%;
}

#Tip_Table_Inner tr{
    border-bottom: solid 1px var(--color_4);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#Tip_Table_Inner tr::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: calc(100% - 2rem);
    width: 0.2rem;
}

/* 預け入れ */
#Tip_Table_Inner .plus::after{
    background-color: #8E9EF4;
}

/* 引き出し */
#Tip_Table_Inner .minus::after{
    background-color: #EF7F88;
}

/* 購入 */
#Tip_Table_Inner .buy::after{
    background-color: #E2BC88;
}

#Tip_Table_Inner td{
    padding: var(--column_space_6) var(--row_space_1);
}

#Tip_Table_Inner .Type > span{
    font-size: var(--small_font);
}

#Tip_Table_Inner .Tip_Vol{
    font-size: 2.2rem;
    display: flex;
    align-items: center;
}

#Tip_Table_Inner .Tip_Vol > span{
    margin-left: var(--row_space_2);
    font-size: 2.2rem;
}

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

プライバシーポリシー、利用規約

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

.Term_Document_Wrap > div{
    margin-bottom: var(--column_space_3);
}

.Term_Document_Wrap h3{
    margin-bottom: var(--column_space_5);
    font-weight: bold;
    color: var(--font_color_2);
}

.Term_Document_Wrap ol > li{
    list-style: inherit;
    margin-bottom: var(--column_space_6);
}

.Term_Document_Wrap ol > li > ol{
    margin-top: var(--column_space_6);
}

.Term_Document_Wrap div > p{
    margin-bottom: var(--column_space_6);
}


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

実績一覧

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

#Achievement_Wrap .White_Box_Wrap{
    margin-bottom: var(--column_space_3);
}

.One_Achievement_Category_Wrap > h3,
.Achievement_Txt_Wrap h5{
    padding: var(--column_space_5) var(--row_space_1);
    position: relative;
    border-bottom: solid 1px var(--accent_color_1);
    margin-bottom: var(--column_space_5);
}

.One_Achievement_Category_Wrap > h3::after,
.Achievement_Txt_Wrap h5::after{
    content: "";
    width: 0.4rem;
    height: calc(100% - 1.6rem);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--accent_color_1);
}

.One_Achievement_Badge_Wrap{
    width: calc(100% / 3);
    padding: 1.2rem;
}

.One_Achievement_Badge_Inner{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-color: var(--color_6);
    border-radius: 100%;
    position: relative;
}

.One_Achievement_Badge_Inner img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: calc(100% - 2.4rem);
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.One_Achievement_Badge_Inner.Yet img {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    opacity: 0.5;
}

.One_Achievement_Badge_Inner.Yet::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: calc(100% - 3.2rem);
    height: calc(100% - 3.2rem);
    background-color: rgb(var(--color_3_rgb), 0.90);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../img/icon/lock.svg');
    -webkit-mask-image: url('../img/icon/lock.svg');
}

#Achievement_Modal > .modal-body{
    position: relative;
}

#Achievement_Modal > .modal-body > #QR_Close{
    position: absolute;
    top: calc(100% + 1.6rem);
    left: 50%;
    transform: translateX(-50%);
    width: 3.8rem;
    height: 3.8rem;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Achievement_Modal > .modal-body > #QR_Close > span{
    width: 3rem;
    height: 3rem;
    background-color: var(--font_color_2);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../img/icon/white_cross.svg');
    -webkit-mask-image: url('../img/icon/white_cross.svg');
}

#Achievement_Modal h5{
    font-size: var(--large_font);
}

.Achievement_Modal_Img_Wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 120px;
    margin: var(--column_space_5) auto;
}

.Achievement_Modal_Img_Wrap > .One_Achievement_Badge_Inner > img{
    width: calc(100% - 4rem);
}

.Achievement_Modal_Img_Wrap > .One_Achievement_Badge_Inner.Yet::before{
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
}

.Achievement_Txt_Wrap{
    margin-bottom: var(--column_space_5);
}


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

加盟店一覧

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

#SEARCH.FormLabelIcon{
    mask-image: url(../img/icon/search.svg);
    -webkit-mask-image: url(../img/icon/search.svg);
    -webkit-mask-size: contain;
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0;
}

.One_Form_Wrap.Search .Btn_Base.Btn_Fill{
    width: 80px;
    border: none;
    margin-left: 1.2rem;
}

.One_Form_Wrap.Search .Form_Input_Wrap{
    width: calc(100% - 1.6rem);
}

.One_Form_Wrap.Search{
    margin-bottom: var(--column_space_4)
}


/* 店舗1件分 */


.One_Shop_Wrap{
    border-top: solid 1px var(--color_6);
    padding: var(--column_space_5) var(--row_space_2);
}

.One_Shop_Inner{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}


.One_Shop_Inner:hover{
    color: var(--font_color_2);
}

.One_Shop_Inner .Link_Arrow{
    position: absolute;
    top: 50%;
    right: 0;
    border-top: solid 1px var(--color_4);
    border-right: solid 1px var(--color_4);
    width: 0.75rem;
    height: 0.75rem;
    transform: translateY(-50%) rotate(45deg);
}

.One_Shop_Inner h3{
    margin-bottom: 0.4rem;
}

.One_Shop_Inner p{
    margin-bottom: 0.4rem;
    font-size: var(--smallest_font);
}

.One_Shop_Inner dl{
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;
}

.One_Shop_Inner dt,
.One_Shop_Inner dd,
.One_Shop_Inner a{
    font-size: var(--smallest_font);
    margin-bottom: 0;
}

.One_Shop_Inner dd{
    margin-left: 1rem;
}


/* TOPページの戦績 */

#User_Score_Table_Wrap{
    padding: var(--column_space_4) var(--column_space_4);
    border-radius: 1.2rem;
    background-color: var(--color_1);
}


#User_Score_Table_Wrap td{
    border-right: solid 1px var(--color_4);
    border-bottom: solid 1px var(--color_4);
    padding: 0.4rem 0.8rem;
}

#User_Score_Table_Wrap tr:nth-of-type(2) > td{
    border-bottom: none;
}

#User_Score_Table_Wrap tr > td:last-of-type{
    border-right: none;
}


.Float_Btn_Wrap {
    width: 70%;
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}