* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

main {
    flex: 1;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
}

/* CSS Pattern & Noise Background */
.pattern-bg-2 {
    background-color: #f8fafc;
    background-image: linear-gradient(rgba(162, 57, 108, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(162, 57, 108, 0.03) 1px, transparent 1px);
    background-size:
        32px 32px,
        32px 32px;
    background-position:
        -1px -1px,
        -1px -1px;
}

/* header 可変設定*/
/* ナビリンク */
.navbar .nav-link {
    font-size: clamp(14px, 1.2vw, 18px);
    color: black;
}
a.nav-link:hover {
    color: #004aad;
    transition: all 0.3s;
}

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

.noto-sans-jp-700 {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(20px, 1.8vw, 40px);
    letter-spacing: 0.08em;
}

.noto-sans-jp-600 {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(20px, 1.5vw, 32px);
    letter-spacing: 0.07em;
    line-height: 1.8em;
}

/* ロゴ */
.navbar .logo {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: bold;
}

.navbar {
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.navbar {
    padding: clamp(8px, 1.5vw, 20px) clamp(12px, 3vw, 40px);
    letter-spacing: 0.04em;
}

.navbar-nav {
    gap: clamp(10px, 2vw, 30px);
}

/* ハンバーガーメニューの枠線なし*/
*:focus {
    box-shadow: none !important;
}

/* header 可変 ここまで*/

.text-4 {
    transform-origin: top left;
}

.news-text {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
    line-height: 1.7em;
}

.news-contents {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    line-height: 2.2em;
}

.date {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    color: slategrey;
    letter-spacing: 0.1em;
}

.wave {
    transform: translateY(5px); /* ブラウザによる隙間削除*/
}

.wave-flip {
    transform: translateY(-4px) scale(1, -1);
}

.wave-flip-down {
    transform: translateY(30px) scale(1, -1);
}

.wave-white {
    transform: translateY(20px);
}

a.news-title {
    color: black;
}

.lab-introduction {
    letter-spacing: 0.11em;
    line-height: 2.6em;
}

.lab-introduction-title {
    letter-spacing: 0.15em;
}

.publication {
    letter-spacing: 0.07em;
    line-height: 1.8em;
    font-weight: 400;
    font-style: normal;
}

dd {
    margin: 0;
    padding-left: 0.8em;
}

dt {
    padding-bottom: 0.3em;
}

.project {
    letter-spacing: 0.08em;
    line-height: 2em;
    font-weight: 400;
    font-style: normal;
}

.text-content {
    letter-spacing: 0.07em;
    line-height: 2em;
    font-weight: 400;
    font-style: normal;
}

.link-white {
    color: white;
    text-decoration: underline;
}

.link-darkblue {
    color: #37379c;
    text-decoration: underline;
}

.link-blue {
    color: #31b3ca;
}

.icon {
    background-color: #ff4b4b;
    color: white;
}

.icon:hover {
    background-color: #004aad;
    color: #fff;
    transition: all 0.3s;
}

a.icon {
    color: white;
}

a.link-white-none {
    color: white;
    text-decoration: none;
}

a.link-darkblue:hover,
.icon-line:hover,
a.hover-link-darkblue:hover,
a.link-white:hover,
a.news-title:hover,
a.link-blue:hover,
a.orange:hover,
a.link-white-none:hover {
    color: #004aad;
    transition: all 0.3s;
}

a.dark-blue:hover {
    color: white;
    transition: all 0.3s;
}

a.link-white-none:hover {
    color: #31b3ca;
    transition: all 0.3s;
}

a.recent-topic:hover .bi.arrow:hover {
    color: #004aad;
}

ul.custom-list-3 {
    list-style: none;
}

ul.bullet {
    list-style-type: square;
}

ul.custom-list {
    list-style: none;
    padding-left: 0;
}

ul.custom-list li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.4em;
}

ul.custom-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 8px;
    height: 8px;
    background-color: #31b3ca;
    border-radius: 50%;
}

/* 上位階層（.star直下のli） */
ul.custom-list-2 > li {
    /* 上位用デザイン */
    list-style-type: "● ";
    margin-bottom: 10px;
    margin-left: 1.5em;
    color: darkblue;
}

/* 下位階層（ネストされたulのli） */
ul.custom-list-2 ul > li {
    /* 下位用デザイン */
    list-style-type: none;
    margin-left: 1em;
}

.bg-color-beige {
    background-color: #f9f7ec;
}

.bg-color-blue {
    background-color: #31b3ca;
    position: relative;
}

.bg-color-lightblue {
    background-color: #a1d9daa6;
}

.bg-color-lightgrey {
    background-color: #e2e3e5;
}

.bg-color-darkblue {
    background-color: #37379c;
}

.bg-color-orange {
    background-color: #ff4b4b;
}

.box-border {
    border: solid;
    border-color: white;
    border-spacing: 1px 2em;
}

.border-left {
    border-left: solid thick;
    border-color: #ff4b4b;
}

.border-left-blue {
    border-left: solid thick;
    border-color: #31b3ca;
}

.border-side {
    border-inline: solid thick;
    writing-mode: horizontal-tb;
    border-color: #ff4b4b;
}

.border-side-blue {
    border-inline: solid thick;
    writing-mode: horizontal-tb;
    border-color: #37379c;
}

.border-side-white {
    border-inline: solid thick;
    writing-mode: horizontal-tb;
    border-color: white;
}

.dot-divider {
    border-bottom: 0.2rem dotted #37379c;
}

.item-pill {
    color: white;
    background-color: #31b3ca;
    border-radius: 3px;
}

.text-box {
    max-width: 1000px;
}

.marker {
    background: linear-gradient(transparent 70%, #fe8686 70%);
}

.kiwi-maru-regular {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
}

.orange {
    color: #ff4b4b;
}

.blue {
    color: #31b3ca;
}

.dark-blue {
    color: #37379c;
}

.kiwi-maru-bold {
    font-family: "Kiwi Maru", serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.2em;
    color: lightyellow;
}

/*トピックス画像のCSS*/

.topics img {
    width: min(100%, 500px);
    filter: opacity(1);
    overflow: hidden;
}

.topics-shadow {
    box-shadow: 10px 10px #94a8a8;
}

.topics a:hover {
    opacity: 0.8;
    transition: 0.3s;
}

/* projectの余白設定　*/
@media (min-width: 768px) {
    .ps-md-30 {
        padding-left: 30%;
    }
}

/* Member*/
.link {
    text-decoration: underline;
}

a.link:hover {
    color: #004aad;
    transition: all 0.3s;
}

/* Spwiperの設定　*/
.swiper {
    width: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

.swiper-slide img {
    width: 100%;
    height: auto;
}

.circle-3 {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #37379c; /*背景色*/
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* トップに戻る　*/
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #004aad;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none; /* 初期状態で非表示 */
    z-index: 999;
}

#back-to-top:hover {
    background-color: #0056b3;
}

/* 改行位置の設定　*/
.line {
    display: inline-block;
}

.centre-line {
    width: 10px;
    background: #31b3ca;

    /* 最初は非表示状態 */
    height: 0;
    opacity: 0;

    transition:
        height 0.5s ease,
        opacity 0.3s ease;
    animation-delay: 1.5s;
}

/* 表示時 */
.centre-line.show {
    height: 100%;
    opacity: 1;
}

hr.custom-hr {
    border: 0 !important; /* デフォルト線を消す */
    height: 10px; /* 線の太さ */
    background-color: #31b3ca !important; /* 線の色 */
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left;
    animation: hr-grow 0.8s ease forwards;
    animation-delay: 0.5s;
}
@keyframes hr-grow {
    to {
        transform: scaleX(1);
    }
}

/* recent topicサークルの位置　*/
.right-5 {
    right: 5%;
}

@media (min-width: 992px) {
    .right-lg-10 {
        right: 10%;
    }
}

/* タイトル表示 */
.fade-in-left-title {
    opacity: 0;
    transform: translateX(-20px); /* 左にオフセット */
    animation: fadeInLeft 1s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.display {
    opacity: 0;
    animation: showText 1s linear forwards;
}

@keyframes showText {
    to {
        opacity: 1;
    }
}

.display-first {
    animation-delay: 1.5s;
}

.display-second {
    animation-delay: 0.8s;
}

.rotated {
    display: inline-block;
    animation:
        showText 0.5s linear forwards,
        rotateOnce 1s linear 1.5s forwards;
    animation-delay: 2.5s;
}

@keyframes rotateOnce {
    to {
        transform: rotate(15deg);
    }
}

.fade-in {
    opacity: 0;
    transition: all 1s ease;
}

/* 左から */
.fade-in-left {
    transform: translateX(-50px);
}

/* 右から */
.fade-in-right {
    transform: translateX(50px);
}

/* 下から */
.fade-in-up {
    transform: translateY(50px);
}

/* 表示状態 */
.fade-in.show {
    opacity: 1;
    transform: translate(0, 0);
}

.fade-up-delay {
    transition-delay: 3s;
}

.fade-up-delay2 {
    transition-delay: 1.4s;
}

.fade-up-delay3 {
    transition-delay: 1.8s;
}