@charset "utf-8";

/*
	* Name: top.css
	* License: MIT License
	  - http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license
*/


/* Stylesheet Document */

@media all {

	/* ========================================
	   * 領域設定 - レイアウト -
	======================================== */

	body.top {
	}


	/* ========================================
	   * 領域設定 - Top Image -
	======================================== */

	body.top #topimage {
		position: relative;
		width: 100%;
	}

	body.top #topimage > h2 {
		color: #ffffff;
		font-size: 184%;
		font-weight: normal;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		text-shadow: 0px 0px 4px rgba(0,0,0,0.38);
		width: 40%;
		z-index: 2;
	}

	body.top #topimage > div.photo > img {
		display: block;
		height: auto;
		position: relative;
		width: 100%;
		z-index: 0;
	}

	body.top #topimage > div.photo:before {
		background-color: #000000;
		content: '';
		display: none;
		height: 100%;
		left: 0;
		opacity: 0.3;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	body.top #topimage.movie > div.pc > div.message h2,
		body.top #topimage.movie > div.pc > div.message h3,
			body.top #topimage.movie + div.message > div.message > h2,
				body.top #topimage.movie + div.message > div.message > h3 {
					font-weight: normal;
	}

	body.top #topimage.movie > div.pc > div.message h3,
		body.top #topimage.movie + div.message > div.message > h3 {
			margin-bottom: 0;
	}

	body.top #topimage.movie > div.pc > iframe {
		border: none;
		position: relative;
		width: 100% !important;
		z-index: 0;
	}

	body.top #topimage.movie > div.pc > div.message,
		body.top #topimage.movie > div.pc > div.message > div.message {
			position: relative;
	}

	body.top #topimage.movie > div.pc > div.message {
		background-color: #000000;
		color: #ffffff;
		height: 100%;
		position: absolute;
		margin: 0 0 36px 0;
		width: 100%;
	}

	body.top #topimage.movie > div.pc > div.message h2 {
		font-size: 200%;
		margin-bottom: 32px;
	}

	body.top #topimage.movie > div.pc > div.message p {
		font-size: 120%;
		margin-bottom: 28px;
	}

	body.top #topimage.movie > div.pc > div.message h3 {
		font-size: 134%;
	}

	body.top #topimage.movie > div.pc > div.message > div.message {
		margin: 0 auto 0 auto;
		width: 80%;
	}

	body.top #topimage.movie > div.overlay {
		background: #000000;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	body.top #topimage.movie > a.button {
		background-color: #ffffff;
		bottom: 30px;
		display: block;
		right: 30px;
		padding: 8px 16px 8px 16px;
		position: absolute;
		text-decoration: none;
		z-index: 2;
	}

	body.top #topimage.movie > a.button:hover,
		body.top #topimage.movie > a.button.current {
			background-color: #373735;
			color: #ffffff;		
	}

	body.top #topimage.movie + div.message {
		background-color: #efefef;
		display: none;
		padding: 36px 0 36px 0;
	}

	body.top #topimage.movie + div.message > div.message {
		margin: 0 auto 0 auto;
		width: 92%;
	}

	body.top #topimage.movie + div.message > div.message > h2 {
		font-weight: bold;
		margin-bottom: 18px;
	}

	body.top #topimage.movie + div.message > div.message > p {
		margin-bottom: 18px;
	}


	/* ========================================
	   * 領域設定 - Main -
	======================================== */

	body.top #main {
	}

	body.top #main div.announcement {
		margin: 0;
		width: 100%;
	}

	body.top #main div.announcement:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* css hack: safari */
		font-size: 0; /* css hack: firefox3 */
		visibility: hidden;
	}

	body.top #main div.announcement > div > h4 {
		border-top: 2px solid #373735;
		margin-bottom: 0;
		padding: 18px 12px 18px 12px;
		position: relative;
	}

	body.top #main div.announcement > div > h4:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* css hack: safari */
		font-size: 0; /* css hack: firefox3 */
		visibility: hidden;
	}

	body.top #main div.announcement > div > h4 > span,
		body.top #main div.announcement > div > h4 > a {
			display: block;
			position: relative;
	}

	body.top #main div.announcement > div > h4 > span {
		float: left;
	}

	body.top #main div.announcement > div > h4 > a {
		background-color: #f0f0f0;
		border-radius: 4px;
		color: #575757;
		float: right;
		font-size: 56%;
		padding: 6px 10px 6px 10px;
		text-decoration: none;
	}

	body.top #main div.announcement > div dl.newslist {
		border-top: 1px dotted #cecece;
		margin-bottom: 0;
	}

	body.top #main div.announcement > div dl.newslist > dt {
		color: #575757;
		float: none;
		font-size: 80%;
		margin-bottom: 6px;
		padding-bottom: 0;
	}

	body.top #main div.announcement > div dl.newslist > dt > span.label {
		border-radius: 4px;
		color: #ffffff;
		display: inline-block;
		font-size: 86%;
		margin: 0 0 0 8px;
		padding: 4px 8px 4px 8px;
		vertical-align: middle;
	}

	body.top #main div.announcement > div dl.newslist > dd {
		padding-left: 12px !important;
		padding-right: 12px;
		padding-top: 0;
	}

	body.top #main div.announcement > div dl.newslist > dd > a {
		color: #333331;
		text-decoration: none;
	}

	body.top #main div.announcement > div dl.newslist > dd > a:hover {
		text-decoration: underline;
	}

	body.top #main div.announcement > div dl.newslist {
		border-top: 1px dotted #cecece;
	}

	body.top #main div.announcement.double {
		margin-left: -2%;
		margin-right: -2%;
		width: 104%;
	}

	body.top #main div.announcement.double > div {
		float: left;
		margin: 0 2% 0 2%;
		width: 46%;
	}

	body.top #main nav.separate {
		margin: 0 -2% 60px -2%;
		width: 104%;
	}

	body.top #main nav.separate:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* css hack: safari */
		font-size: 0; /* css hack: firefox3 */
		visibility: hidden;
	}

	body.top #main nav.separate > div {
		float: left;
		margin: 0 2% 0 2%;
		width: 46%;
	}

	body.top #main nav.separate > div > h4 {
		margin-bottom: 12px;
	}

	body.top #main nav.separate > div > ul {
		border-top: 2px solid #373735;
		list-style-type: none;
		margin-bottom: 0;
		margin-left: 0;
	}

	body.top #main nav.separate > div > div.photo {
		border: 1px solid #e2e2e2;
		margin: 0 0 18px 0;
		padding: 6px;
	}

	body.top #main nav.separate > div > div.photo > img {
		display: block;
		height: auto;
		width: 100%;
	}

	body.top #main nav.separate > div > ul > li {
		background: url("../../img/icon_arrow_black01.png") 14px 22px no-repeat;
		background-size: 4px auto;
		border-bottom: 1px dotted #d5d5d5;
		padding: 14px 12px 14px 30px;
	}

	body.top #main nav.separate > div > ul > li:nth-child(even) {
		background-color: #fcfcfc;
	}

	body.top #main nav.separate > div > ul > li > a {
		text-decoration: none;
	}

	body.top #main div.information {
		margin: 0 0 60px 0;
	}

	body.top #main div.information:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* css hack: safari */
		font-size: 0; /* css hack: firefox3 */
		visibility: hidden;
	}

}