@charset "utf-8";
/* CSS Document */


/* ---------------------------------------------------------------------------------------------

   Main-visual-wrap

--------------------------------------------------------------------------------------------- */
.Top-main-visual-wrap{
	width: 100%;
	height: 100vh; 
	overflow: hidden;
	position: relative;
}

.Top-main-visual-wrap .bg-image1920{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	background-image: url('../images/top-image-pc.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* タブレット用 */
@media screen and (max-width: 1199px) {
    .Top-main-visual-wrap .bg-image1920{
        background-image: url('../images/top-image-tab.png');
    }
}

/* スマートフォン用 */
@media screen and (max-width: 799px) {
    .Top-main-visual-wrap .bg-image1920{
        background-image: url('../images/top-image-sp.png');
    }
}

.Top-main-visual-wrap .centerBox{
	width: 100%;
	position: absolute;
	top: 42.5%;
	left: 0;
	z-index: 10;
}


/*テキストアニメーションTOP（下から出てくる）
-----------------------------------------------------------*/
.Top-main-visual-wrap .centerBox .h1-text{
         width: 100%;
         height: 100vh;
        text-align: center;
        margin: 0 auto;
	    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.6));
}
        @keyframes showTextFromBottom{
      0%{
         transform: translateY( 100% );
      }
      100%{
          transform: translateY( 0px );
      }
    }
    .textanimation-main span{/*----------eg-h1の代替----------*/
     animation: showText 1s backwards;
     display: inline-block;
	font-size: 96px;
	font-family: 'Urbanist', sans-serif;
    line-height: 1.25;
	color: #fff;
	font-weight: normal;
	/*filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));*/
        
    }
    .textanimation-main > span{
      overflow: hidden;
    }
    .textanimation-main > span > span{
      animation: showTextFromBottom 0.5s backwards;
    }

@media screen and (max-width:1400px) {
    
.textanimation-main span{
	font-size: 72px;
}
    
}

@media screen and (max-width:1000px) {
    
.Top-main-visual-wrap .centerBox{
	top: 25%;
}
    
.textanimation-main span{
	font-size: 84px;
}
    
}

@media screen and (max-width:800px) {
    
.Top-main-visual-wrap .centerBox{
	top: 22.5%;
}
    
}

@media screen and (max-width:500px) {
    
.textanimation-main span{
	font-size: 60px;
}
    
}

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

.textanimation-main span{
	font-size: 48px;
}
    
}

.jp-h1{
    color: #fff;
    font-weight: normal;
	font-size: clamp(16px, 2vw, 20px);
    line-height: 2;
	filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}

/*background-image 背景フェードイン
-----------------------------------------------------------*/
.fade-in-background {
  opacity: 0;
  animation: fadeIn 7.5s forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/* ---------------------------------------------------------------------------------------------

   Concept文章

--------------------------------------------------------------------------------------------- */
.concept{
    text-align: center;
    color: #fff;
	font-size: clamp(20px, 2vw, 30px);
	filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.9));
}


/* ---------------------------------------------------------------------------------------------

   Contents

--------------------------------------------------------------------------------------------- */

/*palalax 指定
-----------------------------------------------------------*/
.title-block {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
}

.block {
  display: flex;
  justify-content: right;/*center*/
  align-items: top;
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;/*上で止まる*/
}

.social-block {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
}

.summary-block {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;/*上で止まる*/
}



/*Title 指定一覧
-----------------------------------------------------------*/
.title-wrap .eg-h2{
    width: 80%;
    margin: 0 auto;
	font-size: clamp(24px, 2vw, 36px);
	font-family: 'Urbanist', sans-serif;
    line-height: 1.25;
    border-bottom: 1px solid #999;
}

.title-wrap h2{
    width: 80%;
    margin: 0 auto;
    line-height: 2;
    font-weight: normal;
	font-size: clamp(16px, 2vw, 18px);
}

#business{/*事業案内 タイトル*/
    z-index: 1;/*palalax 指定------------------1*/
}
#initiatives{/*社会貢献 タイトル*/
    z-index: 250;/*palalax 指定------------------250*/
}

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

.title-wrap .eg-h2,.title-wrap h2{
    width: 90%;
}
    
}



/* ---------------------------------------------------------------------------------------------

   事業案内コンテンツ

--------------------------------------------------------------------------------------------- */
/*ビジュアル指定
-----------------------------------------------------------*/
.business-visual{
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

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

.business-visual{
    left: 0;
    width: 100%;
    height: 30%;/*40%*/
}
    
}

#corporate {/*Corporate 事業案内01*/
    z-index: 50;/*palalax 指定------------------50*/
    background: #fff;
}
#product {/*Product 事業案内02*/
    z-index: 100;/*palalax 指定------------------100*/
    background: #fffafa;
}
#system {/*System 事業案内03*/
    z-index: 150;/*palalax 指定------------------150*/
    background: #fff;
}

#corporate .corporate-image{
    background-image: url("../images/content-img-01.png");
}
#product .product-image{
    background-image: url("../images/content-img-02.png");
}
#system .system-image{
    background-image: url("../images/content-img-03.png");
}


/*テキストエリア指定
-----------------------------------------------------------*/
.business-contents{
    position: absolute;
    top: 15%;
    left: 10%;
    width: 90%;
    height: 80%;
}

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

.business-contents{
    top: 32.5%;/*42.5%*/
    left: 5%;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}
    
}

.number{
    line-height: 1;
    font-family: 'Urbanist', sans-serif;
	font-size: clamp(24px, 2vw, 48px);
    color: #ccc;
    margin-bottom: 15px;
}

.business-contents .text-16{
    margin-top: 50px;
}

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

.business-contents .text-16{
    margin-top: 25px;
}
    
}


/*テキストアニメーションBusiness（下から出てくる）
-----------------------------------------------------------*/
.business-wrap .h3-text{
         width: 100%;
}
        @keyframes showTextFromBottom{
      0%{
         transform: translateY( 100% );
      }
      100%{
          transform: translateY( 0px );
      }
    }
    .textanimation-contents.displayed span{/*----------jsにも記載 .displayedを付与することで領域に入ってからアクション----------*/
     animation: showText 1s backwards;
     display: inline-block;
	font-size: 96px;
	font-family: 'Oswald', sans-serif;
    line-height: 1.15;
	color: #2c5aa0;
	font-weight: 700;
        
    }
    .textanimation-contents.displayed > span{
      overflow: hidden;
      padding-bottom: 8px;
    }
    .textanimation-contents.displayed > span > span{
      animation: showTextFromBottom 0.5s backwards;
    }

@media screen and (max-width:1200px) {
    
.textanimation-contents.displayed span{
	font-size: 84px;
    line-height: 1.15;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #2c5aa0;
}
.textanimation-contents.displayed > span{
    padding-bottom: 7px;
}
    
}
@media screen and (max-width:1000px) {
    
.textanimation-contents.displayed span{
	font-size: 60px;
    line-height: 1.15;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #2c5aa0;
}
.textanimation-contents.displayed > span{
    padding-bottom: 5px;
}

}
@media screen and (max-width:800px) {
    
.textanimation-contents.displayed span{
	font-size: 48px;
    line-height: 1.15;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #2c5aa0;
}
.textanimation-contents.displayed > span{
    padding-bottom: 4px;
}
    
}
@media screen and (max-width:600px) {

.textanimation-contents.displayed span{
	font-size: 36px;
    line-height: 1.15;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #2c5aa0;
}
.textanimation-contents.displayed > span{
    padding-bottom: 3px;
}
    
}
@media screen and (max-width:400px) {

.textanimation-contents.displayed span{
	font-size: 32.5px;
    line-height: 1.15;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #2c5aa0;
}
.textanimation-contents.displayed > span{
    padding-bottom: 3px;
}
    
}

.jp-h3{
	font-size: clamp(16px, 2vw, 24px);
	/*filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));*/
}



/* ---------------------------------------------------------------------------------------------

   Summary 総括コメント

--------------------------------------------------------------------------------------------- */
#summary{
    z-index: 200;/*palalax 指定------------------200*/
    background: #f3f8ff;/*薄い青系背景*/
}

.summary-wrap .text-20{
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

/*summary 背景アニメーション指定
-------------------------------------------*/
/*base.cssに記述*/


/*summary hoverでボーダーが回るリンクボタン指定
-------------------------------------------*/
/*base.cssに記述*/




/* ---------------------------------------------------------------------------------------------

   社会貢献コンテンツ

--------------------------------------------------------------------------------------------- */
#social-contribution01{
    z-index: 300;/*palalax 指定------------------300*/
    background: #fff;
}
#social-contribution02{
    z-index: 300;/*palalax 指定------------------300*/
    background: #fff;
}

.social-contents{
    float: left;
    width: 85%;
}

.social-contents .text-wrap{
    float: right;
    width: 800px;
    margin-top: 50px;
}

@media screen and (max-width:1000px) {
    
.social-contents{
    width: 90%;
}

.social-contents .text-wrap{
    width: 95%;
}
    
}

/*代表者挨拶
-----------------------------------------------------------*/
.greeting-contents{
    float: right;
    width: 85%;
}

.greeting-contents .text-wrap{
    float: left;
    width: 800px;
    margin-top: 50px;
}

.greeting-contents .text-wrap .greeting-h3{
    font-weight: normal;
	font-size: clamp(20px, 2vw, 24px);
    border-bottom: 1px solid #e60012;
}

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

.greeting-contents{
    width: 90%;
}
    
.greeting-contents .text-wrap{
    width: 95%;
}
    
}


/*slider指定（社会貢献、代表者挨拶）
-------------------------------*/
.slider01,.slider02{
    width: 100vw;
    height: 75vh;
    overflow: hidden;
    position: relative;
    max-width: 100%;
}
.slider01 div,.slider02 div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10;
    opacity: 0;
	animation-name: slide-fade;
	animation-duration: 21s;/*3枚画像で21秒*/
	animation-iteration-count: infinite;
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
        
		opacity: 0;
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}

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

.slider01,.slider02{
    height: 50vh;
}
    
}

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

.slider01,.slider02{
    height: 40vh;
}
    
}

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

.slider01,.slider02{
    height: 30vh;
}
    
}

/*@media screen and (max-width:500px) {

.slider01,.slider02{
    height: 30vh;
}
    
}*/


/*slider社会貢献背景
-------------------------------*/
.slider01 div:first-of-type{
	background-image: url("../images/social-contribution-01.png");
}
.slider01 div:nth-of-type(2){
	background-image: url("../images/social-contribution-02.png");
	animation-delay: 7s;
}
.slider01 div:last-of-type{
	background-image: url("../images/social-contribution-03.png");
	animation-delay: 14s;
}

/*slider代表者挨拶背景
-------------------------------*/
.slider02 div:first-of-type{
	background-image: url("../images/social-contribution-04.png");
}
.slider02 div:nth-of-type(2){
	background-image: url("../images/social-contribution-05.png");
	animation-delay: 7s;
}
.slider02 div:last-of-type{
	background-image: url("../images/social-contribution-06.png");
	animation-delay: 14s;
}