html {
font-size:62.5%;
}
body {
font-family: "Manrope", "Zen Kaku Gothic New", sans-serif;
line-height:1.8;
font-weight: 400;
color: #05350a;
position: relative;
}
a,
a:active,
a:visited {
text-decoration:none;
color:#05350a;
}
/* a:hover {
filter: alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
} */
a,
a:hover {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
img {
max-width:100%;
height: auto;
vertical-align: bottom;
}
img.vab {
vertical-align:baseline;
}
img.vam {
vertical-align: middle;
}
.pr {
position:relative;
}
.tac {
text-align:center;
}
.tacPc {
text-align:center;
}
.tar {
text-align:right;
}
.tal {
text-align:left;
}
.contBox {
width: 90%;
max-width: 1200px;
margin:0 auto;
}
.contBox100 {
width: 100%;
}
.mgnAuto {
margin: auto;
}
.overflow-clip {
overflow-x: clip;
}
.mb5 {
margin-bottom:5px !important;
}
.mb10 {
margin-bottom:10px !important;
}
.mb15 {
margin-bottom:15px !important;
}
.mb20 {
margin-bottom:20px !important;
}
.mb30 {
margin-bottom:30px !important;
}
.mb40 {
margin-bottom:40px !important;
}
.mb50 {
margin-bottom:50px !important;
}
.mb60 {
margin-bottom:60px !important;
}
.mb70 {
margin-bottom:70px !important;
}
.mb80 {
margin-bottom:80px !important;
}
.mb90 {
margin-bottom:90px !important;
}
.mb100 {
margin-bottom:100px !important;
}
.mt5 {
margin-top:5px !important;
}
.mt10 {
margin-top:10px !important;
}
.mt15 {
margin-top:15px !important;
}
.mt20 {
margin-top:20px !important;
}
.mt30 {
margin-top:30px !important;
}
.mt40 {
margin-top:40px !important;
}
.mt50 {
margin-top:50px !important;
}
.mt60 {
margin-top:60px !important;
}
.mt70 {
margin-top:70px !important;
}
.mt80 {
margin-top:80px !important;
}
.mt90 {
margin-top:90px !important;
}
.mt100 {
margin-top:100px !important;
}
.pcCont {
display:block !important;
}
.pcTabCont {
display:block !important;
}
.tabOnlyCont {
display:none !important;
}
.spCont {
display:none !important;
}
.spOnlyCont {
display:none !important;
}
.fwb {
font-weight: bold !important;
}
.fw500 {
font-weight: 500 !important;
}
.fw600 {
font-weight: 600 !important;
}
.fw700 {
font-weight: 700 !important;
}
.fw800 {
font-weight: 800 !important;
}
.fw900 {
font-weight: 900 !important;
}
.ls01 {
letter-spacing: 0.1em;
}
.ls02 {
letter-spacing: 0.075em;
}
.ls03 {
letter-spacing: 0.05em;
}
.ls04 {
letter-spacing: 0.025em;
}
.ls05 {
letter-spacing: 0.2em;
}
.ls06 {
letter-spacing: -0.05em;
}
.ls07 {
letter-spacing: -0.2em;
}
.ls08 {
letter-spacing: -0.025em;
}
.ls09 {
letter-spacing: 0.3em;
}
.lh13 {
line-height: 1.3;
}
.lh14 {
line-height: 1.4;
}
.lh15 {
line-height: 1.5;
}
.lh16 {
line-height: 1.6;
}
@media screen and (max-width: 800px) {
a:hover {
filter: alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
.pcCont {
display:none !important;
}
.tabOnlyCont {
display:block !important;
}
.spCont {
display:block !important;
}
.tacTab {
text-align: center;
}
.tacPc {
text-align: left;
}
}
@media screen and (max-width: 500px) {
body {
font-size: 1.5rem;
}
.spOnlyCont {
display:block !important;
}
.pcTabCont {
display:none !important;
}
.tabOnlyCont {
display:none !important;
}
.tacSp {
text-align: center;
}
.mb10 {
margin-bottom:10px !important;
}
.mb15 {
margin-bottom:15px !important;
}
.mb20 {
margin-bottom:20px !important;
}
.mb30 {
margin-bottom:30px !important;
}
.mb40 {
margin-bottom:30px !important;
}
.mb50 {
margin-bottom:30px !important;
}
.mb60 {
margin-bottom:30px !important;
}
.mb70 {
margin-bottom:40px !important;
}
.mb80 {
margin-bottom:60px !important;
}
.mb90 {
margin-bottom:60px !important;
}
.mb100 {
margin-bottom:60px !important;
}
.mt5 {
margin-top:5px !important;
}
.mt10 {
margin-top:10px !important;
}
.mt15 {
margin-top:10px !important;
}
.mt20 {
margin-top:20px !important;
}
.mt30 {
margin-top:20px !important;
}
.mt40 {
margin-top:20px !important;
}
.mt50 {
margin-top:30px !important;
}
.mt60 {
margin-top:30px !important;
}
.mt70 {
margin-top:40px !important;
}
.mt80 {
margin-top:60px !important;
}
.mt90 {
margin-top:60px !important;
}
.mt100 {
margin-top:60px !important;
}
}
.f9 {
font-size: calc(100vw * 9 / 400) !important;
}
.f10 {
font-size: calc(100vw * 10 / 400) !important;
}
.f11 {
font-size: calc(100vw * 11 / 400) !important;
}
.f12 {
font-size: calc(100vw * 12 / 400) !important;
}
.f13 {
font-size: calc(100vw * 13 / 400) !important;
}
.f14 {
font-size: calc(100vw * 14 / 400) !important;
}
.f15 {
font-size: calc(100vw * 15 / 400) !important;
}
.f155 {
font-size: calc(100vw * 15.5 / 400) !important;
}
.f16 {
font-size: calc(100vw * 16 / 400) !important;
}
.f17 {
font-size: calc(100vw * 17 / 400) !important;
}
.f18 {
font-size: calc(100vw * 18 / 400) !important;
}
.f19 {
font-size: calc(100vw * 19 / 400) !important;
}
.f20 {
font-size: calc(100vw * 20 / 400) !important;
}
.f21 {
font-size: calc(100vw * 21 / 400) !important;
}
.f22 {
font-size: calc(100vw * 22 / 400) !important;
}
.f23 {
font-size: calc(100vw * 23 / 400) !important;
}
.f24 {
font-size: calc(100vw * 24 / 400) !important;
}
.f25 {
font-size: calc(100vw * 25 / 400) !important;
}
.f26 {
font-size: calc(100vw * 26 / 400) !important;
}
.f27 {
font-size: calc(100vw * 27 / 400) !important;
}
.f28 {
font-size: calc(100vw * 28 / 400) !important;
}
.f30 {
font-size: calc(100vw * 30 / 400) !important;
}
.f32 {
font-size: calc(100vw * 32 / 400) !important;
}
.f34 {
font-size: calc(100vw * 34 / 400) !important;
}
@media screen and (min-width: 600px) {
.f9 {
font-size: calc(100vw * 9 / 600) !important;
}
.f10 {
font-size: calc(100vw * 10 / 600) !important;
}
.f11 {
font-size: calc(100vw * 11 / 600) !important;
}
.f12 {
font-size: calc(100vw * 12 / 600) !important;
}
.f13 {
font-size: calc(100vw * 13 / 600) !important;
}
.f14 {
font-size: calc(100vw * 14 / 600) !important;
}
.f15 {
font-size: calc(100vw * 15 / 600) !important;
}
.f155 {
font-size: calc(100vw * 15.5 / 600) !important;
}
.f16 {
font-size: calc(100vw * 16 / 600) !important;
}
.f17 {
font-size: calc(100vw * 17 / 600) !important;
}
.f18 {
font-size: calc(100vw * 18 / 600) !important;
}
.f19 {
font-size: calc(100vw * 19 / 600) !important;
}
.f20 {
font-size: calc(100vw * 20 / 600) !important;
}
.f21 {
font-size: calc(100vw * 21 / 600) !important;
}
.f22 {
font-size: calc(100vw * 22 / 600) !important;
}
.f23 {
font-size: calc(100vw * 23 / 600) !important;
}
.f24 {
font-size: calc(100vw * 24 / 600) !important;
}
.f25 {
font-size: calc(100vw * 25 / 600) !important;
}
.f26 {
font-size: calc(100vw * 26 / 600) !important;
}
.f27 {
font-size: calc(100vw * 27 / 600) !important;
}
.f28 {
font-size: calc(100vw * 28 / 600) !important;
}
.f30 {
font-size: calc(100vw * 30 / 600) !important;
}
.f32 {
font-size: calc(100vw * 32 / 600) !important;
}
.f34 {
font-size: calc(100vw * 34 / 600) !important;
}
}
@media screen and (min-width: 800px) {
.f9 {
font-size: calc(500px * 9 / 450) !important;
}
.f10 {
font-size: calc(500px * 10 / 450) !important;
}
.f11 {
font-size: calc(500px * 11 / 450) !important;
}
.f12 {
font-size: calc(500px * 12 / 450) !important;
}
.f13 {
font-size: calc(500px * 13 / 450) !important;
}
.f14 {
font-size: calc(500px * 14 / 450) !important;
}
.f15 {
font-size: calc(500px * 15 / 450) !important;
}
.f155 {
font-size: calc(500px * 15.5 / 450) !important;
}
.f16 {
font-size: calc(500px * 16 / 450) !important;
}
.f17 {
font-size: calc(500px * 17 / 450) !important;
}
.f18 {
font-size: calc(500px * 18 / 450) !important;
}
.f19 {
font-size: calc(500px * 19 / 450) !important;
}
.f20 {
font-size: calc(500px * 20 / 450) !important;
}
.f21 {
font-size: calc(500px * 21 / 450) !important;
}
.f22 {
font-size: calc(500px * 22 / 450) !important;
}
.f23 {
font-size: calc(500px * 23 / 450) !important;
}
.f24 {
font-size: calc(500px * 24 / 450) !important;
}
.f25 {
font-size: calc(500px * 25 / 450) !important;
}
.f26 {
font-size: calc(500px * 26 / 450) !important;
}
.f27 {
font-size: calc(500px * 27 / 450) !important;
}
.f28 {
font-size: calc(500px * 28 / 450) !important;
}
.f30 {
font-size: calc(500px * 30 / 450) !important;
}
.f32 {
font-size: calc(500px * 32 / 450) !important;
}
.f34 {
font-size: calc(500px * 34 / 450) !important;
}
}
/*ヘッダー
-------------------------------------------------------*/
header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
z-index: 1000;
padding: 35px;
width: 100%;
}
.logo {
position: relative;
width: 210px;
height: 72px;
}
.logo img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s ease-in-out;
}
.logoA {
z-index: 2;
opacity: 1;
}
.logoB {
z-index: 1;
opacity: 0;
}
.active .logoA {
opacity: 0;
}
.active .logoB {
opacity: 1;
}
.logoLink:hover {
filter: alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.headRight {
display: flex;
}
.h1head {
display: none;
}
.btnGuidelines {
margin-right: 15px;
transition: opacity 0.5s, display 0.5s;
}
.btnEntry {
margin-right: 15px;
transition: opacity 0.5s, display 0.5s;
}
.active .btnGuidelines,
.active .btnEntry {
display: none;
/* opacity: 0; */
/* @starting-style {
opacity: 0;
} */
/* pointer-events: none;
cursor: default; */
}
.btnGuidelines a,
.btnEntry a {
display: block;
color: #fff;
font-weight: 700;
padding: 15px 0;
width: 130px;
font-size: 14px;
border-radius: 100px;
transition: all .4s;
}
.btnGuidelines a {
background-color: #05350a;
}
.btnEntry a {
background-color: #05ab1e;
}
.btnGuidelines a:hover {
background-color: #fff;
color: #05ab1e;
}
.btnEntry a:hover {
background-color: #fff;
color: #05ab1e;
}
.ham-btn {
display:flex;
align-items: center;
height: 45px;
z-index:151;
/* padding: 0 1.75rem; */
cursor: pointer;
margin-top: 7px;
}
.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.menu-trigger {
position: relative;
width: 40px;
height: 45px;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 40px;
height: 2px;
background-color: #000;
}
.menu-trigger.active span {
background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
top: 0px;
}
.menu-trigger span:nth-of-type(2) {
top: 12px;
}
.menu-trigger span:nth-of-type(3) {
top: 24px;
}
.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(12px) rotate(-45deg);
transform: translateY(12px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-12px) rotate(45deg);
transform: translateY(-12px) rotate(45deg);
}
.menu-trigger::after {
content: 'MENU';
font-size: 12px;
font-weight: 700;
text-align: center;
width: 100%;
display: inline-block;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
letter-spacing: 0.05em;
transition: all .4s;
}
.menu-trigger.active::after {
content: 'CLOSE';
color: #fff;
}
.ham-btn a:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
.ham-btn:hover .menu-trigger span {
background-color: #05ab1e;
}
.ham-btn:hover .menu-trigger::after {
color: #05ab1e;
}
.ham-btn:hover .menu-trigger.active span {
background-color: #fff;
}
.ham-btn:hover .menu-trigger.active::after {
color: #fff;
}
.nav {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 80px 5vw;
position: absolute;
top: 0;
left: 0;
transform: translateY(-150%);
transition: all 0.6s;
width: 100%;
height: 100vh;
overflow-y: auto;
/* -webkit-overflow-scrolling: touch;
overflow-scrolling: touch; */
background-color: #05ab1e;
z-index: -1;
/*font-size: 4vw;*/
/*font-size: clamp(15px, 4vw, 20px);*/
/*font-size: calc(100vw * 15 / 400);*/
}
.nav.active2,
.nav.active {
top: 0;
transform: translateY(0%);
}
.navWrap {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.h1nav {
font-size: 63px;
font-weight: 900;
color: #fff;
flex-shrink: 0;
line-height: 1.4;
}
.navCont {
width: 53.5%;
}
.navUl {
display: flex;
flex-wrap: wrap;
gap: 3rem 0;
}
.navUl li {
width: 50%;
}
.navUl li a {
display: flex;
align-items: center;
font-size: 20px;
gap: 1rem;
width: 100%;
color: #fff;
}
.navUl li a:hover {
filter: alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.navUl li a img {
width: 30px;
}
@media(max-width: 1400px){
.h1nav {
font-size: calc(100vw * 63 / 1400);
}
.navUl li a {
font-size: calc(100vw * 20 / 1400);
}
.navUl li a img {
width: 2.14285714vw;
}
}
@media(max-width: 800px){
.logo {
aspect-ratio: 210 / 72;
width: 180px;
height: auto;
}
.btnGuidelines {
display: none;
}
.h1head {
margin-right: 15px;
color: #fff;
font-size: 15px;
}
.active .h1head {
display: flex;
align-items: center;;
}
.nav {
padding: 25vw 5vw 15vw;
/* overflow: hidden; */
/* scrollbar-color: #fff #ff0000; */
}
.h1nav {
display: none;
}
.navCont {
width: 100%;
overflow-y: scroll;
height: 60vh;
}
.navUl {
flex-direction: column;
flex-wrap: nowrap;
gap: 3rem 0;
}
.nav::-webkit-scrollbar,
.navCont::-webkit-scrollbar {
width: 10px;
}
.nav::-webkit-scrollbar-track,
.navCont::-webkit-scrollbar-track {
background-color: #37bc4b;
border-radius: 8px;
}
.nav::-webkit-scrollbar-thumb,
.navCont::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 8px;
}
.navUl li {
width: 100%;
}
.navUl li a {
font-size: 20px;
}
.navUl li a img {
width: 30px;
}
}
@media(max-width: 500px){
header {
padding: 4vw;
}
.logo {
width: 25vw;
}
.nav {
padding: 25vw 5vw 15vw;
}
.h1head {
margin-right: 2vw;
font-size: 3vw;;
}
.navUl {
gap: 7vw 0;
}
.navUl li a {
font-size: calc(100vw * 17.5 / 400);
}
.navUl li a img {
width: 6.5vw;
}
}
.navCorp {
padding-top: 40px;
margin-top: 40px;
border-top: 1px solid #fff;
}
.ccorpUl {
display: flex;
gap: 5rem;
}
.ccorpUl li a {
display: flex;
align-items: center;
gap: 1rem;
color: #fff;
font-size: 19.5px;
}
.ccorpUl li a img {
width: 18px;
}
@media(max-width: 1400px){
.navCorp {
padding-top: 2.85714286vw;
margin-top: 2.85714286vw;
}
.ccorpUl li a {
font-size: calc(100vw * 19.5 / 1400);
}
.ccorpUl li a img {
width: 1.28571429vw;
}
}
@media(max-width: 800px){
.ccorpUl {
flex-direction: column;
gap: 1rem;
}
.ccorpUl li a {
font-size: 19.5px;
}
.ccorpUl li a img {
width: 18px;
}
}
@media(max-width: 500px){
.navCorp {
padding-top: 8vw;
margin-top: 10vw;
}
.ccorpUl li a {
font-size: calc(100vw * 19.5 / 400);
}
.ccorpUl li a img {
width: 4.5vw;
}
}
.ctaHead {
display: flex;
justify-content: space-between;
margin-top: 60px;
}
.ctaHead li {
width: 48%;
}
.ctaHead li a {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
color: #fff;
font-size: 28px;
line-height: 1.7;
border-radius: 25px;
padding: 25px 40px;
}
.ctaHead li a small {
font-size: 64%;
display: block;
}
/* .ctaHead li a img {
width: 30px;
} */
.ctaHead li.ctaEntry a {
color: #05ab1e;
background-color: #fff;
}
.ctaHead li.ctaInternship a {
background-color: #05350a;
}
.ctaHead li.ctaEntry a:hover,
.ctaHead li.ctaInternship a:hover {
color: #05ab1e;
background-color: #ffff00;
filter: alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
.arw figure {
width: 30px;
height: 30px;
position: relative;
}
.ctaHead.child li.ctaEntry a {
border: 1px solid #05ab1e;
}
.ctaHead.child li.ctaInternship a {
border: 1px solid #05350a;
}
.ctaHead.child li.ctaEntry a:hover,
.ctaHead.child li.ctaInternship a:hover {
border: 1px solid #05350a;
}
.arw figure {
width: 30px;
height: 30px;
position: relative;
}
.arwA {
z-index: 2;
opacity: 1;
}
.arw img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.3s ease-in-out;
}
.arwB {
z-index: 1;
opacity: 0;
}
.arw:hover .arwA {
opacity: 0;
}
.arw:hover .arwB {
opacity: 1;
}
.arw.none:hover .arwA {
opacity: 1;
}
@media(max-width: 1400px){
.ctaHead li a {
font-size: calc(100vw * 28 / 1400);
}
.arw figure {
width: 2.14285714vw;
height: 2.14285714vw;
}
}
@media(max-width: 800px){
.ctaHead {
flex-direction: column;
margin-top: 2.85714286vw;
gap: 2vw;
}
.ctaHead li {
width: 100%;
}
.ctaHead li a {
font-size: 28px;
border-radius: 100px;
}
.ctaHead li.ctaInternship a {
line-height: 1.2;
padding: 15px 40px;
}
.ctaHead li a small {
display: none;
}
.arw figure {
width: 30px;
height: 30px;
}
}
@media(max-width: 500px){
.ctaHead {
margin-top: 10vw;
}
.ctaHead li a {
font-size: calc(100vw * 24 / 400);
padding: 4.5vw 5vw 4.5vw 8vw;
}
.ctaHead li.ctaInternship a {
padding: 3vw 5vw 3vw 8vw;
}
.arw figure {
width: 7.5vw;
height: 7.5vw;
}
}
/*フッター
-------------------------------------------------------*/
.footTop{
background-color: #b2ddfb;
}
.footChild {
}
/* .bgFoot {
} */
.ctaFoot {
padding-top: 10vw;
padding-bottom: 6.5vw;
margin-top: 0;
}
.ctaFoot.child {
padding-top: 6.5vw;
padding-bottom: 6.5vw;
}
.ctaHead.ctaFoot li.ctaEntry a {
color: #fff;
background-color: #05ab1e;
}
.ctaHead.ctaFoot li.ctaEntry a:hover,
.ctaHead.ctaFoot li.ctaInternship a:hover {
color: #05ab1e;
background-color: #fff;
}
.breadcrumbs {
font-size: 13px;
padding-bottom: 15px;
}
@media(max-width: 800px){
.ctaHead li a {
border-radius: 6vw;
}
.ctaHead.ctaFoot li a small {
display: block;
}
}
@media(max-width: 500px){
.ctaFoot {
padding-top: 20vw;
padding-bottom: 12.5vw;
}
.ctaFoot.child {
padding-top: 15vw;
padding-bottom: 15vw;
}
}
.footBtm {
padding: 80px 0 40px;
background: url("../img/common/bg_foot.png") repeat;
}
.logoFoot {
width: 210px;
margin-bottom: 70px;
}
.navFoot {
display: flex;
}
.navFootUl {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 0;
width: 50%;
font-size: 13px;
}
.navFootUl li {
width: 50%;
}
.navFootUl li a {
display: flex;
align-items: center;
gap: 1rem;
}
.navFootUl li a:hover {
filter: alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.navFootUl li a img {
width: 20px;
height: 20px;
}
@media(max-width: 800px){
.navFoot {
flex-direction: column;
gap: 1.5rem;
}
.navFootUl {
width: 100%;
font-size: calc(100vw * 13 / 500);
}
}
@media(max-width: 500px){
.footBtm {
padding: 13vw 0 10vw;
background: url("../img/common/bg_foot.png") repeat;
}
.logoFoot {
width: 52.5vw;
margin: 0;
margin-bottom: 10vw;
}
.navFoot {
flex-direction: column;
}
.navFootUl {
width: 100%;
font-size: calc(100vw * 11 / 400);
}
.navFootUl li a {
gap: 0.5rem;
}
.navFootUl li a img {
width: 4vw;
height: 4vw;
}
}
.copyWrap {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 30px;
margin-top: 100px;
}
.copyWrap a {
display: flex;
align-items: center;
gap: 1rem;
font-size: 13px;
}
.copyWrap li a:hover {
filter: alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.copyWrap li a img {
width: 12px;
}
.copyWrap li.copy {
font-size: 11px;
}
@media(max-width: 750px){
.copyWrap {
justify-content: flex-start;
flex-wrap: wrap;
gap: 1vw 6vw;
margin-top: 14vw;
}
.copyWrap li a img {
width: 3vw;
}
.copyWrap li.copy {
width: 100%;
}
}
@media(max-width: 500px){
.copyWrap a {
font-size: calc(100vw * 13 / 400);
}
.copyWrap li.copy {
font-size: calc(100vw * 11 / 400);
}
}
#pageTop {
position: fixed;
width: 75px;
bottom: 70px;
right: 3%;
z-index: 9999;
cursor: pointer;
}
#pageTop img {
transition: all .4s;
}
#pageTop:hover img {
padding-bottom: 10px;
}
.wrapper {
animation: floating-x 1.2s ease-in-out infinite alternate-reverse;
}
.target {
animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
0% {
transform: translateX(-15%);
}
100% {
transform: translateX(15%);
}
}
@keyframes floating-y {
0% {
transform: translateY(-20%);
}
100% {
transform: translateY(20%);
}
}
@-webkit-keyframes fadeInLeftSmall {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftSmall {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeftSmall {
-webkit-animation-name: fadeInLeftSmall;
animation-name: fadeInLeftSmall;
}
@-webkit-keyframes fadeInRightSmall {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightSmall {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRightSmall {
-webkit-animation-name: fadeInRightSmall;
animation-name: fadeInRightSmall;
}
@-webkit-keyframes fadeInUpSmall {
from {
opacity: 0;
-webkit-transform: translate3d(0, 30%, 0);
transform: translate3d(0, 30%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpSmall {
from {
opacity: 0;
-webkit-transform: translate3d(0, 30%, 0);
transform: translate3d(0, 30%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpSmall {
-webkit-animation-name: fadeInUpSmall;
animation-name: fadeInUpSmall;
}
@-webkit-keyframes fadeInDownSmall {
from {
opacity: 0;
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownSmall {
from {
opacity: 0;
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownSmall {
-webkit-animation-name: fadeInDownSmall;
animation-name: fadeInDownSmall;
}