/* BODY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

html
{
-webkit-text-size-adjust: 100%;
}

body
{
background-color: #FFF;
color: #666;
font-family: 'M PLUS 1', sans-serif;
font-size: max(1.4vw, 2.2vh);
line-height: 180%;
margin: 0 auto;
width: min(86%, 80vh);

overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}

body::-webkit-scrollbar
{
display: none;
}

/* LINK --------------------------------------------------------------------- */

a:link,
a:visited
{
color: #999;
text-decoration: none;
}

a:hover
{
opacity: 0.4;
}

a:active
{
opacity: 0.0;
}

/* COVER :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#cover
{
height: 100vh;
height: 100svh;
position: relative;
}

#logo
{
width: 100%;
}

#renew
{
bottom: 2vh;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: max(32%, 24vh);
}

/* CONTENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.contents
{
padding-top: 1vh;
}

h1,
div.show_menu
{
font-size: min(8vw, 7.8vh);
font-variation-settings: 'wght' 900;
margin: min(5.5vw, 5.5vh) 0;
}

h2
{
font-size: min(5vw, 5vh);
font-variation-settings: 'wght' 900;
margin: min(12vw, 14vh) 0 min(4.5vw, 3.5vh) 0;
}

p.EN
{
font-variation-settings: 'wght' 480;
}

p.JA
{
font-size: 92%;
font-variation-settings: 'wght' 420;
}

sup
{
line-height: 0;
}

/* ABOUT :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#about
{
margin-top: max(14vw, 16vh);
}

p.select_font
{
font-variation-settings: 'wght' 700;
margin-top: min(1.6vw, 2.5vh);
}

span.change_font1,
span.change_font2,
span.cl50,
span.cl60
{
border-bottom: max(0.7vw, 1.1vh) solid #CCC;
margin-left: 0.4rem;
}

/* M PLUS FONTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.sample
{
display: flex;
flex-direction: row;
font-size: min(12.5vw, 11.5vh);
font-variation-settings: 'wght' 700;
line-height: 0%;
margin-top: min(-2.5vw, -2vh);
}

span.square
{
color: #CCC;
font-family: 'symbols';
font-variation-settings: 'wght' 100;
}

.mplus1
{
font-family: 'M PLUS 1';
}

.mplus2
{
font-family: 'M PLUS 2';
}

.mplus1code
{
font-family: 'M PLUS 1 Code';
}

.mpluscodelatin
{
font-family: 'M PLUS Code Latin';
}

span.mpluscodelatin50
{
font-family: 'M PLUS Code Latin';
font-variation-settings: 'wght' 700, 'wdth' 100;
}

span.mpluscodelatin60
{
font-family: 'M PLUS Code Latin';
font-variation-settings: 'wght' 700, 'wdth' 125;
}

p.sample2
{
margin-left: min(4vw, 4vh);
}

div.select_weight
{
font-family: 'symbols';
font-size: min(4vw, 4vh);
margin-top: min(-1.6vw, -2.2vh);
}

div.select_weight a:link,
div.select_weight a:visited
{
color: #888;
}

span.selected_weight
{
color: #666;
font-family: 'M PLUS 1', sans-serif;
font-size: min(3vw, 2.2vh);
font-variation-settings: 'wght' 500;
margin-left: min(2vw, 2vh);
vertical-align: 12%;
}

div.similar_sample
{
display: flex;
flex-direction: row;
font-family: 'M PLUS 1 Code';
justify-content: space-between;
margin-top: min(4vw, 5vh);
text-align: center;
}

span.sglyph
{
font-size: min(7vw, 7vh);
font-variation-settings: 'wght' 600;
}

span.sname
{
font-size: max(1.0vw, 1.0vh);
font-variation-settings: 'wght' 400;
}

div.chicks,
div.paoyes,
div.warnniewow
{
display: flex;
justify-content: flex-end;
}

div.chicks
{
margin: max(2vw, 3vh) 0 min(-4vw, -4vh) 0;
}

div.chicks img
{
width: max(24vw, 30vh);
}

div.paoyes
{
margin: min(2vw, 2vh) 0 min(-5vw, -2vh) 0;
}

div.paoyes img
{
width: max(32vw, 40vh);
}

pre.terminal
{
background-color: #666;
border-radius: max(0.4vw, 0.7vh);
color: #FFF;
font-family: 'M PLUS Code Latin', 'M PLUS 1 Code';
font-size: min(2.3vw, 2.1vh);
font-variation-settings: 'wght' 400, 'wdth' 100;
line-height: 200%;
margin: min(12vw, 14vh) 0 min(4.5vw, 3.5vh) 0;
padding: min(3vw, 3vh) 0 min(2vw, 2vh) min(4vw, 4vh);
}

p.exj
{
font-size: max(1.1vw, 1.4vh);
margin-top: max(-5vw, -2vh);
}

/* VARIABLE FONTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.variable
{
font-size: min(16vw, 16vh);
margin: max(5vw, 5vh) 0 max(6.5vw, 5.5vh) 0;
}

div.from100
{
animation: weight100 2s infinite alternate;
}

div.from900
{
animation: weight900 2s infinite alternate;
}

div.from700100
{
animation: wghtwdth 6s infinite alternate;
}

@keyframes weight100
{
0%
{
color: #CCC;
font-variation-settings: 'wght' 100;
}
100%
{
color: #999;
font-variation-settings: 'wght' 900;
}
}

@keyframes weight900
{
0%
{
color: #999;
font-variation-settings: 'wght' 900;
}
100%
{
color: #CCC;
font-variation-settings: 'wght' 100;
}
}

@keyframes wghtwdth
{
0%
{
color: #999;
font-variation-settings: 'wght' 700, 'wdth' 100;
}
14%
{
color: #CCC;
font-variation-settings: 'wght' 100, 'wdth' 100;
}
29%
{
color: #999;
font-variation-settings: 'wght' 100, 'wdth' 125;
}
43%
{
color: #CCC;
font-variation-settings: 'wght' 700, 'wdth' 125;
}
57%
{
color: #999;
font-variation-settings: 'wght' 700, 'wdth' 100;
}
71%
{
color: #CCC;
font-variation-settings: 'wght' 100, 'wdth' 100;
}
86%
{
color: #999;
font-variation-settings: 'wght' 700, 'wdth' 125;
}
100%
{
color: #CCC;
font-variation-settings: 'wght' 100, 'wdth' 125;
}
}

div.warnniewow
{
margin: max(6vw, 7vh) 0 min(-4vw, -4vh) 0;
}

div.warnniewow img
{
width: max(24vw, 30vh);
}

/* USE FONT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

p.twoways
{
font-size: min(5vw, 5vh);
font-variation-settings: 'wght' 800;
line-height: 240%;
margin-top: min(4vw, 4vh);
}

p.twoways,
p.urls
{
margin-left: min(22vw, 22vh);
}

/* LINKS :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

h1 + p.urls
{
margin-top: max(6vw, 6vh);
}

p.urls
{
font-variation-settings: 'wght' 400;
line-height: 140%;
}

p.urls::first-line
{
font-variation-settings: 'wght' 600;
}

p.urls a
{
font-size: max(1.2vw, 2.0vh);
}

div.chicksit
{
margin-top: max(14vw, 14vh);
text-align: center;
}

div.chicksit img
{
width: max(8vw, 10vh);
}

/* FOOTER ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#footer
{
font-size: max(0.8vw, 1.2vh);
font-variation-settings: 'wght' 700;
letter-spacing: 0.4vw;
margin: min(24vw, 24vh) 0 min(6vw, 6vh) 0;
text-align: center;
width: 100%;
}

#footer_logo
{
margin-bottom: -2.2vh;
width: 32%;
}

/* MENU ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.show_menu
{
line-height: 36%;
margin: max(16vw, 18vh) 0 max(14vw, 16vh) 0;
text-align: center;
width: 100%;
}

#menu a:link,
#menu a:visited
{
color: #FFF;
}

#menu
{
bottom: 20%;
font-variation-settings: 'wght' 700;
left: 50%;
letter-spacing: 0.2vw;
position: fixed;
transform: translateX(-50%);
}

#menu ul
{
background-color: #666;
border-radius: max(0.8vw, 1.4vh);
line-height: 240%;
list-style-type: none;
padding: 2.2vh 0 0.4vh 0;
width: max(22vw, 28vh);
}

#menu ul li
{
margin-left: max(5vw, 5vh);
}