@charset "utf-8";
@import "reset.css";
@import "common.css";

/*--------------------------------------------
 index style
----------------------------------------------*/

#topicsarea {
	text-align:center;
	margin-bottom:10px;
}

#topicsarea .topic_h{
	font-weight: bold;
}

#topicsarea .topic_m{
	display:flex;
	justify-content: center;
	align-items:center;
	width:100%;
	height:35px;
	background:#f6a90e;
	border:2px dotted #86580f;
	font-weight: bold;
}

h1.top_h1{
	text-align:center;
}

.top_greeting {
	display:block;
	text-align:center;
	padding:3px 3px 6px 3px;
	border:2px solid #ffb613;
	border-radius: 5px;
	background:#ffe9f5;
	margin:0 0 15px 0;
}

.top_greeting h2 {
	font-weight:bold;
}

.top_greeting img{
	margin:0 0 10px 0;
}

.comment p{
	text-align:left;
}

#top_aboutlogo {
	display:block;
	text-align:center;
	padding:3px 0 6px 0;
	border:2px solid #ffb613;
	border-radius: 5px;
	background:#ffe9f5;
	padding:5px 3px 10px;
	margin:0 0 15px 0;
}
#top_aboutlogo h2 {
	font-weight:bold;
}

#top_aboutlogo img{
	margin:0 0 10px 0;
}

#infomation {
	text-align:center;
}

#infomation ul li {
	margin:0 0 10px 0;
}

.map{
	margin:0 auto 10px;
	position:relative;
	width:95%;
	padding-top:56.25%;
}

.map iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
}

.syosai_kochira{
	text-align:center;
	width:250px;
	font-weight:bold;
	text-decoration:none;
	display:inline-block;
	text-align:center;
	margin:3px 0px 5px;
	padding:5px 0 5px;
	color:#942904;
	border:1px solid #942904;
	border-radius: 10px;
	background: rgb(255,255,136); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(255,255,136) 0%, rgb(255,255,136) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(255,255,136) 0%,rgb(255,255,136) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(255,255,136) 0%,rgb(255,255,136) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 */
}

.syosai_kochira a{
	text-decoration:none;
	display:block;
	width:100%;
	color:#942904;
}

.gre_qa p{
	text-align:left;
	margin:0 0 0.5em 10px;;
}


/*--------------------------------------------
 blog feed
----------------------------------------------*/

#feed {
	display:block;
	margin: 0 auto 15px;
	border:2px solid #ffb613;
	border-radius: 5px;
	padding:3px 0 3px 5px;
}

#feed:after{
	content:"";
	display:block;
	clear:both;
}

.bloglist{
	margin:15px 0 0 0;
	text-align:center;
	font-weight:bold;
}

#feed dl {
	width:100%;
}

#feed dl dt {
	float: left;
	color: #990000;
	width: 40%;
}

#feed dl dd {
	float: left;
	width: 60%;
}



/*--------------------------------------------
 480px-
----------------------------------------------*/

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

	#infomation {
		position: relative; 
  	overflow: hidden;
	}
	
	#infomation ul {
		position: relative;
		left: 50%;
  	/* リスト全体であるul要素を右に50%移動。
  	つまり先頭を中央に持ってくる感じです。 */
  	float: left;
	}
	
	#infomation ul li {
		position: relative;
  	left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
  	float: left;
  	margin-right:3px;
	}
	
	#infomation ul li:last-child {
		margin-right:0px;
	}
}

/*--------------------------------------------
 768px-1024px
----------------------------------------------*/

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

	#topicsarea{
		padding:0 5px 0 5px;
	}
	
	.top_greeting{
		margin:0 5px 15px 5px;
	}
	
	.top_greeting .gre_photo{
		width:40%;
		float:left;
	}
	
	.top_greeting .comment{
		width:60%;
		float:left;
	}
	
	.top_greeting:after{
		content:"";
		display:block;
		clear:both;
	}
	
	#top_aboutlogo{
		margin:0 5px 15px 5px;
	}
	
	#top_aboutlogo .gre_photo{
		width:40%;
		float:left;
	}
	
	#top_aboutlogo .comment{
		width:60%;
		float:left;
	}
	
	#top_aboutlogo:after{
		content:"";
		display:block;
		clear:both;
	}
	
	#feed {
		display:block;
		margin:0 5px 15px 5px;
		border:2px solid #ffb613;
		border-radius: 5px;
		padding:3px 0 3px 5px;
	}

	#feed:after{
		content:"";
		display:block;
		clear:both;
	}

	.bloglist{
		margin:15px 0 0 0;
		text-align:center;
		font-weight:bold;
	}

	#feed dl {
		width:100%;
	}

	#feed dl dt {
		float: left;
		color: #990000;
		width: 30%;
	}

	#feed dl dd {
		float: left;
		width: 70%;
	}
	
}