@charset "utf-8";

/*************/
/* KeyVisual */
/*************/

#about-kv{
    width: 100%;
    min-height: 100lvh;

}
#about-kv-inner{
    /*position: relative;*/
    clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
}
#about-kv-inner::before{
    position:fixed;
    inset:0;

    content:"";

    /*固定ヘッダ分 80px 背景をずらす*/
    background:linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 80px, rgba(0, 0, 0, 0.3)), url(../images/index/key-visual.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top 80px;

    width:100%;
    height:100lvh;

    z-index:-1;
}

@media (max-width: 768.98px){
  #about-kv-inner::before{
    background:linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/index/key-visual.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
  }

}




/* KeyVisual内 コンテンツ配置 */
@media (min-width: 769px){
  #kv-contents-wrap{
     display:flex;
     justify-content:space-around;
     max-width:1200px;margin:0 auto;
  }

  #kv-contents-wrap > div{
     flex-basis:45%;
  }

  .category-title{
    align-self:flex-start;
    position: sticky;
    top:146px;
    padding-bottom:100px;
  }

  #about-statement{
    padding-top:100vh;
    padding-bottom:100px;
  }

}



@media (max-width: 768.98px){
  #kv-contents-wrap{
    padding:2rem 1.5rem 4rem ;
  }
}


/* KeyVisual内 テキスト */
#about-kv{color:#fff;}
#about-statement p{
  line-height:2;
  margin-bottom:2em;

}

/* KeyVisual内 タイトル */
.category-title h1 .txt-ja{ font-weight: 400}
.category-title h1 .txt-ja:before{content: ""; display: inline-block; background: #291B68; vertical-align: middle; width: min(5.3vw,20px); height: min(2.1vw,8px); margin-right: min(2.6vw,10px);}

@media (min-width: 769px){
  .category-title h1{margin-bottom: 40px;margin-top:30px;}
  .category-title h1 .txt-en{ font-size: 5rem; margin-bottom: .875rem;}
  .category-title h1 .txt-ja{ font-size: 0.875rem}

  .category-title h1 + p{font-size:2.5rem;font-weight:700;line-height:1.5;} /*ppt P1 font-weight:700*/
}
@media (max-width: 768.98px){
  .category-title h1{margin-bottom:40px;}
  .category-title h1 .txt-en{ font-size: min(12vw , 45px); margin-bottom: min(4.2vw , 16px);}
  .category-title h1 .txt-ja{ font-size: 0.875rem;}

  .category-title h1 + p{display:none;}
}


/* KeyVisual内 ステートメント*/
#about-statement p{font-size:1.125rem;font-weight:500;}/*18px*/ /*ppt P1 font-weight:500*/
#about-statement > p:first-child{
  font-size:36px; /*ppt P1 font-size:36px*/
  font-weight:900;
  line-height:1.8;
}

#about-statement > p:last-child{
  margin-bottom:0;
}

@media (max-width: 768.98px){
  #about-statement p{font-size:15px;}
  #about-statement > p:first-child{
    font-size:22px;
    font-size:min( calc( (100vw - 2rem) / 16 )  , 22px );
  }
}



/********************/
/* コンテンツエリア */
/* 幅：pages参照    */
/********************/

/*リセット*/
#main .section .container h2{margin:0;padding:0;border:none;}
#main .section .container h3{margin:0;padding:0;border:none;}
#main .section .container h3:before{content:none;}


/*見出し*/
#main .section .container .content-title-box h2{
  background:rgba( 1, 49, 136, .14);
  border-top:solid 1px #013188;
  color:#000;
  font-size:2.25rem;/*36px*/
  font-weight:700;/*ppt P2 font-weight:700*/
  padding:.75rem 1rem;
}

#main .section .container .content-title-box > span:first-child{
  background:#013188;
  color:#fff;
  font-weight:600;
  font-size:1.25rem;
  display:inline-block;
  padding:6px 1rem;
}

@media (max-width: 768.98px){
  #main .section .container .content-title-box h2{
    font-size:1.375rem;/*22px*/
    padding:.75rem 1rem;

  }
  #main .section .container .content-title-box span:first-child{
    font-size:0.76rem;/*12px*/
  }


  .content-title-box + .content{
    padding-top:20px !important;/*ppt P4 見出しとコンテンツ間余白20px*/
  }

}


/*横幅*/
@media (max-width: 768.98px){
  /*SP:見出しはfull幅に*/
  #main .section .container{width:100%;}
  #main .section .container .content{margin:0 1.5rem;}/*KVの余白に合わせる*/

  #main .section .container .content-title-box h2{padding:.75rem 1.5rem;}
  #main .section .container .content-title-box span:first-child{padding-left:1.5rem;padding-right:1.5rem}
}




/*JEXSYSに込めた思い*/
.content .jexsys-logo{text-align:center;}
@media (min-width: 769px){
  .content .jexsys-logo{text-align:left;}
  .content .jexsys-logo img{width:600px;}
}

#jexsys-name{
  display:inline-block;
  font-size:1.2rem;
}
#jexsys-name > span{
  font-size:1.6em;
}

@media (max-width: 768.98px){
  #jexsys-name{
    display:block;
    line-height:1;
    margin-bottom:.6rem;
    font-size:min( calc( (100vw - 3rem ) / 24 ) , 1.2rem );
  }

  .content .jexsys-logo{padding-bottom:30px;}/*ppt P4 ロゴの下余白30px*/

}

@media (max-width: 768.98px) {
#main .section .container:not(:first-child){padding-top:80px}/*ppt P4 セクション間の余白80px*/
}




/*PURPOSE*/
/*配置*/
@media (min-width: 769px){
  #purpose-wrap{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  #purpose-wrap > div{
    flex-basis:50%;
  }
  #purpose-wrap > div:first-child{
    position: sticky;
    top:80px;
  }
}
@media (max-width: 768.98px){
  #purpose-wrap > div:first-child{
    padding-bottom:40px;
    text-align:center;
  }
}


.purpose-en{/*グレイの小さめ英文*/
  color:#6e6e6e;
  display:block;

  /*ウェイト600しか読み込んでいないので、linkにweight400追加*/
  font-family: 'Barlow', sans-serif;
  font-size:1rem;
  font-weight:400;

  padding:4px 0;
  padding-left:0 !important;
  margin:0;
}

@media (max-width: 768.98px){
  .purpose-en{line-height:1.28 !important;}/*ppt P4 line-height:1.28*/
}


#main .section .container h3{
  color:#013188;
  margin-bottom:1rem;

  font-weight:700;/*ppt P3 font-weight:700*/
}
#main .section .container p + h3{margin-top:3rem;}
@media (max-width: 768.98px){
  #main .section .container p + h3{margin-top:50px !important;}/*ppt P4 上部余白50px*/
}

#main .section .container h3 span.en{
   font-family: 'Barlow', sans-serif;
   font-size:2.5rem;
}
#main .section .container h3 span.ja{
   font-size:1.14rem;
}

@media (max-width: 768.98px){
  #main .section .container h3 span.ja{
   font-size:16px;/*ppt P4 font-size:16px*/
  }
}


.purpose-appeals{
   /*font-size:1.5rem;*/
   font-size:26px;/*ppt P3 font-size:26px*/

   font-weight:600; 
   margin-bottom:0 !important;;
}
@media (max-width: 768.98px){
  #main .container p.purpose-appeals{
    font-size:18px;line-height:1.55;/*ppt P4 font-size:19px;line-height:1.55*/
  }

}