@charset "UTF-8";
/* base */
body {font:16px "ヒラギノ角ゴ Pro W3";background:#fff; }
section{margin-bottom:10px; clear:both;}
h1{font-size:70%; font-weight:normal; color:#fff; margin:8px 0 0 4px; padding:0;line-height:1.1em; letter-spacing: 0px;}
h2{font-size:100%; font-weight:normal; color:#ff9900; background-color:#222; width:100%; margin:30px 0 20px 0; padding:4px 0; letter-spacing:0px;}
h3{font-size:100%; font-weight:normal; color:#ff9900; background-color:#222; width:100%; margin:0 0 20px 0; padding:4px 0; letter-spacing:0px;text-align:center;}
h4{font-size:100%; font-weight:bold; color:#c00; margin:0 0 16px 0; padding:0px 10px; border-bottom:5px solid #ccc;letter-spacing: 2px;}

p{color:#444;width:90%;margin:20px auto;margin-bottom:30px;font-size:100%;line-height: 1.8em;letter-spacing:2px;}
img{border:0;}
div{margin:0;padding:0;}
ul{margin:0;padding:0;list-style:none}
ol{color:#666; font-size:90%;margin:0 2em; padding:0 0 10px 0;line-height:1.2em;}
a:hover img{opacity:0.5;filter: alpha(opacity=50);-ms-filter: "alpha( opacity=50 )";background: #fff;}
hr{width:90%;margin:30px auto;border:3px solid #ccc;clear:both;}

body{
	font-family:メイリオ,Meiryo,"ＭＳ Ｐゴシック", Osaka, sans-serif;
	color:#000;
/*	background-image:url();*/
	margin: 0px 0px;
	padding: 0px;
	text-align:left;
}
#body-bk{
	padding:44px 0 0 0;    /* ヘッダー固定分の余白を取る */
}

#header {
	position: fixed;		/* ヘッダーの固定 */
	width:100%;
	height: 44px;
	background-color: #000;
	clear:both;
	margin:0;
	padding: 0;
	color:#fff;
}
.header_left{
	width: 80%;
	margin:0;
	padding:0 10px;
	float: left;
	text-align:left;
}

#content {
	width:900px;
	margin:0 auto;
	overflow: hidden;
	text-align:left;
}
#main {
	background-color: #fff;
	float: left;
	width: 73%;
	margin:0;
	padding: 20px 20px;
}
#side {
	background-color: #fff;
	float: right;
	width: 20%;
	padding: 30px 10px;
}

#footer {
	background-color: #000;
	margin:0;
	padding: 20px 0 40px 0;
	font-size: 12px;
	clear:both;
}
#footer_box{
	color:#fff;
	font-size:90%;
	width: 900px;
	margin: 0 auto;
	text-align:center;
}
#footer a {
	color:#ff9900;
}

/*-- 写真ページ --*/
#content_photo {
	width:800px;
	margin:0 auto;
	overflow: hidden;
	text-align:left;
}
#main_photo{
	background-color: #fff;
	float: left;
	width: 100%;
	margin:0;
	padding: 20px 0px;
}
.photo_left{
	 float:left;
	 margin:10px 10px;
}
.hp_link{
	margin:20px 10px;
}
/*-- //写真ページ --*/


/* SNS */
#sns {
	display: block;
	width: 100%;
	padding: 20px 0;
	margin: 0;
	color:#fff;
	background-color: #222;
	text-align:center;
	overflow: hidden;
}
#sns img {		/* SNSアイコンの位置 */
	margin:0 10px;
	width:46px;
	height:46px;
}
/* //SNS */

/* ナビ */
.nav{
	width: 100%;
	margin-bottom: 0;
	background-color: #555;
	overflow: hidden;
}
.nav_box{
	width:900px;
	margin:0 auto;
	overflow: hidden;
	text-align:left;
	font-size:90%;
	color:#fff;
}
.nav_box a{color:#fff;}
.nav_list{
	width: 100%;
	margin-bottom: 0;
	background-color: #ccc;
	overflow: hidden;
}
.nav_list_box{
	width:900px;
	margin:0 auto;
	overflow: hidden;
	text-align:left;
	font-size:90%;
	color:#333;
}
.nav_list_box a{color:#333;}
/* //ナビ */

/* メニュー */
.spmenu_btn {
	display:block;
	position:absolute;
	top:10px;
	right:18px;
	width:22px;
	height:22px;
	background:#fff;
	border-top:10px solid #000;
	border-bottom:10px solid #000;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.spmenu_btn:before {
	content:'';
	position:absolute;
	width:22px;
	height:2px;
	background:#fff;
	top:-9px;
	right:0;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.spmenu_btn:after {
	content:'';
	position:absolute;
	width:22px;
	height:2px;
	background:#fff;
	bottom:-9px;
	right:0;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.spmenu_btn.active {
	background:#000;
}
.spmenu_btn.active:before {
	-moz-transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
	top:0;
	right:0;
}
.spmenu_btn.active:after {
	-moz-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	transform:rotate(135deg);
	bottom:0;
	right:0;
}

.spmenu {
	display:none;
	font-size:90%;
	position:absolute;
	top:45px;
	left:20%;	/* メニューの左余白 */
	width:90%;
	background:#000;
	opacity:0.9;
/*filter: alpha(opacity=50);-ms-filter: "alpha( opacity=50 )";*/
}
spnav {
	text-align:right;
	display:block;
	width:100%;
	margin:0 auto;
}
spnav li {
	display:block;
	width:89%;
	color:#f60;
	padding:15px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	border-bottom:1px solid #999;
}
spnav li a {
	color:#fff;
}
/* //メニュー */




/*.inner{		/* sideで使用 
	width: 79%;
	margin:10px 20px;
	border:none;
	background-color:#fff;
	float: left;
}
*/
.col2{
	width:46%;
	float:left;
	padding:0;
	margin:20px 10px;
	line-height: 1.2em;
	border:1px solid #ccc;
}

.box{
	width:90%;
	margin:10px auto;
	border:1px solid #666;
	padding:16px 10px;
}

/* img */
.img_left{
	 float:left;
	 margin:0 20px 20px 0;
}
.img_center{
	display:block;
	margin:10px auto;
}
.img_right{
	float:right;
	margin:0 0 20px 20px;
}
.icon{
	margin:0 6px 0 0;
}
/* /img */

/* ボタン */
.button{
	color:#fff;
	background-color:#ff6600;
	margin: 10px 10px;
	padding:8px 20px;
	float:right;
	font-size:80%;
	line-height: 1.2em;
	text-decoration:none;
	border-radius:8px;
	display:block;
}
.button:hover {color:#333; background-color:#ff9900;}
/* //ボタン */

.flex_box {
	display: flex;
}

.form{
	width:98%;
	height:450px;
	margin: 0 auto;
}

.map{
	position: relative;
	width: 100%;
	margin:auto;
	margin-bottom:10px;
	padding-top: 70%;
	height: 0;
	overflow: hidden;
}
.map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* 以下、タブレット縦（ディスプレイ幅が900px）より小さい画面に使われるCSS -------------------------------------------------*/
@media screen and (max-width: 900px) {
	#side{display: none;}

	html{width: 100%;}
	body {
		background-image: none;
		background-color: #fff;
		width: 100%;
		margin:0;
		padding:0;
	}
	#content {
		width:100%;
		margin: 20px 0;
	}
	.header_left{
		width: 90%;
		margin:0;
		padding:0 10px;
		float: left;
		text-align:left;
	}

	#main {
		background-color: #fff;
		float: none;
		width: 100%;
		margin:0 auto;
		padding: 0;
	}
	#side {display:none;}

	#footer_box{
		color:#fff;
		font-size:12px;
		width: 100%;
		margin: 0;
		text-align:center;
	}

	.nav_box{
		width:100%;
	}
	.nav_list_box{
		width:100%;
	}

}

/* 以下、スマホ縦（ディスプレイ幅が800px）より小さい画面に使われるCSS -------------------------------------------------*/
@media screen and (max-width: 800px) {

	/*-- 写真ページ --*/
	#content_photo {
		width:100%;
		margin: 20px 0;
	}
	#main_photo{
		background-color: #fff;
		float: left;
		width: 100%;
		margin:0;
		padding: 10px 0;
	}
	.photo_left{
		float:none;
		display:block;
		width:400px;
		margin:10px auto;
	}
	/*-- //写真ページ --*/
}




/* 以下、スマホ縦（ディスプレイ幅が600px）より小さい画面に使われるCSS -------------------------------------------------*/
@media screen and (max-width: 600px) {
	.col2{
		width:90%;
		float:none;
		padding:0;
		margin:10px auto;
		line-height: 1.2em;
		border:1px solid #ccc;
	}

	/* img */
	.img_left{
		float:none;
		display:block;
		margin:10px auto;
	}
	.img_center{
		width: 90%;
		display:block;
		margin:10px auto;
	}
	.img_right{
		float:none;
		display:block;
		margin:10px auto;
	}

}


/* 以下、スマホ縦（ディスプレイ幅が400px）より小さい画面に使われるCSS -------------------------------------------------*/
@media screen and (max-width: 400px) {
	.flex_box {
		flex-direction: column;
	}

	.photo_left{
		 float:none;
		 width:100%;
		 margin:10px auto;
	}
	/*-- //写真ページ --*/

}