@charset "UTF-8";

body {
	background-color: #C4E2FF;
}

#wrapper {
	max-width: 800px;
	margin: 0 auto;
	background-color: #FFF;
	box-shadow: 0px 5px 17px 3px #3574ad;
	-moz-box-shadow: 0px 5px 17px 3px #3574ad;
	-webkit-box-shadow: 0px 5px 17px 3px #3574ad;
}

header {
	position: relative;
	height: 50px;
	margin: 0;
}


a {
	text-decoration:none;
	color: #333333;
}

a:hover {
	text-decoration:none;
	color: #C43C3E;
}

#headerimg {
	background: #333333;
	background-image: url(../../parts/gaiyo/gaiyo.jpg);
	height: 500px;
	margin: 0 auto;
}
#menu_top {
	width: 800px;
	float: left;
	height: 50px;
	background-image: url(../parts/top/top_bar.jpg);
	margin: 0 auto;
		}
.menu {
	width: 800px;
	float: left;
	height: 50px;
	background-image: url(../contents/images/top_bar.jpg);
	margin: 0 auto;
		}
.menu_box {
	width: 109;
	float: left;
	margin: 10px 0px 0px 70px;
}
#index_box {
	width: 741px;
	float: left;
	height: 198px;
	margin: 50px 0px 0px 10px;
	
	}
.top_box {
	width: 500px;
	float: left;
	margin: 50px 0px 50px 150px;
	}
.top_box2 {
	width: 243px;
	float: left;
	height: 513px;
	margin-left: 10px;
	}

.in_box {
	width: 243px;
	float: left;
	}
.in_box2 {
	width: 243px;
	float: left;
	margin-top: 30px;
	}
.top_box2right {
	width: 498px;
	float: left;
	height: 113px;
	background-image: url(../parts/top/illust2.jpg);
	}
.top_box3right {
	width: 498px;
	float: left;
	height: 400px;
	
	}
.in_box3 {
	width: 420px;
	float: left;
	margin: 30px 0px 0px 60px;
	}
	.bottom {
	width: 800px;
	float: left;
	
	}
.map_box {
	width: 700px;
	float: left;
	margin: 50px 0px 0px 50px;
	}

.box2 {
	float: left;
	margin: 50px 0px 0px 50px;
	width: 750px;
	}
	
.box3 {
	width: 750px;
	float: left;
	margin: 0px 0px 0px 50px;
	font-size: medium;
	}
	.box4 {
	float: left;
	margin: 50px 0px 50px 50px;
	width: 750px;
	font-size: medium;
	}
	.box5 {
	margin: 0 auto;
	width: 500px;
	}
	.box6 {
	float: left;
	margin: 50px 0px 50px 0px;
	width: 800px;
	font-size: medium;
	}
.box7 {
	float: left;
	margin: 50px 0px 50px 80px;
	}



/* Footer */
footer_top {
	display: block;
	clear: both;
	height: 49px;
	margin: 20px 0 0 0;
	background-image: url(../contents/images/under_bar2.jpg);
}

footer {
	display: block;
	clear: both;
	height: 49px;
	margin: 20px 0 0 0;
	background-image: url(../contents/images/under_bar2.jpg);
}

#stargazerFooter {
	margin: 50px 0 30px 50px;
}

.footerList {
	display: block;
	clear: both;
	width: 100%;
	text-align: left;
	list-style:none;
	height: 25px;
	color:#BABABA;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #333333;
	letter-spacing: .02em;
	font-style: normal;
	font-weight: 300;
	font-family: source-sans-pro; sans-serif;
	margin: 0 0 0 50px;
}

#subscribeFooter {
	float: right;
	width: 33%;
}

#subscribe {
	margin: 50px 0 30px 0;
}


*:focus {
	outline: none;
}

.newsletter {
	display: block;
}

input, button {
	border: 2px solid #eeeeee;
	height: 46px;
	padding: 5px;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #333333;
	letter-spacing: .01em;
	font-style: normal;
	font-weight: 300;
	font-family: source-sans-pro; sans-serif;
}

input {
	width:200px;
}

button {
	background: #eeeeee;
	text-align: center;
	color: #333333;
	width: 60px;
	height: 60px;
	transition: background, color, .5s ease 0;
}

button:hover {
	background: #DADADA;
	border: 1px #DADADA;
	color: #C43C3E;
}

/* focus */

* {
	margin:0;
	padding:0;
	}


.style1 {

	font-size: 10px;

	color: #FFFFFF;

}

.style2 {

	font-size: 12px;

	letter-spacing: 0.5em;

}

.style3 {

	font-size: 18px;

	font-weight: bold;

	color: #0066CC;

}

.style7 {font-size: 10; letter-spacing: 0.5em; }

.style8 {
	font-size: medium;
	font-weight: bold;
	color: #FF0000;

}

.style9 {

	font-size: 16px;

	color: #FF0000;

}

.style11 {

	font-size: 14px;

	font-weight: bold;

	color: #0066CC;

}
.style11-2 {

	font-size: 14px;
    text-align: right !important; 
	font-weight: bold;
	color: #0066CC;
}
.style20 {font-size: 12; color: #FF0000; }
.style21 {color: #FF0000}
.style22 {font-size: 10px}
.xs {
	font-size: small;
}

.example table {
	width: 300px;
	border: 0px solid;
	border-collapse: collapse;
	height: 175px;
}

.example td {
	border: 2.5px #0cb0e0 solid;
	text-align: center;
	vertical-align: middle;
	font-size: small;
}

.example2 table {
	width: 150px;
	border: 0px solid;
	border-collapse: collapse;
	height: 200px;
}

.example2 td {
	border: 2.5px 	#0cb0e0 solid;
	text-align: center;
	vertical-align: middle;
	font-size: small;
}

.example3 table {
	width: 350px;
	border: 0px solid;
	border-collapse: collapse;
	font-size: small;
	height: 350px;
}

.example3 td {
border: 2.5px 	#0cb0e0 solid;
text-align: center;
vertical-align: middle;
}

.example4 table {
	width: 350px;
	border: 0px solid;
	border-collapse: collapse;
	font-size: small;
}

.example4 td {
border: 2.5px 	#0cb0e0 solid;
text-align: center;
vertical-align: middle;
}

.example5 table {
	width: 350px;
	border: 0px solid;
	border-collapse: collapse;
	font-size: small;
	float: left;
	margin-left: 20px;
}

.example5 td {
border: 2.5px 	#0cb0e0 solid;
text-align: center;
vertical-align: middle;
}

.example6 table {
	width: 300px;
	border: 0px #000000 solid;
	border-collapse: collapse;
	margin: 0 auto;
	margin-top: 20px;
}

.example6 td {
	border: 2.5px #0cb0e0 solid;
	padding: 10px;
}

.example7 table {
	width: 700px;
	border: 0px solid;
	border-collapse: collapse;
	height: 175px;
}

.example7 td {
	border: 2.5px #0cb0e0 solid;
	text-align: center;
	vertical-align: middle;
	font-size: small;
}


.center {
	border: 0px solid;
	margin: 0 auto;
	width: 600px;
}
.img-box {
	float: left;
	height: auto;
	width: auto;
}
.img-box2 {
	float: left;
	height: auto;
	width: auto;
	margin: 0px 0px 0px 50px;
}

.left-box {
	float: right;
	height: auto;
	width: 150px;
	margin: 20px 50px 0px 0px;
	font-size: small;
	text-align: left;
	line-height: 20px;
}
.bottom-box {
	height: auto;
	width: 350px;
	margin: 0 auto;
	font-size: small;
	text-align: left;
}
.option-box {
	height: auto;
	margin: 0 auto;
	width: 349px;
	
}
.coment-box {
	height: auto;
	width: 780px;
	margin: 50px 0px 20px 20px;
	font-size: medium;
	filter: left;
	
}
.coment-box2 {
	height: auto;
	width: 780px;
	margin: 0px 0px 20px 10px;
	font-size: medium;
	
}

.kabe_box {
	width: 800px;

    height: auato
	overflow: hidden;
	margin: 20px 0px 10px 0px;
	float: left;
}
.kabe_box2 {
	width: 400px;
	height: auato
	overflow: hidden;
	margin: 20px 0px 10px 0px;
	float: left;
}
.kabe_box3 {
	width: 200px;
	height: auato
	overflow: hidden;
	margin: 40px 0px 10px 0px;
	float: left;
}


.kabe_box4 {
	width: 750px;


    height: auato
	overflow: hidden;
	margin: 20px 0px 10px 50px;
	float: left;
}
.kabe_box5 {
	width: 220px;
	height: auato
	overflow: hidden;
	margin: 5px 0px 10px 580px;
	float: left;
}
.kabe_box6 {
	width: 750px;


    height: auato
	overflow: hidden;
	margin: 0px 0px 10px 50px;
	float: left;
}


.bar {
	border-bottom: 2.5px solid #0cb0e0;
	margin: 25px 0px 25px 10px;
	float: left;
	width: 780px;
}

 /* ここからONマウスでスライド*/

.sample11 {
	width: 800px;
	height: 299px;
	overflow: hidden;
	margin: 10px 0px 10px 0px;
	position: relative;
}
.sample11 .caption {
	font-size: 130%;
	color: #fff;
	padding-top: 80px;
	padding-left: 0px;
}
.sample11 .mask {
	width: 10%;	/* 画像の半分の大きさにする */
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -50%;	/* 枠の左に置いて表示させない */
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.sample11:hover .mask {
	margin-left:		0px;	/* 右にずらして表示する */
}
.sample11 img {
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample11:hover img {
	margin-left: 10%;	/* 画像を半分サイズ、右にずらす */
}


.sample12 {
	width: 800px;
	height: 400px;
	overflow: hidden;
	margin: 10px 0px 10px 0px;
	position: relative;
}
.sample12 .caption {
	font-size: 130%;
	color: #fff;
	padding-top: 80px;
	padding-left: 0px;
}
.sample12 .mask {
	width: 10%;	/* 画像の半分の大きさにする */
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -50%;	/* 枠の左に置いて表示させない */
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.sample12:hover .mask {
	margin-left:		0px;	/* 右にずらして表示する */
}
.sample12 img {
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample12:hover img {
	margin-left: 10%;	/* 画像を半分サイズ、右にずらす */
}

/* google fonts*/
.mochiy-pop-one-regular {
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.gallery_box {
	
	margin-top: 5%;
	margin-left: 3%;
	margin-bottom: 10%;
}
.gallery_box_child {
	float:left;
	width: 220px;
	margin: 2% 2% 2% 2%;
	
	
}