@charset "UTF-8";

#article  {
	width: 980px;
}
/* セクション1
------------------------------------------------------------*/
#section1 {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.top-img{
	position: relative;
	width: 500px;
	margin-top: 80px;
	text-align: center;
	margin-left: 135px;
}

#h3{
	font-size: 28px;
	line-height: 40px;
}

.h3-p {
	font-size: 18px;
	height: auto;
	margin-top: 50px;
	text-align: center;
	}

.section1-div1{
		width: 800px;
	margin-left: auto;
	margin-right: auto;
}




/* セクション2
------------------------------------------------------------*/
#section2 {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

.hr{
	border-top: 7px solid;
	color: yellow;
	margin-top: 50px;
	margin-bottom: 50px;
	}
.section2-div1{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

.section2-div2{
	float: left;
	width: 200px;
	margin-top: -50px;
	text-align: center;
	margin-left: 33px;
	margin-right: 33px;
	margin-bottom: 25px;
	}

.h3-1{
	font-size: 28px;
	margin-bottom: -15px;
	text-align: center;
	}

.img{
	width: 200px;
	}


.btn-gradient-radius {
	width: 200px;
	height: 30px;
	margin-top: 20px;
	display: inline-block;
	text-align: center;
	border-radius: 25px;
	text-decoration: none;
	color: #000;
	transition: .4s;
	background-color: #FFF;
	box-shadow: 0 0 8px gray;
	font-size: 14px;
	font-weight: normal;
	padding-top: 3px;
}

.btn-gradient-radius:hover {
    text-decoration: none;
    background-color: #FEF263;
    font-size: 15px;
    letter-spacing: 1px;
}



/* セクション3
------------------------------------------------------------*/
#section3 {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 500px;
}

.section3-div1{
	width:  100%;
}

.balloon {
	position: relative;
	margin-top: 45px;
	margin-bottom: 45px;
	margin-left: auto;
	margin-right: auto;
	width: 750px;
	height: 170px;
    color: #555;
    background-color: #FFF;
    border-radius: 15px;
	box-shadow: 0 0 8px gray;
}

.balloon-hr{
	border-top-width: 25px;
	border-top-color: yellow;
	opacity: 0.2;
	box-shadow: none;
	margin-bottom: -5px;
	}

.balloon-img{
	margin-left: 25px;
	margin-bottom: -45px;
}

#h4{
	margin-left: 25px;
	margin-top: -10px;
    margin-bottom: -7px;
    font-size: 18px;
    color: #FF0004;
}
.h4-p {
	text-align: justify;
	margin-left: 25px;
	margin-right: 25px;
}

.h4-img{
	margin-top: 10px;
	margin-bottom: -8px;
	margin-left: -10px;
}


/* セクション4
------------------------------------------------------------*/

#section4 {
	width: 800px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
}

.section4-div1{
	width: 600px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

.section4-div2{
	float: left;
	width: 200px;
	text-align: center;
	margin-bottom: 10px;
	transition: all  1s ease;
}

.section4-div2:hover {
	background-color: #FF6347;
}
.h3-2{
	font-size: 20px;
	margin-bottom: 0px;
	text-align: center;
			}


/* セクション5
------------------------------------------------------------*/
#section5 {
	width: 800px;
	height: 300px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

.section5-div1{
	width: 60%;
	height: 230px;
	margin-left: auto;
	margin-right: auto;
    border: thin solid #FF0000;
    border-radius: 20px;
	background-color: #FFF;
}

h5{
    margin-top: 15px;
    margin-bottom: -10px;
    text-align: center;
    font-size: 16px;
    background-color: #FF0004;
    color: #FFFFFF;	
}

.h5-p{
	 margin-left: 30px;
}



			@media screen and (max-width:480px) {
				/* ヘッダー
			------------------------------------------------------------*/
				#article  {
			width: 480px;
		}
		/* セクション1
		------------------------------------------------------------*/
		#section1 {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}

		.top-img{
			position: relative;
			width: 100%;
			margin-top: 50px;
			text-align: center;
			margin-left: -5px;
		}

		#h3{
			font-size: 20px;
			line-height: 36px;
		}

		.h3-p {
			font-size: 16px;
			height: auto;
			margin-top: 50px;
			text-align: center;
			width: auto;
			}

		.section1-div1{
			width: 100%;
/*			margin-left: 3%;
			margin-right: 3%;*/
		}




		/* セクション2
		------------------------------------------------------------*/
		#section2 {
			width: 90%;
			height: 1100px;
			margin-left: auto;
			margin-right: auto;
			}

		.hr{
			border-top: 10px solid;
			color: yellow;
			margin-top: 50px;
			margin-bottom: 50px;
		}
		.section2-div1{
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			}

		.section2-div2{
			float: none;
			width: 100%;
			margin-top: -30px;
			text-align: center;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 50px;
			}
				
		.img{
			width: 60%;
			}

		.h3-1{
			font-size: 20px;
			margin-bottom: -15px;
			text-align: center;
			}

		.btn-gradient-radius {
			width: 60%;
			height: 23px;
			margin-top: 20px;
			display: inline-block;
			text-align: center;
			border-radius: 25px;
			text-decoration: none;
			color: #000;
			transition: .4s;
			background-color: #FFF;
			box-shadow: 0 0 8px gray;
			font-size: 12px;
			font-weight: normal;
			}

		.btn-gradient-radius:hover {
			text-decoration: none;
			background-color: #FEF263;
			font-size: 16px;
			letter-spacing: 1px;
			}



		/* セクション3
		------------------------------------------------------------*/
		#section3 {
			width: 90%;
			height: 800px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 200px;
		}

		.section3-div1{
			width:  100%;
		}

		.balloon {
			background-color: #FFF;
			width: 100%;
			height: 220px;
			margin-top: 20px;
			margin-bottom: 20px;
			float: none;
			
/*			position: relative;
			margin-top: 45px;
			margin-bottom: 45px;
			width: 100%;
			height: 250px;
			color: #555;
			background-color: #FFECB2;
			border-radius: 15px;*/
		}
		
		.balloon-img{
			margin-left: 0;
			margin-top: -20px;
			margin-bottom: -45px;
		}
				
		#h4{
			/*text-align: center;*/
			margin-left: 15px;
			margin-bottom: 12px;
			font-size: 18px;
			line-height:24px;
			color: #FF0004;
		}
				
		.h4-p {
			font-size: 13px;
			text-align: justify;
			line-height: 22px;
			margin-top: 0px;
			margin-left: 15px;
			margin-right: 15px;
		}

		.h4-img{
			margin-top: 8px;
			margin-bottom: -8px;

		}


		/* セクション4
		------------------------------------------------------------*/

		#section4 {
			width: 90%;
			height: 400px;
			margin-left: auto;
			margin-right: auto;
		}

		.section4-div1{
			width: 100%;
			margin-top: 20px;
			margin-left: 5%;
			margin-right: 5%;
		}
				
		.section4-div2{
			float: left;
			width: 45%;
			text-align: center;
			margin-bottom: 10px;
			transition: all  1s ease;
		}

		.section4-div2:hover {
			background-color: tomato;

		}
		.h3-2{
			font-size: 16px;
			margin-bottom: -15px;
			text-align: center;
			}


		/* セクション5
		------------------------------------------------------------*/
		#section5 {
			width: 90%;
			height: 300px;
			margin-top: 20px;
			margin-left: auto;
			margin-right: auto;
		}

		.section5-div1{
			width: 100%;
			height: 220px;
			margin-top: 100px;
			margin-left: auto;
			margin-right: auto;
    		border: thin solid #FF0000;
    		border-radius: 20px;
				}
		.h5{
			margin-top: 13px;
			margin-bottom: 0px;
			font-size: 16px;
			color: #FFF;
			text-align: center;
    		background-color: #FF0004;
		}
				
		.h5-p{
			 margin-left: 5%;
			font-size: 12px;
		}
}