@charset "UTF-8";
/* Scss Document */
/* CSS Document */
@media screen and (max-width: 768px) {
  .pc_ver {
    display: none; } }

@media screen and (min-width: 769px) {
  .sp_ver {
    display: none; } }

body {
  position: relative; }

#sidebg {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 90%;
  overflow: hidden;
  z-index: 2; }

#sidebg:before {
  position: absolute;
  left: 0;
  background: url(/admissions/academics/manabigate/common/img/top/bg1.jpg) left top repeat-y;
  display: block;
  width: 227px;
  height: 1440px;
  content: ""; }
  @media screen and (min-width: 769px) {
    #sidebg:before {
      top: 55%; } }
  @media screen and (max-width: 768px) {
    #sidebg:before {
      top: 35%; } }
  @media screen and (max-width: 768px) {
    #sidebg:before {
      background-size: 30% auto; } }

#sidebg:after {
  position: absolute;
  right: 0;
  background: url(/admissions/academics/manabigate/common/img/top/bg2.jpg) right top repeat-y;
  display: block;
  width: 243px;
  height: 1312px;
  content: ""; }
  @media screen and (min-width: 769px) {
    #sidebg:after {
      top: 35%; } }
  @media screen and (max-width: 768px) {
    #sidebg:after {
      top: 20%; } }
  @media screen and (max-width: 768px) {
    #sidebg:after {
      background-size: 30% auto; } }

.svgobj {
  position: absolute; }

/* ============================
¥á¥¤¥ó¥¤¥á©`¥¸
============================ */
#mainimage {
  width: 100%;
  position: relative;
  z-index: 1; }
  @media screen and (min-width: 769px) {
    #mainimage {
      padding-bottom: 67%;
      background: url(/admissions/academics/manabigate/common/img/top/mainbg.jpg) center center no-repeat;
      background-size: cover; } }
  @media screen and (max-width: 768px) {
    #mainimage {
      padding-bottom: 115.2%;
      background: url(/admissions/academics/manabigate/common/img/top/mainbg_sp.jpg) center center no-repeat;
      background-size: cover; } }

#sitettl {
  position: absolute;
  transform: translate(-50%);
  animation: fadein1 .5s ease-in-out; }
  @media screen and (min-width: 769px) {
    #sitettl {
      top: 100px;
      left: 50%; } }
  @media screen and (max-width: 768px) {
    #sitettl {
      top: 20px;
      left: 50%;
      width: 96%; } }

#sitettl > div {
  animation: ttlmotion .5s ease-in-out; }

#sitettl.fixs {
  opacity: 1; }

@media screen and (min-width: 769px) {
  #obj1 {
    top: 8%;
    left: 11.6%; } }
@media screen and (max-width: 768px) {
  #obj1 {
    width: 8%;
    top: 4%;
    left: 8%; } }

@media screen and (min-width: 769px) {
  #obj2 {
    top: 38%;
    left: 13.8%; } }
@media screen and (max-width: 768px) {
  #obj2 {
    width: 8%;
    top: 45%;
    left: 3%; } }

*::-ms-backdrop, #obj2 {
  display: none; }

/* IE11 */
@media screen and (min-width: 769px) {
  #obj3 {
    top: 23.8%;
    right: 14.25%; } }
@media screen and (max-width: 768px) {
  #obj3 {
    width: 8%;
    top: 8.8%;
    right: 5%; } }

@media screen and (min-width: 769px) {
  #obj4 {
    top: 46.2%;
    right: 20%; } }
@media screen and (max-width: 768px) {
  #obj4 {
    width: 8%;
    top: 65.2%;
    right: 15%; } }

.bm01 {
  animation: horizontal1 2s ease-in-out infinite alternate; }

.bm02 {
  animation: horizontal2 2s ease-in-out infinite alternate; }

.bm03 {
  animation: horizontal2 1s ease-in-out infinite alternate; }

.bm04 {
  animation: horizontal1 1s ease-in-out infinite alternate; }

.fi01 img {
  animation: fadein1 1s ease-in-out; }

.fi02 img {
  animation: fadein1 2s ease-in-out; }

.fi03 img {
  animation: fadein1 3s ease-in-out; }

.fi04 img {
  animation: fadein1 4s ease-in-out; }

@keyframes horizontal1 {
  0% {
    transform: translate(-13px, -6px); }
  100% {
    transform: translate(0px, 0px); } }
@keyframes horizontal2 {
  0% {
    transform: translate(10px, 5px); }
  100% {
    transform: translate(0px, 0px); } }
@keyframes horizontal3 {
  0% {
    transform: translate(5px, 8px); }
  100% {
    transform: translate(0px, 0px); } }
@keyframes fadein1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes ttlmotion {
  0% {
    transform: scale(1.1, 1.1); }
  50% {
    transform: scale(0.9, 0.9); }
  75% {
    transform: scale(1.05, 1.05); }
  87% {
    transform: scale(0.95, 0.95); }
  93% {
    transform: scale(1.02, 1.02); }
  96% {
    transform: scale(0.98, 0.98); }
  98% {
    transform: scale(1.01, 1.01); }
  100% {
    transform: scale(1, 1); } }
/* ============================
¥á¥¤¥ó¥¤¥á©`¥¸Ö±áá¤Î¥Æ¥­¥¹¥È
============================ */
#mainimage + div {
  width: 100%;
  position: relative;
  z-index: 5;
  max-width: 1080px;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #mainimage + div {
      line-height: 2.5; } }
  @media screen and (max-width: 768px) {
    #mainimage + div {
      font-size: 0.777rem;
      line-height: 1.8; } }
  @media screen and (min-width: 769px) {
    #mainimage + div {
      padding: 0 3% 190px; } }
  @media screen and (max-width: 768px) {
    #mainimage + div {
      padding: 0 3% 60px; } }

@media screen and (min-width: 769px) {
  #obj10 {
    top: -200px;
    right: 21%; } }
@media screen and (max-width: 768px) {
  #obj10 {
    top: -50px;
    right: 10%;
    width: 8%; } }

@media screen and (min-width: 769px) {
  #obj11 {
    top: 0px;
    left: 1%; } }
@media screen and (max-width: 768px) {
  #obj11 {
    top: 0px;
    left: 1%;
    width: 8%; } }

@media screen and (min-width: 769px) {
  #obj12 {
    top: 0px;
    right: 5.3%; } }
@media screen and (max-width: 768px) {
  #obj12 {
    top: 0px;
    right: 5.3%;
    width: 8%; } }

@media screen and (min-width: 769px) {
  #obj13 {
    bottom: 15%;
    left: 7%; } }
@media screen and (max-width: 768px) {
  #obj13 {
    bottom: 15%;
    left: 7%;
    width: 8%; } }

@media screen and (min-width: 769px) {
  #obj14 {
    bottom: 0;
    left: 32.4%; } }
@media screen and (max-width: 768px) {
  #obj14 {
    bottom: 0;
    left: 32.4%;
    width: 8%; } }

@media screen and (min-width: 769px) {
  #obj15 {
    bottom: 7%;
    right: 20%; } }
@media screen and (max-width: 768px) {
  #obj15 {
    bottom: 7%;
    right: 20%;
    width: 8%; } }

/* ============================
ѧ²¿ßx’k
============================ */
#sec1 {
  position: relative;
  z-index: 20;
  overflow-x: hidden;
}
  @media screen and (min-width: 769px) {
    #sec1 {
      margin-top: 110px;
	  padding-bottom: 100px;
	  } }
  @media screen and (max-width: 768px) {
    #sec1 {
      margin-top: 60px;
      padding-bottom: 360px; } }

#sec1 h2 {
  max-width: 80%;
  margin: 0 auto; }

#sec1 .uglist {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-bottom: 180px; }
  @media screen and (min-width: 769px) {
    #sec1 .uglist {
      max-width: 760px; } }
  @media screen and (max-width: 768px) {
    #sec1 .uglist {
      width: 100%;
      max-width: 836px;
      padding: 5%;
      margin-top: -200px; } }
  #sec1 .uglist > li {
    width: 47.3%;
    margin-right: 5.2%;
    color: #FFF;
    font-weight: 900;
    text-align: left;
    position: relative; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist > li {
        margin-top: 100px; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist > li {
        margin-top: 230px; } }
  #sec1 .uglist > li:nth-child(2n) {
    margin-right: 0; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist > li:nth-child(2n) {
        transform: translateY(180px); } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist > li:nth-child(2n) {
        transform: translateY(120px); } }
  #sec1 .uglist a {
    display: block;
    overflow: hidden; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist a {
        width: 100%;
        padding-bottom: 100%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist a {
        width: 130%;
        padding-bottom: 130%; } }
  @media screen and (max-width: 768px) {
    #sec1 .uglist > li:nth-child(odd) a {
      position: absolute;
      top: 0;
      left: 0; } }
  @media screen and (max-width: 768px) {
    #sec1 .uglist > li:nth-child(even) a {
      position: absolute;
      top: 0;
      right: 0; } }
  #sec1 .uglist a span {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    font-weight: 400;
    line-height: 1.5;
    color: #FFF;
    font-style: italic; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist a span {
        font-size: 1.222rem;
        letter-spacing: .25em; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist a span {
        font-size: 0.777rem;
        letter-spacing: .15em; } }
  #sec1 .uglist a:before {
    z-index: -1;
    width: 71%;
    height: 71%;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); }
  #sec1 .uglist a:after {
    z-index: 2;
    width: 66%;
    height: 66%;
    content: "";
    display: block;
    position: absolute;
    top: 53%;
    left: 50%;
    border-top: solid 1px #FFF;
    border-left: solid 1px #FFF;
    transform: translate(-50%, -50%) rotate(45deg); }
  #sec1 .uglist li.law a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_law.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.law a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.law a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.law a:before {
    background-color: #d70146;
    background: linear-gradient(45deg, #d70146 0%, #ea5b6e 100%); }
  #sec1 .uglist li.biz a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_biz.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.biz a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.biz a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.biz a:before {
    background: #e83828;
    background: linear-gradient(90deg, #e83828 0%, #ee635d 100%); }
  #sec1 .uglist li.ecm a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_ecm.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.ecm a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.ecm a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.ecm a:before {
    background: #f39800;
    background: linear-gradient(45deg, #f39800 0%, #e9b972 100%); }
  #sec1 .uglist li.frg a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_frg.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.frg a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.frg a {
        background-position: center top 30%;
        background-size: 30% auto; } }
  #sec1 .uglist li.frg a:before {
    background: #d4b42f;
    background: linear-gradient(45deg, #d4b42f 0%, #ffce00 100%); }
  #sec1 .uglist li.hmn a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_hmn.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.hmn a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.hmn a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.hmn a:before {
    background: #e85298;
    background: linear-gradient(45deg, #e85298 0%, #f97cb6 100%); }
  #sec1 .uglist li.urb a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_urb.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.urb a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.urb a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.urb a:before {
    background: #26b7bc;
    background: linear-gradient(45deg, #26b7bc 0%, #5bd4d8 100%); }
  #sec1 .uglist li.sci a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_sci.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.sci a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.sci a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.sci a:before {
    background: #227bc0;
    background: linear-gradient(45deg, #227bc0 0%, #7f96d7 100%); }
  #sec1 .uglist li.inf a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_inf.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.inf a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.inf a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.inf a:before {
    background: #a1a3a0;
    background: linear-gradient(90deg, #a1a3a0 0%, #c6cbc3 100%); }
  #sec1 .uglist li.agr a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_agr.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.agr a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.agr a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.agr a:before {
    background: #22ac38;
    background: linear-gradient(45deg, #22ac38 0%, #7dc88a 100%); }
  #sec1 .uglist li.pha a {
    background: url("/admissions/academics/manabigate/common/img/top/ic_pha.svg") no-repeat; }
    @media screen and (min-width: 769px) {
      #sec1 .uglist li.pha a {
        background-position: center top 40%; } }
    @media screen and (max-width: 768px) {
      #sec1 .uglist li.pha a {
        background-position: center top 35%;
        background-size: 30% auto; } }
  #sec1 .uglist li.pha a:before {
    background: #8561a1;
    background: linear-gradient(45deg, #8561a1 0%, #a688bd 100%); }


#sec1 .notice {
 display: flex;
 justify-content: center;
 padding:  0 3%;
 position: absolute;
 bottom:0;
 left:50%;
 transform: translateX(-50%);
 width: 94%;
}

/*20210319*/
#sec1 .uglist a span sup {
  font-size: .8rem;
  vertical-align: super;
  position: relative;
  top: .2em;
}