@import url(/assets/wonder/css/base.css);
@media screen and (min-width: 751px) { .sp { display: none !important; }
  .pc { display: block; } }
@media screen and (max-width: 750px) { .pc { display: none !important; }
  .sp { display: block; }
  .fit { width: 100%; height: auto; } }
/*-------------------------------------------------
	++ BASE
-------------------------------------------------*/
body { font-feature-settings: "palt"; font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 400; }
@media screen and (max-width: 750px) { body { font-size: 4vw; } }

#container { margin: 0 auto; text-align: center; position: relative; width: 100%; z-index: 1; }
@media screen and (min-width: 751px) { #container { min-width: 1600px; } }

.inner { display: block; clear: both; width: 100%; max-width: 1300px; margin: 0 auto; text-align: center; position: relative; }

/*-------------------------------------------------
	++ MAIN
-------------------------------------------------*/
#main { position: relative; background: #b0e2ff url("../img/bg_w_blue.svg") no-repeat center bottom; background-size: 100% auto; width: 100%; overflow: hidden; }
@media screen and (min-width: 751px) { #main { padding: 0 50px; height: 2110px; } }
@media screen and (max-width: 750px) { #main { padding-bottom: 14vw; width: 100%; overflow: hidden; } }
#main .mainHead { position: relative; }
@media screen and (min-width: 751px) { #main .mainHead { padding-top: 40px; } }
@media screen and (max-width: 750px) { #main .mainHead .mainTitle { padding: 0 10vw; } }
#main .mainHead .mainDesc { color: #269ceb; font-size: 14px; font-weight: 500; margin-top: 10px; display: inline-block; padding-left: 114px; }
@media screen and (max-width: 750px) { #main .mainHead .mainDesc { font-size: 3.2vw; padding: 0 10vw; line-height: 1.6; margin-top: 2vw; } }
#main .mainHead .mainDesc .notif { border: 1px solid #269ceb; display: inline-block; padding: 2px 5px; margin-left: 10px; }
@media screen and (min-width: 751px) { #main .mainHead .logo { position: absolute; top: 60px; left: 50%; margin-left: 545px; } }
@media screen and (max-width: 750px) { #main .mainHead .logo { background: #FFF; padding: 5vw; margin-bottom: 5vw; }
  #main .mainHead .logo img { display: block; width: 30%; margin: 0 auto; text-align: center; } }
#main .mainMapWrap { width: 100%; }
@media screen and (max-width: 750px) { #main .mainMapWrap { overflow-x: scroll; padding-top: 7vw; } }
#main .mainMap { background-image: url("/assets/wonder/img/main_anime_bg.png"); background-repeat: no-repeat; position: relative; }
@media screen and (min-width: 751px) { #main .mainMap { background-position: center top -20px; background-size: 1473px auto; height: 875px; } }
@media screen and (max-width: 750px) { #main .mainMap { background-position: center top -3vw; background-size: 100% auto; width: 215vw; height: 136vw; } }
#main .mainCopy { position: relative; }
@media screen and (max-width: 750px) { #main .mainCopy { margin-top: 3vw; }
  #main .mainCopy h2 { padding: 0 9vw; } }
#main .mainCopy .text { color: #269ceb; font-size: 16px; font-weight: 600; margin-top: 20px; }
@media screen and (max-width: 750px) { #main .mainCopy .text { font-size: 4vw; margin-top: 4vw; padding: 0 9vw; text-align: left; line-height: 1.7; } }
#main .mainCopy .mainNavi { margin: 55px auto 0 auto; max-width: 1200px; }
@media screen and (max-width: 750px) { #main .mainCopy .mainNavi { margin-top: 23vw; } }
#main .mainCopy .mainNavi ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
@media screen and (min-width: 751px) { #main .mainCopy .mainNavi ul { gap: 0 30px; } }
@media screen and (max-width: 750px) { #main .mainCopy .mainNavi ul { padding: 0 8vw; gap: 3vw 0; } }
#main .mainCopy .mainNavi ul li { width: calc(calc(100% - 60px) / 3); text-align: center; }
@media screen and (max-width: 750px) { #main .mainCopy .mainNavi ul li { width: 100%; } }
#main .mainCopy .mainNavi ul li a { display: block; position: relative; padding: 30px; color: #FFF; font-weight: 600; font-size: 24px; background: url("/assets/wonder/img/icon_arrow.svg"); background-repeat: no-repeat; background-position: left 20px center; background-size: 24px 24px; }
@media screen and (max-width: 750px) { #main .mainCopy .mainNavi ul li a { font-size: 5.3333333333vw; padding: 7.2vw 3vw; background-position: left 5vw center; background-size: 5vw 5vw; } }
#main .mainCopy .mainNavi ul li.greeting a { background-color: #269ceb; }
#main .mainCopy .mainNavi ul li.greeting a:after { content: ""; width: 115px; height: 115px; background: url("/assets/wonder/img/main_greeting.png") no-repeat center bottom; background-size: 115px auto; position: absolute; right: 0; bottom: 0; }
@media screen and (max-width: 750px) { #main .mainCopy .mainNavi ul li.greeting a:after { width: 25vw; height: 25vw; background-size: 25vw auto; } }
#main .mainCopy .mainNavi ul li.humansciences a { background-color: #e85298; }
#main .mainCopy .mainNavi ul li.tourism a { background-color: #44b762; }
#main .accPlain { position: absolute; }
@media screen and (min-width: 751px) { #main .accPlain { top: 110px; left: 50%; margin-left: -500px; } }
@media screen and (max-width: 750px) { #main .accPlain { top: 17vw; left: -11vw; width: 27vw; } }
@media screen and (min-width: 751px) { #main .accEncopy { position: absolute; top: calc(100% + 5px); left: 50%; margin-left: -735px; } }
@media screen and (max-width: 750px) { #main .accEncopy { padding: 0 18vw; margin: 2vw auto 0 auto; } }
#main .accLeaf { position: absolute; left: 50%; }
@media screen and (min-width: 751px) { #main .accLeaf { top: 84px; margin-left: -214px; } }
@media screen and (max-width: 750px) { #main .accLeaf { width: 41vw; top: 12vw; margin-left: -31vw; } }
#main .accSurf { position: absolute; }
@media screen and (min-width: 751px) { #main .accSurf { top: 10px; left: 50%; margin-left: -487px; } }
@media screen and (max-width: 750px) { #main .accSurf { width: 8vw; top: -14vw; left: 24vw; } }
#main .accWhale { position: absolute; }
@media screen and (min-width: 751px) { #main .accWhale { top: 30px; left: 50%; margin-left: 475px; } }
@media screen and (max-width: 750px) { #main .accWhale { width: 18vw; top: 60vw; right: 26px; } }
#main .accX { position: absolute; }
@media screen and (min-width: 751px) { #main .accX { top: 344px; left: 50%; margin-left: -20px; } }
@media screen and (max-width: 750px) { #main .accX { width: 17vw; top: 51vw; left: 50%; margin-left: -2vw; } }

.anime { position: absolute; left: 50%; background-repeat: no-repeat; background-position: left top; }
.anime.anime01 { background-image: url(/assets/wonder/img/anime/anime01.png); }
@media screen and (min-width: 751px) { .anime.anime01 { animation: parapara1 4s steps(4) infinite; background-size: auto 310px; top: 10px; margin-left: -444px; width: 333px; height: 310px; } }
@media screen and (max-width: 750px) { .anime.anime01 { animation: parapara1sp 4s steps(4) infinite; background-size: auto 45.5882352941vw; top: 1.4705882353vw; margin-left: -65.2941176471vw; width: 48.9705882353vw; height: 45.5882352941vw; } }
.anime.anime02 { background-image: url("/assets/wonder/img/anime/anime02.png"); }
@media screen and (min-width: 751px) { .anime.anime02 { animation: parapara2 2s steps(2) infinite; background-size: auto 235px; top: 82px; margin-left: -120px; width: 275px; height: 235px; } }
@media screen and (max-width: 750px) { .anime.anime02 { animation: parapara2sp 2s steps(2) infinite; background-size: auto 34.5588235294vw; top: 12.0588235294vw; margin-left: -17.6470588235vw; width: 40.4411764706vw; height: 34.5588235294vw; } }
.anime.anime03 { background-image: url("/assets/wonder/img/anime/anime03.png"); }
@media screen and (min-width: 751px) { .anime.anime03 { animation: parapara3 1s steps(3) infinite; background-size: auto 68px; top: 45px; margin-left: -94px; width: 130px; height: 68px; } }
@media screen and (max-width: 750px) { .anime.anime03 { animation: parapara3sp 1s steps(3) infinite; background-size: auto 10vw; top: 6.6176470588vw; margin-left: -13.8235294118vw; width: 19.1176470588vw; height: 10vw; } }
.anime.anime04 { background-image: url("/assets/wonder/img/anime/anime04.png"); }
@media screen and (min-width: 751px) { .anime.anime04 { animation: parapara4 2s steps(2) infinite; background-size: auto 105px; top: 107px; margin-left: 358px; width: 144px; height: 105px; } }
@media screen and (max-width: 750px) { .anime.anime04 { animation: parapara4sp 2s steps(2) infinite; background-size: auto 15.4411764706vw; top: 15.7352941176vw; margin-left: 52.6470588235vw; width: 21.1764705882vw; height: 15.4411764706vw; } }
.anime.anime05 { background-image: url("/assets/wonder/img/anime/anime05.png"); }
@media screen and (min-width: 751px) { .anime.anime05 { animation: parapara5 3s steps(3) infinite; background-size: auto 154px; top: 270px; margin-left: 470px; width: 116px; height: 154px; } }
@media screen and (max-width: 750px) { .anime.anime05 { animation: parapara5sp 3s steps(3) infinite; background-size: auto 22.6470588235vw; top: 39.7058823529vw; margin-left: 69.1176470588vw; width: 17.0588235294vw; height: 22.6470588235vw; } }
.anime.anime06 { background-image: url("/assets/wonder/img/anime/anime06.png"); }
@media screen and (min-width: 751px) { .anime.anime06 { animation: parapara6 2s steps(2) infinite; background-size: auto 64px; top: 357px; margin-left: 483px; width: 48px; height: 64px; } }
@media screen and (max-width: 750px) { .anime.anime06 { animation: parapara6sp 2s steps(2) infinite; background-size: auto 9.4117647059vw; top: 52.5vw; margin-left: 71.0294117647vw; width: 7.0588235294vw; height: 9.4117647059vw; } }
.anime.anime07 { background-image: url("/assets/wonder/img/anime/anime07.png"); }
@media screen and (min-width: 751px) { .anime.anime07 { animation: parapara7 1s steps(2) infinite; background-size: auto 173px; top: 238px; margin-left: -658px; width: 126px; height: 173px; } }
@media screen and (max-width: 750px) { .anime.anime07 { animation: parapara7sp 1s steps(2) infinite; background-size: auto 25.4411764706vw; top: 35vw; margin-left: -96.7647058824vw; width: 18.5294117647vw; height: 25.4411764706vw; } }
.anime.anime08 { background-image: url("/assets/wonder/img/anime/anime08.png"); }
@media screen and (min-width: 751px) { .anime.anime08 { animation: parapara8 2s steps(2) infinite; background-size: auto 75px; top: 451px; margin-left: -346px; width: 75px; height: 75px; } }
@media screen and (max-width: 750px) { .anime.anime08 { animation: parapara8sp 2s steps(2) infinite; background-size: auto 11.0294117647vw; top: 66.3235294118vw; margin-left: -50.8823529412vw; width: 11.0294117647vw; height: 11.0294117647vw; } }
.anime.anime09 { background-image: url("/assets/wonder/img/anime/anime09.png"); }
@media screen and (min-width: 751px) { .anime.anime09 { animation: parapara09 2s steps(2) infinite; background-size: auto 153px; top: 435px; margin-left: -308px; width: 153px; height: 153px; } }
@media screen and (max-width: 750px) { .anime.anime09 { animation: parapara09sp 2s steps(2) infinite; background-size: auto 22.5vw; top: 63.9705882353vw; margin-left: -45.2941176471vw; width: 22.5vw; height: 22.5vw; } }
.anime.anime10 { background-image: url("/assets/wonder/img/anime/anime10.png"); }
@media screen and (min-width: 751px) { .anime.anime10 { animation: parapara10 3s steps(3) infinite; background-size: auto 117px; top: 395px; margin-left: 223px; width: 233px; height: 117px; } }
@media screen and (max-width: 750px) { .anime.anime10 { animation: parapara10sp 1s steps(3) infinite; background-size: auto 17.2058823529vw; top: 58.0882352941vw; margin-left: 32.7941176471vw; width: 34.2647058824vw; height: 17.2058823529vw; } }

.pin { position: absolute; left: 50%; }
@media screen and (min-width: 751px) { .pin { width: 125px; height: 157px; } }
@media screen and (max-width: 750px) { .pin { width: 15vw; height: 20vw; } }
.pin a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom 5px; transition: all 0.2s ease-in; }
@media screen and (min-width: 751px) { .pin a { background-size: 57px 74px; background-image: url("/assets/wonder/img/main_pin.png"); }
  .pin a:hover { opacity: 1; background-size: 125px 152px; transform-origin: center bottom; } }
@media screen and (max-width: 750px) { .pin a { background-size: 15vw 18vw; } }
.pin:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: url("/assets/wonder/img/main_pin_shadow.png") no-repeat center bottom; z-index: 0; }
@media screen and (min-width: 751px) { .pin:before { background-size: 25px 15px; } }
@media screen and (max-width: 750px) { .pin:before { background-size: 3vw 3vw; } }
.pin.pin01 a { animation: pyon 4s 2s infinite; }
@media screen and (min-width: 751px) { .pin.pin01 { top: 175px; margin-left: -295px; }
  .pin.pin01 a:hover { background-image: url("/assets/wonder/img/main_pin_hover01.png"); } }
@media screen and (max-width: 750px) { .pin.pin01 { top: 28vw; margin-left: -42vw; }
  .pin.pin01 a { background-image: url("/assets/wonder/img/main_pin_hover01.png"); } }
.pin.pin02 a { animation: pyon 4s 2.5s infinite; }
@media screen and (min-width: 751px) { .pin.pin02 { top: -40px; margin-left: 25px; }
  .pin.pin02 a:hover { background-image: url("/assets/wonder/img/main_pin_hover02.png"); } }
@media screen and (max-width: 750px) { .pin.pin02 { top: 0px; margin-left: 7vw; }
  .pin.pin02 a { background-image: url("/assets/wonder/img/main_pin_hover02.png"); } }
.pin.pin03 a { animation: pyon 4s 3s infinite; }
@media screen and (min-width: 751px) { .pin.pin03 { top: 25px; margin-left: 295px; }
  .pin.pin03 a:hover { background-image: url("/assets/wonder/img/main_pin_hover03.png"); } }
@media screen and (max-width: 750px) { .pin.pin03 { top: 6vw; margin-left: 46vw; }
  .pin.pin03 a { background-image: url("/assets/wonder/img/main_pin_hover03.png"); } }
.pin.pin04 a { animation: pyon 4s 3.5s infinite; }
@media screen and (min-width: 751px) { .pin.pin04 { top: 255px; margin-left: 280px; }
  .pin.pin04 a:hover { background-image: url("/assets/wonder/img/main_pin_hover04.png"); } }
@media screen and (max-width: 750px) { .pin.pin04 { top: 42vw; margin-left: 46vw; }
  .pin.pin04 a { background-image: url("/assets/wonder/img/main_pin_hover04.png"); } }
.pin.pin05 a { animation: pyon 4s 4s infinite; }
@media screen and (min-width: 751px) { .pin.pin05 { top: 430px; margin-left: 165px; }
  .pin.pin05 a:hover { background-image: url("/assets/wonder/img/main_pin_hover05.png"); } }
@media screen and (max-width: 750px) { .pin.pin05 { top: 65vw; margin-left: 28vw; }
  .pin.pin05 a { background-image: url("/assets/wonder/img/main_pin_hover05.png"); } }
.pin.pin06 a { animation: pyon 4s 4.5s infinite; }
@media screen and (min-width: 751px) { .pin.pin06 { top: 545px; margin-left: -170px; }
  .pin.pin06 a:hover { background-image: url("/assets/wonder/img/main_pin_hover06.png"); } }
@media screen and (max-width: 750px) { .pin.pin06 { top: 78vw; margin-left: -22vw; }
  .pin.pin06 a { background-image: url("/assets/wonder/img/main_pin_hover06.png"); } }
.pin.pin07 a { animation: pyon 4s 5s infinite; }
@media screen and (min-width: 751px) { .pin.pin07 { top: 305px; margin-left: -400px; }
  .pin.pin07 a:hover { background-image: url("/assets/wonder/img/main_pin_hover07.png"); } }
@media screen and (max-width: 750px) { .pin.pin07 { top: 46vw; margin-left: -52vw; }
  .pin.pin07 a { background-image: url("/assets/wonder/img/main_pin_hover07.png"); } }

@keyframes pyon { 0% { transform: scale(1, 1) translate(0, 0%); }
  84% { transform: scale(1, 1) translate(0, 0%); }
  86% { transform: scale(1.1, 0.9) translate(0, 5px); }
  88% { transform: scale(1.2, 0.8) translate(0, 15px); }
  90% { transform: scale(1, 1) translate(0, 0%); }
  94% { transform: scale(0.9, 1.2) translate(0, -40px); }
  96% { transform: scale(0.9, 1.2) translate(0, -20px); }
  98% { transform: scale(1.2, 0.8) translate(0, 15px); }
  100% { transform: scale(1, 1) translate(0, 0%); } }
@keyframes pyon2 { 0% { transform: scale(1, 1) translate(0, 0%); }
  30% { transform: scale(1, 1) translate(0, 0%); }
  40% { transform: scale(1.1, 0.9) translate(0, 5px); }
  50% { transform: scale(1.2, 0.8) translate(0, 15px); }
  60% { transform: scale(1, 1) translate(0, 0%); }
  70% { transform: scale(0.9, 1.2) translate(0, -40px); }
  80% { transform: scale(0.9, 1.2) translate(0, -20px); }
  90% { transform: scale(1.2, 0.8) translate(0, 15px); }
  100% { transform: scale(1, 1) translate(0, 0%); } }
@keyframes parapara1 { 0% { background-position: 0 0; }
  100% { background-position: -1332px 0; } }
@keyframes parapara2 { 0% { background-position: 0 0; }
  100% { background-position: -550px 0; } }
@keyframes parapara3 { 0% { background-position: 0 0; }
  100% { background-position: -390px 0; } }
@keyframes parapara4 { 0% { background-position: 0 0; }
  100% { background-position: -288px 0; } }
@keyframes parapara5 { 0% { background-position: 0 0; }
  100% { background-position: -348px 0; } }
@keyframes parapara6 { 0% { background-position: 0 0; }
  100% { background-position: -96px 0; } }
@keyframes parapara7 { 0% { background-position: 0 0; }
  100% { background-position: -252px 0; } }
@keyframes parapara8 { 0% { background-position: 0 0; }
  100% { background-position: -150px 0; } }
@keyframes parapara09 { 0% { background-position: 0 0; }
  100% { background-position: -306px 0; } }
@keyframes parapara10 { 0% { background-position: 0 0; }
  100% { background-position: -699px 0; } }
@keyframes parapara1sp { 0% { background-position: 0 0; }
  100% { background-position: -195.8823529412vw 0; } }
@keyframes parapara2sp { 0% { background-position: 0 0; }
  100% { background-position: -80.8823529412vw 0; } }
@keyframes parapara3sp { 0% { background-position: 0 0; }
  100% { background-position: -57.3529411765vw 0; } }
@keyframes parapara4sp { 0% { background-position: 0 0; }
  100% { background-position: -42.3529411765vw 0; } }
@keyframes parapara5sp { 0% { background-position: 0 0; }
  100% { background-position: -51.1764705882vw 0; } }
@keyframes parapara6sp { 0% { background-position: 0 0; }
  100% { background-position: -14.1176470588vw 0; } }
@keyframes parapara7sp { 0% { background-position: 0 0; }
  100% { background-position: -37.0588235294vw 0; } }
@keyframes parapara8sp { 0% { background-position: 0 0; }
  100% { background-position: -22.0588235294vw 0; } }
@keyframes parapara09sp { 0% { background-position: 0 0; }
  100% { background-position: -45vw 0; } }
@keyframes parapara10sp { 0% { background-position: 0 0; }
  100% { background-position: -102.7941176471vw 0; } }
.cloud { display: inline-block; z-index: 1; position: absolute; left: -20%; }
@media screen and (max-width: 750px) { .cloud { left: -30%; } }
.cloud.cloud01 { top: 15%; animation: 20s -2s cloud linear infinite; }
@media screen and (max-width: 750px) { .cloud.cloud01 { top: 20%; animation: 15s 0s cloudsp linear infinite; width: 30vw; } }
.cloud.cloud02 { top: 54%; animation: 35s -5s cloud linear infinite; }
@media screen and (max-width: 750px) { .cloud.cloud02 { top: 40%; animation: 20s 3s cloudsp linear infinite; width: 20vw; } }
.cloud.cloud03 { top: 65%; animation: 35s 0s cloud linear infinite; }
@media screen and (max-width: 750px) { .cloud.cloud03 { display: none; } }
.cloud.cloud04 { top: 75%; animation: 35s 12s cloud linear infinite; }
@media screen and (max-width: 750px) { .cloud.cloud04 { top: 65%; animation: 35s -4s cloudsp linear infinite; width: 27vw; } }
.cloud.cloud05 { top: 90%; animation: 35s -8s cloud linear infinite; }
@media screen and (max-width: 750px) { .cloud.cloud05 { display: none; } }
.cloud.cloud06 { top: 100%; animation: 35s 3s cloud linear infinite; }
@media screen and (max-width: 750px) { .cloud.cloud06 { display: none; } }

@keyframes cloud { 0% { transform: translate(0px, 0px); }
  100% { transform: translate(180vmax, -100vmax); } }
@keyframes cloudsp { 0% { transform: translate(0px, 0px); }
  100% { transform: translate(100vh, -90vh); } }
@keyframes fadein { 0% { opacity: 0; }
  100% { opacity: 1; } }
/*-------------------------------------------------
	++ COMMON
-------------------------------------------------*/
@media screen and (max-width: 750px) { .section { padding: 7vw 0; } }
.section .secHead { position: relative; margin-bottom: 80px; }
@media screen and (max-width: 750px) { .section .secHead { margin-bottom: 8vw; }
  .section .secHead h2 { padding: 0 7vw; } }

.inv { transform: translateY(80px); opacity: 0; transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
.inv.invon { opacity: 1; transform: translateY(0); }

/*-------------------------------------------------
	++ CONTENTS
-------------------------------------------------*/
#humansciences { background-color: #fef6f9; padding: 20px 0 50px 0; }
@media screen and (max-width: 750px) { #humansciences { padding: 3vw 0 10vw 0; } }

#tourism { background-color: #f4faea; padding: 60px 0 80px 0; }
@media screen and (max-width: 750px) { #tourism { padding: 10vw 0; } }

.deptBlock { position: relative; text-align: center; }
@media screen and (min-width: 751px) { .deptBlock { width: 1300px; margin: 0 auto 90px auto; }
  .deptBlock.pnL .deptBox { left: 0; }
  .deptBlock.pnR .deptBox { right: 50px; } }
.deptBlock.inv.invon .deptBox .mapIcon span { animation: pyon2 1s 0s 1; }
@media screen and (max-width: 750px) { .deptBlock .deptBg { width: 100%; overflow-x: hidden; }
  .deptBlock .deptBg img { height: 50vw; width: auto; transform: translateX(-37%); } }
.deptBlock .deptImg { position: absolute; }
.deptBlock .deptImg .anime { margin-left: 0; transform-origin: left top; }
@media screen and (min-width: 751px) { .deptBlock .deptImg { bottom: 30px; } }
@media screen and (max-width: 750px) { .deptBlock .deptImg { width: 80vw; height: 56vw; top: -5vw; left: 10vw; }
  .deptBlock .deptImg .anime { top: 0; left: 0; } }
.deptBlock .deptBox { background-color: #FFF; border-width: 3px; border-style: solid; border-radius: 10px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); }
@media screen and (min-width: 751px) { .deptBlock .deptBox { position: absolute; top: 50%; transform: translateY(-50%); width: 500px; } }
@media screen and (max-width: 750px) { .deptBlock .deptBox { position: relative; width: 80%; margin: 0 auto; text-align: center; transform: translateY(-7vw); } }
#humansciences .deptBlock .deptBox { border-color: #e888b0; }
#tourism .deptBlock .deptBox { border-color: #67b67f; }
.deptBlock .deptBox .deptName { color: #FFF; font-size: 20px; font-weight: 600; padding: 5px; border-radius: 5px; margin: 10px 10px 30px 10px; }
@media screen and (max-width: 750px) { .deptBlock .deptBox .deptName { font-size: 3.4666666667vw; padding: 1vw; margin: 2vw 2vw 4vw 2vw; } }
#humansciences .deptBlock .deptBox .deptName { background-color: #e85298; }
#tourism .deptBlock .deptBox .deptName { background-color: #44b762; }
.deptBlock .deptBox .mapIcon { position: absolute; top: -15px; right: 20px; width: 57px; height: 82px; }
@media screen and (max-width: 750px) { .deptBlock .deptBox .mapIcon { width: 9vw; height: 14vw; top: -3vw; right: 3vw; } }
.deptBlock .deptBox .mapIcon:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: url("/assets/wonder/img/main_pin_shadow.png") no-repeat center bottom; z-index: 0; }
@media screen and (min-width: 751px) { .deptBlock .deptBox .mapIcon:before { background-size: 25px 15px; } }
@media screen and (max-width: 750px) { .deptBlock .deptBox .mapIcon:before { background-size: 3vw 3vw; } }
.deptBlock .deptBox .mapIcon span { display: block; position: relative; z-index: 1; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom 5px; transition: all 0.2s ease-in; background-image: url("/assets/wonder/img/main_pin.png"); }
@media screen and (min-width: 751px) { .deptBlock .deptBox .mapIcon span { background-size: 57px 74px; } }
@media screen and (max-width: 750px) { .deptBlock .deptBox .mapIcon span { background-size: 9vw 11vw; } }
.deptBlock .deptBox .mapIcon:hover span { animation: pyon2 1s 0s 1; }
.deptBlock .deptBox h3 { margin-bottom: 20px; }
@media screen and (max-width: 750px) { .deptBlock .deptBox h3 { padding: 0 4vw; margin-bottom: 3vw; } }
.deptBlock .deptBox .text { text-align: left; padding: 0 30px; font-weight: 600; font-size: 22px; margin-bottom: 30px; }
@media screen and (max-width: 750px) { .deptBlock .deptBox .text { padding: 0 4vw; font-size: 3.7333333333vw; margin-bottom: 3vw; } }
.deptBlock .deptBox .tagBox { background-color: #f7f4f8; padding: 10px 20px; border-radius: 0 0 10px 10px; }
@media screen and (max-width: 750px) { .deptBlock .deptBox .tagBox { padding: 2vw; } }
.deptBlock .deptBox .tagBox ul { text-align: left; }
.deptBlock .deptBox .tagBox ul li { display: inline-block; font-size: 15px; font-weight: 600; color: #FFF; margin: 0px 3px 7px 3px; padding: 3px 14px; line-height: 1; border-radius: 9999px; }
@media screen and (max-width: 750px) { .deptBlock .deptBox .tagBox ul li { font-size: 2.4vw; margin: 0 1vw 1vw 1vw; padding: 1vw 2vw; } }
#humansciences .deptBlock .deptBox .tagBox ul li { background-color: #e85298; }
#tourism .deptBlock .deptBox .tagBox ul li { background-color: #44b762; }
.deptBlock.society01 .deptImg { background: url(/assets/wonder/img/society_img01.png) no-repeat center top; background-size: 100% auto; }
@media screen and (min-width: 751px) { .deptBlock.society01 .deptImg { right: 140px; width: 584px; height: 380px; }
  .deptBlock.society01 .deptImg .anime { transform: scale(1.4, 1.4); top: -15px; left: 75px; } }
@media screen and (max-width: 750px) { .deptBlock.society01 .deptImg .anime { transform: scale(1.2, 1.2); left: 15vw; } }
@media screen and (max-width: 750px) { .deptBlock.society02 .deptBg img { transform: translateX(-34%); } }
.deptBlock.society02 .deptImg { background: url(/assets/wonder/img/society_img02.png) no-repeat center top; background-size: 100% auto; }
.deptBlock.society02 .deptImg .leaf { position: absolute; left: 0; }
@media screen and (min-width: 751px) { .deptBlock.society02 .deptImg { right: 115px; width: 620px; height: 410px; bottom: 0; }
  .deptBlock.society02 .deptImg .anime.anime02 { transform: scale(1.6, 1.6); top: 50px; left: 135px; }
  .deptBlock.society02 .deptImg .anime.anime03 { transform: scale(1.5, 1.5); top: 5px; left: 177px; }
  .deptBlock.society02 .deptImg .leaf { top: 47px; } }
@media screen and (max-width: 750px) { .deptBlock.society02 .deptImg { top: -3vw; left: 8vw; }
  .deptBlock.society02 .deptImg .anime.anime02 { transform: scale(1.3, 1.3); top: 7vw; left: 25vw; }
  .deptBlock.society02 .deptImg .anime.anime03 { transform: scale(1.2, 1.2); top: -1vw; left: 31vw; }
  .deptBlock.society02 .deptImg .leaf { top: 4vw; left: 3vw; width: 58vw; } }
@media screen and (max-width: 750px) { .deptBlock.society03 .deptBg img { transform: translateX(-17%); } }
.deptBlock.society03 .deptImg { background: url(/assets/wonder/img/society_img03.png) no-repeat center top; background-size: 100% auto; }
.deptBlock.society03 .deptImg .anime { transform: scale(1.2, 1.2); }
@media screen and (min-width: 751px) { .deptBlock.society03 .deptImg { left: 80px; width: 577px; height: 400px; }
  .deptBlock.society03 .deptImg .anime { transform: scale(1.2, 1.2); top: 83px; left: 355px; } }
@media screen and (max-width: 750px) { .deptBlock.society03 .deptImg { left: 7vw; }
  .deptBlock.society03 .deptImg .anime { transform: scale(1.2, 1.2); top: 11vw; left: 48.4vw; } }
.deptBlock.society04 { margin-bottom: 50px; }
@media screen and (max-width: 750px) { .deptBlock.society04 { margin-bottom: 0; }
  .deptBlock.society04 .deptBg img { transform: translateX(-1%); } }
.deptBlock.society04 .deptImg { background: url(/assets/wonder/img/society_img04.png) no-repeat center top; background-size: 100% auto; }
.deptBlock.society04 .deptImg .anime { transform: scale(1.45, 1.45); }
@media screen and (min-width: 751px) { .deptBlock.society04 .deptImg { left: 150px; width: 484px; height: 361px; }
  .deptBlock.society04 .deptImg .anime.anime05 { top: -22px; left: 220px; }
  .deptBlock.society04 .deptImg .anime.anime06 { top: 103px; left: 237px; } }
@media screen and (max-width: 750px) { .deptBlock.society04 .deptImg { width: 70vw; left: 12vw; }
  .deptBlock.society04 .deptImg .anime.anime05 { top: -4vw; left: 31vw; }
  .deptBlock.society04 .deptImg .anime.anime06 { top: 14vw; left: 34vw; } }
.deptBlock.tourism01 { margin-bottom: 80px; }
@media screen and (max-width: 750px) { .deptBlock.tourism01 { margin-bottom: 0; }
  .deptBlock.tourism01 .deptBg img { transform: translateX(-1%); } }
.deptBlock.tourism01 .deptImg { background: url("/assets/wonder/img/tourism_img01.png") no-repeat center top; background-size: 100% auto; }
@media screen and (min-width: 751px) { .deptBlock.tourism01 .deptImg { left: 100px; width: 533px; height: 387px; }
  .deptBlock.tourism01 .deptImg .anime { top: -15px; left: 257px; } }
@media screen and (max-width: 750px) { .deptBlock.tourism01 .deptImg { width: 73vw; }
  .deptBlock.tourism01 .deptImg .anime { top: -3vw; left: 34vw; } }
.deptBlock.tourism02 { margin-bottom: 80px; }
@media screen and (max-width: 750px) { .deptBlock.tourism02 { margin-bottom: 0; }
  .deptBlock.tourism02 .deptBg img { transform: translateX(-7%); } }
.deptBlock.tourism02 .deptImg { background: url("/assets/wonder/img/tourism_img02.png") no-repeat center top; background-size: 100% auto; }
@media screen and (min-width: 751px) { .deptBlock.tourism02 .deptImg { left: 100px; width: 644px; height: 411px; }
  .deptBlock.tourism02 .deptImg .anime.anime08 { top: 30px; left: 165px; }
  .deptBlock.tourism02 .deptImg .anime.anime09 { top: 20px; left: 205px; } }
@media screen and (max-width: 750px) { .deptBlock.tourism02 .deptImg { width: 90vw; left: 4vw; }
  .deptBlock.tourism02 .deptImg .anime.anime08 { top: 5vw; left: 22vw; }
  .deptBlock.tourism02 .deptImg .anime.anime09 { top: 3vw; left: 28vw; } }
.deptBlock.tourism03 { margin-bottom: 50px; }
@media screen and (max-width: 750px) { .deptBlock.tourism03 { margin-bottom: 0; }
  .deptBlock.tourism03 .deptBg img { transform: translateX(-35%); } }
.deptBlock.tourism03 .deptImg { background: url("/assets/wonder/img/tourism_img03.png") no-repeat center top; background-size: 100% auto; }
@media screen and (min-width: 751px) { .deptBlock.tourism03 .deptImg { bottom: -20px; right: 230px; width: 520px; height: 465px; }
  .deptBlock.tourism03 .deptImg .anime { top: -10px; left: 95px; } }
@media screen and (max-width: 750px) { .deptBlock.tourism03 .deptImg { width: 68vw; left: 14vw; }
  .deptBlock.tourism03 .deptImg .anime { top: -3vw; left: 10vw; } }

.deptLink { max-width: 620px; margin: 0 auto; text-align: center; }
@media screen and (max-width: 750px) { .deptLink { padding: 0 10vw; } }
.deptLink a { display: block; font-size: 24px; font-weight: 600; padding: 30px 50px; color: #FFF; background: url("/assets/wonder/img/icon_arrow.svg"); background-repeat: no-repeat; background-position: left 20px center; background-size: 24px 24px; }
@media screen and (max-width: 750px) { .deptLink a { font-size: 5.3333333333vw; padding: 3vw 5vw; background-position: left 3vw center; background-size: 5vw 5vw; border-radius: 5px; } }
#humansciences .deptLink a { background-color: #e85298; }
#tourism .deptLink a { background-color: #44b762; }

#wonderful_humansciences { background: #e888b0 url("../img/bg_w_pink.svg") no-repeat center top -2px; padding-top: 95px; padding-bottom: 40px; }
@media screen and (max-width: 750px) { #wonderful_humansciences { padding-top: 16vw; } }
@media screen and (min-width: 751px) { #wonderful_humansciences .secHead { justify-content: flex-end; margin-bottom: 0; } }

#wonderful_tourism { background: #67b67f url("../img/bg_w_green.svg") no-repeat center top; padding: 80px 0 40px 0; }
@media screen and (max-width: 750px) { #wonderful_tourism { padding: 13vw 0 10vw 0; } }
#wonderful_tourism .secHead { margin-bottom: 40px; }
@media screen and (max-width: 750px) { #wonderful_tourism .secHead { margin-bottom: 3vw; } }

.wonderfulWrap { position: relative; padding-top: 80px; }
@media screen and (max-width: 750px) { .wonderfulWrap { padding-top: 13vw; } }
.wonderfulWrap .inner { max-width: 1240px; }
.wonderfulWrap .wonderfulWrapHead { text-align: left; padding: 0 25px; }
@media screen and (max-width: 750px) { .wonderfulWrap .wonderfulWrapHead { padding: 0 8vw 14vw 8vw; } }
.wonderfulWrap .wonderfulWrapHead h2 { margin-bottom: 45px; }
@media screen and (max-width: 750px) { .wonderfulWrap .wonderfulWrapHead h2 { width: 60vw; margin-bottom: 4vw; } }
.wonderfulWrap .wonderfulWrapHead .wonderfulWrapDesc { max-width: 570px; font-size: 16px; line-height: 1.6; letter-spacing: 1px; }
@media screen and (max-width: 750px) { .wonderfulWrap .wonderfulWrapHead .wonderfulWrapDesc { font-size: 3.7333333333vw; line-height: 1.8; } }
.wonderfulWrap .wonderfulWrapHead .wonderfulWrapImg { position: absolute; }
@media screen and (min-width: 751px) { .wonderfulWrap .wonderfulWrapHead .wonderfulWrapImg { top: -60px; right: -67px; } }
@media screen and (max-width: 750px) { .wonderfulWrap .wonderfulWrapHead .wonderfulWrapImg { top: -10vw; right: 4vw; width: 86vw; } }
.wonderfulWrap .secHead { display: flex; }
@media screen and (max-width: 750px) { .wonderfulWrap .secHead { justify-content: center; margin-bottom: 3vw; } }
@media screen and (max-width: 750px) { .wonderfulWrap .secHead .secHeadBox h3 { padding: 0 13vw; } }
.wonderfulWrap .secHead .secDesc { text-align: center; color: #FFF; font-weight: 600; margin-top: 20px; }
@media screen and (max-width: 750px) { .wonderfulWrap .secHead .secDesc { font-size: 3.7333333333vw; margin-top: 2vw; } }

.wonderfulBox { position: relative; margin-bottom: 40px; }
@media screen and (max-width: 750px) { .wonderfulBox { padding: 0 5vw; margin-bottom: 7vw; } }
.wonderfulBox .wonderText { position: absolute; top: 56%; text-align: left; font-size: 15px; line-height: 1.6; letter-spacing: 1px; }
@media screen and (min-width: 751px) { .wonderfulBox .wonderText { width: 565px; } }
@media screen and (max-width: 750px) { .wonderfulBox .wonderText { top: 97vw; left: 0; padding: 0 15vw; font-size: 4vw; } }
@media screen and (min-width: 751px) { .wonderfulBox.voice1_1 .wonderText { left: 570px; } }
@media screen and (max-width: 750px) { .wonderfulBox.voice1_1 .wonderText { top: 82vw; }
  .wonderfulBox.voice1_1 .wonderText .att { margin-top: 2vw !important; font-size: 3.2vw; line-height: 1.2; } }
.wonderfulBox.voice1_2 { margin-bottom: 0; }
@media screen and (min-width: 751px) { .wonderfulBox.voice1_2 .wonderText { left: 70px; } }
.wonderfulBox.voice2_1 { margin-bottom: 100px; }
@media screen and (max-width: 750px) { .wonderfulBox.voice2_1 { margin-bottom: 7vw; } }
@media screen and (min-width: 751px) { .wonderfulBox.voice2_1 .wonderText { left: 70px; } }
@media screen and (max-width: 750px) { .wonderfulBox.voice2_1 .wonderText { top: 102vw; } }
@media screen and (max-width: 750px) { .wonderfulBox.voice2_2 { margin-bottom: 0; } }
@media screen and (min-width: 751px) { .wonderfulBox.voice2_2 .wonderText { left: 570px; top: 47%; } }
@media screen and (max-width: 750px) { .wonderfulBox.voice2_2 .wonderText { top: 107vw; } }

.att { font-size: 85%; }

.indent1 { padding-left: 1rem; text-indent: -1rem; }

#qa { padding: 80px 0 120px 0; }
@media screen and (max-width: 750px) { #qa { padding: 10vw 0; } }
@media screen and (min-width: 751px) { #qa .inner { max-width: 1180px; } }
@media screen and (max-width: 750px) { #qa .inner { padding: 0 7vw; } }
#qa .secHead { text-align: left; margin-bottom: 20px; }
@media screen and (max-width: 750px) { #qa .secHead { width: 70%; }
  #qa .secHead h2 { padding: 0; } }

.qaWrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 50px; }
@media screen and (max-width: 750px) { .qaWrap { gap: 7vw 0; } }
.qaWrap .qaBox { position: relative; }
@media screen and (min-width: 751px) { .qaWrap .qaBox { width: 560px; } }
.qaWrap .qaBox .qaBase { width: 100%; }
.qaWrap .qaBox .qaBase img { width: 100%; height: auto; }
.qaWrap .qaBox .qaText { font-size: 24px; font-weight: 600; text-align: left; position: absolute; top: 135px; left: 40px; padding-bottom: 20px; border-bottom-width: 1px; border-bottom-style: dashed; }
@media screen and (max-width: 750px) { .qaWrap .qaBox .qaText { font-size: 4vw; top: 18vw; left: 8vw; padding-bottom: 2vw; } }
.qaWrap .qaBox .qaModal { position: absolute; top: 260px; left: 40px; }
@media screen and (max-width: 750px) { .qaWrap .qaBox .qaModal { top: 40vw; left: 7vw; } }
.qaWrap .qaBox .qaModal a { display: inline-block; font-size: 22px; line-height: 1; font-weight: 500; color: #FFF; border-radius: 9999px; padding: 10px 60px; background: url("/assets/wonder/img/icon_arrow.svg") no-repeat right 10px center; background-size: 22px 22px; }
@media screen and (max-width: 750px) { .qaWrap .qaBox .qaModal a { font-size: 3.7333333333vw; padding: 1.5vw 10vw; background-size: 3.6vw 3.6vw; background-position: right 2vw center; } }
.qaWrap .qaBox.pink .qaText { border-bottom-color: #e85298; }
.qaWrap .qaBox.pink .qaModal a { background-color: #e85298; }
.qaWrap .qaBox.green .qaText { border-bottom-color: #44b762; }
.qaWrap .qaBox.green .qaModal a { background-color: #44b762; }

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#footer { background-color: #e3f6ff; }
#footer .inner { max-width: 1180px; }
#footer .footerInner { display: flex; padding: 40px 0; gap: 0 40px; }
@media screen and (max-width: 750px) { #footer .footerInner { flex-direction: column; padding: 7vw; gap: 5vw 0; } }
@media screen and (min-width: 751px) { #footer .footerLogo .logoSdgs { display: flex; margin-top: 20px; }
  #footer .footerLogo .logoSdgs p { font-size: 13px; text-align: left; margin-left: 10px; } }
@media screen and (max-width: 750px) { #footer .footerLogo .logoRku { padding: 0 15vw; } }
#footer .footerDetail .footerDept { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 10px; }
@media screen and (max-width: 750px) { #footer .footerDetail .footerDept { justify-content: center; gap: 0; } }
#footer .footerDetail .footerDept dl { text-align: left; }
@media screen and (max-width: 750px) { #footer .footerDetail .footerDept dl { text-align: center; } }
#footer .footerDetail .footerDept dl dt { font-size: 14px; font-weight: 300; }
@media screen and (max-width: 750px) { #footer .footerDetail .footerDept dl dt { font-size: 3.4666666667vw; } }
#footer .footerDetail .footerDept dl dd { font-size: 22px; font-weight: 300; }
@media screen and (max-width: 750px) { #footer .footerDetail .footerDept dl dd { font-size: 5.3333333333vw; margin-bottom: 3vw; } }
#footer .footerDetail .footerDept dl dd small { font-size: 13px; }
@media screen and (max-width: 750px) { #footer .footerDetail .footerDept dl dd small { display: block; font-size: 3.2vw; } }
#footer .footerDetail .footerAddress { margin-top: 20px; }
@media screen and (max-width: 750px) { #footer .footerDetail .footerAddress { margin-top: 5vw; } }
#footer .footerDetail .footerAddress dl { text-align: left; display: flex; justify-content: flex-start; gap: 0 10px; font-size: 15px; font-weight: 300; }
@media screen and (min-width: 751px) { #footer .footerDetail .footerAddress dl { flex-wrap: wrap; } }
@media screen and (max-width: 750px) { #footer .footerDetail .footerAddress dl { gap: 0; font-size: 3.4666666667vw; } }
#footer .footerDetail .footerAddress dl dt { font-weight: 600; }
@media screen and (max-width: 750px) { #footer .footerDetail .footerAddress dl dt { width: 35%; } }
@media screen and (max-width: 750px) { #footer .footerDetail .footerAddress dl dd { width: 65%; } }
@media screen and (max-width: 750px) { #footer .footerDetail .logoSdgs { display: flex; align-items: center; margin-top: 5vw; }
  #footer .footerDetail .logoSdgs img { width: 20%; }
  #footer .footerDetail .logoSdgs p { font-size: 3.2vw; text-align: left; margin-left: 3vw; } }
#footer .copyright { background-color: #b0e2ff; padding: 20px 0; font-weight: 600; color: #666; }
@media screen and (max-width: 750px) { #footer .copyright { padding: 3vw; font-size: 3.4666666667vw; } }

.remodal-overlay { background: rgba(255, 255, 255, 0.8); }

.remodal { max-width: 1000px; margin-bottom: 0; border: 1px solid #0049b9; border-radius: 20px; padding: 30px; }
@media screen and (max-width: 750px) { .remodal { padding: 5vw; } }

@media screen and (max-width: 750px) { .remodal-wrapper { padding: 10vw 5vw; } }

.remodal-close { left: auto; right: 23px; top: -23px; }
@media screen and (max-width: 750px) { .remodal-close { right: -2vw; top: -2vw; width: 7vw; height: 7vw; } }
.remodal-close:before { font-size: 0; width: 50px; height: 50px; background: url("/assets/wonder/img/icon_close.svg") no-repeat center top; background-size: 50px 50px; }
@media screen and (max-width: 750px) { .remodal-close:before { width: 7vw; height: 7vw; background-size: 7vw 7vw; } }

.modalInner { text-align: left; }
@media screen and (max-width: 750px) { .modalInner { height: 100%; } }
.modalInner.modalGreeting .photo { width: 100%; margin: 0 auto; text-align: center; margin-bottom: 20px; }
.modalInner.modalGreeting h2 { font-size: 20px; margin-bottom: 15px; }
@media screen and (max-width: 750px) { .modalInner.modalGreeting h2 { font-size: 4vw; } }
.modalInner.modalGreeting p { font-size: 15px; margin-bottom: 15px; }
@media screen and (max-width: 750px) { .modalInner.modalGreeting p { font-size: 3.4666666667vw; } }
.modalInner.modalQa { display: flex; justify-content: flex-end; padding-top: 40px; }
@media screen and (max-width: 750px) { .modalInner.modalQa { padding-top: 3vw; flex-wrap: wrap; } }
.modalInner.modalQa .modalContent { width: 60%; }
@media screen and (max-width: 750px) { .modalInner.modalQa .modalContent { position: relative; width: 100%; order: 2; padding-top: 3vw; } }
.modalInner.modalQa .modalContent h2 { margin-bottom: 20px; }
@media screen and (max-width: 750px) { .modalInner.modalQa .modalContent h2 { width: 60%; position: absolute; top: -27vw; left: 0; margin-bottom: 0; } }
.modalInner.modalQa .modalContent dl { font-size: 16px; }
@media screen and (max-width: 750px) { .modalInner.modalQa .modalContent dl { font-size: 4vw; } }
.modalInner.modalQa .modalContent dl dt { padding-left: 25px; position: relative; margin-bottom: 10px; }
.modalInner.modalQa .modalContent dl dt:before { content: "Q"; font-weight: 600; color: #555555; font-size: 22px; position: absolute; top: 0; left: 0; line-height: 1; }
.modalInner.modalQa .modalContent dl dd { padding-left: 25px; margin-bottom: 30px; position: relative; }
.modalInner.modalQa .modalContent dl dd:before { content: "A"; font-weight: 600; color: #e85298; font-size: 22px; position: absolute; top: 0; left: 0; line-height: 1; }
.modalInner.modalQa .photo { width: 25%; }
@media screen and (max-width: 750px) { .modalInner.modalQa .photo { width: 100%; order: 1; text-align: right; }
  .modalInner.modalQa .photo img { width: auto; max-height: 40vw; } }



/* 20230922 FB×·¼Ó*/
.deptLink a > small { display: block; font-size: .75em;}

/* 20231215 FB*/
.news_list {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; margin: 1rem auto; width: 100%; max-width: 1300px;overflow: hidden;}
.news_list li {max-width: 140px; }
.itemimg-box {display: flex; width: 100%; height: 100%; align-items: center; margin-bottom: 0.4em;}
.itemimg-box img { 
  max-width: 100%;
  max-height: 100%;
  height: 220px;
  object-fit: cover;
}

.mainCopy h3 {
  margin: 3em 0 1.5em;
}
#main .swiper{
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}
.type-box .p-type--faculty_topics,
.type-box .p-type--news,
.type-box .p-type--admissions_event,
.type-box .p-type--economics_dep,
.type-box .p-type--business_dep,
.type-box .p-type--distribution_dep,
.type-box .p-type--enterprise_dep,
.type-box .p-type--admini_dep,
.type-box .p-type--sports_dep,
.type-box .p-type--communication_dep,
.type-box .p-type--admissions,
.type-box .p-type--event,
.type-box .p-type--research,
.type-box .p-type--media,
.type-box .p-type--international,
.type-box .p-type--activitie,
.type-box .p-type--parents,
.type-box .p-type--ordinary,
.type-box .p-type--ob,
.type-box .p-type--career {
  display: none;
}

/* swiper */
.swiper-slide {
  padding: 10px;
  width: 20%;
  text-align: left;
  color: #132d4f;
}
a.arrow {
  background-image: url("/assets/wonder/img/arrow_blue_thin.svg");
  background-position: 92.5% center;
  background-repeat: no-repeat;
  background-size: 4.12em;
  color: #ec004f;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  margin-left: 4.8em;
  padding-right: 5em;
  transition: all 0.3s ease;
}
a.arrow:hover {
  background-position: 100% center;
}
a.swiper-button-prev, a.swiper-button-next {
  background-position: 85% center;
  background-size: contain;
  bottom: 0;
  height: 12px;
  margin: 0;
  top: auto;
  width: 84px;
}

a.swiper-button-prev, a.swiper-button-next {
  height: 10px;
  width: auto;
}

a.swiper-button-prev {
  left: 0px;
  transform: scale(-1, 1);
}

a.swiper-button-next {
  right: 0px;
}

a.swiper-button-prev:hover {
  left: 20px;
}

a.swiper-button-next:hover {
  right: 20px;
}

.noButton a.swiper-button-prev,
.noButton a.swiper-button-next {
  display: none;
}
.type-box {
  box-sizing: border-box;
  color: #fff;
  font-size: 0.8125rem;
  left: 2px;
  line-height: 1.7;
  position: absolute;
  top: -3px;
  width: 64%;
}
.type-box--inner {
  display: flex;
  flex-direction: column;
}
.type-box i.p-type--sociology_dep {
  background-color: #e85298;
}
.type-box i.p-type--tourist_dep {
  background-color: #44b762;
}
.type-box i {
  padding: 0.3em 1.2em 0.2em 0.75em;
  font-size: 0.7rem;
  font-weight: 100;
  font-style: normal;
}
.type-box::after {
  border-style: solid;
  border-width: 6px;
  bottom: -6px;
  content: "";
  left: 2px;
  position: inherit;
  transform: rotate(45deg);
  z-index: -1;
}
.type-box i.p-type--sociology_dep::after {
  border-color: transparent transparent #e85298 transparent;
}
.type-box i.p-type--tourist_dep::after {
  border-color: transparent transparent #44b762 transparent;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: '';
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: '';
}
.item-box {
  color: #132d4f;
}
.item-box .date {
  font-weight: bold;
  line-height: 1.8;
  font-size: 0.9rem;
}
.item-box_text {
  font-weight: 100;
}
@media screen and (max-width: 750px) {
  #main .mainCopy h3 {
    padding: 0 9vw;
  }
  a.swiper-button-prev, a.swiper-button-next {
    width: 22.35vw;
  }
  a.swiper-button-prev {
    left: 6.66vw;
  }
  a.swiper-button-next {
    right: 6.66vw;
  }
  #main .swiper {
    padding: 0 9vw;
    padding-bottom: 4vw;
  }
  .itemimg-box img {
    width: 100%;
    height: 52vw;
  }
  .item-box .date {
    font-size: 3.777vw;
  }
  .type-box {
    width: 70%;
  }
  .type-box i {
    font-size: 3vw;
  }
  .item-box_text {
    font-size: 3.733vw;
  }
}