@charset "utf-8";

/* =================================================
  各カラーテーマでの変更不可。
  全テーマ共通のcss設定はこちらに記載します。
================================================= */


/*ページ全体の構成*/

*,
*:before,
*:after {
    box-sizing: border-box;
}
body,
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
    border-style: none;
}
html {
    font-size: 62.5%;
    line-height: 1.4;
    color: var(--text-color-default);
    background-color: var(--background-color-base);
}
body {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-family);
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}
.narrow_contents table,
.narrow_contents th,
.narrow_contents td {
    border: 1px solid var(--border-color-light);
}
.narrow_contents th,
.narrow_contents td {
    padding: 8px 8px 6px;
}
.narrow_contents th {
    text-align: left;
}

.default_table.sticky_thead thead th{
    position: sticky;
    top: 0;
    z-index:1;
}

.default_table thead th,
.default_table thead td{
    padding:10px;
    background-color: var(--background-color-light2);
}

.default_table tbody th,
.default_table tbody td{
    padding:10px;
    border-top: 1px solid var(--border-color-light);
}
.default_table tbody td{
    text-align: center;
}
.text_align_r,
tbody td.text_align_r{
    text-align: right;
}

.text_align_l,
tbody td.text_align_l{
    text-align: left;
}

thead .table_checkbox_wrap{
    width: 96px;
}

thead .table_checkbox_wrap .table_checkbox{
    display: inline-block;
    margin-right:10px;
    width: 20px;
    text-align: center;
}
thead .table_checkbox_wrap .table_checkbox_inner{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
tbody .table_checkbox_wrap .table_checkbox{
    width: 20px;
    display: block;
}

/* リンク */

a,
a:link,
a:visited {
    color: var(--link-color-default);
    text-decoration: none;
}
a:hover,
a:active {
    color: var(--link-color-default-hover);
    text-decoration: underline;
}
a.color_link,
.c-timeline__message__text a,
.comments li .name a,
.Viewing_list a,
.guide_menu a,
.comments li a.name {
    color: var(--link-color-colored);
    text-decoration: underline;
}
.Viewing_list a,
.guide_menu a {
    text-decoration: none;
}

a.underline_link,
.underline_link,
.individual_wrap td.work_contents a,
.rentalSales_wrap td.work_contents a,
.monthTimes_wrap td.work_contents a,
a.video_control-videotitle{
    text-decoration: underline;
}

a.underline_link:hover,
.underline_link:hover,
a.color_link:hover,
.c-timeline__message__text a:hover,
.comments li .name a:hover,
.comments li a.name:hover,
.individual_wrap td.work_contents a:hover,
.rentalSales_wrap td.work_contents a:hover,
.monthTimes_wrap td.work_contents a:hover,
a.video_control-videotitle:hover,
.pickup-container a.item-title-link:hover{
    text-decoration: none;
}

.Viewing_list a:hover,
.guide_menu a:hover {
    text-decoration: underline;
}
.sp_display {
    display: none;
}
.pc_display {
    display: block;
}
@media(max-width: 768px) {
    .sp_display {
        display: block !important;
    }
    .pc_display {
        display: none !important;
    }
}
.margin_top8{ margin-top:8px;}
.margin_top10{ margin-top:10px;}
.margin_top15{ margin-top:15px;}
.margin_top20{ margin-top:20px;}
.margin_top30{ margin-top:30px;}
.margin_top40{ margin-top:40px;}
.margin_bottom10{ margin-bottom:10px;}
.margin_bottom15{ margin-bottom:15px;}
.margin_bottom20{ margin-bottom:20px;}
.margin_bottom30{ margin-bottom:30px;}
.margin_bottom40{ margin-bottom:40px;}

input[type=text],
input[type=search],
input[type=tel],
input[type=url],
input[type=email],
input[type=password],
input[type=number],
textarea,
select,
.addEmComment,
.addEmComment:focus,
.videosetting_tag_frame pre,
.ui-autocomplete-input,
div.tagsinput > div{
    padding: 9px 8px;
    background-color: var(--input-color);
    color: var(--input-text-color);
    border: var(--input-border);
    border: none;
    border-radius: 5px;
    font-size: 1.6rem;
    line-height:1.2;
}

input[type=text]:disabled,
input[type=search]:disabled,
input[type=tel]:disabled,
input[type=url]:disabled,
input[type=email]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
textarea:disabled,
select:disabled,
.addEmComment:disabled,
.videosetting_tag_frame pre:disabled,
.ui-autocomplete-input:disabled,
div.tagsinput > div:disabled{
    background-color:  var( --input-disabled-background-color);
    color: var(--input-disabled-text-color);
    border: var(--input-disabled-border);
}

.ui-autocomplete-input{
    background-color: transparent;
}

select option {
    background-color: var(--background-color-light);
}
textarea {
    line-height: 1.6;
    width: 100%;
}
.videosetting_textarea textarea {
    color: var(--text-color-default) !important;
}
::placeholder {
    color: var(--text-color-placeholder);
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    background-image: url(../images/icon_select_down.svg);
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: right 7px center;
    padding-right: 25px;
    cursor: pointer;
}
select:disabled {
    cursor: auto;
}

.p-myPageSetting__avatarForm__inputFileWrapper {
    position: relative;
}
.form-material input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor:pointer;
}

.admin_sidemenu input[type=text],
.admin_sidemenu input[type=search],
.admin_sidemenu input[type=tel],
.admin_sidemenu input[type=url],
.admin_sidemenu input[type=email],
.admin_sidemenu input[type=password],
.admin_sidemenu input[type=number],
.admin_sidemenu select,
input[type=email].pw_resetting_form,
.videosetting_tag_frame pre,
.ui-autocomplete-input{
    padding-top: 13px;
    padding-bottom: 12px;
}

.ui-datepicker-trigger{
    padding:10px;
    transform:translateY(-2px);
    cursor:pointer;
}
.admin_sidemenu textarea {
    border: none;
    line-height: 1.6;
}
div.tagsinput > div{
    padding:0;
}
.admin_sidemenu textarea:focus {
    background-color: var(--input-color);
    color: var(--text-color-default);
}

/* 続きを読む */

.slide_comment_omitted_wrap {
    padding-bottom: 35px;
    position: relative;
}
.slide_comment_omitted {
    margin-top: 25px;
}
.slide_comment_omitted.isHidden {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    position: relative;
}
.slide_comment_omitted_more,
.slide_comment_omitted_hide {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    color: var(--link-color-default);
    cursor: pointer;
    display: block;
    height: 35px;
}
.slide_comment_omitted_more:after,
.slide_comment_omitted_hide:after {
    content: '';
    width: 16px;
    height: 16px;
    border: 0;
    border-top: solid 2px var(--link-color-default);
    border-right: solid 2px var(--link-color-default);
    position: absolute;
    top: calc(50% - 10px);
    right: calc(50% - 10px);
    transform: rotate(135deg);
}
.slide_comment_omitted_more:hover,
.slide_comment_omitted_hide:hover {
    background: linear-gradient(180deg, rgba(var(--color-cover-rgb), 0) 0%, rgba(var(--color-cover-rgb), .05) 80%);
}
.slide_comment_omitted_hide:after {
    transform: rotate(-45deg);
    top: 50%;
}

/* ********* ローディングアニメーション ********* */
@keyframes loading_spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.js-echo-loading{
    width: 200px;
    aspect-ratio: 16 / 9;
    display: inline-flex;
    overflow:hidden;
    position: relative;
    background-color: var(--loading-back-color);
}

.js-echo-loading:before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 15px);
    top:  calc(50% - 15px);
    border: 2px solid var(--loading-icon-base-color);
    border-top-color: var(--loading-icon-accent-color);
    animation: loading_spin 1s infinite linear;
}

.js-echo-loading img,
.js-echo-loading iframe{
    visibility: hidden;
}
/* ********* icon ********* */
.icon_info{
    width:16px;
    height:16px;
    border:1px solid;
    border-radius: 50px;
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:1px 0;
}

.icon_info:before{
    content:"";
    width:0;
    height:2px;
    border:1px solid;
    position: absolute;
    top: 3px;
    left: calc(50% - 1px);
}

.icon_info:after{
    content:"";
    width:0;
    height:5px;
    border:1px solid;
    position: absolute;
    top: 6px;
    left: calc(50% - 1px);
}

/* ********************* phpvide.css上書き ************************** */


/*マイリスト追加ポップアップ*/

.gritter-item,
.gritter-without-image {
    height: auto;
    padding: 10px
}
.gritter-with-image,
.gritter-without-image {
    display: block;
}
p.empty-content {
    color: var(--text-color-light);
    background-color: var(--background-color-light2);
}
.disabled {
    display: block;
}
/*-------------------------入力バリデーション--------------------------*/

.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .checkbox-inline label,
.has-error .checkbox label,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error .radio-inline label,
.has-error .radio label {
    padding: 3px 5px 1px;
    color: var(--error-text-color);
    background-color: var(--error-color);
}
.has-error .form-control {
    border: 2px solid var(--error-color);
}
.help-block {
    display: block;
}
.help-block:not(:empty) {
    margin-top: 1px;
}
.with-errors .list-unstyled ul {
    padding: 3px 5px 1px;
    color: var(--error-text-color);
    background-color: var(--error-color);
    font-weight: bold;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header {
    padding: 0;
    width: 100%;
    line-height: 1.2;
    position: relative;
}
.header_wrap {
    background-color: var(--header-background-color);
}
.header_inner {
    margin: 0 auto;
    padding: 5px 0;
    width: calc(100% - 30px);
    max-width: 1500px;
    display: flex;
}
@media (max-width: 900px){
    .header_inner {
        width: calc(100% - 12px);
    }

}
header h1 {
    display: flex;
    align-items: center;
}
header .logo {
    margin-right: 15px;
    display: block;
}
header .logo:hover {
    opacity: 0.85;
}
header .logo img {
    display: block;
    max-height: 40px;
    max-width: 200px;
}
#header_menu a.signup_btn,
#header_menu a.login_btn {
    padding: 5px 5px;
    display: flex;
    height: 40px;
    width:85px;
    align-items: center;
    justify-content: center;
    color:var(--header-link-color);
    text-align: center;
}
#header_menu a.signup_btn {
    border:1px solid var(--header-link-border-color);

    border-radius: 3px;
}
#header_menu a.signup_btn:hover,
#header_menu a.login_btn:hover {
    text-decoration: none;
    color: var(--header-link-hover-color);
}
.header_bottom_nav {
    background-color: var(--header-bottom-background-color);
    display: flex;
    justify-content: center;
}
.header_bottom_nav ul {
    display: flex;
    width: calc(100% - 30px);
    max-width: 1500px;
    flex-wrap: wrap;
}
.header_bottom_nav li {
    display: flex;
    position: relative;
}

.header_bottom_nav li.submenu{
    margin-right:15px;
}

.header_bottom_nav a,
.header_bottom_nav span.drop_down_btn {
    padding: 12px 12px 11px;
    display: flex;
    color: var(--header-bottom-link-color);
    min-width: 70px;
    max-width: 400px;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.header_bottom_nav a:hover,
.header_bottom_nav span:hover {
    text-decoration: none;
}
.header_bottom_nav a:hover {
    background-color: var(--background-color-light-hover);
}
.header_bottom_nav .submenu_link {
    cursor: pointer;
    position: relative;
}
.header_bottom_nav .submenu_link:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3.5px 0 3.5px;
    border-color: var(--header-bottom-link-color) transparent transparent transparent;
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
}
.header_bottom_nav .dropdow_follower_list,
.header_bottom_nav .submenu_list {
    padding:10px;
    background-color: var(--background-color-base);
    border: 1px solid var(--border-color-light);
    box-shadow: 0px 0px 10px 0px rgba(var(--color-cover-rgb), 0.1);
    position: absolute;
    top: calc(100% + 0px);
    left:0;
    z-index: 2;
    width: 650px;
    transition: all .1s ease-in;
    display: none;
    opacity: 0;
}

.header_bottom_nav .dropdow_follower_list{
    width: 300px;
}
.header_bottom_nav .dropdown_follower .active .dropdow_follower_list,
.header_bottom_nav .submenu.active .submenu_list {
    display: flex;
    opacity: 1;
    flex-wrap: wrap;
    gap:4px 3px;
}


.submenu_list a {
    padding: 5px 10px;
    text-align: left;
    align-items: center;
    background-color: var(--background-color-light2);
    border: 1px solid var(--border-color-light);
    border-radius: 50px;
}
.submenu_list li:last-child {
    margin-bottom: 0;
}

.submenu_language{
    margin: 4px 0 4px auto;
    align-items: center;
}
.header_left {
    display: flex;
    align-items: center;
}
.header_right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}


#header_menu {
    display: flex;
    align-items: center;
}
#header_menu > * {
    margin-left: 13px;
}
#header_menu > *:first-child {
    margin-left: 0;
}
.header_search_wrap {
    display: flex;
    position: relative;
}
.header_search_btn {
    width: 40px;
    height: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    border-radius: 0 50px 50px 0;
}
.header_search_btn:hover i {
    color: var(--icon-color-hover);
}
.header_inner .header_search_btn:hover i {
    color: var(--header-icon-color-hover);
}
input[type=text].header_search_input,
input[type=search].header_search_input {
    margin-top:1px;
    padding-left: 13px;
    padding-right: 40px;
    border-radius: 100px;
    width: 400px;
    line-height: 1;
    background-color: var(--input-color);
    color: var(--input-text-color);
}
.header_inner input[type=text].header_search_input,
.header_inner input[type=search].header_search_input {
    background-color: var(--hedder-input-color);
    color: var(--hedder-input-text-color);
}
@media (max-width: 900px){
    input[type=text].header_search_input,
    input[type=search].header_search_input {
        width: 330px;
    }
}
@media (max-width: 820px){
    input[type=text].header_search_input,
    input[type=search].header_search_input {
        width: 280px;
    }
}
/* suggest用の修正 */

.c-headerSearch__suggest ul {
    margin-left: 0;
    width: 100%;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    border: 1px solid var(--suggest-border-color);
    background-color: var(--suggest-background-color);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    z-index: 2;
}
.c-headerSearch__suggest li a {
    padding: 10px 10px 8px;
    display: block;
}
.c-headerSearch__suggest ul:before {
    content: "";
    display: block;
    content: "";
    position: absolute;
    top: -9px;
    left: calc(50% - 5px);
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-left: 1px solid var(--suggest-border-color);
    border-top: 1px solid var(--suggest-border-color);
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    background-color: var(--suggest-background-color);
    transform: rotate(45deg);
}
input#js-searchform__word--pc {
    display: block;
}
input#js-searchform__word--sp {
    display: none;
}
@media(max-width: 768px) {
    input#js-searchform__word--sp {
        display: block;
    }
    input#js-searchform__word--pc {
        display: none;
    }
}

/* suggest用の修正 ここまで */

.header_search_btn .gg-search{
    margin: 0 auto;
    display: block;
    color: var(--icon-color);
    transform: translate(-3px, -2px) scale(1.1);
}
.header_inner .header_search_btn .gg-search{
    color: var(--header-icon-color);
}

a.icon_btn,
a.cart_btn{
    display: flex;
    position: relative;
    color: var(--header-icon-color);
    height:40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.alarm_content_arrow{
    display: flex;
    position: relative;
}
.alarm_content_arrow.active:after,
.myMenu_content_arrow.active:after {
    position: absolute;
    top:calc(100% + 1px);
    left:calc(50% - 10px);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--border-color-dark) transparent;
    z-index:1008;
}

.alarm_content_arrow.active:before,
.myMenu_content_arrow.active:before {
    position: absolute;
    top:calc(100% + 2px);
    left:calc(50% - 9px);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent var(--background-color-base) transparent;
    z-index:1009;
}

a.icon_btn{
    font-size:0.9rem;
    width:40px;
}

a.icon_btn i{
    transform: scale(1.2,1.2);
}
a.cart_btn i{
    transform: scale(1.1,1.1);
}

a.icon_btn:hover,
a.cart_btn:hover{
    text-decoration: none;
    color: var(--header-icon-color-hover);
}

.alarm_btn i{
    margin-top: -4px;
}

#header_menu a.cart_btn {
    font-size:1rem;
    width:60px;
}

.cart_btn i{
    margin-right: 5px;
    margin-bottom: 3px;
}

@media(max-width: 768px) {
    .header_right {
        flex-shrink: 1;
    }
    .spRight_icon .gg-search {
        transform: translate(0, -2px) scale(1.2);
    }
    #header_menu .cart_btn:hover,
    .cart_btn:hover i,
    .alarm_btn:hover i {
        color: var(--header-icon-color);
    }
    .header_search_btn:hover i {
        color: var(--icon-color);
    }
    .header_inner .header_search_btn:hover i {
        color: var(--header-icon-color);
    }
    .c-headerSearch__suggest li a {
        padding: 13px 10px 11px;
    }
    #header_menu a.signup_btn:hover,
    #header_menu a.login_btn:hover {
        color: var(--header-icon-color);
    }
}
@media(max-width: 600px) {
    header .logo img {
        max-width: 110px;
    }
    #header_menu > * {
        margin-left: 10px;
    }
    #header_menu a.cart_btn {
        margin-left: 10px;
    }
    #header_menu a.signup_btn,
    #header_menu a.login_btn {
        width:75px;
        font-size:1.3rem;
    }
}
@media(max-width: 420px) {
    #header_menu > * {
        margin-left: 5px;
    }
    #header_menu a.cart_btn.not_logged_in {
        margin-left: 5px;
        width: 50px;
    }
    #header_menu a.signup_btn,
    #header_menu a.login_btn {
        width:62px;
        font-size:1.1rem;
    }
}
@media(max-width: 380px) {
    #header_menu a.cart_btn.not_logged_in{
        width: 40px;
    }
    #header_menu a.signup_btn,
    #header_menu a.login_btn {
        width:40px;
    }
}
@media(max-width: 374px) {
    #header_menu a.cart_btn{
        width: 40px;
        margin-left: 6px;
    }
}
/*ハンバーガーメニュー*/

.nav-unshown {
    display: none;
}
#sp_search_open,
#nav-open {
    display: none;
}
.spHeader {
    width: 100%;
    padding: 4px 0;
    height: 50px;
    background-color: var(--background-color-base);
    display: none;
}

header .news_list,
.notice_list{
    margin-bottom: 10px;
}

header .news_list a,
.notice_list a{
    padding:13px 13px 10px;
    display: block;
    position: relative;
}
header .news_list a:hover,
.notice_list a:hover {
    text-decoration: none;
    background-color: var(--background-color-base-hover);
}

header .news_date {
    position: relative;
    font-size: 1.2rem;
    display: block;
    color: var(--link-color-light);
}
header .news_title {
    margin-top: 3px;
    display: block;
    line-height:1.4;
}

@media(max-width: 768px) {
    .header_inner {
        padding-left: 45px;
    }
    .header_search_wrap {
        width: 100%;
    }
    input[type=text].header_search_input {
        width: 100%;
    }
    /*ハンバーガーメニュー*/
    .nav-unshown {
        display: none;
    }
    .cp_hmenuac06 span,
    .cp_hmenuac06 span:before,
    .cp_hmenuac06 span:after {
        position: absolute;
        height: 1px;
        width: 22px;
        background: var(--hedder-text-color-default);
        display: block;
        content: '';
        cursor: pointer;
    }
    .cp_hmenuac06 span:before {
        bottom: -9px;
    }
    .cp_hmenuac06 span:after {
        bottom: -18px;
    }
    #nav-close {
        display: none;
        position: fixed;
        z-index: 1099;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(var(--color-cover-rgb));
        opacity: 0;
        transition: .3s ease-in-out;
    }
    #nav-content {
        padding: 0 0 50px;
        text-align: left;
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 90%;
        max-width: 300px;
        height: 100%;
        background: var(--background-color-base);
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
        font-size: 1.4rem;
    }
    #nav-input:checked ~ #nav-close {
        display: block;
        opacity: .6;
    }
    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 2px 0 15px rgba(0, 0, 0, .4);
        z-index: 9998;
        transition: .3s ease-in-out;
    }
    .nav-content-wrap {
        padding: 17px 0 8px;
        border-bottom: 1px solid var(--border-color-dark);
    }
    .nav-content-wrap.drawer_logo{
        padding: 0;
        border-bottom:none;
    }
    .nav-content-wrap.drawer_logo.logged_in{
        margin-bottom: 8px;
        border-bottom:1px solid var(--drawer-logo-border-bottom-color);
    }
    .nav-content-wrap.drawer_logo a.logo{
        margin: 0;
        padding:5px 15px 5px 40px;
        display: block;
        float:none;
        position: relative;
        max-width: initial;

    }
    .nav-content-wrap.drawer_logo a.logo:after,
    .nav-content-wrap.drawer_logo a.logo:before{
    	content: '';
    	width: 8px;
    	height: 8px;
    	border: 0;
    	border-top: solid 2px var(--drawer-logo-arrow-border-color);
    	border-right: solid 2px var(--drawer-logo-arrow-border-color);
    	position: absolute;
    	top: calc(50% - 4px);
    	transform: rotate(-135deg);
    }
    .nav-content-wrap.drawer_logo a.logo:after{
    	left: 16px;
    }
    
    .nav-content-wrap.drawer_logo a.logo:before{
    	left: 22px;
    }
    
    .nav-content-wrap.drawer_logo a.logo img{
        display: block;
        max-height: 40px;
        max-width: 200px;
    }
    .nav-content-wrap.login_list {
        padding: 18px 12px;
        display: flex;
        gap:0 12px;
        background-color: var(--drawer-login-list-background-color);
        border-bottom:none;
    }
    .nav-content-wrap.sp_searchBox_show {
        padding:12px 12px;
        width: 100%;
        border-bottom:none;
    }
    
    .nav-content-wrap.nav_list {
        padding: 8px 0 5px;
    }

    .nav-content-wrap:last-child {
        border-bottom: none;
    }
    .hamburger-list a {
        display: block;
        padding: 12px 15px;
    }
    #nav-content h3 {
        margin: 0 15px 12px;
        font-size: 1.4rem;
        color: var(--text-color-light);
        font-weight: bold;
        width: calc(100% - 30px);
        position: relative;
    }
    .hamburger-tag-list li {
        margin-bottom: 3px;
    }
    .hamburger-tag-list a {
        padding: 5px 15px;
        display: block;
    }
    #nav-content a.signup_btn,
    #nav-content a.login_btn {
        margin: 0 auto;
        padding: 12px 12px;
        display: flex;
        width:100%;
        max-width: initial;
        min-width: initial;
        border-radius: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size:1.4rem;
    }
    #nav-content a.signup_btn {
        border:1px solid var(--color-main);
    }
    #nav-content a.login_btn {
        border:1px solid var(--btn-color-gray-hover);
        background-color: var(--drawer-login-btn-background-color);
    }
    #nav-content a.signup_btn:hover {
        background-color: var(--color-main);
    }
    #nav-content a.login_btn:hover {
        text-decoration: none;
        color: var(--link-color-default);
    } 
    /*---------ハンバーガー横線---------*/
    .add_border_b {
        border-bottom: thin solid var(--border-color-light);
        margin-bottom: 15px;
        margin-right: 10px;
        padding-bottom: 15px;
    }
    /*---------ヘッダースマホ表示---------*/
    .header_inner .spRight_icon label {
        cursor: pointer;
        display: flex;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
}
@media(max-width: 374px) {
    .header_inner {
        padding-left: 30px;
    }
    .cp_hmenuac06 {
        width: 20px;
    }
    /*ハンバーガーアイコンをCSSだけで表現*/
    .cp_hmenuac06 span,
    .cp_hmenuac06 span:before,
    .cp_hmenuac06 span:after {
        width: 20px;
    }
    .spRight_icon label {
        padding: 10px 7px;
    }
}

/* ヘッダーアバター下メニュー */
#myMenu-open {
    display: flex;
    cursor: pointer;
    outline: 0;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
#myMenu-open .avatar_common{
    border:1px solid var(--avatar-icon-border-color-on-primary-bg);
}
#header_menu .myMenu_content_arrow{
     margin-left: 20px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
#myMenu-content,
#alarm-content{
    margin-left: 0;
    display: none;
    position: absolute;
    z-index: 1007;
    width: 90%;
    max-width: 250px;
    height: auto;
    border: 1px solid var(--border-color-dark);
    background-color: var(--background-color-light2);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    top: 55px;
    right: 5px;
}
#myMenu-content .c-userPopover__nav{
    position: relative;
    z-index: 1009;
}
#alarm-content{
    max-width: 350px;
    background-color: var(--background-color-base);
}

.alarm_content_inner h2{
    padding:8px 13px 7px;
    font-size:1.2rem;
}

.alarm_content_tab{
    display: flex;
    background-color: var(--background-color-light2);
}

.alarm_content_tab a{
    padding:10px 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.alarm_content_tab a.active{
    font-weight: bold;
    border-bottom:1px solid var(--color-main);
}
.alarm_content_tab a.badge[data-badge]:after{
    top: 3px;
}
.alarm_content_tab a:hover{
    text-decoration: none;
}

#myMenu-content > .arrow,
#alarm-content > .arrow {
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: -1;
}
.c-userPopover__nav > ul {
    border-bottom: 1px solid var(--border-color-dark);
}
#myMenu-content h4 {
    margin-top: 8px;
    padding: 5px 15px;
    font-size: 1.2rem;
}
#myMenu-content li a {
    display: flex;
    padding: 12px 15px;
    font-size: 1.4rem;
    align-items: center;
    position: relative;
}
#myMenu-content li a.user_name {
    padding: 6px 8px 5px;
    background: var(--background-color-base);
}
.user_name_img {
    margin-right: 10px;
}
#myMenu-content li a:hover {
    text-decoration: none;
    background-color: var(--background-color-light-hover);
}

.alarm_content_panel{
    padding: 0 0 10px;
    display: none;
}
.alarm_content_panel.active{
    display: block;
}
/* ヘッダポイント残高 */
.header_point_balance{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--header-point-color);
    display: inline-block;
    cursor: pointer;
    margin-left: 8px;
}
.header_point_balance:hover{
    color: var(--header-point-color-hover);
}
.header_point_balance_icon{
    display: inline-block;
    fill: var(--header-point-color-icon);
    vertical-align: middle;
}
.header_point_balance:hover .header_point_balance_icon{
    fill: var(--header-point-color-hover);
}
.header_point_balance_text{
    display: none;
}
@media (max-width: 500px){
    .header_point_balance{
        font-size: 1.2rem;
    }
}
@media (max-width: 336px){
    .header_point_balance{
        display: inline-flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .header_point_balance_text{
        display: inline-block;
        font-size: 1.0rem;
        margin-left: 4px;
    }
    .header_point_balance_icon{
        display: flex;
        margin-bottom: 2px;
    }
    .header_point_balance_icon svg{
        height: 11px;
        width: 11px;
    }
}

@media (max-width: 420px){
    #header_menu .myMenu_content_arrow{
        margin-left: 8px;
    }
}
@media (max-width: 340px){
    #header_menu .myMenu_content_arrow{
        margin-left: 6px;
    }
}

/* ポイント履歴 */
.point_manger_balance{
    background: var(--pointbalance-current-background);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    margin-bottom: 32px;
}
.balance_title{
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 16px;
}
.balance_title_icon{
    display: inline-block;
    fill: var(--pointbalance-icon);
    margin-right: 4px;
}
.balance_title_icon svg{
    vertical-align: bottom;
    height: 29px;
}
.balance_point{
    margin-bottom: 16px;
    font-size: 2.0rem;
    font-weight: bold;
}
.balance_point > strong{
    display: inline-block;
    font-size: 2.8rem;
    margin-right: 4px;
}
.expiry_date,
.balance_expiry{
    display: inline-block;
}
.balance_expiry{
    margin-left: 24px;
}
.expiry_point{
    color: var(--pointbalance-color-expiry);
}
/* point tab */
.point_tab{
    margin-bottom: 24px;
}
.point_tab_menu{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 1.6rem;
    font-weight: bold;
}
.point_tab_menu::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pointbalance-tab-default-border);
}
.point_tab_menu li{
    position: relative;
    padding: 12px 24px;
    min-width: 164px;
    text-align: center;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transition: all .14s linear;
}
.point_tab_menu li::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pointbalance-tab-default-border);
}
.point_tab_menu li:hover{
    color: var(--pointbalance-tab-active-color);
    background: var(--pointbalance-tab-active-background);
}
.point_tab_menu li.is_active{
    color: var(--pointbalance-tab-active-color);
    background: var(--pointbalance-tab-active-background);
}
.point_tab_menu li.is_active::before{
    background: var(--pointbalance-tab-active-border);
}

.point_list_text{
    margin-bottom: 16px;
}
.point_list_table{
    margin-bottom: 32px;
}
.point_list_table thead th{
    padding: 16px 0;
    background: var(--pointbalance-table-base-background);
}
.point_list_table thead th:nth-child(odd){
    background: var(--pointbalance-table-odd-background);
}
.point_list_table tbody tr{
    border-bottom: 1px solid var(--pointbalance-table-border);
}
.point_list_table tbody tr td{
    padding: 16px 0;
}
.point_list_table tbody tr td.point_list_content{
    font-weight: bold;
}
.point_list_table thead th.point_list_content{ width: 30%; }
.point_list_table thead th.point_list_date{ width: 20%; }
.point_list_table thead th.point_list_expiry_date{ width: 20%; }
.point_list_table thead th.point_list_point{ width: 30%; }
@media(max-width: 550px) {
    .point_list_table{
        border-top: 1px solid var(--pointbalance-table-border);
    }
    .point_list_table thead{ display: none; }
    .point_list_table tbody tr{
        display: flex;
        flex-wrap: wrap;
    }
    .point_list_table tbody tr .point_list_content,
    .point_list_table tbody tr .point_list_point{
        order: 1;
        width: 50%;
    }
    .point_list_table tbody td::before{
        content: attr(data-table-label);
        display: block;
        font-size: 1.1rem;
        color: var(--text-color-light2);
        font-weight: normal;
        margin-bottom: 4px;
    }
    .point_list_table tbody tr .point_list_date,
    .point_list_table tbody tr .point_list_expiry_date{
        order: 2;
        width: 100%;
        text-align: left;
        padding-top: 0;
    }
    .point_list_table tbody tr .point_list_date{
        padding-bottom: 8px;
    }
    .point_list_table tbody tr .point_list_date::before,
    .point_list_table tbody tr .point_list_expiry_date::before{
        content: attr(data-table-label)": ";
        display: inline-block;
    }
    .point_list_table tbody td.expiry_list_name,
    .point_list_table tbody td.expiry_list_point{
        order: 1;
        width: 50%;
    }
    .point_list_table tbody td.expiry_list_date{
        order: 2;
        width: 100%;
        display: flex;
        padding-top: 0;
    }
    .point_list_table tbody td.expiry_list_date::before{
        margin-right: 8px;
    }
}
tbody .expiry_list_date{
    text-align: center;
}
tbody .expiry_list_point{
    text-align: right;
}
tbody .point_list_date,
tbody .point_list_expiry_date{
    text-align: center;
    font-size: 1.2rem;
}

tbody .point_list_point{
    text-align: right;
    font-weight: bold;
}
tbody .point_list_point.point_add{
    color: var(--pointbalance-list-add);
}
tbody .point_list_point.point_add strong::before{
    content: "+";
}
tbody .point_list_point.point_use{
    color: var(--pointbalance-list-use);
}
tbody .point_list_point.point_use strong::before{
    content: "";
}
.point_list_contents{
    display: none;
}
.point_list_contents.visible{
    display: block;
}
.point_list_pager{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.point_list_pager button{
    border: 1px solid var(--pointbalance-pager-border);
    background: var(--pointbalance-pager-background);
    color: var(--pointbalance-pager-text);
    padding: 10px 12px;
    border-radius: 4px;
    transition: all .14s linear;
}
.point_list_pager button:hover{
    background: var(--pointbalance-pager-background-hover);
    border-color: var(--pointbalance-pager-border-hover);
    color: var(--pointbalance-pager-text-hover);
}


/*-------------------ヘッダー通知バッチ---------------------*/
.badge[data-badge]:after,
.simple_badge:after {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 1rem;
    text-align: center;
    content: attr(data-badge);
    position: absolute;
    top: 2px;
    right: 3px;
    background: var(--color-accent);
    color: var(--text-color-with-background);
    border-radius: 50%;
}

.badge[data-badge]:after{
    top: -1px;
}
.badge[data-badge="0"]:after {
    display: none;
}

.simple_badge:after {
    content: "";
    width: 8px;
    height: 8px;
}

.notice-item .simple_badge:after,
footer .simple_badge:after{
    top: 4px;
    right: 3px;
}

#myMenu-open.simple_badge:after {
    top: -1px;
    right: -1px;
}

#myMenu-content li a.badge[data-badge]:after{
    top: calc(50% - 9px);
    right: 7px;
}

/*ハンバーガーお知らせ既読*/
#nav-open_pf {
    position: absolute;
    top: 15px;
    left: 15px;
    display: block;
    width: 25px;
    height: 24px;
    cursor: pointer;
}
@media(max-width: 374px) {
    #nav-open_pf {
        left: 8px;
    }
}

/*---------------------上に戻るボタン----------------------*/

.pagetop {
    background-color: rgba(var(--pagetop-color), .1);
    text-decoration: none;
    display: none;
    position: fixed;
    bottom: 50px;
    right: 20px;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100px;
    text-align: center;
    cursor: pointer;
    z-index: 1003;
    color: var(--pagetop-color-arrow);
    font-size: 25px;
}
.pagetop:hover {
    text-decoration: none;
    background-color: rgba(var(--pagetop-color), .15);
}

/*-------------------------フッター--------------------------*/

.footer {
    margin-top: auto;
    width: 100%;
}
.footer_inner {
    margin-top: 150px;
    padding: 20px 0 15px;
    background-color: var(--header-background-color);
    ;
    width: 100%;
}
.footer_head{
    margin-bottom: 20px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer_language select{
    background-color: var(--hedder-input-color);
    color: var(--hedder-input-text-color);
}

.footer .ft_logo {
    margin-bottom: 20px;
    margin-right: 50px;
}
.footer .ft_logo img {
    max-height: 40px;
    max-width: 200px;
}

.footer .footer_news {
    width: 100%;
    max-width: 700px;
}
.footer h2 {
    margin-bottom: 10px;
    color: var(--hedder-text-color-light);
    font-weight: bold;
    font-size: 1.5rem;
}
.ft_btm_link {
    padding: 25px 15px 0;
    border-top: 1px solid var(--header-border-color-dark);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column;
}
.ft_btm_link_first {
    display: flex;
    flex-wrap: wrap;
}
.ft_btm_link_first a {
    margin-bottom: 10px;
    margin-right: 25px;
    display: block;
}
.copyright {
    margin-bottom: 10px;
    margin-top: 12px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    color: var(--hedder-text-color-light2);
    width: 100%;
    justify-content: center;
}
.ft_link_box {
    margin-bottom: 20px;
    padding: 0 15px;
    display: flex;
}
/* Footer Banner  */
.footer_banner{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}
.footer_banner_box > a {
    display: inline-block;
}
@media(max-width: 1594px) {
    .ft_link_box.footer_banner{
        width: 1266px;
        margin: 0px auto 24px;
    }
}
@media(max-width: 1290px) {
    .ft_link_box.footer_banner{
        width: 954px;
        margin: 0px auto 24px;
    }
}
@media(max-width: 980px) {
    .ft_link_box.footer_banner{
        width: 642px;
    }
}

@media(max-width: 700px) {
    .ft_link_box.footer_banner{
        width: 100%;
        flex-direction: column;
        justify-content: center;
    }
    .footer_banner_box {
        margin-bottom: 12px;
    }
}

.img_footer_banner{
    width:300px;
    height:100px;
    object-fit: cover;
}

.ft_link_inner{
    margin-right: 80px;
    display: flex;
}
.ft_link_inner p {
    margin-bottom: 10px;
}
.ft_link_inner > div {
    margin-right: 40px;
}
.footer_tab_wrap > div:last-child,
.ft_link_inner > div:last-child {
    margin-right: 0;
}
.ft_link_inner > div:not(.footer_tab_wrap) {
    max-width: 170px;
    min-width: 100px;
}
.footer_tag_inner {
    position: relative;
    columns: 4;
    column-gap: 30px;
}
.footer_tab_wrap h2 {

}
.footer_tag_inner p {
    margin-right: 0;
    max-width: 140px;
}
.footer_info{
    margin-top: 40px;

}
.footer_info_inner{
    width: 100%;
    display: flex;
    background-color: var(--background-color-base);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--border-color-light);
}
.footer .footer_info_inner h2{
    color: var(--footer-text-color-light);
}
.footer_info_card{
    margin-right: 40px;
}
.footer_info_card_logo{
    display: inline-flex;
    padding: 24px;
    background-color: var(--footer-payment-info);
    border-radius: 3px;
}
.footer_info_card_logo li:not(:last-child){
    margin-right: 24px;
}
.footer_info_address dl{
    display: flex;
    flex-direction: column;
    color: var(--text-color-default);
}
.footer_info_address dl:not(:last-child){
    margin-bottom: 10px;
}
.footer_info_address dl dt{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 8px;
    width: 78px;
    color: var(--text-color-default);
}


.ft_btm_link a,
.ft_link_box a:not(.news_list_btn),
footer .news_list a{
    color: var(--header-link-color);
    display: inline-block;
    padding: 4px 0;
}
.ft_btm_link a:hover,
.ft_link_box a:not(.news_list_btn):hover,
footer .news_list a:hover{
    color: var(--header-link-hover-color);
}

.ft_btm_link a {
    font-size: 1.2rem;
    padding: 4px 0px;
}

footer .news_list li{
    margin-bottom: 15px;
}

footer .news_list a{
    padding-right:10px;
    display: inline-flex;
    position: relative;
}

footer .news_date{
    padding-right:15px;
    color: var(--hedder-text-color-light);
    position: relative;
}

footer .news_list a:hover .news_title{
    text-decoration: underline;
}

.footer_news a:hover{
    text-decoration: none;
}
@media(max-width: 1600px) {
    .footer_tag_inner {
        columns: 3;
    }
    .footer .footer_news {
        max-width: 600px;
    }
}
@media(max-width: 1370px) {
    .footer_tag_inner {
        columns: 2;
    }
}

@media(max-width: 1260px) {
    .ft_link_box {
        flex-direction: column-reverse;
    }
    .ft_link_box.footer_banner{
        flex-direction: row;
    }
    .ft_link_box.footer_info .footer_info_inner{
        flex-direction: column;
    }
    .footer .footer_news {
        margin-bottom: 40px;
        max-width: 800px;
    }
    .footer_tag_inner {
        columns: 4;
    }
    .footer_info_card{
        margin-bottom: 24px;
    }
}

@media(max-width: 900px) {
    .footer_tag_inner {
        columns: 3;
    }
    .footer_info_address dl{
        flex-direction: column;
    }
    .footer_info_address dl dt{
        width: 100%;
        margin-right: 0;
        margin-bottom: 4px;
    }
}

@media(max-width: 768px) {
    .ft_link_inner {
        flex-wrap: wrap;
    }
    footer .news_list a{
        display: inline-block;
    }
    footer .news_title{
        display: block;
    }
    .ft_link_inner > div{
        margin-bottom: 40px;
    }
    .ft_link_inner > div:last-child{
        margin-bottom: 0;
    }
    .footer_tag_inner {
        width: 100%;
        columns: 3;
    }
    .ft_btm_link_first {
        margin-bottom: 10px;
    }
    .ft_link_box.footer_info .footer_info_inner{
        padding: 20px 10px;
    }
    .footer_info_card_logo{
        padding: 12px;
    }
    .ft_btm_link a,
    .ft_link_box a:not(.news_list_btn),
    footer .news_list a{
        padding: 8px 0;
    }
}
@media(max-width: 550px) {
    .footer_tag_inner {
        columns: 2;
    }
}

/*-------------cookieガイダンス オーバーレイ--------------*/

.cookie-popup {
    padding: 20px 15px;
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 80px;
    color: #fff;
    background-color: rgba(var(--color-cover-rgb), .7);
    display: flex;
    visibility: hidden;
    z-index: 4;
    align-items: center;
}
.cookie-popup-wrap {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 1500px;
}
.cookie-popup.is-show {
    visibility: visible;
}
.cookie-popup a,
.cookie-popup a:link,
.cookie-popup a:visited,
.cookie-popup a:hover,
.cookie-popup a:active {
    color: inherit;
    text-decoration: underline;
}
.cookie-popup a:hover {
    text-decoration: none;
}
.cookie-txt {
    margin-right: 40px;
    max-width: 1000px;
}
.cookie-ok {
    padding: 10px;
    width: 100%;
    max-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-default);
    background-color: var(--background-color-base);
    border-radius: 50px;
    cursor: pointer;
}
.cookie-area-hidden {
    display: none;
}
@media (max-width: 768px) {
    .cookie-popup-wrap {
        flex-direction: column;
    }
    .cookie-txt {
        margin-right: 0;
        width: 100%;
        margin-bottom: 20px;
    }
    .cookie-ok {
        max-width: 200px;
    }
}

/* --------------------共通contents-------------------- */

.whitetitle {
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    margin: 30px 0 30px;
}

.back_link + .whitetitle{
    margin-top:10px;
}
.whitetitle.text_align_left{
    text-align: left;
}
.page_sub_title{
    margin-bottom:20px;
}

.whitetitle_icon_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.whitetitle_icon_wrap i {
    margin-right: 22px;
}
.whitetitle_icon_wrap i.gg-shopping-cart {
    transform: translate(0, -4px) scale(1.45);
}
.captiontitle {
    font-weight: bold;
    font-size: 2.6rem;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
    .captiontitle {
        margin-bottom: 20px;
    }
}
.main_contents {
    margin: 0 auto;
    width: calc(100% - 30px);
}
.small_contents{
    width: calc(100% - 30px);
    max-width: 1280px;
    margin: 0 auto;
}
#body-x_home .main_contents,
#body-x_lp .main_contents {
    width: 100%;
}
#body-x_home .main_contents .main_contents{
    margin-top:30px;
}
.narrow_contents {
    margin: 0 auto;
    width: 100%;
    max-width: 728px;
}
.back_link {
    margin-top: 20px;
    padding-left:18px;
    position: relative;
}
.back_link:before{
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 1px var(--link-color-default);
	border-right: solid 1px var(--link-color-default);
	position: absolute;
	top: 7px;
	left: 5px;
	transform: rotate(-135deg);
}
.back_link a {
    text-decoration: underline;
}
.back_link a:hover {
    text-decoration: none;
}

.icon_required{
    margin-left:8px;
    padding:2px 4px;
    border:1px solid var(--icon-required-border-color);
    background-color: var(--icon-required-background-color);
    color:var(--icon-required-text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size:1.1rem;
    line-height:1;
    transform:translateY(-2px);
}
/*ユーザーアイコン、アバター*/
.avatar_common,
a.avatar_common,
li a.avatar_common,
.skeleton-avatar_common{
    width: 36px;
    aspect-ratio:1/1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar_common,
a.avatar_common,
li a.avatar_common{
    overflow:hidden;
    border:1px solid var(--avatar-icon-border-color);
    background-color: var(--avatar-icon-background-color);
}

.avatar_common img,
a.avatar_common img,
li a.avatar_common img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
.avatar_common.avatar_common_large{
    width: 124px;
}
@media (max-width: 768px){
    .avatar_common.avatar_common_large{
        width: 112px;
    }
}
/*--------------------動画コンテンツ一覧--------------------*/

.video_list_table {
    display: flex;
    flex-wrap: wrap;
}
.video_list_table li {
    margin: 0 15px 50px 0;
    position: relative;
    width: calc((100% - 75px) / 6);
}
.video_list_table li.rl_wd {
    display: flex;
    flex-direction: column;
}

.video_list_table li:nth-child(6n) {
    margin-right: 0;
}
.rl_wd img {
    width: 100%;
}
@media (max-width: 1999px) {
    .video_list_table li {
        width: calc((100% - 60px) / 5);
    }
    .video_list_table li:nth-child(6n) {
        margin-right: 15px;
    }
    .video_list_table li:nth-child(5n) {
        margin-right: 0;
    }
}
@media (max-width: 1499px) {
    .video_list_table li {
        width: calc((100% - 45px) / 4);
    }
    .video_list_table li:nth-child(5n) {
        margin-right: 15px;
    }
    .video_list_table li:nth-child(4n) {
        margin-right: 0;
    }
}
@media (max-width: 1024px) {
    .video_list_table li {
        width: calc((100% - 30px) / 3);
    }
    .video_list_table li:nth-child(4n) {
        margin-right: 15px;
    }
    .video_list_table li:nth-child(3n) {
        margin-right: 0;
    }
}
@media (max-width: 768px) {
    .video_list_table li {
        margin-bottom: 30px;
    }
}
@media (max-width: 650px) {
    .video_list_table li {
        width: calc((100% - 15px) / 2);
    }
    .video_list_table li:nth-child(3n) {
        margin-right: 15px;
    }
    .video_list_table li:nth-child(2n) {
        margin-right: 0;
    }
}

/*----------------tpl.list-simple----------------*/

.c-productCard__img {
    aspect-ratio: 16 / 9;
    position: relative;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    background-color: rgb(var(--color-cover-rgb));
}
.p-videolist__videosample {
    display: none;
}
.p-videolist__videosample,
.p-videolist__videosample__link {
    border: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.p-videolist__videosample__progress {
    display: none;
    background: rgb(var(--color-cover-rgb));
    bottom: 0;
    height: 2px;
    left: 0;
    margin-bottom: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 9;
}
.p-videolist__videosample__bar {
    width: 0;
    background: var(--color-accent);
    height: 2px;
}
.c-productCard__img__link {
    display: block;
    aspect-ratio: 16 / 9;
    padding-left: 100%;
    position: absolute !important;
    top: 0;
}

/*-------------------サムネイルローディング・サイズ位置調整-----------------------*/

.thumbnail_before_load {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
}

/*----------------------作品一覧スライダー設定---------------------*/

.video_list_slider li {
    margin-right: 15px;
    text-align: left;
    position: relative;
}
.video_list_slider li a {
    position: relative;
    display: block;
    flex-shrink: 0;
}

@media(max-width: 768px) {
    .video_list_slider li .avatar_common,
    .video_list_table .avatar_common,
    .pickup-container .avatar_common{
        width: 28px;
    }
}

.rl_wd_hover_wrap:hover a,
.rl_wd_hover_wrap:hover .title-text {
    color: var(--link-color-default-hover);
    text-decoration: none;
}

.video_icon_wrap {
    margin-top:8px;
    display: flex;
    gap:2px 2px;
    flex-wrap: wrap;
    min-height:17px;
}

/*---ミニスライダー（タイトル、アイコン）---*/

.video_icon {
    padding: 2px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video_icon ,
.video_detail_icon,
.group_detail_icon{
    border:1px solid transparent;
}
.video_icon_new,
.video_icon_recent {
    background: var(--icon-color-recent);
    color: var(--icon-color-recent-text);
    border-color:var(--icon-color-recent-border-color);
}
.video_icon_subscription {
    background-color: var(--icon-color-subscription);
    color: var(--icon-color-subscription-text);
    border-color:var(--icon-color-subscription-border-color);
}
.video_icon_free {
    background-color: var(--icon-color-free);
    color: var(--icon-color-free-text);
    border-color:var(--icon-color-free-border-color);
}
.video_icon_4k,
.video_icon_8k{
    padding-top:1px;
    padding-bottom:1px;
    font-size:1.3rem;
    min-width:40px;
}
.video_icon_8k{
    background: var(--icon-color-8k);
    color: var(--icon-color-8k-text);
    border-color:var(--icon-color-8k-border-color);
}
.video_icon_4k {
    background: var(--icon-color-4k);
    color: var(--icon-color-4k-text);
    border-color:var(--icon-color-4k-border-color);
}

.video_icon_full_hd{
    background: var(--icon-color-full-hd);
    color: var(--icon-color-full-hd-text);
    border-color:var(--icon-color-full-hd-border-color);
}
.video_icon_hd{
    background: var(--icon-color-hd);
    color: var(--icon-color-hd-text);
    border-color:var(--icon-color-hd-border-color);
}
.video_icon_high{
    background: var(--icon-color-high);
    color: var(--icon-color-high-text);
    border-color:var(--icon-color-high-border-color);
}
.video_icon_middle{
    background: var(--icon-color-middle);
    color: var(--icon-color-middle-text);
    border-color:var(--icon-color-middle-border-color);
}

.video_list_slider li {
    width: calc((100vw - 185px) / 7);
}
#body-video .video_list_slider li {
    width: calc((100vw - 205px) / 7);
}
@media(max-width: 1999px) {
    .video_list_slider li {
        width: calc((100vw - 150px) / 6);
    }
    #body-video .video_list_slider li {
        width: calc((100vw - 170px) / 6);
    }
}
@media(max-width: 1499px) {
    .video_list_slider li {
        width: calc((100vw - 135px) / 5);
    }
    #body-video .video_list_slider li {
        width: calc((100vw - 155px) / 5);
    }
}
@media(max-width: 1099px) {
    .video_list_slider li {
        width: calc((100vw - 120px) / 4);
    }
    #body-video .video_list_slider li {
        width: calc((100vw - 140px) / 4);
    }
}
@media(max-width: 768px) {
    
    .video_icon_wrap {
        min-height:16px;
    }
    .video_list_slider li {
        width: calc((100vw - 105px) / 3);
    }
    #body-video .video_list_slider li {
        width: calc((100vw - 125px) / 3);
    }
    .video_icon {
        font-size: 1rem;
    }
    .video_icon_4k,
    .video_icon_8k {
        font-size: 1.15rem;
    }
}
@media(max-width: 580px) {
    .video_list_slider li {
        width: calc((100vw - 65px) / 2);
    }
    #body-video .video_list_slider li {
        width: calc((100vw - 85px) / 2);
    }
}

/* slickプラグインの設定 */

.slick-arrow {
    width: 48px;
    height: 100%;
    background-color: rgb(var(--video-slider-color), .2);
    border: none;
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    transition: all 0.1s;
    opacity: 0.4;
}
.slick-arrow:hover {
    opacity: 1;
}
.slick-arrow:focus {
    outline: 0;
}
.prev-arrow {
    z-index: 2;
    left: 0;
}
.next-arrow {
    z-index: 2;
    right: 0;
}
.prev-arrow:before,
.next-arrow:before {
    margin-top: -13px;
    content: '';
    width: 18px;
    height: 18px;
    border-top: solid 3px var(--video-slider-color-arrow);
    border-right: solid 3px var(--video-slider-color-arrow);
    position: absolute;
    top: 50%;
}
.prev-arrow:before {
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    right: 50%;
    margin-right: -13px;
}
.next-arrow:before {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 50%;
    margin-right: -5px;
}
.slick-disabled {
    display: none !important;
}
@media (max-width: 767px) {
    .slick-arrow {
        width: 40px;
        display: none !important;
    }
    .prev-arrow:before,
    .next-arrow:before {
        width: 8px;
        height: 8px;
    }
}
.top-contents-section {
    margin: 0 20px 60px 20px;
}
.slider_title,
.footer_news h2 {
    display: flex;
    align-items: center;
}

.slider_title {
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--text-color-default);
}
a.top_slider_more_btn,
.news_list_btn{
    margin-top: -2px;
    margin-left: 20px;
    padding: 3px 17px 3px 7px;
    border: 1px solid var(--link-color-light);
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--link-color-light);
    font-weight: normal;
    display: block;
    position: relative;
    min-width: 90px;
}

header .news_list_btn{
    margin: 0 auto;
    padding:8px 10px 6px;
    width: 100%;
    max-width: 200px;
    text-align: center;
}
footer .news_list_btn{
    margin-top: 0;
    color: var(--link-color-light);
}
.top_slider_more_btn:after,
footer .news_list_btn:after{
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 1px var(--link-color-light);
    border-right: solid 1px var(--link-color-light);
    position: absolute;
    top: 50%;
    right: 6px;
    margin-top: -3px;
    transform: rotate(45deg);
}
.top_slider_more_btn:hover,
.news_list_btn:hover {
    text-decoration: none;
    color: #aaa;
    border: 1px solid #aaa;
}
.top_slider_more_btn:hover:after{
    border-top: solid 1px #aaa;
    border-right: solid 1px #aaa;
}
.videotitle,
.pickup-container .item-title,
.pickup-container .skeleton-item-title{
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: bold;
    letter-spacing: normal;
    width: 100%;
    max-height: 2.6em;
    min-height: 2.6em;
}
.videotitle,
.pickup-container .item-title{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.title-text {
    margin-top: 2px;
    font-size: 1.3rem;
    color: var(--text-color-light);
    letter-spacing: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.video_owner,
.skeleton-video_owner{
    font-size: 1.2rem;
    margin-top: 4px;
}

.video_owner{
    margin-top:auto;
}
.video_owner_text,
.pickup-container .video_owner,
.pickup-container .skeleton-video_owner{
    display: flex;
    color: var(--pefprice-text);
}
.video_owner .video_owner_text,
.pickup-container .video_owner,
.pickup-container .skeleton-video_owner{
    gap:0 8px;
    align-items: center;
    width: 100%;
}
#body-video .video_owner_text{
    justify-content: flex-start;
    margin-top: 2%;
    font-weight: normal;
    font-size: 1.4rem;
}
#body-x_pay .video_owner_text,
#body-x_pay_cart .video_owner_text,
#body-x_pay_group .video_owner_text{
    justify-content: flex-end;
    margin-bottom: 8px;
}
#body-x_cart .video_owner_text{
    font-size:1.8rem;
    color: var(--pefprice-text);
    margin-bottom: 4px;
}
#body-x_cart .video_list_table .video_owner_text{
    font-size: 1.3rem;
}
#body-x_cart .video_list_table .detail .video_owner_text{
    margin-top: 8px;
}
#body-x_cart .video_list_table .video_owner{
    margin-top: 10px;
}
.video_owner .video_owner_username,
.pickup-container .avatar_name,
.pickup-container .skeleton-avatar_name{
    max-width: calc(100% - 44px);
    line-height:1.2;
    text-decoration: underline;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.videotitle,
.video_owner .video_owner_username,
.pickup-container .item-title,
.pickup-container .avatar_name,
.video_list_sliders_maker_name,
.sample_content .text_header{
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}
@media (max-width: 768px){
    .video_owner .video_owner_username{
        max-width: calc(100% - 36px);
    }
    .pickup-container .avatar_name,
    .pickup-container .skeleton-avatar_name{
        max-width: calc(100% - 36px);
        font-size:1.15rem;
    }
}
.reserve-price-list{
    color: var(--playlist-note-text);

}
.reserve-price-list-text{
    display: inline-block;
    margin-top: 6px;
}

.ranking_number{
    padding:3px 8px 5px;
    position: absolute;
    top: 0;
    right: 0;
    z-index:2;
    background-color: #fff;
    line-height:1;
    min-width: 35px;
    display: inline-block;
    border-radius: 0 0 0 8px;
    box-shadow: 0px 0px 5px 0px #00000021;
}

.ranking_number p {
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
}
.ranking_number img {
    margin: 0;
}


/*arrow付きボタン*/

a.default_btn,
.default_btn,
a.reversal_btn,
.reversal_btn,
a.default_arrow_btn,
.default_arrow_btn,
a.clear_btn,
.clear_btn{
    margin-left: auto;
    margin-right: auto;
    padding: 17px 25px 15px 25px;
    display: flex;
    width: 100%;
    max-width: 350px;
    min-width: 280px;
    text-decoration: none;
    background: var(--color-main);
    text-align: center;
    color: var(--text-color-with-background);
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 100px;
    position: relative;
    align-items: center;
    justify-content: center;
    border: none;
    flex-direction: column;
}
a.default_arrow_btn,
.default_arrow_btn {
    padding-right: 35px;
}
.default_arrow_btn:after,
.btn_buy_now:after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px var(--text-color-with-background);
    border-right: solid 2px var(--text-color-with-background);
    position: absolute;
    top: 50%;
    right: 18px;
    margin-top: -5px;
    transform: rotate(45deg);
}
a.reversal_btn,
.reversal_btn {
    background: transparent;
    border: 1px solid var(--color-main);
    color: var(--color-main);
}
a.reversal_btn:hover,
.reversal_btn:hover {
    background-color: rgba(var(--color-main-rgb), .07);
}
.btn_buy_now:after {
    margin-top: -4px;
    border-top: solid 2px var(--color-main);
    border-right: solid 2px var(--color-main);
}
a.default_btn:hover,
.default_btn:hover,
.default_arrow_btn:hover {
    background: var(--color-main-hover);
}

a.clear_btn,
.clear_btn{
    background: transparent;
    border: 1px solid var(--btn-color-gray-border);
    color: var(--color-main);
}
a.small_btn,
.small_btn {
    max-width: 200px;
    min-width: 150px;
}
.bubble_btn:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -12px;
    border: 12px solid transparent;
    border-top: 12px solid var(--color-main);
}
.bubble_btn:hover:before {
    border-top: 12px solid var(--color-main-hover);
}

a.btn_gray,
.btn_gray{
    background-color: var(--btn-color-gray);
    color:var(--btn-color-gray-text);
    border:1px solid var(--btn-color-gray-border);
}
.default_arrow_btn.btn_gray:after {
    border-top: solid 2px var(--btn-color-gray-text);
    border-right: solid 2px var(--btn-color-gray-text);
}

a.btn_gray:hover,
.btn_gray:hover{
    background-color: var(--btn-color-gray-hover);
}
a.btn_m,
.btn_m{
    padding:12px 18px;
    font-size:1.4rem;
    width:auto;
    min-width:120px;
}
a.btn_m{
    display: inline-flex;
}
a.btn_ss,
.btn_ss{
    padding:8px 15px;
    font-size:1.4rem;
    width:auto;
    min-width:40px;
}
a.btn_ss{
    display: inline-flex;
}
a.btn_min_radius,
.btn_min_radius{
    padding-left:10px;
    padding-right:10px;
    border-radius: 5px;
}

a.btn_align_left,
.btn_align_left{
    margin-left:0;
}
.default_btn i{
    margin-left: 5px;
}

.default_btn i.icon_left,
i.icon_left{
    margin-left: 0;
    margin-right: 5px;
}

.default_btn i.icon_no_margin{
    margin: 0;
}


/*★評価*/
:root {
    --star-size: 18px;
    --large-star-size: 30px;
}
@media (max-width: 768px) {
    :root {
        --large-star-size: 25px;
    }
}

.rate {
    margin-right: 15px;
    position: relative;
    display: block;
    height: var(--star-size);
    width: calc(var(--star-size) * 5);
    transform:translateY(-1px);
}

.star_back,
.star_front {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width:100%;
    height: 100%;

}
.star_back i,
.star_front i{
    flex-shrink: 0;
    background-color: var(--star-color-front);
    display: inline-block;
    width: var(--star-size);
    height: 100%;
    clip-path: polygon(
        50% 0%,      /* 上 */
        61.46% 36%, /* 右上 */
        100% 36%,   /* 右端 */
        68.75% 58%, /* 右下 */
        80.21% 94%, /* 下 */
        50% 70%,    /* 中央下 */
        19.79% 94%, /* 下 */
        31.25% 58%, /* 左下 */
        0% 36%,     /* 左端 */
        38.54% 36%  /* 左上 */
    );

}

.review_title .rate {
    height: var(--large-star-size);
    width: calc(var(--large-star-size) * 5);
}
.review_title .star_back i,
.review_title .star_front i {
    width: var(--large-star-size);
}

.star_back i{
    background-color: var(--star-color-back);
}
.star_front {
    overflow: hidden;

}



.rate_number {
    margin-right: 20px;
    display: flex;
    font-size: 0.8em;
    line-height: 1;
    align-items: center;
}
.rl_wd .delete_btn {
    margin-top: 12px;
    position: relative;
}
.rl_wd .delete_btn a {
    margin: 0 auto;
    display: flex;
    width: 100%;
    height: 40px;
    max-width: 220px;
    text-decoration: none;
    background: var(--btn-color-delete);
    color: var(--btn-color-delete-text);
    font-size: 1.3rem;
    line-height: 40px;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
.rl_wd .delete_btn a:hover {
    background: var(--btn-color-delete-hover);
    text-decoration: none;
}
.rl_wd i.far {
    margin-right: 10px;
    font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
    .top-contents-section .slider_title {
        font-size: 20px;
    }
    .video_list_slider h2 {
        text-align: left;
        margin-top: 10px;
    }
    .video_list_slider h2 br {
        display: none;
    }
    .icon {
        height: 17px;
        line-height: 20px;
    }
    .videotitle {
        margin-top: 7px;
    }
    .video_list_slider li .icon p {
        font-size: 7px;
    }
    .top-contents-section .contents-section h1 {
        font-size: 20px;
    }
    body .top-contents-section {
        margin: 0 10px 50px 10px;
    }
    #slide_space .video_list_slider h2 {
        font-size: 12px;
        text-align: center;
    }
}

/* 絞り込み、並べ替えエリア */

.genre_filter_form {
    margin-bottom: 15px;
}
.genre_content {
    margin: -15px auto 0;
    width: 100%;
}

.genre_sort_head {
    padding-top:7px;
    margin-right: 12px;
    margin-left: 5px;
    color: var(--text-color-light);
    flex-shrink: 0;
}
.category_filter_form .genre_sort_head {
    margin-left: 0;
}
.genre_sort {
    display: flex;
    align-items: flex-start;
}
.genre_sort_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.genre_sort_inner > * {
    margin-bottom: 8px;
}
.genre_sort_inner > div {
    padding-right: 20px;
    position: relative;
}
.genre_sort_inner > div:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    border-right: 1px solid var(--border-color-light);
}
.genre_sort_inner > div:last-child {
    border-right: none;
    padding-right: 0;
}
.genre_sort_inner > div:last-child:after {
    display: none;
}
.genre_sort_inner a {
    display: block;
    font-size: 1.4rem;
}
.genre_sort_inner span {
    color: var(--color-accent);
    font-weight: bold;
    position: relative;
}

.genre_category_search {
    margin-bottom: 7px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.genre_category_search a{
    margin-right:8px;
    margin-bottom:8px;
    padding: 8px 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    background-color: var(--background-color-light2);
    border-radius: 5px;

}
.genre_category_search a:hover{
    text-decoration: none;
    background-color: var(--background-color-light);
}

.genre_category_search a.checked{
    background-color: var(--color-main);
    color:var(--background-color-base)
}

/* 選択中のタグ表示 */
.searchresult_tag{
    background: var(--background-color-light2);
    padding: 12px 12px;
    margin-bottom: 24px;
    margin-top: 8px;
}
.searchresult_tag_title{
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 4px;
}
.searchresult_tag_group{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.searchresult_tag_item{
    display: inline-block;
    border: 1px solid var(--border-color-light);
    font-size: 1.3rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--background-color-base);
}
/* 検索結果一覧 */
.filter_wrap{
    display: flex;
    flex-direction: row-reverse;
}

.side_filter{
    margin-right:20px;
    width: 200px;
    position: relative;
}

.filter_wrap .video_wrap{
    width: calc(100% - 220px);
}

.filter_wrap .content_right_wrapper .video_wrap{
    width:100%;
}
.side_filter h2{
    margin-bottom:5px;
    margin-right:80px;
    font-size:1.2rem;
    position: relative;
    display: flex;
    align-items: center;
}
.side_filter h2 .gg-options{
    margin:0 10px 3px;
    transform:scale(.75,.75);
    display: inline-block;
}
.side_filter h2 .title{
    padding: 3px 0;
    flex-shrink: 0;
}

.side_filter h2 .js-checked-items{
    display: none;
    color:var(--text-color-light);
}

.side_filter .reset_filter {
    margin-left:auto;
    padding: 3px 5px 3px 3px;
    font-weight: normal;
    font-size:1.1rem;
    position: relative;
    background-color: var(--background-color-light2);
    border-radius: 50px;
    display: none;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
}

.side_filter .reset_filter:hover{
    text-decoration: none;
    background-color: var(--background-color-light);
}
.side_filter .reset_filter.active{
    display: flex;

}

.side_filter selection{
    display: block;
    border:1px solid var(--border-color-light);
    border-top:none;
}
.side_filter selection:first-child{
    border-top:1px solid var(--border-color-light);
}
.side_filter h3{
    padding: 10px 30px 10px 10px;
    background-color: var(--background-color-light2);
    font-size: 1.4rem;
    position: relative;
    cursor:pointer;
}

.side_filter h3:after{
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 1px var(--link-color-light);
    border-right: solid 1px var(--link-color-light);
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -3px;
    transform: rotate(-45deg);
}
.side_filter h3.closed:after{
    top: calc(50% - 4px);
    transform: rotate(135deg);
}
.side_filter h3 .js-checked-items{
    display: none;
}
.side_filter h3.closed .js-checked-items{
    display: inline;
    color:var(--text-color-light);
}


.side_filter .js-filter-slide-list{
    margin-top: 5px;
}
.js-filter-slide-list a{
    padding:5px 10px;
    display: flex;
    justify-content: space-between;
    background-color: var(--background-color-base);
}
.js-filter-slide-list a.isChecked{
    font-weight: bold;
    background-color: var(--filter-tag-check-bg);
}

.js-filter-slide-list a .gg-check{
    transform:translateY(3px);
}
.js-filter-slide-list a .gg-check::after{
    border-color: var(--filter-tag-check-mark);
}
.js-filter-slide-list a .icon_close,
.reset_filter .icon_close{
    display: none;
    width:16px;
    height:16px;
    background-color: var(--background-color-light2);
    border-radius: 50px;
    position: relative;
    transform:translateX(1px);
}
.reset_filter .icon_close{
    width:14px;
    height:14px;
    margin-right:2px;
    display: inline;
    background-color:transparent;
}

.js-filter-slide-list a .icon_close:before,
.js-filter-slide-list a .icon_close:after,
.reset_filter .icon_close:before,
.reset_filter .icon_close:after{
    content: '';
    width: 12px;
    height: 2px;
    background-color: var(--text-color-light);
    position: absolute;
    top: calc(50% - 1px);
    left: 2px;
    transform: rotate(45deg);
}

.reset_filter .icon_close:before,
.reset_filter .icon_close:after{
    width: 10px;
    height: 1px;
    left: 2px;
}
.js-filter-slide-list a .icon_close:after,
.reset_filter .icon_close:after{
    transform: rotate(-45deg);
}

.js-filter-slide-list a.isChecked:hover .gg-check{
    display: none;
}
.js-filter-slide-list a.isChecked:hover .icon_close{
    display: block;
}
.filter_wrap .video_wrap .genre_content {
    margin-top: 0;
}

.js-checked-items{
    font-weight: normal;
    font-size:1.2rem;
}

@media (max-width: 768px){
    .filter_wrap{
        margin-top:-20px;
        flex-direction: column-reverse;
    }

    .side_filter{
        margin-right:0;
        margin-bottom:20px;
        width: 100%;
        border:1px solid var(--border-color-light);
    }

    .filter_wrap .video_wrap{
        width: 100%;
    }

    .side_filter h2{
        margin-bottom:0;
        margin-right:0;
        padding:14px 40px 14px 30px;
        font-size:1.4rem;
        cursor:pointer;
        display: block;
    }
    .side_filter h2:after{
        content: '';
        width: 8px;
        height: 8px;
        border: 0;
        border-top: solid 1px var(--link-color-light);
        border-right: solid 1px var(--link-color-light);
        position: absolute;
        top: calc(50% - 4px);
        right: 15px;
        margin-top: -3px;
        transform: rotate(135deg);
    }

    .side_filter h2.isOpen:after{
        top: 50%;
        transform: rotate(-45deg);
    }
    .side_filter h2 .gg-options{
        position: absolute;
        top: 23px;
        left: 2px;
    }
    .side_filter h2 .js-checked-items{
        display: inline;
    }
    .side_filter .reset_filter{
        margin:10px 0 6px;
        padding: 8px 12px 8px 10px;
        width:auto;
        position: relative;
    }
    .side_filter .reset_filter.active{
        display: inline-flex;
    }
    .js-root-filter-slide-wrap{
        padding:0 3px 3px;
        position: relative;
        display: none;
    }
    .side_filter selection{
        margin-bottom: 0;
    }

    .side_filter h3{
        padding-top:14px;
        padding-bottom:14px;
        padding-right:40px;
    }

    .side_filter .js-filter-slide-list{
        margin-top: 0;
        display: none;
    }
    .js-filter-slide-list a{
        padding:14px 10px 14px 25px;
        border-top:1px solid var(--border-color-light);
    }
    .js-filter-slide-list a:hover{
        text-decoration: none;
    }
}
/* ラジオボタン装飾 */
.radio_decoration_input {
    display: none;
}
.radio_decoration_label,
.paymentmethod .radio_decoration_label .paymentmethod_main,
.pay_plan_list .radio_decoration_label .paymentmethod_main{
    padding-left: 23px;
    display: block;
    position: relative;
    cursor: pointer;
    line-height: 1;
    color: var(--text-color-default)
}
.radio_decoration_label:hover {
    color: var(--link-color-default-hover);
}
.radio_decoration_label:before,
.paymentmethod .radio_decoration_label .paymentmethod_main:before,
.pay_plan_list .radio_decoration_label .paymentmethod_main span:before,
#body-purchase_groups .btn_radio:before{
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--background-color-base);
    border: 1px solid var(--text-color-light);
}

.radio_decoration_label:before,
.paymentmethod .radio_decoration_label .paymentmethod_main:before,
#body-purchase_groups .btn_radio:before{
    margin-top: -8px;
    position: absolute;
    top: 50%;
    left: 0;
}

.pay_plan_list .radio_decoration_label .paymentmethod_main span:before{
    display: block;
}

.radio_decoration_input[type="radio"]:checked + .radio_decoration_label:before,
.paymentmethod .radio_decoration_input[type="radio"]:checked + .radio_decoration_label .paymentmethod_main::before,
.pay_plan_list .radio_decoration_input[type="radio"]:checked + .radio_decoration_label .paymentmethod_main span::before,
#body-purchase_groups .btn_radio:before{
    border: 1px solid var(--color-main);
}
.radio_decoration_input[type="radio"]:checked + .radio_decoration_label:after,
.paymentmethod .radio_decoration_input[type="radio"]:checked + .radio_decoration_label .paymentmethod_main:after,
.pay_plan_list .radio_decoration_input[type="radio"]:checked + .radio_decoration_label .paymentmethod_main span:after,
#body-purchase_groups .btn_radio.active:after{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-main);
}

.radio_decoration_input[type="radio"]:checked + .radio_decoration_label:after,
.paymentmethod .radio_decoration_input[type="radio"]:checked + .radio_decoration_label .paymentmethod_main:after,
#body-purchase_groups .btn_radio.active:after{
    margin-top: -5px;
    position: absolute;
    top: 50%;
    left: 3px;
}

.pay_plan_list .radio_decoration_input[type="radio"]:checked + .radio_decoration_label .paymentmethod_main span:after{
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}
/* チェックボックス */

.checkbox_decoration_input {
    display: none;
}
.checkbox_decoration_label {
    cursor: pointer;
    display: inline-block;
    padding-left: 25px;
    position: relative;
}
.checkbox_decoration_label:before {
    margin-top: -8px;
    content: '';
    display: block;
    border: 1px solid var(--text-color-light);
    background-color: var(--background-color-base);
    border-radius: 3px;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 0;
}
.checkbox_decoration_label span,
.checkbox_decoration_label:after {
    margin-top: -12px;
    content: '';
    display: none;
    border-right: 4px solid var(--color-main);
    border-bottom: 4px solid var(--color-main);
    width: 8px;
    height: 17px;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: rotate(45deg);
}
.checkbox_decoration_input:checked + .checkbox_decoration_label:before {
    border-color: var(--text-color-default);
}
.checkbox_decoration_input:checked + span,
.checkbox_decoration_input:checked + .checkbox_decoration_label:after {
    display: block;
}

/*ユーザー管理画面サイドメニュー*/

.main_contents.admin_sidemenu {
    padding-left: 15px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.main_contents.admin_sidemenu > div:first-child {
    margin: 0 auto;
    padding-right: 15px;
    width: calc(100% - 250px);
    max-width: 960px;
}
.sidebar {
    padding: 15px 10px;
    background-color: var(--background-color-light2);
    width: 250px;
    height: auto;
}
.sidebar h4 {
    margin-bottom: 3px;
    padding: 0 10px;
    font-weight: bold;
    font-size:1.4rem;
}
.side_item {
    margin: 0 auto 15px;
    border-bottom: solid 1px var(--border-color-light);
}
.side_item li a {
    padding: 12px 10px 11px;
    display: block;
}
.side_item li a:hover {
    text-decoration: none;
    background-color: var(--background-color-light-hover);
}
@media screen and (max-width: 820px) {
    .sidebar h4 {
        padding: 0 8px;
    }
    .side_item li a {
        padding: 12px 8px 11px;
    }
    .main_contents.admin_sidemenu > div:first-child {
        width: calc(100% - 220px);
    }
    .sidebar {
        padding: 15px 8px;
        width: 220px;
    }
}
@media screen and (max-width: 1000px) {
    .main_contents.admin_sidemenu {
        padding-left: 0;
        display: block;
    }
    .main_contents.admin_sidemenu > div:first-child {
        margin-bottom: 150px;
        padding-right: 0;
        width: calc(100% - 30px);
    }
    .sidebar {
        padding-top: 20px;
        padding-bottom: 5px;
        width: 100%;
        border-bottom: solid 1px var(--border-color-light);
    }
    .sidebar h4 {
        margin-bottom: 8px;
    }
    .side_item:last-child {
        border-bottom: none;
    }
    .admin_sidemenu ~ .footer .footer_inner {
        margin-top: 0;
    }
}

.setting_btn_wrap{
    margin-top: 80px;
}
/*メッセージ*/

.msg-info,
.msgbox,
.msg-warning,
.videosetting_txt {
    margin: 20px auto 20px;
    padding: 10px 15px 9px;
    background-color: var(--warning-background-color);
    text-align: center;
    width: 100%;
    color: var(--warning-text-color);
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.4;
}
.msg-info {
    background-color: var(--system-message-color);
    color: var(--system-message-text-color);
}
.videosetting_txt {
    background-color: var(--error-color);
    color: var(--error-text-color);
}
.msg-info p,
.msgbox p,
.videosetting_txt p {
    white-space: pre-line;
}
.msg-info.mright20 {
    margin-right: 0 !important
}
.msg-info.mleft20 {
    margin-left: 0!important
}
.alert-danger {
    margin: 40px auto 0;
    padding: 10px 20px 8px;
    color: var(--error-text-color);
    background-color: var(--error-color);
    font-weight: bold;
    width: 100%;
    max-width: 960px;
    text-align: center;
    font-size: 1.8rem;
}
.alert-danger div {
    white-space: pre-line;
}
.alert-danger .msg-warning {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--error-text-color);
}

/* drag and drop */
.drag_and_drop_wrap{
    display: flex;
    gap:20px;
}

.drag_and_drop_box{
    width: 100%;
}
.drag_and_drop_box h4{
    margin: 0 auto 8px;
    font-size:1.1em;
    font-weight: bold;
}
.drag_and_drop_box .drop_list{
    padding:10px 10px 30px;
    border:1px solid #ddd;
    background-color: #fafafa;
    height:700px;
    overflow-y:auto;
    border-radius: 5px;
    line-height:1.3;
}

.drag_and_drop_box .drop_list > li{
    margin-top:0;
    margin-bottom:8px;
    padding:7px 0 7px 12px;
    cursor:move;
    border:1px solid #8CC5FA;
    border-radius: 8px;
    background-color:#eef6fec7;
}

.drag_and_drop_box .drop_list > li.media{
    padding:8px 8px;
    width: 100%;
    display: flex;
}
.drag_and_drop_box.receive_box .drop_list > li{
    border:1px solid #ffce04;
    background-color:#fffaddc7;
}
.drag_and_drop_box.receive_box .drop_list > li.empty_message_wrap{
    margin: 0;
    padding:0;
    border:none;
    background-color: transparent;
    cursor:default;
    pointer-events: none;
    color:#b6b6b6;
    font-size:1.2em;
}
.drag_and_drop_box #empty_message{
    padding:4px 10px;
    border:2px dashed #ddd;
    border-radius: 8px;
    position: relative;
    min-height:140px;
    display: flex;
}

.drag_and_drop_box #empty_message i{
    padding:10px;
    position: absolute;
    bottom: 20px;
    left: calc(50% - 35px);
    display: flex;
    width:70px;
    height:70px;
    font-size:2.5em;
    color:#dddddd;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
}
.drag_and_drop_box .drop_list > li ul{
    margin-bottom:5px;
}
.drag_and_drop_box .drop_list > li li{
    margin:8px 8px 0 0;
    padding-top:8px;
    border-top:1px solid #00000012;
    display: flex;
}

.drag_and_drop_box .drop_list > li li:last-child{
    border-bottom:none;
}
.drag_and_drop_box .purchase_group_div {
    margin-bottom: 0;
    padding-right:30px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    position: relative;
}
.drag_and_drop_box .badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #76838f;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #e4eaec;
    border-radius: 10px
}
.dropdown-menu {
    margin-top: 5px;
    -webkit-box-shadow: 0 3px 12px rgba(0,0,0,.05);
    box-shadow: 0 3px 12px rgba(0,0,0,.05);
    -webkit-transition: .25s;
    -o-transition: .25s;
    transition: .25s
}
.drag_and_drop_box .purchase_group_div[aria-expanded="true"]:after,
.drag_and_drop_box .purchase_group_div[aria-expanded="false"]:after {
    content:"";
    cursor:pointer;
    width:0;
    height:0;
    border-style:solid;
    border-width: 7px 5px 0 5px;
    border-color:  var(--color-main) transparent transparent transparent;
    position: absolute;
    top: calc(50% - 5px);
    bottom:0;
    right: 9px;
}

.drag_and_drop_box .purchase_group_div[aria-expanded="true"]:after {
    transform:rotate(180deg)
}
.drag_and_drop_box .purchase_group_div[aria-expanded="true"]:before,
.drag_and_drop_box .purchase_group_div[aria-expanded="false"]:before {
    content:"";
    cursor:pointer;
    width:30px;
    position: absolute;
    top: 0;
    bottom:0;
    right: 0;
}
.drag_and_drop_box .purchase_group_div_inner{
    position: relative;
}
.drag_and_drop_box .purchase_group_div_inner .name{
    margin-bottom:3px;
    font-weight: bold;
    display: block;
}
.drag_and_drop_box .purchase_group_div_inner .date{
    display: block;
}


.drag_and_drop_box .media-heading{
    font-weight: bold;
}
.drag_and_drop_box .badge {
    margin-left:8px;
    margin-top:-2px;
    background-color: #0000001a;
}

.drag_and_drop_box img.media-object  {
    width: 100px;
    display: block;
    height:auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.drag_and_drop_box li li .media-left{
    padding-right: 16px;
}
.media-left{
    display: block;
    flex-shrink: 0;
}
.media-body{
    width: auto;
    display: block;

}
@media (max-width: 768px){
    .drag_and_drop_wrap{
        display: flex;
        flex-direction: column;
    }
}

/*トップページ*/


/* メインビジュアル */
.video_list_slider,
.top_main_slider.pc_display,
.top_main_slider.sp_display,
.js-maker_list_slider{
    overflow:hidden;
}
.video_list_slider,
.top_main_slider.pc_display,
.js-maker_list_slider{
    display: flex;
}
.video_list_slider li,
.top_main_slider.pc_display > div,
.top_main_slider.sp_display > div{
    flex-shrink: 0;
}

.top_main_slider.pc_display,
.top_main_slider.sp_display{
    background-color: var(--background-color-light);
}
.top_main_slider.pc_display{
    height: 542px;
}

.top_main_slider.sp_display{
    height:375px;
}
.top_main_slider.pc_display *,
.top_main_slider.sp_display *{
    opacity:0;
}

/*トップページ ピックアップバナー*/
.pickup-main{
    position: relative;
}
.pickup-container {
     margin: 0 auto;
     margin: 20px 20px 60px;
}
.pickup-container .slider_title{
    margin-bottom: 28px;
}

.pickup-wrapper,
.skeleton-pickup-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0 24px;
    justify-content: space-evenly;
    max-width: 100%;
    justify-items: center;
    transition: opacity 0.5s;
}
.pickup-wrapper{
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index:1;
    
}
.skeleton-pickup-wrapper{
    position: relative;
    overflow: hidden;
}

.pickup-item,
.skeleton-pickup-item{
    width: 100%;
    max-width:300px;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap:10px 0;
        transition: opacity 0.5s;
}
.pickup-item .price-original-wrap{
    font-weight: normal;
}
.item-img-link,
.skeleton-item-img-link{
    display: block;
}
.pickup-image,
.skeleton-pickup-image{
    width:100%;
    aspect-ratio: 7 / 10;
    object-fit: cover;
     background-color: var(--skeleton-background);
}
.pickup-container .item-title,
.pickup-container .skeleton-item-title{
    margin-top:0;
}
.item-title-link{
    display: block;
    width: 100%;
}
.tags-container,
.skeleton-tags-container{
    display: flex;
    flex-wrap: wrap;
    gap:2px 2px;
    min-height:21px;
}

.pickup-container .video_icon,
.pickup-container .skeleton-video_icon{
     padding-top:3px;
     padding-bottom:3px;
    min-width:30px;
     min-height:21px;
}

.item-info,
.skeleton-item-info{
    margin-top:auto;
}

.skeleton-video_icon{
      background-color: var(--skeleton-background);
}
.skeleton-item-title{
    padding:0.05em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
}
.skeleton-item-title-line{
    display: block;
    width: 100%;
    height:1.05em;
      background-color: var(--skeleton-background);
}
.skeleton-item-price{
    height:calc(1em * 1.4);
    display: flex;
    align-items: center;
    font-weight: bold;
}
.skeleton-item-price-line{
    display: block;
    width: 100%;
    max-width:56px;
    height:1.05em;
      background-color: var(--skeleton-background);
}
.skeleton-avatar_common{
      background-color: var(--skeleton-background);
}
.skeleton-avatar_name{
    width:100%;
    height:1.05em;
}
.skeleton-avatar_name-line{
    max-width:80px;
    height:1.05em;
    display: block;
      background-color: var(--skeleton-background);
}
.skeleton-pickup-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--skeleton-shimmer-gradient-transparent) 0%,
    var(--skeleton-shimmer-gradient-background) 50%,
    var(--skeleton-shimmer-gradient-transparent) 100%
  );
  animation: shimmer-slide 1.5s infinite;
  z-index: 1;
  pointer-events: none;
}
.skeleton-pickup-wrapper.loading--hidden::before {
  display: none;
}
@keyframes shimmer-slide {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
.loading--hidden{
    visibility: hidden;
}
@media (max-width: 1000px){
    .pickup-wrapper,
    .skeleton-pickup-wrapper{
        grid-template-columns: repeat(3, 1fr);
        gap:32px 24px;
    }
    .pickup-item,
    .skeleton-pickup-item{
        max-width: 150px;
    }
}
@media (max-width: 428px){
    .pickup-wrapper,
    .skeleton-pickup-wrapper{
        gap:32px 8px;
    }
}
/*slick-initializedクラスが付与されたら*/
.video_list_slider.slick-initialized,
.top_main_slider.pc_display.slick-initialized,
.top_main_slider.sp_display.slick-initialized {
    overflow:visible;
    height:auto;
    background-color: transparent;
}
.top_main_slider.pc_display.slick-initialized{
  display: block;
}

.video_list_slider.slick-initialized li,
.top_main_slider.pc_display.slick-initialized > div,
.top_main_slider.sp_display.slick-initialized > div{
    flex-shrink: 1;
}

.top_main_slider.pc_display.slick-initialized *,
.top_main_slider.sp_display.slick-initialized * {
    opacity:1;
}

@media (max-width: 768px){
    .top_main_slider.sp_display{
        display: flex !important;
    }
    .top_main_slider.sp_display.slick-initialized {
        display: block !important;
    }
}

.top_main_slider div a {
    display: block;
    width: 100%;
}
.top_main_slider div a img {
    width: 100%;
}

.top_description{
    margin: 0 auto 60px;
    width: 100%;
    width: calc(100% - 40px);
}

/* メーカー一覧スライダー */
#video_list_sliders_maker{
    margin-top:16px;
}
.video_list_sliders_maker_inner {
    padding-right:12px;
    position: relative;
    max-width: 136px;
}

@media (max-width: 768px){
    .video_list_sliders_maker_inner .avatar_common.avatar_common_large{
        width: 100%;
    }
    .video_list_sliders_maker_inner {
        width: calc((100vw - 60px) / 5);
        max-width: initial;
    }
}
@media(max-width: 660px) {
    .video_list_sliders_maker_inner {
        width: calc((100vw - 48px) / 4);
    }
}

@media(max-width: 480px) {
    .video_list_sliders_maker_inner {
        width: calc((100vw - 36px) / 3);
    }
}

.video_list_sliders_maker_inner .avatar_common{
    margin-bottom:10px;
}

.video_list_sliders_maker_name{
    line-height: 1.3;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.video_list_sliders_maker_inner a:hover{
    text-decoration: none;
}
/* TOPタグ一覧 */
.tag_list__group{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
}
.tag_list__item{
    display: inline-block;
    background: var(--background-color-light2);
    border: 1px solid var(--border-color-light);
    border-radius: 50px;
}
.tag_list__item:hover{
    background: var(--background-color-light-hover);
}
.tag_list__item > a{
    display: block;
    padding: 8px 20px;
    border-radius: 50px;
}
.tag_list__item > a:hover{
    text-decoration: none;
}
@media (max-width: 768px){
    .tag_list__group{
        gap: 8px;
    }
    .tag_list__item > a{
        padding: 8px 12px;
    }
}

/* slickプラグインの設定 */

.slick-dots {
    position: static;
    margin-top: -35px;
}
.slick-dots li button:before {
    opacity: .3;
    color: rgb(var(--color-cover-rgb));
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--color-main);
}
.ranking_number i {
    margin-right: 5px;
    transform: translateY(0) scale(0.9);
}
.ranking_number1 i {
    color: var(--icon-color-rank1);
}
.ranking_number2 i {
    color: var(--icon-color-rank2);
}
.ranking_number3 i {
    color: var(--icon-color-rank3);
}
.video_list_slider li time {
    margin-bottom: 5px;
    color: var(--link-color-light);
    font-size: 1.2rem;
    line-height: 1.2;
    display: block;
}

@media screen and (max-width: 768px) {
    .video_list_slider li time {
        letter-spacing: normal;
    }
}

/* カテゴリーページ */

.category_filter_form {
    margin-top: -10px;
    width: 100%
}
.salesTabs ul,
.videosetting_tab_wrap {
    margin: 0 auto 30px;
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
}
.salesTabs li,
.videosetting_tab_wrap li {
    margin-right: 10px;
    display: flex;
    min-width: 80px;
}
.salesTabs li:last-child,
.videosetting_tab_wrap li:last-child {
    margin-right: 0;
}
.salesTabs a,
.videosetting_tab_wrap label {
    text-decoration: none;
    color: var(--link-color-light);
}
.salesTabs a.content-active,
#all:checked ~ .videosetting_tab_wrap label[for="all"],
#programming:checked ~ .videosetting_tab_wrap label[for="programming"] {
    color: var(--color-main);
}
.salesTabs a,
.videosetting_tab_wrap label {
    margin-top: 8px;
    padding: 0 2px 10px;
    display: flex;
    position: relative;
    font-weight: bold;
    text-align: center;
    width: 100%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.salesTabs a:hover:before,
.salesTabs a.content-active:before,
#all:checked ~ .videosetting_tab_wrap label[for="all"]:before,
#programming:checked ~ .videosetting_tab_wrap label[for="programming"]:before,
.videosetting_tab_wrap label:hover:before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--link-color-light);
    ;
    position: absolute;
    bottom: -1px;
    left: 0;
    border-radius: 50px;
}
.salesTabs a.content-active:before,
#all:checked ~ .videosetting_tab_wrap label[for="all"]:before,
#programming:checked ~ .videosetting_tab_wrap label[for="programming"]:before {
    background-color: var(--color-main);
}
/* Sale */
.salereport_headgroup{
    margin-bottom: 24px;
}
.salereport_headgroup .saleVolum_item{
    border-left: 1px solid var(--border-color-dark);
    border-right: 1px solid var(--border-color-dark);
    border-top: 1px solid var(--border-color-dark);
}
.salereport_headgroup .saleVolum_contents{
    border-left: 1px solid var(--border-color-light);
    border-right: 1px solid var(--border-color-light);
}
.report_left{
    text-align: right !important;
}
.salereport_headgroup th,
.salereport_detailgroup th{
    font-size: 1.3rem !important;
}
@media screen and (max-width: 520px) {
    .whitetitle {
        margin: 25px auto;
    }
    .salesTabs li {
        width: 100%;
        min-width: auto;
    }
    .salesTabs a {
        padding: 0 2px 7px;
        font-size: 1.3rem;
    }
    .salereport_headgroup tbody{
        display: flex;
    }
    .salereport_headgroup tbody tr{
        width: 50%;
        display: flex;
        flex-direction: column;
    }
    .salereport_headgroup tbody tr.salereport_head_title{
        width: 180px;
    }
    .salereport_headgroup tbody tr.salereport_head_detail{
        width: calc(100% - 180px);
    }
    .salereport_headgroup th.saleVolum_item{
        width: 100% !important;
        text-align: right;
        height: 44px;
        overflow: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .salereport_headgroup .saleVolum_contents{
        font-size: 1.3rem;
        border-top: 1px solid var(--border-color-light);
        height: 44px;
        overflow: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

}

/* ページャー */
.pager_navi:last-child .pager_btn{
    margin-top: 30px;
}
.pager_btn {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.pager_navi .btn_item,
.pager_btn .current,
.pager_btn_more {
    margin: 0 7px 7px;
    width: 30px;
    height: 30px;
    background-color: var(--color-main);
    color: var(--text-color-with-background);
    font-size: 1.5rem;
    line-height: 1.2;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.pager_btn_more{
    width: auto;
    display: inline-block;
    padding: 12px 24px;
    height: auto;
    color: var(--text-color-with-background);
}
@media (max-width: 768px){
    .pager_navi .btn_item,
    .pager_btn .current{
        margin: 0 5px;
    }
}
.pager_navi .btn_item:hover {
    background-color: var(--color-main-hover);
    text-decoration: none;
}
.pager_btn .current {
    background-color: transparent;
    border: 1px solid var(--color-main);
    color: var(--color-main);
}
.btn_prev,
.btn_next {
    margin-bottom: 7px;
    width: 30px;
    height: 30px;
    font-weight: bold;
    font-size: 2.2rem;
    display: block;
    text-align: center;
}
span.btn_prev,
span.btn_next {
    display: none;
}
a.btn_prev:hover,
a.btn_next:hover {
    color: var(--link-color-default-hover);
}
.btn_prev {
    padding-right: 10px;
}
.btn_next {
    padding-left: 10px;
}

/*-------------------- ログイン ----------------------*/
.login-body {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 768px;
    flex-wrap: wrap;
}

#body-x_scl_twitter_password .login-body {
    max-width: 378px;
}

.login-form{
    order: 0;
    width: 378px;
}

#body-dashboard .login-form{
    width: 100%;
}
.socialFormGroup{
    order: 1;
    width: 320px;
}
.login-body > div h2 {
    margin-bottom: 12px;
    font-size: 1.6rem;
}

.login-body > div h3 {
    margin-bottom: 4px;
    font-size: 1.2rem;
}
.form-group {
    margin-bottom: 20px;
}
.form-group p {
    margin-top: 8px;
    font-size: 1.2rem;
    color:var(--text-color-light2);
}
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
    padding:12px 10px;
    width: 100%;
}
#password2{
   margin-top: 8px;
}
#login_page .login-form input[type="checkbox"] {
    margin: 0 5px 0 0;
    display: inline-block;
    transform: translateY(1px);
}
.forget_password {
    margin-top: 50px;
}

.sociallist{
    padding:15px 15px 13px;
    background-color: var(--background-color-light2);
}

a.pass-link,
a.accountform-link {
    font-weight: bold;
}
.keep_login_info {
    margin-top: 18px;
    margin-bottom: 35px;
}
.keep_login_info label {
    cursor: pointer;
}
.loginbtn {
    width: 100%;
    margin-top: 15px;
}
#body-x_signup .loginbtn {
    margin-top: 20px;
}

#body-x_scl_twitter_password .loginbtn {
    margin-top: 40px;
}

.loginbtn a,
.loginbtn button{
    max-width: initial;
}
#body-x_inquiry .contact-btn button {
    line-height: 1.2;
}

#body-x_scl_mailmagazine .loginbtn span,
#body-x_signup .loginbtn span {
    display: block;
}
.mailmagazine_box {
    margin-top: 25px;
    margin-bottom: 45px;
}
.mailmagazine_box label {
    display: flex;
    align-items: flex-start;
}
.mailmagazine_box label span {
    margin-left: 5px;
}
.mailmagazine_box label input {
    margin: 0;
}
.mailmagazine_box a {
    margin: 5px 0 15px;
    color: var(--link-color-colored);
    text-decoration: underline;
    font-weight: bold;
    display: inline-block;
}
.term_of_use_mail_magazine_box,
.term_of_use_box {
    margin: 20px auto;
}
.term_of_use_mail_magazine_box {
    margin-top: 0;
}
.term_of_use_mail_magazine_box a,
.term_of_use_box a {
    font-weight: bold;
}
.term_of_use_box a {
    margin:0 5px;
}
.mailmagazine_box a i,
.term_of_use_box a i {
    margin-right: 5px;
}
.mailmagazine_box a:hover,
.term_of_use_box a:hover {
    text-decoration: none;
}
.c-accountForm__recaptcha {
    display: flex;
    justify-content: center;
}
div[id^="recaptcha_msg"]:has(~ .c-accountForm__recaptcha) {
    margin-bottom:10px;
    display: none;
}
.mail_attention {
    margin: 30px auto 0;
    padding: 15px 20px;
    border: 1px solid var(--warning-border-color);
    width: 100%;
    max-width: 768px;
    text-align: center;
}
.sociallist li {
    margin-bottom: 10px;
}
.sociallist li:last-child {
    margin-top: 30px;
    margin-bottom: 0;
    font-size:1.2rem;
    color:var(--text-color-light);
}
.sociallist a {
    margin: 0 auto;
    padding: 16px 10px 16px 30px;
    display: block;
    width: 100%;
    text-align: center;
    line-height:1;
    border:1px solid var(--border-color-dark);
    position: relative;
    /* 各テーマでも背景色、文字色固定 */
    background-color: #fff;
    color:#333;
}
.sociallist a:after {
    content:"";
    width:56px;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    color:var(--text-color-default);
    background-repeat: no-repeat;
}
.sociallist a:hover {
    text-decoration: none;
}

.accountForm__socialItem--fc2 a:after {
    background-image: url(../img/ja/pay/fc2_logo.svg);
    background-size: 40px;
    background-position: left 7px center;
}

.accountForm__socialItem--Facebook a:after {
    background-image: url(../img/ja/login_icon_facebook.svg);
    background-size: 30px;
    background-position: center center;
}

.accountForm__socialItem--google a:after {
    background-image: url(../img/ja/login_icon_google.svg);
    background-size: 28px;
    background-position: center center;
}

.accountForm__socialItem--twitter a:after {
    background-image: url(../img/ja/login_icon_x.svg);
    background-size: 24px;
    background-position: center center;
}
.accountform_footer {
    margin-top: 35px;
    padding-top:18px;
    order: 2;
    text-align: center;
    width: 100%;
    border-top: 1px solid var(--border-color-light);
}
.accountform_footer a{
    margin-top: 10px;
    font-size:1.4rem;
    padding-top: 11px;
    padding-bottom: 11px;
    max-width: 220px;
    min-width: 220px;
    font-weight: normal;
}
#body-x_signup .mail_attention{
    order: 2;
}
@media (max-width: 768px){
    .login-body {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        max-width: 400px;
    }
    .login-form{
        order: 0;
        width: 100%;
    }
    .login-body > div h2 {
        margin-bottom: 8px;
        font-size: 1.4rem;
    }
    .socialFormGroup{
        margin-top: 28px;
        order: 2;
        width: 100%;
    }
    .accountform_footer {
        margin-top: 28px;
        padding:15px 10px 15px;
        width: 100%;
        border: 1px solid var(--border-color-light);
    }
    .form-group {
        margin-bottom: 12px;
    }
    .sociallist a {
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .accountform_footer a{
        margin-top: 8px;
    }
}

/* 連携ログイン */
.login-body.scl_body .login-form {
    width: 100%;
}
.login-body.scl_body .loginbtn a,
.login-body.scl_body .loginbtn button {
    max-width: 350px;
}

#body-x_scl_twitter_callback .resend p{
   margin: 0 auto 20px;
}

@media (max-width: 768px){
    .login-body.scl_body {
        max-width: 768px;
    }
    .login-body.scl_body .mailmagazine_box {
        margin-bottom: 45px;
    }
}
/* 認証メールを送信しました */

.lead_text {
    text-align: center;
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

/* お知らせページ */

.notice-list li {
    font-size: 1.6rem;
    border-bottom: 1px solid var(--border-color-light);
}
.notice-list li:last-child {
    border-bottom: none;
}
.notice-item a {
    padding: 10px 12px 8px;
    font-weight: bold;
    display: block;
    position: relative;
}
.notice-item a:hover {
    text-decoration: none;
    background-color: var(--background-color-base-hover);
}
.notice-item time {
    padding-right: 18px;
    font-size: 1.4rem;
    font-weight: normal;
    position: relative;
    color: var(--link-color-light);
}
.notice-item .simple_badge time:after {
    top: 4px;
}
.notice-item span {
    margin-top: 3px;
    display: block;
}

/* ************ カート、視聴履歴 ******************** */


/*★評価*/

#body-x_cart .evaluation,
#body-manager .evaluation {
    margin: 8px 0 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#body-x_cart .evaluation .rate,
#body-manager .evaluation .rate {
    margin-right: 8px;
    height: 18px;
    width: calc(18px * 5);
    transform: translateY(0);
}
#body-x_cart .star_back i,
#body-x_cart .star_front i,
#body-manager .star_back i,
#body-manager .star_front i{
    width: 18px;
}

/*高画質ラベル*/

#body-x_cart .rl_wd .detail,
#body-manager .rl_wd .detail {
    line-height: 1;
}
#body-x_cart .rl_wd .label,
#body-manager .rl_wd .label {
    margin-right: 15px;
    background-color: var(--color-main);
    padding: 2px 5px;
    font-size: 1.3rem;
    color: var(--text-color-with-background);
    font-weight: bold;
    display: inline-block;
}
.detail_price,
.detail_price .actual_price,
.pickup-container .item-price,
.pickup-container .skeleton-item-price{
    color: var(--text-videolist-price);
    font-size: 1.6rem;
    line-height:1;
    letter-spacing: 0;
    vertical-align: -10%;
    font-weight: bold;
}
.detail_price{
    margin-top: 8px;
    margin-bottom: 8px;
}

.pickup-container .item-price,
.pickup-container .skeleton-item-price{
    margin-top: -2px;
    margin-bottom: 8px;
}

.planprice_price_purchase .detail_price{
    margin-top: 0;
}

.detail_price,
.pickup-container .item-price{
    display: flex;
    flex-wrap: wrap;
    gap:6px 4px;
    align-items: center;
}
.planprice_price_purchase .detail_price{
    align-items: baseline;
}
.detail_price span {
    font-size: 12px;
    font-weight: normal;
}


.on_sale .on_sale_detail_price_inner{
    margin-bottom:8px;
    display: flex;
    gap:6px;
    flex-direction: column;
    width: 100%;

}

.on_sale .on_sale_detail_price_inner *{
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

.on_sale .sale_line_discount_rate{
    display: flex;
    gap:6px;
    min-height:16px;
}
.on_sale span.discount-badge,
.reserve_price_title_wrap .reserve_price_title{
    padding: 6px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size:1.2rem;
    line-height:1;
}
.on_sale span.discount-badge{
    color: var(--sale-discount-badge-text-color);
    background: var(--sale-discount-badge-background);
    flex-shrink: 0;
}
.sale_overview_wrap,
span.sale_overview_wrap{
    display: flex;
    align-items: center;
}

.sale_overview_wrap,
span.sale_overview_wrap,
.sale_overview_wrap .sale_name{
    font-size: 1.1rem;
    color:var(--sale-name-text-color);
}


.reserve_price_title_wrap .reserve_price_title{
    color:var(--reserve-price-title-text);
    background: var(--reserve-price-title-background);
}
.on_sale .sale_line_price{
    display: flex;
    line-height:1;
    gap:6px 4px;
    align-items: baseline;
}
.pickup-item .on_sale .sale_line_price{
    width: 100%;
}

.default_price .rental_period:empty {
  display: none;
}
.default_price [class^="purchased_label_"]:empty {
  display: none;
}

.on_sale .actual_price{
    font-size:1.6rem;
    font-weight: bold;
    flex-shrink: 0;
}
.reserve-price-list .price-original-wrap,
.on_sale .price-original-wrap{
    color: var(--on-sale-price-original-text-color);
    font-size: 1.2rem;
}
.reserve-price-list .price-original,
.on_sale .price-original{
    text-decoration-line: line-through;
    font-size: 1.3rem;
}
.reserve_price_title_wrap,
span.reserve_price_title_wrap{
    display: flex;
    gap:6px;
    width: 100%;
}


/* 視聴期限 */

.daysleft {
    border: 1px solid var(--color-main);
    color: var(--color-main);
    padding: 5px;
    margin: 10px auto 0 auto;
}
.daysleft p {
    text-align: center;
    font-size: 14px;
}
.daysleft .remaining {
    font-weight: bold;
}

/* ******** 管理画面/作品インポート、API登録 ******** */

.import_label,
.API_label {
    margin-bottom: 5px;
    font-size: 1.4rem;
}
.import_hidden label,
.API_hidden label {
    padding-left: 18px;
    color: var(--color-main);
    text-decoration: underline;
    cursor: pointer;
    position: relative;
}
.import_hidden label:before,
.API_hidden label:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3.5px 0 3.5px;
    border-color: var(--color-main) transparent transparent transparent;
    position: absolute;
    top: calc(50% - 2px);
    left: 5px;
}
.import_hidden label:hover,
.API_hidden label:hover {
    color: var(--color-main-hover);
    text-decoration: none;
}
.import_hidden label:hover:before,
.API_hidden label:hover:before {
    border-color: var(--color-main-hover) transparent transparent transparent;
}
.import_hidden input,
.API_hidden input {
    display: none;
}

/*中身を非表示にしておく*/

.import_hidden .hidden_show,
.API_hidden .hidden_show {
    height: 0;
    margin-top: 10px;
    background-color: var(--background-color-light2);
    width: 100%;
    overflow: hidden;
}

/*クリックで中身表示*/

.import_hidden input:checked ~ .hidden_show,
.API_hidden input:checked ~ .hidden_show {
    padding: 15px 20px 15px 15px;
    height: auto;
}
.import_hidden .hidden_show li,
.API_hidden .hidden_show li {
    margin-bottom: 20px;
    margin-left: 15px;
    list-style: disc;
}
.API_hidden .hidden_show li {
    list-style: decimal;
}
.import_hidden .hidden_show li:last-child,
.API_hidden .hidden_show li:last-child {
    margin-bottom: 0;
}

/* API同期 */
.manager-input{
    margin-bottom: 14px;
}
.manager-input__border{
    padding: 12px;
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
}
.manager-input__title{
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.manger-input__radio:not(:last-child){
    margin-bottom: 8px;
}
.manger-input__radio input[type="radio"],
form#validate .manger-input__radio input[type="radio"],
.manger-input__radio input[type="check"],
form#validate .manger-input__radio input[type="check"]{
    width: auto;
    margin-right: 8px;
    transform: translateY(0px);
}
.manger-input__radio{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.manger-input__radio label{
    cursor: pointer;
    padding: 4px 0;
    min-width: 100px;
}
.manger-input__radio input:checked + label{
    font-weight: bold;
    color: var(--color-main);
}

/* ******** レビュー、コメント欄 ******** */
@keyframes fadeInAndDown {
  from {
    opacity: 0;
    transform: translate3d(0, -80px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInAndDown {
  animation-name: fadeInAndDown;
}

.review {
  padding: 15px 15px 5px;
  background-color: var(--background-color-light2);
}
@media (max-width: 768px){
    .review {
        padding-right: 10px;
        padding-left: 10px;
    }
}
.review_title .user_review {
  font-size: 1.8rem;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
    gap:3px 8px;
}

.review_title{
    margin-bottom: 3px;
    padding-bottom: 8px;
    display: flex;
    gap:5px 15px;
    align-items: center;
    flex-wrap: wrap;
}

.cctotal {
    padding: 0 0 10px;
    font-weight: bold;
    color: var(--text-color-light);
}

.addcm li img.avatar {
    /* アバター */
    margin: 0 0 0 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
.comments li{
    padding:10px 0 0;
}
.c-customComment .comments li:first-child{
    border-top:none;
}
.comments li .message{
    padding:0;
}
.comments li.addcm .message{
    margin-left:50px;
}

.addcm li message .body {
    /* 入力フォーム */
    margin-left: 70px;
}
.addcm .comment-rating {
    margin-bottom: 18px;
}
.comment-rating {
    margin-bottom: 12px;
    padding:0;
}
li .jq-ry-container,
article .jq-ry-container {
    padding: 0;
}
.review_box .jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group {
    z-index: 0;
}

.addEmComment {
    height: 120px;
}

.addcm .message {
    padding: 0;
}
.addcm .message h3{
    margin-bottom:3px;
    font-size:1.4rem;
}
.addcm .post_group {
    margin-top: 15px;
    margin-bottom: 20px;
}
.addcm .post_text {
    text-align: center;
}
.no_login.addcm .post_text {
    margin-bottom:20px;
}
.addcm .post_text p {
    display: inline-block;
    padding: 5px 5px 5px 8px;
    text-align: center;
    font-weight: bold;
    border-radius: 50px;
    font-size: 1.3rem;
    color: var(--warning-text-color);
}
.addcm .post_text span {
    color: var(--warning-text-color);
    background-color: var(--warning-background-color);
    border-radius: 50%;
    padding: 2px 7px;
    margin-right: 8px;
}
.addcm_inner{
    width: 100%;
}
@media screen and (max-width: 768px) {
    .commentwrap {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    .addEmComment {
        width: 100%;
    }
    .addcm .setting_ylbtn {
        margin-right: 0;
    }
    .addcm .post_group {
        display: block;
    }
    .addcm .post_text {
        width: 100%;
        text-align: center;
    }
}

.text_content {
    width: 100%;
}
.review_tmn {
    display: flex;
    flex-shrink: 0;
}
.comments li .avatar_common img{
  width: auto;
  height:auto;
}

.review_data{
    display: flex;
    gap: 10px 12px;
    align-items: center;
    flex-wrap: wrap;
}
.usertitle{
    margin-left:-1px;
}
.text_excerpt {
    margin-top: 10px;
}
.default_btn.comment_reply_btn{
    display: inline-block;
    margin: 2rem 0 0 0;
    max-width: initial;
    min-width: initial;
    width: initial;
    padding: 12px 24px 11px 24px;
    font-size: 1.4rem;
}
.default_btn.comment_reply_btn > i{
    margin-right: 8px;
}

/*-コメント欄周辺*/

.addcm .addEmComment {
    height: 200px;
    font-size: 1.6rem;
}

.no_login.addcm .addEmComment{
    margin-bottom:20px;
    height: 70px;
}
.addcm .comments li {
    margin-bottom: 10px;
    padding: 0;
}
.addcm .comments li .message {
    padding-right: 0;
}
.addcm .setting_ylbtn {
    margin-bottom: 15px;
}
.addcm .post_image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.addcm .arrow {
    display: none;
}

.comments li .avatar_common img,
.comments li.addcm .avatar_common img {
    margin: 0;
    float: none;
}
.comments li.addcm .avatar_common{
    float: left;
}

/*ユーザー投稿コメント*/

.addcm .post_BTMsection {
    border-top: solid 1px var(--border-color-light);
    margin: 0 25px;
}
ul[id^="emContent"] .post_log {
    display: flex;
    margin-top: 61px;
    margin-bottom: 90px;
    margin-left: 20px;
}
ul[id^="emContent"] .post_log_text {
    margin-left: 32px;
}
ul[id^="emContent"] .message .body {
    margin-top: 8px;
    color: var(--text-color-default);
    font-size: 1.4rem;
}
ul[id^="emContent"] .message form.body {
    margin-top: 0;
}
ul[id^="emContent"] li,
ul[id^="emContent"] > article,
.current_review_inner,
.re_from_seller_inner{
    display: flex;
    box-sizing: border-box;
    text-align: left;
    align-items: flex-start;
    gap:0 13px;
    border-top: solid 1px var(--border-color-light);
}

ul[id^="emContent"] > li:not(.addcm),
.current_review_inner,
.re_from_seller_inner{
    padding: 15px 0;

}

.re_from_seller_inner{
    padding-bottom:0;
    border-top: none;
}
/* レビューコメント */
#video_comment .back_link{
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

#video_comment .video_detail_rating {
    margin-bottom: 10px;
    font-size: 20px;
    display: flex;
    flex-wrap: wrap;
}

#video_comment .video_comment_head_funk {
    margin-bottom: 18px;
}

#video_comment .video_comment_thmun {
    margin-bottom: 30px;
}

#video_comment .video_comment_thmun img{
    display: block;
    width: 250px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

#video_comment .jq-ry-container{
    padding:0;
}

.re_from_seller{
    margin-top:15px;
    padding-top:15px;
    border-top: dotted 1px var(--border-color-dark);
}
.re_from_seller h3{
    font-size:1.4rem;
    color: var(--text-color-light);
}

/*----------------〇分後--------------------*/

.msg-footer,
.comments .msg-footer > li,
.message .date-time,
.text_date {
    padding-left:10px;
    font-size: 1.2rem;
    color: var(--text-color-light);
    position: relative;
    transform:translateY(1px)
}

.text_date:before {
    content:"";
    width:2px;
    height:1px;
    display: inline-block;
    position: absolute;
    top:calc(50% - 1px);
    left: 0;
    background-color: var(--text-color-light);
}

.message .date-time {
    margin-top: 10px;
    display: block;
}
.msg-footer {
    margin-top: 10px;
}

/* ******** アバター設定 ******** */
.avatar_update .p-myPageSetting__avatarForm__img {
    margin: 0 auto 50px;
    width: 124px;
}

.avatar_update .avatar_common img{
    width:100%;
    height:100%;
    max-width: initial;
    max-height: initial !important;
    object-fit: cover;
}

.avatar_update .p-myPage__formLabel{
    margin-bottom: 8px;
    display: block;
}
.avatar_update .p-myPageSetting__avatarForm__inputWrapper{
    margin: 0 auto 50px;
    width: 100%;
    max-width: 500px;
}
.avatar_update .p-myPageSetting__avatarForm__inputText{
    width: 100%;
}

.avatar_update .p-myPageSetting__avatarForm__inputFileWrapper {
    display: flex;
    flex-direction: row-reverse;
}
.avatar_update .p-myPageSetting__avatarForm__inputText{
    border-radius: 5px 0 0 5px;
}
.avatar_update .avatar_update_btn {
    width: 100%;
    max-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-main);
    color: var(--text-color-with-background);
    font-weight: bold;
    border-radius: 0 5px 5px 0;
}

/* ******** エラー画面（404 401 メンテナンスなど　） ******** */

.l-main.c-404 {
    margin-top: 50px;
    text-align: center;
}
.l-main.c-404 h2 {
    margin-bottom: 30px;
    font-size: 3.5rem;
}
.l-main.c-404 p {
    margin-bottom: 40px;
    font-size: 2rem;
    font-weight: bold;
}
.l-main.c-404 a.c-btn {
    text-decoration: underline;
}
.l-main.c-404 a.c-btn:hover {
    text-decoration: none;
}

.no_access_allowed_icon{
    padding-left:70px;
    position: relative;
}

.no_access_allowed_icon:before{
    content:"";
    height:50px;
    width:50px;
    border:4px solid var(--icon-color);
    border-radius: 50px;
    position: absolute;
    top:calc(50% - 25px);
    left: 0;
}
.no_access_allowed_icon i:before{
    content:"";
    height:19px;
    width:4px;
    background-color:  var(--icon-color);
    position: absolute;
    top:5px;
    left: 23px;
}
.no_access_allowed_icon i:after{
    content:"";
    height:5px;
    width:4px;
    background-color:  var(--icon-color);
    position: absolute;
    top:28px;
    left: 23px;
}
@media screen and (max-width: 768px) {
    .l-main.c-404 h2 {
        margin-bottom: 30px;
        font-size: 3rem;
    }
    .l-main.c-404 p {
        font-size: 1.7rem;
    }
    .no_access_allowed_icon{
        padding-left:55px;
        position: relative;
    }
    .no_access_allowed_icon:before{
        content:"";
        height:40px;
        width:40px;
        border:3px solid var(--icon-color);
        top:calc(50% - 20px);
    }
    .no_access_allowed_icon i:before{
        height:14px;
        width:3px;
        top:6px;
        left: 18px;
    }
    .no_access_allowed_icon i:after{
        height:4px;
        width:3px;
        top:24px;
        left: 18px;
    }
}

/* ******** 利用規約 ******** */

#body-x_term_of_use .narrow_contents > div,
#body-x_term_of_use_mail_magazine .narrow_contents > div {
    margin-bottom: 50px;
    line-height: 1.6;
}
#body-x_term_of_use .narrow_contents h3,
#body-x_term_of_use_mail_magazine .narrow_contents h2 {
    margin-bottom: 10px;
    font-size: 2rem;
    line-height: 1.4;
}
#body-x_term_of_use .narrow_contents ol,
#body-x_term_of_use_mail_magazine .narrow_contents ol {
    margin-bottom: 30px;
    list-style-type: decimal;
}
#body-x_term_of_use .narrow_contents ul,
#body-x_term_of_use_mail_magazine .narrow_contents ul {
    margin-bottom: 30px;
    list-style-type: disc;
}
#body-x_term_of_use .narrow_contents ul:last-child,
#body-x_term_of_use_mail_magazine .narrow_contents ul:last-child {
    margin-bottom: 0;
}
#body-x_term_of_use .narrow_contents div > ol li,
#body-x_term_of_use .narrow_contents div > ul li,
#body-x_term_of_use_mail_magazine .narrow_contents div > ol li,
#body-x_term_of_use_mail_magazine .narrow_contents div > ul li {
    margin-top: 18px;
    margin-bottom: 20px;
    margin-left: 20px;
}
#body-x_term_of_use .narrow_contents div > ol li li,
#body-x_term_of_use .narrow_contents div > ul li li,
#body-x_term_of_use_mail_magazine .narrow_contents div > ol li li,
#body-x_term_of_use_mail_magazine .narrow_contents div > ul li li {
    margin-top: 5px;
}
#body-x_term_of_use .narrow_contents div > ol li li:first-child,
#body-x_term_of_use_mail_magazine .narrow_contents div > ol li li:first-child {
    margin-top: 18px;
}

/* ******** まとめ売り管理 ******** */
#body-purchase_groups .import_area{
    margin-bottom:20px;
}

.purchase_groups_list .detailed_link{
    width:70px;
}

.purchase_groups_list .group_name a,
#body-x_maker_monthly_setts .col_title a {
    font-weight: bold;
}

#body-purchase_groups .detailed_link a{
    margin:0 auto;
    padding:12px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size:1.4em;
}

#body-purchase_groups .detailed_link a:hover{
    text-decoration: none;
    background-color: var(--background-color-light);
}

.purchase_group_detail_list .thumbnail{
    padding-left:0;
    width:238px;
}
.purchase_group_detail_list .thumbnail img{
    width:100%;
    object-fit:cover;
    aspect-ratio: 16 / 9;
    display: block;
}
.purchase_group_detail_list .title{
    font-weight: bold;
}

.imageGroupForm__inputFile_wrapper {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 20px;
}
.imageGroupForm__inputFile {
    display: flex;
    align-items: center;
    background-color: var(--input-color);
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    overflow: hidden;
    width: 400px;
}
.imageGroupForm__inputFile input[type="file"] {
    display: none;
}
.imageGroupForm__inputFile label {
    flex-grow: 1;
    padding: 0px 10px;
    border: none;
    cursor: pointer;
}
.imageGroupForm__inputFile button {
    width: 25%;
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border: none;
    color: var(--text-color-with-background);
    padding: 10px;
    cursor: pointer;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.imageGroupForm__inputFile button:hover {
    background-color:var(--color-accent);
    opacity: .9;
}
.image_group_purchase {
    border-radius: 6px;
}
.purchase_group_status{
    margin-bottom: 4px;
}
@media (max-width: 768px){
    .imageGroupForm__inputFile {
        width: 100%;
    }
}

#body-purchase_groups .purchase_group_info{
    margin-bottom: 20px;
}
#body-purchase_groups .purchase_group_info dt{
    margin-bottom:3px;
    font-weight: bold;
}
#body-purchase_groups .purchase_group_info dd{
    margin-bottom:25px;
    font-size:1.15em;
}

#body-purchase_groups dd.btn_radio_wrap{
    margin-top:10px;
    margin-bottom:30px;
    margin-left:5px;
    display: flex;
    gap: 20px 40px;
    flex-wrap: wrap;
}

#body-purchase_groups dd.btn_radio_wrap.chapter_wrap,
#body-purchase_groups dd.btn_radio_wrap.private_wrap{
    flex-direction: row-reverse;
    justify-content: flex-end;
}
#body-purchase_groups  .btn_radio_wrap input[type=submit]{
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    font-size:1.6rem;
    color:var(--text-color-default);
    cursor:pointer;
}
#body-purchase_groups .btn_radio{
    padding-left:22px;
    position: relative;
    cursor:pointer;
}
#body-purchase_groups .on_monthly,
#body-purchase_groups .state span,
#body-purchase_groups .state .public,
#body-purchase_groups .state .private,
#body-x_maker_monthly_setts .col_status .status_on,
#body-x_maker_monthly_setts .col_status .status_off,
#body-x_rental_video_maker .col_status .status_on,
#body-x_rental_video_maker .col_status .status_off{
    padding:1px 3px;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
    font-size:1.4rem;
}
#body-purchase_groups .on_monthly{
    font-weight: bold;
    color:var(--color-accent);
    border:1px solid var(--color-accent);

}#body-purchase_groups .type .chapter{
    padding:1px 3px;
    font-weight: bold;
    color:var(--text-color-with-background);
    background-color: var(--color-accent);
    border-radius: 5px;
    display: inline-block;
    font-size:1.4rem;
}

#body-purchase_groups .state .public,
#body-x_maker_monthly_setts .col_status .status_on,
#body-x_rental_video_maker .col_status  .status_on {
    color:var(--system-message-text-color);
    background-color: var(--system-message-color);
}
#body-purchase_groups .state .private,
#body-x_maker_monthly_setts .col_status .status_off,
#body-x_rental_video_maker .col_status .status_off{
    color:var(--btn-color-disabled-text);
    background-color: var(--btn-color-disabled);
}

@media (max-width: 768px){
    .purchase_group_detail_list .thumbnail{
        width:140px;
    }
}

/* ******** メーカーマイページ ******** */
.header_bottom_nav li.dropdown_follower{
    margin-right:15px;
}

.header_bottom_nav .dropdown_follower_link {
    cursor: pointer;
    position: relative;
}
.header_bottom_nav .dropdown_follower_link:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3.5px 0 3.5px;
    border-color: var(--header-bottom-link-color) transparent transparent transparent;
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
}

.header_bottom_nav .submenu.active:before,
.dropdown_follower.active:before {
    position: absolute;
    top:calc(100% - 9px);
    left:calc(50% - 10px);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--border-color-light) transparent;
    z-index:1008;
}
.header_bottom_nav .submenu.active:after,
.dropdown_follower.active:after {
    position: absolute;
    top:calc(100% - 8px);
    left:calc(50% - 9px);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent var(--background-color-base) transparent;
    z-index:1009;
}



.header_bottom_nav .dropdown_follower.active .dropdow_follower_list {
    display: flex;
    opacity: 1;
    flex-wrap: wrap;
    flex-direction: column;
}

.dropdow_follower_list .follower_channel_header_left {
    padding: 5px 10px 5px 5px;
    display: flex;
    gap:0 12px;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    border-bottom: solid 1px var(--border-color-light);
}

.dropdow_follower_list .follower_channel_header_left:hover {
    background-color: var(--background-color-light2);
}
.follower_channel_header_left:last-child {
    margin-bottom: 5px;
    border-bottom: none;
}

.header_bottom_nav span.follower_avatar{
    padding:0;
    flex-shrink: 0;
}

.follower_inner_header_container{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.dropdow_follower_list .follower_list_btn {
    background-color: var(--background-color-light2);
    border: 1px solid var(--border-color-light);
    border-radius: 5px;
}

/* ******** メーカーマイページ ******** */
#body-x_maker_monthly_setts .search_wrap,
#body-x_rental_video_maker .search_wrap {
    display: flex;
    gap:5px 20px;
    align-items: center;
    flex-wrap: wrap;
}
#body-x_maker_monthly_setts .search_wrap button,
#body-x_rental_video_maker .search_wrap button{
    margin-left:0;
}
#body-x_maker_monthly_setts .col_status .status_on,
#body-x_maker_monthly_setts .col_status .status_off,
#body-x_rental_video_maker .col_status .status_on,
#body-x_rental_video_maker .col_status .status_off{
    min-width:50px;
    text-align: center;
    cursor:pointer;
}
#body-x_maker_monthly_setts .col_status .status_off{
    font-weight: normal;
}
#body-x_maker_monthly_setts .col_status{
    padding-right:0 ;
    width:80px;
}
#body-x_maker_monthly_setts .col_edit{
    padding-left:0 ;
    width:80px;
}
/* text-decoration helper class tdeco- */
.tdeco-price-through{
    text-decoration: line-through;
}

.c-pagination__list {
    list-style: none;
    display: flex;
}

.c-pagination__item {
    margin: 10px;
}


.c-pagination__list .c-pagination__item.active{
    font-weight: bold;
}

.c-pagination__list .c-pagination__item.active a{
    color:#9b9b9b;
}
/* social login */
.scl-login{
    margin-top: 62px;
}
@media (max-width: 768px){
    .scl-login{
        margin-top: 42px;
    }
}
.scl-login-block{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid var(--border-color-light);
    text-align: center;
    border-radius: 4px;
}
.scl-login-text{
    padding: 38px 24px;
    font-weight: bold;
    border-radius: 1px 1px 0 0;
    background: var(--background-color-light2);
}
.scl-login-btn{
    padding: 38px 24px 24px;
}
.scl-login-btn-send .default_btn{
    padding: 12px 24px 12px 24px;
    font-size: 1.6rem;
    max-width: 240px;
    min-width: 200px;
}
.scl-login-btn-cancel{
    margin-top: 24px;
}
.scl-login-cancel{
    border: none;
    background: transparent;
    padding: 8px 12px;
    max-width: 240px;
    min-width: 200px;
    color: var(--text-color-default);

}

.purchase_label {
    background:#ddd;
    color:#000;
    font-weight:bold;
    border: 1px solid #ddd;
    padding:2px;
    display: inline-flex;
}

/* p-uploader */
.p-uploader{
    padding:12px;
}
.p-uploader .p-uploader__form{
    margin-bottom:8px;
    color:var(--popup-upload-form-text-color);
}
.p-uploader .MaxUpload_Box{
    margin:0;
    padding:0;
}
.p-uploader .MaxUpload_Box .Maxuploader{
    margin:0;
}
.p-uploader .c-fileList__header{
    margin-bottom:4px;
    display: flex;
    align-items: center;
    gap:16px;
}
.p-uploader .c-fileList__header h2{
    font-size:1.6rem;
}

.p-uploader .clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.p-uploader .c-fileList__item{
    margin-bottom:8px;
    padding:8px 12px 12px;
    background-color: var(--popup-upload-file-item-background);
    border-radius: 6px;
}
.p-uploader .c-fileList__item:last-child{
    margin-bottom:0;
}
.p-uploader .c-fileList__mediaName{
    margin-bottom: 4px;
    font-weight: bold;
}
.p-uploader .c-fileList__media{
    margin-bottom: 8px;
}

.p-uploader .c-fileList__mediaDownload{
    padding:16px;
    display: flex;
    background-color: var(--popup-upload-file-media-dl-btn-background);
    color:var(--popup-upload-file-media-dl-btn-text-color);
    border:1px solid var(--popup-upload-file-media-dl-btn-border-color);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    max-width:260px;
}
.p-uploader .c-fileList__mediaDownload:hover{
    text-decoration: none;
    background-color:var(--popup-upload-file-media-dl-btn-hover-background);
}
.p-uploader .c-fileList__mediaThumbnail-wrap{
    margin-bottom: 8px;
}
.p-uploader .c-fileList__mediaThumbnail{
    display: block;
    max-width: 100%;
    max-height: 230px;
    height: auto;
}
.p-uploader .c-fileList__controlItems{
    display: flex;
    gap:0 40px;
}
.p-uploader .c-fileList__controlItem{
    display: flex;
}
.p-uploader .delete_btn{
    background-color:var(--popup-upload-file-media-delete-btn-background);
    color:var(--popup-upload-file-media-delete-btn-text-color);
}
.p-uploader .delete_btn:hover{
    background-color:var(--popup-upload-file-media-delete-btn-hover-background);  
}

/* plan_panel */
.plan_panel{
    margin-left:auto;
    margin-right:auto;
    max-width:640px;
    width: 100%;
    max-width:600px;
    border:1px solid var(--plan-panel-border-color);
    background-color: var(--plan-panel-bg);
}

.plan_panel .plan_head{
    padding:14px clamp(1.6rem, -0.267rem + 2.13vw, 2.4rem);
    background: var(--plan-panel-head-bg);
    display: flex;
    justify-content: space-between;
    gap:16px;
}

.plan_panel .plan_head_inner{
    flex:1;
    display: grid;
    gap:8px;
    justify-items: start;
}
.plan_panel .plan_head .value{
    display:flex;
    align-items: center;
    gap:4px;
    line-height:1;
}

.plan_panel .plan_head .status{
    padding: 4px 6px 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    line-height:1;
    font-weight: bold;
}

.plan_panel .plan_head .status.active{
    color: var(--plan-panel-status-active-text-color);
    background-color: var(--plan-panel-status-active-bg);
}
.plan_panel .plan_head .status.canceled{
    color: var(--plan-panel-status-canceled-text-color);
    background-color: var(--plan-panel-status-canceled-bg);
}

.plan_panel .plan_head .status.active::before{
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg) translateY(-2px);
}
.plan_panel .plan_head .status.canceled::before{
  content: '';
  display: block;
  width: 8px;
  height: 2px;
  border-bottom: 2px solid;
}
.plan_panel .plan_head .plan_ttl{
    font-size: 2rem;
    font-weight: bold;
}
.plan_panel .plan_head .price{
    font-size: 2rem;
    font-weight: bold;
}
.plan_panel .plan_head .cycle{
    font-size: 1.6rem;
}
.plan_panel .plan_body{
    padding:16px clamp(1.6rem, -0.267rem + 2.13vw, 2.4rem);
    display: flex;
    justify-content: space-between;
    gap:24px;
}
@media (max-width: 768px){
    .plan_panel .plan_head{
        flex-direction: column;
    }
    .plan_panel .plan_head .value{
        justify-content: flex-end;
    }
    .plan_panel .plan_body{
        flex-direction: column;
    }
}

.plan_panel .plan_body_inner{
    flex:1;
}

.plan_panel .plan_canceled,
.plan_panel .plan_info_retention{
    display:grid;
    gap:24px;
        width: 100%;
}

.plan_panel .expiration .title,
.plan_panel .next_payment .title{
    margin-bottom:8px;
}
.plan_panel .expiration .value,
.plan_panel .plan_active .next_payment .value{
    font-size: 2.3rem;
    font-weight: 500;
    line-height:1
}
.plan_panel .plan_canceled .next_payment,
.plan_panel .plan_info_retention .next_payment{
    font-size:1.3rem;
    line-height:1
}

.plan_panel .plan_canceled .next_payment{
    color: var(--plan-panel-info-list-canceled-next-color);
    text-decoration:line-through;
}
.plan_panel .plan_info_retention .next_payment{
    color: var(--plan-panel-info-list-next-color);
    font-size:1.3rem;
    line-height:1
}

/* plan-retention */

.plan-retention .notice-box {
    margin-bottom: 32px;
    padding: 16px;
    text-align: center;
    background-color: var(--plan-retention-notice-bg);
    border:1px solid var(--plan-retention-notice-border-color);
}
.plan-retention .notice-title {
    margin-bottom:8px;
    color: var(--plan-retention-notice-title-color);
    font-weight: bold;
    font-size: 1.6rem;
}
.plan-retention .plan-retention-lead{
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
    position: relative;
}

.plan-retention .plan-retention-lead,
.plan-retention .recommend-box{
    margin-bottom:104px;
    position: relative;
}
.plan-retention  .plan-retention-lead::after,
.plan-retention .recommend-box::after{
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 1px var(--plan-retention-arrow-border-color);
    border-right: solid 1px var(--plan-retention-arrow-border-color);
    position: absolute;
    bottom: -54px;
    left: calc(50% - 5px);
    transform: rotate(135deg);
}
.plan-retention .guide-box {
  margin-bottom: 24px;
  text-align: center;

}
.plan-retention  .plan-retention-plan-info{
  margin-bottom: 32px;
  padding:8px 16px;
  background: var(--plan-retention-plan-info-bg);
}

.plan-retention .plan-info-list:not(:last-child) {
    margin-bottom: 24px;
}

.plan-retention .plan-info-title {
    margin-bottom:12px;
    font-size: 1.6rem;
    font-weight: bold;
}
.plan-retention .plan-info-list-items li{
    list-style:disc;
    margin-left:1.5em;
}

.plan-retention .plan-info-list-items li:not(:last-child){
    margin-bottom: 12px;
}

.plan-retention .plan-info-desc {
}
.plan-retention .recommend-box {
    padding: 48px 16px;
    background-color: var(--plan-retention-recommend-box-bg);
}
.plan-retention .recommend-title {
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.plan-retention .video_list_table{
    margin-bottom: 48px;
}
.plan-retention .recommend-back-link{
    text-align: center;
}
.plan-retention .recommend-back-link a{
    margin-left:auto;
    margin-right:auto;
    padding:16px 24px;
    font-size: 1.6rem;
    transition: all .1s ease-in;
    background-color: var(--plan-retention-recommend-back-link-bg);
    border-radius:6px;
    display: block;
    width: 100%;
    max-width:224px;
}
.plan-retention .recommend-back-link a:hover{
    text-decoration: none;
    border-bottom:none;
    background-color: var(--plan-retention-recommend-back-link-bg-hover);
}
.plan-retention .confirm-box {
    text-align: center;
}
.plan-retention .confirm-title {
    margin-bottom: 20px;
}

.plan-retention .action-btn {
    padding: 12px 24px;
    border-radius: 0.6rem;
    border: 1px solid var(--plan-retention-action-btn-border);
    color: var(--plan-retention-action-btn-color);
    background-color: var(--plan-retention-action-btn-bg);
    font-size: 1.6rem;
    font-weight: bold;
    max-width:208px;
    min-width:inherit;
    transition: all .3s ease-in;
}
.plan-retention .action-btn:hover {
    background-color: var(--plan-retention-action-btn-bg-hover);
}

/* price_pattern_videos */
.price_pattern_status{
    padding: 0.2em 0.1em;
    display: inline-flex;
    min-width: 4.5rem;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    line-height:1;
    font-weight: bold;
}
.price_pattern_status_new{
    background-color: var(--price-pattern-status-icon-new-background-color);
    color:var(--price-pattern-status-icon-new-text-color);
    border:1px solid var(--price-pattern-status-icon-new-border-color);
}
.price_pattern_status_recent{
    background-color: var(--price-pattern-status-icon-recent-background-color);
    color:var(--price-pattern-status-icon-recent-text-color);
    border:1px solid var(--price-pattern-status-icon-recent-border-color);
}
.price_pattern_status_normal{
    background-color: var(--price-pattern-status-icon-normal-background-color);
    color:var(--price-pattern-status-icon-normal-text-color);
    border:1px solid var(--price-pattern-status-icon-normal-border-color);
}
.price_pattern_videos h3{
    margin-bottom:8px
}

.price_pattern_videos .search_wrapper{
    margin-bottom:40px;
    padding:12px 16px;
    background-color: var(--price-pattern-status-searchwrapper-background-color);
    border:1px solid var(--price-pattern-status-searchwrapper-border-color);
    display: grid;
    gap:8px;
}

.price_pattern_videos .search_title_wrapper{
    margin-bottom:4px;
}
.price_pattern_videos .search_title_wrapper h3{
    margin-bottom:0;
    font-size:1em;
    font-weight: normal;
    display: inline-block;
}

.price_pattern_videos .search_wrapper .search_wrapper_input{
    width: 100%;
}
.price_pattern_videos .search_wrapper button[type="submit"]{
    max-width:140px;
    width: 100%;
}
.price_pattern_videos .video_selection_wrapper{
    margin-bottom: 56px;
}

.price_pattern_videos .price-pattern-table{
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    background-color: var(--price-pattern-status-price-pattern-table-background-color);
    color:var(--price-pattern-status-price-pattern-table-text-color);
    border:1px solid var(--price-pattern-status-price-pattern-table-border-color);
}

.price_pattern_videos .price-pattern-table thead th {
    padding:8px;
    background-color: var(--price-pattern-status-price-pattern-th-background-color);
    color:var(--price-pattern-status-price-pattern-th-text-color);
}
.price_pattern_videos .price-pattern-table tbody td {
    padding:8px;
}
.price_pattern_videos .price-pattern-table tr {
    border-bottom:1px solid var(--price-pattern-status-price-pattern-tr-text-color);
}
.price_pattern_videos .price-pattern-table tbody .price-pattern-checkbox{
    text-align: center;
}
.price_pattern_videos .price-pattern-table tbody .price-pattern-img{
    width:91px;
    text-align: center;
}
.price_pattern_videos .price-pattern-table tbody .price-pattern-img img{
    aspect-ratio: 16 / 9;
    width:75px;
    object-fit:cover;
    display: block;
}
.price_pattern_videos .price-pattern-table tbody .price-pattern-sales-type{
    text-align: center;
}
.price_pattern_videos .price-pattern-table tbody .price-pattern-merchant-price{
    text-align: right;
}
.price_pattern_videos .price-pattern-table tbody .price-pattern-price{
    text-align: right;
}

.price_pattern_videos .price-pattern-table tbody .price-pattern-price-pattern{
    padding-right:26px;
    text-align: center;
    background-color: var(--price-pattern-status-price-pattern-background-color);
    color:var(--price-pattern-status-price-pattern-text-color);
    position: relative;
}

.price_pattern_videos .toolchip-wrap {
    position: relative;
    display: inline-block;
    cursor:pointer;
    position: absolute;
    right:0;
    top:calc(50% - 20px);
}

.price_pattern_videos .toolchip {
    padding: 6px 12px;
    display: none;
    position: absolute;
    right: calc(100% - 40px);
    bottom:  calc(100% - 3px);
    color: var(--price-pattern-status-toolchip-text-color);
    background: var(--price-pattern-status-toolchip-background-color);
    box-shadow: var(--price-pattern-status-toolchip-box-shadow);
    z-index: 2;
    font-size: 0.95em;
    width:136px;
    cursor: auto;
    text-align: left;
}
.price_pattern_videos .toolchip::before {
    content: '';
    background: var(--price-pattern-status-toolchip-background-color);
    height: 9px;
    width:16px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    right: 19px;
    top: calc(100% - 1px);
}

.price_pattern_videos .toolchip-icon {
    padding:12px 6px;
}
.price_pattern_videos .toolchip-wrap:hover .toolchip,
.price_pattern_videos .toolchip-wrap:focus .toolchip {
    display: block;
}
.price_pattern_videos .pagination_wrapper{
    margin-top:24px
}
.price_pattern_videos .pagination_wrapper .pagination{
    display: flex;
    justify-content: center;
    gap:8px;
}
.price_pattern_videos .pagination_wrapper .pagination .page_link {
    padding:6px 8px;
    background-color: var(--price-pattern-status-page-link-background-color);
    color:var(--price-pattern-status-page-link-text-color);
    border:1px solid var(--price-pattern-status-page-link-border-color);
    line-height:1;
}
.price_pattern_videos .pagination_wrapper .pagination .page_link.current {
    background-color: var(--price-pattern-status-page-link-current-background-color);
    color:var(--price-pattern-status-page-link-current-text-color);
    border:1px solid var(--price-pattern-status-page-link-current-border-color);
}

.price_pattern_videos .pagination_wrapper .pagination .page_link:hover{
    text-decoration: none;
}

.price_pattern_videos .submit_wrapper{
    padding:12px 16px 24px;
    position: sticky;
    bottom:0;
    background-color: var(--price-pattern-status-submit-wrapper-background-color);
    color:var(--price-pattern-status-submit-wrapper-text-color);
    border-top:1px solid var(--price-pattern-status-submit-wrapper-border-color);
    box-shadow: var(--price-pattern-status-submit-wrapper-box-shadow);
    width: calc(100% + 30px);
    transform:translateX(-15px);
}

.price_pattern_videos .price_pattern_select{
    margin-bottom:24px;
}

.price_pattern_videos .price_pattern_select select{
    max-width: 100%;
}

/* btn_buy */
/* ボタン共通 */
.video_detail_plan_btn a.btn_buy_now,
.video_detail_plan_btn a.btn_download,
.video_detail_plan_btn a.btn-add_cart,
.video_detail_plan_btn a.js--cart_remove{
	border-radius: var(--btn-radius);
	font-weight: var(--btn-font-weight);
	font-size: var(--btn-font-size);
	transition: background-color .14s linear, border-color .14s linear, color .14s linear;
}

/* 今すぐ購入 */
.video_detail_plan_btn a.btn_buy_now {
	border: 1px solid var(--purchase-btn-buy-border);
	color: var(--purchase-btn-buy-text);
	background: var(--purchase-btn-buy-bg);
}
.video_detail_plan_btn a.btn_buy_now:hover {
	border: 1px solid var(--purchase-btn-buy-border-hover);
	color: var(--purchase-btn-buy-text-hover);
	background: var(--purchase-btn-buy-bg-hover);
}
.btn_buy_now:after{
	border-top: solid 2px var(--purchase-btn-buy-border-hover);
    border-right: solid 2px var(--purchase-btn-buy-border-hover);
}

/* カートにいれる・ダウンロード */
.video_detail_plan_btn a.btn_download,
.video_detail_plan_btn a.btn-add_cart {
	background-color: var(--purchase-btn-cart-bg);
	color: var(--purchase-btn-cart-text);
	border: 1px solid var(--purchase-btn-cart-border);
}

.video_detail_plan_btn a.btn_download:hover,
.video_detail_plan_btn a.btn-add_cart:hover {
	background-color: var(--purchase-btn-cart-bg-hover);
	color: var(--purchase-btn-cart-text-hover);
	border: 1px solid var(--purchase-btn-cart-border-hover);
}

.video_detail_plan_btn a.js--cart_remove {
	background: var(--btn-color-delete);
	color: var(--btn-color-delete-text);
}

.video_detail_plan_btn a.js--cart_remove:hover {
	background: var(--btn-color-delete-hover);
}
.video_detail_plan_btn .btn_buy_now {
	padding-right: 5px;
	position: relative;
}

.video_detail_plan_btn a:first-child {
	margin-top: 0;
}

.video_detail_plan_btn a:hover {
	text-decoration: none;
}

.video_detail_plan_btn i {
	margin-right: 5px;
}

.btn_download .gg-software-download {
	transform: scale(0.9);
}
.video_detail_plan_btn .gg-shopping-cart {
	transform: scale(0.9) translateY(-2px);
}

/* cart_btn_click_popup */
.cart_btn_click_popup{
    padding:10px;
    min-height:80px;
    position: absolute;
    top:  calc(100% - 8px);
    left: 8px;
    width: 100%;
    max-width: calc(50% - 8px);
    background-color: var(--cart-btn-popup-background-color);
    color:var(--cart-btn-popup-text-color);
    font-size:1.3rem;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: var(--cart-btn-popup--shadow);
    z-index: 1001;
}
.min_purchase_wrap .cart_btn_click_popup{
    top: 100%;
    left: 0;
    max-width: initial;
}
@media (max-width: 768px){
    .min_purchase_wrap .cart_btn_click_popup{
        top: calc(50% - 48px);
        left: 0;
        max-width: 320px;
    }
}
.cart_btn_click_popup:after {
    content: "";
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: var(--cart-btn-popup-arrow-background-color);
    height: 7px;
    width: 14px;
    display: block;
    position: absolute;
    left: 50%;
    bottom: calc(100% - 1px);
    margin-left: -8px;

}

.cart_btn_click_popup:before {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    left: 50%;
    bottom: calc(100% - 5px);
    margin-left: -6px;
    border-right:1px solid var(--cart-btn-popup-arrow-border-color);
    border-bottom:1px solid var(--cart-btn-popup-arrow-border-color);
    transform: rotate(-135deg);
}

.cart_btn_click_popup_inner i.icon_check{
    display: inline-block;
    width: 12px;
    height:9px;
    position: relative;
    transform: translateY(1px);
}

.cart_btn_click_popup_inner i.icon_check:before{
    content:"";
    display: inline-block;
    width: 10px;
    height: 6px;
    position: absolute;
    top: 0;
    left: 1px;
    border-left: 2px solid var(--cart-btn-popup-text-color);
    border-bottom: 2px solid var(--cart-btn-popup-text-color);
    transform: rotate(-45deg) ;
}
@media (max-width: 768px){
     .cart_btn_click_popup{
        margin-left:auto;
        margin-right:auto;
        position: fixed;
        top:calc(50% - 48px);
        left: 0;
        right: 0;
        z-index: 9999;
        width: calc(100% - 16px);
        max-width: 320px;
        min-height: 96px;
    }
    .cart_btn_click_popup:after,
    .cart_btn_click_popup:before {
        display: none;
    }
}