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


body{
	background-image: url('../img/backg.jpg');
	text-align: center;
}
.main{
	background-color: white;
	width: 80%;
	margin: 0 10% 0 10%;
}
/* .border{
	border-left: #afafaf solid 2px;
	border-right: #afafaf solid 2px;
	border-bottom: #afafaf solid 2px;
} */
.header{
	font-size: 0;
}
.header2{
	display: none;
}
.header img{
	width: 80%;
}
.div1 .text1{
	color: #8665ff;
	text-align: center;
	padding: 5% 0 2% 0  ;
	margin: 0%;
	font-size: 2.5rem;
	font-weight: bolder;
}
.div1 .title{
	max-width: 200px;
}
.div1 .text2{
	font-size: 1.4rem;
	margin: 5%;
}
.div1 .span1{
	font-size: 2rem;
}
.div1 span{
	color: red;
	font-weight: bolder;
}
.div1 .text5{
	margin: 0 0 5% 0;
	font-size: 1.4rem;
}
.div1 .img1{
	max-width: 400px;
	width: 30%;
}
.div1 .img3{
	width: 80%;
}
.div1 .text3{
	font-size: 1rem;
}
.div1 .text6{
	font-size: 1.2rem;
}
.rem18{
	color: red;
	margin: 0%;
	font-size: 1.8rem;
}
.text4{
	background-color: rgb(208, 208, 238);
	padding: 5% 0 10% 0;
}
.umekomi{
	margin: 5%;
}
.text4 img{
	width: 100%;
	max-width: 1400px;
}
.text4 p{
	font-size: 1.0rem;
	font-weight: bolder;
}
.img2{
	width: 40%;
	min-width: 300px;
}
.btn1 img{
	max-width: 300px;
	width: 100%;
}
.btn2{
	padding: 0 0 10% 0;
}
.btn2 img{
	max-width: 300px;
	width: 100%;
	margin: 0 0 5% 0 ;
}
.div2 img{
	width: 30%;
	min-width: 300px;
}
.div2{
	margin: 10% 10% 3% 10%;
}
.red{
	font-size: 1.4rem;
	font-weight: bolder;
	color: red;
}

.warning{
	text-align: left;
	padding: 10%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.paypal img{
	width: 60%;
	padding: 0 20%;
}
.otoiawase{
	padding: 2% 5%;
	text-align: left;
	border: #7982d8 solid 3px;
}
.div3{
	background-color: rgb(208, 208, 238);
	padding: 10% 0;
}
.div3 h2{
font-size: 1.5rem;
}
.div3 .text5{
	font-size: 1.4rem;
}
.div3 .text8{
	color: red;
	border: red solid 2px;
	margin: 0 25% 3% 25%;
}
.div3 .span1{
	background-color: antiquewhite;
	font-size: 1.6rem;
	color: red;
	font-weight: bolder;
	padding: 1%;
	border-radius: 25%;
	border: #efc231 solid 3px;
}
.div3 .img3{
	width: 60%;
}
.div3 .img4{
	width: 30%;
	min-width: 150px;
}

footer{
	width: 100%;
	background: #7c99b1;
	padding: 60px 0 5px 0;
	margin: 0 0 60px 0;
}
footer .address{
	text-align: left;
	width: 25%;
	margin: 0 0 0 15%;
}
footer .address img{
	width: 160px;
	margin: 0;
}
footer .address p{
	margin: 0;
}
footer .about-clover{
	width: 70%;
}
footer .about-clover a{
	margin: 0 0 0 30px;
}
footer .about-clover a:link{
	color: rgb(250, 235, 158);
	text-decoration: none;
}
footer .about-clover a:hover{
	color: #0000ff;
}
footer .footer-block{
	display:flex;
	align-items: center;
}
footer p.copyright{
	width: 100%;
	text-align: center;
	font-size: 14px;
}
.media{
	display: none;
}
/* ================================================================================== */

@media screen and (max-width: 1100px) {
	.main{
		width: 100%;
		margin: 0;
	}
	.text4 p{
		font-size: 1.2rem;
	}
	.header img{
		width: 100%;
	}
	.header2{
		display: grid;
	}
	.header1{
		display: none;
	}
	.border{
		border-left: #afafaf solid 0px;
		border-right: #afafaf solid 0px;
		border-bottom: #afafaf solid 0px;
	}
	/* ============ footer ============ */
	footer{
		padding: 5% 0 5% 0;
		margin: 0 0 5% 0;
		font-size: 80%;
	}
	footer .address{
		width: 50%;
		margin: 0 0 0 10%;
	}
	footer .address img{
		width: 50%;
	}
	footer .about-clover{
		width: 50%;
	}
	footer .about-clover a{
		margin: 0 0 0 15%;
	}
	footer p.copyright{
		font-size: 60%;
	}
	.media{
		display: contents;
	}
}
/* ================================================================================== */
@media screen and (max-width: 860px) {
	.div3 .text8{
		margin: 0 2% 13% 2%;
	}
}


@media screen and (max-width: 660px) {
	.paypal img{
		width: 100%;
		padding: 0 %;
	}
	.text4 p{
		font-size: 1rem;
	}

	.warning img{
		width: 100%;
		padding: 0 %;
	}

	.border img{
		width: 100%;
		padding: 0 %;
	}
}