/*
Re:LieF 〜DeaR YoU〜
COPYRIGHT [C] RASK ALL RIGHTS RESERVED.
*/

/********************************************************************************

		IcoN & WallpapeR

*********************************************************************************/

#iconwpWrap {
	margin-bottom: 60px;
}
.iconwp {
	width: 100%;
}
.itemImg {
	overflow: hidden;
}
.itemImg a img {
	-webkit-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
}
#wrap:not(.sp) .itemImg a:hover img {
	opacity: 0.5;
}
.itemImg img {
	width: 100%;
	height: auto;
}
.btnWrap .btn a {
	display: block;
	color: #7d7d7d;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
	padding: 12px;
	border: 1px solid #a7a7a7;
	-webkit-transition: background 0.4s ease, color 0.4s ease;
	transition: background 0.4s ease, color 0.4s ease;
}
#wrap:not(.sp) .btnWrap .btn a:hover {
	background: #b6da3e;
	color: #fff;
}
.all {
	width: 520px;
	margin: 40px auto 0 auto;
}
.all .btn {
	float: left;
	width: 520px;
	margin-right: 20px;
}
#twitterIcon .subTitle {
	background: url("../img/iconwp/twicon/title.png") no-repeat center center;
	background-size: auto 20px;
}
#twitterIcon .item {
	float: left;
	width: calc((100% - 100px) / 6);
	margin-bottom: 20px;
}
#twitterIcon .item:not(:nth-child(6n)) {
	margin-right: 20px;
}
#twitterHeader {
	margin-top: 110px;
}
#twitterHeader .subTitle {
	background: url("../img/iconwp/twheader/title.png") no-repeat center center;
	background-size: auto 20px;
}
#twitterHeader .item:first-child {
	width: 100%;
	margin-bottom: 20px;
}
#twitterHeader .item:not(:first-child) {
	float: left;
	width: calc((100% - 20px) / 2);
	margin-bottom: 20px;
}
#twitterHeader .item:last-child {
	margin-bottom: 16px;
}
#twitterHeader .item:nth-child(n+2):not(:nth-child(odd)) {
	margin-right: 20px;
}
#twitterHeader .item:first-child .itemImg {
	height: 353px;
}
#twitterHeader .item:not(:first-child) .itemImg {
	height: 173px;
}
#pcWallpaper {
	margin-top: 110px;
}
#pcWallpaper .subTitle {
	background: url("../img/iconwp/pcwp/title.png") no-repeat center center;
	background-size: auto 20px;
}
#pcWallpaper .item {
	float: left;
	width: calc((100% - 20px) / 2);
	margin-bottom: 50px;
}
#pcWallpaper .item:not(:nth-child(2n)) {
	margin-right: 20px;
}
#pcWallpaper .itemImg {
	height: 292px;
}
#pcWallpaper .btnWrap:not(.all) .btn {
	float: left;
	width: calc((100% - 20px) / 2);
	margin-top: 18px;
}
#pcWallpaper .btnWrap:not(.all) .btn:not(:last-child) {
	margin-right: 20px;
}
#pcWallpaper .all {
	width: 100%;
	margin: 0 auto;
}
#pcWallpaper .all .btn {
	width: calc((100% - 20px) / 2);
}
#pcWallpaper .all .btn:last-child {
	margin-right: 0;
}
#spWallpaper {
	margin-top: 110px;
}
#spWallpaper .subTitle {
	background: url("../img/iconwp/spwp/title.png") no-repeat center center;
	background-size: auto 20px;
}
#spWallpaper .itemWrap {
	width: 980px;
	margin: 0 auto;
}
#spWallpaper .item {
	float: left;
	width: 180px;
	margin-bottom: 50px;
}
#spWallpaper .item:not(:nth-child(5n)) {
	margin-right: 20px;
}
#spWallpaper .itemImg {
	height: 320px;
}
#spWallpaper .btnWrap:not(.all) .btn {
	width: 100%;
	margin-top: 25px;
}
#spWallpaper .btnWrap:not(.all) .btn:not(:first-child) {
	margin-top: 10px;
}
#spWallpaper .all {
	width: 980px;
	margin: 0 auto;
}
#spWallpaper .all .btn {
	width: calc((100% - 40px) / 3);
}
#spWallpaper .all .btn:last-child {
	margin-right: 0;
}
#banner160 {
	margin-top: 100px;
}
#banner160 .subTitle {
	background: url("../img/iconwp/banner160/title.png") no-repeat center center;
	background-size: auto 20px;
}
#banner160 .itemWrap {
	width: 880px;
	margin: 0 auto;
}
#banner160 .item {
	float: left;
	width: 160px;
	margin-bottom: 20px;
}
#banner160 .item:not(:nth-child(5n)) {
	margin-right: 20px;
}
#banner160 .all {
	margin-top: 35px;
}
#banner200 {
	margin-top: 110px;
}
#banner200 .subTitle {
	background: url("../img/iconwp/banner200/title.png") no-repeat center center;
	background-size: auto 20px;
}
#banner200 .itemWrap{
	width: 860px;
	margin: 0 auto;
}
#banner200 .item {
	float: left;
	width: 200px;
	margin-bottom: 20px;
}
#banner200 .item:not(:nth-child(4n)) {
	margin-right: 20px;
}
#setDownload {
	margin-top: 120px;
}
#setDownload .subTitle {
	background: url("../img/iconwp/set/title.png") no-repeat center center;
	background-size: auto 20px;
}
#setDownload .btn {
	float: left;
	width: calc((100% - 80px) / 5);
	margin-bottom: 20px;
}
#setDownload .btn:not(:nth-child(5n+1)) {
	margin-right: 20px;
}
#setDownload .btn:first-child {
	width: 100%;
}
#wrap:not(.sp) #setDownload .btn:nth-child(2) a:hover {
	background: #fa779e;
}
#wrap:not(.sp) #setDownload .btn:nth-child(3) a:hover {
	background: #9886d7;
}
#wrap:not(.sp) #setDownload .btn:nth-child(4) a:hover {
	background: #ffd037;
}
#wrap:not(.sp) #setDownload .btn:nth-child(5) a:hover, #wrap:not(.sp) #setDownload .btn:nth-child(6) a:hover {
	background: #cccccc;
}
#wrap:not(.sp) #setDownload .btn:nth-child(7) a:hover {
	background: #b6da3e;
}
#wrap:not(.sp) #setDownload .btn:nth-child(8) a:hover {
	background: #009cd5;
}
#wrap:not(.sp) #setDownload .btn:nth-child(9) a:hover {
	background: #ffb048;
}
#wrap:not(.sp) #setDownload .btn:nth-child(10) a:hover {
	background: #d64fa4;
}
#wrap:not(.sp) #setDownload .btn:nth-child(11) a:hover {
	background: #00b09c;
}
#wrap:not(.sp) #setDownload .btn:nth-child(12) a:hover {
	background: #007bd0;
}
#wrap:not(.sp) #setDownload .btn:nth-child(13) a:hover {
	background: #ff846f;
}
#wrap:not(.sp) #setDownload .btn:last-child a:hover {
	background: #c46cc7;
}
@media screen and (max-width : 680px) {
	#iconwpWrap {
		margin-bottom: 50px;
	}
	.itemImg {
		height: auto !important;
	}
	.btnWrap .btn a {
		font-size: 13px;
		letter-spacing: 1.5px;
		padding: 9px;
	}
	#wrap.sp .all, #wrap.sp #setDownload {
		display: none;
	}
	.all {
		width: 100%;
		margin: 10px auto 0 auto;
	}
	.all .btn {
		float: none;
		width: 100%;
	}
	#iconwpWrap {
		padding: 0 20px;
	}
	#twitterHeader {
		margin-top: 60px;
	}
	#wrap.sp #twitterHeader {
		margin-top: 30px;
	}
	#twitterIcon .item {
		width: calc((100% - 20px) / 3 - 1px);
	}
	#twitterIcon .item:not(:nth-child(6n)) {
		margin-right: 0;
	}
	#twitterIcon .item:not(:nth-child(3n)) {
		margin-right: 10px;
	}
	#twitterHeader .item:first-child {
		margin-bottom: 10px;
	}
	#twitterHeader .item:not(:first-child) {
		float: none;
		width: 100%;
		margin-bottom: 10px;
	}
	#twitterHeader .item:nth-child(n+2):not(:nth-child(odd)) {
		margin-right: 0;
	}
	#pcWallpaper {
		margin-top: 60px;
	}
	#wrap.sp #pcWallpaper {
		margin-top: 40px;
	}
	#pcWallpaper .item {
		float: none;
		width: 100%;
		margin-bottom: 30px;
	}
	#pcWallpaper .item:not(:nth-child(2n)) {
		margin-right: 0;
	}
	#pcWallpaper .btnWrap:not(.all) .btn {
		width: calc((100% - 10px) / 2);
		margin-top: 15px;
	}
	#pcWallpaper .btnWrap:not(.all) .btn:not(:last-child) {
		margin-right: 10px;
	}
	#pcWallpaper .all {
		width: 100%;
	}
	#pcWallpaper .all .btn {
		width: 100%;
	}
	#pcWallpaper .all .btn:last-child {
		margin-top: 10px;
	}
	#spWallpaper {
		margin-top: 60px;
	}
	#wrap.sp #spWallpaper {
		margin-top: 20px;
	}
	#spWallpaper .itemWrap {
		width: 100%;
	}
	#spWallpaper .item {
		float: left;
		width: calc((100% - 10px) / 2 - 1px);
		margin-bottom: 30px;
	}
	#wrap.sp #spWallpaper .item:last-child {
		margin-bottom: 0;
	}
	#spWallpaper .item:not(:nth-child(5n)) {
		margin-right: 0;
	}
	#spWallpaper .item:not(:nth-child(2n)) {
		margin-right: 10px;
	}
	#spWallpaper .btnWrap:not(.all) .btn {
		margin-top: 15px;
	}
	#spWallpaper .all {
		width: 100%;
	}
	#spWallpaper .all .btn {
		width: 100%;
	}
	#spWallpaper .all .btn:not(:first-child) {
		margin-top: 10px;
	}
	#banner160 {
		margin-top: 50px;
	}
	#banner160 .itemWrap {
		width: 100%;
	}
	#banner160 .item {
		width: calc((100% - 40px) / 5 - 1px);
			margin-bottom: 10px;
	}
	#banner160 .item:not(:nth-child(5n)) {
		margin-right: 10px;
	}
	#banner160 .all {
		margin-top: 20px;
	}
	#banner200 {
		margin-top: 60px;
	}
	#banner200 .itemWrap{
		width: 100%;
	}
	#banner200 .item {
		width: calc((100% - 20px) / 3 - 1px);
		margin-bottom: 10px;
	}
	#banner200 .item:not(:nth-child(4n)) {
		margin-right: 0;
	}
	#banner200 .item:not(:nth-child(3n)) {
		margin-right: 10px;
	}
	#setDownload {
		margin-top: 60px;
	}
	#setDownload .btn {
		width: calc((100% - 10px) / 2);
		margin-bottom: 10px;
	}
	#setDownload .btn:not(:nth-child(5n+1)) {
		margin-right: 0;
	}
	#setDownload .btn:not(:nth-child(2n+1)) {
		margin-right: 10px;
	}
}
@media screen and (max-width : 460px) {
	#banner200 {
		margin-top: 50px;
	}
	#wrap.sp #banner200 {
		margin-top: 40px;
	}
	#banner200 .itemWrap{
		width: 100%;
	}
	#banner200 .item {
		width: calc((100% - 10px) / 2 - 1px);
		margin-bottom: 10px;
	}
	#banner200 .item:not(:nth-child(3n)) {
		margin-right: 0;
	}
	#banner200 .item:not(:nth-child(4n)) {
		margin-right: 0;
	}
	#banner200 .item:not(:nth-child(2n)) {
		margin-right: 10px;
	}
	#banner200 .all {
		margin-top: 10px;
	}
}