@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!important;
}
.none{
display: none;
}



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

body{
}
body::before{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url("../images/glb_cmn_bg-202503.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: 295rem;
}



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

footer{
background: url("../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;
}
}



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

#hero{
position: relative;
}
#hero .inner{
}
#hero .inner h2{
position: absolute;
top: 61rem;
left: 16rem;
width: 40rem;
height: 533rem;
border-radius: 20rem;
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
overflow: hidden;
}
.cs #hero .inner h2{
height: 388rem;
}
.end #hero .inner h2{
height: 502rem;
}
@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 16s linear infinite;
}
@keyframes ticker-hero {
0% {
transform: translateY(533rem);
}
100% {
transform: translateY(-1800rem);
}
}
.end #hero .inner h2 span{
display: none;
}
#hero .inner h2 img{
display: none;
}
.end #hero .inner h2 img{
display: block;
width: 30rem;
margin: 14rem 0 0 5rem;
}



#hero .inner figure{
text-align: right;
padding: 118rem 0 0 0;
overflow: hidden;
}
#hero .inner figure img{
width: 323rem;
margin: 0 -26rem 0 0;
}



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

nav{
margin: -11rem 0 0 80rem;
}
.cs nav div{
display: none;
}
nav div h2{
}
nav h2 img{
width: 67rem;
}
nav div ul{
margin: 10rem 0 0 0;
}
nav div ul li{
}
.end nav div ul li:nth-child(1){
display: none;
}
nav div ul li a{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #f5f0e1;
position: relative;
display: block;
height: 32rem;
text-shadow:
1rem 1rem 0 #28323c,
-1rem 1rem 0 #28323c,
-1rem -1rem 0 #28323c,
1rem -1rem 0 #28323c;
padding: 6rem 0 0 0;
}
nav div ul li a::before{
content: "";
background: #f5f0e1;
width: calc(100% - 80rem);
height: 1rem;
position: absolute;
top: 14rem;
right: 44rem;
opacity: 0.2;
z-index: -1;
}
nav div ul li a::after{
content: "";
background: url("../images/glb_cmn_btn-anchor.png");
background-size: 20rem 20rem;
width: 20rem;
height: 20rem;
position: absolute;
top: 6rem;
right: 16rem;
}
nav div ul li a img{
display: inline-block;
vertical-align: middle;
margin: -4rem 8rem 0 0;
width: 15rem;
}



@media screen and (min-width:960px) {
nav{
position: fixed;
top: 0;
right: 0;
width: calc(100% - 600px);
height: 100%;
background: url("../images/glb_nv_bg-202503.jpg") center no-repeat;
margin: 0;
}
.cs nav::before{
content: "";
background: url("../images/glb_nv_cs.png");
background-size: 268px 164px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 268px;
height: 164px;
}
nav div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 320px;
height: 300px;
}
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("../images/glb_cmn_btn-anchor.png");
background-size: 20px 20px;
width: 20px;
height: 20px;
top: 19px;
right: 0;
}
nav div ul li a img{
margin: -5px 8px 0 0;
width: 24px;
}
}



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


        

/* ==============================================
#coupon
============================================== */

#coupon{
}
.cs #coupon,
.end #coupon{
display: none;
}
#coupon h2{
margin: 24rem 0 0 0;
}
#coupon h2 img{
}
#coupon .inner{
position: relative;
background: url("../images/glb_std_bg.png");
background-size: 343rem 337rem;
width: 343rem;
height: 337rem;
margin: -2rem auto 0 auto;
}
#coupon .inner::before{
content: "";
background: url("../images/glb_std_sdw.png");
background-size: 343rem 337rem;
width: 343rem;
height: 337rem;
position: absolute;
right: -16rem;
bottom: -16rem;
z-index: -1;
}
#coupon .inner figure{
padding: 2rem 2rem 0 2rem;
}
#coupon .inner figure img{
border-radius: 14rem 14rem 0 0;
}
#coupon .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
text-align: center;
margin: 14rem 0 0 0;
}
#coupon .inner .button{
position: relative;
z-index: 1;
margin: 11rem 0 0 0;
}
#coupon .inner .button a{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #fae678;
position: relative;
display: block;
width: 155rem;
height: 44rem;
border-radius: 22rem;
background: url("../images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 9rem 0 0 0;
margin: auto;
}
#coupon .inner .button a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: 155rem;
height: 44rem;
border-radius: 22rem;
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}



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

#research{
position: relative;
}
.cs #research{
overflow: hidden;
}
.cs #research::before{
content: "3月1日に本ページで調査!";
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 27rem;
line-height: 31rem;
letter-spacing: 0.4rem;
font-weight: 900;
text-align: center;
color:#f7f2e8;
position: absolute;
bottom: 10%;
left: -10%;
margin: auto;
width: 120%;
height: 80rem;
padding: 24rem 0 0 0;
background: url("../images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
box-sizing: border-box;
transform: rotate(-8deg);
opacity: 0.9;
z-index: 10;
}
#research .inner{
}
#research .inner h2{
margin: 46rem 0 0 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("../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: 41rem;
line-height: 41rem;
letter-spacing: 0;
font-weight: 900;
color: #fae678;
display: table;
background: url("../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;
}
.cs #research .inner figure{
position: absolute;
top: 227rem;
right: 0;
}
#research .inner figure img{
width: 123rem;
}
#research .inner div{
position: relative;
float: left;
background: url("../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: 32rem 16rem -24rem 0;
padding: 0 0 36rem 0;
}
.cs #research .inner div{
display: none;
}
#research .inner div + div{
border-radius: 16rem 0 0 16rem;
border: 4rem solid #28323c;
border-right: none;
margin: 32rem 0 -24rem 0;
}
#research .inner div + div::before{
content: "";
background: url("../images/glb_rsr_icn-vs.png");
background-size: 64rem 64rem;
width: 64rem;
height: 64rem;
position: absolute;
top: 76rem;
left: -44rem;
}
#research .inner div h3{
font-size: 31rem;
line-height: 35rem;
letter-spacing: 0.4rem;
font-weight: 900;
text-align: center;
padding: 20rem 8rem 0 0;
}
#research .inner div + div h3{
padding: 20rem 0 0 8rem;
}
#research .inner div h3 span{
font-size: 12rem;
line-height: 16rem;
letter-spacing: 0;
font-weight: 900;
display: block;
margin: 4rem 0 0 0;
}
#research .inner div h3 img{
width: 43rem;
display: block;
margin: 0 auto 14rem auto;
}
#research .inner div ul{
padding: 4rem 16rem 0 16rem;
}
#research .inner div ul li{
font-size: 12rem;
line-height: 16rem;
letter-spacing: 0;
font-weight: 500;
text-align: center;
position: relative;
background: url("../images/glb_rsr_bg-a.png");
background-size: 80rem 80rem;
border-radius: 8rem;
margin: 8rem 0 0 0;
padding: 6rem 0 6rem 0;
}
#research .inner div + div ul li{
background: url("../images/glb_rsr_bg-b.png");
background-size: 80rem 80rem;
}
#research .inner div ul li::before{
content: "";
background: url("../images/glb_rsr_bln-l.png");
background-size: 8rem 9rem;
width: 8rem;
height: 9rem;
position: absolute;
top: 0;
bottom: 4rem;
left: -8rem;
margin: auto;
}
#research .inner div + div ul li::before{
background: url("../images/glb_rsr_bln-r.png");
background-size: 8rem 9rem;
left: inherit;
right: -8rem;
}
#research .inner .button{
clear: both;
position: relative;
z-index: 1;
margin: 0;
}
.cs #research .inner .button{
display: none;
}
#research .inner .button a{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 900;
text-align: center;
color: #fae678;
position: relative;
display: block;
width: 240rem;
height: 44rem;
border-radius: 22rem;
background: url("../images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 9rem 0 0 0;
margin: auto;
}
.end #research .inner div + .button a{
background: url("../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: 900;
color: #fae678;
display: block;
}
#research .inner .button a span.off{
display: none;
color: #f5f0e1;
}
.end #research .inner .button a span.on{
display: none;
}
.end #research .inner .button 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("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
.end #research .inner div + .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;
}
.cs #research .inner p{
display: none;
}
#research .inner p strong{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #fae678;
}
#research .inner p + .button{
margin: 12rem 0 0 0;
}
#research .inner p + .button a{
color: #f5f0e1;
background: url("../images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
}
#research .inner p + .button a img{
width: 28rem;
position: absolute;
top: 6rem;
left: 6rem;
}



/* ==============================================
#select
============================================== */

#select{
background: url("../images/glb_slc_ttl.png") top 16rem right no-repeat;
background-size: 66rem auto;
}
.cs #select,
.end #select{
display: none;
}
#select .inner{
}
#select .inner h2{
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
overflow: hidden;
padding: 4rem 0 2rem 0;
margin: 28rem 0 0 0;
}
#select .inner h2 span{
font-size: 21rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #fae678;
display: block;
white-space: nowrap;
animation: ticker-select 10s linear infinite;
}
@keyframes ticker-select {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-200%);
}
}
#select .inner h2 + ul{
}
#select .inner h2 + ul li{
position: relative;
margin: 24rem 0 0 0;
display: table;
width: 100%;
}
#select .inner h2 + ul li a::after{
content: "";
background: url("../images/glb_cmn_btn-arrow.png");
background-size: 32rem 32rem;
width: 32rem;
height: 32rem;
position: absolute;
top: 8rem;
bottom: 0;
right: 16rem;
margin: auto;
}
#select .inner h2 + ul li a{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
display: table-cell;
height: 160rem;
text-align: center;
vertical-align: middle;
padding: 0 172rem 0 0;
}
#select .inner h2 + ul li a img{
width: 144rem;
display: block;
margin: 8rem auto 0 auto;
}
#select .inner h2 + ul li a span{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #f5f0e1;
display: block;
width: 108rem;
height: 20rem;
border-radius: 4rem;
margin: 16rem auto 0 auto;
padding: 2rem 0 0 0;
background: url("../images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
}
#select .inner h2 + ul li a span + span{
margin: 4rem auto 0 auto;
}
#select .inner h2 + ul li a span.coupon{
padding: 2rem 0 0 0;
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#select .inner h2 + ul li a span img{
width: 13rem;
display: inline-block;
vertical-align: middle;
margin: -4rem 2rem 0 0;
}
#select .inner h2 + ul li a span + img{
width: 180rem;
height: auto;
position: absolute;
top: 0;
right: 0;
}
#select .inner .coupon{
position: relative;
padding: 0 16rem;
z-index: 1;
}
#select .inner .coupon ul{
margin: 68rem 0 0 0;
}
#select .inner .coupon ul li{
margin: -40rem 0 0 0;
}
#select .inner .coupon ul li a{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f5f0e1;
position: relative;
display: block;
height: 100rem;
background: url("../images/glb_cmn_clr-navy-03.png");
background-size: 80rem 80rem;
border-radius: 16rem;
border: solid 2rem #28323c;
padding: 8rem 0 0 12rem;
}
#select .inner .coupon ul li:nth-child(2) a{
background: url("../images/glb_cmn_clr-navy-03.png");
background-size: 80rem 80rem;
}
#select .inner .coupon ul li:nth-child(3) a{
background: url("../images/glb_cmn_clr-navy-03.png");
background-size: 80rem 80rem;
}
#select .inner .coupon ul li:last-child a{
background: url("../images/glb_cmn_clr-navy-02.png");
background-size: 80rem 80rem;
height: 60rem;
border-radius: 16rem 16rem 0 0;
border-bottom: 0;
}
#select .inner .coupon ul li a::after{
content: "";
background: url("../images/glb_cmn_btn-arrow.png");
background-size: 32rem 32rem;
width: 32rem;
height: 32rem;
position: absolute;
top: 13rem;
right: 12rem;
}
#select .inner .coupon ul li a img{
width: auto;
height: 15rem;
display: block;
margin: 0 0 2rem 0;
}
#select .inner .coupon ul li a span{
font-size: 12rem;
line-height: 20rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f5f0e1;
display: block;
}



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

#point{
position: relative;
margin: -10rem 0 0 0;
}
.cs #point{
margin: 32rem 0 0 0;
}
.end #point{
margin: 64rem 0 0 0;
}
#point .inner{
background: url("../images/glb_cmn_clr-orange.png");
background-size: 80rem 80rem;
}
#point .inner h2{
position: relative;
background: url("../images/glb_pnt_bg.png") no-repeat;
background-size: 100% auto;
padding: 74rem 0 0 16rem;
}
.cs #point .inner h2,
.end #point .inner h2{
background: none;
padding: 16rem 0 0 16rem;
border-top: solid 2rem #28323c;
}
#point .inner h2 img{
width: 145rem;
}
#point .inner h2 span{
display: block;
position: absolute;
top: 24rem;
right: 14rem;
width: 84rem;
height: 84rem;
}
.cs #point .inner h2 span{
top: -36rem;
background: url("../images/glb_pnt_icn-entry-cs.png");
background-size: 84rem 84rem;
}
#point .inner h2 span img{
width: 84rem;
}
.cs #point .inner h2 span img{
display: none;
}
#point .inner div{
background: url("../images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
margin: 16rem 0 0 0;
}
#point .inner h3{
}
#point .inner h3 span{
}
#point .inner h3 strong{
}
#point .inner figure{
}
#point .inner figure img{
}
#point .inner .link{
text-align: right;
padding: 12rem 16rem 16rem 0;
}
#point .inner .link a{
font-size: 13rem;
line-height: 17rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #327daa;
border-bottom: dotted 1rem #327daa;
}
#point .button{
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 .button{
width: 556px;
}
}
@media screen and (min-width:1200px) {
#point .button{
margin: auto;
}
}
#point .button.on{
bottom: 64rem;
opacity: 1;
}
#point .button a{
position: relative;
display: block;
height: 60rem;
border-radius: 30rem;
background: url("../images/glb_cmn_clr-green.png");
background-size: 80rem 80rem;
border: solid 2rem #28323c;
padding: 7rem 0 0 0;
}
.end #point .button a{
background: url("../images/glb_cmn_clr-gray.png");
background-size: 80rem 80rem;
pointer-events: none;
}
#point .button a::before{
content: "";
position: absolute;
top: 2rem;
left: -2rem;
width: calc(100% + 4rem);
height: 60rem;
border-radius: 30rem;
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
z-index: -1;
}
#point .button a::after{
content: "";
position: absolute;
top: 12rem;
right: 12rem;
width: 32rem;
height: 32rem;
border-radius: 16rem;
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
}
#point .button a span{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #fae678;
text-align: center;
display: block;
}
#point .button a span.off{
display: none;
color: #f5f0e1;
}
.end #point .button a span.on{
display: none;
}
.end #point .button a span.off{
display: block;
}
#point .button a img{
position: absolute;
top: 12rem;
left: 12rem;
width: 32rem;
}
#point .note{
position: absolute;
bottom: 104rem;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
#point .note a{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #f5f0e1;
border-bottom: dotted 1rem #f5f0e1;
}



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

#calendar{
position: relative;
z-index: 1;
}
#calendar h2{
margin: 64rem 0 0 0;
}
#calendar h2 img{
}
#calendar .inner{
position: relative;
background: url("../images/glb_cmn_clr-white.png");
background-size: 80rem 80rem;
border-radius: 0 16rem 16rem 0;
border: solid 2rem #28323c;
border-left: none;
margin: -1rem 16rem 0 0;
padding: 0 16rem 18rem 16rem;
}
#calendar .inner::before{
content: "";
background: url("../images/glb_cmn_clr-blue.png");
background-size: 80rem 80rem;
position: absolute;
top: 14rem;
right: -18rem;
width: calc(100% + 4rem);
height: calc(100% + 4rem);
border-radius: 16rem 0 0 16rem;
z-index: -1;
}
#calendar .inner h3{
padding: 16rem 0 8rem 0;
}
#calendar .inner h3 img:first-child{
width: 70rem;
}
#calendar .inner h3 img:last-child{
width: 101rem;
position: absolute;
top: 16rem;
right: 16rem;
}
#calendar .inner dl{
background: url("../images/glb_cmn_clr-navy-01.png");
background-size: 80rem 80rem;
border-radius: 30rem;
margin: 8rem 0 0 0;
}
#calendar .inner dl dt{
}
#calendar .inner dl dt a{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #faf5eb;
position: relative;
display: block;
height: 60rem;
padding: 9rem 0 0 66rem;
}
#calendar .inner dl dt a::after{
content: "";
background: url("../images/glb_cmn_btn-open.png");
background-size: 32rem 32rem;
width: 32rem;
height: 32rem;
position: absolute;
top: 14rem;
right: 14rem;
}
#calendar .inner dl dt.on a::after{
background: url("../images/glb_cmn_btn-close.png");
background-size: 32rem 32rem;
}
#calendar .inner dl dt a img{
position: absolute;
top:4rem;
left: 4rem;
width: 52rem;
height: 52rem;
border-radius: 26rem;
overflow: hidden;
}
#calendar .inner dl dt a span{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #fae678;
display: block;
}
#calendar .inner dl dd{
font-size: 13rem;
line-height: 21rem;
text-align: justify;
color: #fff;
display: none;
padding: 16rem 24rem 24rem 24rem;
}
#calendar .inner h3 + dl dd{
display: block;
}
#calendar .inner dl dd a{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 700;
text-align: center;
color: #fae678;
display: block;
height: 44rem;
border-radius: 22rem;
background: url("../images/glb_cmn_clr-red.png");
background-size: 80rem 80rem;
padding: 10rem 0 0 0;
margin: 16rem 0 0 0;
}
#calendar .inner figure{
margin: 16rem 0 0 0;
}
#calendar .inner figure img{
width: 323rem;
}



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

#notes{
background: url("../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: 80rem 0 0 0;
}
#notes .inner h3{
font-size: 15rem;
line-height: 21rem;
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: 14rem;
line-height: 20rem;
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: 13rem;
line-height: 19rem;
letter-spacing: 0;
font-weight: 400;
color: #f5f0e1;
margin: 8rem 0 0 0;
}
#notes .inner table td ul{
margin: 8rem 0 0 0;
}
#notes .inner table td ul li{
font-size: 13rem;
line-height: 19rem;
letter-spacing: 0;
font-weight: 400;
color: #f5f0e1;
text-indent: -13rem;
margin: 4rem 0 0 13rem;
}
#notes .inner table td a{
font-size: 13rem;
line-height: 19rem;
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);
}
}