@charset "utf-8";

/********************************************************/
/****************** 重なり（z-index）指定 ******************/
/* ページ遷移アニメーション：z-index:10000〜; */
/* 展開後コンテンツ（ハンバーガーメニュー展開・モーダルウインドウ）：z-index:1000〜9999; */
/* header,ステークホルダーメニュー：z-index:100〜999; */
/* コンテンツ：z-index:-10〜99; */
/*******************************************************/

/**********************/
/****** TOPページ *****/
/**********************/
.mainVisual {
    position: relative;
    /*z-index: 1;*/
    background: #F4F2ED;
    width: 100%;
    height: 100vh;
}

.mainVisualForm {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 11%;
    left: 0;
    width: 36.9%;
    margin: 0 auto;
}

.mainVisualForm input {
    min-width: 100%;
}


/* SP */
@media only screen and (max-width:768px) {
    .mainVisualForm {
        width: 90%;
        bottom: 5%;
    }
}


.mainVisualOverflowHidden {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh
}

.mainVisualOverflowHiddenHalf {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 50vh
}

.mainVisualOverflowVisible {
    width: 100%;
    height: 100vh
}

.mainVisualLink {
    font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic;
    font-size: 2.4rem;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.3rem;
    line-height: 1.4;
}

.mainVisualLink img {
    max-width: none;
}

.mainVisualLinkVertical {
    font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic;
    writing-mode: vertical-rl;
    font-size: 2.4rem;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.3rem;
    line-height: 1.4;
}

.mainVisualLinkAppear {
    opacity: 0;
    transform: scale(1);
    animation: 1s mainVisualLinkAppear01 forwards, 1s mainVisualLinkAppear02;
    /*transformをforwardsにすると、hover時のtransformが動かなくなるので、animationのパラメータを分割している*/
}

.mainVisualLinkAppear01 {
    animation-delay: 0.2s;
}

.mainVisualLinkAppear02 {
    animation-delay: 0.35s;
}

.mainVisualLinkAppear03 {
    animation-delay: 0.5s;
}

.mainVisualLinkAppear04 {
    animation-delay: 0.65s;
}

.mainVisualLinkAppear05 {
    animation-delay: 0.8s;
}

.mainVisualLinkAppear06 {
    animation-delay: 0.95s;
}


/* SP */
@media only screen and (max-width:768px) {
    .mainVisualLink {
        font-family: 'Noto Sans JP';
        font-size: 1.7rem;
    }

    .mainVisualLinkVertical {
        font-family: 'Noto Sans JP';
        font-size: 1.7rem;
    }

}

@keyframes mainVisualLinkAppear01 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mainVisualLinkAppear02 {
    0% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}


/*メインビジュアルアニメーション箇所*/

/*雨*/
.mainVisualRain {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 27%;
    width: 10%;
}


/* SP */
@media only screen and (max-width:768px) {
    .mainVisualRain {
        top: 0;
        left: 22%;
        width: 20%;
    }
}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualRain {
        left: 25%;
        width: 15%;
    }
}

/*波*/
.mainVisualWave {
    position: absolute;
    bottom: 30%;
    right: 0;
    width: 9.6%;
}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualWave {
        bottom: 37%;
        right: 0;
        width: 30%;
    }
}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualWave {
        position: absolute;
        bottom: 40%;
        right: 0;
        width: 16%;
    }
}


/*かかわりあう*/
.mainVisualRelationWrap {
    position: absolute;
    z-index: 3;
    left: 7.7%;
    top: 31%;
    width: 14%;
    transition: 2s;
}

.mainVisualRelation {
    position: relative;
    top: 0;
    left: 0;
    animation: mainVisualRelation 12s ease infinite;
}

.mainVisualRelation01 {
    position: relative;
    top: -10px;
    display: block;
    width: 100%;
    animation: mainVisualRelation01 8s ease infinite;
    animation-delay: 0.5s;
    transition: top 2s;
    transform-origin: top center;
}

.mainVisualRelation02 {
    position: relative;
    bottom: -10px;
    display: block;
    width: 100%;
    animation: mainVisualRelation02 8s ease infinite;
    animation-delay: 0.5s;
    transition: bottom 2s;
    transform-origin: top center;

}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualRelationWrap {
        left: 3%;
        top: 15%;
        width: 30%;
    }
}

/* iPadMini（768px）用、540px以上で関わり合うの図形が大きすぎるので調整 */
@media only screen and (min-width:570px) and (max-width:768px) {
    .mainVisualRelationWrap {
        top: 12%;
        width: 25%;
    }
}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualRelationWrap {
        top: 15%;
        width: 20%;
    }
}

@keyframes mainVisualRelation {
    0% {
        top: 2px;
    }

    20% {
        top: -1px;
    }

    40% {
        top: -4px;

    }

    60% {
        top: 0;

    }

    80% {
        top: 5px;
    }

    100% {
        top: 0;
    }

}

@keyframes mainVisualRelation01 {
    0% {
        top: -20px;
    }

    47% {
        transform: translate(0.06em, 0);
    }

    48% {
        transform: translate(0, 0);
    }

    50% {
        top: 7px;
    }


    100% {
        top: -20px;
    }
}

@keyframes mainVisualRelation02 {
    0% {
        bottom: -20px;
    }

    47% {
        transform: translate(0.06em, 0);
    }

    48% {
        transform: translate(0, 0);
    }

    50% {
        bottom: 7px;
    }

    100% {
        bottom: -20px;
    }
}

/*
@keyframes mainVisualRelation01 {
  0% {
    top: 0;
  }

  5% {
    top: 7px;
  }

  6% {
    transform: translate(0.06em, 0);
  }

  7% {
    transform: translate(0, 0);
  }


  10% {
    top: 7px;
  }


  15% {
    top: 0;
  }

  27% {
    top: 7px;
  }

  28% {
    transform: translate(-0.06em, 0);
  }

  29% {
    transform: translate(0, 0);
  }

  32% {
    top: 7px
  }

  33% {
    transform: translate(-0.09em, 0);
  }

  34% {
    transform: translate(0, 0);
  }

  37% {
    top: -10px;
  }

  47% {
    top: 7px;
  }

  48% {
    transform: translate(0.06em, 0);
  }

  49% {
    transform: translate(0, 0);
  }

  57% {
    top: 7px
  }

  67% {
    top: -10px;
  }

  85% {
    top: -20px;
  }

  100% {
    top: 0;
  }

}

@keyframes mainVisualRelation02 {
  0% {
    bottom: -10px;
  }

  5% {
    bottom: -3px;
  }

  6% {
    transform: translate(0.06em, 0);
  }

  7% {
    transform: translate(0, 0);
  }


  10% {
    bottom: -3px;
  }

  15% {
    bottom: -10px;
  }

  27% {
    bottom: -3px;
  }

  28% {
    transform: translate(-0.06em, 0);
  }

  29% {
    transform: translate(0, 0);
  }

  32% {
    bottom: -3px
  }

  33% {
    transform: translate(-0.09em, 0);
  }

  34% {
    transform: translate(0, 0);
  }

  37% {
    bottom: -20px;
  }

  47% {
    bottom: -3px;
  }

  48% {
    transform: translate(0.06em, 0);
  }

  49% {
    transform: translate(0, 0);
  }

  57% {
    bottom: -3px
  }

  67% {
    bottom: -20px;
  }

  85% {
    bottom: -30px;
  }

  100% {
    bottom: -10px;
  }

}
*/


/*可能性を見い出す*/
.mainVisualPossibilityWrap {
    position: absolute;
    z-index: 3;
    left: 27%;
    top: 35%;
    width: 20%;
}

.mainVisualPossibility {
    position: relative;
    top: 0;
    left: 0;
    animation: mainVisualPossibility 24s linear infinite;
    width: 100%;
    max-width: 100%;
}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualPossibilityWrap {
        left: 5%;
        top: 65%;
        width: 40%;
    }
}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualPossibilityWrap {
        left: 5%;
        top: 60%;
        width: 35%;
    }
}


/*iPhoneSE以下,iPhone8も 390px*/
@media screen and (max-width: 389px) {
    .mainVisualPossibilityWrap {
        top: 69%;
        width: 32%;
    }
}


@keyframes mainVisualPossibility {
    0% {
        transform: scale(1);
        top: 0;
        left: 0;
    }

    5% {
        transform: scale(1.05);
    }

    10% {
        transform: scale(1);
        top: 0;
    }

    15% {
        transform: scale(1.05);
    }

    20% {
        transform: scale(1);
    }

    25% {
        transform: scale(1);
        left: -2px;
        top: -4px;

    }

    40% {
        transform: scale(1.1);
    }

    55% {
        transform: scale(1);
    }

    58% {
        transform: scale(1.05);
    }

    61% {
        transform: scale(1);
        left: 4px;
        top: 2px;
    }

    64% {
        transform: scale(1.05);
    }

    67% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.05);
    }

    73% {
        transform: scale(1);
        left: -2px;
        top: 4px;
    }

    76% {
        transform: scale(1.05);
    }

    79% {
        transform: scale(1);
    }

    85% {
        transform: scale(1);
    }

    95% {
        transform: scale(1.1);
        left: 4px;
        top: -2px;

    }

    100% {
        transform: scale(1);
    }

}

/*超えていく*/
.mainVisualBeyondWrap {
    position: absolute;
    z-index: 3;
    left: 55.8%;
    top: 51.6%;
    width: 11%;
}

.mainVisualBeyond01 {
    position: relative;
    display: block;
    width: 100%;
    animation: mainVisualBeyond01 12s ease-in-out infinite;
    animation-delay: 0.5s;
    transform-origin: center bottom;
}

.mainVisualBeyond02 {
    position: relative;
    display: block;
    width: 100%;
    animation: mainVisualBeyond02 12s ease-in-out infinite;
    animation-delay: 0.5s;
    transform-origin: center bottom;
}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualBeyondWrap {
        left: 40%;
        top: 51%;
        width: 25%;
    }
}

/* iPadMini（768px）用、540px以上で関わり合うの図形が大きすぎるので調整 */
@media only screen and (min-width:570px) and (max-width:768px) {
    .mainVisualBeyondWrap {
        top: 43%;
    }
}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualBeyondWrap {
        width: 20%;
        top: 40%;
        left: 39%;
    }
}


/*ワイドディスプレイ用、フルハイビジョン（1920px x 1080px）まで対応*/
@media screen and (min-width: 1365px) and (orientation: landscape) {
    .mainVisualBeyondWrap {
        left: 55.5%;
        width: 12%;
    }
}

/*iPhoneSE以下,iPhone8も 390px*/
@media screen and (max-width: 389px) {
    .mainVisualBeyondWrap {
        top: 54%;
        width: 23%;
    }
}

@keyframes mainVisualBeyond01 {

    0% {
        bottom: 0;
    }

    6% {
        bottom: 0;

    }

    9% {
        bottom: 7px;
    }

    23% {
        bottom: -20px;
    }


    32% {
        bottom: -20px;
    }

    35% {
        bottom: 0px;
    }

    50% {
        bottom: -40px;
    }

    /*連続でつつく*/
    56% {
        bottom: -40px;
    }

    59% {
        bottom: -30px;
    }

    65% {
        bottom: -30px;
    }

    68% {
        bottom: -20px;
    }

    74% {
        bottom: -20px;
    }

    77% {
        bottom: -10px;
    }

    83% {
        bottom: -10px;
    }

    86% {
        bottom: 0;
    }

    92% {
        bottom: 0;
    }

    100% {
        bottom: 0;
    }

}

@keyframes mainVisualBeyond02 {
    0% {
        bottom: 0;
    }

    3% {
        bottom: -5px;
    }

    6% {
        bottom: 1px;
    }

    9% {
        bottom: 3px;
    }

    23% {
        bottom: -20px;
    }

    28% {
        bottom: -35px;
    }

    32% {
        bottom: -20px;
    }

    35% {
        bottom: -13px;
    }

    50% {
        bottom: -40px;
    }

    /*連続でつつく*/
    53% {
        bottom: -43px;
    }

    59% {
        bottom: -36px;
    }

    62% {
        bottom: -34px;
    }

    65% {
        bottom: -30px;
    }

    68% {
        bottom: -27px;
    }

    71% {
        bottom: -24px;
    }

    74% {
        bottom: -20px;
    }

    77% {
        bottom: -18px;
    }

    80% {
        bottom: -13px;
    }

    83% {
        bottom: -10px;
    }

    86% {
        bottom: -6px;
    }

    93% {
        bottom: -3px;
    }

    100% {
        bottom: 0;
    }

}

/*何ができる大学？*/
.mainVisualCanWrap {
    position: absolute;
    z-index: 3;
    left: 72.8%;
    top: 16.5%;
    width: 23%;
}

.mainVisualCan {
    position: relative;
    top: 0px;
    transform: rotate(-55deg);
    animation: 12s mainVisualCan ease-in-out infinite;
    animation-delay: 0.2s;
}

.mainVisualCan01 {
    position: relative;
    top: 0;
    width: 100%;
    animation: 12s mainVisualCan01 ease-in-out infinite;
    animation-delay: 0.2s;
}

.mainVisualCan02 {
    position: relative;
    top: 0;
    width: 68%;
    left: -80px;
    animation: 12s mainVisualCan02 ease-in-out infinite;
}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualCanWrap {
        left: auto;
        right: 0%;
        top: 25%;
        width: 35%;
    }
}

/* iPadMini（768px）用、540px以上で関わり合うの図形が大きすぎるので調整 */
@media only screen and (min-width:570px) and (max-width:768px) {
    .mainVisualCanWrap {
        top: 30%;
        left: 73.5%;
    }
}


/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualCanWrap {
        left: 68%;
        top: 18%;
        width: 32%;
    }
}

/*ワイドディスプレイ用、フルハイビジョン（1920px x 1080px）まで対応*/
@media screen and (min-width: 1365px) and (orientation: landscape) {}


@keyframes mainVisualCan {
    0% {
        transform: rotate(-55deg);
        top: 0px;
    }

    15% {
        transform: rotate(-40deg);
        top: -3px;
    }

    25% {
        transform: rotate(-40deg);
        top: 0px;
    }

    50% {
        transform: rotate(-55deg);
        top: -6px;
    }

    70% {
        transform: rotate(-70deg);
        top: 0px;
    }

    90% {
        transform: rotate(-45deg);
        top: 3px;
    }

    100% {
        transform: rotate(-55deg);
        top: 0px;
    }

}

@keyframes mainVisualCan01 {
    0% {
        left: 0;
    }

    15% {
        left: -15px;
    }

    25% {
        left: -15px;
    }

    50% {
        left: 0;
    }

    75% {
        left: -5px;
    }

    100% {
        left: 0;
    }
}


@keyframes mainVisualCan02 {
    0% {
        left: -80px;
    }

    15% {
        left: -55px;
    }

    25% {
        left: -55px;
    }

    50% {
        left: -80px;
    }

    75% {
        left: -90px;
    }

    100% {
        left: -80px;
    }
}

/*OpenCampus*/
.mainVisualOCWrap {
    position: absolute;
    left: 50.4%;
    top: 0;
    width: 20%;
}

.mainVisualOC01 {
    position: relative;
    width: 85%;
    animation: mainVisualOC01 9s ease-in-out infinite;
    animation-delay: 0.7s;
    transform-origin: center bottom;
}

.mainVisualOC02 {
    position: relative;
    width: 100%;
    animation: mainVisualOC02 9s ease-in-out infinite;
    animation-delay: 0.7s;
    transform-origin: center top;
}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualOCWrap {
        right: 30%;
        top: 10%;
        width: 30%;
    }
}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualOCWrap {
        left: 45%;
        width: 26%;
    }
}


/*ワイドディスプレイ用、フルハイビジョン（1920px x 1080px）まで対応*/
@media screen and (min-width: 1365px) and (orientation: landscape) {
    .mainVisualOCWrap {
        width: 18%;
    }
}

/*iPhoneSE以下,iPhone8も 390px*/
@media screen and (max-width: 389px) {
    .mainVisualOCWrap {
        left: 40%;
    }
}

@keyframes mainVisualOC01 {
    0% {
        transform: rotate(0deg);
    }

    8% {
        transform: rotate(-2deg);
    }

    17% {
        transform: rotate(2deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    54% {
        transform: rotate(4deg);
    }

    76% {
        transform: rotate(-2deg);
    }

    90% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes mainVisualOC02 {
    0% {
        transform: rotate(0deg);
    }

    8% {
        transform: rotate(2deg);
    }

    17% {
        transform: rotate(-2deg);
    }

    40% {
        transform: rotate(6deg);
    }

    54% {
        transform: rotate(-6deg);
    }

    76% {
        transform: rotate(2deg);
    }

    90% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }

}

/*入試について知る*/
.mainVisualAdmissionWrap {
    position: absolute;
    z-index: 3;
    left: 78.7%;
    top: 74%;
    width: 17%;
}

.mainVisualAdmission01 {
    position: relative;
    z-index: 4;
    width: 58%;
    animation: mainVisualAdmission 24s linear infinite;
    animation-delay: 0.4s;
    transform-origin: center bottom;
}

.mainVisualAdmission02 {
    position: absolute;
    bottom: -50%;
    left: -65%;
    width: 100%;
    animation: mainVisualAdmission 30s linear infinite;
    animation-delay: 1s;
    transform-origin: center top;
}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualAdmissionWrap {
        top: auto;
        left: auto;
        right: 5%;
        bottom: 17%;
        width: 23%;
    }

    .mainVisualAdmission02 {
        bottom: -50%;
        left: -65%;
    }
}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualAdmissionWrap {
        top: 66%;
        left: 76%;
        width: 24%;
    }
}

/*iPhoneSE以下,iPhone8も 390px*/
@media screen and (max-width: 389px) {
    .mainVisualAdmissionWrap {
        right: 0%;
        bottom: 10%;
        width: 25%;
    }
}

@keyframes mainVisualAdmission {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.02);
    }

    10% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.02);
    }

    20% {
        transform: scale(1);
    }

    25% {
        transform: scale(1);

    }

    40% {
        transform: scale(1.05);
    }

    55% {
        transform: scale(1);
    }

    58% {
        transform: scale(1.02);
    }

    61% {
        transform: scale(1);
    }

    64% {
        transform: scale(1.02);
    }

    67% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.02);
    }

    73% {
        transform: scale(1);
    }

    76% {
        transform: scale(1.02);
    }

    79% {
        transform: scale(1);
    }

    85% {
        transform: scale(1);
    }

    95% {
        transform: scale(1.05);

    }

    100% {
        transform: scale(1);
    }

}

.mainVisualLinks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mainVisualLinks img {
    width: 100%;
}

.mainVisualRelationLink {
    position: absolute;
    z-index: 5;
    top: 68%;
    left: 12.3%;
    width: 4%;
}

.mainVisualPossibilityLink {
    position: absolute;
    z-index: 5;
    top: 61.4%;
    left: 29.2%;
    width: 15.2%;
}

.mainVisualBeyondLink {
    position: absolute;
    z-index: 5;
    top: 41.7%;
    left: 53.6%;
    width: 15.1%;
}

.mainVisualCanLink {
    position: absolute;
    z-index: 5;
    top: 33.1%;
    left: 87.4%;
    width: 1.7%;
}

.mainVisualOCLink {
    position: absolute;
    z-index: 105;
    top: 10%;
    left: 50.6%;
    width: 7.2%;
}

.mainVisualAdmissionLink {
    position: absolute;
    z-index: 5;
    top: 83.8%;
    left: 86.4%;
    width: 10.2%;
}

/* SP */
@media only screen and (max-width:768px) {
    .mainVisualRelationLink {
        position: absolute;
        top: 40%;
        left: 11%;
        width: 11%;
    }

    .mainVisualPossibilityLink {
        position: absolute;
        top: 80%;
        left: 4.5%;
        width: 40%;
    }

    .mainVisualBeyondLink {
        position: absolute;
        top: 46%;
        left: 32.5%;
        width: 38.5%;
    }

    .mainVisualCanLink {
        position: absolute;
        top: 30%;
        left: 88%;
        width: 4.5%;
    }

    .mainVisualOCLink {
        position: absolute;
        z-index: 105;
        top: 14%;
        left: 41%;
        width: 17%;
    }

    .mainVisualAdmissionLink {
        position: absolute;
        z-index: 5;
        top: 73%;
        left: auto;
        right: 5%;
        width: 26%;
    }

}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .mainVisualRelationLink {
        top: 38%;
        left: 11%;
        width: 9%;
    }

    .mainVisualPossibilityLink {
        top: 77%;
        left: 3.5%;
        width: 36%;
    }

    .mainVisualBeyondLink {
        top: 31%;
        left: 31.5%;
        width: 35.5%;
    }

    .mainVisualCanLink {
        top: 30%;
        left: 88%;
        width: 4%;
    }

    .mainVisualOCLink {
        z-index: 105;
        top: 14%;
        left: 41%;
        width: 16%;
    }

    .mainVisualAdmissionLink {
        top: 70%;
        left: auto;
        right: 8%;
        width: 23%;
    }

}

/* iPadMini（768px）用、540px以上で関わり合うの図形が大きすぎるので調整 */
@media only screen and (min-width:570px) and (max-width:768px) {
    .mainVisualRelationLink {
        top: 44%;
        left: 10%;
        width: 9%;
    }

    .mainVisualPossibilityLink {
        top: 81%;
        left: 7.5%;
        width: 35%;
    }

    .mainVisualBeyondLink {
        top: 33%;
        left: 34.5%;
        width: 35.5%;
    }

    .mainVisualCanLink {
        top: 32%;
        left: 90%;
        width: 4%;
    }

    .mainVisualOCLink {
        z-index: 105;
        top: 14%;
        left: 41%;
        width: 16%;
    }

    .mainVisualAdmissionLink {
        top: 70%;
        left: auto;
        right: 8%;
        width: 23%;
    }
}

/*ワイドディスプレイ用、フルハイビジョン（1920px x 1080px）まで対応*/
@media screen and (min-width: 1520px) and (orientation: landscape) {
    .mainVisualRelationLink {
        top: 74%;
    }

}

/*iPhoneSE以下,iPhone8も 390px*/
@media screen and (max-width: 389px) {
    .mainVisualRelationLink {
        top: 46%;
    }

    .mainVisualPossibilityLink {
        top: 82%;
        left: 1%;
    }

    .mainVisualAdmissionLink {
        top: 72%;
    }
}

/*新型コロナウイルス情報*/
.homeCovid {
    width: 90%;
    margin: 40px auto 120px;
    padding: 20px;
    border: 2px solid #F00;
}

.homeCovidHeadline {
    padding: 0 30px 0 0;
    font-size: 2.4rem;
    text-align: center;
    color: #F00;
    letter-spacing: 0.1rem;
    line-height: 1.4;
    font-weight: bold;
}

.homeCovidWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0 0;
}

.homeCovidLink {
    font-size: 1.8rem;
    text-align: center;
    color: #F00;
    letter-spacing: 0.1rem;
    line-height: 1.4;
    font-weight: bold;
}

.homeCovidLink .linkArrow:before,
.homeCovidLink .linkArrow:after {
    background-color: #F00;
}

.homeCovidLink span {
    font-size: 1.9rem;
}

.homeCovidLink:first-of-type {
    margin: 0 30px 0 0;
}


.homeCovidArchive {
    width: 60%;
    padding: 0 0 0 60px;
    border-left: 2px solid #F00;
}

.homeCovidArchiveHeadline {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    line-height: 1.4;
    font-weight: bold;
}

.homeCovidArchiveTable {
    width: 100%;
    margin: 20px 0 0;
    border: 1px solid #CCC;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    line-height: 1.4;
    border-collapse: collapse;
}

.homeCovidArchiveTable th {
    padding: 15px;
    background: #f4f2ed;
    border: 1px solid #CCC;
}

.homeCovidArchiveTable td {
    padding: 15px;
    border: 1px solid #CCC;
}

/*ある程度の画面サイズ以下で大きさ調整*/
@media screen and (max-width: 1050px) {
    .homeCovidWrap {
        width: 90%;
    }
}


/* SP */
@media only screen and (max-width:768px) {
    .homeCovidWrap {
        width: 95%;
        justify-content: flex-start;
    }

    .homeCovidLink {
        width: 100%;
        font-size: 1.8rem;
        text-align: left;
    }

    .homeCovidLink:first-of-type {
        margin: 0 0 10px;
    }

    .homeCovidArchive {
        width: 100%;
        padding: 30px 0 0;
        border-top: 2px solid #F00;
        border-left: none;
    }

    .homeCovidArchiveTable {
        font-size: 1.2rem;
    }

}

/*札幌市立大学とは何か？のキャッチコピーエリア*/
.homeAbout {
    position: relative;
}

.aboutAreaTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aboutAreaTopPh01 {
    width: 58.6%;
}

.aboutAreaTopPh02 {
    width: 10.2%;
}

.aboutAreaBottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 30px 0 0;
}

.aboutAreaBottomLinks {
    margin: 40px 0 0;
}


.aboutAreaBottomLinks a {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
}

.aboutAreaBottomLinks:last-of-type a {
    margin: 18px 0 0;
}

.aboutAreaBottomPh01 {
    margin: 0 0 0 15.2%;
    width: 14.1%;
}

.aboutAreaBottomPh02 {
    margin: 0 5.4% 0 0;
    width: 31.2%;
}

/*
.aboutCatchCopy {
  font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic;
  position: absolute;
  top: -13px;
  right: 15%;
  font-size: 2.6rem;
  font-weight: normal;
  letter-spacing: 0.2rem;
  line-height: 2;
  writing-mode: vertical-rl;
}

.aboutCatchCopy span {
  background: #FFF;
  padding: 13px;
}
*/

.aboutCatchCopy img {
    position: absolute;
    width: 20.6%;
    top: -13px;
    right: 16.3%;
}

.aboutAreaBg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aboutAreaBg01 {
    position: absolute;
    z-index: -1;
    top: -120px;
    right: 0;
}


.aboutAreaBg02 {
    position: absolute;
    z-index: -1;
    top: 40%;
    right: 0;
}


.aboutAreaBg03 {
    position: absolute;
    z-index: -1;
    top: 70%;
    left: 0;
}

/* SP */
@media only screen and (max-width:768px) {
    .aboutAreaTop {
        display: block;
        flex-wrap: wrap;
    }

    .aboutAreaTopPh01 {
        width: 60%;
    }

    .aboutAreaTopPh02 {
        position: relative;
        width: 15%;
        margin: 5% 0 0 35%;
    }

    /*
  .aboutCatchCopy {
    font-family: 'Noto Sans JP';
    position: relative;
    font-size: 1.6rem;
    width: 25%;
    right: 5%;
    line-height: 1.6;
  }

  .aboutCatchCopy span {
    background: transparent;
    padding: 0;
  }
  */
    .aboutCatchCopy img {
        position: absolute;
        width: 35%;
        top: 0;
        right: 2%;
    }

    .aboutAreaBottomLinks {
        margin: 0;
    }

    .aboutAreaBottomPh01 {
        width: 30%;
        margin: 0 0 0 10%;
    }

    .aboutAreaBottomPh02 {
        width: 50%;
        margin: 0 0 0 40%;
    }

    .aboutAreaBg01 {
        width: 100px;
        top: 20%;
    }

    .aboutAreaBg02 {
        width: 70px;
        top: 60%;
    }

    .aboutAreaBg03 {
        width: 120px;
        top: 90%;
        right: 10%;
    }
}

/*関わりあう人と学び*/
.homeStudy {
    margin: 150px 0 0;
}

.homeStudyBg {
    position: absolute;
    width: 100%;
    top: 0;
}

.homeStudyBgInitial {
    position: absolute;
    z-index: -1;
    width: 100%;
    opacity: 0;
    overflow: hidden;
}

.homeStudyBgLeft {
    position: absolute;
    z-index: -1;
    top: 0;
    left: -50%;
    width: 52%;
    opacity: 0.2;
    animation: 3s homeStudyBgLeft ease forwards;
    animation-delay: 0.5s;
}

.homeStudyBgRight {
    position: absolute;
    z-index: -1;
    top: 10px;
    left: 100%;
    width: 52%;
    opacity: 0.2;
    animation: 3s homeStudyBgRight ease forwards;
    animation-delay: 0.5s;
}

@keyframes homeStudyBgLeft {
    0% {
        left: -54%;
    }

    25% {
        left: 0%;
        opacity: 0.2;
    }

    75% {
        left: 0%;
        opacity: 0.2;
    }

    99% {
        left: 0%;
        opacity: 0;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes homeStudyBgRight {
    0% {
        display: block;
        left: 100%;
    }

    25% {
        left: 48%;
        opacity: 0.2;
    }

    75% {
        left: 48%;
        opacity: 0.2;
    }

    99% {
        left: 48%;
        opacity: 0;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.homeStudyLink {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    text-decoration: none;
    padding: 35px;
}

.homeStudyLinkInner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}


.homeStudyLinkImageDesign {
    width: 72%;
}

.homeStudyLinkImageNursing {
    width: 90%;
}

.homeStudyLinkImageAi {
    width: 60%;
}

.homeStudyLinkInner>h3,
.homeStudyLinkInner>p {
    width: 100%;
}


.homeStudyLinkArrow {
    font-size: 16px;
}

/* SP */
@media only screen and (max-width:768px) {
    .homeStudyLink {
        padding: 10px;
        margin: 0 0 20px;
    }

    .homeStudyLinkInner {
        text-align: center;
    }

    .homeStudyLinkSpLarge {
        width: 70%;
    }

    .homeStudyLinkSpLarge img {
        width: 50%;
    }


}

/* iPad Airだけ */
@media only screen and (width:768px) {
    .homeStudyLinkSpLarge img {
        width: 30%;
    }
}


/*関わりあうことで生まれたものこと*/
.homeThing {
    position: relative;
    z-index: 1;
    margin: 120px 0 60px;
}

.homeThingForm {
    position: relative;
    z-index: 2;
    max-width: 660px;
    width: 100%;
    margin: 15px auto 60px;
}

/* iPad Airだけ */
@media only screen and (max-width:1300px) {
    .homeThingForm {
        margin: 10px auto 60px;
        max-width: 500px;
    }
}

/*実践の先に可能性を見いだす*/
.homeReport {
    padding: 70px 0;
    overflow: visible;
}

.homeReportBgInitial {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 535px;
    height: 535px;
    max-width: 95%;
    max-height: 95%;
    margin: auto;
    opacity: 0;
}

.homeReportBg {
    animation: 3s homeReportBg ease forwards;
    animation-delay: 0.5s;
}

@keyframes homeReportBg {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    25% {
        opacity: 0.2;
        transform: scale(1);
    }

    75% {
        opacity: 0.2;
        transform: scale(1);
    }

    99% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        display: none;
        opacity: 0;
        transform: scale(1);
    }
}

.homeReportWrap {
    position: relative;
    z-index: 1;
    width: 95%;
    padding: 40px 0 26%;
    margin: 65px auto 0;
    background: url(../images/reportBg.png) no-repeat top center;
    background-size: cover;
}

.homeReportIllustArea {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.homeReportIllust {
    position: absolute;
}

.homeReportIllustNursing {
    top: 18.6%;
    left: 8.6%;
    width: 12.8%;
}

.homeReportIllustDesign {
    top: 51.2%;
    left: 16%;
    width: 9%;
}

.homeReportIllustEnvironment {
    top: 35.1%;
    left: 61.9%;
    width: 10%;
}

.homeReportIllustSenior {
    top: 18.2%;
    left: 82.1%;
    width: 7.6%;
}

.homeReportIllustCr {
    top: 31.7%;
    left: 33.1%;
    width: 13.4%;
}

.homeReportIllustPregnancy {
    top: 58.7%;
    left: 80.7%;
    width: 15.6%;
}

.homeReportIllustAi {
    top: 62.7%;
    left: 61.5%;
    width: 13.6%;
}

.homeReportIllustCreative {
    top: 69.8%;
    left: 41.3%;
    width: 15.9%;
}

.homeReportIllustWheelchair {
    top: 72.6%;
    left: 24.6%;
    width: 14.2%;
}

.homeReportTag {
    position: absolute;
    z-index: 1;
    display: block;
    padding: 5px 15px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #181000;
    background: #FFF;
    text-decoration: none;
    border-radius: 20px;
    letter-spacing: 0.06rem;
    transition: background-color 0.5s, background-color 0.5s;
    cursor: pointer;
}

.homeReportTag:hover,
.homeReportTag:focus {
    background: #181000;
    color: #FFF;
}

.homeReportTagNursingBasic {
    top: 33%;
    left: 22%;
}

.homeReportTagNursingHeart {
    top: 42%;
    left: 16%;
}

.homeReportTagCreateBuilding {
    top: 61%;
    left: 8%;
}

.homeReportTagCreateCity {
    top: 71%;
    left: 12%;
}

.homeReportTagCreateWork {
    top: 30%;
    left: 55%;
}

.homeReportTagNursingAdult {
    top: 64%;
    left: 27%;
}

.homeReportTagNursingResion {
    top: 89.5%;
    left: 20%;
}

.homeReportTagForResion {
    top: 38%;
    left: 44%;
}

.homeReportTagNursingEnvironment {
    top: 51%;
    left: 53%;
}

.homeReportTagCreatePlay {
    top: 62%;
    left: 43%;
}

.homeReportTagCreateThing {
    top: 72%;
    left: 50.8%;
}

.homeReportTagAi {
    top: 91%;
    left: 61%;
}

.homeReportTagNursingSenior {
    top: 40%;
    left: 83%;
}

.homeReportTagNursingChild {
    top: 48%;
    left: 77%;
}

.homeReportTagNursingHome {
    top: 63%;
    left: 72%;
}

.homeReportTagNursingPregnancy {
    top: 78%;
    left: 79%;
}

/*調整用*/
@media screen and (max-width: 1150px) {
    .homeReportWrap {
        padding: 40px 0 24%;
    }
}

/*調整用*/
@media screen and (max-width: 975px) {
    .homeReportWrap {
        padding: 40px 0 20%;
    }
}

/* SP */
@media only screen and (max-width:768px) {

    .homeReportWrap {
        position: relative;
        z-index: 0;
        width: 100%;
        padding: 40px 10px;
        margin: 65px auto 0;
        background: url(../images/reportBgSp.png) no-repeat center center;
        background-size: cover;
    }

    .homeReportIllustArea {
        position: relative;
    }

    .homeReportIllustWrap {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 10px;
    }

    .homeReportIllustWrap:nth-of-type(2n) {
        flex-flow: row-reverse;
    }

    .homeReportIllust {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        max-width: 60%;
        max-height: 145px;
        display: block;
    }

    .homeReportTagWrap {
        margin: 0 0 0 20px;
    }

    .homeReportTag {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        display: block;
    }

    .homeReportTag:nth-of-type(n+1) {
        margin: 10px 0 0;
    }
}

/*ワイドディスプレイ用、フルハイビジョン（1920px x 1080px）まで対応*/
@media screen and (min-width: 1450px) and (orientation: landscape) {
    .homeReportWrap {
        padding: 40px 0 28%;
    }
}

/*iPad Air用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .homeReportWrap {
        padding: 0 0 24%;
    }
}

/*今を超えていくその先を目指す*/
.homeBeyond {
    margin: 120px 0 90px;
    overflow: visible;
}

.homeBeyondBgInitial {
    position: absolute;
    right: 20%;
    top: 0;
    left: 0;
    z-index: -2;
    width: 351px;
    height: 408px;
    max-width: 80%;
    max-height: 80%;
    margin: 0 auto;
    opacity: 0;
}

.homeBeyondBg {
    animation: 5s homeBeyondBg ease forwards;
    animation-delay: 0.5s;
}

.homeBeyondSwiperSliderWrap {
    position: relative;
    overflow: hidden;
}

.homeBeyondSwiperSliderBgBefore {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
}

.homeBeyondSwiperSliderBgAfter {
    transform: scale(-1, 1);
    position: absolute;
    z-index: 4;
    right: 0;
    top: 0;
}

.homeBeyondSwiperSlider {
    position: relative;
}

.homeBeyondSwiperSliderItem {
    margin: 60px 0 0;
    max-width: 1000px;
    width: 100%;
}

.homeBeyondSwiperSliderItemImage {
    /*position: relative;*/
    z-index: 2;
}

.homeBeyondSwiperSliderItemImage:hover img,
.homeBeyondSwiperSliderItemImage:focus img {
    border: 1px solid #000;
}

.homeBeyondSwiperSliderItemImage:before {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    max-width: 782px;
    height: 100%;
    margin: 0 auto;
    background: linear-gradient(to right, rgba(0, 185, 239, 0), rgba(0, 185, 239, 0.6));
    mix-blend-mode: soft-light;
    opacity: 0.3;
    content: '';
}

.homeBeyondSwiperSliderItemImage img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 782px;
    margin: 0 auto;
}

.homeBeyondSwiperSliderItemImageTitle {
    position: absolute;
    z-index: 4;
    bottom: 10%;
    right: 0;
    left: 0;
    display: inline;
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
}

.homeBeyondSwiperSliderItemImageTitleBg {
    display: inline;
    padding: 2px 25px 2px 5px;
    font-size: 2.6rem;
    line-height: 2.0;
    letter-spacing: 0.05em;
    font-weight: bold;
    background: linear-gradient(transparent 1%, #FFF 0%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.homeBeyondSwiperSliderItemImageTitleBg span {
    padding: 0 0 0 15px;
}

.homeBeyondSwiperSliderItemImageTitleLink {
    font-size: 1.6rem;
    padding: 0 0 0 10px;
}

.homeBeyondSwiperSliderItemImageTitle .linkArrow {
    position: relative;
    right: 25px;
}

.swiperSliderNextHome,
.swiperSliderPrevHome {
    width: 52px;
    height: 41px;
    bottom: -41px;
}

.swiperSliderPrev {
    right: 56px;
}

.swiperPagination {
    display: flex;
    justify-content: center;
    margin: 15px 0 0;
}

.swiperPagination span {
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #DDD;
}

.swiperPagination span.swiperPaginationActive {
    background: #000 !important;
}

.homeBeyondSwiperSliderLinks {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.homeBeyondSwiperSliderLinks li {
    margin: 20px 20px 0 0;
}

/* SP */
@media only screen and (max-width:768px) {
    .homeBeyondSwiperSlider {
        width: 100%;
    }

    .homeBeyondSwiperSliderItem {
        margin: 0;
    }

    .homeBeyondSwiperSliderBgBefore {
        width: 10%;
    }

    .homeBeyondSwiperSliderBgAfter {
        width: 10%;
    }

    .homeBeyondSwiperSliderLinks {
        justify-content: flex-start;
    }

    .homeBeyondSwiperSliderItemImageTitle {
        bottom: 10%;
        left: 0;
        width: 95%;
    }

    .homeBeyondSwiperSliderItemImageTitleBg {
        font-size: 1.2rem;
        line-height: 2.0;
    }
    .homeBeyondSwiperSliderItemImageTitleLink {
        font-size: 1.1rem;
        padding: 0 0 0 10px;
    }
    .homeBeyondSwiperSliderItemImageTitle .linkArrow {
        right: 35px;
    }
}


/*
.beyondSlider {
  position: relative;
  z-index: 0;
  margin: 50px 0 100px;
}

.beyondSliderItem {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}

.beyondSliderItemLeft {
  position: relative;
  z-index: 2;
  width: 45%;
}

.beyondSliderHeadline {
  position: absolute;
  top: 13.8%;
  left: 0;
  width: 101.5%;
}

.beyondSliderHeadline img {
  width: 100%;
}

.beyondSliderLinks {
  position: absolute;
  bottom: 0;
  left: 0;
}

.beyondSliderLinks a {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
}

.beyondSliderItemRight {
  position: relative;
  z-index: 1;
  width: 55%;
}

.beyondSliderItemRight div {
  display: block;
  width: 100%;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.beyondSliderTopnewsWrap {
  position: relative;
}

.beyondSliderTopnews {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 100%;
  padding: 10px 40px 10px 20px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  line-height: 1.4;
}

.beyondSliderTopnews .linkArrowStatic {
  position: absolute;
  right: 0px;
  bottom: 20px;
}
*/

/* SP */
@media only screen and (max-width:768px) {

    .homeBeyondBgInitial {
        z-index: 2;
    }

    .homeBeyondBg {
        animation: 6s homeBeyondBgSp ease forwards;
    }

    .beyondSliderItem {
        flex-flow: wrap-reverse;
    }

    .beyondSliderItemLeft {
        position: relative;
        width: 100%;
        margin: 30px 0 0;
    }

    .beyondSliderHeadline {
        font-family: 'Noto Sans JP';
        position: relative;
        top: 0;
        width: 100%;
        font-size: 4.0rem;
        font-weight: bold;
        letter-spacing: 0.5rem;
        line-height: 1.4;
        margin: 0 0 30px;
    }

    /*
  .beyondSliderLinks {
    position: relative;
    bottom: 0;
    left: 0;
  }
*/

    .beyondSliderItemRight {
        width: 100%;
    }

}

/*iPadAir（820px）用、もしくは縦長で横が大きいタブレット用*/
@media screen and (min-width: 769px) and (orientation: portrait) {
    .beyondSliderHeadline {
        font-size: 6.4rem;
    }
}

@keyframes homeBeyondBg {
    0% {
        opacity: 0;
        top: 0%;
    }

    25% {
        opacity: 0.2;
        top: -700%;
    }

    75% {
        opacity: 0.2;
        top: -700%;
    }

    99% {
        opacity: 0;
        top: -700%;
    }

    100% {
        top: 0%;
        display: none;
    }
}

@keyframes homeBeyondBgSp {
    0% {
        opacity: 0;
        top: 100%;
    }

    25% {
        opacity: 0.2;
        top: -400%;
    }

    75% {
        opacity: 0.2;
        top: -400%;
    }

    99% {
        opacity: 0;
        top: -400%;
        display: none;
    }

    100% {
        opacity: 0;
        top: 0%;
    }
}
/*図書館と地域連携研究センターのリンク*/
.homeLink {
    padding: 65px 0 55px;
    background: #f4f2ed;
}

.homeLinkWrap {
    max-width: 660px;
}

/* SP */
@media only screen and (max-width:768px) {
    .homeLinkWrap {
        width: 80%;
    }
}

/* iPadMini（768px）のみ調整 */
@media only screen and (width:768px) {
    .homeLinkWrap {
        width: 40%;
    }
}



/**********************/
/****** 中ページ ****/
/**********************/
/* 共通（中ページ共通パーツ） */