/* ==========================================================================
   FONT IMPORTS (これらは@ルールのトップに置く必要があります)
   ========================================================================== */

/* English font - Saira Condensed */
@import url(https://db.onlinewebfonts.com/c/2bde541412c22560cc00e877296db4ac?family=Saira+Condensed);

/* Japanese font - Tazugane Gothic HondaMKTA Med */
@import url(https://db.onlinewebfonts.com/c/7c7b079cf59c70d55d0b33eae89f1f38?family=Tazugane+Gothic+HondaMKTA+Med);


/* ==========================================================================
   CSS CUSTOM PROPERTIES & BASE STYLES (Scoped to #thu-f-content)
   ========================================================================== */

#thu-f-content {
    /* Color palette */
    --white: #ffffff;
    --black: #000000;
    --blue: #1B2D73;
    --light-steel-blue: #D3DDF0;
    --grey: #F2F4FC;
    --turquoise: #4cdbac;
    --aqua: #57f9c4;
    --vidvid-azure: #18cde5;
    --vidvid-red: #f62723;
    --peach: #ffbd59;
    --sky-blue: #97c5e6;
    --blue-gradient: linear-gradient(90deg, #2d4a95, #0b9dd5);

    /* Typography */
    --font-japanese: 'Tazugane Gothic HondaMKTA Med', sans-serif;
    --font-english: 'Saira Condensed', sans-serif;

    /* Base Body Styles applied to Wrapper */
    font-family: var(--font-japanese);
    color: var(--blue);
    line-height: 1.6;
    width: 100%;
    position: relative;
    box-sizing: border-box; /* 安全のため追加 */
}

/* 全称セレクタでのボックスサイズ統一（崩れ防止） */
#thu-f-content *,
#thu-f-content *::before,
#thu-f-content *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Background color utilities */
#thu-f-content .bg-light-steel-blue {
    background-color: var(--light-steel-blue);
}

#thu-f-content .bg-grey {
    background-color: var(--grey);
}

#thu-f-content .bg-sky-blue {
    background-color: var(--sky-blue);
}

/* Layout utilities */
#thu-f-content .container {
    width: 85vw;
    margin: 0 auto;
}

/* Button component */
#thu-f-content .btn {
    background: linear-gradient(to right, #5be9b9, #5ee7c6) !important;
    border-radius: 50px;
    color: var(--white) !important;
    /* max-width: 130px; */
    height: 48px;
    font-size: 17px !important;
    position: relative;
    white-space: nowrap;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif;
    font-weight: bold;
    display: block;
    /* margin-left: auto; */
    /* margin-right: auto; */
    text-align: center;
    padding: 11px 15px;
}

#thu-f-content .btn:hover {
  text-decoration: underline;
}

#thu-f-content .text-turquoise {
    color: var(--turquoise);
}

/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* Title animation for scroll-triggered reveals */
#thu-f-content .ani-title {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.5s ease-in-out;
}

#thu-f-content .ani-title.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animation delay utility */
#thu-f-content .delay-2 {
    transition-delay: 0.2s;
}

/* Keyframe animations (Global scope is required for keyframes) */
@keyframes marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#thu-f-content .bounce-on-view span {
  display: inline-block;
  transform: translateY(0);
  animation-fill-mode: forwards;
}

@keyframes bounceOnViewAnim {
  0% {
    transform: translateY(-50px);
  }
  60% {
    transform: translateY(10px);
  }
  80% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}



/* ==========================================================================
   HEADER SECTION
   ========================================================================== */

#thu-f-content header img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive header images */
#thu-f-content .header-mobile-img {
    display: none;
}

@media (max-width: 768px) {
    #thu-f-content .header-pc-img {
        display: none;
    }

    #thu-f-content .header-mobile-img {
        display: block;
    }
}


/* ==========================================================================
   HERO SECTION
   ========================================================================== */

#thu-f-content .hero .hero-img{
    width: 100%;
    aspect-ratio: 4/1.9;
    object-fit: cover;
}


/* ==========================================================================
   RECENT EVENT SECTION
   ========================================================================== */
#thu-f-content .recent-event{
    padding: 2vw 0 4vw 0;
}

#thu-f-content .recent-event-header{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 2vw;
}



#thu-f-content .recent-event-title{
    font-size: clamp(43px,4vw,56px);
    font-weight: bold;
}

#thu-f-content .recent-event-slider{
    width: 100%;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    gap: 38px;

    overflow-x: scroll;
    overflow-y: hidden;

    padding: 25px 0;

}

#thu-f-content .recent-event-slider::-webkit-scrollbar{
  width: 10px;
}

#thu-f-content .recent-event-slider::-webkit-scrollbar-track{
    background-color: var(--blue);

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 20vw solid transparent;
    border-right: 20vw solid transparent;
    background-clip: padding-box;
}

#thu-f-content .recent-event-slider::-webkit-scrollbar-thumb {
    background-color: var(--blue);

    border-left: 20vw solid transparent;
    border-right: 20vw solid transparent;
    background-clip: padding-box;
}


#thu-f-content .recent-event-slide{
    position: relative;
}



#thu-f-content .card{
    width: clamp(180px, 30vw, 250px);
    aspect-ratio: 1/1.1;
    border: 2px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        var(--blue-gradient) border-box;
    padding:20px 15px;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: relative;
    z-index: 100;
}

#thu-f-content .card-style-box{
    width: clamp(180px, 30vw, 250px);;
    aspect-ratio: 1/1.1;
    background-color:#ccc;
    border-bottom: 2px solid #0b9dd5;
    border-right: 2px solid #0b9dd5 ;
    border-radius: 20px;

    position: absolute;
    left: 5px;
    top: 5px;

    z-index: 1;
}

#thu-f-content .card .date{
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

#thu-f-content .card .slack{
    width: 3px;
    height: clamp(40px,5vw,60px);
    background-color: var(--blue);
    transform: rotate(20deg);
    transform-origin: center;
    margin: 0 5px;
}

#thu-f-content .card .month{
    font-size: clamp(27px,7vw,43px);
    line-height: 0.8;
    font-weight: 900;
    text-shadow: 3px 3px 0px #ccc;
}

#thu-f-content .card .day{
    font-size: clamp(50px,6vw,80px);
    font-weight: 900;
    line-height: .8;
    text-shadow: 4px 4px 0px #ccc;
}

#thu-f-content .card .day-name{
    font-size: clamp(14px,2vw,22px);
    font-weight: bold;
    line-height: .8;
}

#thu-f-content .card .card-divider{
    width: 98%;
    height: 6px;
    border: 3px solid transparent;
    border-left: none;
    border-right: none;
    background:
        linear-gradient(white, white) padding-box,
        var(--blue-gradient) border-box;
    margin-bottom: 10px;
}
#thu-f-content .card .time{
    font-size: clamp(14px,2vw,22px);
    font-weight: bold;
    margin-bottom: 10px;
}

#thu-f-content .card .card-footer{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;

    position: relative;
}

#thu-f-content .card .btn{
    font-size: 18px;
    border-radius: clamp(px,1.5vw,15px);
    padding:(0px,0px,0px);
}

@media (max-width: 768px) {
#thu-f-content .card .btn{
    font-size: 13px !important;
    border-radius: clamp(px,1.5vw,15px);
    padding: 13px 11px!important;
}
}

#thu-f-content .card-footer .dropdown{
    list-style: none;
    border: 2px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        var(--blue-gradient) border-box;
    
    /* padding: 10px 20px; */
    /* border-radius: 1vw; */

    position: absolute;
    top: 90%;
    z-index: 1000;

    opacity: 0;
    transition: hight 2s ease-in-out ;
}

#thu-f-content .card-footer .dropdown.active{
    opacity: 1;
}

#thu-f-content .card-footer .dropdown-item{
    padding: 1px 10px;
}

#thu-f-content .card-footer .dropdown-item:hover{
    background-color: #f4f4f4;
}

@media (max-width: 768px) {

    #thu-f-content .recent-event-slider{
        /* padding-bottom: 10vw; */
        margin-bottom: 3vw;
    }

    #thu-f-content .recent-event-slider::-webkit-scrollbar{
        height: 8px;
    }

    #thu-f-content .recent-event-slider::-webkit-scrollbar-track{
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
    }

    #thu-f-content .recent-event-slider::-webkit-scrollbar-thumb {
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
    }
}


/* ==========================================================================
    SCHEDULE SECTION
   ========================================================================== */

#thu-f-content .schedule{
    width: 100%;
    /* height: 100vh; */
    background: var(--blue-gradient);
    overflow: hidden;
    position: relative;
border-radius: 50% / 500px 500px 0 0;
}

#thu-f-content .schedule-top-bg{
    width: 100%;

    position: absolute;
    top: -10vw;
    left: 0;

    z-index: 100;
}

#thu-f-content .schedule-top-bg-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.4;
}

#thu-f-content .schedule-bg{
    width: 100%;
    height: 100%;
    
    background-color: transparent;
    background-image: 
        /* white grid lines */
        /* repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent clamp(40px, 4vw, 60px)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent clamp(40px, 4vw, 60px)); */
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 50px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 50px);
    background-position: top left;
    background-size: 50px 50px;
    padding: clamp(200px, 20vw, 300px) 0 0 0;
    border-radius: 50% / 100px 100px 0 0;
}


#thu-f-content .schedule-header{
    width: 80vw;
    margin: 0 auto;
}

#thu-f-content .schedule-title{
    color: var(--white);
    font-size: clamp(55px, 7.4vw ,113px);
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
}

#thu-f-content .schedule-subtitle{
    color: var(--white);
    font-size: clamp(16px, 2.8vw, 33px);
    font-weight: bold;
    text-decoration: dashed underline var(--white) 2px;
    text-underline-offset: 1.5vw;
}

#thu-f-content .schedule-campus-btn{
    width: 80%;
    height: 100%;
    background-color: var(--white);
    border-radius: clamp(10px, 1.5vw, 20px);
    display: block;
    padding: clamp(3px,.7vw,8px) clamp(10px, 3vw, 40px);
    margin: 2vw auto;
}

#thu-f-content .schedule-campus-name{
    color: var(--blue);
    font-size: clamp(27px, 2.5vw, 31px);
    font-weight: bold;
    border-left: clamp(4px,.7vw,10px) solid var(--blue);
    padding-left: 2vw;
}

#thu-f-content .schedule-date-container{
    width: 100%;
    display: flex;
    gap: 3vw;
    padding: 3vw 0;
}

#thu-f-content .schedule-campus-img-box{
    width: 40vw;
    display: flex;
    justify-content: end;

    position: relative;
}

#thu-f-content .schedule-campus-img-box::before{
    content: "";
    position: absolute;
    top: 4px;
    right: -4px;
    width: 75%;
    /* aspect-ratio: 4/2.5; */
    height: 80%;

    background-color: #ccc;
    border-radius: clamp(10px, 1.5vw, 20px);

    /* opacity: 0.2; */
}

#thu-f-content .schedule-campus-img{
    width: 75%;
    /* min-height: 250px; */
    /* aspect-ratio: 4/2.5; */
    height: 80%;
    object-fit: cover;
    border-radius: clamp(10px, 1.5vw, 20px);

    position: absolute;
    z-index: 100;
}

#thu-f-content .schedule-slider{
    width: 60vw;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    gap: 20px;

    overflow-x: scroll;

    padding:0 0 50px 0;

    position: relative;
    z-index: 50;

}

#thu-f-content .schedule-slider::-webkit-scrollbar{
  width: 10px;
}

#thu-f-content .schedule-slider::-webkit-scrollbar-track{
    background-color: var(--white);

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
    background-clip: padding-box;
}

#thu-f-content .schedule-slider::-webkit-scrollbar-thumb {
    background-color: var(--white);

    border-left: 5vw solid transparent;
    border-right: 5vw solid transparent;
    background-clip: padding-box;
}

#thu-f-content .schedule-slide{
    position: relative;
}

#thu-f-content .schedule-card .btn{
    /* width: 100%;
    display: block;
    text-align: center;
    padding: 1vw 4vw;
    border-radius: 20px; */
}

#thu-f-content .schedule-tabs{
    width: 80vw;
    margin: 0 auto;
}


#thu-f-content .tab-list{
    width: 100%;
    display: flex;
    gap: 2vw;
}

#thu-f-content .tab-btn{
    background-color: var(--white);
    font-size: clamp(14px,2vw,23px);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    gap: 3vw;
    padding: 0 0 0 1vw;
    overflow: hidden;
}

#thu-f-content .tab-btn svg{
    width: 40px;
    height: 40px;
    
    fill: white;
    background: var(--blue-gradient);
    cursor: pointer;
    transition: transform 0.3s ease;
}


#thu-f-content .tab-btn.active svg{
    transform: rotate(90deg);
}

#thu-f-content .schedule-tab-content{
    width: 100%;
    background-color: var(--white);
    padding: 1vw 2vw;
}

#thu-f-content .major-left-content,
#thu-f-content .major-right-content{
    width: 50%;
    margin-bottom: 2vw;
}

#thu-f-content .tab-content{
    width: 100%;
    justify-content: space-between;
    gap: 2vw;
}

#thu-f-content .schedule-tab-content .tab-content{
    display: none;
}

#thu-f-content .schedule-tab-content .tab-content.active{
    display: flex;
}

#thu-f-content .content-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 2vw;

    position: relative;
}

#thu-f-content .major-content-box{
    margin-bottom: 2vw;
}

#thu-f-content .content-box .content-box-label{
    font-size: clamp(15px,2vw,18px);
    font-weight: bold;
    color: var(--blue);
    writing-mode: vertical-rl; 
    text-orientation: upright;
}


#thu-f-content .content-box-container{
    display: flex;
    justify-content: space-between;
    gap: 2vw;
}

#thu-f-content .content-box-header{
    width: 35%;

    position: relative;
}

#thu-f-content .content-box-img{
    width: 100%;
    aspect-ratio: 4/2.5;
    object-fit: cover;
    transform: scaleX(-1);

    position: relative;
    z-index: 10;
}

#thu-f-content .content-img-style-box{
    width: 100%;
    aspect-ratio: 4/2.5;
    background: var(--blue-gradient);

    position: absolute;
    top: 1vw;
    left: 1vw;

    /* z-index: -1; */
}

#thu-f-content .content-box-body{
    width: 65%;
display: flex;
    flex-direction: column;
}

#thu-f-content .content-box-title{
    font-size: clamp(10px, 1.2vw, 16px);
    font-weight: bold;
}

#thu-f-content .content-box-title .large-letter{
    font-size: clamp(16px, 2vw, 22px);
}

#thu-f-content .content-box-text{
    color: var(--black);
    font-size: 13px;
    margin-bottom: 3.3vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif !important;
flex-grow: 1;
}

#thu-f-content .content-box-btn-container{
    display: flex;
    justify-content: start;
}

#thu-f-content .major-right-content .content-box-btn-container{
    justify-content: end;
}

#thu-f-content .content-box-btn{
    font-size: clamp(10px, 1.2vw, 16px);
}

#thu-f-content .program-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 2vw; */
    padding: 4vw 2vw 2vw 2vw;
}

#thu-f-content .program-box{
    display: flex;
    gap: 3vw;
}

#thu-f-content .program-box-img-container{
    width: 30%;
    overflow: hidden;
}

#thu-f-content .program-box-img{
    width: 100%;
    height: 100%;
    aspect-ratio: 4/2.5;
    object-fit: cover;
}

#thu-f-content .program-content{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    padding: 1.6vw 0;
    position: relative;
}

#thu-f-content .program-icon{
    width: 2.5vw;
    /* height: 3vw; */
    position: absolute;
    left: 1vw;
    top: 0;
    transform: rotate(10deg);
}

#thu-f-content .program-icon.two{
    top: 10px;
    transform: rotate(-5deg);
}

#thu-f-content .program-icon.three{
    top: 10px;
}

#thu-f-content .program-icon.four{
    top: 10px;
}

#thu-f-content .program-content-subtitle{
    color: var(--white);
    font-size: clamp(14px, 2.1vw, 29px);
    background-color: var(--aqua);
    line-height: 1;

    padding:5px 0 5px 5vw;
}

#thu-f-content .program-content-title{
    color: var(--blue);
    font-size: clamp(31px, 4vw, 48px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 1px;
}

#thu-f-content .program-box-divider{
    width: 100%;
    height: 1px;
    background-color: var(--blue);
    margin: 2vw 0;
}

#thu-f-content .program-btn-container{
    display: flex;
    justify-content: center;
}

#thu-f-content .program-btn{
    font-size: 23px;
    padding: .5vw 4vw;
    border-radius: 14px;
    margin: 2vw 0;
}

#thu-f-content .chiba-content{
    margin-bottom: 4vw;
}

#thu-f-content .schedule-info{
    width: 80vw;
    margin: 0 auto;
    background-color: var(--white);
    border-radius: 2vw;
    padding: 2vw 3vw;
    margin-bottom: 4vw;
}

#thu-f-content .schedule-info-header{
    width: 100%;
    display: block;
    padding: clamp(3px,.7vw,8px) 0;
}

#thu-f-content .schedule-info-title{
    color: var(--blue);
    font-size: clamp(22px, 2.5vw, 35px);
    font-weight: bold;
    border-left: clamp(4px,.7vw,10px) solid var(--blue);
    padding-left: 2vw;
    line-height: 1;
}

#thu-f-content .schedule-info .schedule-date-container{
    padding: 1vw 0 3vw 0;
}

#thu-f-content .schedule-info .schedule-campus-img-box::before{
    width: 100%;
    background-color: var(--blue);
}

#thu-f-content .schedule-info .schedule-campus-img{
    width: 100%;
}

#thu-f-content .schedule-info .schedule-slider::-webkit-scrollbar-track{
    background-color: var(--blue);
    border-left: 3vw solid transparent;
    border-right: 3vw solid transparent;
}

#thu-f-content .schedule-info .schedule-slider::-webkit-scrollbar-thumb{
    background-color: var(--blue);
    border-left: 3vw solid transparent;
    border-right: 3vw solid transparent;
}

#thu-f-content .schedule-info .tabs{
    margin-top: -5vw;
    position: relative;
}

#thu-f-content .schedule-info .schedule-tab-content{
    width: 92%;
    margin-top: -1px;
    
}

#thu-f-content .schedule-info .tab-btn, #thu-f-content .schedule-info .schedule-tab-content{
    border: 1px solid var(--blue);
    
}

#thu-f-content .schedule-info .tab-content.active{
    display: block;
}


#thu-f-content .schedule-info .tab-content-text{
    color: var(--blue);
    margin-bottom: 5vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif !important;
    font-size: 18px;
}

#thu-f-content .overview-tab-btn-container{
    width: 72vw;
    display: flex;
    justify-content: end;
    position: absolute;
    bottom: 8%;
}

#thu-f-content .overview-tab-btn{
    font-size: 15px;
}

@media (max-width: 768px) {
#thu-f-content .overview-tab-btn{
    font-size: 18px;
}
}

#thu-f-content .web .schedule-info-img-box{
    width: 100%;
    position: relative;
    margin: 2vw 0 3vw 0;
}

#thu-f-content .web .schedule-info-img{
    width: 100%;
    aspect-ratio: 4/1.6;
    object-fit: cover;
    border: 1px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        var(--blue-gradient) border-box;
    border-radius: 1vw;
    position: inherit;
    z-index: 200;
}

/* #thu-f-content .web  .schedule-info-img-box::before{
    content: "";
    width: 100%;
    aspect-ratio: 4/1.6;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--blue), var(--blue)) padding-box,
        var(--blue-gradient) border-box;
    border-radius: 1vw;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 100;
} */

#thu-f-content .web .schedule-info-text{
    margin-bottom: 1vw;
}

#thu-f-content .web .schedule-info-text p{
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif !important;
    font-size: 18px;
    /* text-align: left; */
}

#thu-f-content .web .schedule-info-btn-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#thu-f-content .web .schedule-info-btn{
    display: inline-block;
    border-radius: 1vw;
    padding: .5vw 3vw;
}

#thu-f-content .faq{
    width: 100%;
    background-image: url(../img/open_campus/opencampus_transparent.png);
    background-position: center;
    background-size: cover;

    padding: 20vw 2vw 3vw 2vw;

    position: relative;
    z-index: 100;
}

#thu-f-content .faq .faq-style-text{
    color: var(--turquoise);
    font-size: 92px;
    font-weight: bold;
    opacity: .5;
    transform: rotate(10deg);

    position: absolute;
    right: 5%;
    top: -3%;
    z-index: 2;
}

#thu-f-content .faq-header{
    display: flex;
    justify-content: center;
}

#thu-f-content .faq-header-title, #thu-f-content .faq-header-subtitle{
    color: var(--white);
    font-size:  clamp(22px, 2.5vw, 35px);
    font-weight: bold;
}

#thu-f-content .faq-header-subtitle small{
    font-size: 18px;
}


#thu-f-content .faq-divider{
    width: 60vw;
    height: 2px;
    background-color: var(--blue);
    margin: 0 auto;
    margin-bottom: 2vw;
}

#thu-f-content .faq-body{
    width: 65vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    row-gap: 3vw;
    column-gap: 4vw;

    margin: 0 auto;
}

#thu-f-content .faq-card{
    width: 100%;
    background-color: var(--white);
    padding: 1.5vw 2vw;
}

#thu-f-content .faq-card-header{
    display: flex;
    gap: 1vw;
    margin-bottom: 1vw;
}

#thu-f-content .faq-card-header .question-number{
    color: var(--white);
    width: clamp(30px, 3vw, 40px);
    height: clamp(23px, 3vw, 30px);
    font-size: clamp(16px , 1.6vw, 20px);
    background-color: var(--blue);
    /* line-height: 1; */
    padding: 0 0.5vw;
}
@media (max-width: 768px) {
#thu-f-content .faq-card-header .question-number{
    color: var(--white);
    width: clamp(28px, 3vw, 40px);
    height: clamp(21px, 2vw, 30px);
    font-size: clamp(16px , 1.6vw, 20px);
    background-color: var(--blue);
    line-height: 1;
    padding: 0 0.5vw;
}
}

#thu-f-content .faq-card-header .question{
    font-size: 15px;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif !important;
}

#thu-f-content .faq-card-body{
    display: flex;
    gap: 2vw;
}

#thu-f-content .faq-card-icon{
    width: 100px;
}

#thu-f-content .faq-icon{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

#thu-f-content .faq-card-content{
    width: 80%;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif !important;
    font-size: 15px;

}

#thu-f-content .nav-links{
    width: 100%;
    padding: 8vw 0;
}


#thu-f-content .nav-links-img{
    width: 80%;
    margin: 0 auto;
}

#thu-f-content .nav-links-mobile-img{
    width: 80%;
    margin: 0 auto;
    display: none;
}

#thu-f-content .text-bold{
    font-weight: bold;
}

@media (max-width: 768px) {

    #thu-f-content .schedule-date-container{
        flex-direction: column;
        align-items: center;
    }

    #thu-f-content .campus-data-content .schedule-campus-img-box{
        width: 80vw;
        aspect-ratio: 16/9;
        margin: 0 auto;

        display: flex;
        justify-content: center;
        margin-bottom: 2vw;
    }

    #thu-f-content .campus-data-content .schedule-campus-img-box::before{
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 0;
    }

    #thu-f-content .campus-data-content .schedule-campus-img{
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 0;
    }

    #thu-f-content .schedule-slider{
        width: 100%;
        padding-bottom: 5vw;
        margin-bottom: 2vw;

        position: relative;
    }

    #thu-f-content .schedule-slider::-webkit-scrollbar{
        height: 8px;
    }
    #thu-f-content .schedule-slider::-webkit-scrollbar-track{
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
    }

    #thu-f-content .schedule-slider::-webkit-scrollbar-thumb {
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
    }

    #thu-f-content .schedule-tabs{
        width: 95%;
    }

    #thu-f-content .tab-btn svg{
        width: 30px;
        height: 30px;
        padding: 2px;
    }
    
    #thu-f-content .tab-content{
        flex-direction: column;
    }

    #thu-f-content .major-left-content,
    #thu-f-content .major-right-content{
        width: 100%;
    }

    #thu-f-content .content-box{
        flex-direction: column;
    }

    #thu-f-content .content-box .content-box-label{
        font-size: clamp(10px, 1.2vw, 16px);
        writing-mode: horizontal-tb; 
        text-orientation: mixed;
        margin-bottom: 1vw;
    }

    #thu-f-content .content-box-container{
        flex-direction: column;
        align-items: center;
    }

    #thu-f-content .content-box-header{
        width: 100%;
        margin-bottom: 1vw;
    }

    #thu-f-content .content-box-img{
        aspect-ratio: 4/1.8;
    }

    #thu-f-content .content-img-style-box{
        aspect-ratio: 4/1.8;
    }

    #thu-f-content .content-box-title{
        font-size: 22px;
    }

    #thu-f-content .content-box-title .large-letter{
        font-size: 28px;
    }

    #thu-f-content .content-box-text{
        font-size: 16px;
    }

    #thu-f-content .content-box-btn-container{
        justify-content: center;
    }

    #thu-f-content .content-box-btn{
        font-size: 16px;
        padding: 0.5vw 1.5vw;
        border-radius: 10px;
    }

    #thu-f-content .program-box{
        flex-direction: column-reverse;
    }

    #thu-f-content .program-box-img-container{
        width: 100%;
    }

    #thu-f-content .program-content{
        width: 100%;
        padding: 1.6vw 0;
    }

    #thu-f-content .program-content-subtitle{
        padding-left: 7vw;
    }

    #thu-f-content .program-icon{
        width: 5vw;
    }

    #thu-f-content .program-icon.two, #thu-f-content .program-icon.three, #thu-f-content .program-icon.four{
        width: 5.5vw;
        top: 0;
    }

    #thu-f-content .program-box-divider{
        width: 80%;
        margin: 2vw auto;
    }

    #thu-f-content .program-btn{
        display: none;
    }

    #thu-f-content .schedule-info{
        width: 95%;
        padding: 2vw 3vw 8vw 3vw;
        background-color: transparent;
        
    }

    #thu-f-content .schedule-info-title{
        color: var(--white);
        border-left-color: var(--white);
    }

    #thu-f-content .schedule-info .schedule-date-container{
        padding: 1vw 0 3vw 0;
        margin-bottom: 4vw;
    }

    #thu-f-content .schedule-campus-img-box{
        width: 100%;
        aspect-ratio: 4/3;
    }

    #thu-f-content .schedule-info .schedule-campus-img-box::before{
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        border-radius: 15px;
    }

    #thu-f-content .schedule-info .schedule-campus-img{
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
        border-radius: 15px;
    }

    #thu-f-content .schedule-info .schedule-slider{
        padding-bottom: 5vw;
    }

    #thu-f-content .schedule-info .schedule-slider::-webkit-scrollbar-track{
        background-color: var(--white);
    }

    #thu-f-content .schedule-info .schedule-slider::-webkit-scrollbar-thumb {
        background-color: var(--white);
    }

    #thu-f-content .schedule-info .schedule-card{
        width: 150px;
        border-radius: 0;
        border: none;
    }

    #thu-f-content .schedule-info .schedule-card .date{
        gap: 0;
    }

    #thu-f-content .schedule-info .schedule-card .btn{
    background: linear-gradient(to right, #5be9b9, #5ee7c6) !important;
    border-radius: 50px;
    color: var(--white) !important;
    /* max-width: 130px; */
    height: 48px;
    font-size: 17px !important;
    position: relative;
    white-space: nowrap;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif;
    font-weight: bold;
    display: block;
    /* margin-left: auto; */
    /* margin-right: auto; */
    text-align: center;
    padding: 11px 15px;
    }

    #thu-f-content .schedule-info .tabs{
        margin-top: 0;
        width: 100%;
    }

    #thu-f-content .schedule-info .schedule-tab-content{
        width: 100%;
    }

    #thu-f-content .overview-tab-btn-container{
        margin-top: 2vw;
        position: static;
        width: 100%;
        justify-content: center;
    }
    #thu-f-content .overview-tab-btn{
    background: linear-gradient(to right, #5be9b9, #5ee7c6) !important;
    border-radius: 50px;
    color: var(--white) !important;
    /* max-width: 130px; */
    height: 48px;
    font-size: 17px !important;
    position: relative;
    white-space: nowrap;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif;
    font-weight: bold;
    display: block;
    margin-left: auto;
    /* margin-right: auto; */
    text-align: center;
    padding: 11px 15px;    }

    #thu-f-content .web.schedule-info{
        width: 90vw;
        background-color: #ede7de;

    }

    #thu-f-content .web .schedule-info-title{
        color: var(--blue);
        border-left-color: var(--blue);
    }

    #thu-f-content .web .schedule-info-img-box::before{
        aspect-ratio: 4/2;
        top: 4px;
        left: 4px;
        border-radius: 3vw;
    }

    #thu-f-content .web .schedule-info-img{
        /* aspect-ratio: 4/2; */
        border-radius: 3vw;
        width:84%
    }

    #thu-f-content .web .schedule-info-btn{
        font-size: 13px;
        color: var(--blue);
        border: 2px solid transparent;
        background:
            linear-gradient(#ede7de, #ede7de) padding-box,
            var(--blue-gradient) border-box;

        border-radius: 15px;
    }

    #thu-f-content .faq{
        padding-top: 18vw;

        background-color: var(--white);
        z-index: 200;
    }

    #thu-f-content .faq .faq-style-text{
        font-size: 70px;
        right: 2%;
        top: -4%;
        z-index: -1;
    }

    #thu-f-content .faq-header{
        flex-direction: column;
        align-items: center;
    }

    #thu-f-content .faq-header-subtitle{
        color: var(--blue);
        font-size: 29px;
    }

    #thu-f-content .faq-header-title{
        color: var(--blue);
        font-size: 47px;
    }

    #thu-f-content .faq-header-subtitle small{
        font-size: 18px;
    }

    #thu-f-content .faq-body{
        width: 90vw;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        margin: 0 auto;
    }

    #thu-f-content .faq-card{
        padding: 3vw 4vw;
    }

    #thu-f-content .faq-card-header .question-number{
        font-size: 18px;
        padding: 0.5vw;
    }

    #thu-f-content .faq-card-body{
        padding: 2vw 3vw 0 0;
    }

    #thu-f-content .faq-icon{
        width: 90%;
    }

    #thu-f-content .nav-links{
        background-color: var(--white);
    }

    #thu-f-content .nav-links-img{
        display: none;
    }

    #thu-f-content .nav-links-mobile-img{
        width: 90%;
        display: block;
    }

    
}