/*font-size:.625rem;/*10px*/
/*font-size:.75rem;/*12px*/
/*font-size:.875rem;/*14px*/
/*font-size:1rem;/*16px*/
/*font-size:1.125rem;/*18px*/
/*font-size:1.25rem;/*20px*/
/*font-size:1.5rem;/*24px*/
/*font-size:1.625rem;/*26px*/
/*font-size:1.75rem;/*28px*/
/*font-size:1.875rem;/*30px*/
/*font-size:2.25rem;/*36px*/
/*font-size:2.125rem;/*34px*/
/*font-size:2.5rem;/*40px*/
/*font-size:3rem;/*48px*/
/*font-size:3.125rem;/*50px*/
/*font-size:3.125rem;/*58px*/
/*font-size:3.625rem;/*60px*/
/*font-size:4rem;/*64px*/
/*font-size: 10rem;/*160px*/
/*font-size: 12.5rem;/*200px*/
/*font-size: 17.5rem;/*280px*/

/*color: #201b17; rgba(32, 27, 23, 1);*/
/*color: #a08862; rgba(160, 136, 98, 1);*/
/*color: #dad1c3; rgba(218, 209, 195, 1);*/
/*color: #ede5da; rgba(237, 229, 218, 1);*/
/*color: #f5f3f2; rgba(245, 243, 242, 1);*/

body{
margin: 0;
padding: 0;
color: #201b17;
font-size: 16px;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
line-height: 1.6;
box-sizing: border-box;
font-weight: normal;
letter-spacing: -.1em;
}
body *{
margin: 0;
padding: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
box-sizing: inherit;
list-style: none;
letter-spacing: inherit;
text-decoration: none;
}

strong{
font-weight: bold;
}

a{
text-decoration: underline;
}

a:hover,
a:active{
text-decoration: none;
opacity: .7;
}

figure{
position: relative;
margin-right: auto;
margin-left: auto;
text-align: center;
}

img, svg{
display: inline-block;
max-width: 100%;
height: auto;
}

sup{
font-size: 60%;
letter-spacing: normal;
}

.fs10{font-size:.625rem !important; letter-spacing: normal;}
.fs12{font-size:.75rem !important; letter-spacing: normal;}
.fs14{font-size:.875rem !important; letter-spacing: normal;}
.fs16{font-size:1rem !important;}
.fs20{font-size:1.25rem !important;}
.fs30{font-size:1.875rem !important;}
.fs40{font-size:2.5rem !important;}
.fs50{font-size:3.125rem !important;}
.fs60{font-size:3.625rem !important;}
.fs80{font-size:5rem !important;}
.fs100{font-size:6.25rem !important;}
.fs120{font-size:7.5rem !important;}
.fs140{font-size:8.75rem !important;}
.fs160{font-size:10rem !important;}

.c-brown{color: #a08862 !important;}
.bg-brown{background-color: #dad1c3 !important;}
.bg-brown-light{background-color: #f5f3f2 !important;}
.z-1000{position: relative; z-index: 1000;}

.mb0{margin-bottom: 0 !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}

.mt0{margin-top: 0 !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}

.p5{padding: 5px !important;}
.p10{padding: 10px !important;}
.p20{padding: 20px !important;}
.pb1{padding-bottom: 1px !important;}
.pb100{padding-bottom: 100px !important;}
.plr5{padding-left: 5px !important; padding-right: 5px !important;}
.plr10{padding-left: 10px !important; padding-right: 10px !important;}
.plr20{padding-left: 20px !important; padding-right: 20px !important;}
.ptb5{padding-top: 5px !important; padding-bottom: 5px !important;}
.ptb10{padding-top: 10px !important; padding-bottom: 10px !important;}
.ptb20{padding-top: 20px !important; padding-bottom: 20px !important;}
.ptb100{padding-top: 100px !important; padding-bottom: 100px !important;}

.btn{
position: relative;
display: inline-block;
background-color: #a08862;
width: min(100%, 400px);
padding: .4em 1em;
border-radius: 1000em;
color: #ffffff;
}

.btn::after{
content: "";
position: relative;
display: inline-block;
top: -.1em;
left: 0;
width: .5em;
height: .5em;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
transform: rotate(45deg);
transition: .2s ease-out;
}

.btn:hover::after{
left: .3em;
}

.box{
position: relative;
background-color: rgba(255,255,255,.7);
padding: 40px;
border: 1px solid #dad1c3;
}

.center{text-align: center !important;}
.left{text-align: left !important;}
.right{text-align: right !important;}

.line{display: inline-block !important;}
.inline{display: inline !important;}
.inline> *{display: inline !important;}

.lh1{line-height: 1 !important;}

.flex{display: flex;}
.flex> *{flex-grow: 1;}
.flex.center{justify-content: center !important;}
.flex.left{justify-content: flex-start !important;}
.flex.right{justify-content: flex-end !important;}
.flex.top{align-items: flex-start !important;}
.flex.middle{align-items: center !important;}
.flex.bottom{align-items: flex-end !important;}
.flex.wrap{flex-wrap: wrap !important;}
.flex.center> *, .flex.left> *, .flex.right> *{flex-grow: auto;}

.flex> .col{flex-basis: 100%;}
.flex> .col2{flex-basis: 200%;}
.flex> .col3{flex-basis: 300%;}
.flex> .col4{flex-basis: 400%;}
.flex> .col5{flex-basis: 500%;}
.flex> .col6{flex-basis: 600%;}

.flex[data-col]{flex-wrap: wrap;}
.flex[data-col="2"]> *{width: 50%; flex-grow: 0; flex-basis: 50%;}

.notes li{
padding-left: 1em;
font-size: .75rem;
letter-spacing: normal;
text-indent: -1em;
}

.contents{
overflow: hidden;
position: relative;
width: 100%;
}

.h1-box{
position: relative;
display: flex;/*
background: url(../images/wave.svg) no-repeat;
background-position: center;
background-size: contain;*/
min-height: 100vh;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1;
}

.h1-box> *{
position: relative;
z-index: 2;
}

.h1-box + *{
position: relative;
z-index: 2;
}

.h1-box h1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
}

.h1-box h1 .line{
display: inline-block;
line-height: 1.2;
}

.h1-box h1 .line .fs160{
line-height: .6;
}

.h1-box h1> .inner{
}

.h1-box .mark{
position: relative;
width: 100px;
}

header{
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
/*background-color: #f5f3f2;*/
padding: 10px;
align-items: center;
z-index: 1000;
transition: transform .2s ease-in;
}

.logo{
max-width: 238px;
width: 100%;
}

.logo> a{
display: block;
}

nav{
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
/*background-color: rgba(255, 255, 255, .7);*/
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 10px;
align-items: center;
z-index: 1000;
transform: translateY(-100%);
opacity: 0;
transition: .2s ease-in;
}

[data-scroll] nav{transform: translateY(0%); opacity: 1; transition: .8s ease-out;}
[data-scroll="top"] nav{transform: translateY(-100%); opacity: 0; transition: .2s ease-out;}

section nav,
[data-scroll] section nav{
position: relative;
top: auto;
left: auto;
right: auto;
background-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: translateY(0%);
opacity: 1;
justify-content: center;
}

header ul,
nav ul{
display: flex;
padding: 0 20px;
align-items: center;
}

header li,
nav li{
padding: 10px;
text-align: center;
line-height: 1.1;
}

header li:nth-child(1),
nav li:nth-child(1){
border-right: 1px solid;
margin-right: 10px;
padding-right: 20px;
}

header li> a,
nav li> a{
text-decoration: none;
}

header li> span,
nav li> span{
color: #999;
}

footer{
position: relative;
background-color: #201b17;
color: #ffffff;
z-index: 1000;
}

footer a{
position: relative;
display: inline-block;
padding: 20px 10px;
color: #ffffff;
text-decoration: none;
}

footer .logo{
max-width: 320px;
}

footer .logo g> *{
fill: #ffffff;
}

/*color: #ede5da; rgba(237, 229, 218, 1);*/
/*color: #f5f3f2; rgba(245, 243, 242, 1);*/
section{
position: relative;
display: flex;
background-image: linear-gradient(to bottom, rgba(245, 243, 242, 1) 0, white 100%);
min-height: 100vh;
align-items: center;
}

section> .inner{
padding-left: 10px;
padding-right: 10px;
}

h1{
font-size: 3.625rem;
text-align: center;
line-height: 1.2;
}

h2{
font-size: 3.625rem;
text-align: center;
line-height: 1.2;
}

h3{
margin-bottom: 40px;
color: #a08862;
font-size: 2.5rem;
text-align: center;
line-height: 1.2;
}

h4{
margin-bottom: 30px;
color: #a08862;
font-size: 1.875rem;
text-align: center;
line-height: 1.2;
}

.inner{
position: relative;
max-width: 1400px;
width: 100%;
margin-right: auto;
margin-left: auto;
}

.inner.narrow{
max-width: 1000px;
}

.inner.short{
max-width: 800px;
}

.inner.full{
max-width: none;
padding-left: 0;
padding-right: 0;
}

.toTop{
padding: 5px 0;
text-align: right;
}

.toTop> a{
display: inline-block;
background-color: rgba(32,27,23, .4);
padding: 5px 10px;
color: white;
text-decoration: none;
line-height: 1;
letter-spacing: 0;
}

.toTop> a::after{
content: "";
position: relative;
display: inline-block;
top: .15em;
left: 0;
width: .5em;
height: .5em;
margin-left: .5em;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
transform: rotate(-45deg);
transition: .2s ease-out;
}

.toTop> a:hover::after{
top: 0em;
}




.circle{
position: relative;
display: flex;
min-height: 300px;
margin: auto;
padding: 20px;
flex-direction: column;
justify-content: center;
}

.circle> *{
position: relative;
font-weight: bold;
text-shadow: 0 0 1px #ffffff;
z-index: 1;
}

.circle::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
display: flex;
background-color: #dad1c3;
background-size: contain;
width: 1em;
height: 1em;
margin: 0 auto;
padding: .2em;
border-radius: 100%;
color: #f5f3f2;
font-size: 12.5rem;
text-align: center;
line-height: 1;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
transition: .2s ease-out;
opacity: .4;
z-index: 0;
}

div.circleLink .circle *,
div.circleLink .circle{
color: #999;
text-decoration: none;
}

div.circleLink .circle::before{
background-color: #dddddd;
}

.circle.fs100::before{
width: 2em;
height: 2em;
padding: .4em;
font-size: 6.25rem;
}

.circle::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
display: flex;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 1em;
height: 1em;
margin: 0 auto;
padding: .2em;
border-radius: 100%;
color: #f5f3f2;
font-size: 12.5rem;
text-align: center;
line-height: 1;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
z-index: 0;
}

.circle.history::after{background-image: url(../images/icon-history.svg);}
.circle.trivia::after{background-image: url(../images/icon-trivia.svg);}
.circle.voice::after{background-image: url(../images/icon-voice.svg);}

.title-box.circle{
padding-top: 100px;
}

.title-box.circle::before{
background-color: #a08862;
}

.title-box.circle::before,
.title-box.circle::after{
top: 25%;
transform: translate(-50%, -50%) scale(.5);
}

.circleLink{
position: relative;
display: block;
text-decoration: none;
transition: .2s ease-out;
}

.circleLink h3{transition: .2s ease-out;}
.circleLink .kikagaku::before{opacity: 0;}

a.circleLink::before,
a.circleLink::after{
content: "";
position: absolute;
bottom: calc(15% + 10px);
left: 50%;
width: 2em;
height: 2em;
border-right: 1px solid #a08862;
border-bottom: 1px solid #a08862;
transform: translateX(-50%) rotate(20deg) skew(-45deg) scaleX(1.5);
transition: .2s ease-out;
z-index: 10;
}

a.circleLink::after{bottom: calc(15%);}

a.circleLink:hover{opacity: 1; transform: scale(1.2); transition: 3s ease-out;}
a.circleLink:hover h3{transform: scale(1.05); transition: 3s ease-out;}
a.circleLink:hover .circle::before{background-color: #ffffff; opacity: 1; transition: 2s ease-out;}
/*color: #a08862; rgba(160, 136, 98, 1);*/
/*color: #dad1c3; rgba(218, 209, 195, 1);*/
/*color: #ede5da; rgba(237, 229, 218, 1);*/

a.circleLink:hover::before{bottom: calc(15%); opacity: .4; transition: .4s linear 1s;}
a.circleLink:hover::after{bottom: calc(15% - 8px); opacity: .4; transition: .4s linear 1s;}


.run .circleLink .kikagaku::before{opacity: 0; animation: none; transition: .2s ease-out;}
.run a.circleLink:hover .kikagaku::before{opacity: 1; animation: kikagaku 48s linear infinite; transition: 4s ease-out;}

/* h1 logo
--------------------------------------------------------------------- */

.top-subtitle,
.top-text{
position: relative;
display: block;
transition: 3s ease-out 2.8s;
}

.top-subtitle{
transform: translateY(50%) scale(.9);
opacity: 0;
}

.h1-box h1 .line{
opacity: 0;
color: #a08862;
}
.h1-box h1 .line:nth-child(1){transition: opacity 3s ease-out, color 3s ease-out;}
.h1-box h1 .line:nth-child(2){transition: opacity 3s ease-out .9s, color 3s ease-out .9s;}
.h1-box h1 .line:nth-child(3){transition: opacity 3s ease-out 1.7s, color 3s ease-out 1.7s;}

.run .h1-box h1 .line{opacity: 1; color: #201b17;}

.run .top-subtitle{
transform: translateY(0%) scale(1);
opacity: 1;
}

.top-text{
transform: translateY(-50%) scale(.9);
opacity: 0;
}

.run .top-text{
transform: translateY(0%) scale(1);
opacity: 1;
}


/* .kikagaku
--------------------------------------------------------------------- */

.kikagaku{
position: relative;
display: flex;
max-width: 800px;
margin: 0 auto;
flex-direction: column;
justify-content: center;
align-items: center;
}

.kikagaku svg{
max-width: 520px;
}

.kikagaku::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
background: url("../images/kikagaku.svg") center no-repeat;
width: 110%;
height: 110%;
background-size: contain;
transform: translate(-50%, -50%);
transition: 3s ease-out;
z-index: -1;
}

.kikagaku::before{opacity: 0; transform: translate(-50%, -50%); animation: kikagaku 48s linear infinite;}
.run .kikagaku::before{opacity: 1; transform: translate(-50%, -50%);}

@keyframes kikagaku {
  0% {transform: translate(-50%, -50%) rotate(0deg);}
  100% {transform: translate(-50%, -50%) rotate(360deg);}
}


/* .h1-box .kikagaku
--------------------------------------------------------------------- */

.h1-box .kikagaku::before{
width: 800px;
height: 800px;
transition: 3s ease-out 3s;
}


/* loader
------------------------------------------------------------------ */

.loader{
position:fixed;
display:block;
top:0;
left:0;
right:0;
bottom:0;
background: #ede5da;
opacity:1;
z-index:100000;
}

@keyframes loader{
0%{transform: scaley(1); }
50%{transform: scaley(0.4);}
100%{transform: scaley(1);}
}

.loader .bar > div{
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
animation-fill-mode: both;
display: inline-block;
animation: loader 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}

.loader .bar > div:nth-child(2), .loader .bar > div:nth-child(4){animation-delay: -0.4s !important;}
.loader .bar > div:nth-child(1), .loader .bar > div:nth-child(5){animation-delay: -0.2s !important;}
.loader .bar > div:nth-child(1){background-color: #a08862;}
.loader .bar > div:nth-child(2){background-color: #a08862;}
.loader .bar > div:nth-child(3){background-color: #a08862;}
.loader .bar > div:nth-child(4){background-color: #a08862;}
.loader .bar > div:nth-child(5){background-color: #a08862;}

.loader .bar{
position:fixed;
top: 50%;
left: 50%;
opacity:1;
z-index:2;
transform: translate(-50%, -50%);
}

.run .loader{
animation: loader-outro 1s forwards;
}

.run .bar{
display: none;
}

@keyframes loader-outro{
0%{opacity: 1;}
100%{opacity: 0; display: none; z-index: -1;}
}




@media screen and (max-width: 1024px){

header{
position: relative;
background-color: #f5f3f2;
}


}

@media screen and (max-width: 640px){

.sp-fs10{font-size:.625rem !important; letter-spacing: normal;}
.sp-fs12{font-size:.75rem !important; letter-spacing: normal;}
.sp-fs14{font-size:.875rem !important; letter-spacing: normal;}
.sp-fs16{font-size:1rem !important;}
.sp-fs20{font-size:1.25rem !important;}
.sp-fs30{font-size:1.875rem !important;}
.sp-fs40{font-size:2.5rem !important;}
.sp-fs50{font-size:3.125rem !important;}
.sp-fs60{font-size:3.625rem !important;}
.sp-fs80{font-size:5rem !important;}
.sp-fs100{font-size:6.25rem !important;}
.sp-fs120{font-size:7.5rem !important;}
.sp-fs140{font-size:8.75rem !important;}
.sp-fs160{font-size:10rem !important;}

.sp-mb0{margin-bottom: 0 !important;}
.sp-mb5{margin-bottom: 5px !important;}
.sp-mb10{margin-bottom: 10px !important;}
.sp-mb20{margin-bottom: 20px !important;}
.sp-mb30{margin-bottom: 30px !important;}
.sp-mb40{margin-bottom: 40px !important;}
.sp-mb50{margin-bottom: 50px !important;}
.sp-mb60{margin-bottom: 60px !important;}
.sp-mb70{margin-bottom: 70px !important;}
.sp-mb80{margin-bottom: 80px !important;}
.sp-mb90{margin-bottom: 90px !important;}
.sp-mb100{margin-bottom: 100px !important;}

.sp-mt0{margin-top: 0 !important;}
.sp-mt5{margin-top: 5px !important;}
.sp-mt10{margin-top: 10px !important;}
.sp-mt20{margin-top: 20px !important;}
.sp-mt30{margin-top: 30px !important;}
.sp-mt40{margin-top: 40px !important;}
.sp-mt50{margin-top: 50px !important;}
.sp-mt60{margin-top: 60px !important;}
.sp-mt70{margin-top: 70px !important;}
.sp-mt80{margin-top: 80px !important;}
.sp-mt90{margin-top: 90px !important;}
.sp-mt100{margin-top: 100px !important;}

h1{
font-size: 3.125rem;
}

h2{
font-size: 3.125rem;
}

h3{
margin-bottom: 20px;
font-size: 1.75rem;
}

header{
justify-content: center;
}

.line{display: inline;}

.box{padding: 20px;}

.sp-flex-wrap{flex-wrap: wrap !important;}

.sp-center{text-align: center !important;}

}




























/* .heading-box
--------------------------------------------------------------------- */

.title-box{
display: flex;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
}

.heading-box{
position: relative;
display: flex;
min-height: 17.5rem;
margin: 20px auto;
text-align: center;
flex-direction: column;
justify-content: center;
z-index: 1;
}

.heading-box::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
background-image: linear-gradient(to bottom, #a08862, #dad1c3);
width: auto;
color: #dad1c3;
font-size: 17.5rem;
text-shadow: -2px -2px 1px rgba(255, 255, 255, .2);
line-height: 1;
word-break: keep-all;
transform: translate(-50%, -50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
z-index: 0;
opacity: .2;
}

#history .heading-box::before{content: "history";}
#trivia .heading-box::before{content: "trivia";}
#voice .heading-box::before{content: "voice";}

.heading-box> *{
position: relative;
text-shadow: 0 0 4px white;
line-height: 1.4;
z-index: 1;
}

.heading-box p{
color: #a08862;
text-align: center;
}


#history .content{
margin: 100px 0;
}

.map{
position: relative;
line-height: 1.4;
}

.map .year{
display: block;
width: 100%;
color: #a08862;
font-size: 12.5rem;
text-align: center;
line-height: 1;
z-index: 0;
transition: 2s;
opacity: .2;
}

.map .year::after{
content: "";
position: absolute;
top: 1em;
left: 50%;
bottom: 0;
display: block;
background-color: #a08862;
width: 5px;
color: #a08862;
font-size: inherit;
transform: translateX(-50%);
text-align: center;
z-index: 0;
transition: 2s;
opacity: .7;
}

.map .inner{
position: relative;
display: flex;
align-items: center;
flex-direction: column;
}

.map .inner dl{
position: relative;
display: flex;
min-height: calc(200px + 2em);
width: 100%;
max-width: 1400px;
padding: 20px;
color: #a08862;
text-align: right;
letter-spacing: normal;
flex-direction: column;
justify-content: center;
align-items: flex-end;
z-index: 1;
}

.map .inner dl> *{
max-width: 50%;
width: 100%;
padding-left: 5px;
flex-basis: 100%;
order: 1;
}

.map .inner dl dd{
order: 4;
}

.map .inner dl dd figure{
position: absolute;
top: 0;
left: calc(100% + 20px);
display: block;
width: 100%;
max-width: 200px;
transform: translateY(-50%);
}

.map .inner dl strong{
font-weight: normal;
}

.map .inner dl.point strong,
.map .inner dl.feature strong{
font-weight: bold;
}

.map .inner dl::after{
content: "";
position: relative;
display: block;
background-color: #a08862;
height: 1px;
width: 50%;
margin-top: 5px;
order: 2;
z-index: 0;
}

.map .inner dl::before{
content: "";
position: relative;
left: auto;
right: 50%;
display: block;
background-color: white;
height: 10px;
width: 10px;
border: 1px solid #a08862;
border-radius: 100%;
transform: translate(50%, calc(-50% - 1px));
order: 3;
z-index: 1;
}

.map .inner dl.point{
color: black;
text-align: left;
align-items: flex-start;
}

.map .inner dl.point::after{
background-color: black;
}

.map .inner dl.point::before{
left: 50%;
right: auto;
border: 1px solid black;
transform: translate(-50%, calc(-50% - 1px));
}

.map .inner dl.feature{
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
align-items: center;
}

.map .inner dl.feature + dl.feature{
padding-top: 0;
}

.map .inner dl.feature> *{
max-width: 80vw;
}

.map .inner dl.feature dd{
}

.map .inner dl.feature::after{
width: 60%;
margin-top: 0;
}

.map .inner dl.feature::before{
left: auto;
right: auto;
margin-bottom: 5px;
transform: translateY(calc(-50% - 1px));
}

.map .inner dl dt{
font-size: 1rem;
}

.map .inner dl.feature dt{
padding-bottom: 10px;
font-size: 1.25rem;
}

.map .inner dl.feature.point dt{
font-size: 1.875rem;
}

.map .inner dl .product{
font-size: 1.625rem;
}

.map .inner dl dd{
display: flex;
padding: 0 0 0 20px;
font-size: 1.625rem;
text-align: left;
justify-content: flex-end;
}

.map .inner dl.point dd{
padding: 0 20px 0 0;
text-align: left;
justify-content: flex-start;
}

.map .inner dl.feature dd{
padding: 0 10px;
text-align: left;
justify-content: center;
}

.map .inner dl dt,
.map .inner dl dd{
transform: translateY(50%);
transition: .4s;
opacity: 0;
}

.map .inner dl.show dt,
.map .inner dl.show dd{
transform: translateY(0);
transition: .7s .2s;
opacity: 1;
}

.map .inner dl dd{
transform: translateY(-50%);
}

.map .inner dl.show dd{
transform: translateY(0);
}

.map .inner dl dd figure{
}

.map .inner dl.show dd figure{
}

.map .inner dl::before{
transition: .4s;
opacity: 0;
}

.map .inner dl.show::before{
opacity: 1;
}

.map .inner dl::after{
left: auto;
right: 50%;
width: 0%;
transition: .4s;
}

.map .inner dl.show::after{
left: auto;
right: 0;
width: 50%;
transition: .4s;
}

.map .inner dl.point::after{
left: 50%;
right: auto;
}

.map .inner dl.point.show::after{
left: 0;
right: auto;
}

.map .inner dl.feature::after{
left: auto;
right: auto;
width: 0%;
}

.map .inner dl.feature.show::after{
left: auto;
right: auto;
width: 60%;
}



.map-nav{
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
background-image: linear-gradient(to left, rgba(0,0,0, 0) 0, rgba(0,0,0, .1) 20%, rgba(0,0,0, .1) 80%, rgba(0,0,0, 0));
height: calc(1.5em + 20px);
width: 100%;
z-index: 100;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}

[data-scroll] .map-nav{transform: translateY(0%); opacity: 1; transition: 1s;}
[data-scroll="top"] .map-nav{transform: translateY(100%); opacity: 0; transition: .4s;}

.map-nav ul{
position: absolute;
top: 0;
left: 50%;
display: flex;
margin: 0 auto;
color: black;
justify-content: center;
transition: .3s;
}

.map-nav ul li{
padding: 10px;
transform: translateX(calc(-50%));
}

.map-nav ul .current{
color: white;
}

.map-nav ul li a:hover,
.map-nav ul li a:active{
color: white;
opacity: 1;
}

[data-current] .map-nav ul{transform: translateX(calc(0%));}
[data-current="1"] .map-nav ul{transform: translateX(calc(0%));}
[data-current="2"] .map-nav ul{transform: translateX(calc(1/33 * -100%));}
[data-current="3"] .map-nav ul{transform: translateX(calc(2/33 * -100%));}
[data-current="4"] .map-nav ul{transform: translateX(calc(3/33 * -100%));}
[data-current="5"] .map-nav ul{transform: translateX(calc(4/33 * -100%));}
[data-current="6"] .map-nav ul{transform: translateX(calc(5/33 * -100%));}
[data-current="7"] .map-nav ul{transform: translateX(calc(6/33 * -100%));}
[data-current="8"] .map-nav ul{transform: translateX(calc(7/33 * -100%));}
[data-current="9"] .map-nav ul{transform: translateX(calc(8/33 * -100%));}
[data-current="10"] .map-nav ul{transform: translateX(calc(9/33 * -100%));}
[data-current="11"] .map-nav ul{transform: translateX(calc(10/33 * -100%));}
[data-current="12"] .map-nav ul{transform: translateX(calc(11/33 * -100%));}
[data-current="13"] .map-nav ul{transform: translateX(calc(12/33 * -100%));}
[data-current="14"] .map-nav ul{transform: translateX(calc(13/33 * -100%));}
[data-current="15"] .map-nav ul{transform: translateX(calc(14/33 * -100%));}
[data-current="16"] .map-nav ul{transform: translateX(calc(15/33 * -100%));}
[data-current="17"] .map-nav ul{transform: translateX(calc(16/33 * -100%));}
[data-current="18"] .map-nav ul{transform: translateX(calc(17/33 * -100%));}
[data-current="19"] .map-nav ul{transform: translateX(calc(18/33 * -100%));}
[data-current="20"] .map-nav ul{transform: translateX(calc(19/33 * -100%));}
[data-current="21"] .map-nav ul{transform: translateX(calc(20/33 * -100%));}
[data-current="22"] .map-nav ul{transform: translateX(calc(21/33 * -100%));}
[data-current="23"] .map-nav ul{transform: translateX(calc(22/33 * -100%));}
[data-current="24"] .map-nav ul{transform: translateX(calc(23/33 * -100%));}
[data-current="25"] .map-nav ul{transform: translateX(calc(24/33 * -100%));}
[data-current="26"] .map-nav ul{transform: translateX(calc(25/33 * -100%));}
[data-current="27"] .map-nav ul{transform: translateX(calc(26/33 * -100%));}
[data-current="28"] .map-nav ul{transform: translateX(calc(27/33 * -100%));}
[data-current="29"] .map-nav ul{transform: translateX(calc(28/33 * -100%));}
[data-current="30"] .map-nav ul{transform: translateX(calc(29/33 * -100%));}
[data-current="31"] .map-nav ul{transform: translateX(calc(30/33 * -100%));}
[data-current="32"] .map-nav ul{transform: translateX(calc(31/33 * -100%));}
[data-current="33"] .map-nav ul{transform: translateX(calc(32/33 * -100%));}
[data-current="34"] .map-nav ul{transform: translateX(calc(32/33 * -100%));}
[data-current="34"] .map-nav{transform: translateY(100%); opacity: 0; transition: 1s;}


.map.end .year{
padding: 20px 0;
font-size: 6.25rem;
opacity: 1;
}

.map.end .year::after{
display: none;
}










#trivia figure{
position: relative;
margin: 40px auto;
}

#trivia .content{
position: relative;
padding: 20px 0;
}

#trivia .content + .content{
padding-top: 0;
}

#trivia .content .pnl{
overflow: hidden;
position: relative;
margin: 10px;
border: 1px dashed #a08862;
border-color: #ffffff;
border-radius: 5px;
box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
transform: translateY(10%);
transition: .4s ease-out;
transition-delay: 0s;
opacity: 0;
}

#trivia .content.show .pnl{
border-color: #a08862;
transform: translateY(0);
transition: 1s ease-out;
opacity: 1;
}

#trivia .content .pnl> .inner{
padding: 30px 20px 20px;
}

#trivia .content.show .pnl:nth-of-type(1n){transition-delay: 0s;}
#trivia .content.show .pnl:nth-of-type(2n){transition-delay: .4s;}
#trivia .content.show .pnl:nth-of-type(3n){transition-delay: .8s;}
#trivia .content.show .pnl:nth-of-type(4n){transition-delay: 1.2s;}


#trivia [data-pnl]{
position: relative;
}

#trivia [data-pnl]> *{
position: relative;
z-index: 2;
}

#trivia .pnl[data-pnl]::before{
position: absolute;
top: 10px;
right: 20px;
color: #dad1c3;
font-size: 12.5rem;
line-height: 1;
opacity: .4;
z-index: 0;
}

#trivia .flex .pnl[data-pnl]::before{
top: 50%;
right: auto;
left: 50%;
font-size: 10rem;
transform: translate(-50%, -46%);
}

#trivia [data-pnl="1"]::before{content: "1";}
#trivia [data-pnl="2"]::before{content: "2";}
#trivia [data-pnl="3"]::before{content: "3";}
#trivia [data-pnl="4"]::before{content: "4";}
#trivia [data-pnl="5"]::before{content: "5";}
#trivia [data-pnl="6"]::before{content: "6";}
#trivia [data-pnl="7"]::before{content: "7";}
#trivia [data-pnl="8"]::before{content: "8";}
#trivia [data-pnl="9"]::before{content: "9";}
#trivia [data-pnl="10"]::before{content: "10";}
#trivia [data-pnl="11"]::before{content: "11";}
#trivia [data-pnl="12"]::before{content: "12";}
#trivia [data-pnl="13"]::before{content: "13";}
#trivia [data-pnl="14"]::before{content: "14";}
#trivia [data-pnl="15"]::before{content: "15";}
#trivia [data-pnl="16"]::before{content: "16";}
#trivia [data-pnl="17"]::before{content: "17";}
#trivia [data-pnl="18"]::before{content: "18";}
#trivia [data-pnl="19"]::before{content: "19";}
#trivia [data-pnl="20"]::before{content: "20";}
#trivia [data-pnl="21"]::before{content: "21";}
#trivia [data-pnl="22"]::before{content: "22";}
#trivia [data-pnl="23"]::before{content: "23";}
#trivia [data-pnl="24"]::before{content: "24";}
#trivia [data-pnl="25"]::before{content: "25";}
#trivia [data-pnl="26"]::before{content: "26";}
#trivia [data-pnl="27"]::before{content: "27";}
#trivia [data-pnl="28"]::before{content: "28";}
#trivia [data-pnl="29"]::before{content: "29";}
#trivia [data-pnl="30"]::before{content: "30";}
#trivia [data-pnl="31"]::before{content: "31";}
#trivia [data-pnl="32"]::before{content: "32";}
#trivia [data-pnl="33"]::before{content: "33";}
#trivia [data-pnl="34"]::before{content: "34";}
#trivia [data-pnl="35"]::before{content: "35";}



#voice{
background-image: linear-gradient(to bottom, rgba(245, 243, 242, 1) 0, rgba(245, 243, 242, 1) 100%);
}

.profile{
position: relative;
background-image: url(../images/icon-profile.svg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #cccccc;
width: 1.8em;
height: 1.8em;
margin: 10px;
border-radius: 100%;
flex-shrink: 0;
}

.right .profile{
background-image: url(../images/aterm.svg);
background-size: contain;
background-color: white !important;
width: 2em;
height: 2em;
}

.baloon{
position: relative;
display: flex;
background-color: white;
width: auto;
margin: 0 10px 30px;
padding: 20px;
border-radius: 20px;
box-shadow: 0 4px 4px 0 rgba(0,0,0,.1);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size: 1.125rem;
letter-spacing: 0;
opacity: 0;
transition: .4s;
transform: translateX(-40px);
z-index: 10;
}

.baloon> *{
position: relative;
z-index: 10;
}

.baloon::before,
.baloon::after{
content: "";
position: absolute;
top: 100%;
left: 10px;
margin-top: -1px;
border: 10px solid transparent;
border-top: 20px solid white;
border-bottom: none;
transform: translateX(50%) skew(-45deg);
transform-origin: center bottom;
z-index: 1;
}

.baloon::after{
left: 12px;
border-top: 20px solid black;
transform: translateX(50%) skew(-50deg);
opacity: .1;
z-index: -1;
}

.baloon.right{
background-color: #a08862;
margin: 20px 10px 100px;
color: white;
font-size: 1.5rem;
text-align: left !important;
transform: translateX(40px);
}

.baloon.right::before,
.baloon.right::after{
top: auto;
left: auto;
right: 50px;
bottom: 100%;
margin-top: auto;
margin-bottom: -1px;
border-top: none;
border-bottom: 20px solid #a08862;
}

.baloon.right::after{
display: none;
right: 48px;
border-bottom: 20px solid black;
transform: translateX(50%) skew(-40deg);
}

.baloon.show{
opacity: 1;
transition: 2s;
transform: translateX(0);
}

.baloon .text{
padding: 10px;
}

.baloon .text span{
display: inline-block;
opacity: 0;
transition: none;
}

.baloon.show .text span{
opacity: 1;
transition: 0s;
}

.graph{
position: relative;
display: inline-block;
min-width: 280px;
min-height: 280px;
}


.graph svg{
  display:inline-block;
  opacity: 0;
  transition: 2s;
}
.graph svg .type{
  fill:transparent;
  stroke-width:100;
  transition: .3s ease-out;
}

.show .graph svg{
opacity: 1;
}

.graph span{
position: absolute;
top: 50%;
left: 50%;
display: block;
line-height: 1.1;
text-align: left;
word-break: keep-all;
transition: .1s;
transition-delay: 0s;
opacity: 0;
}

.show .graph span{
opacity: 1;
transition: .5s;
transition-delay: .7s;
}

.graph span strong{
font-size:  80%;
font-weight: normal;
letter-spacing: 0;
}

.graph .textA1{
top: 70%;
left: 25%;
color: white;
}

.graph .textA2{
top: 30%;
left: 70%;
}

.graph svg .typeA1{stroke-dasharray:0 565; stroke:#a08862;}
.show .graph svg .typeA1{stroke-dasharray:487.595 565;}

.graph svg .typeA2{stroke-dasharray:0 565; stroke:#dad1c3;}
.show .graph svg .typeA2{stroke-dasharray:565 565;}

.graphtext{
opacity: 0;
transition: .4s;
transition-delay: 0s;
}

.show .graphtext{
opacity: 1;
transition: 1s;
transition-delay: .2s;
}



/* .good
--------------------------------------------------------------------- */

.h1-box h1{
position: relative;
}

.good{
position: absolute;
top: 50%;
left: 5%;
display: block;
height: 30vw;
width: 30vw;
transform: translate(-50%, -50%);
transition: 3s ease-out;
transform-origin: left bottom;
z-index: 0;
}

.good.right{
left: 95%;
transform-origin: right bottom;
}

.good::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/good.svg) center center no-repeat;
background-size: contain;
}

.good.right::before{
}

.good::before{transform: rotate(0deg); animation: good-left 16s ease-in-out infinite alternate;}
.good.right::before{transform: rotate(0deg); animation: good-right 16s ease-in-out infinite alternate;}

@keyframes good-left {
  0% {transform: rotate(20deg);}
  100% {transform: rotate(-20deg);}
}

@keyframes good-right {
  0% {transform: rotate(20deg);}
  100% {transform: rotate(-20deg);}
}

.good{transform: translate(-100%, -50%); opacity: 0; transition-delay: 0;}
.good.right{transform: translate(0%, -50%); opacity: 0; transition-delay: 0;}
.run .good{transform: translate(-50%, -50%); opacity: 1;}
.run .good.right{transform: translate(-50%, -50%); opacity: 1;}


/* .heart
--------------------------------------------------------------------- */

.h1-box h1{
position: relative;
}

.heart{
position: absolute;
top: 50%;
left: 5%;
display: block;
height: 30vw;
width: 30vw;
transform: translate(-50%, -50%);
transition: 3s ease-out;
transform-origin: left bottom;
z-index: 0;
}

.heart.right{
left: 95%;
transform-origin: right bottom;
}

.heart::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/heart.svg) center center no-repeat;
background-size: contain;
}

.heart.right::before{
}

.heart::before{transform: rotate(0deg); animation: heart-left 16s ease-in-out infinite alternate;}
.heart.right::before{transform: rotate(0deg); animation: heart-right 16s ease-in-out infinite alternate;}

@keyframes heart-left {
  0% {transform: rotate(20deg);}
  100% {transform: rotate(-20deg);}
}

@keyframes heart-right {
  0% {transform: rotate(20deg);}
  100% {transform: rotate(-20deg);}
}

.heart{transform: translate(-100%, -50%); opacity: 0; transition-delay: 0;}
.heart.right{transform: translate(0%, -50%); opacity: 0; transition-delay: 0;}
.run .heart{transform: translate(-50%, -50%); opacity: 1;}
.run .heart.right{transform: translate(-50%, -50%); opacity: 1;}


/* .wave
--------------------------------------------------------------------- */

.h1-box h1{
position: relative;
}

.wave{
position: absolute;
top: 50%;
left: 0%;
display: block;
height: 40vw;
width: 40vw;
transform: translate(-50%, -50%);
transition: 3s ease-out;
transform-origin: left bottom;
z-index: 0;
}

.wave.right{
left: 100%;
transform-origin: right bottom;
}

.wave::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/wave.svg) center center no-repeat;
background-size: contain;
}

.wave.right::before{
}

.wave::before{transform: rotate(0deg); animation: wave-left 48s linear infinite;}
.wave.right::before{transform: rotate(0deg); animation: wave-right 48s linear infinite;}

@keyframes wave-left {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes wave-right {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}

.wave{transform: translate(-100%, -50%); opacity: 0; transition-delay: 0;}
.wave.right{transform: translate(0%, -50%); opacity: 0; transition-delay: 0;}
.run .wave{transform: translate(-50%, -50%); opacity: 1;}
.run .wave.right{transform: translate(-50%, -50%); opacity: 1;}



/* .gear
--------------------------------------------------------------------- */

.gear{
position: fixed !important;
top: 100%;
left: 0%;
display: block;
height: max(30vw, 40vh);
max-height: 400px;
width: max(30vw, 40vh);
max-width: 400px;
transform: translate(-50%, -50%);
transition: 3s ease-in-out, opacity 1s ease-in-out, top 1s ease-out;
z-index: 0;
}

.gear.right{
left: 100%;
}

.gear.right.top{
top: 0;
}

.gear.title{
position: absolute !important;
top: 50%;
height: max(40vw, 50vh);
max-height: 500px;
width: max(40vw, 50vh);
max-width: 500px;
}

.gear.right.title{
}

.gear::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/gear.svg) center center no-repeat;
background-size: contain;
}

.gear::before{transform: rotate(0deg); animation: gear-left 48s linear infinite;}
.gear.right::before{transform: rotate(0deg); animation: gear-right 48s linear infinite;}

@keyframes gear-left {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}

@keyframes gear-right {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

[data-scroll] .gear{transform: translate(-50%, -50%); opacity: 1;}
[data-scroll] .gear.right{transform: translate(-50%, -50%); opacity: 1;}
[data-scroll="top"] .gear{transform: translate(-100%, -50%); opacity: 0; transition-delay: 0;}
[data-scroll="top"] .gear.right{transform: translate(0%, -50%); opacity: 0; transition-delay: 0;}

[data-scroll] .gear.title{top:50%; transform: translate(-100%, -50%); opacity: 0; transition-delay: 0;}
[data-scroll] .gear.right.title{top:50%; transform: translate(0%, -50%); opacity: 0; transition-delay: 0;}
.run[data-scroll] .gear.title{top:50%; transform: translate(-50%, -50%); opacity: 1;}
.run[data-scroll] .gear.right.title{top:50%; transform: translate(-50%, -50%); opacity: 1;}


[data-current] .gear{top:100%;}
[data-current="1"] .gear{top:calc(100% - (1/33 * 150%));}
[data-current="2"] .gear{top:calc(100% - (2/33 * 150%));}
[data-current="3"] .gear{top:calc(100% - (3/33 * 150%));}
[data-current="4"] .gear{top:calc(100% - (4/33 * 150%));}
[data-current="5"] .gear{top:calc(100% - (5/33 * 150%));}
[data-current="6"] .gear{top:calc(100% - (6/33 * 150%));}
[data-current="7"] .gear{top:calc(100% - (7/33 * 150%));}
[data-current="8"] .gear{top:calc(100% - (8/33 * 150%));}
[data-current="9"] .gear{top:calc(100% - (9/33 * 150%));}
[data-current="10"] .gear{top:calc(100% - (10/33 * 150%));}
[data-current="11"] .gear{top:calc(100% - (11/33 * 150%));}
[data-current="12"] .gear{top:calc(100% - (12/33 * 150%));}
[data-current="13"] .gear{top:calc(100% - (13/33 * 150%));}
[data-current="14"] .gear{top:calc(100% - (14/33 * 150%));}
[data-current="15"] .gear{top:calc(100% - (15/33 * 150%));}
[data-current="16"] .gear{top:calc(100% - (16/33 * 150%));}
[data-current="17"] .gear{top:calc(100% - (17/33 * 150%));}
[data-current="18"] .gear{top:calc(100% - (18/33 * 150%));}
[data-current="19"] .gear{top:calc(100% - (19/33 * 150%));}
[data-current="20"] .gear{top:calc(100% - (20/33 * 150%));}
[data-current="21"] .gear{top:calc(100% - (21/33 * 150%));}
[data-current="22"] .gear{top:calc(100% - (22/33 * 150%));}
[data-current="23"] .gear{top:calc(100% - (23/33 * 150%));}
[data-current="24"] .gear{top:calc(100% - (24/33 * 150%));}
[data-current="25"] .gear{top:calc(100% - (25/33 * 150%));}
[data-current="26"] .gear{top:calc(100% - (26/33 * 150%));}
[data-current="27"] .gear{top:calc(100% - (27/33 * 150%));}
[data-current="28"] .gear{top:calc(100% - (29/33 * 150%));}
[data-current="29"] .gear{top:calc(100% - (29/33 * 150%));}
[data-current="30"] .gear{top:calc(100% - (30/33 * 150%));}
[data-current="31"] .gear{top:calc(100% - (31/33 * 150%));}
[data-current="32"] .gear{top:calc(100% - (32/33 * 150%));}
[data-current="33"] .gear{top:calc(100% - (33/33 * 150%));}
[data-current="34"] .gear{top:calc(-150%);}

@media print{
.map-nav, [data-current] .gear{display: none;}
}







@media screen and (max-width: 1024px){


}

@media screen and (max-width: 640px){

.sp-none{
display: none !important;
}

.flex[data-col]> *{width: 100%; flex-grow: 1; flex-basis: 100%;}


header{
flex-wrap: wrap;
padding: 10px 0;
}

nav{
padding: 2px 0;
}

section nav{
padding: 10px 0;
}

header ul, nav ul{
width: 100%;
min-height: 2em;
padding: 0;
justify-content: center;
}

header li, nav li{
padding: 2px 5px;
font-size: .75rem;
}

.logo{
padding: 10px;
}

nav .logo{
display: none;
}

.h1-box{
padding-bottom: 100px !important;
}

.circleLink .fs20{
font-size: 1rem !important;
}

.title-box{
height: auto;
padding: 10px;
}

.title-box .fs20{
font-size: 1rem !important;
}

.title-box.circle{
padding-top: 180px;
}

.title-box.circle> *{
font-weight: normal;
}

.title-box.circle::before, .title-box.circle::after{
top: 5%;
transform: translateX(-50%) scale(.5);
transform-origin: top center;
z-index: 2;
}

.heading-box{
min-height: auto;
margin-top: 0;
margin-bottom: 40px;
}

.heading-box h2{
font-size: 2.8rem;
font-weight: bold;
}

.heading-box::before{
font-size: 7.5rem;
}

[data-scroll] .gear.title{top: 25%;}
[data-scroll] .gear.right.title{top: 25%;}

.run[data-scroll] .gear.title{top: 25%;}
.run[data-scroll] .gear.right.title{top: 25%;}

.map-nav{
height: calc(1.5em + 4px);
}

.map-nav ul li{
padding-top: 2px;
padding-bottom: 2px;
}

.map .year,
.map.end .year{
font-size: 4.5rem;
}

.map .inner dl{
padding-left: 10px;
padding-right: 10px;
line-height: 1.4;
}

.map .inner dl dd,
.map .inner dl .product{
font-size: 1rem;
}

.map .inner dl.feature> *{
max-width: 100vw;
}

.map .inner dl.feature dd{
padding: 0;
font-size: 1.625rem;
text-align: center;
}

#trivia .content{
padding: 0;
}

#trivia .content .pnl{
margin: 0 5px 20px;
}

#trivia .content .pnl> .inner{
padding-bottom: 40px;
}

#trivia .content .pnl h4{
margin-top: 20px;
margin-bottom: 20px !important;
color: black;
font-size: 1.5rem !important;
text-align: center !important;
}

#trivia .content .pnl p,
#trivia .content .pnl .fs20{
font-size: 1rem !important;
}

#trivia .content .pnl h4.fs20{
font-size: 1.25rem !important;
}

#trivia .content .pnl[data-pnl]::before{
top: 10px;
right: auto;
left: 50%;
font-size: 10rem;
transform: translateX(-50%);
}

#trivia .content .flex{
flex-wrap: wrap;
}

.profile{
margin-left: 10px;
margin-right: 10px;
}

.baloon,
.baloon.right{
margin-left: 0;
margin-right: 0;
padding: 10px;
border-radius: 10px;
}

.baloon.show{
transition: 1s;
}

}