@charset "utf-8";

/* -------------------------------------------------- */
/* #block-mv */
/* -------------------------------------------------- */
#block-mv{width:100%;height:640px;position:relative;}
#block-mv .item{width:100%;height:100%;position:relative;overflow:hidden;}
#block-mv .item::before{/*content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url(/img/top/mv01.jpg) no-repeat center center;background-size:cover;transform:scale(1.1);opacity:0;*/}
#block-mv .container{padding-top:100px;padding-bottom:100px;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;}
#block-mv .ttl span{display:inline-block;padding:6px 12px 4px;font-size:4rem;font-weight:bold;color:#fff;letter-spacing:0.1em;line-height:1.2;margin-bottom:4px;font-feature-settings:"palt";-webkit-font-feature-settings:"palt";white-space:nowrap;position:relative;opacity:0;}
#block-mv .ttl span::before{content:"";display:block;width:0;height:100%;position:absolute;top:0;left:0;background:linear-gradient(90deg, rgba(49,109,169,1) 0%, rgba(0,161,233,1) 50%);z-index:-1;}
#block-mv .sub span{display:inline-block;padding:8px 12px 6px;font-size:3.2rem;font-weight:bold;color:#00a1e9;letter-spacing:0.05em;line-height:1.2;margin-top:6px;white-space:nowrap;position:relative;opacity:0;}
#block-mv .sub span::before{content:"";display:block;width:0;height:100%;position:absolute;top:0;left:0;background:#fff;z-index:-1;}
#block-mv .logo{position:absolute;right:60px;bottom:100px;width:35%;opacity:0;}

#block-mv.animated .item::before{/*transform:none;opacity:1;transition:opacity 2s ease,transform 2.5s ease;*/}
#block-mv.animated .item .youtube{opacity:1;transition:opacity 2s ease,transform 2.5s ease;}
#block-mv.animated .ttl span{opacity:1;transition:opacity 1s .8s;}
#block-mv.animated .ttl span::before{width:100%;transition:width .6s ease-out .8s;}
#block-mv.animated .ttl span:nth-of-type(2)::before{transition-delay:1.1s;}
#block-mv.animated .sub span{opacity:1;transition:opacity 1s 1.2s;}
#block-mv.animated .sub span::before{width:100%;transition:width .6s ease-out 1.4s;}
#block-mv.animated .logo{opacity:1;transition:opacity 1s 1.6s;}

/* youtube */
#loading {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-weight: bold;font-size: 30px;}
#loading.disappear{display: none; }
#youtube-area{position: absolute;z-index: 1;top: 0;right:0;left:0;bottom:0;overflow: hidden;opacity: 0;}
#youtube-area.appear{animation-name:youtubeanime;animation-duration:.6s;animation-fill-mode:forwards;}
@keyframes youtubeanime{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#youtube {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 178vh;height: 56vw;min-height: 100%;min-width: 100%;}
#youtube-mask{position: absolute;z-index: 2;top:0;width:100%;height: 100%;}

/* -------------------------------------------------- */
/* #block-biz */
/* -------------------------------------------------- */
#block-biz{background:url(/img/top/biz_back.jpg) no-repeat left top #00a1e9;background-size:cover;color:#fff;font-weight:bold;position:relative;overflow:hidden;}
#block-biz::after{content:"";display:block;width:150%;height:400px;background:#edf5fa;position:absolute;left:-25%;bottom:-240px;transform:rotate(5deg);z-index:0;}
#block-biz .container{padding-top:200px;padding-bottom:0;}
#block-biz .biz-top{display:flex;}
#block-biz .biz-top .common-ttl01{width:35%;padding-right:60px;white-space:nowrap;}
#block-biz .biz-top .inner{flex:1;}
#block-biz .biz-top .inner .ttl{font-size:3.6rem;line-height:1.4;margin-bottom:35px;}
#block-biz .biz-top .inner p{font-size:2rem;line-height:2;}
#block-biz .biz-bottom{margin-top:100px;position:relative;z-index:1;}
#block-biz .list-biz{display:flex;gap:10px;}
#block-biz .list-biz > li{flex:1;position:relative;}
#block-biz .list-biz > li a{display:block;color:#fff;width:100%;height:438px;}
#block-biz .list-biz > li a div{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:3;padding:35px 95px 35px 30px;}
#block-biz .list-biz > li a::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:no-repeat center center;background-size:cover;z-index:1;transition:.2s;}
#block-biz .list-biz > li a::after{content:"";display:block;width:100%;height:50%;position:absolute;bottom:0;left:0;z-index:2;background: linear-gradient(0deg, rgba(60,89,102,1) 0%, rgba(60,89,102,0) 100%);mix-blend-mode:multiply;opacity:0.9;}
#block-biz .list-biz > li a div::after{content:"";display:block;width:64px;height:64px;background:url(/img/arrow01.png) no-repeat;background-size:contain;position:absolute;right:30px;bottom:35px;z-index:3;transition:.2s;}
#block-biz .list-biz > li a:hover::before{filter:brightness(1.1);}
#block-biz .list-biz > li a:hover div::after{transform:scale(1.2);}
#block-biz .list-biz > li a div *{position:relative;z-index:3;line-height:1.4;}
#block-biz .list-biz > li a small{font-size:1.6rem;margin-bottom:8px;display:block;}
#block-biz .list-biz > li a span{font-size:2rem;display:block;}
#block-biz .list-biz > li.link01 a::before{background-image:url(/img/top/biz_img01.jpg);}
#block-biz .list-biz > li.link02 a::before{background-image:url(/img/top/biz_img02.jpg);}
#block-biz .list-biz > li.link03 a::before{background-image:url(/img/top/biz_img03.jpg);}
#block-biz .list-biz > li.link04 a::before{background-image:url(/img/top/biz_img04.jpg);}

/* -------------------------------------------------- */
/* #block-prod */
/* -------------------------------------------------- */
#block-prod{background:#edf5fa;padding-top:100px;}
#block-prod .container{display:flex;gap:120px;}
#block-prod .img{width:calc(50% - 20px);display:flex;gap:20px;}
#block-prod .img > div{transition:.8s ease .3s;opacity:0;}
#block-prod .img > div:first-child{transform:translateY(50px);}
#block-prod .img > div:nth-child(2){transform:translateY(-50px);}
#block-prod .img.animated > div{transform:none!important;opacity:1;}
#block-prod .inner{flex:1;padding:80px 0;}
#block-prod .inner p{line-height:2;}
#block-prod .inner .btn{margin-top:30px;}

/* -------------------------------------------------- */
/* #block-tec */
/* -------------------------------------------------- */
#block-tec{background:#edf5fa;}
#block-tec .container{display:flex;flex-direction:row-reverse;gap:120px;}
#block-tec .img{width:calc(50% - 20px);display:flex;gap:20px;}
#block-tec .img > div{transition:.8s ease .3s;opacity:0;}
#block-tec .img > div:first-child{transform:translateY(50px);}
#block-tec .img > div:nth-child(2){transform:translateY(-50px);}
#block-tec .img.animated > div{transform:none!important;opacity:1;}
#block-tec .inner{flex:1;padding:80px 0;}
#block-tec .inner p{line-height:2;}
#block-tec .inner .btn{margin-top:30px;}

/* -------------------------------------------------- */
/* #block-link */
/* -------------------------------------------------- */
#block-link{position:relative;}
#block-link::before{content:"";display:block;width:100%;height:50%;position:absolute;top:0;left:0;z-index:-1;background:#edf5fa;}
#block-link .list-link{display:flex;gap:1px;}
#block-link .list-link > li{flex:1;}
#block-link .list-link > li a{display:block;font-size:3.6rem;font-weight:bold;padding:88px 120px 88px 55px;width:100%;height:100%;color:#fff;position:relative;overflow:hidden;}
#block-link .list-link > li a small{display:block;font-size:2.4rem;position:relative;}
#block-link .list-link > li a small::before{content:"";display:block;width:7px;height:7px;background:#fff;position:absolute;left:-22px;top:15px;}
#block-link .list-link > li a::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:no-repeat center center#064982;background-size:cover;z-index:-1;transition:.2s;}
#block-link .list-link > li a::after{content:"";display:block;width:64px;height:64px;background:url(/img/arrow01.png) no-repeat;background-size:contain;position:absolute;top:50%;right:40px;margin-top:-32px;transition:.2s;}
#block-link .list-link > li a:hover::before{filter:brightness(1.25);}
#block-link .list-link > li a:hover::after{transform:scale(1.2);}
#block-link .list-link > li.link01 a::before{background-image:url(/img/top/link02.jpg);}
#block-link .list-link > li.link02 a::before{background-image:url(/img/top/link03.jpg);}
#block-link .list-link > li.link03 a::before{background-image:url(/img/top/link04.jpg);}

/* -------------------------------------------------- */
/* #block-news */
/* -------------------------------------------------- */
#block-news .container{display:flex;gap:60px;}
#block-news .left{width:240px;}
#block-news .right{flex:1;}
#block-news .list-news > li{border-bottom:1px solid #f0f0f0;}
#block-news .list-news > li a{display:block;padding:30px 40px 30px 0;position:relative;}
#block-news .list-news > li a::after{content:"";display:block;width:8px;height:8px;border-right:2px solid #00a1e9;border-bottom:2px solid #00a1e9;transform:rotate(-45deg);position:absolute;right:0;top:50%;margin-top:-4px;transition:.2s;}
#block-news .list-news > li a:hover{text-decoration:underline;}
#block-news .list-news > li a:hover::after{right:-5px;}
#block-news .list-news > li span{display:block;font-size:1.3rem;color:#6f6f6f;margin-bottom:8px;}
#block-news .list-news > li p{font-size:1.6rem;font-weight:bold;line-height:1.6;}

/* -------------------------------------------------- */
/* #block-banner */
/* -------------------------------------------------- */
#block-banner{margin-top:-40px;margin-bottom:50px;}
#block-banner img{margin:auto;}


/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:1199px){
	/* -------------------------------------------------- */
	/* #block-biz */
	/* -------------------------------------------------- */
	#block-biz .list-biz{flex-wrap:wrap;}
	#block-biz .list-biz > li{flex:none;width:calc((100% - 10px) / 2);}
	#block-biz .list-biz > li a{height:280px;}
	#block-biz .list-biz > li a::after{height:80%;}
	#block-biz .list-biz > li.link01 a::before{background-image:url(/img/top/biz_img01_sp.jpg);}
	#block-biz .list-biz > li.link02 a::before{background-image:url(/img/top/biz_img02_sp.jpg);}
	#block-biz .list-biz > li.link03 a::before{background-image:url(/img/top/biz_img03_sp.jpg);}
	#block-biz .list-biz > li.link04 a::before{background-image:url(/img/top/biz_img04_sp.jpg);}
}
@media screen and (min-width:1px) and (max-width:1099px){
	/* -------------------------------------------------- */
	/* #block-biz */
	/* -------------------------------------------------- */
	#block-biz .container{padding-top:100px;}
	#block-biz .biz-top{display:block;max-width:620px;margin:auto;}
	#block-biz .biz-bottom{margin-top:80px;}

	/* -------------------------------------------------- */
	/* #block-prod */
	/* -------------------------------------------------- */
	#block-prod .inner{padding:20px 0;}
	#block-prod .container{gap:60px;}

	/* -------------------------------------------------- */
	/* #block-tec */
	/* -------------------------------------------------- */
	#block-tec .inner{padding:20px 0;}
	#block-tec .container{gap:60px;}

	/* -------------------------------------------------- */
	/* #block-link */
	/* -------------------------------------------------- */
	#block-link .list-link > li a{padding:88px 40px 120px 40px;}
	#block-link .list-link > li a::after{top:auto;bottom:30px;right:50%;margin-right:-32px;margin-top:0;}

}
@media screen and (max-width:834px){
	/* -------------------------------------------------- */
	/* #block-mv */
	/* -------------------------------------------------- */
	#block-mv{height:106vw;max-height:640px;}
	#block-mv .item::before{/*background-image:url(/img/top/mv01_sp.jpg);*/}
	#block-mv .container{padding-top:40px;padding-bottom:40px;}
	#block-mv .ttl span{font-size:3.4rem;font-size:5vw;padding:6px 10px 4px;margin-bottom:2px;letter-spacing:0.08em;}
	#block-mv .sub span{font-size:1.8rem;font-size:5vw;padding:6px 10px 5px;margin-top:4px;}
	#block-mv .logo{right:40px;bottom:40px;}

	/* -------------------------------------------------- */
	/* #block-biz */
	/* -------------------------------------------------- */
	#block-biz{background-size:300% auto;}
	#block-biz::after{bottom:-300px;}
	#block-biz .container{padding-top:75px;}
	#block-biz .biz-top .common-ttl01{width:100%;padding-right:0;}
	#block-biz .biz-top .inner .ttl{font-size:2.4rem;margin-bottom:25px;}
	#block-biz .biz-top .inner p{font-size:1.6rem;}
	#block-biz .biz-bottom{margin-top:60px;}
	#block-biz .list-biz{display:block;max-width:500px;margin:auto;}
	#block-biz .list-biz > li{width:100%;}
	#block-biz .list-biz > li + li{margin-top:10px;}
	#block-biz .list-biz > li a{height:224px;}
	#block-biz .list-biz > li a small{margin-bottom:10px;}
	#block-biz .list-biz > li a div{padding:20px 100px 20px 25px;}
	#block-biz .list-biz > li a div::after{right:25px;bottom:25px;}

	/* -------------------------------------------------- */
	/* #block-prod */
	/* -------------------------------------------------- */
	#block-prod{padding-top:35px;}
	#block-prod .container{display:flex;flex-direction:column;gap:0;}
	#block-prod .inner{display:contents;}
	#block-prod .common-ttl01{order:1;}
	#block-prod .img{order:2;width:100%;justify-content:center;max-width:500px;margin:auto;gap:10px;}
	#block-prod .txt{order:3;margin-top:30px;}
	#block-prod .inner .btn{text-align:center;margin-top:25px;}

	/* -------------------------------------------------- */
	/* #block-tec */
	/* -------------------------------------------------- */
	#block-tec .container{display:flex;flex-direction:column;gap:0;}
	#block-tec .inner{display:contents;}
	#block-tec .common-ttl01{order:1;}
	#block-tec .img{order:2;width:100%;justify-content:center;max-width:500px;margin:auto;gap:10px;}
	#block-tec .txt{order:3;margin-top:30px;}
	#block-tec .inner .btn{text-align:center;margin-top:25px;}

	/* -------------------------------------------------- */
	/* #block-link */
	/* -------------------------------------------------- */
	#block-link .list-link{display:block;max-width:500px;margin:auto;}
	#block-link .list-link > li + li{margin-top:1px;}
	#block-link .list-link > li a{padding:50px 100px 50px 50px;font-size:2.6rem;}	
	#block-link .list-link > li a::after{width:54px;height:54px;top:50%;bottom:auto;right:35px;margin-right:0;margin-top:-27px;}
	#block-link .list-link > li a small{font-size:1.8rem;}
	#block-link .list-link > li a small::before{width:6px;height:6px;top:10px;left:-20px;}

	/* -------------------------------------------------- */
	/* #block-news */
	/* -------------------------------------------------- */
	#block-news{padding-bottom:40px;}
	#block-news .container{display:block;position:relative;padding-bottom:100px;}
	#block-news .common-ttl01{margin-bottom:15px;}
	#block-news .list-news > li a{padding:20px 30px 20px 0;}
	#block-news .list-news > li a::after{width:6px;height:6px;margin-top:-3px;}
	#block-news .btn{position:absolute;left:0;bottom:0;width:100%;text-align:center;}

	/* -------------------------------------------------- */
	/* #block-banner */
	/* -------------------------------------------------- */
	#block-banner{margin-top:10px;margin-bottom:35px;}
	
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:622px){
	#block-banner .container{padding-left:0;padding-right:0;}

	/* -------------------------------------------------- */
	/* #block-mv */
	/* -------------------------------------------------- */
	#block-mv .container{padding-bottom:80px;}
	#block-mv .ttl span{font-size:7vw;}
	#block-mv .logo{width:60%;}

	#youtube-area{display:none;}

	#mv-area{position:absolute;top:0;left:0;width:100%;height:100%;background:url(/img/top/sp_mv.jpg)center center / cover no-repeat;}
}