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

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

		MaiN_VisuaL

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

#mainVisual {
	position: relative;
	width: 100%;
	margin: 80px 40px 20px 0;
}
#mainVisual img {
	width: 100%;
	height: auto;
}
.poetry img {
	width: 100%;
	height: auto;
}
#poetry01Wrap {
	display: none;
	position: absolute;
	top: 80px;
	left: 80px;
	width: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: 99;
}
#poetry01 {
	width: 620px;
}
#onSaleWrap {
	position: absolute;
	top: -95px;
	right: 0;
	pointer-events: none;
	z-index: 99;
}
#onSale {
	width: 550px;
}
#poetry02Wrap {
	display: none;
	position: absolute;
	top: 100px;
	left: 50px;
	width: 100%;
	pointer-events: none;
	z-index: 99;
}
#poetry02 {
	width: 174px;
}
#sliderWrap {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 9;
}
#sliderWrap #slider {
	position: relative;
}
#sliderWrap #slider li {
	position: absolute;
	top: 0;
	left: 0;
}
#sliderNav {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 5px;
	z-index: 9;
}
#sliderNav li {
	float: left;
	width: calc((100% - 15px) / 4);
}
#sliderNav li:not(.current) {
	cursor: pointer;
}
#sliderNav li:not(:last-child) {
	margin-right: 5px;
}
#badge {
	position: absolute;
	top: 20px;
	right: 15px;
	background: url("../img/top/badge_bg.png") no-repeat center left;
	background-size: 180px 180px;
	width: 180px;
	height: 180px;
	border-radius: 90px;
	overflow: hidden;
	z-index: 999;
}
#badge img {
	width: 100%;
	height: auto;
}
#badgeWrap {
	width: 180px;
	height: 180px;
}
#badgeWrap .badge {
	float: left;
	position: relative;
	width: 180px;
	height: 180px;
}
#badge .badge img:last-child {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#badge .btn {
	position: absolute;
	bottom: 16px;
	width: 24px;
	height: 24px;
}
#badge .btn img {
	cursor: pointer;
}
#badge .btn img:last-child {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#badgePrev {
	left: calc(50% - 28px);
}
#badgeNext {
	right: calc(50% - 28px);
}
.progress {
	position: absolute;
	bottom: -1px;
	left: 0;
	background: #d7d7d7;
	width: 0;
	height: 2px;
}
.youtube {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 1280px;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	transform-origin: center center;
	z-index: 9999;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}
.thumb {
	cursor: pointer;
}
@media screen and (max-width : 680px){
	section#mainVisual {
		margin: 20px 0;
	}
	#poetry01Wrap {
		top: 130px;
		left: 30px;
	}
	#onSaleWrap {
		position: relative;
		top: 5px;
		right: 0;
		padding-right: 15px;
	}
	#onSale {
		float: right;
	}
	#sliderNav {
		margin-top: 3px;
	}
	#sliderNav li {
		width: calc((100% - 9px) / 4);
	}
	#sliderNav li:not(:last-child) {
		margin-right: 3px;
	}
	#badge {
		top: 12vw;
		right: 1.2vw;
		background-size: 21vw 21vw;
		width: 21vw;
		height: 21vw;
	}
	#badgeWrap {
		width: 21vw;
		height: 21vw;
	}
	#badgeWrap .badge {
		width: 21vw;
		height: 21vw;
	}
	#badge .btn {
		bottom: 2vw;
		width: 2.5vw;
		height: 2.5vw;
	}
	#badgePrev {
		left: calc(50% - 3vw);
	}
	#badgeNext {
		right: calc(50% - 3vw);
	}
}

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

		CopY

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

#copy {
	clear: both;
	position: relative;
	width: 100%;
	height: 50px;
	margin-top: 67px;
	pointer-events: none;
	z-index: 99;
}
@media screen and (max-width : 680px){
	#copy {
		padding: 0 20px;
		margin-top: 35px;
	}
	#copy img{
		width: 100%;
	}
}

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

		SectioN

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

section .title {
	position: relative;
	width: 340px;
	height: 40px;
	margin-bottom: 10px;
	pointer-events: none;
}
section .title hr {
	top: 1px;
	right: 0;
}
section .item {
	position: relative;
	width: 300px;
	height: 174px;
	margin: 0 10px;
}
section .item a img {
	width: 100%;
	height: auto;
	border: 6px solid #e6e6e6;
}
section .caption {
	position: absolute;
	bottom: -15px;
	right: 20px;
	pointer-events: none;
}
section .caption img {
	height: 12px;
}
@media screen and (max-width : 680px){
	section .title hr {
		right: 0;
	}
	section .item {
		width: 100%;
		height: auto;
		margin: 0;
	}
}

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

		PickuP

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

#pickupWrap {
	position: relative;
	width: 100%;
	height: 240px;
	margin: 75px 0 20px 0;
	z-index: 99;
}
#pickupWrap .contents {
	float: left;
	margin: 0 20px 25px 0;
}
#pickupWrap .contents:last-child {
	margin-right: 0;
}
@media screen and (max-width : 680px){
	#pickupWrap {
		float: none;
		width: 100%;
		height: auto;
		padding: 0 20px;
		margin: 0;
	}
	#pickupWrap .contents {
		float: none;
		margin: 0;
	}
	#pickupWrap .title {
		width: 100%;
		height: 36px;
		margin-bottom: 20px;
	}
	#pickupWrap .itemWrap {
		padding: 0 10px;
		margin: 0 0 40px 0;
	}
}

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

		TopicS

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

#topicsWrap {
	clear: both;
	width: 1060px;
	height: 240px;
	margin-bottom: 40px;
}
#topicsWrap .title {
	width: 1060px;
}
#topicsList .itemWrap {
	float: left;
}
#topicsList .itemWrap:not(:nth-child(3n)) {
	margin-right: 40px;
}
@media screen and (max-width : 680px){
	#topicsWrap {
		width: 100%;
		height: auto;
		padding: 0 20px;
		margin: 0 auto 40px auto;
	}
	#topicsWrap .title {
		width: 100%;
	}
	#topicsList .itemWrap {
		float: none;
		padding: 0 10px;
		margin: 0 0 40px 0;
	}
	#topicsList .itemWrap:not(:nth-child(3n)) {
		margin-right: 0;
	}
}

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

		NewS

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

#newsWrap {
	float: left;
	width: 500px;
	height: 450px;
	margin: 0 40px 70px 0;
}
#newsWrap .title {
	width: 510px;
}
.newsItemWrap {
	width: 510px;
	height: 80px;
	border-bottom: solid 1px #ccc;
}
.newsItemWrap:nth-child(2) {
	border-top: solid 1px #ccc;
}
.newsTitle {
	padding-top: 11px;
	margin-bottom: 2px;
}
.newsTitle p {
	font-size: 14px;
	line-height: 20px;
}
.newsTitle a {
	color: #7d7d7d;
	transition: color .3s ease;
}
#wrap:not(.sp) .newsTitle a:hover {
	color: #b6da3e;
}
.newsDate p {
	color: #b6da3e;
	font-size: 12px;
	line-height: 15px;
	font-style: italic;
	letter-spacing: 2px;
}
.newsDate:not(:last-child) {
	margin-bottom: 32px;
}
@media screen and (max-width : 680px){
	#newsWrap {
		float: none;
		width: 100%;
		height: auto;
		padding: 0 20px;
		margin: 0 auto 60px auto;
	}
	#newsWrap .title {
		width: 100%;
	}
	.newsItemWrap {
		width: 100%;
		height: auto;
	}
	.newsTitle p {
		font-size: 13px;
	}
	.newsDate {
		padding-bottom: 30px;
	}
	.newsDate p {
		font-size: 11px;
	}
}

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

		HashtaG

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

#hashtagWrap {
	float: left;
	width: 500px;
	margin-bottom: 70px;
}
#hashtagWrap .title {
	width: 520px;
}
#hashtagWrap .itemWrap {
	width: 520px;
	height: 400px;
	margin-top: 10px;
}
#hashtagWrap .itemWrap .bg img {
	width: 520px;
}
#hashtagWrap .itemWrap .item {
	background: #e6e6e6;
	width: 480px;
	height: 400px;
	padding: 6px;
	overflow: hidden;
}
#hashtagWrap .itemWrap .item iframe {
	width: 478px !important;
	height: 388px !important;
}
@media screen and (max-width : 680px){
	#hashtagWrap {
		float: none;
		width: 100%;
		padding: 0 20px;
		margin: 0 auto 40px auto;
	}
	#hashtagWrap .title {
		width: 100%;
	}
	#hashtagWrap .itemWrap {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	#hashtagWrap .itemWrap .item {
		width: 100%;
		height: 600px;
		margin: 0;
	}
	#hashtagWrap .itemWrap .item iframe {
		width: 100vw !important;
		height: 590px !important;
	}
}

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

		SupporT

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

#supportWrap {
	clear: both;
	width: 1060px;
	height: 240px;
	margin-bottom: 40px;
}
#supportWrap .title {
	width: 1060px;
}
#supportWrap .address {
	float: left;
	width: 360px;
	margin-right: 20px;
}
#supportWrap .address p:first-child {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 3px;
}
#supportWrap .address p:last-child {
	font-size: 12px;
	padding-top: 4px;
	letter-spacing: 2px;
}
#supportWrap .star {
	color: #b6da3e;
}
#supportWrap .notice {
	float: left;
	width: 680px;
}
#supportWrap .notice ul {
	list-style: disc;
	padding: 1px 2px 0 14px;
}
#supportWrap .notice li {
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 1.4px;
}
#supportWrap .notice li:first-child {
	margin-bottom: 20px;
}
@media screen and (max-width : 680px){
	#supportWrap {
		width: 100%;
		height: auto;
		padding: 0 20px;
		margin: 0 auto 60px auto;
	}
	#supportWrap .title {
		width: 100%;
	}
	#supportWrap .address {
		float: none;
		width: 100%;
		margin-right: 20px;
	}
	#supportWrap .address p:first-child {
		font-size: 20px;
	}
	#supportWrap .address p:last-child {
		font-size: 10px;
	}
	#supportWrap .notice {
		float: none;
		width: 100%;
	}
	#supportWrap .notice ul {
		margin-top: 20px;
	}
	#supportWrap .notice li {
		font-size: 12px;
	}
}