/* ========================================
各ページのスタイル
======================================== */

/* ========================================
1. 学部紹介コンテンツ - セクションタイトル
======================================== */
/* page-01 */
.page-01 .container._1 .section-title-sub {
    color: #FFD000;
    margin-left: min(10px, 0.58823529vw);
}

/* page-02 */
.page-02 .container._1 .section-title-sub {
    color: #008995;
    margin-left: 0;
}

#gakusei-introduction-section {
    position: relative;
    padding-top: min(250px, 30vw);
    padding-bottom: min(85px, 4vw);
}

#gakusei-introduction-section::before {
    content: "";
    position: absolute;
    top: 6%;
    width: 100%;
    height: 100%;
    background-color: #F6FCFC;
    z-index: -1; /* nằm dưới content */
}

/* Pseudo-element làm background ảnh bao quanh h2 */
#gakusei-introduction-section .container::before {
    content: "";
    position: absolute;
    background-image: url('../images/bottom/2_Ellipse8.png'); 
    top: 3%;
    align-items: center;
    width: min(606px, 38vw);
    height: min(606px, 38vw);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;
    left: 50%;
    transform: translateX(-50%);
}

#gakusei-introduction-section .section-title {
    margin-top: min(40px, 9.05882353vw);
    margin-bottom: min(40px, 3.05882353vw);
    font-size: min(35px, 5.94117647vw);

}

#gakusei-introduction-section .section-title-sub {
    margin-top: min(10px, 9.05882353vw);
    margin-bottom: min(40px, 3.05882353vw);
    font-size: min(50px, 5.94117647vw);

}

@media (max-width: 750px) {
    .page-02 .container._1 .section-title-sub {
        display: block;
        width: 84vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
#gakusei-introduction-section {
    position: relative;
    padding-top: min(80px, 15vw);
    padding-bottom: min(85px, 10vw);
}

#gakusei-introduction-section::before {
    content: "";
    position: absolute;
    top: min(180px, 30vw);
    width: 100%;
    height: 100%;
    background-color: #F6FCFC;
    z-index: -1; /* nằm dưới content */
}

/* Pseudo-element làm background ảnh bao quanh h2 */
#gakusei-introduction-section .container::before {
    content: "";
    position: absolute;
    background-image: url('../images/bottom/2_Ellipse8.png'); 
    top: min(180px, 7vw);
    align-items: center;
    width: min(606px, 60vw);
    height: min(606px, 60vw);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;
    left: 50%;
    transform: translateX(-50%);
}

#gakusei-introduction-section .section-title {
    margin-top: min(20px, 1.05882353vw);
    margin-bottom: min(20px, 1.05882353vw);
    font-size: min(30px, 3.5vw);

}

#gakusei-introduction-section .section-title-sub {
    margin-top: min(10px, 9.05882353vw);
    margin-bottom: min(40px, 3.05882353vw);
    font-size: min(40px, 6vw);

}    
}



/* ========================================
2. 学部紹介コンテンツ - コンテンツ
======================================== */
/* 経営学部 (page-01 〜 page-05) */
.page-01 .department-introduction-content-inner::before {
background-color: #FFD900; 
}

.page-01 .department-introduction-content-inner-gakusei::before {
background-color: #FFD900; 
}

/* Wrapper để định vị button */
.gakusei-button-wrapper {
    position: absolute;              
    left: 46%;                       
    bottom: -27%;                    
    transform: translateX(-50%);      
    z-index: 5;                       
}

/* Button màu đen chữ trắng */
.gakusei-action-button {
    background-color: #000;
    color: #fff;
    border: none;
    padding: min(20px, 1.17647059vw) min(20px, 1.17647059vw);
    font-size: min(20px, 1.17647059vw);
    font-weight: 600;
    cursor: pointer;
    border-radius: min(75px, 4.41176471vw);
    transition: background 0.3s;
    width: min(380px, 28vw);
    text-align: center;
    height: min(72px, 4.23529412vw);
}

.gakusei-action-button::before {
    content: "";
    position: absolute;
    left: -13%;
    top: 50%;
    transform: translateY(-50%);
    width: min(106px, 10.23529412vw);
    height: min(30px, 4.23529412vw);
    background-image: url("../images/top/1_arrow_pc.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.gakusei-action-button:hover {
    background-color: #333;
}

/* Wrapper để định vị button */
#gakusei-introduction-section .gakusei-int-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 80px;
}

#gakusei-introduction-section .gakusei-int-button {
    position: relative; /* để ::before */
    background-color: #000;
    color: #fff;
    border: none;
    padding: min(20px, 1.17647059vw);
    font-size: min(25px, 7.17647059vw);
    font-weight: 600;
    cursor: pointer;
    border-radius: min(75px, 10.41176471vw);
    width: min(380px, 40vw);
    height: min(72px, 14.23529412vw);
}

#gakusei-introduction-section .gakusei-int-button::before {
    content: "";
    position: absolute;
    left: -13%;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: min(106px, 12.23529412vw);
    height: min(30px, 6.23529412vw);
    background-image: url("../images/top/1_arrow_pc.png");
    background-size: contain;
    background-repeat: no-repeat;
}

#gakusei-introduction-section .gakusei-int-button:hover {
    background-color: #333;
}


#gakusei-introduction-section .gakusei-int-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


.page-01 .department-introduction-content-inner-gakusei {
    position: relative; /* để ::after định vị được */
}

.page-01 .department-introduction-content-inner-gakusei::after {
    content: "";
    position: absolute;
    background-image: url('../images/top/1_Ellipse10.png');
    top: -62%;
    left: 52%;
    width: min(528px, 31.05882353vw);
    height: min(528px, 31.05882353vw);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1; /* nằm dưới cả background-color hiện có */
}

.page-02 .department-introduction-content-inner::before {
background-color: rgba(0, 137, 149, 0.3);
}



/* ========================================
3. 4年間を表すキーワード
======================================== */
/* page-01: 企業経営コース */
.page-01 #department-introduction-section .container._2::before {
    background-image: url('../images/top/1_Ellipse8.png');
}


.page-01 .four-year-keyword-grid:nth-child(1) .four-year-keyword-grid-title {
    background-color: #8ABC4D;
}

.page-01 .four-year-keyword-grid:nth-child(2) .four-year-keyword-grid-title {
    background-color: #CAB83D;
}

.page-01 .four-year-keyword-grid:nth-child(3) .four-year-keyword-grid-title {
    background-color: #B39F22;
}

.page-01 .four-year-keyword-grid:nth-child(4) .four-year-keyword-grid-title {
    background-color: #E6B004;
}

.page-01 .four-year-keyword-grid:nth-child(1) .four-year-keyword-grid-text-title {
    color: #618C2C;
}

.page-01 .four-year-keyword-grid:nth-child(2) .four-year-keyword-grid-text-title {
    color: #B5A431;
}

.page-01 .four-year-keyword-grid:nth-child(3) .four-year-keyword-grid-text-title {
    color: #8B7C19;
}

.page-01 .four-year-keyword-grid:nth-child(4) .four-year-keyword-grid-text-title {
    color: #E6B004;
}

/* page-02: 経営情報コース */
.page-02 #department-introduction-section .container._2::before {
    background-image: url('../images/inte/2_Ellipse8.png');
}

@media (min-width: 751px) {
    #department-introduction-section .container._2 .four-year-keyword-container-inner {
        margin: min(193px, 11.35294118vw) 0 0 min(150px, 8.82352941vw);
    }
}

.page-02 .four-year-keyword-grid:nth-child(1) .four-year-keyword-grid-title {
    background-color: #0077BC;
}

.page-02 .four-year-keyword-grid:nth-child(2) .four-year-keyword-grid-title {
    background-color: #007DB1;
}

.page-02 .four-year-keyword-grid:nth-child(3) .four-year-keyword-grid-title {
    background-color: #0184A1;
}

.page-02 .four-year-keyword-grid:nth-child(4) .four-year-keyword-grid-title {
    background-color: #008995;
}

.page-02 .four-year-keyword-grid:nth-child(1) .four-year-keyword-grid-text-title {
    color: #0077BC;
}

.page-02 .four-year-keyword-grid:nth-child(2) .four-year-keyword-grid-text-title {
    color: #007DB1;
}

.page-02 .four-year-keyword-grid:nth-child(3) .four-year-keyword-grid-text-title {
    color: #0184A1;
}

.page-02 .four-year-keyword-grid:nth-child(4) .four-year-keyword-grid-text-title {
    color: #008995;
}


/* ========================================
4. 将来のキーワード
======================================== */
/* page-01: 企業経営コース */
.page-01 .future-keyword-container-inner .section-title::before {
    background-image: url('../images/top/1_Ellipse9.png');
}

.page-01 .future-keyword-grid-item {
    background-color: #ffffff;
}

.page-01 .future-keyword-grid-text .color-font {
    color: #009FCA;
}

/* page-02: 経営情報コース */
.page-02 .future-keyword-container-inner .section-title::before {
    background-image: url('../images/inte/2_Ellipse9.png');
}

.page-02 .future-keyword-grid-item {
    background: linear-gradient(to bottom, #008995 0%, #008995 35%, #ffffff 35%, #ffffff 100%);
}

.page-02 .future-keyword-grid-text .color-font {
    color: #008995;
}



@media (max-width: 750px) {

.page-02 .future-keyword-container-inner .section-title::before {
    background-image: url('../images/inte/2_Ellipse9_sp.png');
}
}


/* ========================================
5. 学生インタビュー 学生キーワード
======================================== */
/* 白鷗大学を知る 上コンテンツインタビュー */
.student-keyword-interview-section + #soka-u-keyword-section {
    padding-top: min(183px, 10.76470588vw);
}

@media (max-width: 750px) {
    .student-keyword-interview-section + #soka-u-keyword-section {
        padding-top: min(155px, 20.66666667vw);
    }

    .page-01 .department-introduction-content-inner-gakusei::after {
    content: "";
    position: absolute;
    background-image: url('../images/top/1_Ellipse10_sp.png');
    top: -43%;
    left: 27%;
    width: min(528px, 70.05882353vw);
    height: min(528px, 70.05882353vw);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1; /* nằm dưới cả background-color hiện có */
}    

.gakusei-action-button {
    background-color: #000;
    color: #fff;
    border: none;
    padding: min(2px, 2.17647059vw) min(2px, 2.17647059vw);
    font-size: min(20px, 3.17647059vw);
    font-weight: 600;
    cursor: pointer;
    border-radius: min(75px, 4.41176471vw);
    width: min(380px, 40vw);
    text-align: center;
    height: min(72px, 9.23529412vw);
}

.gakusei-button-wrapper {
    position: absolute;
    left: 48%;
    bottom: -20%;
    transform: translateX(-50%);
    z-index: 5;
}

/* Wrapper để định vị button */
#gakusei-introduction-section .gakusei-int-wrapper {
    margin-top: min(50px, 5.23529412vw);
    margin-bottom: min(50px, 4.23529412vw);    
}

#gakusei-introduction-section .gakusei-int-button {
    padding: min(20px, 1.17647059vw);
    font-size: min(22px, 3.17647059vw);
    border-radius: min(75px, 9.41176471vw);
    width: min(380px, 50vw);
    height: min(72px, 10.23529412vw);
}

#gakusei-introduction-section .gakusei-int-button::before {
    left: -12%;
    top: 45%;
    width: min(106px, 15.23529412vw);
    height: min(30px, 10.23529412vw);
}
}

/* 経営学部 (page-02, page-05) */
.page-02 .student-keyword-interview-section .student-keyword-interview-container {
    background-color: #4261A6;
}

.page-02 .student-keyword-interview-section .tagu {
    background-color: #4261A6;
}

@media (min-width: 200px) and (max-width: 510px) {
#gakusei-introduction-section .gakusei-int-button::before {
    top: 40%;
    width: min(106px, 15.23529412vw);
    height: min(60px, 6.23529412vw);

}
}

@media (min-width: 550px) and (max-width: 650px) {
    .page-01 .department-introduction-content-inner-gakusei::after {
    top: -54%;
    left: 27%;
    width: min(528px, 70.05882353vw);
    height: min(528px, 70.05882353vw);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1; /* nằm dưới cả background-color hiện có */
}    

    .gakusei-button-wrapper {
        bottom: -27%;
    }     
}

@media (min-width: 651px) and (max-width: 750px) {
    .page-01 .department-introduction-content-inner-gakusei::after {
    top: -54%;
    left: 27%;
    width: min(528px, 70.05882353vw);
    height: min(528px, 70.05882353vw);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1; /* nằm dưới cả background-color hiện có */
}    

    .gakusei-button-wrapper {
        bottom: -27%;
    }    
}

@media (min-width: 751px) and (max-width: 869px) {
    .gakusei-button-wrapper {
        position: absolute;
        left: 46%;
        bottom: -23%;
        transform: translateX(-50%);
        z-index: 5;
    }


}

@media (min-width: 870px) and (max-width: 969px) {
    .gakusei-button-wrapper {
        position: absolute;
        left: 47%;
        bottom: -24%;
        transform: translateX(-50%);
        z-index: 5;
    }
}

@media (min-width: 1070px) and (max-width: 1169px) {
    .gakusei-button-wrapper {
        position: absolute;
        left: 47%;
        bottom: -25%;
        transform: translateX(-50%);
        z-index: 5;
    }
}