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


/* BOX1〜 backgorund
------------------------------------------------------------------------------------*/
/* PC */
@media(min-width:768px) {
	#contents #p01 { background:url(../../img/pc/backB.gif) no-repeat center 16px; }
	#contents #p02 { background:url(../../img/pc/backG.gif) no-repeat center 80px; }
	#contents #p03 { background:url(../../img/pc/backY.gif) no-repeat center 445px; }
	#contents #p08 { background:url(../../img/pc/backY.gif) no-repeat center 16px; }
	#contents #p09 { background:url(../../img/pc/backY.gif) no-repeat center 16px; }
	#contents #p10 { background:url(../../img/pc/backY.gif) no-repeat center 120px; }
	
	/*#contents #p03 { background:url(../../img/pc/backY.gif) no-repeat center 80px; }*/
	
	/*
	#contents #p02 { background:url(../../img/pc/backY.gif) no-repeat center 80px , url(../../img/pc/backY.gif) no-repeat center 782px; }
	#contents #p04 { background:url(../../img/pc/backG.gif) no-repeat center 80px; }
	#contents #p05 { background:url(../../img/pc/backB.gif) no-repeat center 80px; }
	*/
	
	
	/* LCRBOX
	---------------------------*/
	#contents .LCRBOX {
		width:1008px;
		margin:0px auto 0px;
		padding:0px 16px;
	}
	
	#contents .LCRBOX div {
		width:468px;
		float:left;
	}
	
	#contents .LCRBOX div:nth-of-type(1) { margin-right:72px; }
	#contents .LCRBOX div:nth-of-type(3) { margin-left:270px; }
}
@media only screen and (min-width:768px) and (-webkit-min-device-pixel-ratio:2),
       only screen and (min-width:768px) and (min--moz-device-pixel-ratio:2),
       only screen and (min-width:768px) and (-o-min-device-pixel-ratio:2/1),
       only screen and (min-width:768px) and (min-device-pixel-ratio:2)
{
	#contents #p01 { background:url(../../img/pc/backB@2x.gif) no-repeat center 16px; background-size:1264px;  }
	#contents #p02 { background:url(../../img/pc/backG@2x.gif) no-repeat center 80px; background-size:1264px;  }
	#contents #p03 { background:url(../../img/pc/backY@2x.gif) no-repeat center 445px; background-size:1264px;  }
	#contents #p08 { background:url(../../img/pc/backY@2x.gif) no-repeat center 16px; background-size:1264px;  }
	#contents #p09 { background:url(../../img/pc/backY@2x.gif) no-repeat center 16px; background-size:1264px;  }
	#contents #p10 { background:url(../../img/pc/backY@2x.gif) no-repeat center 120px; background-size:1264px;  }
	
	/*#contents #p03 { background:url(../../img/pc/backY@2x.gif) no-repeat center 80px; background-size:1264px;  }*/
	
	/*#contents #p01 { background:url(../../img/pc/backY@2x.gif) no-repeat center 80px , background:url(../../img/pc/backY@2x.gif) no-repeat center 782px; background-size:1264px; }*/	
	/*
	#contents #p03 { background:url(../../img/pc/backG@2x.gif) no-repeat center 90px; background-size:1264px; }
	#contents #p04 { background:url(../../img/pc/backG@2x.gif) no-repeat center 80px; background-size:1264px; }
	#contents #p05 { background:url(../../img/pc/backB@2x.gif) no-repeat center 80px; background-size:1264px; }
	*/
}


/* 個別設定
------------------------------------------------------------------------------------*/
/* PC */
@media(min-width:768px) {
	#contents #p01 img {
		text-align: center;
		margin-top: 26px;
	}
		
	#contents #p03 a {
		width:712px;
		height:62px;
		background-color: #fff;
		background-position:center center , 684px center;
		background-repeat:no-repeat , no-repeat;
		border-radius:32px;
		display:block;
		text-indent:-9999px;
		outline:none;
		margin:62px auto 0px;
		margin:62px auto 40px;
		margin:62px auto 24px;
		float: none;
	}
	
	#contents #p03 a:first-of-type {
		background-image:url(../img/pc/btn_01.gif) , url(../../../common/img/pc/allowR.png); background-size: 257px , 12px;
	}
	#contents #p03 a:last-of-type {
		background-image:url(../img/pc/btn_02.gif) , url(../../../common/img/pc/allowR.png); background-size: 247px , 12px;
	}
	
	/* ディスク紹介 */
	#contents #p02 div div {
		height: 504px; /*  下のマージン44pxを足す */
		background-size: 1008px;
		position: relative;
		margin: 138px 0px 44px 0px;
	}
	#contents #p02 div div:first-of-type {
		margin-top: 90px;
	}
	#contents #p02 div div img {
		position: absolute;
		top: 0px;
		margin: 0px;
	}
	
	/* カイオーガ・グラードン */
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(1) {
		/* カイオーガCG */
		width: 415px;
		top: 148px;
		left: 9px;
		z-index: 1;
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(2) {
		/* グラードンCG */
		width: 338px;
		top: 57px;
		left: 587px;
		z-index: 1;
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(3) {
		/* 背景 */
		width: 1008px;		
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(4) {
		/* カイオーガディスク */
		width: 375px;
		top: 0px;
		left: 249px;
		z-index: 1;
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(5) {
		/* グラードンディスク */
		width: 375px;
		top: 268px;
		left: 385px;
		z-index: 1;
	}
	
	/* リザードン */
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(1) {
		/* CG */
		width: 593px;
		top: 0px;
		left: 180px;
		z-index: 1;
	}	
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(2) {
		/* 背景 */
		width: 1008px;		
	}
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(3) {
		/* ディスク左 */
		width: 367px;
		top: 190px;
		left: 91px;
		z-index: 1;
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
	}
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(4) {
		/* ディスク右 */
		width: 367px;
		top: 190px;
		left: 536px;
		z-index: 1;
		-webkit-transform-origin: right bottom;
		transform-origin: right bottom;
	}
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(5) {
		/* テキスト */
		width: 528px;
		top: 406px;
		left: 240px;
		z-index: 1;
	}
	
	#contents #p05_3 {
		width: 468px;
		width: 488px;
		margin-left: 270px;
		margin-left: 260px;
	}
	#contents #p05_3 img {
		width: 468px;
		margin-left: 20px;
	}
	
	#contents #p08 img {
		text-align: center;
		margin-top: 26px;
	}
	
	#contents #p08 a {
		width:712px;
		height:62px;
		background-image:url(../img/pc/btn_03.gif) , url(../../../common/img/pc/allowR.png);
		background-size: 410px , 12px;
		background-color: #fff;
		background-position:center center , 684px center;
		background-repeat:no-repeat , no-repeat;
		border-radius:32px;
		display:block;
		text-indent:-9999px;
		outline:none;
		margin:62px auto 0px;
		margin:62px auto 40px;
		margin:62px auto 24px;
		float: none;
	}
	
	#contents #p09 p:first-of-type {
		font-size:20px;
		font-size:2rem;
		font-weight: bold;
		line-height: 100%;
		margin-bottom: 16px;
	}
	
	#contents #p09 p:first-of-type:before { content: "ー "; }
	#contents #p09 p:first-of-type:after { content: " ー"; }
	
	#contents #p09 img {
		text-align: center;
		margin-top: 26px;
	}
	
	#contents #p09 a {
		width:712px;
		height:62px;
		background-image:url(../img/pc/btn_03.gif) , url(../../../common/img/pc/allowR.png);
		background-size: 410px , 12px;
		background-color: #fff;
		background-position:center center , 684px center;
		background-repeat:no-repeat , no-repeat;
		border-radius:32px;
		display:block;
		text-indent:-9999px;
		outline:none;
		margin:62px auto 0px;
		margin:62px auto 40px;
		margin:62px auto 24px;
		float: none;
	}
	
	#contents #p10 img {
		text-align: center;
		margin-top: 26px;
	}
	
	#contents #p10 li {
		text-align: center;
		margin-top: 6px;
	}
}

/* スマホ */
@media(max-width:767px) {
	#contents #p01 div {
		background: url(../../img/sp/backB.jpg) no-repeat 0px 20%;
		background-size :contain;
	}
	
	#contents #p02 div div {
		position: relative;
		margin: 38px 0px 16px;
		padding-top: 86.71%;
	}
	#contents #p02 div div:first-of-type {
		background: url(../../img/sp/backG.jpg) no-repeat;
		background-size :contain;
		background-position: 0px 55%; 
	}
	#contents #p02 div div img {
		position: absolute;
		top: 0px;
		margin: 0px;
	}
	
	/* カイオーガ・グラードン */
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(1) {
		/* カイオーガCG */
		width: 60.62%;
		top: 1.8%;
		left: 7.18%;
		z-index: 1;
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(2) {
		/* グラードンCG */
		width: 49.68%;
		top: 3.96%;
		left: 40.62%;
		z-index: 1;
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(3) {
		/* 背景 */
		width: 100%;
		z-index: 1;
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(4) {
		/* カイオーガディスク */
		width: 42.34%;
		top: 69%;
		left: 3.906%;
	}
	#contents #p02 div div:nth-of-type(1) img:nth-of-type(5) {
		/* グラードンディスク */
		width: 42.34%;
		top: 69%;
		left: 53.75%;
	}
	
	/* リザードン */
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(1) {
		/* CG */
		width: 83.75%;
		top: 0;
		left: 0;
	}	
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(2) {
		/* 背景 */
		width: 100%;
		z-index: 1;
	}
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(3) {
		/* ディスク左 */
		width: 41.09%;
		top: 66.12%;
		left: 11.56%;
		z-index: 1;
		-webkit-transform-origin: left top;
		transform-origin: left top;
	}
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(4) {
		/* ディスク右 */
		width: 41.09%;
		top: 66.12%;
		left: 47.18%;
		z-index: 1;
		-webkit-transform-origin: right top;
		transform-origin: right top;
	}
	#contents #p02 div div:nth-of-type(2) img:nth-of-type(5) {
		/* テキスト */
		width: 76.4%;
		top: 50.99%;
		left: 11.71%;
		z-index: 1;
	}
	
	#contents #p03 {
		background: url(../../img/sp/backY.jpg) no-repeat;
		background-size :contain;
		background-position: 0px 50%;
	}
	
	#contents #p03 a {
		width:95%;
		height:36px;
		background-color:#ffffff;	
		background-position:center center , right center;
		background-repeat:no-repeat , no-repeat;
		border-color:#2d4473;
		border-style:solid;
		border-width:2px;
		border-radius:32px;
		display:block;
		text-indent:-9999px;
		outline:none;
		margin:0px auto 32px;
		margin:28px auto 40px;
	}
	
	#contents #p03 a:first-of-type {
		background-image:url(../img/sp/btn_01.gif) , url(../../../common/img/sp/allowR.png); background-size: 183px , 18px;
	}
	#contents #p03 a:last-of-type {
		background-image:url(../img/sp/btn_02.gif) , url(../../../common/img/sp/allowR.png); background-size: 176px , 18px;
	}
	
	#contents #p08 div {
		background: url(../../img/sp/backY.jpg) no-repeat 0px 20%;
		background-size :contain;
	}
	
	#contents #p08 a {
		width:95%;
		height:36px;
		background-color:#ffffff;	
		background-image:url(../img/sp/btn_03.gif) , url(../../../common/img/sp/allowR.png); background-size:237px , 18px;
		background-position:center center , right center;
		background-repeat:no-repeat , no-repeat;
		border-color:#2d4473;
		border-style:solid;
		border-width:2px;
		border-radius:32px;
		display:block;
		text-indent:-9999px;
		outline:none;
		margin:0px auto 32px;
		margin:28px auto 40px;
	}
	
	#contents #p09 p:first-of-type {
		font-size:15px;
		font-size:1.5rem;
		font-weight: bold;
		line-height: 100%;
		text-align: center;
		margin-bottom: 16px;
	}
	
	#contents #p09 p:first-of-type:before { content: "ー "; }
	#contents #p09 p:first-of-type:after { content: " ー"; }
	
	#contents #p09 div {
		background: url(../../img/sp/backY.jpg) no-repeat 0px 20%;
		background-size :contain;
	}
	
	#contents #p09 a {
		width:95%;
		height:36px;
		background-color:#ffffff;	
		background-image:url(../img/sp/btn_03.gif) , url(../../../common/img/sp/allowR.png); background-size:237px , 18px;
		background-position:center center , right center;
		background-repeat:no-repeat , no-repeat;
		border-color:#2d4473;
		border-style:solid;
		border-width:2px;
		border-radius:32px;
		display:block;
		text-indent:-9999px;
		outline:none;
		margin:0px auto 32px;
		margin:28px auto 40px;
	}
	
	#contents #p10 div div {
		background: url(../../img/sp/backY.jpg) no-repeat;
		background-size :contain;
	}
	
	#contents #p10 li {
		line-height:22px;
		line-height:2.2rerm;
		margin: -22px 0px 22px 8px;
	}
}