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

.sweets {
	overflow: hidden;
}

.sweets img {
	width: 100%;
}

.sweets hr {
	position: absolute;
	z-index: 1;
	left: 0;
	width: 100%;
	border: none;
	margin: 0;
	background: url(../images/hr.png) no-repeat center center;
	background-size: 100% 100%;
	-webkit-transform: translateY(-35%);
	transform: translateY(-35%);
}
.sweets section h2 {
	font-size: inherit;
}
.sweets section h2 img {
	width: auto;
}

@media all and (max-width: 640px) {
	.sweets hr {
		height: 1.8em;
	}
	.sweets section h2 {
		padding: 1.5em 0;
	}
	.sweets section h2 img {
		height: 2.5em;
	}
	.sweets section#lineup > h2 {
		padding: 0.75em 0 0.25em;
	}
	.sweets section#lineup > h2 img {
		height: 3.5em;
	}
}

@media all and (min-width: 641px) {
	.sweets::before {
		content: '';
		display: block;
		height: 4em;
	}
	.sweets section {
		min-width: 47.5em;
	}
	.sweets hr {
		height: 4.35em;
	}
	.sweets section h2 {
		padding: 2.5em 0 2em;
	}
	.sweets section h2 img {
		height: 3.25em;
	}

	.sweets section#lineup > h2 {
		padding: 1.5em 0 1.25em;
	}
	.sweets section#lineup > h2 img {
		height: 4.5em;
	}
}

/* ==================== メイン  ====================*/

#mainVisual {
	overflow: hidden;
	position: relative;
	padding-top: 60%;
}
#mainVisual h1 {
	font-size: inherit;
}
#mainVisual h1 span {
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#mainVisual h1 img {
	width: 100%;
}
#mainVisual .control {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 0;
}
#mainVisual .control button {
	position: absolute;
	top: 0;
	border: none;
	margin: 0;
	padding: 1.5em;
	background: none;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
	outline: none;
}
#mainVisual .control button.prev {
	left: 0;
}
#mainVisual .control button.next {
	right: 0;
}
#mainVisual .control button.prev img {
	-webkit-transform: scale(-1,1);
	transform: scale(-1,1);
}
#mainVisual .control button img {
	width: 100%;
}
@media all and (max-width: 640px) {
	#mainVisual .control button {
		width: 4.5em;
	}
}
@media all and (min-width: 641px) {
	#mainVisual h1 img {
		display: inline-block;
		position: relative;
		left: 50%;
		top: 0;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#mainVisual .control button {
		width: 6em;
	}
}

/* アニメーション */
#mainVisual h1 span {
	-webkit-animation-duration: 600ms;
	animation-duration: 600ms;
}
#mainVisual[data-index="0"] h1 span:nth-of-type(1),
#mainVisual[data-index="1"] h1 span:nth-of-type(2) {
	left: 0;
}
#mainVisual[data-index="0"] h1 span:nth-of-type(2),
#mainVisual[data-index="1"] h1 span:nth-of-type(1) {
	left: 100%;
}

#mainVisual[data-index="0"].next h1 span:nth-of-type(1),
#mainVisual[data-index="1"].next h1 span:nth-of-type(2) {
	-webkit-animation-name: rightToCenter;
	animation-name: rightToCenter;
}
#mainVisual[data-index="0"].next h1 span:nth-of-type(2),
#mainVisual[data-index="1"].next h1 span:nth-of-type(1) {
	-webkit-animation-name: centerToLeft;
	animation-name: centerToLeft;
}

#mainVisual[data-index="0"].prev h1 span:nth-of-type(1),
#mainVisual[data-index="1"].prev h1 span:nth-of-type(2) {
	-webkit-animation-name: leftToCenter;
	animation-name: leftToCenter;
}
#mainVisual[data-index="0"].prev h1 span:nth-of-type(2),
#mainVisual[data-index="1"].prev h1 span:nth-of-type(1) {
	-webkit-animation-name: centerToRight;
	animation-name: centerToRight;
}

@-webkit-keyframes rightToCenter {
	from {left: 100%;}
	to {left: 0;}
}
@-webkit-keyframes centerToLeft {
	from {left: 0;}
	to {left: -100%;}
}
@-webkit-keyframes leftToCenter {
	from {left: -100%;}
	to {left: 0;}
}
@-webkit-keyframes centerToRight {
	from {left: 0;}
	to {left: 100%;}
}

@keyframes rightToCenter {
	from {left: 100%;}
	to {left: 0;}
}
@keyframes centerToLeft {
	from {left: 0;}
	to {left: -100%;}
}
@keyframes leftToCenter {
	from {left: -100%;}
	to {left: 0;}
}
@keyframes centerToRight {
	from {left: 0;}
	to {left: 100%;}
}

/*==================== キャンペーン  ====================*/
#cmp{
	z-index: 10;
	position: relative;
}
#cmp ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#cmp li img {
	width: 100%;
}

@media all and (max-width: 640px) {
	#cmp {
		padding-top: 2em;
		margin-bottom: 1em;
	}
	#cmp li:nth-of-type(n+2) {
		margin-top: 1em;
	}
}

@media all and (min-width: 641px) {
	#cmp {
		padding-top: 4em;
	}
	#cmp ul {
		display: inline-table;
		table-layout: fixed;
		width: 47.5em;
	}
	#cmp li {
		/*display: table-cell;*/ /*CMPバナー2個掲載の為*/
		vertical-align: top;
	}
	#cmp li + li{
		margin-top: 1.5em; /*CMPバナー掲載時（2個）*/
	}
	#cmp ul::after {
		content: none;
	}
}

/* ==================== Line Up ====================*/

#lineup {
	background: url(../images/lineup_back.png) repeat center center;
	background-size: 100% 100%;
}

#lineup .base {
	background:
		url(../images/lineup_base_top.png) no-repeat left top,
		url(../images/lineup_base_bottom.png) no-repeat left bottom,
		url(../images/lineup_base_middle.png) no-repeat left 2em;
	background-size:
		100% auto,
		100% auto,
		100% calc(100% - 3em);
}

#lineup .item {
	box-sizing: border-box;
	position: relative;
	background: no-repeat center top;
	background-size: 100% auto;
}

#lineup .item3 {
	float: left;
}
#lineup .item4 {
	float: right;
}

#lineup .item h3 {
	position: absolute;
	left: 50%;
	top: 0;
	margin: 0;
	font-size: inherit;
}
#lineup .item h3 img[src*="new"] {
	position: absolute;
	left: 3%;
	top: 0;
	-webkit-transform: translateY(-35%);
	transform: translateY(-35%);
	width: 20%;
}

#lineup .itempic img[src*="todetail"] {
	display: inline-block;
	margin-top: 0.5em;
	-webkit-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
}
#lineup .itempic img[src*="todetail"]:hover {
	opacity: 0.7;
}

#lineup .sizzle figure {
	margin: 0;
}

@media all and (max-width: 640px) {
	#lineup {
		padding: 0 1em 2em;
	}
	#lineup .base {
		padding: 2.5em 0.75em 1em;
	}
	#lineup .item {
		padding: 3em 1.5em 0;
	}
	#lineup .item:nth-of-type(n+2) {
		margin-top: 1.5em;
	}
	#lineup .item3,
	#lineup .item4 {
		padding-top: 2em;
		width: 10.5em;
		height: 12.5em;
	}

	#lineup .item1 {
		height: 32.5em;
		background-image: url(../images/lineup_frame1_sp.png);
	}
	#lineup .item2 {
		height: 33em;
		background-image: url(../images/lineup_frame2_sp.png);
	}
	#lineup .item3 {
		background-image: url(../images/lineup_frame3_sp.png);
	}
	#lineup .item4 {
		background-image: url(../images/lineup_frame4_sp.png);
	}

	#lineup .item h3 {
		width: 14.5em;
		-webkit-transform: translate(-50%, -28%);
		transform: translate(-50%, -28%);
	}
	#lineup .item3 h3,
	#lineup .item4 h3 {
		width: 8em;
	}
	#lineup .itempic img[src*="itempic"] {
		width: 10.7em;
	}
	#lineup .itempic img[src*="todetail"] {
		width: 6.5em;
	}
	#lineup .item3 .itempic img[src*="todetail"],
	#lineup .item4 .itempic img[src*="todetail"] {
		width: 5em;
	}

	#lineup .item1 .sizzle {
		margin-top: 1em;
	}
	#lineup .item2 .sizzle {
		margin-top: 0;
	}
	#lineup .item2 .sizzle img {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}

@media all and (min-width: 641px) {
	#lineup {
		padding-bottom: 3em;
		position: relative;
		z-index: 0;
	}
	/*#lineup::before {
		content: '';
		display: block;
		position: absolute;
		left: 75%;
		top: 2rem;*/
		 /*top: 13rem;CMPバナー掲載時*/
		 /*top: 23rem;CMPバナー掲載時（2個）
		width: 50%;
		height: 100%;
		background: url(../images/lineup_back_image.png) no-repeat left top;
		background-size: 27em auto;
	}*/
	#lineup .base {
		position: relative;
		width: 46.5em;
		margin: 0 auto;
		padding: 3.5em 0.75em 2em;
	}

	#lineup .item1,
	#lineup .item2 {
		padding: 4.5em 3em 0;
		height: 28em;
	}
	#lineup .item1 {
		background-image: url(../images/lineup_frame1_pc.png);
	}
	#lineup .item2 {
		margin-top: 2em;
		background-image: url(../images/lineup_frame2_pc.png);
	}

	#lineup .item3,
	#lineup .item4 {
		margin-top: 2em;
		width: 22.5em;
		height: 22em;
	}

	#lineup .item3 {
		background-image: url(../images/lineup_frame3_pc.png);
	}
	#lineup .item4 {
		background-image: url(../images/lineup_frame4_pc.png);
	}

	#lineup .item1 .itempic,
	#lineup .item2 .itempic {
		width: 14.25em;
	}
	#lineup .item1 .sizzle,
	#lineup .item2 .sizzle {
		margin-top: 2em;
		width: 24.4em;
	}
	#lineup .item1 .itempic,
	#lineup .item2 .sizzle {
		float: left;
	}
	#lineup .item1 .sizzle,
	#lineup .item2 .itempic {
		float: right;
	}
	#lineup .item2 .sizzle {
		margin-top: 0;
	}
	#lineup .item2 .sizzle img {
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
	}

	#lineup .item3 .itempic,
	#lineup .item4 .itempic {
		margin: 3.5em auto 0;
		width: 13.5em;
	}

	#lineup .item h3 {
		width: 20.5em;
		-webkit-transform: translate(-50%, -24%);
		transform: translate(-50%, -24%);
	}
	#lineup .item3 h3,
	#lineup .item4 h3 {
		width: 12.6em;
	}

	#lineup .item img[src*="todetail"] {
		margin-top: 1em;
		width: 6em;
	}

}

/* ==================== TV CM / WebMovie  ====================*/

#tvcm,
#webmovie {
	background: no-repeat center center;
	background-size: 100% 100%;
}
#tvcm {
	background-image: url(../images/tvcm_back.png);
}
#webmovie {
	background-image: url(../images/webmovie_back.png);
}

@media all and (max-width: 640px) {
	#tvcm,
	#webmovie {
		padding-bottom: 0.5em;
	}
}

@media all and (min-width: 641px) {
	#tvcm,
	#webmovie {
		padding-bottom: 2em;
	}
}

/*-------------------- Movies --------------------*/

.movies {
	display: inline-block;
	position: relative;
}

/* scroll */
.movies .scroll {
	white-space: nowrap;
	/*padding-bottom: 2em;*/
	-webkit-transition: transform 400ms ease;
	transition: transform 400ms ease;
}
.movies .view{
	padding-top: 0.1em;
}
.movies .scroll > div {
	display: inline-block;
	position: relative;
	vertical-align: top;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
}

.movies .scroll > div h3 {
	/*position: absolute;
	left: 50%;
	top: 100%;
	width: 100%;
	margin: 0;
	-webkit-transform: translate(-50%, 0.5em);
	transform: translate(-50%, 0.5em);*/
	color: white !important;
	font-weight: normal;
	margin-top: 0.5em;
}

/* control */

.movies .control button {
	position: absolute;
	top: 0;
	box-sizing: content-box;
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font-size: inherit;
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
}
.movies .control button.prev {
	right: 100%;
}
.movies .control button.next {
	left: 100%;
}

.movies[data-pagenum="1"] .control button.prev,
.movies.end .control button.next {
	opacity: 0.2;
}

.movies .control button.next img {
	-webkit-transform: scale(-1,1);
	transform: scale(-1,1);
}

/* pager */

.movies .pager {
	margin-top: 0.5em;
}

.movies .pager span {
	display: inline-block;
	border-radius: 50%;
	margin: 0 0.5em;
	background: linear-gradient(45deg, #998400, #bda730, #998400);
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease 200ms;
}
.movies .pager span.off {
	opacity: 0.3;
}

#tvcm .movies .pager span {
	box-shadow: 0 0 8px 4px #c90000;
}
#webmovie .movies .pager span {
	box-shadow: 0 0 8px 4px #0034b8;
}

@media all and (max-width: 640px) {
	.movies .view {
		max-width: 22em;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.movies .scroll{
	/*padding-bottom: 3em;*/
	}
	
	.movies .scroll > div {
		width: 11em;
		padding: 0 0.5em;
	}
	.movies .control button {
		width: 1em;
		padding: 0 0.2em;
		height: calc(10em / 16 * 9);
	}
	.movies h3 {
		font-size: 70%;
		white-space: normal;
	}
	.movies .pager span {
		width: 0.5em;
		height: 0.5em;
	}
}

@media all and (min-width: 641px) {
	.movies .view {
		max-width: 43.5em;
		overflow: hidden;
	}

	.movies[data-pagenum="2"] .scroll {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	.movies[data-pagenum="3"] .scroll {
		-webkit-transform: translateX(-200%);
		transform: translateX(-200%);
	}
	.movies[data-pagenum="4"] .scroll {
		-webkit-transform: translateX(-300%);
		transform: translateX(-300%);
	}
	.movies[data-pagenum="5"] .scroll {
		-webkit-transform: translateX(-400%);
		transform: translateX(-400%);
	}

	.movies .scroll > div {
		width: 19.75em; /* 43.5em / 2 - 2em */
		margin: 0 1em;
	}
	.movies .scroll > div.off {
		opacity: 0;
	}
	.movies .control button {
		width: 1.6em;
		height: calc(19.75em / 16 * 9);
	}
	.movies h3 {
		font-size: 80%;
	}
	.movies .pager span {
		width: 0.6em;
		height: 0.6em;
	}
}