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

#wrapperHyoushi img{border: 2px #1d1d1d solid;}

/*PC*/
@media screen and (min-width: 769px) {
	#wrapperIndexMain{ display: flex;justify-content: space-between;align-items: flex-end;}
	#wrapperIndexMain ul li {
    list-style: none;
    display: inline-block;
    margin-top: 8px;}
	#wrapperNews{ display: flex;justify-content: space-between;margin-bottom: 14px;}
	#wrapperTopics,#wrapperTwitter{width: 302px; height: 436px;}
	#wrapperTopics .titleTopNav,#wrapperTwitter .titleTopNav{ background-image: url(../image/bgTitleL.png),url(../image/bgTitleR.png); background-position: left, right; background-repeat: no-repeat; text-align: center;  color: #35bbbd; margin-bottom: 20px;}
	#wrapperTopics .titleTopNav{font-size: 22px;}
	#wrapperTwitter .titleTopNav{font-size: 24px;}
	#wrapperTwitter iframe{ border: 1px solid #e0e0e0 !important;}
	#wrapperTopics #wrapperTopicsList{height: 383px; overflow: hidden;}
	#wrapperTopics dd{margin-bottom: 25px;}
	#wrapperTopics dt{color: #35bbbd; font-weight: bold;}
	#wrapperTopNavi{ width: 635px;}
	#wrapperTopNavi nav ul li{display: inline-block; margin-bottom: 8px;}
	#btnNext,#btnComic,#btnOther2{margin-left: 5px;}
	#btnOther1,#btnOther2{margin-bottom: 0px!important;}
	
	#wrapperSpecial{background-image: url(../image/bgLine.png), url(../image/bgLine.png); background-repeat: repeat-x; background-position: top, bottom; margin: 26px 0; padding: 49px 0; background-color: #fff;}
	#wrapperSpecial ul{width: 1120px; margin: 0 auto; list-style: none;}
	
	/*左右の矢印の色を変える*/
	.slick-prev:before{content: "\f104"; font-family: FontAwesome; font-size: 36px; opacity: 1;}
	.slick-next:before {content: "\f105"; font-family: FontAwesome; font-size: 36px; opacity: 1;}
	.slick-prev, .slick-next{width: 27px; height: 100%; background: #ffd738;}
	 .slick-prev:hover, .slick-prev:focus,
  	.slick-next:hover,
	.slick-next:focus{background: #ffd738;}
	/*左右の矢印の位置を変える*/
	.slick-next {
		right: -22px;
		z-index: 99;
	}
	.slick-prev {
		 left: -28px;
		z-index: 100;
	}

#wrapperTrialSakuhin{display: flex; width: 1200px; margin: 0 auto;justify-content: space-between;}
#wrapperTrial,#wrapperSakuhin{width: 48%;margin-top: 10px;}
#wrapperTrial h2,#wrapperSakuhin h2{text-align: center; font-size: 32px; color: #35bbbd; margin-bottom: 22px;}
#wrapperTrial ul,#wrapperSakuhin ul{display: flex;justify-content: space-between; list-style-type: none;flex-wrap: wrap;}
#wrapperSakuhin ul::after{
  content:"";
  display: block;
  width:30%;
}
#wrapperTrial ul::before{
  content:"";
  display: block;
  width:23%;
  order:1;
}
#wrapperTrial ul::after{
  content:"";
  display: block;
  width:23%;
}
#wrapperTrial ul li{margin-bottom: 11px; position: relative;}
#wrapperTrial ul li img{width: 125px; height: auto;}
#wrapperTrial ul li span{position: absolute; bottom: 0px; right: 0px; font-size: 12px; color: #fff; padding: 3px 5px 3px 40px; background: url(../image/iconTrial.png) no-repeat #35bbbd; background-size: 32px; background-position: 5% 50%; border-left: 2px solid #1e7172;border-top: 2px solid #1e7172; border-radius: 3px 0 0 0;}
#wrapperSakuhin ul li{margin-bottom: 10px;}
#wrapperSakuhin ul li img{width: 182px; height: auto; border: 1px solid #c2baba;}
	
}

/* SP */
@media screen and (max-width: 768px) {
	/*スライド画像の横幅可変*/
	.multiple-item_sp img {
		max-width: 95%;
    	height: auto;
    	margin: 0 auto;
	}
	
	#wrapperIndexMain #wrapperHyoushi{ margin: 25px 20px 10px;}
	#wrapperIndexMain h2{font-size: 1.4rem; text-align: center; background: #fff; padding: 0 20px; display: inline-block;}
	#wrapperTxtReleaseSP{margin-bottom: 20px;}
	#wrapperIndexMain #txtReleaseSP{ background: #ffd738; padding: 0 20px; font-size: 1.4rem; border-radius: 50px;}
	#wrapperNews{margin-bottom: 14px;}
	#wrapperTopics,#wrapperTwitter{height: 370px; margin-top: 33px;}
	#wrapperTopics .titleTopNav,#wrapperTwitter .titleTopNav{ background-image: url(../image/bgTitleL.png),url(../image/bgTitleR.png); background-position: left, right; background-repeat: repeat-x; text-align: center;  color: #35bbbd; margin-bottom: 20px;}
	#wrapperTopics .titleTopNav{font-size: 22px;}
	#wrapperTwitter{text-align: center;}
	#wrapperTwitter .titleTopNav{font-size: 24px;}
	#wrapperTwitter iframe{ border: 1px solid #e0e0e0 !important; width: 85% !important;}
	#wrapperTopics #wrapperTopicsList{height: 333px; overflow: hidden; margin: 0 20px 33px;}
	#wrapperTopics dd{margin-bottom: 25px;}
	#wrapperTopics dt{color: #35bbbd; font-weight: bold;}
	#wrapperTopNavi nav ul{ display: flex;flex-wrap: wrap;justify-content: space-around; text-align: center;}
	#wrapperTopNavi nav ul li{ width: 48%; margin-bottom: 3px; display: inline-block;}
	#btnNext,#btnComic,#btnOther2{margin-left: 5px;}
	#btnOther1,#btnOther2{margin-bottom: 0px!important;}
	
	#wrapperSpecial{background-image: url(../image/bgLine.png), url(../image/bgLine.png); background-repeat: repeat-x; background-position: top, bottom; margin: 20px 0; padding: 40px 0; background-color: #fff;}
	#wrapperSpecial ul{margin: 0 auto; list-style: none;}
	
	/*左右の矢印の色を変える*/
	.slick-prev:before{content: "\f104"; font-family: FontAwesome; font-size: 36px; opacity: 1;}
	.slick-next:before {content: "\f105"; font-family: FontAwesome; font-size: 36px; opacity: 1;}
	.slick-prev, .slick-next{width: 27px; height: 100%; background: #ffd738;}
	 .slick-prev:hover, .slick-prev:focus,
  	.slick-next:hover,
	.slick-next:focus{background: #ffd738;}
	/*左右の矢印の位置を変える*/
	.slick-next {
		right: 0px;
		z-index: 99;
	}
	.slick-prev {
		 left: 0px;
		z-index: 100;
	}

#wrapperTrialSakuhin{margin: 0 auto;}
#wrapperTrial,#wrapperSakuhin{margin-top: 30px;}
#wrapperTrial h2,#wrapperSakuhin h2{text-align: center; font-size: 1.6rem; color: #35bbbd; margin-bottom: 15px;}
#wrapperTrial ul,#wrapperSakuhin ul{display: flex;justify-content: space-between; list-style-type: none;flex-wrap: wrap; margin: 0 10px;}
#wrapperTrial ul::after{
  content:"";
  display: block;
  width:30%;
}
#wrapperSakuhin::after{
  content:"";
  display: block;
  width:30%;
}
#wrapperTrial ul li{margin-bottom: 11px; position: relative; width: 32%; display: inline-block;}
#wrapperTrial ul li img{width:100%; height: auto;}
#wrapperTrial ul li span{position: absolute; bottom: 0px; right: 0px; font-size: 0.6rem; color: #fff; padding: 0px 5px 0px 30px; background: url(../image/iconTrial.png) no-repeat #35bbbd; background-size: 20px; background-position: 5% 50%; border-left: 2px solid #1e7172;border-top: 2px solid #1e7172; border-radius: 3px 0 0 0;}
#wrapperSakuhin ul li{margin-bottom: 10px; width: 49%; display: inline-block;}
#wrapperSakuhin ul li img{width: 100%; height: auto; border: 1px solid #c2baba;}
}