/*********** PAGE 03 - 01 **********/
.contentexample {
    padding: 90px 0 100px;
}
.t-section h2{
    font-size: 27px;
    color: #003214;
    line-height: 175%;
    letter-spacing: 1.3px;
    text-align: center;
}
.tit-detail h2 { text-align: center; font-size: 18px; color: #4D4D4D; line-height: 160%;}
.tit-detail h2 span { font-size: 14px;}
.page0301 .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
	margin-top: 20px;
}

.page0301 .content .post {
    width: 28%;
    text-align: center;
    margin: 27px 0;
}
.page0301 .content .post a {
	display: inline-block;
	width: 100%;
}
.page0301 .content .post a:hover{
	text-decoration: none;
}


.page0301 .content .post .ex-title {
    font-size: 14px;
    color: #4D4D4D;
    margin-top: 15px;
}

.page0301 .content .post .ex-title span {
    display: block;
    font-weight: normal;
}
.page0301 .content .post:last-child {
	margin: 27px 0 5px 0;
}


/************************************/

/*********** PAGE 03 - 02 **********/

.img-view img {
	width: 65.8%;
}
.img-view {
	display: none;
	text-align: center;
}

#img-view-01 {
	display: block;
}

.slider-thumbs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 100px;
	margin-bottom:35px;
	
}

.img-thumb {
	width: 23.5%;
	margin: 10px 0;
}

.img-thumb img {
	width: 100%;
}

.slider-views {
	display: block;
	position: relative;
}
.carousel { width: 100%; margin-top: 30px;}
.slider-views #b-carousel-l, .slider-views #b-carousel-r {
	width: 15px;
	height: 15px;
}

.slider-views #b-carousel-l img, .slider-views #b-carousel-r img {
	width: 15px;
	height: 15px;
}

#b-carousel-l {
	position: absolute;
	top: 50%;
	left: 15px;
}

#b-carousel-r {
	position: absolute;
	top: 50%;
	right: 15px;
}

.page0302 .content .product {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 42px;
	position: relative;
}
.page0302 .content .product:before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 0;
    height: 0;
    border-top: 50px solid #CCD6D0;
    border-right: 50px solid transparent;
	z-index: 2;
}

.page0302 .content .product .info {
	width: 50%;
	background-color: #e5eae7;
	box-sizing: border-box;
	position: relative;
	padding: 10px;
}

.page0302 .content .product .info p {
	text-align: center;
	font-size: 14px;
	line-height: 120px;
}


.page0302 .content .product .about {
	width: 50%;
	background-color: #f2f5f3;
	box-sizing: border-box;
	position: relative;
	padding: 10px;
}

.page0302 .content .product .about .box {
	position: absolute;
	top: 50%;
	left: 100px;
	transform: translateY(-50%);
}

.info-0302 {
	width: 258px;
	border-bottom: 1px dotted #003214;
}
.info-0302:last-child {border-bottom: none;}
.info-0302 p {
	display: inline-block;
	line-height: 20px;
	margin: -5px 0;
	padding: 12px 0;
}

.info-0302 p:nth-of-type(1) {
	width: 100px;
}

.info-0302 p:nth-of-type(2) {

}

.pagenation {
	width: 100%;
	height: 50px;
	margin: 100px 0;
	position: relative;
}

.pagenation .page-back {
	float: left;
}

.pagenation .page-back a, .pagenation .page-next a {
	line-height: 50px;
	text-decoration: none;
	color: #003214;
}
.pagenation .page-back a span, .pagenation .page-next a span {
	font-size: 10px;
	line-height: 50px;
}
.pagenation .page-back a span { margin-left: 5px;}
.pagenation .page-next a span { margin-right: 5px;}
.pagenation .page-next {
	float: right;
}

.pagenation .page-back img, .pagenation .page-next img{
	width: 14px;
	display: inline-block;
	vertical-align: middle;
}

.pagenation .button-0302 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 50px;
	width: 250px;
	background: #003214;
	line-height: 50px;
	text-align: center;
}

.pagenation .button-0302 a {
	color: #fff;
	text-decoration: none;
}

.pagenation .button-0302::before {
	content: url(../img/assets/button-mask.png);
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0.4;
}

.page0302 .title-head {
	width: 100%;
	text-align: center;
	height: 150px;
	background-color: #e5eae7;
	position: relative;
}

.page0302 .title-head::after {
	content: url(../img/assets/button-mask.png);
	position: absolute;
	top: 0;
	left: 0;
}

.page0302 .title-head h1 {
	font-size: 27px;
	line-height: 150px;
	margin: 0;
}

/************************************/
@media screen and (max-width:767px) {

	
	 /*********** PAGE 03 - 02 **********/

	.slider-thumbs {
		justify-content: space-around;
	}

	.img-thumb {
		width: 30%;
	}

	.slider-thumbs {
		margin-top: 35px;
	}

	.img-view img {
		width: 80%;
	}

	.page0302 .content .product .about .box {
		left: 10%;
	}
	.pagenation {
		display: block;
	}

	.pagenation .button-0302 {
		width: 100%;
		position: relative;
		text-align: center;
		transform:initial; 
		left: 0;
	}

	.pagenation .page-back {
		float: none;
	}
	.pagenation .page-next {
		float: left;
	}

}

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

	.info-0302 {
		width: 100%;
	}

	.info-0302 p:nth-of-type(1) {
		width: 80px;
	}
}

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

    /*********** PAGE 03 - 01 **********/

    .page0301 .content {
        justify-content: space-around;
    }

    .page0301 .content .post {
        width: 40%;
    }

    .page0301 .content .post p {
        font-size: 12px;
	}

	
	 /*********** PAGE 03 - 02 **********/
	
	#b-carousel-l {
		left: 5px;
	}

	#b-carousel-r {
		right: 5px;
	}

	.page0302 .content .product .info, .page0302 .content .product .about {
		width: 100%;
		margin: 15px 0;
	}



	.pagenation {
		margin: 50px 0;
	}
}

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

    .t-section h2 {
        font-size: 17px;
    }
    
    /*********** PAGE 03 - 01 **********/

    .page0301 .content {
        justify-content: space-around;
    }

    .page0301 .content .post {
        width: 90%;
        margin: 10px 0;
	}

	 /*********** PAGE 03 - 02 **********/
	
	.img-view img {
		width: 100%;
	}

	.slider-thumbs {
		margin-top: 20px;
	}
}