@charset "utf-8";

/************************************************
 design_simplify環境コンテンツ用
************************************************ */
body {
    margin-top: 65px;
}

/* header */
.global_header,
.global_header_nosticky {
    background: #fff;
    color: #333;
}
#header_wrapper {
    background: #fff;
    color: #333;
}
/* [24345] スマホ購入フローお問い合わせ
.contact_area{
display:none;
}
*/
h3 a.addEllipsis {
    height: 37px;
    display: inline-block;
    margin-bottom: 5px;
}
ul.ranking_list li, ul.recommend_list li, ul.history_list li {
    margin-bottom: 3%;
}
ul#header_nav li a:before, ul#header_nav li.icon_cart a:before {
    line-height: 28px;
    display: inline-block;
}
ul#header_nav li a:before{
    margin-top: 2px;
    margin-bottom: 6px;
}
ul#header_nav li.icon_cart a:before {
    margin-top: 3px;
    margin-left: -3px;
    margin-bottom: 4px;
}
header #header_inner_right ul#header_nav .quantity {
    top: -4px;
}
header #header_inner_right ul#header_nav li a, header #header_inner_right ul#header_nav li a:visited {
    color: #333;
}
.drawer_menu .drawer_nav_wrapper {
    margin-top: 65px!important;
}
.drawer_menu .drawer_bg {
  margin-top: 65px!important;
}
.drawer_menu .drawer_button {
    margin-top: 2px;
}
button.drawer_button.active {
    margin-top: 0;
}
.drawer_menu .drawer_button .drawer_bar {
    background-color: #333!important;
}
.drawer_menu .drawer_text {
    color: #333;
    margin-top: 6px;
}
.drawer_menu .drawer_bar.drawer_bar1 {
    margin-top: 5px!important;
}
.drawer_menu .drawer_bar {
    margin: 8px auto 3px!important;
}
.drawer_menu .drawer_close.drawer_text {
    margin-top: 5px;
    bottom: -20px!important;
}
.drawer_menu .drawer_bar {
    border-radius: 1px;
}
.drawer_menu .drawer_open {
    bottom: -21px!important;
}
header #header_wrapper #login_user_info p a, header #header_wrapper #login_user_info p a:visited {
    color: #333;
}

/* 検索窓 */
input#search {
    font-family: inherit;
    font-size: 85%;
}

/* 共通 */
h2 {
    background: transparent;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    font-feature-settings: "palt";
    letter-spacing: 2px;
}
.recommend_list_wrapper, .ranking_list_wrapper, .history_list_wrapper {
    margin-top: 15%;
}
#calender_area h2, #cart h2, #cart_area h2, #category_area h2, #login_area h2, #search_area h2 {
    font-size: 20px;
    font-weight: bold;
    background-color: transparent;
    text-align: center;
    color: #333;
    font-feature-settings: "palt";
    letter-spacing: 2px;
}
#category_area {
    margin: 15% 0;
}
#news_area h2.title_block {
    background: transparent;
    color: #333;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    font-feature-settings: "palt";
    letter-spacing: 0;
}

/* マイページ */
#mypagecolumn h2.title {
    border-bottom: none;
}
#mycontents_area.mypage-top h3 {
    margin-top: 30px;
    text-align: left;
    padding-left: 20px;
}
h3.title_mypage {
    text-align: center;
    font-size: 18px;
    background: transparent;
    color: #333;
    margin-bottom: 0;
}
#customer_info {
    margin-top: 24px;
}
.order_history_list .order_info, .estimate_history_list .estimate_info,.periodical_history_list .periodical_info {
    background: #eee;
    width: calc(100vw - 10%);
    margin-left: calc(-5% - 2px);
    display: inline-block;
    padding: 4% 5%;
}
.periodical_history_list {
    border-bottom: none;
    padding: 7% 5%;
    margin-bottom: 5%;
}
.pagenumber_area + .periodical_history_list {
    border-top: none;
}
.order_history_list .order_info > p, .estimate_history_list .estimate_info > p {
    margin-bottom: 0;
}
.order_history_list .order_detail_info .order_item, .estimate_history_list .estimate_detail_info .estimate_item {
    margin: 5% 0 0;
}
.order_history_list, .estimate_history_list {
    border-bottom: none;
    margin-bottom: 5%;
}
#mycontents_area.mypage-top h2 {
    border-bottom: none;
    font-size: 20px;
}
#mycontents_area.mypage-top #account_info .account_change_bloc h3 {
    text-align: left;
    padding-left: 20px;
}
.account_change_bloc {
    margin-bottom: 10%;
}
#account_info .account_change_bloc ul li a {
    border-bottom: dashed 1px #e9e9e9;
}
dl.form_entry dd {
    padding: 0 5% 35px;
    border-bottom: none;
}
dl.form_entry {
    border-top: none;
    border-bottom: none;
}


@supports(--css: variables) {
/* header */
header #header_inner_right ul#header_nav .quantity {
    background: var(--accent-color);
}

/* slider */
.slick-dots li.slick-active button:before {
    opacity: 1!important;
    color: var(--main-color)!important;
}
.slick-dots li button:before{
    opacity: 1!important;
    color: var(--base-back-color)!important;
}
.bx-wrapper .bx-pager.bx-default-pager a{
    background: var(--base-back-color)!important;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: var(--main-color)!important;
}

/* simplify用 cart_color */
#mypagecolumn h2 {
    border-bottom: none;
}
.fa-caret-right:before {
    color: var(--main-color);
}
div#footer_nav_user ul li a i:before {
    color: var(--main-color);
}
.order_history_list .order_info, .estimate_history_list .estimate_info, .periodical_history_list .periodical_info {
    background: var(--base-back-color);
}
h3.title_mypage {
    border-bottom: solid 1px var(--base-line-color);
}
.periodical_history_list .periodical_info > p,.order_history_list .order_info > p, .estimate_history_list .estimate_info > p {
    color: var(--base-char-color);
}
#account_info .account_change_bloc ul li a {
    border-bottom: dashed 1px var(--base-line-color);
}
} /* @supports(--css: variables) */

/* ステータスアイコン */
ul.status_icon .status_icon_span {
    display: block;
}
ul.status_icon li img {
    display: none;
}
li[class^='image_status_'] span,li[class*=' image_status_'] span,
li[class^='raku2_image_status_'] span,li[class*=' raku2_image_status_'] span {
    background-color: var(--main-color);
}
