/* Scss Document */
/***********************************************************************
media queries setting
**********************************************************************/
.post-password-form { margin: 2rem auto; width: 80%; }
@media (min-width: 561px) { .post-password-form { width: 500px; } }
.post-password-form label { color: #00ACC0; font-weight: bold; }
.post-password-form #pwbox-7291 { margin-bottom: 1rem; }

#weboc-wrapper { /*.//web-opencampus-pickup*/ /*.//fact-image*/ /*.//flow*/ }
#weboc-wrapper .pc { display: none; }
#weboc-wrapper .sp { display: block; }
@media (min-width: 561px) { #weboc-wrapper .pc { display: block; }
  #weboc-wrapper .sp { display: none; } }
#weboc-wrapper ul { margin: 0; padding: 0; }
#weboc-wrapper li { list-style-type: none; }
#weboc-wrapper video { margin-bottom: .5rem; width: 100%; }
#weboc-wrapper .weboc-floater { position: absolute; z-index: 100; pointer-events: none; }
@media (max-width: 561px) { #weboc-wrapper .weboc-floater { display: none; } }
@media (max-width: 561px) { #weboc-wrapper .heading-section { background: none; background: #00acc0; border: none; margin-bottom: 2rem; } }
#weboc-wrapper .main { margin: 0 auto 1.5rem; }
@media (min-width: 561px) { #weboc-wrapper .main { width: 1100px; max-width: 100%; } }
#weboc-wrapper .main + p { margin-right: auto; margin-left: auto; margin-bottom: 2rem; padding-right: 15px; padding-left: 15px; }
@media (min-width: 561px) { #weboc-wrapper .main + p { width: 960px; max-width: 100%; } }
#weboc-wrapper .video-wrapper { background: #00ACC0; border: 20px solid #00ACC0; margin: 0 auto; position: relative; width: 75%; border-radius: 20px; }
@media (min-width: 561px) { #weboc-wrapper .video-wrapper { max-width: 510px; } }
#weboc-wrapper .video-wrapper.none { background: none; border: none; }
#weboc-wrapper .video-wrapper.none p { color: #000; }
#weboc-wrapper .video-wrapper.blue { background: #2E59A7; border-color: #2E59A7; margin-bottom: 1rem; }
@media (min-width: 561px) { #weboc-wrapper .video-wrapper.blue { margin-bottom: 4.5rem; } }
#weboc-wrapper .video-wrapper.water { background: #14B8D4; border-color: #14B8D4; margin-bottom: 1rem; }
@media (min-width: 561px) { #weboc-wrapper .video-wrapper.water { margin-bottom: 4.5rem; } }
#weboc-wrapper .video-wrapper.green { background: #00AB76; border-color: #00AB76; margin-bottom: 1rem; }
@media (min-width: 561px) { #weboc-wrapper .video-wrapper.green { margin-bottom: 0; } }
#weboc-wrapper .video-wrapper.pink { background: #EB689C; border-color: #EB689C; }
#weboc-wrapper .video-wrapper h3 { color: #fff; text-align: center; }
#weboc-wrapper .video-wrapper p { color: #fff; }
#weboc-wrapper .video-wrapper .badge { position: absolute; top: -40px; left: -70px; }
@media (max-width: 561px) { #weboc-wrapper .video-wrapper .badge { left: -56px; width: 45%; } }
#weboc-wrapper .arrow { display: block; margin: 1rem 0; text-align: center; }
@media (max-width: 561px) { #weboc-wrapper .arrow { margin: -1rem 0 .5rem; } }
#weboc-wrapper .section-small { position: relative; margin: 0 auto; width: 75%; }
@media (min-width: 561px) { #weboc-wrapper .section-small { max-width: 1100px; } }
#weboc-wrapper .section-small .catch-badge { margin-bottom: 1rem; margin: 0 auto; }
@media (min-width: 561px) { #weboc-wrapper .section-small .catch-badge { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 2; } }
#weboc-wrapper .section-small-s { margin: 0 auto; padding-top: 15px; position: relative; width: 90%; }
@media (min-width: 561px) { #weboc-wrapper .section-small-s { max-width: 760px; } }
#weboc-wrapper .present { border: 1px solid #E62780; padding: 16px 16px 0; margin: 2rem auto 1rem; width: 80%; /*&.row{ margin: 0;
}*/ }
@media (max-width: 561px) { #weboc-wrapper .present { margin: 1rem auto 1rem; padding: 8px 0 0; width: 100%; } }
#weboc-wrapper .present h6 { color: #E62780; margin-bottom: .5rem; }
#weboc-wrapper .point-area { padding-left: 110px; position: relative; }
#weboc-wrapper .point-area .point-icon { position: absolute; top: -8px; left: -20px; }
@media (max-width: 561px) { #weboc-wrapper .point-area .point-icon { top: 0; left: 5px; width: 25%; } }
#weboc-wrapper .point-area h5 { font-size: 18px; }
@media (min-width: 561px) { #weboc-wrapper .point-area h5 { font-size: 27px; } }
#weboc-wrapper .oc-request { margin: 0 auto 2rem; width: 65%; }
@media (min-width: 561px) { #weboc-wrapper .oc-request { width: 430px; } }
#weboc-wrapper .oc-request li { text-align: center; }
#weboc-wrapper .line-head { background: #00ACC0; padding: 1rem 0 .5rem; }
@media (max-width: 561px) { #weboc-wrapper .line-head { padding: .8rem 0 .1em; } }
#weboc-wrapper .line-head h2 { text-align: center; }
@media (max-width: 561px) { #weboc-wrapper .line-head h2 img { height: 30px; } }
#weboc-wrapper .web-opencampus-pickup .thumb { text-align: center; margin-bottom: 1em; }
#weboc-wrapper .web-opencampus-pickup h2, #weboc-wrapper .web-opencampus-pickup h3, #weboc-wrapper .web-opencampus-pickup p { text-align: center; }
@media (max-width: 561px) { #weboc-wrapper .web-opencampus-pickup h3 { margin-top: 1.5rem; margin-bottom: .5rem; } }
#weboc-wrapper .web-opencampus-pickup .maincolor { color: #2E59A7; border-color: #2E59A7; }
#weboc-wrapper .fact-image { /*.//image*/ /*.//point*/ }
#weboc-wrapper .fact-image .image { padding: 0 0 2rem; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.2) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.2) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 ); }
#weboc-wrapper .fact-image .image img { display: block; margin: 0 auto; max-width: 920px; width: 90%; }
#weboc-wrapper .fact-image .point { background: #FEF4F8; padding: 2rem 0; }
#weboc-wrapper .fact-image .point ul { margin: 0 auto; width: 90%; }
@media (min-width: 561px) { #weboc-wrapper .fact-image .point ul { width: 480px; } }
#weboc-wrapper .fact-image .point ul li { color: #EA68A2; font-size: 16px; font-weight: bold; }
@media (min-width: 561px) { #weboc-wrapper .fact-image .point ul li { font-size: 20px; } }
#weboc-wrapper .weboc-floater1, #weboc-wrapper .weboc-floater2 { position: absolute; }
@media (max-width: 561px) { #weboc-wrapper .weboc-floater1, #weboc-wrapper .weboc-floater2 { display: none; } }
#weboc-wrapper .weboc-floater1 { top: -4%; left: 50%; margin-left: -627px; }
#weboc-wrapper .weboc-floater2 { top: 7%; right: 50%; margin-right: -594px; }
#weboc-wrapper .point-list { background: #FEF4F8; margin: 0 auto; padding: 3rem 0 2rem; }
@media (max-width: 561px) { #weboc-wrapper .point-list { padding: 1rem 0 .5rem; } }
#weboc-wrapper .point-list ul { margin: 0 auto; width: 870px; }
@media (max-width: 561px) { #weboc-wrapper .point-list ul { width: 90%; } }
#weboc-wrapper .point-list ul li { border-bottom: 3px dotted #EA68A2; margin-bottom: 1em; }
#weboc-wrapper .point-list ul li:last-child { border: none; margin-bottom: 0; }
#weboc-wrapper .point-list .point-area { padding-left: 80px; position: relative; }
#weboc-wrapper .point-list .point-area .point-icon { position: absolute; top: 1px; left: -20px; }
@media (max-width: 561px) { #weboc-wrapper .point-list .point-area .point-icon { top: 0; left: 5px; width: 17%; } }
#weboc-wrapper .point-list .point-area h3 { font-size: 18px; }
#weboc-wrapper .point-list .point-area h3 em { background: #E8FF00; font-style: normal; }
@media (min-width: 561px) { #weboc-wrapper .point-list .point-area h3 { font-size: 27px; } }
#weboc-wrapper .movie-flow { margin: 1.5rem auto; width: 870px; }
@media (max-width: 561px) { #weboc-wrapper .movie-flow { width: 100%; } }
#weboc-wrapper .flow { margin: 1.5rem auto; }
@media (min-width: 561px) { #weboc-wrapper .flow { margin: 2.5rem auto; } }
#weboc-wrapper .flow h4 { color: #2E59A7; font-size: 18px; font-weight: bold; margin-bottom: 2rem; text-align: center; }
@media (min-width: 561px) { #weboc-wrapper .flow h4 { font-size: 34px; } }
#weboc-wrapper .flow .flow-item h5 { color: #00ACC0; font-size: 16px; white-space: nowrap; }
@media (min-width: 561px) { #weboc-wrapper .flow .flow-item h5 { font-size: 24px; } }
@media (max-width: 561px) { #weboc-wrapper .flow .flow-item.step4 h5 { /*font-size: 14px;*/ } }
#weboc-wrapper .flow .flow-item p { margin-top: .5rem; }
#weboc-wrapper .flow .flow-item p a { color: #00ACC0; font-weight: bold; text-decoration: underline; }
#weboc-wrapper .flow .flow-item p span { color: red; }
#weboc-wrapper .main, #weboc-wrapper .web-opencampus-pickup, #weboc-wrapper .flow { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
@media (min-width: 561px) { #weboc-wrapper .main, #weboc-wrapper .web-opencampus-pickup, #weboc-wrapper .flow { width: 1280px; max-width: 100%; } }

/*#//weboc-wrapper*/
#weboc-wrapper.weboc-2023 { margin-bottom: 42px; /*school-information*/ /*floor-wrapper*/ }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 { margin-bottom: 24px; } }
#weboc-wrapper.weboc-2023 .sub-head { font-size: 30px; font-weight: bold; margin: 1.5em auto 0; width: 960px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .sub-head { font-size: 18px; width: 90%; } }
#weboc-wrapper.weboc-2023 .sub-head + p { margin: 1em auto 0; width: 960px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .sub-head + p { width: 90%; } }
#weboc-wrapper.weboc-2023 .weboc-floater { z-index: 1; }
#weboc-wrapper.weboc-2023 .school-information { background: #FFEA00 url("../img/weboc/202306/school-back.png") no-repeat center bottom; background-size: contain; padding: 2em 0 342px; position: relative; margin-top: 5.5em; /*inner*/ /*video-wrapper*/ }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information { background-image: none; margin-top: 4em; padding: 2em 0 195px; } }
#weboc-wrapper.weboc-2023 .school-information .inner { margin-top: -4.5em; }
#weboc-wrapper.weboc-2023 .school-information .inner .head img { margin: 0 auto 0; }
#weboc-wrapper.weboc-2023 .school-information .inner .head + p { margin: 1em auto 2em; max-width: 767px; width: 90%; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .inner .head + p { margin-bottom: 0.5em; } }
#weboc-wrapper.weboc-2023 .school-information .inner .school { position: absolute; bottom: -72px; left: 50%; transform: translate(-50%, 0%); z-index: 1; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .inner .school { bottom: -40px; width: 85%; } }
#weboc-wrapper.weboc-2023 .school-information .video-wrapper { background: url("../img/weboc/202306/fukidashi.png"); background-position: center; background-size: cover; background-repeat: no-repeat; border: none; border-radius: 0; height: 385px; width: 463px; max-width: inherit; padding-top: 33px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .video-wrapper { background-image: url("../img/weboc/202306/fukidashi-sp.png"); height: auto; padding-top: 87%; position: relative; width: 90%; } }
#weboc-wrapper.weboc-2023 .school-information .video-wrapper video { display: block; margin: 47px auto 0; width: 80%; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .video-wrapper video { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); } }
#weboc-wrapper.weboc-2023 .school-information .float-icon1, #weboc-wrapper.weboc-2023 .school-information .float-icon2-1, #weboc-wrapper.weboc-2023 .school-information .float-icon2-2, #weboc-wrapper.weboc-2023 .school-information .float-icon2-3 { position: absolute; z-index: 0; }
#weboc-wrapper.weboc-2023 .school-information .float-icon1 { top: 59%; left: 55%; z-index: 1; width: 154px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon1 { top: 73%; left: auto; right: 10%; width: 95px; } }
#weboc-wrapper.weboc-2023 .school-information .float-icon2-1 { bottom: 116px; left: 10%; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon2-1 { bottom: 71px; left: auto; right: 5%; } }
#weboc-wrapper.weboc-2023 .school-information .float-icon2-2 { bottom: 145px; left: 59%; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon2-2 { display: none; } }
#weboc-wrapper.weboc-2023 .school-information .float-icon2-3 { bottom: 240px; right: 5%; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon2-3 { display: none; } }
#weboc-wrapper.weboc-2023 .school-information .women1, #weboc-wrapper.weboc-2023 .school-information .women2 { position: absolute; bottom: -106px; z-index: 2; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .women1, #weboc-wrapper.weboc-2023 .school-information .women2 { display: none; } }
#weboc-wrapper.weboc-2023 .school-information .women1 { left: 50%; margin-left: -555px; }
#weboc-wrapper.weboc-2023 .school-information .women2 { right: 50%; margin-right: -443px; }
#weboc-wrapper.weboc-2023 .floor-wrapper { margin: 8em 0 6em; position: relative; /*video-wrapper*/ }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper { margin: 5em 0 3em; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .inner { position: relative; margin: 3em auto 0; padding: 244px 0 352px; max-width: 1010px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .inner { margin: 2em auto 0; padding: 177px 0 172px; width: 340px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .head img { margin: 0 auto 0; }
#weboc-wrapper.weboc-2023 .floor-wrapper .floor img { margin: 0 auto; }
#weboc-wrapper.weboc-2023 .floor-wrapper .chara1, #weboc-wrapper.weboc-2023 .floor-wrapper .chara2, #weboc-wrapper.weboc-2023 .floor-wrapper .chara3 { position: absolute; }
#weboc-wrapper.weboc-2023 .floor-wrapper .chara1 { top: 490px; left: 40px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .chara1 { top: 333px; left: 150px; width: 42px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .chara2 { top: 490px; left: 170px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .chara2 { top: 446px; left: 53px; width: 40px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .chara3 { top: 490px; left: 380px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .chara3 { top: 446px; left: 108px; width: 40px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper { background-color: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; border: none; border-radius: 0; height: 378px; width: 319px; max-width: inherit; padding: 24px; position: absolute; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper { height: auto; padding-top: 39%; width: 47%; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper video { display: block; margin: 114px auto 0; width: 95%; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper video { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -14%); width: 82%; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system video, #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game video { margin-top: 174px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system video, #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game video { margin-top: 0; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.daigaku { background-image: url("../img/weboc/202306/fukidashi-daigaku.png"); top: 0; left: 110px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.daigaku { background-image: url("../img/weboc/202306/fukidashi-daigaku-sp.png"); left: 0; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.daigaku::before { content: ""; background: url("../img/weboc/202306/border-daigaku.png"); height: 87px; width: 25px; position: absolute; bottom: -81px; left: 85px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.ai { background-image: url("../img/weboc/202306/fukidashi-ai.png"); top: 0; right: 0; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.ai { background-image: url("../img/weboc/202306/fukidashi-ai-sp.png"); top: 40px; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.ai::before { content: ""; background: url("../img/weboc/202306/border-ai.png"); height: 184px; width: 94px; position: absolute; bottom: -181px; right: 18px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system { background-image: url("../img/weboc/202306/fukidashi-system.png"); bottom: 0; left: 80px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system { background-image: url("../img/weboc/202306/fukidashi-system-sp.png"); bottom: 58px; left: 0px; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system::before { content: ""; background: url("../img/weboc/202306/border-system.png"); height: 181px; width: 95px; position: absolute; top: -178px; left: 18px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game { background-image: url("../img/weboc/202306/fukidashi-game.png"); bottom: 0; right: 177px; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game { background-image: url("../img/weboc/202306/fukidashi-game-sp.png"); right: 0; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game::before { content: ""; background: url("../img/weboc/202306/border-game.png"); height: 70px; width: 94px; position: absolute; top: -67px; right: 18px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .float-icon3 { position: absolute; bottom: 7%; right: 16%; margin-right: -74px; z-index: 1; }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .float-icon3 { display: none; } }

/*web-oc2023*/
.oc-entry-btn li a { cursor: pointer; display: block; position: relative; margin-inline: auto; margin: 1% 0; width: min(25.390625vw, 325px); height: min(25.390625vw, 325px); transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 0.7s ease; }
@media (max-width: 560px) { .oc-entry-btn li a { width: min(44.6428571429vw, 250px); height: min(44.6428571429vw, 250px); } }
.oc-entry-btn li a img { -webkit-backface-visibility: hidden; backface-visibility: hidden; height: auto; left: 0; position: absolute; width: 100%; }
.oc-entry-btn li a img:last-of-type { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .oc-entry-btn li a:hover img { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .oc-entry-btn li:hover a { transform: rotateY(180deg); } }

/********************************************************** anim
**********************************************************/
.vertical { -webkit-animation-name: verticalAnimation; -webkit-animation-duration: 1.0s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: verticalAnimation; -moz-animation-duration: 1.0s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: verticalAnimation; -ms-animation-duration: 1.0s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

.vertical2 { -webkit-animation-name: verticalAnimation; -webkit-animation-duration: 1.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: verticalAnimation; -moz-animation-duration: 1.5s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: verticalAnimation; -ms-animation-duration: 1.5s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

.horizontal { -webkit-animation-name: horizontalAnimation; -webkit-animation-duration: 1.4s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: horizontalAnimation; -moz-animation-duration: 1.4s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: horizontalAnimation; -ms-animation-duration: 1.4s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

.horizontal2 { -webkit-animation-name: horizontalAnimation; -webkit-animation-duration: 1.8s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: horizontalAnimation; -moz-animation-duration: 1.8s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: horizontalAnimation; -ms-animation-duration: 1.8s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

@-webkit-keyframes verticalAnimation { 0% { -webkit-transform: translateY(-3px); }
  100% { -webkit-transform: translateY(3px); } }
@-moz-keyframes verticalAnimation { 0% { -moz-transform: translateY(-3px); }
  100% { -moz-transform: translateY(3px); } }
@-ms-keyframes verticalAnimation { 0% { -ms-transform: translateY(-3px); }
  100% { -ms-transform: translateY(3px); } }
@-webkit-keyframes horizontalAnimation { 0% { -webkit-transform: translateX(-7px); }
  100% { -webkit-transform: translateX(7px); } }
@-moz-keyframes horizontalAnimation { 0% { -moz-transform: translateX(-7px); }
  100% { -moz-transform: translateX(7px); } }
@-ms-keyframes horizontalAnimation { 0% { -ms-transform: translateX(-7px); }
  100% { -ms-transform: translateX(7px); } }
/* Scss Document */
.post-password-form { margin: 2rem auto; width: 80%; }

@media (min-width: 561px) { .post-password-form { width: 500px; } }
.post-password-form label { color: #00ACC0; font-weight: bold; }

.post-password-form #pwbox-7291 { margin-bottom: 1rem; }

#weboc-wrapper { /*.//web-opencampus-pickup*/ /*.//fact-image*/ /*.//flow*/ }

#weboc-wrapper .pc { display: none; }

#weboc-wrapper .sp { display: block; }

@media (min-width: 561px) { #weboc-wrapper .pc { display: block; }
  #weboc-wrapper .sp { display: none; } }
#weboc-wrapper ul { margin: 0; padding: 0; }

#weboc-wrapper li { list-style-type: none; }

#weboc-wrapper video { margin-bottom: .5rem; width: 100%; }

#weboc-wrapper .weboc-floater { position: absolute; z-index: 100; pointer-events: none; }

@media (max-width: 561px) { #weboc-wrapper .weboc-floater { display: none; } }
@media (max-width: 561px) { #weboc-wrapper .heading-section { background: none; background: #00acc0; border: none; margin-bottom: 2rem; } }
#weboc-wrapper .main { margin: 0 auto 1.5rem; }

@media (min-width: 561px) { #weboc-wrapper .main { width: 1100px; max-width: 100%; } }
#weboc-wrapper .main + p { margin-right: auto; margin-left: auto; margin-bottom: 2rem; padding-right: 15px; padding-left: 15px; }

@media (min-width: 561px) { #weboc-wrapper .main + p { width: 960px; max-width: 100%; } }
#weboc-wrapper .video-wrapper { background: #00ACC0; border: 20px solid #00ACC0; margin: 0 auto; position: relative; width: 75%; border-radius: 20px; }

@media (min-width: 561px) { #weboc-wrapper .video-wrapper { max-width: 510px; } }
#weboc-wrapper .video-wrapper.none { background: none; border: none; }

#weboc-wrapper .video-wrapper.none p { color: #000; }

#weboc-wrapper .video-wrapper.blue { background: #2E59A7; border-color: #2E59A7; margin-bottom: 1rem; }

@media (min-width: 561px) { #weboc-wrapper .video-wrapper.blue { margin-bottom: 4.5rem; } }
#weboc-wrapper .video-wrapper.water { background: #14B8D4; border-color: #14B8D4; margin-bottom: 1rem; }

@media (min-width: 561px) { #weboc-wrapper .video-wrapper.water { margin-bottom: 4.5rem; } }
#weboc-wrapper .video-wrapper.green { background: #00AB76; border-color: #00AB76; margin-bottom: 1rem; }

@media (min-width: 561px) { #weboc-wrapper .video-wrapper.green { margin-bottom: 0; } }
#weboc-wrapper .video-wrapper.pink { background: #EB689C; border-color: #EB689C; }

#weboc-wrapper .video-wrapper h3 { color: #fff; text-align: center; }

#weboc-wrapper .video-wrapper p { color: #fff; }

#weboc-wrapper .video-wrapper .badge { position: absolute; top: -40px; left: -70px; }

@media (max-width: 561px) { #weboc-wrapper .video-wrapper .badge { left: -56px; width: 45%; } }
#weboc-wrapper .arrow { display: block; margin: 1rem 0; text-align: center; }

@media (max-width: 561px) { #weboc-wrapper .arrow { margin: -1rem 0 .5rem; } }
#weboc-wrapper .section-small { position: relative; margin: 0 auto; width: 75%; }

@media (min-width: 561px) { #weboc-wrapper .section-small { max-width: 1100px; } }
#weboc-wrapper .section-small .catch-badge { margin-bottom: 1rem; margin: 0 auto; }

@media (min-width: 561px) { #weboc-wrapper .section-small .catch-badge { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 2; } }
#weboc-wrapper .section-small-s { margin: 0 auto; padding-top: 15px; position: relative; width: 90%; }

@media (min-width: 561px) { #weboc-wrapper .section-small-s { max-width: 680px; } }
#weboc-wrapper .present { border: 1px solid #E62780; padding: 16px 16px 0; margin: 2rem auto 1rem; width: 80%;                                                                                                                /*&.row{ margin: 0;
}*/ }

@media (max-width: 561px) { #weboc-wrapper .present { margin: 1rem auto 1rem; padding: 8px 0 0; width: 100%; } }
#weboc-wrapper .present h6 { color: #E62780; margin-bottom: .5rem; }

#weboc-wrapper .point-area { padding-left: 110px; position: relative; }

#weboc-wrapper .point-area .point-icon { position: absolute; top: -8px; left: -20px; }

@media (max-width: 561px) { #weboc-wrapper .point-area .point-icon { top: 0; left: 5px; width: 25%; } }
#weboc-wrapper .point-area h5 { font-size: 18px; }

@media (min-width: 561px) { #weboc-wrapper .point-area h5 { font-size: 27px; } }
#weboc-wrapper .oc-request { margin: 0 auto 2rem; width: 65%; }

@media (min-width: 561px) { #weboc-wrapper .oc-request { width: 430px; } }
#weboc-wrapper .oc-request li { text-align: center; }

#weboc-wrapper .line-head { background: #00ACC0; padding: 1rem 0 .5rem; }

@media (max-width: 561px) { #weboc-wrapper .line-head { padding: .8rem 0 .1em; } }
#weboc-wrapper .line-head h2 { text-align: center; }

@media (max-width: 561px) { #weboc-wrapper .line-head h2 img { height: 30px; } }
#weboc-wrapper .web-opencampus-pickup .thumb { text-align: center; margin-bottom: 1em; }

#weboc-wrapper .web-opencampus-pickup h2, #weboc-wrapper .web-opencampus-pickup h3, #weboc-wrapper .web-opencampus-pickup p { text-align: center; }

@media (max-width: 561px) { #weboc-wrapper .web-opencampus-pickup h3 { margin-top: 1.5rem; margin-bottom: .5rem; } }
#weboc-wrapper .web-opencampus-pickup .maincolor { color: #2E59A7; border-color: #2E59A7; }

#weboc-wrapper .fact-image { /*.//image*/ /*.//point*/ }

#weboc-wrapper .fact-image .image { padding: 0 0 2rem; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.2) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.2) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 ); }

#weboc-wrapper .fact-image .image img { display: block; margin: 0 auto; max-width: 920px; width: 90%; }

#weboc-wrapper .fact-image .point { background: #FEF4F8; padding: 2rem 0; }

#weboc-wrapper .fact-image .point ul { margin: 0 auto; width: 90%; }

@media (min-width: 561px) { #weboc-wrapper .fact-image .point ul { width: 480px; } }
#weboc-wrapper .fact-image .point ul li { color: #EA68A2; font-size: 16px; font-weight: bold; }

@media (min-width: 561px) { #weboc-wrapper .fact-image .point ul li { font-size: 20px; } }
#weboc-wrapper .weboc-floater1, #weboc-wrapper .weboc-floater2 { position: absolute; }

@media (max-width: 561px) { #weboc-wrapper .weboc-floater1, #weboc-wrapper .weboc-floater2 { display: none; } }
#weboc-wrapper .weboc-floater1 { top: -4%; left: 50%; margin-left: -627px; }

#weboc-wrapper .weboc-floater2 { top: 7%; right: 50%; margin-right: -594px; }

#weboc-wrapper .point-list { background: #FEF4F8; margin: 0 auto; padding: 3rem 0 2rem; }

@media (max-width: 561px) { #weboc-wrapper .point-list { padding: 1rem 0 .5rem; } }
#weboc-wrapper .point-list ul { margin: 0 auto; width: 870px; }

@media (max-width: 561px) { #weboc-wrapper .point-list ul { width: 90%; } }
#weboc-wrapper .point-list ul li { border-bottom: 3px dotted #EA68A2; margin-bottom: 1em; }

#weboc-wrapper .point-list ul li:last-child { border: none; margin-bottom: 0; }

#weboc-wrapper .point-list .point-area { padding-left: 80px; position: relative; }

#weboc-wrapper .point-list .point-area .point-icon { position: absolute; top: 1px; left: -20px; }

@media (max-width: 561px) { #weboc-wrapper .point-list .point-area .point-icon { top: 0; left: 5px; width: 17%; } }
#weboc-wrapper .point-list .point-area h3 { font-size: 18px; }

#weboc-wrapper .point-list .point-area h3 em { background: #E8FF00; font-style: normal; }

@media (min-width: 561px) { #weboc-wrapper .point-list .point-area h3 { font-size: 27px; } }
#weboc-wrapper .movie-flow { margin: 1.5rem auto; width: 870px; }

@media (max-width: 561px) { #weboc-wrapper .movie-flow { width: 100%; } }
#weboc-wrapper .flow { margin: 1.5rem auto; }

@media (min-width: 561px) { #weboc-wrapper .flow { margin: 2.5rem auto; } }
#weboc-wrapper .flow h4 { color: #2E59A7; font-size: 18px; font-weight: bold; margin-bottom: 2rem; text-align: center; }

@media (min-width: 561px) { #weboc-wrapper .flow h4 { font-size: 34px; } }
#weboc-wrapper .flow .flow-item h5 { color: #00ACC0; font-size: 16px; white-space: nowrap; }

@media (min-width: 561px) { #weboc-wrapper .flow .flow-item h5 { font-size: 24px; } }
@media (max-width: 561px) { #weboc-wrapper .flow .flow-item.step4 h5 { /*font-size: 14px;*/ } }
#weboc-wrapper .flow .flow-item p { margin-top: .5rem; }

#weboc-wrapper .flow .flow-item p a { color: #00ACC0; font-weight: bold; text-decoration: underline; }

#weboc-wrapper .flow .flow-item p span { color: red; }

#weboc-wrapper .main, #weboc-wrapper .web-opencampus-pickup, #weboc-wrapper .flow { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }

@media (min-width: 561px) { #weboc-wrapper .main, #weboc-wrapper .web-opencampus-pickup, #weboc-wrapper .flow { width: 1280px; max-width: 100%; } }
/*#//weboc-wrapper*/
#weboc-wrapper.weboc-2023 { margin-bottom: 42px; /*school-information*/ /*floor-wrapper*/ }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 { margin-bottom: 24px; } }
#weboc-wrapper.weboc-2023 .sub-head { font-size: 30px; font-weight: bold; margin: 1.5em auto 0; width: 960px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .sub-head { font-size: 18px; width: 90%; } }
#weboc-wrapper.weboc-2023 .sub-head + p { margin: 1em auto 0; width: 960px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .sub-head + p { width: 90%; } }
#weboc-wrapper.weboc-2023 .weboc-floater { z-index: 1; }

#weboc-wrapper.weboc-2023 .school-information { background: #FFEA00 url("../img/weboc/202306/school-back.png") no-repeat center bottom; background-size: contain; padding: 2em 0 342px; position: relative; margin-top: 5.5em; /*inner*/ /*video-wrapper*/ }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information { background-image: none; margin-top: 4em; padding: 2em 0 195px; } }
#weboc-wrapper.weboc-2023 .school-information .inner { margin-top: -4.5em; }

#weboc-wrapper.weboc-2023 .school-information .inner .head img { margin: 0 auto 0; }

#weboc-wrapper.weboc-2023 .school-information .inner .head + p { margin: 1em auto 2em; max-width: 767px; width: 90%; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .inner .head + p { margin-bottom: 0.5em; } }
#weboc-wrapper.weboc-2023 .school-information .inner .school { position: absolute; bottom: -72px; left: 50%; transform: translate(-50%, 0%); z-index: 1; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .inner .school { bottom: -40px; width: 85%; } }
#weboc-wrapper.weboc-2023 .school-information .video-wrapper { background: url("../img/weboc/202306/fukidashi.png"); background-position: center; background-size: cover; background-repeat: no-repeat; border: none; border-radius: 0; height: 490px; width: 585px; max-width: inherit; padding-top: 33px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .video-wrapper { background-image: url("../img/weboc/202306/fukidashi-sp.png"); height: auto; padding-top: 87%; position: relative; width: 90%; } }
#weboc-wrapper.weboc-2023 .school-information .video-wrapper video { display: block; margin: 59px auto 0; width: 85%; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .video-wrapper video { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); } }
#weboc-wrapper.weboc-2023 .school-information .float-icon1, #weboc-wrapper.weboc-2023 .school-information .float-icon2-1, #weboc-wrapper.weboc-2023 .school-information .float-icon2-2, #weboc-wrapper.weboc-2023 .school-information .float-icon2-3 { position: absolute; z-index: 0; }

#weboc-wrapper.weboc-2023 .school-information .float-icon1 { top: 59%; left: 55%; z-index: 1; width: 154px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon1 { top: 73%; left: auto; right: 10%; width: 95px; } }
#weboc-wrapper.weboc-2023 .school-information .float-icon2-1 { bottom: 116px; left: 10%; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon2-1 { bottom: 71px; left: auto; right: 5%; } }
#weboc-wrapper.weboc-2023 .school-information .float-icon2-2 { bottom: 145px; left: 59%; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon2-2 { display: none; } }
#weboc-wrapper.weboc-2023 .school-information .float-icon2-3 { bottom: 240px; right: 5%; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .float-icon2-3 { display: none; } }
#weboc-wrapper.weboc-2023 .school-information .women1, #weboc-wrapper.weboc-2023 .school-information .women2 { position: absolute; bottom: -106px; z-index: 2; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .school-information .women1, #weboc-wrapper.weboc-2023 .school-information .women2 { display: none; } }
#weboc-wrapper.weboc-2023 .school-information .women1 { left: 50%; margin-left: -555px; }

#weboc-wrapper.weboc-2023 .school-information .women2 { right: 50%; margin-right: -443px; }

#weboc-wrapper.weboc-2023 .floor-wrapper { margin: 8em 0 6em; position: relative; /*video-wrapper*/ }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper { margin: 5em 0 3em; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .inner { position: relative; margin: 3em auto 0; padding: 294px 0 399px; max-width: 1010px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .inner { margin: 2em auto 0; padding: 177px 0 172px; width: 340px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .head img { margin: 0 auto 0; }

#weboc-wrapper.weboc-2023 .floor-wrapper .floor img { margin: 0 auto; }

#weboc-wrapper.weboc-2023 .floor-wrapper .chara1, #weboc-wrapper.weboc-2023 .floor-wrapper .chara2, #weboc-wrapper.weboc-2023 .floor-wrapper .chara3 { position: absolute; }

#weboc-wrapper.weboc-2023 .floor-wrapper .chara1 { top: 490px; left: 40px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .chara1 { top: 333px; left: 150px; width: 42px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .chara2 { top: 550px; left: 170px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .chara2 { top: 446px; left: 53px; width: 40px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .chara3 { top: 490px; left: 380px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .chara3 { top: 446px; left: 108px; width: 40px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper { background-color: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; border: none; border-radius: 0; height: 437px; width: 462px; max-width: inherit; padding: 24px; position: absolute; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper { height: auto; padding-top: 39%; width: 47%; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper video { display: block; margin: 101px auto 0; width: 95%; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper video { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -14%); width: 82%; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system video, #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game video { margin-top: 174px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system video, #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game video { margin-top: 0; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.daigaku { background-image: url("../img/weboc/202306/fukidashi-daigaku.png"); top: 0; left: -3px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.daigaku { background-image: url("../img/weboc/202306/fukidashi-daigaku-sp.png"); left: 0; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.daigaku::before { content: ""; background: url("../img/weboc/202306/border-daigaku.png"); height: 87px; width: 25px; position: absolute; bottom: -81px; left: 85px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.ai { background-image: url("../img/weboc/202306/fukidashi-ai.png"); top: 0; right: -121px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.ai { background-image: url("../img/weboc/202306/fukidashi-ai-sp.png"); top: 40px; right: 0; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.ai::before { content: ""; background: url("../img/weboc/202306/border-ai.png"); height: 184px; width: 94px; position: absolute; bottom: -181px; right: 18px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system { background-image: url("../img/weboc/202306/fukidashi-system.png"); bottom: 0; left: -99px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system { background-image: url("../img/weboc/202306/fukidashi-system-sp.png"); bottom: 58px; left: 0px; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.system::before { content: ""; background: url("../img/weboc/202306/border-system.png"); height: 181px; width: 95px; position: absolute; top: -178px; left: 18px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game { background-image: url("../img/weboc/202306/fukidashi-game.png"); bottom: 0; right: 120px; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game { background-image: url("../img/weboc/202306/fukidashi-game-sp.png"); right: 0; } }
@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .video-wrapper.game::before { content: ""; background: url("../img/weboc/202306/border-game.png"); height: 70px; width: 94px; position: absolute; top: -67px; right: 18px; } }
#weboc-wrapper.weboc-2023 .floor-wrapper .float-icon3 { position: absolute; bottom: 7%; right: 16%; margin-right: -74px; z-index: 1; }

@media (max-width: 561px) { #weboc-wrapper.weboc-2023 .floor-wrapper .float-icon3 { display: none; } }
/*web-oc2023*/
/********************************************************** anim
**********************************************************/
.vertical { -webkit-animation-name: verticalAnimation; -webkit-animation-duration: 1.0s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: verticalAnimation; -moz-animation-duration: 1.0s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: verticalAnimation; -ms-animation-duration: 1.0s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

.vertical2 { -webkit-animation-name: verticalAnimation; -webkit-animation-duration: 1.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: verticalAnimation; -moz-animation-duration: 1.5s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: verticalAnimation; -ms-animation-duration: 1.5s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

.horizontal { -webkit-animation-name: horizontalAnimation; -webkit-animation-duration: 1.4s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: horizontalAnimation; -moz-animation-duration: 1.4s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: horizontalAnimation; -ms-animation-duration: 1.4s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

.horizontal2 { -webkit-animation-name: horizontalAnimation; -webkit-animation-duration: 1.8s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: horizontalAnimation; -moz-animation-duration: 1.8s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -ms-animation-name: horizontalAnimation; -ms-animation-duration: 1.8s; -ms-animation-timing-function: ease-in-out; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; }

@-webkit-keyframes verticalAnimation { 0% { -webkit-transform: translateY(-3px); }
  100% { -webkit-transform: translateY(3px); } }
@-moz-keyframes verticalAnimation { 0% { -moz-transform: translateY(-3px); }
  100% { -moz-transform: translateY(3px); } }
@-ms-keyframes verticalAnimation { 0% { -ms-transform: translateY(-3px); }
  100% { -ms-transform: translateY(3px); } }
@-webkit-keyframes horizontalAnimation { 0% { -webkit-transform: translateX(-7px); }
  100% { -webkit-transform: translateX(7px); } }
@-moz-keyframes horizontalAnimation { 0% { -moz-transform: translateX(-7px); }
  100% { -moz-transform: translateX(7px); } }
@-ms-keyframes horizontalAnimation { 0% { -ms-transform: translateX(-7px); }
  100% { -ms-transform: translateX(7px); } }