/*-----------------------------------------------------------------------------------*/
/*	1.	CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 62.5%;
	font: inherit;
	vertical-align: baseline;
	font-family: sans-serif ;
	font-style: normal;
	line-height:1.5;
}

@media screen and (min-width: 801px) {

body {
background-color: #ffffff;
	
}



header {
	color: #ffffff;
}

.top-image img {
	text-align: center;
	width: 100%;
    height: auto;
}

main {
	width: 100%;
}

.area1 {
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	padding-left: 0px;
	padding-right: 0px;
	width: 80%;
}

.area11 {
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	padding-left: 0px;
	padding-right: 0px;
	width: 80%;
}

.text01 {
	color: #000000;
	font-family: 'Caveat', Arial;
	font-size: 36px;
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 50px;
	font-weight: bold;
	text-align: left;
	
}

a.short {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #ff0000;
	text-decoration: none;

}

a.short:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #ff0000;
	text-decoration: none;
}

.short {
	text-align: left;
	margin-left: 37%;
}


.area2 {
	display: inline-block;
	width: 45%;
	vertical-align: top;
}

.text02 {
	color: #000000;
	font-family: serif, "ヒラギノ明朝";
	font-size: 13px;
	text-align: left;
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 50px;
}

.jun {
	color: #000000;
	font-family: 'Caveat', Arial;
	font-size: 25px;
	text-align: left;
}

.area3 {
	display: inline-block;
	width: 45%;
	vertical-align: top;
}


hr {
	width: 75%;
}


.area4 {

	margin-top: 100px;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	width: 80%;
}



.area5 {
	display: inline-block;
	width: 45%;
	vertical-align: top;
}

.photo {
	margin-left: 50px;
	margin-right: 50px;
	padding-left: 0px;
	padding-right: 0px;
	width: 	80%;
	text-align: left;
}



.area6{
	display: inline-block;
	width: 45%;
	vertical-align: top;
}

.text03 {
	color: #000000;
	font-family: Arial;
	font-size: 2vw;
	font-weight: bolder;
	text-align: left;
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 0;
	margin-bottom: 10px;
}

.text04 {
	color: #000000;
	font-family: Arial;
	margin-left: 50px;
	margin-right: 50px;
	font-size: 1vw;
	text-align: left;
}

.text05 {
	color: #000000;
	font-family: Arial;
	margin-left: 50px;
	margin-right: 50px;
	font-size: 13px;
	text-align: left;
}

.link {
	margin-left: 50px;
	margin-right: 0;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 90%;
}


a.btn_01 {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 1rem 0rem;
	font-weight:normal;
	border: 1px solid #000000;
	color: #000000;
	transition: 0.5s;
	font-size: 13px;
	
}

a.btn_01:hover {
	color: #fff;
	background: #000000;
}

a.btn_02 {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 1rem 0rem;
	font-weight:normal;
	border: 1px solid #000000;
	color: #ff0000;
	transition: 0.5s;
	font-size: 18px;
	font-family: 'Caveat', Arial;
	font-weight: bolder;
}

a.btn_02:hover {
	color: #fff;
	background: #000000;
}

a.btn_03 {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 1rem 0rem;
	font-weight:normal;
	border: 1px solid #000000;
	color: #ff0000;
	transition: 0.5s;
	font-size: 18px;
	font-family: Arial;
	font-weight: bolder;
}

a.btn_03:hover {
	color: #fff;
	background: #000000;
}


.area7{
	margin-top: 100px;
	margin-left: 50px;
	margin-right: 0;
	margin-bottom: 100px;
	padding-left: 0px;
	padding-right: 0px;
	width: 80%;
}


.area8{
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	padding-left: 0px;
	padding-right: 0px;
	width: 80%;
}

.area9{
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	padding-left: 0px;
	padding-right: 0px;
	width: 70%;
}


  .photo2 {
	margin-left: auto;
	margin-right: auto;
  }

  footer {
	color: #ffffff;
	background-color: #000000;
	font-family: Arial;
	font-size: 16px;
	text-align: center;
  }

}


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

  body {
	background-color: #ffffff;
		
	}
	
	
	
	header {
		color: #ffffff;
	}
	
	.top-image img {
		text-align: center;
		width: 100%;
		height: auto;
	}
	
	main {
		width: 100%;
	}
	
	.area1 {
		margin-top: 100px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
	}
	
	.text01 {
		color: #000000;
		font-family: 'Caveat', Arial;
		font-size: 36px;
		margin-top: 50px;
		margin-left: 50px;
		margin-right: 50px;
		font-weight: bold;
		text-align: left;
	}



	a.short {

		font-family: Arial, Helvetica, sans-serif;
		font-size: 17px;
		color: #ff0000;
		text-decoration: none;

	
	}
	
	a.short:hover {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		color: #ff0000;
		text-decoration: none;
		
	}
	
	.short {
		text-align: left;
		margin-top: 10px;
		
	}
	
	.area2 {
		width: 100%;
		vertical-align: top;
	}
	
	.text02 {
		color: #000000;
		font-family: serif, "ヒラギノ明朝";
		font-size: 13px;
		text-align: left;
		margin-top: 50px;
		margin-left: 50px;
		margin-right: 50px;
	}
	
	.jun {
		color: #000000;
		font-family: 'Caveat', Arial;
		font-size: 25px;
		text-align: left;
	}
	
	.area3 {
		width: 100%;
		vertical-align: top;
	}
	
	
	hr {
		width: 90%;
	}
	
	
	.area4 {
	
		margin-top: 100px;
		margin-bottom: 50px;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
	}
	
	
	
	.area5 {

		width: 100%;
		
	}
	
	.photo {

		margin-left: 50px;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		width: 	80%;
	}


	
	
	
	.area6{
		width: 100%;
		
	}
	
	.text03 {
		color: #000000;
		font-family: Arial;
		font-size: 20px;
		font-weight: bolder;
		text-align: left;
		margin-left: 50px;
		margin-right: 50px;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	.text04 {
		color: #000000;
		font-family: Arial;
		margin-left: 50px;
		margin-right: 50px;
		font-size: 13px;
		text-align: left;
	}
	
	.text05 {
		color: #000000;
		font-family: Arial;
		margin-left: 50px;
		margin-right: 50px;
		font-size: 13px;
		text-align: left;
	}
	
	.link {
		margin-left: 50px;
		margin-right: auto;
		margin-top: 50px;
		margin-bottom: 50px;
		width: 80%;
		
	}
	
	
	a.btn_01 {
		display: block;
		text-align: center;
		text-decoration: none;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		padding: 1rem 0rem;
		font-weight:normal;
		border: 1px solid #000000;
		color: #000000;
		transition: 0.5s;
		font-size: 13px;
		
	}
	
	a.btn_01:hover {
		color: #fff;
		background: #000000;
	}

	a.btn_02 {
		display: block;
		text-align: center;
		text-decoration: none;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		padding: 1rem 0rem;
		font-weight:normal;
		border: 1px solid #000000;
		color: #ff0000;
		transition: 0.5s;
		font-size: 18px;
		font-family: 'Caveat', Arial;
		font-weight: bolder;
	}
	
	a.btn_02:hover {
		color: #fff;
		background: #000000;
	}
	
	
	.area7{
		margin-top: 100px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
	}
	
	
	.area8{
		margin-top: 100px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
	}

	.area9{
		margin-top: 100px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;
		padding-left: 0px;
		padding-right: 0px;
		width: 90%;
	}
	
	
	  .photo2 {
		margin-left: 50px;
		margin-right: 50px;
	  }
	
	  footer {
		color: #ffffff;
		background-color: #000000;
		font-family: Arial;
		font-size: 16px;
		text-align: center;
	  }

	}