@charset "UTF-8";
/* CSS Document */
header h1.pageTit{
  position: absolute;
  top:10px;
  right: 45px;
}
header h1.pageTit span{
  text-align-last: justify
}

header h1.pageTit .fen_m{
	font-size: 0.07rem;
	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 - 46px);
  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: 100px;}
section > .inner{margin-top: 45px;}
section > .inner > *{
  position: relative; 
  z-index: 1;
}
section h2{
  position: sticky;
  top:15px;
  left:0;
  z-index: 100;
  font-size: 0.18rem;
  letter-spacing: 0.1em;
  text-align: right;
  padding-right: 45px;
}

/* areport
=============================*/
#areport .actList > li + li{margin-top: 50px;}
#areport .actList li .noiseArea .ph{
  aspect-ratio: 256/205;
  width: calc((256/390)*100%);
  margin-left: auto;
}
/* #areport .actList li .noiseArea .noiseLines {width: calc(100% - (((256*0.5)/390)*100%));} */
#areport .actList li .noiseArea .noiseLines {width: calc(100% - (256/390)*100%);}

#areport .actList li .detailArea {
  margin-top: 25px;
  padding: 0 10px;
}
/* #areport .actList .detailArea > *{border: 1px solid #000;} */
#areport .actList li .detailArea > *{width: 100%;}
#areport .actList li .detailArea .grid01 {order: 1;}
#areport .actList li .detailArea .grid02 {order: 5;}
#areport .actList li .detailArea .grid03 {order: 2;}
#areport .actList li .detailArea .grid04 {order: 3;}
#areport .actList li .detailArea .grid05 {order: 4;}
#areport .actList li .detailArea .grid06 {order: 6; margin-top: 25px;}



#areport .actList .detailArea .data{
  width: fit-content;
  font-size: 0.1rem;
  letter-spacing: 0.1em;
  margin-right: auto;
}
#areport .actList .detailArea .tagList{
  font-size: 0.13rem;
  letter-spacing: 0.1em;
  margin-top: 1.25em;
  column-gap: 1em;
  row-gap: 0.5em;
}
#areport .actList .detailArea .likeBt{width: fit-content;}
#areport .actList .detailArea .likeBt a{
  font-size: 0.10rem;
  letter-spacing: 0.1em;
  text-decoration: underline;
}

#areport .actList .detailArea h3{
  font-size: 0.18rem;
  letter-spacing: 0.2em;
  line-height: calc(31/18);
  margin-top: 0.5em;
}
#areport .actList li:first-child .detailArea h3{
  font-size: 0.20rem;
  letter-spacing: 0.2em;
}
#areport .actList li:first-child .detailArea .txt{
  font-size: 0.14rem;
  letter-spacing: 0.1em;
  line-height: calc(27/14);
  margin-top: 1em;
}
#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{
  width: calc(100% - 20px);
  margin: 70px 10px 0;
}
#areport .bt_view a{
  font-size: 0.15rem;
}


/* news
=============================*/
#news > .inner{
  padding: 0 10px;
}
#news .newsList li{
  padding-bottom: 25px;
  border-bottom: 1px solid #000;
}
#news .newsList > li + li{
  margin-top: 25px;
}
#news .newsList li a .data{
  font-size: 0.1rem;
  letter-spacing: 0.1em;
}
#news .newsList li a h3{
  font-size: 0.16rem;
  letter-spacing: 0.15em;
  line-height: calc(28/16);
  margin-top: 1em;
}
#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{
  width: 100%;
  margin-top: 70px;
}
#news .bt_view a{
  font-size: 0.15rem;
}

/* about
=============================*/
#about .noiseArea01 {
	aspect-ratio: 390/140;
	width: 100%;
  margin-top: 60px;
}
#about .noiseArea02 {
	aspect-ratio: 390/195;
	width: 100%;
  margin-top: 35px;
}
#about > .inner{
  padding: 0 10px;
}
#about > .inner .logo{
  aspect-ratio: 271/49;
  width: 270px;
}
#about > .inner .txtArea{
  margin-top: 45px;
}
#about > .inner .txtArea .txt{
  font-size: 0.15rem;
  letter-spacing: 0.1em;
  line-height: calc(30/15);
}
#about .bt_view{
  margin-top: 15px;
  margin-left: auto;
}


/* sol_pjt
=============================*/
.sol_pjt .noiseArea{margin-top: 65px;}
.sol_pjt .noiseArea .ph{
  aspect-ratio: 273/180;
  width: calc((273/390)*100%);
  height: auto;
  margin-left: auto;
}
/* #sol .noiseArea .noiseLines {width: calc(100% - (((273*0.5)/390)*100%));}
#pjt .noiseArea .noiseLines {width: calc(100% - (273/390)*100%);} */
.sol_pjt .noiseArea .noiseLines {width: calc(100% - (273/390)*100%);}

.sol_pjt .detailArea {
  padding: 0 10px;
  margin-top: 25px;
}
.sol_pjt .detailArea h3{
  font-size: 0.15rem;
  letter-spacing: 0.1em;
  line-height: calc(30/15);
}
.sol_pjt .detailArea .phColor{
  width: fit-content;
  margin-right: auto;
}
.sol_pjt .detailArea .phColor li{
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
.sol_pjt .detailArea .bt_view{
  margin-left: auto;
  margin-top: 35px;
}

/* lab
=============================*/
#lab > .inner{
  padding: 0 10px;
  margin-top: 70px;
}
#lab .txtArea .logo{
  aspect-ratio: 356/85;
  width: 100%;
}
#lab .txtArea h3{
  font-size: 0.15rem;
  letter-spacing: 0.1em;
  line-height: calc(30/15);
  margin-top: 45px;
}

#lab .labListArea {
  margin-top: 30px;
}
#lab .labListArea .labList{
}
#lab .labListArea .labList li + li{
  margin-top: 35px;
}
#lab .labListArea .labList li .name_jp{
  font-size: 0.12rem;
  letter-spacing: 0.1em;
  line-height:1.5;
}
#lab .labListArea .labList li h4{
  font-size: 0.25rem;
  letter-spacing: 0.1em;
  line-height: calc(50/25);
}
#lab .labListArea .labList li .txt{
  font-size: 0.12rem;
  letter-spacing: 0.1em;
  line-height: calc(25/12);
}
#lab .labListArea .labList li .ph{
  aspect-ratio: 487/325;
  width: 100%;
  margin-top: 15px;
}
#lab .bt_view{
  margin-left: auto;
  margin-top: 35px;
}