@charset "utf-8";
@import "layout.css?ver=230825";

/* トップ
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* flaArea
========================================================= */
#flaArea {
/*	position: relative;*/
	width: 100%;
/*	overflow: hidden;*/
	background: url(/common/img/bg_topfla.png) repeat-y center top;
}
#flaArea a {
/*	background: transparent;*/
	outline: none;
}
.flaArea__inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.5em 0 1em;
/*	border: 1px solid blue;*/
	background: url(/common/img/bg_topfla_edge.png) no-repeat center top;
	text-align: center;
}

/* スライダー上のバナー
========================================================= */
.topic-banner {
	margin: 1.5em auto 2.5em;
}
.topic-banner__link {
	background-color: transparent;
	color: #0767bd;
}
.topic-banner__link:hover,
.topic-banner__link:focus,
.topic-banner__link:active {
	background-color: transparent;
	color: #056be8;
}
.topic-banner__link-image {
	display: inline-block;
	margin-bottom: .5em;
	box-shadow: 0 0 5px rgba(19,20,21,.5);
}

/* スライダー
========================================================= */
.slider {
	max-width: 970px;
	padding: 5px;
}
.slider__img {
	display: block;
	width: 100%;
	height: auto;
	margin: auto;
	box-shadow: 0 0 5px rgba(19,20,21,.5);
}

.slider--main {
	margin-top: 1.25em;
	/* 高さが異なる画像を垂直中央で並べる*/
	display: flex;
	justify-content: center; /* 左右の中央揃え */
}
.slider--main__item {
	align-self: center; /* 上下の中央揃え */
}
/* 画像が横長の場合、サイズを大きく調整 */
.slider--main__item.horizontal.swiper-slide-active {
	transform: scale(1.5) !important;
}
.slider--main__img {
	width: auto;
	max-width: 100%;
	max-height: 520px;
	/* アスペクト比を維持したまま、要素のサイズに収まるように表示 */
	object-fit: contain;
	/* 画像の外見を最適化するアルゴリズムで拡大縮小 */
	image-rendering: smooth;
}

.slider--sub {
	margin-top: 1em;
	max-width: 870px;
}
.slider--sub__item {
	filter: none;
	cursor: pointer;
}
.slider--sub__item.swiper-slide-thumb-active {
	filter: grayscale(100%);
}
.slider--sub__img {
	max-width: 240px;
	object-fit: contain;
}

/* newsListTopics
========================================================= */
/*#pg_home .inner { border: 1px solid green; }*/
#pg_home #contents {
	width: 940px;
/*	border: 1px solid blue;*/
}
#pg_home #main {
/*	border: 1px solid red;*/
	width: 715px;
}

#pg_home #newsListTopics h1 {
	margin-bottom: 12px;
/*	border: 1px solid blue;*/
}

/* newsListTopics --------------------------------------------- */
#pg_home #newsListTopics ul.linklist li {
/*	width: 230px;*/
	width: 350px;
}
#pg_home #newsListTopics ul.linklist li:nth-child(2n) {
/*#pg_home #newsListTopics ul.linklist li:not(:nth-child(3n+1)) {*/
	margin-left: .5em;
}

/* selectTab
========================================================= */
#selectTab {
	width: 695px;
	padding: 0 10px;
	background: url(/common/img/bg_selecttab_wide.gif) no-repeat 0 37px;
/*	border: 1px solid red;*/
}
/* tabs --------------------------------------------- */
#selectTab ul.tabs li a { background-image: url(/common/img/btn_selecttab_home.gif); }
#selectTab li#tab_game a { background-position: 0 0; }
#selectTab li#tab_event a { background-position: -100px 0; }
#selectTab li#tab_goods a { background-position: -200px 0; }
#selectTab li#tab_support a { background-position: -300px 0; }
#selectTab li#tab_other a { background-position: -400px 0; }
#selectTab li#tab_game a:hover, 
#selectTab li#tab_game a:focus { background-position: 0 -38px; }
#selectTab li#tab_event a:hover, 
#selectTab li#tab_event a:focus { background-position: -100px -38px; }
#selectTab li#tab_goods a:hover, 
#selectTab li#tab_goods a:focus { background-position: -200px -38px; }
#selectTab li#tab_support a:hover, 
#selectTab li#tab_support a:focus { background-position: -300px -38px; }
#selectTab li#tab_other a:hover, 
#selectTab li#tab_other a:focus { background-position: -400px -38px; }
#selectTab li#tab_game a.current { background-position: 0 -76px; }
#selectTab li#tab_event a.current { background-position: -100px -76px; }
#selectTab li#tab_goods a.current { background-position: -200px -76px; }
#selectTab li#tab_support a.current { background-position: -300px -76px; }
#selectTab li#tab_other a.current { background-position: -400px -76px; }
/* linklist --------------------------------------------- */
#selectTab div.linklist h2 {
	width: auto;
	margin-bottom: 2px;
	padding: .2em 5px;
/* 	border-bottom: 1px solid #aaafb5; */
	color: #0069bf;
	font-size: 123%;
/*	border: 1px solid blue;*/
}
#selectTab div.linklist ul, #selectTab div.linklist ol { width: auto;}
#selectTab div.linklist li {
	display: inline-block;
	vertical-align: top;
/*	float: left;*/
	width: 340px;
/*	border: 1px solid blue;*/
}
#selectTab div.linklist li:nth-child(2n) {
/*	float: right;*/
	margin-left: .5em;
}
/*
#selectTab div.linklist li.left {
	margin-right: 20px;
}
*/
#selectTab p {
	clear: both;
	padding-top: .5em;
}

/* #pickupArea
========================================================= */
@media screen and (max-width: 960px) {
	#pickupArea {
		display: none;
	}
}
#pickupArea {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 330px;
	height: 200px;
}
#pickupArea img {
	vertical-align: top;
}
#pickupArea a:hover,
#pickupArea a:focus {
	background: transparent;
	color: #0069bf;
}
#pickupArea a {
	display: block;
}
#pickupArea a img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#pickupArea a:hover img,
#pickupArea a:focus img {
	opacity: .7;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
/* http://www.softel.co.jp/blogs/tech/archives/4080 */
.fuwafuwa {
/* 	display: inline-block; */
	-webkit-animation: fuwafuwa 2s ease infinite;
	animation: fuwafuwa 2s ease infinite;
}
@-webkit-keyframes fuwafuwa {
	0% {
		-webkit-transform:translate(0, 0);
		-transform:translate(0, 0);
	}
	50% {
		-webkit-transform:translate(0, 10px);
		transform:translate(0, 10px);
	}
	100% {
		-webkit-transform:translate(0, 0);
		transform:translate(0, 0);
	}
}
@keyframes fuwafuwa {
	0% {
		-webkit-transform:translate(0, 0);
		-transform:translate(0, 0);
	}
	50% {
		-webkit-transform:translate(0, 10px);
		transform:translate(0, 10px);
	}
	100% {
		-webkit-transform:translate(0, 0);
		transform:translate(0, 0);
	}
}