@charset "utf-8";

/*SP用*/
@media (width <= 640px) {
  .pc {
    display: none !important
  }

  .sp {
    display: block !important
  }

  img {
    max-width: 100%;
    height: auto;
    width: auto;
  }

  body {
    min-width: auto !important;
    overflow: inherit !important;
  }

  .sp_tac {
    text-align: center !important;
  }

  .sp_tar {
    text-align: right !important;
  }

  .sp_mb15 {
    margin-bottom: 15px !important;
  }

  .sp_mb20 {
    margin-bottom: 20px !important;
  }

  div,
  p,
  dd,
  dl,
  dt,
  th,
  td,
  span,
  li {
    box-sizing: border-box;
  }

  .l_ph_box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* TOP */
  #top #header {
    margin: 0 auto;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    height: 16vw;
    background-color: #00004b;
    background-image: linear-gradient(to right, #173292, #00004b);
    z-index: 999;
  }

  #top #header ul {
    display: none;
  }

  #top #header ul li {
    margin-left: 38px;
  }

  #top #header ul li a {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
  }

  #top #header ul li.en.f_arial {
    padding-top: 2px;
  }

  #top #header ul li.en.f_arial a {
    font-weight: normal;
    letter-spacing: 0;
  }

  .topVisual {
    background-image: url("../images/top/visual_bg.webp");
    background-size: cover;
    margin-top: 16vw;
    width: 100%;
    padding: 32px 16px;

    display: grid;
    place-content: center;
  }
  .topVisualTitle {
    --cut-size: 40px;

    background-color: #00004b;
    background-image: linear-gradient(to right, #173292, #00004b);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.4;
    padding: 2px calc(var(--cut-size) + 16px);
    clip-path: polygon(
      var(--cut-size) 0,
      100% 0,
      calc(100% - var(--cut-size)) 100%,
      0 100%
      );
  }

  #top .top_news {
    padding: 12vw 0 16vw;
  }

  #top .top_news .inner {
    margin: 0 auto 0;
    width: 92vw;
    position: relative;
  }

  #top .top_news .inner ul.news_list {
    border-top: 2px solid #dbdbdb;
    border-bottom: 2px solid #dbdbdb;
    margin-bottom: 7vw;
  }

  #top .top_news .inner ul.news_list li {
    border-bottom: 1px solid #dbdbdb;
    font-size: 4vw;
    background: #fff url(../images/common/sp/arrow01.png)no-repeat right 4vw center / 1.5vw;
  }

  #top .top_news .inner ul.news_list li:last-child {
    border-bottom: none;
  }

  #top .top_news .inner ul.news_list li a {
    padding: 5vw 3vw 4vw;
    display: block;
  }

  #top .top_news .inner ul.news_list li p.date {
    color: #173292;
    font-size: 4vw;
  }

  #top .top_news .inner ul.news_list li p.news_ttl {
    width: 78vw;
    overflow: hidden;
    max-height: 11vw;
    font-size: 4vw;
    letter-spacing: 0.1vw;
    font-size: 4vw;
    text-decoration: underline;
  }

  #top .top_news .inner ul.news_list li .pdf_ico p.news_ttl {
    content: '';
    width: 15px;
    height: 17px;
    background: url(../images/common/pdf_ico.png);
    display: inline-block;
    margin-left: 9px;
    vertical-align: sub;
  }

  #top .top_news .inner ul.news_list li .out_link p.news_ttl:after {
    content: '';
    width: 14px;
    height: 14px;
    background: url(../images/common/link_ico.png);
    display: inline-block;
    margin-left: 5px;
  }

  #top .top_news .inner p.more {
    margin: 0 auto;
    width: 80vw;
    height: 15vw;
  }

  #top .top_news .inner p.more a {
    text-align: center;
    color: #fff;
    background: url(../images/common/sp/arrow02.png)no-repeat center right 28vw / 2.3vw, url(../images/common/sp/btn_bg.png)no-repeat top center / 100%;
    display: block;
    padding: 2.5vw 5vw 0 0;
    height: 12vw;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 4.5vw;
    letter-spacing: 0.3vw;
  }

  #top .top_labo {
    /* background: #f1f1f1 url(../images/common/box_bg03.png)no-repeat top 20vw right -13vw / 71vw; */
    padding: 13vw 4vw 14vw;
  }

  #top .top_labo .common_ttl span {
    margin-bottom: 0.5vw;
  }

  #top .top_labo ul.labo_list {
    border-top: 2px solid #dbdbdb;
    border-bottom: 2px solid #dbdbdb;
    margin-bottom: 6vw;
  }

  #top .top_labo ul.labo_list li {
    border-bottom: 1px solid #dbdbdb;
    font-size: 4vw;
    background: #fff url(../images/common/sp/arrow01.png)no-repeat right 5vw center / 1.5vw;
  }

  #top .top_labo ul.labo_list li:last-child {
    border-bottom: none;
  }

  #top .top_labo ul.labo_list li a {
    padding: 5vw 3vw 4vw;
    display: block;
  }

  #top .top_labo ul.labo_list li p.date {
    color: #173292;
    font-size: 4vw;
  }

  #top .top_labo ul.labo_list li p.labo_ttl {
    width: 78vw;
    overflow: hidden;
    max-height: 12vw;
    text-decoration: underline;
    font-size: 4vw;
  }

  #top .top_labo ul.labo_list li p.labo_ttl a {
    letter-spacing: 0.1vw;
    font-size: 4vw;
    text-decoration: underline;
  }

  #top .top_labo ul.labo_list li p.labo_ttl.out_link:after {
    content: '';
    width: 15px;
    height: 17px;
    background: url(../images/common/pdf_ico.png);
    display: inline-block;
    margin-left: 9px;
    vertical-align: sub;
  }

  #top .top_labo p.more {
    margin: 0 auto;
    width: 80vw;
    height: 15vw;
  }

  #top .top_labo p.more a {
    text-align: center;
    color: #fff;
    background: url(../images/common/sp/arrow02.png)no-repeat center right 28vw / 2.3vw, url(../images/common/sp/btn_bg.png)no-repeat top center / 100%;
    display: block;
    padding: 2.5vw 5vw 0 0;
    height: 12vw;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 4.5vw;
    letter-spacing: 0.3vw;
  }

  #top .end_sec .top_link {
    padding: 12vw 4vw 9vw;
  }
  #top .end_sec .top_link .common_ttl {
    margin-bottom: 8vw;
  }
  #top .end_sec .top_link ul.link_list li {
    margin-bottom: 4vw;
  }

  .top_link2 {
    /* padding: 12vw 4vw 9vw; */
    padding: 0 4vw 9vw;
  }
  .top_link2__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .top_link2__list {
    display: grid;
    gap: 24px;
  }
  .top_link2__list li {
    background: #000;
    text-align: center;
  }
  .top_link2__list li a {
    display: block;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .top_link2__list li a img {
    aspect-ratio: 69 / 20;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: 0.3s;
  }
  .top_link2__list li a span {
    font-size: 16px;
    letter-spacing: 0.05em;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    color: #fff;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 0.7),
    2px -2px 2px rgb(0 0 0 / 0.7),
    -2px 2px 2px rgb(0 0 0 / 0.7),
    -2px -2px 2px rgb(0 0 0 / 0.7);
    font-weight: bold;
  }

  /*footer*/
  /* →commonでまとめる */


  /* greeting */
  #greeting .under_mv {
    background: url(../images/greeting/main_image.jpg)no-repeat top center / cover;
  }

  #greeting .box01.greeting_box {
    margin-bottom: 10vw;
  }

  #greeting .box01.greeting_box .photo {
    margin: 0 auto 7vw;
    width: 55vw;
  }

  #greeting .box01.greeting_box p {
    clear: left;
    width: 100%;
    font-feature-settings: normal;
    letter-spacing: 0.3vw;
  }

  #greeting .box01.greeting_box .box_txt {
    text-align: right;
    margin-top: 6vw;
  }

  #greeting .box02.bio_box .common_ttl {
    padding-bottom: 3vw;
  }

  #greeting .box02.bio_box .common_ttl span.f_times {
    margin-bottom: 2vw;
  }

  /* bio */
  #bio .under_mv {
    background: url(../images/bio/main_image.jpg)no-repeat top center / cover;
  }

  #bio .box01.what_box {
    margin-bottom: 71px;
  }

  #bio .bio_img01 {
    margin: 8vw auto 13vw;
    width: 92vw;
  }

  /* career */
  #career .under_mv {
    background: url(../images/career/main_image.jpg)no-repeat top center / cover;
  }

  #career .career_img01 {
    margin: 11vw auto 18vw;
    width: 92vw;
  }

  /* practice */
  #practice .under_mv {
    background: url(../images/practice/main_image.jpg)no-repeat top center / cover;
  }

  /* access */
  #access .under_mv {
    background: url(../images/access/main_image.jpg)no-repeat top center / cover;
  }

  #access .entry a {
    color: #2959a5;
    vertical-align: middle;
  }

  #access .entry .access_img01 {
    margin-bottom: 7vw;
  }

  /* member */
  #member .under_mv {
    background: url(../images/member/main_image.jpg)no-repeat top center / cover;
  }

  #member .box01.profe_box .inner {
    padding: 0vw 4vw 29vw;
  }

  #member .box01.profe_box .inner .profe_list ul {
    border-top: 2px solid #dbdbdb;
    border-bottom: 2px solid #dbdbdb;
  }

  #member .box01.profe_box .inner .profe_list ul li {
    border-bottom: 1px solid #dbdbdb;
    padding: 5vw 4vw 4vw 6vw;
  }

  #member .box01.profe_box .inner .profe_list ul li span {
    background: url(../images/common/dot01.png)no-repeat left top 2vw / 2vw;
  }

  #member .box01.profe_box .inner .profe_list ul li:last-child {
    border: none;
  }

  #member .box01.profe_box .inner .profe_list ul li a {
    margin: 3vw 0 1vw;
  }

  #member .box03.student_box .inner .student_wrap {
    background: #fff;
    padding: 6vw 4vw 3vw;
    position: relative;
    z-index: 3;
    margin: 0 auto;
    width: 92vw;
  }

  #member .box03.student_box .inner .student_wrap .inner_box {
    margin-bottom: 4vw;
  }

  #member .box03.student_box .inner .student_wrap .inner_box h4 {
    margin-bottom: 3vw;
  }

  #member .box03.student_box .inner .student_wrap .inner_box ul li {
    padding-left: 25px;
    margin-bottom: 9px;
  }

  #member .box01.secre_box .inner {
    padding: 10vw 4vw 32vw;
  }

  #member .box01.secre_box .inner h3 {
    margin-bottom: 8vw;
  }

  #member .box01.secre_box .inner ul.flex {
    margin: 0 auto;
    width: 50vw;
  }

  #member .box02.ob_box .inner h3 {
    margin-bottom: 47px;
  }

  #member .box02.ob_box .inner .ob_wrap {
    background: #fff;
    padding: 7vw 4vw 2vw;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    margin: 0 auto;
    width: 92vw;
  }

  #member .box02.ob_box .inner .ob_wrap .inner_box {
    min-width: 325px;
    margin-bottom: 20px;
  }

  #member .box02.ob_box .inner .ob_wrap .inner_box h4 {
    margin-bottom: 2vw;
  }

  #member .box02.ob_box .inner .ob_wrap .inner_box ul li {
    padding-left: 25px;
    margin-bottom: 9px;
  }

  #member .box03.ob_box {
    padding: 13vw 4vw 1vw;
  }

  /* entrance */
  #entrance .under_mv {
    background: url(../images/entrance/main_image.jpg)no-repeat top center / cover;
  }

  #entrance .entry a {
    color: #2959a5;
  }

  #entrance .entry .address {
    vertical-align: sub;
    display: inline-block;
  }

  #entrance .box01 .inner .box01_wrap .common_entrance {
    border-bottom: 1px solid #bbb;
    padding-bottom: 4vw;
    margin: 6vw 0 4vw;
  }

  #entrance .box01 .inner .box01_wrap .entrance01.common_entrance .info_box p.box_txt01 span {
    display: block;
    padding-left: 15px;
  }

  #entrance .box01 .inner .box01_wrap .entrance01.common_entrance p.right_img,
  #entrance .box01 .inner .box01_wrap .entrance03.common_entrance p.right_img {
    margin: 0 auto 5vw;
    width: 66vw;
  }

  /* collaborative */
  #collaborative .box01_wrap p a {
    font-size: 4vw;
    color: #2959a5;
    vertical-align: middle;
  }

  /* research */
  #research .under_mv {
    background: url(../images/research/main_image.jpg)no-repeat top center / cover;
  }

  #research .box01 .inner .photo {
    margin: 0 auto 5vw;
    width: 69vw;
  }

  /* links */
  #links .box01_wrap li a {
    color: #2959a5;
  }

  /* archivement_list */
  .entry.archivement_list .pdf_list {
    border-top: 2px solid #dbdbdb;
    border-bottom: 2px solid #dbdbdb;
    margin: 0 auto 6vw;
    width: 92vw;
  }

  .entry.archivement_list .pdf_list li {
    border-bottom: 1px solid #dbdbdb;
    font-size: 14px;
    background: #fff url(../images/common/arrow01.png)no-repeat right 35px center;
    margin-bottom: 0;
  }

  .entry.archivement_list .pdf_list li:hover {
    background: #f3faff url(../images/common/arrow01.png)no-repeat right 35px center;
  }

  .entry.archivement_list .pdf_list li:last-child {
    border-bottom: none;
  }

  .entry.archivement_list .pdf_list li a {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    padding: 5vw 15vw 4vw 4vw;
  }

  .entry.archivement_list .pdf_list li a .date {
    width: 35%;
    margin-bottom: 0;
    font-size: 3.5vw;
  }

  .entry.archivement_list .pdf_list li a .labo_ttl.out_link {
    width: 65%;
    letter-spacing: 0.2vw;
    margin-bottom: 0;
    font-size: 3.5vw;
  }

  .entry.archivement_list .pdf_list li a .labo_ttl.out_link:after {
    content: '';
    width: 15px;
    height: 17px;
    background: url(../images/common/pdf_ico.png);
    display: inline-block;
    margin-left: 9px;
    vertical-align: sub;
  }

  /* news */
  #news .under_mv {
    background: url(../images/news/main_image.jpg)no-repeat top center / cover;
  }

  .entry.news_wrap ul.news_list {
    border-top: 2px solid #dbdbdb;
    border-bottom: 2px solid #dbdbdb;
    margin: 0 auto 7vw;
    width: 92vw;
  }

  .entry.news_wrap ul.news_list li {
    border-bottom: 1px solid #dbdbdb;
    font-size: 3.5vw;
    background: #fff url(../images/common/arrow01.png)no-repeat right 4vw center;
    margin-bottom: 0;
  }

  .entry.news_wrap ul.news_list li:hover {
    background: #f3faff url(../images/common/arrow01.png)no-repeat right 35px center;
  }

  .entry.news_wrap ul.news_list li:last-child {
    border-bottom: none;
  }

  .entry.news_wrap ul.news_list li a {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    padding: 5vw 10vw 4vw 4vw;
  }

  .entry.news_wrap ul.news_list li a p.date {
    width: 35%;
    letter-spacing: 0;
    margin-bottom: 0;
    font-size: 3.5vw;
  }

  .entry.news_wrap ul.news_list li a p.news_ttl {
    width: 65%;
    letter-spacing: 0.2vw;
    margin-bottom: 0;
    font-size: 3.5vw;
  }

  .entry.news_wrap ul.news_list li a.out_link p.news_ttl:after {
    content: '';
    width: 14px;
    height: 14px;
    background: url(../images/common/link_ico.png);
    display: inline-block;
    margin-left: 5px;
  }

  .entry.news_wrap ul.news_list li .pdf_ico p.news_ttl:after {
    content: '';
    width: 15px;
    height: 17px;
    background: url(../images/common/pdf_ico.png);
    display: inline-block;
    margin-left: 9px;
    vertical-align: sub;
  }

  /* english */
  #english .under_mv {
    background: url(../images/english/main_image.jpg)no-repeat top center / cover;
  }
  #english h2 {
    letter-spacing: 1px;
    padding: 14vw 4vw;
  }
  #english .entry .common_ttl span {
    font-size: 8vw;
  }
  #english .eng_wrap .box_inner02 p {
    margin-bottom: 25px;
  }
  #english .entry ul li a {
    color: #2959a5;
    text-decoration: underline;
  }

  /* english-test */
  #english-test .under_mv {
    background: url(../images/english/main_image.jpg)no-repeat top center / cover;
  }
  #english-test h2 {
    letter-spacing: 1px;
    padding: 14vw 4vw;
  }
  #english-test .entry .common_ttl span {
    font-size: 8vw;
  }
  #english-test .eng_wrap .box_inner02 p {
    margin-bottom: 25px;
  }
  #english-test .entry ul li a {
    color: #2959a5;
    text-decoration: underline;
  }


  /* works */
  #works .under_mv {
    background: url(../images/works/main_image.jpg)no-repeat top center / cover;
  }

  #works .tab_box {
    display: none;
  }

  #works .tab_box.active_box {
    display: block;
  }

  #works .btn_wrap {
    border-bottom: 2px solid #dbdbdb;
    padding-bottom: 8vw;
    margin-bottom: 8vw;
  }

  #works .btn_wrap .tab_btn.active_btn {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2678df+0,5da0e5+100 */
    background: #2678df;
    /* Old browsers */
    background: -moz-linear-gradient(left, #2678df 0%, #5da0e5 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #2678df 0%, #5da0e5 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #2678df 0%, #5da0e5 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2678df', endColorstr='#5da0e5', GradientType=1);
    /* IE6-9 */
    color: #fff;
  }

  #works .btn_wrap .tab_btn {
    display: inline-block;
    width: 45vw;
    background: #ededed;
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    padding: 2vw 0 1vw;
    letter-spacing: 1px;
    margin: 0 auto 2vw;
  }
}