/*four_years.css*/

/*----------------------
bread
------------------------*/

.bread > .inner {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.bread > .inner a,
.bread > .inner span,
.bread > .inner p {
    display: block;
    font-size: 1.3rem;
    padding: 5px 8px 5px;
}

.bread > .inner a {
    color: #005BCB;
}

.bread > .inner span {
    width: 8px;
    height: 8px;
    position: relative;
}

.bread > .inner span:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 1px #8e8e8e;
    border-right: solid 1px #8e8e8e;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 25%;
    bottom: 0;
    margin: auto;
}

/*----------------------
COMMON
------------------------*/

header {
    position: fixed;
}

main {
    margin-top: 80px;
}

.sub_inner {
    width: 1110px;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.fyMain {
    position: relative;
    background-image: url("/img/undergraduate/learning/four_years/grid.png");
    background-repeat: repeat;
    padding: 70px 0 40px 0;
}


.fyMainCont {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.fyMainCont h1 {
/*    font-size: 8.0rem;*/
    font-size:min(8.0vw,8.0rem);
    font-weight: 500;
    text-align: center;
    position: relative;
    margin-bottom: 55px;
    z-index: 1;
}

.fyMainCont h1 span {
    width: fit-content;
    display: block;
    width: 418px;
    margin: 0 auto;
}

.fyMainCont h1:after {
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    background-color: #E7F47A;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.fyMainCont .main_copy02 {
    width: 554px;
    max-width: 50%;
    margin-bottom: 20px;
}

.fyMainCont .main_copy03 {
    width: 220px;
    max-width: 25%;
    margin-bottom: 15px;
}

.fyMainCont .main_ic01,
.fyMainCont .main_ic02,
.fyMainCont .main_ic03,
.fyMainCont .main_ic04 {
    position: absolute;
}

.fyMainCont .main_ic01 {
    width: 94px;
    max-width: 12%;
/*    height: 154px;*/
    left: 30px;
    top: 180px;
}

.fyMainCont .main_ic02 {
    width: 86px;
    max-width: 11%;
/*    height: 162px;*/
/*    left: 180px;*/
    left: 13%;
    top: 380px;
}

.fyMainCont .main_ic03 {
    width: 144px;
    max-width: 18%;
/*    height: 138px;*/
    right: 30px;
    top: 205px;
}

.fyMainCont .main_ic04 {
    width: 98px;
    max-width: 12%;
/*    height: 166px;*/
/*    right: 250px;*/
    right: 15%;
    top: 360px;
}


.fyMainCont02 .main_copy04 {
    width: 318px;
    margin: 0 auto;
}

.first_y_ic_r {
    width: 344px;
}

.first_y_ic_l {
    width: 394px;
}


.fyContWrap {
    display: flex;
}

.fyContLeft,
.fyContRight {
    width: 50%;
}

.imgBlk img {
    display: block;
    width: 50vw;
    max-height: 720px;
    object-fit: cover;
}

.interBlk {
    flex: 1;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    height: 350px;
/*    padding: 150px 0 150px 0;*/
    background-color: #F3F9BC;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.headLine {
    flex: 1;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    height: 450px;
    background-image: url(/img/undergraduate/learning/four_years/grid.png);
    background-repeat: repeat;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
    position: relative;
}

.icLeft {
    width: 346px;
    max-width: 28%;
    position: absolute;
    left: 5%;
    bottom: -40px;
    z-index: 2;
}

.icRight {
    width: 394px;
    max-width: 33%;
    position: absolute;
    right: 5%;
    bottom: -20px;
    z-index: 2;
}

.dia {
    width: 318px;
    max-width: 34%;
    margin: 0 auto;
}

.fyContRight .year02,
.fyContRight .year03,
.fyContRight .year04 {
    margin-top: 800px;
}

@media screen and (min-width:768px) and (max-width:1190px) {
    .interBlk {
        height: 350px;
    }
    .fyContRight .year02,
    .fyContRight .year03,
    .fyContRight .year04 {
        margin-top: 800px;
    }
    
}

@media screen and (min-width:768px) and (max-width:990px) {
    .headLine {
        height: 400px;
    }
    .fyContRight .year02,
    .fyContRight .year03,
    .fyContRight .year04  {
        margin-top: 750px;
    }
}


.interBlk .nenji {
    width: 240px;
    height: 40px;
    min-height: 40px;
    font-size: 1.8rem;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 2px solid #212121;
    border-radius: 29px;
    margin: 0 auto 0;
}

.interBlk h2 {
    font-family: "Klee One", cursive;
    font-weight: 600;
    font-style: normal;
/*    font-size: 5.6rem;*/
    font-size:min(5.4vw,5.6rem);
    width: fit-content;
/*    margin: 0 auto 50px;*/
    margin: 0 auto;
    position: relative;
}

.interBlk .tit {
    width: fit-content;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.interBlk.y01 .tit img {
    width: 72px;
/*    max-width: 10%;*/
}

.interBlk.y02 .tit img {
    width: 148px;
/*    max-width: 10%;*/
}

.interBlk.y03 .tit img {
    width: 154px;
/*    max-width: 15%;*/
}

.interBlk.y04 .tit img {
    width: 148px;
/*    max-width: 10%;*/
}

.imgBlk {
    position: relative;
}

.imgBlk .vr_text {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 7%;
    right: 12%;
    z-index: 1;
}

.imgBlk .vr_text:after {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: -7%;
    right: 18px;
}

.imgBlk .vr_text > p {
    width: fit-content;
    /* font-family: "Zen Old Mincho", serif; */
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    padding: 12px 5px 12px;
    color: #fff;
    background-color: #212121;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.25em;
    z-index: 2;
}

.imgBlk .vr_text > p:first-child {
    margin-left: 15px;
}

.aft .vr_text > p {
    background-color: #fff;
    color: #212121;
}

@media screen and (min-width:768px) and (max-width:990px) {
    .imgBlk .vr_text > p {
        letter-spacing: 0.15em;
        font-size: 1.7rem;
    }
}

.relatedLinksWrap .inner {
    width: 1110px;
    padding-left: 20px;
    padding-right: 20px;
}

/*
.relatedLinksWrap h2 {
    font-size: 2.8rem;
    line-height: 1.6;
    font-weight: 500;
    font-family: "Zen Old Mincho", serif;
    font-style: normal;
    position: relative;
    margin-bottom: 35px;
    margin-top: 60px;
}
*/

@media screen and (min-width:768px) {
    ul.fyMainAnchor {
        display: none;
    }
    .headLine.y01_sp,
    .headLine.y02_sp,
    .headLine.y03_sp,
    .headLine.y04_sp {
        display: none;
    }
    .fyContRight .interBlk {
        display: none;
    }
    
}

.fy_banner_area {
    padding-top: 100px;
    padding-bottom: 100px;
}

.relatedLinksWrap {
    margin-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .relatedLinksWrap {
        margin-bottom: 100px;
    }
}