@media (min-width: 930px) {
	#product_summary > .container, 
	#product_detail > .container, 
	#product_list > .container {
		width: 900px;
	}
}

/****************************
  local nav
****************************/

#nav_product {
	margin:  0 ;
	padding: 10px 0 0;
}

#nav_product ul {
	display: flex;
	flex-wrap: wrap;
	margin:  0 -6px;
	padding: 0;
}

#nav_product ul > li {
	width: calc(100% / 8);
	margin:  0;
	padding: 0 6px;
	position: relative;
}

#nav_product ul > li a {
	display: block;
	width:  100%;
	height: 100%;
	margin:  0;
	padding: 2px 2px 10px;
	background-color: #538dd5;
	transition: all 0.2s;
}

#nav_product ul > li a:link, 
#nav_product ul > li a:visited, 
#nav_product ul > li a:hover, 
#nav_product ul > li a:active {
	color: #fff;
	text-decoration: none;
}

#nav_product ul > li figcaption {
	display: inline-block;
	margin:  0;
	padding: 3px 0 3px 3px;
	text-align: left;
	font-weight: normal;
	font-size: 15px;
	line-height: 1;
}

#nav_product ul > li figcaption.small {
	padding-left: 0px;
	font-size: 12px;
}

#nav_product ul > li img {
	display: block;
	width: 80%;
	height: initial;
	margin:  0 auto;
	padding: 0;
	text-align: center;
	transition: all 0.2s ease-in-out;
}

#nav_product ul > li:hover:after, 
#nav_product ul > li.active:after {
	position: absolute;
	z-index: 400;
	top: 100%;
	left: calc(50% - 7px);
	width:  0;
	height: 0;
	margin:  0;
	padding: 0;
	border: 7px solid transparent;
	content: ' ';
	transition: all 0.2s;
}

#nav_product ul > li a {
	opacity: .3;
}

#nav_product ul > li a:hover, 
#nav_product ul > li.active a, 
#nav_product ul > li:hover:after, 
#nav_product ul > li.active:after, 
#nav_product ul > li.active:hover:after {
	opacity: 1;
}

#nav_product ul > li:hover:after, 
#nav_product ul > li.active:after {
	border-top: 14px solid #538dd5;
}

/****************************
  product_summary
****************************/

#product_summary {
	margin: 16px 0 0;
	padding: 20px 0;
	border-top:    10px solid #cfcfcf;
	border-bottom: 10px solid #cfcfcf;
	background-color: #538dd5;
}

.icon_product_summary {
	width:  300px;
	height: 258px;
	margin:  0 auto;
	padding: 0;
	text-align: center;
}
.icon_product_summary > img {
	width: 100%;
	height: initial;
}

h1.h1_product {
	margin:  0;
	padding: 0;
	text-align: left;
	color: #fff;
	font-weight: bold;
	font-size: 2.3em;
	line-height: 1;
}

p.p_product {
	margin:  0;
	padding: .7em 0 0;
	text-align: justify;
	color: #fff;
	font-weight: normal;
	font-size: 1.2em;
	line-height: 1.3;
}

.wrapper_product_summary_figure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -2px;
}
.wrapper_product_summary_figure > figure {
	margin:  0;
	padding: 1em 2px 0;
	width: calc(100% / 1.2);
}
.wrapper_product_summary_figure > figure > img {
	width: 100%;
	height: initial;
}

/****************************
  product_detail
****************************/

#product_detail {
	margin: 0;
	padding: 20px 0;
	background-color: #fff;
}

/* h2.h2_product_detail {
	float: right;
	width: 535px;
	min-height: 2.4em;
	margin:  0;
	padding: 0;
	text-align: left;
	color: var(--blue-base_out);
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.2;
} */

.wrapper_product_detail {
	width: 100%;
	display: table;
	margin:  0;
	padding: 0;
}
.wrapper_product_detail > div {
	display: table-cell;
	vertical-align: top;
}

.column_product_detail_img {
	width: 330px;
	margin:  0;
	padding: 0;
}
.column_product_detail_img > img {
	width: 250px;
	height: initial;
	vertical-align: bottom;
}

.column_product_detail_table {
	margin:  0;
	padding: 0 0 0 30px;
}

.frame_width, 
.frame_depth, 
.frame_height {
	display: inline-block;
	min-width: 3.2em;
	height: 1.7em;
	margin:  0;
	padding: .2em 0;
	border: 2px solid #cfcfcf;
	background-color: #fff;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	line-height: 1;
}

.label_size {
	display: inline-block;
	margin:  0;
	padding: 0;
	vertical-align: middle;
	font-size: 1.1em;
	line-height: 1;
}

.label_size_unit {
	display: inline-block;
	margin:  0;
	padding: 0;
	vertical-align: middle;
	font-size: 1.1em;
	line-height: 1;
}
.label_size_unit.display_block {
	display: block;
	margin:  0;
	padding: 2px 0 0;
	font-size: 1.1em;
	line-height: 1;
}

table.table_product_detail {
	width: 100%;
	margin:  0;
	padding: 0;
}
table.table_product_detail th, 
table.table_product_detail td {
	margin: 0;
	border-bottom: 1px solid #ccc;
	vertical-align: middle;
	text-align: left;
	line-height: 1.2;
}
table.table_product_detail th {
	width: 9em;
	padding: .4em 2em .4em .4em;
	font-weight: normal;
	font-size: .9em;
	white-space: nowrap;
}
table.table_product_detail th.th_tape {
	width: 12em;
}
table.table_product_detail td {
	padding: .4em .4em .4em 0;
	font-size: 1em;
}

/* case */
#case {
	position: relative;
}
#case_width { /* 縦 */
	position: absolute;
	top: 210px;
	left:  0px;
}
#case_depth { /* 横 */
	position: absolute;
	top:  210px;
	left: 200px;
}
#case_height { /* 深さ */
	position: absolute;
	top: 130px;
	right: 0px;
	text-align: right;
}

/* film */
#film {
	padding-top:    20px;
	padding-bottom: 20px;
	position: relative;
}
#film_width { /* 幅 */
	position: absolute;
	top:  30px;
	left:  0px;
}
#film_depth { /* 長さ */
	position: absolute;
	bottom:  0px;
	left:   50px;
}
#film_height { /* 厚み */
	position: absolute;
	top:  110px;
	right: 30px;
}

/* tape */
#tape {
	position: relative;
}
#tape_width { /* 幅 */
	position: absolute;
	top:  30px;
	right: 0px;
}
#tape_depth { /* 長さ */
	position: absolute;
	top:  200px;
	left: 140px;
}
#tape_height { /* 厚み */
	position: absolute;
	top: 120px;
	right: 0px;
}

/****************************
  product_list
****************************/

#product_list {
	margin:  0;
	padding: 30px 0;
	border-top: 10px solid #cfcfcf;
	background-color: #fff;
}

h3.h3_product_list {
	margin:  0;
	padding: 1em 0 0;
	text-align: center;
	color: #f00;
	font-weight: normal;
	font-size: 1.1em;
}

.wrapper_product_list {
	display: flex;
	margin: 0 -20px;
}
.wrapper_product_list > div {
	width: 50%;
	margin:  0;
	padding: 0 20px;
}

table.table_product_list {
	width: 100%;
	margin:  0;
	padding: 0;
}
table.table_product_list > thead {
	border-bottom: 2px solid #ccc;
}
table.table_product_list > tfoot {
	border-top: 2px solid #ccc;
}
table.table_product_list > tbody tr:hover {
	background-color: #eee;
	cursor: pointer;
}
table.table_product_list > tbody tr.hover {
	background-color: #eee;
}
table.table_product_list th, 
table.table_product_list td {
	margin:  0;
	padding: .3em .3em;
	vertical-align: middle;
	text-align: left;
	font-weight: normal;

	line-height: 1.2;
}
table.table_product_list th {
	font-size: .9em;
}
table.table_product_list td {
	font-size: 1em;
}
table.table_product_list > tbody::before,  
table.table_product_list > tbody::after {
	content: '';
	display: table-row;
	height: 8px;
}

/****************************
  tape
****************************/

ul.ul_product_tape {
	width: 100%;
	margin:  0;
	padding: 0;
}
ul.ul_product_tape > li {
	margin:  0;
	padding: .3em 0;
	text-align: left;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1;
}
ul.ul_product_tape > li > a {
	color: #000;
}
ul.ul_product_tape > li > a:hover, 
ul.ul_product_tape > li > a.active {
	color: var(--blue-base_out);
}

.wrapper_product_tape {
	width: 100%;
	display: table;
	margin:  15px 0 0;
	padding: 0;
}
.wrapper_product_tape > div {
	display: table-cell;
	width: 60%;
	padding: 0 0 20px 10px;
	vertical-align: top;
}
.wrapper_product_tape > div.product_tape_img {
	display: table-cell;
	width: 40%;
	padding-top: 3px;
	padding-left: 0;
}
.wrapper_product_tape > div.product_tape_img > img {
	width: 100%;
	height: initial;
}

@media (max-width: 500px) {
	.wrapper_product_tape {
		display: block;
	}
	.wrapper_product_tape > div {
		display: block;
		width: 100%;
		padding: 0 0 20px;
	}
	.wrapper_product_tape > div.product_tape_img {
		display: block;
		width: 100%;
		padding-top: 0;
	}
}

h4.h4_product_tape {
	margin:  0;
	padding: 0 0;
	text-align: left;
	color: #000;
	font-weight: normal;
	font-size: 1.2em;
	line-height: 1.2;
}

p.p_product_tape {
	margin: 0;
	padding: 0;
	text-align: justify;
	font-size: 0.9em;
	line-height: 1.5;
}

table.table_product_list_tape {
	width: 100%;
	margin: 3em 0 0;
	padding: 0;
	border-bottom: 2px solid #ccc;
}
table.table_product_list_tape th, 
table.table_product_list_tape td {
	margin:  0;
	padding: .3em .3em;
	vertical-align: middle;
	text-align: left;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.2;
}
table.table_product_list_tape th {
	border-bottom: 2px solid #ccc;
}

/* add tape 0 */

table.table_product_list_tape.single_column, 
table.table_product_detail.single_column {
	width: 100%;
}

@media (min-width: 930px) {
	table.table_product_list_tape.single_column, 
	table.table_product_detail.single_column {
		width: 450px;
	}
}

/****************************
  tape slick
****************************/

.slick-list {
	margin-right: -20px;
}
.slick-slide {
	margin-right: 20px;
}
#slider {
	position: relative;
}
.slick-prev, 
.slick-next {
	display: block;
	position: absolute;
	z-index: 100;
	top: calc(50% - 20px);
	margin:  0;
	padding: 0 8px;
	border: none;
	background-color: rgba(0, 0, 0, 0.3);
	text-align: center;
	color: #fff;
	font-size: 30px;
	line-height: 40px;
	cursor: pointer;
	appearance: button;
	-webkit-user-select: none;
	        user-select: none;
	outline: none;
	box-sizing: border-box;
}
.slick-prev {
	left: -50px;
}
.slick-next {
	right: -50px;
}
.slick-prev:hover, 
.slick-next:hover {
	background-color: rgba(0, 0, 0, 0.4);
}
.slick-prev.slick-disabled {
	visibility: hidden;
}

@media (max-width: 500px) {
	#slider {
		padding-top: 50px;
	}
	.slick-prev {
		top: 0px;
		left: 0px;
	}
	.slick-next {
		top: 0px;
		right: 0px;
	}
}

/****************************
  Collapse
****************************/

#product_collapse_list {
	margin:  0;
	padding: 20px 0;
	background-color: #fff;
}
#product_collapse_detail {
	margin:  0;
	padding: 30px 0;
	border-top: 10px solid #cfcfcf;
	background-color: #fff;
}

ul.ul_product_collapse_list {
	margin:  0;
	padding: 0;
}
ul.ul_product_collapse_list > li {
	margin:  0;
	padding: .2em 0;
	text-align: left;
	color: #000;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
}
ul.ul_product_collapse_list > li:hover, 
ul.ul_product_collapse_list > li.active {
	color: #538dd5;
}

h2.h2_product_collapse {
	margin:  0;
	padding: 0;
	text-align: left;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.2;
}
p.p_product_collapse {
	margin:  0;
	padding: 1em 0 0 1em;
	text-align: justify;
	font-size: 1.1em;
	line-height: 1.5;
}

@media (min-width: 768px) {
	#product_collapse_list > .container, 
	#product_collapse_detail > .container {
		width: 768px;
	}
	ul.ul_product_collapse_list {
		display: flex;
		flex-wrap: wrap;
	}
	ul.ul_product_collapse_list > li {
		width: 25%;
	}
}

/****************************
  max-width: 768px
****************************/

select {
	height: 2em;
	margin:  0;
	padding: 0;
	vertical-align: middle;
	border: 1px solid #ccc;
	font-size: 12px;
	line-height: 1;
	color: #000;
}
select:disabled {
	color: #999;
}

@media (max-width: 768px) {
	h2.h2_product_detail {
		float: none;
		width: 100%;
	}

	.wrapper_product_detail {
		display: block;

/* 		display: none; */

		margin:  0;
		padding: 20px 0 0;
	}
	.wrapper_product_detail > div {
		display: block;
	}
	.column_product_detail_img {
		margin: 0 auto;
	}
	.column_product_detail_table {
		width: 100%;
		padding: 30px 0 0;
	}

	h3.h3_product_list {
		text-align: left;
	}
	.wrapper_product_list {
		display: block;
		margin:  0;
		padding: 0;
	}
	.wrapper_product_list > div {
		width: 100%;
		margin:  0;
		padding: 0;
	}
}

/****************************
  product_recommend
****************************/

#product_recommend {
	margin: 0;
	padding: 30px 0;
	border-bottom: 10px solid #cfcfcf;
	background-color: #ffffe4;
}

#product_recommend > div {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

#product_recommend > div:before,
#product_recommend > div:after {
	display: table;
	content: '';
}

#product_recommend > div:after {
	clear: both;
}

#product_recommend > div h2 {
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.2;
	color: #538dd5;
}

#product_recommend > div h2 > b {
	display: block;
	margin: 0;
	padding: 0 0 5px;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 1;
	color: #f00;
}

#product_recommend > div figure {
	width: 100%;
	margin: 0;
	padding: 0;
}

#product_recommend > div figure > img {
	width: 100%;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

#product_recommend > div span {
	display: block;
	width: 100%;
	margin: 0;
	padding: 20px 0 0;
}

#product_recommend > div dl {
	width: 100%;
	margin: 0;
	padding: 15px 0 0;
}

#product_recommend > div dl > dt {
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: bold;
	font-size: 15px;
	line-height: 1.2;
}

#product_recommend > div dl > dd {
	margin: 8px 0 0;
	padding: 8px 0 0;
	border-top: 1px solid #000;
	font-style: normal;
	font-weight: normal;
	font-size: 13px;
	line-height: 1.5;
}

@media (min-width: 930px) {
	#product_recommend > div {
		width: 900px;
		padding: 0;
	}

	#product_recommend > div figure {
		float: right;
		width: 250px;
	}

	#product_recommend > div span {
		float: left;
		width: 650px;
		padding: 0 20px 0 0;
	}

	#product_recommend > div dl {
		width: 100%;
		margin: 0;
		padding: 15px 0 0;
	}

	#product_recommend > div h2 {
		font-size: 22px;
		line-height: 1.2;
	}
	
	#product_recommend > div h2 > b {
		font-size: 15px;
		line-height: 1;
	}
	
	#product_recommend > div dl > dt {
		font-size: 18px;
		line-height: 1.2;
	}
	
	#product_recommend > div dl > dd {
		font-size: 14px;
		line-height: 1.5;
	}
}