@charset "UTF-8";

/* トップページ */
#mv_top {
   opacity: 0;
   filter: brightness(400%);
   animation-name: fadeInAnime;
   animation-duration:3s;
   animation-delay: 0.8s;/*6で解説*/
   animation-fill-mode:forwards;/*2で解説*/
   animation-timing-function:ease;/*5で解説*/
   animation-iteration-count:1;/*4で解説*/
}
@keyframes fadeInAnime{
  0% { opacity: 0;filter: brightness(400%);}
  100% {opacity: 1;filter: brightness(100%);}
}


#mv_top .grid-l { width: 300px; position: relative;}
#mv_top .grid-r { width: calc( 100% - 300px); }
@media screen and (max-width: 767px) {
#mv_top .grid-r { width: 100%; }
}
#mv_top .grid-l .logo {
	position: absolute;
	top: 50%;
	transform: translateX(-50%)translateY(-50%);
	left: 50%;
}


.logo {
	position: absolute;
	width: 100%; 
	text-align: center;
	top: 250px;
	left: 26px;
   transition: all 0.3s;
   font-size: 3.8rem;
   line-height: 0.5;
   font-weight: 300;
}
.logo span {
   font-family: 'Montserrat', sans-serif;
   font-size: 1rem;
   transform: scale(0.8);
   transform-origin: center left;
   margin: 0 0 0 3px;
	color: #5a8923;
}

#mv_top .sl_top {position: relative; width: 100%;}
@media screen and (max-width: 767px) {
#mv_top .sl_top {margin-top: 60px}
}
#mv_top .sl_top li {
   background-repeat: no-repeat;
   background-size: cover;
   height: 100vh;
   color: #fff;
}
@media screen and (max-width: 767px) {
#mv_top .sl_top li {
   background-repeat: no-repeat;
   background-size: cover;
   height: 450px;
   color: #fff;
}
}

#mv_top .sl_top li:nth-child(1) {background-image: url("../img/top/mv-01.jpg"); background-position: center right}
#mv_top .sl_top li:nth-child(2) {background-image: url("../img/top/mv-02.jpg"); background-position: center center}
#mv_top .sl_top li:nth-child(3) {background-image: url("../img/top/mv-03.jpg"); background-position: center center}

#mv_top article {
   position: absolute;
	bottom: 5%;
   left: 300px;
	width: calc(100% - 300px);
	text-align: left;
	padding: 50px;
	color: #fff;
}
@media screen and (max-width: 767px) {
#mv_top article {
   position: absolute;
   bottom: auto;
	top: 50%;
   left: 10%;
	width: 100%;
	margin: 0;
	padding: 0
}	
}
#top_sec01 .blk_ttl h2 {
   font-family: 'Inter', sans-serif;
   font-weight: 200;
   line-height: 1; 
}
#mv_top article .txt {font-size: 1.4rem;}
#mv_top article .ttl {font-size: 9rem; margin-bottom: 10px;line-height: 1; font-weight: 600; font-family: 'Inter', sans-serif;}
#mv_top article .cap {font-size: 2.0rem; line-height: 1.5; margin-right: 5px; font-weight: 500}
@media screen and (max-width: 767px) {
#mv_top article .txt {font-size: 1.4rem; line-height: 2}
#mv_top article .ttl {font-size: 5rem; margin-bottom: 10px}
#mv_top article .cap {font-size: 1.6rem; line-height: 1.5; margin-bottom: 10px}	
}


.section {margin: 80px 0;}

/* 事業紹介 */
#news{margin:150px 0 150px 0; padding: 100px 0 200px 0; background-color: #fff}
#news .blk_ttl {
   text-align: center;
   margin:0 0 90px 0;
}
@media screen and (max-width: 767px) {
	#news .blk_ttl h2 {
   font-size: 4.0rem;
   margin-bottom: 10px;
	line-height: 1;
}
#news{margin:0 auto 75px auto; padding: 50px 0 50px 0; background-color: #fff; width: 90%}
#news .blk_ttl {
   text-align: center;
   margin:0 0 45px 0;
}
}



#news .blk_ttl h2 {
   font-size: 6.0rem;
   font-family: 'Inter', sans-serif;
   font-weight: 200;
   margin-bottom: 10px;
	line-height: 1;
	color: #5a8923;
}

#news .ttl { 
	font-size: 3.0rem;
	line-height: 1.6;
	margin-bottom: 25px
}
@media screen and (max-width: 767px) {
#news .blk_ttl h2 {
   font-size: 3.5rem;
}

#news .ttl { 
	font-size: 2.2rem;
}
}

#news article {
	max-width: 700px;
	width: 80%;
	padding-left: 0;
	margin: 0 auto;
}



/* 事業紹介 */
#about{margin-bottom: 250px}

#about .blk_ttl {margin-top: 90px;}
#about .blk_ttl {
   text-align: center;
   margin-bottom: 90px;
}
#about .blk_ttl .cap {font-size: 1.6rem; line-height: 1; margin-bottom: 10px}	
@media screen and (max-width: 767px) {
	#about .blk_ttl {
   text-align: center;
   margin-top: 10px;
   margin-bottom: 50px;
}
#about .blk_ttl .cap {font-size: 1.2rem; line-height: 1; margin-bottom: 10px}	
}

#about .blk_ttl h2 {
   font-size: 6.0rem;
   font-family: 'Inter', sans-serif;
   font-weight: 200;
   margin-bottom: 10px;
	line-height: 1;
	color: #5a8923;
}
@media screen and (max-width: 767px) {
	#about .blk_ttl h2 {
   font-size: 4.0rem;
   margin-bottom: 10px;
	line-height: 1;
}
}

#about .thum {
   margin-bottom: 20px;
}
#about .grid {width: 50%;}
#about .grid.bg {
background-image: url("../img/top/bg-01.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 500px;
}
@media screen and (max-width: 767px) {
#about .grid.bg {
background-image: url("../img/top/bg-01.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 300px;
}	
}

@media screen and (max-width: 767px) {
#about .grid {width: 90%; margin: 0 auto; margin-bottom: 30px}	
}

#about .grid article {
	max-width: 540px;
	padding-left: 50px;
}
@media screen and (max-width: 767px) {
#about .grid article {
	max-width: 540px;
	width: 100%;
	padding-left: 0;
	margin: 0 auto;
}	
}

#about .grid article .ttl {
	font-size: 3.0rem;
	line-height: 1.6;
	margin-bottom: 25px
}
@media screen and (max-width: 767px) {
#about .grid article .ttl {
	font-size: 2.2rem;
}	
}

/* 施工事例 */
#works { margin: 80px auto}
@media screen and (max-width: 767px) {
#works { margin: 80px auto 0 auto}	
}


.lightbox_w {
	position: fixed;
	background-color: rgba(0,0,0,0.80);
	display: none;
	z-index: 900;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
		opacity: 1;
	visibility: hidden;

}

.lightbox_w.light-active {
		display: flex;
	opacity: 1;
	visibility: visible;
}

#works .head { 
	position: relative;
	background-image: url("../img/top/bg-02.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 450px;	
}

#works .blk_ttl {
	background-color: #333333;
	padding: 25px 30px;
	width: 550px;
	position: absolute;
	top: 70px;
	color: #fff;
	text-align: right;
}

#works .blk_ttl h2,#company .blk_ttl h2 {
	color: #5a8923;
	font-size: 6.0rem;
   font-weight: 200;
   font-family: 'Inter', sans-serif;
	line-height: 1;
}

@media screen and (max-width: 767px) {
	#works .blk_ttl {
	background-color: #333333;
	padding: 10px 30px 15px 30px;
	width: 50%;
	position: absolute;
	top: -40px;
	color: #fff;
	text-align: left;
}

#works .blk_ttl h2,#company .blk_ttl h2 {
	color: #5a8923;
	font-size: 3.5rem;
   font-weight: 200;
   font-family: 'Inter', sans-serif;
	line-height: 1.5;
}
}

#works .blk_ttl h2 span,#company .blk_ttl h2 span {
	font-size: 1.6rem;
	color: #fff;
}
@media screen and (max-width: 767px) {
#works .blk_ttl h2 span,#company .blk_ttl h2 span {
	font-size: 1.2rem;
	color: #fff;
	display: block;
}	
}

#works .contents {
	position: relative;
	width: 90%;
	margin: 0 auto;
	margin-top: -100px;
}
@media screen and (max-width: 767px) {
	#works .contents {
	position: relative;
	width: 90%;
	margin-top: 30px;
}
}


#works .grid {width: 30%;}
@media screen and (max-width: 767px) {
#works .grid {width: 100%; margin-bottom: 50px}	
}

#works .grid .thum {
	margin-bottom: 20px
}

#works .grid .ttl {
	font-size: 1.8rem;
	margin-bottom: 10px;
	font-weight: 500;
}
@media screen and (max-width: 767px) {
#works .grid .ttl {
	font-size: 1.6rem;
	margin-bottom: 10px
}
}

#workflow{
	background-color: #333;
	padding: 100px 0;
	color: #fff;
}

@media screen and (max-width: 767px) {
#workflow{
	background-color: #333;
	padding: 60px 0 60px 0;
	color: #fff;
}	
}

#workflow .blk_ttl {
   text-align: center;
   margin-bottom: 45px;
}

#workflow .blk_ttl h2 {
   font-size: 6.0rem;
   font-family: 'Inter', sans-serif;
   font-weight: 200;
   margin-bottom: 10px;
	line-height: 1;
	color: #cad338;
}
#workflow .blk_ttl .cap {
	font-size: 1.6rem;
	line-height: 1;
}

@media screen and (max-width: 767px) {
#workflow .blk_ttl h2 {
   font-size: 4.0rem;
   font-family: 'Inter', sans-serif;
   font-weight: 200;
   margin-bottom: 10px;
	line-height: 1;
	color: #cad338;
}
#workflow .blk_ttl .cap {
	font-size: 1.2rem;
	line-height: 1;
}
}

#workflow ul {
	padding: 0 5%;
	margin:  0 auto;
}
#workflow li{
	margin: 0 15px;
}


#workflow li .ttl {
	font-size: 2.0rem;
	line-height: 1;
	margin-bottom: -12px;
	position: relative;
}
@media screen and (max-width: 767px) {
#workflow li .ttl {font-size: 1.8rem;}	
}

#workflow li .ttl .number {
	font-size: 4rem;
}
@media screen and (max-width: 767px) {
#workflow li .ttl .number {
	font-size: 5rem;
}	
}

#company {
	margin-left: calc( (100% - 1080px) / 2);	
	margin-bottom: 250px
}

@media screen and (max-width: 767px) {
#company {
	margin-left: 0;	
	margin-bottom: 180px
}	
}


#company .grid-l {width: 45%;}
@media screen and (max-width: 767px) {
#company .grid-l {width: 90%; margin: 0 auto}	
}

#company .grid-r {
	width: 45%;
	background-image: url("../img/top/bg-03.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

#company .blk_ttl {
	background-color: #252525;
	color: #5a8923;
	padding: 30px 50px;
	font-size: 4rem;
	line-height: 1;
	position: absolute;
	width: 100%;
	top: 80px;
}
@media screen and (max-width: 767px) {
#company .blk_ttl {
	padding: 10px 30px 15px 30px;
}	
}



#company dl {
	border-top: solid 1px #ccc;
	margin-top: 260px;
	margin-bottom: 40px
}
@media screen and (max-width: 767px) {
#company dl {
	border-top: solid 1px #ccc;
	margin-top: 230px;
}	
}

#company dt,#company dd {
	border-bottom: solid 1px #ccc;
	padding: 25px 0;
	font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
#company dt,#company dd {
	padding: 15px 0;
	font-size: 1.4rem;
}
}

#company dt {width: 200px;}
#company dd {width: calc( 100% - 200px);}
@media screen and (max-width: 767px) {
#company dt {width: 100px;}
#company dd {width: calc( 100% - 120px);}	
}

footer {
   padding: 0 0 30px 0;
    background-color: #333333;
	color: #fff;
}
@media screen and (max-width: 780px) {
 footer {
   padding: 0 0 30px 0;
   padding-top: 0;
}  
}

footer .blk_ttl {
	background-color: #f2f2f2;
	padding: 50px;
	display: inline-block;
	margin-top: -80px;
	margin-bottom: 60px;
	font-size: 6.0rem;
   font-family: 'Inter', sans-serif;
   font-weight: 200;
	text-align: center;
	line-height: 1.2;
	color: #5a8923;
}

@media screen and (max-width: 767px) {
footer .blk_ttl {
	padding: 25px 40px;
	margin-top: -40px;
	margin-bottom: 40px;
	font-size: 3.5rem;
	line-height: 1.5;
}	
}

footer .h2cap {color: #000000}
@media screen and (max-width: 767px) {
footer .h2cap {color: #000000; font-size: 1.4rem}
}