@charset "utf-8";

/* ------------------------------------------------------------ common */
#fv { background: url(../images/common/fv.jpg) no-repeat center center; background-size: cover; }

#users input[type="text"],
#users input[type="password"] { padding: 5px 0; text-indent: 0.5em; }
#users .btn-pink { padding: 60px 0 0; }
#users .btn-pink a {  display: block; text-align: center; background: #ce4f4f; color: #fff; width: 250px; padding: 8px 0; margin: auto; font-size: 18px;
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px;	
}
.btn-pink a img { margin-right: 10px; }

.btn-green { padding: 60px 0 0; }
.btn-green a {  display: block; text-align: center; background: #86cdc7; color: #fff; width: 250px; padding: 15px 0; margin: auto; font-size: 14px;
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px;	
}
.btn-green a img { margin-right: 10px; }

.complete { text-align: center; font-size: 20px; padding: 30px 0; }


/* ------------------------------------------------------------ レイアウト */

#users #body { padding: 70px 0 100px; }
#users #body #cside { width: 250px; float: left; }
#users #body #cside h3 { font-size: 34px; font-family: 'AlternateGothicEF_NoTwo'; text-align: center; letter-spacing: 2px; padding: 0 0 10px; }
#users #body #cside ul li { border-top: 1px solid #d2d2d2; }
#users #body #cside ul li.history { background: url(../images/mypage/nav_01.png) no-repeat 5px center; background-size: 25px; }
#users #body #cside ul li.address { background: url(../images/mypage/nav_02.png) no-repeat 6px center; background-size: 18px; }
#users #body #cside ul li.info { background: url(../images/mypage/nav_03.png) no-repeat 4px center; background-size: 23px; }
#users #body #cside ul li.logout { background: url(../images/mypage/nav_04.png) no-repeat 6px center; background-size: 24px; }

#users #body #cside ul li:first-child { border-top: 1px solid #ccc; }
#users #body #cside ul li a { display: block; padding: 35px 0 35px 50px; font-size: 16px; font-family: 'Noto-Sans-JP-Medium'; }


#users #body #mypage { width: 800px; float: right; }
#users #body #mypage h3 { font-size: 26px; padding: 0 0 23px; text-align: center; font-family: 'Noto-Sans-JP-Medium';}
#users #body #mypage #address p.alert { text-align: center; }
#users #body #mypage #address p.alert span { display: block; font-size: 16px; padding: 0 0 8px; }

#mypage .regi { border-bottom: 1px solid #000; border-top: 1px solid #000; padding: 55px 35px; }
#mypage .empty { text-align: center; font-size: 18px; }

/* ------------------------------------------------------------  */


#info .submit,
#password .submit { text-align: center; padding: 50px 0 0; }
#info .submit input[type="submit"],
#info .submit a,
#password .submit input[type="submit"],
#password .submit a { display: inline-block; *display: inline; *zoom: 1; text-align: center; color: #fff; height: 60px; line-height: 60px; margin: auto; font-size: 14px; margin: 0 10px; }
#info .submit input[type="submit"],
#password .submit input[type="submit"] { background: #000; width: 250px; }
#info .submit a,
#password .submit a { background: #b5b5b5; width: 250px; }

#info .alert,
#password .alert { border: 1px solid #fb2f2f; background: #fbcdcd; text-align: center; padding: 20px; margin: 20px 0; }
#info .alert span,
#password .alert span { display: block; }
#info .fin,
#password .fin { font-size: 16px; text-align: center; padding: 50px 0; }

/* ------------------------------------------------------------ login */

#login { padding: 80px 0 90px; color: #191919; background: #efefef; }
#login .alert { text-align: center; color: #c96800; font-size: 14px; padding: 0 0 10px; }
#login .entrance { width: 1000px; margin: 0 auto;}
#login .entrance li { float: left; background: #fff; width: 490px; height: 415px; }
#login .entrance li:first-child { margin: 0 20px 0 0;}
#login .entrance li h3 { text-align: center;  font-size: 26px; padding: 45px 0 20px; font-family: 'Noto-Sans-JP-Medium';}
#login .entrance li.member h3 { padding: 45px 0 26px; }
#login .entrance li .box { padding: 0 55px; }
#login .entrance li .box p.asterisk { font-size: 11px; padding: 0 0 15px;}
#login .entrance li .box p.text { text-align: center; font-size: 16px; padding: 0 0 15px;}
#login .entrance li .box table { width: 100%;}
#login .entrance li .box table tr th { width: 130px; padding: 0 0 15px; font-size: 16px; font-family: "Lato","游ゴシック体","Noto Sans Japanese","ヒラギノ角ゴ Pro w3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", "Arial", sans-serif; font-weight: bold; }
#login .entrance li .box table tr td { padding: 0 0 15px;}
#login .entrance li .box table tr td input[type="text"],
#login .entrance li .box table tr td input[type="password"] { width: 240px; padding: 5px; border: 1px solid #bfbfbf; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;}
#login .entrance li .box a.forget { text-decoration: underline; display: block; text-align: center; font-size: 14px; margin: 2px 0 0;}
#login .entrance li p.btn a { font-size: 16px;}

#login .entrance li p.btn { padding: 28px 0 0;}
#login .entrance li.member p.btn input[type="submit"] { background: url(../images/mypage/arw.png) 94% center no-repeat #353535; background-size: 15px; width: 390px; line-height: 70px; color: #fff; text-align: center; font-size: 20px;}



#login .entrance li.first .box div { padding: 20px 30px 61px; border-top: 1px solid #000; }
#login .entrance li.first .box div p { font-size: 16px; padding: 0 0 5px;}
#login .entrance li.first .box div p img { padding: 0 10px 0 0;}
#login .entrance li.first p.btn { padding: 0;}
#login .entrance li.first p.btn a { background: #063c5d; width: 390px; line-height: 70px; text-align: center; margin: 0 auto; font-size: 18px; color: #fff;}

/* ------------------------------------------------------------ history */

ul#menu_nav { padding: 55px 0 85px;}
ul#menu_nav li { display: inline-block; *display: inline; *zoom: 1; text-align: center; padding: 5px 0; background: #e2e2e2; }
ul#menu_nav li a { font-size: 16px; display: inline-block; *display: inline; *zoom: 1; width: 199px; padding: 10px 0; border-left: 1px solid #a0a0a0;}
ul#menu_nav li:first-child a { border: none;}
ul#menu_nav li a img { padding: 0 15px 0 0;}

#history h2 { background: url(../images/users/history/bg.gif) bottom repeat-x; padding: 0 0 20px;}
#history h2 span { font-size: 14px; line-height: 100%; display: inline-block; *display: inline; *zoom: 1; vertical-align: bottom; padding: 0 0 0 10px;}

#history p.order_number { font-size: 14px; color: #fff; background: #000; padding: 10px 0 10px 20px;}
#history p.condition { line-height: 95px; text-align: center; }
#history .detail .top_detail { border-bottom: 1px solid #000; border-top: 1px solid #000; padding: 25px 0 40px; }
#history .detail .top_detail p { font-size: 15px; }
#history .detail h5 { font-size: 17px; font-family: 'Noto-Sans-JP-Bold'; padding: 0 0 5px; }
#history .detail .info1 { float: left; width: 364px; padding: 0 30px 0 0; border-right: 1px solid #000; min-height: 155px; }
#history .detail .info1 p.address { padding: 0 0 20px; }

#history .detail .info2 { float: left; width: 134px; padding: 0 25px; border-right: 1px solid #000; min-height: 155px; }
#history .detail .info3 { float: left; width: 165px; padding: 0 20px 0 25px; min-height: 155px; }

#history .detail .order { padding: 25px 0 30px; }
#history .detail .order dt { float: left; font-size: 15px; }
#history .detail .order dd { float: right; font-size: 15px; }
#history .detail .order .total { padding: 25px 0 0; }
#history .detail .order .total dt { padding: 10px 0 0; }
#history .detail .order .total dd { font-size: 25px; color: #b90000; font-family: 'Noto-Sans-JP-Medium';}
#history .box { margin: 0 0 115px;}
#history .box ul li { padding: 10px; background: #f4f4f4; }
#history .box ul li .item_wrapper { float: left; width: 615px;}
#history .box ul li .image_box { float: left; }
#history .box ul li .item_detail { float: left; width: 455px; padding: 0 0 0 20px; }
#history .box ul li .item_detail h4 { font-size: 16px; font-family: 'Noto-Sans-JP-Bold'; padding: 5px 0; }
#history .box ul li .item_detail dl { font-size: 15px; }
#history .box ul li .item_detail dt { float: left; padding: 0 0 5px; }
#history .box ul li .item_detail dd { float: left; padding: 0 0 5px; }
#history .box ul li .item_link { float: left; width: 165px; }
#history .box ul li .item_link a { width: 140px; margin: 30px auto 0; line-height: 35px; background: url(../images/mypage/arrow.png) no-repeat 94% center #767678; color: #fff; display: block; text-align: center; border-radius: 20px; }




#history-empty { padding: 0 0 100px; }
#history-empty h3 { padding: 165px 0; text-align: center; font-size: 24px; }


/* ------------------------------------------------------------ address */

#address .make { padding: 0 0 20px; text-align: right; border-bottom: 1px solid #e0e0e0;}
#address .make a { background: #77a648; display: inline-block; *display: inline; *zoom: 1; text-align: center; font-size: 14px; color: #fff; height: 30px; line-height: 30px; padding: 0 10px; }
#address .block { border-bottom: 1px solid #e0e0e0; padding: 45px 0; margin: 0 0 20px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 16px; }
#address .block h4 { font-size: 17px; padding: 0 0 5px; font-family: 'Noto-Sans-JP-Medium'; padding: 0 0 15px;}
#address .block .action { text-align: right; padding: 10px 0 0; }
#address .block .action a,
#address .block .action input[type="submit"] { text-align: center; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; width: 60px; height: 30px; line-height: 30px; margin: 0 5px; }
#address .block .action a { background: #970007; color: #fff; }

#address table tr { border-top: 1px solid #e5e5e5; }
#address table tr:first-child { border: none; }
#address table tr th { padding: 30px 20px; width: 130px; text-align: left; font-family: 'Noto-Sans-JP-Medium'; font-size: 16px; }
#address table tr td { padding: 30px 20px; color: #181818; text-align: left; font-size: 16px; }
#address table.input tr td { padding: 20px; color: #000; }
#address form { text-align: center; }
#address input[type="text"] { margin-bottom: 5px; background: #ebebeb; border: none; padding: 15px 5px; }
#address input::placeholder { color: #a0a0a0; }
#address input:-ms-input-placeholder {color: #a0a0a0;}
#address input::-ms-input-placeholder {color: #a0a0a0;}
#address table { width: 100%;}
#address table tr th span { display: inline-block; *display: inline; *zoom: 1; font-size: 12px; color: #fb2f2f; padding: 0 0 0 10px;}
#address table tr td span { display: inline-block; *display: inline; *zoom: 1; padding: 0 0 0 10px; }
#address .submit { margin: 45px 0 100px; text-align: center; }
#address .submit input[type="submit"] { display: inline-block; *display: inline; *zoom: 1; text-align: center; color: #fff;  width: 250px; height: 45px; line-height: 45px; background: #ce4f4f; margin: -5px 0 0; }
#address .submit a { background: #b5b5b5; width: 250px; color: #fff; height: 45px; line-height: 45px; font-size: 14px; display: inline-block; *display: inline; *zoom: 1; margin: 0 0 5px 20px; text-align: center; }
#address .submit a.link { margin: 0 auto 5px; }
#address .submit a.cart { background: #e2662c url(../images/mypage/cart_icon.png) no-repeat 20% center; background-size: auto 25px; box-sizing: border-box; }

/* ------------------------------------------------------------ user info */

#info { padding-bottom: 100px; }
#info table { width: 100%; font-size: 16px; }
#info table tr { border-top: 1px solid #e5e5e5; }
#info table tr:first-child { border: none; }
#info table tr th { padding: 30px 20px; width: 130px; text-align: left; font-family: 'Noto-Sans-JP-Medium';}
#info table tr td { padding: 30px 20px; color: #181818; text-align: left; }
#info table.input tr td { padding: 20px; color: #000; }
#info form { text-align: center; }
#info input[type="text"] { margin-bottom: 5px; background: #ebebeb; border: none; padding: 15px 5px; }

#info table tr td input[type="text"].short { width: 197px; }
#info table tr td input[type="text"].long { width: 510px; }
#info table tr th span { display: inline-block; *display: inline; *zoom: 1; font-size: 12px; color: #fb2f2f; padding: 0 0 0 10px;}
#info table tr td span { display: inline-block; *display: inline; *zoom: 1; padding: 0 0 0 10px; }
#info table tr td span.pad { padding: 0 10px 0 15px;}

#info .fin,
#password .fin { font-size: 16px; text-align: center; padding: 20px 0; }
/* ------------------------------------------------------------ password */

#password { padding-bottom: 100px; width: 710px; margin: auto; }
#password h2 { background: url(../images/users/history/bg.gif) bottom repeat-x; padding: 0 0 20px;}
#password h2 span { font-size: 14px; line-height: 100%; display: inline-block; *display: inline; *zoom: 1; vertical-align: bottom; padding: 0 0 0 10px;}
#password form { text-align: center; }
#password form p { padding: 50px 0; font-size: 16px; }
#password form div { background: #f5f5f5; padding: 20px 0 40px}
#password form div table { text-align: left; width: 100%; font-size: 14px; }
#password form div table tr th { padding: 0 20px 0 50px; width: 170px; }
#password form div table tr td { padding: 10px; }
#password form div input[type="password"] { width: 80%; border: 1px solid #e7e7e7; }
#password form input[type="submit"] { background: url(../images/users/info/icn_00.png) no-repeat 75px center #f00088; text-align: center; color: #fff; width: 250px; padding: 15px 0 15px 20px; margin: auto; font-size: 14px; margin-top: 50px;
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px;	
}

/* ------------------------------------------------------------ mobile */

@media only screen and (max-width:640px){

/* ------------------------------------------------------------ common */

input[type="text"],
input[type="password"] {
border-radius: 0; 
-moz-border-radius: 0; 
-webkit-border-radius: 0;}
#users .btn-pink { padding: 35px 0 0; }
#users .btn-pink a { font-size: 16px;}


/* ------------------------------------------------------------ login */

#login { padding: 60px 0; margin: 0 auto;}
#login .entrance { width: 100%; }
#login .entrance li h3 { font-size:18px; padding: 0 0 10px;}
#login .entrance li .box { padding: 0;}
#login .entrance li .box p.text { font-size: 14px; line-height: 20px; padding: 10px 0;}
#login .entrance li .box p.asterisk { font-size: 14px; padding: 0 0 15px;}

#login .entrance li { float: none; width: 100%; height: auto; margin-top: 15px; padding: 25px 5% 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#login .entrance li:first-child { margin: 0; }
#login .entrance li:first-child .box div { padding: 20px 3% 15px;}
#login .entrance li.member h3 { padding: 0 0 20px;}
#login .entrance li.member p.btn input[type="submit"] { width: 230px; margin: 0 auto; font-size: 14px; line-height: 50px; }
#login .entrance li.first p.btn { padding: 10px 0 0;}
#login .entrance li.first p.btn a { width: 100%; font-size: 16px;}
#login .entrance li .box table tr th { display: block; width: 100%; padding: 0; font-size: 16px; font-weight: bold; }
#login .entrance li .box table tr td { display: block; width: 100%; }
#login .entrance li .box table tr td input[type="text"],
#login .entrance li .box table tr td input[type="password"] { width: 97%; padding: 5px 0 5px 3%; -webkit-appearance: none;
border-radius: 0; 
-moz-border-radius: 0; 
-webkit-border-radius: 0;	
}

#login .entrance li.first p.btn a { width: 230px; line-height: 50px; font-size: 14px; }

/* ------------------------------------------------------------ history */
#bread { padding: 20px 0 10px; }

#history .box { margin: 0 0 30px;}

#history .list .box div.wrap p.condition { padding: 15px 3%; line-height: inherit;}
#history .list .box div.wrap p.condition span { display: block; padding: 0; }

#history .list .box h3 { width: inherit; }
#history .list .box div.wrap div.detail div { float: none; padding: 10px 0 20px; min-height: auto; }

#history .list .box div.wrap div.detail div.info1 { width: inherit; padding: 15px 3%; border: none;}
#history .list .box div.wrap div.detail div.info2 { width: inherit; border: none; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 15px 3%; }
#history .list .box div.wrap div.detail div.info3 { width: inherit; padding: 15px 3%; }
#history .list .box div.wrap div.detail div.info3 dl dt { width: 50%; }
#history .list .box div.wrap div.detail div.info3 dl dd { width: 50%; }
#history .list .box div.wrap div.detail div.info3 dl.total dd { font-size: 20px; }
#history .list .box ul img { width: 40%; height: auto; }
#history .list .box ul div { width: 47%; padding: 0 3% 0 0; }
#history .box ul li .item_wrapper { float: none; width: 100%; padding: 0;}
#history .box ul li { padding: 15px 3%;}
#history .box ul li .item_wrapper { width: 100%;}
#history .box ul li .item_detail { padding: 0;}
#history .box ul li .item_detail dl { font-size: 13px;}
#history .box ul li .item_link { padding: 0; display: block; float: none; width: 100%; margin: 15px 0 0;}
#history .box ul li .item_link a { margin: 0 auto; height: 30px; line-height: 30px; font-size: 13px; width: 180px;}
#history .list .box ul div img { width: 100%; height: auto;}
#history .list .box div.wrap .detail { padding: 0; }

#history-empty { padding: 0 0 60px; }
#history-empty h3 { padding: 60px 0; font-size: 18px; }



ul#menu_nav { padding: 0 0 30px; }
ul#menu_nav li { width: 50%; display: block; float: left; text-align: left; margin-bottom: 1px; padding: 0; }
ul#menu_nav li a { width: 100%; font-size: 12px; border-left: 1px solid #fff;}
ul#menu_nav li a img { height: 20px; width: auto; padding: 0 10px; }
ul#menu_nav li a.no_border { border: none;  }

/* ------------------------------------------------------------ user info */

#info { width: 100%; padding: 0; }
#info table tr { border: none; font-size: 14px;}
#info table tr th { width: inherit; display: block; padding: 15px 0 5px !important; border-bottom: 1px solid #e5e5e5; width: 100% !important; font-size: 16px; }
#info table tr td { width: inherit; display: block; padding: 13px 0 15px !important; width: 100% !important; font-size: 15px; }
#info table tr td select { font-size: 12px; }
#info table.input tr td { width: inherit; display: block; padding: 15px; }
#info form input[type="text"] { -webkit-appearance: none; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box;}
#info table tr td input[type="text"].short { width: 35%; padding: 10px 5px; }
#info table tr td input[type="text"].long { width: 100%;}
#info table tr td span.pad { padding: 0 5px 0 10px;}
#info table tr td.phone [type="text"].short { width: 73%;}
#info .submit input[type="submit"] { margin: 0 0 15px;}

/* ------------------------------------------------------------ password */

#password { width: 100%; }
#password form div { width: 90%; padding: 40px 5% 30px; }
#password form div table tr th { width: inherit; display: block; padding: 0; }
#password form div table tr td { display: block; padding: 0; margin-bottom: 20px; width: inherit; }
#password form div input[type="password"] { width: 95%; -webkit-appearance: none;
border-radius: 0; 
-moz-border-radius: 0; 
-webkit-border-radius: 0;	
}

#users #body { padding: 30px 0 60px;}
#users #body #cside ul li a  { padding: 20px 0 20px 30px; font-size: 14px;}
#users #body #mypage { padding: 40px 0; width: 100%; float: none; }
#users #body #mypage h3 { font-size: 20px; padding: 0 0 15px}
#users #body #cside { width: 100%; float: none;}
#users #body #cside ul li.history { background: url(../images/mypage/nav_01.png) no-repeat left center; background-size: 15px auto;}
#users #body #cside ul li.address { background: url(../images/mypage/nav_02.png) no-repeat left center; background-size: 15px auto; }
#users #body #cside ul li.info { background: url(../images/mypage/nav_03.png) no-repeat left center; background-size: 15px auto; }
#users #body #cside ul li.logout { background: url(../images/mypage/nav_04.png) no-repeat left center; background-size: 15px auto; }

/* ------------------------------------------------------------ address */

#address { padding: 0 0 30px;}
#address .make { padding: 0 0 20px; text-align: right; border-bottom: 1px solid #e0e0e0;}
#address .make a { background: #77a648; display: inline-block; *display: inline; *zoom: 1; text-align: center; font-size: 14px; color: #fff; height: 30px; line-height: 30px; padding: 0 10px; }
#address .block { border-bottom: 1px solid #e0e0e0; padding: 20px 3%; margin: 0 ; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 15px; }
#address .block h4 { font-size: 17px; padding: 0 0 5px; }
#address .block .action { text-align: right; padding: 10px 0 0; }
#address .block .action a,
#address .block .action input[type="submit"] { text-align: center; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; width: 60px; height: 30px; line-height: 30px; margin: 0 5px; }
#address .block .action a { background: #970007; color: #fff; }

#address table tr { border-top: 1px solid #e5e5e5; }
#address table tr:first-child { border: none; }
#address table tr th { padding: 10px 20px; width: 100px; text-align: left; font-family: 'Noto-Sans-JP-Medium'; box-sizing: border-box; }
#address table tr td { padding: 10px 20px; color: #181818; text-align: left; }
#address table.input tr td { padding: 20px; color: #000; }
#address form { text-align: center; }
#address input[type="text"] { margin-bottom: 5px; background: #ebebeb; border: none; padding: 5px; width: 100%; box-sizing: border-box; }
#address table { width: 100%;}
#address table tr th span { display: inline-block; *display: inline; *zoom: 1; font-size: 13px; color: #fb2f2f; padding: 0 0 0 5px;}
#address table tr td span { display: inline-block; *display: inline; *zoom: 1; padding: 0 0 0 10px; }
#address .submit { margin: 45px 0 0; text-align: center; }
#address .submit input[type="submit"] { display: inline-block; *display: inline; *zoom: 1; text-align: center; color: #fff;  width: 250px; height: 45px; line-height: 45px; background: #ce4f4f; margin: -5px 0 0; }
#address .submit a { background: #b5b5b5; width: 250px; color: #fff; height: 45px; line-height: 45px; font-size: 14px; display: inline-block; *display: inline; *zoom: 1; margin: 20px auto 0; text-align: center; }

#mypage .regi { padding: 10px 0;}
#mypage .regi table tr th { padding: 17px 0; border-bottom: 1px solid #e5e5e5; width: 30%; font-size: 14px; vertical-align: top; } 
#mypage .regi table tr:last-child th { border: none; }
#mypage .regi table tr td { padding: 15px 0 15px; width: 70%; font-size: 14px; }

}