@charset "UTF-8";

/*====================================
	fv_area
====================================*/
 .fv_area {
    width: 100%;
    position: relative;
}
    .fv_area .fv_bg {
        width: 82%;
        margin-left: auto;
        overflow: hidden;
        height: 680px;
        /* width: 820px; */
        position: relative;
		background: #fff;
    }
        .fv_area .fv_bg img {
            width: 100%;
            object-fit: cover;
            opacity: 0;
            width:100%;
            height:100%;
            position: absolute;
            left: 0;
            top: 0;

            -webkit-animation: anime 12s 0s infinite;
            animation: anime 12s 0s infinite; 
        }
        .fv_area .fv_bg img:nth-of-type(2) {
            -webkit-animation-delay: 6s;
            animation-delay: 6s; }


            @keyframes anime {
                0% {
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                17% {
                    opacity: 1;
                }
                80% {
                    opacity: 0;
                     transform: scale(1.2);
                                z-index:3;
                }
                100% { opacity: 0 }
            }
            @-webkit-keyframes anime {
                0% {
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                17% {
                    opacity: 1;
                }
                80% {
                    opacity: 0;
                     transform: scale(1.2);
                                z-index:3;
                }
                100% { opacity: 0 }
            }
            
    .fv_area .fv_scroll {
        position: absolute;
        bottom: -15px;
        left: 9%;
    }
        .fv_area .fv_scroll img {
            width: 100%;
            object-fit: cover;
        }
    .fv_area .fv_txt {
        position: absolute;
        top: 30%;
        left: 3.5%;
        z-index: 10;
    }
        .fv_area .fv_txt p {
            line-height: 1.2;
            font-size: 64px;
            font-weight: bold;
        }
        .fv_area .fv_txt span {
            color: #2a4ea7;
        }
    /* CSSアニメーションの設定 */
    @keyframes SlideIn {
        0% {
            opacity: 0;
            transform: translateY(64px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
    }
/* animation */
    @-webkit-keyframes passing-bar{
      0% {
        left: 0;
        right: auto;
        width: 0;
      }
      50% {
        left: 0;
        right: auto;
        width: 100%;
      }
      51% {
        left: auto;
        right: 0;
        width: 100%;
      }
      100% {
        left: auto;
        right: 0;
        width: 0;
      }
    }
    @keyframes passing-bar{
      0% {
        left: 0;
        width: 0;
      }
      50% {
        left: 0;
        width: 100%;
      }
      51% {
        left: 0;
        width: 100%;
      }
      100% {
        left: 100%;
        width: 0;
      }
    }
    @-webkit-keyframes passing-txt{
      0% { opacity: 0; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes passing-txt{
      0% { opacity:0; }
      50% { opacity:0; }
      100% { opacity:1; }
    }
    /* css */
    .passing .passing-box {
      display: block;
      text-align: left;
    }
    .passing .passing-bar {
      position: relative;
      display: inline-block;
      /*　後ほど解説　*/
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .passing .passing-bar:before {
      content: '';
      display: inline-block;
      width: 0;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      /* 任意の値 */
      background: #000;
    }
    .passing .passing-txt {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      line-height: 1.2;
      font-size: 64px;
      font-weight: bold;
    }
    .passing.move .passing-bar:before {
      -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
      animation: passing-bar 1s ease 0s 1 normal forwards;
    }
    .passing.move .passing-txt {
      -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
      animation:passing-txt 0s ease .5s 1 normal forwards;
    }
    .passing .passing-txt span {
      color: #2a4ea7;
    }

/*====================================
	aisatsu
====================================*/
#aisatsu {
    padding: 50px 0;
    width: 100%;
    position: relative;
    text-align: center;
    color: #fff;
}
#aisatsu::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    display: block;
    background: #2a4fa8;
    width: 93%;
    height: calc(100% + 40px);
    z-index: -1;
}
    #aisatsu h2 {
        font-size: 28px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    #aisatsu > p {
        font-size: 16px;
        line-height: 1.8;
    }

/*====================================
	service
====================================*/
#service {
    padding: 70px 0 60px;
    position: relative;
}
#service .sec_ttl {
/*     margin-bottom: 210px; */
	margin-bottom: 40px;
}
#service .service_bg img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
#service .service_inner {
	margin-top: -210px;
}

/*====================================
	news
====================================*/
#news {
    padding: 25px 0 120px;
    position: relative;
}

/* 画面外にいる状態 */
#news.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 1000ms;
}
/* 画面内に入った状態 */
#news.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

#news .sec_ttl {
    margin-bottom: 15px;
}
#news .cat_area {
    max-width: 1000px;
    margin: 0 auto;
}
    .cat_area ul {
        list-style: none;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
        .cat_area li {
            margin-left: 25px;
        }
        .cat_area li a {
            display: inline-block;
            position: relative;
        }
        .cat_area li a::after {
            display: inline-block;
            content: '';
            background: url(../img/arrow.png) no-repeat center;
            background-size: 100%;
            width: 12px;
            height: 12px;
            margin-left: 5px;
        }
#news .news_inner {
    max-width: 1000px;
    margin: 0 auto 40px;
}
    #news .news_inner dl {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 15px 60px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 0;
        font-size: 15px;
        align-items: center;
    }
        #news .news_inner dl dt {
            width: 120px;
            margin-right: 70px;
        }
	 #news .news_inner dl dt h6 .badge-news{
	     background-color: #666666;
	     color: #FFFFFF;
	     border-radius: 10%;
	     padding-left: 5px;
	     padding-right: 5px;
        }

            #news .news_inner dl dt .cat {
                display: none;
            }
        #news .news_inner dl dd {
            flex: 1;
        }
            #news .news_inner dl dd .cat {
                display: inline-block;
                font-size: 12px;
                color: #666666;
                border: 1px solid #dddddd;
                border-radius: 6px;
                padding: 3px 7px;
            }
            #news .news_inner dl dd .ttl {
                display: block;
                color: #0066aa;
            }


@media only screen and (max-width: 1000px){
	#service .service_inner {
		margin-top: -150px;
	}

	#news .cat_area,
	#news .news_inner {
		padding-left: 15px;
		padding-right: 15px;
	}
}


@media only screen and (max-width: 767px){

/*====================================
	fv_area
====================================*/
.fv_area {
    padding-top: 80px;
}
    .fv_area .fv_bg {
        width: 86%;
        height: 65vw;
        margin-top: 80px;
    }
    .fv_area .fv_scroll {
        width: 20px;
        bottom: -10px;
        left: 4%;
    }
    .fv_area .fv_txt {
        top: 25px;
        left: 6%;
    }
        .fv_area .fv_txt p {
            font-size: 30px;
        }
		.passing .passing-bar:before {
			content: '';
			display: inline-block;
			width: 0;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			/* 任意の値 */
			background: #000;
		}
		.passing .passing-txt {
			  font-size: 30px;
		}

/*====================================
	aisatsu
====================================*/
#aisatsu {
    padding: 40px 30px;
    box-sizing: border-box;
}
#aisatsu::before {
    top: -30px;
    width: 93%;
    height: calc(100% + 30px);
    width: 100%;
}
    #aisatsu h2 {
        font-size: 18px;
        line-height: 1.4;
    }
    #aisatsu > p {
        font-size: 13px;
        text-align: left;
    }

/*====================================
	service
====================================*/
#service {
    padding: 30px 0 40px;
}
#service .sec_ttl {
/*     margin-bottom: 180px; */
	margin-bottom: 20px;
}
#service .service_bg img {
	height: 66vw;
}
#service .service_inner {
	margin-top: -80px;
}

/*====================================
	news
====================================*/
#news {
    padding: 10px 0 65px;
}

#news .sec_ttl {
    margin-bottom: 20px;
}
#news .cat_area {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 10px;
}
    .cat_area ul {
        justify-content: flex-start;
    }
        .cat_area li {
            margin-left: 0;
            margin-right: 15px;
        }
        .cat_area li a {
            font-size: 12px;
        }
        .cat_area li a::after {
            width: 10px;
            height: 10px;
        }
#news .news_inner {
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto 25px;
}
    #news .news_inner dl {
        padding: 15px 0;
        font-size: 13px;
    }
    #news .news_inner dl:first-of-type {
        border-top: 1px solid #dddddd;
    }
        #news .news_inner dl dt {
            margin-right: 0;
            width: 100%;
            margin-bottom: 10px;
        }
            #news .news_inner dl dt .cat {
                display: inline-block;
                font-size: 10px;
                color: #666666;
                border: 1px solid #dddddd;
                border-radius: 6px;
                padding: 2px 6px;
                margin-left: 10px;
            }
        #news .news_inner dl dd {
            width: 100%;
        }
            #news .news_inner dl dd .cat {
                display: none;
            }

}

@media only screen and (max-width: 520px){
	
	.passing .passing-txt {
			  font-size: 24px;
		}	

}



@media only screen and (max-width: 320px){
	
	.passing .passing-txt {
			  font-size: 24px;
		}
	
	#service .service_inner::before {
/* 		top: -42vw;
		height: 66vw; */
	}
}
/* 2023/11/09 ブライト企業ロゴ位置*/

@media screen  and (min-width: 1151px) {
	.br_img{
		width:120px;
		height:157px; 
	}
	.br_logo{
		z-index:10;position: absolute; top:100px; left:80px;
	}
	.br_txt{
		font-size:26px;
	}
	.br_txt2{
		font-size:14px;
	}
	
}

/*960px以下*/
@media screen and (max-width: 1150px) {
	.br_img{
		width:120px;
		height:160px; 
	}
	.br_logo{
		z-index:10;position: absolute; top:100px; left:10px;
	}
	.br_txt{
		font-size:22px;
	}
	.br_txt2{
		font-size:14px;
	}
}

@media screen and (max-width:767px){
    .br_logo{
		z-index:10;position: absolute;  top:60px!important; left:500px;
	}
	.br_logo{
		z-index:10;position: absolute;  top:60px; left:500px;
	}
	.br_img{
		width:120px;
		height:160px; 
	}
	.br_txt{
		font-size:18px;
	}
	.br_txt2{
		font-size:14px;
	}
}

/*520px以下なる*/
@media screen and (max-width: 520px) {
	.br_img{
		width:65px;
		height:87px; 
	}
	.br_logo{
		z-index:10;position: absolute;  top:90px; left:325px;
	}
	.br_txt{
		font-size:14px;
	}
	.br_txt2{
		font-size:12px;
	}
}