@charset "UTF-8";
/* CSS Document */


/*rest.css*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
/*vertical-align:baseline;*/
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/ change colours to suit your needs /
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/ change colours to suit your needs /
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs 
*/
hr {
display:block;
height:1px;
border:0; 
border-top:1px solid #cccccc;
margin: 10px 0 2px;
padding:0;
}

input, select {
vertical-align:middle;
border: solid 2px #949495;
}

/*style.css*/

/*共通*/

body{
	background:#FFF;
	font-size:15px;
	color:#333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:150%;
	letter-spacing:1px;
}
p{
	font-size:15px;
}
h2.trial::before {
    content: "▼";
    color: #333;
}
.txtbox520{
	width:520px;
}
.txtbox150{
	width:150px;
}
.txtbox100{
	width:100px;
}
.txtbox260{
	width:260px;
}

/*  head2 */
.head2{
	width:94%;
	margin:30px auto 0px;
}

.pagetitle{
		float:left !important;
		color:#666;
		padding-left:10px;
		border-left:5px solid #999;
		margin-top:10px;
		font-size: 18px;
		font-weight: bold !important;
}
.head_login .btn{
	margin-top:5px !important;
	text-align:right !important;
}
.head_login .btn input{
	padding:5px 0;
}
.head_login .btn input {
    background: #333;
    border: 0px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    font-size: 100%;
    padding: 6px 0;
    text-decoration: none;
    width: 140px;
    vertical-align: middle;
    margin: 5px;
	letter-spacing:2px;
}
.head_login .btn input:hover{
	 background: #666;
    border: 0px;
}
.head_username{
	font-weight:bold;
}


/* modal */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(240,240,240,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 20px 30px;
  background-color: #fff;
}

/* responsibe */
@media screen and (max-width: 768px) {
.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 20px 30px;
  background-color: #fff;
  height: 80vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
}
/* end */

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}


.modalWrapper h1 {
  text-align: center;
  padding: 1em 0;
}

.modalWrapper form {
  padding: 0 1.5em;
}

.modalWrapper .form-item {
  margin-bottom:  1em;
  width: 100%;
}

.modalWrapper .form-item input {
  background: #fafafa;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  height: 50px;
  transition: border-color 0.3s;
  width: 100%;
  padding-left:10px;
}


.modalWrapper .form-item input:focus {
  border-bottom: 2px solid #c0c0c0;
  outline: none;
}

.modalWrapper .button-panel {
  margin: 2em 0 0;
  width: 100%;
}

.modalWrapper .button-panel .button {
  background: #f16272;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 50px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
}
.modalWrapper .button-panel .button {
    border-radius:5px;
   }

.modalWrapper .button:hover {
  background: #ee3e52;
}

.modalWrapper .form-footer {
  font-size: 1em;
  padding: 2em 0;
  text-align: center;
}

.modalWrapper .form-footer a {
  color: #8c8c8c;
  text-decoration: none;
  transition: border-color 0.3s;
}

.modalWrapper .form-footer a:hover {
  border-bottom: 1px dotted #8c8c8c;
}

/* カート内容 */
.img-wrapper {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  max-height:130px;
}
.img-wrapper img{
	max-width:130px;
}
.img-label {
  position:absolute;
  color:#fff;
  padding:1px 3px;
  font-size:10px;
  background-color: rgba(153, 153, 153, 0.5);
}
.label-left-top{
  left:0px;
  top:0px;
}

.head_btn .btn{
	margin-top:10px !important;
	text-align:left !important;
}
.head_btn .btn input{
	padding:5px 0;
}

.product-name{
	text-align:left !important;
}
.product-name .btn{
	margin-top:6px;
	text-align:center;
	float:left;
}
.product-name .btn input {
    background: #666;
    border: 0px;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    font-size: 90%;
    padding: 5px 25px;
    text-decoration: none;
    vertical-align: middle;
    margin: 5px;
	letter-spacing:2px;
}
.btn input:hover{
	 background: #999;
    border: 0px;
}
.option-div{
	margin-top:8px;
}
.product-option{
	padding:4px 15px;
	background:#fda;
	border-radius:3px;
	border:1px solid #fa9;
	font-size:0.8em;
	font-style:italic;
	font-weight:700;
}

/*テーブル*/
table.table01 {
	width:100%;
	border-collapse: collapse;
	border:1px solid #ddd;
	margin-bottom:10px;
}
table.table01 thead th {
	border:1px solid #ddd;
	background:#eee;
	padding:10px 15px;
}
table.table01 tr{
		border-bottom:1px solid #ddd;
}
table.table01 thead th:last-child {
}
table.table01 tbody th {
	background:#eee;
	padding:10px 15px;
	vertical-align:middle;
}
table.table01 tbody tr:last-child th {
}
table.table01 tbody td {
	background:#FFF;
	border:1px solid #ddd;
	padding:6px;
	vertical-align:middle;
	text-align:center;
}
table.table01 tbody td.total{
	text-align:right;
}
.clear{
	clear:both;
}
.totalarea{
	font-weight:bold;
}


.orderdetail .lead{
	margin-bottom:20px;
}

table.camp{
	margin-bottom:5px;
}
table.camp, table.camp tbody tr, table.camp tbody td{
	border:0px !important;
}
table.camp .product-name{
	font-weight:bold;
}
table.camp .product-name{
	border-left:5px solid #399 !important;
}
table.camp .camp-name, .camp-time{
	font-weight:bold;
}
table.camp .product-name{
	max-width: 450px;
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}
table.camp .camp-name{
	max-width: 350px;
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}
table.camp, table.camp-detail{
	table-layout:fixed;
	width:100%;
}
table.camp-detail{
	margin-bottom:30px;
}
table td{
	word-wrap:break-word;
}
table.camp-detail td.camp-time{
	background:#ddd;
}
table tr.bg-light td{
	background:#ddeeea;
}
.kaisetsu{
	text-align:left;
}
table.camp .camp-price{
	font-weight:bold;
		color:#a33;
		text-align:right;
}
table.pay-total .camp-price{
		text-align:right;
}
table.camp .total{
			text-align:right;
}
.camp-cp input[type="text"] {
    border-radius: 3px;
    height: 28px;
    font-size: 15px;
    padding-left: 10px;
    min-width: 200px;
    background: #F7F8F9;
    border: solid 2px #DEDFE0;
   }    
.camp-cp input[type="button"] {
	    height: 28px;
	    background:#666;
	    color:#fff;
	    font-size: 15px;
	    border-radius:3px;
	    border:0px;
	    padding:0px 15px;
}
.camp-cp input.cp-done{
	background:orange !important;
}
table.pay-total td{
	background:#eee !important;
}
.next{
	margin-top:30px;
	text-align:center;
	
}
.next input {
background: #999999;
    border: 2px solid #999999;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    font-size: 120%;
    padding: 15px;
    text-decoration: none;
    vertical-align: middle;
    margin: 5px;
    letter-spacing: 2px;
}
.next input:hover{
	 background: #333;
	     border: 2px solid #333;
}


/* table responsibe */
@media screen and (min-width: 768px) {
	table.camp-detail td.camp-time{
	width:30%;
	background:#ddd;
}
table.camp-detail td.white-border{
	border-bottom:1px solid #fff;
}
table.camp-detail td.camp-cp{
	text-align:left;
}
table.camp td.total{
	width:80%;
}
table.camp td.product-name{
	width:450px;
}
table.camp td.camp-name{
	width:300px;
}
table.camp .camp-price, table.pay-total .camp-price{
	padding-right:30px;
}
table.pay-total td.total{
	border:0px;
	width:80%;
}
}
@media screen and (max-width: 768px) {
table.table01 thead {
	display:none;
}
table.table01 tbody th {
	display:block;
}
table.table01 tr{
		border-bottom:10px solid #fff;
}
table.table01 tbody td.total{
	text-align:center;
}
table.table01 tbody td {
	display:block;
}
table.table01 tbody td::before {
	content: attr(label);
	float: left;
	clear:both;
	font-weight:bold;
	width:100%;
	border-bottom:#eee;;
}
  .product-name{
	text-align:center !important;
}
.product-name .btn{
	text-align:center;
	float:none;
}
}
/* responsibe end */

/**/
.head_btn .btn{
	margin-top:10px !important;
	text-align:left !important;
}
.head_btn .btn input{
	padding:5px 30px;
}
/**/
.btn{
	margin-top:30px;
	text-align:center;
	
}
.btn input {
    background: #333;
    border: 0px;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    font-size: 100%;
    padding: 15px 0;
    text-decoration: none;
    padding:10px 20px;
/*    min-width: 120px;*/
    vertical-align: middle;
    margin: 5px;
	letter-spacing:2px;
}
.btn input:hover{
	 background: #666;
    border: 0px;
}

.ml60{
	margin-left:60px;
}
.txt{
	margin-left:20px;
}

select::-ms-expand {
    display: none;
}
input:invalid{
	background:#F4D4D4;
	border:solid 2px #FF6666;
}


/*ヘッダー*/

#headerwrap{
	height:105px;
	background:url(../img/headbottom.jpg) repeat-x;
	background-position:bottom;
}
#header{
	width:990px;
	margin:0 auto;
}
#header .logo{
	padding:15px 30px;
	
}


/*---------商品選択・お客様情報上--------*/
#content{
	width:990px;
	margin:0 auto;
	margin-bottom:80px;
}


/*********status*********/
#content .status {
  display: table;
  margin: 20px auto 30px;
  width: 94%;
}
#content .status li {
  background-color: #E8E8E8;
  display: table-cell;
  font-size: 110%;
  padding: 13px 0;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 20%;
  text-decoration: none;
}

#content .status a{
  text-decoration: none;
}

#content .status li br {
  display: none;
}
#content .status li:first-child {
  border-radius: 5px 0 0 5px;
}
#content .status li:first-child:before {
  display: none !important;
}
#content .status li:last-child {
  border-radius: 0 5px 5px 0;
}
#content .status li:last-child:after {
  display: none !important;
}
#content .status li:before, #content .status li:after {
  background-position: 0 0;
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
  height: 48px;
  width: 30px;
  content: "";
  background-image: url(../img/statusBg02.png);
  position: absolute;
  top: 0px;
  right: -20px;
  z-index: 5;
}
#content .status li:before {
  background-image: url(../img/statusBg03.png);
  display: none;
  right: auto;
  left: -10px;
}
#content .status li.now {
  background-color: #01A7D3;
  color: #fff;
}
#content .status li.now:after {
  background-image: url(../img/statusBg01.png);
}
#content .status li.now:before {
  display: block;
}

/*orderdetail*/

.orderdetail{
	margin:30px;
}
.orderdetail h2{
	font-size:18px;
	font-weight:bold !important;
	padding-bottom:6px;
	border-bottom:3px solid #333;
	font-weight:normal;
	margin:40px 0px 30px;
}
.detail{
	margin-top:15px;
}
.detail table{
	border:solid 1px #CCCCCC;
	width:930px;
}
.detail table tr th{
	background:#F0F0F0;
	padding:20px;
	font-size:15px;
	font-weight:normal;
	border-right:solid 1px #ccc;
}
.detail table tr td{
	padding:20px;
	vertical-align:middle;
	text-align:center;
	border-right:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
}
.detail table tr td.total{
	text-align:right;
}
.detail table tr td.number{
	text-align:right;
}
.detail table tr td.number input{
	height:24px;
	width:94px;
	font-size:15px;
}

/*--------------お客様情報入力-------------------*/

.customarea{
	margin:30px;
}
.error{
	background:#FF6666;
	border:solid 1px #FF2424;
	padding:15px;
	color:#fff;
	margin:20px 0;
}
.representative{
	margin-top:30px;
}
.representative h2{
	font-size:20px;
}
.representative table {
	width:930px;
	margin:20px 0;
}
.representative table tr th, .representative table tr td{
	padding:20px 0;
}
.representative table tr th{
	text-align:left;
	width:20%;
	font-weight:normal;
}
.required{
	background:#D24C4C;
	border:solid 1px #D24C4C;
	border-radius:5px;
	color:#fff;
	padding:5px 10px;
	font-size:13px;
	margin-right:10px;
}

.representative input{
	background:#F7F8F9;
	border:solid 2px #DEDFE0;
	border-radius:5px;
	height:36px;
	font-size:15px;
	padding-left:10px;
	
}

.atend{
	border:solid 1px #ccc;
	padding:20px;
	
}
.atend p{
	font-size:13px;
}
.atend p span{
	color:#CC0033;
}
input[type="text"]:focus {
  border: 2px solid #666666;
  outline: 0;
  border-radius:5px;
  background:#fff;
}
input[type="email"]:focus {
  border: 2px solid #666666;
  outline: 0;
  border-radius:5px;
  background:#fff;
}
input[type="tel"]:focus {
  border: 2px solid #666666;
  outline: 0;
  border-radius:5px;
  background:#fff;
}
.user h2{
	font-size:20px;
}
.usertxt{
	margin-top:20px;
}
.same{
	margin-top:30px;
}

.same label {
    padding-left:30px;           /* ラベルの位置 */
    font-size:15px;
    line-height:20px;
    display:inline-block;
    cursor:pointer;
    position:relative;
}

/* ボックスのスタイル */
.same label:before {
    content:'';
    width:17px;           /* ボックスの横幅 */
    height:17px;           /* ボックスの縦幅 */
    display:inline-block;
    position:absolute;
    left:0;
    background-color:#fff;
    border:solid 1px #999999;
    border-radius:6px 6px 6px 6px;
}
/* 元のチェックボックスを表示しない */
.same input[type=checkbox] {
    display:        none;
}
/* チェックした時のスタイル */
.same input[type=checkbox]:checked + label:before {
    content:        '\2713'; /* チェックの文字 */ 
    font-size: 20px;           /* チェックのサイズ */
    color:#fff;           /* チェックの色 */
    background-color:#999;           /* チェックした時の色 */
}

.user table{
	width:930px;
	margin-top:30px;
	border: solid 1px #CCCCCC;
}
.user table tr th{
	background:#01A7D3;
	color:#fff;
	vertical-align:middle;
	width:50px;
	font-weight:normal;
}
.user table tr td{
	padding:15px 20px;
	border-bottom:solid 1px #ccc;
	border-left:solid 1px #ccc;
}
.user .required{
	float:right;
}

.user input {
    background: #F7F8F9;
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 30px;
    font-size: 15px;
    padding-left: 10px;
	margin-top:10px;
	width:384px;
}
.receipt{
	margin-top:40px;
}
.receipt h2{
	font-size:20px;
}
.receipt p{
	margin-top:20px;
}

.receiptarea input {
    background: #F7F8F9;
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 36px;
    font-size: 15px;
    padding-left: 10px;
	margin-top:15px;
	width:505px;
}
.howpay{
	margin-top:40px;
}
.howpay h2{
	font-size:20px;
}
.howpay p{
	margin-top:20px;
}
.payarea img{
	vertical-align:middle;
}
.payarea input{
	margin:20px 10px;
}
.questionnaire{
	margin-top:40px;
}
.questionnaire h2{
	font-size:20px;
}
.questionnaire table{
	    width: 930px;
    margin: 20px 0;
}
.questionnaire table tr th {
    text-align: left;
    width: 20%;
	font-weight:normal;
	vertical-align:middle;
}

.questionnaire table tr th, .questionnaire table tr td {
    padding: 20px 0;
	
}
.questionnaire input {
    background: #F7F8F9;
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 36px;
    font-size: 15px;
    padding-left: 10px;
}
.questionnaire select {
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 36px;
    font-size: 15px;
    padding-left: 10px;
	color:#777;
	width:530px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(../img/icon_arrow.png) 97% 50% no-repeat;
	background: url(../img/icon_arrow.png) 97% 50% no-repeat;
	background-color: #F7F8F9;
}

.questionnaire textarea{
	vertical-align:middle;
	background: #F7F8F9;
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 154px;
    font-size: 15px;
    padding:20px 10px;
	color:#777;
	width:510px;
}
select:focus, textarea:focus{
  border: 2px solid #666666;
  outline: 0;
  border-radius:5px;
  background:#fff;
}

/*---------------お支払い情報入力----------------*/
.payinfoarea{
	margin:30px;
}
.creditinfo p{
	margin-top:20px;
}
.creditinfo table{
	    width: 930px;
    margin: 0;
}
.creditinfo table tr th {
    text-align: left;
    width: 20%;
	font-weight:normal;
	vertical-align:middle;
}

.creditinfo table tr th, .creditinfo table tr td {
    padding: 20px 0;
	
}
.creditinfo input {
    background: #F7F8F9;
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 36px;
    font-size: 15px;
    padding-left: 10px;
}
.creditinfo select {
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 36px;
    font-size: 15px;
    padding-left: 10px;
	color:#777;
	width:80px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(../img/icon_arrow.png) 97% 50% no-repeat;
	background: url(../img/icon_arrow.png) 97% 50% no-repeat;
	background-color: #F7F8F9;
}
 .creditinfo select:focus{
  border: 2px solid #666666;
  outline: 0;
  border-radius:5px;
  background:#F7F8F9;
}
/*--------お支払い情報確認-----------*/
.btn input.done{
	width:218px;
}
.confirmation{
	background:#DEDFE0;
	border-radius:5px;
	padding:10px;
	width:240px;
}
.credconfirm p{
	margin-top:20px;
}
.credconfirm table{
	    width: 930px;
    margin-top: 30px;
}
.credconfirm table tr th {
    text-align: left;
    width: 20%;
	font-weight:normal;
	vertical-align:middle;
}

.credconfirm table tr th, .credconfirm table tr td {
    padding: 20px 0;
	
}
/*-----------完了-----------*/
.donepage{
	margin:30px;
}
.donepage p{
	text-align:center;
	margin-top:30px;
	font-size:20px;
}
.donepage p.order_no{
	margin-top:130px;
}
.donepage p.serialcode{
	margin-top:14px;
	font-size:16px;
}
.tousersite{
	background:#01A7D3;
	border-radius: 10px;
	cursor: pointer;
    font-size: 23px;
	vertical-align: middle;
    letter-spacing: 0.1em;
	text-align:center;
	margin: 0 auto;
	margin-top:30px;
	width:280px;
	
}

.tousersite a{
	color:#fff;
	text-decoration:none;
	font-weight:normal;
	display:block;
	 padding: 20px 0;
	 cursor:pointer;
}
.tousersite a:hover{
	background:#006582;
	border-radius: 10px;
}
.totop{
	background:#999999;
	border-radius: 10px;
	cursor: pointer;
    font-size: 23px;
	vertical-align: middle;
    letter-spacing: 0.1em;
	text-align:center;
	margin: 0 auto;
	margin-top:125px;
	width:280px;
	
}

.totop a{
	color:#fff;
	text-decoration:none;
	font-weight:normal;
	display:block;
	 padding: 20px 0;
	 cursor:pointer;
}
.totop a:hover{
	background:#333333;
	border-radius: 10px;
}


/*------------------レスポンシブ対応↓css----------------------*/

@media screen and (max-width: 768px) {
input, textarea{
	-webkit-appearance:none;
}
#header{
	width:100%;
}
#content .status{
	width:100%;
	overflow: hidden;
	margin:40px auto 30px;
}
	#content{
		width:100%;
		padding-bottom:60px;
	}
	#content .status li {
/*		font-size:90%;
		padding-left:20px;*/
		font-size: 60%;
		padding-left: 10px;
	}
	.orderdetail{
		margin:20px;
	}
	.detail table{
		width:100%;
	}
	.detail table tr th{
		padding:40px 20px;
		border-bottom:solid 1px #ccc;
	}
	.detail table tr td{
/*		height:82px;*/
		padding:10px;
		vertical-align:middle;
		border-right:none;
	}
	.detail table tr td.price div, .detail table tr td.subtotal div, .detail table tr td.number div{
		margin-top:30px;
		
	}
	.detail table tr td.img div{
		margin-top:10px;
	}
	.detail table tr td.number{
		text-align:center;
	}
	.detail table tr td.number input{
		border:solid 1px #ccc;
		margin-top:25px;
	}

	
	.demo02 { 
		display: block; 
		width: 100%; 
	}
	.demo02 thead{ 
		display: block; 
		float: left;
		overflow-x:scroll;
	}
	.demo02 tbody{ 
		display: block; 
		width: auto; 
		overflow-x: auto; 
	}
	.demo02 th{ 
		display: block;
		width:auto;
	}
	.demo02 tbody tr{ 
		display: inline-block; 
		width:100%;
	}
	.demo02 td{ 
		display: block;
		vertical-align:middle;
	}
	.detail table tr.totalarea {
		margin:20px 0;
		text-align:center;
	}
		.detail table tr.totalarea td{
			display:inline;
			border-bottom:none;
	}
	.detail table .total02{
		text-align:center;
	}
	.btn{
		margin-top:40px;
	}
	.btn input{
/*		width:40%;*/
width:auto;
		font-size:100%;
	}
	.customarea{
		margin:20px;
	}
	.representative table{
		width:100%;
	}
	.representative table tr th, .representative table tr td{
		width:100%;
		display:block;
	}
	.representative table tr th{
		font-weight:bold;
		padding-bottom:10px;
	}
	.representative table tr td{
		padding:0;
	}
	.representative input{
		
	}
	.txtbox520, .txtbox150, .txtbox260{
		width:76%;
	}
	.txtbox100{
		width:30%;
	}
	.txt{
		font-size:13px;
		margin-left:0;
	}
	.user table{
		width:100%;
	}
	.user table tr th, .user table tr td{
		width:100%;
		display:block;
		font-weight:bold;
	}
	.user input{
		width:78%;
	}
	.user table tr th{
		padding:10px 0;
	}
	 .user table tr td{
	 	padding:15px 2%;
		width:96%;
		
	 }
	 .required{
	 	font-size: 12px;
		
	 }
	  .user  .required{
	  	margin-right:0;
		padding: 2px 7px;
		font-weight:normal;
	  }
	  .receiptarea input{
	  	width:96%;
	  }
	  .questionnaire table{
	  	width:100%;
	  }
	  .questionnaire table tr th, .questionnaire table tr td{
	  	width:100%;
		display:block;
	  }
	  .ml60{
	  	margin-left:0;
	  }
	   .questionnaire table tr th{
	   	padding-top:10px;
		padding-bottom:10px;
		font-weight:bold;
	   }
	   .questionnaire table tr td{
	   	padding:0;
	   }
	   .questionnaire select{
	   	width:80%;
	   }
	   .questionnaire textarea{
	   	width:73%;
	   }
	   .questionnaire .txtbox520{
	   	width:93%;
	   }
	   .questionnaire .all{
	   		width:100%;
	   }
	   
	   /*---------------お支払い情報入力----------------*/
.payinfoarea{
	margin:20px;
}
.creditinfo p{
	margin-top:10px;
}
.creditinfo table{
	    width: 100%;
    margin: 0;
}
 .creditinfo table tr th, .creditinfo table tr td{
	  	width:100%;
		display:block;
		 padding: 0;
	  }
 .creditinfo table tr td {
    margin-top: 10px;
	
}
.creditinfo table tr th{
	margin-top:20px;
	font-weight:bold;
}
.creditinfo input {
    background: #F7F8F9;
    border: solid 1px #DEDFE0;
    border-radius: 5px;
    height: 36px;
    font-size: 15px;
    padding-left: 10px;
}
.creditinfo select {
    border: solid 2px #DEDFE0;
    border-radius: 5px;
    height: 36px;
    font-size: 15px;
    padding-left: 10px;
	color:#777;
	width:80px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(../img/icon_arrow.png) 97% 50% no-repeat;
	background: url(../img/icon_arrow.png) 97% 50% no-repeat;
	background-color: #F7F8F9;
}
 .creditinfo select:focus{
	  border: 2px solid #666666;
	  outline: 0;
	  border-radius:5px;
	  background:#F7F8F9;
}

.credconfirm table{
	 width: 100%;
    margin-top: 0px;
}
.credconfirm table tr th, .credconfirm table tr td{
	  	width:100%;
		display:block;
		 padding: 0;
}

 .credconfirm table tr th{
	 	margin-top:20px;
		font-weight:bold;
 }
.confirmation{
	 	width:94%;
		margin-top:10px;
}
.btn input.done{
	 	width:47%;
}
.donepage{
	margin:20px;
}
.donepage p{
	margin-top:60px;
	font-size:16px;
}
.totop{
    font-size: 20px;
	margin-top:60px;
	width:80%;
}
.creditimg:before {
	content: "\A" ;
	white-space: pre ;
}
input[type="radio"]{
	height:20px;
	width:20px;
	border-radius:50%;
	
}
.representative input[type=radio]:checked,
.howpay input[type=radio]:checked{
    content:        '\2713'; /* チェックの文字 */ 
    font-size: 20px;           /* チェックのサイズ */
    color:#333;           /* チェックの色 */
    background-color:#333;           /* チェックした時の色 */
}

	
}
@media screen and (min-width: 420px) and (max-device-width: 768px) {
	.detail table tr td.product-name div{
		margin-top:20px;
	}
	
}
@media screen and (max-width: 583px) {
#content .status{
		width:100%;
		overflow: hidden;
	}
	#content .status li.now:after {
    background-image: url(../img/statusBg01_sp.gif);
}
#content .status li:before, #content .status li:after {
    height: 88px;
    width: 27px;
    background-image: url(../img/statusBg02_sp.gif);
    top: -6px;
}
#content .status li {
    padding: 15px 10px 12px 20px;
	font-size: 70%;
    line-height: 1.4;
}
#content .status li:before{
	background-image: url(../img/statusBg03_sp.gif);
    left: -6px;
}
.txtcode{
	font-size:13px;
}
.txtcode:before {
	content: "\A" ;
	white-space: pre ;
}




}
@media screen and (max-width: 350px){
	#content .status li{
		font-size:80%;
		padding-left:22px;
	}
}