@charset "UTF-8";


/* -- font
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'NewGrotesk';
    src: url('./font/NewGrotesk-Medium.woff2') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NewGrotesk';
    src: url('./font/NewGrotesk-SemiBold.woff2') format('woff');
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}


/* -- Base and Reset
-------------------------------------------------------------------------------- */
html {
    font-size: 62.5%;
	width: 100%;
}
body {
	font: 1rem/1.5 'NewGrotesk', 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	text-align: left;
    font-feature-settings: 'palt';
	width: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure {
	margin: 0;
	padding: 0;
}
caption,th,td {
	font-weight: normal;
	text-align: left;
}
input,textarea,select {
	font-family: 'NewGrotesk', 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	vertical-align: middle;
}
textarea {
	resize: vertical;
}
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
ul,ol { list-style: none; }
fieldset,img { border: 0; vertical-align: top; }
iframe {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
input{
    color: var(--col-bg3);
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
label{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a{
    text-decoration:none;
    color:inherit;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
    outline:none;
}
select::-ms-expand {
    display: none;
}
img{
    pointer-events: none;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-touch-callout;
    color: var(--col-bg3);
}
body.loaded {
    background: var(--col-bg);
}
.lenis-scrolling iframe{
    pointer-events: none;
}
:root {
    --col-bg: #dfebf3;
    --col-bg2: #bad5e0;
    --col-bg3: #192c44;
    --col-bg4: #37b6a4;
    --col-bg5: #728288;
    --col-bg6: #9ba7ab;
    --col-bg7: #5276b0;
    --col-bg8: #a36cb0;
    --col-bg9: #eeba5b;
    --mg-xxxl: 16rem;
    --mg-xxl: 12rem;
    --mg-xl: 10rem;
    --mg-l: 8rem;
    --mg-m: 6rem;
    --mg-s: 4.8rem;
    --mg-xs: 4rem;
    --mg-xxs: 3.2rem;
    --mg-xxxs: 2.4rem;
}
@media (max-width: 767px){
    :root {
        --mg-xxxl: 12rem;
        --mg-xxl: 10rem;
        --mg-xl: 8rem;
        --mg-l: 6rem;
        --mg-m: 4.8rem;
        --mg-s: 4rem;
        --mg-xs: 3.2rem;
        --mg-xxs: 2.4rem;
        --mg-xxxs: 2rem;
    }
}
@media (max-width: 1440px){
    html {
        font-size: 56.25%;
    }
}
@media (max-width: 1200px){
    html {
        font-size: 0.75vw;
    }
}
@media (max-width: 1024px){
    html {
        font-size: 0.878906vw;
    }
}
@media (max-width: 767px){
    html {
        font-size: 50%;
    }
}
@media (max-width: 430px){
    html {
        font-size: 8px;
    }
}
@media (max-width: 375px){
    html {
        font-size: 2.133333vw;
    }
}


/* -- intro
-------------------------------------------------------------------------------- */
.intro{
    width: 100%;
    height: 100%;
    background: #f0f2f3;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    overflow: hidden;
    display: none;
}
.intro.show{
    display: block;
    transition: opacity 0.5s ease 0.5s, visibility 0.5s ease 0.5s;
}
.intro.hide{
    opacity: 0;
    visibility: hidden;
}
.intro .intro-inner{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.intro.hide .intro-inner{
    opacity: 0;
    transform: scale(1.1);
}
.intro .body {
    position: relative;
}
.intro p {
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 0.25em;
    color: var(--col-bg3);
}
.intro p > span{
    display: flex;
    justify-content: space-between;
}
.intro p span.space{
    width: 0.1em;
}
.intro .character{
    position: absolute;
}
.intro .character.character-1 {
    height: 8rem;
    top: -9rem;
    left: -6rem;
    animation: anime-size 4s ease infinite;
}
.intro .character.character-2 {
    height: calc(8rem * 1.35);
    bottom: -4rem;
    right: -8rem;
    animation: anime-jump 4s ease infinite;
}
.intro .character img {
    height: 100%;
}
.intro .character.character-2 img {
    transform: rotate(1deg);
}
@media (max-width: 767px){
    .intro .body {
        transform: scale(0.875);
    }
}


/* -- header
-------------------------------------------------------------------------------- */
header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    opacity: 0;
}
.loaded header{
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.15s ease;
}
header.hide,
.map-open header{
    transform: translateY(-100%);
}
header .header-inner{
    padding: 0 1.6rem 0 3.2rem;
    box-sizing: border-box;
    height: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease;
}
header.fix .header-inner{
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
}
.loaded header .header-inner{
    transition: height 0.15s ease;
}
header.fix .header-inner{
    height: 8rem;
}
header .logo-wrap{
    display: flex;
    align-items: center;
}
header .logo{
    border-right: solid 1px rgba(0,0,0,0.15);
    padding-right: 1.6rem;
}
header .logo a{
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.25;
}
.loaded header .logo a{
    transition: 0.15s ease;
}
header.fix .logo a{
    font-size: 1.6rem;
}
header .logo a span{
    display: block;
    letter-spacing: 0.1em;
}
header .logo a span:first-child{
    letter-spacing: 0.35em;
}
header .language{
    margin-left: 2rem;
    position: relative;
}
header .language .current{
    display: flex;
    align-items: center;
    color: var(--col-bg3);
    border: solid 1px;
    border-radius: 1.8rem;
    padding: 0 1rem 0 1.2rem;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
header .language .current span{
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 3.2rem;
}
header .language .current svg{
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--col-bg3);
    margin-left: 0.8rem;
    transition: fill 0.15s ease;
}
@media (min-width: 1025px){
    header .language:hover .current svg{
        fill: var(--col-bg4);
    }
}
header .language.active .current svg{
    fill: var(--col-bg4);
    transform: scale(1,-1);
}
header .language .select-list{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: padding 0.15s ease, opacity 0.15s ease, visibility 0.15s ease;
}
header:not(.hide) .language.active .select-list{
    padding-top: 0.8rem;
    opacity: 1;
    visibility: visible;
}
header .language .select-list ul{
    background: #fff;
    border-radius: 0.8rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.15);
}
header .language .select-list ul li + li{
    border-top: solid 1px rgba(0,0,0,0.1);
}
header .language .select-list ul p,
header .language .select-list ul a{
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--col-bg3);
    padding: 1rem 2rem;
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    header .language .select-list ul a:hover{
        color: var(--col-bg4);
    }
}
header .language .select-list ul p{
    background: #f5f5f5;
    color: var(--col-bg6);
}
header nav{
    display: flex;
    align-items: center;
}
header nav ol{
    display: flex;
}
header nav ol li{
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    position: relative;
}
header nav ol > li + li{
    margin-left: 3.2rem;
}
header nav ol li a{
    transition: 0.15s ease;
}
@media (min-width: 1025px){
    header nav ol li a:hover{
        color: var(--col-bg4);
    }
}
header nav ol li.hover-item .item{
    position: absolute;
    left: 50%;
    padding-top: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -0.8rem);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}
@media (min-width: 1025px){
    header:not(.hide) nav ol li.hover-item:hover .item{
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}
header nav ol li.hover-item ul{
    background: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15);
}
header nav ol li.hover-item ul li{
    white-space: nowrap;
}
header nav ol li.hover-item ul li + li{
    border-top: solid 1px rgba(0,0,0,0.1);
}
header nav ol li.hover-item ul li a{
    display: block;
    padding: 1.2rem 1.4rem;
    text-align: center;
}
header nav ol li.hover-item ul li a span{
    display: block;
}
header nav ol li.hover-item ul li a .affiliation{
    font-size: 1.1rem;
    font-weight: normal;
    letter-spacing: 0.05em;
}
header nav ol li.hover-item ul li a .ttl{
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}
header nav ol li.hover-item ul li a .name{
    line-height: 1.25;
    margin-top: 0.4rem;
}
header nav ol li.hover-item ul li a .name span{
    display: inline;
    font-size: 1.1rem;
    font-weight: normal;
    letter-spacing: 0.05em;
}
header nav .campus-map-trigger{
    width: calc(10rem - 2rem);
    height: calc(10rem - 2rem);
    background: var(--col-bg3);
    border-radius: 2rem;
    margin-left: 3.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    position: relative;
}
.loaded header nav .campus-map-trigger{
    transition: background 0.15s ease, width 0.15s ease, height 0.15s ease;
}
header.fix nav .campus-map-trigger{
    width: calc(8rem - 2rem);
    height: calc(8rem - 2rem);
}
@media (min-width: 1025px){
    header nav .campus-map-trigger:hover{
        background: var(--col-bg4);
    }
}
header nav .campus-map-trigger .campus-map-trigger-inner{
    padding-bottom: 0.4rem;
}
header nav .campus-map-trigger .ico{
    display: block;
    width: 3.4rem;
    margin: 0 auto 2.2rem;
    transition: margin 0.15s ease;
}
header.fix nav .campus-map-trigger .ico{
    margin-bottom: 0;
}
header nav .campus-map-trigger .ico svg{
    display: block;
    width: 100%;
}
header nav .campus-map-trigger .ico svg .st0, 
header nav .campus-map-trigger .ico svg .st1, 
header nav .campus-map-trigger .ico svg .st2 {
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
}
header nav .campus-map-trigger .ico svg .st1 {
    fill: none;
}
header nav .campus-map-trigger .ico svg .st2 {
    fill: var(--col-bg4);
    transition: 0.1s ease;
}
@media (min-width: 1025px){
    header nav .campus-map-trigger:hover .ico svg .st0 {
    }
    header nav .campus-map-trigger:hover .ico svg .st2 {
        fill: var(--col-bg3);
    }
}
header nav .campus-map-trigger .txt{
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 1.2rem;
}
.loaded header nav .campus-map-trigger .txt{
    transition: opacity 0.15s ease, height 0.15s ease;
}
header.fix nav .campus-map-trigger .txt{
    opacity: 0;
}
header .gnav-btn{
    width: calc(10rem - 2rem);
    height: calc(10rem - 2rem);
    background: var(--col-bg2);
    border-radius: 2rem;
    position: relative;
    margin-left: 0.8rem;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    z-index: 2;
    display: none;
    transition: width 0.15s ease, height 0.15s ease;
}
header > .gnav-btn{
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
}
header.fix .gnav-btn {
    width: calc(8rem - 2rem);
    height: calc(8rem - 2rem);
}
header .gnav-btn .gnav-btn-inner {
    width: 2.8rem;
    height: 2.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.15s ease, height 0.15s ease;
}
header.fix .gnav-btn .gnav-btn-inner {
    width: 2rem;
    height: 2rem;
}
header .gnav-btn span{
    display: block;
    width: 100%;
    border-top: solid 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    transform: translate(-50%, 0);
    transition: width 0.3s ease;
    transition-delay: 0.3s;
}
header .gnav-btn span.bar-1{
    transform: translate(-50%, -6px);
}
header .gnav-btn span.bar-3{
    transform: translate(-50%, 6px);
}
header.fix .gnav-btn span.bar-1{
    transform: translate(-50%, -5px);
}
header.fix .gnav-btn span.bar-3{
    transform: translate(-50%, 5px);
}
header .gnav-btn span.bar-4,
header .gnav-btn span.bar-5{
    width: 0;
    transform: translate(-50%, 0) rotate(45deg);
    transition-delay: 0s;
}
header .gnav-btn span.bar-5{
    transform: translate(-50%, 0) rotate(-45deg);
}
header .gnav-btn.active span.bar-1,
header .gnav-btn.active span.bar-2,
header .gnav-btn.active span.bar-3{
    width: 0;
    transition-delay: 0s;
}
header .gnav-btn.active span.bar-4,
header .gnav-btn.active span.bar-5{
    width: 100%;
    transition-delay: 0.3s;
}
@media (max-width: 1024px){
    header .header-inner{
        padding-right: calc(10rem - 2rem + 1.6rem + 0.8rem);
    }
    .loaded header .header-inner{
        transition: height 0.15s ease, padding 0.15s ease;
    }
    header.fix .header-inner{
        padding-right: calc(8rem - 2rem + 1.6rem + 0.8rem);
    }
    header nav .campus-map-trigger{
        margin-left: 0;
    }
    header .gnav{
        display: none;
    }
    header .gnav-btn{
        display: block;
    }
}
@media (max-width: 767px){
    header .header-inner{
        height: 9rem;
        padding-left: 2rem;
        padding-right: calc(9rem - 2rem + 1.6rem + 0.8rem);
    }
    header .logo{
        padding-right: 1.2rem;
    }
    header .logo a{
        font-size: 1.6rem;
    }
    header .language{
        margin-left: 1.6rem;
    }
    header .language .select-list ul p, 
    header .language .select-list ul a {
        font-size: 1.6rem;
        padding: 1.2rem 2.4rem;
    }
    header nav .campus-map-trigger{
        width: calc(9rem - 2rem);
        height: calc(9rem - 2rem);
    }
    header nav .campus-map-trigger .ico{
        width: 3.2rem;
        margin-bottom: 2rem;
    }
    header nav .campus-map-trigger .txt{
        font-size: 0.9rem;
        bottom: 1rem;
    }
    header .gnav-btn {
        width: calc(9rem - 2rem);
        height: calc(9rem - 2rem);
    }
    header .gnav-btn .gnav-btn-inner {
        width: 2.4rem;
        height: 2.4rem;
    }
}


/* -- gnav-sp
-------------------------------------------------------------------------------- */
.gnav-sp{
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: none;
}
.gnav-open .gnav-sp{
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gnav-sp .figure-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.1) rotate(-20deg);
    transition: opacity 0s ease 0.3s, transform 0s ease 0.3s;
    pointer-events: none;
}
.gnav-open .gnav-sp .figure-wrap{
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease, transform 1s ease;
}
.gnav-sp .figure{
    width: 40rem;
    height: 40rem;
    background: url(../img/img_figure_1.svg) no-repeat center;
    background-size: cover;
    position: absolute;
}
.gnav-sp .figure.figure-1{
    transform: rotate(420deg) scale(-1, 1);
    top: -24rem;
    right: 12rem;
}
.gnav-sp .figure.figure-2{
    background-image: url(../img/img_figure_2.svg);
    top: 20rem;
    left: -24rem;
    transform: rotate(420deg) scale(1, -1);
}
.gnav-sp .figure.figure-3{
    background-image: url(../img/img_figure_3.svg);
    bottom: -20rem;
    right: -1rem;
    transform: rotate(100deg) scale(-1, 1);
}
.gnav-sp .gnav-sp-inner{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 8rem;
    padding-left: 4.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.gnav-sp ol > li + li {
    margin: 3.2rem 0 0;
}
.gnav-sp ol > li {
    font-size: 3.2rem;
    letter-spacing: 0.05em;
    font-weight: bold;
    opacity: 0;
    transform: translateY(-4rem);
    transition: opacity 0s ease, transform 0s ease;
    transition-delay: 0.3s;
}
.gnav-open .gnav-sp ol > li {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.75s ease, transform 0.75s ease;
    transition-delay: 0s;
}
.gnav-open .gnav-sp ol > li:nth-child(2) {
    transition-delay: 0.05s;
}
.gnav-open .gnav-sp ol > li:nth-child(3) {
    transition-delay: 0.1s;
}
.gnav-open .gnav-sp ol > li:nth-child(4) {
    transition-delay: 0.15s;
}
.gnav-open .gnav-sp ol > li:nth-child(5) {
    transition-delay: 0.2s;
}
.gnav-open .gnav-sp ol > li:nth-child(6) {
    transition-delay: 0.25s;
}
.gnav-sp ol > li .en {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0;
    font-weight: normal;
    color: var(--col-bg5);
}
.gnav-sp ol li.hover-item .item{
    position: static;
    opacity: 1;
    visibility: visible;
    padding: 0;
    transform: none;
    margin-top: 1.2rem;
}
.gnav-sp ol li.hover-item ul {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: flex;
}
.gnav-sp ol li.hover-item ul li + li {
    margin-left: 2.4rem;
    padding-left: 2.4rem;
    border-left: solid 1px rgba(0,0,0,0.15);
}
.gnav-sp ol li.hover-item ul li a{
    padding: 0;
    text-align: left;
}
.gnav-sp ol li.hover-item ul li + li{
    border-top: none;
}
.gnav-sp ol li.hover-item ul li a span {
    display: block;
}
.gnav-sp ol li.hover-item ul li a .affiliation {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    font-weight: normal;
}
.gnav-sp ol li.hover-item ul li a .name{
    font-size: 2rem;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}
.gnav-sp ol li.hover-item ul li a .name span{
    display: inline;
    font-weight: normal;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}
.gnav-sp ol li.hover-item ul li a .ttl {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
}
@media (max-width: 1024px){
    .gnav-sp{
        display: block;
    }
}
@media (max-width: 767px){
    .gnav-sp ol > li {
        font-size: 2.6rem;
    }
    .gnav-sp ol > li + li {
        margin: 2rem 0 0;
    }
    .gnav-sp ol li.hover-item ul li + li {
        margin-left: 1.6rem;
        padding-left: 1.6rem;
    }
    .gnav-sp ol li.hover-item ul li a .affiliation {
        font-size: 1.1rem;
    }
    .gnav-sp ol li.hover-item ul li a .ttl {
        font-size: 1.4rem;
    }
    .gnav-sp ol li.hover-item ul li a .name {
        font-size: 1.8rem;
    }
    .gnav-sp .figure{
        width: 32rem;
        height: 32rem;
    }
    .gnav-sp .figure.figure-1{
        top: -22rem;
        right: 8rem;
    }
    .gnav-sp .figure.figure-2{
        top: 20rem;
        left: -23rem;
    }
    .gnav-sp .figure.figure-3{
        bottom: -18rem;
        right: -2rem;
    }
}


/* -- link-btn
-------------------------------------------------------------------------------- */
.link-btn{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: var(--mg-xs);
}
.link-btn a{
    color: var(--col-bg3);
    display: flex;
    align-items: center;
}
.link-btn .txt{
    flex: 1;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    .link-btn a:hover .txt,
    a:hover .link-btn .txt{
        color: var(--col-bg4);
    }
    .link-btn.box a:hover .box-inner{
        transform: scale(0.96);
    }
}
.link-btn.box a{
    display: block;
}
.link-btn.box a .box-inner{
    display: flex;
    align-items: center;
    background: #fff;
    padding: 2rem 2.4rem;
    border-radius: 1rem;
    transition: transform 0.3s ease;
}
.link-btn .link-ico{
    margin-right: 1.6rem;
}
.link-btn.large .txt{
    font-size: 1.6rem;
}
.link-btn.large .link-ico{
    margin-right: 2rem;
}
@media (max-width: 767px){
    .link-btn .txt{
        font-size: 1.5rem;
    }
}


/* -- link-ico
-------------------------------------------------------------------------------- */
.link-ico{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(4rem + 2px);
    height: calc(4rem + 2px);
    box-sizing: border-box;
    border: solid 1px rgba(0,0,0,0.15);
    border-radius: 100%;
    position: relative;
    transition: border 0.3s ease;
}
.link-ico .arrow{
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--col-bg4);
}
.download .link-ico .arrow{
    transform: rotate(90deg);
}
.doc .link-ico .arrow{
    width: 1.8rem;
    height: 1.8rem;
}
.link-ico .line{
    display: block;
    width: calc(4rem + 2px);
    height: calc(4rem + 2px);
    stroke: var(--col-bg4);
    stroke-width: 1px;
    fill: none;
    position: absolute;
    top: -1px;
    left: -1px;
    overflow: visible;
    stroke-dashoffset: 157;
    stroke-dasharray: 157;
}
@keyframes svg-arrow {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(100%);
        opacity: 0;
    }
    51% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
@keyframes svg-arrow-ex {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}
@keyframes svg-arrow-download {
    0% {
        transform: translateY(0) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: translateY(100%) rotate(90deg);
        opacity: 0;
    }
    51% {
        transform: translateY(-100%) rotate(90deg);
        opacity: 0;
    }
    100% {
        transform: translateY(0%) rotate(90deg);
        opacity: 1;
    }
}
@keyframes svg-arrow-doc {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-25%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes svg-line {
    0% {
        stroke-dashoffset: 157;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@media (min-width: 1025px){
    a:hover .link-ico{
        border-color: var(--col-bg4);
        transition-delay: 0.3s;
    }
    a:hover .link-ico .arrow{
        animation: svg-arrow 0.3s ease forwards;
    }
    a[target="_blank"]:hover .link-ico .arrow{
        animation: svg-arrow-ex 0.3s ease forwards;
    }
    a.download:hover .link-ico .arrow{
        animation: svg-arrow-download 0.3s ease forwards;
    }
    a.doc:hover .link-ico .arrow{
        animation: svg-arrow-doc 0.3s ease forwards;
    }
    a:hover .link-ico .line{
        animation: svg-line 0.3s ease forwards;
    }
}
.large .link-ico{
    width: calc(4.8rem + 2px);
    height: calc(4.8rem + 2px);
}
.large .link-ico .arrow{
    width: 2rem;
    height: 2rem;
}
.large .link-ico .line{
    width: calc(4.8rem + 2px);
    height: calc(4.8rem + 2px);
}
@media (max-width: 767px){
}


/* -- separator
-------------------------------------------------------------------------------- */
.separator {
    display: block;
    height: 0.6rem;
    width: 1.8rem;
    position: relative;
    margin: var(--mg-xxs) 0;
}
.separator:first-child {
    margin-top: 0;
}
.separator.center {
    margin-left: auto;
    margin-right: auto;
}
.separator::before, 
.separator::after {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 100%;
    background: var(--col-bg3);
    position: absolute;
    top: 0;
    left: 0;
}
.separator::after {
    background: var(--col-bg4);
    left: auto;
    right: 0;
}


/* -- main
-------------------------------------------------------------------------------- */
main{
    display: block;
    padding: 10rem 1.6rem 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
body.loaded main {
    opacity: 1;
}
@media (min-width: 1025px){
}
@media (max-width: 767px){
    main{
        padding-top: 9rem;
    }
}


/* -- section
-------------------------------------------------------------------------------- */
section{
}
section.section-box + .section-box-wrap,
.section-box-wrap + .section-box,
section.section-box + .section-box{
    margin-top: 0.6rem;
}
.section-box-wrap{
    display: flex;
    justify-content: space-between;
    position: relative;
}
.section-box-wrap .section-box{
    width: calc(50% - 0.3rem);
}
.section-box-wrap .section-box + .section-box{
    margin-top: 0;
}
section .section-inner{
    padding: var(--mg-l) var(--mg-l) var(--mg-m);
}
section.section-box .section-inner{
    background: #fff;
    border-radius: 2rem;
}
section .section-ttl{
    font-size: 1.6rem;
    margin-bottom: var(--mg-l);
}
section .section-ttl span{
    display: block;
}
section .section-ttl .en{
    font-size: 3.6rem;
    line-height: 1.25;
}
section .section-ttl .en > span{
    display: flex;
    overflow: hidden;
    position: relative;
}
section .section-ttl.center .en > span{
    justify-content: center;
}
section .section-ttl .en > span span{
    display: block;
    opacity: 0;
    transform: translateY(100%) rotate(20deg) skew(10deg);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
section .section-ttl.show .en > span span{
    opacity: 1;
    transform: translateY(0) rotate(0) skew(0);
}
section .section-ttl.show .en > span span:nth-child(2){
    transition-delay: 0.04s;
}
section .section-ttl.show .en > span span:nth-child(3){
    transition-delay: 0.08s;
}
section .section-ttl.show .en > span span:nth-child(4){
    transition-delay: 0.12s;
}
section .section-ttl.show .en > span span:nth-child(5){
    transition-delay: 0.16s;
}
section .section-ttl.show .en > span span:nth-child(6){
    transition-delay: 0.2s;
}
section .section-ttl.show .en > span span:nth-child(7){
    transition-delay: 0.24s;
}
section .section-ttl.show .en > span span:nth-child(8){
    transition-delay: 0.28s;
}
section .section-ttl.show .en > span span:nth-child(9){
    transition-delay: 0.32s;
}
section .section-ttl.show .en > span span:nth-child(10){
    transition-delay: 0.36s;
}
section .section-ttl.show .en > span span:nth-child(11){
    transition-delay: 0.4s;
}
section .section-ttl.show .en > span span:nth-child(12){
    transition-delay: 0.44s;
}
section .section-ttl.show .en > span span:nth-child(13){
    transition-delay: 0.48s;
}
section .section-ttl.show .en > span span:nth-child(14){
    transition-delay: 0.52s;
}
section .section-ttl .jp{
    letter-spacing: 0.1em;
    margin-top: 0.6rem;
}
section .section-ttl .jp > span{
    display: flex;
    overflow: hidden;
    position: relative;
}
section .section-ttl.center .jp > span{
    justify-content: center;
}
section .section-ttl .jp > span span{
    display: block;
    opacity: 0;
    transform: translateY(100%) rotate(20deg) skew(10deg);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
section .section-ttl.show .jp > span span{
    opacity: 1;
    transform: translateY(0) rotate(0) skew(0);
}
section .section-lead p{
    font-size: 1.6rem;
    letter-spacing: 0.025em;
    line-height: 2;
    text-align: justify;
}
section .section-lead p + p{
    margin-top: 2rem;
}
@media (min-width: 1025px){
}
@media (max-width: 767px){
    .section-box-wrap{
        display: block;
    }
    .section-box-wrap .section-box{
        width: 100%;
    }
    .section-box-wrap .section-box + .section-box{
        margin-top: 0.6rem;
    }
    section .section-lead p{
        font-size: 1.7rem;
    }
}



/* -- mv
-------------------------------------------------------------------------------- */
.mv{
    display: flex;
}
.mv .img-area{
    width: calc(78% - 0.6rem);
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
}
.mv figure img{
    width: 100%;
}
.mv .img-area picture{
    display: block;
    background: #fff;
    padding-top: 56.263736%;
    overflow: hidden;
    position: relative;
}
.mv .img-area picture img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease, transform 1s ease;
}
.mv .img-area.show picture img{
    opacity: 1;
    transform: scale(1);
}
.mv .banner-area{
    flex: 1;
    padding-left: 0.6rem;
}
.mv .banner-area a{
    display: block;
    height: calc(50% - 0.3rem);
}
.mv .banner-area a + a{
    margin-top: 0.6rem;
}
.mv .banner-area .banner-area-inner{
    font-size: 1vw;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    padding-top: 2em;
    background: #fff;
    border-radius: 2rem;
    position: relative;
    transition: transform 0.3s ease;
}
@media (min-width: 1025px){
    .mv .banner-area a:hover .banner-area-inner{
        transform: scale(0.96);
    }
}
.mv .banner-area .banner-area-inner .link-ico{
    position: absolute;
    right: 2rem;
    bottom: 2rem;
}
.mv .banner-area .mark,
.mv .banner-area .txt{
    display: block;
    margin: 0 auto;
}
.mv .banner-area .mark{
    position: absolute;
    top: calc(50% + 1.8em);
    left: 50%;
    transform: translate(-50%,-50%);
}
.mv .banner-area .iis .mark{
    width: 9em;
}
.mv .banner-area .iis .txt{
    padding: 0 3.6em;
}
.mv .banner-area .rcast .mark{
    width: 7.6em;
}
.mv .banner-area .rcast .txt{
    padding: 0 2.4em;
}
@media (max-width: 1024px){
}
@media (max-width: 767px){
    .mv{
        display: block;
    }
    .mv .img-area {
        width: 100%;
    }
    .mv .img-area picture {
        padding-top: 93.75%;
    }
    .mv .banner-area {
        display: flex;
        gap: 0.6rem;
        padding-left: 0;
        margin-top: 0.6rem;
    }
    .mv .banner-area a{
        width: calc(50% - 0.3rem);
    }
    .mv .banner-area a + a{
        margin: 0;
    }
    .mv .banner-area .banner-area-inner{
        font-size: 2vw;
        padding-top: 100%;
        position: relative;
    }
    .mv .banner-area .banner-area-inner .link-ico {
        right: 1.2rem;
        bottom: 1.2rem;
    }
    .mv .banner-area figure{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 3em 0 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .mv .banner-area .iis .mark{
        width: 9em;
    }
    .mv .banner-area .iis .txt{
        padding: 0 3.2em;
    }
    .mv .banner-area .rcast .mark{
        width: 7.6em;
    }
    .mv .banner-area .rcast .txt{
        padding: 0 2em;
    }
}


/* -- home-message
-------------------------------------------------------------------------------- */
.home-message{
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    overflow: hidden;
    position: relative;
}
.home-message .section-inner{
    padding-top: var(--mg-xxl);
    padding-bottom: var(--mg-xxl);
    padding-left: calc(var(--mg-l) + 1.6rem);
    padding-right: calc(var(--mg-l) + 1.6rem);
    position: relative;
}
.home-message .section-ttl{
    text-align: center;
}
.home-message .body{
    position: relative;
}
.home-message .body .body-inner{
    display: flex;
    align-items: center;
    max-width: 120rem;
    margin: 0 auto;
    position: relative;
}
.loop-txt-js{
    position: absolute;
    top: 50%;
    left: calc(-1.6rem - var(--mg-l));
    right: calc(-1.6rem - var(--mg-l));
    transform: translateY(-50%);
    overflow: hidden;
}
.loop-txt-js p {
    display: flex;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.loop-txt-js.active p {
    opacity: 1;
}
.loop-txt-js p span {
    font-size: 5.5vw;
    letter-spacing: 0.03em;
    font-weight: bold;
    color: #fff;
}
.home-message .txt-area{
    flex: 1;
}
.home-message .section-lead p.ttl {
    font-size: 2rem;
    letter-spacing: 0.12em;
    font-weight: bold;
    line-height: 1.5;
}
.home-message .section-lead p + p {
    margin-top: 2em;
}
.home-message .section-lead p a {
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.1s ease;
}
@media (min-width: 1025px){
    .home-message .section-lead p a:hover {
        color: var(--col-bg4);
    }
}
.home-message .link-area{
    padding-left: 16rem;
}
.home-message .link-area .link-area-inner{
    width: 48rem;
    box-sizing: border-box;
    padding: var(--mg-l) var(--mg-m);
    border-radius: 24rem;
    margin: 0 0 0 auto;
    background: var(--col-bg2);
    color: var(--col-bg3);
    opacity: 0;
    transform: translateY(100%) skew(20deg, 20deg) rotate(-10deg);
    transition: opacity 1s ease, transform 1s ease;
}
.home-message .link-area.show .link-area-inner {
    opacity: 1;
    transform: translateY(0) skew(0, 0) rotate(0);
}
.home-message .link-area .ttl{
    text-align: center;
}
.home-message .link-area .ttl .en{
    display: block;
    font-size: 2.2rem;
}
.home-message .link-area .ttl .jp{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    margin-top: 0.2rem;
}
.home-message .link-box{
    padding-bottom: var(--mg-s);
}
.home-message .link-box li + li{
    margin-top: var(--mg-xxs);
    padding-top: var(--mg-xxs);
    border-top: solid 1px rgba(0,0,0,0.1);
}
.home-message .link-box li a{
    display: flex;
    align-items: center;
    position: relative;
}
.home-message .link-box figure{
    width: 16rem;
    height: calc(16rem * 0.75);
    border-radius: 1.2rem;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}
@media (min-width: 1025px){
    .home-message .link-box li a:hover figure{
        transform: scale(0.95);
    }
}
.home-message .link-box figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.4);
    transition: transform 1s ease;
}
.home-message .show .link-box li figure img{
    transform: scale(1);
}
.home-message .link-box .name-wrap{
    flex: 1;
    padding-left: 3.2rem;
}
.home-message .link-box .position{
    font-size: 1.3rem;
    letter-spacing: 0.025em;
    margin-bottom: 0.8rem;
}
.home-message .link-box .name{
    font-size: 2rem;
    letter-spacing: 0.1em;
}
.home-message .link-ico{
    border-color: rgba(255, 255, 255, 0.5);;
    position: absolute;
    right: 0;
    bottom: 0;
}
@media (min-width: 1025px){
}
@media (max-width: 1024px){
    .home-message .section-inner {
        padding-left: calc(var(--mg-xs) + 1.6rem);
        padding-right: calc(var(--mg-xs) + 1.6rem);
    }
    .home-message .link-area {
        padding-left: 8rem;
    }
}
@media (max-width: 767px){
    .home-message .section-inner {
        padding-left: calc(1.6rem + 1.6rem);
        padding-right: calc(1.6rem + 1.6rem);
    }
    .home-message .body .body-inner{
        display: block;
    }
    .home-message .link-area {
        padding-left: 0;
        margin-top: var(--mg-l);
    }
    .home-message .link-area .link-area-inner{
        width: 36rem;
        margin-right: auto;
        padding-left: var(--mg-s);
        padding-right: var(--mg-s);
    }
    .home-message .link-box figure {
        width: calc(12rem * 0.75);
        height: 12rem;
    }
    .home-message .link-box .name-wrap {
        padding-left: 2.8rem;
    }
    .loop-txt-js {
        top: auto;
        bottom: calc(56rem / 2);
        transform: translateY(50%);
    }
    .loop-txt-js p span {
        font-size: 9vw;
    }
}


/* -- home-news
-------------------------------------------------------------------------------- */
section.home-news{
    margin-top: 0.6rem;
}
section.home-news .section-inner{
    display: flex;
    align-items: center;
    background: var(--col-bg3);
    color: #fff;
}
.home-news .section-ttl{
    width: 15%;
    text-align: center;
    padding-bottom: 1.2rem;
    margin-bottom: 0;
}
.home-news .news-list{
    margin-left: 8rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 8rem;
    border-left: solid 1px rgba(255,255,255,0.15);
}
.news-list a{
    display: block;
}
.news-list a + a{
    margin-top: 2rem;
}
.news-list dl{
    display: flex;
}
.news-list dt{
    width: 9em;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: calc(1.6rem * 1.5);
    color: var(--col-bg6);
}
.news-list dd{
    flex: 1;
    font-size: 1.6rem;
    letter-spacing: 0.025em;
    transition: color 0.1s ease;
}
@media (min-width: 1025px){
    .news-list a:hover dd{
        color: var(--col-bg4);
    }
}
@media (max-width: 767px){
    section.home-news .section-inner{
        display: block;
        padding: var(--mg-m) var(--mg-xs) var(--mg-l);
    }
    .home-news .section-ttl{
        width: 100%;
        padding-bottom: 0;
        margin-bottom: var(--mg-l);
    }
    .home-news .news-list{
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        border-left: none;
    }
    .news-list dt {
        width: 8em;
    }
    .news-list a + a {
        margin-top: var(--mg-xxs);
        padding-top: var(--mg-xxs);
        border-top: solid 1px rgba(255,255,255,0.15);
    }
}


/* -- home-event
-------------------------------------------------------------------------------- */
.home-event.section-box,
.home-laboratory.section-box{
    background: transparent;
}
.home-event .section-box-inner,
.home-laboratory .section-box-inner{
    background: #fff;
    border-radius: 2rem;
    transition: transform 0.3s ease;
}
@media (min-width: 1025px){
    .home-event a:hover .section-box-inner{
        transform: scale(0.97);
    }
    .home-laboratory a:hover .section-box-inner{
        transform: scale(0.97);
    }
}
.home-event figure,
.home-laboratory figure{
    border-radius: 2rem 2rem 0 0;
    padding-top: 35%;
    overflow: hidden;
    position: relative;
}
.home-event figure img,
.home-laboratory figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1s ease, transform 1s ease;
}
.home-event.show figure img,
.home-laboratory.show figure img{
    opacity: 1;
    transform: scale(1);
}
.home-event figure img{
    object-position: bottom center;
}
.home-event .section-inner,
.home-laboratory .section-inner{
    padding-top: var(--mg-m);
}
.home-event .section-ttl,
.home-laboratory .section-ttl{
    margin-bottom: var(--mg-m);
}
.home-event .lead p,
.home-laboratory .lead p{
    font-size: 1.6rem;
    letter-spacing: 0.025em;
    line-height: 2;
    text-align: justify;
}
@media (min-width: 1025px){
}
@media (max-width: 1024px){
    .home-event .section-inner,
    .home-laboratory .section-inner{
        padding-left: var(--mg-xs);
        padding-right: var(--mg-xs);
    }
}
@media (max-width: 767px){
    .home-event figure, 
    .home-laboratory figure{
        padding-top: 45%;
    }
    .home-event .lead p, .home-laboratory .lead p {
        font-size: 1.7rem;
    }
}


/* -- home-laboratory
-------------------------------------------------------------------------------- */
@media (min-width: 1025px){
}
@media (max-width: 767px){
}


/* -- home-timetable
-------------------------------------------------------------------------------- */
.home-timetable .section-inner{
    padding-right: 0;
}
.home-timetable .section-inner > .head{
    padding-right: var(--mg-l);
    margin-bottom: var(--mg-m);
}
.home-timetable .section-ttl{
    text-align: center;
    margin-bottom: var(--mg-m);
}
.time-table-wrap{
    margin-bottom: -4rem;
}
.time-table-item{
    position: relative;
    display: none;
}
.time-table-item.active{
    display: block;
}
.time-table-item .btn-wrap{
    height: calc(6rem + 4rem);
    margin-top: var(--mg-xs);
    margin-left: calc(-1 * var(--mg-l));
    position: relative;
    z-index: 5;
}
.time-table-item .btn-wrap .btn-inner{
    position: fixed;
    left: 50%;
    bottom: 4rem;
    border-radius: 3rem;
    background: rgba(25,44,68,0.4);
    backdrop-filter: blur(5px);
    display: flex;
    box-sizing: border-box;
    padding: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.time-table-wrap.btn-show .time-table-item .btn-wrap .btn-inner{
    opacity: 1;
    visibility: visible;
}
.time-table-wrap.absolute .time-table-item .btn-wrap .btn-inner{
    position: absolute;
}
.time-table-item .btn-wrap span{
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 100%;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.time-table-item .btn-wrap span.hide{
    opacity: 0.5;
    cursor: default;
}
.time-table-item .btn-wrap span + span{
    margin-left: 0.8rem;
}
.time-table-item .btn-wrap span svg{
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    fill: none;
    stroke: var(--col-bg3);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3px;
    transition: stroke 0.15s ease;
}
.time-table-item .btn-wrap span:first-child svg{
    transform: scale(-1,1);
}
@media (min-width: 1025px){
    .time-table-item .btn-wrap span:not(.hide):hover{
        background: var(--col-bg3);
    }
    .time-table-item .btn-wrap span:not(.hide):hover svg{
        stroke: #fff;
    }
}
.toggle-tab{
    display: flex;
    max-width: 46rem;
    margin: 0 auto;
    border-radius: 4rem;
    background: var(--col-bg5);
    padding: 0.4rem;
    overflow: hidden;
    position: relative;
}
.toggle-tab::before{
    content: "";
    display: block;
    width: calc(50% - 0.4rem);
    height: calc(100% - 0.8rem);
    background: #fff;
    border-radius: 4rem;
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    transition: transform 0.3s ease;
}
.toggle-tab.body-2::before{
    transform: translateX(100%);
}
.toggle-tab li{
    width: 50%;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.025em;
    padding: 2rem 0;
    color: rgba(255,255,255,0.5);
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    .toggle-tab li:hover{
        color: rgba(255,255,255,1);
    }
}
.toggle-tab li.active{
    color: var(--col-bg3);
}
.time-table{
    display: flex;
}
.time-table .time-list{
    padding-top: calc(6rem + 6.1rem);
    min-width: 6rem;
    box-sizing: border-box;
}
.time-table .time-list li{
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--col-bg3);
    padding-top: 0.6rem;
    height: calc(2.2rem * 4);
    border-top: solid 1px #e0e0e0;
    box-sizing: border-box;
}
.time-table .time-table-inner{
    overflow-x: auto;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
    flex: 1;
    padding-right: var(--mg-l);
}
.time-table .time-table-inner::-webkit-scrollbar {
    display: none;
}
.time-table .time-table-inner:active{
    cursor: grabbing;
}
.time-table .time-table-inner .head{
}
.time-table .time-table-inner .head-inner{
    display: flex;
}
.time-table .time-table-inner .head p{
    width: 15%;
    min-width: 13rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    line-height: 1.25;
    color: #fff;
    background: var(--col-bg9);
    border-right: solid 1px rgba(255,255,255,0.3);
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    position: relative;
}
.time-table .time-table-inner .head p::before{
    content: "";
    display: block;
    background: rgba(0,0,0,0.1);
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
@media (min-width: 1025px){
    .time-table .time-table-inner .head p:hover::before{
        opacity: 1;
    }
}
.time-table .time-table-inner .head p.col-1{
    background: var(--col-bg4);
}
.time-table .time-table-inner .head p.col-2{
    background: var(--col-bg7);
}
.time-table .time-table-inner .head p.col-3{
    background: var(--col-bg8);
}
.time-table .time-table-inner .head p.min{
    font-size: 1.2rem;
}
.time-table .time-table-inner .head p.space-2{
    width: calc(13% * 2);
    min-width: calc(13rem * 2);
}
.time-table .time-table-inner .head p.space-3{
    width: calc(13% * 3);
    min-width: calc(13rem * 3);
}
.time-table .time-table-inner .head p.space-4{
    width: calc(13% * 4);
    min-width: calc(13rem * 4);
}
.time-table .time-table-inner .head p.space-5{
    width: calc(13% * 5);
    min-width: calc(14rem * 5);
}
.time-table .time-table-inner .head p > span{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.time-table .time-table-inner .head p > span .ico{
    width: 1.4rem;
    height: 1.4rem;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
}
@media (min-width: 1025px){
    .time-table .time-table-inner .head p:hover > span .ico{
        opacity: 1;
    }
}
.time-table .time-table-inner .head p > span .ico svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
}
.time-table .time-table-inner .body{
}
.time-table .time-table-inner .body-time{
    width: 100%;
}
.time-table .time-table-inner .body-time p{
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    border: solid 1px #e0e0e0;
    color: var(--col-bg3);
    padding: 1.2rem 1.2rem;
}
.time-table .body-time.start p{
    border-top: none;
    border-bottom: none;
}
.time-table .body-time p span{
    display: block;
    background: var(--col-bg2);
    padding: 0.8rem 0.8rem;
    border-radius: 0.8rem;
}
.time-table .body-inner{
    height: calc(2.2rem * 28);
}
.time-table .program{
    display: flex;
    flex: 1;
    position: relative;
    height: 100%;
}
.time-table .program .program-line{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.time-table .program span{
    width: 100%;
    position: absolute;
    border-top: solid 1px #f0f0f0;
}
.time-table .program span:nth-child(1),
.time-table .program span:nth-child(5),
.time-table .program span:nth-child(9),
.time-table .program span:nth-child(13),
.time-table .program span:nth-child(17),
.time-table .program span:nth-child(21),
.time-table .program span:nth-child(25){
    border-top-color: #e0e0e0;
}
.time-table .program span:nth-child(1){
    top: 0;
}
.time-table .program span:nth-child(2){
    top: calc(2.2rem * 1);
}
.time-table .program span:nth-child(3){
    top: calc(2.2rem * 2);
}
.time-table .program span:nth-child(4){
    top: calc(2.2rem * 3);
}
.time-table .program span:nth-child(5){
    top: calc(2.2rem * 4);
}
.time-table .program span:nth-child(6){
    top: calc(2.2rem * 5);
}
.time-table .program span:nth-child(7){
    top: calc(2.2rem * 6);
}
.time-table .program span:nth-child(8){
    top: calc(2.2rem * 7);
}
.time-table .program span:nth-child(9){
    top: calc(2.2rem * 8);
}
.time-table .program span:nth-child(10){
    top: calc(2.2rem * 9);
}
.time-table .program span:nth-child(11){
    top: calc(2.2rem * 10);
}
.time-table .program span:nth-child(12){
    top: calc(2.2rem * 11);
}
.time-table .program span:nth-child(13){
    top: calc(2.2rem * 12);
}
.time-table .program span:nth-child(14){
    top: calc(2.2rem * 13);
}
.time-table .program span:nth-child(15){
    top: calc(2.2rem * 14);
}
.time-table .program span:nth-child(16){
    top: calc(2.2rem * 15);
}
.time-table .program span:nth-child(17){
    top: calc(2.2rem * 16);
}
.time-table .program span:nth-child(18){
    top: calc(2.2rem * 17);
}
.time-table .program span:nth-child(19){
    top: calc(2.2rem * 18);
}
.time-table .program span:nth-child(20){
    top: calc(2.2rem * 19);
}
.time-table .program span:nth-child(21){
    top: calc(2.2rem * 20);
}
.time-table .program span:nth-child(22){
    top: calc(2.2rem * 21);
}
.time-table .program span:nth-child(23){
    top: calc(2.2rem * 22);
}
.time-table .program span:nth-child(24){
    top: calc(2.2rem * 23);
}
.time-table .program span:nth-child(25){
    top: calc(2.2rem * 24);
}
.time-table .program span:nth-child(26){
    top: calc(2.2rem * 25);
}
.time-table .program span:nth-child(27){
    top: calc(2.2rem * 26);
}
.time-table .program span:nth-child(28){
    top: calc(2.2rem * 27);
}
.time-table .program span:nth-child(29){
    top: calc(2.2rem * 28);
}
.time-table .program span:nth-child(30){
    top: calc(2.2rem * 29);
}
.time-table .program span:nth-child(31){
    top: calc(2.2rem * 30);
}
.time-table .program span:nth-child(32){
    top: calc(2.2rem * 31);
}
.time-table .program .program-inner{
    width: 15%;
    min-width: 13rem;
    position: relative;
    border-right: solid 1px #e0e0e0;
    box-sizing: border-box;
    z-index: 2;
}
.time-table .program .program-inner:first-child{
    border-left: solid 1px #e0e0e0;
}
.time-table .program .program-inner .program-box{
    width: 100%;
    padding: 0.6rem;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}
.time-table .program dl{
    width: 100%;
    height: 100%;
    background: #f0f2f3;
    border-radius: 0.4rem;
    overflow: hidden;
    position: relative;
    transition: 0.1s ease;
}
.time-table .program dl dt{
    display: block;
    background: var(--col-bg6);
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 0.3rem 1rem;
    transition: background 0.1s ease;
}
.time-table .program dl dd{
}
.time-table .program dl dd .dd-body{
    display: block;
    padding: 0.8rem 0.8rem;
}
.time-table .program dl dd .dd-body + .dd-body{
    border-top: solid 1px rgba(0,0,0,0.1);
}
.time-table .program dl dd .dd-body .ico{
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.2rem 0 0 auto;
    position: relative;
    overflow: hidden;
    top: auto;
    border: none;
}
.time-table .program dl dd .dd-body .ico svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--col-bg9);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.time-table .program .program-inner.col-1 dl dd .dd-body .ico svg{
    stroke: var(--col-bg4);
}
.time-table .program .program-inner.col-2 dl dd .dd-body .ico svg{
    stroke: var(--col-bg7);
}
.time-table .program .program-inner.col-3 dl dd .dd-body .ico svg{
    stroke: var(--col-bg8);
}
@media (min-width: 1025px){
    .time-table .program .program-inner .program-box:hover{
        z-index: 1;
    }
    .time-table .program .program-inner .program-box:hover dl{
        background: #fff;
        box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.2);
    }
    .time-table .program .program-inner .program-box.cover:hover dl{
        height: auto;
    }
    .time-table .program .program-inner .program-box:hover dl dt{
        background: var(--col-bg9);
    }
    .time-table .program .program-inner.col-1 .program-box:hover dl dt{
        background: var(--col-bg4);
    }
    .time-table .program .program-inner.col-2 .program-box:hover dl dt{
        background: var(--col-bg7);
    }
    .time-table .program .program-inner.col-3 .program-box:hover dl dt{
        background: var(--col-bg8);
    }
    .time-table .program a:hover dl dd .dd-body .ttl,
    .time-table .program dl dd a.dd-body:hover .ttl{
        color: var(--col-bg9);
    }
    .time-table .program .col-1 a:hover dl dd .dd-body .ttl,
    .time-table .program .col-1 dl dd a.dd-body:hover .ttl{
        color: var(--col-bg4);
    }
    .time-table .program .col-2 a:hover dl dd .dd-body .ttl,
    .time-table .program .col-2 dl dd a.dd-body:hover .ttl{
        color: var(--col-bg7);
    }
    .time-table .program .col-3 a:hover dl dd .dd-body .ttl,
    .time-table .program .col-3 dl dd a.dd-body:hover .ttl{
        color: var(--col-bg8);
    }
    .time-table .program .program-inner a:hover .ico svg{
        opacity: 1;
        transform: translateX(0);
    }
}
.time-table .program dl dd .ico img{
    width: 1.6rem;
}
.time-table .program .ttl{
    font-size: 1.2rem;
    font-weight: bold;
    word-break: break-all;
    transition: color 0.1s ease;
}
.time-table .program .place,
.time-table .program .txt{
    font-size: 1.1rem;
    color: var(--col-bg5);
    margin-top: 0.4rem;
}
.time-table .program .place + .txt,
.time-table .program .txt + .place{
    margin-top: 0;
}
@media (min-width: 1025px){
}
@media (max-width: 1024px){
    .home-timetable .section-inner{
        padding-left: var(--mg-xs);
    }
    .home-timetable .section-inner > .head {
        padding-right: var(--mg-xs);
    }
    .time-table .time-table-inner {
        padding-right: var(--mg-xs);
    }
    .time-table-item .btn-wrap {
        margin-left: calc(-1 * var(--mg-xs));
    }
    .time-table .program .program-inner .program-box.hover{
        z-index: 1;
    }
    .time-table .program .program-inner .program-box.hover dl{
        background: #fff;
        box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.2);
    }
    .time-table .program .program-inner .program-box.cover.hover dl{
        height: auto;
    }
    .time-table .program .program-inner .program-box.hover dl dt{
        background: var(--col-bg9);
    }
    .time-table .program a.hover dl dd .dd-body .ttl,
    .time-table .program .hover dl dd a.dd-body .ttl{
        color: var(--col-bg9);
    }
    .time-table .program .program-inner.col-1 .program-box.hover dl dt{
        background: var(--col-bg4);
    }
    .time-table .program .col-1 a.hover dl dd .dd-body .ttl,
    .time-table .program .col-1 .hover dl dd a.dd-body .ttl{
        color: var(--col-bg4);
    }
    .time-table .program .program-inner.col-2 .program-box.hover dl dt{
        background: var(--col-bg7);
    }
    .time-table .program .col-2 a.hover dl dd .dd-body .ttl,
    .time-table .program .col-2 .hover dl dd a.dd-body .ttl{
        color: var(--col-bg7);
    }
    .time-table .program .program-inner.col-3 .program-box.hover dl dt{
        background: var(--col-bg8);
    }
    .time-table .program .col-3 a.hover dl dd .dd-body .ttl,
    .time-table .program .col-3 .hover dl dd a.dd-body .ttl{
        color: var(--col-bg8);
    }
    .time-table .program .program-inner .hover .ico svg{
        opacity: 1;
        transform: translateX(0);
    }
}
@media (max-width: 767px){
    .toggle-tab {
        max-width: 36rem;
    }
    .toggle-tab li {
        font-size: 1.5rem;
        padding: 1.6rem 0;
    }
}


/* -- home-theme
-------------------------------------------------------------------------------- */
.home-theme{
    background: #fff;
    border-radius: 2rem;
    margin-top: 0.6rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
    height: 72rem;
}
.home-theme .ttl{
    flex: 1;
    position: relative;
    overflow: hidden;
}
.home-theme .ttl::before,
.home-theme .ttl::after{
    content: "";
    display: block;
    width: 24rem;
    height: 24rem;
    background: url(../img/img_figure_1.svg) no-repeat center;
    background-size: cover;
    position: absolute;
}
.home-theme .ttl::before{
    top: -15rem;
    left: -10rem;
    transform: scale(-1, 1);
}
.home-theme .ttl::after{
    background-image: url(../img/img_figure_2.svg);
    bottom: -16rem;
    right: -7rem;
}
.home-theme .ttl .character{
    display: block;
    position: absolute;
    z-index: 1;
}
.home-theme .ttl .character.character-1{
    height: 9rem;
    top: 2.8rem;
    left: 3.2rem;
    animation: anime-size 4s ease infinite;
}
.home-theme .ttl .character.character-2{
    height: calc(9rem * 1.35);
    bottom: 4rem;
    right: 4rem;
    animation: anime-jump 4s ease infinite;
}
.home-theme .ttl .character img{
    height: 100%;
}
.home-theme .ttl .character.character-2 img{
    transform: rotate(1deg);
}
.home-theme .ttl .en{
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--col-bg5);
    writing-mode: vertical-rl;
    position: absolute;
    top: var(--mg-s);
    right: var(--mg-xs);
}
.home-theme .ttl .en::after{
    content: "";
    display: inline-block;
    height: 4.8rem;
    border-left: solid 1px;
    margin-top: 1rem;
    transform: translateX(-0.1rem);
}
.home-theme .txt{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.home-theme .txt > span{
    display: block;
    font-size: 3.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    overflow: hidden;
    position: relative;
}
.home-theme .txt > span span{
    display: inline-block;
    opacity: 0;
    transform: scale(1.5);
    transition: opacity 1s ease, transform 1s ease;
}
.home-theme .txt > span.show span{
    opacity: 1;
    transform: scale(1);
}
.home-theme .txt > span span:nth-child(2){
    transition-delay: 0.04s;
}
.home-theme .txt > span span:nth-child(3){
    transition-delay: 0.08s;
}
.home-theme .txt > span span:nth-child(4){
    transition-delay: 0.12s;
}
.home-theme .txt > span span:nth-child(5){
    transition-delay: 0.16s;
}
.home-theme .txt > span span:nth-child(6){
    transition-delay: 0.2s;
}
.home-theme .txt > span span:nth-child(7){
    transition-delay: 0.24s;
}
.home-theme .txt > span span:nth-child(8){
    transition-delay: 0.28s;
}
.home-theme .txt > span span:nth-child(9){
    transition-delay: 0.32s;
}
.home-theme .txt > span span:nth-child(10){
    transition-delay: 0.36s;
}
.home-theme .txt > span span:nth-child(11){
    transition-delay: 0.4s;
}
.home-theme .txt > span span:nth-child(12){
    transition-delay: 0.44s;
}
.home-theme .txt > span span:nth-child(13){
    transition-delay: 0.48s;
}
.home-theme .txt > span span:nth-child(14){
    transition-delay: 0.52s;
}
.home-theme .txt > span span:nth-child(15){
    transition-delay: 0.56s;
}
.home-theme .txt > span span:nth-child(16){
    transition-delay: 0.6s;
}
.home-theme .txt > span span:nth-child(17){
    transition-delay: 0.64s;
}
.home-theme .txt > span span:nth-child(18){
    transition-delay: 0.68s;
}
.home-theme .txt > span span:nth-child(19){
    transition-delay: 0.72s;
}
.home-theme .txt > span span:nth-child(20){
    transition-delay: 0.76s;
}
.home-theme .img{
    width: 75%;
    background: var(--col-bg2);
    overflow: hidden;
    position: relative;
}
.home-theme .img .img-inner{
    display: flex;
    gap: 2rem;
}
.home-theme .img ul{
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.home-theme .img ul li{
    width: 100%;
    padding-top: 62.5%;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
}
.home-theme.show .img ul li{
    opacity: 1;
}
.home-theme.show .img ul:nth-child(1) li:nth-child(2),
.home-theme.show .img ul:nth-child(1) li:nth-child(6),
.home-theme.show .img ul:nth-child(2) li:nth-child(1),
.home-theme.show .img ul:nth-child(2) li:nth-child(5),
.home-theme.show .img ul:nth-child(3) li:nth-child(3),
.home-theme.show .img ul:nth-child(3) li:nth-child(7){
    transition-delay: 0.3s;
}
.home-theme.show .img ul:nth-child(1) li:nth-child(3),
.home-theme.show .img ul:nth-child(1) li:nth-child(7),
.home-theme.show .img ul:nth-child(2) li:nth-child(4),
.home-theme.show .img ul:nth-child(2) li:nth-child(8),
.home-theme.show .img ul:nth-child(3) li:nth-child(2),
.home-theme.show .img ul:nth-child(3) li:nth-child(6){
    transition-delay: 0.15s;
}
.home-theme.show .img ul:nth-child(1) li:nth-child(4),
.home-theme.show .img ul:nth-child(1) li:nth-child(8),
.home-theme.show .img ul:nth-child(2) li:nth-child(2),
.home-theme.show .img ul:nth-child(2) li:nth-child(6),
.home-theme.show .img ul:nth-child(3) li:nth-child(4),
.home-theme.show .img ul:nth-child(3) li:nth-child(8){
    transition-delay: 0.5s;
}
.home-theme .img ul:nth-child(1) li{
    border-radius: 0 2rem 2rem 0;
}
.home-theme .img ul:nth-child(3) li{
    border-radius: 2rem 0 0 2rem;
}
.home-theme .img ul li img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-theme .img ul:nth-child(1) li:nth-child(3),
.home-theme .img ul:nth-child(1) li:nth-child(7){
    padding-top: 100%;
}
.home-theme .img ul:nth-child(2) li:nth-child(2),
.home-theme .img ul:nth-child(2) li:nth-child(6){
    padding-top: 100%;
}
.home-theme .img ul:nth-child(3) li:nth-child(1),
.home-theme .img ul:nth-child(3) li:nth-child(5){
    padding-top: 100%;
}
@media (max-width: 1024px){
    .home-theme .img {
        width: 72.5%;
    }
    .home-theme .txt > span{
        font-size: 3.4rem;
    }
}
@media (max-width: 767px){
    .home-theme{
        display: block;
        height: auto;
    }
    .home-theme .txt {
        padding: var(--mg-l) 0;
    }
    .home-theme .txt > span {
        font-size: 3.2rem;
    }
    .home-theme .img {
        width: 100%;
        height: 48rem;
    }
    .home-theme .img .img-inner{
        gap: 1.2rem;
    }
    .home-theme .img ul{
        gap: 1.2rem;
    }
    .home-theme .img ul li{
        padding-top: 75%;
    }
    .home-theme .img ul:nth-child(1) li:nth-child(3),
    .home-theme .img ul:nth-child(1) li:nth-child(7){
        padding-top: 125%;
    }
    .home-theme .img ul:nth-child(2) li:nth-child(2),
    .home-theme .img ul:nth-child(2) li:nth-child(6){
        padding-top: 125%;
    }
    .home-theme .img ul:nth-child(3) li:nth-child(1),
    .home-theme .img ul:nth-child(3) li:nth-child(5){
        padding-top: 125%;
    }
}


/* -- home-outline
-------------------------------------------------------------------------------- */
.home-outline{
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    overflow: hidden;
    position: relative;
}
.home-outline .section-inner{
    padding-top: var(--mg-xxl);
    padding-bottom: var(--mg-xxl);
    padding-left: calc(var(--mg-l) + 1.6rem);
    padding-right: calc(var(--mg-l) + 1.6rem);
}
.home-outline .section-ttl{
    text-align: center;
}
.home-outline .body{
    position: relative;
}
.home-outline .body .body-inner{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    max-width: 120rem;
    margin: 0 auto;
    position: relative;
}
.home-outline .txt-area{
    flex: 1;
}
.home-outline .txt-area .txt-area-inner{
}
.home-outline .txt-area dl{
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
}
.home-outline .txt-area dl + dl{
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: solid 1px rgba(0,0,0,0.15);
}
.home-outline .txt-area dt{
    width: 8em;
    font-weight: bold;
}
.home-outline .txt-area .registration{
    margin-top: var(--mg-m);
    background: var(--col-bg2);
    color: var(--col-bg3);
    padding: var(--mg-xs) var(--mg-s) var(--mg-s);
    border-radius: 2rem;
}
.home-outline .txt-area .registration .ttl{
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    margin-bottom: var(--mg-xxs);
    display: flex;
    justify-content: center;
}
.home-outline .txt-area .registration .ttl span{
    position: relative;
    padding: 0 1.4rem 0 1.6rem;
}
.home-outline .txt-area .registration .ttl span::before{
    content: "";
    display: block;
    height: 120%;
    border-left: solid 1px;
    transform: rotate(-20deg);
    position: absolute;
    top: 0;
    left: 0;
}
.home-outline .txt-area .registration .ttl span::after{
    content: "";
    display: block;
    height: 120%;
    border-right: solid 1px;
    transform: rotate(20deg);
    position: absolute;
    top: 0;
    right: 0;
}
.home-outline .txt-area .registration p{
    font-size: 1.4rem;
    letter-spacing: 0.025em;
    line-height: 1.75;
    text-align: justify;
}
.home-outline .txt-area .registration p + p{
    margin-top: 1.5em;
}
.home-outline .txt-area .registration p a{
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.1s ease;
}
@media (min-width: 1025px){
    .home-outline .txt-area .registration p a:hover{
        color: var(--col-bg4);
    }
}
.home-outline .img-area{
    padding-right: 16rem;
}
.home-outline .img-area figure{
    width: 48rem;
    height: calc(48rem * 1.3333333);
    box-sizing: border-box;
    border-radius: 24rem;
    margin: 0 0 0 auto;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(100%) skew(-20deg, -20deg) rotate(10deg);
    transition: opacity 1s ease, transform 1s ease;
}
.home-outline .img-area.show figure {
    opacity: 1;
    transform: translateY(0) skew(0, 0) rotate(0);
}
.home-outline .img-area figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    transition: transform 1s ease;
}
.home-outline .img-area.show figure img{
    transform: scale(1);
}
.home-outline .link-btn{
    justify-content: center;
}
@media (max-width: 1024px){
    .home-outline .section-inner {
        padding-left: calc(1.6rem + 1.6rem);
        padding-right: calc(1.6rem + 1.6rem);
    }
    .home-outline .img-area {
        padding-right: 8rem;
    }
}
@media (max-width: 767px){
    .home-outline .body .body-inner{
        display: block;
    }
    .home-outline .txt-area .registration{
        padding: var(--mg-s) var(--mg-xs) var(--mg-m);
    }
    .home-outline .img-area{
        padding-right: 0;
        margin-top: var(--mg-l);
    }
    .home-outline .img-area figure {
        width: 36rem;
        height: calc(36rem * 1.3333333);
        border-radius: 24rem;
    }
    .home-outline .img-area.show figure{
        margin-right: auto;
    }
    .home-outline .loop-txt-js {
        top: auto;
        bottom: calc((36rem * 1.3333333) / 2);
    }
    .home-outline .txt-area dl {
        font-size: 1.6rem;
    }
    .home-outline .txt-area .registration p {
        font-size: 1.5rem;
    }

}


/* -- campus-map
-------------------------------------------------------------------------------- */
.campus-map{
    background: rgba(155, 167, 171, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.campus-map.active{
    opacity: 1;
    visibility: visible;
}
.campus-map .campus-map-inner{
    width: calc(100% - 3.2rem);
    height: calc(100svh - 3.2rem);
    background: #fff;
    border-radius: 2rem;
    position: relative;
    transform: translateY(10rem);
    transition: transform 0s ease 0.3s;
}
header.fix .campus-map .campus-map-inner{
    transform: translateY(8rem);
}
.campus-map.active .campus-map-inner{
    transform: translateY(0);
    transition: transform 0.3s ease;
}
.campus-map .close-btn{
    display: block;
    width: 6rem;
    height: 6rem;
    background: var(--col-bg3);
    border-radius: 2rem;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    z-index: 1;
    transition: background 0.15s ease;
}
@media (min-width: 1025px){
    .campus-map .close-btn.on-hover:hover{
        background: var(--col-bg4);
    }
}
.campus-map .close-btn::before,
.campus-map .close-btn::after{
    content: "";
    display: block;
    width: 2.4rem;
    border-top: solid 1.5px #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.campus-map .close-btn::after{
    transform: translate(-50%,-50%) rotate(-45deg);
}
.campus-map .campus-map-item{
    display: flex;
    height: 100%;
}
.campus-map .campus-map-item .map-area{
    border-radius: 2rem 0 0 2rem;
    overflow: hidden;
    position: relative;
}
.campus-map .campus-map-item .map-area .figure-wrap{
    width: calc((100svh - 3.2rem) * 0.78947368);
    height: calc(100svh - 3.2rem);
    position: relative;
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom{
    cursor: grab;
    overflow: auto;
    scrollbar-width: none;
}
.campus-map .campus-map-item .map-area .figure-wrap::-webkit-scrollbar {
    display: none;
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom .figure-content{
    width: 160%;
    height: 160%;
    position: relative;
}
.campus-map .campus-map-item .map-area figure{
    width: 100%;
    height: 100%;
}
.campus-map .campus-map-item .map-area figure span{
    display: block;
    width: 100%;
    height: 100%;
}
.campus-map .campus-map-item .map-area figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.campus-map .campus-map-item .map-area .number{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.campus-map .campus-map-item .map-area .number .ico{
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    width: 2rem;
    height: 2rem;
    border: solid 1px #fff;
    border-radius: 100%;
    background: var(--col-bg3);
    color: #fff;
    text-align: center;
    line-height: 1.9rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom .number .ico{
    transform: translate(-50%,-50%) scale(1.6);
}
.campus-map .campus-map-item .map-area .number .ico.col-1{
    background: var(--col-bg4);
}
.campus-map .campus-map-item .map-area .number .ico.col-2{
    background: var(--col-bg7);
}
.campus-map .campus-map-item .map-area .number .ico.col-3{
    background: var(--col-bg8);
}
.campus-map .campus-map-item .map-area .number .ico.ico-1{
    top: 27.5%;
    left: 68%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-2{
    top: 33.75%;
    left: 52.75%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-3{
    top: 42.25%;
    left: 52.75%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-4{
    top: 36.25%;
    left: 37.5%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-5{
    top: 45.25%;
    left: 37.5%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-6{
    top: 53%;
    left: 37.5%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-7{
    top: 68.75%;
    left: 34.75%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-8{
    top: 36.5%;
    left: 67%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-9{
    top: 42.75%;
    left: 67%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-10{
    top: 50.25%;
    left: 67%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-11{
    top: 58.75%;
    left: 67%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-12{
    top: 68.25%;
    left: 67%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-13{
    top: 69.75%;
    left: 51.5%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-14{
    top: 75%;
    left: 51.5%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-15{
    top: 82.375%;
    left: 49.75%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-16{
    top: 81.25%;
    left: 57.75%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-17{
    top: 26.375%;
    left: 37.75%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-18{
    top: 68.875%;
    left: 40.75%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-19{
    top: 84.5%;
    left: 37%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-20{
    top: 58.5%;
    left: 52%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-21{
    top: 74.25%;
    left: 37%;
}
.campus-map .campus-map-item .map-area .number .ico.ico-22{
    top: 25%;
    left: 28.75%;
}
.campus-map .campus-map-item .map-area .legend{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.campus-map .campus-map-item .map-area .legend .ico{
    margin-right: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom .legend .ico{
    transform: translate(-50%,-50%) scale(1.6);
}
.campus-map .campus-map-item .map-area .legend .ico.ico-3-1{
    top: 25.375%;
    left: 42%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-3-2{
    top: 28.25%;
    left: 64.5%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-3-3{
    top: 38%;
    left: 41.75%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-3-4{
    top: 63.5%;
    left: 34%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-3-5{
    top: 68%;
    left: 63.25%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-3-6{
    top: 81.25%;
    left: 37.25%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-4{
    top: 63.25%;
    left: 61.25%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-5-1{
    top: 24.25%;
    left: 50.25%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-5-2{
    top: 68.25%;
    left: 75%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-6{
    top: 56%;
    left: 67%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-7{
    top: 61%;
    left: 34%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-8-1{
    top: 15.5%;
    left: 50%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-8-2{
    top: 35%;
    left: 41.5%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-8-3{
    top: 55.75%;
    left: 64%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-8-4{
    top: 61.25%;
    left: 37.25%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-8-5{
    top: 86%;
    left: 41.75%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-9-1{
    top: 25%;
    left: 25.5%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-9-2{
    top: 54.5%;
    left: 49.75%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-9-3{
    top: 66.5%;
    left: 40.5%;
}
.campus-map .campus-map-item .map-area .legend .ico.ico-9-4{
    top: 70.25%;
    left: 55.25%;
}
.campus-map .campus-map-item .map-area .zoom-btn{
    background: #fff;
    border-radius: 0.4rem;
    box-shadow: 0 0.2rem 0.4rem -1px rgba(0,0,0,0.3);
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.campus-map .campus-map-item .map-area .zoom-btn span{
    display: block;
    width: 4rem;
    height: 4rem;
    position: relative;
    transition: background 0.15s ease;
}
.campus-map .campus-map-item .map-area .zoom-btn .zoom-up{
    border-radius: 0.4rem 0.4rem 0 0;
}
.campus-map .campus-map-item .map-area .zoom-btn .zoom-down{
    border-radius: 0 0 0.4rem 0.4rem;
    border-top: solid 1px #e5e5e5;
}
.campus-map .campus-map-item .map-area .zoom-btn .zoom-up::before,
.campus-map .campus-map-item .map-area .zoom-btn .zoom-up::after,
.campus-map .campus-map-item .map-area .zoom-btn .zoom-down::before{
    content: "";
    display: block;
    width: 1.2rem;
    border-top: solid 2px var(--col-bg3);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.6rem;
    transform: translateY(-50%);
    transition: border 0.15s ease, opacity 0.15s ease;
}
.campus-map .campus-map-item .map-area .zoom-btn .zoom-up::after{
    transform: translateY(-50%) rotate(90deg);
}
.campus-map .campus-map-item .map-area .zoom-btn .zoom-down{
    background: #f5f5f5;
}
.campus-map .campus-map-item .map-area .zoom-btn .zoom-down::before{
    opacity: 0.3;
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom + .zoom-btn .zoom-up{
    background: #f5f5f5;
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom + .zoom-btn .zoom-up::before,
.campus-map .campus-map-item .map-area .figure-wrap.zoom + .zoom-btn .zoom-up::after{
    opacity: 0.3;
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom + .zoom-btn .zoom-down{
    background: #fff;
}
.campus-map .campus-map-item .map-area .figure-wrap.zoom + .zoom-btn .zoom-down::before{
    opacity: 1;
}
@media (min-width: 1025px){
    .campus-map .campus-map-item .map-area .figure-wrap:not(.zoom) + .zoom-btn .zoom-up:hover::before,
    .campus-map .campus-map-item .map-area .figure-wrap:not(.zoom) + .zoom-btn .zoom-up:hover::after,
    .campus-map .campus-map-item .map-area .figure-wrap.zoom + .zoom-btn .zoom-down:hover::before{
        border-top-color: var(--col-bg4);
    }
}
.campus-map .campus-map-item .txt-area{
    flex: 1;
    overflow: auto;
}
.campus-map .campus-map-item .txt-area .txt-area-inner{
    padding: 6rem 8rem 0;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.campus-map .campus-map-item .txt-area .head{
    margin-bottom: var(--mg-m);
}
.campus-map .campus-map-item .txt-area .campus-map-ttl .en{
    display: block;
    font-size: 2.8rem;
}
.campus-map .campus-map-item .txt-area .campus-map-ttl .jp{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    margin-top: 0.4rem;
}
.campus-map .campus-map-item .txt-area .body{
    padding-bottom: 8rem;
}
.campus-map .campus-map-item .txt-area .ttl{
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 7.2rem;
    position: relative;
}
.campus-map .campus-map-item .txt-area .ttl::before, 
.campus-map .campus-map-item .txt-area .ttl::after {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 100%;
    background: var(--col-bg3);
    position: absolute;
    bottom: -3.2rem;
    left: 0;
    margin-bottom: -0.3rem;
}
.campus-map .campus-map-item .txt-area .ttl::after {
    background: var(--col-bg4);
    transform: translateX(1.2rem);
}
.campus-map .campus-map-item .txt-area .facility{
}
.campus-map .campus-map-item .txt-area .facility-inner{
    display: flex;
    flex-wrap: wrap;
    margin-top: -1.2rem;
    margin-right: -2rem;
}
.campus-map .campus-map-item .txt-area .facility dl{
    width: calc(100% / 3);
    display: flex;
    align-items: center;
    margin-top: 1.2rem;
}
.campus-map .campus-map-item .txt-area .facility dt{
    font-size: 1.1rem;
    font-weight: bold;
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    background: var(--col-bg3);
    color: #fff;
    text-align: center;
    line-height: 1.9rem;
    margin-right: 1rem;
}
.campus-map .campus-map-item .txt-area .facility dt.col-1{
    background: var(--col-bg4);
}
.campus-map .campus-map-item .txt-area .facility dt.col-2{
    background: var(--col-bg7);
}
.campus-map .campus-map-item .txt-area .facility dt.col-3{
    background: var(--col-bg8);
}
.campus-map .campus-map-item .txt-area .facility dd{
    flex: 1;
    font-size: 1.3rem;
    letter-spacing: 0.025em;
    line-height: 1.25;
    padding-right: 2rem;
}
.campus-map .campus-map-item .txt-area .legend{
    margin-top: var(--mg-xxs);
    padding-top: var(--mg-xxs);
    border-top: solid 1px rgba(0,0,0,0.1);
}
.campus-map .campus-map-item .txt-area .legend-inner{
    display: flex;
    flex-wrap: wrap;
    margin-top: -1.2rem;
    margin-right: -2rem;
}
.campus-map .campus-map-item .txt-area .legend dl{
    width: calc(100% / 3);
    display: flex;
    align-items: center;
    margin-top: 1.2rem;
}
.campus-map .campus-map-item .legend .ico{
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}
.campus-map .campus-map-item .legend .ico.ico-1{
    background: #8ac3ac;
    border-radius: 0.4rem;
}
.campus-map .campus-map-item .legend .ico.ico-2{
    background: #759ed1;
    border-radius: 0.4rem;
}
.campus-map .campus-map-item .legend .ico.ico-7{
    background: #bb2728;
    border-radius: 0.4rem;
}
.campus-map .campus-map-item .legend .ico.ico-8 img{
    transform: scale(1.125);
}
.campus-map .campus-map-item .legend .ico img{
    width: 100%;
}
.campus-map .campus-map-item .txt-area .legend dd{
    flex: 1;
    font-size: 1.3rem;
    letter-spacing: 0.025em;
    line-height: 1.25;
    padding-right: 2rem;
}
.campus-map .campus-map-item .txt-area .link-item{
    margin-top: var(--mg-xxs);
    padding-top: var(--mg-xxs);
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}
.campus-map .campus-map-item .txt-area .link-item .link-btn{
    margin-top: 0;
}
.campus-map .campus-map-item .txt-area .link-item .link-btn + .link-btn{
    margin-top: 1.2rem;
}
.campus-map .campus-map-item .txt-area .link-item .link-btn .txt span{
    display: block;
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 0.05em;
}
.campus-map .campus-map-item .txt-area .note{
    margin-top: var(--mg-xs);
}
.campus-map .campus-map-item .txt-area .note p{
    font-size: 1.2rem;
    letter-spacing: 0.025em;
    color: var(--col-bg5);
    text-indent: -1em;
    padding-left: 1em;
}
@media (min-width: 1900px){
    .campus-map .campus-map-item .txt-area .facility dl,
    .campus-map .campus-map-item .txt-area .legend dl{
        width: calc(100% / 4);
    }
}
@media (max-width: 1500px){
    .campus-map .campus-map-item .txt-area .facility dl,
    .campus-map .campus-map-item .txt-area .legend dl{
        width: calc(100% / 2);
    }
}
@media (min-width: 1025px){
}
@media (max-width: 1024px){
    .campus-map .campus-map-item .map-area .zoom-btn{
        top: auto;
        bottom: 1.6rem;
    }
    .campus-map .campus-map-inner{
        width: 70%;
    }
    .campus-map .campus-map-item{
        display: block;
        border-radius: 2rem;
        overflow: auto;
    }
    .campus-map .campus-map-item .map-area {
        border-radius: 0;
    }
    .campus-map .campus-map-item .map-area .figure-wrap{
        width: 100%;
        height: auto;
        padding-top: calc(100% * 1.26666667);
        position: relative;
    }
    .campus-map .campus-map-item .map-area .figure-wrap .figure-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .campus-map .campus-map-item .map-area .figure-wrap.zoom .figure-content {
        position: absolute;
    }
    .campus-map .campus-map-item .txt-area{
        overflow: visible;
    }
    .campus-map .campus-map-item .txt-area .txt-area-inner{
        padding-left: 6rem;
        padding-right: 6rem;
    }
    .campus-map .campus-map-item .txt-area .head{
        display: none;
    }
    .campus-map .campus-map-item .txt-area .body{
        padding-bottom: 6rem;
    }
    .campus-map .campus-map-item .txt-area .facility dl, 
    .campus-map .campus-map-item .txt-area .legend dl {
        width: calc(100% / 3);
    }
}
@media (max-width: 767px){
    .campus-map .campus-map-inner {
        width: calc(100% - 3.2rem);
    }
    .campus-map .campus-map-item .txt-area .txt-area-inner {
        padding: 4.8rem 3.2rem 0;
    }
    .campus-map .campus-map-item .txt-area .body {
        padding-bottom: 4.8rem;
    }
    .campus-map .campus-map-item .txt-area .facility dl, 
    .campus-map .campus-map-item .txt-area .legend dl {
        width: calc(100% / 2);
    }
}


/* -- page
-------------------------------------------------------------------------------- */
.page{
    margin-bottom: 0.6rem;
}
.page-ttl .section-ttl{
    font-size: 1.8rem;
    margin-bottom: 0;
    position: relative;
}
.page-ttl .section-ttl .en{
    font-size: 5rem;
    margin-bottom: 0;
}
@media (max-width: 767px){
}


/* -- page-news
-------------------------------------------------------------------------------- */
.page-news .contnt-box{
    display: flex;
    justify-content: space-between;
}
.page-news .section-ttl{
    width: 20%;
}
.page-news .section-ttl .en {
    font-size: 2.8rem;
}
.page-news .body{
    flex: 1;
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
}
.page-news .ttl-area .date{
    display: inline-block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--col-bg6);
    border: solid 1px rgba(0,0,0,0.15);
    padding: 0.5rem 1.6rem 0.6rem;
    border-radius: 2rem;
    margin-bottom: var(--mg-xxxs);
}
.page-news .ttl-area .ttl{
    font-size: 3.2rem;
    letter-spacing: 0.05em;
}
.page-news .txt-area{
    margin-top: var(--mg-m);
}
.page-news .link-btn{
    margin-top: var(--mg-l);
}
.page-news .link-btn .link-ico{
    transform: scale(-1,1);
}
.page-news .link-btn .line{
    transform: scale(-1,1);
}
.page-news .article .txt-area .img figure{
    border-radius: 0;
}
@media (max-width: 1024px){
    .page-news .section-inner{
        padding-left: var(--mg-m);
        padding-right: var(--mg-m);
    }
}
@media (max-width: 767px){
    .page-news .contnt-box{
        display: block;
    }
    .page-news .section-ttl {
        width: 100%;
    }
    .page-news .section-inner {
        padding-top: var(--mg-xs);
        padding-left: var(--mg-xs);
        padding-right: var(--mg-xs);
    }
    .page-news .ttl-area .ttl{
        font-size: 2.6rem;
    }
}


/* -- page-message
-------------------------------------------------------------------------------- */
.page-message .page-ttl{
    width: 40rem;
    white-space: nowrap;
    position: sticky;
    top: 8rem;
    transition: top 0.15s ease;
}
header.hide + .campus-map + .page-message .page-ttl{
    top: 0;
}
.page-message .page-ttl .section-inner{
    padding-top: var(--mg-m);
    padding-left: calc(var(--mg-l) - 1.6rem);
}
.page-message .section-box{
    flex: 1;
}
.page-message .tab{
    margin-left: -2.4rem;
    margin-right: -2.4rem;
    margin-top: var(--mg-l);
}
.page-message .tab ul{
}
.page-message .tab ul li{
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.page-message .tab ul li + li{
    margin-top: 0.6rem;
}
.page-message .tab ul li span{
    display: block;
    padding: 3.2rem 2.4rem;
    text-align: center;
    background: #fff;
    border-radius: 1rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.page-message .tab ul li.active span{
    background: var(--col-bg2);
}
@media (min-width: 1025px){
    .page-message .tab ul li:not(.active):hover span{
        transform: scale(0.96);
    }
}
.page-message .tab ul li span img{
    height: 4.4rem;
    mix-blend-mode: multiply;
}
.page-message .tab ul li .rcast img{
    transform: translateY(-0.4rem);
}
.page-message .section-box .section-inner{
    position: relative;
}
.page-message .section-box .section-inner .body + .body{
    display: none;
}
.page-message .page-message-inner{
    display: flex;
    align-items: flex-start;
}
.page-message .message-content{
    display: flex;
    align-items: flex-start;
}
.page-message .message-content .txt-box{
    flex: 1;
    padding-right: var(--mg-l);
}
.page-message .article .txt-area .txt-box p + p{
    margin-top: 2em;
}
.page-message .name-box{
    width: 25%;
    min-width: 24rem;
    max-width: 30rem;
}
.page-message figure{
    width: 100%;
    position: relative;
}
.page-message figure span{
    display: block;
    width: 100%;
    padding-top: 133.333333%;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
}
.page-message figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.1);
}
.page-message figure.show img{
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease, transform 1s ease;
}
.page-message .name-box .name{
    margin-top: var(--mg-xxxs);
}
.page-message .name-box .name .jp{
    display: block;
    font-size: 1.4rem;
}
.page-message .name-box .name .jp span{
    display: block;
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    font-weight: bold;
    margin-top: 0.8rem;
}
.page-message .name-box .name .en{
    display: block;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--col-bg5);
}
@media (max-width: 1200px){
    .page-message .message-content{
        display: block;
    }
    .page-message .message-content .txt-box{
        padding-right: 0;
    }
    .page-message .name-box{
        width: 28rem;
        margin-top: var(--mg-l);
        margin-left: auto;
    }
}
@media (max-width: 1024px){
    .page-message .page-ttl{
        width: 32rem;
    }
    .page-message .page-ttl .section-inner {
        padding-right: var(--mg-xs);
        padding-left: calc(var(--mg-xs) - 1.6rem);
    }
    .page-message .section-box.message .section-inner {
        padding-top: var(--mg-l);
        padding-left: var(--mg-m);
        padding-right: var(--mg-m);
    }
}
@media (max-width: 767px){
    .page-message section .section-ttl .en > span{
        justify-content: center;
    }
    .page-message section .section-ttl .jp > span{
        justify-content: center;
    }
    .page-message .page-message-inner{
        display: block;
    }
    .page-message .page-ttl{
        width: 100%;
        position: relative;
        top: 0;
    }
    .page-message .page-ttl .section-inner {
        padding-left: var(--mg-xs);
        padding-bottom: 0.6rem;
    }
    .page-message .tab {
        margin-left: calc(-1 * var(--mg-xs));
        margin-right: calc(-1 * var(--mg-xs));
    }
    .page-message .tab ul {
        display: flex;
        gap: 0.6rem;
    }
    .page-message .tab ul li {
        width: calc(50% - 0.3rem);
    }
    .page-message .tab ul li + li{
        margin-top: 0;
    }
    .page-message .tab ul li span {
        padding: 2.8rem 2rem;
        border-radius: 2rem;
    }
    .page-message .tab ul li span img {
        width: 100%;
        height: auto;
    }
    .page-message .section-box.message .section-inner {
        padding-left: var(--mg-xs);
        padding-right: var(--mg-xs);
    }
    .page-message .name-box {
        margin-right: auto;
    }
}


/* -- card
-------------------------------------------------------------------------------- */
.card{
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.card > li{
    width: 100%;
    position: relative;
}
.card > li .inner{
    height: 100%;
    padding: var(--mg-l) var(--mg-l);
    box-sizing: border-box;
    background: #fff;
    border-radius: 2rem;
}
.card .shoulder{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: var(--mg-xxs);
}
.card .shoulder li{
    font-size: 1.3rem;
    letter-spacing: 0.025em;
    padding: 0.6rem 1rem;
    font-weight: bold;
    border: solid 1px #e5e5e5;
    color: var(--col-bg5);
    background: #fafafa;
    border-radius: 0.4rem;
}
.card li h2{
    font-size: 2.6rem;
    letter-spacing: 0.05em;
}
.card li .flex{
    display: flex;
    align-items: flex-start;
}
.card li .flex > .txt{
    flex: 1;
    padding-right: 6rem;
}
.card li .flex .img{
    width: 35%;
    max-width: 48rem;
    overflow: hidden;
    border-radius: 2rem;
}
.card li .flex .img img{
    width: 100%;
    opacity: 0;
    transform: scale(1.1);
}
.card li .flex .img.show img{
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease, transform 1s ease;
}
.card li .data{
    margin-top: var(--mg-xxxs);
}
.card li .data p{
    font-size: 1.5rem;
    color: var(--col-bg5);
}
.card li .data p + p{
    margin-top: 0.4rem;
}
.card li .data-list{
    margin-top: var(--mg-s);
    border-top: solid 1px rgba(0,0,0,0.15);
    display: flex;
    flex-wrap: wrap;
}
.card li .data-list dl{
    min-width: 50%;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: solid 1px rgba(0,0,0,0.15);
}
.card li .data-list dl dt{
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card li .data-list dl dt svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--col-bg4);
}
.card li .data-list dl dd{
    flex: 1;
    padding-left: 1.2rem;
    font-size: 1.5rem;
    font-weight: bold;
}
.card li .data-list dl dd .link{
    display: flex;
    justify-content: flex-start;
}
.card li .data-list dl dd .link a{
    display: flex;
    align-items: center;
}
.card li .data-list dl dd a .txt{
    transition: color 0.1s ease;
}
.card li .data-list dl dd a .ico{
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.4rem;
}
.card li .data-list dl dd a .ico svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--col-bg5);
    transition: fill 0.1s ease;
}
@media (min-width: 1025px){
    .card li .data-list dl dd a:hover .txt{
        color: var(--col-bg4);
    }
    .card li .data-list dl dd a:hover .ico svg{
        fill: var(--col-bg4);
    }
}
.card li .data-list .campus-map-trigger-wrap{
    display: flex;
    justify-content: flex-start;
}
.card li .data-list .campus-map-trigger{
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.card li .data-list .campus-map-trigger .txt{
    flex: 1;
    transition: color 0.1s ease;
}
.card li .data-list .campus-map-trigger .ico{
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.4rem;
}
.card li .data-list .campus-map-trigger .ico svg{
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--col-bg5);
    transition: fill 0.1s ease;
}
.card li .data-list .campus-map-trigger:hover .txt{
    color: var(--col-bg4);
}
.card li .data-list .campus-map-trigger:hover .ico svg{
    fill: var(--col-bg4);
}
.card li .txt-box{
    margin-top: var(--mg-s);
}
.card li .txt-box p{
    font-size: 1.6rem;
    line-height: 2;
    text-align: justify;
    letter-spacing: 0.025em;
}
.card li .txt-box p + p{
    margin-top: 1em;
}
.card li .time-table-data{
    margin-top: var(--mg-s);
}
.card li .time-table-data h3{
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.6rem;
}
.card li .time-table-data dl{
    display: flex;
    flex-wrap: wrap;
}
.card li .time-table-data dt,
.card li .time-table-data dd{
    font-size: 1.5rem;
    background: #f7f7f7;
    padding: 2rem 2.4rem;
    box-sizing: border-box;
}
.card li .time-table-data dt:nth-of-type(2n), 
.card li .time-table-data dd:nth-of-type(2n) {
    background: #ededed;
}
.card li .time-table-data dt{
    width: 10em;
    font-weight: bold;
}
.card li .time-table-data dd{
    width: calc(100% - 10em);
}
.card li .website-link {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    color: var(--col-bg5);
    border-radius: 100%;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.1s ease;
}
@media (min-width: 1025px){
    .card li .website-link:hover {
        background: #e5e5e5;
    }
}
.card li .website-link::after {
    content: "研究室Webサイト";
    display: none;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: var(--col-bg3);
    white-space: nowrap;
    position: absolute;
    top: 50%;
    right: 4rem;
    padding-right: 0.6rem;
    transform: translateY(-50%);
}
.card li .website-link svg {
    display: block;
    width: 45%;
    height: 45%;
    fill: var(--col-bg4);
}
@media (max-width: 767px){
    .card > li .inner {
        padding: var(--mg-s) var(--mg-xs);
    }
    .card li h2 {
        font-size: 2.4rem;
    }
    .card li .txt-box {
        margin-top: var(--mg-xs);
    }
    .card li .txt-box p {
        line-height: 1.75;
    }
    .card li .data{
        margin-top: 1.2rem;
    }
    .card li .data p{
        font-size: 1.5rem;
    }
    .card li .data-list {
        margin-top: var(--mg-xs);
    }
    .card li .data-list dl {
        min-width: 100%;
    }
    .card li .data-list dl dt {
        width: 2.8rem;
        height: 2.8rem;
    }
    .card li .data-list dl dd {
        font-size: 1.6rem;
    }
    .card li .flex {
        display: block;
    }
    .card li .flex .txt {
        padding-right: 0;
    }
    .card li .flex .img {
        width: 100%;
        margin-top: var(--mg-s);
        margin-left: auto;
        margin-right: auto;
    }
    .card li .time-table-data dl {
        display: block;
    }
    .card li .time-table-data dt {
        width: 100%;
        padding: 1.6rem 2rem 0 2rem;
    }
    .card li .time-table-data dd {
        width: 100%;
        padding-top: 0;
        padding: 0.8rem 2rem 1.6rem 2rem;
    }
}


/* -- page-event
-------------------------------------------------------------------------------- */
.page-event .page-ttl{
    display: flex;
    margin-bottom: 0.6rem;
}
.page-event .page-ttl .section-inner{
    width: 32.5vw;
    height: 32.5vw;
    max-width: 52rem;
    max-height: 52rem;
    box-sizing: border-box;
    padding: var(--mg-m);
    background: #fff;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.page-event .page-ttl .section-inner .figure-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.1) rotate(-20deg);
    transition: opacity 1s ease, transform 1s ease;
}
.page-event .page-ttl.show .section-inner .figure-wrap{
    opacity: 1;
    transform: scale(1);
}
.page-event .page-ttl .section-inner .figure{
    width: 28rem;
    height: 28rem;
    background: url(../img/img_figure_1.svg) no-repeat center;
    background-size: cover;
    position: absolute;
}
.page-event .page-ttl .section-inner .figure.figure-1{
    bottom: -19rem;
    right: 2rem;
    transform: rotate(180deg) scale(-1,1);
}
.page-event .page-ttl .section-inner .figure.figure-2{
    background-image: url(../img/img_figure_2.svg);
    top: -21rem;
    right: -5rem;
    transform: rotate(160deg);
}
.page-event .page-ttl .section-inner .figure.figure-3{
    width: 20rem;
    height: 20rem;
    background-image: url(../img/img_figure_3.svg);
    top: 10rem;
    left: -15rem;
    transform: rotate(10deg) scale(-1,-1);
}
.page-event .page-ttl .section-inner .separator{
    margin: 0;
}
.page-event .page-ttl .section-inner .separator::before {
}
.page-event .page-ttl .section-inner .character{
    height: 10rem;
    position: absolute;
    right: var(--mg-s);
    bottom: var(--mg-s);
    animation: anime-size 4s ease infinite;
}
@keyframes anime-size {
    0%, 20%, 30%, 40% {
        transform: scale(1) rotate(0);
    }
    25% {
        transform: scale(0.95) rotate(5deg);
    }
    35% {
        transform: scale(0.95) rotate(-5deg);
    }
}
.page-event .page-ttl .section-inner .character img{
    height: 100%;
}
.page-event .page-ttl figure{
    flex: 1;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    margin-left: 0.6rem;
    background: #fff;
}
.page-event .page-ttl figure img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1s ease, transform 1s ease;
}
.page-event .page-ttl.show figure img{
    opacity: 1;
    transform: scale(1);
}
.page-event .section-box.event .head,
.page-event .section-box.event .foot{
    background: transparent;
    padding-top: var(--mg-m);
    margin-bottom: 0.6rem;
}
.page-event .section-box.event .foot{
    margin-top: 0.6rem;
    margin-bottom: 0;
    position: relative;
}
.page-event .section-box.event .event-tab{
    background: rgba(114, 130, 136, 0.8);
    backdrop-filter: blur(5px);
}
.page-event .section-box.event .body .body-2{
    display: none;
}
.page-event .section-box.event .foot{
    height: calc(1.8rem * 1.5 + 0.8rem + 4rem);
    padding-top: var(--mg-m);
    margin-top: 0.6rem;
}
@media (max-width: 1024px){
    .page-event .page-ttl .section-inner {
        width: 35vw;
        height: 35vw;
    }
    .page-event .section-inner{
        padding-left: var(--mg-m);
        padding-right: var(--mg-m);
    }
}
@media (max-width: 767px){
    .page-event .section-inner {
        padding-left: var(--mg-xs);
        padding-right: var(--mg-xs);
    }
    .page-event .page-ttl {
        display: block;
        position: relative;
    }
    .page-event .page-ttl .section-inner {
        width: 100%;
        max-width: none;
        max-height: 48rem;
        height: calc((100vw - 3.2rem) * 0.95);
    }
    .page-event .page-ttl figure{
        width: 28vw;
        height: 28vw;
        max-width: 15rem;
        max-height: 15rem;
        margin-top: 0;
        margin-left: 0;
        border-radius: 100%;
        position: absolute;
        bottom: 4rem;
        left: 4rem;
    }
    .page-event .page-ttl figure img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .page-event .page-ttl .section-inner .separator{
        display: none;
    }
    .page-event .section-box.event .foot {
        height: calc(1.5rem * 1.5 + 0.8rem + 3.2rem);
    }
}


/* -- toggle-tab-fix
-------------------------------------------------------------------------------- */
.toggle-tab-fix{
    width: 100%;
    position: absolute;
    bottom: var(--mg-m);
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    opacity: 0;
    transition: 0.15s ease;
}
.loaded .toggle-tab-fix{
    opacity: 1;
}
.loaded .toggle-tab-fix.fix{
    position: fixed;
}
.loaded .toggle-tab-fix.fix.hide{
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 100%);
}


/* -- page-laboratory
-------------------------------------------------------------------------------- */
.page-laboratory .page-ttl .section-inner .figure.figure-1{
    top: -23rem;
    right: 3rem;
    bottom: auto;
    left: auto;
    transform: rotate(20deg);
}
.page-laboratory .page-ttl .section-inner .figure.figure-2{
    background-image: url(../img/img_figure_2.svg);
    bottom: -19rem;
    right: -6rem;
    top: auto;
    left: auto;
    transform: none;
}
.page-laboratory .page-ttl .section-inner .figure.figure-3{
    width: 20rem;
    height: 20rem;
    background-image: url(../img/img_figure_3.svg);
    bottom: 4rem;
    left: -15rem;
    top: auto;
    right: auto;
    transform: none;
}
.page-laboratory .page-ttl .section-inner .character{
    height: calc(10rem * 1.35);
    right: var(--mg-m);
    animation: anime-jump 4s ease infinite;
}
@keyframes anime-jump {
    0%, 20%, 30%, 40% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-1rem);
    }
    35% {
        transform: translateY(-1rem);
    }
}
.page-laboratory .page-ttl .section-inner .character img{
    transform: rotate(1deg);
}
.page-laboratory .page-ttl figure img{
    object-position: center center;
}
.page-laboratory .card > li {
    width: calc((100% / 4) - 0.45rem);
}
.sort .page-laboratory .card > li {
    transform: scale(0.96);
    transition: transform 0.4s ease;
}
@media (max-width: 1400px){
    .page-laboratory .card > li {
        width: calc((100% / 3) - 0.4rem);
    }
}
.page-laboratory .card > li .inner {
    padding: var(--mg-xs) var(--mg-xxs);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.sort .page-laboratory .card > li .inner {
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 0.4s ease, transform 0s ease 0.4s;
}
.page-laboratory .card li h2 {
    font-size: 2.1rem;
}
.page-laboratory .card li .data {
    margin-top: 1.2rem;
}
.page-laboratory .card li .data p {
    font-size: 1.3rem;
}
.page-laboratory .card li .data-list {
    display: block;
    margin-top: var(--mg-xxs);
}
.page-laboratory .card li .data-list dl {
    padding: 1rem 0;
}
.page-laboratory .card li .data-list dl dt {
    width: 2.2rem;
    height: 2.2rem;
}
.page-laboratory .card li .data-list dl dd{
    font-size: 1.4rem;
    padding-left: 1rem;
}
.page-laboratory .card li .txt-box {
    margin-top: var(--mg-xxs);
}
.page-laboratory .card li .txt-box p {
    font-size: 1.4rem;
    line-height: 1.75;
}
.page-laboratory .card li .category {
    margin-top: var(--mg-xs);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-left: -2rem;
    margin-bottom: -2.8rem;
}
.page-laboratory .card li .category p {
    background: #f0f0f0;
    padding: 0.6rem 1.4rem 0.6rem 0.6rem;
    border-radius: 2.4rem;
    display: flex;
    align-items: center;
    transition: background 0.1s ease;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.page-laboratory .card li .category p:hover {
    background: #e5e5e5;
}
.page-laboratory .card li .category p .ico {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 100%;
    background: url(../img/ico_cat_all.svg) no-repeat center;
    background-size: 50%;
    background-color: var(--col-bg4);
    margin-right: 0.8rem;
}
.page-laboratory .card li .category p.cat-1 .ico{
    background-color: #d02c25;
}
.page-laboratory .card li .category p.cat-2 .ico{
    background-color: #f8d933;
}
.page-laboratory .card li .category p.cat-3 .ico{
    background-color: #28a166;
}
.page-laboratory .card li .category p.cat-4 .ico{
    background-color: #0067b1;
}
.page-laboratory .card li .category p.cat-5 .ico{
    background-color: #9fcced;
}
.page-laboratory .card li .category p.cat-6 .ico{
    background-color: #e9b7cf;
}
.page-laboratory .card li .category p.cat-7 .ico{
    background-color: #75330e;
}
.page-laboratory .card li .category p.cat-8 .ico{
    background-color: #885799;
}
.page-laboratory .card li .category p.cat-9 .ico{
    background-color: #bdd03f;
}
.page-laboratory .card li .category p.cat-10 .ico{
    background-color: #efc596;
}
.page-laboratory .card li .category p.cat-11 .ico{
    background-color: #9fa0a0;
}
.page-laboratory .card li .category p .txt {
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    transform: translateY(-0.1rem);
}
@media (max-width: 1024px){
    .page-laboratory .card > li {
        width: calc((100% / 2) - 0.3rem);
    }
}
@media (max-width: 767px){
    .page-laboratory .page-ttl .section-inner .figure.figure-3 {
        bottom: 6rem;
    }
    .page-laboratory .card > li {
        width: 100%;
    }
    .page-laboratory .card > li .inner {
        padding: var(--mg-s) var(--mg-xs);
    }
    .page-laboratory .card li h2 {
        font-size: 2.4rem;
    }
    .page-laboratory .card li .data {
        margin-top: 1.2rem;
    }
    .page-laboratory .card li .data p {
        font-size: 1.5rem;
    }
    .page-laboratory .card li .data-list {
        margin-top: var(--mg-xs);
    }
    .page-laboratory .card li .txt-box {
        margin-top: var(--mg-xs);
    }
    .page-laboratory .card li .txt-box p {
        font-size: 1.6rem;
    }
    .page-laboratory .card li .data-list dl {
        padding: 1.2rem 0;
    }
    .page-laboratory .card li .data-list dl dt {
        width: 2.8rem;
        height: 2.8rem;
    }
    .page-laboratory .card li .data-list dl dd {
        font-size: 1.6rem;
        padding-left: 1.2rem;
    }
    .page-laboratory .card li .category {
        margin-top: var(--mg-s);
    }
    .page-laboratory .card li .category p .txt {
        font-size: 1.2rem;
    }
}


/* -- legend
-------------------------------------------------------------------------------- */
.page-laboratory .legend{
    margin-bottom: 0.6rem;
    margin-top: -0.6rem;
    padding-top: 0.6rem;
}
.page-laboratory .legend .legend-inner{
    background: #fff;
    border-radius: 2rem;
    padding: var(--mg-xxs) 0 var(--mg-xxs) var(--mg-xxs);
}
.page-laboratory .legend ul{
    display: flex;
    flex-wrap: wrap;
    margin: -0.6rem 0;
}
.page-laboratory .legend ul li{
    width: calc(100% / 6);
    padding: 0.6rem 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    transition: 0.2s ease;
}
@media (min-width: 1025px){
    .page-laboratory .legend ul li.disable{
        opacity: 0.5;
        filter: grayscale(1);
    }
    .page-laboratory .legend ul li.disable:not(.reset) .ico{
        background: var(--col-bg6)!important;
    }
}
.page-laboratory .legend ul li.reset{
    opacity: 0.5;
    filter: grayscale(1);
    cursor: default;
}
.page-laboratory .legend.selected ul li:not(.active, .reset){
    opacity: 0.5;
    filter: grayscale(1);
}
@media (min-width: 1025px){
    .page-laboratory .legend.selected ul li:hover:not(.active, .reset){
        opacity: 0.8;
        filter: grayscale(1);
    }
}
.page-laboratory .legend.selected ul li:not(.active, .reset) .ico{
    background: var(--col-bg6)!important;
}
.page-laboratory .legend.selected ul li.reset{
    opacity: 1;
    filter: grayscale(0);
    cursor: pointer;
}
.page-laboratory .legend ul li .ico{
    width: 3.6rem;
    height: 3.6rem;
    background: var(--col-bg4);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
}
.page-laboratory .legend ul li .ico::before{
    content: "";
    width: 50%;
    height: 50%;
    background: url(../img/ico_cat_all.svg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.page-laboratory .legend ul li:nth-child(2) .ico{
    background: #d02c25;
}
.page-laboratory .legend ul li:nth-child(3) .ico{
    background: #f8d933;
}
.page-laboratory .legend ul li:nth-child(4) .ico{
    background: #28a166;
}
.page-laboratory .legend ul li:nth-child(5) .ico{
    background: #0067b1;
}
.page-laboratory .legend ul li:nth-child(6) .ico{
    background: #9fcced;
}
.page-laboratory .legend ul li:nth-child(7) .ico{
    background: #e9b7cf;
}
.page-laboratory .legend ul li:nth-child(8) .ico{
    background: #75330e;
}
.page-laboratory .legend ul li:nth-child(9) .ico{
    background: #885799;
}
.page-laboratory .legend ul li:nth-child(10) .ico{
    background: #bdd03f;
}
.page-laboratory .legend ul li:nth-child(11) .ico{
    background: #efc596;
}
.page-laboratory .legend ul li:nth-child(12) .ico{
    background: #9fa0a0;
}
.page-laboratory .legend ul li .txt{
    flex: 1;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    font-weight: bold;
    line-height: 1.25;
    padding-left: 1.2rem;
    padding-right: 2rem;
}
@media (max-width: 767px){
    .page-laboratory .legend .legend-inner {
        padding: var(--mg-xs) 0 var(--mg-xs) var(--mg-xs);
    }
    .page-laboratory .legend ul li{
        width: calc(100% / 2);
    }
    .page-laboratory .legend ul li .ico {
        width: 3.6rem;
        height: 3.6rem;
    }
    .page-laboratory .legend ul li .txt {
        font-size: 1.4rem;
    }
}


/* -- legend-fix
-------------------------------------------------------------------------------- */
.page-laboratory .legend-fix{
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 8rem;
    left: 0;
    z-index: 10;
    margin: 0;
    padding: 0.6rem;
    perspective: 2000px;
    opacity: 0;
    visibility: hidden;
    transition: top 0.15s ease, opacity 0.15s ease 0.15s, visibility 0.15s ease 0.15s;
}
header.hide + .campus-map + main .legend-fix {
    top: 0;
}
.page-laboratory .legend-fix.active{
    opacity: 1;
    visibility: visible;
    transition: top 0.15s ease, opacity 0s ease, visibility 0s ease;
}
.page-laboratory .legend-fix .legend-inner{
    background: transparent;
    backdrop-filter: blur(10px);
    padding: 2rem 0 2rem 2rem;
    background: rgba(25, 44, 68, 0.8);
    border-radius: 2rem;
    position: relative;
    transform: rotateX(-90deg);
    transform-origin: top center;
    transition: transform 0.3s ease;
}
.page-laboratory .legend-fix.active .legend-inner{
    transform: rotateX(0);
}
.page-laboratory .legend-fix ul{
    margin: -0.4rem 0;
    position: relative;
}
.page-laboratory .legend-fix ul li {
    width: calc(100% / 6);
    padding: 0.4rem 0;
}
.page-laboratory .legend-fix ul li .ico {
    width: 2.8rem;
    height: 2.8rem;
}
.page-laboratory .legend-fix ul li .txt{
    font-size: 1.2rem;
    color: #fff;
    padding-left: 1rem;
    padding-right: 1.6rem;
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 767px){
    .page-laboratory .legend-fix .legend-inner{
        padding: 0;
    }
    .page-laboratory .legend-fix .legend-inner ul{
        padding: 1.2rem 1.2rem;
        flex-wrap: nowrap;
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .page-laboratory .legend-fix .legend-inner ul li {
        width: auto;
        padding: 0 0.5rem;
    }
    .page-laboratory .legend-fix .legend-inner ul::-webkit-scrollbar {
        display: none;
    }
    .page-laboratory .legend-fix ul li .ico {
        width: auto;
        height: auto;
        min-width: 4rem;
        min-height: 4rem;
    }
    .page-laboratory .legend-fix ul li .txt{
        padding-right: 1.2rem;
    }
}
@media (max-width: 480px){
    .page-laboratory .legend-fix ul li .txt {
        display: none;
    }
}


/* -- page-faq
-------------------------------------------------------------------------------- */
.page-faq .page-ttl .section-ttl{
    text-align: center;
}
.faq .section-inner{
    display: flex;
    align-items: flex-start;
}
.faq .nav{
    width: 32rem;
    position: sticky;
    top: calc(var(--mg-l) + 8rem);
    transition: top 0.15s ease;
}
header.hide + .campus-map + .page-faq .faq .nav {
    top: var(--mg-l);
}
.faq .nav li{
    font-size: 1.6rem;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    transition: color 0.15s ease;
    position: relative;
    color: var(--col-bg6);
}
.faq .nav li + li{
    margin-top: 2rem;
}
@media (min-width: 1025px){
    .faq .nav li:hover{
        color: var(--col-bg4);
    }
}
.faq .nav li.active{
    color: var(--col-bg3);
}
.faq .body{
    flex: 1;
    padding-bottom: var(--mg-xs);
    margin-top: calc(-1 * var(--mg-l));
}
.faq .nav-content{
    padding-top: var(--mg-l);
}
.faq .nav-content + .nav-content{
    margin-top: var(--mg-xs);
}
.faq .nav-content .cat-ttl{
    font-size: 2.6rem;
    letter-spacing: 0.1em;
    margin-bottom: var(--mg-xs);
}
.faq .nav-content ol li + li{
    margin-top: var(--mg-m);
}
.faq .article .txt-area .ttl {
    display: flex;
    align-items: center;
    margin-bottom: var(--mg-xxs);
}
.faq .article .txt-area .ttl .q {
    width: 6rem;
    height: 6rem;
    border-radius: 100%;
    background: var(--col-bg4);
    font-size: 1.4rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.faq .article .txt-area .ttl .ttl-txt {
    font-size: 1.8rem;
    padding-left: 2rem;
    flex: 1;
}
.faq .article .txt-area .flex:not(.not-flex){
    display: flex;
}
.faq .article .txt-area .flex:not(.not-flex) .txt-box {
    flex: 1;
}
.faq .article .txt-area .flex:not(.not-flex) .img {
    width: 30%;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 4.8rem;
}
.faq .article .txt-area .flex:not(.not-flex) .img .caption {
    margin-top: 1.6rem;
}
@media (max-width: 1024px){
    .faq .section-inner{
        padding-left: var(--mg-xs);
        padding-right: var(--mg-xs);
    }
    .faq .nav {
        width: 24rem;
    }
}
@media (max-width: 767px){
    .faq .section-inner {
        display: block;
    }
    .faq .nav{
        width: 100%;
        position: static;
    }
    .faq .nav ul{
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }
    .faq .nav ul li{
        font-size: 1.4rem;
        width: calc(50% - 1rem);
        border-bottom: solid 1px;
        color: var(--col-bg3);
        padding-bottom: 0.4rem;
    }
    .faq .nav li + li {
        margin-top: 0;
    }
    .faq .body{
        padding-top: var(--mg-l);
    }
    .faq .article .txt-area .flex:not(.not-flex){
        display: block;
    }
    .faq .article .txt-area .flex:not(.not-flex) .img {
        width: 60%;
        margin-left: auto;
        margin-top: var(--mg-l);
    }
}


/* -- article
-------------------------------------------------------------------------------- */
.article .txt-area .ttl{
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-top: solid 1px rgba(0, 0, 0, 0.15);
    padding-top: var(--mg-xxxs);
    margin-top: var(--mg-xl);
    margin-bottom: var(--mg-m);
}
.article .txt-area .sub-ttl{
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-top: var(--mg-m);
    margin-bottom: 2rem;
}
.article .txt-area .txt-box{
    margin-top: var(--mg-m);
}
.article .txt-area .sub-ttl + .txt-box{
    margin-top: 0;
}
.article .txt-area .txt-box p{
    font-size: 1.6rem;
    letter-spacing: 0.025em;
    line-height: 2;
    text-align: justify;
}
.article .txt-area .txt-box p + p {
    margin-top: 1.5em;
}
.article .txt-area .txt-box p.note{
    color: var(--col-bg5);
}
.article .txt-area dl{
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    letter-spacing: 0.025em;
    margin-top: var(--mg-m);
}
.article .txt-area dl + dl{
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: solid 1px rgba(0,0,0,0.15);
}
.article .txt-area dt{
    width: 12em;
    font-weight: bold;
    box-sizing: border-box;
    padding-right: 2em;
}
.article .txt-area dd{
    flex: 1;
}
.article .txt-area .txt-box a,
.article .txt-area dl a,
.link-cursor{
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    .article .txt-area .txt-box a:hover,
    .article .txt-area dl a:hover,
    .link-cursor:hover{
        color: var(--col-bg4);
    }
}
.article .txt-area .note-list{
    margin-top: var(--mg-xs);
}
.article .txt-area .note-list li{
    font-size: 1.4rem;
    letter-spacing: 0.025em;
    color: var(--col-bg5);
    text-indent: -1em;
    padding-left: 1em;
}
.article .txt-area .links{
    margin-top: var(--mg-m);
}
.article .txt-area .links li + li{
    margin-top: 0.8rem;
}
.article .txt-area .links li a{
    display: block;
    font-size: 1.6rem;
    color: var(--col-bg5);
    background: #f5f5f5;
    padding: 2rem 2.8rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}
@media (min-width: 1025px){
    .article .txt-area .links li a:hover{
        color: var(--col-bg4);
    }
}
.article .txt-area .links li a .txt{
    transform: translateY(-1px);
    padding-right: 2rem;
    flex: 1;
}
.article .txt-area .links li a .link-ico{
    margin-top: -0.4rem;
    margin-bottom: -0.4rem;
}
.article .txt-area .img{
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--mg-l);
    margin-bottom: var(--mg-l);
}
.article .txt-area .img figure{
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
}
.article .txt-area .img figure img{
    width: 100%;
}
.article .txt-area .img .caption{
    font-size: 1.3rem;
    letter-spacing: 0.025em;
    color: var(--col-bg5);
    margin-top: 2rem;
}
.article .txt-area .iframe{
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--mg-l);
    margin-bottom: var(--mg-l);
}
.article .txt-area .iframe .iframe-inner{
    width: 100%;
    padding-top: 56.25%;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
}
.article .txt-area .iframe iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.article .txt-area .iframe.show iframe{
    opacity: 1;
    transition: opacity 1s ease;
}
.article .txt-area .ttl:first-child,
.article .txt-area .sub-ttl:first-child,
.article .txt-area .txt-box:first-child,
.article .txt-area dl:first-child,
.article .txt-area .note-list:first-child{
    margin-top: 0;
}
.article .txt-area .iframe:last-child{
    margin-bottom: var(--mg-xs);
}
@media (max-width: 767px){
    .article .txt-area .ttl {
        font-size: 2.1rem;
    }
    .article .txt-area .txt-box p {
        font-size: 1.7rem;
    }
    .article .txt-area dt {
        width: 8em;
    }
    .article .txt-area .links li a{
        padding: 2rem 2.4rem;
    }
}


/* -- footer
-------------------------------------------------------------------------------- */
footer{
    padding: 0 1.6rem;
    position: relative;
    opacity: 0;
}
.loaded footer{
    opacity: 1;
    transition: opacity 0.3s ease;
}
footer .ttl{
    font-size: 1.4rem;
    margin-bottom: var(--mg-m);
}
footer .ttl.center{
    text-align: center;
}
footer .ttl span{
    display: block;
}
footer .ttl .en{
    font-size: 2.8rem;
}
footer .ttl .jp{
    letter-spacing: 0.1em;
    margin-top: 0.4rem;
}
footer .sub-ttl{
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    margin-top: var(--mg-s);
    margin-bottom: var(--mg-xxs);
}
footer .caution{
    background: var(--col-bg3);
    color: #fff;
    border-radius: 2rem;
    padding: var(--mg-l) var(--mg-l);
}
footer .caution-list{
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
footer .caution-list li{
    width: calc(50% - 0.3rem);
    box-sizing: border-box;
}
footer .caution-list .list-body{
    height: 100%;
    box-sizing: border-box;
    background: #404d60;
    border-radius: 2rem;
    padding: 4rem;
    display: flex;
    align-items: center;
}
footer .caution-list .list-body figure{
    width: 8rem;
}
footer .caution-list .list-body figure img{
    width: 100%;
}
footer .caution-list .list-body p{
    flex: 1;
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    line-height: 1.75;
    text-align: justify;
    padding-left: 4rem;
}
footer .access-map{
    background: #fff;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    display: flex;
    margin-top: 0.6rem;
}
footer .access-map .txt-area{
    flex: 1;
    padding: var(--mg-l);
}
footer .access-map .txt-area .ttl{
    margin-bottom: 0;
}
footer .access-map .txt-area .address p{
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    line-height: 1.75;
}
footer .access-map .txt-area dl{
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    letter-spacing: 0.025em;
}
footer .access-map .txt-area dl + dl{
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: solid 1px rgba(0,0,0,0.15);
}
footer .access-map .txt-area dt{
    width: 12em;
    font-weight: bold;
}
footer .access-map .txt-area dd{
    flex: 1;
}
footer .access-map .txt-area .note-list{
    margin-top: var(--mg-xs);
}
footer .access-map .txt-area .note-list li{
    font-size: 1.3rem;
    letter-spacing: 0.025em;
    color: var(--col-bg5);
    text-indent: -1em;
    padding-left: 1em;
}
footer .access-map .map-area{
    width: 50%;
}
footer .access-map .map-area iframe{
    width: 100%;
    height: 100%;
}
footer .foot{
    padding: var(--mg-l) var(--mg-l) var(--mg-m);
}
footer .foot .nav{
    display: flex;
    justify-content: center;
}
footer .foot .nav li{
    padding: 2rem 0;
}
footer .foot .nav li + li{
    margin-left: 6rem;
    padding-left: 6rem;
    border-left: solid 1px rgba(0,0,0,0.15); 
}
footer .foot .nav li a{
    display: block;
}
footer .foot .nav figure img{
    height: 6rem;
}
footer .foot .nav .txt{
    margin-top: 2rem;
}
footer .foot .nav .txt p{
    font-size: 1.4rem;
    letter-spacing: 0.025em;
}
footer .foot .nav .txt p.name{
    font-weight: bold;
    letter-spacing: 0.05em;
}
footer .foot .nav .txt p.name + p{
    margin-top: 0.4rem;
}
footer .foot .share{
    text-align: center;
    margin-top: var(--mg-s);
}
footer .foot .share p{
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: var(--col-bg3);
    margin-bottom: 1.2rem;
    display: flex;
    justify-content: center;
}
footer .foot .share p span{
    position: relative;
    padding: 0 1.2rem 0 1.4rem;
}
footer .foot .share p span::before{
    content: "";
    display: block;
    height: 120%;
    border-left: solid 1px;
    transform: rotate(-20deg);
    position: absolute;
    top: 0;
    left: 0;
}
footer .foot .share p span::after {
    content: "";
    display: block;
    height: 120%;
    border-right: solid 1px;
    transform: rotate(20deg);
    position: absolute;
    top: 0;
    right: 0;
}
footer .foot .copyright{
    font-size: 1.2rem;
    text-align: center;
    color: var(--col-bg5);
    margin-top: var(--mg-xxs);
}
@media (min-width: 1025px){
}
@media (max-width: 1024px){
    footer .caution{
        padding-left: var(--mg-xs);
        padding-right: var(--mg-xs);
    }
    footer .access-map .txt-area {
        padding-left: var(--mg-xs);
        padding-right: var(--mg-xs);
    }
}
@media (max-width: 767px){
    footer .foot {
        padding: var(--mg-s) 1.6rem var(--mg-m);
    }
    footer .caution-list{
    }
    footer .caution-list li {
        width: 100%;
    }
    footer .caution-list .list-body{
        padding: 2.4rem;
    }
    footer .caution-list .list-body p {
        padding-left: 3.2rem;
    }
    footer .access-map{
        display: block;
    }
    footer .access-map .txt-area .address p {
        font-size: 1.6rem;
    }
    footer .access-map .txt-area dl {
        font-size: 1.5rem;
    }
    footer .access-map .map-area {
        width: 100%;
        height: 48rem;
    }
    footer .foot .nav{
        display: block;
    }
    footer .foot .nav li{
        padding: 0;
    }
    footer .foot .nav li + li {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: var(--mg-xs);
        padding-top: var(--mg-xs);
        border-top: solid 1px rgba(0, 0, 0, 0.15);
    }
    footer .foot .nav li a {
        display: inline-block;
    }
    footer .foot .share {
        margin-top: var(--mg-l);
    }
    footer .foot .copyright {
        font-size: 1.3rem;
    }
}


/* -- sns-list
-------------------------------------------------------------------------------- */
.sns-list{
    display: flex;
    justify-content: center;
}
.sns-list li{
    width: 4.8rem;
}
.sns-list li + li{
    margin-left: 0.8rem;
}
.sns-list li a{
    display: block;
    font-size: 1.6rem;
    line-height: 1.25;
    background: #fff;
    height: 4.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    transition: background 0.15s ease;
}
@media (min-width: 1025px){
    .sns-list li a:hover{
        background: var(--col-bg2);
    }
}
.sns-list a img {
    width: 2rem;
    height: 2rem;
}
.sns-list .share-x img {
    width: 1.8rem;
    height: 1.8rem;
}
.sns-list .share-fb img {
    width: 2.2rem;
    height: 2.2rem;
}
.sns-list .share-ln img {
    width: 2.4rem;
    height: 2.4rem;
}


/* -- home-teaser
-------------------------------------------------------------------------------- */
.home-teaser{
    margin-top: 0.6rem;
}
.home-teaser .section-inner {
    background: #fff;
    border-radius: 2rem;
    padding-top: var(--mg-xl);
    padding-bottom: var(--mg-xxl);
}
.home-teaser .body {
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
}
.home-teaser .ttl-area .ttl {
    font-size: 3.2rem;
    letter-spacing: 0.05em;
}
@media (max-width: 767px){
    .home-teaser .section-inner {
        padding: var(--mg-l) var(--mg-xs);
    }
    .home-teaser .ttl-area .ttl {
        font-size: 2.6rem;
    }
}