@charset "UTF-8";
pre {
	white-space: pre-wrap ;
}
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

/* breadcrumb-----------------------------------------------------*/
.breadcrumb {
	color: #237BD0;
	font-size: 1.5rem;
	margin: 20px auto 20px 0;
	text-align: left;
	padding: 0;
	line-height: 1.5;
	background-color: #fff;
}
.breadcrumb .inn-1080{
	padding: 0;
}
.breadcrumb span + span::before {
	content: "　>　";
}


/* section-01-----------------------------------------------------*/
#section-01{width:100%;
	min-height: calc(100vh - 330px)
}
.product-wrap{padding:30px 0 50px;}
.contents-wrap h1{
	background: #237BD0 url("../img/icon01.png") 20px center no-repeat;
	color: #fff;
	font-size: 2.0rem;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: 0em;
	padding: 10px 0 5px 70px;
	margin: 0 0 20px;
}
#cattxt{
	margin-bottom: 20px
}

/* --- .thumb --- */
.thumb ul{
    display: flex;
	flex-wrap: wrap;
    align-items: top;
	padding-bottom: 30px;
}
.thumb li{
	width: 19.2%;
	margin-bottom: 20px;
	margin-right: 1%;
	cursor: pointer
}
.thumb li:nth-child(5n){
	margin-right: 0;
}
.thm_ttl {
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: 0em;
}
.thm_img {
	padding: 10px;
	margin-bottom: 10px;
	background: #fff;
	/*-webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
	-moz-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
	-ms-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
	filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));*/

    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);
    box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);

 
}
.udline{
	margin-bottom: 30px;
	border-bottom: 1px solid #ddd;
}
.thumb li.large{
	width: 39.4%;
}

.btn_border a {
    position: relative;
    display: block;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
	font-size: 1.8rem;
    text-decoration: none;
	line-height: 60px;
    letter-spacing: 0.1em;
    color: #32a2dc;
    border: 2px solid #32a2dc;
	border-radius: 5rem;
    background: #fff;
    width: 370px;
    height: 60px;
	margin: 0 auto;
}
.btn_border a::before {
    content: '';
    position: absolute;
    top: 1em;
    left: 2em;
    width: 1.2em;
	height: 2.2em;
    background: url("../img/icon02.png") no-repeat;
}

.br_sp{
	display: none;
}

/* section-02-----------------------------------------------------*/
#section-02{
	width:100%;
	background: #f2f2f2;
}
.example ul{
    display: flex;
	flex-wrap: wrap;
    align-items: top;
	justify-content: center;
	padding-bottom: 30px;
}
.example li{
	width: 16%;
	padding: 10px;
	margin: 0 1.5% 10px;
	background: #fff;
	-webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
	-moz-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
	-ms-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
	filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
}


/*-----------------------------------------------------	*/
/*	for - 768px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 768px) {
	.thumb ul{
		justify-content: space-between;
	}
	.thumb li{
		width: 48%;
		margin-right: 0;
	}
	.thumb ul{
		justify-content: space-between;
	}
	.thumb li{
		width: 48%;
		margin-right: 0;
	}
	.thumb li.large{
		width: 100%;
	}
	
	.example li{
		width: 29%;
		margin: 0 2% 20px;
	}
}


/*-----------------------------------------------------	*/
/*	for - 480px					*/
/*-----------------------------------------------------	*/

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

	.breadcrumb {
		display: none;
	}
	.contents-wrap  h1{
		font-size: 1.8rem;
	}
	.btn_border a {
		width: 100%;
	}
	.btn_border a::before {
		left: 1em;
	}
	.br_sp{
		display: block;
	}
}


/*-----------------------------------------------------	*/
/*	特集バナー			*/
/*-----------------------------------------------------	*/

/*---------特集バナー---------*/
.feature-banner{
	width:100%;
	max-width:720px;
	margin:0 auto;
	background: url("../../img/banner_bg.jpg") no-repeat;
	background-size: cover;
	margin-top:60px;
	padding:20px 20px;
}
.banner-inn{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	font-weight: bold;
	}
.banner-txt{width:53%;}
p.feature{
	font-size:2rem;
	color:#237BD0;
	border:1px solid #237BD0;
	display: inline-block;
	padding: 0px 10px;
}
p.banner-ttl{
	font-size:2rem;
	width:100%;
	max-width:365px;
	color:#fff;
	background:#237BD0;
	position: relative;
	padding-left:20px;
	height: 70px;
    line-height: 30px;
	margin:10px 0 10px -20px;
	display: flex;
    justify-content: center;
    align-items: center;
}

p.banner-ttl::before{
	border: 35px solid transparent;
	border-left-color: #237BD0;
	border-right-width: 0;
	content: '';
    display: block;
	height: 0;
	position: absolute;
	right: -35px;
	top: 0;
	width: 0;
}
p.banner-sub-ttl{
	font-size:1.4rem;
	border-bottom:1px solid #000;
}
p.banner-sub-txt{
	font-size:1.2rem;
	letter-spacing: 0.5px;
}
.banner-image{width:44%;}


@media screen and (max-width: 768px) {
.feature-banner{
	background: url("../../img/banner_bg_sp.jpg") no-repeat;
	margin-bottom:20px;
	padding:20px 20px;
}
.banner-inn{
    flex-direction: column;
	align-items: center;
	}
.banner-txt{width:100%;}
p.feature{
	font-size:2rem;
	padding: 0px 10px;
}
p.banner-ttl{
	font-size:1.6rem;
	max-width:100%;
	width:100%;
	letter-spacing: 0px;
	 justify-content: flex-start;
}
p.banner-sub-ttl{
	font-size:1.4rem;
}
p.banner-sub-txt{margin-bottom:20px;}
.banner-image{width:100%;}
}


/* 商品説明 list-----------------------------*/
.list-box{
    border:2px solid #237BD0;
    padding:30px;
    margin-bottom:40px;
}
.list-head{
    font-size:1.8rem;
    font-weight: 700;
    color:#237BD0;
    padding-left:40px;
    position: relative;
    display: inline-block;
    margin-bottom:30px;
}
.list-head::before{
    position:absolute;
    content:'';
    background: url("../../img/icon-list.png") no-repeat center;
    background-size: contain;
    width:30px;
    height:42px;
    left:0;
    top:-10px;
}
.list-box ul {padding: 0}
.list-box ul li{
	width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	margin: 0;
	padding: 0;
}
.list-box ul li+li{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #daebef;
}
.list-box ul li p{ line-height: 1.4;}
.list-box ul li p.list-ttl{
    width:24%;
    text-align: center;
    background:#daebef;
    border-radius: 5px;
    font-weight: 700;
    color:#237BD0;
    padding:5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-box ul li p:not(.list-ttl){
    display: flex;
    align-items: center;
    width:75%;
}

@media (max-width: 768px){
    .list-box{
        padding:5vw 3vw 5vw 3vw;
        margin-bottom:5vw;
    }
    .list-head{
        font-size:1.6rem;
        padding-left:9vw;
        margin-bottom:5vw;
        line-height: 1.4;
    }
    .list-head::before{
        position:absolute;
        content:'';
        background: url("../../img/icon-list.png") no-repeat center;
        background-size: contain;
        width:6.667vw;
        height:9.867vw;
        left:0;
        top:-1.333vw;
    }
    .list-box ul li+li{
        margin-top:3vw;
        padding-top:3vw;
    }
    .list-box ul li p{ line-height: 1.4;}
    .list-box ul li p.list-ttl{
        width:100%;
        padding:1vw 0;
        margin-bottom:2vw;
        font-size:1.4rem;
    }
    .list-box ul li p:not(.list-ttl){
        display: flex;
        align-items: center;
        width:100%;
        font-size:1.4rem;
    }
}