@charset "UTF-8";
/*
 top.css（ファイル名変更可）
 本サイト各ページ用CSS
*/


/* mainV（TOP用ヘッダー）
========================================== */
.top-mainV-area {}
.top-mainV-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.top-mainV-img {
  	width: 93.5%;
	padding-top: 47.9%;
	background-image: url(../images/top/mainV-pc.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	margin: 0 auto;
}
.top-mainV-date{
	margin-top: 2.2%;
	text-align: center;
}
.top-mainV-date img{
	width: 34.7%;
	height: auto;
	margin: 0 auto;
}
.top-mainV-title{
	width: 90.5%;
	margin: 2% auto 2.4%;
}
.top-mainV-title img{
	width: 100%;
	height: auto;
}


/* topics一覧（TOP用）※タグは変更不可
========================================== */
.topics-area {
	background: url(../images/top/topics-bg-pc.png),#f4ca65;
	margin: 0 auto;
	background-attachment: fixed;
}
.topics-area .topics-inner{
	padding: 6% 0 6.2%;
}
.topics-area .drama-box-title{
	width: 19.6%;
	height: 0;
	padding: 0;
	padding-top: 7.4%;
	margin: 0 auto 1.1%;
	background: url(../images/top/topics-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
}
.topics-area .drama-box-title .title-01,
.topics-area .drama-box-title .title-02{
	display: none;
}
.topics-area .topics-btn > a {
  display: block;
  width: 24.5%;
  margin: 0 auto;
  padding: 10px;
  background: #67ad3d;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  word-break: break-all;
  position: relative;
  cursor: pointer;
  font-size: 1.8rem;
  font-size: 18px;
  letter-spacing: 1px;
}
.topics-area .topics-btn > a i{
	display: none;
}

/* d-contentsBox-inner-bg
========================================== */
.d-contentsBox-inner-bg{
	background: linear-gradient(to bottom, rgba(228,184,135,1) 0%,rgba(240,199,130,1) 26%,rgba(244,203,100,1) 72%,rgba(254,220,131,1) 100%);
}
.d-contentsBox-inner-bg02{
	background: url(../images/top/sns-bg-pc.png),linear-gradient(to bottom, rgba(244,202,101,1) 0%,rgba(244,202,101,1) 0%,rgba(244,202,101,1) 28%,rgba(240,199,130,1) 74%,rgba(227,186,145,1) 100%);
	background-repeat: no-repeat,no-repeat;
	background-position: 50% -54px,center top;
}

/* news-area
========================================== */
.news-area{
	margin: 0 auto;
}
.news-area .news-inner{
	max-width: 861px;
	padding: 4% 2.4%;
	position: relative;
}
.news-area .news-inner .news-inner-main,
.news-area .news-item .news-item-wrap{
	-webkit-display: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.news-area .news-inner .news-inner-main{
	border: 2px solid #998e83;
	border-radius: 5px;
	background: #fff;
	padding: .8% 1% .8% 4.7%;
	font-size: 1.8rem;
	font-size: 18px;
	position: relative;
}
.news-area .news-inner .news-inner-main:before{
	display: block;
	content: '';
	width: 6.2%;
	padding-top: 4.7%;
	position: absolute;
	left: -5%;
    top: -30px;
	background: url(../images/top/news-icon.png) no-repeat;
	background-size: cover;
}
.news-area .news-inner .news-inner-main .d-box-title{
	padding: 0;
	font-size: 2rem;
	font-size: 20px;
	margin-right: 8%;
	color: #051b2e;
	font-weight: bold;
}
.news-area .news-inner .news-item{
	width: 100%;
	display: none;
}
.news-area .news-inner .news-inner-main .news-date{
	margin-right: 5%;
	font-weight: bold;
	width: 120px;
	display: flex;
	align-items: center;
}
.news-area .news-inner .news-inner-main .news-text{
  	width: calc(100% - 120px);
  	display: flex;
	align-items: center;
}
.news-area .news-inner .news-inner-main .d-box-body{
	width: 76%;
	color: #051b2e;
}
.news-area .news-inner .news-inner-main .d-box-body a{
	text-decoration: underline;
}

/* prBanner
========================================== */
.prBanner-area { margin: 0 auto; }
.prBanner-area a { display: block; }
.prBanner-inner {padding: 4%;}
.prBanner-inner.bottom {padding: 0 0 2%;}
.prBanner-inner.second{padding: 0 0 2%;}

/* prBanner-list
------------------------------------------ */
.prBanner-list {
	max-width: 640px;
	width: 100%;
	margin: 0 auto;
	font-size: 0;
}
.prBanner-item {
	width: 100%;
	vertical-align: top;
}
.prBanner-item:nth-child(n+3) { margin-top: 15px; }

.prBanner-img {}
.prBanner-img img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.prBanner-inner.second .prBanner-list{
	max-width: 920px;
	-webkit-display: flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.prBanner-inner.second .prBanner-list .prBanner-item{
	width: 49%;
}
.prBanner-inner.chart .prBanner-list .prBanner-item:nth-of-type(3){
	margin-top: 0;
}
.prBanner-inner.second .prBanner-list .prBanner-item.chart{
	-webkit-flex-basis: 500px;
	flex-basis: 500px;
	margin: 0 auto 20px;
}

/* trailer
========================================== */
.trailer-area {
	margin: 0 auto;
}
.trailer-area a { display: block; }
.trailer-area .d-box { background-color: transparent; }
.trailer-area .d-box-body {
	background-color: transparent;
}
.trailer-inner {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 7% 3.3% 3.2%;
}

.trailer-movie-img {
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 56%;
	background: url("../images/top/trailer-movie-fin.png") no-repeat center;
	background-size: contain;
}

/* trailer-pr
------------------------------------------ */
.trailer-pr {
	position: relative;
	width: 56.31%;
}
.trailer-pr .d-box-title{
	width: 37.07%;
	height: 0;
	padding-top: 12.7%;
	position: absolute;
	left: 0;
	right: 0;
	top: -15%;
	margin: 0 auto;
	background: url(../images/top/next-oa-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
	text-indent: -9999px;
}
.v-movie {
	width: 100%;
	position: relative;
}
.v-movie:before{
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/top-box-bg.png);
  	border-radius: 10px;
  	bottom: -4px;
  	right: -4px;
}
.trailer-pr-box-bg{
	border-radius: 5px;
	padding: 3.04%;
	border: 2px solid #998e83;
	background: #fff;
	position: relative;
}
.trailer-movie-data {
	padding-top: 56.25%;
	overflow: hidden;
	position: relative;
}
.trailer-movie-data iframe,
.trailer-movie-data img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.trailer-backnumber-btn {
	width: 100%;
	text-align: center;
	margin-top: 4.18%;
}
.trailer-backnumber-btn a{
	width: 90%;
	margin: 0 auto;
	display: block;
}
.trailer-backnumber-btn a img { width: 100%;vertical-align:bottom; }

/* trailer-story
------------------------------------------ */
.trailer-story {
	width: 38.82%;
	position: relative;
}
.trailer-story .d-box-title{
	width: 46.55%;
	height: 0;
	padding-top: 21.7%;
	position: absolute;
	left: 0;
	right: 0;
	top: -11.6%;
	margin: 0 auto;
	background: url(../images/top/story-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
	text-indent: -9999px;
}
.trailer-story-box{
	position: relative;
}
.trailer-story-box .trailer-pr-box-bg{
	padding: 11% 9.91% 27.54%;
}
.trailer-story-box:before{
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/top-box-bg.png);
  	border-radius: 10px;
  	bottom: -4px;
  	right: -4px;
}
.trailer-story-title {
	font-size: 0;
	line-height: 1;
	vertical-align: baseline;
}
.trailer-story-thumb {
	position: relative;
	width: 100%;
	text-align: center;
	line-height: 0;
}
.trailer-story-thumb > img {
	width: 100%;
	height: auto;
	border: 2px solid #d4b79b;
    border-radius: 3px;
}
.trailer-story-text {
	margin: 4.95% auto 0;
	font-size: 1.6rem;
	transform: rotate(0.028deg);
}
.trailer-story-text .color-w{
	color: #ff6f4e;
}
.trailer-story-text .color-m{
	color: #4e84ff;
}
.trailer-story-btn {
	width: 87%;
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.trailer-story-btn .d-btn { width: 100%; }
.trailer-story-btn .d-btn:not(:first-child) { margin-top: 4.2%; }


/* movie
========================================== */
.movie-area {
	margin: 0 auto;
}
.movie-area * {
	outline: none;
}
.movie-area a { display: block; }
.movie-inner {
	padding: 4.6% 0 7%;
}
.movie-area .movie-box{
	position: relative;
	padding: 5.09% 0 2.2%;
	max-width: 935px;
	border: 2px solid #998e83;
	border-radius: 5px;
	background:repeating-linear-gradient(#9f9387 0, #9f9387 2px, #b3a99f 2px, #b3a99f 4px);
	margin: 0 auto;
}
.movie-area .d-box-title{
	width: 20.74%;
    height: 0;
    padding-top: 7.7%;
	position: absolute;
	left: 0;
	right: 0;
	top: -13.5%;
	margin: 0 auto;
	background: url(../images/top/movies-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
	text-indent: -9999px;
}


/* movie-slider
------------------------------------------ */
.movie-slider {
	min-height: 280px;
	margin: 0 auto 30px;
	padding: 0 3.4%;
}
.movie-slider .slick-list {
	padding: 0 !important;
}
.movie-slider.slick-initialized {
	min-height: auto;
}

/* slick - nav */
.movie-slider .slick-nav {
	position: absolute;
	bottom: -20px;
	display: block;
	width: 89%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	z-index: 40;
}
.movie-slider .slick-nav li {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 6px;
	padding: 0;
	cursor: pointer;
}
.movie-slider .slick-nav li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 7px;
	height: 7px;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: 0;
	border-radius: 100%;
	outline: none;
	background: #dedede;
}
.movie-slider .slick-nav li.slick-active button { background: #000; }

/* slick - button */
.movie-slider .slick-prev,
.movie-slider .slick-next {
	width: 30px;
	height: 30px;
	background-color: #8a7e73;
	border-radius: 100%;
	top: 80px;
	z-index: 50;
	-webkit-transition: opacity 0.1s ease;
	transition: opacity 0.1s ease;
}
.movie-slider .slick-prev:hover,
.movie-slider .slick-next:hover {
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.movie-slider .slick-prev.slick-disabled,
.movie-slider .slick-next.slick-disabled {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	pointer-events: none;
}
.movie-slider .slick-prev:before,
.movie-slider .slick-next:before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.movie-slider .slick-prev { left: 25px; }
.movie-slider .slick-prev:before { left: 12px; }
.movie-slider .slick-next { right: 25px; }
.movie-slider .slick-next:before { right: 12px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }


/* movie-slider - item
------------------------------------------ */
.movie-item {
	margin: 0 0.8%;
	position: relative;
}
.movie-item a {
	display: block;
}
.movie-item a:hover {
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.movie-img {
	width: 100% !important;
	padding-top: 56.57894% !important;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #fff;
}
.movie-img:before, .movie-img:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: 30;
}
.movie-img:before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 17px 0 17px 29px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
	margin-left: 7px;
}
.movie-img:after {
	content: '';
	display: block;
	width: 76px;
	height: 76px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 100%;
}

.movie-text {
	margin-top: 10px;
	padding: 0 5px;
	font-size: 1.6rem;
	line-height: 1.5;
}

.movie-inner .channel-list{
	padding: 0 3.42%;
}

/* movie
========================================== */
.s_movie-area {
	margin: 0 auto;
}
.s_movie-area * {
	outline: none;
}
.s_movie-area a { display: block; }
.s_movie-inner {
	padding: 0 0 8%;
}
.s_movie-area .movie-box{
	position: relative;
	padding: 5.09% 0 2.2%;
	max-width: 935px;
	border: 2px solid #ff9166;
	border-radius: 0 0 5px 5px;
	background:repeating-linear-gradient(#ee774d 0, #ee774d 2px, #f2916b 2px, #f2916b 4px);
	margin: 0 auto;
}
.s_movie-area .d-box-title{
	width: 93.5%;
    height: 0;
    padding-top: 11.2%;
	margin: 0 auto;
	background: url(../images/top/s_movie-title-pc.png) no-repeat;
	background-size: cover;
	background-position: left bottom;
	z-index: 1;
	text-indent: -9999px;
}


/* s_movie-slider
------------------------------------------ */
.s_movie-slider {
	min-height: 280px;
	margin: 0 auto 30px;
	padding: 0 3.4%;
}
.s_movie-slider .slick-list {
	padding: 0 !important;
}
.s_movie-slider.slick-initialized {
	min-height: auto;
}

/* slick - nav */
.s_movie-slider .slick-nav {
	position: absolute;
	bottom: -20px;
	display: block;
	width: 89%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	z-index: 40;
}
.s_movie-slider .slick-nav li {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 6px;
	padding: 0;
	cursor: pointer;
}
.s_movie-slider .slick-nav li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 7px;
	height: 7px;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: 0;
	border-radius: 100%;
	outline: none;
	background: #dedede;
}
.s_movie-slider .slick-nav li.slick-active button { background: #000; }

/* slick - button */
.s_movie-slider .slick-prev,
.s_movie-slider .slick-next {
	width: 30px;
	height: 30px;
	background-color: #00c6ff;
	border-radius: 100%;
	top: 80px;
	z-index: 50;
	-webkit-transition: opacity 0.1s ease;
	transition: opacity 0.1s ease;
}
.s_movie-slider .slick-prev:hover,
.s_movie-slider .slick-next:hover {
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.s_movie-slider .slick-prev.slick-disabled,
.s_movie-slider .slick-next.slick-disabled {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	pointer-events: none;
}
.s_movie-slider .slick-prev:before,
.s_movie-slider .slick-next:before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.s_movie-slider .slick-prev { left: 25px; }
.s_movie-slider .slick-prev:before { left: 12px; }
.s_movie-slider .slick-next { right: 25px; }
.s_movie-slider .slick-next:before { right: 12px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }


/* channel
========================================== */
.channel-area {
	/* padding: 40px 0 60px; */
	margin: 0 auto;
	padding-bottom: 4.6%;
}

.channel-list {
  display: flex;
	align-items: stretch;
	justify-content: space-between;
}
.channel-item {
  flex: 0 1 100%;
}
.channel-item + .channel-item {
  margin-left: 3%;
}
.channel-item a {
  display: block;
  padding: 13px 10px;
  border-radius: 3px;
}

.channel-item.tada a { background-color: #ff005a;}
.channel-item.hulu a { background-color: #67ae3e;}

.channel-item.tada a span {
  background-image: url(../images/top/channel-tada-pc.png);
}
.channel-item.hulu a span {
  background-image: url(../images/top/channel-hulu-pc.png);
}

.channel-item a span {
  display: block;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}



/* sns
========================================== */
.sns-area {
	margin: 0 auto;
}
.sns-area .sns-inner{
	padding: 0 5.8% 0 1.2%
}
.sns-body {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: space-between;
  align-content: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 11.5% 0 9%;
}


/* twitter
========================================== */
.twitter-area {
	width: 55.91%;
	margin: 0;
}
.twitter-area a { display: block; }
.twitter-inner {
	padding: 0;
	position: relative;
}
.twitter-inner:before{
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/top-box-bg.png);
  	border-radius: 10px;
  	bottom: -4px;
  	right: -4px;
}
.twitter-inner .d-box{
	background: #fff;
	border: 2px solid #998e83;
	border-radius: 5px;
	position: relative;
}
.twitter-inner .d-box-title{
	width: 44.03%;
	height: 0;
	padding-top: 16.7%;
	position: absolute;
	left: 0;
	right: 0;
	top: -11.2%;
	margin: 0 auto;
	background: url(../images/top/sns-twitter-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
	text-indent: -9999px;
}
.twitter-follow-box{
	padding: 7.33% 4.82% 4.24%;
}
.twitter-follow-box a{
	display: block;
	width: 44.98%;
	height: 0;
	padding-top: 8.9%;
	text-indent: -9999px;
	background: url(../images/top/follow.png) no-repeat;
	background-size: cover;
	margin-left: auto;
}


/* twitter-timeline
------------------------------------------ */
.twitter-timeline {}
.twitter-timeline-box {
	max-width: 500px;
	margin: 0 auto;
	padding: 0 0 8.84%;
}


/* instagram
========================================== */
.instagram-area {
	width: 40.43%;
	margin: 0;
	border-radius: 5px;
	position: relative;
}
.instagram-area a { display: block; }
.instagram-inner,
.line-inner {
	padding: 0;
	position: relative;
}
.line-inner{
	margin-top: 94px;
	width: 100%;
}
.instagram-inner:before,
.line-inner:before{
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/top-box-bg.png);
  	border-radius: 10px;
  	bottom: -4px;
  	right: -4px;
}
.instagram-area .instagram-inner .d-box,
.instagram-area .line-inner .d-box {
	border: 2px solid #998e83;
	border-radius: 5px;
	position: relative;
	background: #fff;
}
.instagram-area .instagram-inner .d-box{
	background: #784dc0;
	background: -moz-linear-gradient(to right, #784dc0 0%, #c83190 20%, #e1336d 40%, #ec5145 60%, #f56e46 80%, #fec86e 100%);
	background: -webkit-linear-gradient(to right, #784dc0 0%,#c83190 20%,#e1336d 40%,#ec5145 60%,#f56e46 80%,#fec86e 100%);
	background: linear-gradient(to right, #784dc0 0%,#c83190 20%,#e1336d 40%,#ec5145 60%,#f56e46 80%,#fec86e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#784dc0', endColorstr='#fec86e',GradientType=1 );
}
.instagram-inner .d-box-title{
	width: 66.48%;
	height: 0;
	padding-top: 23.1%;
	position: absolute;
	left: 0;
	right: 0;
	top: -25%;
	margin: 0 auto;
	background: url(../images/top/sns-instagram-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
	text-indent: -9999px;
}
.line-inner .d-box-title{
	width: 34.85%;
	height: 0;
	padding-top: 22.3%;
	position: absolute;
	left: 0;
	right: 0;
	top: -26.5%;
	margin: 0 auto;
	background: url(../images/top/sns-line-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
	text-indent: -9999px;
}
.instagram-area .instagram-inner .d-box .d-box-body{
	padding: 84px 0;
}

/* instagram-link
------------------------------------------ */
.instagram-link {
	-webkit-display: flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.instagram-link .instagram-link-icon{
	width: 16.48%;
	padding-top: 16.5%;
	background: url(../images/top/sns-instagram-link-icon-pc.png) no-repeat;
	background-size: cover;
	margin-right: 5%;
}
.instagram-link .instagram-link-btn{
	display: block;
	width: 64.51%;
	padding-top: 13.7%;
	background: url(../images/top/sns-instagram-link-btn-pc.png) no-repeat;
	background-size: cover;
	text-indent: -9999px;
	height: 0;
}

/* line-item
------------------------------------------ */
.line-item{
	text-indent: -9999px;
	background: url(../images/top/line_end_pc.png) no-repeat;
	background-size: cover;
	padding-top: 50.537634%;
	height: 0;
}
.line-item img{
	vertical-align: bottom;
}
.line-item .line-qr{
	width: 28.45%;
}
.line-item .line-qr img{
	width: 100%;
	height: auto;
	border: 1px solid #ccc;
}
.line-item .line-link{
	margin-left: 10.63%;
	text-align: center;
	width: 30.85%
}
.line-item .line-link p{
	margin-bottom: 6%;
}
.line-item .line-link a{
	display: block;
	width: 100%;
	height: 0;
	padding-top: 31%;
	background: url(../images/top/line-btn.png);
	background-size: cover;
	text-indent: -9999px;
}


/* goods
========================================== */
.goods-area {
	margin: 0 auto;
}
.goods-area a { display: block; }
.goods-inner {
	padding: 10% 3% 4.7%;
}
.goods-inner .d-box{
	position: relative;
}
.goods-inner .d-box:before{
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/top-box-bg.png);
  	border-radius: 10px;
  	bottom: -4px;
  	right: -4px;
}
.goods-inner .d-box-body{
	background: #fff;
	border: 2px solid #998e83;
	border-radius: 5px;
	position: relative;
}
.goods-inner .d-box-title{
	width: 18.85%;
	height: 0;
	padding-top: 10%;
	position: absolute;
	left: 0;
	right: 0;
	top: -16%;
	margin: 0 auto;
	background: url(../images/top/goods-title-pc.png) no-repeat;
	background-size: cover;
	z-index: 1;
	text-indent: -9999px;
}


/* goods-list
------------------------------------------ */
.goods-list {
	margin: 4.3% auto 3.77%;
	padding: 0 3%;
	font-size: 0;
}
.goods-item {
	width: 32%;
	display: inline-block;
	vertical-align: top;
}
.goods-item:not(:first-child) { margin-left: 2%; }
.goods-item:nth-child(4n+1) { margin-left: 0; }
.goods-item:nth-child(n+5) { margin-top: 15px; }

.goods-img {
}

.goods-text {
	margin-top: 10px;
	padding: 0 3px;
	font-size: 1.3rem;
	font-weight: bold;
}

.goods-btn {
	margin: 0 auto 3%;
	width: 56%;
}




/* ------------------------------------------------------------------
	SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {



  /* mainV（TOP用ヘッダー）
  ========================================== */
  #top-mainV{
  	background: rgba(239,197,132,1);
  }
  .top-mainV-img {
    padding-top: 51.2%;
   	width: 100%;
  }
  .top-mainV-inner{
  	padding: 0 0 5%;
  }
  .top-mainV-date{
  	width: 45%;
  	margin-left: auto;
  	margin-right: auto;
  }
  .top-mainV-date img{
  	display: block;
  	width: 100%;
  }

  .d-contentsBox-inner-bg{
  	background: linear-gradient(to bottom, rgba(239,197,132,1) 0%,rgba(240,199,130,1) 26%,rgba(244,203,100,1) 72%,rgba(254,220,131,1) 100%);
  }
  .d-contentsBox-inner-bg02{
	background: url(../images/top/sns-bg-sp.png),linear-gradient(to bottom, rgba(254,220,131,1) 0%,rgba(244,203,100,1) 28%,rgba(240,199,130,1) 74%,rgba(228,184,135,1) 100%);
	background-repeat: no-repeat,no-repeat;
	background-position: 50% -58px,center top;
  }

  /* news-area
  ========================================== */
  .news-area{
  	background: #ecc487;
  }
  .news-area .news-inner{
  	padding: 4% 2.8125% 5%;
  }
  .news-area .news-inner .news-inner-main{
  	display: block;
  	padding: 2.34375% 0 4.6875% 3.125%;
  }
  .news-area .news-inner .news-inner-main:before{
  	top: -14%!important;
    left: -3%!important;
  }
  .news-area .news-inner .news-inner-main .d-box-title{
  	font-size: 1.4rem;
  	font-size: 14px;
  	margin-right: 0;
  }
  .news-area .news-inner .news-inner-main .d-box-body{
  	width: 100%;
  	font-size: 1.1rem;
  	font-size: 11px;
  }
  .news-area .news-inner .news-inner-main .news-date{
  	margin-right: 3%;
  	width: 80px;
  }
  .news-area .news-inner .news-inner-main .news-text{
  	width: calc(100% - 80px);
  }

  /* topics一覧（TOP用）※タグは変更不可
  ========================================== */

  .topics-area {
  	    background-size: 100%;
  }
  .topics-area .topics-inner {
	    padding: 6.5625% 0 6.25%!important;
	}

  .topics-area .drama-box-title{
  	width: 31.25%;
  	padding-top: 11.8%;
  	margin-bottom: 3.4375%;
  }

  .topics-area .topics-btn > a {
    width: 87.5% !important;
	}


	/* prBanner
	========================================== */
	.prBanner-area {
		margin: 0 auto;
		background: linear-gradient(to bottom, rgba(239,197,132,1) 0%,rgb(241, 194, 125) 100%);
	}
	.prBanner-inner { padding: 3% 3% 8%; }
	.prBanner-inner.second,.prBanner-inner.bottom{padding: 0 3% 6%;}

	/* prBanner-list
	------------------------------------------ */
	.prBanner-inner.second .prBanner-list{
		display: block;
	}
	.prBanner-item {
		max-width: 100%;
	}
	.prBanner-inner.second .prBanner-list .prBanner-item{
		width: 100%;
	}
	.prBanner-inner.second .prBanner-list .prBanner-item.chart{
		-webkit-flex-basis: auto;
		flex-basis: auto;
		margin: 0;
	}
	.prBanner-inner.second .prBanner-list .prBanner-item~.prBanner-item{
		margin-top: 3%;
	}

	/* trailer
	========================================== */
	.trailer-inner{
		display: block;
		padding: 10% 4.6875% 5%;
	}
	.trailer-pr{
		width: 100%;
		padding-bottom: 6.25%;
	}
	.trailer-backnumber-btn a{
		width: 92.75%;
	}
	.trailer-story{
		width: 100%;
		padding-top: 10%;
	}
	.trailer-story .d-box-title{
		width: 32.068%;
		padding-top: 15%;
		top: 0;
	}
	.trailer-story-box .trailer-pr-box-bg{
		padding: 7.931034% 5.86% 8.27%;
	}
	.trailer-story-btn{
		position: static;
		margin-top: 6.89%;
	}

	/* movie
	========================================== */
	.movie-area{
		margin: 0 auto;
		padding: 0 5.86% 5.4%;
	}
	.movie-area .d-box-title{
		width: 33.44%;
		padding-top: 12.2%;
		top: -9%;
	}
	.movie-inner {
	    padding: 7% 0 5.4%!important;
	}
	/* movie-slider
	------------------------------------------ */
	.movie-slider { margin: 9% auto; }
	.movie-slider .slick-list {
		width: 100%;
		overflow-y: hidden;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	/* movie-slider - item
	------------------------------------------ */
	.movie-img:before { border-width: 12px 0 12px 20px; margin-left: 4px; }
	.movie-img:after { width: 50px; height: 50px; }
	.movie-text { font-size: 0.9rem; padding: 0; line-height: 1.8; white-space: normal; }

	/* s_movie
	========================================== */
	.s_movie-area{
		margin: 0 auto;
		padding: 0 5.86% 5.4%;
	}
	.s_movie-area .d-box-title{
		background: url(../images/top/s_movie-title-sp.png) no-repeat;
		background-size: cover;
		background-position: left bottom;
		padding-top: 19.31%!important;
	}
	.s_movie-inner {
	    padding: 0 0 5.4%!important;
	}
	.s_movie-area .movie-box{
		padding: 0;
	}

	/* movie-slider
	------------------------------------------ */
	.s_movie-slider { margin: 9% auto; }
	.s_movie-slider .slick-list {
		width: 100%;
		overflow-y: hidden;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}




  /* channel
  ========================================== */
	.channel-area { padding: 3% 3% 6.25%; }
	.channel-list { width: 100%; font-size: 0; }
	.channel-item { width: 48.2%; }
	.channel-item:not(:first-child) { margin-left: 3.6%; }
	.channel-item a { padding: 13px 10px; }
	.channel-item a span { height: 43px; }
	.channel-item.tada a span { background-image: url("../images/top/channel-tada-sp.png"); }
	.channel-item.hulu a span { background-image: url("../images/top/channel-hulu-sp.png"); }


	/* sns
	========================================== */
	.sns-area {}
	.sns-body{
		padding: 0;
	}
	.sns-area .sns-inner{
		padding: 16.25% 5.86% 15%;
	}

	/* twitter
	========================================== */
	.twitter-area { width: 100%; margin: 0 auto; }
	.twitter-area .drama-box-body { border-radius: 0 0 5px 5px; }
	.twitter-timeline-box { padding: 0 0 12%; }
	.twitter-timeline-box iframe { max-height: 394px; }
	.twitter-inner .d-box-title{
		width: 43.62%;
		padding-top: 16.6%;
		top: -7.8%;
	}


	/* instagram
	========================================== */
	.instagram-area { width: 100%; margin: 16.2% auto 0; }
	.instagram-inner .d-box-title{
		width: 47.58%;
		padding-top: 16.7%;
		top: -31.5%;
	}
	.instagram-area .instagram-inner .d-box .d-box-body{
		padding: 0;
	}
	.instagram-link{
		padding: 10.34% 0;
		height: auto;
	}
	.instagram-link .instagram-link-icon{
		width: 11.72%;
		padding-top: 11.7%;
		margin-right: 5.17%;
	}
	.instagram-link .instagram-link-btn{
		width: 45%;
    	padding-top: 9.6%;
	}

	.line-inner{position: relative;margin: 16.2% auto 0;}
	.line-inner .d-box-title{
		width: 24.65%;
		padding-top: 15.8%;
		top: -28%;
	}
	.line-item{
		padding-top: 32.229965%;
		background: url(../images/top/line_end_sp.png) no-repeat;
		background-size: cover;
	}
	.line-item .line-qr{
		display: none;
	}
	.line-item .line-link{
		width: 100%;
		margin-left: 0;
	}
	.line-item .line-link a{
		background: url(../images/top/line-btn_sp.png) no-repeat;
		background-size: cover;
		width: 58.53%;
		padding-top: 11.5%;
		margin: 0 auto;
	}
	.line-item .line-link p{
		font-size:1.2rem;
		font-size: 12px;
		margin-bottom: 2%;
	}


	/* goods
	========================================== */
	.goods-area { margin: 0 auto; }
	.goods-inner{padding: 12.625% 4.6875% 13.4375%;}
	.goods-inner .d-box-title{
		width: 30.17%;
		padding-top: 16.1%;
		top: -11%;
	}

	/* goods-list
	------------------------------------------ */
	.goods-list { margin: 8% auto 4%; padding: 0 3%; }
	.goods-item { width: 48.5%; }
	.goods-item:not(:first-child) { margin-left: 3%; }
	.goods-item:nth-child(2n+1) { margin-left: 0; }
	.goods-item:nth-child(4n+1) { margin-left: 0; }
	.goods-item:nth-child(n+3) { display: none; margin-top: 3%; }
	.goods-item:nth-child(n+5) { margin-top: 3%; }

	.goods-text { margin-top: 5px; font-size: 1.2rem; }

	.goods-btn {
		width: 87.5%;
		margin: 4% auto 9%;
	}
	.goods-btn .d-btn {
		padding: 10px 10px 12px;
	}
	.goods-btn .d-btn:after { width: 8px; height: 8px; }

}


/* ------------------------------------------------------------------
 SP 〜 tablet　（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {

	.topics-area .topics-inner{
		padding: 6% 0 6.2%!important;
	}

	.news-area .news-inner .news-inner-main:before{
	  	top: -35%;
	    left: -3%;
	  }

	.prBanner-list {
		width: 100%;
	}

	/* trailer-detail
	------------------------------------------ */
	.trailer-story-text{
		font-size: 1.2rem;
	}
	.trailer-story-btn a{
		font-size: 1.4rem;
	}


	/* movie
	========================================== */
	.movie-area {}
	.movie-inner {
	    padding: 14% 0 5.4%;
	}
	.movie-area .d-box-title{
		top: -8.4%;
	}
	.s_movie-area .d-box-title{
		width: 935px;
		padding-top: 11.6%;
	}

	/* movie-slider
	------------------------------------------ */
	.movie-slider { padding: 0; }
	.movie-slider .slick-list { padding: 0 17% !important; }
	/* slick - nav */
	.movie-slider .slick-nav { bottom: -20px; width: 100%; }

	/* movie-slider - item
	------------------------------------------ */
	.movie-item { margin: 0 0.125%; }
	.movie-text {}

	/* s_movie-slider
	------------------------------------------ */
	.s_movie-slider { padding: 0; }
	.s_movie-slider .slick-list { padding: 0 17% !important; }
	/* slick - nav */
	.s_movie-slider .slick-nav { bottom: -20px; width: 100%; }
}
@media screen and (max-width: 935px) {
	.s_movie-area .d-box-title{
		width: 100%;
		padding-top: 11.97861%;
	}
}


/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
}

/* ------------------------------------------------------------------
 tablet FONT調整用（601px〜）
------------------------------------------------------------------ */
@media screen and (min-width : 601px){
}
