@charset "UTF-8";
/*
Theme Name: daiichibussan_ec
Theme URI: https://officepartner.synology.me/daiichibussan_ec
Author: the WordPress team
*/

/*--------------*/
/*-----共通-----*/
/*--------------*/
/*---タグ---*/
html,body{
   margin:0;
   font-size:1rem;
   color:rgb(60,60,60);
   font-family: 'Noto Sans JP', sans-serif;
   /* background-color: rgb(250,250,250); */

}
ul{padding:0;margin:0;list-style:none;}
p{padding:0;margin:0;}
a{text-decoration: none;color:rgb(60,60,60);}
h1,h2,h3,h4,h5{padding:0;margin:0;text-align: center;}
img{width:100%;height:auto;vertical-align: bottom;}
section{padding: 3% 0 0;}
section:nth-last-of-type(1){padding-bottom: 3%;}


/*---クラス---*/
.width44-percent{width: 44%;margin:0 auto;}
.width60-percent{width: 60%;margin:0 auto;}
.width90-percent{width: 90%;margin:0 auto;}

.heading2{
    text-align: center;
    padding-bottom: 3%;
}

/* input(type=number)のスピンボタンを非表示 */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

.ui-datepicker-calendar .day-sunday > a,
.ui-datepicker-calendar .day-holiday > a {
  background: #ffc0c0;
}
.ui-datepicker-calendar .day-saturday > a {
  background: #c0d0ff;
}

.ui-datepicker-calendar .day-sunday > span,
.ui-datepicker-calendar .day-holiday > span{
  background: #ffc0c0;
}
.ui-datepicker-calendar .day-saturday > span{
  background: #c0d0ff;
}

/*----------------*/
/*---header.php---*/
/*----------------*/
#header .wrapper{
    width: 95%;
    margin: 0 auto;
}

.cart-layer{
    background-color: rgb(126, 186, 214);
    width: 150px;
    color: rgb(255,255,255);
    text-align: center;
    padding: 0.5% 0;
    margin-left: auto;
}

.cart-layer img{width:30px;}

#shop-img{
    width: 300px;
    margin: 2% auto;
}

/* メニュー */
nav ul{
    display: flex;
    justify-content: center;
    background-color: rgba(255,255,255,0.9);
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    border-radius: 30px;
    padding: 0.5% 0;
    box-shadow:0 8px 10px 1px rgba(0,0,0,0.05),0 3px 14px 2px rgba(0,0,0,0.05),0 5px 5px -3px rgba(0,0,0,0.05);
}

nav ul li{
    padding: 0.5% 2%;
    border-right: 2px solid rgb(240, 240, 240);
}

nav ul li:nth-last-of-type(1){
    border-right: none;
}

nav ul .cart-img{
    width: 25px;
}


/*----------------*/
/*-front-page.php-*/
/*----------------*/
/* お知らせ */
#news .news-details{
    display: flex;
    justify-content: center;
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
    background-color: rgb(255,255,255);
    padding: 0 2%;
}
#news .news-details:nth-of-type(1){
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#news .news-details:nth-of-type(3){
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#news .news-details li{
    padding: 3% 2%;
    border-bottom: 1px dashed rgb(200,200,200);
}
#news .news-details:nth-last-of-type(1) li{
    border-bottom: none;
}

#news .news-details li:nth-of-type(1){
    width: 20%;
}
#news .news-details li:nth-of-type(2){
    width: 80%;
}

/* 商品一覧 */
#product .wrapper{
    max-width: 896px;
    width: 95%;
    margin: 0 auto;
}

#product .sort-btns{
    display: flex;
    justify-content: center;
    /* padding: 1% 2%; */
    white-space: nowrap;
    max-width: 300px;
    width: 80%;
    margin: 0 auto 3%;  
    background-color: rgb(255,255,255);  
    box-shadow:0 8px 10px 1px rgba(0,0,0,0.05),0 3px 14px 2px rgba(0,0,0,0.05),0 5px 5px -3px rgba(0,0,0,0.05);
    border-radius: 5px;
}

#product .sort-btns li{
    padding: 1% 2%;
    width: 50%;
    text-align: center;
    font-weight: normal;
    box-sizing: content-box;
    color: rgb(60,60,60);
}

#product .sort-btns li:hover{
    /* background-color: rgb(255, 125, 125);
    color: rgb(255,255,255);
    font-weight: bold; */
    cursor: pointer;
}

#product .sort-btns li.checked{
    background-color: rgb(255, 125, 125);
    color: rgb(255,255,255);
    font-weight: bold;
}

#product .sort-btns li:nth-of-type(1){
    border-right: 2px solid rgb(240,240,240);
}

#product .product-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#product .product-list li{
    width: 30%;
    margin-bottom: 2%;
    background-color: rgb(255,255,255);
    border: 1px solid rgb(191, 179, 138);
    padding: 1.5% 2% 3%;
    box-sizing: border-box;
    box-shadow:0 8px 10px 1px rgba(0,0,0,0.05),0 3px 14px 2px rgba(0,0,0,0.05),0 5px 5px -3px rgba(0,0,0,0.05);
    text-align: center;
}
#product .product-list li a{display: block;}
#product .product-list li a:hover{
    opacity: 0.7;
}

#product .product-list li div.product-img{
    height: 250px;
    position: relative;
}

#product .product-list li .product-img img{
    /* max-height: 200px; */
    display: block;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#product .product-list li div:not(.product-img){
    padding-top: 5%;
    border-top: 2px dashed rgb(230,230,230);
    text-align: left;
}

/* 送料が別途の旨を記載 */
#product .product-caution a{
    text-decoration: underline;
}

#product .product-caution a:hover{
    font-weight: bold;
}

/*--------------------*/
/*--page-privacy.php--*/
/*--------------------*/
#privacy h1{
    padding-bottom: 3%;
}
#privacy .wrapper{
    max-width: 1280px;
    width: 80%;
    margin: 0 auto;
}

#privacy .summary{
    padding-bottom: 2%;
}

#privacy ul li{
    padding-bottom: 30px;
}

#privacy ul li h2{
    text-align: left;
    font-size: 1.1rem;
}

#privacy ul li div{
    width: 98.6%;
    margin-left: auto;
}


/*--------------------*/
/*-page-userguide.php-*/
/*--------------------*/
#userguide h1{
    padding-bottom: 3%;
}

#userguide .wrapper{
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
}

#userguide ul li{
    /* padding-bottom: 30px; */
}

#userguide ul li h2{
    text-align: left;
    font-size: 1.1rem;
}

/* メニュー */
#userguide .userguide-menu{
    display: flex;
    justify-content: space-around;
    max-width: 1024px;
    width: 95%;
    margin: 0 auto;
}

#userguide .userguide-menu .each-link{
    width: 150px;
    height: 150px;
    text-align: center;
    position: relative;
    background-color: rgb(255,255,255);
    border-radius: 100px;
}

#userguide .userguide-menu .each-link a{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#userguide .userguide-menu .each-link a:hover{
    opacity: 0.7;
}

#userguide .userguide-menu .each-link img{
    width: 50%;
}


/* 各詳細情報 */
#page-userguide .userguide-detail .wrapper{
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    border-top: 5px solid rgb(230,230,230);
    padding-top: 3%;
}
#page-userguide .userguide-detail:nth-of-type(1) .wrapper{
    border-top: 1px solid rgb(230,230,230);
}
#page-userguide .userguide-detail ul{
    display: flex;
}
#page-userguide .userguide-detail ul li.item-name{
    width: 40%;
}
#page-userguide .userguide-detail ul li.detail-info{
    width: 60%;
}


/* 送料表（利用案内と特商法の表記ページに記載） */
.postage-table{
    display: flex;
    width: 90%;
}

.postage-table.postage-2line{
    padding-top: 1%;
}

.postage-table ul{
    width: 33.333333%;
    text-align: center;
    flex-direction: column;
    border: 2px solid rgb(200,200,200);
}
.postage-table ul:nth-of-type(2){
    border-left: none;
    border-right: none;
}

.postage-table ul li:nth-of-type(1){
    background-color: rgb(168, 202, 255);
    color: rgb(255,255,255);
    font-weight: bold;
}


/*--------------------*/
/*-page-tokushoho.php-*/
/*--------------------*/
#tokushoho h1{
    padding-bottom: 3%;
}

#tokushoho .wrapper{
    max-width: 1280px;
    width: 80%;
    margin: 0 auto;
}

#tokushoho ul li{
    padding-bottom: 30px;
}

#tokushoho ul li h2{
    text-align: left;
    font-size: 1.1rem;
}
#tokushoho ul li div{
    width: 98.6%;
    margin-left: auto;
}

/* 送料表 */
#tokushoho .postage-table{
    width: 400px;
    margin-left: 1.5%;
}

#tokushoho .postage-table ul li{
    padding-bottom: 0;
}

/*---------------------*/
/*-single-products.php-*/
/*---------------------*/
#product-details .pamphlet{
    max-width: 1280px;
    width: 95%;
    margin: 0 auto;
}

/* カートに入れる */
.add-cart-layer{
    max-width: 500px;
    width: 80%;
    margin: 0 auto 50px;
    background-color: rgb(255,255,255);
    padding: 50px 0;
    box-shadow:0 8px 10px 1px rgba(0,0,0,0.05),0 3px 14px 2px rgba(0,0,0,0.05),0 5px 5px -3px rgba(0,0,0,0.05);
}
.add-cart-layer .wrapper{
    width: 250px;
    margin: 0 auto;
}
.add-cart-layer .add-quantity{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.add-cart-layer .add-quantity input{
    font-size: 1.1rem;
    width: 80px;
}
.add-cart-layer img{
    width: 30px;
}
.add-cart-layer .add-cart-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(255,255,255);
    background-color: rgb(30,203,175);
    border-radius: 5px;
    padding: 5% 0;
}
.add-cart-layer .add-cart-btn:hover{
    opacity: 0.8;
    cursor: pointer;
}

.add-cart-layer .required-num{
    display: none;
    color:red;
}


/*-------------------*/
/*---page-cart.php---*/
/*-------------------*/
#page-cart{
    font-size: 1.1rem;
}
#page-cart .wrapper{
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 100px;
}
#page-cart .note{
    text-align: center;
    margin-top: 3%;
}
#page-cart .cart-product{
    display: flex;
    align-items: center;
    width: 85%;
    margin: 0 auto;
    border-bottom: 2px dashed rgb(230,230,230);
    padding: 1% 0;
}

#page-cart .cart-product li:nth-of-type(1){
    text-align: center;
    width: 20%;
}
#page-cart .cart-product li:nth-of-type(2){
    width: 20%;
}
#page-cart .cart-product li:nth-of-type(3){
    width: 23%;
    text-align: center;
}
#page-cart .cart-product li:nth-of-type(4){
    width: 20%;
}
#page-cart .cart-product li:nth-of-type(5){
    width: 17%;
}

#page-cart .cart-product li img{
    width: 50%;
}
#page-cart .cart-product li input{
    width: 50px;
    padding: 2% 0%;
    font-size: 1.1rem;
    text-align: center;
}
#page-cart .cart-product li.cart-product-name a{
    text-decoration: underline;
}
#page-cart .cart-product li a:hover{
    opacity: 0.8;
}

#page-cart .process-btns .orde-go-btn a:hover{
    cursor: pointer;
}

/* 数量更新ボタン */
#page-cart .cart-product li .num-updete-btn{
    background-color: rgb(230,230,230);
    border: 2px solid rgb(200,200,200);
    padding: 1% 5%;
    margin-left: 2%;
}
#page-cart .cart-product li .num-updete-btn:hover{
    cursor: pointer;
    opacity: 0.8;
}
#page-cart .cart-product li .input-error{
    display: none;
    color:red;
    font-size:0.8rem;
}
/* 削除ボタン */
#page-cart .cart-product .cart-delete-btn div{
    width: 80%;
    margin: 0 auto;
    padding: 5% 0;
    text-align: center;
    background-color: rgb(217, 67, 67);
    color: rgb(255,255,255);
}
#page-cart .cart-product .cart-delete-btn div:hover{
    cursor: pointer;
    opacity: 0.8;
}

#page-cart .process-btns{
    display: flex;
    justify-content: center;
    margin-top: 3%;

}

#page-cart .process-btns li{
    margin: 0 2%;
    width: 250px;
    text-align: center;
}

/* 注文に進む */
#page-cart .orde-go-btn{
    background-color: rgb(65, 176, 217);
}
#page-cart .orde-go-btn a{
    color: rgb(255,255,255);
    display: block;
    padding: 7% 0;
}

#page-cart .orde-go-btn a:hover{
    opacity: 0.7;
}

/* 商品一覧に戻る */
#page-cart .home-back-btn{
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(230,230,230);
    color: rgb(60,60,60);
}
#page-cart .home-back-btn a{
    display: block;
    padding: 7% 0;
}

#page-cart .home-back-btn a:hover{
    opacity: 0.8;
}


div.step-layer{
    max-width: 850px;
    width: 95%;
    margin: 3% auto 0;
}
ul.step {
    list-style: none;
    padding-left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
ul.step li {
    text-align: center;
    border: solid 2px rgb(0, 161, 255);
    width: 32%;
    margin-right: 1%;
    padding: 5px 0;
}
ul.step li.active {
    background: rgb(0, 161, 255);
    color: #fff;
    font-weight: bold;
}

/*---------------*/
/*-page-orde.php-*/
/*---------------*/
.all-notice{
    text-align:center;margin-top: 1%;
}
/* ---ページ内共通--- */
#order-form{font-size: 1.1rem;}
#order-form .delivery-info-layer .product-name{
    text-align: center;
}

#order-form .delivery-info-layer .product-name span{
    display: inline-block;
    border-bottom: 4px solid rgb(168, 202, 255);
}

#order-form h2{
    text-align: left;
    border-left: 5px solid rgb(67,103,146);
    padding-left: 3%;
    max-width: 500px;
}

#order-form .input-column{
    margin-top: 5px;
    border: 3px solid rgb(230,230,230);
    border-top: 3px solid rgb(67,103,146);
    padding: 1% 2%;
}
#order-form input{
    padding: 1% 2%;
    font-size: 1.1rem;
    border: 2px solid rgb(230,230,230);
    border-radius: 5px;
}
/* ご依頼主（ご請求先）にお届けした場合の表示 */
#order-form input:read-only{
    outline: none;
    border: none;
}

#order-form input.readonly:focus{
    outline: none;
}

#order-form input[type="radio"]{
    margin-left: 0;
}
#order-form input[name="method_detail"]:hover{
    outline: none;
}

#order-form select{
    padding: 1% 2%;
    font-size: 1.1rem;
    border: 2px solid rgb(230,230,230);
    border-radius: 5px;
}


#order-form .error-mess{
    display: none;
    color: red;
}

/* 項目デザイン */
#order-form .input-items{
    display: flex;
    /* margin: 10px 0; */
    border-bottom: 2px solid rgb(230,230,230);
    padding: 0.5% 0;
}
#order-form .input-items:nth-last-of-type(1){
    border-bottom: none;
}
#order-form .input-items li.items-title{
    display: flex;
    align-items: center;
    white-space: nowrap;
}

#order-form .input-items li .items-flex{
    display: flex;
}

#order-form .input-items.delivery-date li .items-flex{
    display:block;
}

#order-form .input-items.delivery-date li .items-flex .date-no-select,
#order-form .input-items.delivery-date li .items-flex .date-yes-select{
    display: inline;
}

#order-form .input-items.delivery-date li .items-flex .date-input-layer{
    font-size: 1rem;
}


/* 都道府県 */


/* 配送時間、のし */
#order-form .input-items.delivery-time,
#order-form .input-items.noshi{
    align-items: flex-start;
}
#order-form .input-items.postal-code input{
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

/* 配達希望日入力欄 */
#order-form .input-items.delivery-date .items-flex div:nth-last-of-type(1){
    display: none;
}

/* 配達希望時間 */
#order-form .input-items.delivery-time li {
    display: flex;
}
#order-form .input-items.delivery-time li .radio-btn-layer{
    margin-left: 19px;
    display: flex;
    align-items: center;
    justify-content: left;
}
#order-form .input-items.delivery-time li .radio-btn-layer div{
    margin-right: 3%;
    white-space: nowrap;
}

/* 注文個数 */
#order-form .input-items.order-quantity li:nth-of-type(2){
    /* display:inherit; */
}

/* のし */
#order-form .input-items.noshi li .noshi-detail-layer{
    margin-left: 19px;
    /* display: flex;
    align-items: center;
    justify-content: left; */
}
#order-form .input-items.noshi li .noshi-detail-layer div{
    margin-right: 15px;
    white-space: nowrap;
}

/* のし記載文字入力欄 */
#order-form .input-items.noshi li .noshi-detail-layer .noshi-name{
    display: none;
}
#order-form .input-items.noshi li .noshi-detail-layer .noshi-type{
    display: none;
}

#order-confirm .input-items.noshi li .noshi-detail-layer .noshi-name{
    display: block;
}
#order-confirm .input-items.noshi li .noshi-detail-layer .noshi-type{
    display: block;
}

/* 配達希望日 */
#order-form .input-items.delivery-date div:nth-of-type(1),
#order-form .input-items.delivery-date div:nth-of-type(2),
#order-form .input-items.delivery-date div:nth-of-type(3){
    margin-right: 15px;
}
#order-form .input-items.delivery-date div:nth-of-type(3){
    /* white-space:nowrap; */
}

#order-form .input-items li:nth-of-type(1){
    width: 300px;
}

/* 記入例 */
#order-form .input-items .example{
    color: rgb(150,150,150);
    font-size: 1rem;
}
/* 必須 */
#order-form .required,
#order-form .any{
    display: block;
    color: rgb(255,255,255);
    border-radius: 5px;
    width: 45px;
    text-align: center;
    margin-right: 2%;
}
/* 必須 */
#order-form .required{
    background-color: rgb(212, 38, 38);
}
/* 任意 */
#order-form .any{
    background-color: rgb(63, 77, 209);
}

/* ご依頼主（ご請求先）情報 */
#order-form .client-info,
#order-form .delivery-info,
#order-form .payment-method-info,
#order-form .payment-info{
    max-width: 1280px;
    width: 95%;
    margin: 0 auto;
    border-radius: 20px;
    padding: 1% 2%;
    box-sizing: border-box;
}

#order-form .delivery-info{
    display: none;
}

/* 入力欄増減ボタン */
.plus-minus-btn{
    display: flex;
    justify-content: space-around;
    max-width: 300px;
    width: 80%;
    margin: 0 auto;
}
.plus-minus-btn li{
    width: 150px;
    margin: 0 2%;
}
.plus-minus-btn li:hover{
    opacity: 0.7;
    cursor: pointer;
}
.plus-minus-btn li div{
    text-align:center;
    border-radius: 10px;
    padding: 5% 0;
    color: rgb(255,255,255);

}
.plus-minus-btn li#plus-btn div{
    background-color:rgb(58,171,210);
}
.plus-minus-btn li#minus-btn div{
    background-color:rgb(223,86,86);
}


/* 入力欄増加できない理由を表示 */
.no-plus-mess{
    /* display: none; */
    text-align: center;
    color: rgb(255,0,0);
}

/* ---各商品のお届け情報--- */
.notice{
    text-align: center;
    margin-top: 2%;
}
/* 届け先が依頼主か否かラジオボタン */
.delivery-location{
    display: flex;
    justify-content: center;
    padding-top: 1%;
}

.delivery-location li{
    margin: 0 2%;
}

/* 商品名 */
.delivery-info-layer,.client-info-layer,
.payment-method-layer,.payment-layer{
    background-color: rgb(255,255,255);
    width: 85%;
    margin: 1.5% auto 0;
    border-radius: 5px;
    padding: 1% 0;
}
.delivery-info-layer{
    margin-bottom: 3%;
}
.delivery-info-layer .product-name{
    font-size: 1.5rem;
}

#order-form .client-info-input h2{
    border-bottom: 3px solid rgb(230,230,230);
}

/* 確認ボタン */
#order-form .confirm-btn,
#order-form .back-cart-btn{
    display: block;
    width: 200px;
    margin: 0 auto;
    background-color: rgb(142, 209, 204);
    color: rgb(255,255,255);
    text-align: center;
    border-radius: 10px;
    padding: 1% 0;
    margin-top: 2%;
}

#order-form .back-cart-btn{
    background-color: rgb(200, 200, 200);
}

#order-form .confirm-btn:hover,
#order-form .back-cart-btn:hover{
    cursor: pointer;
    opacity: 0.8;
}


/* 支払額 */
.payment-info h3{
    text-align: center;
}

.payment-info .payment-list{
    max-width: 500px;
    width: 90%;
    margin: 3% auto 0;
}
.payment-info .payment-list ul{
    display: flex;
    border-bottom: 1px solid rgb(230,230,230);
    padding: 1% 0;
}
.payment-info .payment-list ul li{
    width: 50%;
}

.payment-info .payment-list ul li:nth-of-type(1){
    text-align: center;
}

.payment-info .payment-list ul li:nth-of-type(2){
    text-align: right;
}

.payment-info .payment-list .total-total-price{
    border-top: 3px solid rgb(230,230,230);
    border-bottom: none;
}

.payment-method-layer #method-detail,
.payment-method-layer input[name="method_detail"],
.payment-method-layer #shipping-method{
    font-size: 1.2rem!important;
    font-weight: bold;
}


/* 数量更新 */
#order-form .input-items .num-update-btn{
    white-space: nowrap;
    margin-left: 10%;
    padding: 0.5% 3%;
    background-color: rgb(240,240,240);
    border-radius: 2px;
    border: 2px solid rgb(210,210,210);
}

#order-form .input-items .num-update-btn:hover{
    cursor: pointer;
    opacity: 0.8;
}

/* 注文個数 */
#order-form .input-items .quantity-error{
    /* display: none; */
}



/*-----------------------*/
/*-page-orde_confirm.php-*/
/*-----------------------*/
#order-confirm input{
    border: none;
}


#order-confirm .delivery-info{
    display: block;
}


/* 戻る確定ボタン */
#order-confirm .comp-back-btns{
    display: flex;
    justify-content: center;
    margin-top: 3%;
}

#order-confirm .comp-back-btns li{
    margin: 0 2%;
    width: 150px;
    text-align: center;
    background-color: #fff;
    padding: 0.5% 0;
    border-radius: 5px;
}

#order-confirm .comp-back-btns li:hover{
    cursor: pointer;
    opacity: 0.7;
}

#order-confirm .comp-back-btns .complete-btn{
    background-color: rgb(65, 176, 217);
    color: rgb(255,255,255);
}

#order-confirm .comp-back-btns .back-btn{
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(230,230,230);
    color: rgb(60,60,60);
}


#order-confirm .input-items.delivery-time li .radio-btn-layer,
#order-confirm .input-items.noshi li .noshi-detail-layer{
    margin-left: 0;
}


/* のし記載文字入力欄 */
#order-confirm .input-items.noshi li{
    white-space: nowrap;
}
#order-confirm .input-items.noshi li .noshi-detail-layer div:nth-last-of-type(1){
    display: block;
    margin-left: 3%;
}

/*----------------*/
/*---footer.php---*/
/*----------------*/
/* 上部に戻るアイコン */
.fixed-right-bottom{
    position: fixed;
    bottom: 3%;
    right: 2%;
    width: 80px;
}

.fixed-right-bottom a:hover{
    opacity: 0.8;
}

/* footer */
#footer{
   text-align: center;
   background-color: rgb(60,60,60);
   color: rgb(255,255,255);
   padding: 2% 0;
}

#footer ul{
    display: flex;
    justify-content: center;
    width: 100%;
}

#footer ul.company-info{
    margin-top: 1%;
}

#footer ul.footer-row2{
    margin-top: 0.5%;
}

#footer ul li{
    padding: 0 2%;
}

#footer ul li a{
    color: rgb(255,255,255);
    text-decoration: underline;
    white-space: nowrap;
}

#footer .copyright{
    margin-top: 3%;
}

@media screen and (max-width: 1280px){
    /*1280pxまでの処理*/
    /*---------------*/
    /*-page-orde.php-*/
    /*---------------*/
    .delivery-info-layer,
    .client-info-layer,
    .payment-method-layer,
    .payment-layer
    {
        width: 95%;
    }
    #order-form .input-items.delivery-time li .radio-btn-layer{
        flex-wrap: wrap;
        width: 400px;
    }
}

@media screen and (max-width: 1024px){
    /*1024pxまでの処理*/
    /*----------------*/
    /*---header.php---*/
    /*----------------*/
    .header-top div h1 span{
        font-size: 1.2rem;
    }

    .header-top div{
        width: 100%;
    }

    /* .header-top .menu ul li a span{
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: none;
        transform: none;
        width: 100%;
        line-height: 1.5rem;
    } */

    /*---ハンバーガーメニュー---*/
    /*
    nav.menu.active{
        transform: translateX(0%);
    }

    nav.menu{
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        background: #fff;
        color: #000;
        text-align: center; 
        width: 100%;
        transform: translateX(100%);
        transition: all 0.6s;
        height: 100vh!important;
    }

    nav.menu ul{
        background: rgb(245,245,245);
        width: 100%;
        height: 100vh;
        margin: 0 auto;
        padding: 0;
        display: block;
        flex-direction: column;
        position: static!important;
        left: auto!important;
        top: auto!important;
        -webkit-transform: none!important;
        transform: none!important;
        justify-content: flex-start!important;
        padding-top: 60px!important;
        overflow: scroll;
    }

    nav.menu ul li{
        font-size: 1.1rem;
        list-style-type: none;
        padding: 0;
        width: 100%!important;
        border-bottom: 1px dotted rgb(200,200,200);
    }

    nav.menu ul li:last-child{
        padding-bottom: 0;
        border-bottom: none;
    }

    nav.menu ul li a{
        display: block;
        color: rgb(60,60,60);
        padding: 1em 0;
        width: 100%;
    }

    .header-top .menu ul li a:hover{
        background-color: rgba(255,255,255,0.2);
    }

    nav.menu ul li a span{
        position: static!important;
    }

    .Toggle {
        display: block;
        position: fixed;
        right: 13px;
        top: 12px;
        width: 42px;
        height: 42px;
        cursor: pointer;
        z-index: 11;
    }

    .Toggle span {
        display: block;
        position: absolute;
        width: 30px;
        border-bottom: solid 3px #000;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 6px;
    }

    .Toggle span:nth-child(1) {
        top: 12px;
    }

    .Toggle span:nth-child(2) {
        top: 23px;
    }

    .Toggle span:nth-child(3) {
        top: 34px;
    }

    .Toggle.active span:nth-child(1){
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .Toggle.active span:nth-child(2),
    .Toggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    */


    /*-------------------*/
    /*---page-cart.php---*/
    /*-------------------*/
    #page-cart .cart-product{
        width: 95%;
    }


    /*-------------------*/
    /*---page-orde.php---*/
    /*-------------------*/
    /* #order-form .input-items.noshi li:nth-of-type(2){
        width: 400px;
        flex-wrap: wrap;
        align-items: flex-start;
    } */
    #order-form .input-items.noshi li .noshi-detail-layer{
        width: 400px;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

@media screen and (max-width: 896px){
    /*896pxまでの処理*/
    html,body{
        font-size: 3vw;
    }

    /*--------------------*/
    /*---front-page.php---*/
    /*--------------------*/
    /* -お知らせ- */
    #news .news-details{
        font-size: 0.8rem;
    }

    #news .news-details li{
        padding: 2% 1%;
    }

    /*--------------------*/
    /*-page-userguide.php-*/
    /*--------------------*/
    /* サブメニュー */
    #userguide .userguide-menu{
        width: 95%;
        font-size: 0.8rem;
        flex-wrap: wrap;
    }
    #userguide .userguide-menu .each-link{
        width: 22vw;
        height: 22vw;
    }
    #userguide .userguide-menu .each-link img{
        width: 40%;
    }

    /* 各種詳細 */
    #page-userguide .userguide-detail ul{
        flex-direction: column;
    }
    #page-userguide .userguide-detail ul li.item-name{
        width: 100%;
    }
    #page-userguide .userguide-detail ul li.detail-info{
        width: 100%;
    }

    #page-userguide .userguide-detail ul li h2{
        margin-bottom: 3%;
    }


    /*--------------------*/
    /*--page-privacy.php--*/
    /*--------------------*/
    #product .product-list li{
        width: 48%;
    }
    #product .product-list li div.product-img{
        height: 45vw;   
    }

    /*-------------------*/
    /*---page-cart.php---*/
    /*-------------------*/
    #page-cart{
        font-size: 0.85rem;
    }

    #page-cart .cart-product li input{
        font-size: 0.85rem;
    }

    /* 注文に進む、商品一覧に戻るボタン */
    #page-cart .process-btns li{
        width: 23vw;
    }

    /*-------------------*/
    /*---page-orde.php---*/
    /*-------------------*/
    .all-notice{
        text-align:left;
    }
    #order-form{
        font-size: 2.3vw;
    }
    #order-form input,#order-form select{
        font-size: 2.3vw;
    }
    

    #order-form .input-items li:nth-of-type(1){
        width: 30vw;
    }

    #order-form .input-items li:nth-of-type(2) input:not(input[type="radio"]){
        width: 20vw;
    }

    #order-form .input-items.delivery-time li .radio-btn-layer{
        width: 40vw;
    }
    #order-form .input-items.noshi li .noshi-detail-layer{
        width: 40vw;
    }

    #order-form .input-items.delivery-date li .items-flex .date-input-layer{
        font-size: 2vw;
    }

    #order-form .confirm-btn,
    #order-form .back-cart-btn{
        width: 25vw;
        margin: 0 auto;
        background-color: steelblue;
        color: rgb(255,255,255);
        border: 2px solid rgb(230,230,230);
        text-align: center;
        border-radius: 10px;
        padding: 1% 0;
        margin-top: 2%;
    }

    .payment-method-layer #method-detail,
    .payment-method-layer input[name="method_detail"],
    .payment-method-layer #shipping-method{
        font-size: 3vw!important;
    }

   
}

@media screen and (max-width: 480px){
    /*480pxまでの処理*/
    html,body{
        font-size: 3.33333vw;
    }
    /*----------------*/
    /*---header.php---*/
    /*----------------*/
    #shop-img{
        width: 50%;
    }

    /* メニュー */
    nav ul .cart-img{
        width: 5vw;
    }
    /*--------------------*/
    /*---front-page.php---*/
    /*--------------------*/
    /* -お知らせ- */
    #news .news-details{
        flex-direction: column;
        font-size: 1rem;
    }
    #news .news-details li:nth-of-type(1){
        width: 100%;
        border-bottom: none;
        padding-bottom: 0;
    }
    #news .news-details li:nth-of-type(2){
        width: 100%;
        padding: 1% 1% 2%;
    }

    /*--------------------*/
    /*--page-privacy.php--*/
    /*--------------------*/
    #privacy .wrapper{
        width: 95%;
        font-size: 3.8vw;
    }

    #privacy ul li h2{
        font-size: 1.2rem;
    }

    /*--------------------*/
    /*--page-userguide.php--*/
    /*--------------------*/
    #userguide .userguide-menu{
        width: 100%;
        font-size: 1rem;
    }
    #page-userguide #userguide .wrapper{
        width: 95%;
    }
    #userguide .userguide-menu .each-link{
        width: 28vw;
        height: 28vw;
    }
    #page-userguide .userguide-detail{
        font-size: 1.1rem;
    }
    #page-userguide .userguide-detail .postage-table{
        width: 100%;
    }
    
    /*---------------------*/
    /*-single-products.php-*/
    /*---------------------*/
    .add-cart-layer{
        padding: 5% 0;
    }

    .add-cart-layer img{
        width: 5vw;
    }

    .add-cart-layer .add-cart-btn{
        width: 50vw;
        margin: 0 auto;
    }


    /*--------------------*/
    /*-page-tokushoho.php-*/
    /*--------------------*/
    #tokushoho .wrapper{
        width: 95%;
    }

    /*-------------------*/
    /*---page-cart.php---*/
    /*-------------------*/
    #page-cart{
        font-size: 1.1rem;
    }

    #page-cart .cart-product{
        flex-wrap: wrap;
    }

    /* 商品表示パターン1 */
    #page-cart .cart-product li:nth-of-type(1){
        width: 100%;
    }
    #page-cart .cart-product li:nth-of-type(1) img{
        width: 25%;
    }
    #page-cart .cart-product li:nth-of-type(2){
        width: 100%;
    }
    #page-cart .cart-product li:nth-of-type(3){
        width: 100%;
        text-align: center;
    }
    #page-cart .cart-product li:nth-of-type(4){
        width: 100%;
        text-align: center;
    }
    #page-cart .cart-product li:nth-of-type(5){
        width: 60%;
        margin: 0 auto;
    }

    /* 商品表示パターン2 */
    #page-cart .cart-product li:nth-of-type(1){
        width: 11%;
    }
    #page-cart .cart-product li:nth-of-type(1) img{
        width: 95%;
    }
    #page-cart .cart-product li:nth-of-type(2){
        width: 31%;
    }
    #page-cart .cart-product li:nth-of-type(3){
        width: 28%;
        text-align: center;
    }
    #page-cart .cart-product li:nth-of-type(4){
        width: 30%;
        text-align: center;
    }
    #page-cart .cart-product li:nth-of-type(5){
        width: 35%;
        margin: 2% auto 0;
    }

    #page-cart .cart-product li input{
        font-size: 1.1rem;
        width: 9vw;
    }
    #page-cart .process-btns li {
        width: 30vw;
    }
    
    #order-form .input-items.delivery-date li .items-flex .date-input-layer{
        font-size: 3.5vw;
    }


    /*-------------------*/
    /*---page-orde.php---*/
    /*-------------------*/
    /* 状態 */
    ul.step {
        font-size: 2.8vw;
    }

    #order-form{
        font-size: 3.7vw;
    }
    #order-form input,
    #order-form select{
        font-size: 3.7vw;
    }
    #order-form .input-items{
        flex-direction: column;
    }

    #order-form .input-items li:nth-of-type(1){
        width: 100%;
    }
    #order-form .input-items li:nth-of-type(2){
        width: 100%;
        margin-top: 2%;
    }
    #order-form .input-items li:nth-of-type(2) input:not(input[type="radio"],.order-quantity-input){
        width: 70vw;
        
    }
    #order-form .input-items.noshi li .noshi-detail-layer div{
        white-space: normal;
    }
    #order-form .input-items.delivery-time li .radio-btn-layer,
    #order-form .input-items.noshi li .noshi-detail-layer{
        margin-left: 0;
        width: 100%;
    }

    .plus-minus-btn{
        width: 100%;
    }

    .plus-minus-btn li{
        width: 35w;
    }

    #order-form .confirm-btn,
    #order-form .back-cart-btn{
        width: 35vw;
        padding: 2% 0;
    }

    .payment-method-layer #method-detail,
    .payment-method-layer input[name="method_detail"],
    .payment-method-layer #shipping-method{
        font-size: 4vw!important;
    }


    /* #order-form input{
        font-size: 2.3vw;
    }

    #order-form .input-items li:nth-of-type(1){
        width: 26vw;
    }

    #order-form .input-items li:nth-of-type(2) input:not(input[type="radio"]){
        width: 20vw;
    }

    #order-form .input-items.delivery-time li .radio-btn-layer{
        width: 40vw;
    }
    #order-form .input-items.noshi li .noshi-detail-layer{
        width: 40vw;
    } */

    /*----------------*/
    /*---footer.php---*/
    /*----------------*/
    footer{
        font-size: 3vw;
    }
    .fixed-right-bottom{
        width: 15vw;
    }
}