.c-styledetail_section{
	background:#F7F7F7;
	padding-bottom: 80px;
}

.c-stylecoord_list{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-template-rows: 1fr 1fr;
	gap:24px;
	width:976px;
	margin:50px auto 80px;
}

.c-stylecoord_item{
	background-color:#ccc;
	position: relative;
	height: 232px;
}
.c-stylecoord_item_img{
	position:absolute;
	width: 100%;
    height: 100%;
	top: 0;
	pointer-events: none;
}
.c-stylecoord_item_notice{
	height: 100%;
}
.c-stylecoord_item_notice p{
	font-size: 30px;
    margin-top: -1rem;
}
.c-stylecoord_item_ttl{
	position:absolute;
	top:0;
	width: 100%;
	height:64px;
	box-sizing: border-box;
	color:#fff;
	font-size:24px;
	font-weight: bold;
	background: rgba(51, 51, 51, 0.5);
	background: linear-gradient(180deg,rgba(51, 51, 51, 0.5) 0%, rgba(51, 51, 51, 0) 100%);
	line-height: 64px;
	padding-left:24px;
}
.c-stylecoord_item_btn{
	position:absolute;
	bottom:16px;
	background-color:rgba(255,255,255,0.8);
	width: 130px;
	height: 48px;
	border-radius:24px;
	text-align: center;
	line-height: 48px;
	box-sizing: border-box;
	font-size:20px;
	cursor: pointer;

	&:hover{
		background-color:rgba(245,245,245,0.8);
	}
}
.c-stylecoord_item_edit{
	left:16px;
}
.c-stylecoord_item_detail{
	right:16px;
	padding-right:30px;
	background-image:url(../img/icon_arrow.svg);
	background-position:right 30px center;
	background-size:20px 10px;
	background-repeat: no-repeat;
}
.c-stylecoord_item_detail.disabled{
	opacity:0.5;
	pointer-events:none;
}

.c-stylecoord_print_item{
	
}

#c-stylecoord_print{
	margin-top: 40px;
}
@media screen and (min-width: 1px) and (max-width: 767px) {
	.c-styledetail_section{
		padding-bottom: 60px;
	}
	.c-stylecoord_list{
		width: 100%;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap:10px;
		margin:25px auto 30px;
	}
	.c-stylecoord_item{
		height: auto;
		aspect-ratio:512 / 359;
	}
	.c-stylecoord_item_ttl{
		height: 32px;
		font-size: 15px;
		line-height: 32px;
        padding-left: 10px;
	}
	.c-stylecoord_item_notice p{
		font-size:15px;
	}
	.c-stylecoord_item_btn{
		width: 66px;
		height: 24px;
		line-height: 24px;
		border-radius:12px;
		font-size: 12px;
		bottom: 10px;
	}
	.c-stylecoord_item_edit{
		left:10px;
	}
	.c-stylecoord_item_detail{
		right:10px;
		background-position:right 12px center;
		background-size:12px auto;
		padding-right: 12px;
	}
	#c-stylecoord_print{
		margin-top: 20px;
	}
}


.c-styledetail_showroomsection{
	text-align: center;

	.page_ttl{
		margin-bottom: 40px;
	}
}
a#link_showroom{
	display: flex;
	width: 976px;
	text-decoration: none;
	box-sizing: border-box;
	color: #1F1F1F;
	border:1px solid #CCCCCC;
	margin:auto;
}
a#link_showroom:hover{
	text-decoration: none;
	box-shadow: 0px 3px 4px 1px rgba(221,221,221,0.84);
}
a#link_showroom:hover .mod_boxImg{
	opacity:0.8;
}
.mod_boxImg{
	width: 584px;
}
.mod_boxText{
	display: flex;
	align-items: center;
	width: 100%;
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	line-height: 1.3;
	padding-left:32px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAArklEQVQoka3TO6pCQRCE4dmGgWAgoomBiYmZXBAjIyODc+iqH8zMXIDbuesRDARR8LELAxdgDzhxf0z3dE0ppRTb/5L+SvYAM+AlaVmDpsALWNWgCfCwvU4jSWPgLmlTc9MQuEqKNIqIvu0LsE2jpml6wFnSLo3atu3aPtnepxHQsX20ffg9qGqpamjbg/SzShrZvqUWVxWNqvBVxRuY2X5GxOJrcSmfLxoR80ztG9uwYCyMRM7kAAAAAElFTkSuQmCC) no-repeat;
  	background-position: right 10px center;
}
.mod-lead.mod-orange{
	color:#F24B10;
}
@media screen and (min-width: 1px) and (max-width: 767px) {
	.c-styledetail_showroomsection{

		.page_ttl{
			margin-bottom: 35px;
		}
	}
	a#link_showroom{
		width: 100%;
	}
	.mod_boxImg{
		width: 125px;
		flex: 1 0 auto;
	}
	.mod_boxText{
		font-size: 15px;
		line-height: 1.2;
		padding-left: 10px;
		padding-top: 15px;
		padding-bottom: 15px;
	}
}

.c-stylemodal{
	display:none;
	z-index: 2000;
}
.c-stylemodal.show{
	display:flex;
	justify-content: center;
    align-items: center;
	animation-name:fadeIn;
	animation-fill-mode:forwards;
	animation-duration:1s;
}
@keyframes fadeIn{0% {display:flex;opacity: 0;}100% {display:flex;opacity: 1;}}
@keyframes fadeOut{0% {opacity: 1;display: block;}100% {display:none;opacity: 0;}}
.c-stylemodal,
.c-stylemodal_bg{
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
.c-stylemodal,
.c-stylemodal_bg{
	position:fixed;
}
.c-stylemodal_contents{
	position:relative;
	width: 920px;
    height: auto;
	max-height: 90%;
    background: #fff;
	padding:40px 0 40px 40px;
	box-sizing: border-box;
	overflow: auto;
}
#c-urlmodal{
	text-align: center;

	.c-stylemodal_contents{
		padding:40px 40px 25px 40px;
	}
}
#c-stylemodal .c-stylemodal_contents{
	font-weight: bold;
}
.c-stylemodal_bg{
	background-color:rgba(0,0,0,0.2);
}
.c-stylemodal_close{
	position: absolute;
	top:10px;
	right:10px;
	width:64px;
	height: 64px;
	cursor:pointer;
	background-repeat: no-repeat;
	background-image:url(../img/close_btn.svg);
	background-size:64px auto;
}
.c-stylemodal_ttl{
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 34px;
}
#c-urlmodal_text{
	font-size: 20px;
	margin-bottom: 21px;
}
#c-stylemodal_list{
	display: flex;
    flex-wrap: wrap;
	gap:24px 16px;

	li{
		width: 400px;

		.c-stylemodal_listitem_thumb{
			width: 64px;
			height: 64px;
			float: left;
			margin-right:12px;
		}

		.c-stylemodal_listitem_partsname{
			font-size: 16px;
			color:#999999;
			margin-bottom:10px;
		}
		.c-stylemodal_listitem_itemname{
			font-size: 18px;
		}
	}
}
@media screen and (min-width: 1px) and (max-width: 767px) {
	.c-stylemodal_contents{
		width: calc(100% - 20px);
		max-height:calc(100% - 20px);
		padding: 20px 0 24px 20px;
	}
	.c-stylemodal_ttl{
		font-size: 15px;
		margin-bottom: 24px;
	}
	#c-stylemodal_list{
		gap:8px;

		li{
			.c-stylemodal_listitem_partsname{
				font-size: 12px;
			}
			.c-stylemodal_listitem_itemname{
				font-size: 13px;
			}
		}
	}
}

#c-urlmodal_Url{
	width: 100%;
	box-sizing: border-box;
	font-size: 18px;
}
#c-urlmodal_Btn{
    margin-top: 29px;
}
#c-urlmodal_Comp{
	display: flex;
	justify-content: center;
	opacity:0;
	font-size: 20px;
	margin-top: 15px;
	font-weight: bold;
	color: #4c9cd2;
}
#c-urlmodal_Comp.show{
	opacity:1;
	animation-name:fadeIn;
	animation-fill-mode:forwards;
	animation-duration:1s;
}


/*インクルード分の上書き*/
.Snsber{
	margin-top: 0;
}

/*印刷用*/
#c-styledetail_print{
	position: absolute;
	top:0;
	left:0;
	left:100%;
	scale:0;
}
.c-stylecoord_print_item{
	position: relative;
	padding:40px;
    box-sizing: border-box;
}

#c-loadingmodal.show{
	display: flex;
	justify-content: center;
	align-items: center;
}
#c-loading_loader{
	width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 4px;
    border-color: #000000 #00000010 #00000010;
    position: relative;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
	to {
	  transform: rotate(360deg);
	}
  }