@charset "UTF-8";

@font-face {
    font-family: "century-gothic";
    src: url('/html/user_data/assets/fonts/century-gothic-bold.ttf') format('truetype');
}

@font-face {
    font-family: "Charm";
    src: url('/html/user_data/assets/fonts/Charm-Bold.ttf') format('truetype');
}

@font-face {
    font-family: "TsunagiGothic";
    src: url('/html/user_data/assets/fonts/TsunagiGothic.ttf') format('truetype');
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
    font-family: "Noto Sans JP", sans-serif;
}

body {
    color: #000000;
    font-size: 16px;
    line-height: 1.7;
    margin: 0px;
    background-color: #fffcfe;
    padding-top: 130px;
}

.f_cent {
    font-family: "century-gothic", sans-serif;
}

.f_charm {
    font-family: "Charm", sans-serif;
}

.f_tsunagi {
    font-family: "TsunagiGothic", sans-serif;
}

.flex {
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.flex_sb {
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    justify-content: space-between;
}

.wrap {
    position: relative;
    width: 1040px;
    margin: 0 auto;
}

.top_inner {
    padding-left: 300px;
}

#header {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 100;
    pointer-events: none;
}

#header .hd_box {
    display: flex;
}

#header .hd_box .side_bar_box {
    pointer-events: visible;
    width: 300px;
    flex-shrink: 0;
    padding-top: 30px;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #fff;
    overflow: scroll;
    scrollbar-color: #e8f1f4 #ffffff;
}

#header .hd_box .side_bar_box .bar_box {
    width: 260px;
}

#header .hd_box .side_bar_box .bar_box .logo {
    width: 70%;
    display: block;
    margin: 0 auto;
}

#header .hd_box .side_bar_box .bar_box .logo img {
    width: 100%;
}

#header .hd_box .side_bar_box .bar_box .side_theme {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.6;
}

#header .hd_box .side_bar_box .bar_box .side_theme .big {
    font-size: 16px;
}

#header .hd_box .side_bar_box .bar_box .search_sec_box {
    margin-top: 25px;
}

#header .hd_box .hd_menu_box {
    width: 100%;
    pointer-events: visible;
    height: 130px;
}

#header .hd_box .hd_menu_box .menu_top {
    background-color: #f8f8f8;
    padding: 10px 0;
}

#header .hd_box .hd_menu_box .menu_top .inner_box {
    display: flex;
    align-items: flex-end;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .tel_box .comment {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .tel_box .tel_sec {
    display: flex;
    gap: 0 5px;
    margin-top: 5px;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .tel_box .tel_sec .tel {
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 1;
    display: block;
    color: #000000;
    font-weight: 600;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .tel_box .tel_sec .tel .num {
    font-size: 26px;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .link_btn_box {
    margin-left: 18px;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .link_btn_box ul {
    display: flex;
    align-items: center;
    gap: 0 8px;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .link_btn_box ul li a {
    line-height: 26px;
    border-radius: 17px;
    background-color: #e9f1f5;
    display: block;
    padding: 0 14px;
    transition: 0.3s;
    color: #525252;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .link_btn_box ul li a:hover {
    color: #fff;
    background-color: #e6468a;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box {
    margin-left: auto;
    margin-right: 60px;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul {
    display: flex;
    gap: 0 10px;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul li {
    width: 50px;
    aspect-ratio: 1;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul li .btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul li .btn:hover {
    opacity: 0.7;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul li .btn.line {
    background-color: #00b900;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul li .btn.line svg {
    width: 70%;
    display: block;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul li .btn.contact {
    background-color: #fafa4d;
}

#header .hd_box .hd_menu_box .menu_top .inner_box .contact_sec_box ul li .btn.contact svg {
    width: 50%;
    display: block;
}

#header .hd_box .hd_menu_box .menu_bottom {
    padding: 10px 0;
    background-color: #ffffaf;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box {
    display: flex;
    align-items: flex-end;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .possible_box {
    display: flex;
    align-items: flex-end;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .possible_box .icon {
    width: 40px;
    margin-right: 6px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .possible_box .icon svg {
    width: 100%;
    display: block;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .possible_box .name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .possible_box .name .num {
    color: #af0202;
    font-size: 45px;
    margin: 0 3px;
    position: relative;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .possible_box .name .num::after {
    content: "";
    position: absolute;
    background-image: url(/html/user_data/assets/img/common/icon_santen_red.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 18px;
    top: 2px;
    left: -12px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .ex_comment {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-left: 10px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box {
    margin-left: auto;
    display: flex;
    align-items: center;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box::before {
    content: "";
    width: 1px;
    background-color: #b9b9b9;
    height: 20px;
    margin-right: 28px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul {
    display: grid;
    grid-template-columns: repeat(2, 190px);
    gap: 0 18px;
    margin-bottom: 3px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn {
    display: flex;
    align-items: center;
    padding-left: 20px;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn.cart:hover .name,
#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn.cart.active .name {
    opacity: 0;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn:hover .name.name_hover {
    opacity: 1;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn:hover .name_hover_color,
#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn.active .name_hover_color {
    opacity: 1;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn.cart.active .icon svg path,
#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn.cart:hover .icon svg path {
    fill: #eb8bb4;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .icon {
    width: 20px;
    margin-right: 10px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .icon svg {
    width: 100%;
    display: block;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .icon svg path {
    transition: 0.3s;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .name {
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
    letter-spacing: 0.04em;
    line-height: 42px;
    color: #000;
    margin-bottom: 0;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .name.name_hover {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 49px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .name_hover_color {
    position: absolute;
    opacity: 0;
    top: 5px;
    left: 51px;
    transition: 0.3s;
    align-items: center;
    display: flex;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .name_hover_color .num {
    background-color: #af0202;
    color: #fff;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 6px;
}

#header .hd_box .hd_menu_box .menu_bottom .inner_box .log_sec_box ul li .btn .name_hover_color .cost {
    font-size: 18px;
    color: #af0202;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.pc_hamburger_box .pc_hamburger {
    position: fixed;
    top: 11px;
    right: calc(50vw - 670px);
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 999;
    background-color: #eb8bb4;
    transition: 0.3s;
    cursor: pointer;
}

.pc_hamburger_box .pc_hamburger span {
    width: 20px;
    height: 2px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 15px;
    transition: 0.3s;
}

.pc_hamburger_box .pc_hamburger span:nth-child(1) {
    top: 16px;
}

.pc_hamburger_box .pc_hamburger span:nth-child(2) {
    top: 24px;
}

.pc_hamburger_box .pc_hamburger span:nth-child(3) {
    top: 32px;
}

.pc_hamburger_box .pc_hamburger.active span:nth-child(1) {
    top: 24px;
    rotate: 45deg;
}

.pc_hamburger_box .pc_hamburger.active span:nth-child(2) {
    opacity: 0;
}

.pc_hamburger_box .pc_hamburger.active span:nth-child(3) {
    top: 24px;
    rotate: -45deg;
}

.pc_hamburger_box .ham_menu_box {
    position: fixed;
    transition: 0.3s;
    top: 0;
    z-index: -1;
    left: 0;
    color: #fff;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    height: 100vh;
    overflow: scroll;
}

.pc_hamburger_box .ham_menu_box.active {
    opacity: 1;
    z-index: 998;
}

.pc_hamburger_box .ham_menu_box .ham_inner {
    display: flex;
}

.pc_hamburger_box .ham_menu_box .ham_inner .ham_back_img {
    width: 200px;
    height: 100vh;
    flex-shrink: 0;
    position: relative;
}

.pc_hamburger_box .ham_menu_box .ham_inner .ham_back_img::after {
    content: "";
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    inset: 0;
}

.pc_hamburger_box .ham_menu_box .ham_inner .ham_back_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box {
    width: 100%;
    background-color: #fafdff;
    padding: 150px 0 0;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner {
    width: 950px;
    margin: 0 auto;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_ttl {
    color: #e39dbb;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box {
    position: relative;
    z-index: 1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box::after {
    content: "";
    position: absolute;
    width: 1px;
    background-color: #dbdbdb;
    height: 440px;
    right: 9px;
    top: 0;
    z-index: -1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box {
    margin-top: 50px;
    height: 440px;
    overflow-y: scroll;
    display: grid;
    padding-right: 50px;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 45px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box::-webkit-scrollbar {
    width: 20px;
    border-radius: 10px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box::-webkit-scrollbar-thumb {
    background-color: #bbd5e2;
    border-radius: 10px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .box+.box {
    margin-top: 30px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .box .theme {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #000;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .box ul {
    margin-top: 18px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .box ul li {
    line-height: 1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .box ul li+li {
    margin-top: 10px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .box ul li a {
    color: #6e6e6e;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 14px;
    transition: 0.3s;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .box ul li a:hover {
    color: #e6468a;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .link_list ul li {
    line-height: 1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .link_list ul li+li {
    margin-top: 24px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .link_list ul li a {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
    letter-spacing: 0.04em;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .link_list ul li a:hover {
    color: #e6468a;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box {
    margin-top: 37px;
    display: grid;
    grid-template-columns: 190px;
    gap: 10px 0;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn {
    display: flex;
    align-items: center;
    padding-left: 20px;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn.cart:hover .name,
.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn.cart.active .name {
    opacity: 0;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn:hover .name.name_hover {
    opacity: 1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn:hover .name_hover_color,
.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn.active .name_hover_color {
    opacity: 1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn.cart.active .icon svg path,
.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn.cart:hover .icon svg path {
    fill: #eb8bb4;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .icon {
    width: 20px;
    margin-right: 10px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .icon svg {
    width: 100%;
    display: block;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .icon svg path {
    transition: 0.3s;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .name {
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
    letter-spacing: 0.04em;
    line-height: 42px;
    color: #000;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .name.name_hover {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 49px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .name_hover_color {
    position: absolute;
    opacity: 0;
    top: 5px;
    left: 51px;
    transition: 0.3s;
    align-items: center;
    display: flex;
    margin-bottom: 0;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .name_hover_color .num {
    background-color: #af0202;
    color: #fff;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 6px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .log_btn_box .btn_sec .btn .name_hover_color .cost {
    font-size: 18px;
    color: #af0202;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .tel_sec_box {
    margin-top: 24px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .tel_sec_box .tel_sec {
    line-height: 1;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .tel_sec_box .tel_sec .tel {
    font-size: 18px;
    color: #000000;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .tel_sec_box .tel_sec .tel .num {
    font-size: 22px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .tel_sec_box .tel_sec+.tel_sec {
    margin-top: 5px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box {
    margin-top: 18px;
    display: flex;
    gap: 0 10px;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon:hover {
    opacity: 0.7;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon.line {
    background-color: #00b900;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon.line svg {
    width: 68%;
    display: block;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon.contact {
    background-color: #fafa4d;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon.contact svg {
    width: 52%;
    display: block;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon.insta {
    background-color: #ffffed;
}

.pc_hamburger_box .ham_menu_box .ham_inner .menu_box .ham_menu_inner .ham_list_box .ham_scroll_box .list_box .contact_icon_box .icon.insta img {
    width: 55%;
}

.common_search_box .search_name_box {
    display: flex;
    gap: 0 10.5px;
    align-items: center;
}

.common_search_box .search_name_box .icon {
    width: 18px;
}

.common_search_box .search_name_box .icon svg {
    width: 100%;
    display: block;
}

.common_search_box .search_name_box .name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
}

.common_search_box .category_box+.category_box {
    margin-top: 18px;
}

.common_search_box .category_box .select_box {
    margin-top: 8px;
    position: relative;
}

.common_search_box .category_box .select_box::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-left: 1px solid #07913a;
    border-bottom: 1px solid #07913a;
    rotate: -45deg;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.common_search_box .category_box .select_box select {
    width: 100%;
    display: block;
    background-color: #fafafa;
    height: 40px;
    border: 1px solid #e3e3e3;
    padding: 0 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 4px;
    font-size: 14px;
}

.common_search_box .select_btn {
    width: 160px;
    margin: 18px auto 0;
}

.common_search_box .select_btn input {
    text-align: center;
    display: block;
    height: 40px;
    width: 100%;
    border-radius: 20px;
    background-color: #e9f1f5;
    border: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.common_search_box .free_search_box {
    margin-top: 50px;
}

.common_search_box .free_search_box .form_box {
    margin-top: 8px;
}

.common_search_box .free_search_box .form_box form {
    position: relative;
}

.common_search_box .free_search_box .form_box form .free {
    width: 100%;
    border-radius: 20px;
    border: 1px solid #e3e3e3;
    background-color: #fafafa;
    display: block;
    height: 40px;
    padding-left: 20px;
    font-size: 12px;
    font-weight: 500;
}

.common_search_box .free_search_box .form_box form .free::placeholder {
    color: #c1c1c1;
}

.common_search_box .free_search_box .form_box form .btn_icon {
    background-image: url(/html/user_data/assets/img/common/renewalicon_musi.svg);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    aspect-ratio: 1;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 0;
    right: 6px;
}

.common_search_box .free_search_box .map_ban {
    display: block;
    margin-top: 20px;
    transition: .3s;
}

.common_search_box .free_search_box .map_ban:hover {
    opacity: .8;
}

.common_search_box .free_search_box .map_ban img {
    width: 100%;
}

.common_search_box .free_search_box .attention_btn {
    margin-top: 16px;
}

.common_search_box .free_search_box .attention_btn .link {
    display: flex;
    gap: 0 .8em;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #d80404;
    border: 2px solid #d80404;
    font-size: 12px;
    border-radius: 100vmax;
    padding: 1em;
    transition: .3s;
}

.common_search_box .free_search_box .attention_btn .link:hover {
    background-color: #d80404;
    color: #fff;
}

.common_search_box .free_search_box .attention_btn .link .icon {
    width: 15px;
}

.common_search_box .free_search_box .attention_btn .link .icon svg {
    width: 100%;
    display: block;
}

.common_search_box .free_search_box .attention_btn .link .name {
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    font-size: 1em;
    margin-bottom: 0;
}

#top_main {
    background-image: url(/html/user_data/assets/img/common/top_main_img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 95px 0 145px;
    position: relative;
    z-index: 1;
}

#top_news .news_area {
    position: relative;
    background: rgba(255, 255, 255, 1);
    width: 78%;
    padding: 20px;
    border: 2px solid;
    border-radius: 5px;
}

#top_news .news_area .news_title {
    font-size: 18px;
    margin-bottom: .3em;
}

#top_news .news_area .news_title span {
    color: #e6468a;
    margin-right: .5em;

}

#top_news .news_area ul li:not(:first-child) {
    display: none;
}

#top_news .news_area ul li a {
    display: flex;
    color: #8f8f8f;
}

#top_news .news_area ul li a .day {
    width: 15%;
}

#top_news .news_area ul li a .theme {
    width: 85%;
    padding-left: 1em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#top_main::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

#top_main .main_box {
    position: relative;
}

#top_main .main_box .catch_text .come {
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

#top_main .main_box .catch_text .en_come {
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    line-height: 1;
    margin-top: 8px;
}

#top_main .main_box .catch_text .en_come .mark {
    position: relative;
    color: #77da94;
}

#top_main .main_box .catch_text .en_come .mark .ab_mark {
    position: absolute;
    width: 162px;
    bottom: -13px;
    left: 0px;
}

#top_main .main_box .catch_text .en_come .mark .ab_mark path {
    fill: #f7ccff;
}

#top_main .main_box .num_box {
    margin-top: 35px;
}

#top_main .main_box .num_box ul {
    display: grid;
    grid-template-columns: repeat(4, 190px);
    gap: 0 10px;
}

#top_main .main_box .num_box ul li {
    background-color: #fff;
    text-align: center;
    height: 80px;
    padding-top: 12px;
}

#top_main .main_box .num_box ul li .theme {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

#top_main .main_box .num_box ul li .box {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

#top_main .main_box .num_box ul li .box .tate {
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    transform: translateY(3px);
}

#top_main .main_box .num_box ul li .box .num {
    font-size: 42px;
    font-weight: 600;
    color: #af0202;
    margin: 0 6px;
}

#top_main .main_box .main_ttl_box {
    margin-top: 20px;
}

#top_main .main_box .main_ttl_box .ttl {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.7;
}

#top_main .main_box .contact_box {
    margin-top: 36px;
}

#top_main .main_box .contact_box ul {
    display: flex;
    gap: 0 14px;
}

#top_main .main_box .contact_box ul li {
    width: 310px;
    position: relative;
    z-index: 1;
}

#top_main .main_box .contact_box ul li .link {
    border-radius: 35px;
    display: flex;
    gap: 0 10px;
    padding-left: 30px;
    align-items: center;
    transition: 0.3s;
}

#top_main .main_box .contact_box ul li .link:hover {
    transform: translateY(4px);
}

#top_main .main_box .contact_box ul li .link:hover.line {
    box-shadow: unset;
}

#top_main .main_box .contact_box ul li .link:hover.contact {
    box-shadow: unset;
}

#top_main .main_box .contact_box ul li .link .icon svg {
    width: 100%;
    display: block;
}

#top_main .main_box .contact_box ul li .link .name {
    line-height: 70px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

#top_main .main_box .contact_box ul li .link.line {
    background-color: #00b900;
    box-shadow: 0 4px 0px #007400;
}

#top_main .main_box .contact_box ul li .link.line .icon {
    width: 38px;
}

#top_main .main_box .contact_box ul li .link.line .name {
    color: #fff;
}

#top_main .main_box .contact_box ul li .link.contact {
    background-color: #fafa4d;
    box-shadow: 0 4px 0px #cbcb2d;
}

#top_main .main_box .contact_box ul li .link.contact .name {
    color: #000;
}

#top_main .main_box .contact_box ul li .link.contact .icon {
    width: 30px;
}

#top_main .main_box .ab_img {
    width: 167px;
    position: absolute;
    right: 0;
    bottom: -63px;
}

#top_main .main_box .ab_img img {
    width: 100%;
}

#top_news {
    margin-top: -55px;
    position: relative;
    z-index: 2;
}

#top_news .nenmatsu_image {
    max-width: 800px;
    margin: 0 auto 50px auto;
}

#top_news .common_ttl_box .ttl_comment {
    color: #6e6e6e;
}

#top_news .news_box {
    margin-top: -23px;
}

#top_news .news_box .more_view {
    text-align: end;
}

#top_news .news_box .more_view .more {
    color: #000;
    transition: 0.3s;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
}

#top_news .news_box .more_view .more:hover {
    color: #07913a;
}

#top_news .news_box .list {
    margin-top: 30px;
}

#top_news .news_box .list ul li+li {
    margin-top: 14px;
}

#top_news .news_box .list ul li .link {
    display: flex;
    padding: 14px 40px;
    background-color: #ffffed;
    border-radius: 35px;
    gap: 0 40px;
    align-items: center;
}

#top_news .news_box .list ul li .link::after {
    content: "";
    width: 7px;
    aspect-ratio: 1;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    rotate: 45deg;
    margin-left: auto;
    transition: 0.3s;
}

#top_news .news_box .list ul li .link:hover::after {
    border-top: 1px solid #07913a;
    border-right: 1px solid #07913a;
}

#top_news .news_box .list ul li .link:hover .day {
    color: #07913a;
}

#top_news .news_box .list ul li .link:hover .theme {
    color: #07913a;
}

#top_news .news_box .list ul li .link .day {
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: 0.3s;
}

#top_news .news_box .list ul li .link .theme {
    font-size: 14px;
    transition: 0.3s;
    letter-spacing: 0.04em;
    line-height: 1;
    display: -webkit-box;
    color: #000000;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.common_ttl_box .en_ttl {
    font-size: 20px;
    font-weight: 600;
    color: #e6468a;
    letter-spacing: 0.06em;
    line-height: 1;
}

.common_ttl_box .ttl {
    font-size: 24px;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-top: 14px;
}

.common_ttl_box .ttl_comment {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 20px;
}

#top_banner_slider {
    margin-top: 90px;
}

#top_banner_slider .slider_box+.slider_box {
    margin-top: 10px;
}

#top_banner_slider .slider_box ul {
    display: flex;
    gap: 0 10px;
}

#top_banner_slider .slider_box ul li.square {
    width: 410px;
}

#top_banner_slider .slider_box ul li.square .box_top {
    display: flex;
    gap: 0 10px;
    margin-bottom: 0;
}

#top_banner_slider .slider_box ul li.square .box_top.mt {
    margin-top: 10px;
}

#top_banner_slider .slider_box ul li.square .box_top .box {
    width: 200px;
}

#top_banner_slider .slider_box ul li.square .box_bottom {
    margin-top: 10px;
}

#top_banner_slider .slider_box ul li.square .box_bottom.mtn {
    margin-top: 0;
}

#top_banner_slider .slider_box ul li.rectangle {
    width: 200px;
}

#top_banner_slider .slider_box ul li a {
    display: block;
    border-radius: 6px;
    overflow: hidden;
}

#top_banner_slider .slider_box ul li a img {
    width: 100%;
}

.banner_memorial {
    text-align: center;
    margin-top: 10px;
}

.banner_memorial img {
    width: 60%;
    border-radius: 5px;
}

#top_banner_slider .banner_list_box {
    margin-top: 10px;
}

#top_banner_slider .banner_list_box ul {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 0 10px;
}


#top_banner_slider .banner_list_box ul li {
    position: relative;
}

#top_banner_slider .banner_list_box ul li a {
    display: block;
}

#top_banner_slider .banner_list_box ul li .button_wrap {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 100%;
    padding: 0 30px;
    justify-content: center;
}

#top_banner_slider .banner_list_box ul li a.category_link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}

#top_banner_slider .banner_list_box ul li a.category_link:hover {
    background: rgba(255, 255, 255, 0.1);
}

#top_banner_slider .banner_list_box ul li .button_wrap a.button {
    color: #fff;
    font-size: 15px;
    border: 2px solid #fff;
    padding: .2em 1em;
    border-radius: 30px;
    transition: .3s;
    position: relative;
    z-index: 2;
}

#top_banner_slider .banner_list_box ul li .button_wrap a.button:hover {
    background: #fff;
    color: #333;
}

#top_banner_slider .banner_list_box ul li a img {
    width: 100%;
}

#top_category {
    margin-top: 140px;
    padding-bottom: 77px;
    position: relative;
}

#page_product_detail #top_category {
    margin-top: 50px;
}

#top_category::after {
    content: "";
    position: absolute;
    bottom: 0;
    top: 46px;
    background-color: #ffffe7;
    z-index: -1;
    width: 100%;
    left: 0;
}

#top_category .common_ttl_box {
    text-align: center;
}

#top_category .category_box .tab_box_sec .tab_box {
    display: none;
}

#top_category .category_box .tab_box_sec .tab_box.show {
    display: block;
}

#top_category .category_box {
    margin-top: 24px;
}

#top_category .category_box .tab_btn {
    display: flex;
    gap: 14px;
    margin: 0 0 16px;
}

#top_category .category_box .tab_btn .cont {
    padding: 7px 15px;
    background-color: #fff;
    transition: .3s;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: 1px solid #e6468a;
    border-radius: 50px;
    font-size: 15px;
}

#top_category .category_box .tab_btn .cont.show {
    background-color: #e6468a;
    color: #fff;
}

#top_category .category_box .tab_btn .cont:hover {
    background-color: #e6468a;
    color: #fff;
}

#top_category .category_box ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

#top_category .category_box ul li {
    height: 250px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

#top_category .category_box ul li .link {
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
    padding: 130px 16px 0;
    height: 100%;
}

#top_category .category_box ul li .link:hover::before {
    opacity: 1;
}

#top_category .category_box ul li .link:hover::after {
    background-color: #fff;
}

#top_category .category_box ul li .link::before,
#top_category .category_box ul li .link::after {
    content: "";
    position: absolute;
}

#top_category .category_box ul li .link::before {
    bottom: 1px;
    right: 14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #07913a;
    rotate: -135deg;
    opacity: 0;
    transition: 0.3s;
}

#top_category .category_box ul li .link::after {
    width: 50px;
    aspect-ratio: 1;
    background-color: #07913a;
    bottom: -25px;
    right: -25px;
    rotate: 45deg;
    transition: 0.3s;
}

#top_category .category_box ul li .link .mask::after {
    content: "";
    position: absolute;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    inset: 0;
    z-index: -1;
}

#top_category .category_box ul li .link .text_box {
    text-align: center;
}

#top_category .category_box ul li .link .text_box .comment {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.5;
    color: #fff;
}

#top_category .category_box ul li .link .text_box .theme {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #fff;
}

#top_rank {
    margin-top: 100px;
    overflow: hidden;
}

#top_rank .tab_sec_box {
    margin-top: 30px;
}

#top_rank .tab_sec_box .tab_box ul {
    display: flex;
    gap: 0 10px;
    padding: 3px 0;
}

#top_rank .tab_sec_box .tab_box ul li {
    padding: 7px 23px;
    border: 1px solid #e3e3e3;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: 0.3s;
}

#top_rank .tab_sec_box .tab_box ul li:hover {
    background-color: #07913a;
    color: #fff;
}

#top_rank .tab_sec_box .tab_box ul li.show {
    background-color: #07913a;
    color: #fff;
}

#top_rank .tab_sec_box .tab_contents_box {
    margin-top: 25px;
    padding-left: calc(50vw - 670px);
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents {
    display: none;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents.show {
    display: block;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul {
    display: block;
    flex-wrap: nowrap;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul .slick-list {
    padding: 0 30% 0 0 !important;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul .slick-list .slick-track {
    padding: 5px 0;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li {
    flex-shrink: 0;
    margin: 0 10px;
    height: 190px;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link {
    height: 100%;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    display: flex;
    overflow: hidden;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .img {
    width: 170px;
    height: 190px;
    flex-shrink: 0;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box {
    padding: 28px 20px;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .rank_box {
    display: flex;
    align-items: flex-end;
    gap: 0 10px;
    line-height: 1;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .rank_box .icon {
    width: 33px;
    height: 33px;
    background-size: contain !important;
    background-position: bottom center !important;
    background: url('/html/user_data/assets/img/common/crown_gold.svg') no-repeat;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_1 .link .text_box .rank_box .icon {
    background: url('/html/user_data/assets/img/common/crown_gold.svg') no-repeat;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_2 .link .text_box .rank_box .icon {
    background: url('/html/user_data/assets/img/common/crown_silver.svg') no-repeat;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_3 .link .text_box .rank_box .icon {
    background: url('/html/user_data/assets/img/common/crown_copper.svg') no-repeat;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_4 .link .text_box .rank_box .icon,
#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_5 .link .text_box .rank_box .icon {
    background: url('/html/user_data/assets/img/common/crown_pink.svg') no-repeat;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .rank_box .icon svg {
    width: 100%;
    display: block;
    display: none;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .rank_box .rank {
    font-size: 18px;
    color: #000000;
    font-weight: 600;
    letter-spacing: 0.04em;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .rank_box .rank .num {
    font-size: 32px;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .theme {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: #000000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .cost {
    font-size: 12px;
    letter-spacing: 0.03em;
    line-height: 1;
    font-weight: 600;
    color: #000;
    margin-top: 18px;
}

#top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .cost span {
    font-size: 24px;
    color: #07913a;
    margin-right: 5px;
}

#top_rank .banner_box {
    margin-top: 38px;
}

#top_rank .banner_box ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 14px;
}

#top_insta {
    margin-top: 130px;
}

#top_insta .ttl_box {
    display: flex;
    gap: 0 40px;
}

#top_insta .ttl_box .icon {
    width: 80px;
}

#top_insta .ttl_box .icon img {
    width: 100%;
}

#top_insta .ttl_box .ttl {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

#top_insta .ttl_box .ttl .color {
    color: #e6468a;
}

#top_insta .ttl_comment {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin-top: 44px;
}

#top_insta .list_box {
    margin-top: 20px;
}

#top_insta .list_box ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 13px;
}

#top_insta .list_box ul li {
    height: 160px;
}

#top_insta .list_box ul li .link {
    position: relative;
    height: 100%;
    display: block;
}

#top_insta .list_box ul li .link:hover .img .ab_theme {
    color: #fff;
    background-color: #e6468a;
}

#top_insta .list_box ul li .link:hover .img .ab_account {
    color: #fff;
    background-color: #e6468a;
}

#top_insta .list_box ul li .link:hover .img::after {
    background-color: #e6468a;
}

#top_insta .list_box ul li .link .img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

#top_insta .list_box ul li .link .img::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: 0.3s;
    background-color: #fff;
    opacity: 0.7;
    mix-blend-mode: soft-light;
}

#top_insta .list_box ul li .link .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#top_insta .list_box ul li .link .img .ab_theme {
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #000;
    background-color: #fff;
    line-height: 30px;
    top: 0;
    left: 0;
    transition: 0.3s;
    padding: 0 10px;
}

#top_insta .list_box ul li .link .img .ab_account {
    position: absolute;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #000;
    background-color: #fff;
    line-height: 30px;
    bottom: 0;
    padding: 0 10px;
    right: 0;
    transition: 0.3s;
}

#top_service_slider {
    margin-top: 85px;
    padding: 60px 0;
    background-color: #fafff2;
    overflow: hidden;
}

#top_service_slider .slider_box .box ul li {
    margin: 0 10px;
    flex-shrink: 0;
}

#top_service_slider .slider_box .box ul li .link {
    display: block;
    border-radius: 10px;
}

#top_service_slider .slider_box .box ul li .link img {
    width: 100%;
}

#top_service_slider .slider_box .thumbnail_box {
    margin-top: 26px;
}

#top_service_slider .slider_box .thumbnail_box .slick-track {
    transform: unset !important;
}

#top_service_slider .slider_box .thumbnail_box ul {
    display: flex;
}

#top_service_slider .slider_box .thumbnail_box ul li {
    border-radius: 4px;
    height: 100px;
    overflow: hidden;
    width: 163px;
    margin: 0 6.5px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

#top_service_slider .slider_box .thumbnail_box ul li:hover::after {
    opacity: 0;
}

#top_service_slider .slider_box .thumbnail_box ul li.slick-current::after {
    opacity: 0;
}

#top_service_slider .slider_box .thumbnail_box ul li::after {
    content: "";
    transition: 0.3s;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

#top_service_slider .slider_box .thumbnail_box ul li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#top_shops_list {
    margin: 110px 0 117px;
}

#top_shops_list .common_ttl_box {
    text-align: center;
}

#top_shops_list .common_ttl_box .ttl_comment {
    color: #000000;
}

#top_shops_list .list_box {
    margin-top: 20px;
}

#top_shops_list .list_box ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

#top_shops_list .list_box ul+ul {
    margin-top: 14px;
}

#top_shops_list .list_box ul li {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 1;
}

#top_shops_list .list_box ul li:hover::before {
    opacity: 1;
}

#top_shops_list .list_box ul li:hover::after {
    background-color: #def4e6;
}

#top_shops_list .list_box ul li::before,
#top_shops_list .list_box ul li::after {
    content: "";
    position: absolute;
    z-index: 2;
}

#top_shops_list .list_box ul li::before {
    bottom: 1px;
    right: 14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #07913a;
    rotate: -135deg;
    opacity: 0;
    transition: 0.3s;
}

#top_shops_list .list_box ul li::after {
    width: 50px;
    aspect-ratio: 1;
    background-color: #07913a;
    bottom: -25px;
    right: -25px;
    rotate: 45deg;
    transition: 0.3s;
}

#top_shops_list .list_box ul li .img {
    width: 100%;
    height: 170px;
}

#top_shops_list .list_box ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#top_shops_list .list_box ul li .text_box {
    padding: 16px 13px 25px;
    background-color: #fff;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

#top_shops_list .list_box ul li .text_box .name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #07913a;
    line-height: 1.5;
}

#top_shops_list .list_box ul li .text_box .info {
    margin-top: 11px;
    font-size: 13px;
    font-weight: 500;
    color: #6e6e6e;
    line-height: 1.4;
}

#top_shops_list .list_box ul li .text_box .tel_sec {
    margin-top: 12px;
}

#top_shops_list .list_box ul li .text_box .tel_sec a {
    font-size: 13px;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #000000;
    pointer-events: visible;
    line-height: 1.5;
}

#top_shops_list .list_box ul li .text_box .time {
    margin-top: 8px;
    font-size: 12px;
    color: #6e6e6e;
    letter-spacing: 0.04em;
    line-height: 1;
}

#top_shops_list .list_box ul li .text_box .insta {
    width: 24px;
    display: block;
    margin-top: 12px;
    position: relative;
    z-index: 2;
    pointer-events: visible;
}

#top_shops_list .list_box ul li .text_box .insta img {
    width: 100%;
}

#top_shops_list .list_box ul li .ab_link {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#footer {
    padding-left: 300px;
}

#footer .ft_top {
    background-color: #fff8fb;
    padding: 55px 0 30px;
}

#pay_banner_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

#footer .ft_top .info_box {
    margin-top: 30px;
    padding: 50px 40px;
    background-color: #fff;
    border-radius: 6px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 18px;
}

#footer .ft_top .info_box .box .theme_box+.theme_box {
    margin-top: 25px;
}

#footer .ft_top .info_box .box .theme_box .box_theme {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: #07913a;
    line-height: 40px;
    text-align: center;
}

#footer .ft_top .info_box .box .theme_box .cont_box {
    margin-top: 25px;
}

#footer .ft_top .info_box .box .theme_box .cont_box .map_image {
    margin-bottom: 20px;
}

#footer .ft_top .info_box .box .theme_box .cont_box .cont {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

#footer .ft_top .info_box .box .theme_box .cont_box .cont.small {
    margin-top: 10px;
}

#footer .ft_top .info_box .box .theme_box .cont_box .cont+.cont {
    margin-top: 25px;
}

#footer .ft_top .info_box .box .theme_box .cont_box .card_list {
    margin-bottom: 13px;
    width: 100%;
}

#footer .ft_top .info_box .box .theme_box .cont_box .card_list img {
    width: 100%;
}

#footer .ft_top .info_box .box .theme_box .cont_box .money_box {
    width: 100%;
    margin: 15px 0 13px;

}

#footer .ft_top .info_box .box .theme_box .cont_box .money_box img {
    width: 100%;
}

#footer .ft_top .ft_menu_box {
    margin-top: 30px;
}

#footer .ft_top .ft_menu_box ul {
    display: flex;
    gap: 0 30px;
    align-items: center;
    justify-content: center;
}

#footer .ft_top .ft_menu_box ul li {
    line-height: 1;
}

#footer .ft_top .ft_menu_box ul li a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    columns: #000000;
    color: #000000;
    position: relative;
    transition: 0.3s;
}

#footer .ft_top .ft_menu_box ul li a:hover {
    color: #07913a;
}

#footer .ft_top .ft_menu_box ul li a::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #fff;
    top: 1px;
    left: -23px;
}

#footer .ft_cr {
    background-color: #000000;
    text-align: center;
    padding: 20px 0;
}

#footer .ft_cr .cr {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.bcrumbs_1 {
    margin-bottom: 50px;
    font-size: 12px;
}

.bcrumbs_1 a {
    color: initial;
}

body.LC_Page_Index #main-contents {
    width: auto;
    margin: auto;
    position: initial;
    padding-top: 0;
}

.view_timer {
    display: none;
}

.view_timer.active {
    display: block;
}

/* 採用情報リニューアル */

#recruit2023 .wrap {
    width: 90%;
    margin: 0 auto;
}

.recruit2023_main {
    padding: 40px 0;
    background-image: url(/html/user_data/assets/img/common/recruit2023_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
}

.recruit2023_h2Box {
    margin: 0 0 15px;
}

.recruit2023_h2Box .eng {
    font-size: 16px;
    color: #07913a;
    font-family: serif;
    margin: 0 0 5px;
}

.recruit2023_h2Box .eng::before {
    display: inline-block;
    content: "";
    width: 20px;
    height: 1px;
    background-color: #07913a;
    margin-right: 10px;
    vertical-align: 20%;
}

.recruit2023_h2Box .ja {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.recruit2023_main .text {
    font-size: 14px;
    line-height: 2;
}

.recruit2023_activity {
    padding: 60px 0;
}

.recruit2023_activity .block {
    padding-left: 5%;
    align-items: center;
}

.recruit2023_activity .image {
    width: 400px;
}

.recruit2023_activity .textBox {
    width: 550px;
}

.recruit2023_activity .textBox .text {
    font-size: 14px;
    line-height: 2;
    margin: 0 0 15px;
}

.recruit2023_activity .textBox .link {
    display: block;
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 290px;
    line-height: 41px;
    border-radius: 6px;
    background-color: #07913a;
    border: 2px solid #07913a;
    transition: .3s;
}

.recruit2023_activity .textBox .link:hover {
    color: #07913a;
    background-color: #fff;
}

.recruit2023_interview {
    padding: 70px 0 0;
    background-image: url(/html/user_data/assets/img/common/recruit2023_interview_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.recruit2023_interview .recruit2023_h2Box {
    text-align: center;
}

.recruit2023_interview .block {
    margin: 0 0 120px;
}

.recruit2023_interview .interview_contents {
    width: 47%;
    position: relative;
}

.recruit2023_interview .interview_contents .textBox {
    padding: 40px 20px 20px;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    bottom: 15px;
    left: 0;
}

.recruit2023_interview .interview_contents .textBox .voice {
    width: 180px;
    position: absolute;
    top: -50px;
}

.recruit2023_interview .interview_contents .textBox .text {
    font-size: 15px;
    line-height: 1.7;
}

.interview_sliderBox {
    display: flex;
    overflow: hidden;
}

.interview_slider {
    display: flex;
    animation: infinity-scroll-left 45s infinite linear 0.5s both;
}

.interview_slider li {
    width: calc(100vw / 5);
}

.gallery_sliderBox {
    display: flex;
    overflow: hidden;
}

.gallery_slider {
    display: flex;
    animation: infinity-scroll-left 45s infinite linear 0.5s both;
}

.gallery_slider li {
    width: calc(100vw / 5);
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* 阪口ここから */
section.gallery-sec .recruit2023_h2Box {
    text-align: center;
}

section.gallery-sec {
    margin-top: 100px;
    overflow: hidden;
}


section.recruit_box .recruit2023_h2Box {
    text-align: center;
}

.recruit-co-box {
    width: 850px;
    margin: 0 auto;
    padding: 35px 40px;
}

.recruit_container_box .title_bx {
    width: 30%;
}

.recruit_container_box .text-box {
    width: 70%;
}

.recruit-co-box .ja {
    border-bottom: 5px double #bfbfbf;
    padding: 10px;
    margin-bottom: 35px;
}

.recruit_container_box {
    margin-bottom: 40px;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 5px;
    align-items: center;
}

.recruit-co-box {
    width: 850px;
    margin: 0 auto;
    padding: 35px 50px;
    box-shadow: 0 0 4px 1px #cfcfcf;
    background-image: url(/html/user_data/assets/img/common/recruit-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.recruit2023_h2Box.seisya {
    margin-top: 100px;
}

.recruit-Brn {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    background: #2f9a18;
    padding: 15px 0;
    border-radius: 5px;
    margin-top: 60px;
    margin-bottom: 30px;
}

.recruit-Brn a {
    color: #fff;
    font-weight: bold;
}

section.recruit_box {
    position: relative;
    z-index: 1;
    margin-top: -50px;
}

.hana-img-item {
    position: absolute;
    width: 150px;
    bottom: 0;
    left: 0;
}

.hana-img-item02 {
    position: absolute;
    width: 150px;
    bottom: 0;
    right: 0;
}

/* PC キャッチセクション */
.recommend_common_ttl .en {
    font-size: 21px;
    color: #de90b3;
    font-weight: 700;
}

.recommend_common_ttl .jp {
    font-size: 25px;
    letter-spacing: .05em;
}

#page_recommend .catch_sec .inner {
    display: flex;
    gap: 0 25px;
}

#page_recommend .catch_sec .inner .img {
    flex-shrink: 0;
    width: 261px;
    position: relative;
}

#page_recommend .catch_sec .inner .img img {
    border-radius: 9px;
}

#page_recommend .catch_sec .inner .img::before {
    content: "";
    background-color: rgba(255, 255, 255, .15);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#page_recommend .catch_sec .inner .inbox {
    width: 100%;
}

#page_recommend .catch_sec .inner .inbox .text_box {
    margin-top: 20px;
}

#page_recommend .catch_sec .inner .inbox .text_box .text+.text {
    margin-top: 22px;
}

#page_recommend .catch_sec .inner .inbox .text_box .text {
    line-height: 1.5;
    letter-spacing: .06em;
}

#page_recommend .catch_sec {
    padding-bottom: 45px;
}

/* PC Flower Selectionセクション */
#page_recommend .selection_sec {
    padding: 60px 0 85px;
    background-color: #fafafa;
}

#page_recommend .select_list ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 25px;
    color: #000;
}

#page_recommend .select_list li {
    text-align: center;
}

#page_recommend .select_list li a {
    display: block;
    background-color: #eaf1f4;
    box-shadow: 0px 2px 2px rgba(234, 241, 244, .48);
    border-radius: 9px;
    padding: 10px 0;
    color: #000;
    font-weight: 700;
    letter-spacing: .05em;
    font-size: 19px;
}

#page_recommend .selection_sec .select_list li a {
    width: 188px;
}

#page_recommend .selection_sec .recommend_common_ttl {
    text-align: center;
}

#page_recommend .select_list {
    margin: 30px 0 90px;
}

#page_recommend .selection_sec .item_box .item {
    padding: 45px 45px 55px;
    background-color: #fff;
    border-radius: 14px;
}

#page_recommend .selection_sec .item_box .item .ttl_box .inner {
    display: flex;
    gap: 0 75px;
}

#page_recommend .selection_sec .item_box .item .ttl_box .inner .img {
    width: 296px;
    order: 1;
    flex-shrink: 0;
}

#page_recommend .selection_sec .item_box .item .ttl_box .ttl .jp {
    font-size: 22px;
    color: #de90b3;
    margin-bottom: 10px;
    letter-spacing: .05em;
}

#page_recommend .selection_sec .item_box .item .ttl_box .inner .text {
    line-height: 1.9;
    letter-spacing: .06em;
    width: 100%;
}

#page_recommend .selection_sec .item_box .item .ttl_box {
    border-bottom: solid 1px #b3b3b3;
    padding: 0 35px 30px;
    margin-bottom: 40px;
}

#page_recommend .selection_sec .item_box .item#kochou .inbox {
    display: flex;
    justify-content: space-between;
}

#page_recommend .selection_sec .item_box .item+.item {
    margin-top: 100px;
}

#page_recommend .selection_sec .item_box .item#kochou .inbox .about_box {
    position: relative;
}

#page_recommend .selection_sec .item_box .item#kochou .inbox .about_box+.about_box::before {
    content: "";
    width: 1px;
    height: 110px;
    background-color: #b3b3b3;
    position: absolute;
    top: 50px;
    left: -48px;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .ttl {
    font-size: 19px;
    color: #de90b3;
    letter-spacing: .05em;
    font-weight: 700;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .text_area .text {
    line-height: 1.9;
    letter-spacing: .06em;
}

#page_recommend .selection_sec .item_box .item#kochou .inbox .about_box .ttl {
    margin-bottom: 4px;
}

.recommend_item_btn a {
    display: block;
    width: 362px;
    margin: 0 auto;
    background-color: #07913a;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    border-radius: 7px;
    padding: 13px 0 12px;
}

.recommend_item_btn {
    text-align: center;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 35px;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list ul.type_3 {
    grid-template-columns: repeat(3, 1fr);
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list ul.type_3 li .img {
    height: 270px;
}

#page_recommend .item_box .item .inbox {
    padding: 0 35px;
    margin-bottom: 45px;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box.list {
    margin-bottom: 50px;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list li .img {
    margin-bottom: 10px;
    height: 200px;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list li .img.type_iron img {
    object-position: 50% 100%;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list li .type {
    letter-spacing: .05em;
    margin-bottom: 5px;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box .list li .text {
    font-size: 15px;
    letter-spacing: .06em;
}

#page_recommend .selection_sec .item_box .item#kochou .inbox .about_box .text_area .text {
    font-size: 15px;
}

#page_recommend .selection_sec .item_box .item .inbox .about_box.list .list {
    margin-top: 15px;
}

#page_recommend .selection_sec .item_box .item#kanyou .inbox .about_box .text_area {
    margin-top: 5px;
}

/* PC Flower situationセクション */
#page_recommend .situation_sec {
    padding: 80px 0 120px;
}

#page_recommend .situation_sec .recommend_common_ttl {
    text-align: center;
}

#page_recommend .situation_sec .select_list li a {
    width: 169px;
}

#page_recommend .situation_sec .item_box .item .ttl_box {
    text-align: center;
    margin-bottom: 30px;
}

#page_recommend .situation_sec .item_box .item .ttl_box .jp {
    font-size: 23px;
    color: #de90b3;
    margin-bottom: 10px;
}

#page_recommend .situation_sec .item_box .item .ttl_box .text {
    letter-spacing: .06em;
}

#page_recommend .situation_sec .item_box .item .list ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 25px;
}

#page_recommend .situation_sec .item_box .item+.item {
    margin-top: 70px;
}

#page_recommend .situation_sec .item_box .item .list li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 0 0 7px 7px;
    box-shadow: 0px 2px 2px rgba(211, 211, 211, .48);
    padding-bottom: 15px;
}

#page_recommend .situation_sec .item_box .item .list li a .inner {
    padding: 0 15px;
}

#page_recommend .situation_sec .item_box .item .list li a .img {
    margin-bottom: 15px;
}

#page_recommend .situation_sec .item_box .item .list li a .inner .jp {
    font-size: 20px;
    letter-spacing: .05em;
    color: #de90b3;
    margin-bottom: 3px;
}

#page_recommend .situation_sec .item_box .item .list li a .inner .text {
    letter-spacing: .06em;
    color: #000;
}

/* PC Flower serviceセクション */
#page_recommend .service_sec {
    background-color: #fafafa;
    padding: 90px 0 70px;
}

#page_recommend .service_sec .recommend_common_ttl {
    text-align: center;
    margin-bottom: 30px;
}

#page_recommend .service_sec .inbox {
    display: grid;
    gap: 0 60px;
}

#page_recommend .service_sec .inbox.full {
    grid-template-columns: repeat(3, 1fr);
}

#page_recommend .service_sec .inbox.space {
    grid-template-columns: repeat(2, 307px);
    justify-content: center;
}

#page_recommend .service_sec .inbox .item .text {
    padding: 15px 10px 18px;
    background-color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.6;
}

#page_recommend .service_sec .inbox .item {
    box-shadow: 0px 2px 2px rgba(211, 211, 211, .48);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

#page_recommend .service_sec .inbox+.inbox {
    margin-top: 40px;
}

#page_recommend .service_sec .btn_box {
    margin-top: 70px;
    display: flex;
    gap: 0 30px;
    justify-content: center;
}

#page_recommend .service_sec .btn_box .btn a {
    display: block;
    width: 271px;
    background-color: #07913a;
    border-radius: 7px;
    font-size: 19px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 15px 0;
    position: relative;
}

#page_recommend .service_sec .btn_box .btn {
    text-align: center;
}

#page_recommend .service_sec .btn_box .btn a::after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5.5px 0 5.5px 9.5px;
    border-color: transparent transparent transparent #07913a;
    right: 20px;
}

#page_recommend .service_sec .btn_box .btn a::before {
    width: 23px;
    aspect-ratio: 1/1;
    background-color: #fff;
    border-radius: 50%;
    right: 15px;
}

#page_recommend .service_sec .btn_box .btn a::before,
#page_recommend .service_sec .btn_box .btn a::after {
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
}

#top_ekiten {
    padding-top: 130px;
}

#top_ekiten .gadget_wrap {
    width: 600px;
    margin: 0 auto;
}

#top_shops_list .list_box ul li .text_box .link_box {
    display: flex;
    gap: 0 10px;
    margin-top: 20px;
}

#top_shops_list .list_box ul li .text_box .link_box .box {
    width: 30px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: visible;
}

#top_shops_list .list_box ul li .text_box .link_box .box.line {
    background-image: url(/html/user_data/assets/img/common/icon_line.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#top_shops_list .list_box ul li .text_box .link_box .box.tel,
#top_shops_list .list_box ul li .text_box .link_box .box.arrow {
    display: none;
}

/* 胡蝶蘭の値段や相場はいくら?贈る時のマナーと胡蝶蘭の本数の意味を解説 PC */

.common_page_title {
    margin-bottom: 50px;
}

.common_page_title .jp_text {
    font-size: 24px;
    letter-spacing: .03em;
}

.common_page_title .en_text {
    font-size: 14px;
    color: #E6468A;
    margin-bottom: 1em;
}

#page_phalaenopsis_price .navi_area {
    margin-bottom: 70px;
}

#page_phalaenopsis_price .navi_area ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#page_phalaenopsis_price .navi_area ul li a {
    display: block;
    line-height: 80px;
    background: #DE9DBC;
    color: #fff;
    border-radius: 5px;
    padding-left: 20px;
    font-size: 15px;
    position: relative;
    font-weight: bold;
}

#page_phalaenopsis_price .navi_area ul li a .arrow {
    position: absolute;
    right: 20px;
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page_phalaenopsis_price .contents .box {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    padding: 70px 40px;
}

#page_phalaenopsis_price .contents .box+.box {
    margin-top: 50px;
}

#page_phalaenopsis_price .contents .box .title_area {
    margin-bottom: 70px;
}

#page_phalaenopsis_price .contents .box .title_area .title {
    font-size: 22px;
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 1em;
    letter-spacing: .03em;
}

#page_phalaenopsis_price .contents .box .title_area .title:before {
    content: "●";
    color: #E6468A;
    font-size: 15px;
    position: absolute;
    left: 0;
    top: calc(50% - 6px);
    line-height: 1;
}

#page_phalaenopsis_price .contents .box .title_area .text {
    font-size: 14px;
}

#page_phalaenopsis_price .contents .box dl {
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid #F0F0F0;
    position: relative;
    padding-left: 40px;
}

#page_phalaenopsis_price .contents .box dl:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#page_phalaenopsis_price .contents .box dl:before {
    content: "";
    width: 5px;
    height: 97px;
    background: #E6468A;
    position: absolute;
    left: 0;
    top: 0;
}

#page_phalaenopsis_price .contents .box dl dt {
    position: relative;
    padding-left: 50px;
    color: #E6468A;
    font-size: 20px;
    margin-bottom: .8em;
}

#page_phalaenopsis_price .contents .box dl dt .icon {
    width: 35px;
    height: 35px;
    background: #DE9DBC;
    position: absolute;
    left: 0;
    top: calc(50% - 17.5px);
    border-radius: 100%;
}

#page_phalaenopsis_price .contents .box dl dt .icon svg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#page_phalaenopsis_price .contents .box dl dd {
    font-size: 14px;
}

#page_phalaenopsis_price .contents .box .information .text {
    font-size: 14px;
}

#page_phalaenopsis_price .contents .box .link_button a {
    display: block;
    line-height: 50px;
    background: #DE9DBC;
    color: #fff;
    border-radius: 25px;
    width: 230px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    transition: .3s;
}

#page_phalaenopsis_price .contents .box .link_button a:hover {
    opacity: .7;
}

.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    border-radius: 5px;
}

.modal__content .catch_text {
    text-align: center;
    margin-bottom: 40px;
}

.modal__content ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.modal__content ul li a {
    display: block;
    line-height: 50px;
    background: url(/html/user_data/assets/img/common/icon_line.svg) no-repeat, #06C755;
    background-size: 34px;
    background-position: 20px;
    color: #fff;
    padding-left: 70px;
    border-radius: 5px;
}

.modal__content .js-modal-close {
    background: #fff;
    width: 30px;
    line-height: 30px;
    display: block;
    position: absolute;
    right: -30px;
    top: -30px;
    border-radius: 100%;
    color: #333;
    text-align: center;
    font-weight: bold;
}

.common_phalaenopsis_orchid_page .main_visual {
    height: 280px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background-image: url(/html/user_data/assets/img/common/reason_main.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding-left: 30px;
}

#page_flower_language .main_visual {
    background-image: url(/html/user_data/assets/img/common/flower_language_image_fv.jpg);
}

#page_flower_language .main_visual:before {
    opacity: .3;
}

.common_phalaenopsis_orchid_page .main_visual:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #646464;
    opacity: .1;
    position: absolute;
    left: 0;
    top: 0;
}

.common_phalaenopsis_orchid_page .main_visual .title_text {
    color: #fff;
    z-index: 2;
    font-size: 30px;
}

.common_phalaenopsis_orchid_page .common_title {
    text-align: center;
    margin-bottom: 30px;
}

.common_phalaenopsis_orchid_page .common_title .text_en {
    color: #E6468A;
    font-size: 17px;
}

.common_phalaenopsis_orchid_page .common_title .title_text {
    font-size: 30px;
}

.common_phalaenopsis_orchid_page .common_title .sec_text {
    font-size: 15px;
    margin-top: 12px;
}

#page_phalaenopsis_reason section+section {
    margin-top: 100px;
}

#page_phalaenopsis_reason .section_reason ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

#page_phalaenopsis_reason .section_reason ul li {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
}

#page_phalaenopsis_reason .section_reason ul li .image {
    width: 170px;
}

#page_phalaenopsis_reason .section_reason ul li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page_phalaenopsis_reason .section_reason ul li .text_area {
    padding: 20px 40px;
    width: calc(100% - 170px);
}

#page_phalaenopsis_reason .section_reason ul li .text_area .title_text {
    color: #07913A;
    font-size: 20px;
    margin-bottom: .5em;
}

#page_phalaenopsis_reason .section_reason ul li .text_area .text {
    font-size: 14px;
    line-height: 1.8;
}

#page_phalaenopsis_reason .section_scene_price ul li {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
}

#page_phalaenopsis_reason .section_scene_price ul li+li {
    margin-top: 30px;
}

#page_phalaenopsis_reason .section_scene_price ul li .image {
    width: 230px;
}

#page_phalaenopsis_reason .section_scene_price ul li:nth-child(even) .image {
    order: 2;
}

#page_phalaenopsis_reason .section_scene_price ul li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page_phalaenopsis_reason .section_scene_price ul li .text_area {
    width: calc(100% - 230px);
}

#page_phalaenopsis_reason .section_scene_price ul li .text_wrap {
    padding: 20px 40px;
}

#page_phalaenopsis_reason .section_scene_price ul li .text_area .price_area {
    background: #07913A;
    color: #fff;
    padding: 10px 40px;
}

#page_phalaenopsis_reason .section_scene_price ul li .text_area .price_area .accent {
    font-size: 24px;
    color: #FAFA4D;
    margin-left: 1em;
}

#page_phalaenopsis_reason .section_scene_price ul li .text_area .title_text {
    color: #07913A;
    font-size: 20px;
    margin-bottom: .5em;
}

#page_phalaenopsis_reason .section_scene_price ul li .text_area .text {
    font-size: 14px;
    line-height: 1.8;
}

#page_phalaenopsis_reason .section_manner ul {
    gap: 40px 0;
}

#page_phalaenopsis_reason .section_manner ul li {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
    width: 48%;
    padding: 50px 30px 30px 30px;
    position: relative;
}

#page_phalaenopsis_reason .section_manner ul li:last-child {
    width: 100%;
}

#page_phalaenopsis_reason .section_manner ul li .en_text {
    background: #07913A;
    color: #fff;
    position: absolute;
    left: 0;
    top: -10px;
    border-radius: 2px;
    padding: 5px 30px;
}

#page_phalaenopsis_reason .section_manner ul li .title_text {
    color: #07913A;
    font-size: 20px;
    margin-bottom: .5em;
}

#page_phalaenopsis_reason .section_manner ul li .text {
    font-size: 14px;
    line-height: 1.8;
}

.common_phalaenopsis_orchid_page .common_button {
    margin-top: 20px;
}

.common_phalaenopsis_orchid_page .common_button.center {
    text-align: center;
}

.common_phalaenopsis_orchid_page .common_button a {
    line-height: 50px;
    background: #DE9DBC;
    color: #fff;
    border-radius: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    transition: .3s;
    padding: 15px 65px;
}

.common_phalaenopsis_orchid_page .common_button a:hover {
    opacity: .7;
}

#page_phalaenopsis_reason .section_trouble .box_card {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
    padding: 70px 40px;
}

#page_phalaenopsis_reason .section_trouble .box_card+.box_card {
    margin-top: 10px;
}

#page_phalaenopsis_reason .section_trouble .box_card .title_text {
    padding-left: 45px;
    position: relative;
    font-size: 22px;
    margin-bottom: 1.5em;
}

#page_phalaenopsis_reason .section_trouble .box_card .title_text:before {
    content: "";
    background: #E6468A;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: calc(50% - 7.5px);
}

#page_phalaenopsis_reason .section_trouble .box_card .text {
    font-size: 14px;
    line-height: 1.8;
}

/* お祝いに適した胡蝶蘭の色別の花言葉をご紹介 */

#page_flower_language section+section {
    margin-top: 120px;
}

#page_flower_language .in_wrap .common_fl_wrap+.common_fl_wrap {
    margin-top: 50px;
}

#page_flower_language .common_main_text {
    line-height: 2;
    margin-bottom: 50px;
    text-align: center;
}

#page_flower_language .common_fl_wrap {
    align-items: center;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
    padding: 40px;
}

#page_flower_language .common_fl_wrap .image {
    width: 27%;
}

#page_flower_language .origin_section .common_fl_wrap .image {
    height: 200px;
}

#page_flower_language .common_fl_wrap .image img {
    border-radius: 10px;
}

#page_flower_language .in_wrap .common_fl_wrap:nth-child(even) .image {
    order: 2;
}

#page_flower_language .color_section .common_fl_wrap .image {
    height: 300px;
    order: -1;
}

#page_flower_language .scary_section .common_fl_wrap .image {
    height: 300px;
}

#page_flower_language .business_section .common_fl_wrap .image {
    height: 300px;
}

#page_flower_language .common_fl_wrap .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page_flower_language .common_fl_wrap .text_area {
    width: 70%;
}

#page_flower_language .common_fl_wrap .text_area .title {
    font-size: 20px;
    margin-bottom: .8em;
}

#page_flower_language .common_fl_wrap .text_area .text {
    line-height: 2.3;
    font-size: 14px;
}

#page_flower_language .common_title:before {
    content: "●";
    color: #DE9DBC;
    margin-bottom: 1em;
    display: block;
    font-size: 14px;
}

#page_flower_language .common_title .title_text {
    letter-spacing: .1em;
}

#page_flower_language .common_title .title_text::first-letter {
    color: #DE9DBC;
}

#page_flower_language .common_button {
    text-align: center;
}

#page_phalaenopsis_reason .section_manner ul.meaning li:last-child {
    width: 48% !important;
}

#page_phalaenopsis_reason .section_reason ul.intro li .text_area .title_text {
    font-size: 18px;
}

#page_phalaenopsis_reason .section_reason ul.intro li .text_area .text {
    font-size: 12px;
    line-height: 1.9;
}

#page_phalaenopsis_reason .section_reason ul.intro li .text_area {
    padding: 12px 22px;
}

#page_phalaenopsis_reason .section_reason ul.intro {
    gap: 40px 25px;
}

.common_main_title_area {
    text-align: center;
}

.common_main_title_area .text {
    line-height: 105px;
    font-size: 34px;
    background-color: #FFF2FB;
    background-image: url(/html/user_data/assets/img/common/visit-accent-1.svg), url(/html/user_data/assets/img/common/visit-accent-1.svg);
    background-repeat: no-repeat;
    background-position: 14% center, 86% center;
}

#page_visit .accent_title {
    text-align: center;
    margin-bottom: 30px;
}

#page_visit .accent_title .title_text {
    display: inline-block;
    border-bottom: 3px dashed #707070;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: .5em;
    font-size: 28px;
    font-weight: normal;
}

#page_visit .main_area {
    margin-bottom: 50px;
}

#page_visit .merit_section .main_area .text {
    text-align: center;
    line-height: 2;
}

#page_visit .list_area {
    padding: 50px 30px;
    background: #FFFFF5;
}

#page_visit .list_area ul li {
    margin-top: 80px;
}

#page_visit .list_area ul li .text_area {
    width: 470px;
}

#page_visit .list_area ul li .text_area .title_area {
    margin-bottom: 30px;
    align-items: center;
}

#page_visit .list_area ul li .text_area .title_area .accent {
    background: #FF8EBE;
    color: #fff;
    width: 78px;
    height: 78px;
    border-radius: 100%;
    text-align: center;
    margin-right: 20px;
    align-items: center;
    justify-content: center;
}

#page_visit .list_area ul li .text_area .title_area .accent small {
    display: block;
    line-height: 1;
    text-transform: uppercase;
    font-size: 12px;
}

#page_visit .list_area ul li .text_area .title_area .accent .num {
    font-family: "century-gothic", sans-serif;
    font-size: 50px;
    line-height: 1;
}

#page_visit .list_area ul li .text_area .title_area .title {
    font-size: 24px;
    font-weight: normal;
}

#page_visit .list_area ul li .text_area .text {
    line-height: 2;
}

#page_visit .list_area ul li .image {
    width: 480px;
}

#page_visit .list_area ul li:nth-child(even) .image {
    order: -1;
}

.common_accent_area {
    height: 170px;
    background-image:
        url(/html/user_data/assets/img/common/visit-accent-1.svg),
        url(/html/user_data/assets/img/common/visit-accent-1.svg),
        url(/html/user_data/assets/img/common/visit-accent-2.svg);
    background-position:
        24% center,
        76% center,
        center;
    background-repeat: no-repeat;
}

#page_visit .how_visit_section .pattern_box .title_area {
    text-align: center;
    background: #FFE2EC;
    border-radius: 56px;
    padding: 20px;
    margin-bottom: 50px;
}

#page_visit .how_visit_section .pattern_box .title_area .en {
    font-size: 17px;
}

#page_visit .how_visit_section .pattern_box .title_area .title {
    font-size: 24px;
    font-weight: normal;
}

#page_visit .how_visit_section .pattern_box .fl_wrap {
    padding: 0 100px;
    align-items: center;
}

#page_visit .how_visit_section .pattern_box .fl_wrap .image {
    width: 350px;
}

#page_visit .how_visit_section .pattern_box .fl_wrap .text_area {
    width: 380px;
}

#page_visit .how_visit_section .pattern_box .fl_wrap .text_area .title {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 1em;
    position: relative;
}

#page_visit .how_visit_section .pattern_box .fl_wrap .text_area .title:before {
    content: "";
    width: 54px;
    height: 71px;
    background-image: url(/html/user_data/assets/img/common/visit-accent-3.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -71px;
    ;
    top: 0;
}

#page_visit .how_visit_section .pattern_box .fl_wrap .text_area .text {
    line-height: 2;
}

#page_visit .flow_area {
    padding: 0 100px;
    margin: 50px 0;
}

#page_visit .flow_area .title_box {
    text-align: center;
    position: relative;
    margin-bottom: 30px;
}

#page_visit .flow_area .title_box:before {
    content: "";
    width: 100%;
    height: 3px;
    border-bottom: 3px dashed #707070;
    position: absolute;
    left: 0;
    top: 50%;
}

#page_visit .flow_area .title_box .title {
    display: inline-block;
    background: #fff;
    position: relative;
    padding: 0 1em;
    font-size: 28px;
    font-weight: normal;
}

#page_visit .flow_area ul li {
    background: #FFFFCE;
    border-radius: 10px;
    position: relative;
    padding: 20px 30px;
    align-items: center;
    margin-top: 70px;
    position: relative;
}

#page_visit .flow_area ul li:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-top: 30px solid #FF8EBE;
    border-bottom: 0;
    position: absolute;
    left: calc(50% - 15px);
    bottom: -50px;
}

#page_visit .flow_area ul li:last-child::after {
    display: none;
}

#page_visit .flow_area ul li .num {
    width: 52px;
    line-height: 52px;
    background: #FF8EBE;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 35px;
    margin-right: .7em;
}

#page_visit .flow_area ul li .text_area {
    width: 52%;
}

#page_visit .flow_area ul li#buy .icon {
    position: absolute;
    right: 80px;
    bottom: -15px;
}

#page_visit .flow_area ul li#how .icon {
    position: absolute;
    right: 80px;
    bottom: 0;
}

#page_visit .flow_area ul li#day .icon {
    position: absolute;
    right: 110px;
    bottom: 20px;
}

#page_visit .flow_area ul li#receipt .icon {
    position: absolute;
    right: 80px;
    bottom: 10px;
}

#page_visit .flow_area ul li .text_area .title {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: .3em;
}

#page_visit .flow_area ul li .text_area .text {
    line-height: 2;
}

#page_visit .how_visit_section .pattern_box#window_shopping {
    margin-bottom: 30px;
}

#page_phalaenopsis_reason .section_manner.page_board ul {
    margin-top: 40px;
}

#page_phalaenopsis_reason .section_manner.page_board {
    margin-top: 60px;
}

#page_phalaenopsis_reason .section_trouble.page_board {
    margin-top: 80px;
}

.common_phalaenopsis_orchid_page .common_button.board {
    text-align: center;
}

.top_banner_sec {
    padding: 25px 0 0;
}

.top_banner_sec .img {
    display: block;
    transition: .3s;
    width: 100%;
}

.top_banner_sec .img:hover {
    opacity: 0.7;
}

.top_banner_sec .img img {
    width: 100%;
}

#page_ordermade .how_section {
    background: #f2f2f2;
    padding: 40px;
}

#page_ordermade .how_section .fl_wrap {
    align-items: center;
}

#page_ordermade .how_section .image {
    width: 40%;
    height: 350px;
}

#page_ordermade .how_section .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page_ordermade .how_section .text_area {
    width: 52%;
}

#page_ordermade .common_title {
    text-align: center;
    margin-bottom: 25px;
}

#page_ordermade .common_title .title_text {
    display: inline-block;
    border-bottom: 3px dashed #999;
    font-size: 25px;
    padding-bottom: .3em;
    padding-left: 1em;
    padding-right: 1em;
}

#page_ordermade .how_section .common_title .title_text {
    display: block;
    text-align: left;
}

#page_ordermade .how_section .text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 30px;
}

#page_ordermade .more_link {
    display: block;
    line-height: 60px;
    background: #333;
    border: 1px solid;
    text-align: center;
    color: #fff;
    font-size: 18px;
    width: 350px;
    position: relative;
}

#page_ordermade .more_link:after {
    content: "";
    width: 10px;
    aspect-ratio: 1;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    rotate: 45deg;
    transition: 0.3s;
    position: absolute;
    right: 20px;
    top: calc(50% - 6px);
}

#page_ordermade .insta_section {
    margin: 150px 0;
}

#page_ordermade .insta_section .text {
    text-align: center;
    margin-bottom: 30px;
}

#page_ordermade .main_contents_section .fl_wrap {
    align-items: center;
    justify-content: center;
}

#page_ordermade .main_contents_section .box:nth-child(odd) .image {
    order: -1;
}

#page_ordermade .main_contents_section .box+.box {
    margin-top: 100px;
}

#page_ordermade .main_contents_section .image {
    width: 40%;
    height: 300px;
}

#page_ordermade .main_contents_section .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page_ordermade .main_contents_section .text_area {
    width: 55%;
    margin-left: 5%;
}

#page_ordermade .main_contents_section .text_area .title {
    font-size: 25px;
    margin-bottom: 1em;
}

#page_ordermade .main_contents_section .text_area .text {
    margin-bottom: 2em;
}

.common_ordermade_link {
    margin: 100px 0;
}

.common_ordermade_link ul {
    gap: 20px;
}

.common_ordermade_link ul li {
    width: 31%;
}

.common_ordermade_link ul li.ordermade {
    width: 100%;
}

.common_ordermade_link ul li a {
    display: block;
    color: #fff;
}

.common_ordermade_link ul li a {
    position: relative;
    text-align: center;
    padding: 60px 40px;
    transition: .3s;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.common_ordermade_link ul li a:hover {
    opacity: .7;
}

.common_ordermade_link ul li.ordermade a {
    background-image: url(/html/user_data/assets/img/common/ordermade_image.png);
}

.common_ordermade_link ul li.balloon a {
    background-image: url(/html/user_data/assets/img/common/01161925_6002bf0bbdc30.jpg);
}

.common_ordermade_link ul li.panel a {
    background-image: url(/html/user_data/assets/img/common/01180257_60047a72d39fa.png);
}

.common_ordermade_link ul li.plate a {
    background-image: url(/html/user_data/assets/img/common/08191433_57b69a2ebc1c7.jpg);
}

.common_ordermade_link ul li a:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
}

.common_ordermade_link ul li p {
    position: relative;
    z-index: 2;
}

.common_ordermade_link ul li .en {
    font-family: "century-gothic", sans-serif;
    font-size: 30px;
}

.common_ordermade_link .common_title {
    text-align: center;
    margin-bottom: 25px;
}

.common_ordermade_link .common_title .title_text {
    display: inline-block;
    border-bottom: 3px dashed #999;
    font-size: 25px;
    padding-bottom: .3em;
    padding-left: 1em;
    padding-right: 1em;
}

.season_about_sec .cont .item {
    display: flex;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
    border-radius: 5px;
    overflow: hidden;
}

.season_about_sec .cont .item+.item {
    margin-top: 30px;
}

.season_about_sec .cont .item .img {
    flex-shrink: 0;
    width: 400px;
}

.season_about_sec .cont .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.season_about_sec .cont .item:nth-child(even) .img {
    order: 1;
}

.season_about_sec .cont .item .text_box {
    width: 100%;
    padding: 35px;
}

.season_about_sec .cont .item .text_box .title {
    font-size: 22px;
    letter-spacing: .05em;
    line-height: 1.5;
    border-left: 3px solid #07913A;
    padding-left: 0.7em;
    margin-bottom: 0.5em;
}

.season_about_sec .cont .item .text_box .text {
    font-size: 15px;
    letter-spacing: .05em;
}

.season_about_sec .cont .item .text_box .text+.text {
    margin-top: 1em;
}

.season_period_sec .cont .item {
    display: flex;
    gap: 0 35px;
    position: relative;
    z-index: 0;
}

.season_period_sec .cont .item+.item {
    margin-top: 100px;
}

.season_period_sec .cont .item .img {
    flex-shrink: 0;
    width: 350px;
}

.season_period_sec .cont .item:nth-child(even) .img {
    order: 1;
}

.season_period_sec .cont .item .text_box {
    width: 100%;
    padding-top: 25px;
}

.season_period_sec .cont .item .text_box .title {
    color: #07913A;
    font-size: 22px;
    letter-spacing: .05em;
    margin-bottom: 0.4em;
}

.season_period_sec .cont .item .text_box .text {
    font-size: 15px;
    letter-spacing: .05em;
}

.season_period_sec .cont .item::before {
    content: "";
    width: calc(50vw + 450px);
    height: 100%;
    background: #fffff5;
    position: absolute;
    top: 40px;
    right: calc(50% - 50vw);
    z-index: -1;
}

.season_period_sec .cont .item:nth-child(even)::before {
    right: auto;
    left: calc(50% - 50vw);
}

.ec-drawerRoleClose,
.ec-blockTopBtn {
    display: none;
}

.top_news {
    padding: 105px 0 0;
}

.top_news .top_box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 25px;
}

.top_news .common_ttl_box .ttl {
    font-weight: 900;
}

.top_news .common_ttl_box .ttl_comment {
    color: #6E6E6E;
}

.top_news .link_btn a {
    display: block;
    color: #07913A;
    font-size: 14px;
    letter-spacing: .02em;
    font-weight: 500;
}

.top_news .news_list li+li {
    margin-top: 10px;
}

.top_news .news_list li a {
    display: flex;
    align-items: center;
    gap: 0 40px;
    padding: 13px 30px 13px 40px;
    background: #fff;
    border-radius: 35px;
    color: #000;
    transition: .3s;
}

.top_news .news_list li a .day {
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.top_news .news_list li a .theme {
    width: 100%;
    font-size: 14px;
    letter-spacing: .02em;
    font-weight: 700;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.top_news .news_list li a::after {
    content: "";
    mask-image: url(/html/user_data/assets/img/common/icon_arrow_black.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background: #000;
    width: 5px;
    aspect-ratio: 5/8;
    min-width: 0;
    flex-shrink: 0;
    display: block;
    transition: .3s;
}

.top_news .news_list li a:hover {
    color: #07913A;
}

.top_news .news_list li a:hover::after {
    background: #07913A;
}

.top_news .news_list li:nth-child(n + 5) {
    display: none;
}

#main-contents {
    position: relative;
    width: 1040px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.latest_block {
    position: relative;
    width: 1040px;
    margin: 0 auto;
    padding: 0 20px 30px;
}

/* デフォルトテンプレcss */

@import url("../../../../../node_modules/normalize.css/normalize.css");

body {
    font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
    color: #525263;
    transition: z-index 0ms 5.28455ms;
    background-color: #fffcfe;
    margin: 0;
}

a {
    text-decoration: none;
}

pre {
    background-color: transparent;
    border: none;
    padding: 16px 0;
}

p {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
見出し

ページ内で見出しとして機能する要素のスタイル群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 1.1
*/
/*
見出し

商品紹介等で利用される、一般的な見出しのスタイルです。

ex [商品詳細ページ　商品見出し部分](http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-headingTitle マトリョーシカ

Styleguide 1.1.1
*/
.ec-headingTitle {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: normal;
    color: #525263;
}

/*
ページヘッダ

各種ページで用いられるページヘッダのデザインです。

ex [利用規約ページ　ページヘッダ部](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-pageHeader
  h1 利用規約

Styleguide 1.1.2
*/
.ec-pageHeader h1 {
    margin: 0 0 8px;
    border-bottom: 1px dotted #ccc;
    border-top: 1px solid #ccc;
    padding: 8px 0 12px;
    font-size: 16px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-pageHeader h1 {
        border-top: none;
        border-bottom: 1px solid #ccc;
        margin: 10px 16px 48px;
        padding: 8px;
        font-size: 32px;
        font-weight: bold;
    }
}

/*
サブ見出し

利用規約など、文字主体のページで用いられるサブ見出しです。

ex [利用規約ページ サブ見出し部分](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-heading 第1条 (会員)

Styleguide 1.1.3
*/
.ec-heading {
    margin: 24px 0;
}

/*
サブ見出し(太字)

文字主体のページで用いられるサブ見出しの太字のスタイルです。

ex [プライバシーポリシー サブ見出し部分](http://demo3.ec-cube.net/help/privacy)

Markup:
.ec-heading-bold 個人情報の定義

Styleguide 1.1.4
*/
.ec-heading-bold {
    margin: 16px 0;
    font-size: 16px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-heading-bold {
        font-size: 18px;
    }
}

/*
背景付き見出し

マイページ注文履歴等で用いられる背景付きの見出しです。

ex [ご注文履歴詳細　背景付き見出し部分](http://demo3.ec-cube.net/mypage/history/1063)

Markup:
.ec-rectHeading
  h2 配送情報
.ec-rectHeading
  h2 お支払について

Styleguide 1.1.5
*/
.ec-rectHeading h1,
.ec-rectHeading h2,
.ec-rectHeading h3,
.ec-rectHeading h4,
.ec-rectHeading h5,
.ec-rectHeading h6 {
    /* background: #F3F3F3; */
    padding: 8px 0;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #b5c8d2;
}

/*
メッセージ見出し

ユーザが行った操作に対する、完了報告やエラー表示のページで使用される見出しのスタイルです。

ex [注文完了 ログイン後、カートに商品を入れ注文完了まで行う](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ご注文ありがとうございました

Styleguide 1.1.6
*/
.ec-reportHeading {
    width: 100%;
    border-top: 1px dotted #ccc;
    margin: 20px 0 30px;
    padding: 0;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-reportHeading {
        border-top: 0;
        font-size: 32px;
    }
}

.ec-reportHeading h1,
.ec-reportHeading h2,
.ec-reportHeading h3,
.ec-reportHeading h4,
.ec-reportHeading h5,
.ec-reportHeading h6,
.ec-reportHeading p {
    font-weight: bold;
    font-size: 24px;
}

@media only screen and (min-width: 768px) {

    .ec-reportHeading h1,
    .ec-reportHeading h2,
    .ec-reportHeading h3,
    .ec-reportHeading h4,
    .ec-reportHeading h5,
    .ec-reportHeading h6,
    .ec-reportHeading p {
        font-size: 32px;
    }
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
文字装飾

文字装飾をするためのスタイル群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 1.2
*/
/*
テキストリンク

テキストリンクのスタイルです。

Markup:
a(href="#").ec-link さくらのクラウド

Styleguide 1.2.1
*/
.ec-link {
    color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}

.ec-link:hover {
    color: #33A8D0;
    text-decoration: none;
}

/*
テキスト（太字）

テキストを太くするためのスタイルです。

Markup:
p.ec-font-bold この季節にぴったりな商品をご用意しました

Styleguide 1.2.2
*/
.ec-font-bold {
    font-weight: bold;
}

/*
テキスト（グレー）

テキストをグレーにするためのスタイルです。

Markup:
p.ec-color-grey 青色が美しい職人が仕上げた吹きガラス

Styleguide 1.2.3
*/
.ec-color-grey {
    color: #9a947e;
}

/*
テキスト（赤）

テキストを赤にするためのスタイルです。

Markup:
p.ec-color-red ¥ 2,728 税込
p.ec-color-accent ¥ 2,728 税込

Styleguide 1.2.4
*/
.ec-color-red {
    color: #DE5D50;
}

.ec-color-accent {
    color: #DE5D50;
}

/*
フォントサイズ

フォントサイズを指定するためのスタイルです。

Markup:
.ec-font-size-1 さわやかな日差しが過ごしやすい季節
.ec-font-size-2 さわやかな日差しが過ごしやすい季節
.ec-font-size-3 さわやかな日差しが過ごしやすい季節
.ec-font-size-4 さわやかな日差しが過ごしやすい季節
.ec-font-size-5 さわやかな日差しが過ごしやすい季節
.ec-font-size-6 さわやかな日差しが過ごしやすい季節


Styleguide 1.2.5
*/
.ec-font-size-1 {
    font-size: 12px;
}

.ec-font-size-2 {
    font-size: 14px;
}

.ec-font-size-3 {
    font-size: 16px;
}

.ec-font-size-4 {
    font-size: 20px;
}

.ec-font-size-5 {
    font-size: 32px;
}

.ec-font-size-6 {
    font-size: 40px;
}

/*
テキスト水平位置

テキストをセンタリングするためのスタイルです。

Markup:
p.ec-text-ac さわやかな日差しが過ごしやすい季節

Styleguide 1.2.6
*/
.ec-text-ac {
    text-align: center;
}

/*
価格テキスト

価格を表示するテキストです。

価格文字にスペースを取るほか、税込み等の表示を小さくする効果もあります。

spanを用いたインライン要素として利用します。

Markup:
div(style="color:#DE5D50;font-size:28px")
    span.ec-price
      span.ec-price__unit ¥
      span.ec-price__price 1,280
      span.ec-price__tax 税込

Styleguide 1.2.7
*/
.ec-price .ec-price__unit {
    font-size: 18px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-price .ec-price__unit {
        font-size: 1em;
    }
}

.ec-price .ec-price__price {
    display: inline-block;
    padding: 0 .3em;
    font-size: 18px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-price .ec-price__price {
        font-size: 1em;
    }
}

.ec-price .ec-price__tax {
    font-size: 12px;
}

@media only screen and (min-width: 768px) {
    .ec-price .ec-price__tax {
        font-size: 0.57em;
    }
}

/*
テキストの位置

テキストや、入れ子にしたインライン要素を
「左揃え」「中央揃え」「右揃え」に設定することができます。

Markup:
h3 左揃え
p.text-left
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?
br
h3 中央揃え
p.text-center
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?
br
h3 右揃え
p.text-right
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?

Styleguide 1.2.8
*/
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/*
メッセージテキスト

ユーザが行った操作に対する、完了報告やエラー表示のページで使用されるテキストのスタイルです。

ex [注文完了 （ログイン後、カートに商品を入れ注文完了まで行う）](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ご注文ありがとうございました
p.ec-reportDescription
      | ただいま、ご注文の確認メールをお送りさせていただきました。
      br
      | 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。
      br
      | 今後ともご愛顧賜りますようよろしくお願い申し上げます。


Styleguide 1.2.9
*/
.ec-reportDescription {
    margin-bottom: 32px;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
}

/*
テキスト下部のスペース

テキストの下に余白を追加することができます。 .ec-para-normalで16pxの余白をつけることができます。

Markup:
p.ec-para-normal 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。
p.ec-para-normal 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。

Styleguide 1.2.10
*/
.ec-para-normal {
    margin-bottom: 16px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
リスト

シンプルなリストを構成するためのスタイル群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 1.3
*/
/*
水平定義リスト

シンプルな定義リストのスタイルを定義します。

dl要素を用いてコーディングします。

ex [当サイトについて　水平定義リスト部分](http://demo3.ec-cube.net/help/about)

Markup:
dl.ec-definitions
    dt 店名
    dd EC-CUBE3 DEMO SHOP
dl.ec-definitions
    dt 会社名
    dd EC-CUBE3
dl.ec-definitions--soft
    dt 所在地
    dd 〒 550-0001

Styleguide 1.3.1
*/
.ec-definitions,
.ec-definitions--soft {
    margin: 5px 0;
    display: block;
}

.ec-definitions dt,
.ec-definitions--soft dt,
.ec-definitions dd,
.ec-definitions--soft dd {
    display: inline-block;
    margin: 0;
}

.ec-definitions dt,
.ec-definitions--soft dt {
    font-weight: bold;
}

.ec-definitions--soft dt {
    font-weight: normal;
}

/*
下線つき定義リスト

線が添えられた定義リストのスタイルを定義します。

dl要素を用いてコーディングします。

ex [当サイトについて　下線つき定義リスト](http://demo3.ec-cube.net/help/about)

Markup:
.ec-borderedDefs
  dl
    dt 店名
    dd EC-CUBE3 DEMO SHOP
  dl
    dt 会社名
    dd EC-CUBE3
  dl
    dt 所在地
    dd 〒550 - 0001

Styleguide 1.3.2
*/
.ec-borderedDefs {
    width: 100%;
    border-top: 1px dotted #ccc;
    margin-bottom: 16px;
}

.ec-borderedDefs dl {
    display: flex;
    border-bottom: 1px dotted #ccc;
    margin: 0;
    padding: 10px 0 0;
    flex-wrap: wrap;
}

.ec-borderedDefs dl:last-child {}

@media only screen and (min-width: 768px) {
    .ec-borderedDefs dl {
        flex-wrap: nowrap;
        padding: 10px 0 0;
    }
}

.ec-borderedDefs dt,
.ec-borderedDefs dd {
    padding: 0;
}

.ec-borderedDefs dt {
    font-weight: normal;
    width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0 .8em;
}

@media only screen and (min-width: 768px) {
    .ec-borderedDefs dt {
        /* padding-top: 14px; */
        width: 30%;
    }
}

.ec-borderedDefs dd {
    padding: 0;
    width: 100%;
    margin-bottom: 10px;
    line-height: 2.5;
}

.ec-borderedDefs dd .form-text {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .ec-borderedDefs dd {
        width: 70%;
        /* line-height: 3; */
    }
}

.ec-borderedDefs .ec-select {
    /* margin-bottom: 0; */
}

.ec-borderedDefs p {
    line-height: 1.4;
}

.ec-list-chilled {
    display: table-row;
    border: 0 none;
    padding: 8px 0;
}

.ec-list-chilled dt,
.ec-list-chilled dd {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 0;
}

@media only screen and (min-width: 768px) {

    .ec-list-chilled dt,
    .ec-list-chilled dd {
        padding: 16px 0;
    }
}

.ec-list-chilled dt {
    width: 30%;
}

.ec-list-chilled dd {
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .ec-list-chilled dd {
        padding: 16px;
    }
}

/*
ボーダーリスト

線が添えられたリストを表示します。

ex [当サイトについて　ボーダーリスト](http://demo3.ec-cube.net/help/about)

Markup:
ul.ec-borderedList
  li: p lorem
  li: p lorem
  li: p lorem


Styleguide 1.3.3
*/
.ec-borderedList {
    width: 100%;
    border-top: 0;
    list-style: none;
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .ec-borderedList {
        border-top: 1px dotted #ccc;
    }
}

.ec-borderedList li {
    border-bottom: 1px dotted #ccc;
}

.ec-list-chilled {
    display: table-row;
    border: 0 none;
    padding: 8px 0;
}

.ec-list-chilled dt,
.ec-list-chilled dd {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 16px 0;
}

.ec-list-chilled dt {
    width: 30%;
}

.ec-list-chilled dd {
    padding: 16px;
}

/*
ボタンサイズ

ボタンサイズを変更するスタイル群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 2.1
*/
/*
通常ボタン

インラインの要素としてボタンを定義出来ます。

ex [トップページ　ボタン部分](http://demo3.ec-cube.net/)

Markup:
.ec-inlineBtn 住所検索
.ec-inlineBtn--primary もっと見る
.ec-inlineBtn--action カートに入れる
.ec-inlineBtn--cancel キャンセル

Styleguide 2.1.1
*/
.ec-inlineBtn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: #525263;
    background-color: #F5F7F8;
    border-color: #ccc;
}

.ec-inlineBtn:focus,
.ec-inlineBtn.focus,
.ec-inlineBtn:active:focus,
.ec-inlineBtn:active.focus,
.ec-inlineBtn.active:focus,
.ec-inlineBtn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-inlineBtn:hover,
.ec-inlineBtn:focus,
.ec-inlineBtn.focus {
    color: #525263;
    text-decoration: none;
}

.ec-inlineBtn:active,
.ec-inlineBtn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn.disabled,
.ec-inlineBtn[disabled],
fieldset[disabled] .ec-inlineBtn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-inlineBtn:focus,
.ec-inlineBtn.focus {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #8c8c8c;
}

.ec-inlineBtn:hover {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #adadad;
}

.ec-inlineBtn:active,
.ec-inlineBtn.active,
.open>.ec-inlineBtn.dropdown-toggle {
    color: #525263;
    background-color: #d7dfe3;
    background-image: none;
    border-color: #adadad;
}

.ec-inlineBtn:active:hover,
.ec-inlineBtn:active:focus,
.ec-inlineBtn:active.focus,
.ec-inlineBtn.active:hover,
.ec-inlineBtn.active:focus,
.ec-inlineBtn.active.focus,
.open>.ec-inlineBtn.dropdown-toggle:hover,
.open>.ec-inlineBtn.dropdown-toggle:focus,
.open>.ec-inlineBtn.dropdown-toggle.focus {
    color: #525263;
    background-color: #c2ced4;
    border-color: #8c8c8c;
}

.ec-inlineBtn.disabled:hover,
.ec-inlineBtn.disabled:focus,
.ec-inlineBtn.disabled.focus,
.ec-inlineBtn[disabled]:hover,
.ec-inlineBtn[disabled]:focus,
.ec-inlineBtn[disabled].focus,
fieldset[disabled] .ec-inlineBtn:hover,
fieldset[disabled] .ec-inlineBtn:focus,
fieldset[disabled] .ec-inlineBtn.focus {
    background-color: #F5F7F8;
    border-color: #ccc;
}

.ec-inlineBtn .badge {
    color: #F5F7F8;
    background-color: #525263;
}

.ec-inlineBtn .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

.ec-inlineBtn--primary {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: #fff;
    background-color: #5CB1B1;
    border-color: #5CB1B1;
}

.ec-inlineBtn--primary:focus,
.ec-inlineBtn--primary.focus,
.ec-inlineBtn--primary:active:focus,
.ec-inlineBtn--primary:active.focus,
.ec-inlineBtn--primary.active:focus,
.ec-inlineBtn--primary.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-inlineBtn--primary:hover,
.ec-inlineBtn--primary:focus,
.ec-inlineBtn--primary.focus {
    color: #525263;
    text-decoration: none;
}

.ec-inlineBtn--primary:active,
.ec-inlineBtn--primary.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--primary.disabled,
.ec-inlineBtn--primary[disabled],
fieldset[disabled] .ec-inlineBtn--primary {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-inlineBtn--primary:focus,
.ec-inlineBtn--primary.focus {
    color: #fff;
    background-color: #479393;
    border-color: #2e6060;
}

.ec-inlineBtn--primary:hover {
    color: #fff;
    background-color: #479393;
    border-color: #438d8d;
}

.ec-inlineBtn--primary:active,
.ec-inlineBtn--primary.active,
.open>.ec-inlineBtn--primary.dropdown-toggle {
    color: #fff;
    background-color: #479393;
    background-image: none;
    border-color: #438d8d;
}

.ec-inlineBtn--primary:active:hover,
.ec-inlineBtn--primary:active:focus,
.ec-inlineBtn--primary:active.focus,
.ec-inlineBtn--primary.active:hover,
.ec-inlineBtn--primary.active:focus,
.ec-inlineBtn--primary.active.focus,
.open>.ec-inlineBtn--primary.dropdown-toggle:hover,
.open>.ec-inlineBtn--primary.dropdown-toggle:focus,
.open>.ec-inlineBtn--primary.dropdown-toggle.focus {
    color: #fff;
    background-color: #3b7b7b;
    border-color: #2e6060;
}

.ec-inlineBtn--primary.disabled:hover,
.ec-inlineBtn--primary.disabled:focus,
.ec-inlineBtn--primary.disabled.focus,
.ec-inlineBtn--primary[disabled]:hover,
.ec-inlineBtn--primary[disabled]:focus,
.ec-inlineBtn--primary[disabled].focus,
fieldset[disabled] .ec-inlineBtn--primary:hover,
fieldset[disabled] .ec-inlineBtn--primary:focus,
fieldset[disabled] .ec-inlineBtn--primary.focus {
    background-color: #5CB1B1;
    border-color: #5CB1B1;
}

.ec-inlineBtn--primary .badge {
    color: #5CB1B1;
    background-color: #fff;
}

.ec-inlineBtn--primary .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

.ec-inlineBtn--action {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: #fff;
    background-color: #DE5D50;
    border-color: #DE5D50;
}

.ec-inlineBtn--action:focus,
.ec-inlineBtn--action.focus,
.ec-inlineBtn--action:active:focus,
.ec-inlineBtn--action:active.focus,
.ec-inlineBtn--action.active:focus,
.ec-inlineBtn--action.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-inlineBtn--action:hover,
.ec-inlineBtn--action:focus,
.ec-inlineBtn--action.focus {
    color: #525263;
    text-decoration: none;
}

.ec-inlineBtn--action:active,
.ec-inlineBtn--action.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--action.disabled,
.ec-inlineBtn--action[disabled],
fieldset[disabled] .ec-inlineBtn--action {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-inlineBtn--action:focus,
.ec-inlineBtn--action.focus {
    color: #fff;
    background-color: #d33828;
    border-color: #93271c;
}

.ec-inlineBtn--action:hover {
    color: #fff;
    background-color: #d33828;
    border-color: #cb3526;
}

.ec-inlineBtn--action:active,
.ec-inlineBtn--action.active,
.open>.ec-inlineBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #d33828;
    background-image: none;
    border-color: #cb3526;
}

.ec-inlineBtn--action:active:hover,
.ec-inlineBtn--action:active:focus,
.ec-inlineBtn--action:active.focus,
.ec-inlineBtn--action.active:hover,
.ec-inlineBtn--action.active:focus,
.ec-inlineBtn--action.active.focus,
.open>.ec-inlineBtn--action.dropdown-toggle:hover,
.open>.ec-inlineBtn--action.dropdown-toggle:focus,
.open>.ec-inlineBtn--action.dropdown-toggle.focus {
    color: #fff;
    background-color: #b53022;
    border-color: #93271c;
}

.ec-inlineBtn--action.disabled:hover,
.ec-inlineBtn--action.disabled:focus,
.ec-inlineBtn--action.disabled.focus,
.ec-inlineBtn--action[disabled]:hover,
.ec-inlineBtn--action[disabled]:focus,
.ec-inlineBtn--action[disabled].focus,
fieldset[disabled] .ec-inlineBtn--action:hover,
fieldset[disabled] .ec-inlineBtn--action:focus,
fieldset[disabled] .ec-inlineBtn--action.focus {
    background-color: #DE5D50;
    border-color: #DE5D50;
}

.ec-inlineBtn--action .badge {
    color: #DE5D50;
    background-color: #fff;
}

.ec-inlineBtn--action .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

.ec-inlineBtn--cancel {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: #fff;
    background-color: #525263;
    border-color: #525263;
}

.ec-inlineBtn--cancel:focus,
.ec-inlineBtn--cancel.focus,
.ec-inlineBtn--cancel:active:focus,
.ec-inlineBtn--cancel:active.focus,
.ec-inlineBtn--cancel.active:focus,
.ec-inlineBtn--cancel.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-inlineBtn--cancel:hover,
.ec-inlineBtn--cancel:focus,
.ec-inlineBtn--cancel.focus {
    color: #525263;
    text-decoration: none;
}

.ec-inlineBtn--cancel:active,
.ec-inlineBtn--cancel.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--cancel.disabled,
.ec-inlineBtn--cancel[disabled],
fieldset[disabled] .ec-inlineBtn--cancel {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-inlineBtn--cancel:focus,
.ec-inlineBtn--cancel.focus {
    color: #fff;
    background-color: #3b3b47;
    border-color: #18181d;
}

.ec-inlineBtn--cancel:hover {
    color: #fff;
    background-color: #3b3b47;
    border-color: #363642;
}

.ec-inlineBtn--cancel:active,
.ec-inlineBtn--cancel.active,
.open>.ec-inlineBtn--cancel.dropdown-toggle {
    color: #fff;
    background-color: #3b3b47;
    background-image: none;
    border-color: #363642;
}

.ec-inlineBtn--cancel:active:hover,
.ec-inlineBtn--cancel:active:focus,
.ec-inlineBtn--cancel:active.focus,
.ec-inlineBtn--cancel.active:hover,
.ec-inlineBtn--cancel.active:focus,
.ec-inlineBtn--cancel.active.focus,
.open>.ec-inlineBtn--cancel.dropdown-toggle:hover,
.open>.ec-inlineBtn--cancel.dropdown-toggle:focus,
.open>.ec-inlineBtn--cancel.dropdown-toggle.focus {
    color: #fff;
    background-color: #2b2b34;
    border-color: #18181d;
}

.ec-inlineBtn--cancel.disabled:hover,
.ec-inlineBtn--cancel.disabled:focus,
.ec-inlineBtn--cancel.disabled.focus,
.ec-inlineBtn--cancel[disabled]:hover,
.ec-inlineBtn--cancel[disabled]:focus,
.ec-inlineBtn--cancel[disabled].focus,
fieldset[disabled] .ec-inlineBtn--cancel:hover,
fieldset[disabled] .ec-inlineBtn--cancel:focus,
fieldset[disabled] .ec-inlineBtn--cancel.focus {
    background-color: #525263;
    border-color: #525263;
}

.ec-inlineBtn--cancel .badge {
    color: #525263;
    background-color: #fff;
}

.ec-inlineBtn--cancel .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

/*
ブロックボタン（全幅）

ボタンサイズは em で指定するため、テキストサイズの変更でボタンサイズを変更できます。

ex [商品詳細ページ　カートボタン部分](http://demo3.ec-cube.net/products/detail/30)

Markup:
p: .ec-blockBtn 住所検索
p: .ec-blockBtn--primary もっと見る
p: .ec-blockBtn--action カートに入れる
p: .ec-blockBtn--cancel キャンセル

Styleguide 2.1.2
*/
.ec-blockBtn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: #525263;
    background-color: #F5F7F8;
    border-color: #ccc;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

.ec-blockBtn:focus,
.ec-blockBtn.focus,
.ec-blockBtn:active:focus,
.ec-blockBtn:active.focus,
.ec-blockBtn.active:focus,
.ec-blockBtn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-blockBtn:hover,
.ec-blockBtn:focus,
.ec-blockBtn.focus {
    color: #525263;
    text-decoration: none;
}

.ec-blockBtn:active,
.ec-blockBtn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-blockBtn.disabled,
.ec-blockBtn[disabled],
fieldset[disabled] .ec-blockBtn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-blockBtn:focus,
.ec-blockBtn.focus {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #8c8c8c;
}

.ec-blockBtn:hover {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #adadad;
}

.ec-blockBtn:active,
.ec-blockBtn.active,
.open>.ec-blockBtn.dropdown-toggle {
    color: #525263;
    background-color: #d7dfe3;
    background-image: none;
    border-color: #adadad;
}

.ec-blockBtn:active:hover,
.ec-blockBtn:active:focus,
.ec-blockBtn:active.focus,
.ec-blockBtn.active:hover,
.ec-blockBtn.active:focus,
.ec-blockBtn.active.focus,
.open>.ec-blockBtn.dropdown-toggle:hover,
.open>.ec-blockBtn.dropdown-toggle:focus,
.open>.ec-blockBtn.dropdown-toggle.focus {
    color: #525263;
    background-color: #c2ced4;
    border-color: #8c8c8c;
}

.ec-blockBtn.disabled:hover,
.ec-blockBtn.disabled:focus,
.ec-blockBtn.disabled.focus,
.ec-blockBtn[disabled]:hover,
.ec-blockBtn[disabled]:focus,
.ec-blockBtn[disabled].focus,
fieldset[disabled] .ec-blockBtn:hover,
fieldset[disabled] .ec-blockBtn:focus,
fieldset[disabled] .ec-blockBtn.focus {
    background-color: #F5F7F8;
    border-color: #ccc;
}

.ec-blockBtn .badge {
    color: #F5F7F8;
    background-color: #525263;
}

.ec-blockBtn .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

.ec-blockBtn--primary {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: #fff;
    background-color: #5CB1B1;
    border-color: #5CB1B1;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

.ec-blockBtn--primary:focus,
.ec-blockBtn--primary.focus,
.ec-blockBtn--primary:active:focus,
.ec-blockBtn--primary:active.focus,
.ec-blockBtn--primary.active:focus,
.ec-blockBtn--primary.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-blockBtn--primary:hover,
.ec-blockBtn--primary:focus,
.ec-blockBtn--primary.focus {
    color: #525263;
    text-decoration: none;
}

.ec-blockBtn--primary:active,
.ec-blockBtn--primary.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--primary.disabled,
.ec-blockBtn--primary[disabled],
fieldset[disabled] .ec-blockBtn--primary {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-blockBtn--primary:focus,
.ec-blockBtn--primary.focus {
    color: #fff;
    background-color: #479393;
    border-color: #2e6060;
}

.ec-blockBtn--primary:hover {
    color: #fff;
    background-color: #479393;
    border-color: #438d8d;
}

.ec-blockBtn--primary:active,
.ec-blockBtn--primary.active,
.open>.ec-blockBtn--primary.dropdown-toggle {
    color: #fff;
    background-color: #479393;
    background-image: none;
    border-color: #438d8d;
}

.ec-blockBtn--primary:active:hover,
.ec-blockBtn--primary:active:focus,
.ec-blockBtn--primary:active.focus,
.ec-blockBtn--primary.active:hover,
.ec-blockBtn--primary.active:focus,
.ec-blockBtn--primary.active.focus,
.open>.ec-blockBtn--primary.dropdown-toggle:hover,
.open>.ec-blockBtn--primary.dropdown-toggle:focus,
.open>.ec-blockBtn--primary.dropdown-toggle.focus {
    color: #fff;
    background-color: #3b7b7b;
    border-color: #2e6060;
}

.ec-blockBtn--primary.disabled:hover,
.ec-blockBtn--primary.disabled:focus,
.ec-blockBtn--primary.disabled.focus,
.ec-blockBtn--primary[disabled]:hover,
.ec-blockBtn--primary[disabled]:focus,
.ec-blockBtn--primary[disabled].focus,
fieldset[disabled] .ec-blockBtn--primary:hover,
fieldset[disabled] .ec-blockBtn--primary:focus,
fieldset[disabled] .ec-blockBtn--primary.focus {
    background-color: #5CB1B1;
    border-color: #5CB1B1;
}

.ec-blockBtn--primary .badge {
    color: #5CB1B1;
    background-color: #fff;
}

.ec-blockBtn--primary .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

.ec-shelfGrid__item .more_btn,
.ec-blockBtn--action {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 1.5em;
    font-size: 13px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    color: #fff;
    background-color: #21913a;
    border-color: #21913a;
    display: block;
    width: 100%;
    height: auto;
    line-height: 1;
    transition: .3s;
    border-radius: 100vmax;
}

.ec-shelfGrid .more_btn:hover {
    background-color: #2cb900;
    border-color: #2cb900;
}

.ec-blockBtn--action:focus,
.ec-blockBtn--action.focus,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action:active.focus,
.ec-blockBtn--action.active:focus,
.ec-blockBtn--action.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-blockBtn--action:hover,
.ec-blockBtn--action:focus,
.ec-blockBtn--action.focus {
    color: #525263;
    text-decoration: none;
}

.ec-blockBtn--action:active,
.ec-blockBtn--action.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--action[disabled] {
    pointer-events: none;
}

.ec-blockBtn--action.disabled,
.ec-blockBtn--action[disabled],
fieldset[disabled] .ec-blockBtn--action {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-blockBtn--action:focus,
.ec-blockBtn--action.focus {
    color: #fff;
    background-color: #d33828;
    border-color: #93271c;
}

.ec-blockBtn--action:hover {
    color: #fff;
    background-color: #2cb900;
    border-color: #2cb900;
}

.ec-blockBtn--action:active,
.ec-blockBtn--action.active,
.open>.ec-blockBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #d33828;
    background-image: none;
    border-color: #cb3526;
}

.ec-blockBtn--action:active:hover,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action:active.focus,
.ec-blockBtn--action.active:hover,
.ec-blockBtn--action.active:focus,
.ec-blockBtn--action.active.focus,
.open>.ec-blockBtn--action.dropdown-toggle:hover,
.open>.ec-blockBtn--action.dropdown-toggle:focus,
.open>.ec-blockBtn--action.dropdown-toggle.focus {
    color: #fff;
    background-color: #b53022;
    border-color: #93271c;
}

.ec-blockBtn--action.disabled:hover,
.ec-blockBtn--action.disabled:focus,
.ec-blockBtn--action.disabled.focus,
.ec-blockBtn--action[disabled]:hover,
.ec-blockBtn--action[disabled]:focus,
.ec-blockBtn--action[disabled].focus,
fieldset[disabled] .ec-blockBtn--action:hover,
fieldset[disabled] .ec-blockBtn--action:focus,
fieldset[disabled] .ec-blockBtn--action.focus {
    background-color: #DE5D50;
    border-color: #DE5D50;
}

.ec-blockBtn--action .badge {
    color: #DE5D50;
    background-color: #fff;
}

.ec-blockBtn--action .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

.ec-blockBtn--cancel {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 1.5em 1em;
    font-size: 13px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    color: #fff !important;
    background-color: #525263;
    border-color: #525263;
    display: block;
    width: 100%;
    height: auto;
    line-height: 1;
    border-radius: 100vmax;
}


.ec-productRole .ec-blockBtn--action.open_cart_modal {
    animation: btnzoom 5s infinite linear;
    margin-top: 1em;
}

.same_category_product_area .same_category_product_block .product_grid.osusume .product_item:not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(8)) {
    display: none;
}

@keyframes btnzoom {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1);
    }

    47% {
        transform: scale(1.05);
    }

    49% {
        transform: scale(1);
    }

    51% {
        transform: scale(1.05);
    }

    53% {
        transform: scale(1);
    }

    55% {
        transform: scale(1.05);
    }

    57% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.ec-productRole .ec-blockBtn--action.open_cart_modal,
.ec-productRole .js_buy_btn_area .js_buy_btn,
.ec-productRole .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: center;
}

.ec-productRole .ec-blockBtn--action.open_cart_modal::before,
.ec-productRole .js_buy_btn_area .js_buy_btn::before,
.ec-productRole .ec-blockBtn--cancel::before {
    content: "";
    width: 1em;
    height: 1em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.ec-productRole .ec-blockBtn--action.open_cart_modal::before,
.ec-productRole .js_buy_btn_area .js_buy_btn::before {
    transform: scale(1.3);
}

.ec-blockBtn--action.open_cart_modal::before {
    background-image: url(/html/user_data/assets/img/common/icon_cart_w.svg);
}

.ec-productRole .js_buy_btn_area .js_buy_btn::before {
    background-image: url(/html/user_data/assets/img/common/icon_buy_w.svg);
}

.ec-productRole .ec-blockBtn--cancel::before {
    background-image: url(/html/user_data/assets/img/common/icon_fav_btn.svg);
    transform: translateY(.1em);
}

.ec-productRole .ec-blockBtn--cancel.fav_done::before {
    background-image: url(/html/user_data/assets/img/common/icon_fav_btn_done.svg);
}

.ec-productRole__stock {
    font-size: 16px;
}

.ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel.focus,
.ec-blockBtn--cancel:active:focus,
.ec-blockBtn--cancel:active.focus,
.ec-blockBtn--cancel.active:focus,
.ec-blockBtn--cancel.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-blockBtn--cancel:hover,
.ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel.focus {
    color: #525263;
    text-decoration: none;
}

.ec-blockBtn--cancel:active,
.ec-blockBtn--cancel.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--cancel.disabled,
.ec-blockBtn--cancel[disabled],
fieldset[disabled] .ec-blockBtn--cancel {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel.focus {
    color: #fff;
    background-color: #3b3b47;
    border-color: #18181d;
}

.ec-blockBtn--cancel:hover {
    color: #fff;
    background-color: #3b3b47;
    border-color: #363642;
}

.ec-blockBtn--cancel:active,
.ec-blockBtn--cancel.active,
.open>.ec-blockBtn--cancel.dropdown-toggle {
    color: #fff;
    background-color: #3b3b47;
    background-image: none;
    border-color: #363642;
}

.ec-blockBtn--cancel:active:hover,
.ec-blockBtn--cancel:active:focus,
.ec-blockBtn--cancel:active.focus,
.ec-blockBtn--cancel.active:hover,
.ec-blockBtn--cancel.active:focus,
.ec-blockBtn--cancel.active.focus,
.open>.ec-blockBtn--cancel.dropdown-toggle:hover,
.open>.ec-blockBtn--cancel.dropdown-toggle:focus,
.open>.ec-blockBtn--cancel.dropdown-toggle.focus {
    color: #fff;
    background-color: #2b2b34;
    border-color: #18181d;
}

.ec-blockBtn--cancel.disabled:hover,
.ec-blockBtn--cancel.disabled:focus,
.ec-blockBtn--cancel.disabled.focus,
.ec-blockBtn--cancel[disabled]:hover,
.ec-blockBtn--cancel[disabled]:focus,
.ec-blockBtn--cancel[disabled].focus,
fieldset[disabled] .ec-blockBtn--cancel:hover,
fieldset[disabled] .ec-blockBtn--cancel:focus,
fieldset[disabled] .ec-blockBtn--cancel.focus {
    background-color: #525263;
    border-color: #525263;
}

.ec-blockBtn--cancel .badge {
    color: #525263;
    background-color: #fff;
}

.ec-blockBtn--cancel .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

/*
アイコンボタン

SVGアイコンを用いたアイコンボタンです。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 2.2
*/
/*
アイコンボタン

閉じるなどSVGアイコンを用いたボタン装飾で利用します。

ex [ログイン画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/login)

Markup:
a.ec-closeBtn
  .ec-icon
    img(src='/moc/icon/cross.svg', alt='close')

Styleguide 2.2.1
*/
.ec-closeBtn {
    cursor: pointer;
}

.ec-closeBtn .ec-icon img {
    display: inline-block;
    margin-right: 5px;
    width: 1em;
    height: 1em;
    position: relative;
    top: -1px;
    vertical-align: middle;
}

/*
アイコンボタン(○)

閉じるなどSVGアイコンを用いたボタン装飾で利用します。

ex [ログイン画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/login)



ex [お届け先編集画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/delivery)

Markup:
a.ec-closeBtn--circle
  .ec-icon
    img(src='/moc/icon/cross-white.svg', alt='close')

Styleguide 2.2.2
*/
.ec-closeBtn--circle {
    display: block;
    border: 0 none;
    padding: 0;
    margin: 0;
    text-shadow: none;
    box-shadow: none;
    border-radius: 50%;
    background: #B8BEC4;
    cursor: pointer;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    position: relative;
    text-align: center;
}

.ec-closeBtn--circle .ec-icon img {
    display: block;
    margin-top: -.5em;
    margin-left: -.5em;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
その他のボタン

通常のボタンや、アイコンボタン以外のボタンを定義します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 2.3
*/
/*
ページトップボタン

ページトップボタンを表示します

ex [商品詳細ページ　カートボタン部分](http://demo3.ec-cube.net/products/detail/30)

Markup:
.ec-blockTopBtn

Styleguide 2.3.1
*/
.ec-blockTopBtn {
    display: none !important;
    position: fixed;
    width: 120px;
    height: 40px;
    right: 0;
    bottom: 10px;
    cursor: pointer;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    opacity: 0 !important;
    background-color: #9da3a9;
}

@media only screen and (min-width: 768px) {
    .ec-blockTopBtn {
        right: 30px;
        bottom: 30px;
    }
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォーム部品(テキスト)

テキストや数値の入力項目に関する要素を定義します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 3.1
*/
/*
フォーム

`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。


ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-input
  input(type="number")
p.ec-input
  textarea(rows="6")

Styleguide 3.1.1
*/

.ec-input input+input {
    margin-top: .6em;
}

.ec-input input[type="search"],
.ec-halfInput input[type="search"],
.ec-numberInput input[type="search"],
.ec-zipInput input[type="search"],
.ec-telInput input[type="search"],
.ec-select input[type="search"],
.ec-birth input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-input input[type="radio"],
.ec-halfInput input[type="radio"],
.ec-numberInput input[type="radio"],
.ec-zipInput input[type="radio"],
.ec-telInput input[type="radio"],
.ec-select input[type="radio"],
.ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

.ec-input input[type="file"],
.ec-halfInput input[type="file"],
.ec-numberInput input[type="file"],
.ec-zipInput input[type="file"],
.ec-telInput input[type="file"],
.ec-select input[type="file"],
.ec-birth input[type="file"] {
    display: block;
}

.ec-input input[type="range"],
.ec-halfInput input[type="range"],
.ec-numberInput input[type="range"],
.ec-zipInput input[type="range"],
.ec-telInput input[type="range"],
.ec-select input[type="range"],
.ec-birth input[type="range"] {
    display: block;
    width: 100%;
}

.ec-input select[multiple],
.ec-halfInput select[multiple],
.ec-numberInput select[multiple],
.ec-zipInput select[multiple],
.ec-telInput select[multiple],
.ec-select select[multiple],
.ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
    height: auto;
}

.ec-input input[type="file"]:focus,
.ec-halfInput input[type="file"]:focus,
.ec-numberInput input[type="file"]:focus,
.ec-zipInput input[type="file"]:focus,
.ec-telInput input[type="file"]:focus,
.ec-select input[type="file"]:focus,
.ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-input input,
.ec-halfInput input,
.ec-numberInput input,
.ec-zipInput input,
.ec-telInput input,
.ec-select input,
.ec-birth input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px;
}

.ec-input input:focus,
.ec-halfInput input:focus,
.ec-numberInput input:focus,
.ec-zipInput input:focus,
.ec-telInput input:focus,
.ec-select input:focus,
.ec-birth input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ec-input input::-moz-placeholder,
.ec-halfInput input::-moz-placeholder,
.ec-numberInput input::-moz-placeholder,
.ec-zipInput input::-moz-placeholder,
.ec-telInput input::-moz-placeholder,
.ec-select input::-moz-placeholder,
.ec-birth input::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.ec-input input:-ms-input-placeholder,
.ec-halfInput input:-ms-input-placeholder,
.ec-numberInput input:-ms-input-placeholder,
.ec-zipInput input:-ms-input-placeholder,
.ec-telInput input:-ms-input-placeholder,
.ec-select input:-ms-input-placeholder,
.ec-birth input:-ms-input-placeholder {
    color: #999;
}

.ec-input input::-webkit-input-placeholder,
.ec-halfInput input::-webkit-input-placeholder,
.ec-numberInput input::-webkit-input-placeholder,
.ec-zipInput input::-webkit-input-placeholder,
.ec-telInput input::-webkit-input-placeholder,
.ec-select input::-webkit-input-placeholder,
.ec-birth input::-webkit-input-placeholder {
    color: #999;
}

.ec-input input::-ms-expand,
.ec-halfInput input::-ms-expand,
.ec-numberInput input::-ms-expand,
.ec-zipInput input::-ms-expand,
.ec-telInput input::-ms-expand,
.ec-select input::-ms-expand,
.ec-birth input::-ms-expand {
    border: 0;
    background-color: transparent;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
.ec-input input[readonly],
.ec-halfInput input[readonly],
.ec-numberInput input[readonly],
.ec-zipInput input[readonly],
.ec-telInput input[readonly],
.ec-select input[readonly],
.ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    background-color: #eeeeee;
    opacity: 1;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    cursor: not-allowed;
}

@media only screen and (min-width: 768px) {

    .ec-input input,
    .ec-halfInput input,
    .ec-numberInput input,
    .ec-zipInput input,
    .ec-telInput input,
    .ec-select input,
    .ec-birth input {
        font-size: 14px;
    }
}

.ec-input select,
.ec-halfInput select,
.ec-numberInput select,
.ec-zipInput select,
.ec-telInput select,
.ec-select select,
.ec-birth select {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px;
}

.ec-input select:focus,
.ec-halfInput select:focus,
.ec-numberInput select:focus,
.ec-zipInput select:focus,
.ec-telInput select:focus,
.ec-select select:focus,
.ec-birth select:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ec-input select::-moz-placeholder,
.ec-halfInput select::-moz-placeholder,
.ec-numberInput select::-moz-placeholder,
.ec-zipInput select::-moz-placeholder,
.ec-telInput select::-moz-placeholder,
.ec-select select::-moz-placeholder,
.ec-birth select::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.ec-input select:-ms-input-placeholder,
.ec-halfInput select:-ms-input-placeholder,
.ec-numberInput select:-ms-input-placeholder,
.ec-zipInput select:-ms-input-placeholder,
.ec-telInput select:-ms-input-placeholder,
.ec-select select:-ms-input-placeholder,
.ec-birth select:-ms-input-placeholder {
    color: #999;
}

.ec-input select::-webkit-input-placeholder,
.ec-halfInput select::-webkit-input-placeholder,
.ec-numberInput select::-webkit-input-placeholder,
.ec-zipInput select::-webkit-input-placeholder,
.ec-telInput select::-webkit-input-placeholder,
.ec-select select::-webkit-input-placeholder,
.ec-birth select::-webkit-input-placeholder {
    color: #999;
}

.ec-input select::-ms-expand,
.ec-halfInput select::-ms-expand,
.ec-numberInput select::-ms-expand,
.ec-zipInput select::-ms-expand,
.ec-telInput select::-ms-expand,
.ec-select select::-ms-expand,
.ec-birth select::-ms-expand {
    border: 0;
    background-color: transparent;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
.ec-input select[readonly],
.ec-halfInput select[readonly],
.ec-numberInput select[readonly],
.ec-zipInput select[readonly],
.ec-telInput select[readonly],
.ec-select select[readonly],
.ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    background-color: #eeeeee;
    opacity: 1;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    cursor: not-allowed;
}

@media only screen and (min-width: 768px) {

    .ec-input select,
    .ec-halfInput select,
    .ec-numberInput select,
    .ec-zipInput select,
    .ec-telInput select,
    .ec-select select,
    .ec-birth select {
        font-size: 14px;
    }
}

.ec-input textarea,
.ec-halfInput textarea,
.ec-numberInput textarea,
.ec-zipInput textarea,
.ec-telInput textarea,
.ec-select textarea,
.ec-birth textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px;
}

.ec-input textarea:focus,
.ec-halfInput textarea:focus,
.ec-numberInput textarea:focus,
.ec-zipInput textarea:focus,
.ec-telInput textarea:focus,
.ec-select textarea:focus,
.ec-birth textarea:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ec-input textarea::-moz-placeholder,
.ec-halfInput textarea::-moz-placeholder,
.ec-numberInput textarea::-moz-placeholder,
.ec-zipInput textarea::-moz-placeholder,
.ec-telInput textarea::-moz-placeholder,
.ec-select textarea::-moz-placeholder,
.ec-birth textarea::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.ec-input textarea:-ms-input-placeholder,
.ec-halfInput textarea:-ms-input-placeholder,
.ec-numberInput textarea:-ms-input-placeholder,
.ec-zipInput textarea:-ms-input-placeholder,
.ec-telInput textarea:-ms-input-placeholder,
.ec-select textarea:-ms-input-placeholder,
.ec-birth textarea:-ms-input-placeholder {
    color: #999;
}

.ec-input textarea::-webkit-input-placeholder,
.ec-halfInput textarea::-webkit-input-placeholder,
.ec-numberInput textarea::-webkit-input-placeholder,
.ec-zipInput textarea::-webkit-input-placeholder,
.ec-telInput textarea::-webkit-input-placeholder,
.ec-select textarea::-webkit-input-placeholder,
.ec-birth textarea::-webkit-input-placeholder {
    color: #999;
}

.ec-input textarea::-ms-expand,
.ec-halfInput textarea::-ms-expand,
.ec-numberInput textarea::-ms-expand,
.ec-zipInput textarea::-ms-expand,
.ec-telInput textarea::-ms-expand,
.ec-select textarea::-ms-expand,
.ec-birth textarea::-ms-expand {
    border: 0;
    background-color: transparent;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
.ec-input textarea[readonly],
.ec-halfInput textarea[readonly],
.ec-numberInput textarea[readonly],
.ec-zipInput textarea[readonly],
.ec-telInput textarea[readonly],
.ec-select textarea[readonly],
.ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    background-color: #eeeeee;
    opacity: 1;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    cursor: not-allowed;
}

@media only screen and (min-width: 768px) {

    .ec-input textarea,
    .ec-halfInput textarea,
    .ec-numberInput textarea,
    .ec-zipInput textarea,
    .ec-telInput textarea,
    .ec-select textarea,
    .ec-birth textarea {
        font-size: 14px;
    }
}

.ec-input input:focus,
.ec-halfInput input:focus,
.ec-numberInput input:focus,
.ec-zipInput input:focus,
.ec-telInput input:focus,
.ec-select input:focus,
.ec-birth input:focus,
.ec-input textarea:focus,
.ec-halfInput textarea:focus,
.ec-numberInput textarea:focus,
.ec-zipInput textarea:focus,
.ec-telInput textarea:focus,
.ec-select textarea:focus,
.ec-birth textarea:focus {
    box-shadow: none;
    border-color: #3c8dbc;
}

.ec-input input,
.ec-halfInput input,
.ec-numberInput input,
.ec-zipInput input,
.ec-telInput input,
.ec-select input,
.ec-birth input {
    height: 40px;
    margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {

    .ec-input input,
    .ec-halfInput input,
    .ec-numberInput input,
    .ec-zipInput input,
    .ec-telInput input,
    .ec-select input,
    .ec-birth input {
        margin-bottom: 16px;
    }
}

.ec-input textarea,
.ec-halfInput textarea,
.ec-numberInput textarea,
.ec-zipInput textarea,
.ec-telInput textarea,
.ec-select textarea,
.ec-birth textarea {
    height: auto;
    min-height: 100px;
}

.ec-input p,
.ec-halfInput p,
.ec-numberInput p,
.ec-zipInput p,
.ec-telInput p,
.ec-select p,
.ec-birth p {
    line-height: 1.4;
}

.ec-input .ec-errorMessage,
.ec-halfInput .ec-errorMessage,
.ec-numberInput .ec-errorMessage,
.ec-zipInput .ec-errorMessage,
.ec-telInput .ec-errorMessage,
.ec-select .ec-errorMessage,
.ec-birth .ec-errorMessage {
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #DE5D50;
}

.error.ec-input input,
.error.ec-halfInput input,
.error.ec-numberInput input,
.error.ec-zipInput input,
.error.ec-telInput input,
.error.ec-select input,
.error.ec-birth input,
.error.ec-input select,
.error.ec-halfInput select,
.error.ec-numberInput select,
.error.ec-zipInput select,
.error.ec-telInput select,
.error.ec-select select,
.error.ec-birth select {
    margin-bottom: 5px;
    border-color: #CF3F34;
    background: #FDF1F0;
}

.ec-checkbox .ec-errorMessage {
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #DE5D50;
}

.error.ec-checkbox input,
.error.ec-checkbox label {
    border-color: #CF3F34;
    background: #FDF1F0;
}

/*
フォーム（text２つ）

姓名など2つ入力させたい入力項目で使用します。

入力フォームを半分で用意したいときにも利用可能です。

ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-halfInput
  input(type="text")
  input(type="text")
p.ec-halfInput
  input(type="text")

Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
    display: inline-block;
    width: 47%;
    margin-left: 2%;
}

@media only screen and (min-width: 768px) {
    .ec-halfInput input[type='text'] {
        margin-left: 15px;
        width: 45%;
    }
}

.ec-halfInput input[type='text']:first-child {
    margin-left: 0;
}

/*
数量ボタン

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [商品詳細画面　数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-numberInput
  span 数量
  input(type="number",value="0")

Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
    display: inline-block;
    width: auto;
    max-width: 100px;
    text-align: right;
}

/*
郵便番号フォーム

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　郵便番号部分](http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-zipInput
  span 〒
  input(type="text")
.ec-zipInputHelp
  a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
    .ec-zipInputHelp__icon
      .ec-icon
        img(src='/moc/icon/question-white.svg', alt='')
    span 郵便番号検索
.ec-zipAuto
  a.ec-inlineBtn 郵便番号から自動入力

Styleguide 3.1.4
*/
.ec-zipInput {
    display: inline-block;
}

.ec-zipInput input {
    display: inline-block;
    text-align: left;
    width: auto;
    max-width: 8em;
    font-size: 16px;
}

.ec-zipInput span {
    display: inline-block;
    padding: 0 5px 0 3px;
    margin-left: 5px;
}

.ec-zipInputHelp {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 16px;
    vertical-align: baseline;
    line-height: 0;
}

.ec-zipInputHelp .ec-zipInputHelp__icon {
    display: inline-block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #525263;
    border-radius: 50%;
    font-size: 13px;
    position: relative;
    top: -6px;
}

.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
    width: 1em;
    height: 1em;
    position: relative;
    left: 3px;
    top: 3px;
}

.ec-zipInputHelp span {
    margin-left: 8px;
    display: inline-block;
    color: #0092C4;
    vertical-align: 3px;
}

.ec-zipAuto {
    margin-bottom: 16px;
}

.ec-zipAuto .ec-inlineBtn {
    font-weight: normal;
}

/*
電話番号ボタン

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　電話番号部分](http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-telInput
  input(type="text")

Styleguide 3.1.5
*/
.ec-telInput input {
    max-width: 10em;
    text-align: left;
}

/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォーム部品(テキスト)

テキストや数値の入力項目に関する要素を定義します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 3.1
*/
/*
フォーム

`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。


ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-input
  input(type="number")
p.ec-input
  textarea(rows="6")

Styleguide 3.1.1
*/
.ec-input input[type="search"],
.ec-halfInput input[type="search"],
.ec-numberInput input[type="search"],
.ec-zipInput input[type="search"],
.ec-telInput input[type="search"],
.ec-select input[type="search"],
.ec-birth input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-input input[type="radio"],
.ec-halfInput input[type="radio"],
.ec-numberInput input[type="radio"],
.ec-zipInput input[type="radio"],
.ec-telInput input[type="radio"],
.ec-select input[type="radio"],
.ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

.ec-input input[type="file"],
.ec-halfInput input[type="file"],
.ec-numberInput input[type="file"],
.ec-zipInput input[type="file"],
.ec-telInput input[type="file"],
.ec-select input[type="file"],
.ec-birth input[type="file"] {
    display: block;
}

.ec-input input[type="range"],
.ec-halfInput input[type="range"],
.ec-numberInput input[type="range"],
.ec-zipInput input[type="range"],
.ec-telInput input[type="range"],
.ec-select input[type="range"],
.ec-birth input[type="range"] {
    display: block;
    width: 100%;
}

.ec-input select[multiple],
.ec-halfInput select[multiple],
.ec-numberInput select[multiple],
.ec-zipInput select[multiple],
.ec-telInput select[multiple],
.ec-select select[multiple],
.ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
    height: auto;
}

.ec-input input[type="file"]:focus,
.ec-halfInput input[type="file"]:focus,
.ec-numberInput input[type="file"]:focus,
.ec-zipInput input[type="file"]:focus,
.ec-telInput input[type="file"]:focus,
.ec-select input[type="file"]:focus,
.ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-input input,
.ec-halfInput input,
.ec-numberInput input,
.ec-zipInput input,
.ec-telInput input,
.ec-select input,
.ec-birth input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px;
}

.ec-input input:focus,
.ec-halfInput input:focus,
.ec-numberInput input:focus,
.ec-zipInput input:focus,
.ec-telInput input:focus,
.ec-select input:focus,
.ec-birth input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ec-input input::-moz-placeholder,
.ec-halfInput input::-moz-placeholder,
.ec-numberInput input::-moz-placeholder,
.ec-zipInput input::-moz-placeholder,
.ec-telInput input::-moz-placeholder,
.ec-select input::-moz-placeholder,
.ec-birth input::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.ec-input input:-ms-input-placeholder,
.ec-halfInput input:-ms-input-placeholder,
.ec-numberInput input:-ms-input-placeholder,
.ec-zipInput input:-ms-input-placeholder,
.ec-telInput input:-ms-input-placeholder,
.ec-select input:-ms-input-placeholder,
.ec-birth input:-ms-input-placeholder {
    color: #999;
}

.ec-input input::-webkit-input-placeholder,
.ec-halfInput input::-webkit-input-placeholder,
.ec-numberInput input::-webkit-input-placeholder,
.ec-zipInput input::-webkit-input-placeholder,
.ec-telInput input::-webkit-input-placeholder,
.ec-select input::-webkit-input-placeholder,
.ec-birth input::-webkit-input-placeholder {
    color: #999;
}

.ec-input input::-ms-expand,
.ec-halfInput input::-ms-expand,
.ec-numberInput input::-ms-expand,
.ec-zipInput input::-ms-expand,
.ec-telInput input::-ms-expand,
.ec-select input::-ms-expand,
.ec-birth input::-ms-expand {
    border: 0;
    background-color: transparent;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
.ec-input input[readonly],
.ec-halfInput input[readonly],
.ec-numberInput input[readonly],
.ec-zipInput input[readonly],
.ec-telInput input[readonly],
.ec-select input[readonly],
.ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    background-color: #eeeeee;
    opacity: 1;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    cursor: not-allowed;
}

@media only screen and (min-width: 768px) {

    .ec-input input,
    .ec-halfInput input,
    .ec-numberInput input,
    .ec-zipInput input,
    .ec-telInput input,
    .ec-select input,
    .ec-birth input {
        font-size: 14px;
    }
}

.ec-input select,
.ec-halfInput select,
.ec-numberInput select,
.ec-zipInput select,
.ec-telInput select,
.ec-select select,
.ec-birth select {
    display: block;
    width: 100%;
    height: 34px;
    padding: 2px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px;
}

.ec-input select:focus,
.ec-halfInput select:focus,
.ec-numberInput select:focus,
.ec-zipInput select:focus,
.ec-telInput select:focus,
.ec-select select:focus,
.ec-birth select:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ec-input select::-moz-placeholder,
.ec-halfInput select::-moz-placeholder,
.ec-numberInput select::-moz-placeholder,
.ec-zipInput select::-moz-placeholder,
.ec-telInput select::-moz-placeholder,
.ec-select select::-moz-placeholder,
.ec-birth select::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.ec-input select:-ms-input-placeholder,
.ec-halfInput select:-ms-input-placeholder,
.ec-numberInput select:-ms-input-placeholder,
.ec-zipInput select:-ms-input-placeholder,
.ec-telInput select:-ms-input-placeholder,
.ec-select select:-ms-input-placeholder,
.ec-birth select:-ms-input-placeholder {
    color: #999;
}

.ec-input select::-webkit-input-placeholder,
.ec-halfInput select::-webkit-input-placeholder,
.ec-numberInput select::-webkit-input-placeholder,
.ec-zipInput select::-webkit-input-placeholder,
.ec-telInput select::-webkit-input-placeholder,
.ec-select select::-webkit-input-placeholder,
.ec-birth select::-webkit-input-placeholder {
    color: #999;
}

.ec-input select::-ms-expand,
.ec-halfInput select::-ms-expand,
.ec-numberInput select::-ms-expand,
.ec-zipInput select::-ms-expand,
.ec-telInput select::-ms-expand,
.ec-select select::-ms-expand,
.ec-birth select::-ms-expand {
    border: 0;
    background-color: transparent;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
.ec-input select[readonly],
.ec-halfInput select[readonly],
.ec-numberInput select[readonly],
.ec-zipInput select[readonly],
.ec-telInput select[readonly],
.ec-select select[readonly],
.ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    background-color: #eeeeee;
    opacity: 1;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    cursor: not-allowed;
}

@media only screen and (min-width: 768px) {

    .ec-input select,
    .ec-halfInput select,
    .ec-numberInput select,
    .ec-zipInput select,
    .ec-telInput select,
    .ec-select select,
    .ec-birth select {
        font-size: 14px;
    }
}

.ec-input textarea,
.ec-halfInput textarea,
.ec-numberInput textarea,
.ec-zipInput textarea,
.ec-telInput textarea,
.ec-select textarea,
.ec-birth textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px;
}

.ec-input textarea:focus,
.ec-halfInput textarea:focus,
.ec-numberInput textarea:focus,
.ec-zipInput textarea:focus,
.ec-telInput textarea:focus,
.ec-select textarea:focus,
.ec-birth textarea:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ec-input textarea::-moz-placeholder,
.ec-halfInput textarea::-moz-placeholder,
.ec-numberInput textarea::-moz-placeholder,
.ec-zipInput textarea::-moz-placeholder,
.ec-telInput textarea::-moz-placeholder,
.ec-select textarea::-moz-placeholder,
.ec-birth textarea::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.ec-input textarea:-ms-input-placeholder,
.ec-halfInput textarea:-ms-input-placeholder,
.ec-numberInput textarea:-ms-input-placeholder,
.ec-zipInput textarea:-ms-input-placeholder,
.ec-telInput textarea:-ms-input-placeholder,
.ec-select textarea:-ms-input-placeholder,
.ec-birth textarea:-ms-input-placeholder {
    color: #999;
}

.ec-input textarea::-webkit-input-placeholder,
.ec-halfInput textarea::-webkit-input-placeholder,
.ec-numberInput textarea::-webkit-input-placeholder,
.ec-zipInput textarea::-webkit-input-placeholder,
.ec-telInput textarea::-webkit-input-placeholder,
.ec-select textarea::-webkit-input-placeholder,
.ec-birth textarea::-webkit-input-placeholder {
    color: #999;
}

.ec-input textarea::-ms-expand,
.ec-halfInput textarea::-ms-expand,
.ec-numberInput textarea::-ms-expand,
.ec-zipInput textarea::-ms-expand,
.ec-telInput textarea::-ms-expand,
.ec-select textarea::-ms-expand,
.ec-birth textarea::-ms-expand {
    border: 0;
    background-color: transparent;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
.ec-input textarea[readonly],
.ec-halfInput textarea[readonly],
.ec-numberInput textarea[readonly],
.ec-zipInput textarea[readonly],
.ec-telInput textarea[readonly],
.ec-select textarea[readonly],
.ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    background-color: #eeeeee;
    opacity: 1;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    cursor: not-allowed;
}

@media only screen and (min-width: 768px) {

    .ec-input textarea,
    .ec-halfInput textarea,
    .ec-numberInput textarea,
    .ec-zipInput textarea,
    .ec-telInput textarea,
    .ec-select textarea,
    .ec-birth textarea {
        font-size: 14px;
    }
}

.ec-input input:focus,
.ec-halfInput input:focus,
.ec-numberInput input:focus,
.ec-zipInput input:focus,
.ec-telInput input:focus,
.ec-select input:focus,
.ec-birth input:focus,
.ec-input textarea:focus,
.ec-halfInput textarea:focus,
.ec-numberInput textarea:focus,
.ec-zipInput textarea:focus,
.ec-telInput textarea:focus,
.ec-select textarea:focus,
.ec-birth textarea:focus {
    box-shadow: none;
    border-color: #3c8dbc;
}

.ec-input input,
.ec-halfInput input,
.ec-numberInput input,
.ec-zipInput input,
.ec-telInput input,
.ec-select input,
.ec-birth input {
    height: 40px;
    margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {

    .ec-input input,
    .ec-halfInput input,
    .ec-numberInput input,
    .ec-zipInput input,
    .ec-telInput input,
    .ec-select input,
    .ec-birth input {
        margin-bottom: 0;
    }
}

.ec-borderedDefs .ec-input+.ec-input {
    margin-top: 10px;
}

.ec-borderedDefs .ec-input input,
.ec-borderedDefs .ec-telInput input {
    margin-bottom: 0;
}

.ec-input textarea,
.ec-halfInput textarea,
.ec-numberInput textarea,
.ec-zipInput textarea,
.ec-telInput textarea,
.ec-select textarea,
.ec-birth textarea {
    height: auto;
    min-height: 100px;
}

.ec-input p,
.ec-halfInput p,
.ec-numberInput p,
.ec-zipInput p,
.ec-telInput p,
.ec-select p,
.ec-birth p {
    line-height: 1.4;
}

.ec-input .ec-errorMessage,
.ec-halfInput .ec-errorMessage,
.ec-numberInput .ec-errorMessage,
.ec-zipInput .ec-errorMessage,
.ec-telInput .ec-errorMessage,
.ec-select .ec-errorMessage,
.ec-birth .ec-errorMessage {
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #DE5D50;
}

.error.ec-input input,
.error.ec-halfInput input,
.error.ec-numberInput input,
.error.ec-zipInput input,
.error.ec-telInput input,
.error.ec-select input,
.error.ec-birth input,
.error.ec-input select,
.error.ec-halfInput select,
.error.ec-numberInput select,
.error.ec-zipInput select,
.error.ec-telInput select,
.error.ec-select select,
.error.ec-birth select {
    margin-bottom: 5px;
    border-color: #CF3F34;
    background: #FDF1F0;
}

.ec-checkbox .ec-errorMessage {
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #DE5D50;
}

.error.ec-checkbox input,
.error.ec-checkbox label {
    border-color: #CF3F34;
    background: #FDF1F0;
}

/*
フォーム（text２つ）

姓名など2つ入力させたい入力項目で使用します。

入力フォームを半分で用意したいときにも利用可能です。

ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-halfInput
  input(type="text")
  input(type="text")
p.ec-halfInput
  input(type="text")

Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
    display: inline-block;
    width: 47%;
    margin-left: 2%;
}

@media only screen and (min-width: 768px) {
    .ec-halfInput input[type='text'] {
        margin-left: 15px;
        width: 45%;
    }
}

.ec-halfInput input[type='text']:first-child {
    margin-left: 0;
}

/*
数量ボタン

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [商品詳細画面　数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-numberInput
  span 数量
  input(type="number",value="0")

Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
    display: inline-block;
    width: 5em;
    max-width: unset;
    text-align: left;
    padding: .5em .5em .5em 1em;
    height: auto;
    line-height: 1;
    margin-left: .3em;
    font-size: 13px;
    margin-bottom: 0;
}

/*
郵便番号フォーム

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　郵便番号部分](http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-zipInput
  span 〒
  input(type="text")
.ec-zipInputHelp
  a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
    .ec-zipInputHelp__icon
      .ec-icon
        img(src='/moc/icon/question-white.svg', alt='')
    span 郵便番号検索
.ec-zipAuto
  a.ec-inlineBtn 郵便番号から自動入力

Styleguide 3.1.4
*/
.ec-zipInput {
    display: inline-block;
}

.ec-zipInput input {
    display: inline-block;
    text-align: left;
    width: auto;
    max-width: 8em;
    font-size: 16px;
}

.ec-zipInput span {
    display: inline-block;
    padding: 0 5px 0 3px;
    margin-left: 5px;
}

.ec-zipInputHelp {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 16px;
    vertical-align: baseline;
    line-height: 0;
}

.ec-zipInputHelp .ec-zipInputHelp__icon {
    display: inline-block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #525263;
    border-radius: 50%;
    font-size: 13px;
    position: relative;
    top: -6px;
}

.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
    width: 1em;
    height: 1em;
    position: relative;
    left: 3px;
    top: 3px;
}

.ec-zipInputHelp span {
    margin-left: 8px;
    display: inline-block;
    color: #0092C4;
    vertical-align: 3px;
}

.ec-zipAuto {
    margin-bottom: 16px;
}

.ec-zipAuto .ec-inlineBtn {
    font-weight: normal;
}

/*
電話番号ボタン

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　電話番号部分](http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-telInput
  input(type="text")

Styleguide 3.1.5
*/
.ec-telInput input {
    max-width: 10em;
    text-align: left;
}

/*
フォーム部品(その他)

フォーム部品でテキストの入力以外の動作要素を定義します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 3.2
*/
/*
ラジオ（水平）

水平に並ぶラジオボタンフィールドです。

各要素をlabelでくくって、コーディングします。

ex [新規会員登録画面　性別選択部分](http://demo3.ec-cube.net/entry)

Markup:
.ec-radio
  label
    input(type="radio")
    span 男性
  label
    input(type="radio")
    span 女性

Styleguide 3.2.2
*/
.ec-radio label {
    margin-right: 20px;
}

.ec-radio input {
    margin-right: 10px;
    margin-bottom: 10px;
}

.ec-radio span {
    font-weight: normal;
}

/*
ラジオ(垂直)

垂直に並ぶラジオボタンフィールドです。

各要素をlabelでくくって、コーディングします。

ex [購入画面 お支払方法](http://demo3.ec-cube.net/shopping)

Markup:
.ec-blockRadio
  label
    input(type="radio")
    span 郵便振替
  label
    input(type="radio")
    span 現金書留
  label
    input(type="radio")
    span 銀行振込
  label
    input(type="radio")
    span 代金引換

Styleguide 3.2.3
*/
.ec-blockRadio label {
    display: block;
}

.ec-blockRadio span {
    padding-left: 10px;
    font-weight: normal;
}

/*
セレクトボックス

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [新規会員登録画面　都道府県選択部分](http://demo3.ec-cube.net/entry)

Markup:
.ec-select
  select
    option 都道府県を選択
    option 北海道
    option 青森県
    option 岩手県
    option ...
.ec-select
  select
    option 選択して下さい
    option 公務員
    option コンサルタント
    option コンピュータ関連技術職
    option コンピュータ関連以外の技術職
    option ...

Styleguide 3.2.4
*/
.ec-selects {
    margin-bottom: 20px;
    border-bottom: 1px dotted #ccc;
}

.ec-select {
    margin-bottom: 10px;
}

#page_shopping .ec-select {
    margin-bottom: 0;
}

#page_shopping #gmo_payment_gateway_credit_form .dl_table dl {
    height: auto !important;
}

#page_shopping #gmo_payment_gateway_credit_form .dl_table dl+dl dt,
#page_shopping #gmo_payment_gateway_credit_form .dl_table dl+dl dd {
    padding-top: 1em;
}

.ec-select.mt {
    margin-top: 16px;
}

.ec-borderedDefs .ec-select.mt {
    margin-top: 0;
}

.ec-orderConfirm p.form-text {
    margin-top: 0.5em;
}

.ec-select select {
    display: inline-block;
    width: auto;
    background-color: #f8f8f8;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
}

.ec-select select:focus {
    box-shadow: none;
}

.ec-select label {
    margin-right: 10px;
    font-weight: bold;
}

.ec-select label:nth-child(3) {
    margin-left: 10px;
    font-weight: bold;
}

.ec-select__delivery {
    display: block;
    margin-right: 16px;
}

@media only screen and (min-width: 768px) {
    .ec-select__delivery {
        display: inline-block;
    }
}

.ec-select__time {
    display: block;
}

@media only screen and (min-width: 768px) {
    .ec-select__time {
        /* display: inline-block; */
    }
}

/*
生年月日選択

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [新規会員登録画面　生年月日選択部分](http://demo3.ec-cube.net/entry)

Markup:
.ec-birth
  select
    option ----
    option 1960
    option 1961
    option 1962
    option ...
  span /
  select
    option --
    option 01
    option 02
    option 03
    option ...
  span /
  select
    option --
    option 01
    option 02
    option 03
    option ...

Styleguide 3.2.5
*/
.ec-birth select {
    display: inline-block;
    width: auto;
    margin: 0 0 10px;
    background-color: #f8f8f8;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
}

.ec-birth select:focus {
    box-shadow: none;
}

@media only screen and (min-width: 768px) {
    .ec-birth select {
        margin: 0 8px 10px;
    }
}

.ec-birth span {
    margin-left: 5px;
}

/*
チェックボックス （水平）

水平に並ぶチェックボックス フィールドです。

各要素をlabelでくくって、コーディングします。

ex [新規会員登録画面　利用規約](http://demo3.ec-cube.net/entry)

Markup:
.ec-checkbox
  label
    input(type="checkbox")
    span 利用規約に同意する

Styleguide 3.2.6
*/
.ec-checkbox label {
    display: inline-block;
}

.ec-checkbox input {
    margin-bottom: 10px;
}

.ec-checkbox span {
    font-weight: normal;
}

/*
チェックボックス (垂直)

垂直に並ぶチェックボックス フィールドです。

各要素をlabelでくくって、コーディングします。

Markup:
.ec-blockCheckbox
  label
    input(type="checkbox")
    span 利用規約に同意する

Styleguide 3.2.7
*/
.ec-blockCheckbox label {
    display: block;
}

.ec-blockCheckbox span {
    font-weight: normal;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォームラベル

フォームのラベルに関する要素を定義します。

sg-wrapper:
<div class="ec-registerRole">
  <div class="ec-off1Grid">
    <div class="ec-off1Grid__cell">
      <div class="ec-borderedDefs">
        <sg-wrapper-content/>
      </div>
    </div>
  </div>
</div>

Styleguide 3.3
*/
/*
ラベル

フォーム要素で利用するラベル要素です。

ex [お問い合わせページ　ラベル部分](http://demo3.ec-cube.net/contact)

Markup:
.ec-borderedDefs
  dl
    dt
      label.ec-label お名前
    dd
      .ec-input
        input(type="text")

Styleguide 3.3.1
*/
.ec-label {
    display: inline-block;
    font-weight: bold;
    /* margin-bottom: 5px; */
}

/*
必須ラベル

必須文字を表示するラベル要素です。

ex [お問い合わせページ　必須ラベル部分](http://demo3.ec-cube.net/contact)


Markup:
.ec-borderedDefs
  dl
    dt
      label.ec-label お名前
        span.ec-required 必須
    dd
      .ec-input
        input(type="text")

Styleguide 3.3.2
*/
.ec-required {
    display: inline-block;
    vertical-align: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    background: #DE5D50;
    padding: .1em .4em;
    border-radius: 5px;
}

@media only screen and (min-width: 768px) {
    .ec-required {
        margin-left: 1em;
    }
}

/*
アイコン

デフォルトテンプレートのアイコンは`.ec-icon`>`img`タグで使用することができます

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Markup:
include /assets/tmpl/elements/4.1.icon.pug
div(style="background-color: rgba(130,130,130,.15); padding: 20px;")
  +icon-all

Styleguide 4.1
*/
.ec-icon img {
    max-width: 80px;
    max-height: 80px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
グリッド

画面を12分割し、グリッドレイアウトに対応するためのスタイルです。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 5.1
*/
/*
2分割グリッド

画面 ２分割の　グリッドです。
Bootstrap の col-sm-6 相当のグリッドを提供します。

Markup:
.ec-grid2
  .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell
  .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 5.1.1
*/
.ec-grid2 {
    display: flex;
    margin: 0;
}

.ec-grid2.flex_box {
    flex-direction: column;
    align-items: center;
    gap: .6em 0;
}


@media only screen and (min-width: 768px) {
    .ec-productRole .ec-grid2 {
        gap: 20px;
    }
}

.ec-grid2 .ec-grid2__cell {
    position: relative;
    min-height: 1px;
}

.ec-grid2 .ec-grid2__cell .ec-sliderItemRole {
    padding: 0;
}

@media (min-width: 768px) {
    .ec-grid2 .ec-grid2__cell {
        width: 350px;
    }

    .ec-grid2 .ec-grid2__cell+.ec-grid2__cell {
        flex-grow: 1;
    }

}

.ec-grid2 .ec-grid2__cell2 {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid2 .ec-grid2__cell2 {
        width: 100%;
    }
}

/*
3分割グリッド

画面　３分割の　グリッドです。


Markup:
.ec-grid3
  .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell
  .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell
  .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell

Styleguide 5.1.2
*/
.ec-grid3 {
    display: block;
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-grid3 {
        display: flex;
    }
}

.ec-grid3 .ec-grid3__cell {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid3 .ec-grid3__cell {
        width: 33.33333%;
    }
}

.ec-grid3 .ec-grid3__cell2 {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid3 .ec-grid3__cell2 {
        width: 66.66667%;
    }
}

.ec-grid3 .ec-grid3__cell3 {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid3 .ec-grid3__cell3 {
        width: 100%;
    }
}

/*
4分割グリッド

画面　４分割の　グリッドです。


Markup:
.ec-grid4
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell

Styleguide 5.1.3
*/
.ec-grid4 {
    display: block;
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-grid4 {
        display: flex;
    }
}

.ec-grid4 .ec-grid4__cell {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid4 .ec-grid4__cell {
        width: 25%;
    }
}

/*
6分割グリッド

2つにまとめた cell2 や 3つをまとめた cell3 タグも使用可能です。


Markup:
.ec-grid6
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6
  .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
  .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
  .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
.ec-grid6
  .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3
  .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3

Styleguide 5.1.4
*/
.ec-grid6 {
    display: block;
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-grid6 {
        display: flex;
    }
}

.ec-grid6 .ec-grid6__cell {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid6 .ec-grid6__cell {
        width: 16.66667%;
    }
}

.ec-grid6 .ec-grid6__cell2 {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid6 .ec-grid6__cell2 {
        width: 33.33333%;
    }
}

.ec-grid6 .ec-grid6__cell3 {
    position: relative;
    min-height: 1px;
}

@media (min-width: 768px) {
    .ec-grid6 .ec-grid6__cell3 {
        width: 50%;
    }
}

/*
中央寄せグリッド 10/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の１０グリッドです

ex [ご利用規約ページ　本文](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-off1Grid
  .ec-off1Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.5
*/
.ec-off1Grid {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off1Grid {
        display: block;
        margin: 0;
    }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off1Grid {
        display: flex;
    }
}

.ec-off1Grid .ec-off1Grid__cell {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off1Grid .ec-off1Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 8.33333%;
    }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off1Grid .ec-off1Grid__cell {
        width: 83.33333%;
    }
}

/*
中央寄せグリッド 8/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の８グリッドです


Markup:
.ec-off2Grid
  .ec-off2Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.6
*/
.ec-off2Grid {
    display: block;
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off2Grid {
        display: flex;
    }
}

.ec-off2Grid .ec-off2Grid__cell {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off2Grid .ec-off2Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 16.66667%;
    }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off2Grid .ec-off2Grid__cell {
        width: 66.66667%;
    }
}

/*
中央寄せグリッド 6/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の６グリッドです


Markup:
.ec-off3Grid
  .ec-off3Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.7
*/
.ec-off3Grid {
    display: block;
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off3Grid {
        display: flex;
    }
}

.ec-off3Grid .ec-off3Grid__cell {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off3Grid .ec-off3Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 25%;
    }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off3Grid .ec-off3Grid__cell {
        width: 50%;
    }
}

/*
中央寄せグリッド 4/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の４グリッドです


Markup:
.ec-off4Grid
  .ec-off4Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod


Styleguide 5.1.8
*/
.ec-off4Grid {
    display: block;
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off4Grid {
        display: flex;
    }
}

.ec-off4Grid .ec-off4Grid__cell {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .ec-off4Grid .ec-off4Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 33.33333%;
    }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off4Grid .ec-off4Grid__cell {
        width: 33.33333%;
    }
}

/*
グリッドオプション

グリッドのセルに対して「左寄せ」「中央寄せ」「右寄せ」のオプションを付与することができます。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 5.1.9
*/
/*
グリッドセルの左寄せ

.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

Markup:
.ec-grid4.ec-grid--left
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.10
*/
.ec-grid--left {
    justify-content: flex-start;
}

/*
グリッドセルの右寄せ

.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

Markup:
.ec-grid4.ec-grid--right
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.11
*/
.ec-grid--right {
    justify-content: flex-end;
}

/*
グリッドセルの中央寄せ

.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

Markup:
.ec-grid4.ec-grid--center
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.12
*/
.ec-grid--center {
    justify-content: center;
}

/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
レイアウト

様々なレイアウトを変更する為のスタイル群です。

Styleguide 5.2
*/
/*
画像レイアウト

画像とテキストを水平に並べるレイアウトです。

画像は20%で表示されます。

ex [注文履歴 ログイン後→注文履歴ボタンを押下](http://demo3.ec-cube.net/mypage)

Markup:
.ec-imageGrid
  .ec-imageGrid__img: img(src="http://demo3.ec-cube.net/html/user_data/assets/img/common/0701113537_559351f959620.jpeg")
  .ec-imageGrid__content
    p.ec-font-bold ホーローマグ
    p ¥ 1,728 x 1

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 5.2.1
*/
.ec-imageGrid {
    display: table;
    border-top: 1px dotted #ccc;
    width: 100%;
}

.ec-imageGrid .ec-imageGrid__img {
    display: table-cell;
    padding: 0 20px 0 0;
    width: 120px;
}

@media only screen and (min-width: 768px) {
    .ec-imageGrid .ec-imageGrid__img {
        padding: 0 20px 0 0;
        width: 150px;
    }
}

.ec-imageGrid .ec-imageGrid__img img {
    width: 100%;
}

.ec-imageGrid .ec-imageGrid__content {
    vertical-align: middle;
    display: table-cell;
}

.ec-imageGrid .ec-imageGrid__content span {
    margin-left: 10px;
}

.ec-imageGrid .ec-imageGrid__content p {
    margin-bottom: 0;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
ログイン

主にログインフォームのスタイルを表示します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 6.1
*/
/*
ログインフォーム

ログインフォームを表示します。

ex [ログイン画面](http://demo3.ec-cube.net/mypage/login)

Markup:
include /assets/tmpl/elements/6.3.login.pug
+ec-login


Styleguide 6.1.1
*/
.ec-login {
    margin: 0 0 20px;
    padding: 30px 8% 30px;
    height: auto;
    background: #F3F4F4;
    box-sizing: border-box;
}

@media only screen and (min-width: 768px) {
    .ec-login {
        margin: 0 16px;
        padding: 30px 13% 30px;
    }
}

.ec-login .login_title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
    color: #000;
}

.ec-login .ec-login__icon {
    text-align: center;
}

.ec-login .ec-icon {
    margin-bottom: 10px;
}

.ec-login .ec-icon img {
    width: 90px;
    height: 90px;
    display: inline-block;
}

.ec-login .ec-login__input {
    margin-bottom: 20px;
}

.ec-login .ec-login__input .ec-checkbox span {
    margin-left: 5px;
    font-weight: normal;
}

.ec-login .ec-login__actions {
    color: #fff;
}

.ec-login .ec-login__actions a {
    color: inherit;
    text-decoration: none;
}

.ec-login .ec-login__actions a:hover {
    text-decoration: none;
}

.ec-login .ec-login__link {
    margin-top: 10px;
    margin-left: 0;
}

@media only screen and (min-width: 768px) {
    .ec-login .ec-login__link {
        /* margin-left: 20px; */
    }
}

.ec-login .ec-errorMessage {
    color: #DE5D50;
    margin-bottom: 20px;
}

/*
ゲスト購入

ゲスト購入ボタンとそのフォームを表示します。

ex [ゲスト購入画面](http://demo3.ec-cube.net/shopping/login)

Markup:
include /assets/tmpl/elements/6.3.login.pug
+ec-guest
hoge

Styleguide 6.1.2
*/
.ec-guest {
    display: table;
    margin: 0;
    padding: 12%;
    height: auto;
    box-sizing: border-box;
    background: #F3F4F4;
}

@media only screen and (min-width: 768px) {
    .ec-guest {
        height: 100%;
        margin: 0 16px;
    }
}

.ec-guest .ec-guest__inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.ec-guest .ec-guest__inner p {
    margin-bottom: 16px;
}

.ec-guest .ec-guest__actions {
    display: block;
    vertical-align: middle;
    text-align: center;
    color: #fff;
}

.ec-guest .ec-guest__actions a {
    color: inherit;
    text-decoration: none;
}

.ec-guest .ec-guest__actions a:hover {
    text-decoration: none;
}

.ec-guest .ec-guest__icon {
    font-size: 70px;
    text-align: center;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
商品掲載

トップページに商品掲載するスタイルガイド群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 7.1
*/
/*
商品アイテム（商品紹介B）

３項目横並びの商品アイテムを表示します。
必要に応じて商品詳細や、キャッチコピーなどを添えることが出来ます。

ex [トップページ　商品紹介部分](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayB

Styleguide 7.1.1
*/
.ec-displayB {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

@media only screen and (min-width: 768px) {
    .ec-displayB {
        flex-direction: row;
    }
}

.ec-displayB .ec-displayB__cell {
    width: 100%;
    margin-bottom: 16px;
}

.ec-displayB .ec-displayB__cell a {
    color: inherit;
    text-decoration: none;
}

.ec-displayB .ec-displayB__cell a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .ec-displayB .ec-displayB__cell {
        width: 31.4466%;
        margin-bottom: 0;
    }
}

.ec-displayB .ec-displayB__cell:hover {
    text-decoration: none;
}

.ec-displayB .ec-displayB__cell:hover img {
    opacity: .8;
}

.ec-displayB .ec-displayB__cell:hover a {
    text-decoration: none;
}

.ec-displayB .ec-displayB__img {
    margin-bottom: 15px;
}

.ec-displayB .ec-displayB__catch {
    margin-bottom: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #9a947e;
}

.ec-displayB .ec-displayB__comment {
    margin-bottom: 14px;
    text-decoration: none;
    color: #525263;
    font-size: 14px;
}

.ec-displayB .ec-displayB__link {
    text-decoration: none;
    font-weight: bold;
    color: #9a947e;
}

/*
商品アイテム（商品紹介C）

４項目横並びの商品アイテムを表示します。

ex [トップページ　商品紹介部分](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayC
p hoge

Styleguide 7.1.2
*/
.ec-displayC {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ec-displayC .ec-displayC__cell {
    width: 47%;
}

.ec-displayC .ec-displayC__cell a {
    color: inherit;
    text-decoration: none;
}

.ec-displayC .ec-displayC__cell a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .ec-displayC .ec-displayC__cell {
        width: 22.8775%;
    }
}

.ec-displayC .ec-displayC__cell:hover a {
    text-decoration: none;
}

.ec-displayC .ec-displayC__cell:hover img {
    opacity: .8;
}

.ec-displayC .ec-displayC__img {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.ec-displayC .ec-displayC__catch {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #9a947e;
}

.ec-displayC .ec-displayC__title {
    display: block;
    width: 100%;
    color: #525263;
}

.ec-displayC .ec-displayC__price {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #525263;
}

.ec-displayC .ec-displayC__price--sp {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #DE5D50;
}

/*
商品アイテム（商品紹介D）

６項目横並びの商品アイテムを表示します。

ex [トップページ　商品紹介部分](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayD

Styleguide 7.1.3
*/
.ec-displayD {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
}

@media only screen and (min-width: 768px) {
    .ec-displayD {
        box-sizing: border-box;
        flex-wrap: nowrap;
    }
}

.ec-displayD .ec-displayD__cell {
    width: 30%;
    margin-bottom: 8px;
}

.ec-displayD .ec-displayD__cell a {
    color: inherit;
    text-decoration: none;
}

.ec-displayD .ec-displayD__cell a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .ec-displayD .ec-displayD__cell {
        width: 14.3083%;
        margin-bottom: 16px;
    }
}

.ec-displayD .ec-displayD__cell:hover {
    text-decoration: none;
}

.ec-displayD .ec-displayD__cell:hover img {
    opacity: .8;
}

.ec-displayD .ec-displayD__img {
    display: block;
    width: 100%;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
検索・一覧表示

検索欄や、一覧表示に使用するスタイル群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 7.2
*/
/*
トピックパス

検索結果で表示されるトピックパスのスタイルです。

ex [商品一覧ページ　横並びリスト部分](http://demo3.ec-cube.net/products/list?category_id=&name=)

Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-topicpath

Styleguide 7.2.1
*/
.ec-topicpath {
    letter-spacing: -.4em;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px dotted #ccc;
    padding: 10px;
    list-style: none;
    overflow: hidden;
    font-size: 12px;
    color: #0092C4;
}

@media only screen and (min-width: 768px) {
    .ec-topicpath {
        padding: 30px 0 10px;
        border: 0;
        font-size: 16px;
    }
}

.ec-topicpath .ec-topicpath__item a {
    color: inherit;
    text-decoration: none;
}

.ec-topicpath .ec-topicpath__item a:hover {
    text-decoration: none;
}

.ec-topicpath .ec-topicpath__divider {
    color: #000;
}

.ec-topicpath .ec-topicpath__item,
.ec-topicpath .ec-topicpath__divider,
.ec-topicpath .ec-topicpath__item--active {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    position: relative;
    letter-spacing: normal;
}

.ec-topicpath .ec-topicpath__item--active {
    font-weight: bold;
}

.ec-topicpath .ec-topicpath__item--active a {
    color: inherit;
    text-decoration: none;
}

.ec-topicpath .ec-topicpath__item--active a:hover {
    text-decoration: none;
}

/*
ページャ

検索結果で表示される商品一覧のスタイルです。

ex [商品一覧ページ　ページャ部分](http://demo3.ec-cube.net/products/list?category_id=&name=)

Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-pager

Styleguide 7.2.2
*/
.ec-pager {
    list-style: none;
    list-style-type: none;
    margin: 0 auto;
    padding: 1em 0;
    text-align: center;
}

.ec-pager .ec-pager__item,
.ec-pager .ec-pager__item--active {
    display: inline-block;
    min-width: 29px;
    padding: 0 3px 0 2px;
    text-align: center;
    position: relative;
}

.ec-pager .ec-pager__item a,
.ec-pager .ec-pager__item--active a {
    color: inherit;
    text-decoration: none;
}

.ec-pager .ec-pager__item a:hover,
.ec-pager .ec-pager__item--active a:hover {
    text-decoration: none;
}

.ec-pager .ec-pager__item a,
.ec-pager .ec-pager__item--active a {
    color: inherit;
    display: block;
    line-height: 1.8;
    padding: 5px 1em;
    text-decoration: none;
}

.ec-pager .ec-pager__item a:hover,
.ec-pager .ec-pager__item--active a:hover {
    color: inherit;
}

.ec-pager .ec-pager__item--active {
    background: #F3F3F3;
}

.ec-pager .ec-pager__item:hover {
    background: #F3F3F3;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.bg-load-overlay {
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    opacity: 1;
}

/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
カート

ショッピングカートに関するスタイルです。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 7.3
*/
/*
カートヘッダ

購入完了までの手順や、現在の状態を表示します。

ul 要素を用いたリスト要素としてマークアップします。

ex [カートページ　ヘッダ部分](http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/7.3.cart.pug
+ec-progress

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 7.3.1
*/
.ec-progress {
    margin: 0 auto;
    padding: 8px 0 16px;
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 600px;
    list-style: none;
}

@media only screen and (min-width: 768px) {
    .ec-progress {
        margin-bottom: 30px;
        padding: 0;
    }
}

.ec-progress .ec-progress__item {
    display: table-cell;
    position: relative;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    z-index: 10;
}

.ec-progress .ec-progress__item:after {
    content: '';
    position: absolute;
    display: block;
    background: #525263;
    width: 100%;
    height: 0.25em;
    top: 1.25em;
    left: 50%;
    margin-left: 1.5em\9;
    z-index: -1;
}

.ec-progress .ec-progress__item:last-child:after {
    display: none;
}

.ec-progress .ec-progress__number {
    line-height: 30px;
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    font-size: 12px;
    background: #525263;
    color: #fff;
    top: 0;
    left: 18px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
}

@media only screen and (min-width: 768px) {
    .ec-progress .ec-progress__number {
        line-height: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
}

.ec-progress .ec-progress__label {
    font-size: 12px;
}

.ec-progress .is-complete .ec-progress__number {
    background: #5CB1B1;
}

.ec-progress .is-complete .ec-progress__label {
    color: #5CB1B1;
}

/*
カートナビゲーション

カートナビゲーションを表示します。　カートに追加された商品の個数も表示します。

ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerCart

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>


Styleguide 7.3.5
*/
@media only screen and (min-width: 768px) {
    .ec-cartNaviWrap {
        position: relative;
    }
}

.ec-cartNaviWrap {
    display: none;
}

.ec-cartNavi {
    display: inline-block;
    padding: 10px 0 0 20px;
    width: auto;
    color: black;
    background: transparent;
}

@media only screen and (min-width: 768px) {
    .ec-cartNavi {
        display: flex;
        justify-content: space-between;
        border-radius: 99999px;
        box-sizing: border-box;
        padding: 12px 17px 10px;
        width: auto;
        min-width: 140px;
        height: 44px;
        white-space: nowrap;
        cursor: pointer;
        background: #F8F8F8;
    }
}

.ec-cartNavi .ec-cartNavi__icon {
    display: inline-block;
    font-size: 20px;
    display: inline-block;
    opacity: 1;
    visibility: visible;
    animation: fadeIn 200ms linear 0s;
    position: relative;
}

.ec-cartNavi .ec-cartNavi__badge {
    display: inline-block;
    border-radius: 99999px;
    box-sizing: border-box;
    padding: 5px;
    height: 17px;
    font-size: 10px;
    line-height: 0.7;
    vertical-align: top;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    background-color: #DE5D50;
    position: absolute;
    left: 60%;
    top: -10px;
}

@media only screen and (min-width: 768px) {
    .ec-cartNavi .ec-cartNavi__badge {
        display: inline-block;
        min-width: 17px;
        position: relative;
        left: 0;
        top: 0;
    }
}

.ec-cartNavi .ec-cartNavi__price {
    display: none;
}

@media only screen and (min-width: 768px) {
    .ec-cartNavi .ec-cartNavi__price {
        display: inline-block;
        font-size: 14px;
        font-weight: normal;
        vertical-align: middle;
    }
}

.ec-cartNavi.is-active .ec-cartNavi__icon:before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.ec-cartNavi.is-active .ec-cartNavi__badge {
    display: none;
}

@media only screen and (min-width: 768px) {
    .ec-cartNavi.is-active .ec-cartNavi__badge {
        display: none;
    }
}

/*
カートナビゲーションのポップアップ(商品詳細)

カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。

ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

Markup:
div(style="height:350px;")
  // 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
  .is_active
    .ec-cartNavi
      .ec-cartNavi__icon
        img(src='/moc/icon/cart-dark.svg', alt='close')
      .ec-cartNavi__iconClose
        img(src='/moc/icon/cross-dark.svg', alt='close')
      .ec-cartNavi__badge 1
      .ec-cartNavi__label
        | 合計
        .ec-cartNavi__price ¥1920
    +b.ec-cartNaviIsset
      +e.cart
        +e.cartImage
          img(src='http://demo3.ec-cube.net/html/user_data/assets/img/common/0701104933_5593472d8d179.jpeg')
        +e.cartContent
          +e.cartContentTitle ミニテーブル
          +e.cartContentPrice ¥ 12,960
            +e.cartContentTax 税込
          +e.cartContentNumber 数量：1
      +e.action
        a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
        a.ec-blockBtn.ec-cartNavi--cancel キャンセル

Styleguide 7.3.6
*/
.ec-cartNaviIsset {
    display: none;
    width: 100%;
    text-align: center;
    background: #f8f8f8;
    box-sizing: border-box;
    padding: 16px;
    z-index: 20;
    position: absolute;
    right: 0;
}

@media only screen and (min-width: 768px) {
    .ec-cartNaviIsset {
        margin-top: 10px;
        min-width: 256px;
        max-width: 256px;
    }

    .ec-cartNaviIsset::before {
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8.5px 10px 8.5px;
        border-color: transparent transparent #f8f8f8 transparent;
        position: absolute;
        top: -9px;
    }
}

.ec-cartNaviIsset .ec-cartNaviIsset__cart {
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 16px;
    padding-bottom: 32px;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
    content: " ";
    display: table;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
    clear: both;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartImage {
    float: left;
    width: 45%;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
    width: 100%;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
    float: right;
    width: 55%;
    padding-left: 16px;
    text-align: left;
    box-sizing: border-box;
}

.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
    color: #fff;
    margin-bottom: 8px;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
    margin-bottom: 8px;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
    font-weight: bold;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    margin-left: 2px;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
    font-size: 14px;
}

.ec-cartNaviIsset.is-active {
    display: block;
}

/*
カートナビゲーションのポップアップ(商品なし)

カートナビゲーションのポップアップを表示します。商品が登録されていない場合の表示です。

ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

Markup:
div(style="height:170px;")
  // 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
  .is_active
    .ec-cartNavi
      .ec-cartNavi__icon
        img(src='/moc/icon/cart-dark.svg', alt='cart')
      .ec-cartNavi__iconClose
        img(src='/moc/icon/cross-dark.svg', alt='close')
      .ec-cartNavi__badge 1
      .ec-cartNavi__label
        | 合計
        .ec-cartNavi__price ¥1920
    .ec-cartNaviNull
      .ec-cartNaviNull__message
        p 現在カート内に
          br
          | 商品がございません。
    //+b.ec-cartNaviIsset
    //  +e.cart
    //    +e.cartImage
    //      img(src='http://demo3.ec-cube.net/html/user_data/assets/img/common/0701104933_5593472d8d179.jpeg')
    //    +e.cartContent
    //      +e.cartContentTitle ミニテーブル
    //      +e.cartContentPrice ¥ 12,960
    //        +e.cartContentTax 税込
    //      +e.cartContentNumber 数量：1
    //  +e.action
    //    a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
    //    a.ec-blockBtn キャンセル

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>


Styleguide 7.3.7
*/
.ec-cartNaviNull {
    display: none;
    width: 100%;
    text-align: center;
    background: #f8f8f8;
    box-sizing: border-box;
    padding: 16px;
    z-index: 3;
    position: absolute;
    right: 0;
}

@media only screen and (min-width: 768px) {
    .ec-cartNaviNull {
        margin-top: 10px;
        min-width: 256px;
        max-width: 256px;
    }

    .ec-cartNaviNull::before {
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8.5px 10px 8.5px;
        border-color: transparent transparent #f8f8f8 transparent;
        position: absolute;
        top: -9px;
    }
}

.ec-cartNaviNull .ec-cartNaviNull__message {
    border: 1px solid #D9D9D9;
    padding: 16px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #F99;
}

.ec-cartNaviNull .ec-cartNaviNull__message p {
    margin: 0;
}

.ec-cartNaviNull.is-active {
    display: block;
}

/*
総計

会計時の合計金額、総計を表示します。

ex [カートページ　統計部分](http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/7.3.cart.pug
+ec-totalBox

Styleguide 7.3.8
*/
.ec-totalBox {
    background: #F3F3F3;
    padding: 16px;
    margin-bottom: 16px;
}

.ec-totalBox .ec-totalBox__spec {
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    margin-bottom: 8px;
}

.ec-totalBox .ec-totalBox__spec dt {
    font-weight: normal;
    text-align: left;
}

.ec-totalBox .ec-totalBox__spec dd {
    text-align: right;
}

.ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal {
    color: #DE5D50;
}

.ec-totalBox .ec-totalBox__total {
    border-top: 1px dotted #ccc;
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
}

.ec-totalBox .ec-totalBox__paymentTotal {
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
}

.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price,
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__taxLabel {
    color: #DE5D50;
}

.ec-totalBox .ec-totalBox__price {
    margin-left: 16px;
    font-size: 16px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-totalBox .ec-totalBox__price {
        font-size: 24px;
    }
}

.ec-totalBox .ec-totalBox__taxLabel {
    margin-left: 8px;
    font-size: 12px;
}

@media only screen and (min-width: 768px) {
    .ec-totalBox .ec-totalBox__taxLabel {
        font-size: 14px;
    }
}

.ec-totalBox .ec-totalBox__taxRate {
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 8px;
    font-size: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-totalBox .ec-totalBox__taxRate {
        font-size: 12px;
    }
}

.ec-totalBox .ec-totalBox__taxRate dt {
    font-weight: normal;
    text-align: left;
    margin-right: 8px;
}

.ec-totalBox .ec-totalBox__taxRate dt::before {
    content: "[ ";
}

.ec-totalBox .ec-totalBox__taxRate dd {
    text-align: right;
}

.ec-totalBox .ec-totalBox__taxRate dd::after {
    content: " ]";
}

.ec-totalBox .ec-totalBox__pointBlock {
    padding: 18px 20px 10px;
    margin-bottom: 10px;
    background: #fff;
}

.ec-totalBox .ec-totalBox__btn {
    color: #fff;
}

.ec-totalBox .ec-totalBox__btn a {
    color: inherit;
    text-decoration: none;
}

.ec-totalBox .ec-totalBox__btn a:hover {
    text-decoration: none;
}

.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
    font-size: 16px;
    font-weight: bold;
}

.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
    margin-top: 8px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
お知らせ

新着情報やバナーなどの掲載項目を紹介していきます。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 8.1
*/
/*
新着情報

新着情報の掲載をします。

ex [トップページ　新着情報部分](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/8.1.info.pug
+ec-news

Styleguide 8.1.1
*/
.ec-news {
    margin-bottom: 16px;
    background: #F8F8F8;
}

@media only screen and (min-width: 768px) {
    .ec-news {
        margin-right: 3%;
    }
}

@media only screen and (min-width: 768px) {
    .ec-news {
        margin-bottom: 32px;
    }
}

.ec-news .ec-news__title {
    font-weight: bold;
    padding: 8px;
    font-size: 16px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .ec-news .ec-news__title {
        padding: 16px;
        text-align: left;
        font-size: 24px;
    }
}

.ec-news .ec-news__items {
    padding: 0;
    list-style: none;
    border-top: 1px dotted #ccc;
}

/*
折りたたみ項目

折りたたみ項目を掲載します。

ex [トップページ　折りたたみ項目部分](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
        +e.title 新着情報
        +e.UL.items
            +e.LI.item
                +b.ec-newsline.is_active
                    +e.info
                        +e.date 2016/09/29
                        +e.comment サイトオープンしました
                        +e.close
                            a.ec-closeBtn--circle
                                span.ec-closeBtn--circle__icon
                                    .ec-icon
                                        img(src='/moc/icon/angle-down-white.svg', alt='')
                    +e.description 一人暮らしからオフィスなどさまざまなシーンで あなたの生活をサポートするグッズをご家庭へお届けします！

Styleguide 8.1.2
*/
.ec-newsline {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0 16px;
}

.ec-newsline .ec-newsline__info {
    width: 100%;
    padding: 16px 0;
}

.ec-newsline .ec-newsline__info:after {
    content: " ";
    display: table;
}

.ec-newsline .ec-newsline__info:after {
    clear: both;
}

.ec-newsline .ec-newsline__date {
    display: inline-block;
    margin-right: 10px;
    float: left;
}

.ec-newsline .ec-newsline__comment {
    display: inline-block;
    float: left;
}

.ec-newsline .ec-newsline__close {
    float: right;
    display: inline-block;
    text-align: right;
}

.ec-newsline .ec-newsline__close .ec-closeBtn--circle {
    display: inline-block;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
}

.ec-newsline .ec-newsline__description {
    width: 100%;
    height: 0;
    transition: all .2s ease-out;
}

.ec-newsline.is_active .ec-newsline__description {
    height: auto;
    transition: all .2s ease-out;
    padding-bottom: 16px;
}

.ec-newsline.is_active .ec-icon img {
    transform: rotateX(180deg);
}

/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
マイページ

マイページで利用するためのスタイルガイド群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 9.1
*/
/*
マイページ

マイページで表示するメニューリストです。

ul を利用したリスト要素で記述します。

ex [マイページ　メニューリスト部分](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist

Styleguide 9.1.1
*/

.ec-navlistRole .ec-navlistRole__navlist {
    display: flex;
    flex-wrap: wrap;
    /* border-color: #D0D0D0; */
    /* border-style: solid; */
    /* border-bottom: 1px solid #D0D0D0; */
    margin-bottom: 32px;
    padding: 0;
    list-style: none;
    gap: 10px;
}

.ec-navlistRole .ec-navlistRole__navlist a {
    color: inherit;
    text-decoration: none;
}

.ec-navlistRole .ec-navlistRole__navlist a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .ec-navlistRole .ec-navlistRole__navlist {
        flex-wrap: nowrap;
    }
}

.ec-navlistRole .ec-navlistRole__item {
    /* width: 50%; */
    /* border-color: #D0D0D0; */
    /* border-style: solid; */
    /* border-width: 0 1px 1px 0; */
    text-align: center;
    font-weight: bold;
    flex: 1;
}

.ec-navlistRole .ec-navlistRole__item a {
    padding: 1em;
    width: 100%;
    display: block;
    font-size: 16px;
    line-height: 1;
    background-color: #9db6c3;
    color: #fff;
    border-radius: 100vmax;
    transition: .3s;
}

.ec-navlistRole .ec-navlistRole__item a:hover {
    background: #e6468a;
}

.ec-navlistRole .active a {
    color: #fff;
    background-color: #e6468a;
}

/*
マイページ（お気に入り機能無効）

マイページで表示するメニューリストです。

ul を利用したリスト要素で記述します。

ex [マイページ　メニューリスト部分](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist_noFavorite

Styleguide 9.1.2
*/
/*
Welcome メッセージ

マイページで表示するログイン名の表示コンポーネントです。

ex [マイページ　メニューリスト下部分](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-welcomeMsg

Styleguide 9.1.3
*/
.ec-welcomeMsg {
    margin-right: auto;
    margin-left: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    margin: 1em 0;
    padding-bottom: 32px;
    text-align: center;
    border-bottom: 1px dotted #ccc;
}

.ec-welcomeMsg:after {
    content: " ";
    display: table;
}

.ec-welcomeMsg:after {
    clear: both;
}

.ec-welcomeMsg textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-welcomeMsg img {
    max-width: 100%;
}

.ec-welcomeMsg html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-welcomeMsg *,
.ec-welcomeMsg *::before,
.ec-welcomeMsg *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-welcomeMsg img {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-welcomeMsg {
        padding-left: 26px;
        padding-right: 26px;
    }
}

/*
お気に入り一覧

お気に入り一覧で表示するアイテムの表示コンポーネントです。

ex [マイページ　お気に入り一覧](http://demo3.ec-cube.net/mypage/favorite)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-favorite

Styleguide 9.1.4
*/
.ec-favoriteRole .ec-favoriteRole__header {
    margin-bottom: 16px;
}

.ec-favoriteRole .ec-favoriteRole__itemList {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.ec-favoriteRole .ec-favoriteRole__itemList a {
    color: inherit;
    text-decoration: none;
}

.ec-favoriteRole .ec-favoriteRole__itemList a:hover {
    text-decoration: none;
}

.ec-favoriteRole .ec-favoriteRole__item {
    margin-bottom: 8px;
    width: 47.5%;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
}

.ec-favoriteRole .ec-favoriteRole__item-image {
    height: 150px;
    margin-bottom: 10px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .ec-favoriteRole .ec-favoriteRole__item-image {
        height: 250px;
    }
}

.ec-favoriteRole .ec-favoriteRole__item img {
    width: auto;
    max-height: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-favoriteRole .ec-favoriteRole__item {
        width: 25%;
    }
}

.ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle {
    position: absolute;
    right: 10px;
    top: 10px;
}

.ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon img {
    width: 1em;
    height: 1em;
}

.ec-favoriteRole .ec-favoriteRole__itemThumb {
    display: block;
    height: auto;
    margin-bottom: 8px;
}

.ec-favoriteRole .ec-favoriteRole__itemTitle {
    margin-bottom: 2px;
}

.ec-favoriteRole .ec-favoriteRole__itemPrice {
    font-weight: bold;
    margin-bottom: 0;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
標準セクション

通常のコンテナブロックです。

ex [商品詳細ページ　コンテナ](http://demo3.ec-cube.net/products/detail/33)

Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-roleRole

Styleguide 11.1
*/
.ec-role {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-role:after {
    content: " ";
    display: table;
}

.ec-role:after {
    clear: both;
}

.ec-role textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-role img {
    max-width: 100%;
}

.ec-role html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-role *,
.ec-role *::before,
.ec-role *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-role img {
    width: 100%;
}

/*
マイページセクション

マイページ専用のコンテナブロックです。

ex [マイページ　コンテナ](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-mypageRole

Styleguide 11.1.2
*/
.ec-mypageRole {
    margin-right: auto;
    margin-left: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
}

.ec-mypageRole:after {
    content: " ";
    display: table;
}

.ec-mypageRole:after {
    clear: both;
}

.ec-mypageRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-mypageRole img {
    max-width: 100%;
}

.ec-mypageRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-mypageRole *,
.ec-mypageRole *::before,
.ec-mypageRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-mypageRole img {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-mypageRole {
        padding-left: 26px;
        padding-right: 26px;
    }
}

@media only screen and (min-width: 768px) {
    .ec-mypageRole .ec-pageHeader h1 {
        margin: 10px 0 48px;
        padding: 8px 0 18px;
    }
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.bg-load-overlay {
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    opacity: 1;
}

/*
ヘッダー

ヘッダー用のプロジェクトコンポーネントを提供します。

ex [トップページ　ヘッダー](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/11.2.header.pug
include /assets/tmpl/elements/11.3.headerNavi.pug
include /assets/tmpl/elements/11.4.categoryNavi.pug
+b.ec-layoutRole
  +e.header
    +ec-headerRole
    +ec-headerNaviRole
    +ec-categoryNaviRole

Styleguide 11.2
*/
.ec-layoutRole {
    width: 100%;
    transition: transform 0.3s;
    /* background: #fff; */
}

.ec-layoutRole .ec-layoutRole__contentTop {
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .ec-layoutRole .ec-layoutRole__mainWithColumn {
        width: 75%;
    }
}

.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
        width: 50%;
    }
}

.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
    display: none;
}

@media only screen and (min-width: 768px) {

    .ec-layoutRole .ec-layoutRole__left,
    .ec-layoutRole .ec-layoutRole__right {
        display: block;
        width: 25%;
    }
}

.ec-headerRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    padding-top: 15px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: auto;
}

.ec-headerRole:after {
    content: " ";
    display: table;
}

.ec-headerRole:after {
    clear: both;
}

.ec-headerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-headerRole img {
    max-width: 100%;
}

.ec-headerRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-headerRole *,
.ec-headerRole *::before,
.ec-headerRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-headerRole img {
    width: 100%;
}

.ec-headerRole:after {
    display: none;
}

@media only screen and (min-width: 768px) {
    .ec-headerRole:after {
        content: " ";
        display: table;
    }

    .ec-headerRole:after {
        clear: both;
    }
}

.ec-headerRole::before {
    display: none;
}

@media only screen and (min-width: 768px) {
    .ec-headerRole {
        width: 100%;
    }

    .ec-headerRole:after {
        content: " ";
        display: table;
    }

    .ec-headerRole:after {
        clear: both;
    }
}

.ec-headerRole .ec-headerRole__title {
    width: 100%;
}

.ec-headerRole .ec-headerRole__navSP {
    display: block;
    position: absolute;
    top: 15px;
    width: 27%;
    right: 0;
    text-align: right;
}

@media only screen and (min-width: 768px) {
    .ec-headerRole .ec-headerRole__navSP {
        display: none;
    }
}

.ec-headerNaviRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
}

.ec-headerNaviRole:after {
    content: " ";
    display: table;
}

.ec-headerNaviRole:after {
    clear: both;
}

.ec-headerNaviRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-headerNaviRole img {
    max-width: 100%;
}

.ec-headerNaviRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-headerNaviRole *,
.ec-headerNaviRole *::before,
.ec-headerNaviRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-headerNaviRole img {
    width: 100%;
}

.ec-headerNaviRole .fa-bars {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (min-width: 768px) {
    .ec-headerNaviRole {
        padding-bottom: 40px;
    }
}

.ec-headerNaviRole .ec-headerNaviRole__left {
    width: calc(100% / 3);
}

.ec-headerNaviRole .ec-headerNaviRole__search {
    display: none;
}

@media only screen and (min-width: 768px) {
    .ec-headerNaviRole .ec-headerNaviRole__search {
        display: inline-block;
        margin-top: 10px;
    }

    .ec-headerNaviRole .ec-headerNaviRole__search a {
        color: inherit;
        text-decoration: none;
    }

    .ec-headerNaviRole .ec-headerNaviRole__search a:hover {
        text-decoration: none;
    }
}

.ec-headerNaviRole .ec-headerNaviRole__navSP {
    display: block;
}

@media only screen and (min-width: 768px) {
    .ec-headerNaviRole .ec-headerNaviRole__navSP {
        display: none;
    }

    .ec-headerNaviRole .ec-headerNaviRole__navSP a {
        color: inherit;
        text-decoration: none;
    }

    .ec-headerNaviRole .ec-headerNaviRole__navSP a:hover {
        text-decoration: none;
    }
}

.ec-headerNaviRole .ec-headerNaviRole__right {
    width: calc(100% * 2 / 3);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ec-headerNaviRole .ec-headerNaviRole__nav {
    display: inline-block;
}

.ec-headerNaviRole .ec-headerNaviRole__nav a {
    color: inherit;
    text-decoration: none;
}

.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
    text-decoration: none;
}

.ec-headerNaviRole .ec-headerNaviRole__cart {
    display: inline-block;
}

.ec-headerNaviRole .ec-headerNaviRole__cart a {
    color: inherit;
    text-decoration: none;
}

.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
    text-decoration: none;
}

.ec-headerNavSP {
    display: block;
    cursor: pointer;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    color: black;
    background: white;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
}

.ec-headerNavSP .fas {
    vertical-align: top;
}

@media only screen and (min-width: 768px) {
    .ec-headerNavSP {
        display: none;
    }
}

.ec-headerNavSP.is-active {
    display: none;
}

/*
ヘッダー：タイトル

ヘッダー内で使用されるタイトルコンポーネントです。

Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerTitle

Styleguide 11.2.1
*/
.ec-headerTitle {
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
}

.ec-headerTitle textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-headerTitle img {
    max-width: 100%;
}

.ec-headerTitle html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-headerTitle *,
.ec-headerTitle *::before,
.ec-headerTitle *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-headerTitle img {
    width: 100%;
}

.ec-headerTitle .ec-headerTitle__title {
    text-align: center;
}

.ec-headerTitle .ec-headerTitle__title h1 {
    margin: 0;
    padding: 0;
}

.ec-headerTitle .ec-headerTitle__title a {
    display: inline-block;
    margin-bottom: 30px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

@media only screen and (min-width: 768px) {
    .ec-headerTitle .ec-headerTitle__title a {
        font-size: 40px;
    }
}

.ec-headerTitle .ec-headerTitle__title a:hover {
    opacity: .8;
}

.ec-headerTitle .ec-headerTitle__subtitle {
    font-size: 10px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .ec-headerTitle .ec-headerTitle__subtitle {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

.ec-headerTitle .ec-headerTitle__subtitle a {
    display: inline-block;
    color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}

/*
ヘッダー：ユーザナビゲーション

ヘッダー内でユーザに関与するナビゲーションコンポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記述すると２カラム上の右側に配置することができます。

Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerNav

sg-wrapper:
<div class="ec-headerNaviRole">
  <div class="ec-headerNaviRole__nav">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.2.3
*/
.ec-headerNav {
    text-align: right;
}

.ec-headerNav .ec-headerNav__item {
    margin-left: 0;
    display: inline-block;
    font-size: 28px;
}

.ec-headerNav .ec-headerNav__itemIcon {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 18px;
    color: black;
}

@media only screen and (min-width: 768px) {
    .ec-headerNav .ec-headerNav__itemIcon {
        margin-right: 0;
        font-size: 20px;
    }
}

.ec-headerNav .ec-headerNav__itemLink {
    display: none;
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
    color: black;
}

@media only screen and (min-width: 768px) {
    .ec-headerNav .ec-headerNav__itemLink {
        display: inline-block;
    }
}

/*
ヘッダー：検索ボックス

ヘッダー内で使用される商品検索コンポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記述すると２カラム上の右側に配置することができます。

Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerSearch

sg-wrapper:
<div class="ec-headerNaviRole">
  <div class="ec-headerNaviRole__search">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.2.4
*/
.ec-headerSearch:after {
    content: " ";
    display: table;
}

.ec-headerSearch:after {
    clear: both;
}

.ec-headerSearch .ec-headerSearch__category {
    float: none;
}

@media only screen and (min-width: 768px) {
    .ec-headerSearch .ec-headerSearch__category {
        float: left;
        width: 43%;
    }
}

.ec-headerSearch .ec-headerSearch__category .ec-select {
    overflow: hidden;
    width: 100%;
    margin: 0;
    text-align: center;
}

.ec-headerSearch .ec-headerSearch__category .ec-select select {
    width: 100%;
    cursor: pointer;
    padding: 8px 24px 8px 8px;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    appearance: none;
    color: #fff;
}

@media only screen and (min-width: 768px) {
    .ec-headerSearch .ec-headerSearch__category .ec-select select {
        max-width: 165px;
        height: 36px;
    }
}

.ec-headerSearch .ec-headerSearch__category .ec-select select option {
    color: #000;
}

.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
    display: none;
}

.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
    position: relative;
    border: 0;
    background: #000;
    color: #fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
        border-top-right-radius: inherit;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }
}

.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
    position: absolute;
    top: 0.8em;
    right: 0.4em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    pointer-events: none;
}

.ec-headerSearch .ec-headerSearch__keyword {
    position: relative;
    color: #525263;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-headerSearch .ec-headerSearch__keyword {
        float: right;
        width: 57%;
        border-bottom-left-radius: inherit;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }
}

.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
    width: 100%;
    height: 34px;
    font-size: 16px;
    border: 0 none;
    padding: 0.5em 50px 0.5em 1em;
    box-shadow: none;
    background: none;
    box-sizing: border-box;
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
        font-size: 12px;
    }
}

.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
    width: 22px;
    height: 22px;
}

.ec-headerSearch .ec-headerSearch__keywordBtn {
    border: 0;
    background: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-55%);
    display: block;
    white-space: nowrap;
    z-index: 1;
}

/*
ヘッダー：カテゴリナビ

ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。

Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav

sg-wrapper:
<div class="ec-categoryNaviRole" style="padding-bottom:150px;">
  <sg-wrapper-content/>
</div>

Styleguide 11.2.5
*/
.ec-categoryNaviRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: none;
}

.ec-categoryNaviRole:after {
    content: " ";
    display: table;
}

.ec-categoryNaviRole:after {
    clear: both;
}

.ec-categoryNaviRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-categoryNaviRole img {
    max-width: 100%;
}

.ec-categoryNaviRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-categoryNaviRole *,
.ec-categoryNaviRole *::before,
.ec-categoryNaviRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-categoryNaviRole img {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-categoryNaviRole {
        display: block;
        width: 100%;
    }

    .ec-categoryNaviRole a {
        color: inherit;
        text-decoration: none;
    }

    .ec-categoryNaviRole a:hover {
        text-decoration: none;
    }
}

.ec-itemNav {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.ec-itemNav__nav {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: auto;
    height: auto;
    list-style-type: none;
    text-align: center;
    vertical-align: bottom;
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav {
        display: inline-block;
    }
}

.ec-itemNav__nav li {
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    position: relative;
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav li {
        float: left;
        width: auto;
    }
}

.ec-itemNav__nav li a {
    display: block;
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    padding: 16px;
    height: auto;
    color: #2e3233;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-decoration: none;
    text-align: left;
    background: #fff;
    border-bottom: 1px solid #E8E8E8;
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav li a {
        text-align: center;
        border-bottom: none;
    }
}

.ec-itemNav__nav li ul {
    display: none;
    z-index: 0;
    margin: 0;
    padding: 0;
    min-width: 200px;
    list-style: none;
    position: static;
    top: 100%;
    left: 0;
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav li ul {
        display: block;
        z-index: 100;
        position: absolute;
    }
}

.ec-itemNav__nav li ul li {
    overflow: hidden;
    width: 100%;
    height: auto;
    transition: .3s;
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav li ul li {
        overflow: hidden;
        height: 0;
    }
}

.ec-itemNav__nav li ul li a {
    border-bottom: 1px solid #E8E8E8;
    padding: 16px 22px 16px 16px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: left;
    background: black;
}

.ec-itemNav__nav>li:hover>a {
    background: #fafafa;
}

.ec-itemNav__nav>li:hover li:hover>a {
    background: #333;
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav>li:hover>ul>li {
        overflow: visible;
        height: auto;
    }
}

.ec-itemNav__nav li ul li ul {
    top: 0;
    left: 100%;
    width: auto;
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav li ul li ul:before {
        content: "\f054";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 12px;
        color: white;
        position: absolute;
        top: 19px;
        right: auto;
        left: -20px;
    }
}

@media only screen and (min-width: 768px) {
    .ec-itemNav__nav li ul li:hover>ul>li {
        overflow: visible;
        height: auto;
        width: auto;
    }
}

.ec-itemNav__nav li ul li ul li a {
    background: #7D7D7D;
}

.ec-itemNav__nav li:hover ul li ul li a:hover {
    background: #333;
}

/*
ヘッダー：SPヘッダー

SP時のみ出現するヘッダーに関係するコンポーネントです。<br>
ex [トップページ](http://demo3.ec-cube.net/)画面サイズが768px以下に該当。<br>
<br>
`.ec-drawerRole`：SPのドロワー内の要素をwrapするコンポーネントです。<br>
`.ec-headerSearch`、`.ec-headerNav`、`.ec-itemNav`は`.ec-drawerRole`の子要素にある場合、ドロワーに適したスタイルに変化します。<br><br>
`.ec-overlayRole`：SPのドロワー出現時にz-indexがドロワー以下の要素に半透明の黒背景をかぶせるコンポーネントです。<br>

Styleguide 11.2.6
*/
.ec-drawerRole {
    overflow-y: scroll;
    background: black;
    width: 260px;
    height: 100vh;
    transform: translateX(-300px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    transition: z-index 0ms 1ms;
}

@media only screen and (min-width: 768px) {
    .ec-drawerRole {
        display: none;
    }
}

.ec-drawerRole .ec-headerSearchArea {
    padding: 20px 10px;
    width: 100%;
    background: #F8F8F8;
}

.ec-drawerRole .ec-headerSearch {
    padding: 16px 8px 26px;
    background: #EBEBEB;
    color: #636378;
}

.ec-drawerRole .ec-headerSearch select {
    width: 100% !important;
}

.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    padding: 1em 10px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    background: #F8F8F8;
}

.ec-drawerRole .ec-headerCategoryArea p {
    margin-top: 0;
    margin-bottom: 0;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
    border-bottom: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: black;
    font-weight: normal;
    background: #f8f8f8;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
    font-weight: normal;
    background: white;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav>li:hover>a {
    background: #f8f8f8;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav>li:hover li:hover>a {
    background: white;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
    padding-left: 40px;
    color: black;
    background: white;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li:hover ul li ul li a:hover {
    background: white;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
    padding-left: 60px;
    font-weight: normal;
}

.ec-drawerRole .ec-headerLinkArea {
    background: black;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
    border-top: 1px solid #ccc;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
    display: inline-block;
    width: 28px;
    font-size: 17px;
}

.ec-drawerRoleClose {
    display: none;
    cursor: pointer;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    color: black;
    background: white;
    position: fixed;
    top: 10px;
    left: 270px;
    z-index: 1000;
}

.ec-drawerRoleClose .fas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (min-width: 768px) {
    .ec-drawerRoleClose {
        display: none;
    }
}

.ec-drawerRole.is_active {
    display: block;
    transform: translateX(0);
    transition: all .3s;
    z-index: 100000;
}

@media only screen and (min-width: 768px) {
    .ec-drawerRole.is_active {
        display: none;
    }
}

.ec-drawerRoleClose.is_active {
    display: inline-block;
    transition: all .3s;
}

@media only screen and (min-width: 768px) {
    .ec-drawerRoleClose.is_active {
        display: none;
    }
}

.ec-overlayRole {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    background: transparent;
    transform: translateX(0);
    transition: all .3s;
    visibility: hidden;
}

@media only screen and (min-width: 768px) {
    .ec-overlayRole {
        display: none;
    }
}

.have_curtain .ec-overlayRole {
    display: block;
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    visibility: visible;
}

@media only screen and (min-width: 768px) {
    .have_curtain .ec-overlayRole {
        display: none;
    }
}

/*
ヘッダー：test

test

Markup:
span.ec-itemAccordionParent test1
ul.ec-itemNavAccordion
  li.ec-itemNavAccordion__item
    a(href='') test2
    ul.ec-itemNavAccordion
      li.ec-itemNavAccordion__item
        a(href='') test3
        ul.ec-itemNavAccordion
          li.ec-itemNavAccordion__item
            a(href='') test4

Styleguide 11.2.7
*/
.ec-itemNavAccordion {
    display: none;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
フッター

全ページで使用されるフッターのプロジェクトコンポーネントです。

ex [トップページ　フッター](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerRole

Styleguide 11.3
*/
.ec-footerRole {
    border-top: 1px solid #7d7d7d;
    margin-top: 30px;
    background: black;
}

@media only screen and (min-width: 768px) {
    .ec-footerRole {
        padding-top: 40px;
        margin-top: 100px;
    }
}

@media only screen and (min-width: 768px) {
    .ec-footerRole .ec-footerRole__inner {
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.4;
        color: #525263;
        -webkit-text-size-adjust: 100%;
        width: 100%;
        max-width: 1130px;
    }

    .ec-footerRole .ec-footerRole__inner:after {
        content: " ";
        display: table;
    }

    .ec-footerRole .ec-footerRole__inner:after {
        clear: both;
    }

    .ec-footerRole .ec-footerRole__inner textarea {
        /* for chrome fontsize bug */
        font-family: sans-serif;
    }

    .ec-footerRole .ec-footerRole__inner img {
        max-width: 100%;
    }

    .ec-footerRole .ec-footerRole__inner html {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ec-footerRole .ec-footerRole__inner *,
    .ec-footerRole .ec-footerRole__inner *::before,
    .ec-footerRole .ec-footerRole__inner *::after {
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
    }

    .ec-footerRole .ec-footerRole__inner img {
        width: 100%;
    }
}

/*
フッターナビ

フッタープロジェクトで使用するナビゲーション用のコンポーネントです。

Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerNav

sg-wrapper:
<div class="ec-footerRole">
  <div class="ec-footerRole__inner">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.3.1
*/
.ec-footerNavi {
    padding: 0;
    color: white;
    list-style: none;
    text-align: center;
}

.ec-footerNavi .ec-footerNavi__link {
    display: block;
}

@media only screen and (min-width: 768px) {
    .ec-footerNavi .ec-footerNavi__link {
        display: inline-block;
    }
}

.ec-footerNavi .ec-footerNavi__link a {
    display: block;
    border-bottom: 1px solid #7d7d7d;
    padding: 15px 0;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .ec-footerNavi .ec-footerNavi__link a {
        display: inline-block;
        border-bottom: none;
        margin: 0 10px;
        padding: 0;
        text-decoration: underline;
    }
}

.ec-footerNavi .ec-footerNavi__link:hover a {
    opacity: .8;
    text-decoration: none;
}

/*
フッタータイトル

フッタープロジェクトで使用するタイトル用のコンポーネントです。

Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerTitle

sg-wrapper:
<div class="ec-footerRole">
  <div class="ec-footerRole__inner">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.3.2
*/
.ec-footerTitle {
    padding: 40px 0 60px;
    text-align: center;
    color: white;
}

@media only screen and (min-width: 768px) {
    .ec-footerTitle {
        padding: 50px 0 80px;
    }
}

.ec-footerTitle .ec-footerTitle__logo {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.ec-footerTitle .ec-footerTitle__logo a {
    color: inherit;
    text-decoration: none;
}

.ec-footerTitle .ec-footerTitle__logo a:hover {
    text-decoration: none;
}

.ec-footerTitle .ec-footerTitle__logo a {
    font-size: 22px;
    color: inherit;
}

@media only screen and (min-width: 768px) {
    .ec-footerTitle .ec-footerTitle__logo a {
        font-size: 24px;
    }
}

.ec-footerTitle .ec-footerTitle__logo:hover a {
    opacity: .8;
    text-decoration: none;
}

.ec-footerTitle .ec-footerTitle__copyright {
    font-size: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-footerTitle .ec-footerTitle__copyright {
        font-size: 12px;
    }
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
トップページ

トップページ スライド部に関する Project コンポーネントを定義します。

ex [トップページ](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/12.1.slider.pug
+ec-sliderRole

Styleguide 12.1
*/
.ec-sliderRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    margin-bottom: 24px;
}

.ec-sliderRole:after {
    content: " ";
    display: table;
}

.ec-sliderRole:after {
    clear: both;
}

.ec-sliderRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-sliderRole img {
    max-width: 100%;
}

.ec-sliderRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-sliderRole *,
.ec-sliderRole *::before,
.ec-sliderRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-sliderRole img {
    width: 100%;
}

.ec-sliderRole ul {
    padding: 0;
    list-style: none;
}

.ec-sliderItemRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    margin-bottom: 24px;
}

.ec-sliderItemRole:after {
    content: " ";
    display: table;
}

.ec-sliderItemRole:after {
    clear: both;
}

.ec-sliderItemRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-sliderItemRole img {
    max-width: 100%;
}

.ec-sliderItemRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-sliderItemRole *,
.ec-sliderItemRole *::before,
.ec-sliderItemRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-sliderItemRole img {
    width: 100%;
}

.ec-sliderItemRole ul {
    padding: 0;
    list-style: none;
}

.ec-sliderItemRole .item_nav {
    display: none;
}

@media only screen and (min-width: 768px) {
    .ec-sliderItemRole .item_nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 0;
        gap: 10px;
    }
}

.ec-sliderItemRole .slideThumb {
    margin-bottom: 25px;
    /* width: 30%; */
    aspect-ratio: 3/4;
    opacity: .8;
    cursor: pointer;
}

.ec-sliderItemRole .slideThumb:focus {
    outline: none;
}

.ec-sliderItemRole .slideThumb:hover {
    opacity: 1;
}

.ec-sliderItemRole .slideThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
アイキャッチ

トップページ アイキャッチ部に関する Project コンポーネントを定義します。

ex [トップページスライダー直下 アイキャッチ部](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/12.2.eyecatch.pug
+ec-eyecatchRole

Styleguide 12.2
*/
.ec-eyecatchRole {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    /* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */
}

@media only screen and (min-width: 768px) {
    .ec-eyecatchRole {
        flex-wrap: nowrap;
    }
}

.ec-eyecatchRole .ec-eyecatchRole__image {
    display: block;
    margin-bottom: 40px;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-eyecatchRole .ec-eyecatchRole__image {
        order: 2;
    }
}

.ec-eyecatchRole .ec-eyecatchRole__intro {
    color: black;
}

@media only screen and (min-width: 768px) {
    .ec-eyecatchRole .ec-eyecatchRole__intro {
        padding-right: 5%;
        order: 1;
    }
}

.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
    margin-bottom: .8em;
    font-size: 16px;
    font-weight: normal;
}

@media only screen and (min-width: 768px) {
    .ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
        margin-top: 45px;
    }
}

.ec-eyecatchRole .ec-eyecatchRole__introTitle {
    margin-bottom: .8em;
    font-size: 24px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-eyecatchRole .ec-eyecatchRole__introTitle {
        margin-bottom: 1em;
        font-size: 26px;
    }
}

.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2;
}

@media only screen and (min-width: 768px) {
    .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
        margin-bottom: 30px;
    }
}

.ec-eyecatchRole .ec-eyecatchRole__introDescription {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2;
}

@media only screen and (min-width: 768px) {
    .ec-eyecatchRole .ec-eyecatchRole__introDescription {
        margin-bottom: 30px;
    }
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
ボタン

トップページで使用されているボタンのスタイルです。

ex [トップページ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.3
*/
/*
通常ボタン

インラインの要素としてボタンを定義出来ます。

Markup:
.ec-inlineBtn--top more

Styleguide 12.3.1
*/
.ec-inlineBtn--top {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: white;
    background-color: black;
    border-color: black;
}

.ec-inlineBtn--top:focus,
.ec-inlineBtn--top.focus,
.ec-inlineBtn--top:active:focus,
.ec-inlineBtn--top:active.focus,
.ec-inlineBtn--top.active:focus,
.ec-inlineBtn--top.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-inlineBtn--top:hover,
.ec-inlineBtn--top:focus,
.ec-inlineBtn--top.focus {
    color: #525263;
    text-decoration: none;
}

.ec-inlineBtn--top:active,
.ec-inlineBtn--top.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--top.disabled,
.ec-inlineBtn--top[disabled],
fieldset[disabled] .ec-inlineBtn--top {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-inlineBtn--top:focus,
.ec-inlineBtn--top.focus {
    color: white;
    background-color: black;
    border-color: black;
}

.ec-inlineBtn--top:hover {
    color: white;
    background-color: black;
    border-color: black;
}

.ec-inlineBtn--top:active,
.ec-inlineBtn--top.active,
.open>.ec-inlineBtn--top.dropdown-toggle {
    color: white;
    background-color: black;
    background-image: none;
    border-color: black;
}

.ec-inlineBtn--top:active:hover,
.ec-inlineBtn--top:active:focus,
.ec-inlineBtn--top:active.focus,
.ec-inlineBtn--top.active:hover,
.ec-inlineBtn--top.active:focus,
.ec-inlineBtn--top.active.focus,
.open>.ec-inlineBtn--top.dropdown-toggle:hover,
.open>.ec-inlineBtn--top.dropdown-toggle:focus,
.open>.ec-inlineBtn--top.dropdown-toggle.focus {
    color: white;
    background-color: black;
    border-color: black;
}

.ec-inlineBtn--top.disabled:hover,
.ec-inlineBtn--top.disabled:focus,
.ec-inlineBtn--top.disabled.focus,
.ec-inlineBtn--top[disabled]:hover,
.ec-inlineBtn--top[disabled]:focus,
.ec-inlineBtn--top[disabled].focus,
fieldset[disabled] .ec-inlineBtn--top:hover,
fieldset[disabled] .ec-inlineBtn--top:focus,
fieldset[disabled] .ec-inlineBtn--top.focus {
    background-color: black;
    border-color: black;
}

.ec-inlineBtn--top .badge {
    color: black;
    background-color: white;
}

.ec-inlineBtn--top .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

/*
ロングボタン（全幅）

ロングタイプのボタンです。

Markup:
.ec-blockBtn--top 商品一覧へ

Styleguide 2.1.2
*/
.ec-blockBtn--top {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    color: white;
    background-color: black;
    border-color: black;
    display: block;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

.ec-blockBtn--top:focus,
.ec-blockBtn--top.focus,
.ec-blockBtn--top:active:focus,
.ec-blockBtn--top:active.focus,
.ec-blockBtn--top.active:focus,
.ec-blockBtn--top.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.ec-blockBtn--top:hover,
.ec-blockBtn--top:focus,
.ec-blockBtn--top.focus {
    color: #525263;
    text-decoration: none;
}

.ec-blockBtn--top:active,
.ec-blockBtn--top.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--top.disabled,
.ec-blockBtn--top[disabled],
fieldset[disabled] .ec-blockBtn--top {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ec-blockBtn--top:focus,
.ec-blockBtn--top.focus {
    color: white;
    background-color: black;
    border-color: black;
}

.ec-blockBtn--top:hover {
    color: white;
    background-color: black;
    border-color: black;
}

.ec-blockBtn--top:active,
.ec-blockBtn--top.active,
.open>.ec-blockBtn--top.dropdown-toggle {
    color: white;
    background-color: black;
    background-image: none;
    border-color: black;
}

.ec-blockBtn--top:active:hover,
.ec-blockBtn--top:active:focus,
.ec-blockBtn--top:active.focus,
.ec-blockBtn--top.active:hover,
.ec-blockBtn--top.active:focus,
.ec-blockBtn--top.active.focus,
.open>.ec-blockBtn--top.dropdown-toggle:hover,
.open>.ec-blockBtn--top.dropdown-toggle:focus,
.open>.ec-blockBtn--top.dropdown-toggle.focus {
    color: white;
    background-color: black;
    border-color: black;
}

.ec-blockBtn--top.disabled:hover,
.ec-blockBtn--top.disabled:focus,
.ec-blockBtn--top.disabled.focus,
.ec-blockBtn--top[disabled]:hover,
.ec-blockBtn--top[disabled]:focus,
.ec-blockBtn--top[disabled].focus,
fieldset[disabled] .ec-blockBtn--top:hover,
fieldset[disabled] .ec-blockBtn--top:focus,
fieldset[disabled] .ec-blockBtn--top.focus {
    background-color: black;
    border-color: black;
}

.ec-blockBtn--top .badge {
    color: black;
    background-color: white;
}

.ec-blockBtn--top .ec-icon img {
    width: 1em;
    vertical-align: text-bottom;
}

@media only screen and (min-width: 768px) {
    .ec-blockBtn--top {
        max-width: 260px;
    }
}

/*
見出し

トップページで使用されている見出しのスタイルです。

ex [トップページ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.4
*/
/*
横並び見出し

横並びの見出しです。

Markup:
.ec-secHeading
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 特集

Styleguide 12.4.1
*/
.ec-secHeading {
    margin-bottom: 15px;
    color: black;
}

.ec-secHeading .ec-secHeading__en {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em;
}

.ec-secHeading .ec-secHeading__line {
    display: inline-block;
    margin: 0 20px;
    width: 1px;
    height: 14px;
    background: black;
}

.ec-secHeading .ec-secHeading__ja {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px;
}

/*
縦並び見出し

縦並びの見出しです。

Markup:
.ec-secHeading--tandem
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 特集

Styleguide 12.4.2
*/
.ec-secHeading--tandem {
    margin-bottom: 15px;
    color: black;
    text-align: center;
}

.ec-secHeading--tandem .ec-secHeading__en {
    display: block;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em;
}

.ec-secHeading--tandem .ec-secHeading__line {
    display: block;
    margin: 13px auto;
    width: 20px;
    height: 1px;
    background: black;
}

.ec-secHeading--tandem .ec-secHeading__ja {
    display: block;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
トピック（アイテム2列）

トップページで使用されているトピックのスタイルです。

ex [トップページ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.5.1
*/
.ec-topicRole {
    padding: 40px 0;
    background: #F8F8F8;
}

@media only screen and (min-width: 768px) {
    .ec-topicRole {
        padding: 60px 0;
    }
}

.ec-topicRole .ec-topicRole__list {
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (min-width: 768px) {
    .ec-topicRole .ec-topicRole__list {
        flex-wrap: nowrap;
    }
}

.ec-topicRole .ec-topicRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 768px) {
    .ec-topicRole .ec-topicRole__listItem {
        width: calc(100% / 2);
    }

    .ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
        margin-right: 30px;
    }
}

.ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: .5em;
    font-size: 14px;
    color: black;
}

@media only screen and (min-width: 768px) {
    .ec-topicRole .ec-topicRole__listItemTitle {
        margin-top: 1em;
    }
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
カテゴリ（アイテム4列 スマホの時は2列）

トップページで使用されているアイテムリストのスタイルです。

ex [トップページ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.6.1
*/
.ec-newItemRole {
    padding: 40px 0;
}

@media only screen and (min-width: 768px) {
    .ec-newItemRole {
        padding: 60px 0;
    }
}

.ec-newItemRole .ec-newItemRole__list {
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (min-width: 768px) {
    .ec-newItemRole .ec-newItemRole__list {
        flex-wrap: nowrap;
    }
}

.ec-newItemRole .ec-newItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto;
}

.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
    color: black;
}

@media only screen and (min-width: 768px) {
    .ec-newItemRole .ec-newItemRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 4);
    }

    .ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
        margin-right: 30px;
    }
}

.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
    margin-right: 4%;
}

@media only screen and (min-width: 768px) {
    .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
        margin-right: 30px;
    }
}

.ec-newItemRole .ec-newItemRole__listItemHeading {
    margin-top: calc(45% - 20px);
}

.ec-newItemRole .ec-newItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-newItemRole .ec-newItemRole__listItemTitle {
        margin: 20px 0 10px;
    }
}

.ec-newItemRole .ec-newItemRole__listItemPrice {
    font-size: 12px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
カテゴリ（アイテム3列）

トップページで使用されているカテゴリのスタイルです。

ex [トップページ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.7.1
*/
.ec-categoryRole {
    padding: 40px 0;
    color: black;
    background: #F8F8F8;
}

@media only screen and (min-width: 768px) {
    .ec-categoryRole {
        padding: 60px 0;
    }
}

.ec-categoryRole .ec-categoryRole__list {
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (min-width: 768px) {
    .ec-categoryRole .ec-categoryRole__list {
        flex-wrap: nowrap;
    }
}

.ec-categoryRole .ec-categoryRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 768px) {
    .ec-categoryRole .ec-categoryRole__listItem {
        width: calc(100% / 3);
    }

    .ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
        margin-right: 30px;
    }
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
見出し

トップページで使用されている新着情報のスタイルです。

ex [トップページ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.8.1
*/
.ec-newsRole {
    padding: 40px 0 0;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole {
        padding: 60px 0 0;
    }
}

.ec-newsRole .ec-newsRole__news {
    box-sizing: border-box;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__news {
        border: 16px solid #F8F8F8;
        padding: 20px 30px;
    }
}

.ec-newsRole .ec-newsRole__newsItem {
    width: 100%;
}

.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
    border-bottom: 1px solid #ccc;
}

.ec-newsRole .ec-newsRole__newsItem:last-of-type {
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__newsItem:last-of-type {
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__newsItem {
        padding: 20px 0;
    }
}

.ec-newsRole .ec-newsRole__newsHeading {
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__newsHeading {
        display: flex;
    }
}

.ec-newsRole .ec-newsRole__newsDate {
    display: block;
    margin: 15px 0 5px;
    font-size: 12px;
    color: black;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__newsDate {
        display: inline-block;
        margin: 0;
        min-width: 120px;
        font-size: 14px;
    }
}

.ec-newsRole .ec-newsRole__newsColumn {
    display: flex;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__newsColumn {
        display: inline-flex;
        min-width: calc(100% - 120px);
    }
}

.ec-newsRole .ec-newsRole__newsTitle {
    display: inline-block;
    margin-bottom: 10px;
    width: 90%;
    font-size: 14px;
    font-weight: bold;
    color: #7D7D7D;
    line-height: 1.6;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__newsTitle {
        margin-bottom: 0;
        line-height: 1.8;
    }
}

.ec-newsRole .ec-newsRole__newsClose {
    display: inline-block;
    width: 10%;
    position: relative;
}

.ec-newsRole .ec-newsRole__newsCloseBtn {
    display: inline-block;
    margin-left: auto;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: white;
    text-align: center;
    background: black;
    cursor: pointer;
    position: absolute;
    right: 5px;
}

.ec-newsRole .ec-newsRole__newsDescription {
    display: none;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__newsDescription {
        margin: 20px 0 0;
        line-height: 1.8;
    }
}

.ec-newsRole .ec-newsRole__newsDescription a {
    color: #0092C4;
}

.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
    margin: 0 0 10px;
}

@media only screen and (min-width: 768px) {
    .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
        margin: 20px 0 0;
    }
}

.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
    display: inline-block;
    transform: rotateX(180deg) translateY(2px);
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
検索ラベル

商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。

ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)

Markup:
include /assets/tmpl/elements/13.1.searchnav.pug
+ec-searchnavRole__topicpath
+ec-searchnavRole__info

Styleguide 13.1

*/
.ec-searchnavRole {
    margin-bottom: 0;
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .ec-searchnavRole {
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.4;
        color: #525263;
        -webkit-text-size-adjust: 100%;
        width: 100%;
        max-width: 1130px;
    }

    .ec-searchnavRole:after {
        content: " ";
        display: table;
    }

    .ec-searchnavRole:after {
        clear: both;
    }

    .ec-searchnavRole textarea {
        /* for chrome fontsize bug */
        font-family: sans-serif;
    }

    .ec-searchnavRole img {
        max-width: 100%;
    }

    .ec-searchnavRole html {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ec-searchnavRole *,
    .ec-searchnavRole *::before,
    .ec-searchnavRole *::after {
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
    }

    .ec-searchnavRole img {
        width: 100%;
    }
}

.ec-searchnavRole .ec-searchnavRole__infos {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    border-top: 0;
    margin-bottom: 16px;
    padding-top: 5px;
    flex-direction: column;
}

.ec-searchnavRole .ec-searchnavRole__infos:after {
    content: " ";
    display: table;
}

.ec-searchnavRole .ec-searchnavRole__infos:after {
    clear: both;
}

.ec-searchnavRole .ec-searchnavRole__infos textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-searchnavRole .ec-searchnavRole__infos img {
    max-width: 100%;
}

.ec-searchnavRole .ec-searchnavRole__infos html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-searchnavRole .ec-searchnavRole__infos *,
.ec-searchnavRole .ec-searchnavRole__infos *::before,
.ec-searchnavRole .ec-searchnavRole__infos *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-searchnavRole .ec-searchnavRole__infos img {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-searchnavRole .ec-searchnavRole__infos {
        padding-left: 0;
        padding-right: 0;
        border-top: 1px solid #ccc;
        padding-top: 16px;
        flex-direction: row;
    }
}

.ec-searchnavRole .ec-searchnavRole__counter {
    margin-bottom: 16px;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-searchnavRole .ec-searchnavRole__counter {
        margin-bottom: 0;
        width: 50%;
    }
}

.ec-searchnavRole .ec-searchnavRole__actions {
    text-align: right;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-searchnavRole .ec-searchnavRole__actions {
        width: 50%;
    }
}

.ec-searchnavRole .ec-searchnavRole__infos {
    margin-bottom: 0;
}

.ec-searchnavRole__actions .ec-select {
    margin-bottom: 0;
}

.ec-searchnavRole__actions .ec-select select {
    padding: .3em .7em;
    height: auto;
}

.ec-shelfRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-shelfRole:after {
    content: " ";
    display: table;
}

.ec-shelfRole:after {
    clear: both;
}

.ec-shelfRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-shelfRole img {
    max-width: 100%;
}

.ec-shelfRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-shelfRole *,
.ec-shelfRole *::before,
.ec-shelfRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-shelfRole img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
商品一覧グリッド

商品一覧 で使用するグリッドコンポーネントです。

SP版２列、PC版４列の特殊グリッドを構成します。

Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
  +ec-shelfGrid

Styleguide 13.2.1

*/
.ec-shelfGrid {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.ec-shelfGrid a {
    color: inherit;
    text-decoration: none;
}

.ec-shelfGrid a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGrid {
        margin-left: -16px;
        margin-right: -16px;
    }
}

.ec-shelfGrid .ec-shelfGrid__item {
    margin-bottom: 36px;
    width: 50%;
    display: flex;
    flex-direction: column;
}

.ec-shelfGrid .ec-shelfGrid__item-image {
    height: 150px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGrid .ec-shelfGrid__item-image {
        height: 302px;
    }
}

.ec-shelfGrid .ec-shelfGrid__item img {
    width: auto;
    max-height: 100%;
    transition: .3s;
}

.ec-shelfGrid .ec-shelfGrid__item a:hover img {
    opacity: .8;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGrid .ec-shelfGrid__item {
        padding: 0 16px;
        width: 25%;
    }
}

.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
    margin-top: 1em;
    margin-bottom: 15px;
}

.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
    padding-right: 8px;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
        padding: 0 16px;
    }
}

.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
    padding-left: 8px;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
        padding: 0 16px;
    }
}

.ec-shelfGrid .ec-shelfGrid__title {
    margin-bottom: 7px;
}

.ec-shelfGrid .ec-shelfGrid__plice {
    font-weight: bold;
}

/*
13.2.2 商品一覧グリッド（中央寄せ）

商品一覧 で使用するグリッドコンポーネントです。

SP版２列、PC版４列の特殊グリッドを構成します。
商品のあまりはセンタリングされ、中央に表示されます。

Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
  +ec-shelfGridCenter

Styleguide 13.2.2

*/
.ec-shelfGridCenter {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.ec-shelfGridCenter a {
    color: inherit;
    text-decoration: none;
}

.ec-shelfGridCenter a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGridCenter {
        margin-left: -16px;
        margin-right: -16px;
    }
}

.ec-shelfGridCenter .ec-shelfGridCenter__item {
    margin-bottom: 36px;
    width: 50%;
}

.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
    height: 150px;
    margin-bottom: 10px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGridCenter .ec-shelfGridCenter__item-image {
        height: 250px;
    }
}

.ec-shelfGridCenter .ec-shelfGridCenter__item img {
    width: auto;
    max-height: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGridCenter .ec-shelfGridCenter__item {
        padding: 0 16px;
        width: 25%;
    }
}

.ec-shelfGridCenter .ec-shelfGridCenter__item .ec-productRole__btn {
    margin-top: auto;
    padding-top: 1em;
}

.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
    padding-right: 8px;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
        padding: 0 16px;
    }
}

.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
    padding-left: 8px;
}

@media only screen and (min-width: 768px) {
    .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
        padding: 0 16px;
    }
}

.ec-shelfGridCenter .ec-shelfGridCenter__title {
    margin-bottom: 7px;
}

.ec-shelfGridCenter .ec-shelfGridCenter__plice {
    font-weight: bold;
}

/*
商品一覧フッター

商品一覧 フッター に関する Project コンポーネントを定義します。

ex [商品一覧 ページャ部](http://demo3.ec-cube.net/products/list)

Markup:
include /assets/tmpl/elements/13.3.pager.pug
+ec-pagerRole

Styleguide 13.3

*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
カート追加モーダル

カート追加モーダルに関する Project コンポーネントを定義します。

ex [商品一覧、商品詳細](http://demo3.ec-cube.net/products/list)

+ec-modal

Styleguide 13.4

*/
.ec-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
}

.ec-modal.small {
    width: 30%;
}

.ec-modal.full {
    width: 100%;
    height: 100%;
}

.ec-modal .ec-modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.ec-modal .ec-modal-wrap {
    position: relative;
    border-radius: 2px;
    border: 1px solid #333;
    background-color: #fff;
    width: 90%;
    margin: 20px;
    padding: 40px 5px;
}

@media only screen and (min-width: 768px) {
    .ec-modal .ec-modal-wrap {
        padding: 40px 10px;
        width: 50%;
        margin: 20px auto;
    }
}

.ec-modal .ec-modal-close {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 20px;
    height: 30px;
    width: 20px;
}

.ec-modal .ec-modal-close:hover {
    color: #4b5361;
}

.ec-modal .ec-modal-box {
    text-align: center;
}

.ec-modal .ec-role {
    margin-top: 20px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
商品詳細

商品詳細ページに関する Project コンポーネントを定義します。

ex [商品詳細ページ](http://demo3.ec-cube.net/products/detail/18)


Markup:
include /assets/tmpl/elements/14.1.product.pug
+ec-productSimpleRole

Styleguide 14.1
*/
.ec-productRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-productRole:after {
    content: " ";
    display: table;
}

.ec-productRole:after {
    clear: both;
}

.ec-productRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-productRole img {
    max-width: 100%;
}

.ec-productRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-productRole *,
.ec-productRole *::before,
.ec-productRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-productRole img {
    width: 100%;
}

.ec-productRole .ec-productRole__img {
    margin-right: 0;
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .ec-productRole .ec-productRole__img {
        margin-right: 16px;
        margin-bottom: 0;
    }
}

.ec-productRole .ec-productRole__profile {
    margin-left: 0;
}

@media only screen and (min-width: 768px) {
    .ec-productRole .ec-productRole__profile {
        margin-left: 16px;
    }
}

.ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 20px;
    margin-bottom: 0;
    padding-bottom: .5em;
    border-bottom: none;
}

@media only screen and (min-width: 768px) {
    .ec-productRole .ec-productRole__title .ec-headingTitle {
        font-size: 22px;
    }
}

.ec-productRole .ec-productRole__tags {
    margin-bottom: 1em;
    padding: 0;
    /* padding-bottom: 1em; */
}

.ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: .5em .7em;
    list-style: none;
    font-size: 12px;
    color: #fff;
    /* border: solid 1px #D7DADD; */
    border-radius: 3px;
    background-color: #e6468a;
    line-height: 1;
}

.ec-productRole .ec-productRole__priceRegular {
    padding-top: 14px;
}

.ec-productRole .ec-productRole__priceRegularTax {
    margin-left: 5px;
    font-size: 10px;
}

.ec-productRole .ec-productRole__price {
    color: #DE5D50;
    font-size: 28px;
    padding: 0.5em 0 0;
    border-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .ec-productRole .ec-productRole__price {
        /* padding: 14px 0; */
        /* border-bottom: 1px dotted #ccc; */
    }
}

.ec-productRole .ec-productRole__code {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc;
}

.ec-productRole .ec-productRole__category {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc;
}

.ec-productRole .ec-productRole__category a {
    color: #33A8D0;
}

.ec-productRole .ec-productRole__category ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.ec-productRole .ec-productRole__actions {
    padding: 14px 0;
}

.ec-productRole .ec-productRole__actions .price_flex_box {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ec-productRole .ec-productRole__actions .ec-select select {
    height: 40px;
    max-width: 100%;
    min-width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-productRole .ec-productRole__actions .ec-select select {
        min-width: 350px;
        max-width: 350px;
    }
}

.ec-productRole .js_buy_btn_area,
.ec-productRole .ec-productRole__btn {
    width: 100%;
    margin-bottom: 10px;
}

.ec-productRole .js_buy_btn_area .js_buy_btn {
    background-color: #af0202;
    color: #fff;
    padding: 1.5em;
    font-size: 13px;
    /* display: block; */
    line-height: 1;
    text-align: center;
    transition: .3s;
    font-weight: 700;
    border-radius: 100vmax;
}

@media only screen and (min-width: 768px) {

    .ec-productRole .js_buy_btn_area .js_buy_btn,
    .ec-productRole .ec-productRole__btn {
        width: 60%;
        margin-bottom: 16px;
        min-width: 430px;
    }

    .ec-productRole .js_buy_btn_area .js_buy_btn:hover {
        background-color: #d33434;
    }
}

.ec-productRole .ec-productRole__description {
    /* margin-bottom: 16px; */
    font-size: 15px;
    margin-top: 1em;
    line-height: 1.6;
    padding-bottom: 1em;
    border-bottom: 1px dotted #ccc;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
カート

カート 注文詳細 に関する Project コンポーネントを定義します。

ex [カートページ](http://demo3.ec-cube.net/shopping)

(カート内に商品がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartRole

Styleguide 15.1

*/
.ec-cartRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ec-cartRole:after {
    content: " ";
    display: table;
}

.ec-cartRole:after {
    clear: both;
}

.ec-cartRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-cartRole img {
    max-width: 100%;
}

.ec-cartRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-cartRole *,
.ec-cartRole *::before,
.ec-cartRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-cartRole img {
    width: 100%;
}

.ec-cartRole::before {
    display: none;
}

.ec-cartRole .ec-cartRole__progress {
    width: 100%;
    text-align: center;
}

.ec-cartRole .ec-cartRole__error {
    width: 100%;
    text-align: center;
}

.ec-cartRole .ec-cartRole__error .ec-alert-warning {
    max-width: 80%;
    display: inline-block;
}

.ec-cartRole .ec-cartRole__totalText {
    margin-bottom: 0;
    padding: 16px 0 6px;
    width: 100%;
    text-align: center;
    font-weight: normal;
}

@media only screen and (min-width: 768px) {
    .ec-cartRole .ec-cartRole__totalText {
        margin-bottom: 30px;
        padding: 0;
    }
}

.ec-cartRole .ec-cartRole__cart {
    margin: 0;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-cartRole .ec-cartRole__cart {
        margin: 0;
    }
}

.ec-cartRole .ec-cartRole__actions {
    text-align: right;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-cartRole .ec-cartRole__actions {
        width: 25%;
        margin-right: 0;
    }
}

.ec-cartRole .ec-cartRole__total {
    padding: 15px 0 30px;
    font-weight: bold;
    font-size: 16px;
}

.ec-cartRole .ec-cartRole__totalAmount {
    margin-left: 30px;
    color: #de5d50;
    font-size: 16px;
}

@media only screen and (min-width: 768px) {
    .ec-cartRole .ec-cartRole__totalAmount {
        font-size: 24px;
    }
}

.ec-cartRole .ec-blockBtn--action {
    margin-bottom: 10px;
    color: #fff;
}

.ec-cartRole .ec-blockBtn--cancel {
    color: #fff;
}

/*
カート商品表示枠（テーブルヘッダ）

カート内の商品をを表示するテーブル枠です。

ex [カートページ　テーブル部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartTable

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>

Styleguide 15.1.2
*/
.ec-cartTable {
    display: table;
    border-top: 1px dotted #ccc;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-cartTable {
        border-top: none;
    }
}

/*
カート商品表示枠（テーブルヘッダ）

カート内の商品を表示するテーブルのヘッダです。
スマホでは非表示となります。

ex [カートページ　カートテーブルヘッダ部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)


Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
  +ec-cartHeader

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>


Styleguide 15.1.3
*/
.ec-cartHeader {
    display: none;
    width: 100%;
    background: #F4F3F0;
}

@media only screen and (min-width: 768px) {
    .ec-cartHeader {
        display: table-row;
    }
}

.ec-cartHeader .ec-cartHeader__label {
    display: table-cell;
    padding: 16px;
    text-align: center;
    background: #F4F3F0;
    overflow-x: hidden;
    font-weight: bold;
}

.ec-cartCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-cartCompleteRole:after {
    content: " ";
    display: table;
}

.ec-cartCompleteRole:after {
    clear: both;
}

.ec-cartCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-cartCompleteRole img {
    max-width: 100%;
}

.ec-cartCompleteRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-cartCompleteRole *,
.ec-cartCompleteRole *::before,
.ec-cartCompleteRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-cartCompleteRole img {
    width: 100%;
}

/*
カート内商品

カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。

ex [カートページ　テーブル部分](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
  +ec-cartRow

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>


Styleguide 15.1.4
*/
.ec-cartRow {
    display: table-row;
}

.ec-cartRow .ec-cartRow__delColumn {
    border-bottom: 1px dotted #ccc;
    text-align: center;
    display: table-cell;
    width: 14%;
    vertical-align: middle;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__delColumn {
        width: 8.3333333%;
    }
}

.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
    width: 1.5em;
    height: 1.5em;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__delColumn .ec-icon img {
        width: 1em;
        height: 1em;
    }
}

.ec-cartRow .ec-cartRow__contentColumn {
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
    display: table;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__contentColumn {
        display: table-cell;
    }
}

.ec-cartRow .ec-cartRow__img {
    display: table-cell;
    width: 40%;
    vertical-align: middle;
    padding-right: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__img {
        display: inline-block;
        min-width: 80px;
        max-width: 100px;
        padding-right: 0;
    }
}

.ec-cartRow .ec-cartRow__summary {
    display: table-cell;
    margin-left: 5px;
    font-weight: bold;
    vertical-align: middle;
    width: 60%;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__summary {
        display: inline-block;
        margin-left: 20px;
        vertical-align: middle;
    }
}

.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
    margin-bottom: 5px;
}

.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
    display: block;
    font-weight: normal;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
        display: none;
    }
}

.ec-cartRow .ec-cartRow__amountColumn {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    vertical-align: middle;
    text-align: center;
    width: 20%;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__amountColumn {
        width: 16.66666667%;
    }
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
    display: none;
    margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
        display: block;
    }
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
    display: block;
    margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
        display: none;
    }
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
        display: block;
    }
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
    margin: 0 2px;
    display: inline-block;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    cursor: pointer;
    line-height: 40px;
    vertical-align: middle;
    position: relative;
    text-align: center;
    background: #fff;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img {
    display: block;
    margin-left: -0.4em;
    width: .8em;
    height: .8em;
    position: absolute;
    top: 28%;
    left: 50%;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton,
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
    margin: 0 2px;
    display: inline-block;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    cursor: pointer;
    line-height: 40px;
    vertical-align: middle;
    position: relative;
    text-align: center;
    background: #fff;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img,
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
    display: block;
    margin-left: -0.4em;
    width: .8em;
    height: .8em;
    position: absolute;
    top: 28%;
    left: 50%;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
    cursor: default;
}

.ec-cartRow .ec-cartRow__subtotalColumn {
    display: none;
    border-bottom: 1px dotted #ccc;
    text-align: right;
    width: 16.66666667%;
}

@media only screen and (min-width: 768px) {
    .ec-cartRow .ec-cartRow__subtotalColumn {
        display: table-cell;
    }
}

/*
カート内商品(商品が１の場合)

商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。

ex [カートページ　テーブル部分](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
  +ec-cartRowOnly

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>


Styleguide 15.1.5
*/
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
    cursor: default;
}

/*
アラート

カート内の商品に問題があることを示す警告メッセージです。

ex [マイページ　カート](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartRole
  .ec-cartRole__cart
    +ec-alert-warning

Styleguide 15.1.6
*/
.ec-alert-warning {
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #af0603;
    margin-bottom: 20px;
    border-radius: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-alert-warning .ec-alert-warning__icon {
    margin-right: 1rem;
    width: 20px;
    height: 20px;
    color: #fff;
    fill: #fff;
    vertical-align: top;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-alert-warning .ec-alert-warning__text {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    position: relative;
}

/*
アラート(空)

カートが空であることを示す警告メッセージです。

ex [マイページ　カート](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-off3Grid
        .ec-off3Grid__cell
            +ec-alert-warningEnpty

Styleguide 15.1.7
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
注文内容確認

カート内 注文内容確認に関する Project コンポーネントを定義します。

ex [マイページ　注文詳細](http://demo3.ec-cube.net/shopping)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderRole

Styleguide 15.2
*/
.ec-orderRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.ec-orderRole:after {
    content: " ";
    display: table;
}

.ec-orderRole:after {
    clear: both;
}

.ec-orderRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-orderRole img {
    max-width: 100%;
}

.ec-orderRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-orderRole *,
.ec-orderRole *::before,
.ec-orderRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-orderRole img {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-orderRole {
        margin-top: 20px;
        flex-direction: row;
    }
}

.ec-orderRole .ec-inlineBtn {
    font-weight: normal;
}

.ec-orderRole .ec-orderRole__detail {
    padding: 0;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-orderRole .ec-orderRole__detail {
        padding: 0 16px;
        width: 66.66666%;
    }
}

.ec-orderRole .ec-orderRole__summary {
    width: 100%;
}

.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
    display: inline-block;
}

@media only screen and (min-width: 768px) {
    .ec-orderRole .ec-orderRole__summary {
        width: 33.33333%;
        padding: 0 16px;
    }

    .ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
        display: none;
    }
}

.ec-orderRole .ec-borderedList {
    margin-bottom: 20px;
    border-top: 1px dotted #ccc;
}

@media only screen and (min-width: 768px) {
    .ec-orderRole .ec-borderedList {
        border-top: none;
    }
}

/*
注文履歴詳細 オーダ情報

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　オーダ情報](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderInfo

Styleguide 15.2.1
*/
.ec-orderOrder {
    margin-bottom: 30px;
}

.ec-orderOrder .ec-orderOrder__items {
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
}

/*
注文履歴詳細 お客様情報

マイページ 注文詳細部に関する Project コンポーネントを定義します。

ex [マイページ　オーダ情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAccount

Styleguide 15.2.2
*/
.ec-orderAccount {
    margin-bottom: 30px;
}

.ec-orderAccount p {
    margin-bottom: 0;
}

.ec-orderAccount:after {
    content: " ";
    display: table;
}

.ec-orderAccount:after {
    clear: both;
}

.ec-orderAccount .ec-orderAccount__change {
    display: inline-block;
    margin-left: 10px;
    float: right;
}

.ec-orderAccount .ec-orderAccount__account {
    margin-bottom: 16px;
}

/*
注文詳細 配送情報

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　配送情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderDelivery

Styleguide 15.2.3
*/
.ec-orderDelivery .ec-orderDelivery__title {
    padding: 16px 0 17px;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    padding-right: 70px;
}

.ec-orderDelivery .ec-orderDelivery__title .size {
    font-size: .75em;
    margin-left: 1em;
    color: #af0202;
}

.ec-orderDelivery .ec-orderDelivery__change {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
}

.ec-orderDelivery .ec-orderDelivery__items {
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
}

.ec-orderDelivery .ec-orderDelivery__address {
    margin: 10px 0 18px;
}

.ec-orderDelivery .ec-orderDelivery__address p {
    margin: 0;
}

/*
注文履歴詳細 支払情報

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　支払情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderPayment
    .ec-rectHeading
      h2 お支払方法
    p 支払方法： 郵便振替

Styleguide 15.2.4
*/
/*
注文履歴詳細 お問い合わせ

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　お問い合わせ(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderConfirm
    .ec-rectHeading
      h2 お問い合わせ
    p 記載なし

Styleguide 15.2.5
*/
.ec-orderConfirm {
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    .ec-orderConfirm {
        margin-bottom: 0;
    }
}

.ec-orderConfirm .ec-input textarea,
.ec-orderConfirm .ec-halfInput textarea,
.ec-orderConfirm .ec-numberInput textarea,
.ec-orderConfirm .ec-zipInput textarea,
.ec-orderConfirm .ec-telInput textarea,
.ec-orderConfirm .ec-select textarea,
.ec-orderConfirm .ec-birth textarea {
    height: 96px;
}

/*
お届け先の複数指定

お届け先の複数指定に関するコンポーネントを定義します。

ex [マイページ　お届け先の複数指定](http://demo3.ec-cube.net/shopping/shipping_multiple)
(商品購入画面 → 「お届け先を追加する」を押下)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAddAddress

Styleguide 15.2.6
*/
.ec-AddAddress {
    padding: 0 10px;
}

@media only screen and (min-width: 768px) {
    .ec-AddAddress {
        margin: 0 10%;
    }
}

.ec-AddAddress .ec-AddAddress__info {
    margin-bottom: 32px;
    text-align: center;
    font-size: 16px;
}

.ec-AddAddress .ec-AddAddress__add {
    border-top: 1px solid #f4f4f4;
    padding-top: 20px;
    margin-bottom: 20px;
}

.ec-AddAddress .ec-AddAddress__item {
    display: table;
    padding: 16px;
    background: #f4f4f4;
    margin-bottom: 16px;
}

.ec-AddAddress .ec-AddAddress__itemThumb {
    display: table-cell;
    min-width: 160px;
    width: 20%;
}

.ec-AddAddress .ec-AddAddress__itemThumb img {
    width: 100%;
}

.ec-AddAddress .ec-AddAddress__itemtContent {
    display: table-cell;
    vertical-align: middle;
    padding-left: 16px;
    font-size: 16px;
}

.ec-AddAddress .ec-AddAddress__itemtTitle {
    font-weight: bold;
    margin-bottom: 10px;
}

.ec-AddAddress .ec-AddAddress__itemtSize {
    margin-bottom: 10px;
}

.ec-AddAddress .ec-AddAddress__select {
    margin-bottom: 5px;
}

.ec-AddAddress .ec-AddAddress__selectAddress {
    display: inline-block;
}

.ec-AddAddress .ec-AddAddress__selectAddress label {
    font-size: 16px;
    font-weight: normal;
}

.ec-AddAddress .ec-AddAddress__selectAddress select {
    min-width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-AddAddress .ec-AddAddress__selectAddress select {
        min-width: 350px;
    }
}

.ec-AddAddress .ec-AddAddress__selectNumber {
    display: inline-block;
    margin-left: 30px;
}

.ec-AddAddress .ec-AddAddress__selectNumber label {
    font-size: 16px;
    font-weight: normal;
}

.ec-AddAddress .ec-AddAddress__selectNumber input {
    display: inline-block;
    margin-left: 10px;
    width: 80px;
}

.ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
    margin-bottom: 8px;
}

.ec-AddAddress .ec-AddAddress__new {
    margin-bottom: 20px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
注文履歴一覧

マイページ 注文履歴部に関する Project コンポーネントを定義します。

ex [マイページ　注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole

Styleguide 16.1
*/
.mypage .ec-historyRole {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.ec-historyRole .ec-historyRole__contents {
    padding-top: 1em;
    padding-bottom: 16px;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    color: #525263;
}

.mypage .ec-historyRole .ec-historyRole__header {
    width: auto;
    flex-shrink: 0;
}

.mypage .ec-historyListHeader .ec-historyListHeader__date {
    font-size: 16px;
    margin-bottom: 0.4em;
}

.mypage .ec-historyListHeader .ec-definitions {
    margin: 0;
    font-size: 15px;
}

.mypage .ec-historyListHeader .ec-definitions+.ec-definitions {
    margin-top: .4em;
}

.mypage .ec-historyListHeader .ec-definitions dt {
    font-weight: 700;
}

.mypage .ec-historyListHeader .ec-definitions dd {}

.mypage .ec-historyRole .ec-historyRole__contents {
    flex-direction: column-reverse;
    gap: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;
    border: 1px solid #9db6c3;
    justify-content: flex-end;
}

.mypage .ec-historyRole .ec-historyRole__contents .ec-historyRole__detail {
    width: 100%;
    border: none;
}

.mypage .ec-historyRole .ec-historyRole__contents+.ec-historyRole__contents {}

@media only screen and (min-width: 768px) {
    .ec-historyRole .ec-historyRole__contents {
        flex-direction: row;
    }
}

.ec-historyRole .ec-historyRole__header {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .ec-historyRole .ec-historyRole__header {
        width: 33.3333%;
    }
}

.ec-historyRole .ec-historyRole__detail {
    border-top: 1px dotted #ccc;
    width: 100%;
}

.ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
    border-top: none;
}

.mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid {
    padding: 0;
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: flex-start;
}

.mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__img {
    padding: 0;
    width: 120px;
    aspect-ratio: 3/4;
    flex-shrink: 0;
    display: block;
}

.mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content {
    flex-grow: 1;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content .ec-historyRole__detailTitle {
    font-size: 18px;
}

.mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content p:not([class]) {
    font-size: 15px;
    line-height: 1.5;
}

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: bold;
}

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    .ec-historyRole .ec-historyRole__detail {
        width: 66.6666%;
        border-top: none;
    }
}

/*
注文履歴一覧 規格

マイページ 注文履歴内アイテムの規格を定義します。

ex [マイページ　注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole-option

Styleguide 16.1.1
*/
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption {
    display: inline-block;
    margin-bottom: 8px;
    margin-right: .5rem;
    font-size: 1.6rem;
}

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
    display: inline-block;
    padding-left: .5rem;
    content: "/";
    font-weight: bold;
}

/*
注文履歴一覧ヘッダ

注文履歴一覧で使用するヘッダのコンポーネントを定義します。

ex [マイページ　注文履歴一覧ヘッダ](http://demo3.ec-cube.net/mypage)
(要ログイン)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyHeader
p hofe

Styleguide 16.1.2
*/
.ec-historyListHeader .ec-historyListHeader__date {
    font-weight: bold;
    font-size: 16px;
}

@media only screen and (min-width: 768px) {
    .ec-historyListHeader .ec-historyListHeader__date {
        font-weight: bold;
        font-size: 20px;
    }
}

.ec-historyListHeader .ec-historyListHeader__action {
    margin: 16px 0;
}

.mypage .ec-historyListHeader .ec-historyListHeader__action {
    margin-bottom: 0;
    margin-top: 20px;
}

.ec-historyListHeader .ec-historyListHeader__action a {
    font-size: 12px;
    font-weight: normal;
}

.mypage .ec-historyListHeader .ec-historyListHeader__action a {
    width: 100%;
    border: none;
    background-color: #9db6c3;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    border-radius: 100vmax;
    transition: .3s;
    padding: 1em;
    line-height: 1;
}

.mypage .ec-historyListHeader .ec-historyListHeader__action a:hover {
    opacity: .7;
}

@media only screen and (min-width: 768px) {
    .ec-historyListHeader .ec-historyListHeader__action a {
        font-size: 14px;
    }
}

/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
注文履歴詳細

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　注文詳細](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailRole

Styleguide 16.2
*/
/*
注文履歴詳細 メール履歴

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　メール履歴](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMail

Styleguide 16.2.5
*/
.ec-orderMails .ec-orderMails__item {
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
}

.ec-orderMails .ec-orderMails__time {
    margin: 0;
}

.ec-orderMails .ec-orderMails__body {
    display: none;
}

/*
注文履歴詳細 メール履歴個別

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　メール履歴個別](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMailHistory

Styleguide 16.2.6
*/
.ec-orderMail {
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 16px;
}

.ec-orderMail .ec-orderMail__time {
    margin: 0;
}

.ec-orderMail .ec-orderMail__body {
    display: none;
}

.ec-orderMail .ec-orderMail__time {
    margin-bottom: 4px;
}

.ec-orderMail .ec-orderMail__link {
    margin-bottom: 4px;
}

.ec-orderMail .ec-orderMail__link a {
    color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}

.ec-orderMail .ec-orderMail__link a:hover {
    color: #33A8D0;
}

.ec-orderMail .ec-orderMail__close a {
    color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}

.ec-orderMail .ec-orderMail__close a:hover {
    color: #33A8D0;
}

/*
住所一覧

カート 注文詳細 に関する Project コンポーネントを定義します。

ex [マイページ内 お届け先編集](http://demo3.ec-cube.net/mypage/delivery)

Markup:
include /assets/tmpl/elements/17.1.address.pug
+ec-addressList
+ec-addressRole

sg-wrapper:
<div class="ec-addressRole">
  <sg-wrapper-content/>
</div>

Styleguide 17.1

*/
.ec-addressRole .ec-addressRole__item {
    border-top: 1px dotted #ccc;
}

.ec-addressRole .ec-addressRole__actions {
    margin-top: 32px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #ccc;
}

.ec-addressList .ec-addressList__item {
    display: table;
    width: 100%;
    position: relative;
    border-bottom: 1px dotted #ccc;
}

.ec-addressList .ec-addressList__remove {
    vertical-align: middle;
    padding: 16px;
    text-align: center;
}

.ec-addressList .ec-addressList__remove .ec-icon img {
    width: 1em;
    height: 1em;
}

.ec-addressList .ec-addressList__address {
    display: table-cell;
    vertical-align: middle;
    padding: 16px;
    margin-right: 4em;
    width: 80%;
}

.ec-addressList .ec-addressList__action {
    position: relative;
    vertical-align: middle;
    text-align: right;
    top: 27px;
    padding-right: 10px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
パスワードリセット

カート 注文詳細 に関する Project コンポーネントを定義します。

ex [パスワードリセット画面](http://demo3.ec-cube.net/forgot)

(カート内に商品がある状態でアクセス)

Markup:
include /assets/tmpl/elements/18.1.password.pug
+ec-passwordRole

Styleguide 18.1

*/
.ec-forgotRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-forgotRole:after {
    content: " ";
    display: table;
}

.ec-forgotRole:after {
    clear: both;
}

.ec-forgotRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-forgotRole img {
    max-width: 100%;
}

.ec-forgotRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-forgotRole *,
.ec-forgotRole *::before,
.ec-forgotRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-forgotRole img {
    width: 100%;
}

.ec-forgotRole .ec-forgotRole__intro {
    font-size: 16px;
}

.ec-forgotRole .ec-forgotRole__form {
    margin-bottom: 16px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
会員登録

新規会員登録 に関する Project コンポーネントを定義します。

ex [新規会員登録画面　会員登録](http://demo3.ec-cube.net/entry)

Markup:
include /assets/tmpl/elements/19.1.register.pug
+ec-registerRole

Styleguide 19.1

*/
.ec-registerRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-registerRole:after {
    content: " ";
    display: table;
}

.ec-registerRole:after {
    clear: both;
}

.ec-registerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-registerRole img {
    max-width: 100%;
}

.ec-registerRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-registerRole *,
.ec-registerRole *::before,
.ec-registerRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-registerRole img {
    width: 100%;
}

.ec-registerRole .ec-registerRole__actions {
    padding-top: 20px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .ec-registerRole .ec-registerRole__actions {
        text-align: left;
    }
}

.ec-registerRole .ec-registerRole__actions p {
    margin-bottom: 16px;
}

.ec-registerRole .ec-blockBtn--action {
    margin-bottom: 16px;
}

.ec-registerCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-registerCompleteRole:after {
    content: " ";
    display: table;
}

.ec-registerCompleteRole:after {
    clear: both;
}

.ec-registerCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-registerCompleteRole img {
    max-width: 100%;
}

.ec-registerCompleteRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-registerCompleteRole *,
.ec-registerCompleteRole *::before,
.ec-registerCompleteRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-registerCompleteRole img {
    width: 100%;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
お問い合わせ

お問い合わせ に関する Project コンポーネントを定義します。

ex [お問い合わせ](http://demo3.ec-cube.net/contact)

Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole

Styleguide 19.2

*/
.ec-contactRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-contactRole:after {
    content: " ";
    display: table;
}

.ec-contactRole:after {
    clear: both;
}

.ec-contactRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-contactRole img {
    max-width: 100%;
}

.ec-contactRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-contactRole *,
.ec-contactRole *::before,
.ec-contactRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-contactRole img {
    width: 100%;
}

.ec-contactRole .ec-contactRole__actions {
    padding-top: 20px;
}

.ec-contactRole p {
    margin: 16px 0;
}

.ec-contactConfirmRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-contactConfirmRole:after {
    content: " ";
    display: table;
}

.ec-contactConfirmRole:after {
    clear: both;
}

.ec-contactConfirmRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-contactConfirmRole img {
    max-width: 100%;
}

.ec-contactConfirmRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-contactConfirmRole img {
    width: 100%;
}

.ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px;
}

.ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px;
}

.ec-contactCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-contactCompleteRole:after {
    content: " ";
    display: table;
}

.ec-contactCompleteRole:after {
    clear: both;
}

.ec-contactCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-contactCompleteRole img {
    max-width: 100%;
}

.ec-contactCompleteRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-contactCompleteRole img {
    width: 100%;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
お客様情報の入力

ログインせずゲストとして商品を購入する際の、お客様情報の入力 に関する Project コンポーネントを定義します。

ex [カートSTEP2 お客様情報の入力(ゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember)

Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge

Styleguide 19.3

*/
.ec-customerRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-customerRole:after {
    content: " ";
    display: table;
}

.ec-customerRole:after {
    clear: both;
}

.ec-customerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-customerRole img {
    max-width: 100%;
}

.ec-customerRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-customerRole *,
.ec-customerRole *::before,
.ec-customerRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-customerRole img {
    width: 100%;
}

.ec-customerRole .ec-customerRole__actions {
    padding-top: 20px;
}

.ec-customerRole .ec-blockBtn--action {
    margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    .ec-customerRole .ec-blockBtn--action {
        margin-bottom: 16px;
    }
}

.ec-contactConfirmRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-contactConfirmRole:after {
    content: " ";
    display: table;
}

.ec-contactConfirmRole:after {
    clear: both;
}

.ec-contactConfirmRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-contactConfirmRole img {
    max-width: 100%;
}

.ec-contactConfirmRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-contactConfirmRole img {
    width: 100%;
}

.ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px;
}

.ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px;
}

.ec-contactCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.ec-contactCompleteRole:after {
    content: " ";
    display: table;
}

.ec-contactCompleteRole:after {
    clear: both;
}

.ec-contactCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-contactCompleteRole img {
    max-width: 100%;
}

.ec-contactCompleteRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-contactCompleteRole img {
    width: 100%;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.bg-load-overlay {
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    opacity: 1;
}

/*
404ページ

404 エラー画面で使用するページコンポーネントです。

ex [404エラー画面](http://demo3.ec-cube.net/404)

Markup:
include /assets/tmpl/elements/20.1.404.pug
+ec-404Role

Styleguide 20.1

*/
.ec-404Role {
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    height: 100vh;
    background-color: #f2f2f2;
    text-align: center;
    box-sizing: border-box;
}

.ec-404Role textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-404Role img {
    max-width: 100%;
}

.ec-404Role html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-404Role *,
.ec-404Role *::before,
.ec-404Role *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-404Role img {
    width: 100%;
}

.ec-404Role .ec-404Role__icon img {
    width: 1em;
    height: 1em;
}

.ec-404Role .ec-404Role__title {
    font-weight: bold;
    font-size: 25px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
退会手続き

退会手続きで使用するページコンポーネントです。

ex [退会手続き](http://demo3.ec-cube.net/mypage/withdraw)

Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawRole

Styleguide 21.1

*/
.ec-withdrawRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    text-align: center;
    padding: 0 16px;
}

.ec-withdrawRole:after {
    content: " ";
    display: table;
}

.ec-withdrawRole:after {
    clear: both;
}

.ec-withdrawRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-withdrawRole img {
    max-width: 100%;
}

.ec-withdrawRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-withdrawRole *,
.ec-withdrawRole *::before,
.ec-withdrawRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-withdrawRole img {
    width: 100%;
}

.ec-withdrawRole .ec-withdrawRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px;
}

.ec-withdrawRole .ec-withdrawRole__description {
    margin-bottom: 32px;
    font-size: 16px;
}

.ec-withdrawRole .ec-icon img {
    width: 100px;
    height: 100px;
}

/*
退会手続き実行確認

退会手続き実行確認で使用するページコンポーネントです。

ex [退会手続き　退会手続きへボタン→押下](http://demo3.ec-cube.net/mypage/withdraw)

Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawConfirm

Styleguide 21.1.2

*/
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel {
    margin-bottom: 20px;
}

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px;
}

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
    margin-bottom: 32px;
    font-size: 16px;
}

.ec-withdrawConfirmRole .ec-icon img {
    width: 100px;
    height: 100px;
}

/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
会員情報編集完了

会員情報編集完了で使用するページコンポーネントです。

ex [会員情報編集完了](http://demo3.ec-cube.net/mypage/change_complete)

Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole

Styleguide 22.1

*/
.ec-userEditCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    text-align: center;
    padding: 0 16px;
}

.ec-userEditCompleteRole:after {
    content: " ";
    display: table;
}

.ec-userEditCompleteRole:after {
    clear: both;
}

.ec-userEditCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

.ec-userEditCompleteRole img {
    max-width: 100%;
}

.ec-userEditCompleteRole html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ec-userEditCompleteRole *,
.ec-userEditCompleteRole *::before,
.ec-userEditCompleteRole *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.ec-userEditCompleteRole img {
    width: 100%;
}

.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px;
}

@media only screen and (min-width: 768px) {
    .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
        font-size: 32px;
    }
}

.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
    margin-bottom: 32px;
    font-size: 16px;
}

.page_list .product_name {
    font-weight: 700;
    color: #525263;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: .7em;
    font-size: 15px;
}

.page_list .product_text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.5;
    margin: .8em 0;
}

.page_list .price02-default {
    font-weight: 600;
    font-size: 22px;
    text-align: center;
    line-height: 1;
    /* margin-bottom: .4em; */
    color: #af0603;
    /* padding-top: .3em; */
    /* border-top: 1px dashed #ccc; */
}

.ec-shelfGrid__item .ec-productRole__actions .price_flex_box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 14px;
    gap: 14px;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
}

.ec-shelfGrid__item .ec-productRole__actions .ec-numberInput {
    text-align: right;
    /* margin-bottom: .8em; */
    font-size: 13px;
}

.ec-shelfGrid__item-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-productRole .ec-productRole__category_head {
    margin-bottom: .5em;
}

.ec-productRole .ec-productRole__category .category_list+.category_list {
    margin-top: .3em;
}

.ec-productRole .slick-slide {
    height: 467px !important;
}

.ec-productRole .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-sliderItemRole .slideThumb {
    /* height: 100%; */
    /* width: 100%; */
    object-fit: cover;
}

.same_category_product_area {
    margin-top: 50px;
}

.common_search_box .free_search_box .attention_btn .link .icon svg path {
    fill: #d80404;
    transition: .3s;
}

.common_search_box .free_search_box .attention_btn .link:hover .icon svg path {
    fill: #fff;
}

.color_num_area {
    display: flex;
    gap: .4em;
    font-size: 12px;
    margin-top: .5em;
}

.ec-productRole__profile .color_num_area {
    font-size: 16px;
    flex-wrap: wrap;
    display: inline-flex;
}

.ec-productRole__profile .color_num_area+.color_num_area {
    margin-left: .2em;
}

.color_num_area .color_num_data {
    flex: 1;
    border-radius: 3px;
    text-align: center;
    font-weight: 700;
    background-color: #fff;
    color: #525263;
    line-height: 1;
    padding: .3em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e4e4;
}

.ec-productRole__profile .color_num_area .color_num_data {
    padding: .3em 1em;
    width: fit-content;
    flex-shrink: 0;
    flex-grow: unset;
    white-space: nowrap;
}

.color_num_area .color_num_data.dan {
    background-color: #f2ffed;
}

.color_num_area .color_num_data.leg_type,
.color_num_area .color_num_data.kago_type {
    background-color: #f5fcff;
}

.color_num_area.cat_id_26 .color_num_data.kago_type.nui,
.color_num_area.cat_id_26 .color_num_data.kago_type.hana,
.color_num_area.cat_id_26 .color_num_data.kago_type.bal {
    font-size: 11px;
}

.color_num_area .color_num_data.kago_type.nui {
    background-color: #ffdc80;
}

.color_num_area .color_num_data.kago_type.hana {
    background-color: #eb94b9;
    color: #fff;
}

.color_num_area .color_num_data.kago_type.bal {
    background-color: #ce647e;
    color: #fff;
}

.color_num_area .color_num_data.color.red {
    background-color: #ce647e;
    color: #fff;
}

.color_num_area .color_num_data.color.white {
    background-color: white;
}

.color_num_area .color_num_data.color.pink {
    background-color: #eb8bb4;
    color: #fff;
}

.color_num_area .color_num_data.color.blue {
    background-color: #7cabeb;
    color: #fff;
}

.color_num_area .color_num_data.color.purple {
    background-color: #b083ce;
    color: #fff;
}

.color_num_area .color_num_data.color.yellow {
    background-color: #fff993;
}

.order_top_sec {
    margin-bottom: 100px;
}

.order_top_sec .top_box {
    background: #FFE5E5;
    padding: 20px 40px;
    margin-bottom: 30px;
    position: relative;
    z-index: 0;
}

.order_top_sec .top_box::before {
    content: "";
    mask-image: url(/html/user_data/assets/img/common/ordermade_illust.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    background: #000;
    width: 176px;
    aspect-ratio: 88/81;
    position: absolute;
    bottom: 20px;
    right: 50px;
    z-index: -1;
}

.order_top_sec .top_box .text_box .title {
    font-size: 28px;
    letter-spacing: .1em;
    font-weight: 400;
    margin-bottom: 10px;
}

.order_top_sec .top_box .text_box .title .large {
    font-size: 30px;
    font-weight: 500;
}

.order_top_sec .top_box .text_box .sub_text {
    font-size: 14px;
    letter-spacing: .02em;
    font-weight: 300;
}

.order_top_sec .cont .img_list {
    margin-bottom: 10px;
    position: relative;
    z-index: 0;
}

.order_top_sec .cont .img_list ul {
    display: flex;
    gap: 0 20px;
}

.order_top_sec .cont .img_list li.img1 {
    width: 240px;
}

.order_top_sec .cont .img_list li.img2 {
    width: 300px;
    translate: 0 20px;
}

.order_top_sec .cont .img_list li.img3 {
    width: 200px;
}

.order_top_sec .cont .img_list li.img4 {
    width: 230px;
    translate: 0 40px;
}

.order_top_sec .cont .img_list::before {
    content: "";
    width: 140px;
    height: 150px;
    background: #FFE5E5;
    position: absolute;
    bottom: -120px;
    left: 20px;
    z-index: -1;
}

.order_top_sec .cont .img_list::after {
    content: "";
    width: 60px;
    height: 60px;
    background: #FFFFED;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.order_top_sec .cont .img_list .inner::before {
    content: "";
    width: 250px;
    height: 130px;
    background: #FFFFED;
    position: absolute;
    top: 170px;
    left: 320px;
    z-index: -1;
}

.order_top_sec .cont .desc_box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 60px;
}

.order_top_sec .cont .desc_box .img_box {
    flex-shrink: 0;
    width: 290px;
}

.order_top_sec .cont .desc_box .img_box .img+.img {
    margin-top: 10px;
}

.order_top_sec .cont .desc_box .img_box .img1 {
    width: 190px;
    margin-left: auto;
    translate: -20px 0;
}

.order_top_sec .cont .desc_box .text_box {
    width: 100%;
}

.order_top_sec .cont .desc_box .text_box .textarea {
    margin-bottom: 20px;
}

.order_top_sec .cont .desc_box .text_box .textarea .text {
    font-size: 20px;
    letter-spacing: .07em;
    font-weight: 900;
    line-height: 1.5;
}

.order_top_sec .cont .desc_box .text_box .note {
    color: #D80504;
    font-size: 14px;
    letter-spacing: .06em;
    font-weight: 600;
    line-height: 1.5;
}

/* 差出人情報を届け先情報にコピーするボタン */
.copy-sender {
    text-align: center;
}

.copy-btn {
    background: #07913a;
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
}

/*3/1緊急start*/
div#attention_wrap {
    border: 10px double #1a1a1a;
    padding: 50px;
    margin-bottom: 100px;
    background: #f0f0f0;
    position: relative;
    color: #e04848;
}

div#attention_wrap p {
    font-size: 20px;
    line-height: 2;
    text-align: center;
    font-weight: 600;
    text-decoration: underline;
}

div#top_info .wrap {
    border: 2px solid #1a1a1a;
    padding: 1em;
    margin-bottom: 50px;
}

div#top_info .wrap p {
    font-size: 16px;
    text-align: center;
    line-height: 2;
    font-weight: 600;
}

#viewport_sw a {
    display: block;
    text-align: center;
    padding: 3% 0;
    width: 80%;
    background: #858585;
    color: #fff;
    font-size: 3vw;
    z-index: 200;
    margin: 0 auto;
    border-radius: 20px;
}

#viewport_sw {
    background: #1a1a1ac4;
    padding: 4vw 0;
}

div#line_banner {
    margin-bottom: 30px;
}

div#rose_banner {
    margin-bottom: 100px;
}

#page_map .text {
    font-size: 16px;
    font-weight: 600;
    padding-left: 50px;
    position: relative;
    margin-top: 50px;
}

#page_map .text:after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(/html/user_data/assets/img/common/mushimegane_icon.png) no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 0;
    top: -5px;
}

.ft_fixed {
    width: 100%;
    z-index: 99999;
}

.shop_linkWrap {
    background: #fff;
    padding: 20px 0;
    text-align: center;
    border-top: 2px solid #07913a;
}

.shop_linkWrap .wrap {
    position: relative;
}

.shop_linkWrap h3 {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #07913a;
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.shop_linkWrap .wrap:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #07913a;
    position: absolute;
    left: 0;
    top: 8px;
}

.shop_linkWrap .wrap a.btn {
    display: block;
    width: 48%;
    height: 35px;
    line-height: 35px;
    background: #2b2b2b;
    color: #fff;
    border-radius: 50px;
    transition: .3s;
}

.shop_linkWrap .wrap a.btn:hover {
    background: #ffa900;
}

#company_page table th {
    width: 20%;
    font-weight: bold;
}

#company_page table td {
    width: 80%;
}

h2.catchText {
    margin-bottom: 10px;
    font-size: 12px;
    color: #fff;
}

.catchText {
    background: #009235;
    color: #fff;
    padding: 10px;
}

a.juyoBtn {
    display: block;
    width: 23%;
    height: 35px;
    background: #af0202;
    border-radius: 10px;
    text-align: center;
    line-height: 35px;
    color: #fff;
    position: relative;
    padding-left: 10px;
}

a.juyoBtn i {
    margin-right: 5px;
    font-size: 18px;
    position: absolute;
    left: 15px;
    top: 8px;
}

#main-visual .vegas-wrapper {
    padding-top: 80px !important;
}

.tsuyomiWrap {
    position: relative;
}

.cart_fixed {
    width: 120px;
    position: fixed;
    right: 10px;
    top: 200px;
    z-index: 3;
    background: #fff;
    padding: 5px;
    height: 0;
    visibility: hidden;
}

.cart_fixed div#cart_area {
    margin-bottom: 0;
}

.mainBottom {
    padding: 50px 0;
}

.top_menuNav .menuWrap {
    width: 24%;
}

.top_menuNav h3 {
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding-left: 30px;
    background: #e9e9e9;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    margin-top: 20px;
}

.top_menuNav h3:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #07913a;
    position: absolute;
    right: 20px;
    top: 25px;
}

.top_menuNav h3:before {
    content: "+";
    position: absolute;
    right: 25px;
    top: -1px;
    color: white;
    z-index: 2;
    font-weight: 300;
}

.top_menuNav h3.nowOpen:before {
    content: "-";
    right: 27px;
}

.top_menuNav ul {
    padding: 10px;
    background: #e9e9e9;
}

.top_menuNav li a {
    background: white;
    display: block;
    color: #000;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    position: relative;
    margin-bottom: 5px;
    transition: 0.3s;
    font-weight: 600;
}

.top_menuNav li a:hover {
    background: #fafa21;
}

.top_menuNav li a:before {
    content: "- ";
}

.kiji_area {
    font-size: 16px;
    line-height: 2;
}

#topcolumn {
    padding-top: 50px;
}

#topcolumn #information_area h2 {
    font-size: 25px;
    margin-bottom: 1em;
}

#topcolumn #information_area h2 span {
    font-size: 20px;
    margin-left: 1em;
    letter-spacing: .1em;
    color: #07913a;
}

#topcolumn #information_area {
    padding: 20px;
}

#topcolumn #information_area dl:first-child {
    border-top: 1px solid #ccc;
}

#topcolumn #information_area dl {
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    padding: 1em 5px;
    align-items: flex-start;
}

#topcolumn #information_area dl a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    color: #1a1a1a;
    line-height: 2;
    font-size: 14px;
    min-height: 28px;
}

#topcolumn #information_area dl dt {
    width: 15%;
    line-height: 2;
    font-weight: 600;
}

#topcolumn #information_area dl dd {
    width: 85%;
    padding-right: 50px;
    position: relative;
}

#topcolumn #information_area dl dd a:before {
    font-family: "Font Awesome 5 Free";
    /* content: '\f054'; */
    font-weight: 900;
    position: absolute;
    right: 5px;
    top: 2px;
    color: #ccc;
}

a.attention_btn {
    background: #af0202;
    display: block;
    color: #fff;
    padding: 1em .5em;
    line-height: 1.6;
    text-align: center;
    border-radius: 5px;
}

.ec-cartRole__actions a.attention_btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 1em;
    font-size: 13px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    color: #fff;
    background-color: #af0202;
    border-color: #af0202;
    display: block;
    width: 100%;
    height: auto;
    line-height: 1;
    transition: .3s;
    border-radius: 100vmax;
    margin-bottom: 10px;
}

.ec-cartRole__actions a.attention_btn:hover {
    background-color: #d31313;
    border-color: #d31313;
}

a.attention_btn i {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
}

#linepay_page .flowWrap .flowIn {
    padding: 40px 20px;
    margin-bottom: 100px;
    background: #f1f1f1;
    border-top: 3px solid #cc0202;
    position: relative;
}

#linepay_page .flowWrap .flowIn:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 25px;
    border-color: #ccc transparent transparent transparent;
    position: absolute;
    left: calc(50% - 25px);
    bottom: -65px
}

#linepay_page .flowWrap .flowIn.type02::before {
    display: none;
}

#linepay_page .flowWrap .flowIn ul li {
    width: 48%;
    margin-bottom: 30px;
}

#linepay_page .flowWrap .flowIn.type03 ul li {
    width: 32%;
}

#linepay_page .flowWrap .flowIn.type01 ul li {
    width: 100%;
    padding: 0 10%;
}

#linepay_page .flowWrap .flowIn ul li span {
    display: block;
    background: #cc0202;
    color: #fff;
    padding: 1em;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
}

#linepay_page .linepay_banner {
    margin-bottom: 50px;
}

#linepay_page .flowWrap h3 {
    background: #00B900;
    color: #fff;
    font-size: 25px;
    font-weight: 300;
    padding: .8em 1em;
    margin-bottom: 1em;
}

#linepay_page .flowWrap h4 {
    font-size: 18px;
    margin-bottom: 50px;
    position: relative;
    padding-left: 60px;
    line-height: 2;
    font-weight: 600;
}

#linepay_page .flowWrap h4 span.num {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #cc0202;
    color: #fff;
    position: absolute;
    left: 0;
    top: 5px;
}

#linepay_page .flowWrap p.text {
    font-size: 14px;
    margin-bottom: 50px;
    font-weight: 600;
    text-align: center;
}

#linepay_page .flowWrap p.last_text {
    background: #fff;
    padding: 2em;
    font-size: 16px;
    line-height: 2;
    margin-top: 50px;
    font-weight: 600;
}

@media screen and (max-width: 1000px) {


    div#sp-link_wrap ul li {
        font-size: 12px;
    }

    div#sp-link_wrap ul li a:before {
        font-size: 40px;
    }

}

@media screen and (max-width: 850px) {
    div#sp-link_wrap ul li {
        font-size: 10px;
    }

    div#sp-link_wrap ul li a:before {
        font-size: 32px;
    }
}

.banner_wrap {
    margin-bottom: 100px;
}

.banner_wrap ul {
    justify-content: center;
}

.banner_wrap ul li {
    text-align: center;
    margin-bottom: 50px;
    width: 48%;
    margin: 1%;
}

.banner_wrap ul li img {
    width: 100%;
}

/* .banner_wrap ul li:nth-child(2) img{
    border: 1px solid #3f3030;
} */

p.junbi {
    font-size: 40px;
    line-height: 100px;
    text-align: center;
}

p.haha_list_text {
    font-size: 14px;
    margin-top: 40px;
    margin-bottom: 10px;
    background: #fff;
    padding: 1em;
    text-align: center;
    border: 1px solid #07913a;
    line-height: 2;
}

.overlay {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
}

.overlay .btn_area {
    width: 80%;
    height: 80%;
    max-width: 1000px;
    max-height: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.overlay .btn_area .ttl {
    font-weight: bold
}

.overlay .btn_area p {
    padding: 15px
}

.overlay .btn_area button {
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
}

.overlay .btn_area button:hover {
    cursor: pointer;
}

.overlay .btn_area img {
    height: 100%;
}

/* フッターのラインリンク花屋さんのボタンstart */
.ft_line {
    position: fixed;
    bottom: 0;
    width: 250px;
    right: 0;
}

.ft_line_batu {
    background-color: #333;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 17px;
    float: right;
    cursor: pointer;
}

.ft_line.click {
    display: none;
}


/* フッターのラインリンク花屋さんのボタンend */

.order_area {
    background: url('/html/user_data/assets/img/common/order-image.jpeg') no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
    padding: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.order_area:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
}

.order_area .title_area {
    position: relative;
    margin-bottom: 50px;
}

.order_area .title_area h2 {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    border-bottom: 2px solid;
    padding-bottom: .5em;
}

.order_area .title_area h2 span.en {
    display: block;
    font-size: 40px;
}

.order_area .title_area p {
    font-size: 20px;
    margin-bottom: 3em;
}

.order_area .title_area a {
    display: block;
    width: 300px;
    line-height: 50px;
    margin: 0 auto;
    color: #000;
    background: #fff;
    font-weight: 600;
    transition: .3s;
    position: relative;
    padding-right: 20px;
}

.order_area .title_area a:before {
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 0;
    color: #000;
}

.order_area .title_area a:hover {
    background-color: #ff9600;
    border-color: #ff9600;
    color: #fff;
}

.order_area ul {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.order_area ul li {
    width: 32%;
}

.order_area ul li a {
    display: block;
    padding: 20px 20px;
    padding-top: 130px;
    color: #fff;
    border: 3px solid;
    background-size: 70px !important;
    background-position: center 30px !important;
    background-repeat: no-repeat !important;
    font-size: 14px;
    line-height: 1.5;
    transition: .3s;
}

.order_area ul li a:hover {
    background-color: #ff9600;
    border-color: #ff9600;
}

.order_area ul li a span {
    display: block;
    font-style: italic;
}

.order_area ul li.advance a {
    background-image: url(/html/user_data/assets/img/common/btn01_icon.svg);
}

.order_area ul li.about a {
    background-image: url(/html/user_data/assets/img/common/btn02_icon.svg);
}

.order_area ul li.option a {
    background-image: url(/html/user_data/assets/img/common/btn03_icon.svg);
}

div#main-contents .banner_area {
    margin-bottom: 80px;
}

div#main-contents .banner_area img {
    transition: .3s;
}

div#main-contents .banner_area img:hover {
    opacity: .7;
}

div#undercolumn_entry .kiyaku_text {
    margin: 20px auto;
    padding: 10px;
    border: solid 1px #ccc;
    width: 94%;
    background: #fff;
}

.ec-shelfGrid__item .more_btn {
    margin-top: 1em;
    flex: unset !important;
}

.ec-shelfGrid a {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ec-shelfGrid .ec-productRole__btn {
    display: flex;
    flex-direction: column;
    /* flex-grow: 1; */
    justify-content: flex-end;
}

.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
    margin-bottom: 0 !important;
}

.ec-productRole__priceRegularPrice {
    font-size: 16px;
    margin-top: 1em;
    display: inline-block;
}

.ec-productRole .ec-productRole__priceRegularTax {
    font-size: 10px;
    margin-left: .5em;
}

.same_category_product_area .same_category_product_block .same_category_name {
    font-size: 18px;
    font-weight: 700;
    color: #e6468a;
    letter-spacing: .04em;
    line-height: 1.5;
    border-bottom: 1px solid #e6468a;
    padding-bottom: 0.5em;
    margin-bottom: 1.2em;
}

.same_category_product_area .same_category_product_block .product_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.same_category_product_area .same_category_product_block .product_grid .product_item {
    display: block;
}

.same_category_product_area .same_category_product_block .product_grid .product_item a {
    display: block;
}

.same_category_product_area .same_category_product_block .product_grid .product_item a .product_image {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    margin: 0 auto;
}

.same_category_product_area .same_category_product_block .product_grid .product_item a .product_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}

.same_category_product_area .same_category_product_block .product_grid .product_item a:hover .product_image img {
    transform: scale(1.1);
}

.same_category_product_area .same_category_product_block .product_grid .product_item a .product_name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 14px;
    letter-spacing: .02em;
    margin: .8em 0 .5em;
    color: #525263;
    font-weight: 700;
}

.same_category_product_area .same_category_product_block .product_grid .product_item a .product_price {
    font-size: 18px;
    font-weight: 600;
    text-align: right;
    color: #af0603;
}

.ec-searchnavRole__topicpath .ec-topicpath {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.ec-searchnavRole__topicpath .ec-topicpath .ec-topicpath__item,
.ec-searchnavRole__topicpath .ec-topicpath .ec-topicpath__divider,
.ec-searchnavRole__topicpath .ec-topicpath .ec-topicpath__item--active {
    min-width: unset;
    color: #000;
}

.ec-searchnavRole__topicpath .ec-topicpath .ec-topicpath__item a {
    color: #21913a;
    font-weight: 700;
}

.ec-searchnavRole__topicpath .ec-topicpath .ec-topicpath__item--active {
    font-weight: 400;
}

.surprise_sec_cont {
    margin-bottom: 80px;
}

.surprise_sec_cont .message_sec {
    margin-bottom: 80px;
}

.surprise_sec_cont .message_sec .sec_cont {
    background-color: #fff;
    padding: 50px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

.surprise_sec_cont .message_sec .sec_cont .sec_ttl {
    text-align: center;
    font-size: 26px;
    letter-spacing: .06em;
    font-weight: 700;
    color: #eb8bb4;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.surprise_sec_cont .message_sec .sec_cont .sec_ttl::before,
.surprise_sec_cont .message_sec .sec_cont .sec_ttl::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: currentColor;
}

.surprise_sec_cont .message_sec .sec_cont .inner_text_area .text {
    font-size: 16px;
    letter-spacing: .04em;
    line-height: 1.9;
    text-align: center;
    font-weight: 500;
}

.surprise_sec_cont .message_sec .sec_cont .inner_text_area .text+.text {
    margin-top: 1.5em;
}

#page_surprise_new .contents_area .wrap.nos {
    box-shadow: none;
}

.page_surprise_common_ttl_box {
    margin-bottom: 30px;
}

.page_surprise_common_ttl_box .ttl {
    background-color: #eb8bb4;
    line-height: 1.5;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    padding: .7em 1em;
}

.page_surprise_common_ttl_box .ttl_box_text {
    font-size: 18px;
    letter-spacing: .02em;
    margin-top: 1.3em;
}

.surprise_sec_cont .surprise_about_sec {
    margin-bottom: 80px;
}

.surprise_sec_cont .surprise_about_sec .sec_cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item {
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

.surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_img {
    width: 100%;
    height: 220px;
}

.surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_text_area {
    background-color: #fff;
    padding: 20px;
    flex-grow: 1;
}

.surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_text_area .item_ttl {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: .6em;
    letter-spacing: .04em;
    color: #a70f00;
}

.surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item .flow_text_area .flow_text,
.surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_text_area .item_text {
    font-size: 15px;
    letter-spacing: .02em;
}

.surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item+.flow_item {
    margin-top: 30px;
    position: relative;
}

.surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item+.flow_item::before {
    content: "";
    position: absolute;
    height: 30px;
    width: 4px;
    background-color: #ed9b93;
    top: 0;
    left: 38px;
    transform: translateY(-100%);
}

.surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item {
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
    background-color: #fff;
    padding: 20px;
}

.surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item .flow_num {
    line-height: 1;
    font-size: 30px;
    font-weight: 700;
    border-radius: 50%;
    background-color: #a70f00;
    aspect-ratio: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: #fff;
    margin-right: .7em;
}

.surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item .flow_text_area {
    flex-grow: 1;
}

.surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item .flow_text_area .flow_ttl {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .4em;
    color: #a70f00;
}

#page_surprise_new .bottom_message_area {
    margin-top: 80px;
}

#page_surprise_new .bottom_message_area .bottom_message_text {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    /* color: #a70f00; */
    text-align: center;
}

.page_surprise_insta_sec {
    padding-top: 120px;
}

.page_surprise_insta_sec .insta_iframe {
    aspect-ratio: 2/1;
}

.page_surprise_insta_sec .insta_iframe iframe {
    width: 100% !important;
    height: 100% !important;
}

.page_surprise_insta_sec .follow_btn {
    display: block;
    background-color: #eb8bb4;
    font-size: 18px;
    border: 2px solid #eb8bb4;
    color: #fff;
    padding: 1em 3.5em;
    border-radius: 100vmax;
    text-align: center;
    min-width: 320px;
    width: fit-content;
    margin: 2em auto 0;
    font-weight: 700;
    letter-spacing: .06em;
    position: relative;
    transition: .3s;
}

.page_surprise_insta_sec .follow_btn:hover {
    background-color: #fff;
    color: #eb8bb4;
}

.page_surprise_insta_sec .follow_btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.5em;
    width: .5em;
    height: .5em;
    border: 2px solid currentColor;
    border-bottom: none;
    border-left: none;
    transform: translateY(-50%) rotate(45deg);
}

.ec-orderSignboard .table-borderless {
    width: 100%;
}

.ec-orderSignboard .table-borderless th {
    width: 30% !important;
    padding: .5em .5em .5em 0;
    border-bottom: 1px dotted #ccc;
    font-size: 15px;
}

.ec-orderSignboard .table-borderless td {
    padding: .5em 0.5em .5em;
    border-bottom: 1px dotted #ccc;
    font-size: 15px;
}

.ec-orderRole .ec-orderRole__summary {
    margin-top: 0 !important;
}

.ec-orderRole .ec-orderRole__summary .ec-totalBox {
    position: sticky;
    top: 150px;
}

#page_shopping {
    overflow: visible;
}

.ec-rectHeading h2 {
    margin: 1.2em 0 0.8em;
}

.invalid-feedback.d-block {
    color: #af0202;
    font-weight: 700;
}

#paypal-credit-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pay_way_block {
    margin-top: 14px;
}

.page_detail #main-contents {
    padding-bottom: 0;
}

.same_category_product_area .same_category_product_block .product_grid .product_item a .product_num {
    display: none;
}



.ec-orderDelivery .note_text {
    font-size: 15px;
    color: #af0202;
    margin-top: 1em;
    font-weight: 700;
    margin-bottom: 1em;
}

.detail_search_head {
    background-color: #e9f1f5;
    font-size: 15px;
    padding: 0.8em 1em;
    color: #525252;
    font-weight: 700;
    margin: 1.5em 0 .7em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail_search_head .icon {
    width: 0.8em;
    height: 0.8em;
    flex-shrink: 0;
    position: relative;
}

.detail_search_head .icon::before,
.detail_search_head .icon::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    top: calc(50% - 2px);
    left: 0;
    right: 0;
    transition: .3s;
}

.detail_search_head .icon::after {
    transform: rotate(90deg);
}

.detail_search_head.nowOpen .icon::after {
    opacity: 0;
}

#detail_search .search_block {
    background-color: #f8f8f8;
    padding: 20px;
}

#detail_search .search_block+.search_block {
    margin-top: 12px;
}

#detail_search .search_block .detail_search_name {
    font-size: 15px;
    font-weight: 700;
    border-left: 3px solid currentColor;
    padding-left: .5em;
    margin-bottom: .7em;
}

#detail_search .search_block .radio_area {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1em;
    font-size: 15px;
}

#detail_search .search_block .radio_area label {
    cursor: pointer;
}

#detail_search .search_block .flex_box {
    display: flex;
    font-size: 15px;
    gap: .5em;
}

#detail_search .search_block .flex_box input {
    font-size: 1em;
    padding: .5em;
    width: 6em;
    margin: 0 .5em;
}

#detail_search .detail_search_submit {
    width: 280px;
    background: #eb8bb4;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 1em;
    line-height: 1;
    text-align: center;
    border: none;
    border-radius: 100vmax;
    margin: 1em auto 0;
    display: block;
    cursor: pointer;
}

.produt_reco_text_area,
.produt_scene_text_area {
    position: relative;
    width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

.produt_reco_text_area {
    margin-top: 50px;
}

.produt_scene_text_area {
    margin-top: 30px;
}

.produt_reco_text_area .area_ttl {
    font-size: 20px;
    font-weight: 700;
    color: #e6468a;
    letter-spacing: .06em;
    line-height: 1.5;
    padding-left: .5em;
    border-left: 4px solid #e6468a;
    margin-bottom: 1em;
}

.produt_reco_text_area .frame {
    border: 2px solid #e3e3e3;
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
}

.produt_reco_text_area .frame .produt_reco_text {
    display: flex;
    align-items: flex-start;
    gap: .5em;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.produt_reco_text_area .frame .produt_reco_text+.produt_reco_text {
    margin-top: .6em;
}

.produt_reco_text_area .frame .produt_reco_text::before {
    content: "";
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transform: translateY(.25em);
    background-image: url(/html/user_data/assets/img/common/icon_reco_check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.produt_scene_text_area {
    margin-bottom: 50px;
}

.produt_scene_text_area .frame {
    background-color: #f5f5f5;
    padding: 30px;
    border-radius: 8px;
}

.produt_scene_text_area .frame .area_ttl {
    display: flex;
    gap: .5em;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.5;
    margin-bottom: .6em;
}

.produt_scene_text_area .frame .area_ttl::before {
    content: "";
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transform: translateY(.25em) scale(-1, 1);
    background-image: url(/html/user_data/assets/img/common/icon_scene.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.produt_scene_text_area .frame .produt_scene_text {
    font-size: 18px;
    letter-spacing: .02em;
}

.top_mother_ban_area {
    margin-top: 50px;
}

.top_mother_ban_area a {
    display: block;
    transition: .3s;
}

.top_mother_ban_area a:hover {
    opacity: .7;
}

.top_mother_ban_area a img {
    width: 100%;
}

#page_map .map_note_area {
    font-size: 20px;
    background-color: #fff;
    border: 2px solid #eb8bb4;
    padding: 1em;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 1.2em;
    text-align: center;
    color: #eb8bb4;
    background-color: #fff;
}

/* new用途で探すカテゴリーページ */
.category_page_sec #top_category {
    padding: 0 50px 50px;
    margin: 30px 0 0;
}

.category_page_sec #top_category .category_box ul {
    grid-template-columns: repeat(3, 1fr);
}

.category_page_sec #top_category .category_box ul li .link .icon_num {
    position: absolute;
    top: 3px;
    left: 6px;
    width: 60px;
}

.category_page_sec #top_category .category_box ul li .link .icon_num img {
    width: 100%;
}

#page_shopping_confirm .ec-orderDelivery__actions .ec-selects,
#page_shopping_confirm .ec-orderAccount,
#page_shopping_confirm .ec-orderAccount .ec-orderAccount__account {
    margin-bottom: 0;
    border-bottom: none;
}

.ec-login .ec-checkbox {
    margin-top: 0.7em;
}

.mypage .ec-favoriteRole .ec-favoriteRole__itemList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mypage .ec-favoriteRole .ec-favoriteRole__item {
    width: 100%;
    margin-bottom: 0;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #9db6c3;
}

.mypage .ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle {
    transform: translate(50%, -50%);
    top: 0;
    right: 0;
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    height: 35px;
    line-height: 35px;
}

.mypage .ec-favoriteRole .ec-favoriteRole__itemThumb {
    aspect-ratio: 3/4;
    margin: 0 auto 15px;
    width: 75%;
}

.mypage .ec-favoriteRole .ec-favoriteRole__item-image {
    margin: 0;
    height: 100%;
    width: 100%;
}

.mypage .ec-favoriteRole .ec-favoriteRole__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mypage .ec-favoriteRole .ec-favoriteRole__itemTitle {
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: .5em;
}

.mypage .ec-favoriteRole .ec-favoriteRole__itemPrice {
    font-size: 18px;
    color: #af0603;
    text-align: right;
}

.ec-orderRole .ec-orderRole__detail {
    background-color: #fff;
    padding: 20px !important;
    border: 1px solid #9db6c3;
    border-radius: 5px;
}

.ec-orderRole .ec-orderAccount:first-child .ec-rectHeading h2,
.ec-orderRole #OrderField .ec-rectHeading:first-child h2 {
    margin-top: 0;
}

.ec-orderRole .ec-orderRole__detail .ec-orderPayment>.ec-radio,
.ec-orderRole .ec-orderRole__detail .column,
.ec-orderRole .ec-orderRole__detail #shopping_order_payment_type_0_body {
    padding: 15px !important;
    border: 1px solid #c3dbe7;
    border-radius: 5px;
    background-color: #fafafa;
}

#page_shopping_confirm .ec-orderRole .ec-orderRole__detail .ec-orderPayment>.ec-radio,
#page_shopping_confirm .ec-orderRole .ec-orderRole__detail .column,
#page_shopping_confirm .ec-orderRole .ec-orderRole__detail #shopping_order_payment_type_0_body {
    background-color: #fff;
    border-radius: 0;
    border: none;
    padding: 0 !important;
}

.ec-orderRole .ec-orderRole__detail .ec-orderPayment>.ec-radio .pay_way_block:first-child {
    margin-top: 0;
}

#page_mypage_history .ec-orderRole h2 {
    width: 100%;
    border: none;
    background-color: #9db6c3;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .04em;
    transition: .3s;
    padding: 1em;
    line-height: 1;
    margin: 1em 0 !important;
}

#page_mypage_history .mypage_history_back_btn {
    border: none;
    background-color: #9db6c3;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    transition: .3s;
    padding: 1em 2em;
    line-height: 1;
    margin: 1em 0 !important;
    border-radius: 100vmax;
}

/* #page_shopping .payment_description,
#page_shopping #paypay-text,
#page_shopping #paypal-credit-card {
    display: none;
} */

#page_shopping #shopping_order_payment_type_1_body {
    padding: 15px !important;
    border: 1px solid #c3dbe7;
    border-radius: 5px;
    background-color: #fafafa;
}

#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table {
    margin-top: 1em;
}

#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table dl {
    /* padding-bottom: .5em; */
    /* display: grid; */
    /* grid-template-columns: repeat(4, 1fr); */
}

#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table dl dt,
#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table dl dd {
    padding-bottom: .7em;
    padding-top: .7em;
    border-bottom: 1px solid #c3dbe7;
    /* display: block; */
    /* width: 100%; */
    text-align: center;
}

#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table:last-child dl dt {
    width: 20%;
}

#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table:last-child dl dt,
#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table:last-child dl dd {
    border-bottom: none;
    text-align: left;
}

#page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table dl dd .ec-select select {
    display: block;
    margin-left: .5em;
}

#added_cart.ec-modal .ec-modal-wrap {
    border: none;
    border-radius: 12px;
}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-close {}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-close .ec-icon {}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-close .ec-icon img {}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-header {
    font-size: 16px;
    letter-spacing: .02em;
}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-box {}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role::after {
    content: unset;
}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role .ec-inlineBtn--cancel,
#added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role .ec-inlineBtn--action {
    width: 150px;
    display: block;
    text-align: center;
    transition: .3s;
    border-radius: 100vmax;
}


#added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role .ec-inlineBtn--action {
    background-color: #21913a;
    border-color: #21913a;
}

#added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role .ec-inlineBtn--action:hover {
    background-color: #2cb900;
    border-color: #2cb900;
}


@media screen and (max-width: 750px) {

    #page_shopping #gmo_payment_gateway_credit_form .dl_table dl {
        /* display: grid; */
        /* grid-auto-columns: 40% 1fr; */
    }

    #page_shopping #gmo_payment_gateway_credit_form .dl_table dl dt {
        /* display: block; */
        width: 40%;
    }

    #page_shopping #gmo_payment_gateway_credit_form .dl_table dl dd {
        /* display: block; */
        width: 60%;
    }

    #page_shopping #gmo_payment_gateway_credit_form .form-control {
        margin: 0;
    }

    #page_shopping_confirm .ec-orderRole,
    #page_shopping .ec-orderRole {
        font-size: 14px;
        padding: 0;
    }

    #page_shopping_confirm .ec-rectHeading h2,
    #page_shopping .ec-rectHeading h2 {
        font-size: 16px;
    }

    #page_shopping_confirm .ec-role,
    #page_shopping_confirm .ec-cartRole,
    #page_shopping .ec-role,
    #page_shopping .ec-cartRole {
        padding: 0;
    }

    #page_shopping {}

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    #main-contents {
        max-width: 90%;
        padding-top: 3vw;
        padding-bottom: 3vw;
    }

    .latest_block {
        max-width: 90%;
        padding-bottom: 5vw;
        padding: 0 0 5vw;
    }

    .produt_reco_text_area,
    .produt_scene_text_area {
        max-width: 90%;
        padding: 0;
    }

    #sp_header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 999;
    }

    #sp_header .hd_top {
        height: 11.5vh;
        background-color: #fff;
        padding-top: 1vh;
    }

    #sp_header .hd_top .hd_theme {
        font-size: 1.4vh;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1;
    }

    #sp_header .hd_top .hd_theme .en {
        font-size: 14px;
    }

    #sp_header .hd_top .logo_box {
        margin-top: 10px;
        position: relative;
    }

    #sp_header .hd_top .logo_box .logo {
        width: 13vh;
        position: absolute;
        left: 0;
        top: 0px;
    }

    #sp_header .hd_top .logo_box .logo a {
        display: block;
    }

    #sp_header .hd_top .logo_box .logo a img {
        width: 100%;
    }

    #sp_header .hd_top .logo_box .icon_box .icon {
        width: 6vh;
        aspect-ratio: 1;
        position: absolute;
        top: 0px;
    }

    #sp_header .hd_top .logo_box .icon_box .icon:nth-child(1) {
        right: 165px;
    }

    #sp_header .hd_top .logo_box .icon_box .icon:nth-child(2) {
        right: 107px;
    }

    #sp_header .hd_top .logo_box .icon_box .icon:nth-child(3) {
        right: 50px;
    }

    #sp_header .hd_top .logo_box .icon_box .icon.musi a {
        background-color: #f2ffed;
    }

    #sp_header .hd_top .logo_box .icon_box .icon.active {
        z-index: 100000;
        right: 55px;
    }

    #sp_header .hd_top .logo_box .icon_box .icon.active a {
        position: absolute;
    }

    #sp_header .hd_top .logo_box .icon_box .icon.active a svg {
        display: none;
    }

    #sp_header .hd_top .logo_box .icon_box .icon.active a::before,
    #sp_header .hd_top .logo_box .icon_box .icon.active a::after {
        content: "";
        width: 5vw;
        aspect-ratio: 1;
        position: absolute;
        height: 2.5px;
        background-color: #07913a;
        top: 50%;
        left: 50%;
        translate: -50%;
    }

    #sp_header .hd_top .logo_box .icon_box .icon.active a::before {
        rotate: 45deg;
    }

    #sp_header .hd_top .logo_box .icon_box .icon.active a::after {
        rotate: -45deg;
    }

    #sp_header .hd_top .logo_box .icon_box .icon a {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        background-color: #f5fcff;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    #sp_header .hd_top .logo_box .icon_box .icon a svg {
        width: 50%;
    }

    #sp_header .hd_top .logo_box .icon_box .icon a .sp_cart_num {
        position: absolute;
        bottom: 0;
        right: 0;
        /* transform: translate(-50%, 50%); */
        background-color: #af0202;
        color: #fff;
        width: 1.5em;
        height: 1.5em;
        line-height: 1;
        text-align: center;
        border-radius: 50%;
        font-size: 3vw;
        font-weight: 700;
        align-items: center;
        justify-content: center;
    }

    #sp_header .hd_bottom {
        /* height: 7vh; */
        background-color: #ffffaf;
        padding: 1vh 0;
    }

    #sp_header .hd_bottom .box {
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    #sp_header .hd_bottom .box .icon {
        width: 9vw;
        flex-shrink: 0;
        margin-right: 12px;
    }

    #sp_header .hd_bottom .box .icon svg {
        width: 100%;
        display: block;
    }

    #sp_header .hd_bottom .box .name {
        font-size: 3.4vw;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1;
        margin-bottom: 0;
    }

    #sp_header .hd_bottom .box .name .num {
        font-size: 34px;
        font-size: 4.3vh;
        color: #af0202;
        font-weight: 600;
        position: relative;
    }

    #sp_header .hd_bottom .box .name .num::after {
        content: "";
        position: absolute;
        width: 2vh;
        height: 3vh;
        background-image: url(/html/user_data/assets/img/common/icon_santen_red.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        top: -.5vh;
        left: -2vh;
    }

    #sp_header .free_sec {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        height: 100px;
        background-color: #fff;
        visibility: hidden;
        transition: 0.3s;
        z-index: 99999;
        padding-top: 34px;
        padding-left: 5vw;
    }

    #sp_header .free_sec .form_box {
        position: relative;
    }

    #sp_header .free_sec .form_box .free {
        width: 220px;
        border-radius: 40px;
        border: 1px solid #e3e3e3;
        background-color: #fafafa;
        display: block;
        height: 50px;
        padding: 0 45px 0 20px;
        font-size: 12px;
        font-weight: 500;
    }

    #sp_header .free_sec .form_box .btn_icon {
        background-image: url(/html/user_data/assets/img/common/icon_musi.svg);
        background-size: 18px;
        background-repeat: no-repeat;
        background-position: center;
        width: 50px;
        aspect-ratio: 1;
        background-color: transparent;
        border: none;
        position: absolute;
        top: 0;
        left: 173px;
    }

    #sp_header .free_sec.show {
        opacity: 1;
        visibility: visible;
    }

    .hamburger {
        display: block;
        position: fixed;
        z-index: 99999;
        right: 13px;
        top: 4.5vh;
        width: 6vh;
        height: 6vh;
        cursor: pointer;
        text-align: center;
        border-radius: 50%;
        background-color: #e6468a;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 20px;
        height: 2.3px;
        left: calc(50% - 10px);
        background: #fff;
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
    }

    .hamburger span:nth-child(1) {
        top: 2vh;
    }

    .hamburger span:nth-child(2) {
        top: 3vh;
    }

    .hamburger span:nth-child(3) {
        top: 4vh;
    }

    .hamburger.active span:nth-child(1) {
        top: 3.2vh;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 3.2vh;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    nav.globalMenuSp {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        transform: translateX(100%);
        transition: all 0.6s;
        width: 100%;
        height: 100vh;
        overflow: scroll;
        background-image: url(/html/user_data/assets/img/common/ham_img.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    nav.globalMenuSp::after {
        background-color: rgba(0, 0, 0, 0.7);
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    nav.globalMenuSp .inner {
        padding: 25vw 5vw 0;
    }

    nav.globalMenuSp .inner .text_box {
        text-align: center;
    }

    nav.globalMenuSp .inner .text_box .ham_theme {
        font-size: 4.8vw;
        color: #fff;
        letter-spacing: 0.04em;
        line-height: 1;
        font-weight: 600;
    }

    nav.globalMenuSp .inner .text_box .name {
        margin-top: 3vw;
        font-size: 4vw;
        letter-spacing: 0.04em;
        line-height: 1;
        font-weight: 600;
        color: #fff;
    }

    nav.globalMenuSp .inner .text_box .name .en {
        font-size: 3.7vw;
    }

    nav.globalMenuSp .inner .text_box .tel_box {
        margin-top: 5vw;
    }

    nav.globalMenuSp .inner .text_box .tel_box a {
        display: block;
        color: #fff;
        line-height: 1;
        letter-spacing: 0.03em;
        font-size: 4.5vw;
    }

    nav.globalMenuSp .inner .text_box .tel_box a+a {
        margin-top: 1vw;
    }

    nav.globalMenuSp .inner .text_box .tel_box a .num {
        font-size: 5.5vw;
    }

    nav.globalMenuSp .inner .link_btn {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 2vw;
        margin-top: 4.5vw;
    }

    nav.globalMenuSp .inner .link_btn .btn_box .btn {
        background-color: #fff;
        border-radius: 2vw;
        display: flex;
        justify-content: center;
        gap: 0 2vw;
        align-items: center;
    }

    nav.globalMenuSp .inner .link_btn .btn_box .btn .icon {
        width: 5.7vw;
        flex-shrink: 0;
    }

    nav.globalMenuSp .inner .link_btn .btn_box .btn .icon svg {
        width: 100%;
        display: block;
    }

    nav.globalMenuSp .inner .link_btn .btn_box .btn .nam {
        font-size: 3.6vw;
        font-weight: 600;
        color: #000;
        line-height: 12vw;
        letter-spacing: 0.04em;
    }

    nav.globalMenuSp .inner .sns_box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 2vw;
        margin-top: 3.5vw;
    }

    nav.globalMenuSp .inner .sns_box .box {
        width: 12vw;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
    }

    nav.globalMenuSp .inner .sns_box .box.line a {
        background-color: #00b900;
    }

    nav.globalMenuSp .inner .sns_box .box.line a svg {
        width: 75%;
    }

    nav.globalMenuSp .inner .sns_box .box.contact a {
        background-color: #fafa4d;
    }

    nav.globalMenuSp .inner .sns_box .box.contact a svg {
        width: 50%;
    }

    nav.globalMenuSp .inner .sns_box .box.insta a {
        background-color: #fff;
    }

    nav.globalMenuSp .inner .sns_box .box.insta a img {
        width: 50%;
    }

    nav.globalMenuSp .inner .sns_box .box a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    nav.globalMenuSp .inner .sns_box .box a svg {
        display: block;
    }

    nav.globalMenuSp .inner .scroll_sec {
        margin-top: 5vw;
        position: relative;
        z-index: 1;
    }

    nav.globalMenuSp .inner .scroll_sec::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: #f5f5f5;
        right: 2.3vw;
        top: 0;
        z-index: -1;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box {
        overflow-y: scroll;
        height: 70vw;
        padding-right: 10vw;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box::-webkit-scrollbar {
        width: 5vw;
        border-radius: 10vw;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box::-webkit-scrollbar-thumb {
        background-color: #bbd5e2;
        border-radius: 10vw;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li .link_cont {
        color: #fff;
        display: block;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1;
        padding: 4vw 1vw;
        border-bottom: 1px solid #fff;
        font-size: 3.5vw;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li .list_sec {
        margin-top: 2vw;
        padding-left: 2vw;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li .list_sec .list .link {
        color: #fff;
        font-size: 3.2vw;
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1.3;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li .list_sec .list+.list {
        margin-top: 1vw;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li p.link_cont {
        position: relative;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li p.link_cont.nowOpen::after {
        rotate: 0deg;
        opacity: 0;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li p.link_cont::before,
    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li p.link_cont::after {
        content: "";
        position: absolute;
        width: 4vw;
        height: 2px;
        border-radius: 2vw;
        background-color: #fff;
        right: 2vw;
        top: 50%;
        translate: -50% 0;
    }

    nav.globalMenuSp .inner .scroll_sec .scroll_box ul li p.link_cont::after {
        rotate: 90deg;
        transition: 0.6s;
    }

    nav.globalMenuSp.active {
        transform: translateX(0%);
    }

    body {
        padding-top: 17.8vh;
        font-size: 3.6vw;
        line-height: 1.6;
    }

    .wrap {
        max-width: 90%;
    }

    .top_inner {
        padding: 0;
    }

    #top_main {
        padding: 0;
        height: 175vw;
        position: relative;
    }

    #top_main .wrap {
        height: 100%;
        padding-top: 9vw;
    }

    #top_main .main_box {
        width: 100%;
    }

    #top_main .main_box .catch_text .come {
        font-size: 2vh;
    }

    #top_main .main_box .catch_text .en_come {
        font-size: 4.5vh;
        line-height: 1.2;
        margin-top: .7vh;
    }

    #top_main .main_box .catch_text .en_come .mark .ab_mark {
        width: 32vw;
        bottom: -2.5vw;
    }

    #top_main .main_box .num_box {
        margin-top: 1vh;
    }

    #top_main .main_box .num_box ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw;
    }

    #top_main .main_box .num_box ul li {
        height: 19vw;
        height: 10vh;
        padding-top: 1.3vh;
        border-radius: 2vw;
    }

    #top_main .main_box .num_box ul li .theme {
        font-size: 3.6vw;
        font-size: 1.6vh;
    }

    #top_main .main_box .num_box ul li .box {
        font-size: 1.6vh;
        margin-top: .5vh;
    }

    #top_main .main_box .num_box ul li .box .tate {
        transform: translateY(0.9vw);
    }

    #top_main .main_box .num_box ul li .box .num {
        font-size: 5.2vh;
        margin: 0 1.2vw;
    }

    #top_main .main_box .main_ttl_box {
        margin-top: 1vh;
    }

    #top_main .main_box .main_ttl_box .ttl {
        font-size: 1.4vh;
        line-height: 1.9;
    }

    #top_main .main_box .contact_box {
        display: none;
    }

    #top_main .main_box .contact_box ul {
        display: grid;
        gap: 2vw;
        grid-template-columns: repeat(2, 1fr);
    }

    #top_main .main_box .contact_box ul li {
        width: 100%;
    }

    #top_main .main_box .contact_box ul li .link {
        border-radius: 10vw;
        gap: 0 2vw;
        padding-left: 0vw;
        transition: 0s;
        justify-content: center;
    }

    #top_main .main_box .contact_box ul li .link:hover {
        transform: unset;
    }

    #top_main .main_box .contact_box ul li .link:hover.line {
        box-shadow: 0 4px 0px #007400;
    }

    #top_main .main_box .contact_box ul li .link:hover.contact {
        box-shadow: 0 4px 0px #cbcb2d;
    }

    #top_main .main_box .contact_box ul li .link .name {
        line-height: 8vh;
        font-size: 3.5vw;
        margin: 0;
    }

    #top_main .main_box .contact_box ul li .link.line .icon {
        width: 6vw;
    }

    #top_main .main_box .contact_box ul li .link.contact .icon {
        width: 5vw;
    }

    #top_main .main_box .ab_img {
        width: 12vh;
        bottom: unset;
        top: -1vh;
    }

    #sp_free_search {
        margin-top: -77vw;
        position: relative;
        z-index: 1;
    }

    #sp_free_search .wrap {
        background: #fff;
        border-radius: 10px;
        padding: 5vw;
    }

    #sp_free_search .common_ttl_box {
        text-align: center;
    }

    #sp_free_search .common_search_box {
        margin-top: 5vw;
        position: relative;
    }

    #sp_free_search .common_search_box .search_name_box {
        display: flex;
        gap: 0 10.5px;
        align-items: center;
    }

    #sp_free_search .common_search_box .search_name_box .icon {
        width: 5vw;
    }

    #sp_free_search .common_search_box .search_name_box .name {
        font-size: 3.8vw;
    }

    #sp_free_search .common_search_box .category_box+.category_box {
        margin-top: 3.2vw;
    }

    #sp_free_search .common_search_box .category_box .select_box {
        margin-top: 2.8vw;
    }

    #sp_free_search .common_search_box .category_box .select_box::after {
        width: 2vw;
        height: 2vw;
        right: 5vw;
    }

    #sp_free_search .common_search_box .category_box .select_box select {
        height: 12vw;
        padding: 0 5vw;
        border-radius: 2vw;
        color: #c1c1c1;
    }

    #sp_free_search .common_search_box .select_btn {
        width: 50%;
        margin: 6vw auto 0;
    }

    #sp_free_search .common_search_box .select_btn input {
        height: 11vw;
        border-radius: 10vw;
        font-size: 4vw;
    }

    #sp_free_search .common_search_box .free_search_box {
        margin-top: 6vw;
        padding-top: 6vw;
        border-top: 2px dashed #707070;
    }

    #sp_free_search .common_search_box .free_search_box .form_box {
        margin-top: 1.8vw;
    }

    #sp_free_search .common_search_box .free_search_box .form_box form .free {
        border-radius: 10vw;
        height: 11vw;
        padding-left: 5vw;
        font-size: 3.4vw;
    }

    #sp_free_search .common_search_box .free_search_box .form_box form .btn_icon {
        background-size: 5vw;
        width: 11vw;
        right: 2vw;
    }

    #sp_free_search .common_search_box .free_search_box .attention_btn {
        margin-top: 4vw;
    }

    #sp_free_search .common_search_box .free_search_box .attention_btn .link {
        /* gap: 0 1.5vw; */
    }

    #sp_free_search .common_search_box .free_search_box .attention_btn .link .icon {
        width: 4vw;
    }

    #sp_free_search .common_search_box .free_search_box .attention_btn .link .name {
        font-size: 3.2vw;
        margin: 0;
    }

    #top_news {
        margin-top: 20vw;
    }

    #top_news .common_ttl_box {
        text-align: center;
    }

    #top_news .news_box {
        margin-top: 8vw;
        display: flex;
        flex-direction: column-reverse;
    }

    #top_news .news_box .more_view {
        margin-top: 5vw;
    }

    #top_news .news_box .more_view .more {
        font-size: 4vw;
    }

    #top_news .news_box .list {
        margin-top: 0;
    }

    #top_news .news_box .list ul li+li {
        margin-top: 4vw;
    }

    #top_news .news_box .list ul li .link {
        display: block;
        padding: 3.8vw 5vw;
        border-radius: 2vw;
    }

    #top_news .news_box .list ul li .link::after {
        display: none;
    }

    #top_news .news_box .list ul li .link:hover .day {
        color: #07913a;
    }

    #top_news .news_box .list ul li .link:hover .theme {
        color: #000000;
    }

    #top_news .news_box .list ul li .link .day {
        font-size: 3.4vw;
        color: #07913a;
        transition: 0s;
    }

    #top_news .news_box .list ul li .link .theme {
        font-size: 3.8vw;
        transition: 0s;
        margin-top: 1vw;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }

    .common_ttl_box .en_ttl {
        font-size: 4.2vw;
    }

    .common_ttl_box .ttl {
        font-size: 4.7vw;
        margin-top: 2vw;
    }

    .common_ttl_box .ttl_comment {
        font-size: 3.1vw;
        margin-top: 3.4vw;
        line-height: 1.5;
    }

    #top_banner_slider {
        margin-top: 20vw;
    }

    #top_banner_slider .slider_box ul {
        gap: 0;
        display: block;
    }

    #top_banner_slider .slider_box ul .slick-dots {
        height: 1vw;
        bottom: -10px;
    }

    #top_banner_slider .slider_box ul .slick-dots li {
        width: 5px;
        border-radius: 50%;
        background-color: #cccccc;
        height: 5px;
        margin: 0 3vw;
    }

    #top_banner_slider .slider_box ul .slick-dots li.slick-active {
        background-color: #07913a;
        width: 7px;
        height: 7px;
    }

    #top_banner_slider .slider_box ul .slick-dots li button {
        display: none;
    }

    #top_banner_slider .slider_box ul .slick-dots li button::before {
        display: none;
    }

    #top_banner_slider .slider_box ul .slick-list {
        padding: 0 20% 0 0 !important;
    }

    #top_banner_slider .slider_box ul .slick-list .slick-track {
        padding: 1vw 0;
    }

    #top_banner_slider .slider_box ul li {
        margin: 0 1.3vw;
    }

    #top_banner_slider .slider_box ul li a {
        width: 100%;
    }

    #top_banner_slider .slider_box ul li.square {
        width: 70vw !important;
    }

    #top_banner_slider .slider_box ul li.square .box_top {
        display: grid;
        gap: 0 1.3vw;
        grid-template-columns: repeat(2, 1fr);
    }

    #top_banner_slider .slider_box ul li.square .box_top .box {
        width: unset;
    }

    #top_banner_slider .slider_box ul li.square .box_bottom {
        margin-top: 1.3vw;
    }

    #top_banner_slider .slider_box.sp_grid ul li.square {
        margin: 0 0 2.3vw;
        width: 100% !important;
    }

    #top_banner_slider .slider_box ul li.rectangle {
        width: 34.5vw !important;
    }

    #top_banner_slider .slider_box.sp_grid ul li.rectangle_y {
        width: 100% !important;
        margin: 0;
    }

    #top_banner_slider .slider_box+.slider_box {
        margin-top: 10vw !important;
    }

    #top_banner_slider .slider_box ul li.square .box_top.mt {
        margin-top: 1.3vw !important;
    }

    .banner_memorial img {
        width: 100%;
    }

    #top_banner_slider .banner_list_box {
        margin-top: 15vw;
    }

    #top_banner_slider .banner_list_box ul {
        grid-template-columns: 100%;
        gap: 3vw 0;
    }

    #top_category {
        margin-top: 20vw;
        padding-bottom: 20vw;
    }

    #top_category::after {
        top: 8vw;
    }

    #top_category .category_sp_box {
        margin-top: 7vw;
    }

    #top_category .category_sp_box .slick-dots {
        height: 1vw;
        bottom: -15px;
    }

    #top_category .category_sp_box .slick-dots li {
        width: 5px;
        border-radius: 50%;
        background-color: #cccccc;
        height: 5px;
        margin: 0 3vw;
    }

    #top_category .category_sp_box .slick-dots li.slick-active {
        background-color: #07913a;
        width: 7px;
        height: 7px;
    }

    #top_category .category_sp_box .slick-dots li button {
        display: none;
    }

    #top_category .category_sp_box .slick-dots li button::before {
        display: none;
    }

    #top_category .category_sp_box ul {
        margin: 0 1vw;
        padding: 5px;
        overflow-x: auto;
        white-space: nowrap;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
    }

    #top_category .category_sp_box ul li {
        display: inline-block;
        white-space: initial;
        vertical-align: top;
        width: 70%;
    }

    #top_category .category_sp_box ul li+li {
        margin-left: 2vw;
    }

    #top_category .category_sp_box ul li .link {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
        border-radius: 2vw;
        overflow: hidden;
        position: relative;
        z-index: 1;
        display: block;
    }

    #top_category .category_sp_box ul li .link .img {
        height: 60vw;
        flex-shrink: 0;
    }

    #top_category .category_sp_box ul li .link .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #top_category .category_sp_box ul li .link .text_box {
        width: 100%;
        padding: 5vw 3vw;
    }

    #top_category .category_sp_box ul li .link .text_box .comment {
        font-size: 3.2vw;
        color: #000;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    #top_category .category_sp_box ul li .link .text_box .theme {
        font-size: 3.7vw;
        color: #07913a;
        letter-spacing: 0.04em;
        line-height: 1.4;
        margin-top: 1vw;
    }

    #top_rank {
        margin-top: 20vw;
    }

    #top_rank .tab_sec_box {
        margin-top: 5vw;
    }

    #top_rank .tab_sec_box .select_sp_box {
        position: relative;
    }

    #top_rank .tab_sec_box .select_sp_box::after {
        content: "";
        position: absolute;
        width: 2vw;
        height: 2vw;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        rotate: -45deg;
        top: 50%;
        transform: translateY(-50%);
        right: 5vw;
    }

    #top_rank .tab_sec_box .select_sp_box select {
        width: 100%;
        display: block;
        background-color: #fafafa;
        height: 12vw;
        border: 1px solid #e3e3e3;
        padding: 0 6vw;
        color: #959595;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 10vw;
    }

    #top_rank .tab_sec_box .tab_contents_box {
        margin-top: 5vw;
        padding: 0 5vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents {
        display: none;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents.selected {
        display: block;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul {
        display: block;
        flex-wrap: nowrap;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li {
        margin: 0;
        height: unset;
        width: 100% !important;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li+li {
        margin-top: 2vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .rank_box {
        display: flex;
        align-items: flex-end;
        gap: 0 2vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .rank_box .icon {
        width: 7vw;
        height: 7vw;
        background-size: contain !important;
        background-position: center !important;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_1 .rank_box .icon {
        background: url('/html/user_data/assets/img/common/crown_gold.svg') no-repeat;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_2 .rank_box .icon {
        background: url('/html/user_data/assets/img/common/crown_silver.svg') no-repeat;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_3 .rank_box .icon {
        background: url('/html/user_data/assets/img/common/crown_copper.svg') no-repeat;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_4 .rank_box .icon,
    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li.rank_5 .rank_box .icon {
        background: url('/html/user_data/assets/img/common/crown_pink.svg') no-repeat;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .rank_box .rank {
        font-size: 3.8vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .rank_box .rank .num {
        font-size: 6.5vw;
        margin: 0 0.8vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link {
        height: 30vw;
        border-radius: 2vw;
        align-items: center;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .img {
        width: 30%;
        height: 100%;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box {
        padding: 0 5vw;
        width: 100%;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .theme {
        margin-top: 0;
        font-size: 3.8vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .cost {
        font-size: 3.2vw;
        margin-top: 2vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul li .link .text_box .cost span {
        font-size: 6.5vw;
        margin-right: 1vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul .text_hide {
        display: none;
        margin-top: 2vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul .text_hide li:nth-child(-n + 3) {
        display: none;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box ul .show_area li:nth-child(n + 4) {
        display: none;
    }


    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view {
        margin-top: 5vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view .more {
        display: flex;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view .close {
        display: none;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view span {
        font-size: 4vw;
        color: #a7a7a7;
        font-weight: 500;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view span::before,
    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view span::after {
        content: "";
        width: 100%;
        height: 1px;
        border-top: 2px dashed #a7a7a7;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view span::before {
        margin-right: 3vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view span::after {
        margin-left: 3vw;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view.on_click .more {
        display: none;
    }

    #top_rank .tab_sec_box .tab_contents_box .tab_contents .tab_slider_box .more_view.on_click .close {
        display: flex;
    }

    #top_rank .banner_box {
        margin-top: 10vw;
    }

    #top_rank .banner_box ul {
        grid-template-columns: 100%;
        gap: 5vw 0;
    }

    #top_insta {
        margin-top: 20vw;
    }

    #top_insta .ttl_box {
        display: block;
    }

    #top_insta .ttl_box .icon {
        width: 15vw;
        margin: 0 auto;
    }

    #top_insta .ttl_box .ttl {
        font-size: 4.4vw;
        text-align: center;
        margin-top: 6vw;
    }

    #top_insta .ttl_comment {
        font-size: 3.2vw;
        margin-top: 3vw;
        text-align: center;
        line-height: 1.5;
    }

    #top_insta .list_box {
        margin-top: 8vw;
    }

    #top_insta .list_box ul {
        overflow-x: auto;
        white-space: nowrap;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        display: block;
        padding: 10px 2px;
    }

    #top_insta .list_box ul li {
        height: unset;
        display: inline-block;
        white-space: initial;
        width: 70%;
        vertical-align: top;
    }

    #top_insta .list_box ul li+li {
        margin-left: 2vw;
    }

    #top_insta .list_box ul li .link {
        height: unset;
        display: block;
        padding: 2vw 3vw 2vw 2vw;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    }

    #top_insta .list_box ul li .link .img .ab_theme {
        display: none;
    }

    #top_insta .list_box ul li .link .img .ab_account {
        display: none;
    }

    #top_insta .list_box ul li .link .img::after {
        background-color: #e6468a;
    }

    #top_insta .list_box ul li .link .text_box_sp {
        width: 100%;
    }

    #top_insta .list_box ul li .link .text_box_sp .theme {
        line-height: 8vw;
        background-color: #e6468a;
        color: #fff;
        font-weight: 600;
        font-size: 3.3vw;
        width: 100%;
        letter-spacing: 0.02em;
        text-align: center;
    }

    #top_insta .list_box ul li .link .text_box_sp .account {
        font-size: 3.4vw;
        color: #000;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1;
        margin-top: 2vw;
    }

    #top_insta .list_box ul li .link .text_box_sp .btn {
        font-size: 3.3vw;
        letter-spacing: 0.04em;
        line-height: 1;
        color: #e6468a;
        font-weight: 600;
        text-align: end;
        margin-top: 6vw;
    }

    #top_service_slider {
        margin-top: 10vw;
        padding: 10vw 5vw;
    }

    #top_service_slider .slider_box .box .slick-dots {
        height: 1vw;
        bottom: -15px;
    }

    #top_service_slider .slider_box .box .slick-dots li {
        width: 5px;
        border-radius: 50%;
        background-color: #cccccc;
        height: 5px;
        margin: 0 3vw;
    }

    #top_service_slider .slider_box .box .slick-dots li.slick-active {
        background-color: #07913a;
        width: 7px;
        height: 7px;
    }

    #top_service_slider .slider_box .box .slick-dots li button {
        display: none;
    }

    #top_service_slider .slider_box .box .slick-dots li button::before {
        display: none;
    }

    #top_service_slider .slider_box .box ul {
        margin: 0 2vw;
        overflow-x: auto;
        white-space: nowrap;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        display: block;
    }

    #top_service_slider .slider_box .box ul li {
        margin: 0;
        display: inline-block;
        white-space: initial;
        vertical-align: top;
        width: 85%;
    }

    #top_service_slider .slider_box .box ul li+li {
        margin-left: 3vw;
    }

    #top_service_slider .slider_box .box ul li .link {
        display: block;
        border-radius: 2vw;
        height: unset;
    }

    #top_service_slider .slider_box .box ul li .link img {
        width: 100%;
        height: unset;
        object-fit: unset;
    }

    #top_shops_list {
        margin: 20vw 0;
    }

    #top_shops_list .list_box {
        margin-top: 5vw;
    }

    #top_shops_list .list_box .slick-dots {
        height: 1vw;
        bottom: -15px;
        grid-template-columns: unset;
        gap: unset;
        display: block;
        margin: unset;
    }

    #top_shops_list .list_box .slick-dots li {
        width: 5px;
        border-radius: 50%;
        background-color: #cccccc;
        height: 5px;
        display: inline-block;
        margin: 0 3vw;
    }

    #top_shops_list .list_box .slick-dots li.slick-active {
        background-color: #07913a;
        width: 7px;
        height: 7px;
    }

    #top_shops_list .list_box .slick-dots li button {
        display: none;
    }

    #top_shops_list .list_box .slick-dots li button::before {
        display: none;
    }

    #top_shops_list .list_box ul {
        display: block;
        margin: 0;
        overflow-x: auto;
        white-space: nowrap;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }

    #top_shops_list .list_box ul+ul {
        margin: 0 3vw;
    }

    #top_shops_list .list_box ul li {
        border-radius: 0;
        box-shadow: unset;
        white-space: initial;
        display: inline-block;
        width: 70%;
        vertical-align: top;
    }

    #top_shops_list .list_box ul li+li {
        margin-left: 3vw;
    }

    #top_shops_list .list_box ul li::before,
    #top_shops_list .list_box ul li::after {
        display: none;
    }

    #top_shops_list .list_box ul li .img {
        height: 45vw;
        margin-bottom: 3vw;
    }

    #top_shops_list .list_box ul li .img img {
        border-radius: 2vw;
    }

    #top_shops_list .list_box ul li .text_box {
        padding: 0;
        pointer-events: unset;
    }

    #top_shops_list .list_box ul li .text_box .name {
        font-size: 3.8vw;
    }

    #top_shops_list .list_box ul li .text_box .info {
        margin-top: 2vw;
        font-size: 3.2vw;
    }

    #top_shops_list .list_box ul li .text_box .tel_sec {
        display: none;
    }

    #top_shops_list .list_box ul li .text_box .insta {
        display: none;
    }

    #top_shops_list .list_box ul li .text_box .link_box {
        gap: 0 2vw;
        margin-top: 2vw;
    }

    #top_shops_list .list_box ul li .text_box .link_box .box {
        width: 8vw;
        border-radius: 50%;
    }

    #top_shops_list .list_box ul li .text_box .link_box .box.tel {
        background-color: #eb8bb4;
    }

    #top_shops_list .list_box ul li .text_box .link_box .box.tel svg {
        width: 60%;
    }


    #top_shops_list .list_box ul li .text_box .link_box .box.tel,
    #top_shops_list .list_box ul li .text_box .link_box .box.arrow {
        display: flex;
    }

    #top_shops_list .list_box ul li .text_box .link_box .box.arrow {
        background-color: #00b900;
    }

    #top_shops_list .list_box ul li .text_box .link_box .box svg {
        width: 50%;
        display: block;
    }

    #top_shops_list .list_box ul li .text_box .link_box .box img {
        width: 100%;
    }

    #top_shops_list .list_box ul li .ab_link {
        display: none;
    }

    #footer {
        padding-left: 0;
    }

    #footer .ft_top {
        padding: 10vw 0;
    }

    #pay_banner_box {
        grid-template-columns: 100%;
        gap: 3vw 0;
    }

    #pay_banner_box img {
        border-radius: 5px;
    }

    #footer .ft_top .info_box {
        margin-top: 10vw;
        padding: 0;
        border-radius: 2vw;
        grid-template-columns: 100%;
        gap: 2vw 0;
        background-color: unset;
    }

    #footer .ft_top .info_box .box {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
        border-radius: 2vw;
    }

    #footer .ft_top .info_box .box+.box {
        margin-top: 3vw;
    }

    #footer .ft_top .info_box .box .theme_box+.theme_box {
        margin-top: 25px;
    }

    #footer .ft_top .info_box .box .theme_box .box_theme {
        font-size: 3.8vw;
        line-height: 12vw;
        border-radius: 2vw 2vw 0 0;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box {
        margin-top: 0;
        padding: 10vw 4vw;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .map_image {
        margin-bottom: 5vw;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .cont {
        font-size: 3.2vw;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .cont.center {
        text-align: center;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .cont.small {
        margin-top: 2vw;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .cont+.cont {
        margin-top: 4vw;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .cont.mt_none {
        margin-top: 0;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .card_list {
        margin-bottom: 3vw;
    }

    #footer .ft_top .info_box .box .theme_box .cont_box .money_box {
        width: 80%;
        margin: 3vw auto 2vw;
    }

    #footer .ft_top .sp_ft_sec {
        margin-top: 10vw;
    }

    #footer .ft_top .sp_ft_sec .logo {
        width: 55%;
        margin: 0 auto;
    }

    #footer .ft_top .sp_ft_sec .logo img {
        width: 100%;
    }

    #footer .ft_top .sp_ft_sec .ttl_comment {
        text-align: center;
        font-size: 4vw;
        font-weight: 600;
        letter-spacing: 0.03em;
        line-height: 1.3;
        margin-top: 2vw;
    }

    #footer .ft_top .sp_ft_sec .comment {
        text-align: center;
        font-size: 3vw;
        letter-spacing: 0.03em;
        line-height: 1.6;
        font-weight: 600;
        margin-top: 5vw;
    }

    #footer .ft_top .sp_ft_sec .contact_box {
        margin-top: 5vw;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link {
        border-radius: 10vw;
        display: flex;
        gap: 0 6vw;
        padding-left: 6vw;
        align-items: center;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link .icon {
        flex-shrink: 0;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link .icon svg {
        width: 100%;
        display: block;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link .name {
        line-height: 15vw;
        font-size: 4vw;
        font-weight: 600;
        letter-spacing: 0.04em;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link.line {
        background-color: #00b900;
        box-shadow: 0 4px 0px #007400;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link.line .icon {
        width: 10vw;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link.line .name {
        color: #fff;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link.contact {
        background-color: #fafa4d;
        padding-left: 8vw;
        box-shadow: 0 4px 0px #cbcb2d;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link.contact .icon {
        width: 6vw;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li .link.contact .name {
        color: #000;
    }

    #footer .ft_top .sp_ft_sec .contact_box ul li+li {
        margin-top: 3vw;
    }

    #footer .ft_top .sp_ft_sec .link_sec_box {
        margin-top: 6vw;
    }

    #footer .ft_top .sp_ft_sec .link_sec_box ul {
        display: flex;
        gap: 0 5vw;
        align-items: center;
        justify-content: center;
    }

    #footer .ft_top .sp_ft_sec .link_sec_box ul li {
        width: 12vw;
        aspect-ratio: 1;
    }

    #footer .ft_top .sp_ft_sec .link_sec_box ul li .btn {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffed;
    }

    #footer .ft_top .sp_ft_sec .link_sec_box ul li .btn.tel {
        background-color: #e6468a;
    }

    #footer .ft_top .sp_ft_sec .link_sec_box ul li .btn.tel svg {
        width: 60%;
    }

    #footer .ft_top .sp_ft_sec .link_sec_box ul li .btn svg {
        width: 50%;
        display: block;
    }

    #footer .ft_top .sp_ft_sec .menu_box {
        margin-top: 8vw;
    }

    #footer .ft_top .sp_ft_sec .menu_box ul {
        display: flex;
        gap: 0 6vw;
        align-items: center;
        justify-content: center;
    }

    #footer .ft_top .sp_ft_sec .menu_box ul li {
        line-height: 1;
    }

    #footer .ft_top .sp_ft_sec .menu_box ul li+li {
        position: relative;
    }

    #footer .ft_top .sp_ft_sec .menu_box ul li+li::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 4vw;
        background-color: #333333;
        top: 0;
        left: -3vw;
    }

    #footer .ft_top .sp_ft_sec .menu_box ul li a {
        font-size: 3.2vw;
        color: #000;
        font-weight: 500;
        letter-spacing: 0.03em;
    }

    #footer .ft_cr {
        padding: 5vw 0 23vw;
    }

    #footer .ft_cr .cr {
        font-size: 3.3vw;
    }

    #footer .fixed_sp_ft {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background-color: #fff8fb;
        padding: 3vw 0;
    }

    #footer .fixed_sp_ft ul {
        display: flex;
        justify-content: space-between;
    }

    #footer .fixed_sp_ft ul li {
        width: 37vw;
    }

    #footer .fixed_sp_ft ul li .btn {
        font-size: 3.6vw;
        display: block;
        font-weight: 600;
        text-align: center;
        line-height: 12vw;
        border-radius: 2vw;
        letter-spacing: 0.04em;
    }

    #footer .fixed_sp_ft ul li.line .btn {
        color: #fff;
        background-color: #00b900;
    }

    #footer .fixed_sp_ft ul li.contact .btn {
        background-color: #fafa4d;
        color: #000;
    }

    #footer .fixed_sp_ft ul li.tel {
        width: 12vw;
        height: 12vw;
    }

    #footer .fixed_sp_ft ul li.tel a {
        display: flex;
        height: 100%;
        border-radius: 2vw;
        background-color: #eb8bb4;
        align-items: center;
        justify-content: center;
    }

    #footer .fixed_sp_ft ul li.tel a svg {
        width: 60%;
        display: block;
    }

    body.LC_Page_Index #main-contents {
        max-width: unset;
        padding-top: 0;
    }

    #top_banner_slider .banner_list_box ul li .button_wrap {
        bottom: 8vw;
        padding: 0 5vw;
        justify-content: center;
    }

    #top_banner_slider .banner_list_box ul li .button_wrap a.button {
        font-size: 3.5vw;
        border: 2px solid #fff;
        padding: .2em 1.5em;
        border-radius: 30px;
        transition: .3s;
    }

    #top_banner_slider .banner_list_box ul li .button_wrap a.button+a {
        margin-top: 1em;
    }

    /* 採用情報リニューアル */

    .recruit2023_main {
        padding: 10vw 0;
    }

    .recruit2023_h2Box {
        margin: 0 0 5vw;
    }

    .recruit2023_h2Box .eng {
        font-size: 3.4vw;
    }

    .recruit2023_h2Box .ja {
        font-size: 4.2vw;
    }

    .recruit2023_main .text {
        font-size: 3.5vw;
        line-height: 1.8;
        text-align: justify;
    }

    .recruit2023_activity {
        padding: 10vw 0;
    }

    .recruit2023_activity .block {
        padding-left: 0;
    }

    .recruit2023_activity .textBox {
        margin: 0 0 10vw;
    }

    .recruit2023_activity .textBox .text {
        font-size: 3.5vw;
        line-height: 1.8;
        margin: 0 0 5vw;
        text-align: justify;
    }

    .recruit2023_activity .textBox .link {
        font-size: 3.5vw;
        width: 100%;
    }

    .recruit2023_interview {
        padding: 10vw 0 0;
    }

    .recruit2023_interview .block {
        margin: 0 0 10vw;
    }

    .recruit2023_interview .interview_contents {
        width: 100%;
    }

    .recruit2023_interview .interview_contents+.interview_contents {
        margin-top: 5vw;
    }

    .recruit2023_interview .interview_contents .textBox {
        padding: 8% 4% 4%;
        bottom: 5%;
    }

    .recruit2023_interview .interview_contents .textBox .voice {
        width: 120px;
        top: -36px;
    }

    .recruit2023_interview .interview_contents .textBox .text {
        font-size: 3.5vw;
        text-align: justify;
    }

    .recruit-co-box {
        width: 100%;
        padding: 30px 20px;
    }

    .recruit_container_box .sub-ttl {
        font-size: 3.5vw;
    }

    .recruit_container_box .text-box {
        width: 60%;
        margin-left: 8%;
    }

    .hana-img-item {
        width: 80px;
    }

    .hana-img-item02 {
        width: 80px;
    }

    .recruit-Brn {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        background: #2f9a18;
        padding: 15px 0;
        border-radius: 5px;
    }

    section.recruit_box {
        margin-top: -5vw;
    }

    .recruit2023_h2Box.seisya {
        margin-top: 8vw;
    }

    .recruit_container_box {
        margin-bottom: 20px;
    }

    .gallery_slider li {
        width: calc(100vw / 3);
    }

    /* SP キャッチセクション */
    .recommend_common_ttl .en {
        font-size: 4.5vw;
    }

    #page_recommend .catch_sec {
        padding-bottom: 12vw;
    }

    #page_recommend .catch_sec .inner {
        display: block;
    }

    .recommend_common_ttl .jp {
        font-size: 4.6vw;
    }

    #page_recommend .catch_sec .inner .img {
        width: 100%;
        margin-top: 2vw;
    }

    #page_recommend .catch_sec .inner .inbox .text_box {
        margin-top: 5vw;
    }

    #page_recommend .catch_sec .inner .inbox .text_box .text {
        font-size: 3.7vw;
        line-height: 1.8;
    }

    #page_recommend .catch_sec .inner .inbox .text_box .text+.text {
        margin-top: 2.5vw;
    }

    /* SP Flower Selectionセクション */
    #page_recommend .selection_sec {
        padding: 12vw 0;
    }

    #page_recommend .select_list {
        margin: 3vw 0 10vw;
    }

    #page_recommend .select_list ul {
        display: block;
    }

    #page_recommend .selection_sec .select_list li a {
        width: 80%;
    }

    #page_recommend .select_list li a {
        font-size: 4.2vw;
        padding: 3vw 0;
        margin: 0 auto;
    }

    #page_recommend .select_list li+li {
        margin-top: 5vw;
    }

    #page_recommend .selection_sec .item_box .item {
        padding: 5vw 2.5vw 7vw;
    }

    #page_recommend .selection_sec .item_box .item .ttl_box {
        padding: 0 1.5vw 5vw;
        margin-bottom: 5vw;
    }

    #page_recommend .selection_sec .item_box .item .ttl_box .ttl .jp {
        font-size: 4.4vw;
        margin-bottom: 2vw;
    }

    #page_recommend .selection_sec .item_box .item .ttl_box .inner {
        display: block;
    }

    #page_recommend .selection_sec .item_box .item .ttl_box .inner .img {
        width: 100%;
        margin-bottom: 5vw;
    }

    #page_recommend .selection_sec .item_box .item .ttl_box .inner .text {
        font-size: 3.7vw;
    }

    #page_recommend .selection_sec .item_box .item#kochou .inbox {
        display: block;
    }

    #page_recommend .item_box .item .inbox {
        padding: 0 1.5vw;
        margin-bottom: 5vw;
    }

    #page_recommend .selection_sec .item_box .item#kochou .inbox .about_box .ttl {
        margin-bottom: .5vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .ttl {
        font-size: 4.3vw;
    }

    #page_recommend .selection_sec .item_box .item#kochou .inbox .about_box .text_area .text {
        font-size: 3.5vw;
    }

    #page_recommend .selection_sec .item_box .item#kochou .inbox .about_box+.about_box {
        margin-top: 5vw;
    }

    #page_recommend .selection_sec .item_box .item#kochou .inbox .about_box+.about_box::before {
        content: none;
    }

    .recommend_item_btn a {
        width: 80%;
        font-size: 4.2vw;
        padding: 3vw 0;
    }

    #page_recommend .selection_sec .item_box .item+.item {
        margin-top: 15vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box.list {
        margin-bottom: 10vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box.list .list {
        margin-top: 3vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .list ul {
        display: block;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .list li .img {
        margin: 0 auto 3vw;
        width: 70%;
        height: 60vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .list ul.type_3 li .img {
        height: 60vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .list li+li {
        margin-top: 10vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .list li .text {
        font-size: 3.5vw;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .list li .type {
        font-size: 3.7vw;
        margin-bottom: 1.5vw;
        letter-spacing: .08em;
        text-align: center;
    }

    #page_recommend .selection_sec .item_box .item#kanyou .inbox .about_box .text_area {
        margin-top: 0;
    }

    #page_recommend .selection_sec .item_box .item .inbox .about_box .text_area .text {
        font-size: 3.6vw;
    }

    /* SP Flower situationセクション */
    #page_recommend .situation_sec {
        padding: 15vw 0;
    }

    #page_recommend .situation_sec .select_list li a {
        width: 80%;
    }

    #page_recommend .situation_sec .item_box .item .ttl_box {
        margin-bottom: 4vw;
        text-align: left;
    }

    #page_recommend .situation_sec .item_box .item .ttl_box .jp {
        font-size: 4.4vw;
        margin-bottom: 1vw;
    }

    #page_recommend .situation_sec .item_box .item .ttl_box .text {
        font-size: 3.7vw;
    }

    #page_recommend .situation_sec .item_box .item .list ul {
        display: block;
    }

    #page_recommend .situation_sec .item_box .item .list li a .inner .jp {
        font-size: 4.2vw;
        margin-bottom: 1vw;
    }

    #page_recommend .situation_sec .item_box .item .list li a {
        display: flex;
        padding: 0;
        height: initial;
        border-radius: 0 7px 7px 0;
    }

    #page_recommend .situation_sec .item_box .item .list li a .img {
        margin-bottom: 0;
        width: 30%;
        flex-shrink: 0;
    }

    #page_recommend .situation_sec .item_box .item .list li a .inner {
        padding: 1.5vw 3vw;
    }

    #page_recommend .situation_sec .item_box .item .list li+li {
        margin-top: 5vw;
    }

    #page_recommend .situation_sec .item_box .item .list li a .inner .text {
        font-size: 3.4vw;
        line-height: 1.5;
    }

    #page_recommend .situation_sec .item_box .item+.item {
        margin-top: 10vw;
    }

    /* SP Flower serviceセクション */
    #page_recommend .service_sec {
        padding: 13vw 0 15vw;
    }

    #page_recommend .service_sec .recommend_common_ttl {
        margin-bottom: 5vw;
    }

    #page_recommend .service_sec .inbox {
        display: block;
    }

    #page_recommend .service_sec .inbox .item .text {
        text-align: left;
        padding: 3vw;
        font-size: 3.5vw;
        width: 100%;
    }

    #page_recommend .service_sec .inbox .item {
        display: flex;
        border-radius: 0 12px 12px 0;
    }

    #page_recommend .service_sec .inbox .item .img {
        flex-shrink: 0;
        width: 40%;
    }

    #page_recommend .service_sec .inbox .item+.item {
        margin-top: 5vw;
    }

    #page_recommend .service_sec .inbox+.inbox {
        margin-top: 5vw;
    }

    #page_recommend .service_sec .btn_box {
        margin-top: 10vw;
        display: block;
    }

    #page_recommend .service_sec .btn_box .btn a {
        width: 80%;
        font-size: 4.2vw;
        padding: 3vw 0;
        margin: 0 auto;
    }

    #page_recommend .service_sec .btn_box .btn+.btn {
        margin-top: 5vw;
    }

    #page_recommend .service_sec .btn_box .btn a::before {
        width: 5vw;
        right: 4vw;
    }

    #page_recommend .service_sec .btn_box .btn a::after {
        border-width: 1.5vw 0 1.5vw 2.2vw;
        right: 5.1vw;
    }

    #top_ekiten {
        padding-top: 20vw;
    }

    #top_ekiten .gadget_wrap {
        width: 100%;
    }

    /* 胡蝶蘭の値段や相場はいくら?贈る時のマナーと胡蝶蘭の本数の意味を解説 SP */

    .common_page_title {
        margin-bottom: 10vw;
    }

    .common_page_title .jp_text {
        font-size: 4vw;
    }

    .common_page_title .en_text {
        font-size: 3.5vw;
    }

    #page_phalaenopsis_price .navi_area {
        margin-bottom: 14vw;
    }

    #page_phalaenopsis_price .navi_area ul {
        display: block;
    }

    #page_phalaenopsis_price .navi_area ul li+li {
        margin-top: 4vw;
    }

    #page_phalaenopsis_price .navi_area ul li a {
        line-height: 12vw;
        padding-left: 4vw;
        font-size: 3.4vw;
    }

    #page_phalaenopsis_price .navi_area ul li a .arrow {
        right: 4vw;
        top: calc(50% - 3vw);
        width: 6vw;
        height: 6vw;
    }

    #page_phalaenopsis_price .navi_area ul li a .arrow svg {
        width: 100%;
        height: 100%;
    }

    #page_phalaenopsis_price .contents .box {
        padding: 6vw 4vw;
    }

    #page_phalaenopsis_price .contents .box+.box {
        margin-top: 20vw;
    }

    #page_phalaenopsis_price .contents .box .title_area {
        margin-bottom: 10vw;
    }

    #page_phalaenopsis_price .contents .box .title_area .title {
        font-size: 4vw;
    }

    #page_phalaenopsis_price .contents .box .title_area .title:before {
        font-size: 3vw;
        top: calc(50% - 1.5vw);
    }

    #page_phalaenopsis_price .contents .box .title_area .text {
        font-size: 3.4vw;
    }

    #page_phalaenopsis_price .contents .box dl {
        padding-bottom: 10vw;
        margin-bottom: 10vw;
        padding-left: 5vw;
    }

    #page_phalaenopsis_price .contents .box dl:before {
        height: 30vw;
    }

    #page_phalaenopsis_price .contents .box dl dt {
        padding-left: 10vw;
        font-size: 4vw;
    }

    #page_phalaenopsis_price .contents .box dl dt .icon {
        width: 8vw;
        height: 8vw;
        top: calc(50% - 4vw);
    }

    #page_phalaenopsis_price .contents .box dl dd {
        font-size: 3.4vw;
    }

    #page_phalaenopsis_price .contents .box .information .text {
        font-size: 3.4vw;
    }

    #page_phalaenopsis_price .contents .box .link_button a {
        line-height: 12vw;
        width: 80%;
        font-size: 3.4vw;
        margin: 0 auto;
    }

    #page_phalaenopsis_price .contents .box .link_button a:hover {
        opacity: 1;
    }

    .modal__content {
        padding: 4vw;
        width: 90%;
    }

    .modal__content .catch_text {
        margin-bottom: 4vw;
    }

    .modal__content ul {
        grid-template-columns: repeat(1, 1fr);
        gap: 4vw;
    }

    .modal__content ul li a {
        line-height: 12vw;
        background-size: 8vw;
        background-position: 4vw;
        padding-left: 15vw;
    }

    .modal__content .js-modal-close {
        width: 7vw;
        line-height: 7vw;
        right: 0;
        top: -10vw;
    }

    .common_phalaenopsis_orchid_page .main_visual {
        height: auto;
        padding: 25vw 4vw;
    }

    .common_phalaenopsis_orchid_page .main_visual .title_text {
        font-size: 4.2vw;
    }

    .common_phalaenopsis_orchid_page .common_title {
        margin-bottom: 5vw;
    }

    .common_phalaenopsis_orchid_page .common_title .text_en {
        font-size: 4vw;
    }

    .common_phalaenopsis_orchid_page .common_title .title_text {
        font-size: 4.5vw;
    }

    #page_phalaenopsis_reason section+section {
        margin-top: 20vw;
    }

    #page_phalaenopsis_reason .section_reason ul {
        display: block;
    }

    #page_phalaenopsis_reason .section_reason ul li {
        display: block;
    }

    #page_phalaenopsis_reason .section_reason ul li+li {
        margin-top: 20px;
    }

    #page_phalaenopsis_reason .section_reason ul li .image {
        width: 100%;
        height: 50vw;
    }

    #page_phalaenopsis_reason .section_reason ul.intro li .image {
        height: 80vw;
    }

    #page_phalaenopsis_reason .section_reason ul li .text_area {
        padding: 4vw;
        width: 100%;
    }

    #page_phalaenopsis_reason .section_reason ul li .text_area .title_text {
        font-size: 4vw;
    }

    #page_phalaenopsis_reason .section_reason ul li .text_area .text {
        font-size: 3.2vw;
    }

    #page_phalaenopsis_reason .section_scene_price ul li {
        display: block;
    }

    #page_phalaenopsis_reason .section_scene_price ul li+li {
        margin-top: 20px;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .image {
        width: 100%;
        height: 70vw;
    }

    #page_phalaenopsis_reason .section_scene_price ul li:nth-child(even) .image {
        order: -1;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .text_area {
        width: 100%;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .text_wrap {
        padding: 4vw;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .text_area .price_area {
        padding: 2vw 4vw;
        text-align: center;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .text_area .price_area .accent {
        font-size: 4vw;
        margin-left: 0;
        display: block;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .text_area .title_text {
        font-size: 4vw;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .text_area .text {
        font-size: 3.2vw;
    }

    #page_phalaenopsis_reason .section_manner ul {
        display: block;
    }

    #page_phalaenopsis_reason .section_manner ul li {
        width: 100%;
        padding: 10vw 4vw 4vw 4vw;
    }

    #page_phalaenopsis_reason .section_manner ul li+li {
        margin-top: 10vw;
    }

    #page_phalaenopsis_reason .section_manner ul li:last-child {
        width: 100%;
    }

    #page_phalaenopsis_reason .section_manner ul li .en_text {
        top: -2vw;
        padding: 1vw 6vw;
    }

    #page_phalaenopsis_reason .section_manner ul li .title_text {
        font-size: 4vw;
    }

    #page_phalaenopsis_reason .section_manner ul li .text {
        font-size: 3.2vw;
    }

    .common_phalaenopsis_orchid_page .common_button {
        margin-top: 4vw;
    }

    .common_phalaenopsis_orchid_page .common_button a {
        line-height: 12vw;
        font-size: 3.5vw;
        padding: 0;
        display: block;
    }

    .common_phalaenopsis_orchid_page .common_button a:hover {
        opacity: 1;
    }

    #page_phalaenopsis_reason .section_trouble .box_card {
        padding: 10vw 4vw;
    }

    #page_phalaenopsis_reason .section_trouble .box_card .title_text {
        padding-left: 7vw;
        font-size: 4vw;
    }

    #page_phalaenopsis_reason .section_trouble .box_card .title_text:before {
        width: 3vw;
        height: 3vw;
        top: calc(50% - 1.5vw);
    }

    #page_phalaenopsis_reason .section_trouble .box_card .text {
        font-size: 3.2vw;
    }

    #page_phalaenopsis_reason .section_reason ul li .image.adjust_1 img {
        object-position: 50% 50%;
    }

    #page_phalaenopsis_reason .section_reason ul li .image.adjust_2 img {
        object-position: 50% 20%;
    }

    #page_phalaenopsis_reason .section_scene_price ul li .image img {
        object-position: 50% 0%;
    }

    /* お祝いに適した胡蝶蘭の色別の花言葉をご紹介 */

    #page_flower_language section+section {
        margin-top: 20vw;
    }

    #page_flower_language .in_wrap .common_fl_wrap+.common_fl_wrap {
        margin-top: 10vw;
    }

    #page_flower_language .common_main_text {
        margin-bottom: 10vw;
    }

    #page_flower_language .common_fl_wrap {
        padding: 4vw;
    }

    #page_flower_language .common_fl_wrap .image {
        width: 100%;
        margin-bottom: 4vw;
    }

    #page_flower_language .origin_section .common_fl_wrap .image {
        height: 40vw;
    }

    #page_flower_language .in_wrap .common_fl_wrap:nth-child(even) .image {
        order: -1;
    }

    #page_flower_language .color_section .common_fl_wrap .image {
        height: 90vw;
    }

    #page_flower_language .scary_section .common_fl_wrap .image {
        height: 40vw;
    }

    #page_flower_language .business_section .common_fl_wrap .image {
        height: 40vw;
    }

    #page_flower_language .common_fl_wrap .text_area {
        width: 100%;
    }

    #page_flower_language .common_fl_wrap .text_area .title {
        font-size: 4vw;
    }

    #page_flower_language .common_fl_wrap .text_area .text {
        line-height: 2.2;
        font-size: 3.4vw;
    }

    #page_flower_language .common_title:before {
        font-size: 2.5vw;
    }

    #page_phalaenopsis_reason .section_manner ul.meaning li:last-child {
        width: 100% !important;
    }

    .common_phalaenopsis_orchid_page .common_title .sec_text {
        font-size: 3.3vw;
        margin-top: 2vw;
    }

    .common_main_title_area .text {
        line-height: 1;
        font-size: 5vw;
        background-position: 4% center, 96% center;
        background-size: 17vw;
        padding: 5vw 0;
    }

    #page_visit .accent_title {
        margin-bottom: 5vw;
    }

    #page_visit .accent_title .title_text {
        font-size: 4.5vw;
    }

    #page_visit .main_area {
        margin-bottom: 10vw;
    }

    #page_visit .merit_section .main_area .text {
        font-size: 3.4vw;
        text-align: left;
    }

    #page_visit .list_area {
        padding: 10vw 4vw;
    }

    #page_visit .list_area ul li {
        margin-top: 10vw;
    }

    #page_visit .list_area ul li .text_area {
        width: 100%;
    }

    #page_visit .list_area ul li .text_area .title_area {
        margin-bottom: 5vw;
    }

    #page_visit .list_area ul li .text_area .title_area .accent {
        width: 12vw;
        height: 12vw;
        margin-right: 4vw;
    }

    #page_visit .list_area ul li .text_area .title_area .accent small {
        font-size: 2vw;
    }

    #page_visit .list_area ul li .text_area .title_area .accent .num {
        font-size: 6vw;
    }

    #page_visit .list_area ul li .text_area .title_area .title {
        font-size: 4vw;
    }

    #page_visit .list_area ul li .image {
        width: 100%;
        order: -1;
        margin-bottom: 5vw;
    }

    .common_accent_area {
        height: 30vw;
        background-position:
            14% center,
            86% center,
            center;
        background-size: 22vw, 22vw, 15vw;
    }

    #page_visit .how_visit_section .pattern_box .title_area {
        border-radius: 16vw;
        padding: 4vw;
        margin-bottom: 10vw;
    }

    #page_visit .how_visit_section .pattern_box .title_area .en {
        font-size: 3vw;
    }

    #page_visit .how_visit_section .pattern_box .title_area .title {
        font-size: 4vw;
    }

    #page_visit .how_visit_section .pattern_box .fl_wrap {
        padding: 0;
    }

    #page_visit .how_visit_section .pattern_box .fl_wrap .image {
        width: 100%;
        margin-bottom: 5vw;
        order: -1;
    }

    #page_visit .how_visit_section .pattern_box .fl_wrap .text_area {
        width: 100%;
    }

    #page_visit .how_visit_section .pattern_box .fl_wrap .text_area .title {
        font-size: 4.3vw;
        padding-left: 17vw;
    }

    #page_visit .how_visit_section .pattern_box .fl_wrap .text_area .title:before {
        width: 12vw;
        height: 14vw;
        left: 0;
    }

    #page_visit .how_visit_section .pattern_box .fl_wrap .text_area .text {
        line-height: 2;
    }

    #page_visit .flow_area {
        padding: 0;
        margin: 10vw 0;
    }

    #page_visit .flow_area .title_box {
        margin-bottom: 5vw;
    }

    #page_visit .flow_area .title_box .title {
        font-size: 5vw;
    }

    #page_visit .flow_area ul li {
        padding: 4vw;
    }

    #page_visit .flow_area ul li .num {
        width: 10vw;
        line-height: 10vw;
        font-size: 6vw;
        position: absolute;
        left: 4vw;
        top: 4vw;
    }

    #page_visit .flow_area ul li .text_area {
        width: 100%;
    }

    #page_visit .flow_area ul li .icon {
        order: -1;
        width: 100%;
        text-align: center;
        margin-bottom: 5vw;
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
    }

    #page_visit .flow_area ul li .text_area .title {
        font-size: 4.5vw;
    }

    #page_visit .how_visit_section .pattern_box#window_shopping {
        margin-bottom: 5vw;
    }

    #page_ordermade .how_section {
        padding: 4vw;
    }

    #page_ordermade .how_section .image {
        width: 100%;
        order: -1;
        margin-bottom: 4vw;
        height: 50vw;
    }

    #page_ordermade .how_section .text_area {
        width: 100%;
    }

    #page_ordermade .common_title {
        margin-bottom: 5vw;
    }

    #page_ordermade .common_title .title_text {
        font-size: 4.5vw;
    }

    #page_ordermade .how_section .text {
        font-size: 3.6vw;
        margin-bottom: 1em;
    }

    #page_ordermade .more_link {
        line-height: 12vw;
        font-size: 4vw;
        width: 80%;
        margin: 0 auto;
    }

    #page_ordermade .insta_section {
        margin: 20vw 0;
    }

    #page_ordermade .insta_section .text {
        margin-bottom: 10vw;
    }

    #page_ordermade .main_contents_section .box+.box {
        margin-top: 15vw;
    }

    #page_ordermade .main_contents_section .image {
        width: 100%;
        order: -1;
        margin-bottom: 5vw;
        height: 50vw;
    }

    #page_ordermade .main_contents_section .text_area {
        width: 100%;
    }

    #page_ordermade .main_contents_section .text_area .title {
        font-size: 4.5vw;
    }

    #page_ordermade .main_contents_section .text_area .text {
        margin-bottom: 1em;
    }

    .common_ordermade_link {
        margin: 100px 0;
    }

    .common_ordermade_link ul {
        gap: 20px;
    }

    .common_ordermade_link ul li {
        width: 100%;
    }

    .common_ordermade_link ul li a {
        padding: 10vw 5vw;
    }

    .common_ordermade_link ul li a:hover {
        opacity: 1;
    }

    .common_ordermade_link ul li .en {
        font-size: 6vw;
    }

    .common_ordermade_link .common_title {
        margin-bottom: 5vw;
    }

    .common_ordermade_link .common_title .title_text {
        font-size: 5vw;
    }

    #top_news .news_area {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        padding: 4vw;
        margin-top: 5vw;
        background: rgba(255, 255, 255, 0.8);
    }

    #top_news .news_area .news_title {
        font-size: 3.6vw;
    }

    #top_news .news_area ul li a .day {
        margin-right: 1em;
        width: 25%;
    }

    #top_news .news_area ul li a .theme {
        width: 75%;
        padding-left: 0;
    }

    .season_about_sec .cont .item {
        display: block;
    }

    .season_about_sec .cont .item .img {
        width: 100%;
    }

    .season_about_sec .cont .item .img img {
        aspect-ratio: 2/1;
    }

    .season_about_sec .cont .item .text_box {
        padding: 6vw;
    }

    .season_about_sec .cont .item .text_box .title {
        font-size: 4.5vw;
    }

    .season_about_sec .cont .item .text_box .text {
        font-size: 3.5vw;
    }

    .season_about_sec .cont .item+.item {
        margin-top: 5vw;
    }

    .season_period_sec .cont .item {
        display: block;
    }

    .season_period_sec .cont .item::before {
        content: none;
    }

    .season_period_sec .cont .item+.item {
        margin-top: 7vw;
    }

    .season_period_sec .cont .item .img {
        width: 100%;
        margin-bottom: 3vw;
    }

    .season_period_sec .cont .item .img img {
        width: 100%;
        aspect-ratio: 2/1;
        object-fit: cover;
    }

    .season_period_sec .cont .item .text_box {
        padding: 0;
    }

    .season_period_sec .cont .item .text_box .title {
        font-size: 4.5vw;
    }

    .season_period_sec .cont .item .text_box .text {
        font-size: 3.5vw;
    }

    .top_news {
        padding: 15vw 0 0;
    }

    .top_news .top_box {
        display: block;
        margin-bottom: 5vw;
    }

    .top_news .common_ttl_box {
        text-align: center;
    }

    .top_news .link_btn a {
        font-size: 3.6vw;
        width: fit-content;
        margin: 5vw 0 0 auto;
    }

    .top_news .news_list li+li {
        margin-top: 2vw;
    }

    .top_news .news_list li a {
        display: block;
        padding: 3vw 5vw;
        border-radius: 1.5vw;
    }

    .top_news .news_list li a::after {
        content: none;
    }

    .top_news .news_list li a .day {
        color: #07913A;
        font-size: 3.1vw;
        margin-bottom: 0.5vw;
    }

    .top_news .news_list li a .theme {
        font-size: 3.6vw;
        -webkit-line-clamp: 2;
    }

    .top_news .news_list li a:hover {
        color: #000;
    }

    /**************************************************
-------responsive-------default-------------------
**************************************************/

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    nav.menu {
        width: 41px;
        height: 45px;
        top: 2px;
        right: 5px;
        position: absolute;
        cursor: pointer;
        overflow: hidden;
        z-index: 9999;
    }

    nav .menu1 {
        width: 25px;
        height: 2px;
        background-color: #000;
        top: 8px;
        position: absolute;
        left: 8px;
    }

    nav .menu2 {
        width: 25px;
        height: 2px;
        background-color: #000;
        top: 16px;
        position: absolute;
        left: 8px;
    }

    nav .menu3 {
        width: 25px;
        height: 2px;
        background-color: #000;
        top: 24px;
        position: absolute;
        left: 8px;
    }

    nav .menu4 {
        font-size: 10px;
        position: absolute;
        bottom: 0;
        left: 5px;
        color: #000;
    }

    nav .menu1,
    nav .menu2,
    nav .menu3 {
        transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        /* Opera */
        -moz-transition: all 0.5s ease-out;
        /* Firefox */
        -webkit-transition: all 0.5s ease-out;
        /* GoogleChrome, Safari */
        -ms-transition: all 0.5s ease-out;
        /* IE */
    }

    nav .menuclick1 {
        top: 16px;
        -o-transform: rotate(405deg);
        -moz-transform: rotate(405deg);
        -webkit-transform: rotate(405deg);
        -ms-transform: rotate(405deg);
        transform: rotate(405deg);
    }

    nav .menuclick2 {
        background-color: rgba(255, 255, 255, 0);
    }

    nav .menuclick3 {
        top: 16px;
        -o-transform: rotate(-405deg);
        -moz-transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
        -ms-transform: rotate(-405deg);
        transform: rotate(-405deg);
    }

    #menu {
        width: 100%;
        display: none;
        right: 0px;
        top: 50px;
        margin: 0;
        right: 0;
        list-style-type: none;
        padding: 0 0 0 0;
        z-index: 99991;
        position: absolute;
    }

    /*by misallychan.com*/
    #menu li a {
        display: block;
        color: #fff;
        padding: 0px;
        padding-left: 4%;
        background-size: 9px auto;
        background-position: 10px;
        font-size: 13px;
        margin: 0px 0 0px 0;
        width: 100%;
        border-bottom: 1px solid #fff;
        height: 50px;
        line-height: 50px;
        position: relative;
    }

    #menu li.switchHat:before {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8.7px 5px 0 5px;
        border-color: #fff transparent transparent transparent;
        position: absolute;
        right: 4%;
        top: 20px;
        transition: 0.3s;
    }

    #menu li.nowOpen:before {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 5px 8.7px 5px;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        right: 4%;
        top: 20px;
        transition: 0.3s;
    }

    #menu li:first-child a {}

    #menu h3 {
        padding-left: 4%;
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        background: #009235;
        color: white;
    }

    #menu li {
        color: #fff;
        background: #1a1a1ac4;
    }

    #menu li:last-child a {
        border: none;
    }

    #menu li.switchHat {
        display: block;
        color: #fff;
        background: #1a1a1ac4;
        padding: 0px;
        padding-left: 4%;
        background-size: 9px auto;
        background-position: 10px;
        font-size: 13px;
        margin: 0px 0 0px 0;
        width: 100%;
        border-bottom: 1px solid #fff;
        height: 50px;
        line-height: 50px;
        position: relative;
    }

    #menu ul.switchDetail li a {
        background: #62511b99 !important;
    }

    /**************************************************
-----end---responsive-------default--------end----
**************************************************/

    header#header-sp {
        padding: 10px 0;
        position: relative;
    }

    div#sp-icon_wrap {
        position: absolute;
        right: 50px;
        top: 10px;
        align-items: center;
    }

    div#sp-icon_wrap a#mypage {
        text-align: center;
        color: #000;
    }

    div#sp-icon_wrap a#mypage span {
        display: block;
        font-size: 2vw;
    }

    div#sp-icon_wrap a#search {
        margin: 0 10px;
    }

    div#main-visual {
        height: 110vw !important;
        padding-top: 10vw;
    }

    div#main-visual h1,
    div#main-visual p {
        font-size: 3vw;
        margin-bottom: 14px;
        line-height: 2;
    }

    div#main-visual h2 img {
        width: 90vw;
    }

    div#main-visual h2 {
        font-size: 5vw;
        margin-bottom: 7vw;
    }

    div#sp-slider .bx-wrapper {
        box-shadow: none;
        border: none;
    }

    div#footer-bottoom {
        margin-top: 30px;
        justify-content: center;
    }

    .shop-banner {
        margin-left: 0;
        margin-bottom: 4vw;
        width: 100%;
        border-bottom: 1px solid #f1f1f1;
        padding: 5vw 0;
    }

    .shop-banner:first-child {
        border-top: 1px solid #f1f1f1;
    }

    .foot-wrap {
        width: 100%;
        margin-bottom: 20px;
    }

    #ft-banner ul li {
        width: 100%;
    }

    #ft-banner ul li:nth-child(-n + 5) {
        margin-bottom: 20px;
    }

    div#cate-img {
        width: 100%;
    }

    aside#side-menu {
        width: 100%;
        order: 1;
    }

    div#cate-banner_text {
        width: 100%;
        padding: 10px;
    }

    div#cate-banner_text h3 {
        font-size: 4vw;
        margin-bottom: 10px;
    }

    div#cate-banner_text h2 {
        font-size: 7vw;
        margin-bottom: 10vw;
    }

    div#cate-banner_text a {
        color: #fafa21;
        text-align: right;
        padding-right: 8vw;
    }

    div#sp-contact_wrap {
        width: 100%;
        background: #07913a;
        z-index: 9999;
        border-top: 1px solid white;
    }

    div#sp-contact_wrap a {
        height: 12vw;
        display: block;
        text-align: center;
        line-height: 13vw;
        color: white;
        font-family: 'Lato', sans-serif;
        font-size: 3vw;
    }

    div#sp-contact_wrap #contact-btn {
        width: 40%;
        background: url(/html/user_data/assets/img/common/mail-icon.svg) no-repeat;
        background-position: 10% center;
        background-size: 6vw;
    }

    div#sp-contact_wrap #fax-btn {
        width: 30%;
        border-left: 1px solid white;
        border-right: 1px solid white;
        background: url(/html/user_data/assets/img/common/sp-fax_icon.svg) no-repeat;
        background-position: 10% center;
        background-size: 6vw;
    }

    div#sp-contact_wrap #tel-btn {
        width: 30%;
        background: url(/html/user_data/assets/img/common/sp-tel_icon.svg) no-repeat;
        background-position: 10% center;
        background-size: 5vw;
    }

    select#cate-select {
        width: 100%;
        height: 35px;
        border-radius: 0;
    }

    #cate-select_wrap {
        margin-right: 0;
        margin-bottom: 4vw;
        background: white;
    }

    div#sp-search_wrap {
        background: #000;
        padding: 4vw;
        margin-bottom: 8vw;
    }

    div#sp-search_wrap b {
        width: 100%;
    }

    #form01 {
        width: 100%;
        margin-bottom: 10px;
    }

    #form01 input {
        vertical-align: top;
        margin: 0;
        height: 100%;
        font-size: 13px;
    }

    #input01 {
        width: 80%;
        border-radius: 0;
        line-height: 35px;
    }

    #submit01 {
        width: 20%;
        background-size: 7vw;
        border-radius: 0;
    }

    div#sp-btn-wrap ul li {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    div#sp-btn-wrap ul li a {
        background: #07913a;
        display: block;
        color: white;
        text-align: center;
        height: 35px;
        line-height: 35px;
        font-weight: 600;
        letter-spacing: 0.2em;
        font-size: 4vw;
    }

    .item-box.pr {
        display: inline-block;
        margin-left: 10px;
        width: 230px;
    }

    #sp-wrap {
        width: 96vw;
        overflow: hidden;
        background: url(/html/user_data/assets/img/common/scroll-icon.svg) no-repeat;
        background-position: 96% 85%;
        background-size: 30vw
    }

    div#item-list {
        display: block;
        white-space: nowrap;
        overflow: scroll;
        margin-bottom: 25vw;
    }

    .item-box.pr:nth-child(3n + 1) {
        margin-left: 10px;
    }

    div#sp-btn-wrap {
        margin-bottom: 8vw;
    }

    div#sp-btn-wrap.top_only {
        margin-bottom: 50px;
    }

    a#faq-btn:after {
        width: 96%;
        height: 90%;
        left: 2%;
        top: 5%;
    }

    div#side-time {
        width: 100%;
        height: auto;
        background-size: cover;
        padding: 10vw 8vw;
        margin-bottom: 8vw;
    }

    div#side-time h3 {
        font-size: 4.5vw;
        margin-bottom: 3vw;
    }

    div#side-time h3 span {
        font-size: 2vw;
    }

    div#side-time p {
        font-size: 4.5vw;
    }

    #cate-title:after {
        display: none;
    }

    div#main-contents h2 img {
        margin-bottom: 8px;
    }

    ul#side-menu li.switchHat {
        height: 15vw;
        line-height: 15vw;
        padding-left: 4vw;
        font-size: 4vw;
        margin-top: 4vw;
    }

    ul#side-menu li.switchHat:after {
        width: 20px;
        height: 20px;
        right: 4vw;
        top: 5vw;
    }

    ul#side-menu li.switchHat:before {
        right: 5.4vw;
        top: 0vw;
    }

    ul#side-menu li.switchHat.nowOpen:before {
        right: 5.8vw;
    }

    div#ranking {
        padding: 10px;
        padding-top: 65px;
        padding-bottom: 20px;
    }

    div#ranking .rank-box {
        margin-bottom: 10px;
    }

    div#ranking .rank-box:last-child {
        margin-bottom: 0px;
    }

    .rank-img {
        width: 22vw;
        height: 28vw;
    }

    div#ranking .rank-info {
        width: 55vw;

    }

    div#cate-banner_text a:before {
        left: 85vw;
        background: url(/html/user_data/assets/img/common/link-icon_2.svg) no-repeat;
        background-size: 15px;
    }

    .item-info a {
        text-align: right;
        padding-right: 6%;
        color: #fafa21;
    }

    .item-info a:before {
        left: 96%;
        background: url(/html/user_data/assets/img/common/link-icon_2.svg) no-repeat;
        background-size: 12px;
        top: 0;
    }

    .item-info h3 {
        margin-bottom: 18px;
    }

    div#head-banner {
        width: 90vw;
        height: 17vw;
        padding-top: 4vw;
        padding-left: 3vw;
        margin: 0 auto 50px auto;
    }

    div#head-banner h3 {
        font-size: 4.5vw;
    }

    /*固定ページ（SP）*/

    .common-top {
        padding-top: 54px;
        text-align: center;
        height: 120px;
        margin-bottom: 50px;
    }

    .common-top h1 {
        padding: 30px 40px 30px 40px;
        font-size: 16px;
    }

    .common-top h1:after {
        width: 6%;
        left: 44%;
        bottom: 10px;
    }

    div#bread-crumbs {
        padding: 30px 0 0 0;
        font-size: 10px;
    }

    div#bread-crumbs ul li a {
        color: #07913a;
    }

    /*faq(SP)*/

    #faq dl {
        margin-bottom: 8vw;
    }

    #faq dl dt {
        font-size: 4.5vw;
        padding: 3vw;
        padding-left: 11vw;
    }

    #faq dl dt:before {
        font-size: 5.5vw;
        left: 2vw;
        top: 2vw;
    }

    #faq dl dd {
        font-size: 3.5vw;
        padding-left: 10vw;
        border: 1px dashed #1a1a1a;
    }

    #faq dl dd:before {
        font-size: 5.5vw;
        left: 2vw;
        top: -1vw;
    }

    div#flow {
        margin-top: 20vw;
    }

    .common-title {
        font-size: 5vw;
        padding: 2vw;
    }

    .common-title:before {
        width: 10%;
    }

    .flow-img {
        margin-bottom: 5vw;
    }

    /*ordermade(sp)*/
    div#ordermade-1 h3 {
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .ordermade-wrap {
        margin-bottom: 50px;
    }

    div#ordermade-1 p.attention {
        font-size: 2.5vw;
    }

    #ordermade-2 .dl-wrap {
        border: 2px solid #1a1a1a;
        padding: 10px;
        font-size: 4vw;
    }

    #ordermade-2 .dl-wrap dl {
        display: block;
    }

    #ordermade-2 .dl-wrap dl dt {
        width: 100%;
    }

    #ordermade-2 .dl-wrap dl dd {
        font-weight: 600;
        font-size: 14px;
    }

    #ordermade-2 ul li {
        font-size: 3.5vw;
        margin-right: 2vw;
        letter-spacing: 0.1em;
        line-height: 2;
        font-weight: 700;
    }

    p.bold {
        font-size: 4vw;
        margin-bottom: 20px;
    }

    .page_panel .top_text_box {
        margin: 5vw 0;
        font-size: 3.5vw;
    }

    .page_panel .common_title .jp {
        font-size: 5vw;
    }

    .page_panel .common_title::before,
    .page_panel .common_title::after {
        height: 80%;
    }

    .page_panel .price_table table {
        width: 100%;
    }

    .page_panel .price_table table th,
    .page_panel .price_table table td {
        font-size: 3.5vw;
    }

    .page_panel .compare_sec .img {
        width: 100%;
    }

    /*manner(SP)*/
    div#manner-1 h2 {
        font-size: 5vw;
        margin-bottom: 5vw;
    }

    #manner p {
        line-height: 2;
    }

    #manner-1 {
        margin-bottom: 50px;
    }

    #manner .common-title_2 {
        line-height: 2;
    }

    #manner .common-title_2:before {
        top: 8px;
    }

    /*message(SP)*/
    div#message-img_wrap01 .message-img {
        margin-right: 2%;
        width: 45%;
    }

    div#message-img_wrap01 .message-img:nth-child(2) {
        margin-right: 0;
    }

    #table-wrap {
        border: 2px solid #1a1a1a;
        padding: 10px;
    }

    #message table {
        width: 90%;
    }

    #message table th,
    #message table td {
        padding: 15px 10px;
        font-size: 14px;
        border: none;
        display: block;
    }

    #message table th {
        width: 100%;
        background: #f0f0f0;
    }

    #message table td {
        width: 100%;
        border-bottom: 1px solid #1a1a1a;
    }

    div#message-img_wrap02 .message-img {
        width: 22%;
        margin-left: 2%;
    }

    /*shop(SP)*/
    #shop-2 h3 {
        font-size: 25px;
    }

    .shop-wrap {
        margin-bottom: 50px;
    }

    div#shop-3 table,
    div#shop-4 table {
        font-size: 3.5vw;
        width: 100%;
    }

    div#shop-3 table th.month {
        width: 10vw;
    }

    div#shop-3 table td.info {
        width: 350px;
    }

    div#shop-4 table th {
        width: 30%;
        vertical-align: middle;
    }

    .shop-img {
        order: -1;
        margin-bottom: 20px;
        width: 100%;
    }

    div#shop-5 iframe {
        margin-bottom: 50px;
        height: 250px;
    }

    .shop-info_wrap.flex {
        margin-bottom: 20px;
    }

    #shop-2 p {
        font-size: 3.8vw;
    }

    #shop-2 p span {
        font-size: 8vw;
    }

    /*uniform(SP)*/
    .uniform-wrap.flex {
        margin-bottom: 50px;
    }

    /*hall(SP)*/

    #hall ul li {
        width: 100%;
        margin-left: 0%;
    }

    #hall ul li a {
        font-size: 3.5vw;
    }

    #hall ul li a:hover {
        opacity: 1;
    }

    #hall ul li a span {
        font-size: 2.5vw;
    }

    #hall ul li.type-1 a {
        line-height: 1.5em;
        padding-top: 3px;
    }

    /*staff(SP)*/
    div#staff .staff-item01 {
        width: 100%;
    }

    div#staff .staff-item01 .img {
        text-align: center;
        position: relative;
        display: inline-block;
        width: 40%;
        height: 200px;
        background: #f0f0f0;
    }

    div#staff .staff-item01 .img img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    div#staff .staff-item01 ul {}

    div#staff .staff-item01 li.text {
        height: auto;
    }

    div#staff .staff-item01 a.more {
        width: 100%;
        position: static;
    }

    div#staff .staff-item01 li.name span {
        margin-left: 0;
        display: block;
    }

    div#staff .staff-item02 {
        width: 145px;
    }

    /*recruit(SP)*/
    #recruit .recruit-content .recruit-img .img {
        width: 50%;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    #recruit table td p.title {
        font-size: 14px;
    }

    #recruit table th,
    #recruit table td {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 20px;
    }

    #recruit table th {
        line-height: 1.5;
    }

    #recruit table td {
        padding: 20px;
        font-size: 12px;
    }

    /*catalog(SP)*/
    #catalog .catalog-content .catalog-box {
        min-width: 150px;
    }

    #page_block3 {
        margin-bottom: 50px !important;
        width: 100% !important;
        max-width: 100%;
    }

    .itemList .pageControl {
        width: 96% !important;
    }

    .itemList_d01 ul.itemList form {
        width: auto;
    }

    .itemList_d01 ul.itemList li {
        margin-right: 0% !important;
        width: 46vw !important;
        height: auto !important;
    }

    .itemList ul.itemList {
        margin-left: 0 !important;
        flex-wrap: wrap;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        justify-content: space-between;
    }

    .itemList .pageControl .sort {
        float: right;
        margin-top: 20px;
    }

    .relationGoods_d01 .carousel {
        width: 96% !important;
    }

    .relationGoods_d01 {
        margin: 0;
    }

    .itemDetail_d01 .inner {
        margin: 0;
    }

    img#detail_img {
        width: 100%;
        height: auto;
    }

    .itemDetail_d01 .photoContents {
        width: 100% !important;
    }

    .itemDetail_d01 .photoContents .mainPhoto {
        padding-right: 0px;
        height: 110vw;
    }

    #cart_area .information .item {
        margin-bottom: 10px;
    }

    .mainTxt {
        margin-bottom: 20px;
        line-height: 2;
    }

    #media iframe {
        width: 100% !important;
    }

    #media .facebook {
        margin-left: 0px;
    }

    #media-wrap_2 .youtube {
        width: 100%;
        margin-left: 0%;
        margin-bottom: 20px;
    }

    #sp-slider .bx-pager-item {
        width: 13vw !important;
        height: 8vw !important;
        background-size: cover !important;
        margin-right: 2vw;
    }

    #sp-slider .bx-pager-item:first-child {
        background: url("/html/user_data/assets/img/common/banner-3.jpg") no-repeat;
    }

    #sp-slider .bx-pager-item:nth-child(2) {
        background: url("/html/user_data/assets/img/common/banner-5.jpg") no-repeat;
    }

    #sp-slider .bx-pager-item:nth-child(3) {
        background: url("/html/user_data/assets/img/common/banner-1.jpg") no-repeat;
    }

    #sp-slider .bx-pager-item:nth-child(4) {
        background: url("/html/user_data/assets/img/common/banner-2.jpg") no-repeat;
    }

    #sp-slider .bx-pager-item:nth-child(5) {
        background: url("/html/user_data/assets/img/common/banner-4.jpg") no-repeat;
    }

    #sp-slider .bx-pager-item:nth-child(6) {
        background: url("/html/user_data/assets/img/common/banner-6.jpg") no-repeat;
        margin-right: 0;
    }

    #sp-slider .bx-wrapper .bx-pager.bx-default-pager a {
        background: none !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
    }

    #sp-slider .bx-wrapper .bx-pager,
    #sp-slider .bx-wrapper .bx-controls-auto {
        bottom: -45px;
    }

    div#sp-link_wrap {
        margin-bottom: 0;
        padding: 20px 10px;
    }

    div#sp-link_wrap ul {
        display: block;
        padding: 0;
    }

    div#sp-link_wrap ul li {
        width: 100%;
        margin: 0 auto 5vw auto;
        line-height: 50px;
        text-align: left;
        font-size: 14px;
    }

    div#sp-link_wrap ul li a:before {
        font-size: 60px;
    }

    div#sp-link_wrap ul li a {
        text-align: center;
        background-size: 12vw !important;
    }

    div#sp-link_wrap ul li:after {
        border-width: 3.5px 0 3.5px 6.1px;
        right: 3vw;
        top: 20px;
    }

    div#sp-link_wrap ul li:nth-child(1) a {
        background-size: 8vw;
        background-position: 3vw;
    }

    div#sp-link_wrap ul li:nth-child(2) a {
        background-size: 8vw;
        background-position: 3vw;
    }

    div#sp-link_wrap ul li:nth-child(3) a {
        background-size: 8vw;
        background-position: 3vw;
    }

    div#sp-link_wrap ul li:nth-child(1) a:hover {
        background: url(/html/user_data/assets/img/common/btn01_icon.svg) no-repeat, #ffa900;
        background-size: 8vw;
        background-position: 3vw;
    }

    div#sp-link_wrap ul li:nth-child(2) a:hover {
        background: url(/html/user_data/assets/img/common/btn02_icon.svg) no-repeat, #ffa900;
        background-size: 8vw;
        background-position: 3vw;
    }

    div#sp-link_wrap ul li:nth-child(3) a:hover {
        background: url(/html/user_data/assets/img/common/btn03_icon.svg) no-repeat, #ffa900;
        background-size: 8vw;
        background-position: 3vw;
    }

    #ft-banner {
        padding: 10vw 0;
    }

    div#price-wrap {
        margin-bottom: 50px;
    }

    a#search-cate {
        display: block;
        background: white;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #1a1a1a;
        text-align: left;
        padding-left: 20px;
        border-radius: 5px;
        position: relative;
        margin-bottom: 15px;
    }

    a#search-cate:after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8.7px 5px 0 5px;
        border-color: #1a1a1a transparent transparent transparent;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    div#top-wrap {
        padding-bottom: 30px;
    }

    div#no01_banner {
        margin: 20px 0 50px 0;
    }

    .purchase input.text {
        height: 30px;
        line-height: 16px;
    }

    .cart_d01 .login ul li label {
        margin-bottom: 10px;
        text-align: left;
        width: 100%;
    }

    .cart_d01 .login ul li {
        margin: 0 0 20px;
    }

    .cart_d01 .login p.btnM {
        float: none;
        width: 100%;
        text-align: center;
        margin: 0;
        margin-bottom: 30px;
    }

    .btnM span {
        margin-left: 0px;
        padding-left: 0px;
    }

    .vegas-timer {
        height: 2px !important;
    }

    /*3/1緊急start*/
    div#attention_wrap {
        border: 5px double #1a1a1a;
        padding: 30px;
        margin-bottom: 30px;
    }

    div#attention_wrap p {
        font-size: 14px;
    }

    /*3/1緊急end*/
    table.table02 th.itemInfo {
        width: 15vw !important;
    }

    th.photo {
        width: 15vw !important;
    }

    td.photo img {
        max-width: 100% !important;
    }

    html>body .purchase table.table02 td.number dl dd {
        float: none !important;
        margin: 0;
        margin-top: 10px;
    }

    .purchase table.table02 td.number dl dt {
        float: none;
    }

    .purchase table.table02 td.number dl {
        max-width: 100%;
    }

    table.table02 th,
    table.table02 td {
        padding: 1vw;
        box-sizing: unset;
    }

    th.delete.last {
        width: 4vw !important;
    }

    th.number {
        width: 8vw !important;
    }

    th.price01 {
        width: 12vw !important;
    }

    th.price02 {
        width: 12vw !important;
    }

    .btnA {
        height: auto;
    }

    .btnA span {
        margin: 0;
        height: auto;
    }

    .purchase .btn01 li {
        float: none !important;
        margin-bottom: 10px;
    }

    .purchase .btn01 {
        text-align: center;
    }

    .btnM span a {
        position: relative;
    }

    .btnM span a img {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    span.attention_text {
        font-size: 14px !important;
        line-height: 2;
    }

    textarea {
        width: 100%;
    }

    ul.btn02 {
        max-width: 100%;
    }

    .box300 {
        width: 100%;
    }

    .box120 {
        width: 30%;
    }

    ul.use_items.clearfix {
        margin-top: 50px;
    }

    ul.use_items.clearfix li {
        margin: 0 auto;
        margin-bottom: 10px;
        float: none;
        text-align: center;
        max-width: 300px;
    }

    ul.switch {
        text-align: center;
        /*ulの中身を中央揃え*/
        padding: 0;
    }

    ul.switch li {
        display: inline-block;
        /*インラインブロック表示*/
        display: inline;
        /*IE対策*/
        zoom: 1;
        /*IE対策*/
        padding: 0;
    }

    #page_map .text {
        font-size: 12px;
        padding-left: 40px;
        margin-top: 30px;
    }

    #page_map .text:after {
        width: 20px;
        height: 20px;
        top: -5px;
        left: 10px;
    }

    .red_banner {
        width: 49%;
        text-align: center;
    }

    .red_banner img {
        border: 1px solid #d3d3d3;
    }

    .red_bannerWrap {
        margin-top: 20px;
        margin-bottom: 30px;
        padding: 0 1%;
    }

    aside div#free_space {
        text-align: center;
    }

    .shop_linkWrap {
        padding: 3vw 0;
    }

    .shop_linkWrap h3 {
        font-size: 3.5vw;
        padding: 0;
        margin-bottom: 3.5vw;
    }

    .shop_linkWrap .wrap:after {
        display: none;
    }

    .shop_linkWrap .wrap a.btn {
        width: 49%;
        height: 7vw;
        line-height: 7vw;
        border-radius: 20vw;
        font-size: 3vw;
    }

    .itemList_d01 ul.itemList li p.photo {
        width: 100%;
        height: 60vw;
    }

    .itemList_d01 ul.itemList li.resize p.photo {
        height: 35vw;
    }

    #company_page table th {
        width: 40%;
    }

    #company_page table td {
        width: 60%;
    }

    #company_page table th,
    #company_page table td {
        padding: 12px;
        font-size: 12px;
    }

    .itemDetail_d01 .photoContents ul li {
        width: 48%;
    }

    .itemDetail_d01 .photoContents ul li p.photo {
        height: 59vw;
        width: 100%;
    }

    .itemDetail_d01 .photoContents ul li:nth-child(odd) {
        margin-right: 4%;
    }

    .itemDetail_d01 .photoContents ul li p.photo a {
        height: 100%;
    }

    h2.catchText_sp {
        background: #07913a;
        color: #fff;
        font-size: 2.2vw;
        padding: 2vw 1vw;
    }

    h2.try_text {
        background: #a70f00;
        color: #fff;
        font-size: 3.5vw;
        padding: 2vw;
        line-height: 1.5;
        padding-left: 27vw;
        position: relative;
    }

    h2.try_text i {
        font-size: 5.5vw;
        margin-right: 10px;
        position: absolute;
        left: 15vw;
        top: 4vw;
    }

    .catchText {
        padding: 1vw;
        font-size: 2.2vw;
    }

    div#sp-link_wrap:before {
        display: none;
    }

    div#sp-link_wrap h2 {
        position: static;
        font-size: 20px;
        padding-top: 0;
        margin-bottom: 1em;
        color: #ffa900;
    }

    #sliderInner {
        position: relative;
        left: 0%;
        width: auto;
        margin-left: 0px;
    }

    #sliderInner li {
        width: 100vw !important;
    }

    #slider .bx-viewport {
        height: 80vw !important;
    }

    #slider .bx-pager-item {
        width: 20% !important;
        height: 10vw !important;
        margin-right: 3%;
    }

    a.juyoBtn {
        width: 80%;
        margin: 0 auto;
        min-width: 340px;
    }

    a.juyoBtn i {
        position: static;
        margin-right: 10px;
        font-size: 14px;
    }

    .spNo1 {
        margin: 20px 2px;
    }

    .tsuyomiWrap .image {
        width: 48%;
        margin-bottom: 3vw;
    }

    #main-visual .vegas-wrapper {
        padding-top: 11vw !important;
    }

    .top_menuNav .menuWrap {
        width: 100%;
    }

    #topcolumn #information_area dl dt {
        width: 100%;
        margin-bottom: 1em;
    }

    #topcolumn #information_area dl dd {
        width: 100%;
        padding-right: 30px;
    }

    #topcolumn #information_area h2 {
        font-size: 20px;
    }

    #topcolumn #information_area h2 span {
        font-size: 14px;
    }

    #ft-banner h3 {
        font-size: 7vw;
        line-height: 1.5;
    }

    #ft-banner .type02 h3 {
        font-size: 5vw;
        line-height: 1.5;
    }

    .shop_box.type02 {}

    #linepay_page .flowWrap .flowIn ul li {
        width: 100%;
        margin-bottom: 10vw;
    }

    #linepay_page .flowWrap .flowIn ul li span {
        font-size: 4vw;
        margin-bottom: 5vw;
    }

    #linepay_page .linepay_banner {
        margin-bottom: 10vw;
    }

    #linepay_page .flowWrap h3 {
        font-size: 4.5vw;
        padding: 1em;
    }

    #linepay_page .flowWrap h4 {
        font-size: 4.5vw;
        margin-bottom: 10vw;
        padding-left: 15vw;
        ;
        padding-top: 1vw;
        line-height: 1.5;
    }

    #linepay_page .flowWrap h4 span.num {
        width: 12vw;
        height: 12vw;
        line-height: 12vw;
    }

    #linepay_page .flowWrap p.text {
        font-size: 4vw;
        margin-bottom: 10vw;
        line-height: 1.5;
        text-align: left;
    }

    #linepay_page .flowWrap p.last_text {
        font-size: 4vw;
        margin-top: 0;
        padding: 1em;
    }

    div#linepay_page {
        margin-bottom: 20vw;
    }

    #linepay_page .flowWrap .flowIn {
        padding: 1em;
    }

    #linepay_page .flowWrap .flowIn.type03 ul li {
        width: 100%;
    }

    #linepay_page .flowWrap .flowIn.type01 ul li {
        padding: 0;
    }

    .banner_wrap {
        margin-bottom: 50px;
    }

    .banner_wrap ul li {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
    }

    #ft-banner h3:before {
        bottom: -2vw;
    }

    .shop-banner .imageArea {
        width: 30%;
    }

    .shop-banner .textArea {
        width: 65%;
    }

    .shop-banner .textArea h4 {
        font-size: 4vw;
        margin-bottom: .5em;
    }

    .shop-banner .textArea p {
        font-size: 3.2vw;
    }

    p.junbi {
        font-size: 30px;
        line-height: 200px;
    }

    p.haha_list_text {
        font-size: 3.4vw;
        line-height: 2;
    }

    .overlay .btn_area img {
        height: auto;
    }

    .overlay .btn_area {
        width: 90vw;
        height: 90vw;
    }

    .overlay .btn_area button {
        position: absolute;
        right: calc(50% - 48vw);
        top: -10vw;
    }

    /* フッターのラインリンク花屋さんのボタンstart */
    .ft_line {
        position: fixed;
        bottom: 32vw;
        width: 50%;
        right: 0;
    }

    .ft_line_batu {
        background-color: #333;
        color: #fff;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 17px;
        float: right;
    }

    .ft_line.click {
        display: none;
    }

    /* フッターのラインリンク花屋さんのボタンend */

    .order_area {
        padding: 10vw 5vw;
        margin-bottom: 10vw;
    }

    .order_area .title_area {
        margin-bottom: 10vw;
    }

    .order_area .title_area h2 {
        font-size: 3vw;
        margin-bottom: 5vw;
    }

    .order_area .title_area h2 span.en {
        font-size: 6vw;
    }

    .order_area .title_area p {
        font-size: 4vw;
        margin-bottom: 2em;
    }

    .order_area .title_area a {
        width: 80%;
        line-height: 10vw;
        font-size: 3vw;
    }

    .order_area ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .order_area ul li {
        width: 90%;
    }

    .order_area ul li:nth-child(2) {
        margin: 5vw 0;
    }

    .order_area ul li a {
        padding: 5vw;
        padding-left: 35vw;
        background-size: 13vw !important;
        background-position: 10vw !important;
        font-size: 3.5vw;
        text-align: left;
    }

    .order_area ul li a:hover {
        background-color: rgba(0, 0, 0, 0);
        border-color: #fff;
    }

    div#main-contents .banner_area {
        margin-bottom: 50px;
    }

    .order_top_sec {
        margin-bottom: 15vw;
    }

    .order_top_sec .top_box {
        padding: 7vw;
        margin-bottom: 11vw;
    }

    .order_top_sec .top_box .text_box .title {
        font-size: 5.6vw;
        margin-bottom: 2vw;
        line-height: 1.4;
    }

    .order_top_sec .top_box .text_box .title .large {
        font-size: 7.6vw;
    }

    .order_top_sec .top_box .text_box .sub_text {
        font-size: 3.6vw;
    }

    .order_top_sec .top_box::before {
        background: #FFA8A5;
        width: 42vw;
        bottom: auto;
        top: 3vw;
        right: 3vw;
    }

    .order_top_sec .cont .img_list {
        margin-bottom: 13vw;
    }

    .order_top_sec .cont .img_list::before {
        width: 13vw;
        height: auto;
        aspect-ratio: 5/4;
        bottom: -5vw;
        left: calc(50% - 50vw);
    }

    .order_top_sec .cont .img_list::after {
        width: 61.5vw;
        height: auto;
        aspect-ratio: 24/13;
        top: -5.5vw;
        right: calc(50% - 50vw);
    }

    .order_top_sec .cont .img_list ul {
        gap: 2vw;
        overflow-x: scroll;
    }

    .order_top_sec .cont .img_list li {
        min-width: 41vw;
        width: 41vw;
    }

    .order_top_sec .cont .desc_box {
        display: block;
    }

    .order_top_sec .cont .desc_box .img_box {
        display: none;
    }

    .order_top_sec .cont .desc_box .text_box .textarea {
        margin-bottom: 4.5vw;
    }

    .order_top_sec .cont .desc_box .text_box .textarea .text {
        font-size: 4.6vw;
    }

    .order_top_sec .cont .desc_box .text_box .textarea .text+.text {
        margin-top: 0.5em;
    }

    .order_top_sec .cont .desc_box .text_box .note {
        font-size: 3.1vw;
    }

    .ec-shelfGrid .ec-shelfGrid__item-image {
        height: 57vw;
    }

    .page_list .product_name {
        font-size: 3.4vw;
    }

    .ec-shelfRole {
        padding: 0;
    }

    .page_list .product_text {
        font-size: 2.8vw;
        -webkit-line-clamp: 1;
    }

    .page_list .price02-default {
        font-size: 4.4vw;
        flex-shrink: 0;
    }

    .ec-shelfGrid__item .ec-productRole__actions .ec-numberInput {
        font-size: 2.5vw;
        display: flex;
        align-items: center;
    }

    .ec-shelfGrid__item .ec-productRole__actions .ec-numberInput .number_head {
        writing-mode: vertical-lr;
        letter-spacing: .12em;
    }

    .ec-numberInput input[type='number'] {
        font-size: 3vw;
    }

    .ec-shelfGrid__item .more_btn,
    .ec-blockBtn--action {
        font-size: 3.5vw;
        padding: 1.2em;
    }

    .ec-shelfGrid .ec-shelfGrid__item {
        margin-bottom: 7vw;
    }

    .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
        padding-right: 1.5vw;
    }

    .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
        padding-left: 1.5vw;
    }

    .ec-productRole .slick-slide {
        height: 109.5vw !important;
    }

    .ec-sliderItemRole {
        padding: 0 4vw !important;
        max-width: 100%;
        margin-bottom: 6vw;
    }

    .ec-productRole {
        padding: 0;
    }

    .ec-sliderItemRole .slick-list,
    .ec-sliderItemRole .slick-dotted.slick-slider,
    .ec-sliderItemRole .slick-track,
    .ec-productRole img {
        height: 100%;
    }

    .ec-sliderItemRole .slick-dotted.slick-slider {
        margin-bottom: 0;
    }

    .ec-productRole img {
        object-fit: contain;
    }

    .ec-productRole .ec-productRole__title .ec-headingTitle {
        font-size: 4.2vw;
    }

    .ec-productRole .ec-productRole__tags {
        font-size: 3vw;
    }

    .ec-productRole .ec-productRole__price {
        font-size: 1em;
        padding-top: 1em;
    }

    .ec-productRole .ec-productRole__price .ec-price {
        /* text-align: right; */
        /* margin-top: 3vw; */
        /* margin-bottom: 4vw; */
        /* padding-bottom: 3vw; */
        /* border-bottom: 1px dotted #ccc; */
    }

    .ec-productRole .ec-productRole__price .ec-price .ec-price__price {
        font-size: 6.5vw;
        font-weight: 700;
        padding: 0 .1em 0 0;
    }

    .ec-productRole .ec-productRole__price .ec-price .ec-price__tax {
        font-size: 4vw;
    }

    .ec-productRole .ec-productRole__code {
        padding: 1em 0;
        font-size: 3.5vw;
    }

    .ec-productRole .ec-productRole__actions {
        text-align: right;
        font-size: 3.5vw;
    }

    .ec-productRole .ec-productRole__category {
        padding: 3.5vw 0;
        font-size: 3.5vw;
    }

    .ec-productRole .ec-productRole__category_head {
        font-size: 3.5vw;
    }

    .ec-productRole .ec-productRole__category ul {
        font-size: 3.5vw;
    }

    .ec-blockBtn--cancel {
        font-size: 3.5vw;
    }

    .ec-productRole .ec-productRole__description {
        font-size: 3.5vw;
    }

    .ec-searchnavRole .ec-searchnavRole__infos {
        padding: 4vw 0 0;
    }

    .ec-searchnavRole .ec-searchnavRole__counter {
        font-size: 3.6vw;
        margin-bottom: 1em;
    }

    .ec-searchnavRole__actions .ec-select select {
        font-size: 3.6vw;
    }

    .ec-topicpath {
        font-size: 3vw;
    }

    .ec-productRole .slick-dots li {
        width: 3.5vw;
        height: 3.5vw;
        margin: 0 1vw;
    }

    .ec-productRole .slick-dots li button {
        width: 3.5vw;
        height: 3.5vw;
        margin: 0 1vw;
    }

    .ec-productRole .slick-dots li button:before {
        width: 3.5vw;
        height: 3.5vw;
        line-height: 3.5vw;
    }

    .ec-productRole .ec-productRole__tag {
        font-size: 3vw;
    }

    .ec-productRole__priceRegularPrice {
        font-size: 3.5vw;
        text-align: right;
    }

    .ec-productRole .ec-productRole__priceRegularTax {
        font-size: 2vw;
    }

    .ec-productRole .js_buy_btn_area .js_buy_btn {
        font-size: 3.5vw;
    }

    .same_category_product_area .same_category_product_block .same_category_name {
        font-size: 4vw;
    }

    .same_category_product_area .same_category_product_block .product_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
    }

    .same_category_product_area .same_category_product_block .product_grid .product_item a .product_image {
        width: 100%;
        overflow: hidden;
    }

    .same_category_product_area .same_category_product_block .product_grid .product_item a:hover .product_image img {
        transform: scale(1);
    }

    .same_category_product_area .same_category_product_block .product_grid .product_item a .product_name {
        font-size: 3.4vw;
    }

    .same_category_product_area .same_category_product_block .product_grid .product_item a .product_price {
        font-size: 3.8vw;
    }

    .ec-shelfGrid__item .ec-productRole__actions .price_flex_box {
        margin-bottom: 3vw;
        padding-top: 3vw;
        gap: 3vw;
    }

    .ec-productRole .ec-productRole__actions .price_flex_box {
        justify-content: flex-end;
        gap: 3vw;
    }

    .ec-shelfGrid__item .ec-productRole__actions .ec-numberInput input[type='number'] {
        width: 4em;
    }

    .ec-searchnavRole__topicpath .ec-topicpath {
        font-size: 2.8vw;
    }

    .color_num_area {
        font-size: 3vw;
    }

    .color_num_area.cat_id_26 .color_num_data.kago_type.nui,
    .color_num_area.cat_id_26 .color_num_data.kago_type.hana,
    .color_num_area.cat_id_26 .color_num_data.kago_type.bal {
        font-size: 2.1vw;
    }

    .ec-productRole__profile .color_num_area {
        font-size: 3.6vw;
    }

    .surprise_sec_cont {
        margin-bottom: 12vw;
    }

    .surprise_sec_cont .wrap {
        max-width: 100%;
    }

    .surprise_sec_cont .message_sec {
        margin-bottom: 12vw;
    }

    .surprise_sec_cont .message_sec .sec_cont {
        padding: 5vw;
    }

    .surprise_sec_cont .message_sec .sec_cont .sec_ttl {
        text-align: left;
        font-size: 5vw;
        margin-bottom: .7em;
    }

    .surprise_sec_cont .message_sec .sec_cont .sec_ttl::before {
        content: unset;
    }

    .surprise_sec_cont .message_sec .sec_cont .inner_text_area .text {
        font-size: 3.6vw;
        line-height: 1.7;
        text-align: left;
    }

    .surprise_sec_cont .message_sec .sec_cont .inner_text_area .text+.text {
        margin-top: 1em;
    }

    .page_surprise_common_ttl_box {
        margin-bottom: 4vw;
    }

    .page_surprise_common_ttl_box .ttl {
        font-size: 5vw;
    }

    .page_surprise_common_ttl_box .ttl_box_text {
        font-size: 3.8vw;
    }

    .surprise_sec_cont .surprise_about_sec {
        margin-bottom: 12vw;
    }

    .surprise_sec_cont .surprise_about_sec .sec_cont {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_img {
        height: 50vw;
    }

    .surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_text_area {
        padding: 4vw;
    }

    .surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_text_area .item_ttl {
        font-size: 4vw;
    }

    .surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item .flow_text_area .flow_text,
    .surprise_sec_cont .surprise_about_sec .sec_cont .surprise_about_item .item_text_area .item_text {
        font-size: 3.5vw;
    }

    .surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item+.flow_item {
        margin-top: 5vw;
    }

    .surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item+.flow_item::before {
        height: 5vw;
        width: 1vw;
        left: 7.5vw;
    }

    .surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item {
        padding: 4vw;
    }

    .surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item .flow_num {
        font-size: 5vw;
        width: 8vw;
    }

    .surprise_sec_cont .surprise_flow_sec .sec_cont .flow_item .flow_text_area .flow_ttl {
        font-size: 4vw;
    }

    #page_surprise_new .bottom_message_area {
        margin-top: 12vw;
    }

    #page_surprise_new .bottom_message_area .wrap {
        max-width: 100%;
    }

    #page_surprise_new .bottom_message_area .bottom_message_text {
        font-size: 4vw;
        text-align: left;
    }

    #page_surprise_new .main_area {
        margin-bottom: 12vw !important;
    }

    .ec-cartRole__actions a.attention_btn {
        font-size: 3.5vw;
    }

    .page_surprise_insta_sec {
        padding-top: 15vw;
    }

    .page_surprise_insta_sec .insta_iframe {
        aspect-ratio: 3/2;
    }

    .page_surprise_insta_sec .follow_btn {
        font-size: 3.6vw;
        padding: 0.8em 2em;
        min-width: unset;
        width: 70vw;
        margin-top: 1em;
    }

    .page_surprise_insta_sec .follow_btn:hover {
        background-color: #eb8bb4;
        color: #fff;
    }

    .ec-orderRole .ec-orderRole__summary .ec-totalBox {
        position: static;
    }


    .ec-orderSignboard .table-borderless th,
    .ec-orderSignboard .table-borderless td {
        font-size: 3vw;
    }

    .ec-orderDelivery .ec-orderDelivery__title .size {
        display: block;
        margin-left: 0;
    }



    .ec-orderDelivery .note_text {
        font-size: 3.2vw;
        margin-bottom: 1em;
    }

    .common_search_box .free_search_box .map_ban {
        margin-top: 4vw;
    }

    .detail_search_head {
        font-size: 3.6vw;
        margin: 1em 0 .7em;
    }

    #detail_search .search_block {
        padding: 3.5vw;
    }

    #detail_search .search_block+.search_block {
        margin-top: 2vw;
    }

    #detail_search .search_block .detail_search_name {
        font-size: 3.4vw;
    }

    #detail_search .search_block .radio_area {
        font-size: 3.4vw;
    }

    #detail_search .search_block .radio_area label {
        cursor: pointer;
    }

    #detail_search .search_block .flex_box {
        font-size: 3.4vw;
    }

    #detail_search .search_block .flex_box input {
        width: 6em;
    }

    #detail_search .detail_search_submit {
        width: 80vw;
        font-size: 3.4vw;
    }

    .ec-productRole__stock {
        font-size: 3.5vw;
    }

    .produt_reco_text_area {
        margin-top: 40px;
    }

    .produt_scene_text_area {
        margin-top: 30px;
    }

    .produt_reco_text_area .area_ttl {
        font-size: 4.2vw;
    }

    .produt_reco_text_area .frame {
        padding: 4vw;
    }

    .produt_reco_text_area .frame .produt_reco_text {
        font-size: 3.6vw;
    }

    .produt_scene_text_area {
        margin-bottom: 50px;
    }

    .produt_scene_text_area .frame {
        padding: 5vw;
    }

    .produt_scene_text_area .frame .area_ttl {
        font-size: 4.2vw;
    }

    .produt_scene_text_area .frame .produt_scene_text {
        font-size: 3.6vw;
        letter-spacing: .02em;
    }

    .top_mother_ban_area {
        margin-top: 8vw;
    }

    #page_map .map_note_area {
        font-size: 3.6vw;
    }

    #top_category .category_sp_box .tab_box_sec .tab_box {
        display: none;
    }

    #top_category .category_sp_box .tab_box_sec .tab_box.show {
        display: block;
    }

    #top_category .category_sp_box {
        margin-top: 7vw;
    }

    #top_category .category_sp_box .tab_btn {
        display: flex;
        gap: 2vw;
        margin: 0 0 2.5vw;
    }

    #top_category .category_sp_box .tab_btn .cont {
        padding: 1.2vw 2vw;
        background-color: #fff;
        letter-spacing: 0.04em;
        cursor: pointer;
        border: 1px solid #e6468a;
        border-radius: 10vw;
        font-size: 3.3vw;
    }

    #top_category .category_sp_box .tab_btn .cont.show {
        background-color: #e6468a;
        color: #fff;
    }

    /* new用途で探すカテゴリーページ */
    .category_page_sec #top_category {
        padding: 0 5.5vw 8vw;
        margin: 10vw 0 0;
    }

    .category_page_sec #top_category .category_box ul {
        grid-template-columns: 100%;
        margin: 0;
        gap: 5vw;
    }

    .category_page_sec #top_category .category_box ul li .link .icon_num {
        top: 1vw;
        left: 1vw;
        width: 14vw;
    }

    .category_page_sec #top_category .category_box ul li {
        height: 60vw;
        border-radius: 2vw;
    }

    .category_page_sec #top_category .category_box ul li .link {
        padding: 36vw 5vw 0;
    }

    .category_page_sec #top_category .category_box ul li .link:hover::before {
        opacity: 0;
    }

    .category_page_sec #top_category .category_box ul li .link:hover::after {
        background-color: #07913a;
    }

    .category_page_sec #top_category .category_box ul li .link::before {
        display: none;
    }

    .category_page_sec #top_category .category_box ul li .link::after {
        content: "";
        position: absolute;
    }

    .category_page_sec #top_category .category_box ul li .link::before {
        bottom: 1px;
        right: 1vw;
        border-width: 3vw 0 3vw 3vw;
    }

    .category_page_sec #top_category .category_box ul li .link::after {
        width: 11vw;
        bottom: -6vw;
        right: -6vw;
    }

    .category_page_sec #top_category .category_box ul li .link .mask::after {
        content: "";
        position: absolute;
        background: rgb(0, 0, 0);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
        inset: 0;
        z-index: -1;
    }

    .category_page_sec #top_category .category_box ul li .link .text_box {
        text-align: center;
    }

    .category_page_sec #top_category .category_box ul li .link .text_box .comment {
        font-size: 3vw;
    }

    .category_page_sec #top_category .category_box ul li .link .text_box .theme {
        font-size: 4.5vw;
        margin-top: 2vw;
        padding-top: 2vw;
    }

    #page_shopping_confirm .ec-orderRole,
    #page_shopping_entry .ec-orderRole {
        padding: 0;
    }

    #page_shopping_confirm .ec-role,
    #page_shopping_confirm .ec-cartRole,
    #page_shopping_entry .ec-role,
    #page_shopping_entry .ec-cartRole {
        padding: 0;
    }

    .ec-borderedDefs dt {
        margin-bottom: 10px;
    }

    .ec-login .login_title {
        font-size: 4.5vw;
    }

    .ec-checkbox label {
        font-size: 3.5vw;
    }

    .ec-login .ec-login__link {
        font-size: 3.5vw;
    }

    .ec-grid2 {
        display: block;
    }



    .ec-navlistRole .ec-navlistRole__navlist {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw;
        margin-bottom: 7vw;
    }

    .ec-navlistRole .ec-navlistRole__item a {
        font-size: 3.4vw;
    }

    .mypage .ec-historyRole {
        grid-template-columns: 1fr;
    }

    .mypage .ec-historyRole .ec-historyRole__contents {
        padding: 4vw;
        gap: 4vw;
    }

    .mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid {
        gap: 4vw;
    }

    .mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__img {
        width: 20vw;
    }

    .mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content .ec-historyRole__detailTitle {
        font-size: 3.4vw;
    }

    .mypage .ec-historyRole .ec-historyRole__detail .ec-imageGrid .ec-imageGrid__content p:not([class]) {
        font-size: 3vw;
    }

    .mypage .ec-historyListHeader .ec-historyListHeader__date {
        font-size: 3.2vw;
    }

    .mypage .ec-historyListHeader .ec-definitions {
        font-size: 3vw;
    }

    .mypage .ec-historyListHeader .ec-historyListHeader__action {
        margin-top: 4vw;
    }

    .mypage .ec-historyListHeader .ec-historyListHeader__action a {
        font-size: 3.4vw;
    }

    .mypage .ec-favoriteRole .ec-favoriteRole__itemList {
        grid-template-columns: repeat(2, 1fr);
        gap: 5vw;
    }

    .mypage .ec-favoriteRole .ec-favoriteRole__item {
        padding: 3vw;
    }

    .mypage .ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle {
        width: 6vw;
        min-width: 6vw;
        max-width: 6vw;
        height: 6vw;
        line-height: 6vw;
    }

    .mypage .ec-favoriteRole .ec-favoriteRole__itemThumb {
        margin: 0 auto 3vw;
        width: 75%;
    }

    .mypage .ec-favoriteRole .ec-favoriteRole__itemTitle {
        font-size: 3vw;
        -webkit-line-clamp: 2;
    }

    .mypage .ec-favoriteRole .ec-favoriteRole__itemPrice {
        font-size: 3.2vw;
    }

    .ec-orderRole .ec-orderRole__detail {
        padding: 4vw !important;
        margin-bottom: 4vw;
    }

    .ec-orderRole .ec-orderRole__detail .ec-orderPayment>.ec-radio,
    .ec-orderRole .ec-orderRole__detail .column,
    .ec-orderRole .ec-orderRole__detail #shopping_order_payment_type_0_body {
        padding: 3vw !important;
    }

    #page_mypage_history .ec-mypageRole,
    #page_mypage_history .ec-orderRole,
    #page_mypage_history .ec-role {
        padding: 0;
    }

    #page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table dl dt,
    #page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table dl dd {
        width: auto;
        font-size: 3vw;
    }

    #page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table dl dd .ec-select select {
        display: block;
        margin-left: .5em;
        font-size: 3.2vw;
    }

    #page_shopping #gmo_payment_gateway_credit_form #shopping_order_payment_type_1_body .dl_table:last-child dl dt {
        width: 30%;
    }

    #page_shopping #shopping_order_payment_type_1_body {
        padding: 3vw !important;
    }

    .ec-alert-warning .ec-alert-warning__icon {
        width: 4vw;
        height: 4vw;
        margin-right: 2vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ec-alert-warning .ec-alert-warning__icon img {
        width: 100%;
        height: 109%;
        object-fit: contain;
    }

    .ec-alert-warning .ec-alert-warning__text {
        font-size: 3.5vw;
    }

    #added_cart.ec-modal .ec-modal-wrap {
        padding: 11vw 4vw;
    }

    #added_cart.ec-modal .ec-modal-wrap .ec-modal-header {
        font-size: 3.8vw;
    }

    #added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role {
        flex-direction: column;
        gap: 3vw;
        padding: 0;
        margin-top: 5vw;
    }

    #added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role .ec-inlineBtn--cancel,
    #added_cart.ec-modal .ec-modal-wrap .ec-modal-box .ec-role .ec-inlineBtn--action {
        width: 100%;
    }

}