@charset "utf-8";

/*----------------------------------------------------------------
 TopPage only
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
.column{}
#top-content{
}
#middle-content{
}
#bottom-content{
}
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
#mainview p{
	overflow			: visible;
}
#mainview img{
	position			: static;
	width				: auto;
	max-width			: 100%;
}
/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header .logo {
	position			: relative;
	width				: auto;
	height				: auto;
	margin				: 0;

	position			: absolute;
	bottom				: -8.5%;
	width				: 100%;
}
#header .logo img{
	position			: static;
}
@media screen and (min-width: 768px){
#header .logo {
	position			: relative;
	bottom				: 0;
	top					: 50%;
	padding: 0;
}
}

#header .logo-typo {
	stroke				: #FFF;
	stroke-dasharray	: 300;
	stroke-dashoffset	: 300;
	stroke-width		: 0;
	stroke-linejoin		: round;
	stroke-linecap		: round;

	fill				: #FFF;
}

#header .animate .logo-typo{
	opacity: 1;
	animation-name				: logo_anime;
	animation-duration			: 2s;
	animation-timing-function	: ease;
	animation-iteration-count	: 1;
}
@keyframes logo_anime {
0% {
	stroke-dashoffset	: 300;
	stroke-width		: 0.5px;
	fill				: transparent;
}
50% {
	stroke-dashoffset	: 0;
	stroke-width		: 0.5px;
	fill-opacity		: 0;
}
55% {
	stroke-width		: 2px;
	fill-opacity		: 1;
	fill				: #FFF;
}
60% {
	stroke-width		: 0;
	stroke-opacity		: 0.8;
	fill-opacity		: 1;
	fill				: #FFF;
}
100% {
	stroke-width		: 0;
	fill-opacity		: 1;
	fill				: #FFF;
}
}
/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/


/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
/* top-content
----------------------------------------------------*/
#top-content .slideshow{
	line-height			: 1px;
}
#top-content .slideshow p{
	margin				: 0;
	padding				: 0;
}
#top-content .slideshow img{
	border: 1px solid #ccc;
}
/* middle-content
-----------------------------------------------------*/
#middle-content .container{
	width				: 100%;
}

@media screen and (min-width: 768px){
#middle-content .container{
	width				: 95vw;
}
#middle-content .flex-wrapper{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#middle-content .flex-wrapper .item-list{
	flex				: 1;
}
#middle-content .flex-wrapper .item-list:nth-child(odd){
	margin				: 2rem 3rem 0 0;
}
}
@media screen and (min-width: 1000px){
#middle-content .container{
	width				: 970px;
}
}

/* live-list
----------------------------------*/
#middle-content .item-list.live-list				{ background: #F7F9D2; }
#middle-content .item-list.live-list .more-link a		{ background: rgba(219, 228, 63,1); }
#middle-content .item-list.live-list .more-link a:hover	{ background: rgba(219, 228, 63,0.5); }
#middle-content .item-list.live-list ol li a:after	{ color: #d3d889; }
#middle-content .item-list.live-list ol li a:hover	{ background: rgba(219, 228, 63,0.1); }

#middle-content .item-list.news-list .more-link a		{ background: rgba(100, 100, 100,0.3); }
#middle-content .item-list.news-list .more-link a:hover	{ background: rgba(0, 0, 0,0.4); }

@media screen and (min-width: 768px){
#middle-content .item-list{
	padding				: 2rem 0 0 0;
}
#middle-content .item-list ol li a:after{
	top					: 30%;
	right				: 1rem;
}
#middle-content .item-list ol li dl dt{
	flex				: 2;
	text-align			: left;
}
#middle-content .item-list ol li dl dd{ flex: 7; }

}

/* bottom-content
-----------------------------------------------------*/
/* banner-list
----------------------------------*/
#bottom-content .banner-list{
	margin				: 5rem 0 0 0;
}
#bottom-content .banner-list ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction: column;
}
#bottom-content .banner-list li{
	list-style			: none;
	margin				: 0 0 1rem 0;
	text-align			: center;
}
@media screen and (min-width: 768px){
#bottom-content .banner-list{
	margin				: 5rem 0;
}
#bottom-content .banner-list ul{
	flex-direction		: row;
	justify-content		: space-between;
}
#bottom-content .banner-list li{
	flex				: 1;
	margin				: 0;
	text-align			: right;
}
#bottom-content .banner-list li:first-child{
	text-align			: left;
	margin: 0 2rem 0 0;
}
#bottom-content .banner-list li img{ width: 290px; }
}
@media screen and (min-width: 1000px){
#bottom-content .banner-list li:first-child{
	margin: 0;
}
}

/* twitter-list
----------------------------------*/
#bottom-content .twitter-list{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
}
#bottom-content .twitter-list>div{
	justify-content		: space-between;
	flex				: 1;
	margin: 0;
}
#bottom-content .twitter-list>div[data-show=hide_sp]{
	margin				: 0 1rem;
}
#bottom-content .twitter-list .twitter-banner a{
	display: block;
	padding: 0.5rem 0;
	text-align: center;
	text-decoration: none;
	font-family			: 'Open Sans',"ヒラギノ角ゴ Pro W3",'Hiragino Kaku Gothic Pro W3',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	font-weight: 500;
	font-size: 2rem;
	color: #FFF;
}
#bottom-content .twitter-list .twitter-banner a:hover{
	opacity: 0.8;
}
#bottom-content .twitter-list .twitter-banner.poco{
	margin: 0 5px 0 0;
}
#bottom-content .twitter-list .twitter-banner.poco a{
	background: #2EA5DF;
}
#bottom-content .twitter-list .twitter-banner.antenna{
	margin: 0 0 0 5px;
}
#bottom-content .twitter-list .twitter-banner.antenna a{
	background: #DF3064;
}
#bottom-content .twitter-list .twitter-banner.tsudatobari{
	margin: 0 0 0 5px;
}
#bottom-content .twitter-list .twitter-banner.tsudatobari a{
	background: #333;
}
@media screen and (min-width: 768px){

}