@charset "UTF-8";
/*
Theme Name: Kimlla21
Theme URI: 
Description: Kimura sangyo theme
Version: 1.0
Author: I.G.F.
*/

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

	bootstrap sub css
	
========================================== */

html {
	/* overflow-y: scroll; */
	height: 100%;
	color: rgb(85, 89, 99);
}

body {
	font-family: YakuHanJP, メイリオ, Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif !important;
	color: darkslategrey !important;
	background-color: #ccc !important;
	height: 100%;
	font-size: 1rem !important;
	line-height: 1.8rem !important;
}

h2 {
	font-size: 1.3rem !important;
	font-weight: 600;
	margin: 2.5rem 0 1.5rem !important;
}

h3 {
	font-size: 1.2rem !important;
	font-weight: 600;
	margin: 1rem 0 !important;
}

h4 {
	font-size: 1.1rem !important;
	font-weight: 600;
	margin: 1rem 0 !important;
}

h5 {
	font-size: 1.05rem !important;
	font-weight: 600;
	margin: 1rem 0 !important;
}

h6 {
	font-size: 1.05rem !important;
	font-weight: 600;
	margin: 1rem 0 !important;
}

@media (max-width: 540px) {
	body {
		font-size: 0.9rem !important;
		line-height: 1.7rem !important;
	}

	h2 {
		font-size: 1.2rem !important;
		font-weight: 600;
	}

	h3 {
		font-size: 1.1rem !important;
		font-weight: 600;
	}

	h4 {
		font-size: 1.05rem !important;
		font-weight: 600;
	}

	h5 {
		font-size: 1rem !important;
		font-weight: 600;
	}
}

#header {
	margin-top: 15px;
}

ol,
ul {
	list-style-type: none;
}

a,
a:hover,
a:visited,
a:active {
	color: darkcyan !important;
}

.justify {
	text-align: justify;
}

/* ページフェードイン */

.pagecontent {
	opacity: 1;
	animation: fade 0.7s linear;
}

@keyframes fade {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

/* =======================================
ロゴ
========================================== */

h1 .clearh {
	display: none;
}

.logo-kimlla img {
	display: none;
}

/* 正方形BG */
.rect-wrap {
	width: 100%;
}

.rect {
	width: 100%;
	padding-top: 100%;
	background-color: white;
	background-image: url(img/logo-kimlla.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

@media (max-width: 991.98px) {
	.rect-wrap {
		width: 60%;
	}

	.rect {
		width: 100%;
		padding: 0;
		background-color: white;
		background-image: none;
	}

	.logo-kimlla {
		height: 56px;
	}

	.logo-kimlla img {
		display: block;
		height: 56px;
		width: auto;
	}
}

/* @media (max-width: 540px) {
	.logo-kimlla{
		height:60px;
	}
	.logo-kimlla img{
		height:60px;
		width:auto;
	}
}
@media (max-width: 376px) {
	.rect-wrap {
		width: 50%;
	}
} */

/* =======================================
Nav
========================================== */
.menuarea {
	background-color: #f8f8f8;
}

.navbar-collapse {
	font-size: 0.9rem;
}

li.nav-item {
	position: relative;
}

a.nav-link {
	color: darkcyan !important;
	padding: 0.85rem;
	font-weight: 600;
}

a.nav-link::after {
	position: absolute;
	right: 15px;
	top: 1rem;
	font-family: "Font Awesome 5 pro";
	font-weight: 900;
	font-size: 1.2rem;
	content: "\f0da";
}

a.nav-link:hover {
	background-color: cadetblue;
	color: white !important;
	transition-duration: 0.8s;
}

.navbar {
	position: relative;
	z-index: 9;
}

.navbar-toggler {
	color: rgba(0, 0, 255, 0);
	background-color: #fff !important;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 8px;
	right: 0px;
	box-sizing: border-box;
	outline: none !important;
	border-radius: 0 !important;
}

button:focus {
	outline: none;
}

.plllangsp,
.contactsp {
	display: none;
}

.navbar-toggler-icon {
	background-image: none;
	background-color: #158A8A !important;
	width: 24px !important;
	height: 2px !important;
	display: block;
	position: absolute;
	top: 0;
	left: 5px;
	border-radius: 5px;
	transition: ease 0.5s;
}

.navbar-toggler-icon:nth-of-type(1) {
	top: 9px;
}

.navbar-toggler-icon:nth-of-type(2) {
	top: 17px;
}

.navbar-toggler-icon:nth-of-type(3) {
	top: 25px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(1) {
	top: 17px;
	transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(2) {
	opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(3) {
	top: 17px;
	transform: rotate(-45deg);
}

.navbar-collapse {
	position: static;
	margin-top: 0;
}


@media (max-width: 991.98px) {
	.plllangsp {
		display: block;
		position: absolute;
		top: 16px;
		right: 52px;
	}

	.contactsp {
		display: block;
		position: absolute;
		top: 16px;
		right: 92px;
	}

	.navbar-expand-lg {
		margin-top: 0px;
		border-top: 2px solid #158A8A;
		border-bottom: 2px solid #158A8A;
	}

	.hidesp {
		display: none;
	}
}

/* 言語ボタン */
ul.pllLang {
	padding: 0 1rem;
	margin: 1.5rem 1rem 1rem;
	text-align: center;
	line-height: 1.2rem;
}

ul.pllLang li.lang-item-ja {
	display: inline-block;
	padding: 0 1rem;
	text-align: center;
}

ul.pllLang li.lang-item-ja::before {
	font-family: "Font Awesome 5 pro";
	content: "\f0ac";
	margin-right: 1rem;
	color: #158A8A;
}

ul.pllLang li.lang-item-en {
	display: inline-block;
	padding: 0 1rem;
	text-align: center;
	border-left: 2px solid #158A8A;
}

ul.pllLang li.lang-item a {
	font-weight: 600;
}
ul.pllLang li.lang-item a:hover {
	color: #158A8A;
}

/* 言語ボタンSP */
ul#langhide {
	position: absolute;
	top: 36px;
	left: -20px;
	margin: 0;
	padding: 0 0 0.5rem;
	background-color: white;
	width: 60px;
	border-bottom: 2px #208989 solid;
	z-index: 999;
}

ul#langhide li.lang-item {
	display: block;
	text-align: center;
	padding: 0;
	z-index: 100;
}
ul#langhide li.lang-item a{
	padding:0.5rem 1rem;
}

/* 問い合わせボタン */
li.contact-btn-area {
	text-align: center;
	margin-bottom: 1.5rem;
}

.contact-btn {
	display: inline-block;
	max-width: 290px !important;
	width: 70%;
	height: 40px;
	border: solid 2px #158A8A;
	outline: 0;
	background-color: #158A8A;
	color: #fff;
	font-weight: 600;
	border-radius: 5px;
}

.contact-btn:hover {
	background-color: cadetblue;
	border: solid 2px cadetblue;
	transition-duration: 0.3s;
}

/* 電話 */
.maintelNumarea {
	text-align: center;
	margin: 1.5rem 0;
}

.comName {
	display: inline-block;
	font-weight: bolder;
	color: #186E4A;
}

.maintelNum {
	display: inline-block;
	max-width: 290px !important;
	width: 70%;
	height: 40px;
	font-size: 1.1rem;
	font-weight: 600;
	border: solid 2px #158A8A;
	outline: 0;
	background-color: #158A8A;
	color: #fff;
	border-radius: 5px;
}

.maintelNum:hover {
	background-color: cadetblue;
	border: solid 2px cadetblue;
	transition-duration: 0.3s;
}

/* ドロップダウンメニュー */
ul.dropdown-menu {
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 8px;
	border-top: 1px solid cadetblue;
	border-right: 1px solid cadetblue;
	border-left: 1px solid cadetblue;
	background-color: white;
	width: 96%;
}

ul.dropdown-menu a {
	text-decoration: none;
}

li.dropdown-item {
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.8rem 2rem 0.5rem 0.8rem;
	color: #158A8A;
	line-height: 1.3rem;
	border-bottom: 1px solid cadetblue;
}

li.dropdown-item:hover,
li.dropdown-item:active {
	color: white;
	background-color: cadetblue;
}

li.dropdown-item::after {
	position: absolute;
	right: 10px;
	bottom: 0.5rem;
	font-family: "Font Awesome 5 pro";
	font-weight: 900;
	font-size: 1rem;
	content: "\f0da";
}

/* =======================================
検索フォーム
========================================== */
ul.serchform {
	padding: 0;
	margin: 1.5rem 1rem 1rem;
	text-align: center;
}

ul.serchform input {
	text-align: center;
}

#s-box {
	height: 40px;
	padding: 0 10px;
	width: 70%;
	border-radius: 5px;
	border: solid 2px #158A8A;
	outline: 0;
	display: inline-block;
	color: #158A8A;
}

#s-btn-area {
	display: inline-block;
	width: 36px;
	height: 40px;
	font-size: 20px;
	outline: 0;
	border: none;
	color: #158A8A;
	background-color: #f8f8f8;
	border-radius: 5px;
}

/* #s-btn{
	background-color: #158A8A;
	width: 100%;
	height: 40px;
	border-radius: 3px;
	font-size: 16px;
	color: #fff;
   } */
/* =======================================
Page シングルページ カスタムページ
========================================== */
.pagelead {
	margin: 2rem 0 0;
	padding: 1rem 0;
	max-height: 999999px;
	border-bottom: darkslategrey 1px solid;
	border-top: darkslategrey 1px solid;
}

.businessitems {
	width: 31%;
	margin: 6px;
	background-color: #f8f8f8;
	overflow: hidden;
}

.businessitems img {
	width: 100%;
	height: auto;
	transition-duration: 0.3s;
}

@media (max-width: 991.98px) {
	.businessitems {
		width: 40%;
		margin: 6px;
	}
}

@media (max-width: 540px) {
	.businessitems {
		width: 66%;
		margin: 6px;
	}

}

@media (max-width: 376px) {
	.businessitems {
		width: 75%;
		margin: 6px;
	}

	.pagelead {
		text-align: left;
	}
}

.businessitems a img:hover {
	transform: scale(1.1);
	transition-duration: 0.3s;
}

.topicitem {
	width: 31%;
	margin: 6px;
	background-color: #edf7f09c;
	border: 1px solid #9dc0aa9c;
	border-radius: 10px;
	padding: 0 10px;
	;
}

.topicitem h4 {
	height: 3rem;
	display: flex;
	align-items: center;
	margin-left: 10px;
	border-left: 10px solid #158a8aa6;
	padding: 0 0 0 0.5rem;
	word-break: break-word;
}

.topicitem img {
	max-width: 100%;
	height: auto;
}

.topicitem p {
	font-size: 0.95rem;
	line-height: 1.7rem;
}

@media (max-width: 991.98px) {
	.topicitem {
		width: 45%;
		margin: 6px;
	}
}

@media (max-width: 540px) {
	.topicitem {
		width: 80%;
		margin: 6px;
	}
}

@media (max-width: 376px) {
	.topicitem {
		width: 85%;
		margin: 6px;
	}
}

.postitem {
	font-size: 0.95rem;
	line-height: 1.5rem;
	margin-bottom: 0.5rem;
}

p.postitem {
	display: flex;
}

.itemdate {
	display: inline-block;
	width: 22%;
	vertical-align: top;
}

.posttitle {
	display: inline-block;
	width: 78%;
}

.posttitle img {
	/* border: 1px solid #ccc; */
	background-color: #fff;
}

@media (max-width: 540px) {
	p.postitem {
		display: block;
	}

	.itemdate {
		width: 100%;
	}

	.posttitle {
		width: 100%;
		padding-left: 1rem;
	}
}

.rightarea {
	background-color: #EEEEEE;
}

h2#singlepage {
	padding-bottom: 0.5rem;
	border-bottom: solid 3px #ccc;
}

h2#singletopic {
	padding: 0.5rem 1.5rem;
	background-color: #EDAA7E;
	border-radius: 20px;
	color: white;
}

#biz-activities h2 {
	padding: 0.5rem 1.5rem;
	background-color: #89ABD7;
	border-radius: 20px;
	color: white;
}

#biz-activities h5 {
	padding: 0.5rem;
	margin-bottom: 0 !important;
	width: calc(100% - 10px);
	border-bottom: #ccc 1px solid;
}

#biz-activities h7 {
	border-left: #8AABD4 8px solid;
	padding-left: 0.5rem;
}
#singlepage h1,
#singlepage h2,
#singlepage h3,
#singlepage h4,
#singlepage h5,
#singlepage h6{
	padding-left: 4px;
	font-weight: bold;
	border-left: solid 12px #CCC;
	padding-left: 4px;
}
#singlepage ul li{
	margin: 0 0 -0.3rem -1rem;
	padding-left: 0;
	list-style-type: disc;
}
#singlepage ol li{
	margin: 0 0 -0.3rem -1rem;
	padding-left: 0;
	list-style-type: decimal;
}
#singlepage blockquote{
	margin: 1rem;
	padding: 0.5rem;
	background-color: #f8f8f8;
}
#singlepage blockquote p{
	margin-bottom: 0;
}
.postimg img {
	max-width: 100%;
	height: auto;
}
#singletopic h1,
#singletopic h2,
#singletopic h3,
#singletopic h4,
#singletopic h5,
#singletopic h6{
	border-left: solid 12px #EBAB83;
	padding-left: 4px;
}
#singletopic ul li{
	margin: 0 0 -0.3rem -1rem;
	padding-left: 0;
	list-style-type: disc;
}
#singletopic ol li{
	margin: 0 0 -0.3rem -1rem;
	padding-left: 0;
	list-style-type: decimal;
}
#singletopic blockquote{
	margin: 1rem;
	padding: 0.5rem;
	background-color: #f8f8f8;
}
#singletopic blockquote p{
	margin-bottom: 0;
}
#singletopic ul.stylesquare {
	list-style: square;
	padding-left: 2.5rem;
}

#singletopic ul.styledecimal {
	list-style: decimal;
	padding-left: 2.5rem;
}

#singletopic ul.stylesquare li,
#singletopic ul.styledecimal li {
	margin-left: -1rem;
	padding-left: 0.25rem;
}
#singletopic dl.hydrafence_table{
	display: flex; 
	flex-wrap: wrap;
	border-bottom: 1px solid #ccc;
}
#singletopic .hydrafence_table dt,
#singletopic .hydrafence_table dd{
	box-sizing: border-box;
	padding: 0.5rem;
	border-top: 1px solid #ccc;
}
#singletopic .hydrafence_table dt{
	width: 20%;
	background-color: #f8f8f8;
}
#singletopic .hydrafence_table dd{
	width: 80%;
}
@media (max-width: 540px) {
	#singletopic .hydrafence_table dt{
		width: 100%;
		background-color: #f8f8f8;
	}
	#singletopic .hydrafence_table dd{
		width: 100%;
		border-top: none;
	}
}
ol.stylenum {
	list-style: decimal;
	margin-top: 2rem;
}

ol.stylenum li {
	margin-left: -1rem;
	padding-left: 0.25rem;
	padding-bottom: 0.5rem;
	line-height: 1.5rem;
}

.bizlist {
	display: grid;
	width: calc(100% - 10px);
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	grid-auto-rows: auto;
	grid-template-columns: 25% 75%;
	border-bottom: 1px solid #ccc;
}

.bizlist .box-item,
.bizlist .box-title {
	font-size: 0.85rem;
	padding: .2rem .2rem .2rem .35rem;
	color: #444;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
}

.bizlist .box-title {
	font-weight: 600;
	background-color: #f8f8f8;
}

@media screen and (max-width: 736px) {
	.bizlist {
		grid-auto-columns: auto;
		max-height: 400px;
		overflow-y: scroll;
		overflow-scrolling: touch;
	}

	.bizlist .box-item {
		grid-column: 1 / 3;
	}

	.productlist {
		height: 400px;
	}
}

.productlist {
	display: grid;
	width: calc(100% - 10px);
	height: 600px;
	overflow: scroll;
	overflow-scrolling: touch;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	grid-auto-rows: auto;
	grid-template-columns: 150px 220px 150px 220px 200px 130px 130px 280px 250px;
}

@media print {
	.productlist {
		display: none;
	}
}

.productlist-print {
	display: grid;
	background-color: white;
	width: 100%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	grid-auto-rows: auto;
	grid-template-columns: 10% 12% 9% 12% 10% 9% 9% 17% 12%;
}

.productlist .box-item,
.productlist .box-title {
	font-size: 0.85rem;
	padding: .1rem .2rem .1rem .35rem;
	color: #444;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
	line-height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.productlist-print .box-item,
.productlist-print .box-title {
	font-size: 0.9rem;
	padding: .1rem .2rem .1rem .35rem;
	color: #444;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
	line-height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.productlist-print .box-title,
.productlist .box-title {
	font-weight: 600;
	background-color: #f8f8f8;
}

#biz-activities .card {
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #ccc;
	border-left: 0;
	border-radius: 0;
	margin-bottom: 1rem;
}

#biz-activities .card img {
	width: 100%;
	height: auto;
}

#biz-activities .card .card-title {
	text-align: center;
	background-color: #f8f8f8;
	padding: 0.5rem 0;
}

#biz-activities .card p {
	font-size: 0.9rem;
	line-height: 1.5rem;
}

@media screen and (max-width: 991.98px) {
	#biz-activities .card img {
		width: 60%;
		display: inline-block;
		margin: 0 auto;
	}
}

#sustainability h2{
	font-size: 1.5rem;
	font-weight: 600;
	color: #186E4A;
	border-bottom:solid 2px #158A8A;
}
#sustainability h3{
	padding-left: 0.5rem;
	border-left: 12px solid #186e4a;
	color: #186E4A;
	font-weight: 600;
}
#sustainability h4.sus{
	font-size: 1.1rem;
	font-weight: 600;
}
#sustainability h5{
	font-size: 1rem;
	font-weight: 600;
}
#sustainability ul.sus li{
	margin: 0 0 0.5rem 0rem;
	padding-left: 0;
	list-style-type: disc;
	line-height: 1.5rem;
}

#company h2,
#privacy h2{
	padding-left: 0.5rem;
	border-left: 12px solid #89BDA8;
}
.company-sheet{
	display: grid;
	width: calc(100% - 5px);
	border-top: 1px solid #ccc;
	/* border-left: 1px solid #ccc; */
	grid-auto-rows: auto;
	grid-template-columns: 22% 78%;
	/* border-bottom: 1px solid #ccc; */
	}
.company-sheet .sheet-title,
.company-sheet .sheet-item {
	font-size: 0.95rem;
	padding: .5rem .25rem .5rem .35rem;
	color: #444;
	/* border-right: 1px solid #ccc; */
	border-bottom: 1px solid #ccc;
	background-color: #fff;
	line-height: 1.5rem;
	/* display: flex;
	align-items: center; */
}
.company-sheet .sheet-title{
	background-color: #f8f8f8;
}
@media screen and (max-width: 736px) {
	.company-sheet .sheet-item,
	.company-sheet .sheet-title {
		grid-column: 1 / 3;
	}
	.company-sheet .sheet-title {
		border-bottom: 0;
	}
}
ol.policy {
	list-style: decimal;
	padding-left: 2.5rem;
}

ol.policy li {
	margin-left: -1rem;
	padding-left: 0.25rem;
}

.inquiry{
	display: grid;
	width: calc(100% - 5px);
	border-top: 1px solid #ccc;
	/* border-left: 1px solid #ccc; */
	grid-auto-rows: auto;
	grid-template-columns: 25% 75%;
	/* border-bottom: 1px solid #ccc; */
	}
.inquiry .inquiry-title,
.inquiry .inquiry-item {
	font-size: 0.95rem;
	padding: .5rem .25rem .5rem .35rem;
	color: #444;
	/* border-right: 1px solid #ccc; */
	border-bottom: 1px solid #ccc;
	background-color: #fff;
	line-height: 1.5rem;
	/* display: flex;
	align-items: center; */
}
.inquiry .inquiry-title{
	background-color: #f8f8f8;
}
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-company"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-phone"],
.wpcf7 input[name="your-subject"],
.wpcf7 textarea[name="your-message"] {
        width: calc(100% - 5px);
		border: 1px solid #ccc;
}
.wpcf7-submit{
	width:100px;
	border-radius: 5px;
	border:1px solid #ccc;
}
@media screen and (max-width: 736px) {
	.inquiry{
		border-top: 0;
	}
	.inquiry .inquiry-item,
	.inquiry .inquiry-title {
		grid-column: 1 / 3;
	}
	.inquiry .inquiry-title {
		padding: .5rem .25rem .5rem .35rem;
	}
	.inquiry .inquiry-item {
		border-bottom: 0;
	}
}

.wp-pagenavi span.current{
	background-color: darkcyan;
	color: white;
}
.wp-pagenavi span.pages{
	display:none;
}
/* =======================================
検索結果ページ
========================================== */
#searchpage h2 {
	padding-bottom: 0.5rem;
	border-bottom: double 3px #ccc;
}


/* =======================================
Footer
========================================== */
.footermenu {
	height: auto;
	padding: 1rem 0 3rem;
	background-color: #EEEEEE;
}

ul.footerlist {
	padding-left: 0;
}

ul.footerlist li {
	line-height: 1.3rem;
	margin-bottom: 0.8rem;
	font-size: 0.95rem;
}

ul.footerlist li::after {
	font-family: "Font Awesome 5 pro";
	font-weight: 900;
	font-size: 1rem;
	content: "\f0da";
	margin-left: 0.5rem;
	color: darkcyan;
}

ul.footerlist li img {
	background-color: #fff;
}

.footer {
	background-color: #0f6f47;
	position: relative;
}

.footer-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	color: white;
	text-align: center;
}

/* ページトップ・ボタン */
/* パソコン・スマホ共通のCSS */
#PageTopBtn {
	display: inline-block;
	position: absolute;
	z-index: 3;
	top: -30px;
	right: 15px;
	opacity: 1;
	background-color: #0f6f47;
	padding: 0.5rem 0;
	border-radius: 10%;
}

#PageTopBtn a {
	display: block;
	text-decoration: none;
	color: #fff !important;
	text-align: center;
	outline: none;
	/*クリックしたときの黒い枠を消す*/
}

#PageTopBtn:hover {
	text-decoration: none;
	background-color: darkcyan;
	transition: all 0.3s;
}

/* パソコンで表示する場合のCSS */
@media (min-width: 768px) {
	#PageTopBtn {
		font-size: 36px;
		/*文字のサイズ*/
	}

	#PageTopBtn a {
		padding: 0 14px 6px;
		/*文字の配置場所の調整*/
	}
}

/* スマホで表示する場合のCSS */
@media (max-width: 767px) {
	#PageTopBtn {
		font-size: 32px;
		top: -40px;
	}

	#PageTopBtn a {
		padding: 0 12px 5px;
	}
}