*{
 transition: none;
 transition:opacity 0.5s;
}
select{
 padding:2px;
}
#contactForm{
 max-width: 1000px;
 margin-left: auto;
 margin-right: auto;
 padding: 0 10px;
}
.inputArea{
 display: table;
 width: 96%;
 padding: 2%;
 position: relative;
}
.inputArea .ttl,
.inputArea .inputData{
 display: table-cell;
 vertical-align: top;
}
.inputArea .ttl{
 width: 35%;
 position: relative;
}
.inputArea.required .ttl:after{
 display: block;
 content: "必須";
 color: #fff;
 background: #f00;
 position: absolute;
 right: 8px;
 top: 0.5em;
 font-size: 65%;
 line-height: 2em;
 padding: 0px 0.5em;
 border-radius: 2px;
}
.inputArea .inputData{
 width: 65%;
}
.inputArea input[type="text"],
.inputArea textArea{
 border:solid 1px #ccc;
 padding: 1%;
 border-radius: 5px;
 box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.03) inset;
 width: 98%;
}
.inputArea .still{
 background: #fff6f6;
}
.inputArea .errMsg{
 color: #f00;
 font-size: 80%;
}
.inputArea textArea{
 height: 150px;
}
.inputArea label{
 display: inline-block;
 padding: 5px;
 margin: 5px;
}
.btnSubmit{
 text-align: center;
 padding: 10px 0px;
}
.btnSubmit span{
 opacity: 0;
 visibility: hidden;
}
.btnSubmit span.active{
 opacity: 1;
 visibility: visible;
 cursor: pointer;
}
.btnSubmit span.active:hover{
}
.w30per{
 width:30% !important;
}
.addressArea{
 padding: 10px;
 border:solid 1px #eee;
}
.tabNames li{
 display: inline-block;
 background: #eee;
 padding: 5px 20px;
 cursor: pointer;
}
.tabNames li:hover{
 background: #fEE;
}
.tabNames li.active{
 background: #fcc;
 color:#e60012;
 font-weight: bold;
 text-shadow: 1px 1px 0px #fff;
}
.tabDatas{
 border:solid 4px #fcc;
 padding: 10px;
}
.tabDatas li{
 display:none;
}
.tabDatas li.active{
 display:block;
}
.tabDatas li .sizeAreas{
 display: table;
 width: 100%;
}
.tabDatas li .sizeArea{
 display: table-row;
}
.tabDatas li .sizeArea:hover{
 background:#fee;
}
.tabDatas li .sizeArea>span{
 display:table-cell;
 padding: 5px;
 border-bottom: dotted #ddd 1px;
}
.tabDatas li .sizeArea span.spBlock{
 border-bottom: none;
}
.shippingSelect{
 padding: 5px;
}
#orderList{
 border: solid 4px #fcc;
 padding: 10px;
 margin-bottom: 10px;
}
#orderList .photoPrice li{
 border-bottom:dotted 1px #eee;
 margin-bottom: 5px;
 display: none;
}
#orderList .photoPrice li.active{
 display: block;
}
#orderList .optionArea li{
 display: none;
}
#orderList .optionArea li.active{
 display: block;
}
#orderList .shippingPrice li{
 display: none;
}
#orderList .shippingPrice li.active{
 display: block;
}
.confirmArea .data{
 display: table;
 width: 100%;
 border-bottom: solid 1px #eee;
 padding-bottom: 10px;
 margin-bottom: 10px;
}
.confirmArea .data span{
 display: table-cell;
 vertical-align: top;
 padding-left: 10px;
}
.confirmArea .data span:first-child{
 width: 30%;
 border-right: solid 2px #eee;
 padding-left: 0px;
}
.confirmSubmit{
 text-align: center;
}
.confirmSubmit .btnBack,
.confirmSubmit .btnSubmit{
 display: inline-block;
}
.confirmSubmit .btnBack{
 text-align: center;
 padding: 10px 0px;
 display: inline-block;
 border-radius: 4px;
 cursor: pointer;
}
.confirmSubmit .btnBack span{
 background: #888;
}
.confirmSubmit .btnBack span:hover{
 transition: .5s;
 background: #fff;
}

@media screen and ( max-width:670px ){
 .inputArea .ttl{
  width: 100%;
  position: relative;
  display: block;
 }
 .inputArea .inputData{
  width: 100%;
  display: block;
 }
 .inputArea.required .ttl:after{
  display: inline-block;
  content: "必須";
  color: #fff;
  background: #f00;
  position: static;
  font-size: 65%;
  line-height: 1.4em;
  padding: 0px 0.5em;
  border-radius: 2px;
  margin:0px 0px 5px 5px;
 }
 .inputArea{
  display: table;
  width: 98%;
  padding: 4% 1%;
  border-bottom: solid 1px #eee;
  position: relative;
 }
 .inputArea textArea{
  height: 50px;
 }
 .optionArea p{
  padding: 5px 0px;
 }
 .shippingSelect label{
  display: inline-block;
  padding: 5px 0px;
 }
}