@charset "UTF-8";
/* CSS Document */
/* 202301 - Web課金システム関連CSS */


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


/*ヘッダー
------------------------------------------------*/
#pc .global_header_wrap .name.is_subscription a {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left 1px;
    background-repeat: no-repeat;
    background-size: 11px auto;
    padding: 3px 0 3px 15px;
}

#pc .global_header_wrap .name.is_subscription.plan_2 a {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}


/*マイページ
------------------------------------------------*/

/* パンクズメニュー */
#pc .pet_prof_menu .is_subscription_error::before {
    background-image: url(https://cache.pet-home.jp/global_images/ui_img_hr.png);
    background-position: -670px -760px;
    background-repeat: no-repeat;
    background-size: 1000px 850px;
    content: "";
    display: inline-block;
    height: 16px;
    margin: 0 2px 0 0;
    vertical-align: middle;
    width: 16px;
}

/* ヘッダー */
#pc .user_head_content .is_subscription {
    background-color: rgba(235, 72, 71, 1);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 20px;
    -webkit-transition: all .3s ease;
            transition: all .3s ease;
    width: 200px;
}

#pc .user_head_content .is_subscription.plan_2 {
    background-color: #48b0cb;
}

#pc .user_head_content .is_subscription:hover {
    opacity: .7;
    text-decoration: none;
}

#pc .user_head_content .is_subscription::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 15px auto;
    content: "";
    display: inline-block;
    height: 40px;
    margin: 0 10px 0 0;
    vertical-align: top;
    width: 15px;
}

#pc .user_head_content .is_subscription.plan_2::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}

#pc #user_head_content .btn_container {
    right: 15px;
}

/* バナー */
#pc .mypage_subscription_bnr {
    background-color: #f8f8f8;
    font-weight: 700;
    height: 150px;
    margin: 30px 0 0;
    text-align: center;
    width: 100%;
}

/* 決済エラー */
#pc .mypage_subscription_error_message {
    align-items: center;
    border: 2px solid #931220;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    color: #931220;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    font-size: 14px;
    font-weight: 700;
    justify-content: space-between;
    margin: 30px 0 0;
    padding: 20px;
}

#pc .mypage_subscription_error_message .btn {
    background-color: #931220;
    border: none;
    border-radius: 20px;
    color: #fff;
    display: block;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 250px;
}

#pc .mypage_subscription_error_message .btn:hover {
    text-decoration: none;
}


/*メンバー一覧／詳細
------------------------------------------------*/

/* 一覧 */
#pc .result_item_08 .is_subscription::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 11px auto;
    content: "";
    display: inline-block;
    height: 15px;
    padding: 0 0 0 1px;
    vertical-align: -3px;
    width: 11px;
}

#pc .result_item_08 .is_subscription.plan_2::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}

/* 詳細 */
#pc #user_head_content .follow_btn_container {
    right: 15px;
}

#pc .user_head_content .memberpage_subscription + .follow_btn_container,
#pc .user_head_content .mypage_subscription + .follow_btn_container {
    top: 235px !important;
}




/*------------------------------------------------
各所ユーザー名にアイコン追加
------------------------------------------------*/
#pc .post_contribute_result .name.is_supporter,
#pc .contribute_user_result_wrap .name.is_supporter,
#pc .upload_result .user_name.is_supporter,
#pc .message_timeline_result .user_01_result .title.is_supporter,
#pc .upload_result_2 .user_name.is_supporter,
#pc .message_timeline_result .user_02_result .title.is_supporter::before,
#pc .entry_contribute_result .name.is_supporter,
#pc .entry_contribute_result .article_name.is_supporter,
#pc .latest_contribute_header .td.is_supporter a,
#pc .user_bar .info_container.is_supporter span,
#pc .user_head_content .user_name.is_supporter a,
#pc .result_item_01 .user.is_supporter,
#pet_head_content .pet_detail_data_container .pet_owner.is_supporter a {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 11px auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 0 0 15px;
}

#pc .post_contribute_result .name.is_supporter.plan_2,
#pc .contribute_user_result_wrap .name.is_supporter.plan_2,
#pc .upload_result .user_name.is_supporter.plan_2,
#pc .message_timeline_result .user_01_result .title.is_supporter.plan_2,
#pc .upload_result_2 .user_name.is_supporter.plan_2,
#pc .message_timeline_result .user_02_result .title.is_supporter::before,
#pc .entry_contribute_result .name.is_supporter.plan_2,
#pc .entry_contribute_result .article_name.is_supporter.plan_2,
#pc .latest_contribute_header .td.is_supporter.plan_2 a,
#pc .user_bar .info_container.is_supporter.plan_2 span,
#pc .user_head_content .user_name.is_supporter.plan_2 a,
#pc .result_item_01 .user.is_supporter.plan_2,
#pet_head_content .pet_detail_data_container .pet_owner.is_supporter.plan_2 a {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
    padding: 2px 0 2px 15px;
}

#pc .message_user_wrap .name.is_supporter a,
#pc .message_post_container .name.is_supporter,
#pc .entry_contribute_result .user_name.is_supporter a,
#pc .owner_result_wrap .name.is_supporter a,
#pc .message_timeline_result .user_02_result .title.is_supporter.plan_1::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 15px auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 0 0 22px;
}

#pc .message_user_wrap .name.is_supporter.plan_2 a,
#pc .message_post_container .name.is_supporter.plan_2,
#pc .entry_contribute_result .user_name.is_supporter.plan_2 a,
#pc .owner_result_wrap .name.is_supporter.plan_2 a {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}

#pc .message_timeline_result .user_02_result .title.is_supporter.plan_1::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-size: 11px auto;
    margin-right: 3px;
    padding: 0;
}

#pc .upload_result_2 .user_name.is_supporter,
#pc .result_item_01 .user.is_supporter {
    width: -webkit-fit-content;
    width:    -moz-fit-content;
    width:         fit-content;
}

#pc .message_timeline_result .user_02_result .title.is_supporter::before {
    content: "";
    display: inline-block;
    height: 18px;
    vertical-align: -4px;
    width: 11px;
}

#pc .latest_contribute_header .td.is_supporter a,
#pet_head_content .pet_detail_data_container .pet_owner.is_supporter a {
    padding: 3px 0 3px 15px;
}

#pc .result_item_01 .user.is_supporter {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    white-space: nowrap;
}




/*------------------------------------------------
SP版
------------------------------------------------*/


/*サイドメニュー
------------------------------------------------*/
#side_menu_wrap .user_icon_table .title.is_subscription {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 11px auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 3px 0 3px 15px;
}

#side_menu_wrap .user_icon_table .title.is_subscription.plan_2 {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}


/*マイページ
------------------------------------------------*/

/* ヘッダーメニュー */
.content_stream_btn_wrap .menu_btn.is_subscription_error {
    position: relative;
}

.content_stream_btn_wrap .menu_btn.is_subscription_error::before {
    background-image: url(https://cdn.pet-home.jp/web/assets/images/icon_limit_red.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    content: "";
    display: block;
    height: 14px;
    left: -5px;
    pointer-events: none;
    position: absolute;
    top: -5px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 14px;
}

/* ヘッダー */
#sp .user_head_content .is_subscription {
    background-color: #eb4847;
    border-radius: 15px;
    color: #fff;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    position: absolute;
    right: 8px;
    top: 10px;
    white-space: nowrap;
    z-index: 100;
}

#sp .user_head_content .is_subscription.plan_2 {
    background-color: #48b0cb;
}

#sp .user_head_content .is_subscription::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 12px auto;
    content: "";
    display: inline-block;
    height: 30px;
    margin: 0 7px 0 0;
    vertical-align: top;
    width: 12px;
}

#sp .user_head_content .is_subscription.plan_2::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}

#sp .user_head_content .link {
    font-size: 9px;
    margin: 10px 0 0;
    text-align: right;
}

#sp .user_head_content .user_name.is_supporter {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 12px auto;
    padding: 0 0 0 15px;
}

#sp .user_head_content .user_name.is_supporter.plan_2 {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}


/* バナー */
#sp .mypage_subscription_bnr {
    aspect-ratio: 36 / 13;
    background-color: #fff;
    -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 0 3px 2px rgba(0, 0, 0, .05);
    height: auto;
    margin: 0 0 15px;
    text-align: center;
}

#sp .mypage_subscription_bnr img {
    aspect-ratio: 36 / 13;
    height: 100%;
    width: 100%;
}

/* 決済エラー */
#sp .mypage_subscription_error_message {
    background-color: #fff;
    border: 2px solid #931220;
    color: #931220;
    font-weight: 700;
    margin: 0 0 15px;
    padding: 15px;
    text-align: center;
}

#sp .mypage_subscription_error_message .btn {
    background-color: #931220;
    border: none;
    border-radius: 15px;
    color: #fff;
    display: block;
    font-size: 10px;
    height: 30px;
    line-height: 30px;
    margin: 10px auto 0;
    padding: 0 30px;
    text-align: center;
    width: -webkit-fit-content;
    width:    -moz-fit-content;
    width:         fit-content;
}


/*メンバー一覧／詳細
------------------------------------------------*/

/* 一覧 */
#sp .result_item_08 .is_subscription::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 11px auto;
    content: "";
    display: inline-block;
    height: 15px;
    padding: 0 0 0 1px;
    vertical-align: -3px;
    width: 11px;
}

#sp .result_item_08 .is_subscription.plan_2::before {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}

/* 詳細 */




/*------------------------------------------------
WEBサブスクリプションページ
------------------------------------------------*/

/*変数
------------------------------------------------*/
.web_subscription_page {
    --color-blk: #313131;
    --color-lgy: #e8e7e3;
    --color-pnk: #e60f52;
    --color-red: #931220;
    --color-wht: #fff;
    --size-10: .625rem;
    --size-11: .6875rem;
    --size-12: .75rem;
    --size-13: .8125rem;
    --size-14: .875rem;
    --size-15: .9375rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-20: 1.25rem;
    --size-24: 1.5rem;
    --size-30: 1.875rem;
}


/*共通
------------------------------------------------*/
.web_subscription_page {
    color: var(--color-blk);
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
    font-size: var(--size-16);
    /*-webkit-font-smoothing: antialiased;*/
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    padding: 60px 0 0;
    position: relative;
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    width: 100vw;
    word-break: break-all;
}

.web_subscription_page a {
    color: var(--color-red);
}

.is_not_touch .web_subscription_page a:hover {
    text-decoration: none;
}


/*ヘッダー
------------------------------------------------*/
.web_subscription_header {
    border-bottom: 1px solid #e8e7e3;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.web_subscription_header .inner {
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    height: 60px;
    justify-content: space-between;
    margin: 0 auto;
    width: 950px;
}

.web_subscription_header .logo {
    aspect-ratio: 107 / 20;
    display: block;
    height: auto;
    width: 150px;
}

.web_subscription_header .logo img {
    aspect-ratio: 107 / 20;
    height: auto;
    width: 150px;
}

.web_subscription_header .link {
    font-size: var(--size-12);
}




/*------------------------------------------------
各所ユーザー名にアイコン追加
------------------------------------------------*/
#sp .contribute_user_result .user_name.is_supporter span,
#sp .message_timeline_result .name_01.is_supporter,
#sp .message_timeline_result .name_02.is_supporter::before,
#sp .message_post_wrap .name.is_supporter,
#sp .sp_entry_result_wrap .user_name.is_supporter .name,
#sp .page_stream_bar .title.is_supporter {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 11px auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 2px 0 2px 15px;
}

#sp .contribute_user_result .user_name.is_supporter.plan_2 span,
#sp .message_timeline_result .name_01.is_supporter.plan_2,
#sp .message_timeline_result .name_02.is_supporter.plan_2::before,
#sp .message_post_wrap .name.is_supporter.plan_2,
#sp .sp_entry_result_wrap .user_name.is_supporter.plan_2 .name,
#sp .page_stream_bar .title.is_supporter.plan_2 {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}

#sp .message_user_result .name.is_supporter a {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_ouchi_supporter.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 15px auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 2px 0 2px 20px;
}

#sp .message_user_result .name.is_supporter.plan_2 a {
    background-image: url(https://cdn.pet-home.jp/web/supporter_images/icon_challenge_supporter.svg);
}

#sp .message_timeline_result .name_02.is_supporter::before {
    content: "";
    display: inline-block;
    height: 15px;
    vertical-align: -3px;
    width: 11px;
}

#sp .message_post_wrap .name.is_supporter,
#sp .page_stream_bar .title.is_supporter {
    background-position: left 10px center;
    padding: 2px 0 2px 25px;
}