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

/* =============================================
  マイページ用CSS
============================================= */

/* --------------------- PC --------------------- */

/* =============== 共通 =============== */
#top_conversion {
    display: none;
}

/* ===== ヘッダータイトル（PCでは基本非表示） ===== */
.ttl_spui {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}

main.page_static .ttl_spui {
    padding-top: 50px;
}

.ttlsp_border {
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}

.ttlsp_w {
    background-color: #fff;
}

.ttl_spui h1,
.ttl_spui h2,
.ttl_spui h3,
.ttl_spui h4 {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #454545;
}

.ttl_spui.ttlsp_w_text h1,
.ttl_spui.ttlsp_w_text h2,
.ttl_spui.ttlsp_w_text h3,
.ttl_spui.ttlsp_w_text h4 {
    color: #fff;
}

#title_back,
.title_back,
#title_search,
.title_search {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#title_back,
.title_back {
    left: 0;
    width: 9px;
    height: 14px;
}

#title_search,
.title_search {
    right: 0;
    width: 14px;
    height: 14px;
}

#title_back img,
.title_back img,
#title_search img,
.title_search img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: auto;
}

/* ===== ボタンヘッダー（PCでは基本非表示） ===== */
.sp_btns_header {
    display: none;
    width: 100%;
    height: 47px;
    padding-top: 30px;
    background-color: #fff;
    border-bottom: 2px solid #eee;
}

.sp_btns_header .flex {
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.sp_btns_header .flex a {
    display: flex;
    align-items: center;
}

.page_back_btn img {
    width: 13px;
    height: auto;
}

.menu_dots img {
    width: 24px;
    height: auto;
}

/* ===== 追従フッター ===== */
#sp_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 80px;
    background-color: #fff;
    border-top: 1px solid #f2f2f2;
}

#sp_footer ul {
    position: relative;
    width: 100%;
    height: 100%;
}

#sp_footer li {
    width: 20%;
    height: 79%;
}

#sp_footer li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 500;
    color: #979797;
}

.sp_ftr_img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
}

#sp_footer .sp_ftr_img img {
    display: block;
    height: auto;
}

#sp_ftr_like img {
    width: 20px;
}

#sp_ftr_nice img {
    width: 20px;
}

#sp_ftr_search img {
    width: 20px;
}

#sp_ftr_talk img {
    width: 28px;
}

#sp_ftr_mypage img {
    width: 17px;
}

.sp_ftr_img .new_message_mark {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: none;
    width: 100%;
    height: 100%;
    padding-left: 26px;
}

.sp_ftr_img .new_message_mark.show {
    display: flex;
    justify-content: center;
}

.sp_ftr_img .new_message_mark span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: #31e1ba;
}

/* ===== プロフィール背景画像 ===== */
#color_header {
    display: none;
}

.prof_bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.prof_bg_1 {
    background-image: url(../img/profile_bg_img/01.jpg);
}

.prof_bg_2 {
    background-image: url(../img/profile_bg_img/02.jpg);
}

.prof_bg_3 {
    background-image: url(../img/profile_bg_img/03.jpg);
}

.prof_bg_4 {
    background-image: url(../img/profile_bg_img/04.jpg);
}

.prof_bg_5 {
    background-image: url(../img/profile_bg_img/05.jpg);
}

.prof_bg_6 {
    background-image: url(../img/profile_bg_img/06.jpg);
}

.prof_bg_7 {
    background-image: url(../img/profile_bg_img/07.jpg);
}

.prof_bg_8 {
    background-image: url(../img/profile_bg_img/08.jpg);
}

.prof_bg_9 {
    background-image: url(../img/profile_bg_img/09.jpg);
}

.prof_bg_10 {
    background-image: url(../img/profile_bg_img/10.jpg);
}

.prof_bg_11 {
    background-image: url(../img/profile_bg_img/11.jpg);
}

.prof_bg_12 {
    background-image: url(../img/profile_bg_img/12.jpg);
}

.prof_bg_13 {
    background-image: url(../img/profile_bg_img/13.jpg);
}

.prof_bg_14 {
    background-image: url(../img/profile_bg_img/14.jpg);
}

.prof_bg_15 {
    background-image: url(../img/profile_bg_img/15.jpg);
}

.prof_bg_16 {
    background-image: url(../img/profile_bg_img/16.jpg);
}

.prof_bg_17 {
    background-image: url(../img/profile_bg_img/17.jpg);
}

.prof_bg_18 {
    background-image: url(../img/profile_bg_img/18.jpg);
}

.prof_bg_19 {
    background-image: url(../img/profile_bg_img/19.jpg);
}

.prof_bg_20 {
    background-image: url(../img/profile_bg_img/20.jpg);
}

.prof_bg_21 {
    background-image: url(../img/profile_bg_img/21.jpg);
}

.prof_bg_22 {
    background-image: url(../img/profile_bg_img/22.jpg);
}

.prof_bg_23 {
    background-image: url(../img/profile_bg_img/23.jpg);
}

.prof_bg_24 {
    background-image: url(../img/profile_bg_img/24.jpg);
}

.prof_bg_25 {
    background-image: url(../img/profile_bg_img/25.jpg);
}

.prof_bg_26 {
    background-image: url(../img/profile_bg_img/26.jpg);
}

.prof_bg_27 {
    background-image: url(../img/profile_bg_img/27.jpg);
}

.prof_bg_28 {
    background-image: url(../img/profile_bg_img/28.jpg);
}

.prof_bg_29 {
    background-image: url(../img/profile_bg_img/29.jpg);
}

.prof_bg_30 {
    background-image: url(../img/profile_bg_img/30.jpg);
}

/* ===== ポップアップ ===== */

/* プレミアム会員廃止ポップアップ */
.stopPremiumModal__inner {
    margin-top: 100px;
    margin-bottom: 100px;
}

.stopPremiumModal__content {
    width: 85%;
    max-width: 500px;
    margin: 0 auto 30px;
    padding: 30px 20px;
    border-radius: 10px;
    background-color: #fff;
}

.closeStopPremiumModalWrap {
    text-align: center;
}

.closeStopPremiumModal img {
    display: block;
    width: 26px;
    margin: 0 auto 10px;
}

.closeStopPremiumModal span {
    font-weight: 500;
    color: #fff;
}

.stopPremiumModal h2 {
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 500;
    color: salmon;
}

.stopPremiumModal p {
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.7;
}

.stopPremiumModal p span {
    color: salmon;
}

.stopPremiumModal_h3_1,
.stopPremiumModal_h3_2 {
    margin-bottom: 10px;
    padding: 1px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.stopPremiumModal_h3_1 {
    background-color: gray;
}

.stopPremiumModal_h3_2 {
    background-color: #00e29b;
}

.stopPremiumModal_h3_3,
.stopPremiumModal_h3_4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

/* 活動費カラーアイコン説明ポップアップ */
#openCommColorModal {
    position: fixed;
    right: 35px;
    bottom: 75px;
    background: #03ade9;
    border-radius: 20px;
    color: #fff;
    padding: 10px 35px 10px 43px;
    font-size: 13px;
    z-index: 100000;
}

#openCommColorModal img.-pc {
    width: 15px;
    height: 15px;
    content: "";
    position: absolute;
    left: 23px;
    top: 13px;
}

#openCommColorModal img.-sp {
    display: none;
}

#commColorModalArea {
    display: none;
    position: fixed;
    z-index: 100001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#commColorModalBg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.commColorModalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 500px;
    padding: 40px 30px;
    background-color: #fff;
    border-radius: 8px;
}

.commColorModalContents ul li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 21px;
    font-size: 14px;
    font-weight: 500;
}

.commColorModalContents ul li:last-of-type {
    margin-bottom: 0;
}

.commColorModalContents ul li::before {
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.commColorModalContents ul li.-color_1::before {
    background-color: #ccc;
}

.commColorModalContents ul li.-color_2::before {
    background-color: #fdb900;
}

.commColorModalContents ul li.-color_3::before {
    background-color: #9fd8a6;
}

.commColorModalContents ul li.-color_4::before {
    background-color: #fb94a2;
}

#closeCommColorModal {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    width: 45px;
    margin: auto;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

#closeCommColorModal img {
    display: block;
    width: 25px;
    margin: 0 auto 12px;
}

/* ログインボーナス付与ポップアップ */
#login_bonus {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    background-color: rgba(0, 0, 0, 0.8);
}

#login_bonus_modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 240px;
    height: 285px;
    margin: auto;
    background-color: #fff;
    border-radius: 10px;
}

#lb_label {
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    width: 185px;
    height: 31px;
    margin: auto;
    padding-top: 3px;
    background-image: url(../img/ttl_login_bonus.png);
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

#lb_head {
    width: 100%;
    height: 125px;
    padding-top: 27px;
    border-radius: 10px 10px 0 0;
    background-image: url(../img/bg_login_bonus.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    text-align: center;
}

#lb_head img {
    width: 125px;
    height: auto;
}

#lb_head p {
    line-height: 1;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

#lb_info {
    padding: 20px 0;
    text-align: center;
    line-height: 1.6;
    font-weight: 500;
}

#lb_info p:first-of-type {
    margin-bottom: 7px;
    font-size: 12px;
    color: #7b7b7b;
}

#lb_info p:first-of-type span {
    color: #01afea;
}

#lb_info p:nth-of-type(2) {
    font-size: 11px;
    color: #b4b4b4;
}

#login_bonus .button {
    width: 130px;
    height: 28px;
    border-radius: 30px;
    background-color: #00aee8;
    box-shadow: 0 2px #0084b9;
    font-size: 12px;
}

/* コミュニティ変更ポップアップ */
.cnt_lk_wrap {
    background-color: rgba(0, 0, 0, 0) !important;
}

.cnt_lk_modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 520px;
    height: 220px;
    margin: auto;
    padding-top: 75px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
}

.cnt_lk_modal p {
    margin-bottom: 25px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.cnt_lk_modal .button {
    width: 290px;
    height: 40px;
    margin: auto !important;
    border-radius: 22.5px;
    background-color: #00a2e5;
    line-height: 40px;
    font-size: 16px;
}

/* 非表示・ブロッグ・違反報告メニュー */
#violation_nav_wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

#violation_nav_wrap.open {
    display: block;
}

#violation_nav {
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    margin: auto;
}

#violation_nav button {
    display: block;
    width: 100%;
    height: 45px;
    margin-bottom: 13px;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #454545;
}

#violation_nav button#close_vio_nav {
    color: #01afea;
}

#violation_nav button:last-of-type {
    margin-bottom: 0;
}

.hide_users .user_img,
.block_users .user_img {
    width: 140px !important;
    height: 140px !important;
}

/* ===== チュートリアル ===== */
#tutorial {
    display: none;
}

/* =============== マイページTOP =============== */
#page_mypage-top .c-profilebox {
    margin-bottom: 0;
}

.p-mypagetop__nortification {
    height: auto !important;
}

.p-mypagetop__nortification ul {
    width: 100%;
    position: relative;
    border: #ddd 1px solid;
    height: 40px;
    margin-bottom: 2.5em;
    box-sizing: border-box;
    overflow: hidden;
}

.p-mypagetop__nortification ul:empty {
    display: none;
}

.p-mypagetop__nortification ul li {
    width: 100%;
    display: none;
    padding: 0.8em;
    line-height: 1;
}

.p-mypagetop__nortification em {
    color: #f1b2b5;
    font-weight: bold;
    font-size: 13px;
}

.p-mypagetop__newsarea .news {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: #ddd 1px dotted;
    line-height: 1.6;
}

.p-mypagetop__newsarea .news time {
    font-weight: bold;
}

.p-mypagetop__newsarea .news p {
    width: 570px;
}

/* =============== 相手探し・コミュニティ =============== */

/* プロフィール登録促進ポップアップ */
.modal_wrap#prof_promote_modal {
    display: none;
}

/* ------- ページコンテンツ ------- */
#page_community .l-main {
    background-color: transparent;
}

/*タイトル*/
#page_community .title_community {
    width: 100%;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 1em;
}

#page_community .title_community .pc {
    display: inline;
}

#page_community .title_community span b {
    color: #00aee8;
    font-weight: bold;
}

#page_community .small {
    font-size: 13px;
}

/*コミュニティボタン*/
#page_community .community_top,
#page_search_results .community_top {
    position: relative;
    width: 100%;
    margin: 0 auto 25px;
}

#page_community .community_top ul,
#page_search_results .community_top ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#page_community .community_top ul li,
#page_search_results .community_top ul li {
    width: 10%;
}

#page_community .community_top .icon,
#page_search_results .community_top .icon {
    width: 100%;
    margin-bottom: 5px;
}

#page_community .community_top .icon img,
#page_search_results .community_top .icon img {
    width: 15px;
}

#page_community .community_top .icon.all,
#page_search_results .community_top .icon.all {
    background-color: #11B1D9;
}

#page_community .community_top .menber,
#page_search_results .community_top .menber {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    display: none;
}

#page_community .community_top .community_subtext,
#page_search_results .community_top .community_subtext {
    display: block;
    margin-top: 1rem;
    text-align: right;
}

/*検索ボタン＋並び替えボタン*/
#page_community .search_box {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#page_community .likedetail_srcbtn {
    width: 145px;
    padding: 6px 0;
    border: 1px solid #cccccc;
    border-radius: 19.5px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
}

#page_community .likedetail_srcbtn:hover {
    background-color: #a8a8a8;
}

#page_community .likedetail_srcbtn img {
    position: relative;
    top: 3px;
    width: 17px;
    height: auto;
    margin-right: 8px;
}

/*ユーザー一覧*/
#page_community .c-profileboxarea {
    margin-top: 50px;
}

/* =============== 詳細検索結果 =============== */
#page_search_results .l-main {
    background-color: transparent;
}

#page_search_results .likedetail_search {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#page_search_results .likedetail_srcbtn {
    position: relative;
    padding: 11px 20px 11px 46px;
    border: 1px solid #cccccc;
    border-radius: 19.5px;
    font-size: 14px;
    font-weight: 500;
    color: #df7f80;
    line-height: 1;
}

#page_search_results .likedetail_srcbtn:hover {
    background-color: #fde0e1;
    border: 1px solid #fde0e1;
}

#page_search_results .likedetail_srcbtn img {
    width: 17px;
    height: auto;
    position: absolute;
    top: 10px;
    left: 19px;
}

#page_search_results .c-profileboxarea {
    margin-top: 30px;
}

#page_search_results .c-profilebox {
    margin-bottom: 30px;
}

/* =============== 詳細検索 =============== */
#page_search_detail .l-main {
    background: white;
    border-top: 1px solid #eeeeee;
}

#page_search_detail .c-btn {
    font-size: 14px;
}

#page_search_detail .dtlsrch_box {
    box-sizing: border-box;
    line-height: 1.7;
}

#page_search_detail .dtlsrch_box > form > p {
    text-align: center;
    font-size: 14px;
}

#page_search_detail .dtlsrch_box table {
    width: 100%;
    margin: 20px 0 35px;
}

#page_search_detail .dtlsrch_box table tr {
    border-top: 1px solid #e5e5e5;
}

#page_search_detail .dtlsrch_box table tr:last-of-type {
    border-bottom: 1px solid #e5e5e5;
}

#page_search_detail .dtlsrch_box table th,
#page_search_detail .dtlsrch_box table td {
    box-sizing: border-box;
}

#page_search_detail .dtlsrch_box table th {
    width: 200px;
    padding: 40px 20px;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
}

#page_search_detail .dtlsrch_box table td {
    width: calc(100% - 180px);
    padding: 35px 20px 35px 0;
    text-align: left;
}

#page_search_detail .dtlsrch_box table td.dtlsrch_narrow {
    padding: 28px 0;
}

#page_search_detail .dtlsrch_box .c-selectbox select {
    width: 100%;
    margin: 0;
    border: 1px solid #cccccc;
}

#page_search_detail .dtlsrch_box input[type="text"] {
    box-sizing: border-box;
    display: block;
    height: 40px;
    border: 1px solid #cccccc;
    padding: 0 15px;
    font-size: 14px;
}

#page_search_detail .dtlsrch_box input[type="text"]::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #717273;
}

#page_search_detail .dtlsrch_box form > button.submit_btn {
    display: block;
    width: 230px;
    height: 60px;
    margin: 0 auto;
    border-radius: 30px;
    background-color: #00ade8;
    color: white;
    font-size: 17px;
}

#page_search_detail .dtlsrch_box form > a.c-btn.gray {
    margin-top: 2rem;
    background: #aaa;
}

#page_search_detail .dtlsrch_box .search_range .c-selectbox {
    justify-content: flex-start;
}

#page_search_detail .dtlsrch_box .search_range .c-selectbox select {
    width: 100px;
    margin-right: 10px;
    background: url(../img/icon-selectbox.png) no-repeat right 15px center, #fff;
    background-size: 11px;
}

#page_search_detail .dtlsrch_box .search_range .c-selectbox > p {
    margin-right: 30px;
}

#page_search_detail .dtlsrch_radio {
    display: flex;
    flex-wrap: wrap;
}

#page_search_detail .dtlsrch_radio label {
    margin: 12px 30px 12px 0;
    cursor: pointer;
}

#page_search_detail .dtlsrch_radio input {
    display: none;
}

#page_search_detail .dtlsrch_radio p {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    font-weight: 500;
}

#page_search_detail .dtlsrch_radio p::before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #979797;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: 2px;
    left: 0;
}

#page_search_detail .dtlsrch_radio input:checked + p::after {
    display: block;
    content: "";
    width: 12px;
    height: 12px;
    background-color: #00aee8;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 4px;
}

#page_search_detail .dtlsrch_check input {
    display: none;
}

#page_search_detail .dtlsrch_check {
    display: flex;
    flex-wrap: wrap;
}

#page_search_detail .dtlsrch_check label {
    display: inline-block;
    cursor: pointer;
}

#page_search_detail .dtlsrch_check label p {
    padding-left: 28px;
    position: relative;
    font-size: 15px;
    font-weight: 500;
    margin: 12px 30px 12px 0;
}

#page_search_detail .dtlsrch_check label p::before {
    box-sizing: border-box;
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #9e9e9e;
    position: absolute;
    top: 2px;
    left: 0px;
    border-radius: 30px;
}

#page_search_detail .dtlsrch_check input:checked + p::after {
    display: block;
    content: "";
    width: 21px;
    height: 21px;
    background-image: url(../img/check.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 1px;
    left: 0;
}

#page_search_detail .lower_limit,
#page_search_detail .upper_limit {
    display: flex;
    align-items: center;
}

#page_search_detail .lower_limit {
    margin-right: 30px;
}

#page_search_detail .dtlsrch_box .search_range .c-selectbox > p {
    margin-right: 30px;
}

#page_search_detail span.multiselect-native-select {
    width: 100%;
}

#page_search_detail .btn-group,
#page_search_detail .btn-group-vertical {
    width: 100%;
    max-width: 320px;
}

#page_search_detail .btn-group-vertical > .btn,
#page_search_detail .btn-group > .btn {
    width: 100%;
    height: 40px;
    border: 1px solid #cccccc;
    border-radius: 0;
    background: url(../img/icon-selectbox.png) no-repeat right 15px center, #fff;
    background-size: 11px;
    padding-right: 30px;
    text-align: justify;
    font-size: 14px;
    color: black !important;
    border-radius: 5px;
}

#page_search_detail .dropdown-toggle::after {
    display: none !important;
}

#page_search_detail span.multiselect-selected-text {
    margin-left: 18px;
}

#page_search_detail .btn-group-vertical > .btn:hover,
#page_search_detail .btn-group > .btn:hover {
    opacity: 1;
}

#page_search_detail .dropdown-menu {
    display: none;
    border: 1px solid #cccccc;
    background: #fff;
    z-index: 100;
}

#page_search_detail .dropdown-menu.show {
    display: block;
}

#page_search_detail .multiselect-container {
    padding: 10px 0 !important;
}

#page_search_detail .multiselect-container a {
    font-size: 14px;
    color: black;
}

#page_search_detail .multiselect-container > li > a > label {
    padding: 3px 20px 3px 10px !important;
}

#page_search_detail .dtlsrch_comm {
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#page_search_detail .dtlsrch_comm label p::before {
    top: 3px;
    left: 0;
}

#page_search_detail .dtlsrch_comm input:checked + p::after {
    top: 3px;
    left: 0;
}

#page_search_detail .dtlsrch_comm .multiselect-container input {
    display: inline;
    position: absolute;
    top: 6px;
    left: 5px;
}

#page_search_detail .dtlsrch_comm .c-selectbox {
    width: 390px;
}

#page_search_detail .dtlsrch_comm span.multiselect-native-select {
    top: 0;
}

#page_search_detail .dtlsrch_comm .multiselect-container > li > a > label {
    position: relative;
    padding-left: 28px !important;
}

#page_search_detail .dtlsrch_comm .disabled {
    cursor: not-allowed;
    background: #3333330a !important;
    color: gray !important;
}

#page_search_detail .dtlsrch_free input {
    width: 100%;
}

#page_search_detail .dtlsrch_like .select2-container {
    width: 100% !important;
}

#page_search_detail .dtlsrch_like .select2-selection--multiple {
    border: 1px solid #cccccc !important;
    min-height: 40px !important;
    border-radius: 30px;
}

#page_search_detail .dtlsrch_like .select2-selection__rendered {
    margin-top: 6px !important;
}

#page_search_detail .dtlsrch_like .select2-selection__choice {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

/* =============== お相手からのいいね！ =============== */
#nice_you_list .col3 {
    justify-content: space-between;
}

/* =============== お知らせ一覧 =============== */
#page_news .news_list {
    width: 100%;
    padding-bottom: 35px;
}

#page_news .news_list li {
    width: 100%;
    padding: 25px 0;
}

#page_news .news_list li.pc {
    border-bottom: 1px dotted #ccc;
}

#page_news .news_list li.pc:last-of-type {
    border-bottom: none;
}

#page_news .news_date {
    font-size: 15px;
    font-weight: bold;
    color: #8c8d8e;
    margin-bottom: 12px;
}

#page_news .news_title {
    word-break: break-all;
    font-size: 17px;
    font-weight: bold;
    color: #757575;
    line-height: 1.7;
}

/* =============== お知らせ詳細 =============== */
#page_news_detail .news_article {
    padding-bottom: 30px;
    margin-bottom: 32px;
    border-bottom: 1px solid #dcdcdc;
    line-height: 1.7;
}

#page_news_detail .news_article h1 {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

#page_news_detail .news_article p {
    margin-bottom: 35px;
}

/* =============== 各種設定 =============== */
#page_preferences .p-mypagetop__preferencearea {
    box-sizing: border-box;
    padding: 0 30px;
}

#page_preferences .p-mypagetop__preferencearea table {
    margin: 0;
}

#page_preferences .c-btn--medium {
    width: 260px;
    margin-bottom: 20px;
    line-height: 43px;
}

#page_preferences .p-mypagetop__preferencearea table tr:last-child {
    border-bottom: none;
}

/* =============== あしあと =============== */
#page_mypage-footprint .c-disabled {
    margin-top: 70px;
    margin-bottom: 140px;
}

/* =============== LIKEトップ =============== */
#page_like .like_lists {
    width: 100%;
}

#page_like .like_list {
    width: 100%;
    padding: 30px;
    background-color: #e0f4fa;
    margin-bottom: 30px;
}

#page_like .lklst_head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#page_like .lklst_head p {
    padding-left: 30px;
    position: relative;
    font-size: 20px;
    font-weight: 500;
}

#page_like .lklst_icon {
    position: absolute;
    left: 0;
    height: auto;
}

#page_like .lklst_1 .lklst_icon {
    width: 18px;
    top: 10px;
}

#page_like .lklst_2 .lklst_icon {
    width: 18px;
    top: 9px;
}

#page_like .lklst_3 .lklst_icon {
    width: 20px;
    top: 10px;
}

#page_like .lklst_4 .lklst_icon {
    width: 20px;
    top: 8px;
}

#page_like .lklst_5 .lklst_icon {
    width: 20px;
    top: 7px;
}

#page_like .lklst_6 .lklst_icon {
    width: 22px;
    top: 7px;
}

#page_like .lklst_head a {
    padding: 0 20px;
    background-color: #888888;
    border-radius: 17.5px;
    font-size: 14px;
    color: white;
    line-height: 32px;
}

#page_like .lklst_cont {
    width: 100%;
    padding: 20px;
    background-color: white;
}

#page_like .like_slider {
    width: 100%;
}

#page_like .like_slider .swiper-slide {
    height: auto;
}

/* LIKEアイテム（一覧ページも共通） */
.like_item .loading-wrapper {
    position: relative;
    height: 100%;
}

.like_item .loading {
    position: absolute;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.like_item .loading img {
    display: block;
    margin: auto;
    width: 2em;
}

.like_item a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(218, 218, 218, 0.8);
}

.like_item .like_thum {
    width: 100%;
    height: 80px;
}

.like_item .like_info {
    padding: 5px 9px;
}

.like_item .like_info p {
    line-height: 1.5;
    font-weight: 500;
}

.like_item .like_name {
    font-size: 11px;
    color: #363636;
}

.like_item .like_numofppl {
    font-size: 11px;
    color: #8b8b8b;
}

/* =============== LIKE一覧 =============== */

#page_like_list .like_lists {
    padding: 30px;
    background-color: #e0f4fa;
}

#page_like_list .lklst_head {
    justify-content: space-between;
    position: relative;
    margin-bottom: 40px;
}

#page_like_list .lklst_head p {
    line-height: 1.6;
    font-size: 23px;
    font-weight: 500;
}

#page_like_list .lklst_head button {
    width: 150px;
    height: 35px;
    border-radius: 17.5px;
    background-color: #404040;
    font-size: 14px;
    color: white;
    position: absolute;
    top: 0;
    right: 0;
}

#page_like_list #likecate_list {
    width: 100%;
    margin-bottom: 20px;
}

#page_like_list #likecate_list li {
    width: 18%;
    margin-right: 2.5%;
    margin-bottom: 20px;
}

#page_like_list #likecate_list li:nth-of-type(5n) {
    margin-right: 0;
}

#page_like_list .c-pagenation {
    border-top: none;
    margin-top: 0;
}

.like_img {
    height: 133px;
    object-fit: cover;
    object-position: 50%;
    width: 133px;
}

/* Like項目追加ポップアップ */
#page_like_list .addlkmdl_wrap {
    padding: 150px 0;
}

#page_like_list .addlike_modal {
    width: 900px;
    height: auto;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 8px;
    background-color: white;
    text-align: center;
    padding: 90px 55px;
    position: relative;
}

#page_like_list .addlike_modal .modaltitle::before {
    width: 178px;
    left: -200px;
}

#page_like_list .addlike_modal .modaltitle::after {
    width: 178px;
    right: -200px;
}

#page_like_list .addlike_modal form {
    width: 100%;
}

#page_like_list .addlike_modal form dl {
    display: flex;
    flex-wrap: wrap;
    width: 559px;
    margin: 30px auto;
}

#page_like_list .addlike_modal form dt,
#page_like_list .addlike_modal form dd {
    margin-bottom: 30px;
}

#page_like_list .addlike_modal form dt {
    box-sizing: border-box;
    width: 95px;
    line-height: 45px;
    padding-right: 12px;
    text-align: right;
    font-size: 15px;
    font-weight: bold;
}

#page_like_list .addlike_modal form dd {
    width: calc(100% - 95px);
}

#page_like_list .addlike_modal .c-selectbox select {
    margin: 0;
    width: 100%;
    height: 45px;
    border: 1px solid #dcdcdc;
}

#page_like_list .addlike_modal input[type="text"] {
    box-sizing: border-box;
    height: 45px;
    border: 1px solid #dcdcdc;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 500;
}

#page_like_list .addlike_modal input[type="text"]::placeholder {
    font-size: 15px;
    font-weight: 500;
}

#page_like_list .addlk_title input {
    width: 100%;
}

#page_like_list .addlk_title input::placeholder {
    color: #39393a;
}

#page_like_list .addlk_pic {
    display: flex;
    flex-wrap: wrap;
}

#page_like_list .addlk_pic > input {
    width: calc(100% - 95px);
    background-color: #eeeeee;
}

#page_like_list .addlk_pic > input::placeholder {
    color: #626365;
}

#page_like_list .addlk_pic input[type="file"] {
    display: none;
}

#page_like_list .addlk_pic label {
    box-sizing: border-box;
    display: block;
    width: 95px;
    line-height: 45px;
    background-color: #666666;
    position: relative;
    text-align: center;
    font-size: 14px;
    color: white;
    padding-left: 25px;
    cursor: pointer;
}

#page_like_list .addlk_pic label img {
    width: 19px;
    height: auto;
    position: absolute;
    top: 15px;
    left: 19px;
}

#page_like_list .addlk_pic > p {
    margin-top: 10px;
    line-height: 1.6;
    font-size: 12px;
    color: #202020;
}

#page_like_list .addlike_modal form > button {
    display: block;
    width: 220px;
    height: 45px;
    margin: 0 auto;
    border-radius: 22.5px;
    background-color: #00ade8;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

#page_like_list .notes_addlk {
    font-size: 14px;
    margin-bottom: 40px;
}

/* Like項目追加申請完了ポップアップ */
#page_like_list .addlkcmpmdl_wrap {
    padding: 150px 0;
}

#page_like_list .addlikecomp_modal {
    width: 900px;
    height: auto;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 8px;
    background-color: white;
    text-align: center;
    padding: 90px 55px;
    position: relative;
}

#page_like_list .addlkcmp_cont {
    width: 500px;
    margin: 0 auto;
    padding-top: 40px;
    text-align: center;
}

#page_like_list .addlkcmp_cont p {
    margin-bottom: 30px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}

#page_like_list .addlkcmp_cont button {
    width: 220px;
    height: 45px;
    border-radius: 22.5px;
    background-color: #00ade8;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

/* =============== LIKE詳細 =============== */

#page_like_detail .l-main {
    background-color: transparent;
}

/*LIKE詳細エリア*/
#page_like_detail .likedetail_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 100%;
    background-color: #f2f2f2;
    margin: 0 0 25px;
    padding: 19px;
    box-sizing: border-box;
}

#page_like_detail .likedetail_cont {
    width: 528px;
}

#page_like_detail .likedetail_cate {
    margin-bottom: 11px;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
}

#page_like_detail .likedetail_cate img {
    position: relative;
    height: auto;
    margin-right: 7px;
}

#page_like_detail .lkdtlcate_sport img {
    width: 16px;
    top: 2px;
}

#page_like_detail .likedetail_name {
    width: 340px;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 20px;
    font-weight: bold;
}

#page_like_detail .likedetail_num {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 19px;
    line-height: 1.6;
    background-color: #fff;
    font-size: 14px;
    font-weight: bold;
}

#page_like_detail .likedetail_num span {
    color: #00aee8;
}

#page_like_detail .likedetail_top .like_add_btn {
    width: 182px;
    position: absolute;
    top: 30px;
    right: 19px;
}

#page_like_detail .like_added {
    background-color: #a8a8a8 !important;
}

/*検索ボタン＋並び替えボタン*/
#page_like_detail .likedetail_search {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#page_like_detail .likedetail_srcbtn {
    position: relative;
    padding: 6px 20px 7px 46px;
    border: 1px solid #cccccc;
    border-radius: 19.5px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
}

#page_like_detail .likedetail_srcbtn:hover {
    background-color: #a8a8a8;
}

#page_like_detail .likedetail_srcbtn img {
    width: 17px;
    height: auto;
    position: absolute;
    top: 10px;
    left: 19px;
}

#page_like_detail .like_add_btn {
    width: 200px;
    height: 39px;
    border-radius: 19.5px;
    margin-bottom: 13px;
    font-size: 15px;
    font-weight: 500;
}

#page_like_detail select {
    padding-right: 30px;
}

/*ユーザー一覧*/
#page_like_detail .c-profileboxarea {
    margin-top: 50px;
}

/* =============== プロフィール編集 =============== */

/* 共通 */
.edit_note {
    width: 100%;
    margin-bottom: 15px;
    padding: 1px 10px;
    border-radius: 19px;
    background-color: #e57676;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #fff !important;
}

/* 背景色変更（PCでは基本非表示） */
#btn_color_change {
    position: absolute;
    top: 145px;
    right: 6px;
    z-index: 1;
    display: inline-block;
    letter-spacing: 0;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
}

#btn_color_change img {
    position: relative;
    top: 1px;
    width: 11px;
    height: auto;
    margin-right: 2px;
}

#color_change {
    justify-content: space-between;
    width: 94.533%;
    max-width: 355px;
    margin: auto;
    padding: 92px 0;
}

#color_change label {
    display: block;
    width: 48.942%;
    height: 174px;
    margin-bottom: 7px;
}

#color_change input {
    display: none;
}

#color_change label div {
    width: 100%;
    height: 100%;
}

/* スライド（PCでは基本非表示） */
.slide_profedit {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background-color: #fff;
    transform: translateX(100%);
    transition: 0.25s ease-in-out;
}

.slide_profedit.open {
    transform: translateX(0);
}

.slide_profedit .ttl_spui {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    background-color: #fff;
}

/* 推しポイント */
#appeal_btns {
    width: 100%;
}

#edit_appeal_point .open_sld {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 13px;
    padding: 17px 20px 17px 38px;
    border: 1px solid rgba(188, 188, 188, 0.5);
    border-radius: 4px;
    background-color: #fff;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
}

#edit_appeal_point .open_sld::before,
#edit_appeal_point .open_sld::after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    content: "";
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
}

#edit_appeal_point .open_sld::after {
    right: 10px;
    width: 6px;
    height: 9px;
    background-image: url(../img/arrow_right_blue.png);
}

#btn_appeal_select {
    color: #e85c5c;
}

#btn_appeal_select::before {
    left: 15px;
    width: 17px;
    height: 17px;
    background-image: url(../img/icon_add.png);
}

.btn_change_appeal {
    color: #696969;
}

.btn_change_appeal::before {
    left: 15px;
    width: 15px;
    height: 15px;
}

#appeal_select {
    width: 100%;
    min-height: 100%;
    padding: 105px 19px;
    background-color: #f5f5f5;
}

#appeal_select label {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

#appeal_select input[type="checkbox"] {
    display: none;
}

#appeal_select label p {
    position: relative;
    width: 100%;
    padding: 15px 30px 15px 36px;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #464646;
}

#appeal_select label p::before,
#appeal_select label p::after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    content: "";
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
}

#appeal_select label p::before {
    left: 14px;
    width: 15px;
    height: 15px;
}

#appeal_inputs {
    width: 100%;
}

.appeal_input {
    display: block;
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    padding: 0 14px;
    border: 1px solid rgba(188, 188, 188, 0.5) !important;
    border-radius: 4px !important;
    background-color: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #696969;
}

.appeal_input::placeholder {
    color: #cdcdcd;
}

#appeal_inputs p {
    font-size: 12px;
    font-weight: 500;
    color: #696969;
}

/* 推しポイントアイコン（他ページ共通） */
.appl_point_1::before {
    background-image: url(../img/sp_prof/appeal_point/icon_meal_b.png);
}

input:checked + .appl_point_1::before {
    background-image: url(../img/sp_prof/appeal_point/icon_meal_w.png);
}

.appl_point_2::before {
    background-image: url(../img/sp_prof/appeal_point/icon_car_b.png);
}

input:checked + .appl_point_2::before {
    background-image: url(../img/sp_prof/appeal_point/icon_car_w.png);
}

.appl_point_3::before {
    background-image: url(../img/sp_prof/appeal_point/icon_golf_b.png);
}

input:checked + .appl_point_3::before {
    background-image: url(../img/sp_prof/appeal_point/icon_golf_w.png);
}

.appl_point_4::before {
    background-image: url(../img/sp_prof/appeal_point/icon_plane_b.png);
}

input:checked + .appl_point_4::before {
    background-image: url(../img/sp_prof/appeal_point/icon_plane_w.png);
}

.appl_point_5::before {
    background-image: url(../img/sp_prof/appeal_point/icon_bat_b.png);
}

input:checked + .appl_point_5::before {
    background-image: url(../img/sp_prof/appeal_point/icon_bat_w.png);
}

.appl_point_6::before {
    background-image: url(../img/sp_prof/appeal_point/icon_tent_b.png);
}

input:checked + .appl_point_6::before {
    background-image: url(../img/sp_prof/appeal_point/icon_tent_w.png);
}

.appl_point_7::before {
    background-image: url(../img/sp_prof/appeal_point/icon_pot_b.png);
}

input:checked + .appl_point_7::before {
    background-image: url(../img/sp_prof/appeal_point/icon_pot_w.png);
}

.appl_point_8::before {
    background-image: url(../img/sp_prof/appeal_point/icon_hand_b.png);
}

input:checked + .appl_point_8::before {
    background-image: url(../img/sp_prof/appeal_point/icon_hand_w.png);
}

.appl_point_9::before {
    background-image: url(../img/sp_prof/appeal_point/icon_cleaner_b.png);
}

input:checked + .appl_point_9::before {
    background-image: url(../img/sp_prof/appeal_point/icon_cleaner_w.png);
}

.appl_point_10::before {
    background-image: url(../img/sp_prof/appeal_point/icon_baby_b.png);
}

input:checked + .appl_point_10::before {
    background-image: url(../img/sp_prof/appeal_point/icon_baby_w.png);
}

.appl_point_11::before {
    background-image: url(../img/sp_prof/appeal_point/icon_arm_b.png);
}

input:checked + .appl_point_11::before {
    background-image: url(../img/sp_prof/appeal_point/icon_arm_w.png);
}

.appl_point_12::before {
    background-image: url(../img/sp_prof/appeal_point/icon_money_b.png);
}

input:checked + .appl_point_12::before {
    background-image: url(../img/sp_prof/appeal_point/icon_money_w.png);
}

#appeal_select label p::after {
    right: 15px;
    width: 14px;
    height: 10px;
    background-image: url(../img/check_white.png);
}

#appeal_select input[type="checkbox"]:checked + p {
    background-color: #00a2e5;
    color: #fff;
}

#appeal_select .prf_edt_btn {
    margin-top: 55px;
}

/* =============== コミュニティ編集 =============== */
#page_community_edit .p-mypagetop__title .left img {
    width: 16px;
}

#page_community_edit #commuedit_list {
    margin-bottom: 60px;
}

#page_community_edit #commuedit_list li {
    align-items: center;
    margin-bottom: 25px;
    padding: 25px 20px;
    border-radius: 6px;
}

#page_community_edit #commuedit_list li:last-of-type {
    margin-bottom: 0;
}

#page_community_edit .commuedit_l {
    width: 380px;
}

#page_community_edit .commuedit_check {
    display: none;
}

#page_community_edit .commuedit_lbl {
    position: relative;
    align-items: center;
    cursor: pointer;
    padding-left: 31px;
}

#page_community_edit .commuedit_lbl::before,
#page_community_edit .commuedit_lbl::after {
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    margin: auto;
    border-radius: 50%;
}

#page_community_edit .commuedit_lbl::before {
    left: 0;
    display: block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1px solid #b5b5b5;
}

#page_community_edit .commuedit_lbl::after {
    left: 5px;
    display: none;
    width: 8px;
    height: 8px;
    background-color: #00d3f2;
}

#page_community_edit .commuedit_check:checked + .commuedit_lbl::after {
    display: block;
}

#page_community_edit .community_icon {
    position: relative;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    border-radius: 50%;
}

#page_community_edit .community_icon img {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 14px;
}

#page_community_edit .commuedit_lbl p {
    font-size: 14px;
    font-weight: 500;
    color: #3b3232;
}

#page_community_edit .commuedit_r {

}

#page_community_edit .commuedit_r label {
    position: relative;
    display: block;
}

#page_community_edit .commuedit_r label::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    content: "";
    display: block;
    width: 11px;
    height: 9px;
    margin: auto;
    background-image: url(../img/icon-selectbox.png);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

#page_community_edit .commuedit_r select {
    width: 100%;
    height: 40px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #39393A;
    cursor: pointer;
}

#page_community_edit .commuedit_r select.disabled {
    cursor: not-allowed;
    background-color: transparent;
}

#page_community_edit .errortext {
    color: #e37070;
    display: block;
    font-size: 90%;
    margin-bottom: 1em;
}

#page_community_edit #btn_commuedit {
    width: 240px;
    height: 40px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 500;
}

/* =============== コミュニティ編集完了 =============== */
#page_community_edit_complete .c-btn--wide {
    width: 220px;
    line-height: 39px;
}

/* =============== 精的ページ =============== */
main.page_static .static-np-main__box {
    text-align: left;
}

main.page_static .red {
    color: #c20007;
}

main.page_static .static-white-bk img {
    margin: 25px auto;
}

main.page_static .static-white-bk .sub-title:before {
    display: inline-block;
    content: "";
    width: 7px;
    height: 16px;
    line-height: 1;
    margin-bottom: -2px;
    background: #60D0B0;
    border-radius: 4px;
    margin-right: 15px;
}

main.page_static .static-white-bk .info {
    line-height: 2;
}

main.page_static .static-white-bk .info_gray {
    color: #858585;
    line-height: 2;
    margin-bottom: 10px;
}

main.page_static .static-white-bk .sub-title {
    height: 16px;
    line-height: 1;
    font-size: 16px;
    margin: 5px 0 15px;
}

@media screen and (max-width: 834px) {
    /* --------------------- SP --------------------- */
    /* =============== 共通 =============== */
    /* ===== 全体 ===== */
    main {
        /* 一旦コメントアウト（新追従バーを全ページまとめて表示させる際にコメントはずす） */
        padding-bottom: 74px;
    }

    .p-mypage__main.container_wide {
        width: 100% !important;
    }
    a#title_back img {
        float: left;
        width: 10px;
        position: relative;
        left: 7px;
        top: 18px;
    }

    .sp_cont {
        width: 95%;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sp_cont p {
        line-height: 1.7em;
        color: #484848;
    }

    .title {
        font-size: 16px;
        font-weight: 500;
        padding-bottom: 6px;
        display: block;
    }

    .mb0 {
        margin-bottom: 0;
    }

    .mb60 {
        margin-bottom: 60px !important;
        display: block;
    }

    .l-main__inner {
        margin-top: 50px;
    }

    .l-main {
        padding-top: 0;
    }

    /* カラーヘッダー */
    #color_header {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
    }

    /* ===== ヘッダー ===== */
    /* 一旦コメントアウト（新追従バーを全ページまとめて表示させる際にコメントはずす） */
    header {
        display: none;
    }

    /* ===== フッター ===== */
    .l-footer {
        display: none;
    }

    /* ===== SP用ボタンヘッダー ===== */
    .sp_btns_header {
        display: block;
    }

    /* ===== 戻るボタン（追従） ===== */
    .pg_back_btn_fl {
        position: fixed;
        top: 35px;
        left: 15px;
        z-index: 1000;
        display: none;
        width: 37px;
        height: 37px;
        border-radius: 50%;
        background-color: rgb(0 0 0 / 41%);
    }

    .pg_back_btn_fl img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 13px;
        display: block;
        width: 10px;
        height: auto;
        margin: auto;
    }

    /* ===== ページタイトル ===== */
    .p-mypagetop__title {
        display: none;
    }

    /* =============== ユーザーリスト共通 =============== */
    /* ===== 全体 ===== */
    .list_box {
        position: relative;
    }

    /* ===== 検索リンク ===== */
    .search_btn_sp {
        position: absolute;
        top: 0;
        right: 10px;
        padding-left: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #979797;
        letter-spacing: 0.4px;
    }

    .search_btn_sp img {
        position: relative;
        top: 1px;
        width: 14px;
        height: auto;
        margin-right: 5px;
    }

    /* ===== タブ ===== */
    #u_tab_cont {
        position: relative;
        width: 100%;
        height: 71px;
    }

    #u_list_tab {
        position: absolute;
        top: 0;
        left: 0;
        overflow: scroll;
        width: 100%;
        padding: 15px 0;
        margin-bottom: 6px;
        background-color: #fff;
    }

    #u_list_tab.fixed {
        position: fixed;
        z-index: 1000;
    }

    #u_list_tab ul {
        width: 590px;
        padding: 0 20px;
    }

    #u_list_tab ul li {
        width: 83px;
        margin-right: 10px;
    }

    #u_list_tab ul li:last-of-type {
        margin-right: 0;
    }

    #u_list_tab li a {
        display: block;
        width: 100%;
        border-radius: 18px;
        background-color: #d1d1d1;
        text-align: center;
        line-height: 35px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
    }

    #u_list_tab li a img {
        position: relative;
        height: auto;
    }

    #u_list_tab .all_comm img {
        top: 2px;
        width: 15px;
    }

    #u_list_tab .love img {
        top: 2px;
        width: 17px;
    }

    #u_list_tab .marriage img {
        top: 1px;
        width: 14px;
    }

    #u_list_tab .friend img {
        top: 2px;
        width: 15px;
    }

    #u_list_tab .meal img {
        top: 1px;
        width: 16px;
    }

    #u_list_tab .experience img {
        top: 1px;
        width: 16px;
    }

    #u_list_tab .all_comm:hover {
        background-color: #0caee8;
    }

    #u_list_tab .love:hover {
        background-color: #f1b2b5;
    }

    #u_list_tab .marriage:hover {
        background-color: #e97676;
    }

    #u_list_tab .friend:hover {
        background-color: #80c8b9;
    }

    #u_list_tab .meal:hover {
        background-color: #edae74;
    }

    #u_list_tab .experience:hover {
        background-color: #ae92b7;
    }

    /* ===== 追従ボタン ===== */
    .l-footer__pagetop {
        display: none !important;
    }

    /* ===== 並べ替え ===== */
    .user_list_cont .search_box {
        justify-content: center !important;
    }

    .user_list_cont .lkcmmsrch_sort {
        width: 100%;
        max-width: 340px;
    }

    .user_list_cont .lkcmmsrch_sort p {
        width: 67px;
        padding-right: 0;
        font-size: 13px;
        font-weight: 500;
        color: #979797;
    }

    .user_list_cont .lkcmmsrch_sort .c-selectbox {
        width: calc(100% - 67px);
    }

    .user_list_cont .lkcmmsrch_sort .c-selectbox select {
        width: 100%;
        border: 1px solid #d1d1d1;
        border-radius: 18px;
        color: #616161;
    }

    /* ===== ユーザー ===== */
    .user_list_cont .c-profilebox {
        margin-bottom: 25px !important;
    }

    .user_list_cont .c-iconarea {
        max-width: 133px;
    }

    .user_list_cont .c-iconarea .icon {
        width: 23px;
        height: 23px;
    }

    .user_list_cont .c-iconarea .icon img {
        width: 12px;
    }

    /* ===== ユーザーリスト（ボタンあり） ===== */
    .user_list_with_btns {
        max-width: 340px;
        margin: 0 auto;
    }

    .card_with_btns {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 160px;
        margin: 0 0 33px !important;
    }

    .user_img {
        width: 80px;
        height: 80px;
    }

    .card_with_btns .card_name {
        margin-top: 3px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
    }

    .card_with_btns .card_info {
        width: 135px;
        height: auto;
        margin: auto;
        font-size: 14px;
        font-weight: 500;
    }

    .card_with_btns .c-iconarea {
        width: 136px !important;
        margin: 5px auto 0;
    }

    .card_with_btns .c-iconarea .icon {
        width: 22.5px;
        height: 22.5px;
    }

    .card_with_btns .c-iconarea .icon img {
        width: 10px;
    }

    .card_with_btns .c-iconarea .icon.gray {
        background: #ddd;
    }

    /* iPhone 6/7/8 より小さいサイズ用 */
    @media screen and (max-width: 374px) {
        .card_with_btns {
            width: 140px;
        }

        .card_with_btns .user_img {
            width: 130px;
            height: 130px;
        }
    }

    /* ===== ログインステータスマーク ===== */
    .status_mark {
        /* display: inline-block; */
        display: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .status_mark.status_1 {
        background-color: #40bd77;
    }

    .status_mark.status_2 {
        background-color: #efd634;
    }

    .status_mark.status_3 {
        background-color: #efa734;
    }

    .status_mark.status_4 {
        background-color: #a64d79;
    }

    .status_mark.status_9 {
        background-color: #535353;
    }

    /* ===== ポップアップ ===== */
    /* 活動費カラーアイコン説明ポップアップ */
    #openCommColorModal {
        right: 20px;
        bottom: 100px;
        width: 50px;
        height: 50px;
        background: #00c3f6;
        border-radius: 50%;
        padding: 0;
        box-shadow: 0 0 16px rgba(178, 178, 178, 0.5);
    }

    #openCommColorModal img.-pc {
        display: none;
    }

    #openCommColorModal img.-sp {
        position: absolute;
        top: 14px;
        left: 0;
        right: 0;
        display: block;
        width: 17px;
        margin: auto;
    }

    #openCommColorModal span {
        display: none;
    }

    .commColorModalWrapper {
        width: 300px;
        border-radius: 20px;
    }

    .commColorModalContents ul li {
        margin-bottom: 20px;
        letter-spacing: 0.05em;
        font-size: 13px;
    }

    .commColorModalContents ul li::before {
        top: 6px;
    }

    #closeCommColorModal {
        bottom: 50px;
        font-size: 13px;
    }

    #closeCommColorModal img {
        width: 14px;
        margin: 0 auto 6px;
    }

    /* コミュニティ変更ポップアップ */
    .cnt_lk_modal {
        width: 73%;
        padding-top: 51px;
    }

    .cnt_lk_modal p {
        font-size: 15px;
    }

    .cnt_lk_modal .button {
        width: 220px;
        font-size: 14px;
    }

    /* ===== チュートリアル ===== */
    #tutorial {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100000;
        display: block;
        width: 100%;
        height: 100%;
    }

    #tutorial::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        content: "";
        display: block;
        width: 100%;
        background-color: #fff;
        opacity: 0.9;
    }

    #w-tutorial {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100000;
        display: block;
        width: 100%;
        height: 100%;
    }

    #w-tutorial::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        content: "";
        display: block;
        width: 100%;
        background-color: #000;
        opacity: 0.9;
    }


    #meal-tutorial {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100000;
        display: block;
        width: 100%;
        height: 100%;
    }

    #meal-tutorial::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        content: "";
        display: block;
        width: 100%;
        background-color: #000;
        opacity: 0.9;
    }

    .meal-tutorial_end {
        width: 110%;
        margin-left: -10px;
        height: 35px !important;
        border-radius: 30px;
        line-height: 30px;
        font-size: 15px;
        transition: 0.25s;
        background-color: #00D3F3;
    }

    .tutorial_slide {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        width: 100%;
        height: 100%;
    }

    #tutorial_1 {
        display: block;
    }

    .tutorial_cont {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 20px;
        text-align: center;
    }

    .tutorial_icon {
        width: 55px;
        height: auto;
        margin-bottom: 13px;
    }

    .tutorial_ttl {
        margin-bottom: 8px;
        font-size: 20px;
        font-weight: bold;
        color: #222;
    }

    .tutorial_desc {
        margin-bottom: 21px;
        line-height: 1.5;
        font-size: 13px;
        color: #595959;
    }

    .w-tutorial_icon {
        width: auto;
        height: auto;
        display: block;
        margin: 15px auto;
    }

    .w-tutorial_ttl {
        margin-bottom: 8px;
        font-size: 18px;
        color: #fff;
    }

    .w-tutorial_desc {
        margin-bottom: 21px;
        line-height: 1.5;
        font-size: 13px;
        color: #4A4A4A;
    }

    .w-tutorial_box {
        padding: 30px;
        border-radius: 5px;
        background-color: #fff;
    }

    .w-tutorial_next,
    .w-tutorial_end {
        width: 100%;
        height: 35px !important;
        margin: 30px auto 0px auto;
        border-radius: 30px;
        line-height: 30px;
        font-size: 15px;
        transition: 0.25s;
        background-color: #00D3F3;
    }

    .meal-tutorial_next {
        width: 100%;
        height: 35px !important;
        margin: 30px auto 0px auto;
        border-radius: 30px;
        line-height: 30px;
        font-size: 15px;
        transition: 0.25s;
        background-color: #00D3F3;
    }

    .tutorial_next,
    .tutorial_end {
        width: 280px;
        height: 43px;
        margin: 0 auto;
        border-radius: 35px;
        line-height: 30px;
        font-size: 15px;
        transition: 0.25s;
    }

    .tutorial_next {
        background-color: #44c8f3;
    }

    .tutorial_end {
        background-color: #aaa;
        box-shadow: 0 2px #8e8a8a;
    }

    .tutorial_next:hover,
    .tutorial_end:hover {
        opacity: 1;
        transform: translateY(2px);
        transition: 0.25s;
    }



    .tutorial_skip {
        position: absolute;
        top: 30px;
        right: 15px;
        z-index: 20;
        background-color: transparent;
        font-size: 13px;
        font-weight: 500;
        color: #acacac;
    }

    .tutorial_arrow {
        position: absolute;
        z-index: 5;
        height: auto;
    }

    .tutorial_dummy_btn {
        position: absolute;
        z-index: 5;
        height: auto;
    }

    /* ユーザー詳細ページ用 */
    .page_userdetail #tutorial::before {
        opacity: 0.95;
    }

    .page_userdetail .tutorial_arrow {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 46px;
        margin: auto;
        transform: translate(85px, -115px);
    }

    .page_userdetail #tutorial_1 .tutorial_dummy_btn {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 37px;
        margin: auto;
        transform: translate(132px, -160px);
    }

    .page_userdetail #tutorial_2 .tutorial_dummy_btn {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 132px;
        margin: auto;
        transform: translate(82px, -163px);
    }

    .page_userdetail .tutorial_end {
        background-color: #00a2e5;
        box-shadow: 0 2px #0183b9;
    }

    .page_userdetail .tutorial_end:hover {
        box-shadow: 0 0 #0183b9;
    }

    /* コミュニティ（お相手を探す）ページ用 */
    #page_community #tutorial::before {
        bottom: 80px;
    }

    #page_community #tutorial.tutorial_community::before {
        bottom: auto;
        height: 103px;
    }

    #page_community #tutorial.tutorial_community::after {
        position: absolute;
        top: 190px;
        bottom: 80px;
        left: 0;
        right: 0;
        z-index: 0;
        content: "";
        display: block;
        width: 100%;
        background-color: #fff;
        opacity: 0.9;
    }

    #page_community #tutorial_1 .tutorial_arrow {
        left: 9%;
        bottom: 88px;
        width: 55px;
    }

    #page_community #tutorial_2 .tutorial_arrow {
        left: 29%;
        bottom: 88px;
        width: 55px;
    }

    #page_community #tutorial_3 .tutorial_arrow {
        left: 46%;
        bottom: 88px;
        width: 27px;
    }

    #page_community #tutorial_4 .tutorial_arrow {
        top: 190px;
        left: 190px;
        right: 0;
        width: 27px;
        margin: auto;
    }

    #page_community #tutorial_5 .tutorial_arrow {
        right: 24%;
        bottom: 88px;
        width: 27px;
    }

    #page_community #tutorial_6 .tutorial_arrow {
        right: 7.5%;
        bottom: 88px;
        width: 49px;
    }

    /* =============== マイページTOP =============== */
    #page_mypage-top .like_add_btn {
        margin: 0 auto;
        width: 80%;
        min-width: 130px;
    }

    #page_mypage-top .p-mypagetop__newsarea .news a {
        width: 100%;
    }

    #mypage_sp {
        background-color: #f9f9f9;
    }

    #mypage_sp > div {
        margin-bottom: 10px;
        background-color: #fff;
    }

    #mypage_photo {
        padding: 5px 0 28px;
        text-align: center;
    }

    #sp_user_img_cont {
        position: relative;
        width: 130px;
        height: 130px;
        margin: 0 auto 13px;
    }

    #sp_user_img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 50%;
    }

    #btn_profile_edit {
        position: absolute;
        right: 1px;
        bottom: -7px;
    }

    #btn_profile_edit img {
        width: 33.5px;
        height: auto;
        height: auto;
        display: none;
    }

    #mypage_photo h2 {
        margin-bottom: 3px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: #353535;
    }

    #mypage_photo a {
        font-size: 13px;
        font-weight: 500;
        color: #00a2e5;
    }

    #mypage_info {
        padding: 25px 0 20px;
    }

    #mypage_info .flex {
        justify-content: center;
    }

    #mypage_info .myp_info_col {
        width: 111px;
        margin-bottom: 10px;
        text-align: center;
    }

    #mypage_info p {
        line-height: 1.7;
    }

    #mypage_info .myp_info_term {
        font-size: 11px;
        font-weight: 500;
        color: #7b7b79;
        padding-bottom: 1px;
    }

    #mypage_info .myp_info_term img {
        position: relative;
        height: auto;
    }

    #myp_info_nice .myp_info_term img {
        top: 1px;
        width: 11px;
    }

    #myp_info_st .myp_info_term img {
        top: 2px;
        width: 9px;
    }

    #myp_info_point .myp_info_term img {
        top: 3px;
        width: 11px;
    }

    #mypage_info .myp_info_desc {
        font-size: 14px;
        font-weight: 500;
        color: #545454;
        line-height: 1.4;
        margin-top: 4px;
    }

    #mypage_info .myp_info_desc span {
        display: block;
        font-size: 12px;
        line-height: 1.4;
        margin-top: 5px;
        letter-spacing: -0.6px;
    }

    #myp_info_st .myp_info_desc {
        letter-spacing: 0.4px;
        color: #1f1f1f;
        line-height: 1.4em;
    }

    #mypage_sp .allow-small {
        font-size: 11px;
        font-weight: 800;
    }

    #mypage_links {
        padding: 20px 0;
    }

    #myp_links {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }

    #myp_links li {
        width: calc(100% / 3);
    }

    #myp_links li a {
        display: block;
        width: 100%;
        padding: 20px 0;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: #979797;
    }

    #myp_links li a:hover {
        opacity: 1;
        color: #00a2e5;
    }

    #myp_links li a::before {
        display: block;
        content: "";
        width: 40px;
        height: 32px;
        margin: 0 auto 5px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    #myp_link_news a::before {
        background-image: url(../img/mypage/icon_alert_gray.png);
    }

    #myp_link_news a:hover::before {
        background-image: url(../img/mypage/icon_alert_blue.png);
    }

    #myp_link_match a::before {
        background-image: url(../img/mypage/icon_match_gray.png);
    }

    #myp_link_match a:hover::before {
        background-image: url(../img/mypage/icon_match_blue.png);
    }

    #myp_link_favorite a::before {
        background-image: url(../img/mypage/icon_star_gray.png);
    }

    #myp_link_favorite a:hover::before {
        background-image: url(../img/mypage/icon_star_blue.png);
    }

    #myp_link_footprint a::before {
        background-image: url(../img/mypage/icon_foot_gray.png);
    }

    #myp_link_footprint a:hover::before {
        background-image: url(../img/mypage/icon_foot_blue.png);
    }

    #myp_link_column a::before {
        background-image: url(../img/mypage/icon_book_gray.png);
    }

    #myp_link_column a:hover::before {
        background-image: url(../img/mypage/icon_book_blue.png);
    }

    #myp_link_status a::before {
        background-image: url(../img/mypage/icon_card_gray.png);
    }

    #myp_link_status a:hover::before {
        background-image: url(../img/mypage/icon_card_blue.png);
    }
    #myp_link_meal a::before {
        background-image: url(../img/mypage/icon_meal_gray.png);
    }

    #myp_link_meal a:hover::before {
        background-image: url(../img/mypage/icon_meal_blue.png);
    }

    #myp_link_help a::before {
        background-image: url(../img/mypage/icon_help_gray.png);
    }

    #myp_link_help a:hover::before {
        background-image: url(../img/mypage/icon_help_blue.png);
    }

    #myp_link_setting a::before {
        background-image: url(../img/mypage/icon_setting_gray.png);
    }

    #myp_link_setting a:hover::before {
        background-image: url(../img/mypage/icon_setting_blue.png);
    }

    #myp_link_plan a::before {
        background-image: url(../img/mypage/icon_plan_gray.png);
    }

    #myp_link_plan a:hover::before {
        background-image: url(../img/mypage/icon_plan_blue.png);
    }

    #mypage_banners_sp {
        padding: 20px 0;
    }

    #mypage_banners_sp .swiper6_sp {
        overflow: hidden;
        max-width: 400px;
        margin: auto;
        padding: 0 10px;
    }

    #mypage_banners_sp .swiper-slide img {
        width: 100%;
        height: auto;
    }

    /* =============== 相手探し・コミュニティ =============== */
    /* SP用タイトル（レイアウトの都合上、例外css適用）（詳細検索結果も共通） */
    #page_community .ttl_spui,
    #page_search_results .ttl_spui {
        margin-bottom: 0;
        padding: 0 0 30px;
        background-color: #fff;
    }

    #page_community .ttl_spui .sp_cont,
    #page_search_results .ttl_spui .sp_cont {
        position: relative;
    }

    #page_community .lkcmmsrch_sort {
        display: none;
    }

    /* プロフィール登録促進ポップアップ */
    .modal_wrap#prof_promote_modal {
        padding: 163px 0;
        background-color: rgba(0, 0, 0, 0.7);
    }

    #prof_promote_modal .pp_modal {
        width: 270px;
        margin: 0 auto 28px;
        padding: 30px 0;
        border-radius: 5px;
        background-color: #fff;
    }

    #prof_promote_modal .pp_modal img {
        display: block;
        width: 240px;
        height: auto;
        margin: 0 auto 20px;
    }

    #prof_promote_modal .pp_modal .button {
        width: 194px;
        height: 33px;
        border-radius: 17px;
        line-height: 33px;
        font-size: 14px;
        transition: 0.25s;
    }

    #prof_promote_modal .pp_modal .button:hover {
        opacity: 1;
        transform: translateY(2px);
        transition: 0.25s;
    }

    .close_pp_mdl {
        display: block;
        width: 150px;
        margin: auto;
        background-color: transparent;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
    }

    .close_pp_mdl img {
        position: relative;
        top: 1px;
        width: 12px;
        height: auto;
        margin-right: 7px;
    }

    /* ------- ページコンテンツ ------- */
    #page_community .c-profileboxarea {
        margin-top: 30px;
    }

    #page_community .community_top,
    #page_search_results .community_top {
        overflow: scroll;
        background-color: #fff;
        padding: 0;
    }

    #page_community .community_top .c-communityboxarea,
    #page_search_results .community_top .c-communityboxarea {
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
        min-width: 502px;
        padding: 0 10px;
    }

    #page_community .community_top .c-communityboxarea li,
    #page_search_results .community_top .c-communityboxarea li {
        width: 74px;
        margin: 0 4px;
    }

    #page_community .community_top .c-communityboxarea .icon,
    #page_search_results .community_top .c-communityboxarea .icon {
        position: relative;
        height: 28px;
        margin-bottom: 1px;
    }

    #page_community .community_top .menber,
    #page_search_results .community_top .menber {
        color: #a2a2a2;
        display: none;
    }

    #page_community .community_top .community_subtext,
    #page_search_results .community_top .community_subtext {
        display: none;
    }

    #page_community .community_top .c-communityboxarea .icon.no_view::before,
    #page_search_results
    .community_top
    .c-communityboxarea
    .icon.no_view::before {
        display: inline-block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 72px;
        height: 28px;
        margin: 0 1em 1px 0;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.3);
    }

    /* --------- 絞り込み用メニューバー（SP用）（共通css） --------- */
    #search_bar {
        width: 100%;
        overflow: scroll;
        margin-bottom: 25px;
        background-color: #fff;
    }

    #srch_bar_list {
        display: flex;
        width: 100%;
    }

    #srch_bar_list li {
        width: calc(100% / 3);
        border-bottom: 1px solid #e6e6e6;
    }

    #srch_bar_list li.current {
        border-bottom: 3px solid #01afea;
    }

    #srch_bar_list li a {
        display: block;
        width: 100%;
        padding-bottom: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: #c9c9c9;
    }

    #srch_bar_list li.current a {
        color: #01afea;
    }

    /* ------- コミュニティリスト ------- */
    #commuSearchListSp {
        width: 100%;
        max-width: 340px;
        margin: 0 auto 10px;
        padding-top: 10px;
    }

    #commuSearchListSp ul {
        justify-content: space-between;
    }

    #commuSearchListSp li a {
        display: block;
        text-align: center;
    }

    #commuSearchListSp ._icon {
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-bottom: 1px;
        background-color: #f0f0f0;
    }

    #commuSearchListSp li.-all ._icon {
        background-color: #00b1f0;
    }

    #commuSearchListSp ._icon img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        margin: auto;
    }

    #commuSearchListSp ._icon img.-off {
        display: none;
    }

    #commuSearchListSp li.-off ._icon img.-on {
        display: none;
    }

    #commuSearchListSp li.-off ._icon img.-off {
        display: block;
    }

    #commuSearchListSp li.-all ._icon img {
        width: 15px;
    }

    #commuSearchListSp li.-love ._icon img {
        width: 13px;
    }

    #commuSearchListSp li.-maridge ._icon img {
        width: 14px;
    }

    #commuSearchListSp li.-friend ._icon img {
        width: 17px;
    }

    #commuSearchListSp li.-meal ._icon img {
        width: 13px;
    }

    #commuSearchListSp li.-experience ._icon img {
        width: 15px;
    }

    #commuSearchListSp ._name {
        line-height: 1;
        font-size: 13px;
        color: #aaa;
    }

    #commuSearchListSp li.-all ._name {
        color: #00b1f0;
    }

    /* =============== 詳細検索結果 =============== */
    #page_search_results .likedetail_search {
        display: none;
    }

    #page_search_results .ttl_spui span {
        position: absolute;
        top: 2px;
        right: 0;
    }

    #page_search_results .likedetail_srcbtn {
        padding: 10px 45px 10px 61px;
        margin-bottom: 20px;
        font-size: 13px;
    }

    #page_search_results .likedetail_srcbtn:hover {
        background: none;
        border: 1px solid #ccc;
    }

    #page_search_results .likedetail_srcbtn img {
        width: 15.5px;
        top: 9px;
        left: 38px;
    }

    #page_search_results .user_img {
        width: 140px;
        height: 140px;
    }

    @media screen and (max-width: 370px) {
        #page_search_results .user_img {
            width: 130px;
            height: 130px;
        }
    }

    /* =============== 詳細検索 =============== */
    #page_search_detail .l-main__title {
        margin-bottom: 40px;
    }

    #page_search_detail .dtlsrch_box {
        padding: 0;
    }

    #page_search_detail .dtlsrch_box table {
        margin: 20px 0 30px;
    }

    #page_search_detail .dtlsrch_box table tr:first-of-type {
        border-top: none;
    }

    #page_search_detail .dtlsrch_box table th,
    #page_search_detail .dtlsrch_box table td {
        display: block;
    }

    #page_search_detail .dtlsrch_box table th {
        width: 100%;
        padding: 20px 0 0;
        text-align: left;
    }

    #page_search_detail .dtlsrch_box table td {
        width: 100%;
        padding: 10px 0 25px 0;
    }

    #page_search_detail .dtlsrch_box table td.dtlsrch_narrow {
        padding: 8px 0 13px 0;
    }

    #page_search_detail .dtlsrch_radio label {
        margin: 12px 20px 12px 0;
    }

    #page_search_detail .dtlsrch_box .c-selectbox select {
        width: 100%;
        max-width: 400px;
        border-radius: 5px;
        line-height: 17px;
    }

    #page_search_detail .dtlsrch_box .search_range .c-selectbox select {
        width: 110px;
    }

    #page_search_detail .dtlsrch_box input[type="text"] {
        padding: 0 10px;
        border-radius: 5px;
    }

    #page_search_detail .dtlsrch_box form > button.submit_btn {
        width: 130px;
        height: 38px;
        font-size: 14px;
    }

    #page_search_detail .dtlsrch_box form > a.c-btn.gray {
        margin-top: 13px;
        background: #aaa;
        width: 130px;
        height: 38px;
        border-radius: 40px;
        line-height: 39px;
    }

    #page_search_detail .dtlsrch_box .search_range .c-selectbox {
        justify-content: space-between;
        align-items: center;
    }

    #page_search_detail .dtlsrch_box .search_range .lower_limit {
        margin-right: 0;
    }

    #page_search_detail .dtlsrch_box .search_range .c-selectbox > p {
        margin: 10px 0;
    }

    #page_search_detail .btn-group-vertical > .btn,
    #page_search_detail .btn-group > .btn {
        max-width: 400px;
        font-size: 13px;
        line-height: 1.4;
    }

    #page_search_detail .dtlsrch_comm {
        display: block;
    }

    #page_search_detail .dtlsrch_comm .c-selectbox {
        width: 100%;
    }

    #page_search_detail .dtlsrch_comm:first-child {
        margin-top: 0;
    }

    #page_search_detail .dtlsrch_check label p,
    #page_search_detail .dtlsrch_radio p {
        font-size: 14px;
        letter-spacing: 0.7px;
    }

    #page_search_detail .dtlsrch_free input {
        max-width: 400px;
    }

    #page_search_detail .dtlsrch_like .select2-container {
        max-width: 335px !important;
    }

    /* =============== お相手からのいいね！ =============== */
    #nice_you_list {
        padding-top: 15px;
    }

    #nice_you_list .nice_list_nav {
        width: 100%;
        display: flex;
        margin: 0 0 30px;
        background: #f1f1f1;
        border-radius: 100vh;
    }

    #nice_you_list .nice_list_nav .nice_list_tab {
        flex: 1;
        text-align: center;
        padding: 6px 10px;
        border-radius: 100vh;
        font-size: 12px;
    }

    #nice_you_list .nice_list_nav .nice_list_tab.active {
        border: 2px solid #ececec;
        background: #fff;
    }

    #nice_you_list .nice_list_nav .nice_list_tab a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    #page_nice_you .c-pushedlikecard {
        display: none;
    }

    #page_nice_you .user_list_cont .c-profilebox {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 160px;
        margin: 0 0 40px !important;
    }

    #page_nice_you .col3 .c-profilebox .user_img {
        width: 160px;
        height: 160px;
    }

    #page_nice_you .user_list_cont .c-iconarea {
        max-width: 150px;
    }

    /* iPhone 6/7/8 より小さいサイズ用 */
    @media screen and (max-width: 374px) {
        #page_nice_you .user_list_cont .c-profilebox {
            width: 140px;
        }

        #page_nice_you .col3 .c-profilebox .user_img {
            width: 130px;
            height: 130px;
        }
    }

    /* =============== お知らせ一覧 =============== */
    #page_news .news_list li {
        padding: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    #page_news .news_list li a {
        display: block;
        padding: 10px 0;
    }

    #page_news .news_list li .sp_cont {
        position: relative;
        padding-right: 10px;
    }

    #page_news .news_list li .sp_cont::before {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: block;
        content: "";
        width: 9px;
        height: 12px;
        background-image: url(../img/arrow_right_blue_s.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    #page_news .news_date {
        font-size: 14px;
        font-weight: 500;
        color: #908f8f;
        margin-bottom: 0;
    }

    #page_news .news_title {
        font-size: 14px;
        font-weight: 500;
        margin-right: 11px;
    }

    #page_news .c-pagenation {
        border-top: none;
    }

    #page_news .no_news {
        padding-top: 20px;
    }

    /* =============== お知らせ詳細 =============== */
    #page_news_detail .news_article {
        padding-top: 25px;
        padding-bottom: 30px;
        margin-bottom: 25px;
    }

    #page_news_detail .news_article h1 {
        font-size: 14px;
        font-weight: 500;
        padding-bottom: 0;
        margin-bottom: 15px;
        border-bottom: none;
    }

    #page_news_detail .news_article p {
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: 500;
        color: #7c7c7c;
    }

    /* =============== 各種設定 =============== */
    #page_preferences .p-mypagetop__preferencearea {
        padding: 0 15px !important;
        margin: 0 0 30px !important;
    }

    #page_preferences .p-mypagetop__preferencearea table tr {
        height: auto;
        border-bottom: #ccc 1px solid;
    }

    #page_preferences .p-mypagetop__preferencearea table tr:last-child {
        border-bottom: none;
    }

    #page_preferences .p-mypagetop__preferencearea table th,
    #page_preferences .p-mypagetop__preferencearea table td {
        display: block;
        width: 100%;
    }

    #page_preferences .p-mypagetop__preferencearea table th {
        padding: 20px 0 7px;
    }

    #page_preferences .p-mypagetop__preferencearea table td {
        padding: 7px 0 20px;
    }

    #page_preferences .p-mypagetop .bannerlink {
        margin-top: 30px;
    }

    #page_preferences .p-mypagetop .bannerlink {
        font-size: 15px;
    }

    /* SP各種設定 */
    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp {
        width: 100%;
        min-width: 100%;
        margin: 0 auto 40px;
        padding: 0 0 50px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp h2 {
        line-height: 1.7;
        font-size: 15px;
        font-weight: bold;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .email_change_h2 {
        margin-top: 50px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .edit_cont_flex {
        display: flex;
        justify-content: space-between;
        margin-top: 25px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .edit_cont {
        margin-top: 15px;
        font-size: 14px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .edit_cont2 {
        margin-top: 10px;
        font-size: 14px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .edit_cont_radio {
        margin-top: 20px;
        font-size: 14px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .edit_cont_info {
        line-height: 1.5;
        color: #9d9d9d;
        margin-top: 10px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .switch_radio {
        display: none;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .switch_radio_box {
        margin: 0;
        padding: 0;
        height: 30px;
        border-radius: 30px;
        background: #f0f0f0;
        font-size: 0;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .switch_radio
    + label.check {
        position: relative;
        cursor: pointer;
        display: inline-block;
        width: 58px;
        height: 30px;
        line-height: 30px;
        color: #d7d7d7;
        border-radius: 30px;
        background-color: transparent;
        text-align: center;
        font-size: 13px;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .switch_radio:checked
    + label.check {
        background-color: #1dc8f3;
        color: #fff;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .input_readonly {
        margin-top: 5px;
        padding: 12px;
        border-radius: 8px;
        background: #f4f4f4;
        border: 1px solid #cfcfcf;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .edit_cont_title {
        color: #1dc8f3;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .edit_cont_input
    input {
        width: 100%;
        margin-top: 5px;
        padding: 12px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #cfcfcf;
        letter-spacing: 0.5px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .edit_cont_check {
        margin-top: 30px;
        font-size: 15px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .button_check {
        display: none;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .edit_cont_check
    .button_check
    + label {
        position: relative;
        display: block;
        width: 100%;
        margin-top: 5px;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid #cfcfcf;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .edit_cont_check
    .button_check
    + label
    span {
        position: absolute;
        right: 0;
        display: inline-block;
        line-height: 22px;
        padding-left: 30px;
        margin-right: 5px;
        margin-bottom: 15px;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .edit_cont_check
    .button_check
    + label
    span:before {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        left: 0;
        width: 18px;
        height: 18px;
        border: 1px solid #999;
        border-radius: 50%;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .edit_cont_check
    .button_check:checked
    + label
    span:after {
        content: "";
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        top: 6px;
        left: 4px;
        background: #00abe7;
        border-radius: 50%;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .edit_cont_check
    .button_check
    + label
    .icn {
        display: inline-block;
        width: 35px;
        text-align: center;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .edit_cont_check
    .button_check
    + label
    .icn
    img {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        width: auto;
        max-height: 16px;
        margin-bottom: -2px;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .private_info {
        margin-top: 20px;
        text-align: center;
    }

    #page_sp_preferences_edit
    .p-mypagetop__preferencearea_sp
    .private_info
    .c-btn {
        margin: auto;
    }

    #page_sp_preferences_edit .p-mypagetop__preferencearea_sp .submit {
        position: fixed;
        bottom: 100px;
        left: 0;
        right: 0;
        z-index: 1000;
        width: 330px;
        height: 42px;
        margin: auto;
        border-radius: 35px;
        color: #fff;
        background-color: #1dc8f3;
        font-size: 14px;
    }

    /* SP用レイアウト */
    .prefs_section {
        width: 100%;
    }

    .prefs_ttl {
        padding: 20px 0 10px;
        background-color: #f0f0f0;
    }

    .prefs_ttl h2 {
        position: relative;
        padding-left: 15px;
        font-size: 14px;
        font-weight: 500;
        color: #454545;
    }

    .prefs_ttl h2::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        width: 10px;
        height: 10px;
        margin: auto;
        border-radius: 2px;
        background-color: #454545;
    }

    .prefs_section ul {
        width: 100%;
    }

    .prefs_section li {
        width: 100%;
        height: 55px;
        background-color: #fff;
        border-bottom: 1px solid #dcdcdc;
    }

    .prefs_section li a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .prefs_section li span {
        position: relative;
        display: block;
        width: 90%;
        margin: auto;
        padding-right: 10px;
        font-size: 15px;
        font-weight: normal;
        color: #919191;
    }

    .prefs_section li span::before {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        display: block;
        content: "";
        width: 9px;
        height: 14px;
        margin: auto;
        background-image: url(../img/arrow_right_gray.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* =============== 通知 =============== */
    #page_notification .ttl_spui h1 {
        margin-bottom: 20px;
    }

    /* =============== コラムTOP（ログイン後） =============== */
    #page_column .l-main__inner {
        margin-top: 0;
    }

    /* =============== お問い合わせ関連ページ（ログイン後） =============== */
    #page_contact-main .l-main__inner,
    #page_contact-confirm .l-main__inner,
    #page_contact-complete .l-main__inner {
        margin-top: 0;
    }

    #page_contact-main .l-main__title,
    #page_contact-confirm .l-main__title,
    #page_contact-complete .l-main__title {
        margin-top: 0 !important;
    }

    /* =============== HappyPhotoトップ（ログイン後） =============== */
    #page_happyphoto section.hppypht_main {
        padding: 0 !important;
    }

    /* =============== HappyPhoto一覧（ログイン後） =============== */
    #page_happyphotolist section {
        padding-top: 0;
    }

    /* =============== HappyPhoto詳細（ログイン後） =============== */
    /* ---メインビジュアル--- */
    #page_happyphotodetail section.hppypht_main {
        padding: 20px 0 0 !important;
    }

    /* =============== 静的ページ（ログイン後） =============== */
    main.page_static .l-main__title {
        margin-top: 0;
    }

    main.page_static .l-main__inner {
        margin-top: 0;
    }

    main.page_static .static-white-bk {
        background-color: white;
    }

    main.page_static .static-white-bk .ttl_spui {
        margin-bottom: 0 !important;
    }

    main.page_static .static-np-main__box {
        margin: 0 0 0 !important;
        padding: 15px !important;
        text-align: left;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-size: 14px !important;
    }


    /* =============== プロフィール編集 =============== */
    /* 共通 */
    #page_maypage-profedit .l-main__inner {
        margin-top: 0;
    }

    #page_maypage-profedit .sp_btns_header {
        margin-bottom: 20px;
        border-bottom: none;
    }

    #page_maypage-profedit .p-form {
        position: relative;
    }

    #page_maypage-profedit #color_header {
        height: 170px;
    }

    #page_maypage-profedit .ttl_spui {
        margin-bottom: 0;
        padding: 50px 0 5px;
    }

    #page_maypage-profedit .p-form > .ttl_spui h1 {
        color: #fff;
    }

    #page_maypage-profedit .p-form .label::before {
        display: inline-block;
        content: "";
        width: 10px;
        height: 10px;
        margin-right: 5px;
        border-radius: 1px;
        background-color: #454545;
    }

    #page_maypage-profedit .p-form .label span {
        display: inline-block;
        padding-left: 7px;
        font-size: 13px;
        font-weight: 500;
        color: #969696;
    }

    .prf_edt_btn {
        width: 170px;
        height: 38px;
        line-height: 38px;
        border-radius: 20px;
        font-size: 15px;
    }

    /* =============== あしあと =============== */
    #page_mypage-footprint .c-profileboxarea {
        justify-content: space-between;
        padding-top: 37px;
    }

    /* =============== 会員ステータス =============== */
    #page_status .l-main__inner {
        margin-top: 0;
    }

    #page_status .ttl_spui {
        padding-top: 50px;
        background-color: #fff;
    }

    #status_sp {
        padding-top: 33px;
    }

    .status_cont {
        margin-bottom: 40px;
    }

    #status_sp h2 {
        margin-bottom: 12px;
        font-size: 14px;
        font-weight: 500;
        color: #4b4b4b;
    }

    #status_sp h2 img {
        position: relative;
        height: auto;
    }

    #status_sp h2.title_status img {
        top: 1px;
        width: 19px;
        margin-right: 3px;
    }

    #status_sp h2.title_next_point img {
        top: 1px;
        width: 16px;
        margin-right: 3px;
    }

    #status_sp h2.title_cancel_plan img {
        top: 2px;
        width: 14px;
        margin-right: 2px;
    }

    #status_sp .status_list {
        display: flex;
        margin-bottom: 8px;
    }

    #status_sp .status_list > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 50%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .status_item {
        padding-left: 14px;
        padding-right: 10px;
        border-radius: 4px 0 0 4px;
        border: 1px solid #e2e2e2;
        background-color: #f3f3f3;
    }

    .status_item h3,
    .status_item h4 {
        font-size: 13px;
        font-weight: 500;
        color: #5e5e5e;
    }

    .status_desc {
        position: relative;
        padding-left: 20px;
        padding-right: 10px;
        border-radius: 0 4px 4px 0;
        border: 1px solid #e2e2e2;
        border-left: none;
    }

    .status_desc p {
        width: 100%;
        line-height: 1.5;
        font-size: 14px;
        font-weight: 500;
    }

    .stt_submit_btn {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        width: 60px;
        height: 21.5px;
        border-radius: 11px;
        background-color: #4abae8;
        box-shadow: 0 2px #2e9bbb;
        line-height: 21.5px;
        letter-spacing: 0;
        font-size: 12px;
    }

    .status_desc .stt_slide_tggl {
        position: relative;
    }

    .status_desc .stt_slide_tggl::before {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        display: block;
        content: "";
        width: 9px;
        height: 12px;
        margin: auto;
        background-image: url(../img/arrow_right_blue_s.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    #free_plan_tggl {
        color: #a675ac;
    }

    #paid_plan_tggl {
        color: #02aee0;
    }

    #premium_plan_tggl {
        color: #5ebaa3;
    }

    #woman_plan_tggl {
        color: #df7572;
    }

    .stt_dsc_paid_prem p:first-of-type {
        color: #02aee0;
    }

    .stt_dsc_paid_prem p:last-of-type {
        color: #5ebaa3;
    }

    /* ステータス説明スライド */
    .status_slide {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
        display: none;
        width: 100%;
        height: 100%;
        overflow: scroll;
        background-color: #fff;
    }

    .status_slide .ttl_spui {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
    }

    .status_slide_cont {
        padding: 130px 0;
    }

    .status_desc .status_slide h5 {
        position: relative;
        margin-bottom: 15px;
        padding-left: 14px;
        padding-bottom: 5px;
        border-bottom: 1px solid #dcdcdc;
        font-size: 14px;
        font-weight: 500;
        color: #393939;
    }

    .status_desc .status_slide h5::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "◼️";
    }

    .stt_sld_desc {
        margin-bottom: 10px;
        line-height: 1.6;
        font-size: 14px;
        font-weight: 500;
        color: #737373;
    }

    .status_slide_cont ul {
        margin-bottom: 10px;
        line-height: 1.6;
        font-size: 14px;
        font-weight: 500;
        color: #737373;
    }

    #free_plan_slide .stt_sld_list {
        color: #a675ac;
    }

    #paid_plan_slide .stt_sld_list {
        color: #02aee0;
    }

    #premium_plan_slide .stt_sld_list {
        color: #5ebaa3;
    }

    .status_slide_cont .button {
        width: 100%;
        max-width: 330px;
        height: 32.5px;
        border-radius: 17px;
        margin-top: 24px;
        line-height: 32.5px;
        font-size: 14px;
    }

    #free_plan_slide .status_slide_cont .button,
    #premium_plan_slide .status_slide_cont .button {
        background-color: #02aee0;
        box-shadow: 0 2px #2e9bbb;
    }

    #paid_plan_slide .status_slide_cont .button {
        background-color: #5ebaa3;
        box-shadow: 0 2px #3b9f86;
    }

    #page_status .c-btn--black {
        display: none;
    }

    #status_cont_point h3 {
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 500;
        color: #555;
    }

    #status_cont_point .status_list {
        margin-bottom: 15px;
    }

    #nxt_pt_free .status_item {
        background-color: #f9f2fa;
    }

    #nxt_pt_paid .status_item {
        background-color: #ebf1f4;
    }

    #nxt_pt_premium .status_item {
        background-color: #ebf2f0;
    }

    #status_cont_point .status_desc p {
        text-align: center;
        line-height: 1.4;
    }

    .stt_dsc_point {
        letter-spacing: 0;
        font-size: 12px;
    }

    .stt_dsc_point span {
        padding-right: 1px;
        font-size: 18px;
        font-weight: 500;
    }

    #nxt_pt_free .stt_dsc_point {
        color: #a675ac;
    }

    #nxt_pt_paid .stt_dsc_point {
        color: #51bde9;
    }

    #nxt_pt_premium .stt_dsc_point {
        color: #5ebaa3;
    }

    .stt_dsc_pt_date {
        letter-spacing: 0;
        font-size: 12px;
        color: #555;
    }

    /* 有料プランの解約 */
    .cancel_tggl_btn {
        position: relative;
        display: block;
        width: 100%;
        height: 42px;
        margin-bottom: 18px;
        padding: 0 20px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid rgba(226, 226, 226, 0.5);
        box-shadow: 0 2px rgba(111, 110, 110, 0.16);
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        color: #5f5f5f;
    }

    .cancel_tggl_btn::before {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        display: block;
        content: "";
        width: 9px;
        height: 12px;
        margin: auto;
        background-image: url(../img/arrow_right_gray_2.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* 解約スライド */
    .cancel_slide .status_slide_cont .button {
        margin: 11px auto 0;
        background-color: #888;
        box-shadow: 0 2px #656565;
    }

    .st_sld_ttl_blue {
        margin-bottom: 5px;
        font-size: 15px;
        font-weight: 500;
        color: #2e9bbb;
    }

    .cancel_sld_txt {
        font-size: 13px;
        font-weight: 500;
        color: #7e7e7e;
    }

    .cancel_note {
        width: 100%;
        margin-top: 35px;
        margin-bottom: 53px;
        padding: 6px 10px;
        border: dashed 1px rgba(216, 79, 79, 0.5);
        font-size: 13px;
        font-weight: 500;
        color: #d84f4f;
    }

    .cncl_note_ttl {
        font-size: 13px;
        font-weight: 500;
        color: #d84f4f;
    }

    .cncl_note_ttl::before,
    .cncl_note_ttl::after {
        position: relative;
        top: 1px;
        display: inline-block;
        content: "";
        width: 12px;
        height: 12px;
        background-image: url(../img/icon_note.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .cncl_note_ttl::before {
        margin-right: 4px;
    }

    .cncl_note_ttl::after {
        margin-left: 3px;
    }

    .cancel_note ol li {
        margin-bottom: 19px;
    }

    .cancel_note ol li:last-of-type {
        margin-bottom: 0;
    }

    /* 解約フロー */
    .cancel_flow {
        width: 100%;
        margin-top: 15px;
    }

    .cancel_flow li {
        width: 100%;
        margin-bottom: 23px;
        padding: 9px 15px 20px;
        background-color: #efefef;
    }

    .cncl_flw_ttl {
        padding-bottom: 2px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(216, 216, 216, 0.5);
        font-size: 14px;
        font-weight: bold;
        color: #2e9bbb;
    }

    .cncl_flw_txt {
        font-size: 14px;
        font-weight: 500;
        color: #5d5d5d;
    }

    .cncl_flw_txt span {
        color: #2e9bbb;
    }

    .cncl_flw_img {
        display: block;
        width: 92.5%;
        height: auto;
        margin: 25px auto 0;
    }

    /* クレカ決済解約ポップアップ */
    #cancel_modal_wrap {
        background-color: rgba(0, 0, 0, 0.85);
    }

    .cancel_modal {
        display: none;
        width: 84%;
        max-width: 315px;
        padding: 25px 15px;
        border-radius: 3px;
        background-color: #fff;
        text-align: center;
    }

    .cancel_modal.open {
        display: block;
    }

    #cancel_modal {
        margin: 150px auto;
    }

    .cancel_modal h5 {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #393939;
    }

    .cancel_modal h5 span {
        display: block;
        font-size: 12px;
        color: #909090;
    }

    #cncl_plan_info {
        margin-bottom: 11px;
        padding: 13px 10px 15px;
        background-color: #ededed;
        border-radius: 10px;
    }

    #cncl_plan_info h6 {
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: 500;
        color: #393939;
    }

    #cncl_pln_inf_box {
        width: 100%;
        padding: 10px 15px;
        border-radius: 3px;
        background-color: #fff;
        text-align: left;
    }

    #cncl_pln_inf_box p {
        color: #aa1c1c;
    }

    .cncl_plan_next {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 45px;
    }

    .cncl_plan_next span {
        display: inline-block;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .cncl_plan_next span:first-of-type {
        font-size: 13px;
        color: #727272;
    }

    .cncl_plan_next span:nth-of-type(2) {
        font-size: 14px;
        color: #393939;
    }

    .cancel_modal .button {
        width: 100%;
        max-width: 244px;
        height: 32.5px;
        border-radius: 17px;
        line-height: 32.5px;
        font-size: 14px;
    }

    #do_cancel_plan {
        margin-bottom: 14px;
        background-color: #888;
        box-shadow: 0 2px #656565;
    }

    #close_cancel_plan {
        background-color: #cbcbcb;
        box-shadow: 0 2px #a7a7a7;
    }

    /* クレカ決済解約完了 */
    #cancel_complete_modal {
        margin: 240px auto;
    }

    #cancel_complete_modal p {
        margin-bottom: 15px;
        font-size: 13px;
        font-weight: 500;
        color: #727272;
    }

    #cancel_complete_modal .button {
        background-color: #888;
        box-shadow: 0 2px #656565;
    }

    /* =============== LIKEトップ =============== */
    #page_like .like_list {
        width: 100%;
        margin-bottom: 0;
        padding: 10px 0 25px;
        border-bottom: 7px solid #f8f8f8;
        background-color: #fff;
    }

    #page_like .like_list:first-of-type {
        border-top: 7px solid #f8f8f8;
    }

    #page_like .lklst_head {
        width: 90%;
        margin: 0 auto 10px;
    }

    #page_like .lklst_head p {
        padding-left: 16px;
        font-size: 13px;
        color: #363636;
    }

    #page_like .lklst_1 .lklst_icon {
        width: 10px;
        top: 8px;
    }

    #page_like .lklst_2 .lklst_icon {
        width: 11px;
        top: 7px;
    }

    #page_like .lklst_3 .lklst_icon {
        width: 12px;
        top: 7px;
    }

    #page_like .lklst_4 .lklst_icon {
        width: 12px;
        top: 6px;
    }

    #page_like .lklst_5 .lklst_icon {
        width: 13px;
        top: 6px;
    }

    #page_like .lklst_6 .lklst_icon {
        width: 13px;
        top: 6px;
    }

    #page_like .lklst_head a {
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        font-size: 13px;
        font-weight: 500;
        color: #1dc8f3;
        line-height: 1.8;
    }

    #page_like .lklst_cont {
        padding: 0;
    }

    #page_like .like_slider {
        width: 100%;
        padding: 0 5%;
    }

    /* =============== LIKE一覧 =============== */
    #page_like_list .l-main__inner {
        margin-top: 0;
        padding-bottom: 60px;
    }

    #page_like_list .ttl_spui {
        margin-bottom: 0;
        padding: 50px 0 30px;
    }

    #page_like_list #likecate_head {
        margin-bottom: 30px;
    }

    #page_like_list .likect_hd_1 {
        background-color: #e2a372;
    }

    #page_like_list .likect_hd_2 {
        background-color: #74c1a0;
    }

    #page_like_list .likect_hd_3 {
        background-color: #a093d3;
    }

    #page_like_list .likect_hd_4 {
        background-color: #e5d890;
    }

    #page_like_list .likect_hd_5 {
        background-color: #e3a0b7;
    }

    #page_like_list .likect_hd_6 {
        background-color: #a0bce3;
    }

    #page_like_list .like_lists {
        padding: 0;
        background-color: #fff;
    }

    #page_like_list .lklst_head {
        display: none;
    }

    #page_like_list #likecate_list {
        margin-bottom: 10px;
    }

    #page_like_list #likecate_list li {
        width: 30.25%;
        margin-right: 4.625%;
        margin-bottom: 25px;
    }

    #page_like_list #likecate_list li:nth-of-type(5n) {
        margin-right: 4.625%;
    }

    #page_like_list #likecate_list li:nth-of-type(3n) {
        margin-right: 0;
    }

    #addlike_sp {
        position: fixed;
        bottom: 110px;
        right: 10px;
        z-index: 1000;
        width: 43px;
        height: 43px;
        border-radius: 50%;
        background-color: #1dc8f3;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    }

    #addlike_sp:hover {
        opacity: 1;
        box-shadow: 0;
    }

    #addlike_sp img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        width: 21px;
        height: auto;
        margin: auto;
    }

    /* Like項目追加ポップアップ */
    #page_like_list .addlkmdl_wrap {
        padding: 100px 0;
    }

    #page_like_list .addlike_modal {
        width: 90%;
        padding: 50px 20px;
    }

    #page_like_list .addlike_modal .modaltitle::before,
    #page_like_list .addlike_modal .modaltitle::after {
        display: none;
    }

    #page_like_list .addlike_modal form dl {
        display: block;
        width: 100%;
        margin: 15px auto 30px;
    }

    #page_like_list .addlike_modal form dt,
    #page_like_list .addlike_modal form dd {
        width: 100%;
    }

    #page_like_list .addlike_modal form dt {
        margin-bottom: 0;
        line-height: 40px;
        padding-right: 0;
        text-align: left;
        font-size: 14px;
    }

    #page_like_list .addlike_modal form dd {
        margin-bottom: 8px;
    }

    #page_like_list .addlike_modal .c-selectbox select {
        height: 40px;
    }

    #page_like_list .addlike_modal input[type="text"] {
        height: 40px;
        font-size: 14px;
    }

    #page_like_list .addlike_modal input[type="text"]::placeholder {
        font-size: 14px;
    }

    #page_like_list .addlk_pic label {
        line-height: 40px;
    }

    #page_like_list .addlk_pic label img {
        top: 13px;
    }

    #page_like_list .addlk_pic > p {
        margin-top: 7px;
        text-align: left;
        font-size: 12px;
    }

    #page_like_list .notes_addlk {
        font-size: 12px;
        margin-bottom: 25px;
        text-align: left;
    }

    /* Like項目追加申請完了ポップアップ */
    #page_like_list .addlkcmpmdl_wrap {
        padding: 200px 0;
    }

    #page_like_list .addlikecomp_modal {
        width: 90%;
        padding: 50px 20px;
    }

    #page_like_list .addlkcmp_cont {
        width: 100%;
        padding-top: 20px;
    }

    #page_like_list .addlkcmp_cont p {
        margin-bottom: 20px;
        font-size: 14px;
    }

    /* =============== LIKE詳細 =============== */
    #page_like_detail .p-mypagetop {
        padding-bottom: 100px;
    }

    #page_like_detail .l-main__inner {
        margin-top: 0;
    }

    #page_like_detail .likedetail_top {
        display: none;
    }

    #page_like_detail #like_head_sp {
        position: relative;
        width: 100%;
        height: 185px;
        margin-bottom: 60px;
    }

    #page_like_detail #like_head_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #page_like_detail #like_head_nav {
        position: relative;
        width: 100%;
        height: 105px;
        background: -moz-linear-gradient(
            top,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0)
        );
        background: -webkit-linear-gradient(
            top,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0)
        );
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0)
        );
    }

    #page_like_detail #like_head_nav .sp_cont {
        position: relative;
        height: 62px;
    }

    #page_like_detail #like_head_info {
        position: absolute;
        bottom: -31px;
        left: 0;
        right: 0;
        padding: 20px;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 1px 13px rgba(185, 185, 185, 0.2);
    }

    #page_like_detail #like_head_cate {
        margin-bottom: 5px;
    }

    #page_like_detail #like_head_cate span {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 2px;
        border: 1px solid rgba(98, 98, 98, 0.5);
        font-size: 10px;
        font-weight: 500;
        color: #626262;
    }

    #page_like_detail #like_head_info h1 {
        line-height: 1.5;
        font-size: 18px;
        font-weight: 500;
        color: #626262;
    }

    #page_like_detail .like_head_num {
        font-size: 11px;
        font-weight: 500;
        color: #909090;
    }

    #page_like_detail .likedetail_search {
        display: none;
    }

    #page_like_detail #join_like_sp {
        position: fixed;
        bottom: 80px;
        left: 0;
        z-index: 1000;
        pointer-events: none;
        width: 100%;
        height: 163px;
        background: -moz-linear-gradient(
            top,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );
        background: -webkit-linear-gradient(
            top,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );
    }

    #page_like_detail #join_like_sp .button {
        position: absolute;
        bottom: 37px;
        left: 0;
        right: 0;
        pointer-events: auto;
    }

    /* =============== コミュニティ編集 =============== */
    #page_community_edit .l-main {
        padding-bottom: 150px !important;
    }

    #page_community_edit #commuedit_list {
        margin-bottom: 0;
    }

    #page_community_edit #commuedit_list li {
        padding: 20px 20px 22px;
    }

    #page_community_edit .commuedit_l {
        margin-bottom: 10px;
    }

    #page_community_edit .commuedit_lbl {
        padding-left: 30px;
    }

    #page_community_edit .commuedit_lbl::before {
        width: 21px;
        height: 21px;
    }

    #page_community_edit .commuedit_lbl::after {
        width: 11px;
        height: 11px;
    }

    #page_community_edit .community_icon {
        width: 16px;
        height: 16px;
    }

    #page_community_edit .community_icon img {
        width: 15px;
    }

    #page_community_edit .commuedit_r {
        width: 100%;
    }

    #page_community_edit .commuedit_r label::before {
        right: 11px;
        width: 12px;
        height: 10px;
    }

    #page_community_edit .commuedit_r select {
        height: 42px;
        padding-left: 13px;
        padding-right: 25px;
    }

    #page_community_edit #btn_commuedit {
        position: fixed;
        bottom: 115px;
        left: 0;
        right: 0;
        z-index: 1000;
        width: 100%;
        max-width: 330px;
        height: 45px;
    }
}

/* ===== 年収確認書類ポップアップ ===== */
#income_up_modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20000;
    display: none;
    width: 100%;
    height: 100%;
    padding-top: 180px;
    background-color: rgba(0, 0, 0, 0.7);
}

#incm_up_mdl_inner {
    width: 90%;
    max-width: 320px;
    margin: 0 auto 20px;
    padding: 38px 15px;
    background-color: #fff;
    text-align: center;
}

.incm_up_ttl {
    margin-bottom: 13px;
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

#incm_up_mdl_inner p {
    letter-spacing: 0;
}

.incm_up_desc {
    margin-bottom: 28px;
    font-size: 11px;
    color: #7f7f7f;
}

.incm_up_desc span {
    font-weight: bold;
    color: #525151;
}

.incm_up_caution {
    margin-bottom: 12px;
    font-size: 10px;
    color: #d06868;
}

.incm_up_caution img {
    position: relative;
    top: 1px;
    width: 11px;
    height: auto;
    margin-right: 3px;
}

#incm_up_mdl_inner .button {
    width: 220px;
    height: 30px;
    margin-bottom: 9px;
    padding-top: 3px;
    border-radius: 35px;
    font-size: 14px;
}

#incm_up_mdl_inner .button input {
    display: none;
}

.incm_up_note {
    font-size: 10px;
    color: #a8a8a8;
}

#close_incm_up {
    display: block;
    margin: auto;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

#prof_img_edit {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20000;
    display: none;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.7);
}

#close_img_up {
    display: block;
    margin: auto;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

#prof_up_mdl_inner {
    width: 90%;
    max-width: 320px;
    margin: 0 auto 20px;
    padding: 48px 15px;
    background-color: #fff;
    text-align: center;
}

#btn_prof_img_edit_sp {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 180px;
    height: 42px;
    border-radius: 35px;
    background-color: #1dc8f3;
    font-size: 14px;
}


.radio {
    margin: 0.5rem;
}

.radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-label {
    color: #8B8B8B;
}

.radio-label::before {
    content: '';
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid darken(#f4f4f4, 25%);
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    position: relative;
    top: 0.3em;
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}

.radio input[type=radio]:checked + .radio-label:before {
    background-color: #00D3F3;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}