@charset "utf-8";
/* CSS Document */

@import "../../../common/css/unique/top.css"; 



@media only screen and (max-width: 480px){
#all-items .slick-dots{
    display: none !important;
}
}



/*#l-content {
	background-color: rgba(255,255,255,0.5)
}*/


/*-- otanoshimi BG --*/


.u-top-news-slide {
	margin-top:0px;
	}
.ribbon{
	position: relative;/*相対配置*/
	margin:20px auto 5px;
	padding:0;
	}
.ribbon p {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	font-size: 18px;
	font-weight:bold;
	color: #FFF;
	}	
.ribbon img{
	width: 80%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
.top_slide_banner{
	width: 98%;
    background-color: #FFF;
    margin: 5px auto;
    padding: 3px;
    text-align: center;
    border-radius: 4px;
}


.topbnr17area {
	width: 92%;
	margin:30px auto;
	padding:0;
	}
.topbnr17left {
	position: relative;
	padding:0;
	margin:0;
	}
.topbnr17left p {
	position: absolute;
	top: 20px;
 	left: 0;
	font-size: 20px;
	margin: 0 auto; 
	padding: 0;
	width: 100%;
	color: white;/*文字を白に*/
	text-align:center;
	font-weight:bolder;
	}
.topbnr17left img {
	width: 100%;
	margin:10px auto 0;
	}
.topbnr17right {
	position: relative;
	padding:0;
	margin:0;
	}
.topbnr17right p {
	position: absolute;
	top: 20px;
 	left: 0;
	font-size: 20px;
	margin: 0 auto; 
	padding: 0;
	width: 100%;
	color: white;/*文字を白に*/
	text-align:center;
	font-weight:bolder;
	}
.topbnr17right img {
	width: 100%;
	margin:10px auto 0;
	}	


/*20200709 added*/
.topbnr20right {
	position: relative;
	padding:0;
	margin:0;
	}

.topbnr20right img {
	width: 100%;
	margin:10px auto 0;
    height: auto;
    aspect-ratio:auto 470 /265;
	}	
.topbnr20right-box {
	position: relative;
	top: 25px;
	margin: 0 auto; 
	padding: 0;
	}
.topbnr20right-box p {
	font-size: 24px;
	color: white;
	font-weight:bolder;
	position: absolute;
    top: 18px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
	}	


/*20220324 added*/
.topbnr20left {
	position: relative;
	padding:0;
	margin:0;
	}

.topbnr20left img {
	width: 100%;
	margin:10px auto 0;
    height: auto;
    aspect-ratio:auto 470 /265;
	}	
.topbnr20left-box {
	position: relative;
	top: 25px;
	margin: 0 auto; 
	padding: 0;
	}
.topbnr20left-box p {
	font-size: 24px;
	color: white;
	font-weight:bolder;
	position: absolute;
    top: 18px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
	}	


@media screen and (min-width: 760px) {
	

.u-top-news-slide {
	margin-top:0px;
	}
.ribbon{
	position: relative;/*相対配置*/
	margin:20px auto 5px;
	padding:0;
	}
.ribbon p {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	font-size: 21px;
	font-weight:bold;
	color: #FFF;
	}	
.ribbon img{
	width: 510px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}	

.topbnr17area {
	width: 966px;
	margin:30px auto;
	padding-left:4px;
	}
.u-top-news-slide .slide-item {
    background-color:rgba(255,255,255,0.7);
}

.top_slide_banner img{
	border: #FFF solid;
	border-bottom:none;
    height: auto;
    aspect-ratio:auto 568 /176;
}	
.topbnr17left {
	position: relative;
	display: inline-block;
	padding:0;
	margin-right: 6px;
	margin-left : auto;
	text-align:center;
	}
.topbnr17left p {
	position: absolute;
	top: 25px;
 	left: 0;
	font-size: 24px;
	margin: 0 auto; 
	padding: 0;
	color: white;/*文字を白に*/
	font-weight:bolder;
	}
.topbnr17left img {
	margin:10px 0;
	}
	
.topbnr17right {
	position: relative;
	display: inline-block;
	padding:0;
	margin-right : auto;
	margin-left: 10px;
	text-align:center;
	}
.topbnr17right p {
	position: absolute;
	top: 25px;
 	left: 0;
	font-size: 24px;
	margin: 0 auto; 
	padding: 0;
	color: white;/*文字を白に*/
	font-weight:bolder;
	}
.topbnr17right img {
	margin:10px 0;
	}	
	
.topbnr20right {
	display: inline-block;
	margin-left: 10px;
	}	
.topbnr20right-box{
	top:0;
	}	
	
.topbnr20left {
	display: inline-block;
	margin-left: 0px;
	}	
.topbnr20left-box{
	top:0;
	}	

	  
}



/*---download 181101---*/
.u-top-play .play-box.type-download {
	display : none;
}
.u-top-play .play-box.type-download .box-wrap {
	background-size : 100px auto;
}
.u-top-play .play-box.type-download .box-wrap .slide-item a .item-dl {
	border-radius : 5px;
	position : relative;
	display : block;
	overflow : hidden;
}
.u-top-play .play-box.type-download .box-wrap .slide-item a .item-dl:before {
	content : '';
	display : block;
	position : absolute;
	top : 0;
	right : 0;
	left : 0;
	bottom : 10px;
	border-radius : 5px 5px 0 0;
	z-index : 1;
	height : 100%;
}
@media screen and (min-width: 760px) {
	.u-top-play .play-box.type-download .box-wrap .slide-item a .item-dl:hover:before {
		border : solid 2px #20ade5 !important;
	}
	.u-top-play .play-box.type-download .box-wrap:first-child {
		min-height:550px;/*cai*/
	}
}
.u-top-play .play-box.type-download .box-wrap .slide-ttl {
	background-color : #20ade5 !important;
}
@media screen and (min-width: 760px) {
	.u-top-play .play-box.type-download {
		display : block;
	}
}


.u-top-play2 .play-box.type-download {
	display : none;
}
.u-top-play2 .play-box.type-download .box-wrap {
	background : url(../../images/bg_coloring.jpg);
	background-size : 100px auto;
}
.u-top-play2 .play-box.type-download .box-wrap .slide-item a .item-dl {
	border-radius : 5px;
	position : relative;
	display : block;
	overflow : hidden;
}
.u-top-play2 .play-box.type-download .box-wrap .slide-item a .item-dl:before {
	content : '';
	display : block;
	position : absolute;
	top : 0;
	right : 0;
	left : 0;
	bottom : 10px;
	border-radius : 5px 5px 0 0;
	z-index : 1;
	height : 100%;
}
@media screen and (min-width: 760px) {
	.u-top-play2 .play-box.type-download .box-wrap .slide-item a .item-dl:hover:before {
		border : solid 2px #20ade5 !important;
	}
}
.u-top-play2 .play-box.type-download .box-wrap .slide-ttl {
	background-color : #20ade5 !important;
}
@media screen and (min-width: 760px) {
	.u-top-play2 .play-box.type-download {
		display : block;
	}
}


.type-download .m-txt-play {
	color : #20ade5;
	background-image : url(../../images/i_download2.png);
}
.type-download .m-txt-play:before {
	background-image : url(../../images/p_ribbon_coloring_col2.png);
}
.type-download .m-txt-play:after {
	background-image : url(../../images/p_ribbon_coloring_col2.png);
}
.type-download .m-txt-play .play-txt:after {
	background-color : #20ade5;
}

/*---------------
 20220210 update
---------------*/
a.btn-tw{
    width: 40%;
  padding: 0.8em 0.5em 0.5em 0.5em;
  margin: 50px auto 30px auto;
  display: block;
  color: #FFF !important;
  background: #1D9BF0;
  text-decoration: none;
  font-weight: bold;
  font-size:1.2em;
  border-radius: 5px;
  text-align:center;
  text-decoration:none !important;
    box-shadow: 0 2px 5px #999;
}
a.btn-tw:before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: -3px 10px 0 0;
  background: url("../../../common/images/i_twitter_w.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.btn-tw:hover {
    color: #FFF;
  background: #42acf0;
}

/*---------------
 20230613 update
---------------*/
@media screen and (min-width: 760px){
	.u-top-pk h2{
		background-size:35px auto;
	}
}

/*---------------
 202340207 update
---------------*/
.type-wallpaper .m-icon-new_w{
	top:-9px;
}
@media screen and (max-width: 760px){
	.type-wallpaper .m-icon-new_w{
		top:-5px;
		left:39px;
	}
}