@charset "UTF-8";
/* CSS Document */
header h1.pageTit{
  position: relative;
  top:0;
  right: 0;
	text-align: right;
	padding: 22px 65px 0 0;
}
header h1.pageTit .fen_m{
	font-size: 0.15rem;
	letter-spacing: 0.2em;
}
/*=============================
  main
あとでphp化
php化したときにやること
・色を生地別に変化
・infLineAni以外もphp化
・各delayも0.1s刻みにランダムで設定「main_row1_delay」は削除
参考）
animation:
lineAni_start var(--main_row1_speed) var(--main_easeing) hoge秒 1 both,
lineAni_loop var(--main_row1_speed) var(--main_easeing) calc(var(--main_row1_speed) + hoge秒) infinite none;
それとクロスフェードさせたい場合、linear-gradientにはtransition効かないから、spanのレイヤーわけが必要
=============================*/

#main{
  width: 100%;
  height: calc(100svh - 65px);
  position: relative;
  overflow: hidden;
  margin-bottom: 125px;
}
#main .noiseLines li p{
  position: absolute;
  top:0;
  left:0;
  display: none;
}
#main .noiseLines li p.start{
  display: block;
}

/* #main .noiseLines li p:nth-of-type(1){z-index: 4}
#main .noiseLines li p:nth-of-type(2){z-index: 3}
#main .noiseLines li p:nth-of-type(3){z-index: 2}
#main .noiseLines li p:nth-of-type(4){z-index: 1} */


#container{
}
/*=============================
  section
=============================*/
section:not(#areport){margin-top: 120px;}
section > .inner{margin-top: 110px;}
section > .inner > *{
  position: relative;
  z-index: 1;
}
section h2{
  position: sticky;
  top:19px;
  left:0;
  z-index: 100;
  font-size: 0.26rem;
  letter-spacing: 0.1em;
  text-align: right;
  padding-right: 65px;
}

/* areport
=============================*/
#areport .actList > li + li{margin-top: 50px;}
#areport .actList li .noiseArea .ph{
  aspect-ratio: 390/211;
  width: calc((390/1280)*100%);
  max-width: calc(390px * (1440/1280));
  height: auto;
  margin-left: auto;
}
/* #areport .actList li .noiseArea .noiseLines {width: max(calc(100% - (((390*0.4)/1280)*100%)),calc(100% - ((390px*0.4) * (1440/1280))));} */
#areport .actList li .noiseArea .noiseLines {width: max(calc(100% - (390/1280)*100%),calc(100% - (390px * 1440/1280)));}
#areport .actList li:first-child .noiseArea .ph{
  aspect-ratio: 786/423;
  width: calc((786/1280)*100%);
  max-width: calc(786px * (1440/1280));
}
/* #areport .actList li:first-child .noiseArea .noiseLines {width: max(calc(100% - (((786*0.4)/1280)*100%)),calc(100% - ((786px*0.4) * (1440/1280))));} */
#areport .actList li:first-child .noiseArea .noiseLines {width: max(calc(100% - (786/1280)*100%),calc(100% - (786px * 1440/1280)));}






#areport .actList li .detailArea {
  grid-template-columns: 50% calc(50% - 80px) 80px;
  /* grid-template-rows: repeat(3, 1fr); */
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin-top: 40px;
  padding: 0 15px;
}
/* #areport .actList .detailArea > *{border: 1px solid #000;} */
#areport .actList li .detailArea .grid01 {grid-area: 1 / 1 / 2 / 2;}
#areport .actList li .detailArea .grid02 {grid-area: 1 / 2 / 2 / 3; padding-left: 35px;}
#areport .actList li .detailArea .grid03 {grid-area: 1 / 3 / 2 / 4;}
#areport .actList li .detailArea .grid04 {grid-area: 2 / 1 / 3 / 2; margin-top: 20px;}
#areport .actList li .detailArea .grid06 {grid-area: 2 / 2 / 3 / 4; margin-top: 20px; padding-left: 35px;}
#areport .actList li .detailArea .grid06  > .inner{width: 100%; margin:auto 0;}

#areport .actList li:first-child .detailArea .grid04 {grid-area: 2 / 1 / 4 / 2; margin-top: 20px;}
#areport .actList li:first-child .detailArea .grid05 {grid-area: 2 / 2 / 3 / 4; margin-top: 20px; padding-left: 35px;}
#areport .actList li:first-child .detailArea .grid06 {grid-area: 3 / 2 / 4 / 4; margin-top: 20px; padding-left: 35px;}
#areport .actList li:first-child .detailArea .grid06  > .inner{width: 100%; margin: 0 0 auto 0;}


#areport .actList .detailArea .data{
  font-size: 0.12rem;
  letter-spacing: 0.1em;
}
#areport .actList .detailArea .tagList{
  font-size: 0.13rem;
  letter-spacing: 0.1em;
}
#areport .actList .detailArea .tagList li{
  margin-right: 1em;
}
#areport .actList .detailArea .likeBt{text-align: right;}
#areport .actList .detailArea .likeBt a{
  font-size: 0.13rem;
  letter-spacing: 0.1em;
  text-decoration: underline;
}

#areport .actList .detailArea h3{
  font-size: 0.21rem;
  letter-spacing: 0.15em;
  line-height: calc(34/21);
  padding-right: calc((100/625)*100%);
}
#areport .actList li:first-child .detailArea h3{
  font-size: 0.33rem;
  letter-spacing: 0.2em;
}
#areport .actList li:first-child .detailArea .txt{
  font-size: 0.14rem;
  letter-spacing: 0.1em;
  line-height: calc(27/14);
}
#areport .actList li .detailArea .phColor{width: fit-content;}
#areport .actList li .detailArea .phColor li{
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
#areport .actList li .detailArea .bt_more{
  margin-left: auto;
}


#areport .bt_view{
  margin-left: 15px;
  margin-top: 55px;
}

/* news
=============================*/
#news > .inner{
  padding: 0 15px;
}
#news .newsList li{
  padding-bottom: 25px;
  border-bottom: 1px solid #000;
}
#news .newsList > li + li{
  margin-top: 25px;
}
#news .newsList li a .data{
  width: 180px;
  font-size: 0.12rem;
  letter-spacing: 0.1em;
  padding-top: 1em;
}
#news .newsList li a h3{
  width: calc(100% - 180px - 150px);
  font-size: 0.16rem;
  letter-spacing: 0.15em;
  line-height: calc(28/16);
  margin-right: auto;
  padding-top: 0.2em;
}
#news .newsList li a .bt_more{
  width: 110px;
  display: block;
  font-size: 0.11rem;
  letter-spacing: 0.1em;
  padding: 1em;
  border: 1px solid #000;
  text-align: center;
}
#news .bt_view{
  margin-top: 55px;
}

/* about
=============================*/
#about .noiseArea01 {
	aspect-ratio: 1280/210;
	width: 100%;
	max-height: calc(210px * (1440/1280));
  margin-top: 110px;
}
#about .noiseArea02 {
	aspect-ratio: 1280/150;
	width: 100%;
	max-height: calc(150px * (1440/1280));
  margin-top: 125px;
}
#about > .inner{
  padding: 0 15px;
}
#about > .inner .logo{
  aspect-ratio: 505/92;
  width: calc((505/1280)*100%);
  margin-left: auto;
}
#about > .inner .txtArea{
  width: calc((584/1280)*100%);
}
#about > .inner .txtArea .txt{
  font-size: 0.17rem;
  letter-spacing: 0.2em;
  line-height: calc(37/17);
}
#about .bt_view{
  margin-top: 30px;
}


/* sol_pjt
=============================*/
.sol_pjt .noiseArea{margin-top: 75px;}
.sol_pjt .noiseArea .ph{
  aspect-ratio: 550/307;
  width: calc((550/1280)*100%);
  max-width: calc(550px * (1440/1280));
  height: auto;
  margin-left: auto;
}
/* #sol .noiseArea .noiseLines {width: max(calc(100% - (((550*0.4)/1280)*100%)),calc(100% - ((550px*0.4) * (1440/1280))));}
#pjt .noiseArea .noiseLines {width: max(calc(100% - (550/1280)*100%),calc(100% - (550px * 1440/1280)));} */
.sol_pjt .noiseArea .noiseLines {width: max(calc(100% - (550/1280)*100%),calc(100% - (550px * 1440/1280)));}

.sol_pjt .detailArea {
  padding: 0 15px;
  margin-top: 70px;
}
.sol_pjt .detailArea h3{
  width: calc(100% - 150px);
  font-size: 0.18rem;
  letter-spacing: 0.2em;
  line-height: calc(38/18);
}
.sol_pjt .detailArea  > .inner{
  width: 150px;
}
.sol_pjt .detailArea .phColor{
  width: fit-content;
  margin-left: auto;
}
.sol_pjt .detailArea .phColor li{
  width: 10px;
  height: 10px;
}
.sol_pjt .detailArea .phColor li + li{
  margin-left: 10px;
}
.sol_pjt .detailArea .bt_view{
  margin-left: auto;
  margin-top: 35px;
}

/* lab
=============================*/
#lab > .inner{
  padding: 0 15px;
  margin-top: 110px;
}
#lab .txtArea .logo{
  aspect-ratio: 475/107;
  width: calc((475/1250)*100%);
  margin-left: auto;
}
#lab .txtArea h3{
  width: calc(100% - (475/1250)*100%);
  font-size: 0.17rem;
  letter-spacing: 0.2em;
  line-height: calc(38/17);
}

#lab .labListArea {
  margin-top: 65px;
}
#lab .labListArea .labList{
  width: calc(100% - 150px - 95px);
  margin-right: auto;
  column-gap: 20px;
}
#lab .labListArea .labList li{
  width: calc(100% - 150px - 95px);
  margin-right: auto;
}
#lab .labListArea .labList li .name_jp{
  font-size: 0.17rem;
  letter-spacing: 0.1em;
  line-height: calc(36/17);
}
#lab .labListArea .labList li h4{
  font-size: 0.30rem;
  letter-spacing: 0.1em;
  line-height: calc(60/30);
}
#lab .labListArea .labList li .txt{
  font-size: 0.17rem;
  letter-spacing: 0.1em;
  line-height: calc(30/17);
}
#lab .labListArea .labList li .ph{
  aspect-ratio: 487/325;
  width: 100%;
  margin-top: 20px;
}