@charset "utf-8";

/* -----     5周年     ----- */
#overlay {
	background: #000;
}
.fiveYear {
	position: absolute;
	width: 768px;
	height: 768px;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
}
@media screen and (max-height:768px) {
	#overlay {
		overflow-y: scroll;
	}
}
@media screen and (min-height:769px) {
	.fiveYear {
		bottom: 0;
	}
}
@media screen and (max-width:768px) {
	.fiveYear {
		width: 100%;
		height: 100%;
	}
	.fiveYear img {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
}


/* -----     メイントピックスコンテンツ     ----- */
/*.freeTM {}
.freeTM a {
	display: block;
	position: relative;
}
.freeTM a img {
	width: 100%;
	height: auto;
}

@media screen and (max-width:1400px) {
	.freeTM a {
		height: 530px;
	}
	.freeTM a img {
		position: absolute;
		width: 1400px;
		height: 530px;
		left: -100%;
		right: -100%;
		margin: auto;
	}
}
*/

/* -----     メインコンテンツ     ----- */
.main {
	position: relative;
	padding: 20px 0 30px;
	background: url(/img/top/awa.png), #0063c4;
	background: url(/img/top/awa.png), -webkit-linear-gradient(top, #034484 0%,#0063c4 27%);
	background: url(/img/top/awa.png), -moz-linear-gradient(top, #034484 0%, #0063c4 27%);
	background: url(/img/top/awa.png), linear-gradient(to bottom, #034484 0%,#0063c4 27%);
	background-repeat: no-repeat;
	background-position: center top;
}

/*--  スライドショー  --*/
.topicsBox {
	position: relative;
	width: 900px;
	height: 390px;
}
.topicsBox li {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
.topicsBox li:first-child {
	display: block;
}
.topicsBtn {
	display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	-webkit-justify-content: center; justify-content: center;
	margin: 15px 0 20px;
}
.topicsBtn li {
	margin: 0 0 0 15px;
	cursor: pointer;
}
.topicsBtn li:first-child {
	margin: 0;
}
.topicsBtn img {
	width: 100%;
	max-width: 168px;
	height: auto;
}

/* -----     インフォメーションコンテンツ     ----- */
.snpc { display: inline; }
.snsp { display: none; }

.informationWrap {
}
.cttLeft {
	float: left;
	width: 510px;
}
.cttRight {
	float: left;
	width: 370px;
	margin-left: 20px;
}
.mainCttTitle {
	padding: 0 0 0 15px;
	color: #FFF;
	font-family: 'Montserrat';
	font-size: 28rem;
	font-weight: 700;
	font-style: italic;
}
.cttTitle {
	position: relative;
	padding: 0 0 5px 25px;
	font-size: 18rem;
	font-weight: bold;
	font-style: italic;
}
.cttTitle::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 5px;
	top: .6em;
	left: 0;
	margin: auto;
	background-color: #faf452;
}

/*--  news  --*/
.news>div {
	height: 165px;
	padding: 15px 10px 15px 15px;
	margin: 0 0 15px;
}
.newsList {
	width: 100%;
	height: 105px;
	padding: 0 1em 0 0;
	overflow: auto;
}
.newsList dt {
	padding: 5px 1em;
	background-color: #fffe8c;
	line-height: 1;
	vertical-align: middle;
}
.newsList dt .nDate {
	font-family: 'Lato';
	font-size: 13rem;
	color: #05336a;
	vertical-align: middle;
}
.newsList dt .nCat {
	font-size: 10rem;
	padding: 3px 10px 3px 6px;
	margin: 0 0 0 5px;
	font-style: oblique;
	color: #05336a;
}
/*.nInfo { background-color: #fad489; }
.nGoods { background-color: #fcc3c3; }
.nMedia { background-color: #d8e0fa; }
.nEvent { background-color: #c1fbef; }
.nGreeting { background-color: #fad9f8; }
.nTieup { background-color: #c6faaf; }*/
.newsList dd a {
	display: block;
	font-size: 13rem;
	padding: 10px 1em;
	background-color: #FFF;
	text-decoration: none;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.newsList dd a:hover {
	background-color: #ffffe7;
}
.newsList dd a .nSeries {
	display: block;
	font-weight: 700;
	text-decoration: none;
}
.newsList dd a .nTitle {
	display: block;
	padding: 0 0 0 1em;
	text-decoration: underline;
}
.newsList dd a:hover .nTitle {
	text-decoration: none;
}

.nSeries.Free { color: #0d8bec; }
.nSeries.FreeES { color: #074a99; }
.nSeries.HighSpeed { color: #53e9f6; }
.nSeries.FreeTM { color: #00ace9; }
.nSeries.FreeTMK { color: #00ace9; }
.nSeries.FreeTMY { color: #e60044; }
.nSeries.FreeTYM { color: #007bee; }
.nSeries.FreeSrs { color: #0d8bec; }

/*--  sub topics  --*/
.subTopics>div {
	height: 245px;
	padding: 15px;
	margin: 0 0 20px;
}
.subTopicsList li {
	margin: 0 0 15px;
}
.subTopicsList a {
	display: block;
	width: 340px;
	height: 100px;
}
/*--  movie  --*/
.movie>div {
	height: 208px;
	margin: 0 0 20px;
}
.movie a {
	position: relative;
	width: 370px;
	height: 208px;
	overflow: hidden;
}
.movie a::before {
	content: attr(data-hover);
	position: absolute;
	width: 350px;
	top: 0%;
	padding: 10px;
	color: #FFF;
	font-size: 13rem;
	background-color: rgba(5, 51, 106, 0.7);
	z-index: 1;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.movie a::after {
	content: "";
	position: absolute;
	width: 93px;
	height: 93px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: url(/img/top/moviePlay.png) no-repeat center;
	z-index: 2;
}
/*--  twitter  --*/
.twitter>div {
	height: 1155px;
	padding: 15px;
}
.twitterCtt {
	width: 340px;
	height: 1125px;
	overflow: auto;
}

/* -----     バナーコンテンツ     ----- */
.bannerWrap {
	background-color: #082f5e;
}
.bannerList {
	padding: 30px 0 10px 0;
	font-size: 0;
	text-align: center;
}
.bannerList li {
	display: inline-block;
	margin: 0 0 20px 20px;
}
/*.bannerList li:first-child {
	margin-left: 0;
}*/
.bannerList li a {
	display: block;
}





/* ---------- media screen ---------- */
@media screen and (max-width:768px) {

/*--  スライドショー  --*/
	.topicsBox {
		width: 100%;
		height: 100%;
	}
	
/* -----     インフォメーションコンテンツ     ----- */
	.snpc { display: none; }
	.snsp { display: inline; }

	.informationWrap {
	}
	.cttLeft, .cttRight {
		float: none;
		width: 100%;
	}
	.cttRight {
		margin-left: 0;
	}
	.news {
	}
	.news>div {
		height: 100%;
	}
	.newsList {
		width: 100%;
		height: 165px;
		padding: 0 2% 0 0;
		overflow: auto;
	}
	.subTopics>div {
		height: 100%;
		margin: 0 0 15px;
	}
	.subTopicsList li {
		width: 100%;
		margin: 0 auto 2%;
	}
	.subTopicsList a {
		display: block;
		width: 100%;
		max-width: 340px;
		height: 100%;
		margin: auto;
	}
	.movie>div {
		width: 100%;
		height: 100%;
		margin: 0 0 15px;
	}
	.movie a {
		width: 100%;
		height: 100%;
	}
	.movie a::before {
		width: 100%;
		padding: 2%;
	}
	.movie a::after {
		width: 30%;
		height: 30%;
		background-size: contain;
	}
	.twitter>div {
		height: 330px;
	}
	.twitterCtt {
		width: 100%;
		height: 300px;
		/* padding: 1% 2% 0 0; */
	}
	.bannerList li {
		display: block;
		margin: 20px auto;
		max-width: 200px;
	}
	.bannerList li:first-child {
		margin: 20px auto;
	}
	
	
	
	
	
	
	
	
	
	
}