@charset "UTF-8";
:root { --bgc: #f3f0f8; --blue: #0086d1; --skyblue: #1bb4bd; --lightblue: #e5f3fa; --purple: #733c93; --navy: #004458; --gray: #c8c8c9; --black: #231814; }

@media (min-width: 481px), print { :root { --width: 950; } }
@media (max-width: 480px) { :root { --width: 480; } }
/* ---------- COMMON ---------- */
* { box-sizing: border-box; margin: 0; margin-block-start: 0; margin-block-end: 0; padding: 0; }

html { font-size: 62.5%; font-family: "Noto Sans JP", sans-serif; line-height: 1.5; scroll-behavior: smooth; }

body { background-color: var(--bgc); font-size: 1.6rem; font-weight: 400; font-feature-settings: "palt"; }

@media screen and (min-width: 481px), print { body { min-width: 950px; }
  .sp-only { display: none; } }
@media (max-width: 480px) { body { font-size: calc((16 / var(--width)) * 100vw); }
  .pc-only { display: none; } }
header, footer, section, article, aside, nav, pre { display: block; }

a { text-decoration: none; transition: ease 0.5s; }

a[href^="tel:"] { pointer-events: none; }

@media (max-width: 480px) { a[href^="tel:"] { text-decoration: underline; } }
a.blank::after { content: ''; display: inline-block; width: 10px; height: 10px; background: url("../img/arrow.svg") center center no-repeat; background-size: contain; transform: rotate(45deg) translate(0, 0); transform-origin: center center; transition: transform ease-in-out 0.1s; }

a.blank:hover { color: var(--blue); }
a.blank:hover::after { transform: rotate(45deg) translate(0, -3px); }

img { width: 100%; height: auto; vertical-align: top; object-fit: contain; object-position: center center; }

figure > img { text-align: center; }

figure figcaption { color: var(--black); font-size: 90%; margin: 8px; }
figure figcaption strong { font-size: 110%; }

/* ---------- FONTS ---------- */
/* weight: Use a value from 300-500,700-900 */
.noto-sans-jp-L { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }

.noto-sans-jp-R { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }

.noto-sans-jp-M { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; }

.noto-sans-jp-B { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; }

.noto-sans-jp-SB { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; }

/* weight: Use a value from 300 to 500 */
.noto-serif-jp-L { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }

.noto-serif-jp-R { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }

.noto-serif-jp-M { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; }

/* ---------- HEADER ---------- */
#header { width: 100%; padding: 20px 0; position: fixed; top: 0; left: 0; z-index: 10; transition: background ease .5s; }

#header > .inner { display: flex; flex-direction: row; align-items: center; max-width: 1200px; }

@media screen and (min-width: 481px), print { #header > .inner { min-width: 950px; } }
#header:focus a, #header a:hover { opacity: 0.5; }

a.logo { display: block; }

a.logo.logo_oit { width: 260px; height: auto; }

@media (max-width: 480px) { a.logo.logo_oit { width: calc((214 / 480) * 100vw); height: auto; max-width: 214px; } }
#header.sticky { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); padding: 10px 0; }

@media screen and (min-width: 481px), print { #header.sticky a.logo.logo_oit { width: 160px; height: auto; }
  #header.sticky ul.gnav__list > li { font-size: 1.5rem; } }
/* PHONE - grobal navigation */
@media screen and (max-width: 480px) { nav#gnav { background: linear-gradient(to right, #eeefef 0%, #c8c8c9 100%); width: 80%; height: 100vh; padding: calc((216 / 480) * 100vw) 0 calc((60 / 480) * 100vw) calc((60 / 480) * 100vw); position: fixed; top: 0; right: -100%; z-index: 10; overflow-y: auto; transition: right ease .3s; }
  nav#gnav.is-active { right: 0; }
  nav#gnav::-webkit-scrollbar { width: 6px; height: 6px; }
  nav#gnav::-webkit-scrollbar-track { background-color: #ccc; height: 6px; }
  nav#gnav::-webkit-scrollbar-thumb { background: #000; width: 6px; height: 6px; border-radius: 3px; }
  ul.gnav__list { list-style: none; }
  ul.gnav__list > li { font-size: calc((20 / 480) * 100vw); font-weight: 600; line-height: 1.3; padding-right: calc((16 / 480) * 100vw); }
  ul.gnav__list > li:last-child { margin-bottom: 0; }
  ul.gnav__list > li.has-nav { padding-right: 0; }
  /* link none */
  ul.gnav__list > li > a[href=""] { color: #4d4d4d; opacity: 0.5; pointer-events: none; text-decoration: line-through; }
  ul.gnav__list > li > a::before, ul.gnav__list > li.has-nav > button::before { content: ''; display: inline-block; vertical-align: middle; background: url("../img/icon_arrow.svg") left 10% no-repeat; background-size: contain; width: calc((32 / 480) * 100vw); height: calc((32 / 480) * 100vw); margin-right: calc((16 / 480) * 100vw); }
  ul.gnav__list > li > a.is-active::before, ul.gnav__list > li.has-nav > button.is-active::before { background-image: url("../img/icon_arrow_active.svg"); }
  ul.gnav__list > li > a, ul.gnav__list > li > .gnav__list__label { color: #4d4d4d; display: block; padding: calc((20 / 480) * 100vw) 0; }
  ul.gnav__list > li > a.is-active, ul.gnav__list > li > button.is-active { color: var(--blue); }
  ul.gnav__sub-list { margin-left: calc((55 / 480) * 100vw); }
  ul.gnav__sub-list > li { font-size: calc((25 / 480) * 100vw); line-height: 1.3; margin-bottom: 1px; }
  ul.gnav__sub-list > li:last-child { margin-bottom: 0; }
  ul.gnav__sub-list > li > a { display: block; background-color: var(--gray); color: #fff; padding: calc((18 / 480) * 100vw) calc((32 / 480) * 100vw); }
  ul.gnav__sub-list > li > a.is-active { background-color: var(--blue); }
  /* link none */
  ul.gnav__sub-list > li > a[href=""] { pointer-events: none; opacity: 0.5; text-decoration: line-through; } }
/* PC - grobal navigation */
@media screen and (min-width: 481px), print { nav#gnav { margin-left: auto; }
  ul.gnav__list { list-style: none; display: flex; column-gap: 40px; }
  ul.gnav__list > li { font-size: 1.7rem; font-weight: 500; letter-spacing: calc(17px * 110 / 1000); line-height: 1.7; }
  ul.gnav__list > li > a, ul.gnav__list > li > button { color: #fff; display: block; position: relative; transition: color ease .3s; }
  ul.gnav__list > li > a::before, ul.gnav__list > li > button::before { content: ''; display: block; width: 0%; height: 2px; background-color: var(--blue); position: absolute; left: 0; bottom: -2px; transition: width ease .3s; }
  ul.gnav__list > li > a.is-active::before, ul.gnav__list > li > button.is-active::before, ul.gnav__list > li > a:hover::before, ul.gnav__list > li > button:hover::before, ul.gnav__list > li > a:focus-within::before, ul.gnav__list > li > button:focus-within::before, ul.gnav__list > li:hover > button::before { width: 100%; }
  /* link none */
  ul.gnav__list > li > a[href=""] { opacity: 0.5; pointer-events: none; text-decoration: line-through; }
  ul.gnav__list > li > a[href=""]::before { display: none; }
  ul.gnav__list > li > a[href=""]:focus-within { color: #fff; }
  ul.gnav__list > li > a.is-active, ul.gnav__list > li > button.is-active, ul.gnav__list > li > a:hover, ul.gnav__list > li.has-nav:hover > button, ul.gnav__list > li > a:focus-within, ul.gnav__list > li.has-nav:focus-within > button { color: var(--blue); }
  ul.gnav__list > li.last { border-left: 1px solid #fff; border-right: 1px solid #fff; padding: 0 16px; }
  ul.gnav__list > li.has-nav { position: relative; }
  ul.gnav__sub-list { position: absolute; left: 0; width: 300px; max-width: 300px; top: auto; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateX(-20px); transition: opacity ease .35s, transform ease .35s; }
  /* show */
  ul.gnav__list > li.has-nav:hover > ul.gnav__sub-list, ul.gnav__list > li.has-nav:focus-within > ul.gnav__sub-list { opacity: 1; visibility: visible; transform: translateX(0px); }
  ul.gnav__sub-list > li { font-size: 1.7rem; line-height: 1.7; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; }
  ul.gnav__sub-list > li:first-child { border-top: 1px solid #fff; }
  ul.gnav__sub-list > li > a { display: block; background-color: var(--gray); color: #fff; padding: 8px 14px; transition: background ease .3s; }
  ul.gnav__sub-list > li > a.is-active, ul.gnav__sub-list > li > a:hover, ul.gnav__sub-list > li > a:focus-within { background-color: var(--blue); }
  /* link none */
  ul.gnav__sub-list > li > a[href=""] { pointer-events: none; color: rgba(255, 255, 255, 0.35); text-decoration: line-through; }
  ul.gnav__sub-list > li > a[href=""]:focus-within { background-color: var(--gray); } }
/* PHONE - menu button */
@media screen and (max-width: 480px) { button.menu-btn { background-color: transparent; border: 2px solid #fff; border-radius: 50%; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); display: flex; justify-content: space-between; flex-direction: column; width: calc((44 / 480) * 100vw); height: calc((44 / 480) * 100vw); max-width: 44px; max-height: 44px; margin-left: auto; position: relative; z-index: 15; }
  button.menu-btn span.menu-btn__bars { width: calc((21 / 480) * 100vw); height: calc((15 / 480) * 100vw); position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); }
  button.menu-btn span.menu-btn__bar { display: block; background-color: #fff; width: 100%; height: 2.3px; margin-bottom: 4px; transition: transform ease .3s, top ease .3s, left ease .3s; }
  button.menu-btn span.menu-btn__bar:last-child { margin-bottom: 0; }
  /* is-active */
  button.menu-btn.is-active span.menu-btn__bar:first-child { transform-origin: center center; transform: rotate(45deg) translate(4px, 5px); }
  button.menu-btn.is-active span.menu-btn__bar:nth-child(2) { opacity: 0; }
  button.menu-btn.is-active span.menu-btn__bar:last-child { transform-origin: center center; transform: rotate(-45deg) translate(4px, -4px); }
  .gnav__overlay { display: none; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9; }
  .gnav__overlay.is-active { display: block; } }
/* PC - menu button */
@media screen and (min-width: 481px), print { button.menu-btn, .gnav__overlay { display: none; } }
/* ---------- MAIN ---------- */
.inner { max-width: 950px; margin-right: auto; margin-left: auto; padding: 0 24px; }

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

section { clear: both; }

@media (max-width: 480px) { .inner, .inner--min { padding: 0 calc((32 / var(--width)) * 100vw); } }
/* ---------- FOOTER ---------- */
#footer { background-image: linear-gradient(to right, var(--purple) 0%, #1bb4bd 100%); color: #fff; padding: 0 96px 32px; }
#footer a { color: #fff; }

#footer .footer__adress { font-size: 1.3rem; font-style: normal; letter-spacing: calc(13px * 40 / 1000); }

#footer .copyright { font-size: 1rem; letter-spacing: calc(10px * 40 / 1000); margin: auto; }

@media screen and (min-width: 481px), print { #footer { display: flex; align-items: center; } }
@media (max-width: 480px) { #footer { padding: calc((40 / var(--width)) * 100vw) calc((46 / var(--width)) * 100vw) calc((48 / var(--width)) * 100vw); }
  #footer .footer__adress { font-size: calc((15 / var(--width)) * 100vw); } }
/* ---------- KV ---------- */
.kv { width: 100%; height: 1058px; position: relative; }
.kv::after { content: ''; display: block; background: url("../img/kv_full.png") #bbd6e7 bottom center no-repeat; background-size: 1920px auto; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
.kv > .inner { width: 100%; height: 100%; position: relative; }
.kv .kv__txtbox { margin: auto; position: absolute; bottom: 86px; left: 0; right: 0; }
.kv .kv__ttl { color: var(--black); font-size: 3.5rem; line-height: 1.5; letter-spacing: calc(35px * 120 / 1000); text-align: center; text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff; margin-bottom: 32px; }
.kv .kv__txt { color: var(--black); font-size: 1.9rem; line-height: 1.5; letter-spacing: calc(19px * 120 / 1000); text-align: center; text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff; margin-bottom: 10px; }
.kv .kv__txt:last-child { margin-bottom: 0; }

@media (max-width: 1200px) and (min-width: 481px) { .kv::after { background: url("../img/kv.jpg") bottom center no-repeat; background-size: cover; } }
@media (max-width: 480px) { .kv { height: 100vh; min-height: 940px; }
  .kv::after { background: url("../img/kv_sp.jpg") bottom center no-repeat; background-size: cover; }
  .kv .kv__txtbox { bottom: calc((46 / var(--width)) * 100vw); }
  .kv .kv__ttl { font-size: 2.4rem; letter-spacing: calc(24px * 190 / 1000); margin-bottom: calc(28px * 190 / 1000); }
  .kv .kv__txt { font-size: 1.4rem; letter-spacing: calc(14px * 70 / 1000); } }
/*.txt-img { display: inline-block; }*/
.txt-img--e-tech { width: 737px; height: 101px; margin: auto; position: absolute; top: 174px; left: 0; right: 0; opacity: 0; animation: opacityAnm ease 1.25s forwards; animation-delay: 0.5s; }

.txt-img--eis { width: 589px; height: 112px; position: absolute; top: 315px; right: 0; opacity: 0; animation: label_show_right ease 0.95s forwards; animation-delay: 1s; }

.txt-img--ees { width: 614px; height: 112px; position: absolute; top: 579px; left: 0; opacity: 0; animation: label_show_left ease 0.95s forwards; animation-delay: 1s; }

@media (max-width: 480px) { .txt-img--e-tech { width: calc((406 / var(--width)) * 100vw); height: auto; max-width: 406px; top: 101px; }
  .txt-img--eis { width: calc((401 / var(--width)) * 100vw); height: auto; max-width: 401px; top: 191px; }
  .txt-img--ees { width: calc((418 / var(--width)) * 100vw); height: auto; max-width: 418px; top: 426px; } }
@keyframes label_show_right { 0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0px); } }
@keyframes label_show_left { 0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0px); } }
@keyframes opacityAnm { 0% { opacity: 0; }
  100% { opacity: 1; } }
#learning { background-color: #e5f3fa; padding-bottom: 74px; }

#study { padding-bottom: 97px; }

#others { padding-bottom: 84px; }

@media (max-width: 480px) { #learning { padding-bottom: calc((38 / var(--width)) * 100vw); }
  #study { padding-bottom: 0; }
  #others { padding-bottom: calc((43 / var(--width)) * 100vw); } }
.figure_curriculum { max-width: 700px; margin: 0 auto 68px; }

@media (max-width: 480px) { .figure_curriculum { margin-bottom: calc((40 / var(--width)) * 100vw); } }
.content__header > .inner { max-width: 950px; }

@media (max-width: 480px) { .content__header > .inner { padding: 0; } }
@media screen and (min-width: 481px), print { .content__header { padding: 24px 0; margin: auto auto 32px; position: relative; z-index: 1; }
  .content__header::after { content: ''; display: block; background: linear-gradient(to right, var(--blue) 40%, transparent 70%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
  .content__header.bg--purple::after { background: linear-gradient(to right, #733c93 40%, transparent 70%); }
  .content__header > .inner { display: flex; flex-direction: row; column-gap: 55px; }
  .content__header h2 { flex-shrink: 0; } }
@media (max-width: 480px) { .content__header { margin-bottom: calc((20 / var(--width)) * 100vw); }
  .content__header h2 { background: linear-gradient(to right, var(--blue), transparent); padding: calc((14 / var(--width)) * 100vw) calc((32 / var(--width)) * 100vw); }
  .content__header.bg--purple h2 { background: linear-gradient(to right, #733c93, transparent); }
  .content__header__txts { padding: calc((14 / var(--width)) * 100vw) calc((32 / var(--width)) * 100vw); } }
/* 囲みタイトルstyle */
.char-wrap { color: #fff; font-size: 0; font-family: "Noto Serif JP", serif; font-weight: 400; line-height: 1; letter-spacing: 0; }

.word-wrap { display: inline-block; }

/*単語wrap*/
.char-wrap .char { display: inline-block; border: 2px solid #fff; vertical-align: text-bottom; padding: 10px; margin-top: -2px; margin-left: -2px; }

/* 囲みタイトルstyle - 02 */
.char-wrap__ttl { color: var(--black); font-size: 0; line-height: 1; letter-spacing: 0; margin-bottom: 20px; }

.char-wrap__ttl::after { content: ''; display: block; width: 100%; clear: both; }

.char-wrap__ttl .word-wrap { display: inline-block; }

.char-wrap__ttl .char { display: inline-block; font-size: 3rem; text-align: center; vertical-align: text-bottom; border: 1px solid var(--black); min-width: 44px; min-height: 44px; padding: 5px; margin-top: -1px; margin-left: -1px; }

.char-wrap__ttl .char--normal { color: #fff; font-size: 3rem; font-weight: 500; line-height: 1.5; min-width: 44px; min-height: 44px; }

@media (max-width: 480px) { .char-wrap__ttl { margin-bottom: calc((18 / var(--width)) * 100vw); }
  .char-wrap__ttl .char { font-size: calc((26 / var(--width)) * 100vw); min-width: calc((35 / var(--width)) * 100vw); min-height: calc((35 / var(--width)) * 100vw); padding: calc((5 / var(--width)) * 100vw); }
  .char-wrap__ttl .char--normal { font-size: calc((26 / var(--width)) * 100vw); min-width: calc((35 / var(--width)) * 100vw); } }
/* 囲みタイトルstyle -- background-color */
.char.bg--blue, .word-wrap.bg--blue > span { background-color: #1769b4; }

.char.bg--skyblue, .word-wrap.bg--skyblue > span { background-color: #90dbe2; }

.char.bg--light-purple, .word-wrap.bg--light-purple > span { background-color: #c7a8d4; }

.char.bg--purple, .word-wrap.bg--purple > span { background-color: #733c93; color: #fff; }

.char.bg--white, .word-wrap.bg--white > span { background-color: #fff; }

.char.bg--dark-gray, .word-wrap.bg--dark-gray > span { background-color: #4b4948; color: #fff; }

/* 囲みタイトルstyle -- font-size */
.char.fs--small { font-size: 3.8rem; }

.char.fs--middle { font-size: 5.2rem; }

.char.fs--large { font-size: 6.6rem; }

@media (max-width: 480px) { .char.fs--small { font-size: calc((29 / var(--width)) * 100vw); }
  .char.fs--middle { font-size: calc((39 / var(--width)) * 100vw); }
  .char.fs--large { font-size: calc((49 / var(--width)) * 100vw); } }
/* 囲みタイトルstyle -- 文字ずらし */
.char-mglA { margin-left: 44px; }

.char-mglB { margin-left: 88px; }

.char-mglC { margin-left: 132px; }

.char-mglD { margin-left: 176px; }

.char-mglE { margin-left: 220px; }

@media (max-width: 480px) { .char-mglA { margin-left: calc((44 / var(--width)) * 100vw); }
  .char-mglB { margin-left: calc((88 / var(--width)) * 100vw); }
  .char-mglC { margin-left: calc((132 / var(--width)) * 100vw); }
  .char-mglD { margin-left: calc((176 / var(--width)) * 100vw); }
  .char-mglE { margin-left: calc((220 / var(--width)) * 100vw); } }
.round-box { border-radius: 10px; background-color: #c8c8c9; padding: 12px 17px 20px; margin: 26px 0; }

.round-box.bg--dark-gray { background-color: #595757; }

.round-box p { font-size: 1.6rem; }

@media screen and (min-width: 481px), print { .round-box.pickups { margin-top: 45px; padding: 32px 24px; }
  .round-box.pickups .pickups__header { display: flex; flex-direction: row; margin-bottom: 14px; }
  .round-box.pickups .pickups__header figure.figure01 { margin-left: auto; }
  .round-box.pickups .pickups__imgs { margin-bottom: 28px; }
  .round-box.pickups .pickups__txtbox { margin-bottom: 13px; }
  .round-box.pickups .pickups__footer { text-align: center; } }
@media (max-width: 480px) { .round-box { margin: 13px 0; }
  .round-box p { font-size: calc((14 / var(--width)) * 100vw); }
  .round-box > figure { margin: 6px 0; }
  .round-box > figure:last-child { margin-bottom: 0; }
  .round-box.pickups { display: flex; flex-direction: column; gap: 10px; }
  .round-box.pickups .pickups__txtbox { margin-bottom: calc((24 / var(--width)) * 100vw); } }
.has-imgbox { display: flex; flex-flow: row-reverse; flex-wrap: wrap; column-gap: 24px; }

@media screen and (min-width: 481px), print { .has-imgbox > figure { width: 306px; }
  .has-imgbox > div { width: calc(100% - 306px - 24px); } }
@media (max-width: 480px) { .has-imgbox { flex-flow: column; }
  .has-imgbox > figure { margin-top: calc((16 / var(--width)) * 100vw); } }
/* 多彩な研究室 */
.labs { display: flex; flex-direction: row; width: 100%; }

.labs__ttl { font-size: 4.8rem; letter-spacing: calc(48px * 220 / 1000); text-align: center; margin-bottom: 32px; }

.lab { position: relative; }

.lab__label { color: #fff; width: 100%; display: block; }

.lab__label > span { display: block; }

.lab__cat { color: #fff; font-size: 2.8rem; letter-spacing: calc(30px * 120 / 1000); text-align: center; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }

@media screen and (min-width: 481px), print { .labs { column-gap: 56px; justify-content: center; padding-bottom: 78px; overflow-x: clip; /*background-color: hsla(197, 0%, 100%, 1);
background-image: radial-gradient(circle at 22.2772376395845% 84.15268747862977%, hsla(166, 50%, 45%, 0.55) 18.47690990578592%, transparent 45.122251656468656%), radial-gradient(circle at 27.754819295480292% 18.04296660523369%, hsla(201, 100%, 40%, 0.55) 13.961852488440107%, transparent 46.27489453196619%), radial-gradient(circle at 93.63660127376599% 16.88587520433509%, hsla(309, 69%, 48%, 0.55) 21.160211416824065%, transparent 52.04545426655092%), radial-gradient(circle at 83.2988919861605% 89.46195021919583%, hsla(210, 100%, 32%, 0.55) 10.309562610515375%, transparent 47.84294365978184%), radial-gradient(circle at 72.88638318340382% 47.20109524934188%, hsla(292, 49%, 42%, 0.55) 11.741540255725978%, transparent 45.47006927544087%);
background-blend-mode: normal, normal, normal, normal, normal;
*/ background-color: white; background-image: radial-gradient(circle at 45.8637580671% 11.9894869228%, #5ac9f2 2%, transparent 81.6541117932%), radial-gradient(circle at 89.0198765333% 22.662252354%, #c47af5 35.7581356709%, transparent 57.0218606368%), radial-gradient(circle at 5.7892201% 10.8572591822%, #80e5cc 2%, transparent 61.7850584866%), radial-gradient(circle at 66.4676501924% 96.9040778111%, #547fe3 8.2533820307%, transparent 54.9471589622%), radial-gradient(circle at 23.0643458515% 98.1980453201%, #80e5cc 8.2533820307%, transparent 40.560746454%); background-blend-mode: normal, normal, normal, normal, normal; }
  .lab.lab--ees { padding: 64px 56px 0 72px; }
  .lab.lab--elc { padding: 64px 72px 0 56px; }
  .lab__label { font-size: 2rem; font-weight: 600; line-height: 1; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); }
  .lab__label > span { background: linear-gradient(to right, transparent 0%, black, black, black, transparent 100%); text-align: center; padding: 16px 48px; }
  .lab__cat { margin-bottom: 8px; }
  .lab.lab--ees .lab__cat { margin-bottom: 16px; }
  /*.lab__cat + ul.link-btns { margin-bottom: 24px; }*/ }
@media (max-width: 480px) { #labs { padding-left: 0; padding-right: 0; margin-bottom: calc((32 / var(--width)) * 100vw); }
  .labs { flex-direction: column; }
  .labs__ttl { font-size: calc((40 / var(--width)) * 100vw); letter-spacing: calc(40px * 220 / 1000); text-align: center; margin-bottom: calc((16 / var(--width)) * 100vw); }
  .lab__label { border-bottom: 4px solid #717071; font-size: calc((25 / var(--width)) * 100vw); font-weight: 600; letter-spacing: calc(25px * 130 / 1000); line-height: 1; margin-bottom: 0; position: relative; }
  .lab__label::before, .lab__label::after { content: ''; display: block; background-color: #fff; width: calc((32 / var(--width)) * 100vw); height: 2px; position: absolute; top: 50%; right: calc((32 / var(--width)) * 100vw); transition: transform ease .3s; }
  .lab__label::before { transform: translateY(-50%); }
  .lab__label::after { transform: translateY(-50%) rotate(90deg); }
  .lab__label.is-active::after { transform: translateY(-50%) rotate(0deg); }
  .lab__label > span { padding: calc((14 / var(--width)) * 100vw) calc((32 / var(--width)) * 100vw); }
  .lab.lab--ees .lab__label > span { background: linear-gradient(to right, #21b8c5, #000); }
  .lab.lab--elc .lab__label > span { background: linear-gradient(to right, #7c3498, #000); }
  .lab__cat { font-size: 2rem; background-color: rgba(0, 0, 0, 0.8); text-shadow: none; padding: 8px; } }
/* 研究室ボタン */
@media screen and (min-width: 481px), print { .lab__links > div { margin-bottom: 32px; }
  .lab__links > div:last-child { margin-bottom: 0; } }
@media (max-width: 480px) { .lab__links { display: none; }
  .lab__links.is-active { display: block; } }
ul.link-btns { list-style: none; }

ul.link-btns li { margin-bottom: 20px; position: relative; z-index: 1; }

ul.link-btns li a + span.lab-words { font-size: 1.6rem; font-family: "Noto Serif JP", serif; font-weight: 500; letter-spacing: calc(16px * 200 / 1000); line-height: 1; text-align: center; white-space: nowrap; position: absolute; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none; }

ul.link-btns li span.lab-words > span { display: inline-block; transition: transform ease .3s, color ease .3s, padding ease .3s; }

.lab.lab--ees ul.link-btns li span.lab-words { top: -1.6rem; }

.lab.lab--elc ul.link-btns li span.lab-words { bottom: -1.6rem; }

ul.link-btns li:last-child { margin-bottom: 0; }

ul.link-btns li > a { display: block; background-color: #ccc; border: 1px solid #fff; border-radius: 6px; color: #fff; font-size: 1.7rem; font-weight: 800; text-align: center; letter-spacing: calc(17px * 180 / 1000); padding: 8px 32px; transition: background ease .3s; }

/* link none */
ul.link-btns li > a[href=""] { pointer-events: none; background: #ccc !important; color: rgba(0, 0, 0, 0.35); }

/* color change */
.lab--ees ul.link-btns li > a { background-color: rgba(83, 187, 163, 0.5); background-blend-mode: multiply; }

.lab--elc ul.link-btns li > a { background-color: rgba(154, 73, 152, 0.5); background-blend-mode: multiply; }

ul.link-btns li > a:hover { background-color: var(--black); }

.lab:has(ul.link-btns li > a:hover) { z-index: 1; }

ul.link-btns li > a:hover + span.lab-words > span { color: #fff; text-shadow: 0 0 7px #fff; padding: 0 10px; opacity: 0.8; mix-blend-mode: multiply; }

ul.link-btns li > a:hover + span.lab-words > span:nth-child(odd) { transform: scale(130%) rotate(-2deg); }

ul.link-btns li > a:hover + span.lab-words > span:nth-child(even) { transform: scale(115%) rotate(2deg); opacity: 0.7; }

/* color change */
.lab ul.link-btns.cat01 li span.lab-words { color: #00913a; }

/*エネルギー・電気機器*/
.lab ul.link-btns.cat02 li span.lab-words { color: #007ec4; }

/*電子工学*/
.lab ul.link-btns.cat03 li span.lab-words { color: #601886; }

/*通信*/
.lab ul.link-btns.cat04 li span.lab-words { color: #182d7f; }

/*情報*/
.lab ul.link-btns.cat05 li span.lab-words { color: #21547a; }

/*システム*/
@media (max-width: 480px) { ul.link-btns li { margin-bottom: 0; }
  ul.link-btns li span.lab-words { display: none; }
  ul.link-btns li > a { border-radius: 0px; border-left: 0; border-right: 0; text-align: left; position: relative; }
  ul.link-btns li > a:not(:last-child) { border-bottom: 0; }
  ul.link-btns li > a::after { content: ''; display: block; background: url("../img/arrow-top-right.png") center center no-repeat; background-size: contain; width: calc((15 / var(--width)) * 100vw); height: calc((15 / var(--width)) * 100vw); position: absolute; top: 50%; right: calc((32 / var(--width)) * 100vw); transform: translateY(-50%); }
  ul.link-btns li > a[href=""]::after { background: url("../img/icon_close.svg") center center no-repeat; background-size: contain; }
  .lab--ees ul.link-btns li > a { background: linear-gradient(to right, #5cc0bd 0%, #5cc0bd 86%, #00b0e2); }
  .lab--elc ul.link-btns li > a { background: linear-gradient(to right, #8f63a9 0%, #8f63a9 86%, #65a6de); } }
/* イメージする進路 */
#career-path { position: relative; }

dl.career-path { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 0.78125%; }

dl.career-path div { animation-delay: 1s; }

dl.career-path dt { background-color: #4b4948; border: 1px solid #4b4948; color: #fff; font-size: 1.6rem; font-weight: 500; text-align: center; margin-bottom: 20px; padding: 8px; position: relative; }

dl.career-path dt::after { content: ''; display: block; background: url("../img/arrow-bottom.png") top left no-repeat; background-size: contain; width: 9px; height: 24px; position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); z-index: 1; }

dl.career-path dd { background-color: var(--gray); border: 1px solid #4b4948; border-radius: 3px; color: var(--black); font-size: 1.3rem; font-weight: 500; text-align: center; padding: 8px; position: relative; }

/* color change */
dl.career-path div.cp-energy dt { background-color: #33abb7; }

dl.career-path div.cp-energy dd { background-color: #d1e7ea; }

dl.career-path div.cp-electrical dt { background-color: #00b9ef; }

dl.career-path div.cp-electrical dd { background-color: #d1ecfb; }

dl.career-path div.cp-system dt { background-color: #0087d2; }

dl.career-path div.cp-system dd { background-color: #bbd8f2; }

dl.career-path div.cp-telecom dt { background-color: #7254a0; }

dl.career-path div.cp-telecom dd { background-color: #d3cae4; }

dl.career-path div.cp-infomation dt { background-color: #4b7abd; }

dl.career-path div.cp-infomation dd { background-color: #c6cee9; }

@media screen and (min-width: 481px), print { #career-path { margin-top: -50px; }
  dl.career-path div { display: flex; flex-direction: column; width: 19.375%; }
  dl.career-path dt { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); }
  dl.career-path dd { height: 100%; } }
@media (max-width: 480px) { dl.career-path { flex-direction: column; }
  dl.career-path dt, dl.career-path dd { border-radius: 0; }
  dl.career-path dt { font-size: calc((22 / var(--width)) * 100vw); margin-bottom: 0; }
  dl.career-path dt::after { display: none; }
  dl.career-path dd { font-size: calc((18 / var(--width)) * 100vw); margin-top: -1px; margin-bottom: -1px; } }
/* ---------- CONTENTS ---------- */
.flexbox { display: flex; flex-wrap: wrap; flex-direction: row; column-gap: 2%; }
.flexbox.col2 { column-gap: 4%; }
.flexbox.col2 .flexitem { width: 48%; }
.flexbox.col3 { column-gap: 3%; }
.flexbox.col3 .flexitem { width: 31%; }

@media (max-width: 480px) { .flexbox.col2, .flexbox.col3 { flex-direction: column; }
  .flexbox.col2 .flexitem, .flexbox.col3 .flexitem { width: 100%; }
  .flexbox.col2 .flexitem:not(:last-child), .flexbox.col3 .flexitem:not(:last-child) { margin-bottom: 10px; } }
/* ---------- SITE LINKS ---------- */
.site-links { background-image: linear-gradient(to right, var(--purple) 0%, #1bb4bd 100%); color: #fff; padding: 45px 0 64px; }

.site-links .site-links__ttl { font-size: 2.8rem; line-height: 1.5; letter-spacing: calc(28px * 30 / 1000); text-align: center; margin-bottom: 48px; }

@media (max-width: 480px) { .site-links { padding: calc((46 / var(--width)) * 100vw) 0 calc((43 / var(--width)) * 100vw); }
  .site-links .site-links__ttl { font-size: calc((21 / var(--width)) * 100vw); margin-bottom: calc((48 / var(--width)) * 100vw); } }
ul.links { list-style: none; display: flex; justify-content: center; flex-direction: row; }
ul.links li { border-left: 1px solid #fff; font-size: 1.8rem; line-height: 1.5; letter-spacing: 0.2rem; text-align: center; }
ul.links li:last-child { border-right: 1px solid #fff; }
ul.links li > a { color: #fff; display: flex; align-items: center; justify-content: center; height: 100%; padding: 2.8rem min(32px, 3.2rem); position: relative; z-index: 1; }
ul.links li > a::after { content: ''; display: block; background-color: rgba(255, 255, 255, 0.25); width: 0%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: width ease 0.3s; }
ul.links li > a:hover::after { width: 100%; }

@media screen and (min-width: 481px), print { ul.links { flex-wrap: wrap; row-gap: 10px; }
  ul.links li { width: 50%; }
  ul.links li:nth-child(2n) { border-right: 1px solid #fff; } }
@media (max-width: 480px) { ul.links { flex-direction: column; }
  ul.links li { border-right: 1px solid #fff; font-size: calc((18 / var(--width)) * 100vw); letter-spacing: calc(18px * 110 / 1000); margin-bottom: calc((16 / var(--width)) * 100vw); }
  ul.links li > a { padding: calc((16 / var(--width)) * 100vw) calc((40 / var(--width)) * 100vw); }
  ul.links li:last-child { margin-bottom: 0; } }
/* ---------- UTILITY ---------- */
.center { display: block; text-align: center; margin-left: auto; margin-right: auto; }

/* text */
.txt--center { text-align: center; }

.txt--right { text-align: right; }

.txt--left { text-align: left; }

.notes { display: block; text-indent: -1rem; padding-left: 1rem; }
.notes::before { content: '※'; }

.notes.astarisk, html[lang="en"] .notes::before { content: '*'; }

.uppercase { text-transform: uppercase; }

.lowercase { text-transform: lowercase; }

.wrap-txt > span { display: inline-block; }

.ls1 { letter-spacing: 1rem; }

.kakko--arch::before { content: '【'; display: inline-block; }

.kakko--arch::after { content: '】'; display: inline-block; }

.txt-mgbA { margin-bottom: 32px; }

@media (max-width: 480px) { .txt-mgbA { margin-bottom: calc((16 / 480) * 100vw); } }
.bold { font-weight: 800; }

/* font color */
.fc--blue { color: #2269B3; }

.fc--purple { color: #7254a0; }

.fc--light-purple { color: #c2aad1; }

.fc--white { color: #fff; }

.fc--turquoise { color: #33abb7; }

.fc--cyan { color: #0086d1; }

.fc--dark-cyan { color: #007dc3; }

.fc--grad { background: linear-gradient(to right, #733c93, #733c93, #1bb4bd, #1bb4bd); background-clip: text; }

.fc--grad > span { color: transparent; }

.marker { display: inline; text-decoration: underline 8px solid #fff; text-underline-offset: -2px; }

/* title */
.ttl--br { border-left: 9px solid var(--blue); margin-bottom: 16px; padding-left: 7px; }

.circle-ttl { font-size: 1.4rem; font-weight: 500; line-height: 1; letter-spacing: calc(12px * 260 / 1000); text-align: center; text-shadow: 1px 1px 0px rgba(35, 24, 20, 0.6); margin: 0 auto 10px; }

.circle-ttl strong { display: block; background-color: var(--black); border-radius: 24px; color: #fff; max-width: 424px; margin-left: auto; margin-right: auto; padding: 4px 16px 8px; }

@media (max-width: 480px) { .circle-ttl { display: block; font-size: calc((20 / var(--width)) * 100vw); margin-bottom: calc((40 / var(--width)) * 100vw); position: relative; }
  .circle-ttl::after { content: ''; display: block; background: url("../img/arrow_bottom02.png") top left no-repeat; background-size: contain; width: calc((54 / var(--width)) * 100vw); height: calc((32 / var(--width)) * 100vw); margin: auto; position: absolute; right: 0; bottom: calc((31 / var(--width)) * -100vw); left: 0; } }
/* float */
.floatR { float: right; }

.floatL { float: left; }

/* list */
ul.list--square { list-style: none; }

ul.list--square > li { font-size: 1.5rem; line-height: 1.5; text-indent: -1rem; padding-left: 1rem; }

ul.list--square > li::before { content: ''; display: inline-block; background-color: #000; vertical-align: middle; width: 8px; height: 8px; margin-right: 2px; }

ul.list--square.col2 { column-count: 2; column-gap: 1.8rem; width: fit-content; }

@media (max-width: 480px) { ul.list--square > li { font-size: calc((14 / var(--width)) * 100vw); } }
ol.list--num02 { list-style: none; font-size: 1.4rem; font-weight: 300; }

ol.list--num02 > li { counter-increment: cnt; padding-left: 1.6rem; }

ol.list--num02 > li::before { content: counter(cnt); display: inline-block; border: 1px solid #000; border-radius: 50%; font-size: 1.3rem; text-align: center; line-height: 1; width: 14px; height: 14px; margin-left: -1.6rem; margin-right: 2px; }

@media (max-width: 480px) { ol.list--num02 { font-size: calc((14 / var(--width)) * 100vw); }
  ol.list--num02 > li::before { font-size: calc((14 / var(--width)) * 100vw); } }
/* button */
.btn-br-grad { display: inline-block; background: #000000; border: none; color: #fff; font-size: 2.3rem; line-height: 1.3; letter-spacing: calc(23px * 170 / 1000); box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.4); padding: 16px 100px; margin: 12px 0; position: relative; transition: background ease .3s, box-shadow ease .3s; }

.btn-br-grad::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; background-image: linear-gradient(to right, #733c93 0%, #1bb4bd 100%); background-origin: border-box; background-clip: border-box; -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: destination-out; mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0); mask-clip: padding-box, border-box; mask-composite: exclude; transition: background ease .3s; }

.btn-br-grad::after { content: ''; display: block; width: 30px; height: 30px; background: url("../img/circle-arrow.svg") center center no-repeat; background-size: contain; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); }

.btn-br-grad:hover { background: linear-gradient(to right, #733c93 0%, #1bb4bd 100%); box-shadow: 0px 0px 0px transparent; }

.btn-br-grad:hover::before { background-image: linear-gradient(to right, #000 0%, #000 100%); }

@media (max-width: 480px) { .btn-br-grad { font-size: calc((21 / var(--width)) * 100vw); letter-spacing: calc(21px * 60 / 1000); padding: calc((22 / var(--width)) * 100vw) calc((72 / var(--width)) * 100vw) calc((22 / var(--width)) * 100vw) calc((26 / var(--width)) * 100vw); } }
.shadow { box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.4); }

/* margin */
.mgbA { margin-bottom: 16px; }

.mgbB { margin-bottom: 24px; }

.mgb8 { margin-bottom: 8px; }

/* ---------- ANIMATION ---------- */
/*.toT { opacity: 0; }*/
.toT.is-active { animation: slideT ease 0.5s forwards; }

@keyframes slideT { 0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; } }
/*.toR { opacity: 0; }*/
.toR.is-active { animation: toR ease 0.75s forwards; }

@keyframes toR { 0% { transform: translateX(-30px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; } }
/*.toB { opacity: 0; }*/
.toB.is-active { animation: toB ease-in-out 0.75s forwards; }

@keyframes toB { 0% { transform: translateY(-30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; } }
/*.toL { opacity: 0; }*/
.toL.is-active { animation: toL ease 0.75s forwards; }

@keyframes toL { 0% { transform: translateX(30px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; } }
/*.fadeIn { opacity: 0; }*/
.fadeIn.is-active { animation: fadeIn ease-in-out 0.75s forwards; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
/*.fadeOut { opacity: 0; }*/
.fadeOut.is-active { animation: fadeOut ease-in-out 0.75s forwards; }

@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
/* delay */
.toT.is-active:first-child, .toR.is-active:first-child, .toB.is-active:first-child, .toL.is-active:first-child, .fadeIn.is-active:first-child, .fadeOut.is-active:first-child { animation-delay: 0s; }

.toT.is-active:nth-child(2), .toR.is-active:nth-child(2), .toB.is-active:nth-child(2), .toL.is-active:nth-child(2), .fadeIn.is-active:nth-child(2), .fadeOut.is-active:nth-child(2) { animation-delay: 0.1s; }

.toT.is-active:nth-child(3), .toR.is-active:nth-child(3), .toB.is-active:nth-child(3), .toL.is-active:nth-child(3), .fadeIn.is-active:nth-child(3), .fadeOut.is-active:nth-child(3) { animation-delay: 0.2s; }

.toT.is-active:nth-child(4), .toR.is-active:nth-child(4), .toB.is-active:nth-child(4), .toL.is-active:nth-child(4), .fadeIn.is-active:nth-child(4), .fadeOut.is-active:nth-child(4) { animation-delay: 0.3s; }

.toT.is-active:nth-child(5), .toR.is-active:nth-child(5), .toB.is-active:nth-child(5), .toL.is-active:nth-child(5), .fadeIn.is-active:nth-child(5), .fadeOut.is-active:nth-child(5) { animation-delay: 0.4s; }