@charset 'utf-8';
/*
**********************************************************************

* paper-brothers.css

*********************************************************************
*/
.paper_kyodai{
	position: absolute;
	left: 0px;
	top: 0px;
	background:#000;
	width: 796px;
	height: 466px;
	border: 2px solid #FFF;
	overflow: hidden;
	
    -webkit-transition: background 500ms linear ,  border 500ms linear;
            transition: background 500ms linear ,  border 500ms linear;
}
.paper_kyodai.scene_a{
	background:#FFF;	
	border: 2px solid #000;
}

.paper_kyodai .btn_close{
	position: absolute;
	right: 14px;
	top: 15px;
	z-index: 10;
	text-indent: -9999px;
	cursor: pointer;
	width: 28px;
	height: 36px;
}
.paper_kyodai .btn_close .line1{
	display: block;
	width: 34px;
	height: 2px;
	background: #FFF;
	position: absolute;
	left: -3px;
	top: 17px;
	transform: rotate(62deg) ;
	-webkit-transform: rotate(62deg) ;
	-moz-transform: rotate(62deg) ;
	-o-transform: rotate(62deg) ;
	-ms-transform: rotate(62deg);

	-webkit-transition: all 100ms ease-in;
	-moz-transition: all 100ms ease-in;
	-ms-transition: all 100ms ease-in;
	-o-transition: all 100ms ease-in;
	transition: all 100ms ease-in;	
}
.paper_kyodai .btn_close .line2{
	display: block;
	width: 34px;
	height: 2px;
	background: #FFF;	
	position: absolute;
	left: -3px;
	top: 17px;
	transform: rotate(-62deg) ;
	-webkit-transform: rotate(-62deg) ;
	-moz-transform: rotate(-62deg) ;
	-o-transform: rotate(-62deg) ;
	-ms-transform: rotate(-62deg) ;
	
	-webkit-transition: all 100ms ease-in;
	-moz-transition: all 100ms ease-in;
	-ms-transition: all 100ms ease-in;
	-o-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
	-o-transition-delay: 100ms;
}
.paper_kyodai.scene_a .btn_close .line2,
.paper_kyodai.scene_a .btn_close .line1{
	background: #000;
}
.paper_kyodai .btn_close:hover .line1{
	width: 40px;
	left: -6px;
}
.paper_kyodai .btn_close:hover .line2{
	width: 40px;	
	left: -6px;
}

.paper_kyodai.ie .btn_close{
	background: url(../images/btn-close-ie.png) no-repeat;
}
.paper_kyodai.ie .btn_close .line1,
.paper_kyodai.ie .btn_close .line2{
	display: none;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai{
		left: 0px;
		top: 0px;
		width: 290px;
		height: 465px;
		border: 1px solid #FFF;
		/*
		overflow:scroll;
		-webkit-overflow-scrolling:touch;
		*/
	}
	.paper_kyodai.scene_a{
	}
	
	.paper_kyodai .btn_close{
		right: 8px;
		top: 8px;
		width: 26px;
		height: 30px;
	}
	.paper_kyodai .btn_close .line1{
		width: 20px;
		height: 2px;
		left: 2px;
		top: 14px;
	}
	.paper_kyodai .btn_close .line2{
		width: 20px;
		height: 2px;
		left: 2px;
		top: 14px;
	}
	.paper_kyodai.scene_a .btn_close .line2,
	.paper_kyodai.scene_a .btn_close .line1{	
	}
	
	.paper_kyodai .btn_close:hover .line1{
		-moz-transition-property: none;
		-webkit-transition-property: none;
		-o-transition-property: none;
		transition-property: none;
		width: 20px;
		left: 2px;
	}
	.paper_kyodai .btn_close:hover .line2{
		-moz-transition-property: none;
		-webkit-transition-property: none;
		-o-transition-property: none;
		transition-property: none;
		width: 20px;
		left: 2px;
	}

}




/*
******************************************
* 
* question_container
* 
******************************************
*/
.paper_kyodai .question_container{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.paper_kyodai .question_container .illustbox{
	position: absolute;
	left: 325px;
	top: -76px;
	z-index: 2;
}
.paper_kyodai .question_container .illustbox .illustwrap{
	position: absolute;
	left: 0;
	top: 0;
	border: 2px solid #FFF;
	width: 146px;
	height: 146px;
	border-radius: 73px;
	overflow: hidden;
}
.paper_kyodai .question_container .illustbox .illustwrap .illust{
	display: block;
	background: url(../images/illust_kyodai1-pc.png) no-repeat;
	width: 87px;
	height: 62px;
	position: absolute;
	left: 32px;
	top: 85px;
	z-index: 1;
}
.paper_kyodai .question_container .illustbox .txt{
	display: block;
	background: url(../images/illust_kyodai1-txt-pc.png) no-repeat;
	width: 127px;
	height: 37px;
	text-indent: -9999px;
	position: absolute;
	left: 14px;
	top: 135px;
	z-index: 1;
}

.paper_kyodai .question_container .tit_paper{
	display: block;
	background: url(../images/tit-paper-pc.png) no-repeat;
	width: 714px;
	height: 140px;
	text-indent: -9999px;
	position: absolute;
	left: 43px;
	top: 74px;
	z-index: 1;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai .question_container .illustbox{
		left: 106px;
		top: -43px;
	}
	.paper_kyodai .question_container .illustbox .illustwrap{
		position: absolute;
		left: 0;
		top: 0;
		border: 2px solid #FFF;
		width: 78px;
		height: 78px;
		border-radius: 39px;
		overflow: hidden;
	}
	.paper_kyodai .question_container .illustbox .illustwrap .illust{
		background: url(../images/illust_kyodai1-sp.png) no-repeat;
		width: 44px;
		height: 31px;
		background-size: cover;
		left: 20px;
		top: 47px;
		z-index: 1;
	}
	.paper_kyodai .question_container .illustbox .txt{
		background: url(../images/illust_kyodai1-txt-sp.png) no-repeat;
		width: 70px;
		height: 22px;
		background-size: cover;
		left: 8px;
		top: 72px;
		z-index: 1;
	}
	
	.paper_kyodai .question_container .tit_paper{
		background: url(../images/tit-paper-sp.png) no-repeat;
		background-size: cover;
		width: 265px;
		height: 115px;
		left: 18px;
		top: 50px;
	}
	
}




/* qbox */
.paper_kyodai .question_container .qbox{
	display: block;
	position: absolute;
	left: 43px;
	top: 245px;
	z-index: 1;
}
.paper_kyodai .question_container .qbox .q{
	display: block;
	background-repeat: no-repeat;
	width: 590px;
	height: 49px;
	position: absolute;
	left: 0px;
	top: 0px;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){

	/* qbox */
	.paper_kyodai .question_container .qbox{
		left: 31px;
		top: 186px;
	}
	.paper_kyodai .question_container .qbox .q{
		background-size: 260px 1084px;
		width: 245px;
		height: 25px;
		left: 0px;
		top: 0px;
	}	
	
}


/* qlist */
.paper_kyodai .question_container .qlist{
	position: absolute;
	left: 45px;
	top: 322px;
	z-index: 1;	
}
.paper_kyodai .question_container .qlist li{
	width: 150px;
	height: 100px;
	border: 2px solid #FFF;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	cursor: pointer;
	background-repeat: no-repeat;
}
.paper_kyodai .question_container .qlist li .hover{
	content: "";
	background: url(../images/sweat-l.gif) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	left: -32px;
	top: -34px;
	z-index: 1;
	display: none;
}
.paper_kyodai .question_container .qlist li .hover:after{
	content: "";
	background: url(../images/sweat-r.gif) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 186px;
	top: 0px;
	z-index: 1;
	display: none;
}
.paper_kyodai .question_container .qlist li:hover .hover,
.paper_kyodai .question_container .qlist li:hover .hover:after{
	display: block;
}
.paper_kyodai .question_container .qlist li.on,
.paper_kyodai .question_container .qlist li:hover{
	background: #FFF;	
}
.paper_kyodai .question_container .qlist li.a{
	left: 0;
}
.paper_kyodai .question_container .qlist li.b{
	left: 180px;
}
.paper_kyodai .question_container .qlist li.c{
	left: 360px;
}
.paper_kyodai .question_container .qlist li.d{
	left: 540px;
}
.paper_kyodai .question_container .qlist li .obj{
	display: block;
	text-indent: -9999px;
	background-repeat: no-repeat;
	width: 150px;
	height: 100px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.paper_kyodai .question_container .qlist li.on .obj,
.paper_kyodai .question_container .qlist li:hover .obj{
	opacity: 0.3;
}
.paper_kyodai .question_container .qlist li.a .obj{
	background-image: url(../images/obj-a1-pc.png);
}
.paper_kyodai .question_container .qlist li.b .obj{
	background-image: url(../images/obj-b1-pc.png);
}
.paper_kyodai .question_container .qlist li.c .obj{
	background-image: url(../images/obj-c1-pc.png);
}
.paper_kyodai .question_container .qlist li.d .obj{
	background-image: url(../images/obj-d1-pc.png);
}
.paper_kyodai .question_container .qlist li .txt{
	display: block;
	text-indent: -9999px;
	background-repeat: no-repeat;
	width: 150px;
	height: 100px;
	position: relative;
	z-index: 2;
}
.paper_kyodai .question_container .qlist li.a .txt{
	background-position: 0 -74px;
}
.paper_kyodai .question_container .qlist li.b .txt{
	background-position: 0 -174px;
}
.paper_kyodai .question_container .qlist li.c .txt{
	background-position: 0 -274px;
}
.paper_kyodai .question_container .qlist li.d .txt{
	background-position: 0 -374px;
}
.paper_kyodai .question_container .qlist li.a.on .txt,
.paper_kyodai .question_container .qlist li.a:hover .txt{
	background-position: -150px -74px;
}
.paper_kyodai .question_container .qlist li.b.on .txt,
.paper_kyodai .question_container .qlist li.b:hover .txt{
	background-position: -150px -174px;
}
.paper_kyodai .question_container .qlist li.c.on .txt,
.paper_kyodai .question_container .qlist li.c:hover .txt{
	background-position: -150px -274px;
}
.paper_kyodai .question_container .qlist li.d.on .txt,
.paper_kyodai .question_container .qlist li.d:hover .txt{
	background-position: -150px -374px;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){

	.paper_kyodai .question_container .qlist{
		position: relative;
		left: auto;
		top: auto;
		margin-top: 228px;
	}
	.paper_kyodai .question_container .qlist li .hover{
		display: none;
	}
	.paper_kyodai .question_container .qlist li .hover:after{
		display: none;
	}
	.paper_kyodai .question_container .qlist li:hover .hover,
	.paper_kyodai .question_container .qlist li:hover .hover:after{
		display: none;
	}
	.paper_kyodai .question_container .qlist li{
		display: block;
		width: 221px;
		height: 38px;
		margin: 0 auto 15px;
		border: none;
		position: relative;
		left: auto;
		top: auto;
		z-index: 1;
		cursor: pointer;
		background-repeat: no-repeat;
		background-size: 13px 15px;
		background-position: 30px 11px;
	}
	.paper_kyodai .question_container .qlist li:after{
		content: "";
		display: block;
		width: 221px;
		height: 38px;
		border: 1px solid #FFF;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		-webkit-transform:skew(-27deg);
		    -ms-transform:skew(-27deg);
		        transform:skew(-27deg)
	}
	.paper_kyodai .question_container .qlist li.on,
	.paper_kyodai .question_container .qlist li:hover{
		background: none;	
	}
	.paper_kyodai .question_container .qlist li.a{
		left: auto;
	}
	.paper_kyodai .question_container .qlist li.b{
		left: auto;
	}
	.paper_kyodai .question_container .qlist li.c{
		left: auto;
	}
	.paper_kyodai .question_container .qlist li.d{
		left: auto;
	}
	.paper_kyodai .question_container .qlist li .obj{
		display: block;
		text-indent: -9999px;
		background-repeat: no-repeat;
		background-size: 13px 15px;
		background-position: 30px 11px;
		width: 221px;
		height: 38px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;

	}
	.paper_kyodai .question_container .qlist li.on .obj,
	.paper_kyodai .question_container .qlist li:hover .obj{
		opacity: 1;
	}
	.paper_kyodai .question_container .qlist li.a .obj{
		background-image: url(../images/obj-a1-sp.png);
	}
	.paper_kyodai .question_container .qlist li.b .obj{
		background-image: url(../images/obj-b1-sp.png);
	}
	.paper_kyodai .question_container .qlist li.c .obj{
		background-image: url(../images/obj-c1-sp.png);
	}
	.paper_kyodai .question_container .qlist li.d .obj{
		background-image: url(../images/obj-d1-sp.png);
	}

	.paper_kyodai .question_container .qlist li .txt{
		background-size: 260px 1084px;
		width: 196px;
		height: 38px;
		position: absolute;
		left: 30px;
		top: 0;
	}
	.paper_kyodai .question_container .qlist li.a .txt{
		background-position: 0 -44px;
	}
	.paper_kyodai .question_container .qlist li.b .txt{
		background-position: 0 -82px;
	}
	.paper_kyodai .question_container .qlist li.c .txt{
		background-position: 0 -120px;
	}
	.paper_kyodai .question_container .qlist li.d .txt{
		background-position: 0 -158px;
	}
	.paper_kyodai .question_container .qlist li.a.on .txt,
	.paper_kyodai .question_container .qlist li.a:hover .txt{
		background-position: 0 -44px;
	}
	.paper_kyodai .question_container .qlist li.b.on .txt,
	.paper_kyodai .question_container .qlist li.b:hover .txt{
		background-position: 0 -82px;
	}
	.paper_kyodai .question_container .qlist li.c.on .txt,
	.paper_kyodai .question_container .qlist li.c:hover .txt{
		background-position: 0 -120px;
	}
	.paper_kyodai .question_container .qlist li.d.on .txt,
	.paper_kyodai .question_container .qlist li.d:hover .txt{
		background-position: 0 -158px;
	}

}


/*
******************************************
* 
* answer_container
* 
******************************************
*/
.paper_kyodai .answer_container{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: none;
}

.paper_kyodai .answer_container .qbox{
	display: block;
	position: absolute;
	left: 22px;
	top: 16px;
	z-index: 1;
}
.paper_kyodai .answer_container .qbox .q{
	display: block;
	background-repeat: no-repeat;
	background-position: 0 -49px;
	width: 590px;
	height: 25px;
	position: absolute;
	left: 0px;
	top: 0px;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai .answer_container{	
	}
	
	.paper_kyodai .answer_container .qbox{
		left: 14px;
		top: 14px;
	}
	.paper_kyodai .answer_container .qbox .q{
		display: block;
		background-repeat: no-repeat;
		background-position: 0 -26px;
		background-size: 260px 1084px;
		width: 255px;
		height: 18px;
		position: absolute;
		left: 0px;
		top: 0px;
	}	
}

/* answerbox */
.paper_kyodai .answer_container .answerbox{
	display: block;
	position: absolute;
	left: 46px;
	top: 64px;
	z-index: 1;
}
.paper_kyodai .answer_container .answerbox .answer{
	position: relative;
	height: 55px;
}
.paper_kyodai .answer_container .answerbox .answer .obj{
	display: block;
	background-repeat: no-repeat;
	width: 54px;
	height: 39px;
	text-indent: -9999px;
}
.paper_kyodai .answer_container .answerbox .answer .obj.a{
	background-image: url(../images/tit-a-pc.png);
}
.paper_kyodai .answer_container .answerbox .answer .obj.b{
	background-image: url(../images/tit-b-pc.png);
}
.paper_kyodai .answer_container .answerbox .answer .obj.c{
	background-image: url(../images/tit-c-pc.png);
}
.paper_kyodai .answer_container .answerbox .answer .obj.d{
	background-image: url(../images/tit-d-pc.png);
}
.paper_kyodai .answer_container .answerbox .answer .txt{
	display: block;
	text-indent: -9999px;
	background-repeat: no-repeat;
	width: 320px;
	height: 32px;
	position: absolute;
	left: 65px;
	top: 8px;
}
.paper_kyodai .answer_container .answerbox .answer.a .txt{
	background-position: 0  -474px;
}
.paper_kyodai .answer_container .answerbox .answer.b .txt{
	background-position: 0  -505px;
}
.paper_kyodai .answer_container .answerbox .answer.c .txt{
	background-position: 0  -538px;
}
.paper_kyodai .answer_container .answerbox .answer.d .txt{
	background-position: 0  -570px;
}
.paper_kyodai .answer_container .answerbox .txtbox{
	display: inline-block;
	text-indent: -9999px;
	background-repeat: no-repeat;
	width: 272px;
	height: 144px;
}
.paper_kyodai .answer_container .answerbox .txtbox.a{
	background-position: 0  -682px;
}
.paper_kyodai .answer_container .answerbox .txtbox.b{
	background-position: 0  -826px;
}
.paper_kyodai .answer_container .answerbox .txtbox.c{
	background-position: 0  -970px;
}
.paper_kyodai .answer_container .answerbox .txtbox.d{
	background-position: 0  -1114px;
}
.paper_kyodai .answer_container .answerbox .illust{
	position: absolute;
	left: 283px;
	top: 56px;
}
.paper_kyodai .answer_container .answerbox .illust img{
	width: 95px;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai .answer_container .answerbox{
		left: 24px;
		top: 46px;
	}
	.paper_kyodai .answer_container .answerbox .answer{
		height: 35px;
	}
	.paper_kyodai .answer_container .answerbox .answer .obj{
		background-repeat: no-repeat;
		width: 34px;
		height: 24px;
		background-size: cover;
	}
	.paper_kyodai .answer_container .answerbox .answer .obj.a{
		background-image: url(../images/tit-a-sp.png);
	}
	.paper_kyodai .answer_container .answerbox .answer .obj.b{
		background-image: url(../images/tit-b-sp.png);
	}
	.paper_kyodai .answer_container .answerbox .answer .obj.c{
		background-image: url(../images/tit-c-sp.png);
	}
	.paper_kyodai .answer_container .answerbox .answer .obj.d{
		background-image: url(../images/tit-d-sp.png);
	}
	.paper_kyodai .answer_container .answerbox .answer .txt{
		width: 214px;
		height: 22px;
		background-size: 260px 1084px;
		position: absolute;
		left: 40px;
		top: 3px;
	}
	.paper_kyodai .answer_container .answerbox .answer.a .txt{
		background-position: 0  -196px;
	}
	.paper_kyodai .answer_container .answerbox .answer.b .txt{
		background-position: 0  -218px;
	}
	.paper_kyodai .answer_container .answerbox .answer.c .txt{
		background-position: 0  -240px;
	}
	.paper_kyodai .answer_container .answerbox .answer.d .txt{
		background-position: 0  -262px;
	}
	.paper_kyodai .answer_container .answerbox .txtbox{
		background-repeat: no-repeat;
		width: 160px;
		height: 98px;
		background-size: 260px 1084px;
	}
	.paper_kyodai .answer_container .answerbox .txtbox.a{
		background-position: 0  -316px;
	}
	.paper_kyodai .answer_container .answerbox .txtbox.b{
		background-position: 0  -414px;
	}
	.paper_kyodai .answer_container .answerbox .txtbox.c{
		background-position: 0  -512px;
	}
	.paper_kyodai .answer_container .answerbox .txtbox.d{
		background-position: 0  -610px;
	}
	.paper_kyodai .answer_container .answerbox .illust{
		left: 178px;
		top: 38px;	
	}
	.paper_kyodai .answer_container .answerbox .illust img{
		width: 63px;
	}
}



/* ----osusumebox---- */
.paper_kyodai .answer_container .osusumebox{
	display: block;
	position: absolute;
	left: 446px;
	top: 65px;
	z-index: 1;
	border: 4px solid #000;
	width: 292px;
	height: 190px;
}
.paper_kyodai .answer_container .osusumebox .tit{
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	background: #000;
	width: 110px;
	height: 26px;
}
.paper_kyodai .answer_container .osusumebox .tit:after{
	content: "";
	position: absolute;
	right: -12px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 26px 12px 0 0;
	border-color: #000000 transparent transparent transparent;	
}
.paper_kyodai .answer_container .osusumebox .tit span{
	display: block;
	background: url(../images/tit-osusume-pc.png) no-repeat;
	width: 87px;
	height: 14px;
	text-indent: -9999px;
	margin-left: 8px;
	margin-top: 4px;
}
.paper_kyodai .answer_container .osusumebox .product{
	display: block;
	background-repeat: no-repeat;
	width: 292px;
	height: 140px;
	margin-top: 26px;
}
.paper_kyodai .answer_container .osusumebox .product.a{
	background-position: 0 -1258px;
}
.paper_kyodai .answer_container .osusumebox .product.b{
	background-position: 0 -1398px;
}
.paper_kyodai .answer_container .osusumebox .product.c{
	background-position: 0 -1538px;
}
.paper_kyodai .answer_container .osusumebox .product.d{
	background-position: 0 -1678px;
}
.paper_kyodai .answer_container .osusumebox .btn_product{
	display: block;
	background: #000;
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 1;
	width: 100%;
	height: 26px;
}
.paper_kyodai .answer_container .osusumebox .btn_product .txt{
	display: block;
	background: url(../images/btn-product-pc.png) no-repeat;
	width: 103px;
	height: 14px; 
	text-indent: -9999px;
	position: absolute;
	top: 7px;
	right: 34px;
}
.paper_kyodai .answer_container .osusumebox .btn_product .arrow1,
.paper_kyodai .answer_container .osusumebox .btn_product .arrow2{
	display: block;
	background: url(../images/arrow1-pc.png) no-repeat;
	width: 5px;
	height: 14px; 
	text-indent: -9999px;
	position: absolute;
	top: 7px;
	right: 18px;
}
.paper_kyodai .answer_container .osusumebox .btn_product .arrow2{
	right: 14px;
}
.paper_kyodai .answer_container .osusumebox:hover .tit span{
	opacity: 0.85;
}
.paper_kyodai .answer_container .osusumebox:hover .btn_product .txt{
	opacity: 0.85;
}
.paper_kyodai .answer_container .osusumebox:hover .btn_product .arrow1{
	opacity: 0.85;
	-webkit-animation: btn_product_arrow1 700ms infinite;
	        animation: btn_product_arrow1 700ms infinite;
}
.paper_kyodai .answer_container .osusumebox:hover .btn_product .arrow2{
	opacity: 0.85;
	-webkit-animation: btn_product_arrow2 700ms infinite;
	        animation: btn_product_arrow2 700ms infinite;
}
@-webkit-keyframes btn_product_arrow1{
	30%{
		right: 18px;
    }
  	70%{
		right: 16px;
  	}
  	100%{
		right: 16px;
  	}
}
@keyframes btn_product_arrow1{
	30%{
		right: 18px;
    }
  	70%{
		right: 16px;
  	}
  	100%{
		right: 16px;
  	}
}
@-webkit-keyframes btn_product_arrow2{
	0%{
		right: 14px;
    }
  	40%{
		right: 12px;
  	}
  	100%{
		right: 12px;
  	}
}
@keyframes btn_product_arrow2{
	0%{
		right: 14px;
    }
  	40%{
		right: 12px;
  	}
  	100%{
		right: 12px;
  	}
}


/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai .answer_container .osusumebox{
		left: 24px;
		top: 186px;
		border: 2px solid #000;
		width: 236px;
		height: 111px;
	}
	.paper_kyodai .answer_container .osusumebox .tit{
		display: block;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 1;
		background: #000;
		width: 100px;
		height: 19px;
	}
	.paper_kyodai .answer_container .osusumebox .tit:after{
		content: "";
		position: absolute;
		right: 10px;
		top: 1px;
		width: 1px;
		height: 14px;
		background: #FFF;
		border: none;
		-webkit-transform:skew(-27deg);
		    -ms-transform:skew(-27deg);
		        transform:skew(-27deg)
	}
	.paper_kyodai .answer_container .osusumebox .tit span{
		display: block;
		background: url(../images/tit-osusume-sp.png) no-repeat;
		background-size: cover;
		width: 66px;
		height: 10px;
		text-indent: -9999px;
		margin-left: 4px;
		margin-top: 3px;
	}
	.paper_kyodai .answer_container .osusumebox .product{
		display: block;
		background-repeat: no-repeat;
		background-size: 260px 1084px;
		width: 236px;
		height: 92px;
		margin-top: 19px;
	}
	.paper_kyodai .answer_container .osusumebox .product.a{
		background-position: 0 -708px;
	}
	.paper_kyodai .answer_container .osusumebox .product.b{
		background-position: 0 -800px;
	}
	.paper_kyodai .answer_container .osusumebox .product.c{
		background-position: 0 -892px;
	}
	.paper_kyodai .answer_container .osusumebox .product.d{
		background-position: 0 -984px;
	}
	.paper_kyodai .answer_container .osusumebox .btn_product{
		display: block;
		background: #000;
		position: absolute;
		right: 0px;
		top: 0;
		left: auto;
		bottom: auto;
		z-index: 1;
		width: 136px;
		height: 19px;
	}
	.paper_kyodai .answer_container .osusumebox .btn_product .txt{
		display: block;
		background: url(../images/btn-product-sp.png) no-repeat;
		background-size: cover;
		width: 67px;
		height: 9px; 
		text-indent: -9999px;
		position: absolute;
		top: 3px;
		right: 22px;
	}
	.paper_kyodai .answer_container .osusumebox .btn_product .arrow1,
	.paper_kyodai .answer_container .osusumebox .btn_product .arrow2{
		display: block;
		background: url(../images/arrow1-sp.png) no-repeat;
		background-size: cover;
		width: 5px;
		height: 13px; 
		text-indent: -9999px;
		position: absolute;
		top: 2px;
		right: 12px;	
	}
	.paper_kyodai .answer_container .osusumebox .btn_product .arrow2{
		right: 8px;
	}
	
	.paper_kyodai .answer_container .osusumebox:hover .tit span{
		opacity: 1;
	}
	.paper_kyodai .answer_container .osusumebox:hover .btn_product .txt{
		opacity: 1;
	}
	.paper_kyodai .answer_container .osusumebox:hover .btn_product .arrow1{
		opacity: 1;
		-webkit-animation: none;
		animation: none;
	}
	.paper_kyodai .answer_container .osusumebox:hover .btn_product .arrow2{
		opacity: 0.85;
		-webkit-animation: none;
		animation: none;
	}
}




/* ----graphbox---- */
.paper_kyodai .answer_container .graphbox{
	display: block;
	position: absolute;
	left: 36px;
	top: 270px;
	z-index: 1;
}
.paper_kyodai .answer_container .graphbox .tit{
	vertical-align: bottom;
	margin-bottom: 10px;
}
.paper_kyodai .answer_container .graphbox .tit .txt{
	display: inline-block;
	background: url(../images/tit-syukei-pc.png) no-repeat;
	text-indent: -9999px;
	width: 195px;
	height: 18px;
	vertical-align: bottom;
	
}
.paper_kyodai .answer_container .graphbox .tit .tenten{
	display: inline-block;
	background: url(../images/motion-tenten-pc.png)	no-repeat;
	width: 97px;
	height: 18px;
	margin-left: 2px;
	vertical-align: bottom;
	-webkit-animation: tenten 1200ms infinite steps(4);
	        animation: tenten 1200ms infinite steps(4);	
}
@-webkit-keyframes tenten{
	0%{
		background-position:0px 0;
    }
  	100%{
  		background-position:-388px 0;
  	}
}
@keyframes tenten{
	0%{
		background-position:0px 0;
    }
  	100%{
  		background-position:-388px 0;
  	}
}

.paper_kyodai .answer_container .graphbox ul{
	position: relative;
	width: 724px;
}
.paper_kyodai .answer_container .graphbox ul li{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	height: 70px;
}
.paper_kyodai .answer_container .graphbox ul li.a{
	left: 0%;
	width: 20%;
}
.paper_kyodai .answer_container .graphbox ul li.b{
	left: 20%;
	width: 20%;
}
.paper_kyodai .answer_container .graphbox ul li.c{
	left: 40%;
	width: 20%;
}
.paper_kyodai .answer_container .graphbox ul li.d{
	left: 60%;
	width: 40%;
}
.paper_kyodai .answer_container .graphbox ul li .ans{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.paper_kyodai .answer_container .graphbox ul li .ans .obj{
	display: block;
	position: absolute;
	left: 4px;
	top: 38px;
	z-index: 2;
	width: 22px;
	height: 24px;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
.paper_kyodai .answer_container .graphbox ul li.a .ans .obj{
	background-image: url(../images/obj-a2-pc.png);
}
.paper_kyodai .answer_container .graphbox ul li.b .ans .obj{
	background-image: url(../images/obj-b2-pc.png);
}
.paper_kyodai .answer_container .graphbox ul li.c .ans .obj{
	background-image: url(../images/obj-c2-pc.png);
}
.paper_kyodai .answer_container .graphbox ul li.d .ans .obj{
	background-image: url(../images/obj-d2-pc.png);
}
.paper_kyodai .answer_container .graphbox ul li .ans .bg{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	-webkit-transform:skew(-27deg);
	    -ms-transform:skew(-27deg);
	        transform:skew(-27deg)
}
.paper_kyodai .answer_container .graphbox ul li.a .ans .bg{
	background-color: #fe0000;
}
.paper_kyodai .answer_container .graphbox ul li.b .ans .bg{
	background-color: #004acf;
}
.paper_kyodai .answer_container .graphbox ul li.c .ans .bg{
	background-color: #00b500;
}
.paper_kyodai .answer_container .graphbox ul li.d .ans .bg{
	background-color: #ffbe00;
}


/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai .answer_container .graphbox{
		left: 20px; 
		top: 308px;
		width: 245px;
	}
	.paper_kyodai .answer_container .graphbox .tit{
		vertical-align: bottom;
		margin-bottom: 10px;
	}
	.paper_kyodai .answer_container .graphbox .tit .txt{
		display: block;
		background: url(../images/tit-syukei-sp.png) no-repeat;
		background-size: cover;
		width: 144px;
		height: 13px;
		margin: 0 auto;
	}
	.paper_kyodai .answer_container .graphbox .tit .tenten{
		display: block;
		background: url(../images/motion-tenten-sp.png)	no-repeat;
		background-size: 232px 13px;
		width: 58px;
		height: 13px;
		margin: 6px auto 0;
		vertical-align: bottom;
		-webkit-animation: tentensp 1200ms infinite steps(4);
		        animation: tentensp 1200ms infinite steps(4);
	}
	@-webkit-keyframes tentensp{
		0%{
			background-position:0px 0;
	    }
	  	100%{
	  		background-position:-232px 0;
	  	}
	}
	@keyframes tentensp{
		0%{
			background-position:0px 0;
	    }
	  	100%{
	  		background-position:-232px 0;
	  	}
	}
	
	.paper_kyodai .answer_container .graphbox ul{
		position: absolute;
		width: 245px;
		left: 0px;
		top: 20px;
	}
	.paper_kyodai .answer_container .graphbox ul li{
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 1;
		height: 50px;
	}
	.paper_kyodai .answer_container .graphbox ul li.a{
		left: 0%;
		width: 20%;
	}
	.paper_kyodai .answer_container .graphbox ul li.b{
		left: 20%;
		width: 20%;
	}
	.paper_kyodai .answer_container .graphbox ul li.c{
		left: 40%;
		width: 20%;
	}
	.paper_kyodai .answer_container .graphbox ul li.d{
		left: 60%;
		width: 40%;
	}
	.paper_kyodai .answer_container .graphbox ul li .ans{
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.paper_kyodai .answer_container .graphbox ul li .ans .obj{
		display: block;
		position: absolute;
		left: 0px;
		top: 33px;
		z-index: 2;
		width: 11px;
		height: 13px;
		background-size: cover;
	}
	.paper_kyodai .answer_container .graphbox ul li.a .ans .obj{
		background-image: url(../images/obj-a2-sp.png);
	}
	.paper_kyodai .answer_container .graphbox ul li.b .ans .obj{
		background-image: url(../images/obj-b2-sp.png);
	}
	.paper_kyodai .answer_container .graphbox ul li.c .ans .obj{
		background-image: url(../images/obj-c2-sp.png);
	}
	.paper_kyodai .answer_container .graphbox ul li.d .ans .obj{
		background-image: url(../images/obj-d2-sp.png);
	}
	.paper_kyodai .answer_container .graphbox ul li .ans .bg{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		-webkit-transform:skew(-27deg);
		    -ms-transform:skew(-27deg);
		        transform:skew(-27deg)
	}
	.paper_kyodai .answer_container .graphbox ul li.a .ans .bg{
		background-color: #fe0000;
	}
	.paper_kyodai .answer_container .graphbox ul li.b .ans .bg{
		background-color: #004acf;
	}
	.paper_kyodai .answer_container .graphbox ul li.c .ans .bg{
		background-color: #00b500;
	}
	.paper_kyodai .answer_container .graphbox ul li.d .ans .bg{
		background-color: #ffbe00;
	}
		
}




/* ----resultbox---- */
.paper_kyodai .answer_container .resultbox{
	display: block;
	position: absolute;
	left: 27px;
	top: 385px;
	z-index: 1;
}
.paper_kyodai .answer_container .resultbox ul li{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.paper_kyodai .answer_container .resultbox ul li.a{
	left: 0px;
	top: 0px;
}
.paper_kyodai .answer_container .resultbox ul li.b{
	left: 252px;
	top: 0px;
}
.paper_kyodai .answer_container .resultbox ul li.c{
	left: 0px;
	top: 33px;
}
.paper_kyodai .answer_container .resultbox ul li.d{
	left: 252px;
	top: 33px;
}
.paper_kyodai .answer_container .resultbox ul li .ans{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
.paper_kyodai .answer_container .resultbox ul li .ans .obj{
	display: block;
	position: absolute;
	left: 4px;
	top: 5px;
	z-index: 2;
	width: 12px;
	height: 14px;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
.paper_kyodai .answer_container .resultbox ul li.a .ans .obj{
	background-image: url(../images/obj-a3-pc.png);
}
.paper_kyodai .answer_container .resultbox ul li.b .ans .obj{
	background-image: url(../images/obj-b3-pc.png);
}
.paper_kyodai .answer_container .resultbox ul li.c .ans .obj{
	background-image: url(../images/obj-c3-pc.png);
}
.paper_kyodai .answer_container .resultbox ul li.d .ans .obj{
	background-image: url(../images/obj-d3-pc.png);
}
.paper_kyodai .answer_container .resultbox ul li .ans .bg{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 21px;
	height: 23px;
	-webkit-transform:skew(-27deg);
	    -ms-transform:skew(-27deg);
	        transform:skew(-27deg)
}
.paper_kyodai .answer_container .resultbox ul li.a .ans .bg{
	background-color: #fe0000;
}
.paper_kyodai .answer_container .resultbox ul li.b .ans .bg{
	background-color: #004acf;
}
.paper_kyodai .answer_container .resultbox ul li.c .ans .bg{
	background-color: #00b500;
}
.paper_kyodai .answer_container .resultbox ul li.d .ans .bg{
	background-color: #ffbe00;
}
.paper_kyodai .answer_container .resultbox ul li .percent{
	display: block;
	position: absolute;
	left: 30px;
	top: -2px;
	background-image: url(../images/number-small.png);
	width: 36px;
	height: 25px;
	background-position: 0 -2475px;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
.paper_kyodai .answer_container .resultbox ul li .percent:after{
	content: "";
	background: url(../images/obj-percent-pc.png) no-repeat;
	width: 15px;
	height: 18px;
	position: absolute;
	right: -15px;
	top: 5px;
}
.paper_kyodai .answer_container .resultbox ul li .txt{
	display: block;
	position: absolute;
	left: 85px;
	top: 2px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	width: 160px;
	height: 20px;
}
.paper_kyodai .answer_container .resultbox ul li.a .txt{
	background-position: 0 -602px;
}
.paper_kyodai .answer_container .resultbox ul li.b .txt{
	background-position: 0 -622px;
}
.paper_kyodai .answer_container .resultbox ul li.c .txt{
	background-position: 0 -642px;
}
.paper_kyodai .answer_container .resultbox ul li.d .txt{
	background-position: 0 -662px;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai .answer_container .resultbox{
		left: 21px;
		top: 387px;
	}
	.paper_kyodai .answer_container .resultbox ul li{
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 1;
	}
	.paper_kyodai .answer_container .resultbox ul li.a{
		left: 0px;
		top: 0px;
	}
	.paper_kyodai .answer_container .resultbox ul li.b{
		left: 130px;
		top: 0px;
	}
	.paper_kyodai .answer_container .resultbox ul li.c{
		left: 0px;
		top: 16px;
	}
	.paper_kyodai .answer_container .resultbox ul li.d{
		left: 130px;
		top: 16px;
	}
	.paper_kyodai .answer_container .resultbox ul li .ans{
		display: block;
		position: absolute;
		left: 0;
		top: 0;
	}
	.paper_kyodai .answer_container .resultbox ul li .ans .obj{
		display: block;
		position: absolute;
		left: 2px;
		top: 2px;
		z-index: 2;
		width: 6px;
		height: 7px;
		text-indent: -9999px;
		background-size: cover;
	}
	.paper_kyodai .answer_container .resultbox ul li.a .ans .obj{
		background-image: url(../images/obj-a3-sp.png);
	}
	.paper_kyodai .answer_container .resultbox ul li.b .ans .obj{
		background-image: url(../images/obj-b3-sp.png);
	}
	.paper_kyodai .answer_container .resultbox ul li.c .ans .obj{
		background-image: url(../images/obj-c3-sp.png);
	}
	.paper_kyodai .answer_container .resultbox ul li.d .ans .obj{
		background-image: url(../images/obj-d3-sp.png);
	}
	.paper_kyodai .answer_container .resultbox ul li .ans .bg{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 10px;
		height: 11px;
		-webkit-transform:skew(-27deg);
		    -ms-transform:skew(-27deg);
		        transform:skew(-27deg)
	}
	.paper_kyodai .answer_container .resultbox ul li.a .ans .bg{
		background-color: #fe0000;
	}
	.paper_kyodai .answer_container .resultbox ul li.b .ans .bg{
		background-color: #004acf;
	}
	.paper_kyodai .answer_container .resultbox ul li.c .ans .bg{
		background-color: #00b500;
	}
	.paper_kyodai .answer_container .resultbox ul li.d .ans .bg{
		background-color: #ffbe00;
	}
	.paper_kyodai .answer_container .resultbox ul li .percent{
		left: 13px;
		top: -1px;
		width: 18px;
		height: 12px;
		background-size: 18px 1212px;
		background-position: 0 -1188px;
	}
	.paper_kyodai .answer_container .resultbox ul li .percent:after{
		background: url(../images/obj-percent-pc.png) no-repeat;
		background-size: cover;
		width: 7.5px;
		height: 9px;
		right: -6px;
		top: 2px;
	}
	.paper_kyodai .answer_container .resultbox ul li .txt{
		left: 43px;
		top: 2px;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: 260px 1084px;
		width: 83px;
		height: 8px;
	}
	.paper_kyodai .answer_container .resultbox ul li.a .txt{
		background-position: 0 -284px;
	}
	.paper_kyodai .answer_container .resultbox ul li.b .txt{
		background-position: 0 -292px;
	}
	.paper_kyodai .answer_container .resultbox ul li.c .txt{
		background-position: 0 -300px;
	}
	.paper_kyodai .answer_container .resultbox ul li.d .txt{
		background-position: 0 -308px;
	}
		
}




/* ----btn_past---- */
.paper_kyodai .answer_container .btn_past{
	display: block;
	background: #000;
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 1;
	width: 280px;
	height: 33px;
}
.paper_kyodai .answer_container .btn_past:before{
	content: "";
	position: absolute;
	left: -18px;
	top: 0px;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 33px 18px;
	border-color: transparent transparent #000000 transparent;
}
.paper_kyodai .answer_container .btn_past .txt{
	display: block;
	background: url(../images/btn-past-pc.png) no-repeat;
	width: 215px;
	height: 15px; 
	text-indent: -9999px;
	position: absolute;
	top: 9px;
	left: 18px;
}
.paper_kyodai .answer_container .btn_past .arrow1,
.paper_kyodai .answer_container .btn_past .arrow2{
	display: block;
	background: url(../images/arrow1-pc.png) no-repeat;
	width: 5px;
	height: 14px; 
	text-indent: -9999px;
	position: absolute;
	top: 10px;
	right: 30px;	
}
.paper_kyodai .answer_container .btn_past .arrow2{
	right: 26px;
}
.paper_kyodai .answer_container .btn_past:hover .txt{
	opacity: 0.85;
}
.paper_kyodai .answer_container .btn_past:hover .arrow1{
	opacity: 0.85;
	-webkit-animation: btn_past_arrow1 700ms infinite;
	        animation: btn_past_arrow1 700ms infinite;
}
.paper_kyodai .answer_container .btn_past:hover .arrow2{
	opacity: 0.85;
	-webkit-animation: btn_past_arrow2 700ms infinite;
	        animation: btn_past_arrow2 700ms infinite;
}
@-webkit-keyframes btn_past_arrow1{
	30%{
		right: 30px;
    }
  	70%{
		right: 28px;
  	}
  	100%{
		right: 28px;
  	}
}
@keyframes btn_past_arrow1{
	30%{
		right: 30px;
    }
  	70%{
		right: 28px;
  	}
  	100%{
		right: 28px;
  	}
}
@-webkit-keyframes btn_past_arrow2{
	0%{
		right: 26px;
    }
  	40%{
		right: 24px;
  	}
  	100%{
		right: 24px;
  	}
}
@keyframes btn_past_arrow2{
	0%{
		right: 26px;
    }
  	40%{
		right: 24px;
  	}
  	100%{
		right: 24px;
  	}
}

/* ====== SP ======= */
@media screen and (max-width: 768px){
	.paper_kyodai .answer_container .btn_past{
		right: 0px;
		bottom: 0px;
		z-index: 1;
		width: 100%;
		height: 40px;
	}
	.paper_kyodai .answer_container .btn_past:before{
		display: none;
	}
	.paper_kyodai .answer_container .btn_past .txt{
		display: block;
		background: url(../images/btn-past-sp.png) no-repeat;
		background-size: cover;
		width: 141px;
		height: 10px; 
		position: absolute;
		top: 15px;
		left: auto;
		right: 28px;
	}
	.paper_kyodai .answer_container .btn_past .arrow1,
	.paper_kyodai .answer_container .btn_past .arrow2{
		display: block;
		background: url(../images/arrow1-sp.png) no-repeat;
		background-size: cover;
		width: 5px;
		height: 13px; 
		text-indent: -9999px;
		position: absolute;
		top: 14px;
		right: 12px;	
	}
	.paper_kyodai .answer_container .btn_past .arrow2{
		right: 8px;
	}
	
	.paper_kyodai .answer_container .btn_past:hover .txt{
		opacity: 1;
	}
	.paper_kyodai .answer_container .btn_past:hover .arrow1{
		opacity: 1;
		-webkit-animation: none;
		animation: none;
	}
	.paper_kyodai .answer_container .btn_past:hover .arrow2{
		opacity: 1;
		-webkit-animation: none;
		animation: none;
	}
}


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

* paper_mogal_wrap.css

*********************************************************************
*/
#paper_mogal_wrap .paper_mogal_bg,
#paper_mogal_wrap .paper_mogal_content,
#paper_mogal_wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
}

#paper_mogal_wrap {
}

#paper_mogal_wrap .paper_mogal_bg {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background: #000\9;
  background: rgba(0,0,0,.7);
  text-indent: -9999px;
}

#paper_mogal_wrap .paper_mogal_content  {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2100;
  display: block;
}

#paper_mogal_wrap .paper_mogal_inner{
  position: relative;
  z-index: 1;
}

/* ====== SP ======= */
@media screen and (max-width: 768px){
	#paper_mogal_wrap .paper_mogal_bg,
	#paper_mogal_wrap .paper_mogal_content,
	#paper_mogal_wrap {
	}
	
	#paper_mogal_wrap {
	}
	
	#paper_mogal_wrap .paper_mogal_bg {
	}
	
	#paper_mogal_wrap .paper_mogal_content  {
		position: absolute;
	}
	
	#paper_mogal_wrap .paper_mogal_inner{
		height: 100%;
	}
		
}