/* -------------------------------------------------------
    hougen chart css
    last update 2016.3.15
----------------------------------------------------------
     1. 基本設定
     2. レイアウト
	 3. ポータルトップ（body#home）
	 4. サイト説明（body#info）
     M. メディアクエリー
------------------------------------------------------ */


/* ---------------------------------------
   1. 基本設定
--------------------------------------- */
html, body {
	height: 100%;
}
body {
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	color: #333;
	margin: 0;
	background: #fff;
}
h1,
h2,
h3 {
	font-size: 100%;
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
}
ul, ol {
	margin: 0;
	padding: 0;
}
li {
	margin: 0;
	padding: 0;
	list-style: none;
}
dt {
	font-weight: bold;
}
table {
	border-collapse: collapse;
}
th, td {
	line-height: 1.5;
	padding: 0;
}
td, embed, object {
	vertical-align: top;
}
fieldset, img {
	border: none;
}
em {
	font-style: normal;
	font-weight: bold;
}
hr {
	margin: 10px 0;
	border: solid #D8D7D1;
	border-width: 1px 0 0 0;
	height: 1px;	/* for IE6 */
	clear: both;	/* for IE6 */
}

/* リンク
------------------------------------*/
a:link {
	color: #06c;
	text-decoration: none;
}
a:visited {
	color: #609;
	text-decoration: none;
}
a:hover, a:focus, a:active {
	color: #69f;
	text-decoration: underline;
}

/* 共通スタイル
------------------------------------*/
.hide {
	position: absolute;
	left: -999px;
	width: 999px;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
.homeLink {
	font-size: 14px;
}
.videoContainer {
	clear: both;
	position: relative;
	padding: 30px 0 56.25%;
	height: 0;
	overflow: hidden;
}
.videoContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.relayBanner,
.makingBanner,
.youtubeBanner {
	margin: 20px 0;
	text-align: center;
}

/* ---------------------------------------
   2. レイアウト
--------------------------------------- */
body {
	text-align: center;
}
#googleAd {
	text-align: center;
	margin: 0 0 30px;
}
#header {
	position: relative;
	margin: 0 0 20px;
	padding: 10px;
	background: #333;
	text-align: center;
}
#container {
	width: 880px;
	height: 100%;
	margin: 0 auto;
	text-align: left;
}
body#home #container,
body#start #container {
	width: 728px;
}
#container .main {
	position: relative;
	float: left;
	width: 700px;
}
#container .main #footer {
	padding: 20px;
}
#container .ad {
	float: right;
	width: 160px;
}
#guide {
	clear: both;
	padding: 10px 0 30px;
	overflow: hidden;
}
#guide .leftPane {
	float: left;
	width: 420px;
}
#guide .rightPane {
	float: right;
	width: 280px;
}
#footer {
	padding: 20px 0;
	background: #fff;
	border-top: 1px solid #ccc;
	text-align: center;
	overflow: hidden;
}
#footer p.logo {
	float: left;
}
#footer p.logo img {
	width: 150px;
	height: auto;
}
#footer p.copyright {
	float: right;
	font-size: 12px;
	color: #999;
}


/* ---------------------------------------
   3. ポータルトップ（body#home）
--------------------------------------- */
body#home #header {
	height: 30px;
	padding: 0;
	text-align: left;
}
body#home #header .pageTitle {
	position: absolute;
	left: 10px;
	font-size: 14px;
	line-height: 30px;
	color: #fff;
}
body#home #header .snsb {
	position: absolute;
	right: 0px;
	height: 25px;
	padding: 5px 0 0;
}
body#home #header .snsb li {
	float: right;
	margin-left: 10px;
}

body#home .hougenMovie {
	color: #fff;
	margin: -20px 0 30px;
	padding: 10px 0;
	background: #000;
	text-align: center;
}
body#home .hougenMovie .hougenMovieContents {
	width: 728px;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
	zoom: 1;
}
body#home .hougenMovie .mov {
	float: right;
	width: 450px;
}
body#home .hougenMovie .txt {
	float: left;
	width: 250px;
	padding: 50px 0 0;
	text-align: center;
	overflow: hidden;
}
body#home .hougenMovie .txt .title1 {
	font-size: 11px;
	color: #fa719d;
	padding: 5px 0;
	border: 1px solid #D14782;
}
body#home .hougenMovie .txt .title2 {
	font-size: 36px;
	font-weight: bold;
	margin: 10px 0 0;
	text-align: center;
}
body#home .hougenMovie .txt .title3 {
	font-size: 12px;
	color: #ccc;
	padding: 5px 0;
	background: #222;
}
body#home .hougenMovie .txt .link {
	font-size: 13px;
	color: #fa719d;
	margin: 20px 0 0;
}
body#home .hougenMovie .txt .link a {
	color: #6CF;
}

body#home #kumamoto {
	padding: 0px 10px;
	text-align: center;
}

body#home #logo {
	clear: both;
	padding: 30px 0;
	text-align: center;
	overflow: hidden;
}

body#home #hougen100 {
	clear: both;
	position: relative;
	margin: 30px 0;
	text-align: center;
	overflow: hidden;
}
body#home #hougen100 .head {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin: 0 0 15px;
	padding: 5px;
	background: #eee;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
body#home #hougen100 .illust {
	float: left;
	width: 340px;
}
body#home #hougen100 .illust img {
	width: 100%;
	height: auto;
}
body#home #hougen100 .txt {
	float: right;
	width: 370px;
	padding: 20px 0 0;
}
body#home #hougen100 .txt .btn a {
	display: block;
	font-size: 24px;
	color: #fff;
	margin: 20px 0;
	padding: 5px 0;
	background: #333;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
}
body#home #hougen100 .txt .btn a:hover {
	background: #555;
}

body#home #hougen47 {
	clear: both;
	position: relative;
	margin: 30px 0;
	text-align: center;
	overflow: hidden;
}
body#home #hougen47 .head {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin: 0 0 15px;
	padding: 5px;
	background: #eee;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
body#home #hougen47 .illust {
	float: left;
	width: 340px;
}
body#home #hougen47 .illust img {
	width: 100%;
	height: auto;
}
body#home #hougen47 .txt {
	float: right;
	width: 370px;
	padding: 20px 0 0;
}
body#home #hougen47 .txt .btn a {
	display: block;
	font-size: 24px;
	color: #fff;
	margin: 20px 0;
	padding: 5px 0;
	background: #333;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
}
body#home #hougen47 .txt .btn a:hover {
	background: #555;
}

body#home #about {
	clear: both;
	position: relative;
	margin: 20px;
	text-align: left;
	overflow: hidden;
}
body#home #about .photo {
	float: right;
}
body#home #about .txt {
	font-size: 14px;
	padding: 15px 10px 0 0;
	overflow: hidden;
}
body#home #about .txt .title {
	margin: 0 0 15px;
}
body#home #about .txt .info {
	margin: 10px 0 0;
}
body#home #about .txt .info a {
	color: #00a0e9;
}

#guide .book {
	clear: both;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid #eeede9;
	overflow: hidden;
}
#guide .book:first-child {
	margin: 0;
	padding: 0;
	border: none;
}
#guide .book .head {
	margin: 0 0 20px;
	padding: 0 0 0 10px;
	border-left: 10px solid #29c15a;
}
#guide .book .head h2 {
	font-size: 20px;
	line-height: 1.3;
}
#guide .book .head h2 span{
	font-size: 16px;
	line-height: 1.3;
}
#guide .book .head p {
	font-size: 12px;
	margin: 5px 0 0;
}
#guide .book .head p.writer {
	float: left;
	margin-right: 15px;
}
#guide .book .img {
	float: left;
	width: 140px;
	margin: 0 15px 0 0;
	text-align: center;
}
#guide .book .img img {
	width: 140px;
	height: auto;
}
#guide .book .body {
	overflow: hidden;
}
#guide .book .body p {
	font-size: 12px;
	margin: 0 0 10px;
}
#guide .book .body p.catch {
	font-size: 12px;
	font-weight: bold;
}
#guide .book .body p.link {
	margin: 10px 0 0;
}
#guide .book .body p.link a {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	padding: 5px 0;
	background: #2a2a2a;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	text-decoration: none;
	text-align: center;
}
#guide .book .body p.link a:hover {
	opacity: 0.7;
}
#guide .jkArticles h2 {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	padding: 15px;
	background: #ccc7c8;
}
#guide .jkArticles ul {
	border-left: 1px solid #ccc7c8;
	border-right: 1px solid #ccc7c8;
	border-bottom: 1px solid #ccc7c8;
}
#guide .jkArticles li {
	font-size: 13px;
	border-top: 1px solid #ccc7c8;
}
#guide .jkArticles li a {
	position: relative;
	display: block;
	font-size: 13px;
	color: #333;
	padding: 15px;
	text-decoration: none;
}
#guide .jkArticles li a:hover {
	background: #f8f5f3;
}
#guide .jkArticles li a strong {
	font-size: 16px;
	color: #fa719d;
}


/* ---------------------------------------
   4. サイト説明（body#info）
--------------------------------------- */
body#info #container #main {
	margin: 30px 20px;
}
body#info #container #main h1 {
	font-size: 30px;
	line-height: 1.3;
	text-align: center;
}
body#info #container #main p {
	margin: 20px 0 0;
}
body#info #container #main p.btn {
	text-align: center;
}
body#info #container #main p.btn a {
	display: inline-block;
	font-size: 16px;
	color: #fff;
	margin: 10px 0 0;
	padding: 5px 50px;
	background: #333;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
}
body#info #container #main p.btn a:hover {
	background: #555;
}
body#info #footer {
	padding: 20px;
}


/* ---------------------------------------
   M. メディアクエリー
--------------------------------------- */
@media (max-width: 640px) {

	html, body {
		height: auto;
	}
	body {
		word-wrap: break-word;
	}
	img {
		max-width: 100% !important;
		height: auto;
	}

	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.relayBanner,
	.makingBanner,
	.youtubeBanner {
		margin: 20px;
	}

	#header {
		margin: 0;
		padding: 10px 20px;
	}
	#container,
	#container .main,
	#container .ad,
	#guide .leftPane,
	#guide .rightPane,
	#guide .book .img,
	#footer p.logo,
	#footer p.copyright {
		display: block;
		float: none;
		width: auto !important;
		border: none;
	}
	#container .ad {
		text-align: center;
	}
	#footer {
		text-align: center;
	}
	#footer p.logo {
		margin: 0 0 10px;
	}

	/* HOME */
	body#home #header .pageTitle {
		display: none;
	}

	body#home .hougenMovie {
		margin: 0 0 20px;
	}
	body#home .hougenMovie .hougenMovieContents {
		width: auto;
	}
	body#home .hougenMovie .mov,
	body#home .hougenMovie .txt {
		float: none;
		width: auto;
	}
	body#home .hougenMovie .txt {
		padding: 10px 20px;
	}

	body#home #logo {
		padding: 20px;
	}

	body#home #hougen100 {
		margin: 20px;
	}
	body#home #hougen100 .illust,
	body#home #hougen100 .txt {
		float: none;
		width: auto;
	}
	body#home #hougen100 .txt {
		padding: 10px 0 0;
	}

	body#home #hougen47 {
		margin: 20px;
	}
	body#home #hougen47 .illust,
	body#home #hougen47 .txt {
		float: none;
		width: auto;
	}
	body#home #hougen47 .txt {
		padding: 10px 0 0;
	}

	body#home #about {
		margin: 20px;
	}
	body#home #about .photo {
		float: none;
		text-align: center;
	}
	body#home #about .photo img {
		width: 120px;
	}
	body#home #about .txt {
		padding: 0;
	}
	body#home #about .txt .title {
		margin: 15px 0;
		text-align: center;
	}

	#guide {
		padding: 15px;
	}
	#guide .book .head h2 br {
		display: none;
	}
	#guide .book .img {
		margin: 0 0 10px;
	}
	#guide .leftPane {
		margin: 0 0 20px;
	}

}