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

/*========== .dotted-border ==========*/
.dotted-border {
	line-height: 2.5em;
	padding-bottom: 1px;
	box-sizing: border-box;
}

.cont01 .dotted-border {
	background-color: #f9f5f0;
	background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);
	background-size: 100% 2.5em;
}
.area01 .dotted-border {
	background-color: #fff;
	background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);
	background-size: 100% 2.5em;
}
.cont03 .dotted-border {
	background: linear-gradient(180deg, #2c2821 1px, transparent 1px), url(../images/bg_tree.png) top center;
    background-size: 100% 2.5em, 100%;
}
.dotted-border p {
	line-height: 2.5em;
	margin-bottom: 0;
}
.dotted-border br {
	line-height: 2.5em;
}
sub { vertical-align: baseline; }

/*========== philosophy ==========*/
.philosophy_area {
    width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: #f9f5f0;
}
.philosophy_area h4.ttl {
    width: fit-content;
    margin: 0 auto 30px;
    font-size: 2.6rem;
    color: #089564;
    padding-left: 0;
    border: solid 2px #089564;
    padding: 0 40px;
}
.philosophy_area h4.ttl:before {
	display: none;
}

/*========== factory ==========*/
.factory_wrap {
    position: relative;
}
.factory_wrap .text_wrap {
    position: absolute;
	top: 0;
	left: 0;
}
.factory_wrap h4 {
	position: relative;
	width: fit-content;
	font-size: 2.4rem;
	padding-right: 40px;
	border-bottom: solid 4px #29a86e;
}
.factory_wrap h4:before {
	position: absolute;
    display: block;
    content: '';
    bottom: -4px;
    left: 0;
    width: 30%;
    height: 4px;
    background: url(../images/bg_tree.png) no-repeat;
}
.factory_wrap ol {
	display: flex;
	gap:50px;
	flex-wrap: wrap;
    align-items: flex-end;
}
.factory_wrap ol li {
    position: relative;
}
.factory_wrap ol li p{
	min-height: 30px;
}
.factory_wrap ol li.p_no:after {
	position: relative;
	display: block;
	content: '';
	height: 30px;
}
.factory_wrap ol.col4 li {
	width: calc((100% - 150px) / 4);
}
.factory_wrap ol.col3 li {
	width: calc((100% - 100px) / 3);
}
.factory_wrap ol.col3 li img,
.factory_wrap ol.col4 li img{
	width: 100%;
	height: auto;
}
.factory_wrap ol li:before {
    position: absolute;
    display: block;
    content: '';
    bottom: 50%;
    right: -41px;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 27px solid #059664;
}
.factory_wrap ol li:last-child:before {
	display: none;
}
/*========== contact ==========*/
.contact_wrap {
    display: flex;
	flex-wrap: wrap;
	gap: 50px;
}
.contact_wrap h3 {
	font-size: 3rem;
	padding-bottom: 10px;
    border-bottom: solid 4px #29a86e;
    margin-bottom: 20px;
	position: relative;
}
.contact_wrap h3:before {
	position: absolute;
    display: block;
    content: '';
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 4px;
    background: url(../images/bg_tree.png) no-repeat;
}
.contact_wrap .main_info,
.contact_wrap .factory_info{
	width: calc((100% - 50px) / 2);
	text-align: center;
	background: #fff;
	padding: 30px;
	box-sizing: border-box;
	box-shadow: 10px 10px #ededed;
}
.contact_wrap .tel_wrap {
	text-align: center;
}
.contact_wrap .tel_wrap a {
    display: block;
	width: fit-content;
	margin: 0 auto;
    text-decoration: none;
    color: #2c2821;
    font-family: 'Bebas Neue';
    font-size: 6.5rem;
    letter-spacing: 0.2rem;
    vertical-align: middle;
    background: url(../images/icon/icon_tel_bk.svg) no-repeat left top 45%;
	line-height: 1;
    padding-left: 60px;
    box-sizing: border-box;
}
.ol_gray li {
    border: solid 2px #ddd;
    padding: 5px 8px;
    box-sizing: border-box;
	background: #fff;
}
@media  print, screen and (max-width: 767px) {
	.factory_wrap .text_wrap {
	    position: static;
	    text-align: center;
	}
	.factory_wrap h4 {
	    font-size: 2rem;
	    margin: 0 auto;
	    padding: 0 30px;
	}
	.factory_wrap ol {
		gap: 30px;
	    justify-content: center;
	}
	.factory_wrap ol.col3 li,
	.factory_wrap ol.col4 li{
		width: 100%;
	}
	.factory_wrap ol li:before {
	    top: auto;
        bottom: -20px;
        right: auto;
        left: 50%;
        transform: translateY(0) translateX(-50%);
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        border-top: 15px solid #059664;
        border-bottom: 0;
	}
	.factory_wrap ol li.p_no:after {
		display: none;
	}
	/*========== contact ==========*/
	.contact_wrap {
	    gap: 30px;
	}
	.contact_wrap .main_info, .contact_wrap .factory_info {
	    width: 100%;
	    box-shadow: 5px 5px #ededed;
	    padding: 15px;
	}
	.contact_wrap h3 {
	    font-size: 2.5rem;
	}
	.contact_wrap .tel_wrap a {
	    font-size: 5rem;
	    margin-top: 5px;
	    background-size: 40px auto;
	    background-position: left top 5%;
	    padding-left: 50px;
	}
}
.profile {
    position: relative;
}
.profile .name {
    position: absolute;
    bottom: 20px;
    left: -20px;
    z-index: 2;
    background: #089564;
    color: #fff;
    padding: 5px 20px;
    font-size: 2.5rem;
    font-weight: 500;
}
@media  print, screen and (max-width: 767px) {
	.profile .name {
		bottom: 10px;
		left: -10px;
		font-size: 2rem;
	}
	.philosophy_area {
	    width: 100%;
	    padding: 20px;
	}
	.philosophy_area h4.ttl {
	    margin: 0 auto 15px;
	    font-size: 2rem;
	}
}
.column_area.merit {
	display: block;
	padding: 40px 40px 40px 0;
    background: url(../images/bg_package-merit.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
}
.column_area.merit .text_wrap {
    width: 600px;
	margin-left: auto;
    background: rgba(32, 61, 51, 0.65);
    padding: 40px;
    box-sizing: border-box;
	color: #fff;
}
.column_area.merit p.catch.line_g {
    color: #fff;
    border-color: #fff;
}
.column_area.merit ul {
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}
.column_area.merit ul li {
    border: solid 2px #fff;
    border-radius: 50%;
    box-sizing: border-box;
	width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.column_area.merit .bg_g {
	width: 600px;
	margin-left: auto;
    background: #10a873;
    color: #fff;
    padding: 5px 20px;
    font-size: 2rem;
    font-weight: 600;
}
@media  print, screen and (max-width: 767px) {
	.column_area.merit {
		background: #35312d url(../images/bg_package-merit_sp.jpg) no-repeat top center;
		background-size: 100% auto;
        padding: 200px 20px 20px;
	}
	.column_area.merit .text_wrap {
		width: 100%;
		padding: 15px;
	}
	.column_area.merit ul {
		gap: 10px;
		justify-content: center;
	}
	.column_area.merit ul li {
	    width: 140px;
	    height: 140px;
	}
	.column_area.merit .bg_g {
	    width: 100%;
	    font-size: 1.6rem;
	    padding: 5px 10px;
	}
}