@charset "utf-8";

a {
	text-decoration: none;
}

/*-------------------------------------------------
-------------------------------------------------
pc
-------------------------------------------------
-------------------------------------------------*/

@media screen and (max-width: 1199px) {
	.breadcrumb {
		max-width: 1000px;
	}
}

@media screen and (min-width: 1200px) {
	.breadcrumb {
		max-width: 1200px;
	}
}

@media screen and (min-width:679px) {

	/*logo breadcrumb*/
	.containerInner {
		background: #eee;
	}
	#sc-header {
		margin-bottom: 0;
	}
	.sp_menu .hnbgr {
		display: none;
	}

	/*global header setting
	---------------------------------------------------*/
	#header_wrap {
		background: #eee;
	}

	/*------------------------------------------------------
	breadcrumb
	------------------------------------------------------*/
	.breadcrumb {
		width: 100%;
		margin: 10px auto 0;
	}
	.breadcrumb ol li {
		list-style-type: none;
		display: inline-block;
		text-indent: 5px;
		font-size: 10px;
	}
	.breadcrumb ol li:after {
		content: ">";
		margin: 0 0 0 10px;
	}
	.breadcrumb ol li.last:after {
		content: "";
		margin: 0;
	}
	.breadcrumb ol li a:link, .breadcrumb ol li a:visited, .breadcrumb ol li a:active {
		text-decoration: underline;
		color: #333;
	}
	.breadcrumb ol li a:hover {
		text-decoration: none;
		color: #333;
	}

	/*///////////// sub menu position //////////////////
	-------------------------------------------------*/
	#model, #model .main_btn img {
		width: calc(140px / 2);
	}
	#model .sub {
		width: 390px;
		height: 126px;
	}
	#grade, #grade .main_btn img {
		width: calc(140px / 2);
	}
	#grade .sub {
		width: 390px;
		height: 250px;
	}
	#grade .sub li.compare {
		position: relative;
		padding: 0;
		text-align: center;
		background-color: #00a0dc;
		background-image: url(/common_lineup/img/arrow/arrow_m_w.png);
		background-position: right 10px center;
		background-repeat: no-repeat;
		background-size: 6px;
		margin-top: 20px;
		font-size: 18px;
	}
	#grade .sub li.compare a {
		display: block;
		color: #fff;
		line-height: 3em;
	}
	#spec, #spec .main_btn img {
		width: calc(140px / 2);
	}
	#spec .sub {
		width: 220px;
		height: 180px;
	}

	/*-------------------------------------------------
	/////////// sub menu position end ////////////////*/
	.rpsv_menu {
		position: relative;
		background: #fff;
	}
	.rpsv_menu .menu_inner {
		width: 100%;
		margin: 0 auto;
	}
	.rpsv_menu .top_logo {
		height: 60px;
		background: #f8f8f8;
	}
	.rpsv_menu .breadcrumb {
		margin: -20px auto 0;
		max-width: 1200px;
		width: 96%;
	}
	.rpsv_menu h1, .rpsv_menu h1 .logo_svg {
		width: 200px;
		height: 60px;
		margin: 0 auto;
	}
	.rpsv_menu h1 .logo_svg #logo_body {
		width: 200px;
	}

	/* set navi menu width */
	.rpsv_menu nav {
		width: 600px;
		height: 50px;
		margin: 0 auto;
	}
	.rpsv_menu nav ul.menu_block {
		display: flex;
		justify-content: space-between;
		position: relative;
		width: 100%;
		top: auto;
		left: auto;
		margin: 0 auto;
		padding: 10px 0;
		max-width: 1200px;
	}
	.rpsv_menu .menu_block .mainmenu {
		position: relative;
	}
	.rpsv_menu nav ul li img {
		height: auto;
		margin: 0;
	}
	.rpsv_menu .main_btn {
		height: 30px;
		overflow: hidden;
	}
	.rpsv_menu a.menu_btn:hover>.main_btn img {
		margin: -32px 0 0;
	}
	.rpsv_menu .submenu .sub {
		display: none;
		background: #fff;
		border: 6px solid #eee;
		border-radius: 5px;
		top: 40px;
		left: auto;
		right: auto;
		bottom: auto;
		z-index: 1000;
		position: absolute;
		box-sizing: content-box;
		box-shadow: 0 4px 6px #ccc;
		padding: 10px 0 0;
	}
	.rpsv_menu .active .menu_arrow {
		content: "";
		border-bottom: 10px solid #eee;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		position: absolute;
		top: 30px;
		left: 0;
		z-index: 1000;
	}
	.rpsv_menu nav .active .submenu .sub {
		display: inline-flex;
		flex-flow: column wrap;
		justify-content: flex-start;
	}
	.rpsv_menu .active .submenu .sub ::after {
		border: none;
	}
	.rpsv_menu .submenu li {
		padding: 10px;
		margin: 0 10px;
	}
	.rpsv_menu .submenu .thumb {
		position: relative;
		margin: 0 0 0 10px;
	}
	.rpsv_menu .submenu .stxt, .rpsv_menu .submenu .thumb {
		display: inline-block;
		width: 160px;
	}

	.rpsv_menu .submenu .stxt, .rpsv_menu .submenu a .stxt {
		color: #333;
		font-weight: bold;
		vertical-align: top;
	}
	.rpsv_menu .submenu .stxt strong {
		display: block;
		margin: 0 0 10px;
		font-size: 1.1em;
	}
	.rpsv_menu .submenu .ptxt {
		font-size: 0.9em;
	}
	.rpsv_menu .submenu a .thumb .price {
		font-size: 1em;
		text-align: center;
		display: inherit;
		font-weight: bold;
		color: #333;
	}
	.rpsv_menu .submenu .thumb img {
		width: 100%;
	}
	.rpsv_menu .submenu .topcontent {
		cursor: pointer;
	}
	.rpsv_menu .borderline {
		border-bottom: 1px solid #eee;
	}
	.rpsv_menu .submenu .photo .thumb::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 24px;
		height: 100%;
		background: url(/common_lineup/img/arrow/arrow_m_w.png) 50% 50% no-repeat rgba(0, 0, 0, 0.6);
		transform: rotate(180deg);
	}
	.rpsv_menu .submenu .photo .thumb::after {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		width: 24px;
		height: 100%;
		background: url(/common_lineup/img/arrow/arrow_m_w.png) 50% 50% no-repeat rgba(0, 0, 0, 0.6);
	}
	.rpsv_menu .submenu .movie .thumb::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background: url(/common_lineup/img/btn/btn_play.png) 50% 50% no-repeat rgba(0, 0, 0, 0.3);
		background-size: 50%;
	}
}

/*
@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop, #grade .sub li.compare {
		margin-top: 90px;
	} 
}*/


/*-------------------------------------------------
-------------------------------------------------
sp
-------------------------------------------------
-------------------------------------------------*/

@media screen and (max-width:678px) {

	/*global header setting
	---------------------------------------------------*/
	#header_wrap {
		background: #eee;
	}
	/*------------------------------------------------------
	breadcrumb
	------------------------------------------------------*/
	.breadcrumb {
		width: auto;
		overflow-x: scroll;
		margin: 0 auto;
		padding: 0 10px;
		background: #f8f8f8;
	}
	.breadcrumb::before {
		content: "";
		z-index: 10;
		position: absolute;
		right: 0;
		height: 24px;
		width: 12%;
		top: auto;
		background: linear-gradient( 90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 1));
	}
	@media screen and (max-width: 1199px) {
		.breadcrumb {
			max-width: 1000px;
		}
	}
	@media screen and (min-width: 1200px) {
		.breadcrumb {
			max-width: 1200px;
		}
	}
	.breadcrumb ol li {
		list-style-type: none;
		display: inline-block;
		text-indent: 5px;
		font-size: 10px;
	}
	.breadcrumb ol li:after {
		content: ">";
		margin: 0 0 0 10px;
	}
	.breadcrumb ol li.last:after {
		content: "";
		margin: 0;
	}
	.breadcrumb ol li a:link, .breadcrumb ol li a:visited, .breadcrumb ol li a:active {
		text-decoration: underline;
		color: #333;
	}
	.breadcrumb ol li a:hover {
		text-decoration: none;
		color: #333;
	}
	#container, #contents, #lineup_contents {
		width: 100%;
		min-width: 320px;
	}
	#lineup_contents {
		background: #fff;
		width: 100%;
		overflow: hidden;
	}
	/*logo breadcrumb*/
	.containerInner {
		background: #eee;
	}
	#sc-header {
		margin-bottom: 0;
	}
	.pageTitle {
		padding: 30px 0 0;
		text-align: center;
		font-size: 30px;
	}
	.pankz {
		margin: 0 auto;
		padding: 10px 0;
		font-family: 'Helvetica', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Lucida Grande', 'QVerdana', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif;
		font-size: 10px;
	}

	/*inactive elements
	---------------------------------------------------*/
	#gnav_header, #conversion, #footer_campaign, #common_footer, #footer {
		display: none !important;
	}

	/*SP menu
	-------------------------------------------------*/
	.rpsv_menu {
		background: #fff;
	}
	.sp_menu {
		width: 100%;
		height: 0;
		margin: 0 0 24px;
		padding: 30px 0 0;
		z-index: 99;
		background: #eee;
		position: relative;
		display: none;
		top: 0;
	}
	.sp_menu h1 {
		width: 120px;
		height: calc(120px*0.3);
		position: absolute;
		top: -28px;
		left: 50%;
		margin: -3px 0 0 -55px;
		z-index: 300;
		padding: 0;
		overflow: hidden;
	}
	.top_logo {
		position: relative;
	}
	.sp_menu h1 .logo_svg {
		width: 90px;
		height: auto;
		position: absolute;
		top: -58px;
		left: 15px;
	}
	.sp_menu .hnbgr {
		position: absolute;
		left: 15px;
		top: 50%;
		margin: -9px 0 0;
		cursor: pointer;
	}
	.sp_menu .hnbgr img {
		width: 30px;
		height: auto;
	}
	.sp_menu nav {
		width: 100%;
		height: auto;
		margin: 0;
		z-index: 0;
		display: none;
		position: relative;
	}
	.rpsv_menu nav::after {
		content: "";
		width: 100%;
		height: 10px;
		display: block;
		background: linear-gradient(rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
		position: absolute;
		bottom: -10px;
	}
	.sp_menu nav .menu_block {
		width: 100%;
		height: auto;
		margin: 0 auto;
		/*padding: 0 0 500px;*/
		/*position: absolute;
		top: auto;
		left: 0;*/
		padding: 0;
		background: #fff;
		z-index: 100;
	}
	.sp_menu nav ul .mainmenu {
		float: none;
		margin: 0;
		border-bottom: solid #ccc 1px;
		width: 100%;
		padding: 0;
	}
	.sp_menu .top_arrow {
		position: absolute;
		top: -5px;
		left: 50%;
		margin: 0 0 0 -12px;
		display: none;
	}
	.sp_menu .mainmenu {
		width: auto;
		height: auto;
		position: relative;
		z-index: 100;
	}
	.sp_menu a.menu_btn {
		display: block;
		height: 30px;
		cursor: pointer;
		margin: 0;
		padding: 5px 0;
		position: relative;
	}
	.sp_menu .sub li.compare a {
		padding: 10px 50px 10px 10px;
		font-size: 15px;
	}
	.sp_menu .sub li.compare a::after {
		content: url(/common_lineup/img/arrow/arrow_m.png);
		position: absolute;
		top: 50%;
		right: 30px;
		margin: -10px 0 0;
	}
	/*.sp_menu a.menu_btn .main_btn::after,*/
	.sp_menu .sub li .stxt::after {
		content: url(/common_lineup/img/arrow/arrow_m.png);
		position: absolute;
		top: 50%;
		right: 30px;
		margin: -10px 0 0;
	}
	.sp_menu .mon::after {
		content: none;
	}
	.sp_menu .main_btn {
		height: 30px;
		position: relative;
		overflow: hidden;
		margin: 0;
	}

	/*////	icon animation	////*/
	.sp_menu .main_btn::before {
		content: "";
		display: block;
		position: absolute;
		background: #999;
		width: 20px;
		height: 2px;
		right: 26px;
		top: 50%;
		margin: -1px 0 0;
	}
	.sp_menu .main_btn:active::before {
		transition: 0.3s;
		transform: rotate(90deg);
	}
	.sp_menu .main_btn.open::before {
		width: 2px;
		right: 35px;
		transform: rotate(90deg);
	}
	.sp_menu .main_btn::after {
		content: "";
		display: block;
		position: absolute;
		background: #999;
		width: 2px;
		height: 18px;
		right: 35px;
		top: 50%;
		margin: -9px 0 0;
	}
	.sp_menu .main_btn:active::after {
		transform: rotate(90deg);
		transition: 0.3s;
	}
	.sp_menu .main_btn.open::after {
		transform: rotate(90deg);
	}

	/*////////////////////////////*/
	.sp_menu .mainmenu .main_btn img {
		position: absolute;
		left: 5px;
		width: auto;
		height: 55px;
	}

	/*////sub menu////*/
	.sp_menu .submenu {
		position: relative;
		top: auto;
		left: auto;
		background: none;
		border-bottom: none;
		border-radius: 0;
		z-index: auto;
		display: block;
		box-shadow: none;
		width: 100%;
	}
	.sp_menu .submenu .thumb, .sp_menu .submenu .thumb img {
		display: none;
	}
	.sp_menu .posi1::after, .sp_menu .posi2::after, .sp_menu .posi3::after, .sp_menu .posi4::after {
		content: none;
		position: relative;
		top: auto;
		margin: 0;
	}
	.sp_menu .sub li {
		display: block;
		margin: 0;
		width: 100%;
		border-top: solid #eee 1px;
		position: relative;
	}
	.sp_menu .sub li a {
		display: block;
		margin: 0;
		width: 100%;
	}
	.sp_menu .sub li span {
		display: table-cell;
		vertical-align: middle;
		padding: 10px 20px 0 0;
	}
	.sp_menu .sub li .stxt {
		width: 100%;
		margin: 0;
		font-size: 12px;
		padding: 10px 50px 10px 10px;
		color: #333;
		line-height: 1.4em;
		letter-spacing: 0;
	}
	.lineup_menu_area .sub li .ptxt {
		display: none;
	}
	.sp_menu .sub li .stxt strong, .sp_menu .sub li.spcont .stxt {
		font-size: 15px;
		font-weight: normal;
		display: block;
		margin: 0;
		line-height: 1.4em;
	}
	.sp_menu .sub hr {
		display: none;
	}
	.sp_menu .sub li.spcont {
		display: block;
		padding: 0;
		width: auto;
		height: auto;
		margin: 0 auto 0;
	}
	.sp_menu .sub li.spcont .spbnr {
		display: none;
	}
	.sp_menu .sub li.compare a {
		padding: 10px 50px 10px 10px;
		font-size: 15px;
	}
	.sp_menu .sub li.compare a::after {
		content: url(/common_lineup/img/arrow/arrow_m.png);
		position: absolute;
		top: 50%;
		right: 30px;
		margin: -10px 0 0;
	}
}