@charset "utf-8";
/*  nanda */
#nanda{
	background: #000000;
}
#nanda p, #nanda .subtitle, #nanda #breadlink a, #nanda h3, #nanda h4{
	color: #fff;
}

#nanda #titlebox p{
	border-bottom: none;
}

#nandabox {
	background-color: #dddddd;
}
#nandabox p{
	color: #000000 !important;
}
#nandabox img{
	width: 100%;
}

#firstbox p{
	line-height: 200%;
}

#probox	{
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	position: relative;
}
#probox .inbox{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#probox .pro{
	display: flex;
	align-items: center;
	position: relative;
}
#probox .pro .number{
	position: absolute;
	left: 0;
	top: 0;
}
#probox .pro .proinbox{
	text-align: center;
	width: 100%;
}
#probox .pro h6{
	color: #000000;
}
#probox .pro p{
	color: #333 !important;
	line-height: 150%;
}
.illust{
	position: absolute;
	z-index: 1;
}

#vsbox {
	position: relative;
	border-bottom: 1px solid #000;
}
#vsbox .more{
	cursor: pointer;
	background: #fff;
	border-radius: 50%;
	color: #333;
	transition: 1s;
}
#vsbox .on-click{
	background: #000;
	color: #fff;
}
#vsbox .more span{
	position: absolute;
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align:center;
}
#vsbox .hide{
	display: none;
}
#vsbox #illust6{
	text-align: right;
}

#lineup .itembox{
	background: #f5f5f5;
}
#lineup .itembox h4,#lineup .itembox p{
	color: #787878;
}


/* 4K */
@media screen and (min-width: 1921px){
	#nandabox {
		padding: 106px 0;
	}
	#nandabox h4{
		width: 540px;
		margin: 0 auto;
	}
	
	#firstbox{
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		width: 1035px;
		margin: 80px auto;
	}
	#firstbox #illust1{
		width: 390px;
	}
	#firstbox p{
		width: 549px;
		font-size: 22px;
	}
	
	#probox	{
		margin: 100px auto;
		width: 1152px;
		padding-bottom: 120px;
	}
	#probox h5 {
		width: 295px;
		padding: 100px 0 45px 100px;
	}
	#probox .inbox{
		width: 960px;
		margin: 0 auto;
	}
	#probox .pro{
		background: #fff url(../images/lineup/nanda/nanda_pro_back.png) left top no-repeat;
		background-size: 50px;
		width: 24%;
		height: 150px;
		margin-bottom: 20px;
	}
	#probox .all{
		width: 49% !important;
	}
	#probox .pro .number{
		width: 50px;
	}
	#probox .pro h6{
		font-size: 120%;
		color: #000000;
		margin-bottom: 10px;
	}
	#probox .pro p{
		font-size: 90%;
		width: auto !important;
	}
	#probox #illust2{
		width: 150px;
		right: 30px;
		top: 80px;
	}
	#probox #illust3{
		width: 142px;
		left: -10px;
		bottom: -30px;
	}
	#probox #illust4{
		width: 225px;
		right: -10px;
		bottom: -40px;
	}

	#vsbox	{
		margin: 0 auto 50px;
		width: 1152px;
		padding-bottom: 80px;
	}
	#vsbox .inbox{
		width: 960px;
		margin: 0 auto;
	}
	#vsbox h5{
		width: 537px;
		margin-bottom: 60px;
	}
	#vsbox p{
		margin-top: 25px;
		line-height: 180%;
	}
	#vsbox .more{
		width: 145px;
		height: 145px;
		margin: 80px auto 0;
	}
	#vsbox .more span{
		width: 145px;
		font-size: 110%;
		line-height: 180%;
	}
	#vsbox #illust5{
		width: 115px;
		right: 365px;
		top: 615px;
	}
	#vsbox .hide{
		padding-top: 80px;
	}
	#vsbox .flex{
		display: flex;
		flex-flow: row nowrap;
		align-items: baseline;
		justify-content: space-between;
	}
	#vsbox .photo1{
		width: 55%;
	}
	#vsbox #illust6{
		width: 40%;
	}

	#bannerbox{
		width: 1100px;
		margin: 70px auto 0;
	}
	#bannerbox #set{
		background: url(../images/lineup/nanda/nanda_set_pc.jpg) no-repeat left top;
		background-size: 100%;
		width: 100%;
	}
	#bannerbox #set .viewbtn{
		padding-top: 245px;
		padding-bottom: 125px;
	}
	#bannerbox #set .viewbtn a{
		margin: 0 0 0 90px;
	}
	#bannerbox #aniv{
		text-align: center;
	}
	#bannerbox #aniv img{
		width: 70% !important;
	}
}

/* PC */
@media screen and (min-width: 1200px) and (max-width: 1920px){
	#nandabox {
		padding: 7vw 0;
	}
	#nandabox h4{
		width: 30%;
		margin: 0 auto;
	}
	#nandabox h4 img{
		max-width: 540px;
	}
	
	#firstbox{
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		width: 53%;
		margin: 5vw auto;
	}
	#firstbox #illust1{
		width: 45%;
	}
	#firstbox #illust1 img{
		width: 90%;
		max-width: 423px;
	}
	#firstbox p{
		width: 51%;
		font-size: 120%;
	}

	#probox	{
		margin: 5vw auto;
		width: 60.5%;
		padding-bottom: 7vw;
	}
	#probox h5 {
		width: 30%;
		max-width: 304px;
		padding: 5vw 0 2.5vw 5vw;
	}
	#probox .inbox{
		width: 84%;
		margin: 0 auto;
	}
	#probox .pro{
		background: #fff url(../images/lineup/nanda/nanda_pro_back.png) left top no-repeat;
		background-size: 3vw;
		width: 24%;
		height: 8vw;
		margin-bottom: 1vw;
	}
	#probox .all{
		width: 49% !important;
	}
	#probox .pro .number{
		width: 3vw;
	}
	#probox .pro h6{
		font-size: 120%;
		margin-bottom: 0.5vw;
	}
	#probox .pro p{
		font-size: 90%;
		width: auto !important;
	}
	#probox #illust2{
		width: 8vw;
		right: 1.5vw;
		top: 4vw;
	}
	#probox #illust3{
		width: 8vw;
		left: -1vw;
		bottom: -1.5vw;
	}
	#probox #illust4{
		width: 12vw;
		right: -1vw;
		bottom: -2vw;
	}

	#vsbox	{
		margin: 0 auto 3vw;
		width: 60.5%;
		padding-bottom: 4vw;
	}
	#vsbox .inbox{
		width: 80%;
		margin: 0 auto;
	}
	#vsbox h5{
		width: 55%;
		margin-bottom: 3vw;
	}
	#vsbox p{
		margin-top: 1.5vw;
		line-height: 180%;
	}
	#vsbox .more{
		width: 8vw;
		height: 8vw;
		margin: 6vw auto 0;
	}
	#vsbox .more span{
		width: 8vw;
		font-size: 110%;
		line-height: 180%;
	}
	#vsbox #illust5{
		width: 6vw;
		right: 19.5vw;
		top: 34.5vw;
	}
	#vsbox .hide{
		padding-top: 4vw;
	}
	#vsbox .flex{
		display: flex;
		flex-flow: row nowrap;
		align-items: baseline;
		justify-content: space-between;
	}
	#vsbox .photo1{
		width: 55%;
	}
	#vsbox #illust6{
		width: 40%;
	}

	#bannerbox{
		width: 60vw;
		margin: 5vw auto 0;
	}
	#bannerbox #set{
		background: url(../images/lineup/nanda/nanda_set_pc.jpg) no-repeat left top;
		background-size: 100%;
		width: 100%;
	}
	#bannerbox #set .viewbtn{
		padding-top: 14vw;
		padding-bottom: 7vw;
	}
	#bannerbox #set .viewbtn a{
		margin: 0 0 0 5vw;
	}
	#bannerbox #aniv{
		text-align: center;
	}
	#bannerbox #aniv img{
		width: 65% !important;
	}
}

/* TB*/
@media screen and (min-width: 600px) and (max-width: 1199px){
	#titlebox p{
		font-size: 100% !important;
	}
	
	#nandabox {
		padding: 10vw 0;
	}
	#nandabox h4{
		width: 35%;
		margin: 0 auto;
	}
	
	#firstbox{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		width: 70%;
		margin: 5vw auto;
	}
	#firstbox #illust1{
		width: 40%;
	}
	#firstbox #illust1 img{
		width: 100%;
	}
	#firstbox p{
		width: 53%;
	}

	#probox	{
		margin: 10vw auto;
		width: 80%;
		padding-bottom: 10vw;
	}
	#probox h5 {
		width: 25%;
		padding: 10vw 0 3vw 7vw;
	}
	#probox .inbox{
		width: 84%;
		margin: 0 auto;
	}
	#probox .pro{
		background: #fff url(../images/lineup/nanda/nanda_pro_back.png) left top no-repeat;
		background-size: 4vw;
		width: 24%;
		height: 13vw;
		margin-bottom: 1vw;
	}
	#probox .all{
		width: 49% !important;
	}
	#probox .pro .number{
		width: 4vw;
	}
	#probox .pro h6{
		font-size: 110%;
		margin-bottom: 1vw;
	}
	#probox .pro p{
		font-size: 90%;
		width: auto !important;
	}
	#probox	#illust2{
		width: 11vw;
		right: 2.5vw;
		top: 8vw;
	}
	#probox #illust3{
		width: 10vw;
		left: -1vw;
		bottom: -2vw;
	}
	#probox #illust4{
		width: 16vw;
		right: 0;
		bottom: -1vw;
	}

	#vsbox	{
		margin: 0 auto 3vw;
		width: 80%;
		padding-bottom: 7vw;
	}
	#vsbox .inbox{
		width: 82%;
		margin: 0 auto;
	}
	#vsbox h5{
		width: 55%;
		margin-bottom: 3vw;
	}
	#vsbox p{
		margin-top: 3vw;
		line-height: 180%;
	}
	#vsbox .more{
		width: 12vw;
		height: 12vw;
		margin: 8vw auto 0;
	}
	#vsbox .more span{
		width: 12vw;
		line-height: 200%;
	}
	#vsbox #illust5{
		width: 10vw;
		right: 21vw;
		top: 50vw;
	}
	#vsbox .hide{
		padding-top: 4vw;
	}
	#vsbox .flex{
		display: flex;
		flex-flow: row nowrap;
		align-items: baseline;
		justify-content: space-between;
	}
	#vsbox .photo1{
		width: 55%;
	}
	#vsbox #illust6{
		width: 40%;
	}

	#bannerbox{
		width: 75vw;
		margin: 8vw auto 0;
	}
	#bannerbox #set{
		background: url(../images/lineup/nanda/nanda_set_pc.jpg) no-repeat left top;
		background-size: 100%;
		width: 100%;
	}
	#bannerbox #set .viewbtn{
		padding-top: 17vw;
		padding-bottom: 7vw;
	}
	#bannerbox #set .viewbtn a{
		margin: 0 0 0 6vw;
	}
	#bannerbox #aniv{
		text-align: center;
	}
	#bannerbox #aniv img{
		width: 50vw !important;
	}
}

/* SP */
@media screen and (max-width: 599px){
	#nandabox {
		padding: 30vw 5vw;
	}
	#nandabox h4{
		width: 70%;
		margin: 0 auto;
	}
	#firstbox #illust1{
		width: 65%;
		margin: 10vw auto;
	}
	#probox	{
		margin: 20vw auto;
		padding-bottom: 40vw;
	}
	#probox h5 {
		width: 45%;
		padding-top: 20vw;
		padding-bottom: 6vw;
	}
	#probox .pro{
		background: #fff url(../images/lineup/nanda/nanda_pro_back.png) left top no-repeat;
		background-size: 9vw;
		width: 48%;
		height: 34vw;
		margin-bottom: 3vw;
	}
	#probox .all{
		width: 100% !important;
	}
	#probox .pro .number{
		width: 9vw;
	}
	#probox .pro h6{
		font-size: 110%;
		margin-bottom: 2vw;
	}
	#probox .pro p{
		font-size: 90%;
	}
	#probox #illust2{
		width: 25vw;
		right: 0;
		top: 7vw;
	}
	#probox #illust3{
		width: 27vw;
		left: -3vw;
		bottom: 7vw;
	}
	#probox #illust4{
		width: 42vw;
		right: 0;
		bottom: -2vw;
	}

	#vsbox{
		padding-bottom: 20vw;
		margin-bottom: 7vw;
	}
	#vsbox h5{
		width: 83%;
		margin-bottom: 7vw;
	}
	#vsbox p{
		margin-top: 7vw;
		line-height: 180%;
	}
	#vsbox .more{
		width: 35vw;
		height: 35vw;
		margin: 8vw auto 0;
	}
	#vsbox .more span{
		width: 35vw;
	}
	#vsbox #illust5{
		width: 25vw;
		right: 0;
		top: 150vw;
	}
	#vsbox .hide{
		padding-top: 10vw;
	}
	#vsbox #illust6{
		margin-top: 10vw;
	}
	#vsbox #illust6 img{
		width: 90%;
	}

	#bannerbox{
		width: 90%;
		margin: 15vw auto 0;
	}
	#bannerbox #set{
		background: url(../images/lineup/nanda/nanda_set_sp.jpg) no-repeat left top;
		background-size: 100%;
		width: 100%;
	}
	#bannerbox #set .viewbtn{
		padding-top: 100vw;
		padding-bottom: 20vw;
	}
}