@charset  "utf-8";
/* CSS Document */
body {
	color: #353535;
	font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', メイリオ,Meiryo,'MS PGothic','MS UI Gothic',Helvetica,Arial,sans-serif;
	line-height: 1.8;
	background: #ffffff;
	font-size: 16px;
}

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

　　　　↓ヘッダー↓

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

header {
    width: 100%;
    text-align: center;
	background: #fff;
	box-shadow: 0px 10px 10px #aaa;
}

.step {
    background-color: #f7f7f7;
    text-align: center;
    padding: 4% 1em 2.5%;
    
}
.step_in{
	display: flex;
	justify-content: space-between;
	justify-items: start;
	position: relative;
	max-width: 17em;
	margin: 0 auto;
}

.step_n{
	background-color:#52657c;
	color: #fff;
	border-radius: 30px;
	font-size: 1.3em;
	padding: 0.6em 0.75em;
	display: inline-block;
	line-height: 1;
	width: 0.6em;
	height: 0.9em;
}
.step_n.now_page{
	background-color:#297ee5;
}

.step_t{display: block;font-size: 12px;}
.step1,.step2,.step3{
	z-index: 9999;
}
.step_in:after{
	content:"";
	width: 100%;
	position: absolute;
	height: 3px;
	background: #52657c;
	top: 1.4em;
}

@media screen and (max-width: 700px) {
	.step {
		font-size: 13px;		
	}
}

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

　　　　↓全体レイアウト↓

===========================================================================*/
#content {
	max-width: 800px;
	margin: 0 auto 4em;
	background-color: #fff;
}



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

　　　　↓テーブル↓

===========================================================================*/
table.formTable  {
	padding:0 1em;
}

table.formTable tr {
	margin-bottom: 1.7em;
}

table.formTable.check tr {
	border-bottom: dotted 1px rgb(212, 212, 212);
}

table.formTable  th {
	text-align: left;
	padding: 1.5em 1em 0.5em;
	vertical-align: top;
	font-weight: bold;
	width: 11em;
}

table.formTable  tr th.addr {
	width: 6em;
}

table.formTable  td {
	padding: 1em 0.5em 0.5em;
	text-align: left;
}

@media screen and (max-width: 700px) {
	
	table.formTable,table.formTable tr,table.formTable th,table.formTable td,table.formTable tbody,caption {
        width: 100%;
        display: block;
        box-sizing: border-box;
 }

 table.formTable tr {
	    margin-bottom: 0.7em;
	}

	table.formTable th {
		padding: 0em 0.5em 0em;
	}
	table.formTable td {
		padding: 0em 0.5em 0em;
	}
	table.formTable  tr th.addr {
	width: 100%;
}

	
}


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

　　　　↓テーブル（購入商品）↓

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


table#item_list_table {
	margin-bottom: 1.7em;
}

table#item_list_table tr {
	border-bottom: solid 1px #eef4fb;
}

table#item_list_table th {
	padding: 0.5em 1em;
	vertical-align: top;
	font-weight: bold;
	background-color: #eef4fb;
}

table#item_list_table td {
	padding: 0.5em 1em;
}

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

	.product-cart {
        padding: 0 1em;
    }

    table#item_list_table{
    	font-size:80%;
    }

	table#item_list_table th {
		padding: .5em;
		border: 0;
	}
	table#item_list_table td {
	    padding: 0.5em 0.5em;
    }
    table#item_list_table th {
	    padding: 0.5em 1em;
    }
	table#item_list_table th .item_name{
		width:40%;
	}
}



.hissu {
    font-size: 80%;
	color: #f30000;
	margin-left: 1em;;
	font-weight: normal;
}


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

　　　　↓font↓

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



.title1 {
    text-align: center;
    font-size: 2em;
    padding: 0.6em 0 0.4em 0;
    border-bottom: solid 1px #eef4fb;
    margin-bottom: 0.8em;
}

.title2 {
    font-size: 1.1em;
    margin-bottom: 0.3em;
    font-weight: bold;
}
.item_name{
	font-weight: bold;
}
#total_price_html{
	font-weight: bold;
	color: red;
	font-size: 1.1em;
}

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

　　　　↓フォーム↓

===========================================================================*/
input[type="text"],input[type="email"],input[type="tel"] {
	padding: 0.7em 0.9em;
	font-size: 100%;
	margin: 0;
	border-radius: 5px;
	box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
	background-color:#fff;
	border: none;
}

input[type="button"] {
	position: relative;
	padding: 1.1em 1em 1em;
	min-width: 17em;
	border-radius: 5px;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.2em;
	background: #2a9700;
	border: none;
	background: -moz-linear-gradient( #35bc00 0%, #2a9700 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#35bc00), to(#2a9700));
	background: -webkit-linear-gradient( #35bc00 0%, #2a9700 100%);
	background: -o-linear-gradient( #35bc00 0%, #2a9700 100%);
	background: -ms-linear-gradient( #35bc00 0%, #2a9700 100%);
	background: linear-gradient( #35bc00 0%, #2a9700 100%);
}

.back_btn input {
	background: #7e7e7e;
	background: -moz-linear-gradient( #9e9e9e 0%, #7e7e7e 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#7e7e7e));
	background: -webkit-linear-gradient( #9e9e9e 0%, #7e7e7e 100%);
	background: -o-linear-gradient( #9e9e9e 0%, #7e7e7e 100%);
	background: linear-gradient( #9e9e9e 0%, #7e7e7e 100%);
}

.next_btn,.back_btn{
	position: relative;
	color: #fff;
	width: fit-content;
}

.next_btn::after {
    content: "▶";
    position: absolute;
    top: 1.5em;
    right: 0.9em;
    font-size: 0.9em;
}

.back_btn::before {
    content: "◀";
    position: absolute;
    top: 1.5em;
    left: 0.9em;
    font-size: 0.9em;
    z-index: 9999;
}

.btn2ko{
	display: flex;
	justify-content: space-between;
	justify-items: normal;
}
  

input[type="button"]:hover {
	opacity: 0.8;
}

label:hover {
	background-color: #FFEFB7;
	cursor: pointer;
	border-radius: 6px;
}

#customer_post{
	width: 7em;
}

.horizontal-item{
	margin-right: 1em;
}