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

#contents-body {
	padding: 0;
}
.contents_inner {
	width: 100%;
	overflow: hidden;
}
.contents_inner .mobile {
	display: none;
}
.contents_inner .lay_link_bar {
	position: absolute;
	top: -99999px;
}
/*============================
#container_main
============================*/
#container_main {
}
#container_main .copy_02 .box_k .mobile {
	position: absolute;
	top: -99999px;
}
#container_main .copy_01 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	padding-bottom: 10%;
}
#container_main .copy_01 .box_k {
	position: absolute;
	top: 32px;
	left: 18px;
}
#contents-body #container_main .copy_01 .txt_k {
	position: absolute;
	top: 31px;
	left: 32px;
	-ms-transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}
#container_main .copy_01 .lay_green {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#container_main .copy_01 .txt_02 {
	position: absolute;
	/* top: 124px; */
	left: 611px;
	width: 136px;
}
#container_main .copy_01 .txt_03 {
	position: absolute;
	/* top: 124px; */
	width: 150px;
	left: 704px;
}
#container_main {
	position: relative;
	padding: 0;
	margin: 0;
	top: -99999px;
	height: 0;
	padding: 0 0 600px 0;
}
#container_main .img_change {
	visibility: hidden;
}
#container_thumb {
	position: relative;
	padding: 0px 0 0;
}
#container_thumb h3,
#container_grade h3 {
	font-size: 128.6%;
	height: 53px;
	position: relative;
	z-index: 2;
	width: 291px;
	margin: 0 auto 40px;
	text-align: center;
	line-height: 53px;
	font-weight: 400;
	overflow: hidden;
}
#container_thumb h3 .txt_01,
#container_grade h3 .txt_02 {
	position: relative;
	z-index: 2;
}
#container_thumb h3 .dot,
#container_grade h3 .dot {
	position: absolute;
	top: -1px;
	left: 0;
	overflow: hidden;
}
#container_thumb h3 .dot img,
#container_grade h3 .dot img {
	display: block;
}
#container_thumb h3 #dot_green,
#container_grade h3 .dot_green {
	z-index: 1;
}
#container_main .copy_02 {
	position: absolute;
	z-index: 2;
	height: 93px;
	width: 400px;
	margin: 0 auto 0;
	top: 105px;
	left: 439px;
}
#container_main .copy_02 img {
	position: absolute;
	top: 0;
}
#container_main .copy_01 .txt_01 {
	left: 517px;
	position: absolute;
	width: 106px;
}
#container_main .copy_01 .txt_01,
#container_main .copy_01 .txt_02,
#container_main .copy_01 .txt_03 {
	top: 77px;
}
#container_main .copy_01 img {
	position: relative;
	display: block;
	float: left;
}
#container_main .copy_02 .txt_02 {
	right: 232px;
	width: 168px;
}
#container_main .copy_02 .box_k {
	top: 0;
	left: 180px;
	position: absolute;
}
#container_main .copy_02 .box_k .lay_green {
	position: relative;
}
#container_main .copy_02 .box_k .lay_red {
	position: absolute;
	top: 0;
	left: 0;
	/* opacity: 0; */
	visibility: hidden;
	/* width: 36px; */
}
#container_main .copy_02 .box_k img {
	display: block;
	position: relative;
	width: 36px;
}
#container_main .copy_02 .txt_04 {
	top: 0;
	left: 233px;
	width: 167px;
}
#container_thumb .container_thumb {
	text-align: center;
	margin: 0 -30px 74px;
}
#container_thumb .box_thumb {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 25px;
}
#container_thumb .box_play {
	position: absolute;
	top: 78px;
	left: 165px;
}
#container_thumb .box_play .lay_green {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}
#container_thumb .box_play .lay_red {
	position: relative;
	top: -99999px;
}
#container_thumb .box_thumb a {
	position: relative;
	display: block;
}
#container_thumb .box_thumb p {
	line-height: 1.714;
	margin: 18px 0 0;
	letter-spacing: 0.18em;
	font-weight: bold;
}
#container_main .box_img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	top: 0;
}
#container_main .box_img img {
	max-width: 1280px;
	/* width: 129.8%; */
	/* left: -14.7%; */
	/* top: 0; */
	position: relative;
	/* padding: 3.3% 0 0; */
}
.container_bnr {
	margin: 81px -30px 79px;
	position: relative;
	text-align: center;
	z-index: 1;
}
.container_bnr a {
	margin: 0 20px 0;
	background: #fff;
	display: inline-block;
}
.container_bottom_bnr {
	margin: 82px 0 100px 0;
}
#container_sns {
	position: absolute;
	top: -28px;
	right: 0;
	z-index: 1;
	/* opacity: 0; */
}
#container_sns li {
	float: right;
	list-style: none;
	margin: 0 0 0 12px;
}

/*============================
#img_green
============================*/
#img_green {
}

/*============================
#img_red
============================*/
#container_main #img_green {
	width: 0;
}
#container_main #img_red {
	width: 0;
}

/*============================
#popup
============================*/
#popup {
 	position: absolute;
 	top: -99999px;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 9999;
 	display: none;
}
#popup iframe {
 	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}
#popup .bg {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: #fff;
 	opacity: 0.8;
 	/* z-index: 100; */
}
#popup .container {
	position: relative;
	margin:0 auto;
	max-width: 1220px;
}
#popup .container iframe {
}
#popup .container_movie {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	background: #000;
}
#popup .container_movie iframe {
}
#popup .btn_close {
	position: absolute;
	top: -100px;
	right: 0;
	width: 80px;
}
#popup .btn_close img {
	display: block;
}
#popup .btn_close span {
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	display: block;
}
#container_01,
#container_02,
#container_03 {
	position: relative;
}
#container_01 .lay_red,
#container_02 .lay_red,
#container_03 .lay_red {
	position: relative;
	overflow: hidden;
}
#container_01 .lay_green,
#container_02 .lay_green,
#container_03 .lay_green {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 0;
}
#container_01 .lay_green,
#container_02 .lay_green {
	z-index: 1;
	width: 100%;
}
#container_01 .inner img,
#container_02 .inner img,
#container_03 .inner img {
	max-width: 1280px;
}
#container_02 .car {
	position: absolute;
	top: 256px;
	left: 326px;
}
#container_02 .car img {
	position: absolute;
	top: 0;
	max-width: 638px;
	left: 0;
}
#container_02 .loading {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
#container_02 .loading .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.6;
}
.container_btn {
	text-align: center;
	margin: 45px -50px 79px;
	background: #fff;
	padding: 35px 0 0;
}
.container_btn a {
	margin: 0 20px 0;
	position: relative;
	display: inline-block;
}
.container_btn a .lay_red {
	position: absolute;
	top: -99999px;
	left: 0;
}
.container_btn a .lay_green {
	position: relative;
	-ms-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	visibility: hidden;
}
/*============================
#container_grade
============================*/
#container_grade {
	padding: 0 0 5.3%;
}
#container_grade .box_grade {
	position: relative;
	margin: 0 0 0;
	float: left;
	letter-spacing: 0.04em;
}
#container_grade .box_grade_02 {
	float: right;
}
#container_grade .grade_example {
	position: relative;
	z-index: 2;
	width: 620px;
}
#container_grade .grade_example_head {
	font-size: 214.29%;
	font-weight: bold;
	line-height: 1.4;
	padding: 8.8% 0 4.9%;
	text-align: center;
	/* letter-spacing: 0.04em; */
}
#container_grade .grade_example_color {
	margin: 0 0 3.1% 17.6%;
}
#container_grade .grade_example_info {
	width: 82.5%;
	margin: 0 auto 0;
}
#container_grade .grade_example_info_head {
	margin: 0 0 0.6%;
}
#container_grade .type_name {
	font-size: 128.57%;
	line-height: 1.67;
}
#container_grade .grade_example_price {
	float: left;
	width: 64%;
}
#container_grade .grade_example_price dt {
	line-height: 2.14;
	margin: 2.1% 0 -1.2%;
	white-space: nowrap;
}
#container_grade .grade_example_price dd {
	font-size: 160.71%;
	font-weight: bold;
}
#container_grade .value {
	font-size: 200%;
	padding: 0 0.2em 0 0;
	letter-spacing: 0;
}
#container_grade .grade_example_sfc {
	float: left;
	width: 35.9%;
}
#container_grade .grade_example_sfc dt {
	text-indent: -99999px;
	background:url(/pages/contents/passo/cp/image/top/icon_grade_jc08_pc.png) no-repeat;
	height: 0;
	padding-bottom: 17.7%;
	width: 95.85%;
	color: transparent;
}
#container_grade .grade_example_sfc dd {
	font-weight: bold;
	font-size: 160.71%;
	/* line-height: 1.5; */
}
#container_grade .grade_example_info_foot {
	clear: both;
	margin: 21.9% 0 0;
	padding: 0 0 9%;
}
.section #container_grade .btn_text {
	text-decoration: none;
	color: #fff;
	font-size: 128.57%;
}
.section #container_grade .btn_text:hover span {
	filter: alpha(opacity=70);
	opacity: 0.7;
}
#container_grade .inner {
	position: relative;
}
#container_grade .btn_text .lay_red {
	background: #aa1f24;
	display: block;
	text-align: center;
	line-height: 3.5;
	position: absolute;
	top: -99999px;
	left: 0;
	width: 100%;
}
#container_grade .btn_text .lay_green {
	background:#115220;
	display: block;
	text-align: center;
	line-height: 3.5;
	position: relative;
	-ms-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	visibility: hidden;
}
#container_grade .btn_text .lay_green:after,
#container_grade .btn_text .lay_red:after {
	content: "";
	background: url(/pages/contents/passo/cp/image/common/icon_btn_text_pc.png) no-repeat center 0.26em;
	width: 1em;
	display: inline-block;
	height: 1em;
	margin-left: 0.5em;
	line-height: 1;
}
#container_grade .box_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#container_grade .box_bg .lay_red {
	position: absolute;
	top :0;
	left: 0;
	overflow: hidden;
}
#container_grade .box_bg .lay_green {
	position: relative;
	overflow: hidden;
	height: 100%;
}

@media screen and (max-width: 1279px) {
	#contents-body img {
		width: 100%;
	}
	#container_main {
		padding: 0% 0 46.91% 0;
		margin: 0;
	}
	#container_main .box_img .inner {
		position: relative;
	}
	#container_main .copy_01 img {
		width: auto;
		height: 100%;
	}
	#container_main .copy_01 .box_k img,
	#contents-body #container_main .copy_01 .txt_k {
		width: 100%;
		height: auto;
	}
	#container_main .copy_01 .txt_01 {
		width: 10%;
		height: 9.42%;
		/* top: 97%; */
		left: 40.42%;
	}
	#container_main .copy_01 .txt_01,
	#container_main .copy_01 .txt_02,
	#container_main .copy_01 .txt_03 {
		top: 60%;
	}
	#container_main .copy_01 .box_k {
		top: 145%;
		width: 11%;
		left: 14%;
	}
	#container_main .copy_02 .box_k img {
		width: 100%;
	}
	#contents-body #container_main .copy_01 .txt_k {
		top: 139%;
		width: 43.1%;
		left: 25%;
	}
	#container_main .copy_01 .txt_02 {
		width: 10%;
		height: 17.22%;
		/* top: 97%; */
		left: 47.77%;
	}
	#container_main .copy_01 .txt_03 {
		width: 10%;
		height: 17.22%;
		/* top: 97%; */
		left: 55.04%;
	}
	#container_main .copy_02 {
		width: 100%;
		top: 17.5%;
		left: 0;
	}
	#container_main .copy_02 .txt_02 {
		width: 13.14%;
		top: 0;
		right: 52.6%;
	}
	#container_main .copy_02 .box_k {
		width: 2.81%;
		top: 0;
		left: 48.3%;
	}
	#container_main .copy_02 .txt_04 {
		width: 13.06%;
		top: 0;
		left: 52.5%;
	}
	#container_thumb {
		padding: 5.7% 0 0 0;
	}
	#container_thumb h3,
	#container_grade h3 {
		width: 22.77%;
		height: 0;
		padding-bottom: 4.15%;
		line-height: 1;
		margin-bottom: 3%;
	}
	#container_thumb h3 .dot,
	#container_grade h3 .dot {
		height: 100%;
		width: auto;
	}
	#container_thumb h3 .txt_01,
	#container_grade h3 .txt_02 {
		padding-top: 7%;
		display: inline-block;
	}
	#container_thumb .container_thumb {
		margin: 0 -10% 0;
		padding: 0 0 6.1%;
	}
	#container_thumb .box_thumb {
		width: 25.6%;
		margin: 0 1.6%;
	}
	#container_thumb .box_thumb img {
		width: 25%;
	}
	#container_thumb .box_play img {
		width: 100%;
	}
	#container_thumb .box_play {
		width: 16.05%;
		top: 36.6%;
		left: 41.3%;
	}
	.container_bnr {
		margin: 6.4% -10% 6.4%;
	}
	.container_bnr a {
		width: 18.86%;
		margin: 0 1.31%;
	}
	#container_02 .car {
		width: 49.93%;
		top: 29.16%;
		left: 26.06%;
	}
	#container_02 .lay_green .car {
		top: 29.24%;
	}
	#container_02 .inner {
		position: relative;
	}
	.container_btn {
		margin: 0.5% -10% 6.3%;
		padding: 0;
	}
	.container_btn a {
		width: 40.39%;
		margin: 0px 1.3%;
	}
	.container_bottom_bnr {
		margin: 6.5% 0 7.8%;
	}
	#container_sns {
		top: 0;
		right: 1.6%;
		z-index: 1;
		width: 50%;
		padding: 1.29% 0 0;
	}
	#container_sns li {
		margin: 0 0 0 2%;
		width: 7.3%;
	}
	#container_grade .box_grade {
		width: 48.48%;
	}
	#container_grade .grade_example {
		width: 100%;
	}
	#container_grade .grade_example_color {
		width: 64.68%;
	}
	#container_grade .grade_example_sfc dt {
		background-size: 100% auto;
	}
	#container_grade .btn_text .lay_green:after, #container_grade .btn_text .lay_red:after {
		background-size: 100% auto;
		width: 0.78em;
	}
	#container_grade .box_bg .lay_red {
		/* background:url(../image/top/grade_bg_b_red_01_sp.png) no-repeat 0 bottom; */
		/* background-size: 100% auto; */
		height: 100%;
	}
}
@media screen and (max-width: 1220px) {
	#popup .btn_close {
		width: 6.5%;
		top: 0;
		-ms-transform: translateY(-120%);
		-webkit-transform: translateY(-120%);
		transform: translateY(-120%);
	}
}
@media screen and (max-width: 768px) {
	#container_thumb {
		font-size: 8.4px;
	}
}
@media screen and (max-width: 767px) {
	.desktop {
		display: none;
	}
	.contents_inner .mobile {
		display: block;
	}
	#contents-body .section {
		margin: 0;
	}
	#container_main {
		padding: 0% 0 106.26% 0;
		margin: 0;
	}
	#container_main .copy_01 img {
		width: auto;
		height: 100%;
	}
	#container_main .copy_01 .box_k img,
	#contents-body #container_main .copy_01 .txt_k {
		width: 100%;
		height: auto;
	}
	#container_main .copy_01 .txt_01 {
		width: 20%;
		height: 23.52%;
		top: 125%;
		left: 25.8%;
	}
	#container_main .copy_01 .box_k {
		top: 145%;
		width: 11%;
		left: 12.3%;
	}
	#contents-body #container_main .copy_01 .txt_k {
		top: 149.4%;
		width: 39.1%;
		left: 23.1%;
	}
	#container_main .copy_01 .txt_02 {
		width: 20%;
		height: 31.52%;
		top: 125%;
		left: 44.5%;
	}
	#container_main .copy_01 .txt_03 {
		width: 20%;
		height: 31.52%;
		top: 125%;
		left: 62.6%;
	}
	#container_main .copy_02 {
		width: 100%;
		top: 16.9%;
		left: 0;
	}
	#container_main .copy_02 .txt_02 {
		width: 32.99%;
		top: 0;
		right: 56.4%;
	}
	#container_main .copy_02 .box_k {
		width: 7.02%;
		top: 0;
		left: 46.1%;
	}
	#container_main .copy_02 .txt_04 {
		width: 32.86%;
		top: 0;
		left: 56.5%;
	}
	#container_thumb {
		padding: 21.9% 0 2.9% 0;
	}
	#container_thumb h3,
	#container_grade h3 {
		width: 82.54%;
		height: 0;
		padding-bottom: 13.18%;
		line-height: 1;
		margin-bottom: 9.5%;
		font-size: 257.14%;
	}
	#container_thumb h3 .dot,
	#container_grade h3 .dot {
		height: 100%;
		width: auto;
		display: block;
		top: 0;
	}
	#container_thumb h3 .dot img,
	#container_grade h3 .dot img {
		height: 100%;
		width: auto;
	}
	#container_thumb h3 .txt_01,
	#container_grade h3 .txt_02 {
		padding-top: 5.3%;
		display: inline-block;
		/* font-size: 257.14%; */
	}
	#container_thumb .container_thumb {
		margin: 0;
		padding: 0;
	}
	#container_thumb .box_thumb {
		width: 82.8%;
		margin: 0 0 8.1%;
	}
	#container_thumb .box_thumb img {
		width: 25%;
		display: block;
		float: left;
	}
	#container_thumb .box_play img {
		width: 100%;
	}
	#container_thumb .box_play {
		width: 16.05%;
		top: 36.6%;
		left: 41.3%;
	}
	#container_thumb .box_thumb p {
		font-size: 188.29%;
		margin: 5.5% 0 0;
	}
	.container_bnr {
		margin: 12.9% 0% 9.9%;
	}
	.container_bnr a {
		width: 36%;
		margin: 0 2.1% 4.2%;
	}
	#container_02 .car,
	#container_02 .lay_green .car {
		width: 86.93%;
		top: -99999px;
		left: 10.06%;
	}
	#container_02 .inner {
		position: relative;
	}
	.container_btn {
		margin: -2.2% 0% 9.2%;
		padding: 0;
	}
	.container_btn a {
		width: 82.1%;
		margin: 0px 0% 4.1%;
	}
	.container_bottom_bnr {
		margin: 12.8% auto 12.8%;
		width: 83.3%;
	}
	#container_sns {
		top: 0;
		right: 34.4%;
		z-index: 1;
		width: 100%;
		padding: 2.9% 0 0;
	}
	#container_sns li {
		margin: 0 0 0 3.6%;
		width: 8.5%;
	}
	#popup .btn_close {
		width: 6.5%;
		top: 0;
		-ms-transform: translateY(-120%);
		-webkit-transform: translateY(-120%);
		transform: translateY(-120%);
	}
	#container_grade .box_grade {
		float: none;
		margin: 0 auto 9%;
		width: 82.4%;
	}
	#container_grade .grade_example_head {
		font-size: 257.14%;
		padding: 9.5% 0 4.2%;
	}
	#container_grade .grade_example_color {
		width: 73.42%;
		margin: 0 0 3.2% 13.4%;
	}
	#container_grade .grade_example_info_head {
		text-align: center;
		margin: 0 0 2.1%;
	}
	#container_grade .type_name {
		font-size: 185.71%;
	}
	#container_grade .grade_example_price dt {
		font-size: 142.86%;
		margin: -1.4% 0 -1.2%;
	}
	#container_grade .grade_example_price dd,
	#container_grade .grade_example_sfc dd {
		font-size: 153.57%;
	}
	#container_grade .value {
		font-size: 200%;
	}
	#container_grade .grade_example_info {
		width: 85%;
	}
	#container_grade .grade_example_price {
		width: 67.4%;
		letter-spacing: 0;
	}
	.section #container_grade .btn_text {
		font-size: 192.86%;
	}
	#container_grade .btn_text .lay_red,
	#container_grade .btn_text .lay_green {
		line-height: 3.07;
	}
	#container_grade .btn_text .lay_red:after,
	#container_grade .btn_text .lay_green:after {
		background: url(/pages/contents/passo/cp/image/common/icon_btn_text_sp.png) no-repeat center center;
		background-size: 100% auto;
		height: 0;
		padding-bottom: 14.9%;
		vertical-align: top;
		width: 1em;
	}
	#container_grade {
		padding-bottom: 3.6%;
	}
	#container_grade .grade_example_sfc {
		width: 32.22%;
	}
	#container_grade .bottom_line {
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#container_grade .grade_example_info_foot {
		padding-bottom: 8%;
	}
	#container_grade .bottom_line {
		position: absolute;
	}
}
@media screen and (max-width:360px) {
	#container_grade .grade_example_price {
		float: none;
		padding-bottom: 2%;
	}
}
/* safari */
#container_main .copy .lay_green {
	-webkit-transform: rotate(180deg) translateZ(1px);
}
#container_main .copy .box_k {
	-webkit-perspective: 99999px;
}
#knTrace {
	margin-top: -15px;
	/* margin-left: -136px; */
}