@charset "UTF-8";

/*----------------------------------------
変数
-----------------------------------------*/
:root {
  --inner-padding-Top-LR: 7vw;
}

#contents {
  padding-top: 0;
}

/*----------------------------------------
ヘッダーMV時
-----------------------------------------*/
/* .header.change-color {
  background: unset;
  filter: drop-shadow(0 0 0);
}

.header .change-logo a {
  opacity: 0;
  pointer-events: none;
} */



/*----------------------------------------
MV
-----------------------------------------*/
#mv_wrap {
  position: relative;
  animation: mvLoad_01 2s ease-in-out forwards;
  min-height: 58vw;
  background: url(../img/index/mv_bg.jpg) no-repeat center center;
  background-size: cover;
}

#mv_wrap .mainCopy {
  position: absolute;
  top: 15vw;
  left: var(--inner-padding-Top-LR);
  width: 36vw;
  z-index: 2;
}

#mv_wrap .txt_wrap {
  position: absolute;
  left: 0;
  bottom: var(--inner-padding-LR);
  width: 100%;
  padding: 0 var(--inner-padding-Top-LR);
  display: flex;
  justify-content: space-between;
}

#mv_wrap .bg_wave_01 {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

#mv_wrap .bg_wave_02 {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translate(0, 19%);
}

#mv_wrap .shape_wrap {
  position: absolute;
  top: 54.5%;
  right: 3%;
  width: 43%;
}

#mv_wrap .shape_wrap>picture {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mv_wrap .shape_wrap .shape_bg {
  width: 142%;
}

#mv_wrap .shape_wrap .shape_base img,
#mv_wrap .shape_wrap .shape_bg img {
  animation: rotationL 45s linear infinite;
}

#mv_wrap .shape_wrap .shape_line img {
  animation: rotationR 25s linear infinite;
}

#mv_wrap .shape_wrap .shape_light img {
  animation: scaleLight 25s linear infinite;
}

@keyframes rotationR {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(90deg) scale(1.05);
  }

  50% {
    transform: rotate(180deg) scale(1);
  }

  75% {
    transform: rotate(270deg) scale(1.05);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes rotationL {
  0% {
    transform: rotate(360deg) scale(1.05);
  }

  25% {
    transform: rotate(270deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.05);
  }

  75% {
    transform: rotate(90deg) scale(1);
  }

  100% {
    transform: rotate(0deg) scale(1.05);
  }
}

@keyframes scaleLight {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(10deg) scale(1.05);
  }

  50% {
    transform: rotate(0deg) scale(1);
  }

  75% {
    transform: rotate(-10deg) scale(1.05);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}


/*----------------------------------------
トップ共通
-----------------------------------------*/
h2 {
  font-size: 32px;
  font-weight: bold;
  position: relative;
  width: fit-content;
  padding-right: 1.5em;
}

h3 {
  font-size: 18px;
  margin: 0.15em 0;
}

.top_h2 picture {
  display: block;
  height: 1.95em;
}

.top_h2 picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
}

.top_h2 .ja {
  display: block;
  font-size: 20px;
  margin-top: 0.45em;
}

.bgImg_wrap {
  padding-top: 80px;
}

.sectionR,
.sectionL {
  display: flex;
  justify-content: space-between;
  margin-left: calc((100vw - var(--innerWide-maxWidth)) / 2);
}

.listBorder li:first-child {
  padding-top: 0;
}

.sectionR>.boxL,
.sectionL>.boxL {
  width: calc(var(--innerWide-maxWidth) * 0.19);
}

.sectionR>.boxR {
  width: 83%;
  border-radius: 10px 0 0 10px;
  margin-top: 50px;
}

.sectionL>.boxR {
  width: calc(var(--innerWide-maxWidth) * 0.80);
}

.sectionR>.boxR>.innerBox,
.sectionL>.boxR>.innerBox {
  padding: var(--inner-padding-LR);
  width: calc(var(--innerWide-maxWidth) * 0.80);
}

.sectionL {
  margin-left: 0;
  margin-right: calc((100vw - var(--innerWide-maxWidth)) / 2);
}

.sectionR>.boxR,
.sectionL {
  background: #fff;
  filter: drop-shadow(2px 2px 3px rgba(0, 169, 157, .3));
  transform: translateZ(0);
}

.sectionL {
  margin-top: 80px;
  margin-left: 0;
  margin-right: calc((100vw - var(--innerWide-maxWidth)) / 2);
  background: #fff;
  border-radius: 0 10px 10px 0;
}

.sectionL>.boxL {
  margin-left: calc((100vw - var(--innerWide-maxWidth)) / 2);
}

.sectionL .top_h2 {
  margin-top: -50px;
}


section:has(.tit_iconRound) .txtG {
  font-size: 1.5rem;
}

section:has(.tit_iconRound) h4 {
  font-size: 1rem;
  margin-top: 1.5em;
}

.tit_iconRound {
  font-size: 2rem;
}

.tit_iconRound_wrap a {
  display: block;
}

.tit_iconRound_wrap a:hover {
  opacity: 0.75;
}


/*----------------------------------------
ニュース
-----------------------------------------*/
#news_wrap {
  margin-bottom: 100px;
}

#news_wrap.sectionR>.boxR {
  min-height: 23em;
}

.tab-group {
  position: absolute;
  top: 80px;
  left: -20%;
  flex-direction: column;
}

.tab-group li {
  position: relative;
  width: 100%;
  padding-left: 2em;
}

.tab-group li.is-active {
  color: var(--col-green01);
  font-weight: bold;
}

.tab-group li.is-active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0rem;
  width: 1.5rem;
  height: 1.5em;
  transform: translate(0, -50%);
  background: url(../img/common/icon_h.svg) center center no-repeat;
  background-size: contain;
}

.menuSimple .tab__item button {
  text-align: left;
}



/*----------------------------------------
アバウト
-----------------------------------------*/
#about .bg_img {
  position: absolute;
  left: 0;
  bottom: 0;
}


/*----------------------------------------
研究組織
-----------------------------------------*/
#team_wrap {
  position: relative;
  overflow: hidden;
  background: url(../img/index/team_bg.jpg) center left no-repeat;
  background-size: cover;
  padding: 60px 0 70px;
  margin: 80px auto 0;
}

#team_wrap .innerBox {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

#team_wrap .listBorder li {
  border-bottom: unset;
}

.list_icon li {
  display: flex;
  flex-direction: column;
}

.list_icon li a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.list_icon li+li {
  margin-top: 0;
}

.list_icon {
  display: flex;
  justify-content: space-between;
}

.list_icon li {
  background: var(--col-greenWhite);
  text-align: center;
  padding: 10px;
  border: 1px solid var(--col-gray02);
}

.list_icon.column5 li {
  width: 19.5%;
}

.list_icon li .icon {
  display: block;
  width: 60%;
  margin: 0 auto;
}

.list_icon li .tit {
  margin-top: .5em;
  display: block;
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: 0;
  margin: auto;
}


/*----------------------------------------
アクセス
-----------------------------------------*/
#access {
  position: relative;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(-90deg, var(--grade-red01));
  padding: 70px 0;
  color: #fff;
}

#access_wrap .sectionL {
  filter: unset;
}

@media only screen and (min-width: 1900px) {}

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

  :root {
    --inner-padding-Top-LR: 4vw;
  }

}



@media only screen and (max-width: 1350px) {
  html {
    font-size: 1.35vw;
  }

  .sectionR,
  .sectionL {
    width: 100%;
    margin-left: var(--inner-padding-LR);
  }

  .sectionR>.boxL,
  .sectionL>.boxL {
    width: 20%;
    margin-left: 0;
  }

  .sectionR>.boxR,
  .sectionL>.boxR {
    width: 79%;
  }

  .sectionR>.boxR>.innerBox,
  .sectionL>.boxR>.innerBox {
    width: 96%;
  }

  .tab-group {
    left: -21vw;
  }

  .top_h2 {
    padding-right: 0;
  }

  .top_h2 .ja {
    font-size: 1.85vw;
  }

  .list_icon li {
    padding: .5vw;
  }

  .list_icon li .tit {
    font-size: 1.15vw;
  }
}

@media only screen and (max-width: 1200px) {
  :root {
    --inner-padding-Top-LR: 20px;
  }

  html {
    font-size: 1.425vw;
  }

  #mv_wrap .mainCopy {
    left: calc(2.45 * var(--inner-padding-Top-LR));
  }

}

@media only screen and (max-width: 1150px) {}

@media only screen and (max-width: 959px) {
  .list_icon {
    flex-wrap: wrap;
  }

}

@media only screen and (max-width: 850px) {}

@media only screen and (max-width: 767px) {
  :root {
    --inner-padding-Top-LR: 4vw;
  }

  html {
    font-size: 3.5vw;
  }

  .list_icon {
    flex-wrap: wrap;
  }



  /*----------------------------------------
  MV
  -----------------------------------------*/
  #mv_wrap {
    min-height: 100vh;
  }

  #mv_wrap .mainCopy {
    top: 35vw;
    left: var(--inner-padding-LR);
    width: 85vw;
  }

  #mv_wrap .shape_wrap {
    position: absolute;
    top: 130vw;
    right: 0;
    width: 80%;
  }

  #mv_wrap .shape_wrap .shape_bg {
    width: 142%;
  }


  /*----------------------------------------
  トップ共通
  -----------------------------------------*/

  .top_h2 picture {
    display: block;
    height: 1.95em;
  }


  .top_h2 .ja {
    display: block;
    font-size: 20px;
    margin-top: 0.45em;
  }

  .bgImg_wrap {
    padding-top: 10vw;
  }

  .sectionR,
  .sectionL {
    flex-wrap: wrap;
  }

  .sectionR>.boxL,
  .sectionL>.boxL,
  .sectionR>.boxR,
  .sectionL>.boxR {
    width: 100%;
  }

  .sectionR>.boxR {
    margin-top: 4vw;
  }

  .sectionL .top_h2 {
    margin-top: -10vw;
  }

  .sectionR>.boxR,
  .sectionL {
    border-radius: 10px 0 0 10px;
  }

  /*----------------------------------------
  ニュース
  -----------------------------------------*/
  #news_wrap {
    margin-bottom: 10vw;
  }

  #news_wrap.sectionR>.boxR {
    min-height: unset;
  }

  .tab-group {
    position: relative;
    top: 0px;
    left: 0;
    flex-direction: unset;
    flex-wrap: wrap;
    padding-bottom: 4vw;
    border-bottom: 1px solid var(--col-green01);
  }

  .tab-group li {
    width: 50%;
  }


  /*----------------------------------------
  アバウト
  -----------------------------------------*/
  #about .bg_img {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .tit_iconRound {
    font-size: 1.65rem;
  }

  section:has(.tit_iconRound) .txtG {
    font-size: 1.25rem;
  }

  /*----------------------------------------
  研究組織
  -----------------------------------------*/
  #team_wrap .innerBox {
    padding-top: 5vw;
    padding-bottom: 5vw;
  }

  .list_icon.column5 li {
    width: 50%;
    margin: 0;
  }

  .list_icon li .icon {
    display: block;
    width: 60%;
    margin: auto;
  }

  .list_icon li .tit {
    margin-top: .5em;
    display: block;
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.35;
    letter-spacing: 0;
  }


  /*----------------------------------------
  アクセス
  -----------------------------------------*/
  #access {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(-90deg, var(--grade-red01));
    padding: 70px 0;
    color: #fff;
  }

  #access_wrap .sectionL {
    filter: unset;
  }


}