@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:960px) {
html {
font-size: 1.6px;
line-height: 1.6px;
}
}
* {
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 500;
color:#28323c;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
a{
text-decoration: none;
}



.pc{
display:none;
}
@media screen and (min-width:960px) {
.pc{
display:block;
}
.sp{
display:none;
}
}
.none{
display: none;
}



/* ==============================================
body
============================================== */

body{
}
body::before{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url("/cp/golbi/2507/images/glb_cmn_bg.png") center top no-repeat;
background-size: 100% auto;
}
@media screen and (min-width:960px) {
body::before{
width: 600px;
}
}
@media screen and (min-width:1200px) {
body::before{
right: 0;
margin: auto;
}
}



/* ==============================================
header
============================================== */

header{
}
@media screen and (min-width:960px) {
header{
position: absolute;
top: 0;
left: 0;
width: 600px;
}
}
@media screen and (min-width:1200px) {
header{
right: 0;
margin: auto;
}
}
header p{
position: absolute;
top: 16rem;
left: 16rem;
z-index: 1;
}
header p a{
}
header p a img{
width: 57rem;
}
header h1{
position: absolute;
top: 16rem;
right: 0;
}
header h1 img{
width: 294rem;
}



/* ==============================================
footer
============================================== */

footer{
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
padding: 0 0 64rem 0;
}
footer div h2{
text-align: center;
padding: 64rem 0 0 0;
}
footer div h2 img{
width: 198rem;
}
footer div h2 + p{
text-align: center;
margin: 24rem 0 0 0;
}
footer div h2 + p a{
}
footer div h2 + p a img{
width: 57rem;
}
footer div h2 + p + p{
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.4rem;
font-weight: 400;
color: #f5f0e1;
text-align: center;
margin: 12rem 0 0 0;
}



@media screen and (min-width:960px) {
footer{
position: relative;
width: 600px;
}
footer::after{
content: "";
position: absolute;
top: 0;
right: -40px;
width: 40px;
height: 100%;
background: linear-gradient(-90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 100%);
z-index: 1;
}
}



@media screen and (min-width:1200px) {
footer{
position: fixed;
top: 0;
left: 0;
width: calc(50% - 300px);
height: 100%;
margin: auto;
}
footer::after{
display: none;
}
footer div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 160px;
}
footer div h2{
padding: 0;
}
footer div h2 img{
width: 280px;
}
footer div h2 + p{
margin: 16px 0 0 0;
}
footer div h2 + p a img{
width: 60px;
}
footer div h2 + p + p{
font-size: 10px;
line-height: 14px;
letter-spacing: 0.4px;
margin: 16px 0 0 0;
}
}



/* ==============================================
main
============================================== */

main{
}
@media screen and (min-width:960px) {
main{
position: relative;
width: 600px;
}
main::before{
content: "";
position: absolute;
top: 0;
left: -40px;
width: 40px;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 100%);
z-index: 1;
}
main::after{
content: "";
position: absolute;
top: 0;
right: -40px;
width: 40px;
height: 100%;
background: linear-gradient(-90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 100%);
z-index: 1;
}
}
@media screen and (min-width:1200px) {
main{
margin: auto;
}
}



main .title{
font-size: 20rem;
line-height: 24rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
display: inline-block;
height: 32rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
padding: 5rem 8rem 0 8rem;
margin-left: -2rem!important;
transform:skewX(-8deg);
}
main .title strong{
font-size: 20rem;
line-height: 24rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f7e378;
}



/* ==============================================
#hero
============================================== */

#hero{
position: relative;
}
#hero .inner{
}
#hero .inner h2{
position: absolute;
top: 61rem;
left: 16rem;
width: 40rem;
height: 624rem;
border-radius: 20rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
overflow: hidden;
}
@media screen and (min-width:960px) {
#hero .inner h2{
height: 388rem!important;
}
}
#hero .inner h2 span{
font-size: 25rem;
line-height: 25rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #fae678;
display: block;
padding: 0 0 0 5rem;
white-space: nowrap;
writing-mode: vertical-rl;
animation: ticker-hero 8s linear infinite;
}
@keyframes ticker-hero {
0% {
transform: translateY(624rem);
}
100% {
transform: translateY(-520rem);
}
}
#hero .inner h2 img{
display: none;
}



/* ==============================================
nav
============================================== */

nav{
margin: -11rem 0 0 80rem;
}
nav div h2{
}
nav h2 img{
width: 67rem;
}
nav div ul{
margin: 10rem 0 0 0;
}
nav div ul li{
position: relative;
}
nav div ul li a{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #f5f0e1;
position: relative;
display: block;
text-shadow:
0.5rem 0.5rem 0 #28323c,
-0.5rem 0.5rem 0 #28323c,
-0.5rem -0.5rem 0 #28323c,
0.5rem -0.5rem 0 #28323c;
padding: 6rem 0 6rem 0;
text-indent: -23rem;
margin: 0 0 0 23rem;
}
nav div ul li a::before{
content: "";
background: #f5f0e1;
width: calc(100% - 80rem);
height: 1rem;
position: absolute;
bottom: 17rem;
right: 44rem;
opacity: 0.1;
z-index: -1;
}
nav div ul li a::after{
content: "";
background: url("/cp/golbi/2507/images/glb_cmn_btn-anchor.png");
background-size: 20rem 20rem;
width: 20rem;
height: 20rem;
position: absolute;
bottom: 8rem;
right: 16rem;
}
nav div ul li a img{
display: inline-block;
vertical-align: middle;
margin: -4rem 8rem 0 0;
width: 15rem;
}
nav div ul li span{
font-size: 13rem;
line-height: 17rem;
text-align: right;
position: absolute;
top: 0;
right: 8rem;
display: block;
background: url("/cp/golbi/2507/images/glb_cmn_clr-gray.png");
background-size: 80rem 80rem;
border-radius: 4rem;
width: 100%;
height: 100%;
padding: 7rem 12rem 0 0;
z-index: 1;
opacity: 0.8;
}



@media screen and (min-width:960px) {
nav{
position: fixed;
top: 0;
right: 0;
width: calc(100% - 600px);
height: 100%;
background: url("/cp/golbi/2507/images/glb_nv_bg.jpg") center no-repeat;
margin: 0;
}
nav div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 320px;
height: 440px;
}
nav div h2 img{
width: 134px;
}
nav div ul{
margin: 20px 0 0 0;
}
nav div ul li a{
font-size: 21px;
line-height: 29px;
letter-spacing: 0.4px;
height: 60px;
text-shadow:
1px 1px 0 #28323c,
-1px 1px 0 #28323c,
-1px -1px 0 #28323c,
1px -1px 0 #28323c;
padding: 15px 0 0 0;
}
nav div ul li a::before{
width: calc(100% - 100px);
height: 1px;
top: 28px;
right: 38px;
}
nav div ul li a::after{
background: url("/cp/golbi/2507/images/glb_cmn_btn-anchor.png");
background-size: 20px 20px;
width: 20px;
height: 20px;
bottom: 21px;
right: 0;
}
nav div ul li a img{
margin: -5px 8px 0 0;
width: 24px;
}
nav div ul li span{
right: -8rem;
width: calc(100% + 16rem);
padding: 10rem 12rem 0 0;
}
}



@media screen and (min-width:1200px) {
nav{
width: calc(50% - 300px);
}
}



/* ==============================================
#free
============================================== */

#free{
margin: 24rem 0 0 0;
padding: 51rem 0;
}
#free .inner{
position: relative;
background: url("/cp/golbi/2507/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
padding: 0 0 35rem 0;
}
#free .inner::before{
content: "";
background: url("/cp/golbi/2507/images/glb_fr_dot.png") no-repeat;
background-size: 375rem 51rem;
width: 375rem;
height: 51rem;
position: absolute;
top: -51rem;
left: 0;
}
#free .inner::after{
content: "";
background: url("/cp/golbi/2507/images/glb_fr_dot.png") no-repeat;
background-size: 375rem 51rem;
width: 375rem;
height: 51rem;
position: absolute;
bottom: -51rem;
left: 0;
transform: scale(1, -1);
}
#free .inner::a{
content: "";
background: url("/cp/golbi/2507/images/glb_fr_dot.png") no-repeat;
background-size: 375rem 51rem;
width: 375rem;
height: 51rem;
position: absolute;
top: -51rem;
left: 0;
}
#free .inner h2{
font-size: 20rem;
line-height: 28rem;
font-weight: 900;
letter-spacing: 0.4rem;
text-align: center;
color: #f7e378;
padding: 28rem 0 0 0;
margin: 0 0 -88rem 0;
}
#free .inner h2 strong{
font-size: 20rem;
line-height: 28rem;
font-weight: 900;
letter-spacing: 0.4rem;
text-align: center;
color: #f7e378;
position: relative;
display: inline-block;
z-index: 1;
}
#free .inner h2 strong::before{
content: "";
position: absolute;
top: 2rem;
left: 0;
width: 100%;
height: 22rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
z-index: -1;
}
#free .inner h2 img{
display: block;
margin: 8rem 0 0 0;
}
#free .inner p{
font-size: 15rem;
line-height: 23rem;
font-weight: 500;
letter-spacing: 0.4rem;
text-align: center;
color: #f2edde;
}
#free .inner div{
background: url("/cp/golbi/2507/images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
border-radius: 4rem;
margin: 20rem 16rem 0 16rem;
padding: 0 16rem 10rem 16rem;
}
#free .inner div h3{
font-size: 17rem;
line-height: 21rem;
font-weight: 900;
letter-spacing: 0.4rem;
text-align: center;
color: #28323c;
padding: 8rem 0 0 0;
}
#free .inner div figure{
margin: 8rem 0 0 0;
}
#free .inner div figure img{
}
#free .inner .link{
margin: 12rem 0 0 0;
}
#free .inner .link a{
font-size: 15rem;
line-height: 19rem;
font-weight: 700;
letter-spacing: 0.4rem;
text-align: center;
color: #f2edde;
border-bottom: dotted 1rem #f2edde;
}
#free .inner .button{
position: relative;
z-index: 1;
margin: 16rem 16rem 0 16rem;
}
#free .inner .button a{
font-size: 20rem;
line-height: 24rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #fae678;
text-align: center;
position: relative;
display: block;
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2506/images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 16rem 0 0 0;
}
#free .inner .button a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: calc(100% + 4rem);
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2506/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
#free .inner .button a::after{
content: "";
position: absolute;
top: 12rem;
right: 12rem;
width: 32rem;
height: 32rem;
border-radius: 16rem;
background: url("/cp/golbi/2506/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#free .inner .button a img{
position: absolute;
top: 12rem;
left: 12rem;
width: 32rem;
}



/* ==============================================
#limited
============================================== */

#limited{
padding: 48rem 0 0 0;
}
#limited .inner{
position: relative;
}
#limited .inner h2  span img{
position: absolute;
top: -20rem;
right: 8rem;
width: 84rem;
}
#limited .inner h3{
position: absolute;
top: -16rem;
left: 0;
}
#limited .inner .tab{
position: relative;
padding: 0 0 0 16rem;
}
#limited .inner .tab ul{
}
#limited .inner .tab ul li{
float: left;
width: calc(33.33333% - 16rem);
margin: 0 16rem 0 0;
}
#limited .inner .tab ul li a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #28323C;
text-align: center;
position: relative;
display: block;
height: 34rem;
border: solid 2rem #f2edde;
border-bottom: none;
border-radius: 8rem 8rem 0 0;
padding: 5rem 0 0 0;
background: url("/cp/golbi/2507/images/glb_cmn_clr-cream.png");
background-size: 80rem 80rem;
opacity: 0.5;
}
#limited .inner .tab ul li.select a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f2edde;
text-align: center;
background: none;
border: solid 2rem #f2edde;
border-bottom: none;
opacity: 1;
}



#limited .inner .tab ul li.select a::before{
content: "";
height: 2rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-cream.png");
background-size: 80rem 80rem;
position: absolute;
bottom: 0;
z-index: 1;
}
#limited .inner .tab ul li.select a::after{
content: "";
height: 2rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-cream.png");
background-size: 80rem 80rem;
position: absolute;
bottom: 0;
z-index: 1;
}
#limited .inner .tab ul li.select:nth-child(1) a::before{
width: 18rem;
left: -18rem;
}
#limited .inner .tab ul li.select:nth-child(1) a::after{
width: 257rem;
right: -257rem;
}
#limited .inner .tab ul li.select:nth-child(2) a::before{
width: 138rem;
left: -138rem;
}
#limited .inner .tab ul li.select:nth-child(2) a::after{
width: 138rem;
right: -138rem;
}
#limited .inner .tab ul li.select:nth-child(3) a::before{
width: 257rem;
left: -257rem;
}
#limited .inner .tab ul li.select:nth-child(3) a::after{
width: 18rem;
right: -18rem;
}



#limited .inner .tab-inner{
}
#limited .inner .tab-inner.off{
display: none;
}
#limited .inner .tab-inner figure{
position: relative;
margin: 18rem 16rem 0 16rem;
}
#limited .inner .tab-inner figure::before{
content: "";
background: url("/cp/golbi/2507/images/glb_lmt_sdw.png");
background-size: 343rem 417rem;
width: 343rem;
height: 417rem;
position: absolute;
right: -8rem;
bottom: -8rem;
z-index: -1;
}



/* ==============================================
#research
============================================== */

#research{
margin: 32rem 0 0 0;
padding: 51rem 0 0 0;
}
.cs #research{
margin: 55rem 0 0 0;
}
#research .inner{
position: relative;
background: url("/cp/golbi/2507/images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
}
.cs #research .inner{
padding: 0 0 16rem 0;
}

#research .inner::before{
content: "";
background: url("/cp/golbi/2507/images/glb_rsr_dot.png") no-repeat;
background-size: 375rem 51rem;
width: 375rem;
height: 51rem;
position: absolute;
top: -51rem;
left: 0;
}
.cs #research .inner::after{
content: "";
background: url("/cp/golbi/2507/images/glb_rsr_dot.png") no-repeat;
background-size: 375rem 51rem;
width: 375rem;
height: 51rem;
position: absolute;
bottom: -51rem;
left: 0;
transform: scale(1, -1);
}
#research .inner h2{
padding: 32rem 0 0 0;
margin: 0 0 -24rem 0;
}
#research .inner h2 img{
}
#research .inner h2 span{
font-size: 25rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 900;
text-align: center;
color: #f5f0e1;
display: table;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
width: 156rem;
margin: 3rem 0 0 0;
padding: 3rem 0 2rem 0;
position: relative;
z-index: 1;
}
#research .inner h2 strong{
font-size: 31rem;
line-height: 31rem;
letter-spacing: 0;
font-weight: 900;
color: #fae678;
display: table;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
margin: 1rem 0 0 0;
padding: 4rem 2rem 0rem 2rem;
position: relative;
z-index: 1;
}
#research .inner figure{
position: absolute;
top: 181rem;
right: 0;
}
#research .inner figure img{
width: 123rem;
}



#research .inner div{
position: relative;
float: left;
background: url("/cp/golbi/2507/images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
border-radius: 0 16rem 16rem 0;
width: calc(50% - 8rem);
border: 4rem solid #28323c;
border-left: none;
margin: 40rem 16rem -24rem 0;
padding: 0 0 24rem 0;
}
#research .inner div:nth-child(4),
#research .inner div:nth-child(6){
border-radius: 16rem 0 0 16rem;
border: 4rem solid #28323c;
border-right: none;
margin: 40rem 0 -24rem 0;
}
#research .inner div:nth-child(6)::before{
content: "";
background: url("/cp/golbi/2507/images/glb_rsr_icn-vs.png");
background-size: 64rem 64rem;
width: 64rem;
height: 64rem;
position: absolute;
top: -44rem;
left: -44rem;
}
#research .inner div h3{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 900;
text-align: center;
padding: 16rem 0 0 0;
}
#research .inner div h3 img{
width: 22rem;
display: block;
margin: 0 auto 6rem auto;
}
#research .inner div p{
font-size: 12rem;
line-height: 16rem;
letter-spacing: 0;
font-weight: 700;
margin: 4rem 0 0 0;
text-align: center;
}
#research .inner .button{
clear: both;
position: relative;
z-index: 1;
margin: 0;
}
#research .inner .button a{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 700;
text-align: center;
color: #fae678;
position: relative;
display: block;
width: 240rem;
height: 44rem;
border-radius: 22rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 9rem 0 0 0;
margin: auto;
}
.cs #research .inner div + .button a{
background: url("/cp/golbi/2506/images/glb_cmn_clr-gray.png");
background-size: 80rem 80rem;
pointer-events: none;
}
#research .inner div + .button.end a{
background: url("/cp/golbi/2507/images/glb_cmn_clr-gray.png");
background-size: 80rem 80rem;
pointer-events: none;
}
#research .inner .button a span{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #fae678;
display: block;
}
.cs #research .inner .button a span{
color: #f5f0e1;
}
#research .inner .button a span.off{
display: none;
color: #f5f0e1;
}
#research .inner .button.end a span.on{
display: none;
}
#research .inner .button.end a span.off{
display: block;
}
#research .inner .button a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: 240rem;
height: 44rem;
border-radius: 22rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
.cs #research .inner .button a::before{
display: none;
}
#research .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
text-align: center;
font-weight: 700;
margin: 16rem 0 0 0;
}
#research .inner p strong{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
}



/* ==============================================
#pickup
============================================== */

#pickup{
}
#pickup .inner{
background: url("/cp/golbi/2507/images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
}
#pickup .inner h2{
margin: 32rem 0 0 0;
}
#pickup .inner h3{
font-size: 19rem;
line-height: 27rem;
letter-spacing: 0.4rem;
font-weight: 900;
text-align: center;
color: #f7e378;
margin: 20rem 0 -12rem 0;
}



#pickup .inner ul{
margin: 0 0 0 16rem;
display:flex;
flex-wrap:wrap;
position: relative;
z-index: 1;
}
#pickup .inner ul li{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4;
font-weight: 700;
text-align: center;
position: relative;
width: calc(50% - 16rem);
float: left;
margin: 24rem 16rem 0 0;
padding: 0 0 12rem 0;
background: url("/cp/golbi/2507/images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
border-radius: 16rem;
border: solid 2rem #28323c;
}
#pickup .inner ul li::before{
content: "";
background: url("/cp/golbi/2507/images/glb_cmn_clr-month.png");
background-size: 80rem 80rem;
position: absolute;
top: 10rem;
left: 10rem;
width: 100%;
height: 100%;
border-radius: 16rem;
z-index: -1;
}
#pickup .inner ul li span{
display: block;
height: 160rem;
border-radius: 14rem 14rem 0 0;
margin: 0 0 10rem 0;
}
#pickup .inner ul li#pickup-01 span{
background: url("/cp/golbi/2507/images/glb_lnp_img-01.jpg") repeat-x 0 0;
background-size: auto 100%;
animation: pickup-03 9s linear infinite;
}
#pickup .inner ul li#pickup-02 span{
background: url("/cp/golbi/2507/images/glb_lnp_img-02.jpg") repeat-x 0 0;
background-size: auto 100%;
animation: pickup-03 9s linear infinite;
}
#pickup .inner ul li#pickup-03 span{
background: url("/cp/golbi/2507/images/glb_lnp_img-03.jpg") repeat-x 0 0;
background-size: auto 100%;
animation: pickup-03 9s linear infinite;
}
#pickup .inner ul li#pickup-04 span{
background: url("/cp/golbi/2507/images/glb_lnp_img-04.jpg") repeat-x 0 0;
background-size: auto 100%;
animation: pickup-03 9s linear infinite;
}
@keyframes pickup-03 {
from { background-position: 0 0; }
to { background-position: -480rem 0; }
}
#pickup .inner ul li img{
border-radius: 14rem 14rem 0 0;
display: block;
margin: 0 0 10rem 0;
}
#pickup .inner ul li a{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0;
font-weight: 700;
color: #f2edde;
text-align: center;
position: relative;
height: 32rem;
border-radius: 16rem;
display: block;
background: url("/cp/golbi/2507/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 5rem 0 0 0;
margin: 8rem 12rem 0 12rem;
}



/* ==============================================
#result
============================================== */

#result{
position: relative;
background: url("/cp/golbi/2507/images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
padding: 40rem 16rem 18rem 16rem;
}
#result::after{
content: "";
background: url("/cp/golbi/2507/images/glb_rsr_dot.png") no-repeat;
background-size: 375rem 51rem;
width: 375rem;
height: 51rem;
position: absolute;
bottom: -51rem;
left: 0;
transform: scale(1, -1);
}
#result .inner{
position: relative;
border: solid 2rem #28323c;
border-radius: 4rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-cream.png");
background-size: 80rem 80rem;
padding: 16rem 16rem 82rem 16rem;
}
#result .inner::before{
content: "";
background: url("/cp/golbi/2507/images/glb_rsl_icn.png");
background-size: 22rem 8rem;
width: 22rem;
height: 8rem;
position: absolute;
top: -6rem;
left: 0;
right: 0;
margin: auto;
}
#result .inner h2{
position: relative;
}
#result .inner h2 img:first-child{
width: 38rem;
position: absolute;
top: 0;
right: 0;
}
#result .inner h2 img + img{
width: 126rem;
display: block;
}
#result .inner h2 span{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
text-align: center;
display: block;
width: 126rem;
height: 20rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
padding: 2rem 0 0 0;
margin: 4rem 0 0 0;
}
#result .inner h2 strong{
font-size: 19rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f7e378;
display: table;
height: 27rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
margin: 1rem 0 0 0;
padding: 4rem 4rem 0 4rem;
}



#result .inner .accordion-button{
position: absolute;
bottom: 22rem;
left: 0;
right: 0;
margin: auto;
width: 200rem;
z-index: 1;
}
#result .inner .accordion-button a{
}
#result .inner .accordion-button a span{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #f2edde;
text-align: center;
position: relative;
height: 44rem;
border-radius: 22rem;
display: block;
background: url("/cp/golbi/2507/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 9rem 0 0 0;
}
#result .inner .accordion-button a span::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: calc(100% + 4rem);
height: 44rem;
border-radius: 22rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
#result .inner .accordion-button a span.open{
display: block;
}
#result .inner .accordion-button a span.close{
display: none;
}
#result .inner .accordion-button.open a span.open{
display: none;
}
#result .inner .accordion-button.open a span.close{
display: block;
}



#result .inner .accordion{
margin: 0 -16rem;
}
#result .inner .accordion figure{
margin: 16rem 0 0 0;
}
#result .inner .accordion h3{
font-size: 19rem;
line-height: 23rem;
letter-spacing: 0;
font-weight: 900;
color: #286493;
position: relative;
padding: 0 0 16rem 16rem;
margin: 24rem 0 0 0;
}
#result .inner .accordion h3 img{
width: 74rem;
position: absolute;
bottom: 0;
right: 8rem;
}
#result .inner .accordion .tab{
position: relative;
padding: 0 0 0 16rem;
}
#result .inner .accordion .tab::after{
content: "";
width: 100%;
height: 2rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
position: absolute;
bottom: 0;
left: 0;
}
#result .inner .accordion .tab ul{
}
#result .inner .accordion .tab ul li{
float: left;
width: calc(25% - 10rem);
margin: 0 8rem 0 0;
}
#result .inner .accordion .tab ul li a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f2edde;
text-align: center;
position: relative;
display: block;
height: 32rem;
border: solid 2rem #28323c;
border-bottom: none;
border-radius: 8rem 8rem 0 0;
padding: 5rem 0 0 0;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#result .inner .accordion .tab ul li.select a{
color: #28323c;
background: none;
}
#result .inner .accordion .tab ul li.select a::before{
content: "";
width: 100%;
height: 2rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-cream.png");
background-size: 80rem 80rem;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}



#result .inner .accordion .tab-inner{
}
#result .inner .accordion .tab-inner.off{
display: none;
}
#result .inner .accordion .tab-inner ul{
margin: 16rem 16rem 0 16rem;
}
#result .inner .accordion .tab-inner ul li{
font-size: 15rem;
line-height: 17rem;
letter-spacing: 0.2rem;
font-weight: 500;
color: #28323c;
background: url("/cp/golbi/2507/images/glb_rsr_bg-a.png");
background-size: 40rem 40rem;
border-radius: 8rem;
margin: 8rem 0 0 0;
padding: 8rem 8rem 7rem 8rem;
position: relative;
}
#result .inner .accordion .tab-inner.b ul li{
background: url("/cp/golbi/2507/images/glb_rsr_bg-b.png");
background-size: 40rem 40rem;
}
#result .inner .accordion .tab-inner.c ul li{
background: url("/cp/golbi/2507/images/glb_rsr_bg-c.png");
background-size: 40rem 40rem;
}
#result .inner .accordion .tab-inner.d ul li{
background: url("/cp/golbi/2507/images/glb_rsr_bg-d.png");
background-size: 40rem 40rem;
}
#result .inner .accordion .tab-inner ul li::before{
content: "";
background: url("/cp/golbi/2507/images/glb_rsr_bln-a.png");
background-size: 8rem 9rem;
width: 8rem;
height: 9rem;
position: absolute;
top: 0;
bottom: 4rem;
left: -8rem;
margin: auto;
}
#result .inner .accordion .tab-inner.b ul li::before{
background: url("/cp/golbi/2507/images/glb_rsr_bln-b.png");
background-size: 8rem 9rem;
left: inherit;
right: -8rem;
}
#result .inner .accordion .tab-inner.c ul li::before{
background: url("/cp/golbi/2507/images/glb_rsr_bln-c.png");
background-size: 8rem 9rem;
}
#result .inner .accordion .tab-inner.d ul li::before{
background: url("/cp/golbi/2507/images/glb_rsr_bln-d.png");
background-size: 8rem 9rem;
left: inherit;
right: -8rem;
}



/* ==============================================
#point
============================================== */

#point{
position: relative;
background: url("/cp/golbi/2507/images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
margin: 121rem 0 0 0;
padding: 0 0 16rem 0;
}
.cs #point{
margin: 70rem 0 0 0;
}
#point::before{
content: "";
background: url("/cp/golbi/2507/images/glb_pnt_bg.png");
background-size: 375rem 38rem;
width: 375rem;
height: 38rem;
position: absolute;
top: -38rem;
left: 0;
}
#point::after{
content: "";
background: url("/cp/golbi/2507/images/glb_pnt_dot.png");
background-size: 375rem 51rem;
width: 375rem;
height: 51rem;
position: absolute;
bottom: -51rem;
left: 0;
}
#point .inner{
background: url("/cp/golbi/2507/images/glb_cmn_clr-orange.png");
background-size: 80rem 80rem;
}
#point .inner h2{
text-align: center;
margin: 0 0 16rem 0;
}
#point .inner h2 img{
width: 104rem;
}
#point .inner h2 span{
display: block;
position: absolute;
top: -38rem;
right: 14rem;
width: 84rem;
height: 84rem;
}
#point .inner h2 span img{
width: 84rem;
}
#point .inner h3{
}
#point .inner h3 span{
}
#point .inner h3 strong{
}
#point .inner figure{
}
#point .inner figure img{
}
#point .link{
text-align: right;
margin: 12rem 16rem -16rem 0;
}
#point .link a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #327daa;
border-bottom: dotted 1rem #327daa;
}
#point h4{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #286493;
margin: 16rem 16rem 0 16rem;
}
#point h4 + p{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #28323c;
margin: 8rem 16rem 0 16rem;
}
#point ul{
margin: 12rem 8rem 0 16rem;
}
#point ul li{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #28323c;
float: left;
width: calc(50% - 8rem);
height: 60rem;
position: relative;
margin: 0 8rem 0 0;
padding: 12rem 0 0 56rem;
background: url("/cp/golbi/2507/images/glb_rsr_bg-a.png");
background-size: 40rem 40rem;
border-radius: 8rem;
}
#point ul li img{
position: absolute;
top: 0;
bottom: 0;
left: 12rem;
margin: auto;
width: 36rem;
}
#point ul + p{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #28323c;
text-align: center;
margin: 12rem 0 0 0;
}
#point .button{
position: relative;
width: 200rem;
margin: 10rem auto 0 auto;
z-index: 1;
}
#point .button a{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 700;
color: #f2edde;
text-align: center;
position: relative;
height: 44rem;
border-radius: 22rem;
display: block;
background: url("/cp/golbi/2507/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 9rem 0 0 0;
}
#point .button a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: calc(100% + 4rem);
height: 44rem;
border-radius: 22rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
#point .entry{
position: fixed;
bottom: -60rem;
left: 16rem;
right: 16rem;
z-index: 100;
opacity: 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:960px) {
#point .entry{
width: 556px;
}
}
@media screen and (min-width:1200px) {
#point .entry{
margin: auto;
}
}
#point .entry.on{
bottom: 64rem;
opacity: 1;
}
#point .entry a{
position: relative;
display: block;
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 7rem 0 0 0;
}
.cs #point .entry a{
padding: 16rem 0 0 0;
}
#point .entry.end a{
background: url("/cp/golbi/2507/images/glb_cmn_clr-gray.png");
background-size: 80rem 80rem;
pointer-events: none;
}
#point .entry a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: calc(100% + 4rem);
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
#point .entry a::after{
content: "";
position: absolute;
top: 12rem;
right: 12rem;
width: 32rem;
height: 32rem;
border-radius: 16rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#point .entry a span{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #fae678;
text-align: center;
display: block;
}
#point .entry a span.off{
display: none;
color: #f5f0e1;
}
#point .entry.end a span.on{
display: none;
}
#point .entry.end a span.off{
display: block;
}
#point .entry a img{
position: absolute;
top: 12rem;
left: 12rem;
width: 32rem;
}
#point .note{
text-align: center;
margin: 16rem 0 0 0;
}
#point .note a{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #f5f0e1;
color: #28323c;
border-bottom: dotted 1rem #28323c;
}



/* ==============================================
#lesson
============================================== */

#lesson{
margin: 51rem 0 0 0;
padding: 32rem 0 0 0;
}
#lesson h2{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
position: relative;
display: inline-block;
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
padding: 6rem 8rem 6rem 98rem;
margin-left: -4rem!important;
transform:skewX(-8deg);
}
#lesson h2 strong{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f7e378;
display: block;
}
#lesson h2::before{
content: "";
background: url("/cp/golbi/2507/images/glb_scr_chr.png");
background-size: 87rem 120rem;
width: 87rem;
height: 120rem;
position: absolute;
top: -8rem;
left: 8rem;
}
#lesson .inner{
padding: 0 16rem;
}
#lesson .inner .movie{
position: relative;
margin: 16rem 0 0 0;
}
#lesson .inner .movie::before{
content: "";
background: url("/cp/golbi/2507/images/glb_cmn_clr-month.png");
background-size: 80rem 80rem;
width: 100%;
height: 100%;
position: absolute;
top: 8rem;
left: 8rem;
border-radius: 16rem;
z-index: -1;
}
#lesson .inner .movie div{
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
#lesson .inner .movie div iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 16rem;
border: solid 2rem #28323c;
}
#lesson .inner .movie + .link{
text-align: right;
margin: 16rem 0 0 0;
color: #f2edde;
}
#lesson .inner .movie + .link a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #64b4e6;
border-bottom: dotted 1rem #64b4e6;
}



#lesson .inner .profile{
position: relative;
margin: 16rem 0 0 0;
}
#lesson .inner .profile figure{
border: solid 2rem #28323c;
width: 80rem;
border-radius: 40rem;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#lesson .inner .profile figure img{
}
#lesson .inner .profile h3{
font-size: 19rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #f2edde;
padding: 4rem 0 0 88rem;
}
#lesson .inner .profile h3 span{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f2edde;
display: block;
margin: 4rem 0 0 -7rem;
}
#lesson .inner .profile .link{
text-align: right;
margin: 4rem 0 0 0;
}
#lesson .inner .profile .link a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #64b4e6;
border-bottom: dotted 1rem #64b4e6;
}
#lesson .inner .profile .link + p{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #f2edde;
margin: 16rem 0 0 0;
}



#lesson .inner .banner{
position: relative;
margin: 24rem 0 0 0;
}
#lesson .inner .banner::before{
content: "";
background: url("/cp/golbi/2507/images/glb_cmn_clr-month.png");
background-size: 80rem 80rem;
width: 100%;
height: 100%;
position: absolute;
top: 8rem;
left: 8rem;
border-radius: 16rem;
z-index: -1;
}
#lesson .inner .banner a{
display: block;
}
#lesson .inner .banner a img{
border: solid 2rem #28323c;
border-radius: 16rem;
}



/* ==============================================
#calendar
============================================== */

#calendar{
position: relative;
z-index: 1;
}
#calendar h2{
margin: 64rem 0 0 0;
}
#calendar h2 img{
}
#calendar .inner{
position: relative;
background: url("/cp/golbi/2507/images/glb_cln_bg.png");
background-size: 100% auto;
padding: 0 16rem 60rem 16rem;
margin: -1rem 0 0 0;
}
#calendar .inner dl{
display: inline-block;
margin: 28rem 0 0 0;
width: 100%;
}
#calendar .inner dl dt{
}
#calendar .inner dl dt a{
display: block;
position: relative;
padding: 2rem 0 0 64rem;
}
#calendar .inner dl dt a::before{
content: "";
width: 100%;
height: 1rem;
background: rgba(247,242,232,0.4);
position: absolute;
top: 27rem;
left: 0;
}
#calendar .inner dl dt a::after{
content: "";
background: url("/cp/golbi/2507/images/glb_cln_btn-open.png");
background-size: 24rem 24rem;
width: 24rem;
height: 24rem;
position: absolute;
top: 15rem;
right: 0;
}
#calendar .inner dl dt.on a::after{
background: url("/cp/golbi/2507/images/glb_cln_btn-close.png");
background-size: 24rem 24rem;
}
#calendar .inner dl dt a span{
display: block;
position: absolute;
top: 0;
left: 0;
background: url("/cp/golbi/2507/images/glb_cln_icn-hole.png");
background-size: 52rem 55rem;
width: 52rem;
height: 55rem;
}
#calendar .inner .next dl dt a span{
background: url("/cp/golbi/2507/images/glb_cln_icn-hole-02.png");
background-size: 52rem 55rem;
}
#calendar .inner dl dt a span::before{
content: "";
background: url("/cp/golbi/2507/images/glb_cln_icn-ball.png");
background-size: 40rem 40rem;
width: 40rem;
height: 40rem;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: scale(0.5, 0.5);
opacity: 0;
transition: 0.2s ease-out;
}
#calendar .inner dl dt.on a span::before{
transform: scale(1, 1);
opacity: 1;
}
#calendar .inner dl dt a span img{
position: absolute;
top: 0;
bottom: 2rem;
left: 0;
right: 0;
margin: auto;
width: 24rem;
}
#calendar .inner dl dt a span font{
font-size: 24rem;
line-height: 24rem;
text-align: center;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 16rem 0 0 0;
}
#calendar .inner dl dt a span + img{
width: auto;
height: 29rem;
}
#calendar .inner dl dt a strong{
display: block;
font-size: 19rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f7e378;
margin: 2rem 0 0 0;
}
#calendar .inner dl dd{
font-size: 15rem;
line-height: 23rem;
color: #f7f2e8;
text-align: justify;
display: none;
margin: 12rem 0 0 64rem;
}
#calendar .inner dl:first-child dd{
display: block;
}
#calendar .inner dl dd a{
font-size: 14rem;
line-height: 16rem;
letter-spacing: 0;
font-weight: 700;
text-align: center;
color: #fae678;
position: relative;
height: 44rem;
border-radius: 22rem;
background: url("/cp/golbi/2507/images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 0 0 0 0;
margin: 12rem 0 0 0;
display: flex;
justify-content: center;
align-items: center;
}
#calendar .inner dl dd a.blue{
background: url("/cp/golbi/2507/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
}
#calendar .inner dl dd a.pink{
background: url("/cp/golbi/2507/images/glb_cmn_clr-pink.png");
background-size: 80rem 80rem;
}
#calendar .inner dl dd a + a{
margin: 8rem 0 0 0;
}
#calendar .next{
background: url("/cp/golbi/2507/images/glb_cln_bg-02.png");
background-size: 100% auto;
margin: 0 -16rem -60rem -16rem;
padding: 0 16rem 60rem 16rem;
}
#calendar .next h2{
margin: 32rem -16rem 0 -16rem;
}



/* ==============================================
#notes
============================================== */

#notes{
background: url("/cp/golbi/2507/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#notes .inner{
padding: 0 16rem;
}
@media screen and (min-width:1200px) {
#notes .inner{
padding: 0 16rem 64rem 16rem;
}
}
#notes .inner h2{
font-size: 21rem;
line-height: 25rem;
letter-spacing: 0.8rem;
font-weight:700;
color: #f5f0e1;
text-align: center;
padding: 60rem 0 0 0;
}
#notes .inner h3{
font-size: 17rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #f5f0e1;
text-align: center;
border: solid 1rem #f5f0e1;
padding: 12rem 0 12rem 0;
margin: 60rem 0 0 0;
}
#notes .inner table{
width: 100%;
border-collapse:collapse;
border-spacing:0;
}
#notes .inner table th{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #f5f0e1;
display: block;
text-align: left;
margin: 28rem 0 0 0;
}
#notes .inner table td{
display: block;
}
#notes .inner table td p{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 400;
color: #f5f0e1;
margin: 8rem 0 0 0;
}
#notes .inner table td strong{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 500;
color: #f5f0e1;
}
#notes .inner table td ul{
margin: 8rem 0 0 0;
}
#notes .inner table td ul li{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 400;
color: #f5f0e1;
text-indent: -15rem;
margin: 4rem 0 0 15rem;
}
#notes .inner table td a{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 400;
color: #f5f0e1;
text-decoration: underline;
}
#notes .inner table .center{
text-align: center;
}



/* ==============================================
animation
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20rem);
}

100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20rem);
}

100% {
opacity: 1;
transform: translateX(0);
}
}



.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0.8,0.8);
}
100% {
opacity: 1;
transform: scale(1.0,1.0);
}
}



.slideUp {
animation-name: slideUp;
animation-timing-function:linear;
}
@keyframes slideUp {
0% {
transform: translateY(40rem);
}

100% {
transform: translateY(0);
}
}



.pon {
animation-name: pon;
}
@keyframes pon {
0% {
opacity: 0;
transform: scale(.5);
}
20% {
opacity: 1;
transform: scale(1.2);
}
40% {
opacity: 1;
transform: scale(0.8);
}
60% {
opacity: 1;
transform: scale(1.1);
}
80% {
opacity: 1;
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}