html,u {
    scroll-padding-top: 120px;
}
#header{
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #666;
}
#header .shop_header {
    max-width: 1000px;
    margin: 0 auto;
}
#header .shop_header h1{
    max-width: 300px;
    width: 80%;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    padding-top: .5em;
    margin-left: auto;
    margin-right: auto;
}
.shop_header h1 img{ width: 100%!important; }
#mainnav{ margin-top: .5em; }
#mainnav li { padding: .25em 2em; }
.acc_menu div { font-size: .8em; }
.acc_menu div h6{
    text-align: left;
    border-bottom: dotted 1px #ccc;
    margin-bottom: 0;
    font-size: 1.05em;
    margin-top: .25em;
}
.l{ text-align: left; }
/* shop専用 */
.cart_cnt{
    display: inline-block;
    background-color: #309dd1;
    border-radius: 1em;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.2em;
    padding: .15em;
    font-size: .8em;
    vertical-align: top;
}
.hidden {
  display: none;
}
#js_cart_cnt{
    color: #fff;
    display: block;
    width: 90%;
    text-align: center;
}
#formWrap.col2{ display: flex; }
#formWrap.col2 > div{ text-align: left; }
#formWrap.col2 > div:nth-child(1){ width: 190px; }
#formWrap.col2 > div:nth-child(1) a{ font-size:.9em; }
#formWrap.col2 > div:nth-child(2){ width: calc(100% - 200px); }
#annai h4{
   border: 0;
   font-size: 1.2em;
   color: #000;
   padding: .25em 0;
   border-bottom: solid 1px #999;
   display: block;
   width: 100%;
   margin: .75em 0;
}
h5{
    white-space: nowrap;
    font-size: 1.1em;
    border-left: solid .5em #309dd1;
    padding: 0 1em;
    display: block;
    color: #309dd1;
    margin-bottom: .5em;
    margin-top: .5em;
}
h6{
    font-size: 1em;
    border: 0;
    display: block;
    color: #333;
    padding: 0;
    margin-top: .5em;
}
#sp1{
    position: relative;
    margin-top: 110px;
}
.list{ position: fixed; }
.col_right{ margin-left: 210px; }
.list ul{ border-top: dotted 1px #999; }
.list li{
    font-size: .9em;
    border-bottom: dotted 1px #999;
}
.col_right > ul > li{
    display: inline-block;
    border: solid 1px #ccc;
    padding: .5em;
    line-height: 1.4;
    border-radius: 4px;
    vertical-align: top;
    margin: .5em;
}
.col_right > ul > li .h5{
    display: block;
    font-size: 1.1em;
}
.col_right > ul > li h6,
.col_right > ul > li .h6{
    margin: 0 0 .5em 0;
    padding: .25em 0;
    font-size: 1.05em;
    font-weight: bold;
    border-bottom:dotted 1px #999;
}
.col_right > ul > li .h6{
    display: block;
    margin-top:1em;
    padding-top: 1em;
    border-top:double 3px #999;
    font-size: 1.1em;
}
.col_right > ul > li a{
    display: inline-block;
    margin-bottom: .5em;
}
.col_right > ul > li p{ font-size: .8em; min-height: 2.8em; }
.col_right > ul.r_1 > li{ width: calc(100% - 2em - 2px); }
.col_right > ul.r_2 > li{ width: calc(50% - 2em - 2px); }
.col_right > ul.r_3 > li{ width: calc(33% - 2em - 2px); }
.col_right > ul.r_4 > li{ width: calc(25% - 2em - 2px); }
.col_right .btn_area{ text-align: right; }
.col_right .btn_area .btn{
    width: auto;
    line-height: 1.2;
}
.col_right .btn_area .ec-input{
    text-align: left;
    width: 3em;
    font-size: 1.1em;
    padding: .025em 0 .025em.5em;
    margin: .15em;
    vertical-align: middle;
}

.col_right .btn_area .btn.js_cart_btn::after{
    content: "に追加";
}

.col_right .btn_area .btn.item_cart_btn_active{ color: #f00; }
.col_right .btn_area .btn.item_cart_btn_active::after{
    content: "から削除";
}
.col_right > ul > li img{
    width: 100%;
    max-width: 21;
    border-radius: 10px;
}
.col_right > ul.r_1 > li > ul.r_3 > li{
    display: inline-block;
    border: 0;
    padding: 0;
    margin: 0;
    vertical-align: top;
}
.col_right > ul.r_1 > li > ul.r_3 > li:first-child{ width: calc(33% - 2em - 2px); }
.col_right > ul.r_1 > li > ul.r_3 > li:last-child{ 
    width: calc(66% + 1em + 2px);
    padding-left: 1em;
}
.btn_area input[type='number'] {
    width: 4em;
    margin: 0 .25em 0 .5em;
}
.col_right .btn_area { 
    border-top:dotted 1px #999;
    margin-top: .5em;
}
.col_right .btn_area  + div{
    padding-top: .4em;
    margin-top: .6em;
    display: inline-block;
}
.col_right .r_1 .btn_area {
    margin-top: .4em;
    padding-top: .4em;
    width: 100%;
}

.col_right .btn_area p{
    margin: 0 0 0 auto;
    padding: .4em;
    font-size: 1.2em;
    min-height: auto;
    line-height: 1em;
    max-width: 15em;
}
.col_right .btn_area div + p{
    padding-top: 0;
}
.col_right > ul > li .btn_area p span{
    font-size: .7em;
    display: inline-block;
    white-space: nowrap;
 }
 .col_right > ul > li .btn_area p span:first-child{
    display: block;
    padding-top: .5em;
    text-align: left;
}
.col_right .r_1 .btn_area span,
.col_right .r_1 .btn_area p,
.col_right .r_1 .btn_area button,
.col_right > ul.r_1 > li .btn_area p span:first-child {
    display: inline-block;
    max-width: none;
}
.col_right .btn_area button{ width: 10em; }
.banner{
    margin: .25em 0 1em 0;
    border: solid 1px #999;
    background-color: #f0f0f0;
    padding: 1em;
    text-align: center;
}
.banner span{ font-size: .9em; }
.banner p{
    border-top:dotted 1px #999;
    margin-top: .5em;
    padding-top: .5em;
    font-size: .9em;
}
/**/
#sp1 .conteiner{ padding: 1em 2em; }
.shopping_list{
    width: calc(100% - 2px);
    margin: 1em 0;
}
.shopping_list th,
.shopping_list td{
    padding: .25em .5em;
    border: solid 1px #999;
}
.shopping_list th{
    background-color: #f0f0f0;
    font-size: .9em;
    text-align: center;
}
.shopping_list td{
    font-family: sans-serif;
    vertical-align: middle;
}
.shopping_list input[type="text"]{
    margin: 0 .25em;
    width: calc(100% - 1em - 2px);
    font-size: 14px;
    color: #000;
    vertical-align: text-top;
    height: 1.4em;
    padding: .0 .25em;
}
.shopping_list label{
    padding: .5em 1em;
    font-weight: bold;
}
.shopping_list td input[readonly]{ border: 0;}
#js_shopping_list td:nth-child(2){ width: 14em; }
#js_shopping_list td:nth-child(2) input{
    text-align: right;
}
#js_shopping_list td:nth-child(3){
    width: 5.5em;
    text-align: center;
}
#js_shopping_list td:nth-child(3) input{
    width: 2.8em;
    margin: 0 .5em;
    text-align: right;
    font-size: 1.1em;
}
#js_shopping_list td:nth-child(3)::after{ content: "個"; }
#js_shopping_list td.metol:nth-child(3)::after{ content: "m"; }
#js_shopping_list td:nth-child(4){
    max-width: 10em;
    width: 20%;
}
.total{ text-align: right; }
#form_table th span{
    display: inline-block;
    border: solid 1px blue;
    font-size: .6em;
    padding: 0 .5em;
    margin-left: .5em;
    vertical-align: text-top;
    color: blue;
}

#form_table th{ max-width: 12em; }
#form_table textarea{
    margin: .25em;
    width: calc(100% - .5em - 6px);
    font-size: 14px;
    height: 3em;
    padding: .25em;
}
  #formWrap{
    text-align: left;
  }
  .conteiner{
    border: solid 1px #999;
    border-radius: 1em;
    padding: 1em;
    margin: 1em auto;
  }
  #sp1 h1{ border-bottom: solid 1px #999;}
  #js_shopping_list li{
    border-bottom:dotted 1px #999;
    padding: .5em;
    display: table;
  }
  #js_shopping_list li > *{ display: table-cell; }
  #js_shopping_list h2{
    font-size: 1em;
    text-align: left;
	}
@media only screen and (max-width: 1024px){
    #sp1 .list{ display: none; }
    #formWrap.col2 > div:nth-child(2) {
        width: 100%;
        margin-left: 0;
    }
}
@media only screen and (min-width: 900px){
}
@media only screen and (max-width: 840px){
    .col_right > ul.r_3 > li{ width: calc(50% - 2em - 4px); }
    .col_right > ul > li .btn_area p{
        max-width: none;
        width: 100%;
    }
}
@media only screen and (max-width: 799px){
#sp1 {
    margin-top:70px;
}
#header .shop_header { height: 100%; }
#headerWrap.shop_header h1 img{ width: 50%!important; }
a#menu { margin: 0 1em; }
#mainnav li { padding:  0; }
#mainnav .cart{
    position: relative;
}
#mainnav .cart .cart_cnt{
    position: absolute;
    top: .25em;
    left: 10em;
}
#header .shop_header h1{
        display: flex;
        align-items: center;
        height: 56px;
        max-width: 90%;
        font-size: 1.2em;
        padding: .25em 0 0 0;
        margin-left: 1em;
}
#header .shop_header h1 img{ margin-right: .25em; }
#js_shopping_list{ display: block; border-top: solid 1px #999; }
#js_shopping_list thead,
#js_shopping_list tbody{ display: block; }
#js_shopping_list th,
#js_shopping_list td{ border: 0; padding: 0; }
#js_shopping_list tr > th:first-child,
#js_shopping_list tr > td:first-child{ 
    display:block;
    border: 0;
    padding-top: .5em;
}
#js_shopping_list tr > th:nth-child(2),
#js_shopping_list tr > td:nth-child(2),
#js_shopping_list tr > th:nth-child(3),
#js_shopping_list tr > td:nth-child(3),
#js_shopping_list tr > th:nth-child(4),
#js_shopping_list tr > td:nth-child(4){
    border: 0;
    display: inline-block;
    border-bottom: solid 1px #999;
    max-width: none;
    padding-bottom: .5em;
}

#js_shopping_list tr{
    width: 100%;
    display: block;
}
#js_shopping_list tr > th:nth-child(2),
#js_shopping_list tr > td:nth-child(2){ width: 14em; }
#js_shopping_list tr > th:nth-child(3),
#js_shopping_list tr > td:nth-child(3){ width: 6em; }
#js_shopping_list tr > th:nth-child(4),
#js_shopping_list tr > td:nth-child(4){ width: calc(100% - 20em); }
}
@media only screen and (max-width: 700px){
}

@media only screen and (max-width: 480px){
.col_right > ul.r_1 > li > ul.r_3 > li:last-child,
.col_right > ul.r_1 > li > ul.r_3 > li:first-child ,
.col_right > ul.r_3 > li{ width: calc(100% - 2em - 4px); }
.col_right > ul.r_1 > li > ul.r_3 > li:first-child img{
    margin: 0 auto;
    max-width: 180px;
}
}
@media only screen and (max-width: 460px){
#header .shop_header h1{
        height: 40px;
}
}