@charset "utf-8";

/*====================================================================

member.css

====================================================================*/
/*--------------------------------------------------------------------
signup
--------------------------------------------------------------------*/
.form.signup{
   margin-top: 30px;
   padding-left: 30px;
}


/*--------------------------------------------------------------------
login
--------------------------------------------------------------------*/
.login{}
.login .contents-header .sub-title{
   text-align: center;
   font-size: 24px;
   font-weight: bold;
   margin-top: 20px;
}
.login .form{
   width: 400px;
   margin: auto;
}
.login .form .form-item{
   margin-top: 20px;
   text-align: center;
}
.login .form .form-item .text{
   display: inline-block;
}
.login .form .btns{
   margin-top: 30px;
}
.login .caution{
   text-align: center;
   margin-top: 10px;
}
.login .caution a{
   text-decoration: underline;
}
.login .caution a:hover{
   text-decoration: none;
}

.signup{}
.signup .btns{
   text-align: center;
   margin-top: 40px;
}
.signup .btns .btn{
   font-size: 14px;
   padding: 20px 50px;
}


/*--------------------------------------------------------------------
mypage
--------------------------------------------------------------------*/
.mypage-index{}
.mypage-index .menu{}
.mypage-index .menu .item{
   display: inline-block;
   width: 150px;
   text-align: center;
   vertical-align: top;
   margin: 50px 69px 0 0;
}
.mypage-index .menu .item:last-child{
   margin-right: 0;
}
.mypage-index .menu .item a,
.mypage-index .menu .item a:hover{
   text-decoration: none;
}
.mypage-index .menu .item a:hover{
   filter: alpha(opacity=85);
   -khtml-opacity: 0.85;
   -moz-opacity: 0.85;
   opacity:0.85;
}
.mypage-index .menu .item .title{
   color: #a49e86;
   font-size: 16px;
   font-weight: bold;
}
.mypage-index .menu .item .icon{
   margin-top: 15px;
}
.mypage-index .menu .item .icon img{
   width: 60px;
   height: auto;
}
.mypage-index .menu .item .desc{
   color: #95989a;
   margin-top: 15px;
}



/*--------------------------------------------------------------------
order
--------------------------------------------------------------------*/
.order-item{
   font-size: 14px;
   padding: 35px 0;
   border-bottom: solid 1px #ececec;
}
.order-item.cancel{
}
.order-item.cancel p{color: #ddd;}
.order-item.cancel img{
   filter: alpha(opacity=50);
   -khtml-opacity: 0.5;
   -moz-opacity: 0.5;
   opacity:0.5;
}
.order-item:first-child{
   border-top: solid 1px #ececec;
}
.order-item .order-info{
   position: relative;
}
.order-item .order-info span{
   display: block;
}
.order-item .order-info .btns{
   position: absolute;
   right: 0;
   top: 0;
}

.order-item .order-info

.order-item .items{}
.order-item .items .item{
   zoom: 1;
   overflow: hidden;
   margin-top: 20px;
}
.order-item .items .item .thumb{
   float: left;
   width: 105px;
   margin-right: 20px;
}
.order-item .items .item .thumb img{
   width: 100%;
   height: auto;
}
.order-item .items .item .info{
   float: left;
}
.order-item .items .item .info .name{
   font-size: 19px;
   font-weight: bold;
   color: #a49e86;
}
.order-item .items .item .info .btns{
   margin-top: 10px;
}

.order-item .order-price{
   margin-top: 20px;
}

.order-item .cancel{
   margin-top: 20px;
}
.order-item .cancel .btn{
   font-size: 16px;
   font-weight: normal;
   padding: 15px 50px;
}
.order-item .cancel .limit{
   color: #bbb;
   font-size: 12px;
   margin-top: 10px;
}


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

   .contents-header .title{
      padding: 0 20px;
      margin-top: 20px;
   }
   .contents-header .desc{
      padding: 0 20px;
      margin-top: 10px;
   }
   .contents-item{
      margin: 20px;
   }

   .form.default{
      padding: 0 20px;
   }
   .form.default table tr,
   .form.default table th,
   .form.default table td{
      display: block;
      border: none;
      padding: 0;
   }
   .form.default table th{
      margin-top: 20px;
   }
   .form.default table td .text{
      width: calc(100vw - 40px);
      padding: 15px 0;
      text-indent: 15px;
   }
   .form.default .btns .btn{
      width: calc(100vw - 40px);
      padding: 15px 0;
   }

   .login div.form{
      width: auto;
   }
   .login form.form{
      width: auto;
      padding: 0 20px;
   }
   .login .form .form-item:first-of-type{
      margin-top: 0;
   }

   .signup .btns{
      padding: 0 20px;
      margin-top: 0;
   }
   .signup .btns .btn{
      display: block;
      width: 100%;
      padding: 20px 0px;
   }


   .login .contents-header .sub-title{
      text-align: left;
      padding: 0 20px;
   }

   .mypage-index{
      margin-top: 10px;
      border-top: solid 1px #ececec;
   }
   .mypage-index .menu .item{
      float: left;
      width: calc(100%/2 - 1px);
      height: 200px;
      margin-top: 0px;
      margin-right: 0px;
      border-right: solid 1px #ececec;
      border-bottom: solid 1px #ececec;
   }
   .mypage-index .menu .item:nth-child(2n){
      width: 50%;
      margin-right: 0;
      border-right: none;
   }
   .mypage-index .menu .item a{
      display: block;
      padding: 20px 20px 0;
   }
   .mypage-index .menu .item .desc{
      font-size: 13px;
      line-height: 1.2;
   }

   .form.signup{
      padding: 0;
   }
   .form.signup table,
   .form.signup tbody,
   .form.signup tr,
   .form.signup th,
   .form.signup td{
      display: block;
      border: none !important;
      padding: 0 !important;
   }
   .form.signup th {
      margin-top: 20px;
   }

   .signup .btns{
      padding: 0;
   }

}