@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/2604/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/2604/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{
position: relative;
}
main .title h2{
}
main .title h2 img{
}
main .title h2 span{
display: block;
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f7e378;
background: url("../images/glb_cmn_ctn_bg.png");
background-size: 100% auto;
padding: 16rem 0 32rem 16rem;
}
main .title figure{
position: absolute;
bottom: -16rem;
right: 16rem;
}
main .title figure img{
width: 120rem;
}



main .bar{
font-size: 20rem;
line-height: 24rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
display: inline-block;
height: 32rem;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
padding: 5rem 8rem 0 8rem;
margin-left: -2rem!important;
transform:skewX(-8deg);
}
main .bar 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: 62rem;
left: 16rem;
width: 40rem;
height: 390rem;
border-radius: 20rem;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
overflow: hidden;
}
.end #hero .inner h2{
height: 608rem;
}
#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(390rem);
}
100% {
transform: translateY(-390rem);
}
}
#hero .inner figure{
}
#hero .inner figure span{
font-size: 11rem;
line-height: 15rem;
letter-spacing: 0;
font-weight: 500;
display: block;
color: #28323c;
margin: -42rem 0 0 64rem;
}
#hero .inner figure span a{
font-size: 11rem;
line-height: 15rem;
letter-spacing: 0;
font-weight: 500;
color: #327da7;
border-bottom: dotted 1rem #327da7;
}



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

nav{
}
nav ul{
padding: 16rem 16rem 0 16rem;
}
nav ul li{
position: relative;
float: left;
width: calc(50% - 8rem);
margin: 0 16rem 0 0;
}
nav ul li::before{
content: "";
display: block;
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
width: 100%;
height: 100%;
border-radius: 16rem;
position: absolute;
top: 8rem;
left: 8rem;
z-index: -1;
}
nav ul li:nth-child(2){
margin: 0;
}
nav ul li a{
font-size: 15rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
display: block;
height: 64rem;
background: url("../images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
border-radius: 16rem;
padding: 7rem 0 0 12rem;
}
nav ul li:nth-child(2) a{
background: url("../images/glb_cmn_clr-month.png");
background-size: 80rem 80rem;
}
nav ul li a::after{
content: "";
display: block;
background: url("../images/glb_cmn_btn-anchor.png");
background-size: 16rem 16rem;
width: 16rem;
height: 16rem;
position: absolute;
top: 0;
bottom: 4rem;
right: 16rem;
margin: auto;
}
nav ul li a img{
display: block;
width: 37rem;
margin: 0 0 4rem 0;
}



@media screen and (min-width:960px) {
nav{
position: fixed;
top: 0;
right: 0;
width: calc(100% - 600px);
height: 100%;
background: url("/cp/golbi/2604/images/glb_nv_bg.jpg") center no-repeat;
margin: 0;
}
nav ul{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 320px;
height: 480px;
margin: auto;
padding: 0;
}
nav ul li{
float: inherit;
width: auto;
margin: 16rem 0 0 0!important;
}
nav ul li a{
line-height: 21rem;
letter-spacing: 0.8rem;
text-align: center;
height: auto;
padding: 16rem 0 36rem 0;
}
nav ul li a::after{
top: inherit;
bottom: 16rem;
left: 0;
right: 0;
}
nav ul li a img{
margin: 0 auto 8rem auto;
}
}



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



/* ==============================================
.menu
============================================== */

.menu{
}
.menu .inner{
padding: 0 16rem;
}
.menu .inner h2{
font-size: 19rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #28323c;
}
#menu-01 .inner h2{
padding: 40rem 0 0 0;
}
#menu-02 .inner h2{
padding: 72rem 0 0 0;
}
.menu .inner h2 img{
display: block;
width: 51rem;
margin: 0 0 4rem 0;
}
.menu .inner ul{
border-bottom: 1rem solid rgba(40,50,60,0.08);
margin: 12rem 0 0 0;
}
.menu .inner ul li{
}
.menu .inner ul li a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #28323c;
position: relative;
display: block;
border-top: 1rem solid rgba(40,50,60,0.08);
padding: 8rem 0 7rem 23rem;
}
.menu .inner ul li a::after{
content: "";
display: block;
background: url("../images/glb_cmn_btn-anchor.png");
background-size: 16rem 16rem;
width: 16rem;
height: 16rem;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.menu .inner ul li a img{
display: block;
position: absolute;
top: 0;
bottom: 2rem;
left: 0;
margin: auto;
width: 15rem;
}



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

#limited{
margin: 32rem 0 0 0;
}
#limited .inner{
position: relative;
}
#limited .inner h3{
position: absolute;
top: -16rem;
left: 0;
}
#limited .inner .tab{
position: relative;
padding: 32rem 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: 17rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #666666;
text-align: center;
position: relative;
display: block;
height: 48rem;
border: solid 2rem #28323c;
border-bottom: none;
border-radius: 8rem 8rem 0 0;
padding: 5rem 0 0 0;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#limited .inner .tab ul li.select a{
font-size: 15rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #288c00;
text-align: center;
background: none;
border: solid 2rem #288c00;
border-bottom: none;
opacity: 1;
}
#limited .inner .tab ul li.select a::before{
content: "";
height: 2rem;
background: #288c00;
background-size: 80rem 80rem;
position: absolute;
bottom: 0;
z-index: 1;
}
#limited .inner .tab ul li.select a::after{
content: "";
height: 2rem;
background: #288c00;
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{
padding: 0 16rem;
}
#limited .inner .tab-inner.off{
display: none;
}
#limited .inner .tab-inner figure{
position: relative;
margin: 18rem 0 0 0;
}
#limited .inner .tab-inner figure::before{
content: "";
background: url("/cp/golbi/2604/images/glb_lmt_sdw-01.png");
background-size: 343rem 417rem;
width: 343rem;
height: 417rem;
position: absolute;
right: -8rem;
bottom: -8rem;
z-index: -1;
}
.cs #limited .inner .tab-inner figure a{
pointer-events: none;
}



/* ==============================================
#special
============================================== */

#special{
margin: 72rem 0 0 0;
}
#special .title h2 span{
padding-bottom: 16rem;
}
#special .inner{
overflow: hidden;
position: relative;
margin: -16rem 0 0 0;
}
#special .inner h3{
position: absolute;
top: 58rem;
left: 16rem;
z-index: 2;
}
#special .inner h3 img{
width: 84rem;
}
#special .inner figure{
position: relative;
margin: 0 -25rem;
z-index: 1;
}
#special .inner figure img{
}
#special .inner figure span{
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
animation: special 20.0s linear 0s infinite normal forwards;
}
@keyframes special {
0% {-webkit-transform: rotate(360deg);}
25% {-webkit-transform: rotate(270deg);}
50% {-webkit-transform: rotate(180deg);}
75% {-webkit-transform: rotate(90deg);}
100% {-webkit-transform: rotate(0deg);}
}
#special .inner figure span img{
}
#special .inner .button{
position: relative;
z-index: 1;
margin: -74rem 0 0 0;
padding: 0 0 4rem 0;
}
#special .inner .button a{
font-size: 25rem;
line-height: 29rem;
letter-spacing: 0.8rem;
font-weight: 700;
text-align: center;
color: #fae678;
position: relative;
display: block;
width: 280rem;
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2604/images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 13rem 0 0 0;
margin: auto;
}
.cs #special .inner .button a{
background: url("/cp/golbi/2604/images/glb_cmn_clr-gray.png");
background-size: 80rem 80rem;
pointer-events: none;
color: #f2edde;
}
#special .inner .button a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: 280rem;
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}



/* ==============================================
#support
============================================== */

#support{
margin: 64rem 0 0 0;
}
#support .title h2 span{
padding-bottom: 16rem;
}
#support .inner{
padding: 0 16rem;
}
#support .inner h3{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #28323c;
text-align: center;
padding: 28rem 0 0 0;
}
#support .inner h3 strong{
font-size: 31rem;
line-height: 33rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f7e378;
display: inline-block;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
padding: 2rem 2rem 0 2rem;
margin: 4rem 4rem 6rem 0;
}
#support .inner figure{
margin: 20rem 0 0 0;
filter: drop-shadow(8rem 8rem 0 rgba(40,50,60,1.0));
}
#support .inner .banner h4{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #28323c;
text-align: center;
margin: 28rem 0 0 0;
}
#support .inner .banner h4 strong{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #e86969;
}
#support .inner .banner ul{
position: relative;
z-index: 1;
}
#support .inner .banner ul li{
position: relative;
margin: 16rem 0 0 0;
}
#support .inner .banner ul li::before{
content: "";
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
position: absolute;
top: 8rem;
left: 8rem;
width: 100%;
height: 100%;
border-radius: 16rem;
z-index: -1;
}
#support .inner .banner ul li a{
display: block;
border-radius: 16rem;
border: solid 2rem #28323c;
overflow: hidden;
}
#support .inner .banner ul li a img{
}



/* ==============================================
#used
============================================== */

#used{
margin: 72rem 0 0 0;
}
#used .inner{
position: relative;
padding: 0 16rem;
}
#used .inner h3{
position: absolute;
top: -16rem;
left: 0;
}
#used .inner figure{
padding: 32rem 0 0 0;
filter: drop-shadow(8rem 8rem 0 rgba(40,50,60,1.0));
}
#used .inner figure a{
}
.cs #used .inner figure a{
pointer-events: none;
}
#used .inner figure a img{
}
#used .inner ul{
margin: 8rem -16rem 0 0;
display:flex;
flex-wrap:wrap;
position: relative;
z-index: 1;
}
#used .inner ul li{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0;
font-weight: 700;
text-align: center;
position: relative;
width: calc(50% - 16rem);
float: left;
margin: 16rem 16rem 0 0;
padding: 0 0 12rem 0;
background: url("/cp/golbi/2604/images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
border-radius: 16rem;
border: solid 2rem #28323c;
}
#used .inner ul li::before{
content: "";
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
position: absolute;
top: 10rem;
left: 10rem;
width: 100%;
height: 100%;
border-radius: 16rem;
z-index: -1;
}
#used .inner ul li span{
display: block;
height: 160rem;
border-radius: 14rem 14rem 0 0;
margin: 0 0 10rem 0;
padding: 16rem 0 0 0;
background: #fff;
}
#used .inner ul li img{
border-radius: 14rem 14rem 0 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#used .inner ul li a{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0;
font-weight: 700;
color: #f7e378;
text-align: center;
position: relative;
height: 32rem;
border-radius: 16rem;
display: block;
background: url("/cp/golbi/2604/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 5rem 0 0 0;
margin: 8rem 12rem 0 12rem;
}



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

#free{
margin: 48rem 0 0 0;
}
#free .title h2 span{
padding: 16rem 0 48rem 16rem;
}
#free .title figure{
bottom: 0;
}
#free .inner{
position: relative;
background: url("/cp/golbi/2604/images/glb_cmn_clr-orange.png");
background-size: 80rem 80rem;
padding: 0 0 16rem 0;
}
#free .inner::before{
content: "";
background: url("/cp/golbi/2604/images/glb_fr_bg.png") no-repeat;
background-size: 375rem 38rem;
width: 375rem;
height: 38rem;
position: absolute;
top: -38rem;
left: 0;
}
#free .inner::after{
content: "";
background: url("/cp/golbi/2604/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 h2{
font-size: 21rem;
line-height: 29rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #28323c;
text-align: center;
}
#free .inner h2 strong{
font-size: 21rem;
line-height: 29rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
position: relative;
z-index: 1;
}
#free .inner h2 strong::after{
content: "";
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 288rem;
height: 24rem;
z-index: -1;
}
#free .inner h2 strong font{
font-size: 21rem;
line-height: 29rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f7e378;
}
#free .inner h2 img{
display: block;
margin: 8rem 0 0 0;
}
#free .inner div{
background: url("/cp/golbi/2604/images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
border-radius: 4rem;
margin: -80rem 16rem 0 16rem;
padding: 0 16rem 10rem 16rem;
position: relative;
z-index: 1;
}
#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;
text-align: center;
}
#free .inner .link a{
font-size: 15rem;
line-height: 19rem;
font-weight: 700;
letter-spacing: 0.4rem;
text-align: center;
color: #28323c;
border-bottom: dotted 1rem #28323c;
}



#free .inner .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) {
#free .inner .entry{
width: 556px;
}
}
@media screen and (min-width:1200px) {
#free .inner .entry{
margin: auto;
}
}
#free .inner .entry.on{
bottom: 64rem;
opacity: 1;
}
#free .inner .entry a{
position: relative;
display: block;
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2604/images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 14rem 0 0 0;
}
#free .inner .entry.end a{
background: url("/cp/golbi/2604/images/glb_cmn_clr-gray.png");
background-size: 80rem 80rem;
pointer-events: none;
}
#free .inner .entry a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: calc(100% + 4rem);
height: 60rem;
border-radius: 30rem;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
#free .inner .entry a::after{
content: "";
position: absolute;
top: 12rem;
right: 12rem;
width: 32rem;
height: 32rem;
border-radius: 16rem;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#free .inner .entry a span{
font-size: 21rem;
line-height: 25rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #fae678;
text-align: center;
display: block;
}
#free .inner .entry a span.off{
display: none;
color: #f5f0e1;
}
#free .inner .entry.end a span.on{
display: none;
}
#free .inner .entry.end a span.off{
display: block;
font-size: 19rem;
}
#free .inner .entry a img{
position: absolute;
top: 12rem;
left: 12rem;
width: 32rem;
}



/* ==============================================
#playlist
============================================== */

#playlist{
margin: 32rem 0 0 0;
}
#playlist .inner{
padding: 0 16rem;
}
#playlist .inner ul{
margin: -16rem 0 0 0;
}
#playlist .inner ul li{
position: relative;
z-index: 1;
}
#playlist .inner ul li::before{
content: "";
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
position: absolute;
top: 8rem;
left: 8rem;
width: 100%;
height: 100%;
border-radius: 16rem;
z-index: -1;
}
#playlist .inner ul li a{
display: block;
border: solid 2rem #28323c;
border-radius: 16rem;
overflow: hidden;
}
#playlist .inner ul li a img{
}



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

#lesson{
margin: 64rem 0 0 0;
}
#lesson .inner{
position: relative;
padding: 48rem 16rem 0 16rem;
}
#lesson .inner h3{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f2edde;
position: absolute;
top: -16rem;
left: 0;
display: inline-block;
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
padding: 6rem 8rem 6rem 14rem;
margin-left: -4rem!important;
transform:skewX(-8deg);
}
#lesson .inner h3 strong{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f7e378;
display: block;
}



#lesson .inner .movie{
position: relative;
}
#lesson .inner .movie::before{
content: "";
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.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: #f7e378;
border-bottom: dotted 1rem #f7e378;
}



#lesson .inner .profile{
position: relative;
margin: 24rem 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 h4{
font-size: 19rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #28323c;
padding: 4rem 0 0 88rem;
}
#lesson .inner .profile h4 span{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #28323c;
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: #327da7;
border-bottom: dotted 1rem #327da7;
}
#lesson .inner .profile .link + p{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #28323c;
margin: 16rem 0 0 0;
}



/* ==============================================
#wallpaper
============================================== */

#wallpaper{
margin: 60rem 0 0 0;
}
#wallpaper .inner{
padding: 0 16rem;
}
#wallpaper .inner figure{
position: relative;
border: solid 2rem #28323c;
border-radius: 16rem;
width: 160rem;
margin: -16rem auto 0 auto;
z-index: 1;
}
#wallpaper .inner figure img{
border-radius: 14rem;
}
#wallpaper .inner figure::before{
content: "";
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
position: absolute;
top: 8rem;
left: 8rem;
width: 100%;
height: 100%;
border-radius: 16rem;
z-index: -1;
}
#wallpaper .inner p{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #28323c;
text-align: center;
margin: 20rem 0 0 12rem;
}
#wallpaper .inner .button{
margin: 22rem 0 0 0;
}
#wallpaper .inner .button:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#wallpaper .inner .button a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f7e378;
text-align: center;
float:left;
position: relative;
width: calc(50% - 4rem);
height: 44rem;
border-radius: 22rem;
display: block;
background: url("/cp/golbi/2604/images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 10rem 0 0 0;
margin: 0 8rem 0 0;
}
#wallpaper .inner .button a + a{
background: url("/cp/golbi/2604/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
margin: 0;
}
#wallpaper .inner .button a::before{
content: "";
background: url("/cp/golbi/2604/images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
position: absolute;
top: 2rem;
left: -2rem;
width: calc(100% + 4rem);
height: calc(100% + 4rem);
border-radius: 22rem;
z-index: -1;
}



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

#calendar{
position: relative;
z-index: 1;
margin: 68rem 0 0 0;
}
#calendar h2{
}
#calendar h2 img{
}
#calendar .inner{
position: relative;
background: url("/cp/golbi/2604/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/2604/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/2604/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/2604/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/2604/images/glb_cln_icn-hole-02.png");
background-size: 52rem 55rem;
}
#calendar .inner dl dt a span::before{
content: "";
background: url("/cp/golbi/2604/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/2604/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/2604/images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
}
#calendar .inner dl dd a.pink{
background: url("/cp/golbi/2604/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/2604/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/2604/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;
}