@charset "UTF-8";
/*----------------------------------------------------------
更新日：2025年07月29日
=PC(960以上)
=PC & タブレット(960以下)
=スマホ(768px以下)
-------------------------------------------------------------*/
/*==================================================================
  Top page
===================================================================*/
/* #keyv
------------------------------------------------------*/
#keyv {
 text-align: center;
 color: #FFF;
 min-height: 740px;
 align-items: center;
 background: #C5E7FF url("../img/top/keyv_bg.webp") no-repeat center bottom;
 background-size: cover;
 display: flex;
 position: relative;
}
#keyv .mainTxt {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 height: 100%;
 padding: 0 1.5em;
 position: relative;
 max-width: 1380px;
 margin: 0 auto;
}
#keyv .keyvPic {
 display: inline-block;
 position: relative;
}
#keyv .mainTxt .name {
 color: #FFF;
 font-size: 1.4em;
 font-family: 'Oswald', sans-serif;
 line-height: 1.5;
 letter-spacing: 0.1em;
 padding: 0 0.5em 0 0.7em;
 margin: 0 0 2em;
 background: rgba(239, 237, 38, 0.2) linear-gradient(90deg, rgba(30, 217, 79, 0.90), rgba(239, 237, 38, 0.75));
}
#keyv .mainTxt .catch {
 font-size: 1.6em;
 font-weight: 700;
 text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
 margin: 1.5em 0 0;
}
#keyv .mainTxt .catch span {
    position: relative;
}
#keyv .mainTxt .catch span:before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: -2.2em;
    width: 1.5em;
    height: 2px;
    margin-top: -6px;
    background-color: #FFF
}
#keyv .mainTxt .catch span:after {
    content: '';
    position: absolute;
    bottom: 50%;
    right: -2em;
    width: 1.5em;
    height: 2px;
    margin-top: -6px;
    background-color: #FFF
}

#keyv .breadcrumbs {
 top: auto;
 bottom: 0.5em;
}
#keyv .breadcrumbs, #keyv .breadcrumbs a, #keyv .breadcrumbs .current-item {
 color: rgba(255, 255, 255, 0.8);
}
@media only screen and (max-width:1024px) {
 #keyv {
  min-height: 600px;
 }
 #keyv .keyvPic {
  min-width: 240px;
 }
}
@media only screen and (max-width:768px) {
 #keyv {
  background: #FFF url("../img/top/keyv_bg.webp") no-repeat 40% center;
  background-size: cover;
  min-height: 400px;
 }
 #keyv .mainTxt {
  padding-top: 8vw;
 }
 #keyv .mainTxt .name {
  font-size: 1em;
  margin: 0 0 1em;
 }
 #keyv .mainTxt .catch {
  font-size: 1em;
  margin: 1em 0 0;
 }
 #keyv .keyvPic {
 }
}
/* .sec
------------------------------------------------------*/
.sec .topTxt {
 text-align: center;
 margin-bottom: 2em;
 padding: 0 4em;
}
@media only screen and (max-width:768px) {
 .sec .topTxt {
  padding: 0;
  text-align: left;
 }
}
/* #about
------------------------------------------------------*/
#about {
	background: #fff url("../img/top/about_bg.webp") no-repeat 50% 50%;
	background-size: cover;
}
#about .inner {
	display: flex;
	justify-content: space-between;
}
#about .inner .txtBox {
	width: 55%;
}
#about.sec header {
	margin-bottom: 1.5em;
}
#about .inner .txtBox .headline1 {
	text-align: left;
}
#about .inner .txtBox ul {
 margin: 1em 0;
}
#about .inner .txtBox ul li {
 font-size: 1.2em;
 font-weight: 700;
 line-height: 1.4;
 margin: 0 0 0.3em;
 display: flex;
}
#about .inner .txtBox ul li .icon {
 line-height: 1.3;
 text-align: center;
 width: 100%;
 max-width: 20px;
 margin: 0 0.3em 0 0;
}
#about .inner .picBox {
 width: 38%;
}
@media only screen and (max-width:768px) {
	#about {
		padding: 3em 1em;
	}
 #about .inner {
  flex-direction: column;
 }
 #about .inner .txtBox {
  width: 100%;
 }
 #about .inner .txtBox .headline1 {
  text-align: center;
 }
 #about .inner .txtBox ul li .icon {
  max-width: 5vw;
 }
 #about .inner .picBox {
  width: 100%;
	margin-top: 0.5em;
 }
}
/* #edgeAdvan
------------------------------------------------------*/
#edgeAdvan {
	padding: 5em 0 3em;;
	background-color: #f8f8f8;
}
#edgeAdvan .point {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 0;
}
#edgeAdvan .point li {
	flex-basis: 31%;
	margin: 0 0 2em;
	padding: 2em;
	background: #FFF;
	line-height: 1.8;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0px 1px 7px rgba(0, 0, 0, .1);
}
#edgeAdvan .point .pic {
	text-align: center;
}
#edgeAdvan .point .pic img {
	max-height: 90px;
}
#edgeAdvan .point .title {
	color: #111;
	font-size: 1.3em;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 1em 1em 0.5em;
}
@media only screen and (max-width:1080px) {
	#edgeAdvan {
		padding: 5em 1em 3em;
	}
}
@media only screen and (max-width:768px) {
	#edgeAdvan {
		padding: 3em 0 2em;
	}
	#edgeAdvan:before, #edgeAdvan:after {
		background-attachment: inherit;
		background-size: 90%;
	}
	#edgeAdvan .point {
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	#edgeAdvan .point li {
		margin: 0 0 1.5em;
		padding: 1em 1.5em;
	}
	#edgeAdvan .point .title {
		min-height: inherit;
		font-size: 1.1em;
	}
}
@media only screen and (max-width:450px) {
 #edgeAdvan .point .pic img {
  max-height: 80px;
 }
}
/* #product
------------------------------------------------------*/
#product {
	padding: 5em 0 3em;
}
#product .productList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 0;
}
#product .productList li {
	width: 47%;
	margin-bottom: 3em;
}
#product .productList li a:hover{
	opacity: 0.7;
}
#product .productList li .txt {
	background-color: #f3f3f3;
	padding: 1em 1.5em 1.5em;
	background-image: linear-gradient(-45deg, #02b362 42px, transparent 0);
	position: relative;
}
#product .productList li .txt:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	content: "\f054";
	color: #FFF;
	font-size: 1.2em;
	line-height: 1;
	position: absolute;
	bottom: 8px;
	right: 10px;
}
#product .productList li .title {
	font-size: 1.25em;
	font-weight: 700;
	margin-bottom: 0.5em;
	line-height: 1.5;
}
@media only screen and (max-width:1080px) {
	#product {
		padding: 5em 1em 3em;
	}
}
@media only screen and (max-width:768px) {
	#product {
		padding: 3em 1em;
	}
 #product .productList li {
  width: 100%;
  margin-bottom: 1em;
 }
 #product .productList li .pic img {
  width: 100%;
 }
}
