@charset "utf-8";

body{
	display: flex;
	flex-direction: column;
}
/*section .hisu{
	height:30px;
	border-radius: 30px / 20px;
	font-size:0.8rem;
	line-height: 1;
	color:#FFF;
border:2px solid #fff;
background-color:#FF007F;
	padding:0 10px;
	margin-right:5px;
	font-weight: 700;
	display: inline-flex;;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}*/


/*-----------------------

	メイン

-----------------------*/
main{
	background-color: #3DE2FA;	
	flex:1;
}
section{
	padding:50px 0;
	background-color: #3DE2FA;
}

main section .main{
	padding:80px 50px;
	font-weight: 600;
}
h2{
	/*border-bottom:1px solid #03A5BC;*/
	text-align: center;
	color:#0085BE;
	font-size:3.5rem;
	margin-bottom:50px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.1em;
}

h2 span{
	display: flex;
	align-items: center;
	justify-content: center;
}

h2 span::before,
h2 span::after{
	content:"●";
	font-size:1rem;
	letter-spacing: 0;
}

h2 span::before{
	margin-right:30px;
}

h2 span::after{
	margin-left:30px;
}

h2::before,
h2::after{
	content:'';
	flex:1;
	height: 2px;
	display: block;
	background-color:  #0085BE;
		margin-left:0;
}

#goodslogo{
	width:min(70%,250px);
	margin:0 auto 30px auto;
}

#goodslogo img{
	width:100%;
	height: auto;
}

#coment{
	width:100%;
	margin-bottom:30px;
	font-size:1.15rem;
	text-align: center;
}

/*--------------------------------------

	レスポンシブ

--------------------------------------*/

@media only screen and (max-width: 960px) {
	main section .main{
		padding:50px 5vw;
	}
	
	#coment{
		font-size:1.05rem;
	}
}

@media only screen and (max-width: 430px) {
	main section .main{
		padding:30px 10px;
	}
	h2{
		font-size:2rem;
		margin-bottom:30px;
	}
	
	
	h2 span::before{
		margin-right:15px;
	}

	h2 span::after{
		margin-left:15px;
	}

}
/*-----------------------

	商品

-----------------------*/
#goods{
	width:100%;
	margin-bottom:15px;
	background-color: #FAD8EE;
	border-radius:4px;
}

#goods .title{
	width:100%;
	background-color: #CF0E8B;
	border-radius:4px 4px 0px 0px ;
	padding:10px 5px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	color:#fff;
	line-height: 1;
}

#goods  .title .text{
	flex:1;
	font-size:1.05rem;
	text-align: left;
	font-weight: 700;
}

#goods .inner{
	padding:15px 10px;
	display: flex;
	align-items: center;
}

#goods-logo{
	width:200px;
	border-radius: 6px;
	background-color: #fff;
	line-height: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:5px 10px;
	margin-right:2px;
	margin-right:20px;
}

#goods-logo img{
	width:100%;
	height: auto;
}

#goods .text{
	font-size:1.05rem;
}

#goods .text input{
	margin-right:5px;
}



@media only screen and (max-width: 750px) {
	#goods .title{
		display: inline-block;
	}
	
	#goods .inner{
		display: block;
	}
	
	#goods-logo{
		width:100%;
		margin:0 auto 2px auto;
	}
	
	#goods-logo img{
		width:150px;
	}
	
	#goods .inner ul{
		display: block;
	}
	#goods .inner li{
		padding:10px 10px;
	}
	
	#goods .inner li .kanwa{
		display: block;
	}
}

/*-----------------------

	情報

-----------------------*/

#customar table{
	width:100%;
	border-collapse: separate;
	border-spacing: 0 5px;
}

#customar th,
#customar td{
	padding:8px 10px;
	font-weight: 600;
}

#customar th{
	width:250px;
	background-color: #259EE1;
	color:#fff;
	border-radius: 5px 0 0 5px;
}

#customar th.hisu p{
	display: flex;
	align-items: center;
	gap:5px;
}
#customar th.hisu p::before{
	content: "必須";
	height:20px;
	border-radius: 50%;
	font-size:0.8rem;
	line-height: 1;
	color:#FFF;
border:2px solid #fff;
background-color:#FF007F;
	padding:0 10px;
	font-weight: 700;
	display: inline-flex;;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#customar td{
	background-color: #ECF7FD;
	border-radius: 0 5px 5px 0;
}

#customar td p{
	margin-top:5px;
}

#customar td p.setumei{
	font-size:0.85rem;
}

#customar th .text-item{
	display: table-cell;
	vertical-align: middle;
	text-align:left;
	color:#FFF;
	padding-left:3px;

}

/*--------------------------------------

	レスポンシブ

--------------------------------------*/


@media only screen and (max-width: 430px) {
	#customar th,
	#customar td{
		display: block;
		padding:5px;
	}
	
	#customar th{
		padding:0 5px;
		border-radius: 5px 5px 0 0;
	}
	
	#customar td{
			border-radius: 0 0 5px 5px;
	}
	#customar th{
		width:100%;
	}

}

/*-----------------------------------------*/

#customar input[type="text"],
#customar textarea{
	border:1px solid #90D0F3;
	padding:5px 5px;
}

#customar input[type="text"]{
	width:300px;
}

#customar textarea{
	width:100%;
}

@media only screen and (max-width: 750px) {
	#customar input[type="text"],
#customar textarea{
	border:1px solid #79C7F2;
}
	#customar input[type="text"]{
		width:100%;
	}
}

#customar .name{
	width:200px !important;
}

#customar .zip{
	width:50px !important;
}

#customar .tel{
	width:80px !important;
}

#customar select{
	padding:3px;
		border:1px solid #90D0F3;
}

#email{
	width:200px;
}

@media only screen and (max-width: 750px) {
	#customar select{
		border:1px solid #79C7F2;
	}
}

/*-----------------------------------------*/

#dm{
	width:100%;
	/*margin:10px auto 0 auto;*/
	background-color: #ECF7FD;
	padding:10px 8px;
	font-size:0.85rem;
	font-weight: 400;
	border-radius: 5px;
}

#pr{
	width:100%;
	margin:10px auto 0 auto;
	padding:15px 10px;
	line-height: 1.5;
	background-color: #fff;
	border:1px solid #ccc;
	font-size:0.85rem;
	font-weight: 400;
	border-radius: 5px;
}

#pr dt{
	margin-bottom:8px;
}

#pr dd{
	margin-left:1em;
	margin-bottom:10px;
}

#pr dd:last-child{
	margin-bottom:0;
}


#bottan{
width:100%;
background-color: #259EE1;
margin:15px auto 0 auto;
padding:10px 10px;
text-align: center;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:8px;
}

button{
	height: 60px;
	padding:5px 10px;
	background: #0A80B8;
background: -webkit-linear-gradient(bottom, #0A80B8 0%, #0B99DE 100%);
background: -o-linear-gradient(bottom, #0A80B8 0%, #0B99DE 100%);
background: linear-gradient(to top, #0A80B8 0%, #0B99DE 100%);
	border-radius:10px;
	cursor: pointer;
	font-weight: 600;
	border:2px solid rgba(255,255,255,0.93);
	box-shadow: 3px 3px 2px 0px rgba(28,89,116,0.8);
	color:rgba(255,255,255,0.93);
}

#bottan button[type="button"]{
	width:100px;
	font-size:1.2rem;
}
#bottan button[type="submit"]{
	width:250px;
	height: 60px;
	background: #BC0236;
	background: -webkit-linear-gradient(bottom, rgba(188, 2, 54, 1) 0%, rgba(217, 6, 66, 1) 100%);
	background: -o-linear-gradient(bottom, rgba(188, 2, 54, 1) 0%, rgba(217, 6, 66, 1) 100%);
	background: linear-gradient(to top, rgba(188, 2, 54, 1) 0%, rgba(217, 6, 66, 1) 100%);
	color:#fff;
	border:2px solid #fff;
	box-shadow: 3px 3px 2px 0px rgba(28,89,116,0.6);
	font-size:1.5rem;
}

button:hover{
	box-shadow:none;
}

button[type="button"].back{
	width:min(80%,300px);
	height: 40px;
	font-weight: 700;
}

@media only screen and (max-width: 430px) {
	#bottan{
		/*flex-direction: column;*/
	}
	
	#bottan button[type="submit"]{
		width:70%;
	}
	
	#bottan button[type="button"]{
		width:30%;
		font-size:1.1rem;
	}	
}

/*-----------------------

	エラー

-----------------------*/

#err{
	text-align: center;
}

#err h4{
	color:#E71C5B;
	margin-bottom:30px;
}

#err-naiyou{
    margin-bottom:30px;
}

.txt {
    display: inline-block;
    text-align: left;
}

/*-----------------------

	確認

-----------------------*/
#kakunin{
	margin:20px auto 0 auto;
}

#kakunin #coment{
	color:#E71C5B;
}

#kakunin table{
	width:100%;
	border-collapse: separate;
	border-spacing: 0 5px;
}

#kakunin th,
#kakunin td{
	padding:8px 5px;
}

#kakunin th{
	width:200px;
	background-color: #48B8EE;
	color:#fff;
}

#kakunin td{
	background-color: #ECF7FD;
}

#kakunin td p{
	margin-top:5px;
}

@media only screen and (max-width: 750px) {
	#kakunin th,
	#kakunin td{
		display: block;
		padding:5px;
	}
	
	#kakunin th{
		padding:5px;
	}
	#kakunin th{
		width:100%;
	}
}

/*-----------------------

	完了画面

-----------------------*/

#end main{
	width:100%;
	/*flex:1;*/
	padding:30px  0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#end  section{
	width:min(90%,500px);
	margin:0 auto;
}

#end  section img{
	width:100%;
	height: auto;
}

/*-----------------------

	スマートフォン版

-----------------------*/

@media only screen and (max-width: 750px) {
	input,select,textarea{
		font-size:16px;
	}
	#birth{
		margin-bottom:8px;
	}
	#main{
		font-size:16px;
	}
}