@charset "UTF-8";
/* -- Setting -- */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
    --default-color01: #1CC78C;
    --accent-color01-filter: invert(57%) sepia(100%) saturate(317%) hue-rotate(108deg) brightness(90%) contrast(103%);
    --alert-filter: invert(16%) sepia(94%) saturate(6240%) hue-rotate(7deg) brightness(87%) contrast(125%);
    --bg-gray: #F7F7F7;
    --alert-color01: #EC0000;
    --alert-bg-color: #FCF5F0;
    --alert-color-filter: invert(16%) sepia(94%) saturate(6240%) hue-rotate(7deg) brightness(87%) contrast(125%);
    --f-accent-blue: #21B8D5;
    --point-bg: #FCF5F0;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 62.5% !important;
}

body {
    font-family: 'Lato', 'Noto Sans JP', sans-serif;
    font-size: 1.4rem !important;
    line-height: 1.6 !important;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    background-color: #fff;
    color: #1A1A1A;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
}
textarea {
    resize: none;
}
textarea.resize-vertical {
    resize: vertical;
}
/*お友達紹介URL button*/
button.clipUrl p{
    white-space: nowrap;
}
.nowrap {
    white-space: nowrap;
}
.d-none {display: none;}
.mod-line-clamp2 { -webkit-line-clamp: 2 !important;}
.mod-line-clamp3 { -webkit-line-clamp: 3 !important;}
.mod-line-clamp4 { -webkit-line-clamp: 4 !important;}
.mod-line-clamp5 { -webkit-line-clamp: 5 !important;}

/*font-weight*/
.f-weight-100 { font-weight: 100 !important;}
.f-weight-200 { font-weight: 200 !important;}
.f-weight-300 { font-weight: 300 !important;}
.f-weight-400 { font-weight: 400 !important;}
.f-weight-500 { font-weight: 500 !important;}
.f-weight-600 { font-weight: 600 !important;}
.f-weight-900 { font-weight: 900 !important;}
/*font-size*/
.mod-f10 { font-size: 1rem !important;}
.mod-f11 { font-size: 1.1rem !important;}
.mod-f12 { font-size: 1.2rem !important;}
.mod-f13 { font-size: 1.3rem !important;}
.mod-f14 { font-size: 1.4rem !important;}
.mod-f15 { font-size: 1.5rem !important;}
.mod-f16 { font-size: 1.6rem !important;}
.mod-f17 { font-size: 1.7rem !important;}
.mod-f18 { font-size: 1.8rem !important;}
.mod-f19 { font-size: 1.9rem !important;}
.mod-f20 { font-size: 2rem !important;}
.mod-f21 { font-size: 2.1rem !important;}
.mod-f22 { font-size: 2.2rem !important;}
.mod-f23 { font-size: 2.3rem !important;}
.mod-f24 { font-size: 2.4rem !important;}
.mod-f25 { font-size: 2.5rem !important;}
.mod-f26 { font-size: 2.6rem !important;}
.mod-f27 { font-size: 2.7rem !important;}
.mod-f28 { font-size: 2.8rem !important;}
.mod-f30 { font-size: 3.0rem !important;}
.mod-f32 { font-size: 3.2rem !important;}
/* line-height */
.mod-lh10 { line-height: 1.0 !important;}

/* margin */
.mod-m0 {margin: 0;}
.mod-m-center {margin: 0 auto; }
/*margin-top*/
.mod-mt-none{ margin-top: initial !important;} 
.mod-mt0 { margin-top: 0px !important;}
.mod-mt5 { margin-top: 5px !important;}
.mod-mt8 { margin-top: 8px !important;}
.mod-mt10 { margin-top: 10px !important;}
.mod-mt15 { margin-top: 15px !important;}
.mod-mt20 { margin-top: 20px !important;}
.mod-mt25 { margin-top: 25px !important;}
.mod-mt30 { margin-top: 30px !important;}
.mod-mt35 { margin-top: 35px !important;}
.mod-mt40 { margin-top: 40px !important;}
.mod-mt45 { margin-top: 45px !important;}
.mod-mt50 { margin-top: 50px !important;}
.mod-mt6 { margin-top: 6px;}
/*margin-left*/
.mod-ml0 { margin-left: 0px !important;}
.mod-ml5 { margin-left: 5px !important;}
.mod-ml10 { margin-left: 10px !important;}
.mod-ml15 { margin-left: 15px !important;}
.mod-ml20 { margin-left: 20px !important;}
.mod-ml25 { margin-left: 25px !important;}
.mod-ml30 { margin-left: 30px !important;}
.mod-ml35 { margin-left: 35px !important;}
.mod-ml40 { margin-left: 40px !important;}
/*margin-bottom*/
.mod-mr0 { margin-right: 0px !important;}
.mod-mr5 { margin-right: 5px !important;}
.mod-mr10 { margin-right: 10px !important;}
.mod-mr15 { margin-right: 15px !important;}
.mod-mr20 { margin-right: 20px !important;}
.mod-mr25 { margin-right: 25px !important;}
.mod-mr30 { margin-right: 30px !important;}
.mod-mr35 { margin-right: 35px !important;}
.mod-mr40 { margin-right: 40px !important;}
/*margin-bottom*/
.mod-mb0 { margin-bottom: 0px !important;}
.mod-mb5 { margin-bottom: 5px !important;}
.mod-mb10 { margin-bottom: 10px !important;}
.mod-mb15 { margin-bottom: 15px !important;}
.mod-mb20 { margin-bottom: 20px !important;}
.mod-mb25 { margin-bottom: 25px !important;}
.mod-mb30 { margin-bottom: 30px !important;}
.mod-mb35 { margin-bottom: 35px !important;}
.mod-mb40 { margin-bottom: 40px !important;}
/*padding*/
.mod-pd0 { padding: 0 !important;}
/*padding-top*/
.mod-pt0{ padding-top: 0 !important;}
.mod-pt5 { padding-top: 5px !important;}
.mod-pt10 { padding-top: 10px !important;}
.mod-pt15 { padding-top: 15px !important;}
.mod-pt20 { padding-top: 20px !important;}
.mod-pt25 { padding-top: 25px !important;}
.mod-pt30 { padding-top: 30px !important;}
.mod-pt35 { padding-top: 35px !important;}
.mod-pt40 { padding-top: 40px !important;}
/*padding-right*/
.mod-pr5 { padding-right: 5px !important;}
.mod-pr10 { padding-right: 10px !important;}
.mod-pr15 { padding-right: 15px !important;}
.mod-pr20 { padding-right: 20px !important;}
.mod-pr25 { padding-right: 25px !important;}
.mod-pr30 { padding-right: 30px !important;}
.mod-pr35 { padding-right: 35px !important;}
.mod-pr40 { padding-right: 40px !important;}
/*padding-bottom*/
.mod-pb5 { padding-bottom: 5px !important;}
.mod-pb10 { padding-bottom: 10px !important;}
.mod-pb15 { padding-bottom: 15px !important;}
.mod-pb20 { padding-bottom: 20px !important;}
.mod-pb25 { padding-bottom: 25px !important;}
.mod-pb30 { padding-bottom: 30px !important;}
.mod-pb35 { padding-bottom: 35px !important;}
.mod-pb40 { padding-bottom: 40px !important;}
.mod-pb0 { padding-bottom: 0 !important;}

.mod-opacity-half { opacity: 0.4;}

/*表示させない*/
.d-none {
    display: none !important;
}
/*reCAPTCHA*/
.grecaptcha-badge { visibility: hidden; }
/*文字改行*/
.font-break{
    word-break: break-all;
}
/*SPのみ改行*/
.sp_br{
    display: none;
}
.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.line-clamp-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/*ログアウト filter*/
.i_filter{ fill: #000000;}
/*フォント色*/
.f-green { color: #BADE53;}
.f-mint-green { color: #1CC78C;}
.f-red { color: #FF5A5C !important;}
.f-d-red { color: #FF5A5C; }
.f-accent { color: #00326D;}
.f-blue { color: #0075c2 !important;}
.f-gray { color: #cccccc;}
.f-d-gray{ color: #808080;}
.f-b-gray{ color: #575C74;}
.f-default { color: var(--default-color01);}
.f-alert {color: var(--alert-color01);}
.f-accent {color: var(--accent-color01);}
.f-accent-blue { color: var(--f-accent-blue); }
.point.high { color: #D84A28;}
.point { color: #333333;}
.valid-error,
.alert-text,
.error_text{
    color: #EC0000;
}
.need-text{
    background: #FF5A67;
    color: #ffffff;
    margin: 0 5px 0 5px;
    padding: 2px 5px;
    font-weight: 400;
    font-size: 1.2rem;
}
.form_need-text{
    color: #ff0000;
    font-weight: 400;
    font-size: 1.2rem;
}
.sns_error{
    width: 100%;
    color: #ff0000;
    border: 1px solid #ff0000;
    background: #FFF5F5;
    border-radius: 5px;
    font-size: 1.2rem;
    text-align: left;
    padding: 5px 10px;
    margin: 15px auto;
}
/*角丸*/
.border-radious-10 {
    border-radius: 1.0rem;
}
/*背景色*/
.point_bg{
    background: url('../../img/point_bg.png') no-repeat center top;
    background-size: 100%;
}
.point_thanks_bg{
    background: url('../../img/point_bg.png') no-repeat center top;
    background-size: 100%;
}
.step_bg{
    background: #ECF4F2;
}
.step_thanks_bg{
    background: url('../../img/point_bg.png') no-repeat center top;
    background-size: 100%;
}
.bg_gray {
    background: var(--bg-gray);
}
/*斜め線*/
.slash::before {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

.slash::after {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}
/*border*/
.under_line {
    border-bottom: 1px solid #e0e0e0;
}
.under_line.black {
    border-color: #000000;
}
.top_line {
    border-top: 1px solid #e0e0e0;
}
/*link*/
a {
    color: #333333;
    cursor: pointer;
}

a:hover {
    color: var(--default-color01);
}
:hover {
    transition: all 0.5s;
}
a:hover img {
    -webkit-filter: opacity(0.8);
    filter: opacity(0.8);
}
a:not([href]),
button.is-no-active {
    cursor: default;
}
a:not([href]):hover {
    color: inherit;
    transition: none;
}
a:not([href]):hover img {
    -webkit-filter: inherit;
    filter: none;
}
/*more text*/
.readmore {
    position: relative;
    margin: 0 auto;
    padding: 0 0 35px;
}

.readmore label {
    position: absolute;
    display: table;
    left: 50%;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    padding: 10px 0;
    color: var(--default-color01);
    text-align: center;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 1;
    font-size: 1.2rem;
}

.readmore label::before{
    content: '+もっと見る';
}

.readmore input[type="checkbox"]:checked ~ label::before {
    content: '元に戻す';
}

.readmore input[type="checkbox"]{
    display: none;
}

.readmore-content {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.readmore-content p {
    font-weight: 500;
}
.readmore input[type="checkbox"]:checked ~ .readmore-content {
    height: auto;
    transition: opacity 0.3s ease-in 0.4s;
    -webkit-line-clamp: initial;
}
/*Position*/

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}

.flex-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.flex-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-r-reverse {
    display: flex;
    flex-direction: row-reverse;
}
.flex-between {
    display: flex;
    justify-content: space-between;
}
.space_ev{
    justify-content: space-evenly !important;
}
/*selectの右寄せ*/
.s_t_right{
    direction: rtl;
}

.t_left {
    text-align: left !important;
}
.t_right {
    text-align: right;
}
.center {
    text-align: center;
}

.circle {
    border-radius: 50%;
    overflow: hidden;
    -o-object-fit: scale-down;
    object-fit: scale-down;
}
.u_line {
    text-decoration: underline;
}
.u-line-h:hover {
    text-decoration: underline;
}
.no_wrap {
    white-space: nowrap !important;
}
/*input*/
input[type="tel"],
input[type="number"],
input[type="text"],
input[type="email"] {
    font-size: 1.4rem;
    border: 1px solid #EFEFEF;
    padding: 10px;
    border-radius: 0.5rem;
}
input[type="tel"].input_error,
input[type="number"].input_error,
input[type="text"].input_error,
input[type="email"].input_error,
select.input_error,
textarea.input_error {
    border: 1px solid var(--alert-color01);
    background: #FFF5F5;
}
input[type="password"] {
    font-size: 1.4rem;
    border: 1px solid #EFEFEF;
    padding: 0 10px;
}
input[type="date"] {
    font-size: 1.4rem;
    border: 1px solid #EFEFEF;
    padding: 0 10px;
}
input[type="file"] {
    font-size: 1.4rem;
    border: 1px solid #EFEFEF;
    padding: 0 10px;
}
input[type="datetime-local"] {
    font-size: 1.4rem;
    border: 1px solid #EFEFEF;
    padding: 0 10px;
}
::-webkit-input-placeholder {
    color: #ccc;
    font-size: 1.4rem;
}

:-ms-input-placeholder {
    color: #ccc;
    font-size: 1.4rem;
}

::-ms-input-placeholder {
    color: #ccc;
    font-size: 1.4rem;
}

::placeholder {
    color: #ccc;
    font-size: 1.4rem;
}
textarea {
    font-size: 1.4rem;
}
textarea::placeholder {
    color: #cccccc;
    font-size: 1.4rem;
}
/*input*/
input[type="number"] {
    font-size: 1.4rem;
    border: 1px solid #EFEFEF;
    padding: 0 10px 0 40px;
}

input[type="number"]::-webkit-input-placeholder {
    color: #ccc;
    font-size: 1.4rem;
}

input[type="number"]:-ms-input-placeholder {
    color: #ccc;
    font-size: 1.4rem;
}

input[type="number"]::-ms-input-placeholder {
    color: #ccc;
    font-size: 1.4rem;
}

input[type="number"]::placeholder {
    color: #ccc;
    font-size: 1.4rem;
}


/*normal input*/
.main_search {
    border-radius: 50px;
    background: #f8f8f8;
}

.normal {
    width: 100%;
    height: 40px;
    padding: 10px !important;
    border-radius: 5px;
    background: #ffffff;
}
.normal_half {
    width: calc(100% / 2 - 4px);
    margin: 0 2px;
    height: 40px;
    padding: 10px !important;
    border-radius: 5px;
    background: #ffffff;
}

.normal_three {
    width: calc(100% / 3 - 4px);
    margin: 0 2px;
    height: 40px;
    padding: 10px !important;
    border-radius: 5px;
    background: #ffffff;
}
.normal_five {
    width: calc(100% / 5 - 4px);
    margin: 0 2px;
    height: 40px;
    padding: 10px !important;
    border-radius: 5px;
    background: #ffffff;
}
.normal_70 {
    width: 70% !important;
    height: 40px;
    padding: 10px !important;
    border-radius: 5px;
    background: #ffffff;
}
.normal_80 {
    width: 80% !important;
}
/*selectbox*/
.s-width-full {
    width: 100% !important;
}
.s-width-half {
    width: 50% !important;
}

.s-width-40 {
    width: 40% !important;
}

.s-width120 {
    width: 120px !important;
}
.s-width140 {
    width: 140px !important;
}
.s-width90 {
    width: 90px !important;
}

.s-width80 {
    width: 80px;
}

.s-width60 {
    width: 60px;
}
.width-590 {
    max-width: 590px !important;
}
.width-1000{
    max-width: 1000px !important;
}
select {
    position: relative;
    padding: 10px;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select_lunk {
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    padding: 0 5px;
    width: 160px;
    height: 40px;
    color: #333333;
    background: #ffffff;
}

.select_search {
    position: relative;
    margin-top: 4px;
    margin-right: 25px;
}

.select_search::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 18px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    pointer-events: none;
}

.select_search-pref {
    position: relative;
    margin-top: 4px;
    margin-right: 120px;
}

.select_search-pref::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 18px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    pointer-events: none;
}

.select_date {
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    padding: 0 5px;
    height: 40px;
    color: #333333;
    background: #ffffff;
}

.select_search-date {
    position: relative;
    margin-top: 4px;
}
.select_search-date select {
    padding-right: 26px;
}

.select_search-date::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 18px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    pointer-events: none;
}

/*編集*/
.select_date {
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    padding: 0 25px 0 5px;
    height: 40px;
    color: #333333;
    background: #ffffff;
}
.select_box {
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    padding: 0 5px;
    height: 40px;
    color: #333333;
    background: #ffffff;
}
.select_edit-date {
    position: relative;
    margin-top: 4px;
}

.select_edit-date::after {
    position: absolute;
    right: 10px;
    top: 10px;
    display: inline-block;
    content: "編集";
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
}
/*プログレンスバー*/
ul.progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

ul.progress li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid var(--default-color01);
    color: var(--default-color01);
    background: #ffffff;
    border-radius: 50%;
    font-size: 1.5rem;
    width: 24px;
    height: 24px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 10px;
    position: relative;
}

ul.progress li::after {
    content: "";
    width: 15px;
    display: inline-block;
    border-top: 2px dotted #cccccc;
    position: absolute;
    left: 25px;
}

ul.progress li:last-child::after {
    border: none;
}

ul.progress .now {
    color: #ffffff;
    background: var(--default-color01);
}

/** Custom Select **/
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-select-wrapper select {
    display: none;
}
.custom-select-edit{
    position: relative;
}
.custom-select-edit::after{
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 1.2rem;
    content: "編集";
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
    cursor: pointer;
    pointer-events: none;
}

.custom-select {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    line-height: 36px;
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    cursor: pointer;
}

.custom-select.opened {
    z-index: +1;
}

.custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.custom-select-trigger {
    position: relative;
    display: block;
    padding: 0 10px;
    line-height: 36px;
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    cursor: pointer;
}

.custom-select-trigger:after {
    position: absolute;
    right: 10px;
    display: inline-block;
    content: "編集";
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
}

.custom-options {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.07);
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
}

.option-hover:before {
    background: #f9f9f9;
}

.custom-option {
    position: relative;
    display: block;
    padding: 0 22px;
    border-bottom: 1px solid #EFEFEF;
    line-height: 47px;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.custom-option:first-of-type {
    border-radius: 4px 4px 0 0;
}

.custom-option:last-of-type {
    border-bottom: 0;
    border-radius: 0 0 4px 4px;
}

.custom-option.selection::before {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12px;
    height: 6px;
    margin-top: -4px;
    top: 50%;
    left: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-color: var(--default-color01);
}

/*textarea*/
textarea {
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    padding: 10px;
}
textarea.textarea4list {
    width: 100%;
    background-color: transparent;
    border: none;
    resize: auto;
}
textarea::placeholder {
    font-size: 1.4rem;
}
.text-full {
    width: 100%;
}

.h-88 {
    height: 88px;
}

/*Radio*/
.r-green {
    padding: 12px 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.r-green-Input {
    opacity: 0;
    width: 0;
    margin: 0;
}

.r-green-Input:focus+.r-green-DummyInput {
    border: solid 1px var(--default-color01);
    background: #ffffff;
}

.r-green-Input:checked+.r-green-DummyInput {
    border: solid 1px var(--default-color01);
}

.r-green-Input:checked+.r-green-DummyInput::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--default-color01);
}

.r-green-DummyInput {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: solid 1px var(--default-color01);
}

.r-green-LabelText {
    margin-left: 12px;
    display: block;
}

/*SNS連携アイコン*/
.twitter_join{
    position: relative;
}
.twitter_join::before{
    position: absolute;
    left: -4px;
    top: 1px;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/icon/twitter.png') no-repeat;
    background-size: cover;
    vertical-align: middle;
}
.i_twitter::before{
    position: relative;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/icon/twitter.png') no-repeat;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
}
.ex-twitter_join::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/ex-twitter.svg') no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.ex-twitter_line::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 14px;
    height: 14px;
    background: url('../../img/sns_ico/ex-twitter-line.svg') no-repeat;
    background-size: contain;
    vertical-align: bottom;
}
.ex-twitter::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/ex-twitter.svg') no-repeat;
    background-size: cover;
    vertical-align: middle;
    margin-right: 7px;
    border-radius: 3px;
}
.ig_join::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/instagram.png') no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.i_ig::before{
    position: relative;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/instagram.png') no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.i_gift::before{
    position: relative;
    display: inline-block;
    content: "";
    width: 22px;
    height: 25px;
    background: url('../../img/icon/i_gift.svg') no-repeat;
    background-size: cover;
    vertical-align: bottom;
    margin-right: 15px;
}
.i_achieve::before {
    display: inline-block;
    content: "";
    width: 11px;
    height: 11px;
    margin-right: 5px;
}
.i_achieved::before {
    display: inline-block;
    content: "";
    width: 11px;
    height: 11px;
    background: url('../../img/icon/i_check.svg') no-repeat;
    background-size: cover;
    vertical-align: baseline;
    margin-right: 5px;
}
.i_facebook::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/facebook.svg') no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.i_youtube::before {
    position: relative;
    content: "";
    display: inline-block;
    content: "";
    width: 20px;
    height: 14px;
    background: url('../../img/sns_ico/youtube.png') no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.i_line {
    position: relative;
}
.i_line::before {
    position: relative;
    content: "";
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/line.svg') no-repeat;
    border-radius: 0.2rem;
    background-size: contain;
    vertical-align: middle;
}
.i_ex-twitter {
    position: relative;
}
.i_ex-twitter::before {
    position: absolute;
    left: -3px;
    top: 1px;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/ex-twitter.svg') no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.i_instagram {
    position: relative;
}
.i_instagram::before {
    position: absolute;
    left: -3px;
    top: 1px;
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    background: url('../../img/sns_ico/instagram.png') no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.i_tiktok::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("../../img/sns_ico/ticktok.png") no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.i_blog {
    content: "";
    color: #ffffff;
    font-size: 1.2rem;
    background: var(--accent-color01);
    width: 18px;
    height: 18px;
    border-radius: 5.0rem;
    vertical-align: middle;
    line-height: 1.5;
    text-align: center;
}
/*新しいアイコン*/
.i-new-attention {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../../img/icon/new_icon/i-attention.svg") no-repeat;
    background-size: contain;
}
.i-new-time {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../../img/icon/new_icon/i-time.svg") no-repeat;
    background-size: contain;
}
/*編集アイコン*/
.i_edit::before{
    position: relative;
    display: inline-block;
    left: -5px;
    top: -2px;
    content: "";
    width: 12px;
    height: 12px;
    background: url('../../img/icon/i_write.svg') no-repeat;
    background-size: contain;
    vertical-align: middle;
}

/*レベル ハートランク*/
ul.heart{
    display: flex;
    padding-left: 5px;
}
ul.heart li.level::before{
    content: "";
    display: inline-block;
    background: url('../../img/level/heart_gray.svg') no-repeat;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    padding-right: 5px;
    background-size: contain;
}
ul.heart li.active::before{
    background: url('../../img/level/heart_pink.svg') no-repeat;
    width: 22px;
    height: 22px;
    background-size: contain;
}

/*radio*/
.checkbox_ig01 input[type="radio"],
.checkbox_ig02 input[type="radio"],
.checkbox_ig03 input[type="radio"] {
    display: none;
} 
/*checkbox*/
input[type="checkbox"] {
    display: none;
}

/* チェックボックスの代わりを成すラベル */
.checkbox01 input[type="checkbox"]+label,
.checkbox02 input[type="checkbox"]+label,
.checkbox03 input[type="checkbox"]+label,
.checkbox04 input[type="checkbox"]+label,
.modal_checkbox01 input[type="checkbox"]+label,
.checkbox_ig01 input[type="radio"]+label,
.checkbox_ig02 input[type="radio"]+label,
.checkbox_ig03 input[type="radio"]+label {
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 25px;
    padding-right: 10px;
}

/* ラベルの左に表示させる正方形のボックス□ */
.checkbox01 input[type="checkbox"]+label::before {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    left: 0;
    top: 12px;
    border: 1px solid;
    border-color: #ccc;
    /* 枠の色変更 お好きな色を */
    background-color: #ffffff;
    /* 背景の色変更 お好きな色を */
}

.checkbox02 input[type="checkbox"]+label::before {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-top: -19px;
    left: 0;
    top: 23px;
    border: 1px solid;
    border-color: #ccc;
    /* 枠の色変更 お好きな色を */
    background-color: #ffffff;
    /* 背景の色変更 お好きな色を */
}

.checkbox03 input[type="checkbox"]+label::before {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-top: -42px;
    left: 0;
    top: 12px;
    border: 1px solid;
    border-color: #ccc;
    /* 枠の色変更 お好きな色を */
    background-color: #ffffff;
    /* 背景の色変更 お好きな色を */
}
.checkbox04 input[type="checkbox"]+label::before {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-top: -35px;
    left: 0;
    top: 37px;
    border: 1px solid;
    border-color: #ccc;
    /* 枠の色変更 お好きな色を */
    background-color: #ffffff;
    /* 背景の色変更 お好きな色を */
}
/* ラベルの左に表示させる●のボックス□ */
.modal_checkbox01 input[type="checkbox"]+label::before {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    left: 0;
    top: 12px;
    border: 1px solid;
    border-radius: 50%;
    border-color: #ccc;
    /* 枠の色変更 お好きな色を */
    background-color: #ffffff;
    /* 背景の色変更 お好きな色を */
}

/* ラベルの左に表示させる正方形のチェックされたボックス□ */
.checkbox01 input[type="checkbox"]:checked+label::before,
.checkbox02 input[type="checkbox"]:checked+label::before,
.checkbox03 input[type="checkbox"]:checked+label::before,
.checkbox04 input[type="checkbox"]:checked+label::before,
.modal_checkbox01 input[type="checkbox"]:checked+label::before {
    background-color: var(--default-color01); /* 背景の色変更 お好きな色を */
}
.checkbox01.disabled input[type="checkbox"]:checked+label::before,
.checkbox02.disabled input[type="checkbox"]:checked+label::before,
.checkbox03.disabled input[type="checkbox"]:checked+label::before,
.checkbox04.disabled input[type="checkbox"]:checked+label::before {
    background-color: #c4c4c4;
    /* 背景の色変更 お好きな色を */
}

/* チェックが入った時のレ点 */
.checkbox01 input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12px;
    height: 6px;
    margin-top: -4px;
    top: 12px;
    left: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-color: #ffffff;
    /* チェックの色変更 お好きな色を */
}

.checkbox02 input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12px;
    height: 6px;
    margin-top: -15px;
    top: 23px;
    left: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-color: #ffffff;
    /* チェックの色変更 お好きな色を */
}

.checkbox03 input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12px;
    height: 6px;
    margin-top: -38px;
    top: 12px;
    left: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-color: #ffffff;
    /* チェックの色変更 お好きな色を */
}
.checkbox04 input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12px;
    height: 6px;
    margin-top: -31px;
    top: 37px;
    left: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-color: #ffffff;
    /* チェックの色変更 お好きな色を */
}
.modal_checkbox01 input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12px;
    height: 6px;
    margin-top: -4px;
    top: 12px;
    left: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-color: #ffffff;
    /* チェックの色変更 お好きな色を */
}
.checkbox01 input[type=checkbox]:checked+.checkbox01::after,
.checkbox02 input[type=checkbox]:checked+.checkbox02::after,
.checkbox03 input[type=checkbox]:checked+.checkbox03::after,
.checkbox04 input[type=checkbox]:checked+.checkbox04::after,    
.modal_checkbox01 input[type=checkbox]:checked+.modal_checkbox01::after {
    opacity: 1;
}

.main_search {
    width: 230px;
    height: 40px;
    border-radius: 0.8rem;
    background: #f8f8f8;
    position: relative;
}
/*同意事項まとめた場合*/
.disc-mark {
    cursor: default;
}
.disc-mark.checkbox01 input[type="checkbox"]+label,
.disc-mark.checkbox02 input[type="checkbox"]+label,
.disc-mark.checkbox03 input[type="checkbox"]+label,
.disc-mark.checkbox04 input[type="checkbox"]+label {
    cursor: default;
}
.disc-mark.checkbox01 input[type="checkbox"]+label::before,
.disc-mark.checkbox02 input[type="checkbox"]+label::before,
.disc-mark.checkbox03 input[type="checkbox"]+label::before,
.disc-mark.checkbox04 input[type="checkbox"]+label::before {
    border: none;
    width: 5px;
    height: 5px;
    background: #000000;
    border-radius: 50%;
    cursor: default;
    position: absolute;
    left: 11px;
    top: 10px;
    margin-top: 0;
    display: inline-block;
}
.disc-mark.checkbox01 input[type="checkbox"]:checked+label::before,
.disc-mark.checkbox02 input[type="checkbox"]:checked+label::before,
.disc-mark.checkbox03 input[type="checkbox"]:checked+label::before,
.disc-mark.checkbox04 input[type="checkbox"]:checked+label::before {
    display: none;
    position: relative;
}

.disc-mark.checkbox01 input[type="checkbox"]:checked+label::after,
.disc-mark.checkbox02 input[type="checkbox"]:checked+label::after,
.disc-mark.checkbox03 input[type="checkbox"]:checked+label::after,
.disc-mark.checkbox04 input[type="checkbox"]:checked+label::after {
    border: none;
    width: 5px;
    height: 5px;
    background: #000000;
    border-radius: 50%;
    cursor: default;
    position: absolute;
    left: 11px;
    top: 10px;
    display: inline-block;
    margin-top: initial;
}
/*table*/
.th-width-10 { width: 10% !important; }
.th-width-16 { width: 16% !important; }
.th-width-20 { width: 20% !important; }
.th-width-25 { width: 25% !important; }
.th-width-40 { width: 40% !important; }
.t-width-10 { width: 10% !important; }
.t-width-half { width: 50% !important; }
.t-width-20 { width: 20% !important; }
.t-width-three { width: 33.3% !important; }
.t-width-70 { width: 70% !important; }
.t-width-80 { width: 80% !important; }
.t-width-full { width: 100% !important; }
 
/*ボタンサイズ*/
.no-click{ cursor: not-allowed; }
.b-w36 { width: 36px !important; }
.b-w40 { width: 40px !important; }
.b-w88 { width: 88px !important; }
.b-w104 { width: 104px !important; }
.b-w136 { width: 136px !important; }
.b-w155 { width: 155px !important; }
.b-w164 { width: 164px !important; }
.b-w170 { width: 170px !important; }
.b-w265 { width: 265px !important; }
.b-w336 { width: 336px !important; }
.h-40 { height: 40px !important; }

button { cursor: pointer; }
button:hover { opacity: 0.8; }

/*width*/
.width-840 { max-width: 840px !important; }
.width-1160 { max-width: 1160px !important; }
.width-1250 { max-width: 1250px !important; }

/*flex*/
.justify-content-center {
    justify-content: center !important;
}

/*角丸ボタン*/
.btn-width {
    width: 136px;
}

.label-point {
    border-radius: 4px;
    padding: 3px;
}
.label-point.point-get {
    border: 1px solid var(--default-color01);
    color: var(--default-color01);
}

.label-point.point-use {
    border: 1px solid #f5a119;
    color: #f5a119;
}

.btn_g-btn {
    position: relative;
    text-align: center;
    padding: 0 10px;
    width: 70px;
    height: 32px;
    background: var(--default-color01);
    border-radius: 50px;
    color: #ffffff;
    border: none;
    display: inline-block;
}
.btn_g-box-c-btn.is-actived,
.btn_g-btn.is-actived{
    background: #ffffff;
    border:var(--default-color01) 1px solid;
    color: var(--default-color01);
}
.btn_g-btn.is-no-active {
    background: #CCCCCC;
    color: #ffffff;
    border: none;
}
a.btn_g-btn{
    width: 88px;
    padding: 5px 15px;
}
a:hover.btn_g-btn{
    opacity: 0.8;
    color: #ffffff;
}
a:hover.btn_g-btn.is-actived{
    opacity: 0.8;
    color: var(--default-color01);
}
a.btn_g-box-c-btn.is-actived{
    width: 88px;
    padding: 5px 15px;
}
a:hover.btn_g-box-c-btn.is-actived{
    opacity: 0.8;
}
.btn_g-btn a {
    color: #ffffff;
}

.btn_gray-box-c-btn {
    position: relative;
    width: 88px;
    height: 32px;
    background: #EFEFEF;
    border-radius: 50px;
    color: #999999;
    border: none;
}

.btn_gray-box-c-btn.active {
    background: var(--default-color01);
    color: #ffffff;
}

.btn_g-box-c-btn {
    position: relative;
    width: 88px;
    height: 32px;
    background: var(--default-color01);
    border-radius: 50px;
    color: #ffffff;
    border: none;
}

.btn_g-box-btn {
    position: relative;
    height: 48px;
    background: var(--default-color01);
    border-radius: 5px;
    color: #ffffff;
    border: none;
}
.btn_g-box-btn:hover {
    color: #ffffff99;
}
.btn_g-box-btn.point-change {
    height: 60px;
}
.btn_g-box-btn.disabled {
    background: #EFEFEF;
    color: #999999;
    cursor: not-allowed;
}
.btn_g-box-btn-line {
    position: relative;
    border-radius: 5px;
    background: #ffffff;
    color: var(--default-color01);
    border: 2px solid var(--default-color01);
}
.btn_gray-box-btn,
.btn_gray-line-box-btn {
    position: relative;
    display: block;
    height: 48px;
    background: #EFEFEF;
    border-radius: 5px;
    color: #999999;
    border: none;
}
.btn_gray-box-btn p,
.btn_gray-line-box-btn p {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_gray-box-btn:not(.active){
    cursor: not-allowed;
}
.btn_gray-box-btn.active {
    background: var(--default-color01);
    color: #ffffff;
}
.btn_gray-line-box-btn.active {
    background: #06C755;
    color: #ffffff;
}
.btn_login_gray-box-btn {
    position: relative;
    height: 48px;
    background: #cccccc;
    border-radius: 5px;
    color: #ffffff;
    border: none;
}

.btn_login_gray-box-btn:not(.active){
    cursor: not-allowed;
}
.btn_login_gray-box-btn.active {
    background: var(--default-color01);
    color: #ffffff;
}

.btn_green-line-box-btn {
    position: relative;
    text-align: center;
    padding: 0 10px;
    width: 88px;
    height: 48px;
    border: 1px solid var(--default-color01);
    border-radius: 5px;
    color: var(--default-color01)
}

.btn_edit_btn {
    border: 1px solid #ccc;
    background: #ffffff;
    border-radius: 5px;
    padding: 0 10px;
    text-align: center;
}
.btn_white {
    position: relative;
    padding: 2px 5px;
    margin: 0 5px;
    /*height: 20px;*/
    background: #ffffff;
    border-radius: 5px;
    color: #333333;
    border: none;
    -webkit-filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.2));
}
.btn_white a:link{
    display: block;
}
.btn_white a:hover,
.btn_white a:active{
    color: var(--default-color01);
}
.btn {
    position: relative;
    padding: 2px 5px;
    margin: 0 5px;
    border-radius: 5px;
    border: none;
    -webkit-filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.2));
}
.btn a:link{
    display: block;
}
.btn a:hover,
.btn a:active{
    opacity: 0.8;
}
.btn-red {
    background: #c00000;
    color: #ffffff;
}
a.btn.btn-red.btn_delete:hover {
    color: #ffffff;
    opacity: 0.8;
}
.btn-blue {
    background: #0071c0;
    color: #ffffff;
}
.btn-blue:hover {
    background: #0071c0;
    color: #ffffff;
    opacity: 0.8;
}

a.btn.disabled,
a.btn.disabled:hover,
a.btn.btn-red.btn_delete.disabled:hover {
    opacity: 0.1;
    cursor: default;
}
.btn.loading {
    opacity: 0.4;
}
.btn.loading:before {
    display: inline-block;
    content: "";
    background: url("/img/common/loading-white.svg") no-repeat;
    background-size: cover;
    width: 22px;
    height: 22px;
    position: absolute;
    left: calc(50% - 11px)
}
.btn.btn-blue.loading {
    color: #b6b6b6;
}
.btn_g-box-btn.edit-btn {
    display: inline-block;
    min-width: 36px;
    height: 30px;
    padding: 6px;
}
.curren-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*インスタグラム*/
.btn_ig-box-btn {
    display: inline-block;
    position: relative;
    height: 48px;
    background: #D30096;
    border-radius: 5px;
    color: #ffffff;
    border: none;
}
a.btn_ig-box-btn,
a.btn_ig-box-btn.disabled {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_ig-box-btn:hover {
    opacity: 0.8;
    color: #ffffff;
}
.btn_ig-box-btn.disabled {
    background: #EFEFEF;
    color: #999999;
    cursor: not-allowed;
    display: inline-block;
}
.offer_img {
    width: 259px;
    aspect-ratio: 4/3;
    background: color(srgb 0 0 0 / 0.03);
    position: relative;
    border: none;
}
.offer_img img{
    width: 235px;
    height: 235px;
    object-fit: cover;
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
}
.offer_img .icon-image:before {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2.4rem;
}

.offer_img img {
    width: 235px;
    height: 235px;
    overflow: hidden;
}
.offer_img_2{
    background: #999999;
    color: #ffffff;
    border-radius: 5px;
    padding: 5px 10px;
    width: 150px;
    border: none;
}
/*画像*/
.c-logo::after {
    display: inline-block;
    content: "";
    background: url("/img/icon/logo.svg") no-repeat;
    width: 12px;
    height: 16px;
    background-size: cover;
    vertical-align: text-top;
    position: absolute;
    top: 6px;
    margin-left: 10px;
}

.i-cart::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/cart.svg") no-repeat;
    width: 30px;
    height: 30px;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
}

.new-create::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/create.svg") no-repeat;
    width: 20px;
    height: 20px;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    left: -5px;
    top: -1px;
}

.i-serach::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/search.svg") no-repeat;
    width: 19px;
    height: 19px;
    background-size: cover;
    vertical-align: text-top;
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: +1;
}

.i-download::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/download.svg") no-repeat;
    width: 14px;
    height: 17px;
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
}

.i-close::after {
    display: inline-block;
    content: "";
    background: url("/img/icon/close.svg") no-repeat;
    width: 10px;
    height: 10px;
    background-size: cover;
    vertical-align: text-top;
    position: relative;
    left: 10px;
}

.i-prof::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/i-user.svg") no-repeat;
    width: 23px;
    height: 20px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}

.i-graf::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/graph.svg") no-repeat;
    width: 23px;
    height: 20px;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
}

.i-write::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/i_write.svg") no-repeat;
    width: 14px;
    height: 14px;
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
}

.i-gold::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/gold.svg") no-repeat;
    width: 20px;
    height: 20px;
    background-size: cover;
    vertical-align: sub;
    margin-right: 5px;
}

.i-flag::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/offer.svg") no-repeat;
    width: 28px;
    height: 29px;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
}

.i-send::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/s_mail.svg") no-repeat;
    width: 28px;
    height: 14px;
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
}

.i-join::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/user.svg") no-repeat;
    width: 14px;
    height: 14px;
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
}

.i-reppy::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/reppy.svg") no-repeat;
    width: 23px;
    height: 20px;
    background-size: cover;
    vertical-align: text-top;
    margin-right: 5px;
}
.i-login::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/login.svg") no-repeat;
    width: 21px;
    height: 25px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
.i-new_user::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/new_user.svg") no-repeat;
    width: 28px;
    height: 29px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
.i-new_user_white::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/new_user_white.svg") no-repeat;
    width: 28px;
    height: 29px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
.i-red_attention::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/red_attention.svg") no-repeat;
    width: 22px;
    height: 19px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
.i-check_number::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/check_number.svg") no-repeat;
    width: 25px;
    height: 31px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
.i-post::before {
    display: inline-block;
    content: "";
    background: url("/img/icon/i-post.svg") no-repeat;
    width: 20px;
    height: 22px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
/*体験型*/
h3.i_offer-ex::before{
    display: inline-block;
    content: "体験型";
    color: #ffffff;
    background: #FF5A67;
    border-radius: 5px;
    text-align: center;
    width: 50px;
    height: 25px;
    margin-right: 5px;
}
/*投稿型*/
h3.i_offer-post::before{
    display: inline-block;
    content: "投稿型";
    color: #ffffff;
    background: #2E9BF0;
    border-radius: 5px;
    text-align: center;
    width: 50px;
    height: 25px;
    margin-right: 5px;
}
/*開催中 終了 icon*/
.mark-open {
    background: var(--default-color01);
    color: #ffffff;
    padding: 2px 5px;
    width: 40px;
    height: 19px;
    font-size: 1.0rem;
    position: relative;
    top: 0;
    left: 0;
    margin-right: 5px;
}

.mark-close {
    background: #999999;
    color: #ffffff;
    padding: 2px 10px;
    width: 40px;
    height: 19px;
    font-size: 1.0rem;
    position: relative;
    top: 0;
    left: 0;
    margin-right: 5px;
}
/*体験型*/
.offer_ex{
    position: absolute;
    width: 50px;
    height: 25px;
    right: 0%;
    top: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.2rem;
    border-radius: 5px;
    background: #FF5A67;
}
/*投稿型*/
.offer_post{
    position: absolute;
    width: 50px;
    height: 25px;
    right: 0%;
    top: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.2rem;
    border-radius: 5px;
    background: #2E9BF0;
}
.white-filter {
    opacity: 0.3;
}

/*icon font*/
.icon-frame::before,
.icon-image::before,
.icon-midashi::before,
.icon-text::before,
.icon-url::before {
    position: absolute;
    left: 25px;
}

.active ::before {
    color: #ffffff !important;
}

.icon-i_write::before {
    position: absolute;
    left: 25px;
}

/*矢印*/
.r-arrow::after {
    content: ">";
    display: inline-block;
    width: 10px;
    height: 10px;
}

/*right arrow*/
.pr_arrow {
    color: transparent;
}

.pr_arrow::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: solid 1px #ffffff;
    border-right: solid 1px #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 7px;
    top: 8px;
}
/*left arrow*/
.pl_arrow {
    color: transparent;
}

.pl_arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: solid 1px #ffffff;
    border-left: solid 1px #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 10px;
    top: 8px;
}

/*line inherit*/
.text-line-inherit {
    white-space: normal !important;
    overflow: inherit;
}

.modal_pl_arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: solid 1px #000000;
    border-left: solid 1px #000000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 20px;
    top: 6px;
}

/*text-position*/
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.flex-center {
    display: flex;
    justify-content: center;
}
.flex {
    display: flex;
}
.flex_row {
    display: flex;
    flex-direction: column;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.flex-hight-center,
.flex-vertical-center {
    display: flex;
    align-items: center;
}
/*Progress*/
.pager .pagination {
    text-align: center;
}

.pager .pagination li {
    display: inline;
    margin: 0 2px;
    padding: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    position: relative;
    border-radius: 50px;
}

.pager .pagination li.now a {
    color: var(--default-color01);
}

.pager .pagination li.pre,
.pager .pagination li.next {
    background: var(--default-color01);
    color: #ffffff;
}

.pager .pagination li.prea,
.pager .pagination li.nexta {
    color: var(--default-color01);
}

.pager .pagination li a {
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
}

.pager .pagination li a span {
    display: table-cell;
    vertical-align: middle;
}

.pager .pagination li a:hover,
.pager .pagination li a:active {
    color: var(--default-color01);
}

/*bottom arrow*/
.b-arrow::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: solid 1px #000000;
    border-right: solid 1px #000000;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
}

a:hover .b-arrow::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: solid 1px var(--default-color01);
    border-right: solid 1px var(--default-color01);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
}

.b-arrow::after {
    top: 7px;
    left: -15px;
}

/*right arrow*/
.r-arrow::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: solid 1px #000000;
    border-right: solid 1px #000000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 9px;
}

a:hover .r-arrow::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: solid 1px var(--default-color01);
    border-right: solid 1px var(--default-color01);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}

/*left arrow*/
.l_arrow{
    position: relative;
}
.l_arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: solid 1px #000000;
    border-left: solid 1px #000000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 8px;
    left: -10px;
}
.mod-f12.l_arrow::before {
    top: 3px;
}

a:hover .l_arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: solid 1px var(--default-color01);
    border-left: solid 1px var(--default-color01);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}

/*bottom arrow*/
.b_arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: solid 1px #000000;
    border-left: solid 1px #000000;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 8px;
    left: -10px;
}

a:hover .b_arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: solid 1px var(--default-color01);
    border-left: solid 1px var(--default-color01);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
}

/*list*/
ul.offer_edit_list_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

ul.offer_edit_list_btn li {
    margin-right: 10px;
}

ul.offer_edit_list_btn li:last-child {
    margin-right: 0;
}

ul.offer_edit_list_btn li.midashi::after {
    position: absolute;
}

ul.offer_edit_list {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

ul.offer_edit_list li,
ul.offer_edit_list li div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 5px 0;
}

ul.offer_edit_list li .inner,
ul.offer_edit_list li div .inner {
    position: relative;
    width:100%;
}

ul.offer_edit_list li .inner .text-count,
ul.offer_edit_list li div .inner .text-count {
    color: #999999;
    position: absolute;
    bottom: -15px;
    right: 0;
}

ul.offer_edit_list li .inner .text-attention,
ul.offer_edit_list li div .inner .text-attention {
    position: absolute;
    left: 205px;
    bottom: -20px;
}

ul.offer_edit_list li .inner button,
ul.offer_edit_list li div .inner button {
    background: none;
    border: none;
}

ul.offer_edit_list li .inner .list-close,
ul.offer_edit_list li div .inner .list-close {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    right: -5px;
}

ul.offer_edit_list li .inner .list-close .i-close::after,
ul.offer_edit_list li div .inner .list-close .i-close::after {
    position: absolute;
    left: 3px;
}

ul.offer_edit_list li .inner textarea,
ul.offer_edit_list li div .inner textarea {
    height: 160px;
}

ul.offer_edit_list li .inner .offer_img,
ul.offer_edit_list li div .inner .offer_img {
    width: 235px !important;
    height: 235px !important;
    background: #EFEFEF;
}

ul.offer_edit_list li .inner .image-block,
ul.offer_edit_list li div .inner .image-block {
    width: initial !important;
}

ul.offer_edit_list li label,
ul.offer_edit_list li div label {
    width: 240px;
    padding: 10px;
    margin-right: 10px;
    text-align: right;
}

ul.offer_edit_list li label.img_label,
ul.offer_edit_list li div label.img_label {
    width: 190px !important;
}

/*下線*/
.under_line {
    border-bottom: 1px solid #EFEFEF;
}

.b-under_line {
    border-bottom: 1px solid #000000;
}
/*navi*/
.d-navi{
    display: none;
}
/*ヘッダー*/
.header {
    width: 100%;
}
.header_fixed{
    position: fixed;
    top: 0;
    background: #ffffff;
    z-index: 10;
}
.top_menu {
    width: 100%;
    max-width: calc(100% - 1%);
    margin: 0 auto;
    margin-top: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.top_menu .pc_logo_area img{
    position: relative;
    top: 5px;
    left: 20px;
    width: 100%;
    max-width: 157px;
}

.top_menu .pc_logo_area h2 {
    position: relative;
}

.top_menu .pc_logo_area h2 span {
    position: absolute;
    top: -5px;
    margin-left: 3px;
}

.top_menu .compnay_logo {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.top_menu .compnay_logo .logo_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.top_menu .compnay_logo .logo_inner img{
    width: 40px;
    height: 40px;
    border: 1px solid #EFEFEF;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
.top_menu .compnay_logo .logo_inner span {
    margin-right: 20px;
}

.top_menu .compnay_logo .biz_menu::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 15px;
    background-color: #000000;
    position: absolute;
    margin-left: -10px;
}

/*ユーザー側*/
.join_header {
    position: relative;
    width: 100%;
}

.join_header img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.join_header span {
    color: #686868;
    position: absolute;
    right: 0px;
    margin-top: 10px;
    margin-right: 60px
}

@media screen and (max-width: 767px) {
    .sp-width-full {
        width: 100% !important;
    }
    .i_tiktok {
        width: 24px;
    }
    .join_header {
        text-align: right;
    }
    .join_header span {
        position: inherit;
        right: inherit;
        margin: 0px;
        margin-right: 10px;
        font-size: 1.0rem;
        color: #b0b0b0;
    }
    .mail-text {
        width: calc(200px - 50px);
    }
}

.join_header .sp_hidden {
    display: none;
}

.join_header .pc_hidden {
    display: block;
}

.user_menu {
    width: 100%;
    max-width: calc(100% - 4%);
    height: 60px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.user_menu a {
    width: 100%;
}
.user_menu .logout {
    width: 75px;
    margin-top: 20px;
    text-align: center;
}

.user_menu .join_logo_area {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.user_menu .join_logo_area .logo_area_img {
    text-align: center;
    margin-top: 5px;
}

.user_menu .join_logo_area .logo_area_img img {
    width: 65px;
    height: 50px;
    -o-object-fit: scale-down;
    object-fit: scale-down;
}

.user_menu .logo_area {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.user_menu .logo_area .logo_area_img{
    margin-top: 0;
}
.user_menu .logo_area img {
    width: 65px;
    height: 50px;
    object-fit: contain;
}

.user_menu .logo_area .logo_area_text {
    width: 100%;
    max-width: calc(100% - 65px);
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
}

.user_menu .logo_area .logo_area_text .pc_hidden {
    display: none;
}

.user_menu .pc_menu {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.user_menu .pc_menu .pc_menu_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 5px;
}

.user_menu .pc_menu .pc_menu_inner .icon-area {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 10px;
}

.user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-img {
    text-align: center;
}
.user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-img i {
    font-size: 1.8rem;
    color: var(--accent-color01);
    margin-right: 5px;
}
.user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-img img {
    width: 28px;
    height: 28px;
    -o-object-fit: scale-down;
    object-fit: scale-down;
}

.user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-text {
    display: flex;
    align-items: center;
}
.user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-text i {
    margin-right: 0;
}
.user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-text p {
    font-size: 1.2rem;
}
.user_menu .pc_menu .pc_menu_inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: fit-content; */
    height: 60px;
    border-bottom: solid 2px rgba(0, 0, 0, 0);
}
.user_menu .pc_menu .pc_menu_inner a.now-area p,
.user_menu .pc_menu .pc_menu_inner a:hover p,
.user_menu .pc_menu .pc_menu_inner a:active p {
    font-weight: 600;
    letter-spacing: -0.01rem;
}
.user_menu .pc_menu .pc_menu_inner a.now-area,
.user_menu .pc_menu .pc_menu_inner a:hover,
.user_menu .pc_menu .pc_menu_inner a:active {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color01-link-bg);
    border-bottom: 2px solid var(--accent-color01);
}
.user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-text a:hover p {
    font-size: 1.6rem;
    color: var(--accent-color01);
}
/*エラーページ*/
.user_content__error {
    width: 100%;
    height: 100vh;
    background: #f8f8f8;
    position: relative;
}

.user_content__error .user_content__error_inner {
    width: 100%;
    max-width: 650px;
    position: absolute;
    margin-top: 100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 8px;
    background: #ffffff;
    -webkit-box-shadow: 0px 0 5px 0 rgba(175, 175, 175, 0.5);
    box-shadow: 0px 0 5px 0 rgba(175, 175, 175, 0.5);
}

.user_content__error .user_content__error_inner .error_area {
    padding: 30px;
}

.user_content__error .user_content__error_inner .error_area img.error {
    margin: 30px 0;
    width: 80px;
    object-fit: contain;
}

/*ログアウト*/
.content_wrap .user_content__logout {
    background: transparent;
}
.user_content__logout {
    width: 100%;
    background: #f8f8f8;
    margin-bottom: 20px;
}

.user_content__logout .user_content__logout_inner {
    width: 100%;
    max-width: 650px;
    position: relative;
    margin-top: 100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 8px;
    background: #ffffff;
    -webkit-box-shadow: 0px 0 5px 0 rgba(175, 175, 175, 0.5);
    box-shadow: 0px 0 5px 0 rgba(175, 175, 175, 0.5);
}
.user_content__term{
    width: 100%;
}
.user_content__term .terms_area{
    width: 100%;
    max-width: calc(100% - 4%);
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 20px;
    padding-top: 0;
    background: #ffffff;
}
.user_content__term .terms_area .text_right{
    display: flex;
    justify-content: flex-end;
    margin-right: 7px;
    margin-top: 40px;
}
.user_content__logout .user_content__logout_inner .text_area {
    padding: 30px;
}

.user_content__logout .user_content__logout_inner .link-area {
    margin-top: 50px;
}


.footer {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

.footer .sp_menu_inner {
    display: none;
}

.footer .join_fotter_inner {
    width: 100%;
    max-width: 1040px;
    color: #cccccc;
    text-align: center;
    bottom: 0;
    padding: 10px 0;
}

.user_menu .pc_menu .pc_menu_inner:has(> :nth-child(5)) a {
    width: fit-content;
    margin-right: 5px;
}
.user_menu .pc_menu .pc_menu_inner:has(> :nth-child(5)) a div {
    margin: 0 2px;
}

p.symbol-at-head {
    padding-left: 1.5em;
    text-indent: -1.2em;
}
@media screen and (min-width: 1240px ) {
    .user_menu .pc_menu .pc_menu_inner {
        width: 690px;
    }
}
@media screen and (max-width: 980px) {
    .user_menu .pc_menu .pc_menu_inner:has(> :nth-child(5)) a {
        margin-right: 2px;
    }
    .user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-img i {
        margin-right: 3px;
    }
    .user_menu .pc_menu .pc_menu_inner:has(> :nth-child(5)) .icon-area .icon-menu-text p {
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 940px) {
    .user_menu .pc_menu .pc_menu_inner:has(> :nth-child(5)) a .icon-area {
        display : flex;
        flex-direction: column;
    }
    .user_menu .pc_menu .pc_menu_inner .icon-area {
        margin: 0 5px;
    }
    .user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-img i {
        font-size: 1.6rem;
        margin-right: 0;
    }
    .user_menu .pc_menu .pc_menu_inner .icon-area .icon-menu-text p {
        margin-top: 5px;
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 860px) {
    .user_menu .pc_menu .pc_menu_inner:has(> :nth-child(5)) .icon-area i {
        font-size: 1.4rem;
        margin-right: 0px;
    }
    .user_menu .pc_menu .pc_menu_inner:has(> :nth-child(5)) .icon-area .icon-menu-text p {
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 767px) {
    .step_thanks_bg{
        /* background: #ECF4F2 url('../../img/point_bg_sp.png') no-repeat center top; */
        background-size: 110%;
    }
    /*SP では改行させる*/
    .sp_br{
        display: block;
    }
    .pc_only{
        display: none;
    }
    .sp-none-center{
        text-align: initial;
    }
    .sp-flex-row {
        display: flex;
        flex-direction: column;
    }
    .sp-text-left {
        text-align: left;
    }
    .sp-text-center {
        text-align: center;
    }
    .sp-text-right {
        text-align: right;
    }
    /*お友達紹介URL button*/
    button.clipUrl p{
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /*SP font-size*/
    .mod-sp-f8 { font-size: 0.8rem !important; }
    .mod-sp-f9 { font-size: 0.9rem !important; }
    .mod-sp-f10 { font-size: 1rem !important; }
    .mod-sp-f11 { font-size: 1.1rem !important; }
    .mod-sp-f12 { font-size: 1.2rem !important; }
    .mod-sp-f13 { font-size: 1.3rem !important; }
    .mod-sp-f14 { font-size: 1.4rem !important; }
    .mod-sp-f15 { font-size: 1.5rem !important; }
    .mod-sp-f16 { font-size: 1.6rem !important; }
    .mod-sp-f17 { font-size: 1.7rem !important; }
    .mod-sp-f18 { font-size: 1.8rem !important; }
    .mod-sp-f19 { font-size: 1.9rem !important; }
    .mod-sp-f20 { font-size: 2rem !important; }
    .mod-sp-f21 { font-size: 2.1rem !important; }
    .mod-sp-f22 { font-size: 2.2rem !important; }
    .mod-sp-f23 { font-size: 2.3rem !important; }
    .mod-sp-f24 { font-size: 2.4rem !important; }
    .mod-sp-f25 { font-size: 2.5rem !important; }
    .mod-sp-f26 { font-size: 2.6rem !important; }
    .mod-sp-f27 { font-size: 2.7rem !important; }
    .mod-sp-f28 { font-size: 2.8rem !important; }
    /*SP用*/
    .mod-sp-mt0{ margin-top: 0px !important; }
    .mod-sp-mt5{ margin-top: 5px !important; }
    .mod-sp-mt10{ margin-top: 10px !important; }
    .mod-sp-mt15{ margin-top: 15px !important; }
    .mod-sp-mt20{ margin-top: 20px !important; }
    .mod-sp-mt25{ margin-top: 25px !important; }
    .mod-sp-mt30{ margin-top: 30px !important; }
    .mod-sp-mt35{ margin-top: 35px !important; }
    .mod-sp-mt40{ margin-top: 40px !important; }
    .mod-sp-mb0 { margin-bottom: 0 !important; }
    .mod-sp-ml0 { margin-left: 0 !important; }
    .mod-sp-ml5 { margin-left: 5px !important; }
    .mod-sp-ml10 { margin-left: 10px !important; }
    .mod-sp-ml15 { margin-left: 15px !important; }
    .mod-sp-ml20 { margin-left: 20px !important; }
    .mod-sp-ml25 { margin-left: 25px !important; }
    .mod-sp-ml30 { margin-left: 30px !important; }
    .mod-sp-ml35 { margin-left: 35px !important; }
    .mod-sp-ml40 { margin-left: 40px !important; }
    .mod-sp-mr0 { margin-right: 0 !important; }
    .mod-sp-mr5 { margin-right: 5px !important; }
    .mod-sp-mr10 { margin-right: 10px !important; }
    .mod-sp-mr15 { margin-right: 15px !important; }
    .mod-sp-mr20 { margin-right: 20px !important; }
    .mod-sp-mr25 { margin-right: 25px !important; }
    .mod-sp-mr30 { margin-right: 30px !important; }
    .mod-sp-mr35 { margin-right: 35px !important; }
    .mod-sp-mr40 { margin-right: 40px !important; }
    .mod-sp-pt0 { padding-top: 0 !important; }
    .mod-sp-pt10 { padding-top: 10px !important; }
    .mod-sp-pt10 { padding-top: 15px !important; }
    .mod-sp-pt15 { padding-top: 20px !important; }
    .mod-sp-pt25 { padding-top: 25px !important; }
    .mod-sp-pt30 { padding-top: 30px !important; }
    .mod-sp-pb0 { padding-bottom: 0 !important; }
    .mod-sp-pb10 { padding-bottom: 10px !important; }
    .mod-sp-pb15 { padding-bottom: 15px !important; }
    .mod-sp-pb20 { padding-bottom: 20px !important; }
    .mod-sp-pb25 { padding-bottom: 25px !important; }
    .mod-sp-pb30 { padding-bottom: 30px !important; }
    /*SP font-weight*/
    .f-sp-weight-100 { font-weight: 100 !important; }
    .f-sp-weight-200 { font-weight: 200 !important; }
    .f-sp-weight-300 { font-weight: 300 !important; }
    .f-sp-weight-400 { font-weight: 400 !important; }
    .f-sp-weight-500 { font-weight: 500 !important; }
    .f-sp-weight-600 { font-weight: 600 !important; }
    /*input用*/
    .normal_half_sp{
        width: 100%;
    }
    /*input*/
    input[type="tel"],
    input[type="number"],
    input[type="text"] {
        font-size: 1.4rem;
    }
    input[type="password"] {
        font-size: 1.4rem;
    }
    input[type="date"] {
        font-size: 1.4rem;
    }
    input[type="file"] {
        font-size: 1.4rem;
    }
    input[type="datetime-local"] {
        font-size: 1.4rem;
    }
    ::-webkit-input-placeholder {
        font-size: 1.4rem;
    }

    :-ms-input-placeholder {
        font-size: 1.4rem;
    }

    ::-ms-input-placeholder {
        font-size: 1.4rem;
    }

    ::placeholder {
        font-size: 1.4rem;
    }
    /*input*/
    input[type="number"]::-webkit-input-placeholder {
        font-size: 1.4rem;
    }
    input[type="number"]:-ms-input-placeholder {
        font-size: 1.4rem;
    }
    input[type="number"]::-ms-input-placeholder {
        font-size: 1.4rem;
    }
    input[type="number"]::placeholder {
        font-size: 1.4rem;
    }
    /*button*/
    .btn_g-box-btn.b-w336 {
        width: 100%;
        max-width: calc(100% - 32px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*selectbox*/
    .s-sp-width-full {
        width: 100% !important;
    }
    /*icon設定*/
    .i_point_coin::after{
        top: -10px;
        width: 31px;
        height: 60px;
    }
    /*ユーザー側*/
    .join_header .sp_hidden { display: block;}
    .join_header .pc_hidden { display: none;}

    .user_menu .logo_area {
        width: 100%;
        position: relative;
    }

    .user_menu .logout {
        margin-top: 18px;
    }
    .user_menu .pc_menu{
        width: 15%;
    }
    .user_menu .logo_area .logo_area_img {
        margin-top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0;
    }

    .user_menu .logo_area .logo_area_text {
        line-height: 1.6rem;
        padding-top: 0;
        white-space: normal;
    }

    .user_menu .logo_area .logo_area_text h2{
        line-height: 2.0rem;
    }
    .user_menu .logo_area .logo_area_text .pc_hidden {
        display: block;
    }

    .user_menu .pc_menu_inner {
        display: none !important;
    }

    .footer {
        width: 100%;
    }

    .footer.footer_menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 58px;
        background: #ffffff;
        -webkit-filter: drop-shadow(0 7px 10px #cccccc);
        filter: drop-shadow(0 7px 10px #cccccc);
        z-index: +1;
    }

    .footer .sp_menu_inner {
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        max-width: calc(100% - 5px);
        margin: 0px auto;
        padding: 10px 5px;
    }

    .footer .sp_menu_inner .icon-area {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0 5px;
    }

    .footer .sp_menu_inner .icon-area .icon-menu-img {
        text-align: center;
        margin-bottom: 0;
    }
    .footer .sp_menu_inner .icon-area .icon-menu-img img {
        width: 28px;
        height: 28px;
        -o-object-fit: scale-down;
        object-fit: scale-down;
    }
    /*新アイコン*/
    .footer .sp_menu_inner .icon-area .icon-menu-img i {
        font-size: 2.0rem;
        color: var(--accent-color01);
        margin-bottom: 0px;
    }
    .footer .sp_menu_inner .icon-area .icon-menu-text {
        display: flex;
        align-items: center;
        height: 25px;
        text-align: center;
    }
    .footer .sp_menu_inner .icon-area .icon-menu-text p {
        font-size: 1.0rem;
    }
    .footer .join_fotter_inner {
        padding-bottom: 100px;
    }
    /*logout*/
    .user_content__logout .user_content__logout_inner {
        max-width: calc(100% - 48px);
    }
}

    /*# sourceMappingURL=common.css.map */