/* ==================================================
	common
================================================== */

#main_content * + p {
	margin-top: 2rem;
}
#main_content .hLine > span::before,
#main_content .hLine > span::after {
	border-top-color: #ccc;
}
.fssl { font-size: 1.2rem; }

@media screen and (min-width: 480px) {
	.fssl { font-size: 1.6rem; }
}





/* ==================================================
	introduction
================================================== */

.introduction .txt_box {
	padding: 2rem;
	background: #333;
}
.point {
	text-align: left! important;
}
.point > li {
	margin-top: .5rem;
	color: #ccc;
}
.point > li span {
	display: block;
	color: #0096d6;
	font-size: 1.6rem;
}





/* ==================================================
	spec main
================================================== */

.pro_title {
	padding: .5rem 1rem;
	text-align: left;
	letter-spacing: .2rem;
	border-left: .5rem solid #999;
}
.pro_name {
	font-size: 1.7rem;
}

@media screen and (min-width: 1024px) {
	.pro_title {
		font-size: 2.3rem;
	}
}



/* ----------------------------------------
	spec_container
---------------------------------------- */

.spec_container {
	display: flex;
	justify-content: center;
	margin-top: .5rem;
	/*border-bottom: 1px solid #666;*/
}

@media screen and (min-width: 768px) {
	.spec_main .col_2.space	> div img {
		max-width: 21.1rem;
	}
}

@media screen and (min-width: 1024px) {
	.spec_container {
		justify-content: start;
		margin-top: 2rem;
	}
}


/* s_title -------------------- */

.s_title {
	border-right: 1px solid #666;
	width:20%;
}
.s_title .s_item_spec > li {
	font-size: 1rem;
	padding: 1.2rem 1rem;
	border-top: 1px #666 solid;
	background: #222;
}

@media screen and (min-width: 1024px) {
	.s_title {
		width: 65px;
		white-space: normal;
	}
}


/* s_item -------------------- */

.s_item {
	display: flex;
	width:80%;
	/*overflow-x: auto;
	-webkit-overflow-scrolling: touch;*/
}

@media screen and (min-width: 1024px) {
	.s_item {
		width: calc(100% - 65px);
	}
}

@media all and (-ms-high-contrast: none) {
	.s_item.ml {
		margin-left: -65px!important;
	}
}


/* lineup_model_content -------------------- */

.s_item_content {
	border-right: 1px solid #666;
	width: 50%;
}
.s_item .s_item_name {
	padding: .8rem .5rem;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	background: #333;
}
.s_item .s_item_spec > li {
	padding: 1.2rem 1rem;
	color: #fff;
	font-size: 1.3rem;
	text-align: center;
	border-top: 1px #666 dotted;
}
.s_item .s_item_spec > li.spec_price {
	font-size: 1.2rem;
}
.s_item .s_item_spec > li.spec_price span {
	font-size: 140%;
}

@media screen and (min-width: 1024px) {
	.s_item_content {
		flex: 1;
	}
}





/* ==================================================
	collabo
================================================== */

.collabo > li {
	margin-top: 2rem;
}
.collabo h3 {
	padding: .5rem 2rem;
	color: #fff;
	text-align: left;
	background: #5a5a5a;
}
.collabo .txt_box {
	padding: 1.6rem;
	text-align: left;
	line-height: 1.8;
}

@media screen and (min-width: 768px) {
	.collabo .img_box {
		width: 40%;
	}
	.collabo .txt_box {
		width: 60%;
		text-align: left;
	}
}





/* ==================================================
	vr_spec
================================================== */

.vr_spec > div > div > div {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column-reverse;
}
.vr_spec .hpj-freeHTML,
.vr_spec .hpj-pim {
	width: 100% !important;
}
.vr_spec .img_box {
	padding: 1rem;
	text-align: center;
}

/* table */
.vr_spec table.style_basic th,
.vr_spec table.style_basic td {
	padding: .8rem 1rem;
	border: none;
	border-bottom: 1px solid #ccc;
}
.vr_spec table.style_basic th {
	width: 20%;
	font-size: 1rem;
	text-align: left;
}
.vr_spec table.style_basic td {
	width: 80%;
	font-size: 1.3rem;
}

/* price */
.vr_spec .date {
	margin-top: 1.5rem;
}
.vr_spec .date p {
	color: #767676;
	font-size: 1.5rem;
	font-weight: normal !important;
}
.vr_spec .price_area {
	margin-top: 1.5rem;
	color: #d7410b;
}
.vr_spec .price {
	margin-top: 0 !important;
	font-weight: normal;
}

@media screen and (min-width: 768px) {
	.vr_spec > div > div > div {
		flex-wrap: nowrap;
		flex-direction: row;
	}
	.vr_spec .hpj-freeHTML {
		width: 75% !important;
	}
	.vr_spec .hpj-pim {
		width: 25% !important;
	}
	.vr_spec .img_box {
		padding: 0;
		text-align: center;
	}

	/* table */
	.vr_spec table.style_basic th,
	.vr_spec table.style_basic td {
		padding: .8rem 2.5rem;
	}
	.vr_spec table.style_basic th {
		width: 25%;
		font-size: 1.2rem;
		text-align: left;
	}
	.vr_spec table.style_basic td {
		width: 75%;
		font-size: 1.3rem;
	}

}