@charset "UTF-8";
/*
Theme Name: S-Hub｜東北大学
Author: SANGAKU
Author URI: https://www.s-hub.tohoku.ac.jp/
Description: S-Hub｜東北大学 半導体テクノロジー共創体
Version: 1.0
*/
body {
  overflow: visible; }
  body.show {
    overflow: hidden; }

#header {
  box-sizing: border-box;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 2.5vw;
  position: fixed;
  width: 100%;
  transition: all .35s;
  z-index: 15; }
  #header.scrollin {
    background: rgba(0, 0, 0, 0.75); }
  #header a {
    color: #FFF; }
  #header h1.header-logo {
    width: 18vw; }
  #header #globalNav ul,
  #header .nav-right ul {
    display: flex; }
    #header #globalNav ul li,
    #header .nav-right ul li {
      font-size: 83%; }
  #header #globalNav ul li a {
    margin: 0 1em;
    position: relative; }
    #header #globalNav ul li a::after {
      background: #FFF;
      content: '';
      position: absolute;
      left: 50%;
      bottom: -0.35em;
      width: 0;
      height: 1px;
      transform: translateX(-50%);
      transition: all .35s; }
    #header #globalNav ul li a:hover {
      opacity: 1; }
      #header #globalNav ul li a:hover::after {
        width: 110%; }
  #header #globalNav ul li.contact {
    display: none; }
  #header #globalNav ul li.menuTxt {
    box-sizing: border-box;
    display: none;
    padding: 3em 2em; }
    #header #globalNav ul li.menuTxt::before {
      content: '▼';
      margin-right: 0.5em; }
  #header #globalNav ul li.lang {
    display: none; }
    #header #globalNav ul li.lang a {
      display: flex;
      align-items: center; }
      #header #globalNav ul li.lang a::after {
        display: none; }
    #header #globalNav ul li.lang .icon {
      margin-right: 0.5em;
      width: auto;
      height: 1.25em; }
  #header .nav-right ul li {
    margin-left: 3em; }
    #header .nav-right ul li a {
      position: relative; }
      #header .nav-right ul li a::after {
        background: #FFF;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -0.35em;
        width: 0;
        height: 1px;
        transform: translateX(-50%);
        transition: all .35s; }
      #header .nav-right ul li a:hover {
        opacity: 1; }
        #header .nav-right ul li a:hover::after {
          width: 110%; }
    #header .nav-right ul li.lang a {
      display: flex;
      align-items: center; }
      #header .nav-right ul li.lang a::after {
        display: none; }
    #header .nav-right ul li.lang .icon {
      margin-right: 0.5em;
      width: auto;
      height: 1.25em; }
  #header #menu {
    display: none;
    width: 2em;
    height: 2em;
    position: relative; }
    #header #menu span {
      background: #FFF;
      display: block;
      width: 100%;
      height: 1px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
      #header #menu span::before, #header #menu span::after {
        background: #FFF;
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        transform-origin: 50% 50%;
        transition: all .35s; }
      #header #menu span::before {
        top: -0.65em; }
      #header #menu span::after {
        bottom: -0.65em; }
    #header #menu.show span {
      background: transparent; }
      #header #menu.show span::before {
        top: 0;
        transform: rotate(-45deg); }
      #header #menu.show span::after {
        bottom: 0;
        transform: rotate(45deg); }

#footer {
  background: #FFF;
  color: #000;
  padding: 2em 2.5vw;
  position: relative; }
  #footer h1.footer-logo {
    width: 18vw; }
  #footer .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2em; }
    #footer .footer-inner ul.sns {
      display: flex;
      align-items: center; }
      #footer .footer-inner ul.sns li {
        margin-right: 1.5em;
        width: 2em; }
        #footer .footer-inner ul.sns li:last-child {
          margin-right: 0; }
        #footer .footer-inner ul.sns li a {
          display: block;
          transform: scale(1); }
          #footer .footer-inner ul.sns li a:hover {
            opacity: 1;
            transform: scale(1.2); }
    #footer .footer-inner .copy {
      font-size: 83%;
      font-weight: 400; }
  #footer .backtoTop {
    font-size: 83%;
    position: absolute;
    top: -4em;
    right: 2.5vw; }
    #footer .backtoTop a {
      color: #FFF; }
      #footer .backtoTop a span {
        display: inline-block;
        position: absolute;
        top: -1em;
        left: 50%;
        width: 4em;
        height: 2em;
        transform: translateX(-50%); }
        #footer .backtoTop a span::before, #footer .backtoTop a span::after {
          content: "";
          position: absolute;
          top: 0;
          left: calc(50% - 1px);
          width: 2px;
          height: 1em;
          border-radius: 100vh;
          background: #FFF;
          transform-origin: 50% 1px;
          transition: all .35s; }
        #footer .backtoTop a span::before {
          transform: rotate(45deg); }
        #footer .backtoTop a span::after {
          transform: rotate(-45deg); }
      #footer .backtoTop a:hover span::before, #footer .backtoTop a:hover span::after {
        top: -0.5em; }

.inner {
  max-width: 1280px;
  margin: 0 auto; }

.attention {
  color: #ff3440; }
  .attention.small {
    font-size: 75%;
    vertical-align: super; }

.small {
  font-size: 83%; }

.note {
  font-size: 75%;
  line-height: 1.5em; }

#top-page .main {
  background: no-repeat url("assets/images/kv.jpg") 50% 50%;
  background-size: cover;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 0; }
  #top-page .main h2.title {
    font-size: clamp(35px, 2.5vw, 45px);
    line-height: 1.25em; }
  #top-page .main .logo-tohoku-univ {
    position: absolute;
    right: 0;
    bottom: 2em;
    z-index: 1; }
    #top-page .main .logo-tohoku-univ img {
      width: 5vw;
      width: clamp(48px, 5vw, 80px);
      height: auto; }
  #top-page .main .scroll {
    font-size: 83%;
    position: absolute;
    left: 2.5vw;
    left: max(24px, 2.5vw);
    bottom: 12em;
    transform-origin: 0% 100%;
    transform: rotate(90deg); }
    #top-page .main .scroll a {
      color: #FFF;
      display: block;
      padding-right: 5em; }
    #top-page .main .scroll::after {
      background: #FFF;
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px; }
    #top-page .main .scroll span {
      background: #FFF;
      border-radius: 50%;
      position: absolute;
      bottom: -0.225em;
      left: 0;
      display: block;
      width: 0.5em;
      height: 0.5em;
      opacity: 0;
      animation: 2s dot-move infinite running ease-out; }
@keyframes dot-move {
  0% {
    left: 5%;
    opacity: 0.8; }
  25% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    left: 90%;
    opacity: 0.25; } }
#top-page .bg-black,
#top-page .bg-blue,
#top-page .bg-gradation {
  background: #000;
  color: #FFF; }
  #top-page .bg-black a,
  #top-page .bg-blue a,
  #top-page .bg-gradation a {
    color: #FFF; }
#top-page .bg-blue {
  background: #3E1485; }
#top-page .bg-gradation.upper {
  background-image: linear-gradient(10deg, #000000 0%, #13207E 100%); }
#top-page .bg-gradation.under {
  background-image: linear-gradient(10deg, #13207E 0%, #000000 75%); }
#top-page .bg-img {
  background: no-repeat url("assets/images/bg_top_img.jpg") 50% 50%;
  background-size: cover; }
#top-page .bg_machine {
  background: no-repeat url("assets/images/bg_img.jpg") 50% 50%;
  background-size: cover;
  display: block;
  width: 100%;
  height: 400px; }
#top-page .section {
  padding-top: 7.5em;
  padding-bottom: 7.5em; }
#top-page .inner .titlebox {
  margin-bottom: 1.5em;
  margin-bottom: max(1.5em, 2.5vw);
  padding: 0 3.5vw 1em;
  position: relative; }
  #top-page .inner .titlebox::before, #top-page .inner .titlebox::after {
    background: #FFF;
    content: '';
    position: absolute;
    width: 50%;
    height: 3px; }
  #top-page .inner .titlebox::before {
    bottom: 0;
    left: 0;
    height: 3px; }
  #top-page .inner .titlebox::after {
    bottom: 1px;
    right: 0;
    height: 1px; }
  #top-page .inner .titlebox h3 {
    font-size: 200%;
    font-weight: 500;
    margin-bottom: 0.2em;
    line-height: 1.5em; }
  #top-page .inner .titlebox p {
    font-size: 90%;
    margin-bottom: 0.25em; }
#top-page .inner .desc {
  margin-bottom: 2.5em; }
  #top-page .inner .desc h4 {
    font-size: 150%;
    margin-bottom: 0.75em;
    line-height: 1.5em; }
  #top-page .inner .desc p {
    font-size: 108%;
    line-height: 2em; }
#top-page .inner .content {
  padding-left: 3.5vw;
  padding-right: 3.5vw; }
#top-page .contents {
  margin-bottom: 5em; }
  #top-page .contents .content-list .box {
    background: #FFF;
    color: #000;
    margin-bottom: 0.5em;
    position: relative; }
    #top-page .contents .content-list .box a {
      display: flex;
      align-items: center;
      position: relative; }
      #top-page .contents .content-list .box a:hover {
        opacity: 1; }
        #top-page .contents .content-list .box a:hover .imgBox {
          opacity: 0.75; }
        #top-page .contents .content-list .box a:hover .btn .txt::before {
          width: 105%; }
    #top-page .contents .content-list .box:last-child {
      margin-bottom: 0; }
    #top-page .contents .content-list .box .imgBox {
      width: 24%;
      transition: all .35s; }
      #top-page .contents .content-list .box .imgBox img {
        width: 100%;
        height: auto; }
    #top-page .contents .content-list .box .txtBox {
      box-sizing: border-box;
      padding: 2em;
      width: 76%; }
      #top-page .contents .content-list .box .txtBox .number {
        color: #3E1485;
        font-size: 90%; }
        #top-page .contents .content-list .box .txtBox .number .large {
          font-size: 200%;
          font-weight: 600;
          margin-left: 0.2em; }
      #top-page .contents .content-list .box .txtBox h3 {
        color: #000;
        font-size: 120%;
        font-weight: 600;
        margin-top: 0.35em; }
    #top-page .contents .content-list .box .btn {
      position: absolute;
      right: 2em;
      bottom: 2em; }
      #top-page .contents .content-list .box .btn .txt,
      #top-page .contents .content-list .box .btn a {
        color: #3E1485;
        position: relative; }
        #top-page .contents .content-list .box .btn .txt::before,
        #top-page .contents .content-list .box .btn a::before {
          background: #3E1485;
          content: '';
          width: 0;
          height: 1px;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          transition: all .35s; }
        #top-page .contents .content-list .box .btn .txt::after,
        #top-page .contents .content-list .box .btn a::after {
          background: no-repeat url("assets/images/icon_link_blue.svg") 50% 50%;
          background-size: cover;
          content: '';
          display: inline-block;
          margin-left: 0.75em;
          width: 1em;
          height: 1em; }
  #top-page .contents .talenthub {
    margin-top: 3em;
    text-align: center; }
    #top-page .contents .talenthub .box {
      border: 2px solid #FFF;
      padding: 3em; }
      #top-page .contents .talenthub .box h3 {
        font-size: 150%;
        font-weight: 500;
        line-height: 1.6em;
        margin-bottom: 1.5em; }
      #top-page .contents .talenthub .box .btn .comingsoon {
        border: 1px solid #FFF;
        box-sizing: border-box;
        display: inline-block;
        padding: 1em;
        position: relative;
        width: 360px; }
        #top-page .contents .talenthub .box .btn .comingsoon::before, #top-page .contents .talenthub .box .btn .comingsoon::after {
          content: '';
          position: absolute;
          top: 50%;
          width: 3em;
          height: 3em;
          transform: translateY(-50%); }
        #top-page .contents .talenthub .box .btn .comingsoon::before {
          background: no-repeat url("assets/images/icon_comig_L.svg") 50% 50%;
          background-size: cover;
          left: 0; }
        #top-page .contents .talenthub .box .btn .comingsoon::after {
          background: no-repeat url("assets/images/icon_comig_R.svg") 50% 50%;
          background-size: cover;
          right: 0; }
#top-page .news .news-list ul li {
  border-bottom: 1px solid #FFF; }
  #top-page .news .news-list ul li:first-child {
    border-top: 1px solid #FFF; }
  #top-page .news .news-list ul li a {
    display: flex;
    align-items: center;
    padding: 1.25em 2em; }
    #top-page .news .news-list ul li a .date,
    #top-page .news .news-list ul li a .category {
      font-size: 90%;
      line-height: 1.2em; }
    #top-page .news .news-list ul li a .date {
      width: 12%; }
    #top-page .news .news-list ul li a .category {
      background: #FFF;
      border-radius: 100vh;
      color: #3E1485;
      margin-right: 4em;
      padding: 0.5em 1.5em;
      text-align: center;
      width: 10%; }
    #top-page .news .news-list ul li a .title {
      width: 74%; }
#top-page .news .news-list .btn {
  margin-top: 3em;
  text-align: center; }
  #top-page .news .news-list .btn a {
    border: 1px solid #FFF;
    box-sizing: border-box;
    display: inline-block;
    padding: 1em;
    position: relative;
    width: 360px; }
    #top-page .news .news-list .btn a span {
      position: absolute;
      top: 50%;
      right: 3em;
      transform: translateY(-50%);
      width: 1em;
      height: 1em; }
      #top-page .news .news-list .btn a span::before, #top-page .news .news-list .btn a span::after {
        background: #FFF;
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1em;
        height: 1px; }
      #top-page .news .news-list .btn a span::after {
        transform: rotate(90deg); }
#top-page .about.inner {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  #top-page .about.inner .txtBox {
    width: 47.5%; }
  #top-page .about.inner .imgBox {
    width: 47.5%; }
    #top-page .about.inner .imgBox ul li {
      margin-bottom: 0.5em; }
#top-page .overview.inner {
  padding-bottom: 5em; }
  #top-page .overview.inner p {
    margin-bottom: 2em; }
    #top-page .overview.inner p:last-child {
      margin-bottom: 0; }
#top-page .overview .description {
  margin-bottom: 5em; }
#top-page .overview .composition h3 {
  border: 1px solid #FFF;
  display: inline-block;
  font-size: 175%;
  font-weight: 500;
  margin-bottom: 2em;
  line-height: 1.5em;
  padding: 0.8em 1.5em 1em; }
#top-page .overview .composition .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3em; }
  #top-page .overview .composition .box .txtBox {
    width: 42.5%; }
    #top-page .overview .composition .box .txtBox ul li {
      margin-bottom: 2em; }
      #top-page .overview .composition .box .txtBox ul li:last-child {
        margin-bottom: 0; }
      #top-page .overview .composition .box .txtBox ul li .number {
        display: block;
        font-size: 200%;
        font-weight: 500;
        margin-bottom: 0.5em; }
      #top-page .overview .composition .box .txtBox ul li h4 {
        font-size: 120%;
        font-weight: 500;
        margin-bottom: 1em;
        line-height: 1.6em; }
        #top-page .overview .composition .box .txtBox ul li h4 span {
          font-size: 90%; }
  #top-page .overview .composition .box .imgBox {
    width: 47.5%; }
    #top-page .overview .composition .box .imgBox a {
      cursor: pointer;
      position: relative; }
      #top-page .overview .composition .box .imgBox a::after {
        background: no-repeat url("assets/images/icon_glasses.svg") 50% 50%;
        background-size: cover;
        content: '';
        position: absolute;
        bottom: -2em;
        right: 0;
        width: 1em;
        height: 1em; }
#top-page .overview .composition h4 {
  font-size: 150%;
  margin-bottom: 0.75em;
  line-height: 1.5em; }
  #top-page .overview .composition h4 a {
    position: relative; }
    #top-page .overview .composition h4 a::after {
      background: no-repeat url(assets/images/icon_link.svg) 50% 50%;
      background-size: cover;
      content: '';
      display: inline-block;
      margin-left: 1em;
      width: 1em;
      height: 1em; }
#top-page .message .message_title {
  display: flex;
  align-items: end;
  margin-bottom: 5em; }
  #top-page .message .message_title .imgBox {
    margin-right: 5%;
    width: 30%; }
  #top-page .message .message_title .titleBox {
    padding: 1em 2em;
    position: relative;
    z-index: 1; }
    #top-page .message .message_title .titleBox::after {
      background: #3E1485;
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      transform: skewX(-15deg); }
    #top-page .message .message_title .titleBox h4 {
      font-size: 120%; }
#top-page .message .message_cont {
  line-height: 2em; }
  #top-page .message .message_cont p {
    margin-bottom: 1em; }
    #top-page .message .message_cont p:last-child {
      margin-bottom: 0; }
#top-page .chart .titlebox {
  text-align: center; }
#top-page .chart .desc {
  margin-bottom: 5em; }
  #top-page .chart .desc h4 a {
    color: #FFF; }
    #top-page .chart .desc h4 a::after {
      background: no-repeat url(assets/images/icon_link.svg) 50% 50%;
      background-size: cover;
      content: '';
      display: inline-block;
      margin-left: 1em;
      width: 1em;
      height: 1em; }
#top-page .access.inner .content {
  padding-left: 10vw;
  padding-right: 10vw; }
#top-page .access .titlebox {
  text-align: center; }
#top-page .access .googlemap {
  box-sizing: border-box;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
  height: 0; }
  #top-page .access .googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
#top-page .access .btn {
  margin-top: 1em;
  margin-bottom: 2em;
  text-align: right; }
#top-page .access .article {
  margin-bottom: 4em; }
  #top-page .access .article:last-child {
    margin-bottom: 0; }
  #top-page .access .article h4 {
    margin-bottom: 1em; }
  #top-page .access .article p {
    margin-bottom: 2em; }
    #top-page .access .article p:last-child {
      margin-bottom: 0; }
  #top-page .access .article a.link {
    position: relative; }
    #top-page .access .article a.link::after {
      background: no-repeat url("assets/images/icon_link.svg") 50% 50%;
      background-size: cover;
      content: '';
      display: inline-block;
      margin-left: 1em;
      width: 1em;
      height: 1em; }
#top-page .links .content .box {
  margin-bottom: 2em; }
  #top-page .links .content .box:last-child {
    margin-bottom: 0; }
#top-page .links .content h4 {
  font-weight: 500;
  margin-bottom: 0.5em; }
  #top-page .links .content h4::before {
    content: '□';
    margin-right: 0.25em; }
#top-page .links .content ul li {
  margin-bottom: 1.4em; }
  #top-page .links .content ul li a {
    position: relative; }
    #top-page .links .content ul li a span {
      margin-left: 1em; }
    #top-page .links .content ul li a::before {
      background: #FFF;
      content: '';
      position: absolute;
      left: 0;
      bottom: -0.2em;
      width: 100%;
      height: 1px; }
    #top-page .links .content ul li a::after {
      background: no-repeat url("assets/images/icon_link.svg") 50% 50%;
      background-size: cover;
      content: '';
      display: inline-block;
      margin-left: 1em;
      width: 1em;
      height: 1em; }
#top-page .contact.inner {
  display: flex;
  align-items: center; }
  #top-page .contact.inner .titlebox {
    margin-bottom: 0; }
    #top-page .contact.inner .titlebox::before, #top-page .contact.inner .titlebox::after {
      display: none; }
  #top-page .contact.inner .txtBox,
  #top-page .contact.inner .btnBox {
    width: 50%; }
  #top-page .contact.inner .btnBox a {
    display: inline-block; }
    #top-page .contact.inner .btnBox a .box {
      border: 2px solid #FFF;
      border-radius: 100vh;
      position: relative;
      width: 10em;
      height: 10em; }
      #top-page .contact.inner .btnBox a .box .arrow {
        background-color: #FFF;
        border-radius: 100vh;
        display: inline-block;
        margin: 2em 0;
        position: absolute;
        top: 30%;
        left: 50%;
        width: 2.5em;
        height: 4px;
        transform: translateX(-50%);
        transition: all .35s; }
        #top-page .contact.inner .btnBox a .box .arrow::before, #top-page .contact.inner .btnBox a .box .arrow::after {
          content: "";
          position: absolute;
          top: calc(50% - 2px);
          right: 0;
          width: 1.5em;
          height: 4px;
          border-radius: 100vh;
          background-color: #FFF;
          transform-origin: calc(100% - 2px) 50%; }
        #top-page .contact.inner .btnBox a .box .arrow::before {
          transform: rotate(45deg); }
        #top-page .contact.inner .btnBox a .box .arrow::after {
          transform: rotate(-45deg); }
    #top-page .contact.inner .btnBox a:hover .box .arrow {
      left: 60%; }

.error404 {
  background-image: linear-gradient(10deg, #13207E 0%, #000000 100%);
  color: #FFF; }
  .error404 .content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center; }
    .error404 .content .inner {
      text-align: center; }
      .error404 .content .inner h3 {
        font-size: 150%;
        margin-bottom: 1em; }
      .error404 .content .inner .btn a {
        border: 1px solid #FFF;
        color: #FFF;
        display: inline-block;
        margin-top: 3em;
        padding: 1em 8em;
        text-align: center; }

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 0.8s; }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.slideIn_left {
  opacity: 0;
  transform: translate(-20%, 0);
  transition: 0.8s; }
  .slideIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.slideIn_right {
  opacity: 0;
  transform: translate(20%, 0);
  transition: 0.8s; }
  .slideIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn {
  opacity: 0;
  transition: 0.8s; }
  .fadeIn.is-show {
    opacity: 1; }

.slow {
  transition: 1.6s; }

.delay1 {
  transition-delay: 0.2s; }

.delay2 {
  transition-delay: 0.4s; }

.delay3 {
  transition-delay: 0.6s; }

.delay4 {
  transition-delay: 0.8s; }

.delay5 {
  transition-delay: 1.0s; }

.tab {
  display: none; }