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

/*==============================*/
/* コンテンツ */
/*==============================*/
.content {
	padding: 120px 0 0px 0;
	margin-top: 2px;
	border-top: 3px solid #1C6BAA;
}
    /* ======= SP =======*/
    @media (max-width: 600px){
        .content { padding: 56px 0 0px 0; }
    }

/*==============================*/
/* Frame */
/*==============================*/
div.tepoxxWrap{
	max-width: 880px;
	margin: 0 auto;
}

	/* ======= SP =======*/
	@media (max-width: 900px){
		div.tepoxxWrap{
			max-width: 100%;
			width: 92%;
		}
	}


/*==============================*/
/* タイトル */
/*==============================*/
.iconTitle{
    margin-bottom: 40px;
    text-align: center;
    font-size: 24px;
	font-weight: 500;
}
.iconTitle img{
	position: relative; top: 2px;
    width: 32px;
    margin-right: 10px;
}

    /* ======= SP =======*/
    @media (max-width: 600px) {
        .iconTitle{
            margin-bottom: 24px;
            font-size: 22px;
        }
    }


/*==============================*/
/* お知らせ */
/*==============================*/
/*-- 
------------------------- */
.tepoxxNews-title{
	display: inline-block;
	margin-left: -24px;
	margin-bottom: 16px;
	padding: 3px 20px 6px 20px;
	font-size: 17px;
	background: #0C5852;
	color: #fff;
	font-weight: 500;
}
	/* ======= SP =======*/
	@media (max-width: 600px) {
		.tepoxxNews-title{
			margin-left: 0px;
			margin-bottom: 10px;
			padding: 4px 20px 6px 20px;
			font-size: 16px;
		}
	}


/*-- 
------------------------- */
div.tepoxxNews article a{
	position: relative;
	display: block;
	padding: 20px 120px 20px 12px;
	border-bottom: 1px solid #D9D9D9;
}
div.tepoxxNews article a::after{
	position: absolute; top: 20px; right: 12px;
	content: "詳細はこちら";
	text-decoration: underline;
	color: #00138C;
}

div.tepoxxNews article a:hover{ background: #F2FFFD;}


div.tepoxxNews article dl{ display: flex; display: -webkit-flex;}
div.tepoxxNews article dl dt{
	width: 184px;
	font-size: 16px;
}
div.tepoxxNews article dl dt span{
	position: relative; top: -3px;
	margin-left: 24px;
	font-weight: 500;
	font-size: 16px;
	color: #0C5852;
}

div.tepoxxNews article dl dd{
	flex: 1;
	margin-left: 16px;
	font-size: 16px;
}

	/* ======= SP =======*/
	@media (max-width: 600px) {
		div.tepoxxNews article a{ padding: 20px 28px 20px 0;}
		div.tepoxxNews article a::after{
			position: absolute; top: 50%; right: 0;
			content: "";
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #20948A;
			margin-top: -10px;
		}
		div.tepoxxNews article a::before{
			position: absolute; top: 50%; right: 5px;
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent transparent transparent #fff;
			border-width: 5px 0px 5px 8px;
			margin-top: -5px;
			z-index: 99;
		}

		div.tepoxxNews article dl{  flex-direction: column; -webkit-flex-direction: column;}
		div.tepoxxNews article dl dt{
			margin-bottom: 4px;
			width: 184px;
			font-size: 16px;
		}
		div.tepoxxNews article dl dt span{
			position: relative; top: -3px;
			margin-left: 16px;
		}

		div.tepoxxNews article dl dd{
			width: 100%;
			margin-left: 0px;
			font-size: 15px;
		}
	}



/*==============================*/
/* 製品紹介 */
/*==============================*/
.product{
    display: flex; display: -webkit-flex; /* Safari */
    justify-content: space-between; -webkit-justify-content: space-between;
}

    /* ======= SP =======*/
    @media (max-width: 600px) {
        .product{ flex-direction: column; -webkit-flex-direction: column;}
    }

/*-- 
------------------------- */
.product .productImg{
	width: 352px;	
	overflow: hidden;
}
.product .productImg p {
	width: 352px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    background: #fff;
	aspect-ratio: 1 / 1;
}
.product .productImg p img{
	max-width: 100%;
	max-height:100%;
	width: 100%;
}

.product .productImg ul {
	overflow:hidden;
    display: flex; display: -webkit-flex;
    flex-wrap: wrap; -webkit-flex-wrap: wrap;
}
.product .productImg li{
    display: block;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 8px;
	padding: 4px 4px 4px 4px;
	background: #fff;
    border: 1px solid #ccc;
}
.product .productImg li:nth-child(3n) { margin-right: 0; }
.product .productImg li img { cursor: pointer;}

.product .productImg li span{
    position: relative;
	display: block;
    margin-top: -20px;
	padding: 4px 0 6px 0;
	background: #27A89D;
	color: #fff;
	text-align: center;
	line-height: 1.1em;
	letter-spacing: -0.04em;
	font-size: 12px;
}
.product .productImg li span br{ line-height: inherit;}

    /* ======= SP =======*/
    @media (max-width: 600px) {
        .product .productImg{ width: 100%; margin-bottom: 24px;}
        .product .productImg p {
			width: 100%;
            text-align: center;
            background: #F2F2F4;
        }
        .product .productImg li:nth-child(6) span{
            padding: 4px 0 6px 0;
            font-size: 11px;
        }
    }

/*-- 
------------------------- */
.product .productContents{ width: calc(100% - 352px - 32px);}

.product .productContents h2{
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ccc;
    font-size: 22px;
    font-weight: 500;
}
.product .productContents h2 small{
    display: block;
    margin-bottom: 6px;
    font-weight: 400;
    font-size: 16px;
}


.product .productContents div.tepoxxDetail dl{
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
	padding: 16px 16px;
	background: #EEF5F4;
}
.product .productContents div.tepoxxDetail dl:not(:last-child){ margin-bottom: 8px;}
.product .productContents div.tepoxxDetail dl dt{
	width: 120px;
	color: #0C5852;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.414em;
}
.product .productContents div.tepoxxDetail dl dd{
	flex: 1;
	padding: 4px 0 4px 24px;
	border-left: 1px solid #ccc;
}
.product .productContents div.tepoxxDetail dl:nth-child(2) dd{ padding: 16px 0 16px 24px;}

.product .productContents div.tepoxxDetail dl dd ul li:not(:last-child){ margin-bottom: 8px;}
.product .productContents div.tepoxxDetail dl dd ul li a{
	position: relative;
	padding-left: 32px;
}

.product .productContents div.tepoxxDetail dl dd ul li a:hover{
	text-decoration: underline;
	color: #00138C;
}

.product .productContents div.tepoxxDetail dl dd ul li.icon-pdf a::before{
	position: absolute; top: 1px; left: 0;
	content: "";
	width: 23px;
	height: 22px;
	background: url("/common/img/tepoxx/icon_pdf.svg")no-repeat;
	background-size: cover;
}
.product .productContents div.tepoxxDetail dl dd ul li.icon-html a::before{
	position: absolute; top: -3px; left: 0;
	content: "";
	width: 24px;
	height: 28px;
	background: url("/common/img/tepoxx/icon_html.svg")no-repeat;
	background-size: cover;
}

    /* ======= SP =======*/
    @media (max-width: 600px) {
        .product .productContents{ width: 100%;}
		
		.product .productContents div.tepoxxDetail dl{
			flex-direction: column; -webkit-flex-direction: column;
			align-items: flex-start; -webkit-align-items: flex-start;
			padding: 18px 20px 20px 20px;
		}
		.product .productContents div.tepoxxDetail dl dt{
			width: 100%;
			margin-bottom: 8px;
			padding-bottom: 10px;
			color: #0C5852;
			font-size: 16px;
			font-weight: 500;
			border-bottom: 1px solid #ccc;
		}
		.product .productContents div.tepoxxDetail dl dd{
			padding: 4px 0 4px 0px;
			border-left: none;
		}
		.product .productContents div.tepoxxDetail dl:nth-child(2) dd{ padding: 4px 0 4px 0px;}
		
		.product .productContents div.tepoxxDetail dl dd ul li.icon-pdf a::before{ position: absolute; top: -1px; left: 0;}
		.product .productContents div.tepoxxDetail dl dd ul li.icon-html a::before{ position: absolute; top: -3px; left: 0;}
    }



/*==============================*/
/* 商品情報  */
/*==============================*/
div.tepoxxInfo > dl{
	display: flex; display: -webkit-flex;
	padding: 16px 14px 18px 20px;
}
div.tepoxxInfo > dl:nth-child(odd){ background: #EFF8F6 url("/common/img/share/bg-texture.png"); }
div.tepoxxInfo > dl > dt{
	width: 224px;
	color: #0C5852;
	font-size: 16px;
	font-weight: 400;
}
div.tepoxxInfo  > dl > dd{
	flex: 1;
	margin-left: 32px;
	font-size: 15px;
}
div.tepoxxInfo  > dl > dd dl:not(:last-child){ margin-bottom: 12px;}
div.tepoxxInfo  > dl > dd dl dt{
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 500;
}
div.tepoxxInfo  > dl > dd dl dd{
	font-size: 14px;
	line-height: 1.414em;
}

	 /* ======= SP =======*/
	@media (max-width: 600px) {
		div.tepoxxInfo > dl{
			flex-direction: column; -webkit-flex-direction: column;
			padding: 18px 16px 20px 18px;
		}
		div.tepoxxInfo > dl:nth-child(odd){ background: #EFF8F6 url("/common/img/share/bg-texture.png"); }
		div.tepoxxInfo > dl > dt{
			margin-bottom: 6px;
			width: 100%;
			color: #0C5852;
			font-size: 16px;
			font-weight: 500;
		}
		div.tepoxxInfo  > dl > dd{
			width: 100%;
			margin-left: 0px;
			font-size: 15px;
		}
		div.tepoxxInfo  > dl > dd dl:not(:last-child){ margin-bottom: 10px;}
		div.tepoxxInfo  > dl > dd dl dd{
			font-size: 14px;
			line-height: 1.414em;
		}
	}