
/*==========================================
	Copyright: (c)visual and echo japan
	Created: 2016.02.01
==========================================*/
/* ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ *
		PC
* ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ */
@media only screen and (min-width: 681px) {
/* * * * * * * * * * * * * * * * * * * * * * *
		#topArea
* * * * * * * * * * * * * * * * * * * * * * */
#topArea {
	position: relative;
	width: 100%;
	height: 100%;
	display:table;
}
#topArea .inner {
	text-align: center;
	/*padding: 150px 0 100px;*/
	display:table-cell;
	vertical-align:middle;
}
#topArea .inner .logo {
}
#topArea .inner .copy {
	font-size: 20px;
	text-align: center;
	margin-top: 50px;
}
#topArea .inner .nav {
	font-family: 'Montserrat', sans-serif;
	margin-top: 30px;
}
#topArea .inner .nav ul {
}
#topArea .inner .nav ul li {
	display: inline-block;
	margin: 0 20px;
}
#topArea .inner .nav ul li a {
	font-size: 22px;
	line-height: 22px;
	position: relative;
	color: #969696;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#topArea .inner .nav ul li a:hover {
	color: #00aabe;
	opacity: 1;
}
/* * * * .line * * * */
#topArea .inner .nav ul li a .line {
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 0%;
	height: 2px;
	background: #969696;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#topArea .inner .nav ul li a:hover .line {
	left: 0;
	width: 100%;
	background: #00aabe;
	opacity: 1;
}
/* * * * * * * .next * * * * * * */
/*
#topArea .inner .next{
	margin-top:60px;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
}
#topArea .inner .next .title{
	font-size:22px;
}
#topArea .inner .next .text{
	margin-top:10px;
	font-size:18px;
}
#topArea .inner .next .text a{
	color: #00aabe;
	text-decoration:underline;
}
*/

#topArea .inner .next {
	margin-top:120px;
}
#topArea .inner .next .title {
	font-size: 22px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	/*color: #8c8c96;*/
}
#topArea .inner .list {
	overflow: hidden;
	display: table;
	vertical-align: middle;
	padding: 20px 0;
	width: 730px;
	margin: 0 auto;
}
#topArea .inner .list .thum {
	display: table-cell;
	vertical-align: middle;
	width: 200px;
}
#topArea .inner .list .thum img {
	width: 100%;
}
#topArea .inner .list .text {
	display: table-cell;
	vertical-align: middle;
	padding-left: 20px;
	text-align: left;
}
#topArea .inner .list .text .date {
	font-size: 14px;
}
#topArea .inner .list .text .name {
	font-size: 14px;
	margin-top: 5px;
}
#topArea .inner .list .text .link {
	margin-top: 5px;
}
#topArea .inner .list .text .link a {
	color: #00aabe;
	text-decoration: underline;
}
#topArea .inner .list .text .detail {
	margin-top: 5px;
}
}

/* ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ *
		sp
* ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ * ※ */
 /* * * * * * * * * * * * * * * * * * * * * * *
		#liveArea
* * * * * * * * * * * * * * * * * * * * * * */
@media screen and (max-width:680px) {
/* * * * * * * * * * * * * * * * * * * * * * *
		#topArea
* * * * * * * * * * * * * * * * * * * * * * */
#topArea {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 41px auto 48px;
}
#topArea .inner {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	padding: 20px 0;
}
#topArea .inner .logo {
	margin-top:100px;
	padding: 0 20px;
}
#topArea .inner .logo img {
	width: 100%;
	height: auto;
}
#topArea .inner .copy {
	font-size: 16px;
	text-align: left;
	margin-top: 50px;
	padding: 0 20px;
}
#topArea .inner .nav {
	font-family: 'Montserrat', sans-serif;
	margin-top: 30px;
}
#topArea .inner .nav ul {
}
#topArea .inner .nav ul li {
	display: inline-block;
	margin: 0 10px;
}
#topArea .inner .nav ul li a {
	font-size: 15px;
	line-height: 15px;
	position: relative;
	color: #969696;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#topArea .inner .nav ul li a:hover {
	color: #00aabe;
}
/* * * * .line * * * */
#topArea .inner .nav ul li a .line {
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 0%;
	height: 2px;
	background: #969696;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#topArea .inner .nav ul li a:hover .line {
	left: 0;
	width: 100%;
	background: #00aabe;
}
/* * * * * * * .next * * * * * * */
#topArea .inner .next {
	margin-top: 40px;
}
#topArea .inner .next .title {
	font-size: 20px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	color: #8c8c96;
}
/*
#topArea .inner .next .text {
 margin-top:10px;
 font-size:14px;
}
#topArea .inner .next .text a {
 color: #00aabe;
 text-decoration:underline;
}
*/

#topArea .inner .list {
	text-align: left;
	margin-top:20px;
}
#topArea .inner .list .thum {
}
#topArea .inner .list .thum img {
	width: 100%;
}
#topArea .inner .list .text {
	padding: 20px;
}
#topArea .inner .list .text .date {
	font-size: 14px;
}
#topArea .inner .list .text .name {
	font-size: 14px;
	margin-top: 5px;
}
#topArea .inner .list .text .link {
	font-size: 12px;
	margin-top: 5px;
}
#topArea .inner .list .text .link a {
	font-size: 12px;
	color: #00aabe;
	text-decoration: underline;
}
#topArea .inner .list .text .detail {
	font-size: 12px;
	margin-top: 5px;
}
}
