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


.stageBase {
	/*padding: 0 0 50px;*/
}
#page-area {
	position: relative;
	margin: auto;
	padding: 0;
}
#page-area .stageBase {
	padding-top: 0;
}

/*-google アイコン-*/
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}


/* ----------------------------------------------
	製品リスト
------------------------------------------------- */
#p_list .stageWrap {
	display: grid;
	gap: 20px;
}
#p_list .stageWrap h4 {
	color: #016f9c;
	font-weight: bold;
}
#p_list .stageWrap h3 {
	font-weight: bold;
}

.list h3 {
	background-color: #e4f7f3;
	border-left: solid 2px #016f9c;
	padding: 20px;
	font-weight: bold;
}
.list .stageWrap {
	display: grid;
	gap: 20px;
}
.list .p_list_in {
	display: grid;
	gap: 20px;
}
.list .p_list_in h4 {
	background-color: #016f9c;
	color: #fff;
	font-weight: bold;
	padding: 5px 20px;
}
.list .p_list_in .data {
	display: grid;
	gap: 20px;
}
.list .p_list_in .data .images {}
.list .p_list_in .data .images ul {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 15px;
}
.list .p_list_in .data .images ul li {
	position: relative;
}
.list .p_list_in .data .images ul li a {
	cursor:pointer;
	display: block;
}
.list .p_list_in .data .images ul li span {
	position: absolute;
	bottom: 5px;
	left: 5px;
	background-color: #fff;
	padding: 4px;
	border-radius: 50%;
	border: solid 1px #ccc;
	opacity: 0.8;
}
.list .p_list_in .data .images ul li:nth-of-type(1) {
	grid-column:1/3; grid-row:1/2;
}
.list .p_list_in .data .images ul li:nth-of-type(2) {
	grid-column:1/2; grid-row:2/3;
}
.list .p_list_in .data .images ul li:nth-of-type(3) {
	grid-column:2/3; grid-row:2/3;
}
.list .p_list_in .data .images ul li img {
	width: 100%;
}
.list .p_list_in .data .images ul li:nth-of-type(2) img,
.list .p_list_in .data .images ul li:nth-of-type(3) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
.list .p_list_in .data .detail {
	display: grid;
	grid-template-rows: repeat(2,auto) 1fr;
	gap: 20px;
}
.list .p_list_in .data .detail::after {
	content: "";
}
.list .p_list_in .data .detail .features {}
.list .p_list_in .data .detail .features dt {
	color: #016f9c;
	font-weight: bold;
	margin-bottom: 5px;
}
.list .p_list_in .data .detail .features dd {}
.list .p_list_in .data .detail .features dd ul {
	list-style: disc;
	padding-left: 1em;
}
.list .p_list_in .data .detail .features dd ul li {
	margin-bottom: 5px;
}
.list .p_list_in .data .detail .spec {
	display: grid;
	/*align-items: end;*/
}
.list .p_list_in .data .detail .spec dt {
	color: #016f9c;
	font-weight: bold;
	border-bottom: solid 2px #016f9c;
}
.list .p_list_in .data .detail .spec dd {
	padding: 10px 1em;
	border-bottom: solid 2px #d7d7d7 ;
}

h6 {
	padding: 5px 0 15px 25px;
	position: relative;
	font-size: 16px;
	font-weight: bold;
}
h6::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: #016f9c;
	position: absolute;
	left: 0px;
	top: 0;
	bottom: 10px;
	margin: auto;
}

.det_note {
	font-size: 14px;
	text-indent: -1em;
	padding-left: 1em;
}



/* ----------------------------------------------
	カテゴリ内製品リスト
------------------------------------------------- */
#category .stageWrap {
	margin: auto;
	background-color: #e4f7f3;
}
#category .stageWrap h4 {
	text-align: center;
	font-weight: bold;
}

#category .category_in .c_list {
	margin-top: 20px;
	padding-bottom: 20px;
}
#category .category_in .c_list li {
	/*width: 100%;
	height: auto;*/
	padding: 0 10px;
}
#category .category_in .c_list li a {
	border-radius: 20px;
	border: solid 1px #cdcdcd;
	/*line-height: 3em;*/
	text-align: center;
	background-color: #fff;
	width: 100%;
}
#category .category_in .c_list li a img {
	width: 100%;
	height: 150px;
	border-radius: 20px 20px 0 0;
	object-fit: cover;
}
#category .category_in .c_list li a p {
	padding: 5px 0;
	height: 4em;
	display: grid;
	place-items: center;
	border-top: solid 1px #cdcdcd;
}

 /* ----------------------------------------------
		製品詳細
	------------------------------------------------- */
.list .p_list_in .data .detail p {
	margin-bottom: 10px;
}



/*-
	PC版（821px以上）ここから
------------------------------------------------- */
@media screen and (min-width:821px), print{
	
	#page-area {
		width: 1100px;
	}
	
	
	/* ----------------------------------------------
		製品リストボックス
	------------------------------------------------- */
	.page-area-linkbox {
		/*left: calc(max(50%, (1100px / 2)) + (1100px / 2) - 200px);*/
		left: calc(max(50%, (1100px / 2)) - (1100px / 2));
		z-index: 10;
		
		width: 250px;
		font-size: 14px;
	}
	/*- 位置設定　 -*/
	.page-area-linkbox.headmenu {
		position: absolute;
		top: 0;
		z-index: 10;
	}
	/*- 位置設定　 -*/
	.page-area-linkbox.scrollmenu {
		position:fixed;
		top: 60px;
	}
	/*- 位置設定　 -*/
	.page-area-linkbox.footmenu {
		position: absolute;
		bottom: 100px;
	}
	.page-area-linkbox__list {
		font-weight: bold;
	}
	.page-area-linkbox__item {
		margin: 5px 0;
		padding-left: 2em;
		position: relative;
		opacity: 0.5;
	}
	.page-area-linkbox__item.set {
		opacity: 1;
	}
	.page-area-linkbox__item.set::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: calc(1.2em - 4px);
		width: 20px;
		height: 6px;
		border-bottom: 2px solid #00ac97;
		border-right: 2px solid #00ac97;
		transform: skew(45deg);
	}
	.page-area-linkbox__item a {
		padding: 5px 0;
		display: block;
	}
	
	
	/* ----------------------------------------------
		製品リスト
	------------------------------------------------- */
	.list {
		width: 1100px;
		margin: auto;
	}
	.list .stageWrap {
		width: 850px;
		margin-left: 250px;
		padding-right: 0;
	}
	.list .p_list_in .data {
		grid-template-columns: repeat(2,1fr);
	}
	.list .p_list_in .data .detail .spec {
		grid-template-columns: auto 1fr;
		font-size: 14px;
	}
	.list .p_list_in .data .detail .spec dt {
		padding: 10px 2em 10px 0;
		max-width: 10em;
	}
	.list .p_list_in .data .detail .spec dd {
		padding: 10px 1em;
	}
	
	
	/* ----------------------------------------------
		カテゴリ内製品リスト
	------------------------------------------------- */
	#category .stageWrap {
		width: 800px;
		padding: 50px;
		border-radius: 50px;
	}
	
	
}


/*-
	SP版（820px以下）ここから
------------------------------------------------- */
@media screen and (max-width: 820px) {
	
	#page-area {
		width: 100%;
	}
	
	
	/* ----------------------------------------------
		製品リストボックス
	------------------------------------------------- */
	.page-area-linkbox {
		display: none;
	}

	
	/* ----------------------------------------------
		製品リスト
	------------------------------------------------- */
	.list .p_list_in .data {
		grid-template-columns: repeat(1,1fr);
	}
	.list .p_list_in .data .detail .spec {
	}
	.list .p_list_in .data .detail .spec dt {
		padding: 10px 0;
	}
	.list .p_list_in .data .detail .spec dd {
		padding: 10px 0;
		margin-bottom: 10px;
	}
	
	
	/* ----------------------------------------------
		カテゴリ内製品リスト
	------------------------------------------------- */
	#category .stageWrap {
		margin: 0 auto;
		padding: 40px;
		border-radius: 40px;
	}
	
}