@charset "UTF-8";

/* =======================================================
contents
======================================================= */

.maxwidth {
/*	max-width: 920px; */
}

.prod_att small {
	display: block;
	margin-left: 1rem;
	line-height: 150%;
}

/* #read
======================================================= */

#contents #product-read {
	font-size: 1.125rem;
	text-align: center;
	padding: 2rem 0;
}

/* .merit
======================================================= */

#contents .merit {
	background: #F2F5FC;
	color: #253D73;
	padding: 0;
	text-align: center;
}

#contents .merit ol {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	border: 2px solid #fff;
	border-top: none;
	border-bottom: none;
}

#contents .merit ol li {
	padding: 2rem 1rem;
	margin: 0;
	width: calc(100% / 3);
	border: 2px solid #fff;
	box-sizing: border-box;
}

#contents .merit ol li:nth-of-type(1),
#contents .merit ol li:nth-of-type(2) {
	width: 50%;
	border-top: none;
}

#contents .merit ol li:nth-of-type(3),
#contents .merit ol li:nth-of-type(4),
#contents .merit ol li:nth-of-type(5) {
	border-bottom: none;
}

#contents .merit ol li h2 {
	padding: 0;
	margin: 0;
	font-size: min(4.2vw, 1.5rem);
}

#contents .merit ol li h2 br {
	display: none;
}

#contents .merit ol li p {
	margin: 1rem 0 0;
	font-size: min(3vw, 1rem);
	line-height: 150%;
}

#contents .merit ol li ul {
	list-style: disc;
	margin-top: 1rem;
	padding-left: 1.5rem;
	
}

#contents .merit ol li ul li {
	width: 100%;
	font-weight: 500;
}

/* #product-list
======================================================= */

#contents #product-list {
	padding: 3rem 5%;
}

#contents #product-list h2 {
	color: #253D73;
	text-align: center;
}

#contents .table_scroll {
	max-width: 1165px;
	overflow: auto;
	margin: 0 auto;
}

#contents #product-list table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
}

#contents #product-list table th,
#contents #product-list table td {
	box-sizing: border-box;
	width: calc(100% / 6);
	border: 4px solid #fff;
	border-top: 8px solid #fff;
}

#contents #product-list thead {
	color: #fff;
}

#contents #product-list thead th:not(:nth-of-type(1)) {
	font-weight: normal;
	font-size: 0.75rem;
	line-height: 150%;
	padding: 1rem;
	background: #2A5188;
}

#contents #product-list thead th a {
	color: #fff !important;
	text-decoration: underline !important;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.5rem;
}

#contents #product-list thead td a {
	background: #2A5188;
	border-radius: 10rem;
	color: #fff !important;
	font-size: 0.875rem;
	padding:  0.1rem 1rem;
	display: block;
	text-align: center;
	margin: 0.5rem 3px 1rem;
}

#contents #product-list thead td a::after {
	content: '\025b6';
	font-size: 0.75rem;
	margin-left: min(5vw, 1rem);
}

#contents #product-list table tbody tr {
	line-height: 150%;
	text-align: center;
	font-size: 0.9375rem;
}

#contents #product-list table tbody tr:nth-of-type(odd) {
	background: #F2F5FC;
}

#contents #product-list table tbody tr th,
#contents #product-list table tbody tr td {
	padding: 1rem 0.5rem;
}

#contents #product-list table.table_noborder {
	position: relative;
	z-index: -1;
	margin: -3px 0;
}

#contents #product-list table.table_border {
  position: relative;
	box-sizing: border-box;
}

#contents #product-list table.table_border thead {
	background: #B6CBE7;
	color: #2A5188;
	border-bottom: 3px solid #B6CBE7;
	position: relative;
	top: 4px;
}

#contents #product-list table.table_border thead th {
	border: none;
	position: relative;
}

#contents #product-list table.table_border tbody tr {
	background: #F2F5FC;
}

#contents #product-list table.table_border tbody {
	position: relative;
}

#contents #product-list table.table_border tbody::after {
	content: '';
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	position: absolute;
	top: 0;
	left: 0;
	border: 3px solid #B6CBE7;
}

/* ================================== */

#contents #product-contents .product-tab ul.product-content li div.tc_in {
	display: block !important;
	width: 100% !important;
	max-width: 900px;
	margin: 0 auto;
}

#contents #product-contents .product-tab ul.product-content li div.table_scroll {
	display: block !important;
}

table.table_01 {
	border-collapse: collapse;
	border: 1px solid #E1E1E1;
	font-size: 1rem;
	width: 100%;
	margin-bottom: 2rem;
	text-align: center;
}

table.table_01 th {
	background: #F4F4F4;
	font-weight: normal;
	border: 1px solid #E1E1E1;
	padding: 0.5rem;
}


table.table_01 th:nth-of-type(1) {
	width: 7rem;
}

table.table_01 td {
	border: 1px solid #E1E1E1;
	padding: 0.5rem;
	line-height: 150%;
}

table.table_01 td img {
	max-width: 100%;
	vertical-align: bottom;
	text-align: center;
	margin: 0 auto !important;
}

table.table_01 td img.anc {
	width: 2rem;
}

#contents #product-contents .product-tab ul.product-content .w50 {
	width: 50%;
}

#contents #product-contents .product-tab ul.product-content .w75 {
	max-width: 75% !important;
	width: 100% !important;
}

#contents #product-contents .product-tab ul.product-content .h_c {
	height: min(20vw, 260px);
}

#contents #product-contents .product-tab ul.product-content li div.table_flex {
	display: flex !important;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
	justify-content: space-between;
}

#contents #product-contents .product-tab ul.product-content li div.table_flex p {
	text-align: left;
}

#contents #product-contents .product-tab ul.product-content li div.table_flex div {
	display: flex;
	width: calc(50% - 1rem) !important;
}

#contents #product-contents .product-tab ul.product-content li div.table_flex div th {
	min-width: 3rem !important;
	text-align: center;
}

.table_flex div p {
	font-size: 0.8125rem;
	line-height: 150%;
}












#contents #product-list ul {
	padding: 0;
	margin: 0 0 3rem;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
}

#contents #product-list ul li {
	padding: 0;
	margin: 0;
	flex: 1;
	max-width: 30%;
}

#contents #product-list ul li figure {
	padding: 0;
	margin: 0;
}

#contents #product-list ul li h3 {
	font-size: 1.125rem;
	border-bottom: 1px solid;
	display: inline-block;
	margin-bottom: 0;
}

#contents #product-list ul li p {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
}

#contents #product-list ul li h4 {
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

#contents #product-list ul li ul {
	gap: 1%;
}

#contents #product-list ul li ul li {
	max-width: 19%;
}

/* =======================================================
#product-link
======================================================= */

#contents .prod_title {
	padding: 3rem 5%;
}

#contents .prod_title h1 {
	text-align: left;
	margin-bottom: 0.5rem;
}

#contents #product-link {
	padding: 0;
	display: flex;
}

#contents #product-link section h3 {
	margin: 0;
	text-align: left;
}

#contents #product-link section ul {
	padding: 0;
	margin: 0 2rem 0 0;
	list-style: none;
	display: flex;
}

#contents #product-link section ul li {
	margin-right: 2rem;
}

#contents #product-link section ul li a {
	text-decoration: underline;
	color: #fff;
}

/* =======================================================
#product-title
======================================================= */

#contents #product-title section:nth-of-type(1) {
	text-align: center;
	padding: 2rem 5% 1rem;
}

#contents #product-title section:nth-of-type(1) h1 {
	margin-top: 0;
	font-size: 1.5rem;
}

#contents #product-title section:nth-of-type(1) h3 {
	margin: 0;
	font-size: 0.75rem;
}

#contents #product-title section:nth-of-type(1) p {
	font-size: 0.875rem;
	line-height: 150%;
	margin: 0;
	padding: 0;
}

#contents #product-title section:nth-of-type(2) {
	background: rgba(222,222,222,0.25);
	text-align: center;
	padding: 2rem 5%;
}

#contents #product-title section:nth-of-type(2) .product-icon h4 {
	font-size: 0.875rem;
	line-height: 150%;
	font-weight: 500;
	padding: 0;
	margin: 0 0 0.5rem;
}

#contents #product-title section:nth-of-type(2) .product-icon ul {
	padding: 0;
	margin: 0 auto;
	list-style: none;
	display: flex;
	gap: 1%;
	justify-content: center;
	max-width: 560px;
}

#contents #product-title section:nth-of-type(2) .product-icon ul li {
	padding: 0;
	margin: 0;
}

#contents #product-title section:nth-of-type(2) .product-icon ul li img {
	width: 100%;
	height: auto;
	max-height: 24px;
	vertical-align: top;
}

#contents #product-title section:nth-of-type(2) .product-info {
	display: inline-block;
	margin: 0 auto;
	padding: 1rem 2rem 2rem;
	margin-top: 2rem;
	background: #fff;
	border-radius: 0.5rem;
	max-width: 640px;
	box-sizing: border-box;
}

#contents #product-title section:nth-of-type(2) .product-info h2 {
	font-size: 0.875rem;
	line-height: 150%;
	font-weight: 500;
}

#contents #product-title section:nth-of-type(2) .product-info div {
	display: flex;
	text-align: left;
	align-items: center;
	gap: 1rem;
}

#contents #product-title section:nth-of-type(2) .product-info div img {
	width: 30%;
}

#contents #product-title section:nth-of-type(2) .product-info p {
	font-size: 0.8125rem;
	line-height: 150%;
}

#contents #product-title section:nth-of-type(2) .product-info a {
	background: #2A5188;
	color: #fff !important;
	font-size: 0.75rem;
	line-height: 150%;
	padding: 0.5rem 1.5rem;
	border-radius: 10rem;
}

#contents #product-title section:nth-of-type(2) .product-info a::after {
	content: '\025b6';
	font-size: 0.75rem;
	margin-left: min(5vw, 1rem);
}

#contents #product-title section:nth-of-type(2) .product-info ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 0;
}

#contents #product-title section:nth-of-type(2) .product-info ul li strong {
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 150%;
	display: inline-block;
	width: 10.5rem;
}

#contents #product-title section:nth-of-type(2) .product-info ul li h3 {
	padding: 0;
	margin: 0;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 150%;
}

#contents #product-title section:nth-of-type(2) .product-info ul li span a {
	border: 1px solid #707070;
	font-weight: 500;
	font-size: 0.625rem;
	line-height: 220%;
	display: inline-block;
	padding: 0 2rem 0 1.5rem;
	position: relative;
}

#contents #product-title section:nth-of-type(2) .product-info ul li span a:hover {
	opacity: 1;
	background: #5C5C5C;
	color: #fff;
}

#contents #product-title section:nth-of-type(2) .product-info ul li span a::after {
	content: '\03e';
	background: #5DB0DC;
	width: 1rem;
	height: 1rem;
	line-height: 1rem;
	border-radius: 10rem;
	display: inline-block;
	color: #fff;
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translate(0, -50%);
}

#contents #product-title section:nth-of-type(2) .product-info b {
	font-size: 0.875rem;
	line-height: 150%;
	font-weight: 400;
	display: inline-block;
	padding: 1rem 0 0;
}

/* =======================================================
#product-contents
======================================================= */

#contents #product-contents {
	padding: 0 5%;
}

#contents #product-contents .product-btn {
	padding: 1rem 0;
}

#contents #product-contents .product-btn ul {
	padding: 0;
	margin: 0 -0.5%;
	list-style: none;
	display: flex;
	justify-content: start;
}

#contents #product-contents .product-btn ul li {
	text-align: center;
	flex: 1;
	max-width: calc(100% / 3);
	padding: 0;
	margin: 0;
	display: flex;
	align-items: stretch;
}

#contents #product-contents .product-btn ul li a {
	display: flex;
	border-radius: 0.3rem;
	line-height: 1.3rem;
	padding: 1rem 3%;
	margin: 2%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 100%;
}

#contents #product-contents .product-btn-01 li a {
	background: #5C5C5C;
	color: #fff;
}

#contents #product-contents .product-btn-02 li a {
	background: #CCCCCC;
	color: #000;
}

#contents #product-contents .product-btn-03 li a {
	background: #fff;
	border: 1px solid #B2B2B2;
	color: #000;
}

#contents #product-contents .product-btn-03 li a:hover {
	background: #E8E8E8;
	opacity: 1;
}

#contents #product-contents .product-photo {
	padding: 0;
	margin: 0 0 2rem;
}

#contents #product-contents .product-photo figure {
	padding: 0;
	margin: 0;
}

#contents #product-contents .product-photo figure img {
	/* aspect-ratio: 1.414 / 1;
	object-fit: cover; */
}

#contents #product-contents .product-tab ul.tabs {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	border-bottom: 0.35rem solid #ccc;
	gap: 0.6rem;
}

#contents #product-contents .product-tab ul.tabs li {
	padding: 0;
	margin: 0;
	display: flex;
	flex: 1;
	text-align: center;
}

#contents #product-contents .product-tab ul.tabs li a {
	background: #F7F7F7;
	display: flex;
	flex: 1;
	width: 100%;
	justify-content: center;
	align-items: center;
	line-height: 150%;
	transition: 0.3s;
	padding: 0.7rem 0.4rem;
}

#contents #product-contents .product-tab ul.tabs li a br {
	display: none;
}

#contents #product-contents .product-tab ul.tabs li a:hover,
#contents #product-contents .product-tab ul.tabs li.active a {
	background: #CCCCCC;
	opacity: 1;
}

#contents #product-contents .product-tab ul.product-content {
	padding: 0;
	margin: 2rem 0;
	list-style: none;
	display: block;
	text-align: center;
}

#contents #product-contents .product-tab ul.product-content li {
	padding: 0;
	margin: 0;
	text-align: center;
	display: none;
}

#contents #product-contents .product-tab ul.product-content li ul.procedure {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 3%;
	counter-reset: number 0;
}

#contents #product-contents .product-tab ul.product-content li ul.procedure li {
	display: inline-block;
	width: 30%;
	margin-bottom: 2rem;
}

#contents #product-contents .product-tab ul.product-content li ul.procedure li figure figcaption {
	text-align: left;
	font-size: 0.8125rem;
	line-height: 150%;
	position: relative;
}

#contents #product-contents .product-tab ul.product-content li ul.procedure li figure figcaption small {
	display: block;
}

#contents #product-contents .product-tab ul.product-content li ul.procedure li figure figcaption::before {
	counter-increment: number 1;
	content: counter(number);
	width: 1.2rem;
	height: 1.2rem;
	font-size: 0.8rem;
	line-height: calc(1.2rem - 2px);
	text-align: center;
	color: #000;
	border: 1px solid #000;
	border-radius: 10em;
	display: inline-block;
	margin: 0 0.5rem 0 0;
}

#contents #product-contents .product-tab ul.product-content li h4 {
	display: block;
	font-weight: 500;
	text-align: center;
}

#contents #product-contents .product-tab ul.product-content li div {
	display: inline-block !important;
}

#contents #product-contents .product-tab ul.product-content li div .att {
	font-size: 0.75rem;
	line-height: 150%;
	width: 100%;
}

#contents #product-contents .product-tab ul.product-content li b {
	display: block;
	text-align: left;
	margin: 2rem 0;
}

#contents #product-contents .product-tab ul.product-content li.visibl {
	display: block;
}

#contents #product-contents .product-tab ul.product-content li dl {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	border-top: 2px solid #707070;
	border-bottom: 1px solid #707070;
}

#contents #product-contents .product-tab ul.product-content li dl dt {
	background: #DEDEDE;
	width: 30%;
	padding: 1rem;
	margin: 0;
	border-bottom: 1px solid #707070;
	display: flex; 
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

#contents #product-contents .product-tab ul.product-content li dl dd {
	background: #fff;
	width: 70%;
	padding: 1rem 5%;
	margin: 0;
	border-bottom: 1px solid #707070;
	box-sizing: border-box;
	text-align: left;
}

#contents #product-contents .product-tab ul.product-content li dl dd p {
	padding: 0;
	margin: 0;
}

.two-column {
	display: flex;
	align-items: center;
}

#contents #product-contents .product-tab ul.product-content li div figure {
	padding: 0;
	margin: 0;
	max-width: 900px;
}

#contents #product-contents .product-tab ul.product-content li:nth-of-type(1) div figure {
	padding: 0;
	margin: 0 auto;
	max-width: 420px;
}

#contents #product-contents .product-tab ul.product-content li .w40 {
	max-width: 40%;
}

#contents #product-contents .product-tab ul.product-content li h5 {
	background: #5C5C5C;
	color: #fff;
	width: 7rem;
	padding: 0.5rem 1rem;
	line-height: 150%;
	margin: 1rem 0 0.5rem;
}

#contents #product-contents .product-tab ul.product-content li strong.tc_strong {
	text-align: left !important;
	display: block;
	margin-bottom: 1rem;
}

.att {
	text-align: left;
}

.att ul {
	margin-bottom: 2rem;
	margin-left: 0;
	padding-left: 1rem;
}

.att ul li {
	display: block !important;
	text-align: left !important;
}

.att ul li::before {
	content: '・';
	position: relative;
	margin-left: -1rem;
}

.att small {
	display: block;
	line-height: 150%;
	text-align: left;
}

.att small::before {
	content: '※';
	margin-right: 0.5rem;
}

.att p b {
	margin: 0 !important;
}

/* =======================================================
Responsive
======================================================= */

@media screen and (max-width:1080px) {

#contents #product-link {
	display: block;
}

#contents #product-link section:nth-of-type(1) {
	margin-bottom: 1rem;
}

}

@media screen and (max-width:1000px) {

#contents header nav {
	font-size: 0.9rem;
}

#contents #product-list thead td a {
	font-size: 0.75rem;
	line-height: 1rem;
	padding: 0.5rem;
}

#contents #product-list thead td a::after {
	font-size: 0.5rem;
	line-height: 1rem;
	margin-left: 0.3rem;
}
	
}

@media screen and (max-width:768px) {

#contents .merit ol li h2 br {
	display: block;
}

#contents #product-list ul li {
	max-width: 50%;
	min-width: 45%;
}

#contents #product-list ul li ul li {
	min-width: 19%;
}

#contents #product-contents .product-btn ul {
	font-size: 0.9rem !important;
}
	
}

@media screen and (max-width:640px) {

#contents .table_scroll {
	border: 3px solid #F2F5FC;
}

#contents .table_scroll table {
	min-width: 640px;
}

}

@media screen and (max-width:540px) {

#contents #product-link section ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
}

#contents #product-link section ul li {
	margin-right: 1rem;
}

#contents .merit ol li {
	min-width: 100%;
}

#contents #product-title section:nth-of-type(2) .product-info ul {
	display: block;
}

#contents #product-title section:nth-of-type(2) .product-info ul li {
	margin-bottom: 1rem;
}

#contents #product-contents .product-tab ul.product-content li dl dt {
	width: 100%;
	border-bottom: none;
	display: block; 
}

#contents #product-contents .product-tab ul.product-content li dl dd {
	width: 100%;
	padding: 1rem;
}

#contents #product-contents .product-tab ul.product-content .h_c {
	height: auto;
}

.two-column {
	display: block;
}

#contents #product-contents .product-tab ul.product-content li div.table_flex div {
	width: 100% !important;
}

#contents #product-contents .product-tab ul.tabs {
	gap: 0.2rem;
}

#contents #product-contents .product-tab ul.tabs li a {
	font-size: 0.75rem;
	line-height: 130%;
}

#contents #product-contents .product-tab ul.tabs li a br {
	display: block;
}

}

@media screen and (max-width:420px) {

#contents .merit ol li h2 br {
	display: none;
}

}