@import url(reset.css);

html,body {
	margin:0;
	padding:0;
	font-size: 62.5%;
}

body {
	background:#fefefe;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1.4rem;
	line-height:24px;
	color:#505050;
	text-align:center;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-weight:normal;
	line-height:32px;
	margin: 0 0 8px;
}

h1 { font-size:3.2rem; }
h2 { font-size:2.4rem; }
h2.cap{font-size:1.6rem;}
h3 { font-size:2.0rem; }
h4 { font-size:1.8rem; }
h5 { font-size:1.6rem; }
h6 { font-size:1.4rem; }

h1 a:link	{ color:#1393bd !important; }
h1 a:visited	{ color:#1393bd !important; }
h1 a:hover	{ color:#1393bd !important; }

a:link 		{ color:#007eb1; }
a:visited 	{ color:#007eb1; }
a:hover 	{ color:#22aacc; }

nav a:link 	{ color:#505050; }
nav a:visited 	{ color:#505050; }
nav a:hover 	{ color:#22aacc; }

footer a:link 	{ color:#505050; }
footer a:visited { color:#505050; }
footer a:hover 	{ color:#22aacc; }

a,a:visited {
	text-decoration:none;
	-webkit-transition:color 0.15s ease-out;
	-moz-transition:color 0.15s ease-out;
}

a:hover img {
	filter: alpha(opacity=80);  -moz-opacity:0.8;  opacity:0.8;
	background-color:white;
	}

a:focus {
	outline:thin dotted;
}

a:hover,a:active {
	outline: 0;
}

p,ul,ol {
	margin:0 0 20px 0;
}
body.single p {
	margin:5px 0px 20px 0;
}
body.single p.mb5 {
	margin:5px 0px 5px 0;
}
body.single p.notes {
	margin-left:1em;
	text-indent:-1em;
}
ul,ol {
	padding:0;
}

ul ul,ul ol,ol ol,ol ul {
	margin:0;
}

li {
	display:list-item;
	list-style-position:outside;
	margin:0 0 0 2em;
	padding:0;
}

em {
	font-style:italic;
}

img { border:none; }



/* Layout */
#container {
	width:920px;
	text-align:left;
	position:relative;
	margin:0 auto;
}

header {
	position:relative;
	margin:10px 0;
	overflow:hidden;
}
/*img.logo { margin:0px 15px 0 0; float:left; }*/

img.logo {
	width:250px;
	height:60px;
	margin:0px;
	float:left;
}

nav {
	margin:25px 0 0 0;
}

nav ul {
	list-style:none;
	float:right;
	margin:0;
}

nav ul li {
	display:inline;
	font-size:1.6rem;
	-webkit-transition:background-gridor .15s ease-out;
	-moz-transition:background-gridor .15s ease-out;
	margin-left:10px;
}

.pankuzu {
	margin: 20px 0px 0px 10px;
}

.snsb {
	overflow: hidden;
	margin:10px 0px;
	padding:0;
	float:right;
	border:0px solid black;
	position: relative;
	z-index: 1;
}

.snsb li {
	float: left;
	margin-left: 5px;
	padding: 0;
}

#full {
	position:relative;
	margin:-20px 0 30px 0;
}

#content { clear:both; }

#primary {
	width:600px;
}

p.about {
	width:500px;
	margin:10px auto 0 auto;
	font-size:200%;
	line-height:200%;
	padding:20px;
	color:#2ac;
}
p.about2 {
	width:500px;
	margin:10px auto 0 auto;
	font-size:200%;
	line-height:200%;
	padding:20px;
	color:#09667b;
}
p.indt {
	text-indent:1em;
}

footer {
	clear: both;
	border-top: solid #ccc 1px;
	margin: 20px 20px 40px 20px;
	text-align: left;
}
footer ul.link_area {
	padding-left: 0px;
	margin: 20px 0px 20px 0px;
}
footer ul.link_area li {
	display: inline-block;
	margin:0px 20px 0px 0px;
}
footer p {
	margin-bottom: 10px;
}

/* The Percentage Grid */

.row {
	overflow:hidden;
	margin-bottom:30px;
}

.grid {
	float:left;
	display:inline;
	margin-left:2%;
	width:48%;
}

.grid p a{
	clear: both;
	font-size: 130%;
	margin: 6px 0;
	width: 100%;
	display: inline-block;
}

.grid3 .grid {
	width:32%;
}

.grid4 .grid {
	width:23.5%;
}


/* Helper Classes */

.first 	{ margin-left:0!important; }
.last 	{ margin-right:0!important; }
.left 	{ float:left; margin-right:1em; }
.right 	{ float:right; margin-left:1em; }
.center { text-align:center; }

/* Demo-Specific CSS */

.banner {
	position:relative;
}

/* Media Queries for Mobile Support */
/* iPhone Portarait */
@media only screen
and (max-width : 480px) {

	#container {
		width:92%;
		font-size: 80%;
		padding: 0 !important;
	}

	body.archive .empty { display:none; }

	nav	{ margin:0; }
	nav ul	{ margin:0; }
	nav ul li {
		font-size:1.3rem;
		line-height:22px;
		display: block;
		max-width:480px;
	}

	header img.logo { width:173px; height:40px; margin:0px; }

	body.single 				{ margin:0 !important; padding:0 !important; }
	body.single .title h1		{ font-size:2.5rem !important; line-height:40px !important; margin:-5px 0 15px 0; }
	body.single blockquote		{ padding:10px !important; margin:20px 0 40px 0 !important; width:95% !important; }
	body.single .headbox		{ padding:10px !important; margin:20px 0 40px 0 !important; width:95% !important; }
	body.single .textBody		{ font-size:150% !important; line-height:200% !important;  }
	body.single small			{ font-size:1.0rem !important; }

	#full,img { width:100%; }
	.grid { float:none; margin:0 !important; }

	.banner 	{ display:none; }
	.banner h2 	{ display:none; }

	body.index .row h5  { font-size:1.6rem !important; line-height:30px !important; }
	body.index .row h2  { font-size:1.6rem !important; line-height:28px !important; margin:-10px 0 10px 20px !important; border-left:2px solid #ccc; padding-left:15px;  }
	body.index .row p	 { font-size:130% !important; line-height:200% !important; padding-right:15px !important; }
	body.index .row p a { clear:both !important; display:inline-block; }
	body.index .row .grid img { margin-bottom:10px;}
	a.more:link 	{ text-decoration:none !important; /*color:#1393bd !important;*/ }
	a.more:visited 	{ text-decoration:none !important; /*color:#1393bd !important;*/ }
	a.more:hover 	{ text-decoration:underline !important;  background-color:#91D0ED;   color:#fff!important; }
	.grid p a{
		clear: both;
		text-align:center;
		border:1px solid #1393bd ;
		color:#1393bd !important;
		padding:1px 0;
		font-size:80%;
		width:90%;
		margin:3px 5%;
		line-height: 170%;
  	}

	.row .grid span.right { margin-bottom:10px; }
	.row .grid p.right { display:none; }

	.end { border-bottom:1px solid #ccc; margin:0 0 10px 0; }

	div.relevant 	{ width:100% !important; display:none !important; }
	#carousel 		{ }
	#carousel div 	{ width:100% !important; margin:0 0 0 30px !important; }
	#carousel a img { margin:30px 40px 0 -30px !important; width:110px; height:110px; float:left; }
	#carousel h3 a 	{ font-size:1.4rem; margin:20px 0 0 -20px !important; }
	#carousel p 	{ }
}

/* iPhone5 Landscape */
/* iPad Portrait 768x1024 px */
@media only screen
and (max-width : 800px) {

	nav		{ margin:0; }
	nav ul  	{ margin:0; }
	nav ul li 	{ font-size: 1.3rem; line-height:22px; display: block; max-width:480px; }

	body.single div.textBody img 				{ width:100% !important; }
	body.single div.textBody img.small_left 	{ width:100% !important; max-width:none !important; margin:0px 0 10px 0 !impotrant; }
	body.single div.textBody img.small_right 	{ width:100% !important; max-width:none !important; margin:0px 0 10px 0 !important; }
	body.single blockquote 						{ width:90% !important; }
	body.single .headbox 						{ width:90% !important; }

	body.archive .grid3 		{}
	body.archive .grid3 a 		{}
	body.archive .grid3 a img 	{ width:100% !important; }
	body.archive .grid3 h1		{ font-size	: 1.5rem !important; line-height	: 21px !important; }
	body.archive .grid3 h2		{ font-size	: 1.4rem !important; line-height	: 21px !important; margin-bottom:10px !important; }
	body.archive .grid3 p		{ display:none; }

	div.relevant 	{ width:100% !important; }

	#carousel 		{  }
	#carousel div 	{ width:100%; }
	#carousel img 	{}
	#carousel h3 	{ font-size:1.4rem !important; line-height:40px !important; }
	#carousel p 	{ font-size:1.2rem !important; line-height:21px !important; }
}



/* iPad Portrait */
/* iPhone 4/4S Landscape 960x640 px */
@media only screen
and (max-width : 940px) {
	header 		{ margin: 10px 0; }
	#container 	{ width:92%; }
	img.logo 	{ width:250px; height:60px; margin:0px; }
	.banner h2 span { font-size:50%; padding:20px; }


	body.index .row .first img { width:95% !important; }
	body.index .grid {}

	div.relevant 	{ width:100% !important; }
	#carousel div 	{ margin: 10px 0 0 0 !important; width:310px !important; }
	#carousel img 	{ margin: 20px 15px 40px 0; float: left; }
	#carousel h3 	{ font-size: 1.6rem !important; line-height	: 20px !important; }
	#carousel p 	{ font-size: 1.2rem !important; line-height	: 21px !important; }

	ul.link { margin:20px 0 0 0 !important;}
	div.footer img.contact 	{ width:95%; }
	div.footer img.meti 	{ width:95%; }

	body.single div.textBody {  }
	body.single div.textBody img 				{ width:100% !important; }
	body.single div.textBody img.small_left 	{ width:100% !important; max-width:none !important; margin:0px 0 10px 0 !important; }
	body.single div.textBody img.small_right 	{ width:100% !important; max-width:none !important; margin:0px 0 10px 0 !important; }
	body.single blockquote 						{ width:90% !important; }
	body.single .headbox 						{ width:90% !important; }

}

/* jQuery caroufredsel */
/* <!-- jQuery caroufredsel --> */

p.control{
	margin:-50px 30px 30px -70px\9!important;
}

div.relevant {}
div.relevant {
	width	:900px;
	height	:200px;
	margin	:50px 0 50px 0;
	padding	:0 0 0 0;
	display	:block;
	clear	:both;
	border	:1px solid #ccc !important;
}

.relevant span { 
	position: absolute; margin:-31px 0 0 -1px; padding:5px 20px; height:20px; background-color:#fff; font-size:0.857rem; letter-spacing:1px; 
	border-left	:1px solid #ccc;
	border-top	:1px solid #ccc;
	border-right:1px solid #ccc;
}

body.single div.relevant	{ margin:20px 0 0 20px !important; }
body.single div.footer 		{ margin:60px 0 0 20px !important; }

ul.link 			{ float:right; margin:40px 25px 5px 0;*margin:40px 25px -15px 0; }
ul.link li 			{ float:left; list-style:none; padding:0 0 0 20px; }
ul.link li a 		{}
ul.link li.archive 	{ background-image:url(image/archive.gif); background-repeat:no-repeat; background-position:center left; }
ul.link li.top 		{ background-image:url(image/top.gif);     background-repeat:no-repeat; background-position:center left; }

#carousel		{ }
#carousel a img { margin:20px 10px 20px 0;}
#carousel h3 a 	{}
#carousel p 	{}
#carousel > div {
	width	: 400px;
	margin	: 10px 0 0 10px;
	padding	: 20px ;
	height	: 230px;
	float	: left;
	overflow: hidden;
}
#carousel img {
	border	: none;
	display	: block;
	margin	: 20px 20px 40px 0;
	float	: left;
}
#carousel h3 {
	font-size	: 1.4rem;
	line-height	: 20px;
	margin		: 20px 0 10px 0;
}

#carousel p {
	font-size	: 1.2rem;
	line-height	: 22px;
}


/* Layout applied at last */

body.archive {}
body.archive div.grid3 a img { max-width:290px; margin:0 0 10px 0; }
body.archive div.grid3 h1 { font-size:2.0rem; line-height:38px; padding:0 10px; }
body.archive div.grid3 h2 { font-size:1.6rem; line-height:28px; padding:0 10px; }
body.archive div.grid3 p  { font-size:1.25rem; padding:0 25px 0 0; float:right; }

span.small { font-size:1.4rem; }

body.single {}
body.single div#info { margin:0 0 0 20px; }
body.single div#info a {}
body.single div.title { margin:0 0 0 20px; }
body.single div.title h1 { font-size:2.9rem; line-height:50px; }
body.single div.title h2 { font-size:2.0rem; line-height:35px; }
body.single div.title h2 a { font-size:1.8rem;}


body.single div.textBody { margin:0 0 20px 0; padding:0 20px 0 20px; }
body.single div.textBody img { margin:20px 0 10px 0; }

body.single div.textBody img.small_left  { width:calc(50% - 3px); margin:0px 0px 10px 0px; }
body.single div.textBody img.small_right { width:calc(50% - 3px); margin:0px 0px 10px 0px; }

body.single div.textBody strong { font-weight:bold; clear:both; display:block; margin:10px 0; }
body.single div.textBody small { float:right; font-size:1.4rem; }

body.single .headbox { border:1px solid #aaa; padding:20px; margin:20px 0 40px 10px; width:95%; }
body.single blockquote { border:1px solid #aaa; padding:20px; margin:20px 0 40px 10px; width:95%; }
body.single blockquote.blockquote { border:none; border-left:1px solid #aaa !important; padding:10px 20px !important; margin:20px 0 40px 20px; width:95%; }

.feedback_and_rules { margin:50px 10px 20px 10px ;font-size:1.6rem;}
.feedback_and_rules ul { margin:20px 0 30px 0; }
.feedback_and_rules li { padding-left:20px; background-image:url(image/arrow.gif); background-repeat:no-repeat; background-position:center left; }
.feedback_and_rules h3 { margin-top:30px; border-left:solid #ccc 10px; padding:3px 0px 0px 10px; }