@charset "UTF-8";

#ani30thBlock {
    color: #000;
	min-height: 65vh;
	font-size: 1.5rem;
    font-family: "Noto Sans JP", sans-serif;
	line-height: 1.7;
    overflow: hidden;
	position: relative;
}
#ani30thBlock .fade-in {
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  will-change: opacity, transform;
}
#ani30thBlock .fade-in:nth-child(2) {
  transition-delay: 0.2s;
}
#ani30thBlock .fade-in:nth-child(3) {
  transition-delay: 0.4s;
}
#ani30thBlock .fade-in:nth-child(4) {
  transition-delay: 0.5s;
}
#ani30thBlock .fade-in:nth-child(5) {
  transition-delay: 0.6s;
}
#ani30thBlock .fade-in.is-active {
  opacity: 1;
  transform: translateY(0);
}
#ani30thBlock .fade-in2 {
  opacity: 0;
  transition: opacity 0.3s ease-out;
  will-change: opacity;
}
#ani30thBlock .fade-in2.is-active {
  opacity: 1;
}
#ani30thBlock .slide-in {
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  will-change: opacity, transform;
}
#ani30thBlock .slide-in.is-active {
  opacity: 1;
  transform: translateX(0);
}

/*--------------
#openingBlock
--------------*/
#openingBlock {
	height: 65vh;
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#openingBlock .logo {
	margin: 0 auto;
	width: 58%;
	font-size: 0;
	text-align: center;
	display: none;
	transform: translateY(-21vh);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

/*--------------
#contentsBlock
--------------*/
#contentsBlock {
	display: none;
}
#ani30thBlock .pc_only {
	display: none;
}
#ani30thBlock .sp_only {
	display: block;
}
#ani30thBlock .mvBlock {
	margin: 0 auto;
	filter: brightness(3);
	opacity: 0.5;
	position: relative;
	transition: all 0.4s ease-out;
}
#ani30thBlock .mvBlock.bright-in {
	filter: brightness(1);
	opacity: 1;
}
#ani30thBlock .mvBlock>img {
	width: 100%;
}
#ani30thBlock .mvBlock .logo {
	margin: 0 auto;
	width: 47%;
	position: absolute;
	top: 8vw;
	left: 0;
	right: 0;
}
#ani30thBlock .leadBlock {
	margin: 0 auto;
	padding-bottom: 30%;
	background: url("../images/bg_pattern1.png") repeat center center #e60012;
	-webkit-background-size: 7%;
	background-size: 7%;
	position: relative;
	overflow: hidden;
}
#ani30thBlock .leadBlock .confetti_l.sp_only {
	width: 38vw;
	transform: translateY(22%); 
	will-change: transform;
	position: absolute;
	top: 0;
	left: -19vw;
}
#ani30thBlock .leadBlock .confetti_r.sp_only {
	width: 12vw;
	transform: translateY(28%); 
	will-change: transform;
	position: absolute;
	top: 0;
	right: -3vw;
}
#ani30thBlock .leadBlock .lineAni {
	margin: 0 auto 5%;
	padding: 2% 0;
	width: 100%;
	overflow: hidden;
}
#ani30thBlock .leadBlock .lineAni .line-track {
	display: flex;
	width: max-content;
	animation: loop-animation 40s linear infinite;
}
#ani30thBlock .leadBlock .lineAni .line-track img {
	width: 1500px;
}
@keyframes loop-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#ani30thBlock .leadBlock .txtImg {
	margin: 0 auto 9%;
	width: 86%;
	text-align: center;	
	position: relative;
}
#ani30thBlock .leadBlock .txtImg img {
	margin: 0 auto;
}
#ani30thBlock .leadBlock .navList {
	margin: 0 auto;
	width: 90%;
	max-width: 620px;
	display: flex;
	justify-content: space-between;
	position: relative;
}
#ani30thBlock .leadBlock .navList>li {
	width: calc( 100% / 3 );
	border-right: solid 1px #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#ani30thBlock .leadBlock .navList>li:first-child {
	border-left: solid 1px #fff;
}
#ani30thBlock .leadBlock .navList>li a {
	padding: 4% 0 5%;
	text-align: center;
	display: block;
}
#ani30thBlock .leadBlock .navList>li a img.sp_only {
	margin: 0 auto;
	width: auto;
	height: 19vw;
	max-height: 135px;
}

/*--------------
#monthlytopic
--------------*/
#monthlytopic {
	margin: -20% auto 0;
	padding: 14% 0 30%;
	position: relative;
}
#monthlytopic .bg-mask {
	width: 100%;
	height: 100%;
    background: url("../images/bg_pattern2.png") repeat center center #fff;
    -webkit-background-size: 5%;
    background-size: 5%;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#monthlytopic .contBlock {
	position: relative;
}
#monthlytopic h2 {
	margin: 0 auto 8%;
	width: 88%;
	text-align: center;
}
#monthlytopic h2 img {
	margin: 0 auto;
}
#monthlytopic .summaryBlock {
	margin: 0 auto 12%;
	padding-top: 11%;
	width: 90%;
	background: url("../images/line_sp.png") no-repeat top center;
	-webkit-background-size: 100%;
	background-size: 100%;
}
#monthlytopic .logo {
	margin: 0 auto 5%;
}
#monthlytopic .txtImg {
	margin: 0 auto;
	text-align: center;
	width: 84%;
}
#monthlytopic .tabBlock {
	margin: 0 auto 10%;
	padding-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
#monthlytopic .tabBlock .tabList {
	padding-bottom: 350px;
	width: 100%;
	display: flex;
	position: relative;
}
#monthlytopic .tabBlock .tabList>li {
	margin: 0 auto;
	width: 170px;
	transform-origin: center 220%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#monthlytopic .tabBlock .controller .dotList {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 7px;
	left: 0;
	right: 0;
}
#monthlytopic .tabBlock .controller .dotList>li {
	margin: 0 4px;
	width: 11px;
	height: 11px;
	background: #fff;
	border: solid 1px #000;
	border-radius: 6px;
}
#monthlytopic .tabBlock .controller .dotList>li.active {
	background: #ffe100;
}
#monthlytopic .tabBlock .controller .dotList>li:nth-child( n + 2 ).active {
	background: #e1e1e1;
}
#monthlytopic .tabBlock .controller .prev {
	margin-left: -140px;
	width: 24px;
	font-size: 0;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 1;
	cursor: pointer;
}
#monthlytopic .tabBlock .controller .next {
	margin-right: -140px;
	width: 24px;
	font-size: 0;
	position: absolute;
	bottom: 0;
	right: 50%;
	z-index: 1;
	cursor: pointer;
	transform: rotate(180deg);
}
/*--------------
.switchArea
--------------*/
#monthlytopic .switchArea .contBlock {
	position: relative;
}
#monthlytopic .switchArea .keywordBlock {
	margin: 0 auto 9%;
	padding-top: 92%;
	position: relative;
}
#monthlytopic .switchArea .keywordBlock .confetti {
	position: relative;
}
#monthlytopic .switchArea .keywordBlock .confetti_r.sp_only {
	width: 42vw;
	transform: translateY(159%); 
	will-change: transform;
	position: absolute;
	top: 0;
	left: -22vw;
}
#monthlytopic .switchArea .keywordBlock .confetti_l.sp_only {
	width: 55vw;
	transform: translateY(135%); 
	will-change: transform;
	position: absolute;
	top: 0;
	right: -27vw;
}
#monthlytopic .switchArea .keywordBlock h3 {
	margin: 0 auto 6%;
	width: 68%;
	text-align: center;
}
#monthlytopic .switchArea .keywordBlock h3 img {
	margin: 0 auto;
}
#monthlytopic .switchArea .keywordBlock .txtBlock {
	margin: 0 auto;
	padding: 4% 5%;
	width: calc( 90% - 6px );
	background: #fff;
	border: 3px solid #a5aeb4;
	border-radius: 12px;
	box-shadow:  0 0 0 3px #000;
}
#monthlytopic .switchArea .keywordBlock .txtBlock .txt {
	text-align: left;
}
#monthlytopic .switchArea .lineupBlock {
	margin: 0 auto 12%;
	position: relative;
}
#monthlytopic .switchArea .lineupBlock h4 {
	margin: 0 auto 5%;
	width: 51%;
	text-align: center;
}
#monthlytopic .switchArea .lineupBlock h4 img {
	margin: 0 auto;
}
#monthlytopic .switchArea .lineupBlock .carousel-container {
	padding-top: 9vw;
	width: 100%;
	overflow: hidden;
}
#monthlytopic .switchArea .lineupBlock .carousel-container .controller .prev {
	width: 10vw;
	position: absolute;
	top: calc( 50% - 5vw );
	left: 10vw;
	z-index: 1;
	cursor: pointer;
}
#monthlytopic .switchArea .lineupBlock .carousel-container .controller .next {
	width: 10vw;
	position: absolute;
	top: calc( 50% - 5vw );
	right: 10vw;
	z-index: 1;
	cursor: pointer;
	transform: rotate(180deg);
}
#monthlytopic .switchArea .lineupBlock .lineupList {
	width: calc( 60vw * 15 );
	display: flex;
	transform: translateX( calc( -5 * 60vw + 20vw ) );
	position: relative;
	z-index: 1;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li {
	width: 60vw;
	position: relative;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li:nth-child(odd) {
	margin-top: 10vw;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemList {
	position: absolute;
	top: -9vw;
	left: 0;
	right: 0;
	z-index: 1;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemList>li {
	display: none;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemList>li:first-child {
	display: block;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemTxt {
	margin: 0;
	text-align: center;
	position: absolute;
	top: 55.1vw;
	left: 0;
	right: 0;
	z-index: 1;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemList .itemImg>img {
	width: 100%;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemTxt img {
	width: auto;
	height: 5.6vw;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame {
	margin: 0;
	position: relative;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame>img {
	width: 100%;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame .dotList {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 13%;
	left: 0;
	right: 0;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame .dotList>li {
	margin: 0 4px;
	width: 11px;
	height: 11px;
	background: #fff;
	border: solid 1px #000;
	border-radius: 6px;
}
#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame .dotList>li.active {
	background: #ffe100;
}
#monthlytopic .switchArea .lineupBlock .btn {
	margin: 0 auto;
	width: 63vw;
	text-align: center;
}
#monthlytopic .switchArea .pickupBlock {
	margin: 0 auto 10%;
	width: calc( 90% - 6px );
	background: url("../images/bg_pattern1.png") repeat center center #e60012;
	-webkit-background-size: 7%;
	background-size: 7%;
	border: 3px solid #a5aeb4;
	border-radius: 12px;
	box-shadow:  0 0 0 3px #000;
	position: relative;
}
#monthlytopic .switchArea .pickupBlock .confetti {
	position: relative;
}
#monthlytopic .switchArea .pickupBlock .confetti_l.sp_only {
	width: 16vw;
	transform: translateY(0); 
	will-change: transform;
	position: absolute;
	top: 0;
	left: -9vw;
}
#monthlytopic .switchArea .pickupBlock .confetti_r.sp_only {
	width: 52vw;
	transform: translateY(-55%); 
	will-change: transform;
	position: absolute;
	top: 0;
	right: -35vw;
}
#monthlytopic .switchArea .pickupBlock .frameBlock {
	padding: 4% 0 8%;
	overflow: hidden;
}
#monthlytopic .switchArea .pickupBlock h4 {
	margin: 0 auto 6%;
	width: 66%;
	text-align: center;
	position: relative;
}
#monthlytopic .switchArea .pickupBlock h4 img {
	margin: 0 auto;
}
#monthlytopic .switchArea .pickupBlock .innerBlock {
	margin: 0 auto;
	width: 85%;
	color: #fff;
	position: relative;
}
#monthlytopic .switchArea .pickupBlock .name {
	margin: 0 auto 4%;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}
#monthlytopic .switchArea .pickupBlock .txt {
	margin: 0 auto 7%;
	font-size: 0.9em;
	text-align: left;
}
#monthlytopic .switchArea .pickupBlock .img {
	margin: 0 auto 8%;
}
#monthlytopic .switchArea .pickupBlock .btn {
	margin: 0 auto;
	width: 63vw;
	text-align: center;
}
/* #monthlytopic3 */
#monthlytopic3 .keywordBlock {
	background: url("../images/march_art.jpg") no-repeat top center;
	-webkit-background-size: 85%;
	background-size: 85%;
}

/*--------------
#ani30thitem
--------------*/
#ani30thitem {
	margin: -20% auto 0;
	color: #fff;
	position: relative;
}
#ani30thitem .bg-mask {
	width: 100%;
	height: 100%;
	background: url("../images/bg_pattern1.png") repeat center center #e60012;
    -webkit-background-size: 7%;
    background-size: 7%;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#ani30thitem .bg-deco {
	padding-top: 40%;
	width: 100%;
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#ani30thitem .bg-deco::before {
	content: "";
	margin-left: -120vw;
	padding-top: 240vw;
	width: 240vw;
	background: url("../images/30thitem_bg2.png") no-repeat center center;
	-webkit-background-size: contain;
	background-size: contain;
	display: block;
	position: absolute;
	top: 5vw;
	left: 50%;
	right: 0;
	animation: roll-animation 80s linear infinite;
}
@keyframes roll-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
#ani30thitem .contBlock {
	padding: 26% 0 12%;
	position: relative;
}
#ani30thitem h2 {
	margin: 0 auto 4%;
	width: 75%;
	text-align: center;
}
#ani30thitem h2 img {
	margin: 0 auto;
}
#ani30thitem .itemBlock {
	margin: 0 auto 7%;
	padding-top: 66%;
	width: 66%;
	background: url("../images/30thitem_item_bg.png") no-repeat top center;
	-webkit-background-size: contain;
	background-size: contain;
	position: relative;
}
#ani30thitem .itemBlock .popup {
	margin: 0;
	width: 47%;
	position: absolute;
	top: 5vw;
	right: -14vw;
}
#ani30thitem .itemBlock .img {
	margin: -4% auto 0;
	width: 94%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#ani30thitem .itemBlock .controller .prev {
	width: 10vw;
	position: absolute;
	top: calc( 50% - 5vw );
	left: -12vw;
	z-index: 1;
	cursor: pointer;
}
#ani30thitem .itemBlock .controller .next {
	width: 10vw;
	position: absolute;
	top: calc( 50% - 5vw );
	right: -12vw;
	z-index: 1;
	cursor: pointer;
	transform: rotate(180deg);
}
#ani30thitem .itemList {
	margin: 0 auto 8%;
	display: flex;
	justify-content: center;
}
#ani30thitem .itemList>li {
	margin: 0 2%;
	width: 15%;
}
#ani30thitem .itemList>li a {
	background: #fff;
	border-radius: 8px;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#ani30thitem .itemList>li a.active {
	border: solid 2px #ffe100;
}
#ani30thitem .name {
	margin: 0 auto 6%;
	width: 72%;
	text-align: center;
}
#ani30thitem .name img {
	margin: 0 auto;
}
#ani30thitem .txt {
	margin: 0 auto 5%;
	width: 90%;
}
#ani30thitem .btn {
	margin: 0 auto;
	width: 63vw;
	text-align: center;
}
#ani30thitem .listBlock {
	position: relative;
}
#ani30thitem .listBlock .prev {
	margin-top: 18%;
	width: 10vw;
	position: absolute;
	top: 0;
	left: 10vw;
	z-index: 1;
	cursor: pointer;
}
#ani30thitem .listBlock .next {
	margin-top: 18%;
	width: 10vw;
	position: absolute;
	top: 0;
	right: 10vw;
	z-index: 1;
	transform: rotate(180deg);
	cursor: pointer;
}
#ani30thitem .productList {
	margin: 15% auto 0;
	width: calc( 70% * 1 );
	display: flex;
	justify-content: center;
}
#ani30thitem .productList>li {
	padding: 0 3vw;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#ani30thitem .productList>li a {
	color: #fff;
}
#ani30thitem .productList>li .img {
	margin: 0 auto 5%;
	overflow: hidden;
}
#ani30thitem .productList>li .txt {
	margin: 0 auto;
	width: 100%;
	font-size: 0.8em;
}
#ani30thitem .lineAni {
	margin: 0 auto;
	padding: 2% 0;
	background: #000;
	width: 100%;
	overflow: hidden;
	position: relative;
}
#ani30thitem .lineAni .line-track {
	display: flex;
	width: max-content;
	animation: loop-animation 40s linear infinite;
}
#ani30thitem .lineAni .line-track img {
	width: 1500px;
}

/*--------------
#ani30thcelebration
--------------*/
#ani30thcelebration {
	margin: 0 auto;
	padding: 12% 0;
	background: url("../images/bg_pattern3.png") repeat center center #fff;
	-webkit-background-size: 40%;
	background-size: 40%;
	position: relative;
}
#ani30thcelebration .contBlock {
	margin: 0 auto;
	padding: 6% 0 3%;
	width: calc( 90% - 6px );
	background: #fff;
	border: 3px solid #a5aeb4;
	border-radius: 12px;
	box-shadow:  0 0 0 3px #000;
	position: relative;
}
#ani30thcelebration h2 {
	margin: 0 auto;
	width: 90%;
	text-align: center;
}
#ani30thcelebration h2 img {
	margin: 0 auto;
}
#ani30thcelebration .itemList {
	margin: -4% auto 0;
	width: 88%;
}
#ani30thcelebration .itemList>li {
	padding: 10% 0 8%;
	background: url("../images/line_sp.png") no-repeat top center;
	-webkit-background-size: 100%;
	background-size: 100%;
}
#ani30thcelebration .itemList>li:first-child {
	background: none;
}
#ani30thcelebration .itemList>li .hd {
	margin: 0 auto 5%;
	font-size: 1.3em;
	font-weight: 900;
	text-align: center;
}
#ani30thcelebration .itemList>li .hd em {
	color: #e60012;
	font-style: initial;
}
#ani30thcelebration .itemList>li .txt {
	margin: 0 auto;
}
#ani30thcelebration .itemList>li .txt a {
	color: #e60012;
	text-decoration: underline;
}
#ani30thcelebration .itemList>li .btn {
	margin: 6% auto 0;
	width: 63vw;
	text-align: center;
}
#ani30thcelebration .bnr {
	margin: 8% auto 0;
	width: 73%;
	max-width: 521px;
	animation: scale-animation 1.5s linear infinite;
}
@keyframes scale-animation {
  0% {
    transform: scale(100%);
  }
  10% {
    transform: scale(101%);
  }
  30% {
    transform: scale(100%);
  }
}
#ani30thcelebration .bnr a {
	display: block;
	position: relative;
}

/*--------------
.footBlock
--------------*/
#ani30thBlock .footBlock {
	margin: 0 auto;
	padding: 7% 0;
	background: #ffe100;
	border-top: solid 2px #000;
	border-bottom: solid 2px #000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#ani30thBlock .footBlock .txt {
	margin: 0 auto;
	width: 88%;
	font-size: 0.9em;
}
	
@media all and (min-width: 520px) {
	#ani30thBlock {
		color: #000;
		font-size: 1.9rem;
	}
	
	/*--------------
	#openingBlock
	--------------*/
	#openingBlock {
		height: 65vh;
		min-height: 520px;
	}
	#openingBlock .logo {
		width: 26vw;
		text-align: center;
		transform: translateY(-50%);
		top: 50%;
		bottom: auto;
	}
	
	/*--------------
	#contentsBlock
	--------------*/
	#ani30thBlock .pc_only {
		display: block;
	}
	#ani30thBlock .sp_only {
		display: none;
	}
	#ani30thBlock .mvBlock .logo {
		width: 22%;
		position: absolute;
		top: 8vw;
		left: 54%;
		right: auto;
	}
	#ani30thBlock .leadBlock {
		padding-bottom: 26%;
		-webkit-background-size: 34px;
		background-size: 34px;
	}
	#ani30thBlock .leadBlock .confetti_l.pc_only {
		width: 27%;
		transform: translateY(45%); 
		will-change: transform;
		position: absolute;
		top: 0;
		left: -15%;
	}
	#ani30thBlock .leadBlock .confetti_r.pc_only {
		width: 17%;
		transform: translateY(21%); 
		will-change: transform;
		position: absolute;
		top: 0;
		right: -7%;
	}
	#ani30thBlock .leadBlock .lineAni {
		padding: 13px 0;
	}
	#ani30thBlock .leadBlock .lineAni .line-track img {
		width: 1700px;
	}
	#ani30thBlock .leadBlock .txtImg {
		margin: 0 auto 5%;
		width: 82%;
	}
	#ani30thBlock .leadBlock .navList {
		margin: 0 auto;
		width: 85%;
		max-width: none;
	}
	#ani30thBlock .leadBlock .navList>li {
		width: 32%;
		border-right: none;
	}
	#ani30thBlock .leadBlock .navList>li:first-child {
		border-left: none;
	}
	#ani30thBlock .leadBlock .navList>li a {
		padding: 0;
	}
	#ani30thBlock .leadBlock .navList>li a:hover {
		transform: scale(1.08);
	}
	
	/*--------------
	#monthlytopic
	--------------*/
	#monthlytopic {
		margin: -20% auto 0;
		padding: 50px 0 25%;
		position: relative;
	}
	#monthlytopic .bg-mask {
		width: 100%;
		height: 100%;
		-webkit-background-size: 21px;
		background-size: 21px;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	#monthlytopic h2 {
		margin: 0 auto 50px;
		width: 90%;
		max-width: calc( 1048px / 2 );
	}
	#monthlytopic .summaryBlock {
		margin: 0 auto 70px;
		padding-top: 80px;
		width: 95%;
		max-width: 1200px;
		background: url("../images/line_pc.png") no-repeat top center;
		-webkit-background-size: 100%;
		background-size: 100%;
	}
	#monthlytopic .summaryBlock .confetti {
		position: relative;
	}
	#monthlytopic .summaryBlock .confetti_l.pc_only {
		width: 32%;
		transform: translateY(45%); 
		will-change: transform;
		position: absolute;
		top: 0;
		left: -20%;
	}
	#monthlytopic .summaryBlock .confetti_r.pc_only {
		width: 41%;
		transform: translateY(21%); 
		will-change: transform;
		position: absolute;
		top: 0;
		right: -17%;
	}
	#monthlytopic .logo {
		margin: 0 auto 50px;
		width: 100%;
		max-width: calc( 1588px / 2 );
	}
	#monthlytopic .txtImg {
		width: 65%;
		max-width: calc( 908px / 2 );
	}
	#monthlytopic .tabBlock {
		margin: 0 auto;
		padding-top: 30px;
		padding-bottom: 0;
	}
	#monthlytopic .tabBlock .tabList {
		padding-bottom: 550px;
	}
	#monthlytopic .tabBlock .tabList>li {
		width: 240px;
		transform-origin: center 300%;
	}
	#monthlytopic .tabBlock .controller .dotList {
		bottom: 100px;
	}
	#monthlytopic .tabBlock .controller .dotList>li {
		margin: 0 7px;
		width: 12px;
		height: 12px;
		background: #fff;
		border: solid 1px #000;
		border-radius: 1.5vw;
		cursor: pointer;
	}
	#monthlytopic .tabBlock .controller .prev {
		margin-left: calc( 26px * -6 );
		width: 24px;
		font-size: 0;
		position: absolute;
		bottom: 94px;
		left: calc( 50% - 20px );
		z-index: 1;
		cursor: pointer;
	}
	#monthlytopic .tabBlock .controller .next {
		margin-right: calc( 26px * -6 );
		width: 24px;
		font-size: 0;
		position: absolute;
		bottom: 94px;
		right: calc( 50% - 20px );
		z-index: 1;
		cursor: pointer;
		transform: rotate(180deg);
	}
	
	/*--------------
	.switchArea
	--------------*/
	#monthlytopic .switchArea .keywordBlock {
		margin: 0 auto;
		padding: 7% 0;
		width: 95%;
		max-width: 1240px;
	}
	#monthlytopic .switchArea .keywordBlock .confetti_l.pc_only {
		width: 15%;
		transform: translateY(45%); 
		will-change: transform;
		position: absolute;
		top: 0;
		left: -8%;
	}
	#monthlytopic .switchArea .keywordBlock h3 {
		margin: 0 auto 3% 6%;
		width: 40%;
		text-align: left;
	}
	#monthlytopic .switchArea .keywordBlock h3 img {
		margin: 0;
		width: auto;
		height: 17vw;
		max-height: calc( 406px / 2 );
	}
	#monthlytopic .switchArea .keywordBlock .txtBlock {
		margin: 0 auto 1% 6%;
		padding: 2% 2%;
		width: calc( 35% - 6px );
	}
	#monthlytopic .switchArea .lineupBlock {
		margin: 0 auto 90px;
		width: 95%;
		max-width: 1240px;
	}
	#monthlytopic .switchArea .lineupBlock h4 {
		margin: 0 auto 1% 6.2%;
		width: 62%;
		max-width: calc( 1078px / 2 );
	}
	#monthlytopic .switchArea .lineupBlock .carousel-container {
		padding-top: 3%;
	}
	#monthlytopic .switchArea .lineupBlock .carousel-container .controller .prev {
		display: none;
	}
	#monthlytopic .switchArea .lineupBlock .carousel-container .controller .next {
		display: none;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList {
		margin: 0 auto 1%;
		width: 100%;
		transform: none;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li {
		width: calc( 100% / 5 );
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li:nth-child(odd) {
		margin-top: 0;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li:nth-child(even) {
		margin-top: 4%;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li:nth-child(n+6) {
		display: none;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemList {
		margin-top: -15%;
		top: 0;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemTxt {
		margin-top: 92.4%;
		top: 0;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemTxt img {
		width: auto;
		height: 1.6vw;
		max-height: calc( 41px / 2 );
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame {
		margin: 0;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame .dotList {
		margin-bottom: 17%;
		bottom: 0;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame .dotList>li {
		margin: 0 5px;
		width: 1.1vw;
		height: 1.1vw;
		background: #fff;
		border: solid 1px #000;
		border-radius: 1.5vw;
	}
	#monthlytopic .switchArea .lineupBlock .btn {
		width: calc( 454px / 2 )
	}
	#monthlytopic .switchArea .lineupBlock .btn a {
		display: block;
		transition: transform 0.2s;
	}
	#monthlytopic .switchArea .lineupBlock .btn a:hover {
		transform: scale(1.08);
	}
	#monthlytopic .switchArea .pickupBlock {
		margin: 0 auto 90px;
		width: calc( 95% - 6px );
		max-width: 1180px;
		-webkit-background-size: 34px;
		background-size: 34px;
	}
	#monthlytopic .switchArea .pickupBlock .confetti_r.pc_only {
		width: 37%;
		transform: translateY(21%); 
		will-change: transform;
		position: absolute;
		top: 0;
		right: -27%;
	}
	#monthlytopic .switchArea .pickupBlock .frameBlock {
		padding: 1.5% 3.5% 3%;
	}
	#monthlytopic .switchArea .pickupBlock h4 {
		margin: 0 auto 4% 0;
		width: 65%;
		max-width: calc( 1229px / 2);
	}
	#monthlytopic .switchArea .pickupBlock .innerBlock {
		padding-right: 45%;
		width: 100%;
	}
	#monthlytopic .switchArea .pickupBlock .name {
		margin: 0 auto 3%;
		font-size: 1.5em;
		text-align: left;
	}
	#monthlytopic .switchArea .pickupBlock .txt {
		margin: 0 auto 6%;
		padding: 0 0 5% 5%;
		font-size: 1em;
		text-align: left;
		background: url("../images/pickup_deco.png") no-repeat bottom left;
		-webkit-background-size: contain;
		background-size: contain;
	}
	#monthlytopic .switchArea .pickupBlock .img {
		margin: 0 auto;
		width: 40%;
		position: absolute;
		top: 0;
		right: 0;
	}
	#monthlytopic .switchArea .pickupBlock .btn {
		margin: 0 auto 0 0;
		width: calc( 454px / 2 );
	}
	#monthlytopic .switchArea .pickupBlock .btn a {
		display: block;
		transition: transform 0.2s;
	}
	#monthlytopic .switchArea .pickupBlock .btn a:hover {
		transform: scale(1.08);
	}
	/* #monthlytopic3 */
	#monthlytopic3 .keywordBlock {
		background: url("../images/march_art.jpg") no-repeat top right;
		-webkit-background-size: 52%;
		background-size: 52%;
	}
	
	/*--------------
	#ani30thitem
	--------------*/
	#ani30thitem {
		margin: -20% auto 0;
		color: #fff;
		position: relative;
	}
	#ani30thitem .bg-mask {
		width: 100%;
		height: 100%;
		-webkit-background-size: 34px;
		background-size: 34px;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	#ani30thitem .bg-deco::before {
		top: 3vw;
	}
	#ani30thitem .contBlock {
		padding: 16% 0 100px;
		position: relative;
	}
	#ani30thitem h2 {
		margin: 0 auto 20px;
		width: calc( 906px / 2 );
	}
	#ani30thitem .itemBlock {
		margin: 0 auto 40px;
		padding-top: 0;
		height: 60vw;
		max-height: 424px;
		width: 60%;
		max-width: 424px;
	}
	#ani30thitem .itemBlock .popup {
		margin-top: 13%;
		width: calc( 384px / 2 );
		top: 0;
		right: -27%;
	}
	#ani30thitem .itemBlock .controller .prev {
		width: calc( 78px / 2 );
		top: calc( 50% - 78px / 4 );
		left: -23%;
	}
	#ani30thitem .itemBlock .controller .next {
		width: calc( 78px / 2 );
		top: calc( 50% - 78px / 4 );
		right: -23%;
	}
	#ani30thitem .itemList {
		margin: 0 auto 40px;
		display: flex;
		justify-content: center;
	}
	#ani30thitem .itemList>li {
		margin: 0 10px;
		width: 74px;
	}
	#ani30thitem .name {
		margin: 0 auto 40px;
		width: 90%;
		max-width: calc( 1340px / 2 );
	}
	#ani30thitem .txt {
		margin: 0 auto 50px;
		width: 95%;
		max-width: 940px;
		text-align: center;
	}
	#ani30thitem .btn {
		width: calc( 454px / 2 );
	}
	#ani30thitem .btn a {
		display: block;
		transition: transform 0.2s;
	}
	#ani30thitem .btn a:hover {
		transform: scale(1.08);
	}
	#ani30thitem .listBlock .prev {
		margin-top: calc( 8% - (78px / 4));
		width: calc(78px / 2);
		position: absolute;
		top: 0;
		left: 9%;
		z-index: 1;
		cursor: pointer;
	}
	#ani30thitem .listBlock .next {
		margin-top: calc( 8% - (78px / 4));
		width: calc(78px / 2);
		position: absolute;
		top: 0;
		right: 9%;
		z-index: 1;
		transform: rotate(180deg);
		cursor: pointer;
	}
	#ani30thitem .productList {
		margin: 80px auto 0;
		width: calc( 45% * 1 );
	}
	#ani30thitem .productList>li {
		padding: 0 2%;
	}
	#ani30thitem .productList>li a {
		display: block;
		transition: transform 0.2s;
	}
	#ani30thitem .productList>li a:hover {
		transform: scale(1.05);
	}
	#ani30thitem .productList>li .img {
		margin: 0 auto 5%;
		overflow: hidden;
	}
	#ani30thitem .productList>li .txt {
		margin: 0 auto;
		width: 100%;
		font-size: 0.8em;
		text-align: left;
	}
	#ani30thitem .lineAni {
		margin: 0 auto;
		padding: 13px 0;
	}
	#ani30thitem .lineAni .line-track img {
		width: 1700px;
	}
	
	/*--------------
	#ani30thcelebration
	--------------*/
	#ani30thcelebration {
		padding: 90px 0;
		-webkit-background-size: 172px;
		background-size: 172px;
	}
	#ani30thcelebration .contBlock {
		padding: 3% 0 2%;
		width: 90%;
		max-width: calc( 880px - 6px );
	}
	#ani30thcelebration h2 {
		width: 58%;
		max-width: calc( 906px / 2 );
	}
	#ani30thcelebration .itemList {
		margin: -1% auto 0;
		width: 88%;
	}
	#ani30thcelebration .itemList>li {
		padding: 7% 0 5%;
		background: url("../images/line_pc.png") no-repeat top center;
		-webkit-background-size: 100%;
		background-size: 100%;
	}
	#ani30thcelebration .itemList>li:first-child {
		background: none;
	}
	#ani30thcelebration .itemList>li .hd {
		margin: 0 auto 2%;
		font-size: 1.4em;
		text-align: left;
	}
	#ani30thcelebration .itemList>li .btn {
		margin: 4% auto 0 0;
		width: calc( 454px / 2 );
	}
	#ani30thcelebration .itemList>li .btn a {
		display: block;
		transition: transform 0.2s;
	}
	#ani30thcelebration .itemList>li .btn a:hover {
		transform: scale(1.08);
	}
	#ani30thcelebration .bnr {
		margin: 60px auto 0;
		width: 80%;
		max-width: calc( 1435px / 2 );
	}
	#ani30thcelebration .bnr a {
		transition: transform 0.2s;
	}
	#ani30thcelebration .bnr a:hover {
		transform: scale(1.05);
	}

	/*--------------
	.footBlock
	--------------*/
	#ani30thBlock .footBlock {
		padding: 35px 0;
		text-align: center;
	}
	#ani30thBlock .footBlock .txt {
		margin: 0 auto;
		width: auto;
		display: inline-block;
		text-align: left;
	}
}

@media all and (min-width: 1040px) {
	#ani30thBlock {
		font-size: 1.8rem;
	}

	/*--------------
	#contentsBlock
	--------------*/
	#ani30thBlock .leadBlock .lineAni {
		margin: 0 auto 60px;
		padding: 13px 0;
	}
	#ani30thBlock .leadBlock .lineAni .line-track img {
		width: 100vw;
		min-width: 1700px;
	}
	#ani30thBlock .leadBlock .txtImg {
		margin: 0 auto 60px;
		width: calc( 1656px / 2 );
	}
	#ani30thBlock .leadBlock .navList {
		width: 880px;
	}
	#ani30thBlock .leadBlock .navList>li {
		width: calc( 554px / 2 );
	}
	#ani30thBlock .leadBlock .navList>li a {
		transition: transform 0.2s;
	}

	/*--------------
	.switchArea
	--------------*/
	#monthlytopic .switchArea .keywordBlock .confetti_l.pc_only {
		width: calc( 320px / 2 );
		transform: translateY(45%); 
		will-change: transform;
		position: absolute;
		top: 0;
		left: -10%;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame .dotList {
		margin-bottom: 18%;
	}
	#monthlytopic .switchArea .lineupBlock .lineupList>li .itemFrame .dotList>li {
		width: 10px;
		height: 10px;
	}
	#monthlytopic .switchArea .pickupBlock .confetti_r.pc_only {
		width: calc( 1017px / 2 );
		transform: translateY(21%); 
		will-change: transform;
		position: absolute;
		top: 0;
		right: -37%;
	}
	
	/*--------------
	#ani30thitem
	--------------*/
	#ani30thitem .lineAni {
		margin: 0 auto;
		padding: 13px 0;
	}
	#ani30thitem .lineAni .line-track img {
		width: 100vw;
		min-width: 1700px;
	}
	#ani30thitem .productList {
		width: calc( 372px * 1 );
	}
	#ani30thitem .productList>li {
		padding: 0 15px;
	}
	
	/*--------------
	.footBlock
	--------------*/
	#ani30thBlock .footBlock {
		padding: 50px 0;
	}
}
@media all and (min-width: 1200px) {
	/*--------------
	#contentsBlock
	--------------*/
	#ani30thBlock .leadBlock .confetti_l.pc_only {
		width: calc( 437px / 2 );
		transform: translateY(45%); 
		will-change: transform;
		position: absolute;
		top: 0;
		left: -1%;
	}
	#ani30thBlock .leadBlock .confetti_r.pc_only {
		width: calc( 514px / 2 );
		transform: translateY(21%); 
		will-change: transform;
		position: absolute;
		top: 0;
		right: -4%;
	}
	
	/*--------------
	#monthlytopic
	--------------*/
	#monthlytopic .summaryBlock .confetti {
		position: relative;
	}
	#monthlytopic .summaryBlock .confetti_l.pc_only {
		width: calc( 718px / 2 );
		transform: translateY(45%); 
		will-change: transform;
		position: absolute;
		top: 0;
		left: -19%;
	}
	#monthlytopic .summaryBlock .confetti_r.pc_only {
		width: calc( 1017px / 2 );
		transform: translateY(21%); 
		will-change: transform;
		position: absolute;
		top: 0;
		right: -19%;
	}
}