@charset "utf-8";

/* ------------------------------------------------------------ common */
#fv { background: url(../images/users/fv.jpg) no-repeat center center; padding: 150px 0; background-size: cover; }
#fv h2 { font-size: 64px; font-family: 'AlternateGothicEF_NoTwo'; line-height: 120%; }
#fv.mypage { background: url(../images/mypage/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-bottom: 1px solid #ccc; }
#users #body #cside ul li.history { background: url(../images/mypage/nav_01.png) no-repeat left center; }
#users #body #cside ul li.address { background: url(../images/mypage/nav_02.png) no-repeat left center; }
#users #body #cside ul li.info { background: url(../images/mypage/nav_03.png) no-repeat left center; }
#users #body #cside ul li.logout { background: url(../images/mypage/nav_04.png) no-repeat left center; }




#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';}
#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: 45px; line-height: 45px; margin: auto; font-size: 14px; margin: 0 10px; }
#info .submit input[type="submit"],
#password .submit input[type="submit"] { background: #ce4f4f; 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; margin: 0 0 100px; }
#login .alert { text-align: center; }
#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 50px; }
#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 { color: #248eca; text-decoration: underline; display: block; text-align: center; margin: 2px 0 0;}
#login .entrance li p.btn a { font-size: 16px;}

#login .entrance li p.btn { padding: 24px 0 0;}
#login .entrance li.member p.btn input[type="submit"] { background: url(../images/users/btn_arw.jpg) 97% center no-repeat #3db2a0; width: 380px; line-height: 45px; color: #fff; text-align: center; font-size: 20px;}



#login .entrance li.first .box div { padding: 20px 30px 15px; 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: 35px 0 2px;}
#login .entrance li.first p.btn a { background: #dd8d37; width: 380px; line-height: 45px; text-align: center; margin: 0 auto; font-size: 18px;}

/* ------------------------------------------------------------ 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: 16px; 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; }
#history .detail .order dd { float: right; }
#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; }
#address .block h4 { font-size: 15px; padding: 0 0 5px; font-family: 'Noto-Sans-JP-Medium'; padding: 0 0 25px;}
#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';}
#address table tr td { padding: 30px 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; }
#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 0 20px; text-align: center; }
#address .submit a.link { margin: 0 auto; }

/* ------------------------------------------------------------ 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: 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;}

/* ------------------------------------------------------------ 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 a { font-size: 16px;}

#fv { padding: 30% 0;}
#fv h2 { font-size: 40px; line-height: 100%;}
#fv h2 span { line-height: 130%;}


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

#login { padding: 30px 0; margin: 0 0 30px;}
#login .entrance { width: 100%; }
#login .entrance li { height: auto;}
#login .entrance li h3 { font-size: 20px; padding: 20px 0 10px;}
#login .entrance li .box { padding: 0 3%;}
#login .entrance li .box p.text { font-size: 15px;}
#login .entrance li .box p.asterisk { font-size: 14px; padding: 0 0 15px;}
#login .entrance li { float: none; width: 100%; margin-top: 15px; padding: 0 0 15px;}
#login .entrance li:first-child { margin: 0; }
#login .entrance li:first-child .box div { padding: 20px 3% 15px;}
#login .entrance li.member h3 { padding: 40px 0 20px;}
#login .entrance li.member p.btn input[type="submit"] { width: 100%; margin: auto; font-size: 16px;}
#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;	
}
/* ------------------------------------------------------------ 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;}

#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%; }
#info table tr { border: none; font-size: 14px;}
#info table tr th { width: inherit; display: block; padding: 15px 0 10px; border-bottom: 1px solid #e5e5e5;}
#info table tr td { width: inherit; display: block; padding: 15px 0; }
#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%;}
#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 40px;}
#users #body #cside ul li a  { padding: 20px 0 20px 30px; font-size: 14px;}
#users #body #mypage { width: 100%; float: none; }
#users #body #mypage h3 { font-size: 20px; padding: 30px 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; }
#address .block h4 { font-size: 15px; 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: 30px 20px; width: 130px; text-align: left; font-family: 'Noto-Sans-JP-Medium';}
#address table tr td { padding: 30px 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; }
#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 0 20px; text-align: center; }
#address .submit a.link { margin: 0 auto; }

#mypage .regi { padding: 30px 0;}
#mypage .regi table tr th { padding: 10px 0; border-bottom: 1px solid #e5e5e5;} 
#mypage .regi table tr td { padding: 15px 0 15px;}

}