@charset "UTF-8"; html { margin: 0; padding: 0; border: 0; font-size: 62.5%; vertical-align: baseline; scroll-behavior: smooth; } body { font-family: '游明朝'; background: #ffffff; line-height: 1; width: 100%; margin: 0 auto; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* Safari */ /* padding-left: 15px;*/ } /* 画面遷移時処理　start*/ body::before, body::after{ content: ""; position: fixed; top: 0; width: 100%; height: 100%; background: linear-gradient(to left top, rgb(255, 255, 255), rgb(250, 244, 233),rgb(254, 239, 211),rgba(250, 209, 104, 0.936)); animation: curtainOpen 1s forwards; animation-delay: 0.3s; z-index: 999; } @keyframes curtainOpen{ 0%{ opacity: 1; width: 100%; } 50%{ opacity: 1; } 100%{ opacity: 0; width: 0; visibility: hidden; } } body::before{ /* left: 0; */ right: 0; } body::after{ right: 0; } /* 画面遷移時処理　end */ img { max-width: 100%; height: auto; vertical-align: bottom; } a { text-decoration: none; transition: all 0.5s 0s ease; cursor: pointer; } .btn_radius { display: inline-block; width: 50%; font-size: 2.5rem; font-weight: bold; color: #fff; padding: 2rem 4rem; border-radius: 100vh; text-align: center; vertical-align: middle; transition: all 0.9s; cursor: pointer; letter-spacing: .1rem; } .btn_radius_pink { background: linear-gradient(270deg, #ff0b64, #fe91cc, #fe91cc, #ff3d91, #ff0b64); } .btn_radius_pink:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(251, 125, 148);/*赤2*/ background-color: #f9606c; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_radius_brown { background: linear-gradient(270deg, #E85400, #ffc19a, #ffc19a, #ff8b2c, #E85400); } .btn_radius_brown:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(247, 152, 70);/*オレンジ*/ background-color: #E85400; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_radius_green { background: linear-gradient(270deg, #00e813, #9affb0, #67f586, #24fc53, #00e813); } .btn_radius_green:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(43, 255, 54); /*緑*/ background-color: #59dc71; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_radius_rightblue { background: linear-gradient(270deg, #29e0f8, #9af0ff, #9ae9ff, #2cf1ff, #00d9e8); } .btn_radius_rightblue:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(95, 250, 255); /*青*/ background-color: #9fabfa; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_radius_blue { background: linear-gradient(270deg, #00aae8, #9abaff, #9abaff, #2c8fff, #00aae8); } .btn_radius_blue:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(95, 194, 255); /*青*/ background-color: #9fabfa; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_radius_yellow { background: linear-gradient(270deg, #ffea00, #e3fa5f, #dffc6f, #f0fa2e, #ffea01); } .btn_radius_yellow:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(238, 247, 111); /*黄*/ background-color: #ded03a; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_radius_red { background: linear-gradient(270deg, #f95050, #ffa3a3, #fb5151, #ff3838, #f95050); } .btn_radius_red:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(252, 129, 129); /*赤*/ background-color: #f95050; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_radius_purple { background: linear-gradient(270deg, #ff00ff, #ff22f0, #fa95f2, #fd29bd, #ff00d4); } .btn_radius_purple:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(252, 129, 221); /*紫*/ background-color: #ff00ff; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_download01 { display: inline-block; width: 95%; font-size: 2.5rem; font-weight: bold; color: #fff; background: #05f111; padding: 1.5rem; border-radius: 100vh; text-align: center; vertical-align: middle; transition: all .9s; cursor: pointer; letter-spacing: .1rem; } .btn_download01:hover { color: #000000; box-shadow: 0px 0px 25px 25px rgb(131, 252, 131); background-color: #05f111; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_download01:hover::after { transform: scale(1, 1); } .btn_download02 { display: inline-block; width: 100%; font-size: 2.5rem; font-weight: bold; color: #fff; background: #e38a31; padding: 1.5rem; border-radius: 100vh; text-align: center; vertical-align: middle; transition: all .9s; cursor: pointer; letter-spacing: .1rem; } .btn_download02:hover { color: #000000; box-shadow: 0px 0px 25px 25px #e38a31; background-color: #e38a31; background-position: 99% 50%; cursor: pointer; transform: rotateX(360deg); } .btn_download02:hover::after { transform: scale(1, 1); } .bg_white { background: #fff; } .bg_orange { background: #E85400; } .bg_green { background: #8CB808; } .bg_brown { background: #d78930; } .bg_ligth_green { background: #59dc71; } .bg_light_pink { background:#f9606c; } .bg_light_blue { background:#9fabfa; } .bg_dark_yellow { background: #ded03a; } .bg_light_red { background: #C7A185; } .bg_light_orange { background: #fbb073; } .header_skin:hover { color: #000000; border-radius: 20px; box-shadow: 0px 0px 25px 25px rgb(255, 211, 178); /*肌*/ background-color: rgb(255, 211, 178); opacity: .7; transition: opacity .2s ease; letter-spacing: 0.2em; } .header_pink:hover { color: #000000; border-radius: 20px; box-shadow: 0px 0px 25px 25px rgb(255, 148, 184);/*ピンク*/ background-color: rgb(255, 148, 184);/*ピンク*/ opacity: .7; transition: opacity .2s ease; letter-spacing: 0.2em; } .header_green:hover { color: #000000; border-radius: 20px; box-shadow: 0px 0px 25px 25px rgb(43, 255, 54); /*緑*/ background-color: rgb(43, 255, 54); /*緑*/ opacity: .7; transition: opacity .2s ease; letter-spacing: 0.2em; } .header_lightblue:hover { color: #000000; border-radius: 20px; box-shadow: 0px 0px 25px 25px rgb(95, 250, 255); /*青*/ background-color: rgb(95, 250, 255); /*青*/ opacity: .7; transition: opacity .2s ease; letter-spacing: 0.2em; } .header_blue:hover { color: #000000; border-radius: 20px; box-shadow: 0px 0px 25px 25px rgb(95, 194, 255); /*青*/ background-color: rgb(95, 194, 255); /*青*/ opacity: .7; transition: opacity .2s ease; letter-spacing: 0.2em; } .header_red:hover { color: #000000; border-radius: 20px; box-shadow: 0px 0px 25px 25px rgb(252, 129, 129); /*赤*/ background-color: rgb(252, 129, 129); /*赤*/ opacity: .7; transition: opacity .2s ease; letter-spacing: 0.2em; } .taL { text-align: left !important; } .taC { text-align: center !important; } .disp_flex { display: flex; } .flex_column { flex-direction: column; } .wrap { flex-wrap: wrap; } .ai_top { align-items: top; } .ali_center { align-items: center; } .ai_baseline { align-items: baseline; } .pc-only { display: block !important; } .tab-only { display: none !important; } .sp-only { display: none !important; } .fuyuu { margin: 0 auto 20px auto; position: relative; text-align: center; line-height: 1.0; animation: Fuyuu 2s linear infinite; transform-origin: 50% 50%; } @keyframes Fuyuu { 0% { transform: translateY(0) } 50% { transform: translateY(-20px) } 100% { transform: translateY(0) } } .fuwafuwa { animation: fuwafuwa 3s ease-in-out infinite alternate; display: inline-block; transition: 1.5s ease-in-out; } @keyframes fuwafuwa { 0% { transform:translate(0, 0) rotate(-20deg); } 50% { transform:translate(0, -20px) rotate(0deg); } 100% { transform:translate(0, 0) rotate(20deg); } } .poyo { animation: poyopoyo 1.5s ease-out infinite; opacity: 1; } @keyframes poyopoyo { 0%, 40%, 60%, 80% { transform: scale(1.0); } 50%, 70% { transform: scale(0.95); } } .mapHover:hover{ animation: poyoyon2 2s infinite; } .poyo_2{ animation: poyoyon2 2s infinite; } @keyframes poyoyon2 { 0% { transform: scale(1.0, 1.0) translate(0, 0); } 15% { transform: scale(0.98, 0.9) translate(0, 5px); } 30% { transform: scale(1.02, 1.0) translate(0, 8px); } 50% {transform: scale(0.98, 1.05) translate(0, -8px); } 70% { transform: scale(1.0, 0.9) translate(0, 5px); } 100% { transform: scale(1.0, 1.0) translate(0, 0); } 0%, 100% { opacity: 1; } } .poyo_3 { animation: poyoyon3 1.5s infinite; opacity: 1; } @keyframes poyoyon3 { 0%, 40% { transform: skew(0deg, 0deg) translate(160%, 0%);; } 5% { transform: skew(5deg, 5deg) translate(160%, 0%);; } 10% { transform: skew(-4deg, -4deg) translate(160%, 0%);; } 15% { transform: skew(3deg, 3deg) translate(160%, 0%);; } 20% { transform: skew(-2deg, -2deg) translate(160%, 0%);; } 25% { transform: skew(1deg, 1deg) translate(160%, 0%);; } 30% { transform: skew(-0.6deg, -0.6deg) translate(160%, 0%);; } 35% { transform: skew(0.3deg, 0.3deg) translate(160%, 0%);; } 100% { transform: skew(0.3deg, 0.3deg) translate(160%, 0%);; } } @keyframes fadeInAnime{ from { opacity: 0; } to { opacity: 1; } } .sideMove { animation: sideMove 3s infinite; } @keyframes sideMove { 0% { transform:translateX(0px); } 25% { transform:translateX(400px); } 100% { transform:translateX(0px); } } .rotation{ margin-top: 10px; float: left; animation:3s linear infinite rotation; } @keyframes rotation{ 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg); } } .rotation2{ margin-top: 10px; margin-left: 20px; float: left; animation:3s linear infinite rotation2; } @keyframes rotation2{ 0%{ transform:rotateX(0);} 100%{ transform:rotateX(360deg); } } .rotation3{ margin-top: 10px; margin-left: 20px; animation:3s linear infinite rotation3; } @keyframes rotation3{ 0%{ transform:rotateY(0);} 100%{ transform:rotateY(360deg); } } .rotation4{ margin-top: 10px; margin-left: 20px; float: left; animation:3s ease-in-out infinite alternate rotation4; } @keyframes rotation4{ 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg); } } .swing { margin-top: 10px; float: left; } .swing:hover { animation-name: swing; animation-duration: 2s; animation-delay: .45s; } @-webkit-keyframes swing { 0%,100% { -webkit-transform-origin: top center; } 10% { -webkit-transform: rotate(-15deg); } 20% { -webkit-transform: rotate(10deg); } 30% { -webkit-transform: rotate(-5deg); } 40% { -webkit-transform: rotate(5deg); } 50% { -webkit-transform: rotate(-3deg); } 60% { -webkit-transform: rotate(2deg); } 70% { -webkit-transform: rotate(-2deg); } 80% { -webkit-transform: rotate(1deg); } 90% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } .swing2 { margin-top: 10px; margin-left: 20px; float: left; } .swing2:hover { animation-name: swing2; animation-duration: 1s; animation-delay: .3s; } @-webkit-keyframes swing2 { 10% { -webkit-transform: rotate(-10deg); } 20% { -webkit-transform: rotate(8deg); } 30% { -webkit-transform: rotate(-5deg); } 40% { -webkit-transform: rotate(4deg); } 50% { -webkit-transform: rotate(-3deg); } 60% { -webkit-transform: rotate(2deg); } 70% { -webkit-transform: rotate(-1deg); } 80% { -webkit-transform: rotate(1deg); } 90% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } .swing3 { /* margin-top: 10px; margin-left: 20px; */ animation-name: swing3; animation-duration: 1s; animation-delay: 1s; animation-iteration-count: infinite; } @-webkit-keyframes swing3 { 0% { -webkit-transform: rotate(0deg); } 55% { -webkit-transform: rotate(0deg); } 60% { -webkit-transform: rotate(-10deg); } 65% { -webkit-transform: rotate(8deg); } 70% { -webkit-transform: rotate(-5deg); } 75% { -webkit-transform: rotate(4deg); } 80% { -webkit-transform: rotate(-3deg); } 85% { -webkit-transform: rotate(2deg); } 90% { -webkit-transform: rotate(-1deg); } 95% { -webkit-transform: rotate(1deg); } 100% { -webkit-transform: rotate(0deg); } } .animation{ animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; } .keyframe6 { animation-name: jumpLeft; animation-duration: 0.6s; } @keyframes jumpLeft{ 0% { transform:translate(0%, 60px) rotateX(50deg); } 100% { transform:translate(0%, 0%) ; } } .keyframe7 { animation-name: jumpCenter; animation-duration: 0.6s; } @keyframes jumpCenter{ 0% { transform:translate(0%, 60px) rotateX(50deg) translate(160%, 0%); } 100% { transform:translate(0%, 0%) translate(160%, 0%); } } .keyframe8 { animation-name: jump2; animation-duration: 5.6s; } @keyframes jump2{ 0% { transform: scale(1.0, 1.0) translate(0%, 0%); } 10% { transform: scale(0.9, 1.0) translate(40%, 5%); } 40% { transform: scale(1.0, 0.9) translate(80%, 15%); } 50% { transform: scale(0.9, 1.1) translate(120%, 0%); } 60% { transform: scale(1.1, 0.8) translate(160%, 40%); } 75% { transform: scale(0.9, 1.2) translate(200%, -20%); } 85% { transform: scale(1.0, 1.0) translate(240%, 15%); } 100% { transform: scale(0.8, 1.0) translate(280%, 0%); } } .img-box { position: relative; width: 1140px; height: 500px; overflow: hidden; border-radius:60px; box-shadow:12.5px 12.5px 15px 12px rgb(180, 190, 170); background-image: url("../images/yuugoukai/"); } .img1, .img2, .img3, .img4 { width: 1140px; height: 500px; position: absolute; top: 0; background: center center no-repeat; animation: anime 16s 0s infinite; z-index: 0; opacity: 0; } .img1 { background-image: url(../images/yuugoukai/topslide01.png); } .img2 { background-image: url(../images/yuugoukai/topslide02.jpg); animation-delay: 4s; } .img3 { background-image: url(../images/yuugoukai/topslide03.jpg); animation-delay: 8s; } .img4 { background-image: url(../images/yuugoukai/topslide04.jpg); animation-delay: 12s; } @keyframes anime { 0% { opacity: 1; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 0; z-index: 1; } 100% { opacity: 0; transform: scale(1.2); } } .topAbsolute { position: fixed; right: 30px; bottom: 30px; } .spinner { font-size: 30px; color:rgb(0, 255, 13); text-align: left; position: absolute; width: 120px; height: 120px; transform: perspective(206px) rotateX(45deg); } .outer { box-sizing: border-box; animation: spin 3s linear infinite; height: 100%; } .loadInner { position: absolute; border-radius: 50%; width: 64px; height: 64px; animation: spin 1.8s ease-in-out infinite; } .loadInner.tl { top: 0; left: 0; /* border-top: 2px solid #531430; border-left: 4px solid #531430; */ border-top: 2px solid #5eef3e; border-left: 4px solid #145323; } .loadInner.tr { top: 0; right: 0; border-top: 2px solid #e04960; border-right: 4px solid #e04960; } .loadInner.br { bottom: 0; right: 0; /* border-bottom: 2px solid #531430; border-right: 4px solid #531430; */ border-bottom: 2px solid #72dcfc; border-right: 4px solid #55d1ca; } .loadInner.bl { bottom: 0; left: 0; /* border-bottom: 2px solid #e04960; border-left: 4px solid #e04960; */ border-bottom: 2px solid #4ca3f4; border-left: 4px solid #5d49e0; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* animsiton */ .animsition, .animsition-overlay { position: relative; opacity: 0; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animsition-overlay-slide { position: fixed; z-index: 1; width: 100%; height: 100%; background-color: #ddd; } .animsition-loading, .animsition-loading:after { width: 32px; height: 32px; position: fixed; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; border-radius: 50%; z-index: 100; } .animsition-loading { background-color: transparent; border-top: 5px solid rgba(0, 0, 0, 0.2); border-right: 5px solid rgba(0, 0, 0, 0.2); border-bottom: 5px solid rgba(0, 0, 0, 0.2); border-left: 5px solid #eee; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-name: animsition-loading; animation-name: animsition-loading; } @-webkit-keyframes animsition-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animsition-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-in { -webkit-animation-name: fade-in; animation-name: fade-in; } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } .fade-out { -webkit-animation-name: fade-out; animation-name: fade-out; } @-webkit-keyframes fade-in-up { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-up { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-up { -webkit-animation-name: fade-in-up; animation-name: fade-in-up; } @-webkit-keyframes fade-out-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } } @keyframes fade-out-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } } .fade-out-up { -webkit-animation-name: fade-out-up; animation-name: fade-out-up; } @-webkit-keyframes fade-in-up-sm { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-up-sm { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-up-sm { -webkit-animation-name: fade-in-up-sm; animation-name: fade-in-up-sm; } @-webkit-keyframes fade-out-up-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } } @keyframes fade-out-up-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } } .fade-out-up-sm { -webkit-animation-name: fade-out-up-sm; animation-name: fade-out-up-sm; } @-webkit-keyframes fade-in-up-lg { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-up-lg { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-up-lg { -webkit-animation-name: fade-in-up-lg; animation-name: fade-in-up-lg; } @-webkit-keyframes fade-out-up-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } } @keyframes fade-out-up-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } } .fade-out-up-lg { -webkit-animation-name: fade-out-up-lg; animation-name: fade-out-up-lg; } @-webkit-keyframes fade-in-down { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-down { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-down { -webkit-animation-name: fade-in-down; animation-name: fade-in-down; } @-webkit-keyframes fade-out-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } } @keyframes fade-out-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } } .fade-out-down { -webkit-animation-name: fade-out-down; animation-name: fade-out-down; } @-webkit-keyframes fade-in-down-sm { 0% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-down-sm { 0% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-down-sm { -webkit-animation-name: fade-in-down-sm; animation-name: fade-in-down-sm; } @-webkit-keyframes fade-out-down-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } } @keyframes fade-out-down-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } } .fade-out-down-sm { -webkit-animation-name: fade-out-down-sm; animation-name: fade-out-down-sm; } @-webkit-keyframes fade-in-down-lg { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-down-lg { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .fade-in-down-lg { -webkit-animation-name: fade-in-down; animation-name: fade-in-down; } @-webkit-keyframes fade-out-down-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } } @keyframes fade-out-down-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } } .fade-out-down-lg { -webkit-animation-name: fade-out-down-lg; animation-name: fade-out-down-lg; } @-webkit-keyframes fade-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-left { -webkit-animation-name: fade-in-left; animation-name: fade-in-left; } @-webkit-keyframes fade-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } } @keyframes fade-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } } .fade-out-left { -webkit-animation-name: fade-out-left; animation-name: fade-out-left; } @-webkit-keyframes fade-in-left-sm { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left-sm { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-left-sm { -webkit-animation-name: fade-in-left-sm; animation-name: fade-in-left-sm; } @-webkit-keyframes fade-out-left-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } } @keyframes fade-out-left-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } } .fade-out-left-sm { -webkit-animation-name: fade-out-left-sm; animation-name: fade-out-left-sm; } @-webkit-keyframes fade-in-left-lg { 0% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left-lg { 0% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-left-lg { -webkit-animation-name: fade-in-left-lg; animation-name: fade-in-left-lg; } @-webkit-keyframes fade-out-left-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } } @keyframes fade-out-left-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } } .fade-out-left-lg { -webkit-animation-name: fade-out-left-lg; animation-name: fade-out-left-lg; } @-webkit-keyframes fade-in-right { 0% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right { 0% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-right { -webkit-animation-name: fade-in-right; animation-name: fade-in-right; } @-webkit-keyframes fade-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } } @keyframes fade-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } } .fade-out-right { -webkit-animation-name: fade-out-right; animation-name: fade-out-right; } @-webkit-keyframes fade-in-right-sm { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right-sm { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-right-sm { -webkit-animation-name: fade-in-right-sm; animation-name: fade-in-right-sm; } @-webkit-keyframes fade-out-right-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } } @keyframes fade-out-right-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } } .fade-out-right-sm { -webkit-animation-name: fade-out-right-sm; animation-name: fade-out-right-sm; } @-webkit-keyframes fade-in-right-lg { 0% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right-lg { 0% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .fade-in-right-lg { -webkit-animation-name: fade-in-right-lg; animation-name: fade-in-right-lg; } @-webkit-keyframes fade-out-right-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } } @keyframes fade-out-right-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } } .fade-out-right-lg { -webkit-animation-name: fade-out-right-lg; animation-name: fade-out-right-lg; } @-webkit-keyframes rotate-in { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } } @keyframes rotate-in { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } } .rotate-in { -webkit-animation-name: rotate-in; animation-name: rotate-in; } @-webkit-keyframes rotate-out { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } } @keyframes rotate-out { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } } .rotate-out { -webkit-animation-name: rotate-out; animation-name: rotate-out; } @-webkit-keyframes rotate-in-sm { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } } @keyframes rotate-in-sm { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } } .rotate-in-sm { -webkit-animation-name: rotate-in-sm; animation-name: rotate-in-sm; } @-webkit-keyframes rotate-out-sm { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } 100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } } @keyframes rotate-out-sm { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } 100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } } .rotate-out-sm { -webkit-animation-name: rotate-out-sm; animation-name: rotate-out-sm; } @-webkit-keyframes rotate-in-lg { 0% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } } @keyframes rotate-in-lg { 0% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } 100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } } .rotate-in-lg { -webkit-animation-name: rotate-in-lg; animation-name: rotate-in-lg; } @-webkit-keyframes rotate-out-lg { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } } @keyframes rotate-out-lg { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } } .rotate-out-lg { -webkit-animation-name: rotate-out-lg; animation-name: rotate-out-lg; } @-webkit-keyframes flip-in-x { 0% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } } @keyframes flip-in-x { 0% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } } .flip-in-x { -webkit-animation-name: flip-in-x; animation-name: flip-in-x; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-x { 0% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } } @keyframes flip-out-x { 0% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } } .flip-out-x { -webkit-animation-name: flip-out-x; animation-name: flip-out-x; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } } @keyframes flip-in-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } } .flip-in-x-nr { -webkit-animation-name: flip-in-x-nr; animation-name: flip-in-x-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } } @keyframes flip-out-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } } .flip-out-x-nr { -webkit-animation-name: flip-out-x-nr; animation-name: flip-out-x-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } } @keyframes flip-in-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } } .flip-in-x-fr { -webkit-animation-name: flip-in-x-fr; animation-name: flip-in-x-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes flip-out-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } .flip-out-x-fr { -webkit-animation-name: flip-out-x-fr; animation-name: flip-out-x-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-y { 0% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } 100% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } } @keyframes flip-in-y { 0% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } 100% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } } .flip-in-y { -webkit-animation-name: flip-in-y; animation-name: flip-in-y; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-y { 0% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } } @keyframes flip-out-y { 0% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } } .flip-out-y { -webkit-animation-name: flip-out-y; animation-name: flip-out-y; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } 100% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } } @keyframes flip-in-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } 100% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } } .flip-in-y-nr { -webkit-animation-name: flip-in-y-nr; animation-name: flip-in-y-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } } @keyframes flip-out-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } } .flip-out-y-nr { -webkit-animation-name: flip-out-y-nr; animation-name: flip-out-y-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-in-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } } @keyframes flip-in-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } } .flip-in-y-fr { -webkit-animation-name: flip-in-y-fr; animation-name: flip-in-y-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flip-out-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } } @keyframes flip-out-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } } .flip-out-y-fr { -webkit-animation-name: flip-out-y-fr; animation-name: flip-out-y-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes zoom-in { 0% { -webkit-transform: scale(.7); transform: scale(.7); opacity: 0; } 100% { opacity: 1; } } @keyframes zoom-in { 0% { -webkit-transform: scale(.7); transform: scale(.7); opacity: 0; } 100% { opacity: 1; } } .zoom-in { -webkit-animation-name: zoom-in; animation-name: zoom-in; } @-webkit-keyframes zoom-out { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(.7); transform: scale(.7); opacity: 0; } 100% { opacity: 0; } } @keyframes zoom-out { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(.7); transform: scale(.7); opacity: 0; } 100% { opacity: 0; } } .zoom-out { -webkit-animation-name: zoom-out; animation-name: zoom-out; } @-webkit-keyframes zoom-in-sm { 0% { -webkit-transform: scale(.95); transform: scale(.95); opacity: 0; } 100% { opacity: 1; } } @keyframes zoom-in-sm { 0% { -webkit-transform: scale(.95); transform: scale(.95); opacity: 0; } 100% { opacity: 1; } } .zoom-in-sm { -webkit-animation-name: zoom-in-sm; animation-name: zoom-in-sm; } @-webkit-keyframes zoom-out-sm { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(.95); transform: scale(.95); opacity: 0; } 100% { opacity: 0; } } @keyframes zoom-out-sm { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(.95); transform: scale(.95); opacity: 0; } 100% { opacity: 0; } } .zoom-out-sm { -webkit-animation-name: zoom-out-sm; animation-name: zoom-out-sm; } @-webkit-keyframes zoom-in-lg { 0% { -webkit-transform: scale(.4); transform: scale(.4); opacity: 0; } 100% { opacity: 1; } } @keyframes zoom-in-lg { 0% { -webkit-transform: scale(.4); transform: scale(.4); opacity: 0; } 100% { opacity: 1; } } .zoom-in-lg { -webkit-animation-name: zoom-in-lg; animation-name: zoom-in-lg; } @-webkit-keyframes zoom-out-lg { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(.4); transform: scale(.4); opacity: 0; } 100% { opacity: 0; } } @keyframes zoom-out-lg { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(.4); transform: scale(.4); opacity: 0; } 100% { opacity: 0; } } .zoom-out-lg { -webkit-animation-name: zoom-out-lg; animation-name: zoom-out-lg; } @-webkit-keyframes overlay-slide-in-top { 0% { height: 100%; } 100% { height: 0; } } @keyframes overlay-slide-in-top { 0% { height: 100%; } 100% { height: 0; } } .overlay-slide-in-top { top: 0; height: 0; -webkit-animation-name: overlay-slide-in-top; animation-name: overlay-slide-in-top; } @-webkit-keyframes overlay-slide-out-top { 0% { height: 0; } 100% { height: 100%; } } @keyframes overlay-slide-out-top { 0% { height: 0; } 100% { height: 100%; } } .overlay-slide-out-top { top: 0; height: 100%; -webkit-animation-name: overlay-slide-out-top; animation-name: overlay-slide-out-top; } @-webkit-keyframes overlay-slide-in-bottom { 0% { height: 100%; } 100% { height: 0; } } @keyframes overlay-slide-in-bottom { 0% { height: 100%; } 100% { height: 0; } } .overlay-slide-in-bottom { bottom: 0; height: 0; -webkit-animation-name: overlay-slide-in-bottom; animation-name: overlay-slide-in-bottom; } @-webkit-keyframes overlay-slide-out-bottom { 0% { height: 0; } 100% { height: 100%; } } @keyframes overlay-slide-out-bottom { 0% { height: 0; } 100% { height: 100%; } } .overlay-slide-out-bottom { bottom: 0; height: 100%; -webkit-animation-name: overlay-slide-out-bottom; animation-name: overlay-slide-out-bottom; } @-webkit-keyframes overlay-slide-in-left { 0% { width: 100%; } 100% { width: 0; } } @keyframes overlay-slide-in-left { 0% { width: 100%; } 100% { width: 0; } } .overlay-slide-in-left { width: 0; -webkit-animation-name: overlay-slide-in-left; animation-name: overlay-slide-in-left; } @-webkit-keyframes overlay-slide-out-left { 0% { width: 0; } 100% { width: 100%; } } @keyframes overlay-slide-out-left { 0% { width: 0; } 100% { width: 100%; } } .overlay-slide-out-left { left: 0; width: 100%; -webkit-animation-name: overlay-slide-out-left; animation-name: overlay-slide-out-left; } @-webkit-keyframes overlay-slide-in-right { 0% { width: 100%; } 100% { width: 0; } } @keyframes overlay-slide-in-right { 0% { width: 100%; } 100% { width: 0; } } .overlay-slide-in-right { right: 0; width: 0; -webkit-animation-name: overlay-slide-in-right; animation-name: overlay-slide-in-right; } @-webkit-keyframes overlay-slide-out-right { 0% { width: 0; } 100% { width: 100%; } } @keyframes overlay-slide-out-right { 0% { width: 0; } 100% { width: 100%; } } .overlay-slide-out-right { right: 0; width: 100%; -webkit-animation-name: overlay-slide-out-right; animation-name: overlay-slide-out-right; } /* aos */ [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} /* humberger */ nav { display: block; position: fixed; top: 0; /* left: 300px; */ width: 550px; left: -550px; bottom: 0; background: #ffffff; /*background: linear-gradient(to left top, rgb(255, 255, 255), rgb(248, 252, 246),rgb(242, 251, 240),rgba(239, 253, 234)); */ /* background: linear-gradient(to left top, rgb(255, 255, 255), rgb(255, 255, 255), rgb(215, 235, 250),rgb(130, 210, 245)); */ background: linear-gradient(to left top, rgb(255, 255, 255), rgb(255, 255, 255),rgb(220, 250, 200),rgba(200, 250, 180)); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .8s; z-index: 3; opacity: 0; } .open nav { left: 0; right:0; opacity: 1; } nav .inner { padding: 25px; } nav .inner ul { list-style: none; margin: 0; padding: 0; } nav .inner ul li { position: relative; margin: 0; border-bottom: 1px solid #333; } nav .inner ul li a { display: block; color: #333333; font-size: 24px; padding: 1.2em; text-decoration: none; transition-duration: 0.2s; } nav .inner ul li a:hover { /* font-size: 24px; */ font-weight:bold; } @media screen and (max-width: 767px) { nav { left: -220px; width: 220px; } } .toggle_btn { display: block; position: fixed; top: 30px; right: 30px; width: 50px; height: 30px; transition: all .5s; cursor: pointer; z-index: 3; } .toggleText{ color:#fd2e2e; font-size: 20px; font-weight: bold; display: block; position: fixed; top: 10px; right: 30px; width: 50px; height: 30px; } .toggle_btn span { display: block; position: absolute; left: 0; width: 50px; height: 2px; background-color: #fd873e; border-radius: 4px; transition: all .5s; } .toggle_btn span:nth-child(1) { top: 4px; } .toggle_btn span:nth-child(2) { top: 14px; } .toggle_btn span:nth-child(3) { bottom: 4px; } .open .toggle_btn span { background-color: #5bfd3e; } .open .toggle_btn span:nth-child(1) { -webkit-transform: translateY(10px) rotate(-315deg); transform: translateY(10px) rotate(-315deg); } .open .toggle_btn span:nth-child(2) { opacity: 0; } .open .toggle_btn span:nth-child(3) { -webkit-transform: translateY(-10px) rotate(315deg); transform: translateY(-10px) rotate(315deg); } #mask { display: none; transition: all .5s; } .open #mask { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .8; z-index: 2; cursor: pointer; } .el_spChildNavOpen { position: absolute; top: -6px; left: 80%; z-index: 20; -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; padding: 10px; } .js_openParent.js_fire > .el_spChildNavOpen { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .js_openParent.js_fire > .el_spChildNavOpen > .el_spChildNavOpen_wrapper:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } .el_spChildNavOpen_wrapper { position: relative; /* width: 25px; height: 25px; */ width: 50px; height: 50px; -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .el_spChildNavOpen_wrapper:before { content: ""; width: 100%; height: 2px; background-color: #a43434; position: absolute; top: calc(50% - 1px); } .el_spChildNavOpen_wrapper:after { content: ""; width: 2px; height: 100%; background-color: #a43434; position: absolute; left: calc(50% - 1px); -webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } .nav_child{ padding-top:20px; } .nav_child_item{ color: #000000; position: relative; font-size:20px; padding-left:20px; margin-bottom:10px; } .nav_child_item:hover { color: #000000; font-weight: bold; /*border-radius: 20px; opacity: .7; */ transition: opacity .2s ease; letter-spacing: 0.2em; } .nav_child_item > a{ position:absolute; left:0; right:0; bottom:0; top:0; } .nav_child_item:last-child{ margin-bottom:0px; } .js_openSwitch { cursor: pointer; } .js_openSwitch:hover{ color: #000000; box-shadow: 0px 0px 25px 25px rgb(250, 161, 177);/*赤2*/ background-color: #fcc5c9; background-position: 99% 50%; cursor: pointer; } .js_openTarget { display: none; } .menuFormat{ font-size: 30px; font-weight: bold; display: flex; align-items: center; text-align: center; width: 95%; height: 80px; border-radius: 30px; padding: 0.5em; color: #232323; /* background: #fee4a8; */ /*background-color: #ffffff; */ background: linear-gradient(to left top,rgb(255, 212, 163), rgb(246, 227, 213), rgb(252, 248, 240),rgb(254, 239, 211),rgb(249, 230, 182),rgb(248, 203, 152)); /* border-left: solid 10px #fdb352; */ box-shadow:2.5px 2.5px 25px 18px rgb(255, 255, 255); mask-image: radial-gradient(rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0) 95%); } /* layout */ .headerCommon{ width: 1200px; z-index: 100; background: #ffffff; /* background-color: rgba(255, 0, 0, 0); 透明化 */ position: sticky; top: 0; } .body_top { max-width: 1100px; margin: 0 auto; } .top_id { } .top_section_area01{ width: 1100px; box-shadow:2.5px 2.5px 25px 8px rgb(180, 190, 170); } .main_img{ border-radius:80px; } .pink_txtField { line-height: 1.5; position: relative; width: 60%; padding: 5rem 7rem 7rem 15rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(250, 233, 243),rgb(251, 209, 229),rgba(252, 183, 209, 0.936)); /* border-radius:60px; */ } .pink_txtField_S { line-height: 1.5; position: relative; width: 65%; padding: 5rem 7rem 7rem 7rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(252, 246, 250),rgb(251, 240, 245),rgba(253, 234, 241, 0.936)); border-radius:60px; } .green_txtField { line-height: 1.5; position: relative; width: 60%; padding: 5rem 7rem 7rem 15rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(235, 250, 233),rgb(217, 251, 223),rgba(198, 250, 212, 0.936)); /* border-radius:60px; */ } .green_txtField_S { line-height: 1.5; position: relative; width: 55%; padding: 5rem 7rem 7rem 11rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(242, 249, 241),rgb(233, 247, 236),rgba(230, 250, 235, 0.936)); border-radius:60px; } .rightBlue_txtField { line-height: 1.5; position: relative; width: 60%; padding: 5rem 7rem 7rem 15rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(233, 250, 250),rgb(201, 250, 248),rgba(155, 250, 255, 0.936)); /* border-radius:60px; */ } .rightBlue_txtField_S { line-height: 1.5; position: relative; width: 55%; padding: 5rem 7rem 7rem 11rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(242, 250, 250),rgb(236, 253, 252),rgba(223, 249, 250, 0.936)); border-radius:60px; } .blue_txtField { line-height: 1.5; position: relative; width: 60%; padding: 5rem 7rem 7rem 15rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(244, 245, 255),rgb(223, 227, 250),rgba(200, 202, 250, 0.936)); /* border-radius:60px; */ } .blue_txtField_S { line-height: 1.5; position: relative; width: 55%; padding: 5rem 7rem 7rem 11rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(244, 245, 255),rgb(239, 241, 255),rgba(233, 233, 254, 0.936)); border-radius:60px; } .brown_txtField { line-height: 1.5; position: relative; width: 60%; padding: 5rem 7rem 7rem 15rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(250, 244, 233),rgb(254, 239, 211),rgba(249, 230, 182, 0.936)); /* border-radius:60px; */ } .brown_txtField_S { line-height: 1.5; position: relative; width: 55%; padding: 5rem 7rem 7rem 15rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); /* background: linear-gradient(to left top, rgb(255, 255, 255), rgb(250, 244, 233),rgb(250, 249, 201),rgba(253, 255, 155, 0.936)); border-radius:60px; */ } .yellow_txtField { line-height: 1.5; position: relative; width: 60%; padding: 5rem 7rem 7rem 15rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(248, 250, 233),rgb(247, 250, 213),rgba(244, 247, 182, 0.936)); /* border-radius:60px; */ } .red_txtField { line-height: 1.5; position: relative; width: 60%; padding: 5rem; box-sizing: border-box; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(251, 239, 238),rgb(247, 214, 210),rgba(253, 181, 178, 0.936)); /* border-radius:60px; */ } .bl_txt { line-height: 1.5; position: relative; box-shadow:2.5px 2.5px 25px 7.5px rgb(106, 255, 0); background: linear-gradient(to left top, rgb(255, 255, 255), rgb(235, 250, 233),rgb(201, 250, 210),rgba(155, 255, 182, 0.936)); /* border-radius:60px; */ } .b2_txt { font-size: 2.8rem; font-weight: bold; position: relative; margin-bottom: 20px; /* margin-left: 4.5rem; */ } .b3_txt { font-size: 2.8rem; font-weight: bold; position: relative; margin-bottom: 20px; margin-left: 4.5rem; text-align: center; } .kujyou_txt { font-size: 2.2rem; text-align: center; } .downloadbtn_txt { display: flex; justify-content: space-around; font-size: 2.8rem; font-weight: bold; position: relative; } .page_title_oneline01 { width: 1140px; font-size: 2.3rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1; padding: 15px; text-align: center; } .page_title_oneline02 { font-size: 2.3rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1; padding: 25px; text-align: center; } .page_title_top { font-size: 2.3rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1; padding-top: 30px; text-align: center; } .page_title { font-size: 1.9rem; font-weight: bold; line-height: 2; padding: 20px; text-align: center; } .page_title_left { font-size: 1.9rem; line-height: 2; text-align: left; font-weight: bold; padding-top: 10px; padding-bottom: 30px; padding-left: 60px; padding-right: 60px; } .page_title_left_02 { font-size: 2.0rem; line-height: 2; text-align: left; font-weight: bold; } .page_title_left_03 { font-size: 1.8rem; line-height: 2; text-align: left; font-weight: 400; padding-left: 50px; padding-right: 20px; } .logocommon{ padding-bottom: 10%; } .headerYuugoukaiFont { background: #7afa67; font-size: 3.8rem; font-weight: bold; } .footer_copy { font-size: 22px; text-align: center; padding: 1.6rem 0; color: #7f7e7ef7; } .header_nav { border-bottom: 1px solid rgba(112,112,112,.3); margin-bottom: 25px; width:1100px; position: relative; } .header_list { display: flex; justify-content: center; margin-bottom: 20px; } .header_nav_item:not(:last-child) { margin-right: 45px; } .header_nav_item a { /* writing-mode: vertical-rl; */ color: #000000; font-weight: bold; font-size: 1.8rem; } .sousetusya_format { /* 縦書き */ writing-mode: vertical-rl; box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); line-height: 1.6; } .sousetusya_backimage { background-image: url(../images/yuugoukai/top_green.jpg); width: 1000px; padding: 25px; background-size: cover; } .sousetusya_txt p{ font-family: serif; font-size: 1.6rem; line-height: 2; inline-size: 400px; margin-left: 50px; margin-right: 30px; margin-top: 25px; margin-bottom: 25px; font-weight: bold; } .sousetusya_name { font-size: 2.3rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1.5; margin-top: 80px; font-family: serif; } .suisen_backimage{ background: linear-gradient(to left top, rgb(255, 255, 255), rgb(231, 255, 228),rgb(151, 255, 170),rgba(125, 254, 160, 0.936)); box-shadow:2.5px 2.5px 25px 18px rgb(180, 190, 170); } .marginTop02{ margin-top: 20px; } .marginBottom01{ margin-bottom:10px; } .marginBottom02{ margin-bottom:20px; } .marginBottom03{ margin-bottom: 30px; } .marginBottom04{ margin-bottom: 40px; } .marginBottom05{ margin-bottom: 50px; } .marginBottom06{ margin-bottom: 60px; } .marginBottom07{ margin-bottom: 70px; } .marginBottom08{ margin-bottom: 80px; } .marginBottom09{ margin-bottom: 90px; } .marginBottom10{ margin-bottom: 100px; } .marginBottom15{ margin-bottom: 150px; } .marginBottom20{ margin-bottom: 200px; } .marginBottom25{ margin-bottom: 250px; } .topText1{ font-size: 18px; } .topText2{ font-size: 1.6rem; padding-left: 140px; } .cssSpace{ white-space: pre-wrap; } .title_backimage_01{ background-color:#fcddae; width:1140px; box-shadow:2.5px 2.5px 15px 8px rgb(180, 190, 170); } .title_backimage_green { background-image: url(../images/yuugoukai/mirori.jpg); background-size: cover; box-shadow:2.5px 2.5px 25px 8px rgb(180, 190, 170); } .title_backimage_blue { background-image: url(../images/yuugoukai/bule.jpg); background-size: cover; box-shadow:2.5px 2.5px 25px 8px rgb(180, 190, 170); } .title_backimage_rightblue { background-image: url(../images/yuugoukai/lightblue.jpg); background-size: cover; box-shadow:2.5px 2.5px 25px 8px rgb(180, 190, 170); } .title_backimage_pink { background-image: url(../images/yuugoukai/pinku.png); background-size: cover; box-shadow:2.5px 2.5px 25px 8px rgb(180, 190, 170); } .main_backimage_brown { background: linear-gradient(to left top, rgb(255, 255, 255), rgb(249, 239, 205), rgb(255, 240, 170), rgb(255, 240, 140), rgb(255, 200, 120)); } .main_backimage_red { background: linear-gradient(to left top, rgb(255, 255, 255), rgb(255, 230, 230), rgb(255, 225, 225), rgb(255, 200, 200), rgb(255, 175, 175)); } .main_backimage_blue { background: linear-gradient(to left top, rgb(255, 255, 255), rgb(231, 246, 253), rgb(205, 255, 252), rgb(196, 242, 250), rgb(176, 230, 255), rgb(137, 214, 252)); } .main_backimage_green { background: linear-gradient(to left top, rgb(255, 255, 255), rgb(239, 253, 231), rgb(215, 255, 205), rgb(187, 254, 167), rgb(151, 255, 133), rgb(171, 250, 106)); } .main_backimage_rightblue { background: linear-gradient(270deg, #ffffff, #e1f4ff, #e1f4ff, #b1f6fc, #d5f8f8, #ffffff); background-size: cover } .main_backimage_pink { background: linear-gradient(270deg, #ffffff, #ffe1f3, #ffe1f3, #fcb1cf, #f8d5e0, #ffffff); background-size: cover; border-radius: 10vh; } .main_backimage_rainbow { background: linear-gradient(270deg, #ffffff, #f9c8c8, #f5fcba, #bdfcbd, #c2ccfa, #ffffff); background-size: cover; /* border-radius: 20vh; */ } .suisen_name{ font-size: 2.3rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1; text-align: center; } .section01_sub02 { font-size: 3rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1.5; } .section01_sub03 { font-size: 3rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1.5; right: 190px; padding-left: 140px; } .section01_sub04 { font-size: 2.5rem; font-weight: bold; letter-spacing: 1.5px; line-height: 1.5; } .sousetusya_format { padding: 0px; border: solid 0px rgba(247, 158, 76, 0.934); margin-left: auto; position: relative; } .section02 .bl_txt p { margin-bottom: 50px; } .section02 .bl_img, .section02 .bl_txt { width: 50%; padding: 5rem 7rem; box-sizing: border-box; } ::marker { font-size: 1px !important; } .time-schedule { list-style: none; margin: 0 auto 0 6em; padding-left: 3px; border-left: 3px solid #18be31; box-sizing: border-box; } .time-schedule span.time { width: 5em; display: inline-block; margin-left: 0em; padding: 0 0 5x; margin-top: 0px; vertical-align: top; position: relative; text-align: right; box-sizing: border-box; } .time-schedule .sch_box { display: inline-block; width: 90%; margin-left: 30px; padding: 5px 10px 20px 10px; vertical-align: middle; box-sizing: border-box; border-radius: 6px; } .time-schedule span.time { width: 5em; display: inline-block; margin-left: -8em; padding: 0 0 5px; margin-top: 15px; vertical-align: top; position: relative; text-align: right; box-sizing: border-box; } .time-schedule span.time::after { content: ""; position: absolute; right: -35px; top: 0; background: #18be36; width: 20px; height: 20px; border-radius: 10px; } .time-schedule-columns{ display:-webkit-box; display:-ms-flexbox; display:flex; padding-left: 50px; padding-bottom: 80px; } .time-schedule-img{ width: 500px; /* padding-left: 50px; */ border-radius:50px; } .gyouji-columns{ display:-webkit-box; display:-ms-flexbox; display:flex; } .gyouji-img{ width: 500px; border-radius:50px; } hr.styleGreen { background-color:#4fbe18; border-top: 3.0px dashed #4fbe18; } hr.styleBlue { background-color: #c7bbf5; border-top: 2.5px dashed #c7bbf5; } hr.styleWhite { background-color: #ffffff; border-top: 2.5px dashed #ffffff; } hr.styleBrown { background-color:#be7c18; border-top: 3.0px dashed #be7c18; } hr.style4 { background-color: #fa9600d1; border-bottom: 1.0px dashed #f3af12; width:1140px; } .oneDaytxt{ font-size: 2.3rem; padding-left: 20px; } .gyoujitxt{ font-size: 1.9rem; padding-left: 40px; } /* news */ body { /* f font-family: '游明朝', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; ont-size: 1.6em; line-height: 1.6; letter-spacing: 0.05em;*/ } .button-guide { display: flex; justify-content: center; align-items: center; position: relative; border: none; line-height: 1; text-decoration: none; text-align: center; outline: none; cursor: pointer; transition: box-shadow .2s, text-shadow .2s, background-color .2s, border-color .2s, opacity .2s; display: flex; width: 100%; max-width: 60rem; margin: 0 auto; padding: 1.6rem; border: none; border-radius: 8px; background: #eeeeee; color: #222222; font-weight: 400; font-size: 1.6rem; } .page-heading__content { margin: 0; padding: 0; } .page-heading__content--center { text-align: center; } .page-heading__text-main { font-weight: 700; font-family: '游明朝', cursive; font-size: 4.0rem; } .page-heading__text-main:after { display: block; max-width: 240px; padding-top: 2.4rem; border-bottom: 3px solid #222222; content: ""; } .page-heading__content--center .page-heading__text-main::after { margin-left: auto; margin-right: auto; } .page-heading__text-sub { font-weight: 400; font-size: 2.6rem; color: #222222; padding-top: 2.4rem; } .pagination__list, .pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin: 0; padding: 0; } .pagination__list-item, .pagination .page-numbers > li { margin: 0.3rem; } .pagination .pagination__link, .pagination .page-numbers > li > a, .pagination .pagination__link--prev, .pagination .page-numbers > li > a--prev, .pagination .page-numbers > li > a.prev, .pagination .pagination__link--next, .pagination .page-numbers > li > a--next, .pagination .page-numbers > li > a.next { -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -ms-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; display: flex; justify-content: center; align-items: center; padding: 1.2rem 1.6rem; border-radius: 6px; font-weight: 400; font-size: 1.6rem; line-height: 1; text-align: center; cursor: pointer; } .pagination__link, .pagination .page-numbers > li > a { background-color: #eeeeee; color: #222222; } .pagination__link:hover, .pagination__link:focus, .pagination .page-numbers > li > a:hover, .pagination .page-numbers > li > a:focus { background-color: #08aeb0; color: #ffffff; } .pagination__link--prev, .pagination__link.prev, .pagination .page-numbers > li > a--prev, .pagination .page-numbers > li > a.prev { min-width: 12rem; background-color: #eeeeee; color: #222222; } .pagination__link--prev:before, .pagination__link.prev:before, .pagination .page-numbers > li > a--prev:before, .pagination .page-numbers > li > a.prev:before { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; display: inline-block; margin-right: 0.6rem; transition: transform 0.2s; } .pagination__link--prev:hover, .pagination__link--prev:focus, .pagination__link.prev:hover, .pagination__link.prev:focus, .pagination .page-numbers > li > a--prev:hover, .pagination .page-numbers > li > a--prev:focus, .pagination .page-numbers > li > a.prev:hover, .pagination .page-numbers > li > a.prev:focus { background-color: #08aeb0; color: #ffffff; } .pagination__link--prev:hover:before, .pagination__link--prev:focus:before, .pagination__link.prev:hover:before, .pagination__link.prev:focus:before, .pagination .page-numbers > li > a--prev:hover:before, .pagination .page-numbers > li > a--prev:focus:before, .pagination .page-numbers > li > a.prev:hover:before, .pagination .page-numbers > li > a.prev:focus:before { transform: translateX(-4px); } .pagination__link--next, .pagination__link.next, .pagination .page-numbers > li > a--next, .pagination .page-numbers > li > a.next { min-width: 12rem; background-color: #eeeeee; color: #222222; } .pagination__link--next:after, .pagination__link.next:after, .pagination .page-numbers > li > a--next:after, .pagination .page-numbers > li > a.next:after { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; display: inline-block; margin-left: 0.6rem; transition: transform 0.2s; } .pagination__link--next:hover, .pagination__link--next:focus, .pagination__link.next:hover, .pagination__link.next:focus, .pagination .page-numbers > li > a--next:hover, .pagination .page-numbers > li > a--next:focus, .pagination .page-numbers > li > a.next:hover, .pagination .page-numbers > li > a.next:focus { background-color: #08aeb0; color: #ffffff; } .pagination__link--next:hover:after, .pagination__link--next:focus:after, .pagination__link.next:hover:after, .pagination__link.next:focus:after, .pagination .page-numbers > li > a--next:hover:after, .pagination .page-numbers > li > a--next:focus:after, .pagination .page-numbers > li > a.next:hover:after, .pagination .page-numbers > li > a.next:focus:after { transform: translateX(4px); } .pagination .pagination__text, .pagination .page-numbers > li > span, .pagination .pagination__text--current, .pagination .page-numbers > li > span--current, .pagination .page-numbers > li > span.current, .pagination .pagination__text--dots, .pagination .page-numbers > li > span--dots, .pagination .page-numbers > li > span.dots { display: flex; justify-content: center; align-items: center; padding: 1.2rem 1.6rem; border-radius: 6px; font-weight: 400; font-size: 1.6rem; line-height: 1; text-align: center; } .pagination__text, .pagination .page-numbers > li > span { background-color: #eeeeee; color: #222222; } .pagination__text--current, .pagination__text.current, .pagination .page-numbers > li > span--current, .pagination .page-numbers > li > span.current { background-color: #08aeb0; color: #ffffff; } .pagination__text--dots, .pagination__text.dots, .pagination .page-numbers > li > span--dots, .pagination .page-numbers > li > span.dots { background-color: #eeeeee; color: #222222; } .news-item { display: flex; flex-wrap: wrap; } @media screen and (min-width: 992px) { .news-item { flex-wrap: nowrap; } } .news-item__date { font-size: 16px; display: flex; justify-content: center; align-items: center; margin: 0 3.2rem 1.6rem 0; } @media screen and (min-width: 992px) { .news-item__date { margin: 0 1.6rem 0 0; } } .news-item__category { display: flex; justify-content: center; align-items: center; margin: 0 3.2rem 1.6rem 0; } @media screen and (min-width: 992px) { .news-item__category { margin: 0 1.6rem 0 0; } } .news-item__category-label { display: flex; justify-content: center; align-items: center; min-width: 12rem; padding: 0.3rem 0.6rem; border: 2px solid #08aeb0; color: #08aeb0; font-size: 1.4rem; } .news-item__category-label_02 { display: flex; justify-content: center; align-items: center; min-width: 20rem; padding: 0.3rem 0.6rem; border: 2px solid #08aeb0; color: #08aeb0; font-size: 2.4rem; } .news-item__title { font-size: 16px; display: flex; justify-content: center; align-items: center; color: #222222; } .news-item__title:hover, .news-item__title:focus { text-decoration: underline; } .top-news__container { position: relative; max-width: 1140px; margin: 0 auto; padding: 6.2rem 15px; } .top-news__heading { margin-bottom: 6.4rem; } .top-news__list { display: block; padding: 0; margin: 0 auto; max-width: 100rem; } .top-news__list-item { display: block; margin: 0; padding: 0; } .top-news__list-item:not(:first-child) { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed #222; } .top-news__guide { padding-top: 6.4rem; } .top-blog { background: #fafafa; } .top-blog__container { position: relative; max-width: 1140px; margin: 0 auto; padding: 12.4rem 15px; } .top-blog__heading { margin-bottom: 6.4rem; } .top-blog__list { margin: 0; } .top-blog__list-item:not(:last-child) { margin: 0 0 4.8rem 0; } .top-blog__guide { padding-top: 6.4rem; } .news-list__container { position: relative; max-width: 1140px; margin: 0 auto; padding: 5px 15px; } .news-list__list { display: block; padding: 0; margin: 0 auto; max-width: 100rem; } .news-list__list-item { display: block; margin: 0; padding: 0; } .news-list__list-item:not(:first-child) { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed #222; } .news-list__pagination { padding-top: 6.4rem; } .news-detail__container { position: relative; max-width: 1140px; margin: 0 auto; padding: 12.4rem 15px; max-width: 96rem; margin: 0 auto 4.8rem auto; } .news-detail__title { margin-bottom: 4.8rem; font-weight: 700; font-size: 3.2rem; } .news-detail__image { margin-bottom: 4.8rem; } .news-detail__image img { display: block; max-width: 100%; margin: 0 auto; } .news-detail__body { margin-bottom: 4.8rem; background: #ffffff; } @media screen and (min-width: 992px) { .news-detail__body { padding: 3.6rem; } } .news-detail__button { padding-top: 3.2rem; } @media screen and (min-width: 992px) { .news-detail__button { padding-top: 6.4rem; } } .tc{ text-align: center; }