@charset "Shift_Jis";

/* ----- 全体 ----- */
* {
	margin:0;
	padding:0;
	color:#555;
}
html,body {
	font-family : 'Play', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size:14px;
	border:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background : dimgray;
}

a{
	text-decoration:none;
	transition:all 0.3s ease;
}
img{display:inline;}
ul,ol,li{list-style-type:none;}

/* ----- 全体レイアウト ----- */
.main {
	width : 800px;
	min-height : 100%;
	background : white;
	position : absolute;
	left : 0;
	right : 0;
	margin : auto;
}
.main::before, .main::after {
	content : '';
	width : 50px;
	min-height : 100%;
	position : absolute;
	top : 0;
}
.main::before {
	background : url(../img/ll.png) repeat-y;
	left : -50px;
}
.main::after {
	background : url(../img/lr.png) repeat-y;
	left : 100%;
}

/* ----- ヘッダー・フッター ----- */
header { display : none; }
footer {
	width : 100%;
	position : fixed;
	bottom : 0;
	text-align : center;
}

/* ----- TOP画像 ----- */
.TopContent {
	width : 95%; // 760px
	height : 450px;
	position : relative;
	margin : 20px auto 0;
}

/* ----- ナビ ----- */
nav {
	width : 95%;
	height : 50px;
	position : relative;
	margin : 0 auto;
}
nav ul { width : 100%; }
nav ul li {
	display : inline-block;
	float : left;
	width : calc(100%/6);
	text-align : center;
	font-size : 20px;
	line-height : 50px;
}
nav ul li a {
	display : block;
	width : 100%;
}
nav ul li a.here, nav ul li a:hover { border-bottom : solid teal 2px; }
nav ul li a:first-letter { color : #00b3b3; }


/* ----- コンテンツ ----- */
.contents {
	width : 95%;
	margin : 20px auto;
	position : relative;
}

.contents a { border-bottom : dotted 1px mediumaquamarine; }
.contents a:hover { background : aquamarine; }


/* ----- 見出し ----- */
h1 {
	font-weight : normal;
	width : calc( 100% - 100px - 5px );
	height : 30px;
	background : dimgray;
	color : white;
	line-height : 30px;
	font-size : 1.3em;
	position : relative;
	padding-left : 105px;
	margin : 30px 0 20px;
}
h1::before {
	content : '';
	width : 100px;
	height : 100%;
	background : lightseagreen;
	position : absolute;
	left : 0;
}

h2 {
	width : 100%;
	font-weight : normal;
	margin : 20px 0 5px;
	border-bottom : dashed 1px dimgray;
	text-align : center;
}


/* ----- アイテム ----- */
.ReturnTop {
	width : 100%;
	height : 100px;
	position : relative;
	text-align : center;
}
.ReturnTop a {
	width : 100px;
	height : 100%;
	line-height : 100px;
	color : white;
	display : block;
	border-bottom : none;
	border-radius : 50px;
	background : dimgray;
	position : absolute;
	left : calc( 100% - 100px );
}
.ReturnTop a:hover {
	background : teal;
	font-size : 2em;
}