@charset "UTF-8";

/***************************************
ロゴカラー　color:#43AF34; color:rgb(67,175,52)}
濃緑	#009A44	rgb(0,154,68)}
黄緑	#ABCD07	rgb(171,205,7)}
切替　1000px 768px
****************************************/

/**************初期設定**************/
* { margin:0; padding:0;}
html { height:100%; margin:0; min-height:100%;}
body { height:100%; margin:0; padding:0; font-size:18px; color:#444; background-color:#fff; line-height:100%; letter-spacing:0; font-family:Arial, "メイリオ", Meiryo, "MS PGothic", sans-serif; box-sizing:border-box;}
	@media only screen and (max-width: 1000px){
	body {font-size:95%;}
	}

/*** 文字基本 ***/
p { line-height:2.0; margin:0; margin-bottom:1em; letter-spacing:1px;}
table,th,td,ul,ol,li,dl,dt,dd,blockquote { line-height:1.8; letter-spacing:0.5px; margin:0; padding:0;}
ul, ol, table, dl {margin-bottom:1em;}
li {margin-bottom:0.5em;}
ul { list-style:none;}
ol li { margin-left:2em;}
li ul,
li ol { margin-left:1em; margin-top:0.5em;}

/* a */
a { color:#43AF34; text-decoration:none; transition:0.2s;}
a:hover { color:#43AF34; text-decoration:underline;}

/* img */
img { border:0; vertical-align:bottom; max-width:100%;}
a img { transition:0.3s;}
a:hover img { opacity:0.5;}

/* 装飾 */
span { }
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; float:none; }
.small { font-size:small;}
.kome { text-indent:-1em; margin-left:1em;}

/* dl */
dl {}
dt { font-weight:bold;}
dd {}

/* hr */
hr { border:none;overflow:hidden; clear:both;}
.hr_clear { border:none; margin:30px 0; height:1px;}
.hr_line { border-bottom:1px solid #ddd; padding:30px 0 0 0; margin:0 0 50px 0;}
	@media only screen and (max-width: 640px){
	.hr_clear { margin:20px 0;}
	}

/* table */
table { border-collapse:collapse; border-spacing:0; margin:0 auto 1em auto; padding:0;}

/* 見出し */
h1, h2, h3, h4, h5, h6 { font-size:100%; line-height:100%; font-weight:bold; margin:0; padding:0;}
h2,h3,h4,h5{line-height:1.5;}
h2{ font-size:8vw; margin-bottom:100px; color:#43AF34; text-align:center; letter-spacing:2vw;}
h3{ font-size:3.5vw; margin-bottom:1.5em; color:#43AF34; letter-spacing:0.3vw;}
	@media only screen and (max-width: 769px){
	h2 {font-size:max(10vw,64px); margin-bottom:50px;}
	h3 { font-size:max(5vw,32px); margin-bottom:0.5em;}
	}


/*** loading ***/
/*#loading{ position:absolute; left:calc(50% - 125px); top:40%;}
#loader-bg { position:fixed; width:100%; height:100%; top:0px; left:0px; background:#FFF; z-index:20; overflow-y:auto;}*/

body { -webkit-animation:fadeIn 3s ease 0s 1 normal; animation:fadeIn 3s ease 0s 1 normal;}
@keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }
@-webkit-keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }



/*----- レイアウト設定 -----*/
#wrapper { width:100%; position:relative; margin:0 auto; padding:80px 0 0 0;}
.main { margin:0 auto 200px auto;}
section {position:relative; transition:0.3s;}

	@media only screen and (max-width: 1000px){
	#wrapper {padding-top:60px;}
	}


/*** header ***/
header { width:100%; background:rgba(255,255,255,0.9); position:fixed; top:0; z-index:2;}
.head {width:95%; height:80px; margin:0 auto; position:relative; transition:0.2s;}
header .logo {position:absolute; left:0; top:13px; transition:0.2s}
header .logo img { width:auto; height:54px;vertical-align: middle;}
@media(max-width:750px){ /*横幅750px以下の時に非表示*/
header .logo .logo-dial { display:none !important;}
}

/* 縮小時 */
header.smaller .head { height:60px;}
header.smaller .head .logo { top:10px;}
header.smaller .head .logo img { height:40px;}
	@media only screen and (max-width: 1000px){
	.head { height:60px;}
	header .logo {top:10px;}
	header .logo img{height:40px;}
	}

/*** ナビゲーション ***/
#toggle { display:none;}
.toggleWrap { background:none; height:auto; position:static; padding:0;}
.animation { -webkit-transition:none; transition:none;}
.hide { opacity:1; visibility:visible;}

	@media only screen and (max-width: 1000px){
	#toggle { display:block; color:#43AF34; text-align:center; width:50px; height:50px; 
		position:absolute; top:5px; right:0; z-index:11;
		display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;
		-webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;
		-webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center;
		cursor:pointer; transition:0.3s;}
	header.smaller #toggle { top:5px;}

	#toggle .trigger,
	#toggle .trigger span { display:inline-block; -webkit-transition:all .4s; transition:all .4s; box-sizing:border-box;}
	#toggle .trigger { position:relative; width:40px; height:26px;}
	#toggle .trigger span { position:absolute; left:0; width:100%; height:2px; background-color:#43AF34;}
	#toggle .trigger span:nth-of-type(1) { top:0;}
	#toggle .trigger span:nth-of-type(2) { top:12px;}
	#toggle .trigger span:nth-of-type(3) { bottom:0;}
	#toggle .trigger.active { -webkit-transform:rotate(360deg); transform:rotate(360deg);}
	#toggle .trigger.active span:nth-of-type(1) { -webkit-transform:translateY(12px) rotate(-45deg); transform:translateY(12px) rotate(-45deg);}
	#toggle .trigger.active span:nth-of-type(2) { -webkit-transform:translateY(0) rotate(45deg); transform:translateY(0) rotate(45deg);}
	#toggle .trigger.active span:nth-of-type(3) { opacity:0;}

	.toggleWrap { background:rgba(255,255,255,0.9); padding:0; position:fixed; top:60px; left:0; width:100%; height:calc(100vh - 60px); z-index:10; overflow:auto; 
			display:flex; margin:0 auto; align-items:center; justify-content:center; flex-direction:column;}

	.hide { opacity:0; visibility:hidden; overflow:hidden;}
	.animation { -webkit-transition-property:opacity, visibility; transition-property:opacity, visibility;
			-webkit-transition-duration:0.3s; transition-duration:0.3s;
			-webkit-transition-timing-function:ease-in; transition-timing-function:ease-in;}
	.no-scroll { overflow:hidden;}
	}


/* nav */
nav { position:absolute; right:0; top:23px; transition:0.2s;}
nav ul {display:flex; flex-wrap:wrap;}
nav li {font-size:19px; font-weight:bold; margin-left:15px; letter-spacing:2px;}
nav a { display:block; padding:0 10px; position:relative;}
nav a:hover { text-decoration:none; color:#fff;}
nav a:after{content:""; display:block; width:0; height:100%; background:#43AF34; position:absolute; top:0; left:0; z-index:-1; transition:0.3s;}
nav a:hover:after{width:100%; transition:0.3s;}

/* 縮小時 */
header.smaller nav {top:16px;}
header.smaller nav li {font-size:16px;}

	@media only screen and (max-width: 1000px){
	nav,
	header.smaller nav { position:relative; left:auto; right:auto; top:10px;}
	nav ul {display:inherit; text-align:center;}
	nav li,
	header.smaller nav li {font-size:6vw; margin:3vh 0; letter-spacing:1vw}
	nav a { padding:1vh 0;}
	}


/*** slider ***/
#slider { margin-bottom:150px; position:relative; transition:0.5s;}
.swiper-container { width:100%; height:calc(100vh - 90px);}
.swiper-slide { position:relative; background-repeat:no-repeat; background-size:cover; background-position:center;}
.slide-inner {display:flex; width:80%; margin:50px auto; height:calc(95vh - 130px); align-items:center; justify-content:center; flex-direction:column;}
.slide-inner p { text-align:center; color:#fff; text-shadow:0px 0px 20px rgba(0,0,0,0.7);}
	@media only screen and (max-width: 1000px){
	#slider { margin-bottom:0;}
	.swiper-container { width:100%; height:calc(95vh - 60px);}
	.slide-inner { width:90%; height:calc(90vh - 90px);}
	}

/*pagination*/
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom:90px;}
.swiper-pagination-bullet { width:4vw; height:5px; display:inline-block; border-radius:8px; background:#fff; opacity:0.5;}
.swiper-pagination-bullet-active { opacity:1; background:#43AF34;}

	@media only screen and (max-width: 1000px){
	.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom:60px;}
	.swiper-pagination-bullet { width:10vw;}
	}


/*アニメーション*/
.swiper-slide-active .ani0 { animation:fade 3.0s ease 0s 1 normal;}
.swiper-slide-active .ani1 { animation:fade 0.0s ease 0s 1 normal;} /* up */
.swiper-slide-active .ani2 { animation:up 3.0s ease 0s 1 normal;}
.swiper-slide-active .ani3 { animation:up 4.0s ease 0s 1 normal;}
.swiper-slide-active .ani4 { animation:up 5.0s ease 0s 1 normal;}
.swiper-slide-active .ani5 { animation:down 2.0s ease 0s 1 normal;}
@keyframes fade {
	0%, 25% { opacity:0;}
	100% { opacity:1;}
}
@keyframes up {
	0%, 25% { transform:translateY(50px); opacity:0;}
	100% { transform:translateY(0px); opacity:1;}
}
@keyframes down {
	0%, 45% { transform:translateY(-50px); opacity:0;}
	100% { transform:translateY(0px); opacity:1;}
}

/*東海地区を中心に～*/
.slide1 { }
.slide1 p { }
.slide1 .text1,
.slide1 .text2 {font-size:28px;}
.slide1 br.s {display:none;}
	@media only screen and (max-width: 640px){
	.slide1 .text1,
	.slide1 .text2 {font-size:5vw;}
	.slide1 br.s {display:block;}
	}

/*理念*/
.slide2 { }
.slide2 .title { font-size:5vw; line-height:0.5; margin-bottom:5vh; letter-spacing:1vw; font-weight:bold;}
.slide2 .title2 {font-size:20px; margin-bottom:6vh}
.slide2 .text1 { font-size:20px; margin-bottom:3vh}
	@media only screen and (max-width: 640px){
	.slide2 .title { font-size:8vw;; margin-bottom:3vh;}
	.slide2 .title2 {font-size:3vw;}
	.slide2 .text1 { font-size:4vw;}
	}

/*ロゴ*/
.slide3 { }
.slide3 p { color:#43AF34; text-shadow:none; font-size:20px;}
.slide3 .logo { width:35vw; max-width:260px; margin:5vh auto;}
	@media only screen and (max-width: 640px){
	.slide3 p { font-size:3.5vw;}
	}

/*事業領域*/
.slide4 { width:100%;}
.slide4 .title { font-size:30px; letter-spacing:5px}
.slide4 ul { display:flex; justify-content:center; }
.slide4 li { font-size:2vw; line-height:1.2; background:#fff; color:#444; margin:1vw; padding:1vw; text-align:center; border-radius:100%; 
		width:15vw; height:15vw; display:flex; justify-content:center; align-items:center;}
.slide4 li:nth-child(even) {margin-top:7vw;}
	@media only screen and (max-width: 640px){
	.slide4 .title { font-size:6vw; margin-bottom:0.5vh;}
	.slide4 ul { flex-wrap:wrap;}
	.slide4 li,
	.slide4 li:nth-child(even) { width:20vw; height:20vw; margin:1vh 4vw; font-size:3.5vw;}
	.slide4 li:nth-child(3),
	.slide4 li:nth-child(4) { margin:0 12vw;}
	.slide4 li:nth-child(5) { margin:-3vh 0 0 0;}
	}


/** field **/
#field { width:100%; margin:0 auto; padding-bottom:100px; padding-top:100px;}
.field { width:100%; margin:0 auto 150px auto; display:flex; /*justify-content:space-between;*/ overflow:hidden;}
.field .text { }
.field .text p {}
.field .photo { margin:0;}
.field img { /*border-radius:20px 0 0 20px; object-fit:cover; width:100%;*/ width:auto; height:45vh;}

.field0 { text-align:center;}
/*.field0 img { border-radius:20px 0 0 20px; object-fit:cover; width:80%; height:80%; margin-left:auto; margin-right:auto; padding:15% 5%;}*/
.field0 img { margin-left:auto; margin-right:auto; padding:1% 1%;}

.field0 h3 {line-height: 0.8;margin-bottom:0.5em;}
.field0 h4 {margin-bottom:0.5em;font-size:max(1.8vw,12px);}
.field0 h3 span {font-size:max(1.8vw,12px);}
.field0 h4 span {font-size:max(1.2vw,8px);}

.SDGs_table {text-align:center;}
.SDGs_table h4 {font-size:3vw; color:#43AF34;}
.SDGs_table p {line-height:1.4;}
.SDGs_table img {width:90px;}



.field1 {}
.field1 .text { width:30%; padding:5% 5% 5% 15%;}
.field1 .photo { width:50%;}

.field2 {}
.field2 .text {order:2; width:30%; padding:5% 10% 5% 5%;}
.field2 .photo {order:1; width:55%;}
.field2 img { border-radius:0 20px 20px 0;}

.field3 {}
.field3 .text { width:35%; padding:5% 5% 5% 10%;}
.field3 .photo { width:50%;}
.field3 img { height:50vh;}

.field4 {}
.field4 .text {order:2; width:50%; padding:5% 5% 5% 5%;}
.field4 .photo {order:1; width:40%;}
.field4 img { height:auto; border-radius:0 20px 20px 0;}

.field5 { width:70%;}
.field5 .text { width:50%; padding:5% 5% 5% 5%;}
.field5 .photo { width:40%;}
.field5 img { border-radius:20px; height:35vh;}

	@media only screen and (max-width: 769px){
	#field { padding-bottom:0;}
	.field { display:inherit; margin-bottom:80px;}
	.field .text { width:80%; padding:0 5% 3% 15%;}
	.field1 .text,
	.field3 .text { padding:0 15% 3% 5%;}
	.field5 .text { width:80%; padding:0 10% 3% 10%;}
	.field .text p {}
	.field .photo { width:90%;}
	.field1 .photo,
	.field3 .photo { padding-left:10%;}
	.field5 .photo { width:100%;}
	.field img { height:30vh;}
	.field5 img { height:25vh;}
	}


/** means **/
#means { width:100%; margin:0 auto; padding-top:100px;}
.means { display:flex; justify-content:center; flex-wrap:wrap; padding-bottom:200px; margin-bottom:0;}
.means li { margin:1vw;}
.means li div { width:28vw; height:300px; position:relative;}
.means p { font-size:80%; position:absolute; bottom:0; background:#fff; /*color:#43AF34;*/ padding:0 10px; }
.means1 div,
.means2 div,
.means3 div {background-repeat:no-repeat; background-size:cover; background-color:rgba(255,255,255,0.5); background-blend-mode:lighten; transition:0.3s}
.means1 div {background-image:url(../../images/means_1.jpg); background-position:center center;}
.means2 div {background-image:url(../../images/means_1.jpg); background-position:center center;}
.means3 div {background-image:url(../../images/means_1.jpg); background-position:center center;}
.means a {display:block;}
.means div:hover { background-color:rgba(255,255,255,0);}

	@media only screen and (max-width: 769px){
	.means { padding-bottom:150px;}
	.means li { margin:2vh auto;}
	.means li div { width:80vw; height:25vh}
	.means {}
	}


/** address **/
#access {width:100%; margin:0 auto; padding-bottom:150px; padding-top:100px;}
#access h2 {margin-bottom:50px}
#access iframe {width:100%; height:700px; margin-bottom:30px;}
.address p {text-align:center;}
.address h3 {text-align:center;}

	@media only screen and (max-width: 769px){
	#access { padding-bottom:100px;}
	#access iframe {height:500px;}
	}


.freedial {
	padding:7px;
	font-size:9vw;
	text-align:center;
}
.freedial a {
	color:#43AF34;;
}




/** facebook **/
#facebook {width:100%; margin:0 auto; padding-top:70px; text-align:center;}
#facebook h2 {margin-bottom:50px;}
.facebook_wrap {width:500px; height:600px; margin:0 auto; border:none;}

	@media only screen and (max-width: 1000px){
	.facebook_wrap {width:100%; max-width:500px; height:400px;}
	.facebook_wrap iframe { width:90% !important; height:400px;}
	}


/** news **/
#news {width:100%; margin:0 auto; padding-bottom:150px; padding-top:100px;}
#news h2 {margin-bottom:50px}
#news iframe {width:100%; height:700px; margin-bottom:30px;}
.news p {text-align:center;}

	@media only screen and (max-width: 769px){
	#news { padding-bottom:100px;}
	#news iframe {height:500px;}
	}


/*** pagetop ***/
#pagetop { position:absolute; width:100%; margin:0 auto 0 auto; z-index:1;}
.pagetop { display:block; margin:0;}
.pagetop a { display:block; padding:10px;}
.pagetop a img { width:40px; transition:transform 0.6s;}
.pagetop a:hover img { transform:rotate(450deg); transition:0.8s;}
.freecall { display:block; margin:0;}
.freecall a { display:block; padding:10px;}
.freecall a img { width:45px; transition:transform 0.6s;}

@media(min-width:751px){ /*横幅751px以上の時に非表示*/
.freecall { display:none !important;}
}


/*** footer ***/
footer { width:100%;}
.foot { width:100%; text-align:center; margin:0 auto; background:#43AF34;}
.footerlink { padding:10px; overflow:hidden; position:relative; }
.footerlink ul { list-style:none outside none; float:left; margin: 0 0 0 0; padding: 0; position: relative; left: 50%;}
.footerlink ul li { float:left; margin-right:5px; padding:5px; position:relative; left:-50%; }
.footerlink ul li a { color:white; }
/*     color:#fff; letter-spacing:2px; text-align:center; padding:0; margin:0;}*/
.copyright { color:#fff; letter-spacing:2px; text-align:center; padding:80px 0 150px 0; margin:0;}




/*↓スクロールボタン*/
/*.scroll { position:relative; margin-top:50px; padding-bottom:100px; transition:0.3s;}
.scroll a { display:inline-block; padding:20px;}
.scroll:hover { transition:0.3s; opacity:0.3;}
.scroll a span { position:absolute; top:0; left:50%; width:24px; height:24px; margin-left:-12px; border-left:1px solid #43AF34; border-bottom:1px solid #43AF34; transform:rotate(-45deg); box-sizing:border-box;}
	@media only screen and (max-width: 1080px){
	}
	@media only screen and (max-width: 460px){
	.scroll { bottom:20px;}
	}*/


/*** アニメーション ***/

/*.effect { transition:1s; transition-delay:1.5s;}
.effect2 { transition:1s; transition-delay:2s;}*/

/*jquery.inview*/
.fade { opacity:0; transition:1.5s;} /*その場で*/
.fade_b { opacity:0; transition:1.5s; transform:translate(0,60px);  -webkit-transform:translate(0,60px);} /*下から*/
.fade_l { opacity:0; transition:1.5s; transform:translate(-60px,0);  -webkit-transform:translate(-60px,0);} /*右から*/
.fade_r { opacity:0; transition:1.5s; transform:translate(60px,0);  -webkit-transform:translate(60px,0);} /*左から*/
.fd { opacity:1; transition:1.5s; transform:translate(0,0); -webkit-transform:translate(0,0);}

/*時差*/
.delay_a { transition-delay:0.3s}
.delay_b { transition-delay:0.6s}

/*時間*/
.duration {transition-duration:0.3s;}/*速い*/
.duration {transition-duration:1.5s;}/*遅い*/


/*背景が虹色ループ*/
.bg2 { background-color:#1abc9c; animation:moveBg2 10s infinite;}
	@keyframes moveBg2{
		0%{background-color:#e74c3c;}
		20%{background-color:#f1c40f;}
		40%{background-color:#1abc9c;}
		60%{background-color:#3498db;}
		80%{background-color:#9b59b6;}
		100%{background-color:#e74c3c;}
		}

/*背景グリーン系ループ*/
.bg3 { background-color:#43AF34; animation:moveBg3 60s infinite;}
	@keyframes moveBg3{
		0%{background-color:#A3D900;}
		25%{background-color:#43AF34;}
		50%{background-color:#008C00;}
		75%{background-color:#43AF34;}
		100%{background-color:#A3D900;}
		}

/*背景グリーン系グラデーションループ*/
.bg4 { background-color:#43AF34; background:linear-gradient(45deg, #A3D900, #43AF34, #008C00); animation:moveBg4 60s infinite; background-size:600% 600%;}
	@keyframes moveBg4{
		0%{background-position:0% 50%;}
		50%{background-position:100% 50%;}
		100%{background-position:0% 50%;}
		}


/*** 波 ***/
canvas { width:100%; height:60px; vertical-align:top;}
.wave {width:100%; z-index:1; padding-top:60px;}

.wave_slide { position:absolute; bottom:0; padding-top:0;}
.wave_bottom { position:absolute; bottom:0;}

.wave_foot {position:relative;}
.wave_foot #wave_footer {position:absolute; bottom:0; left:0;}
.wave_foot #wave_footer2 {position:absolute; bottom:0; left:0;}

	@media only screen and (max-width: 1000px) {
	canvas { height:40px;}
	.wave { padding-top:40px;}
	.wave_slide { padding-top:0;}
	}

.silver {background:#f6f6f6;}
.gray {background:#eee;}

/* contrail */
.contrail{color:#6495ed;}


/* btn */
.btncnt a {
    background: #43AF34;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.btncnt a:hover {
    background: #eee;
    color: #43AF34;
}
.btncnt a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btncnt a:hover:after {
    border-color: #43AF34;
}