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

#visid p + p {
	margin-top: 1em;
}
@media screen and (max-width: 1023px) {
	.visid img{
		height: auto;
	}
}
.gry_color {
	background-color: #e7e7e7;
}
sup.small {
    vertical-align: super;
    font-size: 11px;
    font-weight: normal;
}
p > sup.small, 
li > sup.small {
    vertical-align: inherit;
    font-size: 10px;
    font-weight: normal;
}


/* ==================================================
	color
================================================== */

:root {
	--color10: #e9e8e8;
	--color_gray: #e6e6e6;
}
.bg10 { background-color: var(--color10) !important; }
.bg_gray { background-color: var(--color_gray) !important; }

.btn__box {
	display: flex;
	flex-flow: wrap;
	margin: 1em -1rem 0;
}
.btn__box > li {
	margin: .5rem 1rem;
}



/* ----------------------------------------
	main
---------------------------------------- */
.main2 .title,
.main2 .subtitle {
	padding: 15px 20px;
	border-bottom: 1px #000 solid;
}
@media screen and (min-width: 768px) {
	.main2 .title,
	.main2 .subtitle {
		padding-right: 30px;
		padding-left: 30px;
	}
}




/* ----------------------------------------
	モデル一覧
---------------------------------------- */
.model > div > div > div {
	display: block;
}

.model .hpj-pim > div:nth-child(2){
	display: grid;
    gap: 0px;
}

.model_footer {
	padding: 30px 30px 0;
	outline: 1px #fff solid;
    border-top: 1px #000 solid;
}
.model_cta {
	justify-content: center;
}
.model_cta .button.spec {
	display: none;
}

@media screen and (min-width: 768px) {
	.model .hpj-pim > div:nth-child(2){
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: max-content max-content 1fr auto;
	}
	.model .hpj-pim > div:nth-child(2) .model_img {
		grid-row: span 2 / span 2;
	}
	.model .hpj-pim > div:nth-child(2) .model_details {
		grid-column-start: 2;
	}
	.model .hpj-pim > div:nth-child(2) .model_footer {
		grid-column: span 2 / span 2;
		grid-row-start: 3;
	}
}

.model_flag {
	background: var(--color100);
}



/* ----------------------------------------
	ご購入に関する注意
---------------------------------------- */

.read_before_purchase .acco_content {
	background: var(--color10);
}


@media screen and (min-width: 768px) {
	.imgTextBox_list > li {
		flex-wrap: wrap;
	}
}



.read_before_purchase .acco_content {
	background: var(--color10);
}


@media screen and (min-width: 768px) {
	.imgTextBox_list > li {
		flex-wrap: wrap;
	}
}