/*

desc: PC/Mobile CSS
*/
#logo{
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' fill='%23FE0'%3E%3Cpath stroke='%23BA5' d='M6 12.5H2.5c3.3-11 19-16 29.5-6.5l1.5-2 2 9.5-9-4.5L29 8C22.5 1.5 9.1 3.5 6 12.5Zm-.5 14c-.7-1.6-1-2-1.3-4.5 5.3 0 5.3-.5 5.8 4.5h3c0-5-2-6-2-6 1.5-1 1.5-3 1.5-3 0-3.2-3-3-3-3H2c-1.4 3.9-1.4 8.1 0 12h3.5Zm3-7H4.2l.3-2H9c1 0 .3 2.2-.5 2Zm10-.5v7.5h-3v-12h3l3 4 3-4h3v12h-3V19l-3 4-3-4Zm23-4.5v3h-4c.5 2.9.5 6.2-.5 9h-3.5c1.2-2.7 1.1-6 .5-9h-4.5v-3h12ZM6 37l1.5-2c10 7.5 23.3 4.5 28.5-6.5h-3.5c-4.6 7.8-14.9 10.1-22 4.5l2-1L4 27.5 6 37Z'/%3E%3Cpath stroke='%23668' d='M46.5 14.5h10v5h-10v-5Zm0 12h9l1-5h-10v5Zm15-6v8h-14v7h21v-15h-7Zm-2-2h4v-6h-4v6Zm6 0h4v-6h-4v6Zm14 2v-3h-6v3h-3v6h3v9h6v-9h4v4h5.4l1.1-10H79.5Zm12-2h4v8h-4v-8Zm6 7h4v-8h-4v8Zm6-7v11h-11v6h17v-17h-6Zm9-4v14h6v-7h6v14h7v-21h-19Zm36 8v13h-7v-13h-6v-5h6v-4h5v5h8v4h-6Zm-14 13h5v-10h-5v10Zm17 0h5v-10h-5v10Zm6-23v6h-9v-6h9Zm-3 2h-3v2h3v-2Zm5 4h4v8h-4v-8Zm6 7h4v-8h-4v8Zm6-7v11h-11v6h17v-17h-6Zm27 3h-10v-8h-8v22h8v-7h10v-7Z'/%3E%3C/svg%3E") center/200px 40px no-repeat;
width: 200px;
height: 40px;
}
#login_icon{
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23EEE' stroke-width='3' d='M10 15V8c.2-8 11.8-8 12 0v7'/%3E%3Crect width='21' height='15' x='5.5' y='15' fill='%23EEE' rx='2.5' ry='2.5'/%3E%3Cpath fill='%23546FBC' stroke='%23546FBC' stroke-width='2' d='M17 20c0 1.3-2 1.3-2 0s2-1.3 2 0Zm-1 5v-4 4Z'/%3E%3C/svg%3E") center/32px 32px no-repeat;
}
#faq_icon{
background-image:url(image/a.png)

}
#cart_icon{
background: url("") center/32px 32px no-repeat;
position: relative;
}
.search_icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23FFF' stroke-width='2.5' d='m30 30-7.2-7.2A11 11 0 1 1 7.2 7.2a11 11 0 0 1 15.6 15.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.pull_down_icon{
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,11l7-5.5L14.3,5,8,10,1.7,5,1,5.5Z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
width: 16px;
height: 16px;
}
html{
font-family: Meiryo, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
width: 100%;
height: 100%;
}
body{
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
display: flex;
flex-direction: column;
text-underline-position: under;
width: 100%;
min-width: 360px;
min-height: 100%;
margin: 0;
padding: 0;
}
button, input, select, textarea, pre{
font-family: inherit;
}
footer,
.full_width{
width: 100%;
}
footer{
font-size: 1.6vmin;
}
a:link{
color: #006BBD;
text-decoration: none;
}
a:hover,
a:active{
text-decoration: underline;
}
ul{
list-style-type: none;
}
.display{
display: none;
}
.block{
display: block;
}
h1{
font-size: 24px;
font-weight: normal;
}
h2,
h3{
font-size: 20px;
font-weight: normal;
}
h2,
h3,
h4,
p,
form,
input,
ul{
margin: 0;
padding: 0;
}
hr{
margin: 1em auto;
border: 1px solid gainsboro;
}
.content_subtotal{
font-size: 24px;
margin: 16px 0 0;
padding: 0;
}
img{
border-style: none;
vertical-align: baseline;
}
address{
font-style: normal;
}
dl{
display: grid;
gap: 8px;
grid-template-columns: [key] minmax(40px, min-content) [value] 1fr;
}
dt{
grid-column: key;
white-space: nowrap;
font-weight: bold;
color: dimgray;
}
dd{
grid-column: value;
margin-left: 0;
}
textarea,
select,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"]{
min-width: 32px;
min-height: 32px;
border: 3px solid #546FBC;
border-radius: 2px;
font-size: 15px;
margin: 0;
padding: 0 5px;
}
textarea#remarks{
resize: vertical;
width: 100%;
}
textarea#remark{
    resize: vertical;
    width: 100%;
}
button,
input[type="button"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.helpful{
border: 1px solid dimgray;
padding: 0 5px;
margin-left: 10px;
}
.clear_both,
.clear{
clear: both;
}
.bold,
.product_qty{
font-weight: bold;
}
header{
overflow: hidden;
box-sizing: content-box;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
column-gap: 8px;
background-color: #2097b1;
border-bottom: 2px solid #6ec7da;
width: 100%;
height: 58px;
padding: 3px 0;
}
.margin_l{
margin-left: 1.5vmin;
}
.margin_r{
margin-right: 1.5vmin;
}
#text_wrapper{
white-space: nowrap;
font-size: 11px;
color: white;
}
#side_bar{
overflow: hidden;
word-break: break-all;
line-break: anywhere;
width: 210px;
height: auto;
margin: 30px 16px 0 0;
}
.area_feature_title{
letter-spacing: 1px;
font-size: 22px;
border-bottom: 2px solid gainsboro;
padding: 10px 10px 6px;
}
#info_section,
#payment_section,
#review_section,
#ranking_section,
#side_bar .area_feature{
overflow: hidden;
background-color: white;
border: 1px solid gainsboro;
box-shadow: 0 2px 2px 0 silver;
margin: 0 0 2em;
}
.mobile_carousel_wrapper{
margin: 0 5px;
}
#side_bar li{
padding: 16px 0;
}
#side_bar li:not(:first-child){
border-top: 1px dashed #999;
}
#ranking_section a{
display: block;
}
.float_img{
float: left;
margin-right: 8px;
}
.m_horizontal img{
display: block;
max-width: 100%;
height: auto;
margin: auto;
}
.s_img_wrapper{
text-align: center;
max-width: 184px;
margin: auto;
}
.center{
text-align: center;
}
.img_summary_l{
background-color: darkblue;
color: white;
font-size: 16px;
border-radius: 6px;
margin-right: 6px;
padding: 2px 8px;
}
.img_summary_r{
color: darkblue;
font-size: 17px;
}
.img_detail{
font-size: 12px;
line-height: 1.2;
text-align: justify;
text-align-last: justify;
margin: 6px 3px 0;
}
.rating_stars{
font-size: 20px;
color: #D30;
-webkit-text-stroke: thin saddlebrown;
text-decoration: none;
}
.rating_stars > span{
font-size: inherit;
color: lightgray;
}
.content{
flex: 1 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
font-size: 16px;
color: black;
background-color: whitesmoke;
width: 100%;
height: auto;
}
.content_main{
width: 100%;
/*width: calc(100% - 32px);*/
height: auto;
/*margin: 0 16px;*/
}
.content_main:has(+ #side_bar){
width: calc(100% - 226px);
/*width: calc(100% - 258px);*/
}
.top_text{
margin: 0 16px;
height: 30px;
line-height: 30px;
}
#slide_container{
margin: 8px 16px;
}
#slide_wrapper{
max-width: 1000px;
margin: auto;
}
#slider{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
white-space: nowrap;
transition: transform .5s cubic-bezier(0.4, 1.3, 0.65, 1) 0s;
will-change: transform;
}
#slider li{
display: inline-block;
width: 100%;
}
.carousel_wrapper{
overflow: hidden;
position: relative;
width: 100%;
padding-top: 25%;
}
.carousel_btn_prev,
.carousel_btn_next{
position: absolute;
top: 0;
bottom: 0;
width: 50px;
height: 50px;
margin: auto;
z-index: 1;
}
.carousel_btn_prev{
left: 3px;
right: auto;
}
.carousel_btn_next{
right: 3px;
left: auto;
}
.carousel_ico_prev,
.carousel_ico_next{
border: 0;
background: transparent center/32px 32px no-repeat;
width: 40px;
height: 40px;
margin: 5px;
padding: 0;
}
.carousel_ico_prev{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M23 30 11 16 23 2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M21 30 9 16 21 2'/%3E%3C/svg%3E");
}
.carousel_ico_next{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='m9 2 12 14L9 30'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m11 2 12 14-12 14'/%3E%3C/svg%3E");
}
.carousel_ico_prev:hover,
.carousel_ico_next:hover{
outline: 1px auto silver;
}
.nav_search{
display: flex;
font-size: 20px;
width: auto;
margin: 0 16px;
}
#ui_mobile_btn_toggle{
width: 15%;
}
#ui_btn_kana,
#ui_btn_az09{
color: #3D3D3D;
text-align: center;
white-space: nowrap;
border: 1px solid gainsboro;
line-height: 50px;
background-color: sandybrown;
height: 50px;
}
#items_list_box{
position: relative;
width: 85%;
}
.content_nav{
display: flex;
justify-content: space-between;
align-items: stretch;
border: 1px solid gainsboro;
background-color: white;
height: 50px;
}
#items_list_box button{
flex-grow: 1;
text-align: center;
border-radius: 6px;
background-color: white;
width: calc(10% - 6px);
margin: 3px;
}
#items_list_box button:hover{
background-color: whitesmoke;
}
#kana_line button::after{
content: "\884C";
font-size: .8em;
margin-left: 1px;
}
#breadcrumb{
font-size: 13px;
margin: 8px 16px;
padding-left: 5px;
}
#breadcrumb ol{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#breadcrumb ol + ol{
margin-left: 1em;
}
#breadcrumb li{
display: inline;
}
#breadcrumb li + li::before{
content: "\203a";
margin: 0 6px;
}
.oval_box{
display: inline-block;
border-radius: 8px;
background-color: #EEE;
margin: 5px 10px;
padding: 5px 10px;
}
.accordion_container{
border: 1px solid darkgray;
border-radius: 3px;
background-color: white;
box-shadow: 0 2px 2px #ABC, 0 4px 4px #CCC, 0 8px 8px #DDD;
margin: 1em 16px 2em;
padding: 1em 50px 2em;
}
.accordion_container h1,
.accordion_container h2,
.accordion_container h3{
margin: 16px 0;
}
.main_container{
overflow: hidden;
margin: 1em 16px 2em;
}

#content_category {
    display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    text-shadow: 0 0 3px black;
    width: 98%; /* 占屏幕宽度的 98% */
    max-width: 98%; /* 限制最大宽度为屏幕宽度的 98% */
    will-change: transform;
    box-sizing: border-box; /* 让内边距和边框包含在宽度内 */
    padding: 5px; /* 添加内边距 */
    overflow-x: hidden; /* 防止水平滚动 */
    gap: 3px; /* 设置 a 标签之间的间距为 3px */
    margin: 0 auto; /* 水平居中 */
}

#content_category .slide-item {
    /*display: none;*/
    width: 100%;
}

/* 手机状态下（屏幕宽度小于等于 768px） */
@media (max-width: 768px) {
    #content_category .slide-item {
        display: none;
    }

    #content_category .slide-item.active {
        display: flex;
    }
}

#content_category .slide-item.active {
    /*display: flex;*/
}

#content_category div {
    display: contents;
}

#content_category a {
    flex: 1 1 auto; /* 允许扩展和收缩，宽度由内容决定 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 6px;
    min-height: 50px;
    height: auto;
    padding: 0 15px; /* 增加左右内边距，让 a 标签内容更美观 */
    box-sizing: border-box; /* 让内边距和边框包含在宽度内 */
    white-space: normal; /* 允许文字换行 */
    word-break: break-word; /* 强制单词换行 */
    min-width: fit-content; /* 最小宽度为内容宽度 */
    margin: 3px;
}

#content_category a:hover {
    outline-offset: -3px;
    outline: 6px solid gold;
}

#content_category a:nth-child(12n+1) {
    background-color: #16A;
}

#content_category a:nth-child(12n+2) {
    background-color: #475;
}

#content_category a:nth-child(12n+3) {
    background-color: #935;
}

#content_category a:nth-child(12n+4) {
    background-color: #B50;
}

#content_category a:nth-child(12n+5) {
    background-color: #545;
}

#content_category a:nth-child(12n+6) {
    background-color: #675;
}

#content_category a:nth-child(12n+7) {
    background-color: #858;
}

#content_category a:nth-child(12n+8) {
    background-color: #B55;
}

#content_category a:nth-child(12n+9) {
    background-color: #861;
}

#content_category a:nth-child(12n+10) {
    background-color: #677;
}

#content_category a:nth-child(12n+11) {
    background-color: #766;
}

#content_category a:nth-child(12n+12) {
    background-color: #568;
}
.content_page{
width: auto;
background-color: white;
clear: both;
margin: 0 16px 32px;
padding: 1em 50px;
}
.content_page_title{
overflow: hidden;
position: relative;
display: inline-block;
background-color: white;
vertical-align: bottom;
max-width: 85%;
height: 32px;
margin: 16px 0 0 16px;
padding: 0 40px 0 50px;
}
.content_page_title::after{
content: "";
position: absolute;
top: 0;
right: 0;
display: inline-block;
background-color: whitesmoke;
width: 32px;
height: 32px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
.content_page_title h2{
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
width: 100%;
}
.horizontal_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 1em 0;
}
.horizontal_list .oval_box{
flex-grow: 1;
min-width: 20%;
}
.wrap_line li{
overflow: hidden;
border-bottom: 1px dashed #888;
padding: 10px 0;
}
time{
float: right;
color: dimgray;
}
.justify,
.ui_navi_next_step,
.center_justified,
#img_viewer_wrapper{
display: flex;
justify-content: space-between;
align-items: center;
}
.input_area{
padding: 5px 0;
flex-grow: 1;
}
.input_area > div{
white-space: nowrap;
}
.button_area{
padding: 5px 0;
flex-grow: 0;
text-align: right;
}
.name_field{
display: inline-block;
color: dimgray;
font-weight: bold;
min-width: 124px;
}
input.input_field,
div.input_field{
margin: 8px 0;
display: inline-block;
width: 64%;
min-width: 200px;
}
div.input_field textarea,
div.input_field input{
padding: 3px 6px;
width: calc(100% - 64px);
vertical-align: middle;
}
#footer_nav{
background-color: whitesmoke;
padding: 2em 0 2em 10%;
}
.max3rows li{
display: inline-block;
vertical-align: text-top;
width: 30%;
margin: 0 5px 10px;
}
#footer{
color: white;
text-align: center;
background-color: #2097b1;
padding: 6vmin 0 9vmin;
}
.left_contents{
margin-left: 16px;
background-color: white;
padding-bottom: 64px;
}
.left_contents_margin{
margin-right: 16px;
}
.left_contents span{
display: inline-block;
font-size: 16px;
line-height: 1.3;
clear: both;
}
.left_contents p{
line-height: 24px;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
padding-right: 10px;
}
.left_contents_grayline{
clear: both;
height: 1px;
background-color: #DFDFDF;
margin-top: 16px;
margin-bottom: 16px;
}
.left_contents_blue{
width: 100%;
background-color: #546FBC;
height: 5px;
}
.left_login_content{
line-height: 24px;
font-size: 16px;
}
.left_login_content .text{
float: left;
width: 70px;
height: 24px;
line-height: 26px;
}
.left_login_content .blueline,
#order_container .blueline{
background-color: #546FBC;
color: white;
width: auto;
}
.left_login_content .grayline,
#order_container .grayline{
background-color: gainsboro;
width: auto;
}
ul.list_square{
list-style-type: square;
margin-left: 2em;
}
.note{
margin-left: 1em;
list-style: "\203b" outside;
}
.note li{
padding-left: 5px;
}
.note li::marker{
color: firebrick;
font-weight: bold;
}
.cat_tree > li:not([class]){
font-weight: bold;
margin: 1em 0 0;
}
.subcategory_tree ul{
margin: 0 0 0 2em;
}
.pagination{
display: flex;
justify-content: flex-end;
align-items: end;
font-size: 13px;
margin: 1em 0;
}
.page_links{
display: flex;
font-size: 16px;
}
a.page_link,
a.next_link,
a.prev_link,
.current_page{
margin: 0 0 0 1.1vmin;
padding: 12px 1.1vmin;
background-color: #546FBC;
border: 2px solid dimgray;
border-radius: 5px;
font-family: system-ui, sans-serif;
color: white;
white-space: nowrap;
line-height: 1;
transition: transform 0.2s ease 0.1s;
}
.page_links a:hover,
.page_links a:active{
transform: translateY(-3px);
}
a.next_link::after{
margin-left: 3px;
border-width: 2px 2px 0 0;
}
a.prev_link::before{
margin-right: 3px;
border-width: 0 0 2px 2px;
}
a.next_link::after,
a.prev_link::before{
content: "";
display: inline-block;
border-style: solid;
border-color: whitesmoke;
width: .5em;
height: .5em;
transform: rotate(45deg);
}
.current_page{
background-color: #E07933;
color: navy;
font-weight: bold;
}
.left_login_input{
height: 26px;
line-height: 26px;
vertical-align: top;
text-indent: 5px;
width: 100%;
float: left;
}
.left_title_commodity{
line-height: 43px;
width: 100%;
font-size: 24px;
margin-top: 16px;
text-indent: 50px;
}
.left_content_commodity{
padding-top: 16px;
line-height: 24px;
width: 100%;
padding-left: 50px;
padding-right: 50px;
}
.left_content_commodity h3{
font-size: 24px;
}
.left_title_commodity td{
padding: 0;
}
.left_login_content_width{
min-width: 180px;
white-space: nowrap;
}
.image_item{
flex: auto;
max-width: 700px;
}
.left_content_commodity_font_min_width{
min-width: 160px;
width: 15%;
}
#products_items_container{
display: flex;
justify-content: space-between;
}
button.ui_text_link_btn{
background-color: transparent;
color: #006BBD;
font-size: inherit;
text-align: left;
border: 0;
padding: 0;
}
button.ui_text_link_btn:hover{
text-decoration: underline;
}
button.ui_btn_outline,
button.ui_btn_orange,
button.ui_btn_blue,
button.ui_btn_purple{
width: 240px;
height: 50px;
border: 2px solid;
border-radius: 6px;
box-shadow: 0 3px 8px 1px darkgray;
font-size: 23px;
font-weight: 400;
white-space: nowrap;
text-align: center;
vertical-align: middle;
transition: background-color .3s ease;
}
button.ui_btn_outline{
background-color: transparent;
border-color: slategray;
color: #006BBD;
}
button.ui_btn_orange{
background-color: #D70;
border-color: chocolate;
color: white;
}
button.ui_btn_orange:hover{
background-color: chocolate;
border-color: lightcoral;
}
button.ui_btn_blue{
background-color: #546FBC;
border-color: dodgerblue;
color: white;
}
button.ui_btn_purple{
background: linear-gradient(360deg, #501AA8, #870DE8);
border-color: #5E16BD;
color: white;
}
.ui_btn_spinner{
display: inline-flex;
align-items: flex-end;
}
.ui_btn_spinner button{
text-align: center;
font-size: 18px;
color: white;
border: 0;
background-color: #546FBC;
line-height: 32px;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
}
.ui_btn_spinner input{
text-align: right;
font-size: 18px;
border-bottom: 2px solid #546FBC;
border-top: 2px solid #546FBC;
border-radius: 0;
letter-spacing: 1px;
width: 100px;
height: 28px;
margin: 0;
padding: 0 5px;
}
.ui_dsp_content{
border: 2px solid gainsboro;
font-size: 16px;
text-align: center;
width: 164px;
padding: 2px 0;
}
.subtotal_amount_container{
flex-grow: 1;
text-align: right;
}
.subtotals_section{
margin-top: 2px;
}
.ui_button_close{
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
color: crimson;
font-size: 20px;
font-weight: bold;
border: 2px solid transparent;
border-radius: 50%;
transition: transform .3s;
width: 30px;
height: 30px;
cursor: pointer;
}
a.ui_button_close{
color: crimson;
}
.ui_button_close:hover{
text-decoration: none;
color: firebrick;
border-color: gainsboro;
transform: rotate(180deg);
}
span.ui_item_name{
display: inline-block;
font-weight: bold;
vertical-align: top;
}
span.ui_item_name::after{
content: ":";
display: inline-block;
margin-right: 5px;
}
.left_content_commodity .text{
float: left;
width: 80px;
height: 20px;
line-height: 24px;
padding-right: 10px;
}
.menu{
margin: 1em 0;
}
.menu > ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.menu li{
overflow: hidden;
text-align: center;
color: white;
background-color: #546FBC;
margin: 0 2px;
padding: 8px 0;
cursor: pointer;
}
.menu li.off{
background-color: #E07933;
}
.product_list{
line-height: 1.3;
width: 100%;
margin-top: 1em;
}
.product_list + .product_list{
padding-top: 1em;
border-top: 3px dotted darkgray;
}
.sold_out{
opacity: .6;
}
.time_radio{
float: left;
margin-left: 20px;
margin-top: 2px;
}
.time_label{
float: left;
}
.time_label a,
.time_label a:hover,
.time_label label{
color: white;
cursor: pointer;
}
.text_main img{
margin-bottom: 8px;
}
.fieldValue input:not([type="checkbox"]),
.fieldValue select{
width: 100%;
height: 26px;
margin: 8px 0;
}
.fieldKey{
min-width: 112px;
width: 20%;
}
.field .smallText input{
vertical-align: middle;
line-height: 1;
}
.input_text{
width: 70%;
height: 24px;
}
.check_code_img{
width: 75px;
}
.check_code_input{
width: 90px;
height: 25px;
}
.white{
color: white !important;
}
.option_error,
.shipping_error,
.red,
.errorText{
color: #D00;
}
.error{
color: firebrick;
}
.shipping_time_order,
.shipping_time_reorder,
.shipping_time_preorder{
overflow: hidden;
line-height: 35px;
color: white;
text-align: left;
}
.person_info input{
height: 26px;
width: 60%;
}
.pay_fun_radio,
.radio_span_tag{
overflow: hidden;
background: url("../image/radio.png") left bottom no-repeat;
height: 30px;
line-height: 30px;
padding: 0 0 0 38px;
cursor: pointer;
}
.pay_fun_radio{
display: block;
font-size: 20px;
font-weight: bold;
}
.pay_fun_radio:hover{
background-color: #E2F7FA;
}
.radio_span_tag{
display: inline-block;
color: #006BBD;
}
.radio_span_tag:hover{
text-decoration: underline;
}
.box_content_title label,
label.radio_span_tag{
position: relative;
}
.box_content_title input,
.radio_span_tag input{
opacity: 0;
position: absolute;
}
.star-rating label{
position: relative;
vertical-align: middle;
width: 30px;
height: 30px;
margin: 0 2px;
padding: 0;
}
.radio_selected{
background-position: left top;
}
.selected_table_background{
background-color: #E2F7FA;
}
.cp_description,
.cp_content{
margin: 8px;
}
.option_info_text{
overflow: hidden;
width: 100%;
}
.option_info_text select{
width: 100%;
}
.option_input{
float: left;
height: 24px;
width: 198px;
margin-bottom: 5px;
}
.discount_rate,
.product_cut_rate_change{
display: inline-block;
background-color: crimson;
color: white;
white-space: nowrap;
border-radius: 3px;
vertical-align: top;
margin-right: 5px;
padding: 6px 8px 3px;
}
.qty_discount{
text-align: right;
white-space: nowrap;
}
.qty_discount.rate{
color: crimson;
}
.qty_discount.price{
color: #E00;
}
.product_price{
color: #E00;
font-size: 24px;
font-weight: bold;
}
.warning_area{
overflow: hidden;
color: black;
background-color: snow;
border: 5px solid #FF8080;
border-radius: 12px;
margin: 1em 0 2em;
padding: 8px 12px;
}
.thread{
font-weight: bold;
font-size: 1em;
background: url("../images/icons/thread.gif") no-repeat;
padding-left: 20px;
}
.table_border tr td{
border: 1px solid #EEE;
}
.option_red,
.required{
display: inline-block;
color: white;
background-color: crimson;
text-align: center;
line-height: 2;
border-radius: 5px;
width: 50px;
margin-left: 5px;
}
#item_price,
.td_space_right{
font-weight: normal;
text-align: left;
width: 10%;
min-width: 95px;
white-space: nowrap;
}
.date_time_td_space{
background-color: #383838;
}
#banners_indicators{
justify-content: flex-end;
max-width: 1000px;
margin: 5px auto;
}
.banners_dot{
display: flex;
}
.banners_dot li{
margin: 0 8px;
cursor: pointer;
}
.banners_dot span{
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: lightgray;
}
.banners_dot .active span{
background-color: #2fa2bb;
}
.txt_input_box{
overflow: hidden;
clear: both;
}
.frame_title{
width: 25%;
float: left;
line-height: 25px;
}
.float,
.float_left{
float: left;
}
.tax_info{
color: black;
font-size: 14px;
font-weight: normal;
margin: 0 5px;
}
.categories_list{
overflow: hidden;
position: relative;
display: block;
padding-bottom: calc(150 / 250 * 100%);
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
box-shadow: 0 3px 14px 2px dimgray;
}
.categories_name{
position: absolute;
color: white;
font-size: 20px;
font-weight: bold;
line-height: 1.3;
text-shadow: 0 0 5px black;
padding: 1.5vmin;
}
.categories_name .sub_name{
font-size: 16px;
color: gold;
}
#category_list_images{
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
margin: 1em 0;
}
#category_list_images > li{
display: inline-block;
width: 92%;
max-width: 500px;
margin: 0 4% 8%;
}
.action_reviews_helpful,
.thanks_helpful{
display: none;
}
.see_more{
text-align: right;
padding: 1em;
}
.read_more .text,
.read_more.show .ui_text_link_btn{
display: none;
}
.read_more.show .text{
display: inline;
}
.num_helpful{
font-weight: bold;
color: crimson;
}
.thanks_helpful{
color: #4EAC12;
}
.action_reviews_helpful.show,
.thanks_helpful.show{
display: block;
}
.customer_area{
display: inline-block;
vertical-align: top;
width: 46%;
margin: 1em 0;
}
.customer_area.positive{
margin-right: 5%;
}
.subtitle{
text-indent: 5px;
border-bottom: 1px dashed gray;
margin-bottom: 8px;
}
.left_review_left{
max-width: 30%;
text-align: center;
}
.show_rating_amount{
font-size: 24px;
font-weight: bold;
line-height: 1;
margin: 16px 0;
}
.left_review_right{
width: 70%;
margin-left: 3vmin;
}
.left_review_left img{
width: 100%;
}
.histogram_table{
border-spacing: 5px 8px;
width: 100%;
}
.histogram_row{
white-space: nowrap;
font-weight: normal;
text-align: right;
}
.a-meter{
overflow: hidden;
border-radius: 5px;
background-color: whitesmoke;
box-shadow: inset 0 0 2px 0 gray;
width: 90%;
height: 20px;
}
.a-meter-bar{
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%), inset 0 -1px 0 rgb(0 0 0 / 5%);
background: linear-gradient(to right, #FFA500 50%, #F80);
font-size: 0;
height: 20px;
}
.container{
display: block;
border: 3px dashed #546FBC;
border-radius: 8px;
background-color: whitesmoke;
margin: 16px 0;
padding: 16px;
}
.box{
border: 2px solid darkgray;
border-radius: 6px;
margin: 8px 0 16px;
padding: 8px;
}
.left_review_right table tr:hover a{
color: #C45500;
text-decoration: underline;
}
.left_contents_margin .content_page table tr td{
word-break: break-all;
}
#greybackground{position: fixed;inset: 0;background-color: rgb(0 0 0 / 60%);z-index: 2147483646;}
#popup_notice{position: absolute;inset: 1em 1em auto;color: black;background-color: mistyrose;border: 5px solid salmon;border-radius: 12px;max-width: 500px;margin: auto;padding: 1em 1em 2em;z-index: 2147483647;}
.popup_notice_text{font-size: large;}
#popup_notice ol{padding: 0 1em 0 2em;}
.popup_notice_middle{margin: 1em 0;}
.popup_notice_button{display: flex;justify-content: space-around;}
.popup_notice_button button{color: black;font-size: inherit;width: auto;}
#headerToolbar{
flex-grow: 1;
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: flex-end;
}
.header_item{
font-size: 14px;
text-align: right;
line-height: 1;
margin-left: 16px;
}
.icon_bottom{
display: inline-block;
vertical-align: bottom;
width: 32px;
height: 32px;
}
.inline_wrap{
display: inline-block;
}
.header_link{
display: inline-block;
color: white !important;
}
.hidden_small_dev{
display: block;
color: white !important;
margin-top: 10px;
}
#cart_count{
position: absolute;
top: -8px;
right: 3px;
text-align: center;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 50%;
background-color: #D00;
line-height: 18px;
width: 18px;
height: 18px;
}
#ui_search{
flex-grow: .3;
flex-shrink: 1;
}
#ui_search > form{
display: flex;
border-radius: 3px;
outline: 2px solid slategray;
}
#ui_search input{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 15px;
text-indent: 5px;
border: 0;
border-radius: 3px 0 0 3px;
width: calc(100% - 40px);
height: 40px;
}
#ui_btn_search{
border: 0;
border-radius: 0 3px 3px 0;
background-color: slategray;
background-size: 24px 24px;
width: 40px;
height: 40px;
padding: 0;
}
.content_container{
border-top: 5px solid #546FBC;
background-color: white;
margin: 8px 16px 2em;
padding: 0 0 3em;
}
.content_wrapper{
margin: 0 50px;
}
.content_container h1{
border-left: 5px solid #546FBC;
background-color: whitesmoke;
margin: 1em 0;
padding: .6em 0 .5em .5em;
}
.right_btn_wrapper{
background-color: whitesmoke;
margin: 1em 0 2em;
padding: 1em 1vmin;
}
#order_container{
max-width: 850px;
margin: 0 auto;
padding: 1em 1% 2em;
}
#order_container table{
border-collapse: separate;
border-spacing: 0;
margin: 0;
padding: 0;
}
.timetable,
table#group_list_box{
border-collapse: separate;
border-spacing: 3px;
width: 100%;
}
.time_box,
#group_list_box td{
display: table-cell;
text-align: center;
border: 2px solid dimgray;
border-radius: 8px;
width: auto;
padding: 16px 0;
}
.ui_navi_next_step{
background-color: floralwhite;
border: 3px solid wheat;
border-radius: 8px;
margin: 1em auto;
padding: 1em;
}
/*jp*/
#layout_jp div{
padding: 10px 0 20px;
}
#layout_jp h2{
font-size: 19px;
line-height: 2em;
letter-spacing: 3px;
text-shadow: 0 0 1px limegreen;
}
#layout_jp span{
display: inline;
color: orangered;
font-size: inherit;
font-weight: bold;
}
#layout_jp p{
padding: 5px 0;
font-size: 17px;
}
a:link.arrow{
font-size: 17px;
line-height: 2em;
letter-spacing: 3px;
text-decoration: underline;
}
a:hover.arrow{
text-shadow: 0 0 0 darkblue;
}
a:link.arrow::before{
content: "";
display: inline-block;
margin-right: 10px;
width: .4em;
height: .4em;
border-top: 3px solid dodgerblue;
border-right: 3px solid dodgerblue;
transform: rotate(45deg);
}
a:hover.arrow::before{
transition: transform .25s;
transform: translateX(5px) rotate(45deg);
}
.prdct_desc{
border-spacing: 0 8px;
width: 100%;
margin: 1em 0;
}
.prdct_desc caption{
font-size: 18px;
font-weight: bold;
text-align: left;
background-color: gainsboro;
padding: 5px 10px;
}
.prdct_desc th{
white-space: nowrap;
text-align-last: justify;
background-color: linen;
padding: 5px 10px;
}
.prdct_desc td{
padding: 5px 10px;
}
.prdct_cr{
margin-top: 2em;
}
.separator{
display: inline-block;
width: 1em;
height: 1em;
}
input,
textarea,
.justify,
.ui_navi_next_step,
.inline_block_item,
.inline_block_desc,
.image_list_box,
.image_list,
.nav_search{
box-sizing: border-box;
}
.image_list_box{
overflow: hidden;
position: relative;
width: 100%;
height: 100px;
}
.image_list{
position: absolute;
left: 0;
width: 250%;
transition: transform .5s cubic-bezier(0.4, 1.3, 0.65, 1) 0s;
}
.image_info{
float: left;
width: 92px;
height: 92px;
margin-right: 8px;
border: 1px solid #E8E8E8;
}
pre,
.scroll_container{
background-color: whitesmoke;
overflow-wrap: break-word;
overflow-y: scroll;
white-space: pre-wrap;
border: 3px solid #546FBC;
border-radius: 2px;
height: 30vh;
max-height: 176px;
padding: 8px;
margin: 5px 0 10px;
}
.scroll_container::-webkit-scrollbar{
width: 16px;
}
.scroll_container::-webkit-scrollbar-track{
background-color: lavender;
border-left: 1px solid gainsboro;
}
.scroll_container::-webkit-scrollbar-thumb{
background-color: #546FBC;
}
.button_container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 2em;
margin: 3em auto;
}
.list_container{
border: 3px solid gainsboro;
background-color: whitesmoke;
border-radius: 8px;
margin: 1em 0 2em;
padding: 1em 5px;
}
#cart_details .list_container{
margin: 0 0 1em;
padding: 5px 8px 8px;
}
.response.list_container{
border-color: gray;
}
.ui_input_item_area{
color: midnightblue;
font-weight: bold;
vertical-align: top;
width: 25%;
}
.ui_input_area input.option_input{
display: inline-block;
width: 80%;
min-width: 280px;
}
#add_cart_container{
background-color: linen;
border-radius: 8px;
margin: 1em 0;
padding: 1em 1vmin 2em;
}
#calc_subtotal_container{
margin: 16px 0 0;
}
.item_product_show{
position: relative;
text-align: center;
}
.item_image_primary,
.images_box{
width: 300px;
margin: 0 auto;
}
.item_image_primary{
min-height: 260px;
}
.item_image_primary img{
display: block;
max-width: 300px;
height: auto;
margin: auto;
cursor: pointer;
}
.images_box{
display: flex;
align-items: center;
}
svg,
.svg,
img.middle{
vertical-align: middle;
}
.item_description tr > td:first-child{
width: 10%;
min-width: 95px;
vertical-align: top;
white-space: nowrap;
}
#order_container .order_details,
#order_container .product_details,
#order_container .shipping_details,
#order_container .amount_details{
width: 100%;
}
.ui_box_order_details,
.ui_box_order_details_l,
.ui_box_order_details_r{
background-color: white;
border: 1px solid dimgray;
}
#order_container .order_details{
margin: 1em 0 2em;
padding: 1em 5px;
}
#order_container .ui_box_order_details{
border-radius: 8px;
margin: 1em 0;
padding: 6px 8px;
}
.ui_box_order_details_l{
border-width: 1px 0 1px 1px;
border-radius: 5px 0 0 5px;
padding: 3px 0 3px 6px;
}
.ui_box_order_details_r{
border-width: 1px 1px 1px 0;
border-radius: 0 5px 5px 0;
padding: 3px 6px 3px 0;
}
.order_details .ui_item_name_wrapper{
width: 15%;
text-align: center;
vertical-align: top;
padding-right: 8px;
}
a.ui_button_change{
display: inline-block;
background-color: gainsboro;
border-radius: 5px;
color: #006BBD;
text-decoration: underline;
padding: 0 10px;
}
.products_qty_area,
.products_subtotal_area{
display: inline-block;
}
.inline_block_item{
display: inline-block;
border: 0;
color: dimgray;
font-size: 1.2em;
font-weight: bold;
max-width: 100%;
width: 30%;
padding: 0;
margin: 10px 0;
}
.inline_block_desc{
display: inline-block;
border: 0;
max-width: 100%;
width: 69%;
padding: 0;
margin: 10px 0;
}
.inline_block_desc input:not([type="radio"]),
.inline_block_desc select{
width: calc(100% - 60px);
}
.align_r,
.amount_details,
.align_right_m-center,
.btns_container{
text-align: right;
}
.btns_container button{
font-size: 17px;
height: 40px;
margin: 8px;
}
.faq_list_item,
.faq_list_desc{
margin: 1em 0 2em;
}
.faq_list_item li::before,
.faq_list_desc::before{
position: absolute;
font-weight: bold;
background-color: gainsboro;
border-radius: 50%;
text-align: center;
}
.faq_list_item li::before{
content: "Q";
color: firebrick;
font-size: 14px;
line-height: 2em;
width: 2em;
height: 2em;
margin-top: -2px;
}
.faq_list_item a{
display: block;
margin: 1em 0 1em 2.5em;
}
.faq_list_desc::before{
content: "A";
color: midnightblue;
font-size: 18px;
line-height: 32px;
width: 32px;
height: 32px;
margin-top: 8px;
}
.faq_list_desc p{
border-radius: 8px;
background-color: #EEE;
margin-left: 40px;
padding: 8px;
}
#img_viewer{z-index: 2;position: absolute;inset: 0;width: 80%;height: 80%;text-align: center;background-color: white;margin: auto;}
#img_viewer_title{font-size: 16px;}
#img_viewer_frame > img,
.max_actual{
max-width: 100%;
height: auto;
}
#overlay{
display: none;
z-index: 1;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgb(0 0 0 / 60%);
}
.hidden_only_desktop,
#top_search_mobile,
#ui_mobile_btm_menu,
#cat_wnd,
#mobile_wnd,
#menu_mobile,
#ui_mobile_search,
.ui_ctrler_wrapper,
.hidden_desktop{
display: none;
}

@media screen and (max-width: 1023px){
.nav_search{
font-size: inherit;
}
.hidden_small_dev{
display: none;
}
#side_bar{
width: 190px;
}
.content_main:has(+ #side_bar){
width: calc(100% - 206px);
/*width: calc(100% - 238px);*/
}
}

@media screen and (max-width: 899px){
.table_normal table{
padding: 0 10px;
}
.table_normal table table{
padding: 0;
}
#products_items_container{
flex-direction: column-reverse;
}
.accordion_container{
padding: 8px 16px 24px;
}
.content_wrapper{
margin: 0 16px;
}
.content_page{
padding: 1em 16px;
}
.content_page_title{
padding-left: 16px;
}
.left_contents table{
width: 100% !important;
}
.table_normal .left_contents > form > table{
padding: 0 10px;
width: 100%;
}
}

@media screen and (max-width: 768px){
*{
box-sizing: border-box;
}
.hidden_desktop{
display: block;
}
.content_container{
margin: 5px 0 2em;
}
.content_wrapper{
margin: 0 5px;
}
.content_container h1,
.content_container h2,
.content_container h3{
font-size: 18px;
font-weight: bold;
}
tr.option td select{
height: 35px;
margin-bottom: 15px;
}
.left_content_commodity_font_min_width{
width: 30%;
}
.table_normal tr.field > td:nth-child(1){
width: 100% !important;
display: block;
}
.table_normal tr.field > td:nth-child(2){
display: inline-block !important;
}
/*.table_normal tr.field > td:nth-child(2) input{margin-bottom: 15px !important;height: 35px;}*/
.table_normal tr.field > td:nth-child(3){
display: inline-block !important;
margin-left: 5px !important;
margin-bottom: 13px;
}
.step_by_step form > table:nth-child(3) table{
margin: 0;
}
.hidden_only_desktop{
display: table-cell;
}
.left_login_content{
font-size: 14px;
}
.main_container{
margin: 1em 0;
}
#content_category{
flex-wrap: nowrap;
transition: transform .5s cubic-bezier(0.4, 1.3, 0.65, 1) 0s;
width: 700%;
}
#content_category div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
width: 100%;
}
.mobile_carousel_wrapper{
overflow: hidden;
position: relative;
}
.categories_name{
font-size: 18px;
}
.categories_name .sub_name{
font-size: 15px;
}
#top_search_mobile,
#ui_mobile_btm_menu{
display: block;
border: 0;
padding: 0;
}
#top_search_mobile{
background-color: #546FBC;
background-size: 32px 32px;
width: 32px;
height: 32px;
}
#ui_mobile_btm_menu{
z-index: 200;
background-color: transparent;
width: 40px;
height: 32px;
margin-left: 16px;
}
#menu_icon{
position: relative;
display: block;
width: 40px;
height: 32px;
}
#menu_icon span{
display: block;
position: absolute;
background-color: white;
width: 26px;
height: 2px;
right: 7px;
left: 7px;
transition: transform .25s ease-in-out;
}
#menu_icon span:nth-child(1){
top: 2px;
}
#menu_icon span:nth-child(2){
top: 9px;
}
#menu_icon span:nth-child(3){
top: 16px;
}
.version_small{
overflow: auto;
}
.version_small #menu_icon span:nth-child(1){
transform: translateY(7px) rotate(45deg);
}
.version_small #menu_icon span:nth-child(2){
transform: scale(0);
}
.version_small #menu_icon span:nth-child(3){
transform: translateY(-7px) rotate(-45deg);
}
#menu_icon::after{
content: "\30E1\30CB\30E5\30FC";
position: absolute;
line-height: 1;
font-size: 10px;
color: white;
white-space: nowrap;
top: 22px;
right: 0;
bottom: 0;
left: 0;
}
.version_small #menu_icon::after{
content: "\9589\3058\308B";
}
#mobile_wnd{
content-visibility: auto;
}
.version_small #mobile_wnd,
.version_small #ui_search.show{
display: block;
position: absolute;
top: 70px;
right: 8px;
left: 8px;
}
.version_small #mobile_wnd{
z-index: 200;
background-color: white;
letter-spacing: 1px;
border-radius: 3px;
}
.version_small #ui_search.show{
z-index: 201;
margin: 16px 2em 0;
}
.version_small #ui_mobile_search.active,
.version_small #menu_mobile.active{
display: block;
}
.version_small #menu_mobile nav{
background-color: whitesmoke;
border-radius: 6px;
margin: 16px 32px 8px;
padding: 8px;
}
.version_small #mobile_wnd a{
display: block;
padding: 8px 0 8px 2em;
}
.version_small #mobile_wnd a:hover{
background-color: gainsboro;
}
.version_small .menu_mobile_close{
background-color: #546FBC;
text-align: center;
color: white;
padding: 1em 0;
cursor: pointer;
}
.version_small .menu_mobile_close:hover{
background-color: #46B;
text-decoration: underline;
}
.top_text{
font-size: 12px;
line-height: normal;
height: auto;
margin: 0 5px;
}
.nav_search{
flex-direction: column;
margin: 0;
}
#ui_mobile_btn_toggle{
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: auto;
padding-right: 16px;
}
#ui_btn_kana,
#ui_btn_az09{
display: inline-block;
color: #006BBD;
text-decoration: underline;
background-color: white;
border-bottom-width: 0;
border-radius: 5px 5px 0 0;
padding: 2px 16px;
height: auto;
line-height: normal;
cursor: pointer;
}
#ui_btn_kana.active,
#ui_btn_az09.active{
border-color: sandybrown;
background-color: sandybrown;
color: #3D3D3D;
text-decoration: none;
padding-top: 4px;
cursor: auto;
}
#items_list_box{
border: solid sandybrown;
border-width: 2px 0;
width: auto;
}
.content_nav{
display: none;
}
.content_nav.active{
display: flex;
flex-wrap: wrap;
background-color: gainsboro;
height: auto;
}
#items_list_box button{
border: 2px solid silver;
width: calc(20% - 1em);
margin: 5px .5em;
}
.content{
display: block;
font-size: 14px;
}
#content > .content_main{
width: auto;
margin: 0 5px;
}
.content_main:has(+ #side_bar){
width: auto;
}
#breadcrumb{
font-size: 11px;
margin: 5px 0;
}
.left_contents{
margin-left: 0;
font-size: 14px;
}
#slide_container{
margin: 0;
}
.collapse{
position: absolute;
top: 7px;
right: 10px;
}
.content_page{
margin: 0 0 1em;
padding: 1em 8px;
}
.content_page_title{
border-bottom: 1px solid gainsboro;
max-width: unset;
height: auto;
margin: 0;
padding: 8px;
}
.content_page_title::after{
content: none;
}
.content_page_title h2{
white-space: normal;
font-size: 16px;
font-weight: bold;
}
.accordion_container{
margin: 1em 2px;
padding: 0 10px;
}
.mobile_collapse{
margin: 1em 0 2em;
}
.accordion_container h1,
.area_feature_title{
font-size: 20px;
}
.accordion_container h1,
.accordion_container h2,
.accordion_container h3{
margin: 10px 0 8px;
}
.accordion_container button,
.mobile_collapse button{
box-sizing: content-box;
line-height: 1;
border: 2px solid lightsteelblue;
border-radius: 50%;
background-color: whitesmoke;
transition: transform .3s ease-in-out .2s;
padding: 5px;
}
.accordion_container.open button,
.mobile_collapse.open button{
transform: rotate(180deg);
}
.accordion_container button:hover,
.mobile_collapse button:hover,
.accordion_container button:focus,
.mobile_collapse button:focus,
.accordion_container button:active,
.mobile_collapse button:active{
outline: 2px solid lightsteelblue;
}
.ui_ctrler_wrapper,
.summary{
display: flex;
justify-content: space-between;
align-items: center;
}
.details{
display: none;
overflow: hidden;
}
.open .details{
display: block;
margin: 0 0 1em;
}
#side_bar{
width: auto;
margin: 1em 5px;
}
#side_bar li:not(:first-child){
border-top: 0;
}
#ranking_scope,
#review_scope{
white-space: nowrap;
transition: transform .5s cubic-bezier(0.4, 1.3, 0.65, 1) 0s;
}
#ranking_scope li,
#review_scope li{
display: inline-block;
white-space: normal;
width: 100%;
}
.m_horizontal{
display: grid;
grid-auto-flow: column;
}
.ui_navi_next_step{
display: block;
text-align: center;
width: 100%;
}
.ui_navi_next_step button{
margin: 1em auto;
}
.left_contents > table.left_content_commodity:nth-child(2){
padding-top: 30px;
background-color: red;
}
.customer_area{
width: auto;
}
.customer_area.positive{
margin-right: auto;
}
.table_normal .left_contents > form > table{
padding: 0 10px;
width: 100%;
}
.step_by_step form > table:nth-child(3){
padding: 0;
margin-bottom: 20px;
}
.td_button{
display: block;
}
.left_contents_margin{
margin-left: 0;
margin-right: 0;
}
.left_contents table td.block{
display: block;
width: 100%;
}
table.left_login_content{
width: 100%;
}
.left_title_commodity{
text-indent: 10px;
font-size: 16px;
}
.left_title_commodity h1{
font-weight: bold;
font-size: 16px;
line-height: 16px;
margin-left: 0;
margin-right: 0;
padding-bottom: 5px;
padding-top: 3px;
}
.left_content_commodity{
padding: 10px;
font-size: 14px;
}
.left_content_commodity td:last-child h3{
font-size: 16px;
line-height: 24px;
margin-top: -5px;
margin-left: 10px;
}
.left_contents span{
font-size: 14px;
}
.step_by_step .left_contents_grayline.top_zero{
margin-top: 0;
}
.step_by_step .left_contents_grayline.line_two{
height: 2px;
}
.step_by_step .left_contents table,
#reply #message{
width: 100% !important;
}
.step_by_step .left_contents table td{
display: block;
}
.step_by_step .step_by_step_process{
margin-bottom: 15px;
}
#order_container .step_by_step_process td,
.step_by_step .step_by_step_process td{
position: relative;
border-bottom: 3px solid silver;
background-color: white;
padding: 0;
}
.step_by_step .step_by_step_process .grayline,
#order_container .grayline{
color: silver;
}
.step_by_step .step_by_step_process .blueline,
#order_container .blueline{
color: green;
font-weight: bold;
border-bottom-color: #546FBC;
}
.step_by_step .step_by_step_process .blueline::after,
#order_container .blueline::after{
position: absolute;
left: 50%;
bottom: -22px;
margin-left: -10px;
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid #546FBC;
}
#order_flow a{
color: darkgreen;
font-weight: bold;
}
.step_by_step_form{
position: relative;
}
.step_by_step_form td{
width: 100%;
padding: 0;
font-size: 14px;
}
.step_by_step_form span{
font-size: 12px;
}
/*.step_by_step_form .option_red{margin-top: 0;margin-left: 0;}*/
.step_by_step_form .option_input{
display: block;
width: 100%;
}
.step_by_step_form .hidden_mobile{
display: none !important;
}
.step_by_step_form .infoBox input{
width: 100%;
height: 24px;
margin-top: 5px;
}
.step_by_step_form textarea{
width: 100%;
min-height: 50px !important;
}
#shipping_time_id label{
float: left;
display: block;
width: 100%;
}
.table_normal table tr.field td input{
margin-bottom: 5px;
float: none;
}
.td_display_block_mobile{
display: block;
width: 100%;
}
.order_details .ui_item_name_wrapper{
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
}
.ui_box_order_details_l{
border-width: 1px 1px 0;
border-radius: 5px 5px 0 0;
padding: 3px 6px 0;
}
.ui_box_order_details_r{
border-width: 0 1px 1px;
border-radius: 0 0 5px 5px;
padding: 0 6px 3px;
}
.pagination{
flex-wrap: wrap;
font-size: 12px;
}
#content_header{
position: relative;
}
.table_normal td:first-child{
vertical-align: top;
}
.authentication tr.field td{
display: block;
width: 100%;
}
.table_normal table tr.field textarea,
.authentication tr.field td input[type="text"]{
width: 100%;
}
#comment{
width: 100%;
height: auto;
}
.edit_min_width{
min-width: 60px;
}
.mobile_no_block td{
display: table-cell;
vertical-align: baseline;
padding: 2px 0;
}
.mobile_no_block td:nth-child(1){
white-space: nowrap;
}
.input_area label.name_field,
.input_area span.name_field{
margin-left: 3px;
display: block;
}
.input_area .input_field{
margin-left: 3px;
width: 88%;
}
.ui_input_area{
display: inline-block;
width: 100%;
}
.btns_container,
.align_right_m-center{
text-align: center;
}
.hidden_medium_space,
#ui_search,
.hidden_mobile,
.checkout_form_content_hidden{
display: none;
}
.selected_table_background .checkout_form_content_hidden{
display: block;
}
}

@media screen and (max-width: 480px){
.content_container h1,
.content_container h2,
.content_container h3,
.accordion_container h1,
.accordion_container h2,
.accordion_container h3,
.area_feature_title{
font-size: 16px;
}
.product_list h2,
.product_list h3,
.product_price{
font-size: 20px;
}
.button_container{
gap: 1em;
}
.tax_info{
font-size: 10px;
margin: 0 3px 0 2px;
padding: 0;
}
.discount_rate,
.product_cut_rate_change{
padding: 3px;
}
.categories_name{
font-size: 14px;
}
.categories_name .sub_name,
.mobile_no_block td{
font-size: 12px;
}
.left_content_commodity_font_min_width{
min-width: auto;
width: 50%;
}
.input_text{
width: 90%;
}
#btn_add_cart,
.button_area{
text-align: center;
}
div.input_field textarea,
div.input_field input{
width: calc(100% - 60px);
}
.inline_block_desc input:not([type="radio"]),
.inline_block_desc select{
width: calc(100% - 48px);
}
.inline_block_item,
.inline_block_desc,
div.input_field,
.justify,
.input_area,
.name_field,
input.input_field,
.prdct_desc tr,
.prdct_desc th,
.prdct_desc td{
display: block;
width: auto;
}
.prdct_desc tr{
border: 2px solid darkgrey;
margin: 8px 0;
}
.prdct_desc th{
text-align-last: start;
}
.option_red,
.required{
width: 40px;
}
}