@charset "UTF-8";

/******************
マイページメニュー
******************/
@media screen and (min-width: 900px) {
  #mypageMenuBox {
    /*100％化推進202002田中*/
    /*width:100%;*/
    width:200px;
    margin:50px 0 0 0;
    padding:0 0 0 0;
  }
  div.mypageMenu {
    border: 1px solid #f1f1f1;
    padding: 20px 20px 20px 20px;
    /*100％化推進202002田中*/
    margin: 0 0 10px 10px;
  }
  div.mypageMenu h3 {
    font-weight: bold;
    font-size: 100%;
    padding: 0 0 5px 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #979797;
  }
  div.mypageMenu ul {
  }
  div.mypageMenu li{
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
    padding: 0 0 0 0;
    line-height: 2.0em;
    font-size: 90%;
  }
}
@media screen and (max-width: 899px) {
}

/******************
メインタイトル
******************/
h1.mypage {
  margin:50px auto 30px auto;
  padding:0 0 0 0;
  line-height:1.4em;
}



/******************
テキストフォーム
******************/
.mypagetable input[type="text"],
.mypagetable input[type="password"],
.mypagetable textarea {
  width:100%;
  border: 1px solid #ccc;
  outline:none;
  background: none;
  color: inherit;
  padding: 10px;
  margin: 0 0 0 0;
  vertical-align: middle;
  border-radius: 4px;
  -webkit-appearance: none;
}

.btnBlue,
.btnBlueWaku,
.btnBlack,
.btnGray,
.btnOcher,
.btnRed,
.btnGreen,
.btnNo {
  font-size: 160%;
  padding:10px;
}
.btnSmall {
  font-size: 120%;
  padding:10px;
}

@media screen and (min-width: 900px) {
  .mypageBtnBox .btnBlue,
  .mypageBtnBox .btnBlueWaku,
  .mypageBtnBox .btnBlack,
  .mypageBtnBox .btnGray,
  .mypageBtnBox .btnRed,
  .mypageBtnBox .btnGreen {
    width:50%;
    margin-left:auto;
    margin-right:auto;
  }
}

/******************
セレクト
******************/
table.mypagetable td select {
  width: 100%;
  padding: 10px 0 10px 0;
  margin: 0 0 0 0;
  border:1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-family);
  outline: none;
}

/******************
チェックボックス
******************/

input[type="checkbox"]{
  display: none;
}
.checkboxTxt{
  margin:0 0 0 0;
  padding:0 0 0 25px;
  position:relative;
}
.checkboxTxt::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type="checkbox"]:checked + .checkboxTxt{
  color: #333;
}
input[type="checkbox"]:checked + .checkboxTxt::after{
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 6px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #333;
  border-right: 3px solid #333;
}

/****************************************
ファイル選択
****************************************/
label.reviewFile {
  background: #000;
  color: #fff;
  cursor: pointer;
  padding: 10px 10px 10px 10px;
  margin: 0 0 0 0;
  display: inline-block;
}
label.reviewFile input {
 display: none;
}


/****************************************
フォームテーブル
****************************************/
table.mypagetable {
  width:100%;
  margin:0 0 30px 0;
  padding:0 0 0 0;
  border:1px solid #e9e9e9;
}
table.mypagetable th{
  width:20%;
  margin:0 0 0 0;
  padding:10px 10px 10px 10px;
  border:1px solid #e9e9e9;
  text-align:center;
  font-weight:normal;
  background:#f1f1f1;
}
table.mypagetable td{
  width:80%;
  margin:0 0 0 0;
  padding:10px 10px 10px 10px;
  border:1px solid #e9e9e9;
  text-align:left;
  font-weight:normal;
  background:#fff;
}
@media screen and (max-width: 899px) {
  table.mypagetable th{
    width:30%;
    margin:0 0 0 0;
    padding:10px 5px 10px 5px;
  }
  table.mypagetable td{
    width:70%;
    margin:0 0 0 0;
    padding:10px 5px 10px 5px;
    word-break : break-all;
  }
}
.mypageAttention {
  color: #f00;
  font-weight:bold;
}
.inputMust {
  color:#f00;
}
label.error {
  color: #f00;
  font-weight:bold;
}
tr.error th, tr.error th span {
    background-color: #FA6964;
}
.errer_txt {
  color: #f00;
  font-weight:bold;
}

table.mypagetable td ul {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
table.mypagetable td ul li.inputName{
  width:calc((100% - 50px)/2);
  margin:0 10px 0 0;
}
@media screen and (max-width: 899px) {
  table.mypagetable td ul.spmode {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 0 0;
    -webkit-flex-flow: wrap;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  table.mypagetable td ul li.inputName{
    width:calc((100% - 50px)/1);
      margin:0 0 10px 0;
  }
}

table.mypagetable td ul li.label{
  width:40px;
  margin:0 0 0 0;
  padding:10px 0 10px 0;
}
table.mypagetable td ul li.between{
  width:25px;
  margin:0 0 0 0;
  padding:10px 0 10px 0;
  text-align:center;
}
table.mypagetable td ul li:last-child {
    margin:0 0 0 0;
}
table.mypagetable td ul li.inputOne{
  width:80%;
  margin:0 0 0 0;
}
@media screen and (max-width: 899px) {
  table.mypagetable td ul li.inputOne{
    width:100%;
    margin:0 0 0 0;
  }
}

table.mypagetable td ul li.inputZip{
  width:20%;
  margin:0 0 0 0;
}
@media screen and (max-width: 899px) {
  table.mypagetable td ul li.inputZip{
    width:50%;
    margin:0 0 0 0;
  }
}
table.mypagetable td ul li.inputNum{
  width:50%;
  margin:0 0 0 0;
}
@media screen and (max-width: 899px) {
  table.mypagetable td ul li.inputNum{
    width:100%;
  }
}
table.mypagetable td ul li.inputAuto{
  width:auto;
  margin:0 10px 0 0;
}
table.mypagetable td ul li.inputAutoBetween{
  width:auto;
  margin:0 10px 0 10px;
  padding:10px 0 10px 0;
}
table.mypagetable td ul li.inputAutoBetween:first-child {
  margin:0 10px 0 0;
}

table.mypagetable td ul li.inputBirth{
  width:20%;
  margin:0 0 0 0;
}
@media screen and (max-width: 899px) {
  table.mypagetable td ul li.inputBirth{
    width:40%;
    margin:0 0 0 0;
  }
}
table.mypagetable td ul li.inputSmall{
  width:20%;
  margin:0 0 0 0;
}

table.mypagetable td div.inputNotice {
  padding:0 0 0 0;
  margin:5px 0 0 0;
  color:#999;
}
table.mypagetable td div.inputNoticeBold {
  padding:0 0 0 0;
  margin:5px 0 0 0;
  color:#f00;
  font-weight:bold
}


/****************************************
会員登録（account/interimResist)
ログイン(account/loginInput)
FBログイン(account/fb～)
パス再発行(account/passwordReminder～)
会員情報登録(account/input～)
会員情報登録(account/confirm～)
会員情報登録(account/complete～)
ログアウト(account/logout)
退会(account/withdraw)
****************************************/
div.loginBox {
  /*100％化推進202002田中*/
  /*width:95%;*/
  width:1200px;
  margin:0 auto 30px auto;
  padding:20px 20px 20px 20px;
  border:1px solid #e9e9e9;
}
@media screen and (max-width: 899px) {
  div.loginBox {
    width:100%;
    padding:10px 10px 10px 10px;
  }
}
div.loginBox h2{
  font-size: 140%;
  font-weight: bold;
  line-height:1.2em;
  margin: 0 0 15px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #333333;
}


@media screen and (max-width: 899px) {
  div.loginBox h2 {
    font-size: 120%;
  }
}


div.logoutBtnBox {
	width: 50%;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 899px) {
	div.logoutBtnBox {
    width:100%;
  }
}


table.privacytable {
  width:100%;
  margin:0 0 30px 0;
  padding:0 0 0 0;
  border:1px solid #e9e9e9;
}
table.privacytable td{
  width:100%;
  margin:0 0 0 0;
  padding:10px 10px 10px 10px;
  background:#fff;
}
table.privacytable td div{
  width:100%;
  height:200px;
  border: 1px solid #cccccc;
  overflow: auto;
  padding: 10px 10px 10px 10px;
  margin: 0 0 0 0;
}

table.privacytable td div h3{
  font-size:120%;
  margin:0 0 0 0;
  padding:0 0 20px 0;
  font-weight:bold;
  line-height:1.2em;
}
table.privacytable td div h4{
  font-size:110%;
  margin:0 0 0 0;
  padding:0 0 10px 0;
  font-weight:bold;
  line-height:1.2em;
}
table.privacytable td div p{
  font-size:100%;
  margin:0 0 0 0;
  padding:0 0 10px 0;
}

/****************************************
マイページ共通
****************************************/
div.mypageBox {
  width:100%;
  margin:0 0 30px 0;
  padding:20px 20px 20px 20px;
  border:1px solid #e9e9e9;
}
@media screen and (max-width: 899px) {
  div.mypageBox {
    padding:10px 10px 10px 10px;
  }
}
div.mypageBox h2{
  font-size: 140%;
  font-weight: bold;
  line-height:1.2em;
  margin: 0 0 15px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #333333;
}
@media screen and (max-width: 899px) {
  div.mypageBox h2 {
    font-size: 120%;
  }
}

h3.mypagetableTitle{
  font-size:120%;
  margin:20px 0 8px 0;
  padding:0 0 0 0;
}


/****************************************
マイページトップ（account/index)
****************************************/
div.mypageInformation {
  /*100％化推進202002田中*/
  width:95%;
  margin:0 auto 50px auto;
  padding:0 0 0 0;
}
@media screen and (max-width: 899px) {
  div.mypageInformation {
    width:100%;
  }
}
div.mypageInformation h2{
  width:100%;
  font-weight:bold;
  padding:0 0 8px 0;
  margin:0 0 8px 0;
  border-bottom:1px solid #666;
  font-size:120%;
}
div.mypageInformation ul {
  width:100%;
  padding:0 0 0 0;
  margin:0 0 0 0;
}
div.mypageInformation ul li{
  width:100%;
  font-size: 100%;
  line-height:2.0em;
  margin:0 0 0 0;
  padding:5px 0 0 20px;
  position: relative;
}
div.mypageInformation ul li::before {
  position: absolute;
  left: 0;
  content:'';
  display: inline-block;
  width:16px;
  height:16px;
  background-image: url(/assets/img/common/icon_caution.png);
  background-size: contain;
  vertical-align: bottom;
  margin:6px 0 0 0;
}

.mypageMenuArea {
  width: 100%;
  margin: 0 auto 0 auto;
  padding:0 0 0 0;
}
@media screen and (min-width: 900px) {
  .mypageMenuArea {
    /*100％化推進202002田中*/
    width: 95%;
  }
}
  .mypageMenuArea h2{
  width:100%;
  font-weight:bold;
  padding:0 0 0 0;
  margin:0 0 20px 0;
  font-size:140%;
}

@media screen and (min-width: 900px) {
  .mypageMenuLists {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    /*-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;*/
  }
  .mypageMenuLists li {
    /*
		width: calc((100% - 80px) / 3);
    margin: 0 40px 40px 0;
		*/
		width: calc((100% - 60px) / 4);
    margin: 0 20px 20px 0;
  }
  .mypageMenuLists li:nth-child(4n) {
    margin-right: 0;
  }
  .mypageMenuLists li:last-child {
    margin-right: 0;
  }
  .mypageMenuBox {
    display: block;
    height: 100%;
    padding: 60px 20px 50px 20px;
    text-align: center;
    border: 1px solid #e9e9e9;
    background: #fff;
    -webkit-box-shadow: 0 0 30px 0 rgba(51, 51, 51, .1);
    box-shadow: 0 0 30px 0 rgba(51, 51, 51, .1);
    border-radius: 4px;
    position: relative;
  }
  .mypageMenuIcon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 70px;
    margin: 0 0 35px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .mypageMenuTxt {
    font-size: 180%;
    color: #333;
		line-height: 1.2em;
  }
  .mypageBaseUnshippedCount {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding-top: 12px;
    color: white;
    background-color: red;
  }
}
@media screen and (max-width: 899px) {
  .mypageMenuLists {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .mypageMenuLists li {
    width: calc((100% - 20px) / 3);
    margin: 0 10px 10px 0;
  }
  .mypageMenuLists li:nth-child(3n) {
    margin-right: 0;
  }
  .mypageMenuLists li:last-child {
    margin-right: 0;
  }
  .mypageMenuBox {
    display: block;
    height: 100%;
    padding: 20px 10px 15px;
    text-align: center;
    border: 1px solid #e9e9e9;
    background: #fff;
    -webkit-box-shadow: 0 0 20px 0 rgba(51, 51, 51, .1);
    box-shadow: 0 0 20px 0 rgba(51, 51, 51, .1);
    border-radius: 4px;
    position: relative;
  }
  .mypageMenuIcon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 25px;
    margin: 0 0 15px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .mypageMenuIcon img {
    zoom: .5;
    -moz-transform: scale(.5, .5);
    -moz-transform-origin: left top;
  }
  .mypageMenuTxt {
    font-size: 100%;
    color: #333;
  }
  .mypageBaseUnshippedCount {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding-top: 10px;
    color: white;
    background-color: red;
  }
}

.mypageMenuLists li a {
}
.mypageMenuLists li a:hover {
  transition-property: all;
  transition: 0.3s linear;
  border:1px solid #1badcf;
  background:#fff;
  text-decoration:none;
  color:#333;
}


/****************************************
ご注文履歴（order/index)
ご注文履歴詳細（order/detail)
****************************************/
table.orderHeader {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.orderHeader td {
  width:calc(100% / 6);
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align: center;
  color:#fff;
  background: #666666;
}

table.orderObject {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.orderObject td {
  width:calc(100% / 6);
  font-size: 100%;
  border: solid 1px #ffffff;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align:center;
  border-bottom:1px solid #e9e9e9;
}
table.orderObject tr:hover {
  background:#f1f1f1;
}
table.orderObject td a.btnBlue{
  width:80%;
  margin:0 auto 0 auto;
  padding:5px;
  font-size:100%;
}
.orderNotice {
  font-size:80%;
}
@media screen and (max-width: 899px) {
  table.orderHeader td,
  table.orderObject td {
    width:calc(100% / 3);
  }

  table.orderHeader.baseOrder td,
  table.orderObject.baseOrder td,
  table.orderHeader.shopifyOrder td,
  table.orderObject.shopifyOrder td {
    width:calc(100% / 5);
  }

}

div.orderDetail {
  width:100%;
  margin:0 0 20px 0;
  padding:0 0 0 0;
}
div.orderDetail h2{
  width:100%;
  margin:0 0 15px 0;
  padding:10px 0 10px 0;
  border-bottom:1px solid #333;
  line-height:1.2em;
  text-align:center;
}

table.orderDetailTable {
  width:100%;
  margin:0 0 10px 0;
  padding:0 0 0 0;
}

table.orderDetailTable th {
  width:8%;
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align: center;
  color:#fff;
  background: #666666;
}
table.orderDetailTable td {
  width:calc(76% / 3);
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
}
table.orderDetailTable td.orderCol5 {
  width:92%;
}
table.orderRepeat {
  width:100%;
  margin:0 0 10px 0;
  padding:0 0 0 0;
}
table.orderRepeat td{
}
.orderAttention {
  font-weight:bold;
  color:#F00;
  text-align:center;
  margin:0 0 0 0;
  padding:5px 0 0 0;
}
@media screen and (min-width: 900px) {
  div#cartSubArea div.orderSub{
    width:520px !important;
    margin:0 60px 0 0;
  }
  div#cartSubArea div.cartSub{
    width:380px !important;
  }
}
@media screen and (max-width: 899px) {
  div#cartSubArea div.orderSub,
  div#cartSubArea div.cartSub{
    width:100%;
    margin:0 0 0 0;
  }
}
/****************************************
再注文（order/reorderItemChange)
****************************************/
#reorderThumb {
    text-align: center;
}
#reorderThumb img{
  max-width:100%;
}

@media screen and (min-width: 900px) {
  #reorderSelectBox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin:0 0 0 0;
    padding:0 0 0 0;
  }
  #reorderSelectBox div#changeItem {
    width:calc((100% - 20px) / 10 * 5);
    margin:0 20px 0 0;
    padding:0 0 0 0;
  }
  #reorderSelectBox div#changeSum {
    width:calc((100% - 20px) / 10 * 5);
    margin:0 0 0 0;
    padding:0 0 0 0;
  }
}
@media screen and (max-width: 899px) {
  #reorderSelectBox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  #reorderSelectBox div#changeItem {
    width:100%;
    margin:0 0 20px 0;
    padding:0 0 0 0;
  }
  #reorderSelectBox div#changeSum {
    width:100%;
    margin:0 0 0 0;
    padding:0 0 0 0;
  }
}
#reorderSelectBox div.changeSelect {
  width:100%;
  margin:0 0 20px 0;
  padding:10px 0 0 0;
}
#reorderSelectBox table#changeInfo {
  width:100%;
  margin:0 0 20px 0;
  padding:0 0 0 0;
}
#reorderSelectBox table#changeInfo th {
  width:30%;
  text-align: center;
  vertical-align: middle;
  font-size: 100%;
  border-bottom: solid 1px #ffffff;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  background: #e9e9e9;
  color:#333;
}
#reorderSelectBox table#changeInfo td {
  width:70%;
  vertical-align: middle;
  font-size: 100%;
  border-bottom: solid 1px #ffffff;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  background: #ffffff;
  color:#333;
}
#reorderSelectBox table#changeInfo td span{
  color:#ff0000;
}

#reorderSelectBox .ui-widget-content {
  border:none !important;
  background:none !important;
}
#reorderSelectBox select#changeItemId,
#reorderSelectBox select#changeItemColorId {
  width:100%;
  padding:5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#reorderBtnBox .btnBlueWaku {
  font-size: 120%;
}
.loading {
    margin-top: 400px;
    text-align: center;
}
/****************************************
レビュー（order/reviewOeder)
****************************************/
table.reviewHeader {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.reviewHeader td {
  width:calc(100% / 4);
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align: center;
  color:#fff;
  background: #666666;
}

table.reviewObject {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.reviewObject td {
  width:calc(100% / 4);
  font-size: 100%;
  border: solid 1px #ffffff;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align:center;
  border-bottom:1px solid #e9e9e9;
}
table.reviewObject tr:hover {
  background:#f1f1f1;
}
table.reviewObject td a.btnBlue{
  width:80%;
  margin:0 auto 0 auto;
  padding:5px;
  font-size:100%;
}
.reviewNotice {
  font-size:80%;
}
@media screen and (max-width: 899px) {
  table.reviewHeader td,
  table.reviewObject td {
    width:calc(100% / 3);
  }
}
div#star img {
   display: inline;
}


/****************************************
見積（estimate/index)
****************************************/
table.estimateHeader {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.estimateHeader td {
  width:calc(100% / 5);
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align: center;
  color:#fff;
  background: #666666;
}

table.estimateObject {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.estimateObject td {
  width:calc(100% / 5);
  font-size: 100%;
  border: solid 1px #ffffff;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align:center;
  border-bottom:1px solid #e9e9e9;
}
table.estimateObject tr:hover {
  background:#f1f1f1;
}
table.estimateObject td a.btnBlue{
  width:80%;
  margin:0 auto 0 auto;
  padding:5px;
  font-size:100%;
}
table.estimateObject td a.btnBlueWaku{
  width:80%;
  margin:0 auto 0 auto;
  padding:5px;
  font-size:100%;
}
.estimateNotice {
  font-size:80%;
}
@media screen and (max-width: 899px) {
  table.estimateHeader td,
  table.estimateObject td {
    width:calc(100% / 3);
  }
}
/****************************************
デザイン保存（design/list)
****************************************/
table.designSearch {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

ul.designSearch li{
  width:calc(100% /3);
  margin:0 10px 0 0;
}
ul.designSearch li:last-child{
  margin:0 0 0 0;
}
ul.designSearch li .btnBlue{
  margin:0 0 0 0;
}
.searchPaging {
    width: 100%;
    text-align: center;
    margin: 20px 0 20px 0;
    padding: 10px 5px 10px 5px;
}
.searchPaging .pageControl {
    border: 1px solid #e9e9e9;
    padding: 5px 7px 5px 7px;
    margin: 0 2px 0 2px;
}

table.designHeader {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.designHeader td {
  width:calc(100% / 7);
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align: center;
  color:#fff;
  background: #666666;
}

table.designObject {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.designObject td {
  width:calc(100% / 7);
  font-size: 100%;
  border: solid 1px #ffffff;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align:center;
  border-bottom:1px solid #e9e9e9;
}
table.designObject tr:hover {
  background:#f1f1f1;
}
table.designObject td a.btnBlue{
  width:80%;
  margin:0 auto 5px auto;
  padding:5px;
  font-size:100%;
}
table.designObject td a.btnBlueWaku{
  width:80%;
  margin:0 auto 0 auto;
  padding:5px;
  font-size:100%;
}
.designNotice {
  font-size:80%;
}
@media screen and (min-width: 900px) {
  table.designHeader td.designCol2,
  table.designObject td.designCol2 {
    width:calc( (100% / 5) * 1.5 );
  }
}
@media screen and (max-width: 899px) {
  table.designHeader td,
  table.designObject td {
    width:calc(100% / 1);
    border:none;
  }
  table.designObject td a.btnBlue{
    width:100%;
    margin:0 auto 5px auto;
    padding:10px;
    font-size:100%;
  }
  table.designObject td a.btnBlueWaku{
    width:100%;
    margin:0 auto 0 auto;
    padding:10px;
    font-size:100%;
  }

}

.baseOrdererchForm,
.shopifyOrdererchForm {
  width: 100%;
  margin: 0 0 30px 0;
  padding: 10px 10px 10px 10px;
  border: 1px solid #e9e9e9;
}

.baseOrdererchFormRow,
.shopifyOrdererchFormRow {
  height: 46px;
  width: 100%;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.baseOrdererchFormRow label,
.shopifyOrdererchFormRow label {
  height: 100%;
  width: 25%;
  padding-right: 5%;
  text-align: right;
  line-height: 46px;
}

.baseOrdererchForm select,
.shopifyOrdererchForm select {
  border: 1px solid #ccc;
  outline: none;
  background: none;
  color: inherit;
  padding: 10px;
  vertical-align: middle;
  border-radius: 4px;
  text-align: center;
}

.baseOrdererchForm .yearMonthSelect,
.shopifyOrdererchForm .yearMonthSelect {
  width: 30%;
}
.baseOrdererchForm .searchCondition,
.shopifyOrdererchForm .searchCondition {
  width: 30%;
  margin: 0 1% 0 0;
}

.baseOrdererchForm .serch_text,
.shopifyOrdererchForm .serch_text {
  width: 30%;
  border: 1px solid #ccc;
  outline: none;
  background: none;
  color: inherit;
  padding: 10px;
  margin: 0 5px 0 0;
  vertical-align: middle;
  border-radius: 4px;
  text-align: center;
  -webkit-appearance: none;
}

.baseOrdererchForm .submit_button,
.shopifyOrdererchForm .submit_button {
  width: 30%;
  outline: none;
  padding: 10px;
  margin: 0 auto;
  vertical-align: middle;
  border-radius: 4px;
  text-align: center;
  -webkit-appearance: none;
}

.attention-text {
  color: red;
}

.warning-text {
  color: blue;
}

@media only screen and (max-width: 768px) {
  .baseOrdererchFormRow label,
  .shopifyOrdererchFormRow label {
    padding: 0;
  }
  .baseOrdererchForm .yearMonthSelect,
  .shopifyOrdererchForm .yearMonthSelect {
    width: 71%;
  }
  .baseOrdererchForm .serch_text,
  .shopifyOrdererchForm .serch_text {
    width: 40%;
  }
  .baseOrdererchForm .submit_button,
  .shopifyOrdererchForm .submit_button {
    width: 40%;
  }
}

/****************************************
明細書・領収書テーブル
****************************************/
table.mypageReceipt {
  margin:0 0 0 0;
  padding:0 0 0 0;
  width:100%;
  border:none;
}
table.mypageReceipt th{
  margin:0 0 0 0;
  padding:0 0 0 0;
  width:10%;
  border:none;
  background:#FFFFFF;
}
table.mypageReceipt td{
  margin:0 0 0 0;
  padding:0 0 0 0;
  border:none;
  background:#FFFFFF;
}
table.mypageReceipt td.receiptName{
  width:60%;
}
table.mypageReceipt td.receiptName input[type="text"]{
  width: 70%;
  margin: 5px 0 5px 0;
}
table.mypageReceipt td.receiptBtn{
  width:40%;
}

/****************************************
問い合わせフォーム
****************************************/
@media screen and (min-width: 900px) {
  div#contactTxt {
    width:1200px;
    margin:0 auto 0 auto;
  }
}

div#completeTxt p{
  font-size: 100%;
  margin: 0 0 0 0;
  padding: 0 0 30px 0;
}
h2.contactH2 {
  font-size:140%;
  font-weight:bold;
  line-height:1.4em;
  margin:30px 0 5px 0;
  padding:0 0 0 0;
}

ul.contactNotice {
  width:100%;
  display:inline;
}
ul.contactNotice li{
  width:100%;
  font-size: 100%;
  line-height:1.6em;
  margin:0 0 0 0;
  padding:5px 0 0 0;
}
ul.contactNotice li::before {
  content:'';
  display: inline-block;
  width:16px;
  height:16px;
  background-image: url(/assets/img/common/icon_caution.png);
  background-size: contain;
  vertical-align: bottom;
  margin:0 2px 3px 0;
}

table.contactHeader {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.contactHeader td {
  width:calc(100% / 5);
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align: center;
  color:#fff;
  background: #666666;
}

table.contactObject {
  width:100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

table.contactObject td {
  width:calc(100% / 6);
  font-size: 100%;
  border: solid 1px #ffffff;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align:center;
  border-bottom:1px solid #e9e9e9;
}
table.contactObject tr:hover {
  background:#f1f1f1;
}
table.contactObject td a{
  width:80%;
  margin:0 auto 0 auto;
  padding:5px;
  font-size:100%;
}

@media screen and (max-width: 899px) {
  table.contactHeader td,
  table.contactObject td {
    width:calc(100% / 3);
  }
}

div.contactDetail {
  width:100%;
  margin:0 0 20px 0;
  padding:0 0 0 0;
}
div.contactDetail h2{
  width:100%;
  margin:0 0 15px 0;
  padding:10px 0 10px 0;
  border-bottom:1px solid #333;
  line-height:1.2em;
  text-align:center;
}

table.contactDetailTable {
  width:100%;
  margin:0 0 10px 0;
  padding:0 0 0 0;
}

table.contactDetailTable th {
  width:20%;
  font-size: 100%;
  border: solid 1px #e9e9e9e;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
  text-align: center;
  color:#fff;
  background: #666666;
}
table.contactDetailTable td {
  width:80%;
  font-size: 100%;
  border: solid 1px #e9e9e9;
  padding:5px 5px 5px 5px;
  margin:0 0 0 0;
}

table.contactDetailTable td img{
  width:100%;
}

@media screen and (max-width: 899px) {
  .mypagetableInputWidth input {
    width: 100%;
  }
}

/****************************************
アンケート
****************************************/
table.mypageAns {

}

table.mypageAns th{
	font-weight:bold;
	text-align:left;
	font-size:110%;
}
table.mypageAns ul {
	margin: 0 0 0 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: wrap;
	-ms-flex-flow: wrap;
	flex-flow: wrap;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

@media screen and (min-width: 900px) {
	table.mypageAns ul li{
		width:calc( ( 100% - 40px ) / 5 );
		margin:0 10px 10px 0;
		padding:0 0 0 0;
	}
	table.mypageAns ul li:nth-child(5n){
		margin-right:0;
	}
}

@media screen and (max-width: 899px) {
  table.mypageAns ul li{
    width:calc( ( 100% - 10px ) / 2 );
    margin:0 10px 10px 0;
    padding:0 0 0 0;
  }
	table.mypageAns ul li:nth-child(2n){
    margin-right:0;
  }
}

@media screen and (max-width: 599px) {
  table.mypageAns ul li{
    width:100%;
    margin:0 0 10px 0;
    padding:0 0 0 0;
  }
  table.mypageAns ul li:last-child{
    margin-bottom:0;
  }
}

/****************************************
BASE商品一覧
****************************************/
table.baseProductList {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
table.baseProductList th {
    font-size: 100%;
    border: solid 1px #e9e9e9;
    padding: 5px 5px 5px 5px;
    margin: 0 0 0 0;
    text-align: center;
    color: #fff;
    background: #666666;
}

table.baseProductList td {
    font-size: 100%;
    border: solid 1px #ffffff;
    padding: 5px 5px 5px 5px;
    margin: 0 0 0 0;
    text-align: center;
    border-bottom: 1px solid #e9e9e9;
}

table.baseProductList td.baseName { text-align:left; }
table.baseProductList td.basePrice { text-align:right; }

table.baseProductList td.baseLink a.btnBlue,td.baseDelete a.btnBlue  {
	width: 80%;
	margin: 0 auto 0 auto;
	padding: 5px;
	font-size: 100%;
}

@media screen and (min-width: 900px) {
	table.baseProductList .baseId { width:10%; }
	table.baseProductList .baseName { width:35%; }
	table.baseProductList .basePrice { width:10%; }
	table.baseProductList .baseDate { width:15%; }
	table.baseProductList .baseLink { width:15%; }
    table.baseProductList .baseDelete { width: 15% }
}

@media screen and (max-width: 899px) {
	table.baseProductList .baseId { width:10%; }
	table.baseProductList .baseName { width:35%; }
	table.baseProductList .basePrice { width:10%; }
	table.baseProductList .baseDate { width:15%; }
	table.baseProductList .baseLink { width:15%; }
    table.baseProductList .baseDelete { width: 15% }
}

@media screen and (max-width: 599px) {
	table.baseProductList .baseId { width:25%; }
	table.baseProductList .baseName { width:50%; }
	table.baseProductList .basePrice { display:none; }
	table.baseProductList .baseDate { display:none; }
	table.baseProductList .baseLink { display:none; }
    table.baseProductList .baseDelete { width: 25% }
}


table.baseProductDetail {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

table.baseProductDetail th {
    font-size: 100%;
    border: solid 1px #e9e9e9;
    padding: 5px 5px 5px 5px;
    margin: 0 0 0 0;
    text-align: center;
    color: #fff;
    background: #666666;
}

table.baseProductDetail td {
    font-size: 100%;
    border: solid 1px #ffffff;
    padding: 5px 5px 5px 5px;
    margin: 0 0 0 0;
    text-align: center;
    border-bottom: 1px solid #e9e9e9;
}

table.baseProductDetail td.baseImage { text-align:center; }
table.baseProductDetail td.baseName {
	font-size: 120%;
	font-weight: bold;
	text-align:left;
}
table.baseProductDetail td.basePrint { text-align:left; }

@media screen and (min-width: 900px) {
	table.baseProductDetail .baseImage { width:250px; }
	table.baseProductDetail .baseName { width:400px; }
	table.baseProductDetail .baseColor { width:105px; }
	table.baseProductDetail .baseSize { width:80px; }
	table.baseProductDetail .basePrint { width:359px; }
}

@media screen and (max-width: 899px) {
	table.baseProductDetail .baseImage { width:100%; }
	table.baseProductDetail .baseName { width:100%; }
	table.baseProductDetail .baseColor { width:100%; }
	table.baseProductDetail .baseSize { width:100%; }
	table.baseProductDetail .basePrint { width:100%; }
}

/****************************************
入荷通知（restock_notice/list)
****************************************/
table.restockNotice {
  width: 100%;
  margin: 0 0 30px 0;
  padding: 0 0 0 0;
}

table.restockNotice td {
  font-size: 100%;
  border: solid 1px #ffffff;
  padding: 5px 5px 5px 5px;
  margin: 0 0 0 0;
  text-align: center;
  border-bottom: 1px solid #e9e9e9;
}

table.restockNotice thead td {
  border: solid 1px #e9e9e9;
  margin: 0 0 0 0;
  text-align: center;
  color: #fff;
  background: #666666;
}

table.restockNotice td:last-child {
  min-width: 65px;
}

table.restockNotice tr:hover {
  background: #f1f1f1;
}

table.restockNotice td a.btnBlue {
  width: 80%;
  margin: 0 auto 0 auto;
  padding: 5px;
  font-size: 100%;
}

@media screen and (max-width: 899px) {
  table.restockNotice td {
    width: calc(100% / 3);
  }
}