#ExamTOP {
    background-color: #fafafa;
}
.wrapper, main {
    width: 100%;
    contain: paint;
}
#ExamTOP header .exam-logo {display: none;}
.fv {
    background-image: url(https://www.heian.ac.jp/assets/img/exam/2024/gradation_top.webp);
    background-size: cover;
}
.fv .fv-content {
    padding-top: 8rem;
}
.fv .fv-content .copy img.copy-img.img1 {
    width: 80%;
    margin: 0 auto 3rem;
}
.fv .fv-content .copy img.copy-img.img2 {
    width: 62%;
    margin: 0 auto;
    padding-left: 2%;
}
.fv .fv-content .copy h1 {
    width: 60%;
    margin: 3rem auto;
    display: block;
    background: #144e67;
    padding: 0.3rem 0;
    text-align: center;
}
.fv .fv-content .copy h1 span{
    font-family: ten-mincho-text, serif;
    font-size: 3.8vw;
    color: #fff;
    font-weight: 400;
}
.fv .fv-content .fv-img{
    margin-top: 5rem;
    width: 110vw;
    height: 110vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-image: radial-gradient(at 85% 75%, rgba(255, 255, 255, 0) 77%, rgba(255, 255, 255, 0.25) 88%, rgba(255, 255, 255, 0.82)), url(https://www.heian.ac.jp/assets/img/exam/2024/fv_st.webp);
    background-size: 100%, 135%;
    background-position: left top, 90%;
    border-radius: 10rem 0 0 0;
}
/* .fv .fv-content .fv-img::before{
    content: "";
    display: block;
    height: 86%;
} */
.fv .fv-content .fv-img::before{
    content: "";
    display: block;
    height: 80%;
}
.fv .fv-links {
    display: flex;
    position: sticky;
    justify-content: space-between;
    bottom: 0;
    width: 100%;
    padding: 0 7% 1rem;
}
.fv .fv-links a{
    display: block;
    width: 49%;
    backdrop-filter: blur(3px);
}
.fv .fv-links.oc a{
    width: 100%;
}
.fv .fv-links a img{width: 100%;}
.exam-links {
    background-color: #fff;
}
.exam-links ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 2.8rem 0 2.4rem 2.4rem;
}
.exam-links ul li {
    width: 49%;
    min-width: max-content;
    padding: 0.5rem;
}
.exam-links ul li span{
    font-family: ten-mincho-text, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6rem;
    color: var(--text-navy);
    font-size: 4.25vw;
}

#ExamTOP h3 span{
    font-family: goldenbook, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    color: var(--text-navy);
    text-transform: capitalize;
}

.infomation {
    padding: 4rem 2rem 0;
}

.infomation .info-container{
    background-color: #fff;
    margin-top: 0.5rem;
    height: 300px;
    position: relative;
}
.infomation .info-container::before,
.infomation .info-container::after{
    content: '';
    position: absolute;
    z-index: 5;
    display: block;
    pointer-events: none;
    top: -1px;
    left: 0;
    width: 95%;
    height: 2rem;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.infomation .info-container::after{
    bottom:-1px;
    top: auto;
    height: 2.4rem;
    opacity: 1;
    transition: opacity 0.5s;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
}
.infomation .info-container.end::after{
    opacity: 0;
}
.infomation .info-container ul{
    overflow-y: scroll;
    height: 100%;
    padding: 1rem;
}
.infomation .info-container li{
    padding: 1rem;
    padding-left: 4em;
    position: relative;
    border-bottom: #e7e7e7 dotted 1px;
}
.infomation .info-container li:last-child{
    border-bottom: none;
}
.infomation .info-container li::before {
    position: absolute;
    content: '\3054\6848\5185';
    width: 4.8rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #FFF;
    text-align: center;
    padding: 1.5px 0 3px;
    background: #4d6e9b;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.infomation .info-container li.level-imp::before {
    content: '\91CD\8981';
    background: #9B2E55;
}
.topics {
    padding: 4rem 2rem 4rem;
}
.swiper-container {
    position: relative;
    margin-top: 1rem;
}
.topics .swiper-pagination-fraction,
.banners .swiper-pagination-fraction {
    bottom: 0.25rem;
    right: 0.25rem;
    left: auto;
    height: 2rem;
    color: var(--text-navy);
    font-family: 'goldenbook';
    font-weight: 500;
    background-color: #ffffff8f;
    width: 3rem;
    text-shadow: 0 0 5px #fff;
    backdrop-filter: blur(3px);
    border-radius: 2px;
}
.topics .swiper-pagination span, 
.banners .swiper-pagination2 span {
    font-family: 'goldenbook';
    font-weight: 500;
    color: var(--text-navy);
}
.swiper-slide {
    position: relative;
}
.swiper-slide a{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.banner-container {
    width: 75%;
    margin: 0 auto 2rem;
    position: relative;
}
.swiper-pagination2 {
    position: absolute;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

.long-banner {
    width: 320px;
    margin: 2rem auto 4rem;
}
.long-banner div{
    margin-bottom: 1rem;
}

.spcontent h3 {
    text-align: center;
    margin-bottom: 2rem;
}
#ExamTOP .spcontent h3 span{
    font-size: 7rem;
}
.spcontent .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    height: 66rem;
    width: min(95%, 1300px);
    margin: 0 auto 7rem;
}
    
.parent > div {
    height: 20rem;
    position: relative;
    background-color: #fff;
    box-shadow: .3rem .3rem .5rem #cfcfcf;
}
.parent > div a{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
}
.parent > .div1 p,
.parent > .div2 p{
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #185c9cbb;
    text-align: center;
    font-size: 2rem;
}
.parent > .div2 p{
    background-color: #d9375abb;
}
.parent > div p span{
    color: #fff;
    font-family: ten-mincho-text, serif;
    font-size: 2rem;
}
.parent > div img {
    height: 20rem;
    width: 100%;
    object-fit: cover;
    object-position: center 43%;
}
.spcontent .div2 img {
    object-position: center 52%;
}
.spcontent .div3,
.spcontent .div4 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.spcontent .div3 p,
.spcontent .div4 p {
    font-family: ten-mincho-text, serif;
    font-size: 2.4rem;
    color: var(--text-navy);
}
.spcontent .div1 { grid-area: 1 / 1 / 2 / 3; }
.spcontent .div2 { grid-area: 2 / 1 / 3 / 3; }
.spcontent .div3 { grid-area: 3 / 1 / 4 / 2; }
.spcontent .div4 { grid-area: 3 / 2 / 4 / 3; }


@media screen and (min-width: 600px) {
    /* タブレット用レイアウト 600px以上の範囲に収めるデザインはこの中に記述 */
    
    .fv .fv-content { padding-top: 0;}
    .fv .copy {
        width: 45%;
        padding-top: 16rem;
    }
    .fv .fv-content .copy h1 span {
        font-size: 1.6vw;
    }
    .fv .fv-content .copy h1 { margin: 3rem auto;}
    .fv .fv-content .fv-img {
        margin-top: -5rem;
        width: 55%;
        height: 60rem;
        left: 0;
        transform: translateX(0);
        background-size: 100%, cover;
        background-position: left top, 70%;
        border-radius: 20rem 0 0 0;
    }
    .exam-links ul {
        padding: 1.6rem;
        justify-content: space-between;
    }
    .exam-links ul li {
        width: max-content;
        padding: 0.5rem 0;
        margin: 1rem;
    }
    .exam-links ul li span {
        font-size: 1.8vw;
    }
    .infomation {
        padding-top: 2rem;
        width: 63%;
    }
    .infomation .info-container {
        height: 24rem;
    }
    .infomation .info-container::after {height: 4rem;}
    .topics {
        width: 37%;
        padding: 2rem 2rem 2rem 0;
    }
    .swiper-container {
        height: 24rem;
        overflow: hidden;
        margin-top: 0.5rem;
    }

    .topics .swiper-pagination-fraction,
    .banners .swiper-pagination-fraction {
        display: none;
    }

}


@media screen and (min-width: 1025px) {
    .fv .fv-content {
        align-items: center;
    }
    
    .fv .copy {
        padding: 0;
        /* height: 400px; */
        width: 41%;
    }
    .fv .fv-content .copy img.copy-img.img1 {
        width: 70%;
        margin: 0 auto 3rem;
    }
    .fv .fv-content .copy img.copy-img.img2 {
        width: 47%;
        padding: 0;
    }
    .fv .fv-content .copy h1 {
        width: 48%;
    }
    .fv .fv-content .copy h1 span {
        font-size: 1.2vw;
    }
    .fv .fv-content .fv-img {
        margin-top: -8rem;
        width: 59%;
        height: max(830px, 100vh);
        max-height: 750px;
        background-size: 100%, max(140%,945px);
        background-position: left center, 83% -100%;
        border-radius: 50% 0 0 0;
        filter: drop-shadow(-11px -5px 20px #fff);
    }

    .fv .fv-content .fv-img::before {
        height: 80%;
    }
    /* .fv .fv-content .fv-img::before {
        height: 83%;
    } */
    .fv .fv-links {
        display: block;
        left: 100%;
        width: max(340px, 40%);
        padding: 0 7% 1rem;
    }
    .fv .fv-links.oc{
        width: max(550px, 65%);
    }
    .fv .fv-links a {
        margin-bottom: 3%;
        width: 100%;
    }

    /*=== 9-1-2 丸が動いてスクロールを促す ====*/

    /*スクロールダウン全体の場所*/
    .scrolldown2 {
        position: sticky;
        margin-left: 2%;
        bottom: 0px;
    }
    

    /* 丸の描写 */
    .scrolldown2:before {
        content: "";
        position: absolute;
        bottom: 30px;
        left: -4px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #144e67;
        animation: circlemove 1.6s ease-out infinite, cirlemovehide 1.6s ease-out infinite;
    }

    /*下からの距離が変化して丸の全体が上から下に動く*/
    @keyframes circlemove{
        0%{bottom:110px;}
        100%{bottom:25px;}
    }

    /*上から下にかけて丸が透過→不透明→透過する*/
    @keyframes cirlemovehide{
        0%{opacity:0;}
        80%{opacity:1;}
        100%{opacity:0.5;}
    }

    /* 線の描写 */
    .scrolldown2:after {
        content: "";
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 1px;
        height: 80px;
        background: #144e67;
    }

    .exam-links ul {
        padding: 2.4rem 0;
        width: min(100%, 1200px);
        margin: 0 auto;
    }
    .exam-links ul li span {
        font-size: 2rem;
        background-image: linear-gradient(0deg, #144e67, #144e67);
        background-size: 0% 1px;
        background-repeat: no-repeat;
        background-position: bottom center;
        transition: background-size 0.3s;
    }
    .exam-links ul li a:hover span {
        background-size: 90% 1px;
    }
    #ExamTOP h3 span {font-size: 5rem;}
    #ExamTOP .container {
        width: min(95%, 1300px);
        margin: 0 auto;
    }

    .infomation {
        width: 65%;
        padding: 4rem 0;
    }
    .topics {
        width: 32.5%;
        padding: 4rem 0;
    }
    .infomation .info-container {
        height: auto;
        aspect-ratio: 845/350;
    }
    .swiper-container {
        height: auto;
        aspect-ratio: 422.5/350;
    }
    .swiper-container .swiper-slide img{
        transition: opacity 0.3s;
    }
    .swiper-container .swiper-slide:hover img{
        opacity: 0.5;
    }

    .infomation .info-container ul {
        padding: 1rem 2rem;
    }
    .infomation .info-container::after {
        width: calc(100% - 8px);
        height: 9rem;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgb(255 255 255));
    }
    .infomation .info-container::before {
        width: calc(100% - 8px);
        height:3rem;
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgb(255 255 255));
    }
    .infomation .info-container ul::-webkit-scrollbar {
        width: 8px;
    }
    .infomation .info-container ul::-webkit-scrollbar-track{
        background-color: #f7f7f7;
        border-radius: 100px;
    }
    .infomation .info-container ul::-webkit-scrollbar-thumb{
        background-color: #ccc;
        border-radius: 100px;
    }
    
    .infomation .info-container li {
        padding: 2rem 1rem;
        padding-left: 4em;
    }
    .infomation .info-container li a{transition: all 0.3s;}
    .infomation .info-container li a:hover {opacity: 0.5;}
    .infomation .info-container li::before {
        width: 5.2rem;
        font-size: 1.4rem;
    }
    
    .parent > div {
        transition: box-shadow .3s;
    }
    .parent > div:hover {
        box-shadow: .1rem .1rem .2rem #cfcfcf;
    }
}

@media screen and (min-width: 1300px) {
    
    .fv .copy {
        padding: 0px 0rem;
    }

    .fv .fv-content .fv-img {
        max-height: max(900px,60vw);
        background-position: left center, 82% -3%;
        background-size: 100%, 135%;
    }

    .infomation .info-container {
        height: 350px;
    }
    .swiper-container { height: 350px;}

}

@media screen and (max-width: 600px) {
    #ExamTOP .spcontent h3 span{
        font-size: 4.8rem;
    }
    .spcontent .parent {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 2fr) repeat(2, 1fr);
        grid-column-gap: 1rem;
        grid-row-gap: 1.5rem;
        height: 64.5rem;
    }
    .spcontent .div1 { grid-area: 1 / 1 / 2 / 2; }
    .spcontent .div2 { grid-area: 2 / 1 / 3 / 2; }
    .spcontent .div3 { grid-area: 3 / 1 / 4 / 2; }
    .spcontent .div4 { grid-area: 4 / 1 / 5 / 2; }
    .spcontent .div3,
    .spcontent .div4 {
        height: 10rem;
    }
    .spcontent .div3 p, .spcontent .div4 p {
        font-size: 1.8rem;
        text-align: center;
    }

}

header .exam-logo img {
    filter: drop-shadow(0px 0px 5px #fff);
}
.exam.about .head .subm {
    width: 100%;
}
.exam.about .head h2{
    font-family: ten-mincho-text, serif;
    color: var(--text-navy);
    font-size: 3rem;
    font-weight: 400;
    padding: 3rem 0 3rem;
}

.exam .breadcrumbs {
    padding: 1rem 0;
}
.exam .breadcrumbs a {
    font-size: 1.2rem;
    font-weight:500;
}
.exam .breadcrumbs span {
    display: inline-block;
    width: fit-content;
    margin: 0 0.5rem;
}

.exam.about #Policy {padding-top: 5rem;}
.exam.about #Campus,
.exam.about #International,
.exam.about #Elementary,
.exam.about #Career {
    padding-top: 10rem;
}
.exam.about section:not(.small-links) .container {
    padding: 0 5%;
}
.exam.about h3 {
    font-size: 2.4rem;
    font-family: 'Lato','Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    color: var(--text-navy);
    margin-bottom: 2rem;
}
.exam.about p {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    line-height: 1.75;
}
/* 
.exam.about .hide{
    transition: height 0.5s;
}
.exam.about .hide.hidden{
    height: 80px;
    position: relative;
    overflow-y: hidden;
    margin-bottom: 2rem;
}   
.exam.about .hide.hidden::after{
    content: '';
    position: absolute;
    z-index: 5;
    display: block;
    pointer-events: none;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(180deg, #fafafa00, #fafafa);
}
.exam.about .hide.hidden::before{
    content: url(../../img/exam/2024/link.svg);
    position: absolute;
    z-index: 6;
    display: block;
    pointer-events: none;
    bottom: -10px;
    left: 50%;
    transform: rotate(90deg);
    filter: drop-shadow(0px 0px 1px #fff);
} */

.exam.about button[data-micromodal-trigger="modal-1"]{
    width: 100%;
    height: 13rem;
    margin-top: 3rem;
    font-size: 2.2rem;
    border: none;
    cursor: pointer;
    font-family: ten-mincho-text, serif;
    color: #fff;
    background-color: var(--text-navy);
    border-radius: 3px;
    opacity: .9;
    /* background-image: url(https://www.heian.ac.jp/assets/img/exam/2024/president.webp);
    background-size: cover;
    background-position: center 30%;
    border: 1px solid #185c9c;
    text-shadow: 0 0 .2rem #f0f0f0, 0 0 .5rem #f0f0f0; */
    background-image: url(https://www.heian.ac.jp/assets/img/exam/2024/click.svg);
    background-repeat: no-repeat;
    background-position: 99% 90%;
    background-size: 3rem;
}
.exam.about button[data-micromodal-trigger="modal-1"]:hover{opacity: 0.75;}
.exam.about #modal-1[aria-hidden="true"] {
    display: none;
}
#modal-1[aria-hidden="false"] .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #03151c80;
    z-index: 100;
    backdrop-filter: blur(1px);
}
#modal-1 div[role="dialog"] {
    background-color: #fff;
    padding: 50px 2.5%;
    position: relative;
    height: auto;
    width: min(95%, 1200px);
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 3fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
#modal-1-title {
    margin-top: 2rem;
    line-height: 1.5;
}
#modal-1-title span{
    background-color: var(--text-navy);
    display: block;
    width: max-content;
    color: #fff;
    padding: 0 .5em;
}
#modal-1 div[role="dialog"] button {
    position: absolute;
    top: 24px;
    right: 26px;
    border: none;
    font-size: 3rem;
    background: none;
    line-height: 1;
    color: #333;
    font-weight: lighter;
    cursor: pointer;
}
#modal-1 div[role="dialog"] div.pic{
    width: 90%;
    height: auto;
    grid-area: 1 / 1 / 3 / 2;
}
#modal-1 div[role="dialog"] div.pic img{
    height: auto;}
#modal-1-content{
    overflow-y: scroll;
    height: min(46vh, 25vw);
    padding-right: 1%;
    grid-area: 2 / 2 / 3 / 3;
}
#modal-1-content::-webkit-scrollbar {
    width: 5px;
}
#modal-1-content::-webkit-scrollbar-track{
    background-color: #f7f7f7;
    border-radius: 100px;
}
#modal-1-content::-webkit-scrollbar-thumb{
    background-color: #ccc;
    border-radius: 100px;
}
#modal-1-content p {
    margin-bottom: 3rem;
}
.exam.about .policy h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    grid-area: 1 / 2 / 2 / 3; 
}
.exam.about .policy p.policy-text {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-navy);
    line-height: 200%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.exam.about .campus h4 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.exam.about .campus section {
    margin-top: 3rem;
}
.exam.about .Faculty .lead h4 {
    display: block;
    width: 112%;
    background-image: linear-gradient(120deg, #25A3BF, #185D9C);
    padding: 0.75rem 6%;
    margin: 0 -6% 1px;
}
.exam.about .Faculty .lead h4 > span{
    font-family: ten-mincho-text, serif;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 400;
}
.exam.about .Faculty .lead .img {
    width: 112%;
    max-width: 112%;
    margin: 0 -6%;
}
.exam.about .Faculty .lead .f-lead{
    font-size: 2rem;
    color: #185D9C;
    font-weight: 500;
    margin: 1.5rem 0 1rem;
    line-height: 1.8;
}
.exam.about .Faculty .lead .f-lead2 {
    font-weight: 500;
    font-size: 1.6rem;
}

.Faculty .course {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 5rem;
}
.Faculty .course h5 {
    margin: 0 0 0.3em;
    width: max-content;
    padding: 0 0.5em;
    color: #ffffff;
    font-family: ten-mincho-text, serif;
    background-image: linear-gradient(120deg, #25A3BF, #185D9C);
}
.Faculty .course .c-img{
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    margin-bottom: 1rem;
}
.Faculty .course > p{
    width: 100%;
    font-weight: 400;
    margin-bottom: 0;
}
.Faculty .course .fouryear{
    width: 100%;
}

.Faculty .course h6 {
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.Faculty .course h6 span{
    color: #185D9C;
    border-bottom: #185D9C 1px solid;
    font-weight: 500;
    font-size: 1.6rem;
}
.Faculty .swiper-container {
    margin-top: 0.5rem;
}
.Faculty .swiper-slide {
    height: 8rem;
    background-color: #185c9c0a;
    display: flex;
}
.Faculty .swiper-slide p{
    padding-left: 6rem;
    padding-right: 2rem;
    font-weight: 500;
    font-size: 1.4rem;
    color: #185D9C;
    margin:auto;
}
.Faculty .swiper-slide span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 5rem;
    padding: 2rem 0.5rem;
    color: #185D9C;
    background-color: #185c9c28;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    line-height: 100%;
}
.Faculty .swiper-slide span strong {
    font-family: goldenbook, serif;
    display: block;
    font-size: 2em;
    height: 1em;
}
.Faculty .swiper-button-next {
    right: 0;
    left: auto;
    height: 2rem;
    top: 65%;
}
.Faculty .swiper-button-next:after {
    content: url(https://www.heian.ac.jp/assets/img/exam/2024/arrow3.svg);
    color: #185D9C;
    font-size: 2rem;
}

.Faculty .license {
    margin-top: 5rem;
    padding: 3rem 1.5rem;
    background-color: #F2F2F2;
}
.Faculty .license h4{
    text-align: center;
    color: #185D9C;
    margin-bottom: 2rem;
}
.Faculty .license h4 small{
    display: block;
    color: #185D9C;
}
.Faculty .license ul {
    display: flex;
    flex-wrap: wrap;
}
.Faculty .license ul li{
    width: max-content;
    margin-right: 1em;
    font-size: 1.2rem;
}
.Faculty .license ul li::before{
    content: '\25cf';
    display: inline-block;
}
.Faculty .point {
    padding: 3rem 2rem;
    margin: 5rem -6% 0;
    background: #185D9C;
}
.Faculty .point h4{
    text-align: center;
}
.Faculty .point h4 span{
    background: linear-gradient(0deg, #fff, #fff) no-repeat;
    background-size: 100% 1px;
    padding-bottom: 2px;
    background-position: bottom;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
}
.Faculty .point ol li {
    color: #fff;
    border-left: 1px solid #fff;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.6em;
    padding-left: 1em;
    margin-top: 3rem;
    position: relative;
}
.Faculty .point ol li span{
    display: block;
    color: #fff;
    font-size: 1.2rem;
}
.Faculty .point ol li::before {
    position: absolute;
    font-weight: 400;
    content: '01';
    font-family: goldenbook, serif;
    color: #ffffffe8;
    font-size: 3rem;
    left: -3.7rem;
    top: 0.3rem;
}
.Faculty .point ol li:nth-child(2):before {
    content: '02';
}
.Faculty .point ol li:nth-child(3):before {
    content: '03';
}
.Faculty .point ol li:nth-child(4):before {
    content: '04';
}
.exam.about .more-link a {
    display: block;
    width: max-content;
    margin: 0.5rem 0 0 auto;
    position: relative;
}
.exam.about .more-link a span {
    font-size: 1.4rem;
    font-weight: 500;
    padding-right: 10px;
}

.exam.about .more-link a::after {
    content: url(../../img/exam/2024/link.svg);
    display: inline-block;
    transform: translateY(-12%);
}



#Elementary.Faculty .lead h4,
#Elementary.Faculty .course h5 {background-image: linear-gradient(120deg, #D9375B, #FE5959);}
#Elementary.Faculty .lead .f-lead,
#Elementary.Faculty .swiper-slide p,
#Elementary.Faculty .license h4,
#Elementary.Faculty .license h4 small
 {color: #D9375B;}
#Elementary.Faculty .swiper-slide span {
    color: #D9375B;
    background-color: #D9375B28;
}
#Elementary.Faculty .course h6 span {
    color: #D9375B;
    border-bottom: #D9375B 1px solid;
}
#Elementary.Faculty .swiper-slide {background-color: #D9375B0a;}
#Elementary.Faculty .point {background: #D9375B;}

#Elementary.Faculty .swiper-button-next:after {
    content: url(https://www.heian.ac.jp/assets/img/exam/2024/arrow4.svg);
    color: #D9375B;
    font-size: 2rem;
}

.exam.about .career .rate {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.exam.about .career .rate img {
    width:calc(50% - 2rem);
    margin: 0 1rem;
}
.exam.about .career .place {
    display: flex;
    flex-wrap: wrap;
    margin-top: 3rem;
}
.exam.about .career .place section{
    margin-bottom: 2rem;
}
.exam.about .career .place h4{
    width: 100%;
    margin: 1.5rem 0;
}
.exam.about .career .place h5{
    font-size: 1.6rem;
    margin: 0 0 0.5rem;
    color: #185D9C;
}
.exam.about .career .place .ele h5{
    color: #D9375B;
}
.exam.about .career .place p{    
    font-size: 1.2rem;
}
.exam.about .career .place .ele p span {
    color: #D9375B;
    margin:0 0.5em 0 0 ;  
    font-size: 1.2rem;
    font-weight: 500;
}
.exam.about .career .hide.hidden{
    height: 80px;
    position: relative;
    overflow-y: hidden;
    margin-bottom: 2rem;
    cursor: pointer;
}   
.exam.about .career .hide.hidden::after{
    content: '';
    position: absolute;
    z-index: 5;
    display: block;
    pointer-events: none;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(180deg, #fafafa00, #fafafa);
}
.exam.about .career .hide.hidden::before{
    content: url(../../img/exam/2024/link.svg);
    position: absolute;
    z-index: 6;
    display: block;
    pointer-events: none;
    bottom: -5px;
    left: 50%;
    transform: rotate(90deg);
    filter: drop-shadow(0px 0px 1px #fff);
}

.exam.about .career .support{
    margin-top: 3rem;
}
.exam.about .career .support h4{
    margin: 1.5rem 0 2rem;
}

.exam.about .career .support section{
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.exam.about .career .support h5 {
    font-size: 1.6rem;
    margin:0 ;
}
.exam.about .career .support p {
    font-size: 1.4rem;
}
.exam.about .career .support section div{
    width: 68%;
}
.exam.about .career .support section img {
    width: 30%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: contain;
}

#Career {padding-bottom: 10rem;}


.exam.about .career .career-lead .pc_only {display: none;}


@media screen and (min-width: 600px) {
    .exam.about .head .subm img{
        aspect-ratio: 3/1;
        object-fit: cover;
    }

    .Faculty .lead {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 5rem 14rem 13rem;
    }

    .exam.about .Faculty .lead h4 {
        width: 100%;
        padding: 1rem 1rem;
        margin: 0;
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .exam.about .Faculty .lead h4 > span {
        font-size: 2.8rem;
    }
        
    .exam.about .Faculty .lead .f-lead {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .exam.about .Faculty .lead .f-lead2 {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .exam.about .Faculty .lead .img {
        width: 100%;
        max-width: 100%;
        margin: 0;
        grid-row-start: 2;
        grid-row-end: 4;
        grid-column-start: 2;
        height: 100%;
        grid-column-end: 3;
        padding: 1rem 0 1rem 1rem;
    }

    .Faculty .course .c-img {
        aspect-ratio: 1;
        grid-row-start: 1;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        display: block;
    }
    .Faculty .course h5 {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 2;
        grid-column-end: 3;
    }
    .Faculty .course > p {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 3;
        font-size: 1.4rem;
    }
    .Faculty .course .fouryear {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .Faculty .course {
        display: grid;
        grid-template-columns: 30% 68%;
        grid-template-rows: 3rem 7rem 10rem;
        column-gap: 1rem;
        row-gap: 1rem;
    }
    .Faculty .course h6 {margin-top: -0.3rem;}

    .Faculty .swiper-slide {
        height: 6.5rem;
    }
    .Faculty .swiper-slide span strong {
        font-size: 1.5em;
    }
    .Faculty .course .swiper-container {
        height: 7rem;
    }
    .Faculty .license ul li {
        font-size: 1.4rem;
    }
    .Faculty .license {
        padding: 3rem 5.5rem 4rem;
    }
    .Faculty .point {
        padding: 3rem 5rem;
        margin: 5rem 0 0;
    }
    .exam.about .career .rate img {
        width: calc(32% - 2rem);
        margin:1rem;
    }
    .exam.about .career .support {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .exam.about .career .support h4 {
        width: 100%;
    }

    .exam.about .career .support section {
        width: 49.5%;
        padding: 1rem 1rem 1rem 2rem;
        border: 1px solid #ebebeb;
    }
    .exam.about .career .support section div {
        width: 61%;
    }
    .exam.about .career .support section img {
        width: 37%;
    }   
}

@media screen and (min-width: 1025px) {
    .exam.about #Campus, .exam.about #International, .exam.about #Elementary, .exam.about #Career {
        padding: 5rem 0;
    }
    .exam.about #Campus,.exam.about #Career {
        background-color: #fff;
    }
    
    .exam.about .head .subm img {
        aspect-ratio: 5/1;
        min-height: 360px;
        object-position: center 24%;
        /* object-position: center 40%; */
        filter: saturate(1.25);
        width: 100%;
    }
    .exam.about p {
        line-height: 2;
    }
    .exam.about br.sp_br {
        display: none;
    }
    .exam.about h3 {
        margin-bottom: 3rem;
        font-size: 2.8rem;
    }

    .exam.about p {
        line-height: 2;
    }
    .exam.about h3 {
        margin-bottom: 3rem;
        font-size: 2.8rem;
    }

    .exam.about section:not(.small-links) .container {
        padding: 0;
        margin: 0 auto;
        max-width: 120rem;
        width: 90%;
        min-width: 98rem;
        position: relative;
    }
    .exam .breadcrumbs a {
        font-size: 1.4rem;
    }
    .exam.about .head h2 {
        font-size: max(4rem, 3vw);
        padding: 1.5em 0 1.25em;
    }
    .exam.about .head p {
        font-size: 1.8rem;
    }
    .exam.about #Policy {
        padding-top: 7rem;
        padding-bottom: 5rem;
    }
    .exam.about .policy h3 {
        font-size: 2rem;
        margin-bottom: 1em;
    }
    .exam.about .policy p.policy-text {
        font-size: 2.4rem;
        margin-bottom: 1em;
    }
    .exam.about .policy p:not(.policy-text) {
        max-width: 62%;
    }
    .exam.about .policy img {
        position: absolute;
        bottom: 0;
        right: 0;
        height: calc(100% - 4.2rem);
        width: calc(100% - 75rem);
        min-width: 37rem;
        z-index: -1;
        object-fit: cover;
    }
    .exam.about .campus section {
        position: relative;
        margin-top: 4rem;
    }
    .exam.about .campus h4 {
        font-size: 2rem;
        margin-bottom: 1em;
    }
    .exam.about .campus section p{
        width: 70%;
    }

    .exam.about .campus img {
        width: 22%;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .exam.about .Faculty .lead h4 {
        width: max-content;
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .exam.about .Faculty .lead .f-lead {
        font-size: 2.8rem;
        margin: auto 0;
    }
    .Faculty .lead .lead_br{display: none;}
    .Faculty .lead {
        display: grid;
        grid-template-columns: 62% 38%;
        grid-template-rows: 5rem 15rem 10rem;
    }
    .exam.about .Faculty .lead .img {
        padding: 0;
        grid-row-start: 1;
        overflow: hidden;
    }
    .exam.about .Faculty .lead .img img {
        height: 100%;
        width: 100%;
        max-width: 100%;
        object-fit: cover;
    }

    .Faculty .course {
        grid-template-rows: 4rem 9rem 10rem;
    }
    .Faculty .course .c-img {
        aspect-ratio: auto;
        height: 100%;
    }
    .Faculty .course h5 {
        padding: 0.25em 0.75em;
    }
    .Faculty .course > p {
        font-size: 1.6rem;
        font-weight: 500;
        margin: auto;
    }
    .Faculty .course .fouryear {
        overflow: hidden;
    }
    .Faculty .course .swiper-container {
        aspect-ratio: auto;
        width: 90%;
        overflow: visible;
    }
    .Faculty .course .img {
        grid-row-start: 1;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        display: block;
        height: 100%;
    }
    .Faculty .swiper-slide {cursor: grab;}
    .Faculty .swiper-slide:active {cursor: grabbing;}
    .Faculty .swiper-slide.swiper-slide-next {cursor: pointer;}
    .Faculty .swiper-slide p {
        font-size: 1.6rem;
        padding-left: 8rem;
        line-height: 1.5;
    }
    .Faculty .swiper-slide span {width: 7rem;}
    .Faculty .swiper-slide span strong {
        font-size: 1.7em;
    }
    .Faculty .license {
        padding: 4rem 12rem 5rem;
    }
    .Faculty .license h4 {
        font-size: 2.4rem;
        line-height: 1.5;
        margin-bottom: 2.5rem;
    }
    .Faculty .license ul li {
        font-size: 1.6rem;
    }

    .Faculty .point {
        padding: 5rem 8rem;
        margin: 5rem 0 0;
    }

    .Faculty .point h4 span {
        font-size: 2.4rem;
    }
    .Faculty .point ol li::before {
        font-size: 3.2rem;
        left: -4.7rem;
        top: 0.5rem;
    }
    .Faculty .point ol{
        padding-left: 6rem;
    }
    .Faculty .point ol li { 
        font-size: 2rem;
        line-height: 2em;
    }
    .Faculty .point ol li span {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.5;
    }
    .exam.about .more-link a span {
        font-size: 1.6rem;
    }

    .exam.about .career .place p {
        font-size: 1.4rem;
    }
    .exam.about .career .hide.hidden::after {
        background-image: linear-gradient(180deg, #ffffff00, #ffffff);
    }
    .exam.about .career .place h4,.exam.about .career .support h4 {
        font-size: 2.4rem;
    }
    .exam.about .career .career-lead {
        position: relative;
    padding-right: 37%;
    }
    .exam.about .career .career-lead p{
        font-size: 1.8rem;
    }
    .exam.about .career .career-lead .pc_only {
        display: block;
        position: absolute;
        width: 33%;
        right: 0;
        top: 0;
        height: 100%;
        object-fit: cover;
    }
    .exam.about .career .support h5 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .exam.about .career .support p {
        font-size: 1.6rem;
    }
}


@media screen and (max-width: 600px) {
    .exam.about button[data-micromodal-trigger="modal-1"]{
        height: 10rem;
        font-size: 1.8rem;
        background-position: 97% 91%;
        background-size: 7%;
    }
    #modal-1 div[role="dialog"] {
        display: block;
        overflow-y: scroll;
        height: 85vh;
        padding: 50px 5%;
    }
    #modal-1 div[role="dialog"] div.pic {
        padding: 0 15%;
        width: 100%;
    }
    #modal-1 div[role="dialog"] div.pic img {
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center 11%;
    }
    #modal-1-content {
        overflow-y: visible;
        height:max-content;
        padding-right: 0;
    }#modal-1-title {
        font-size: 2rem;
        margin: 0;
        padding: 2rem 0;
    }
    /* #modal-1-content p {
        font-size: 1.4rem;
    } */
    #modal-1 div[role="dialog"] button {
        position: fixed;
        top: 9vh;
        right: 3vw;}
}