@charset "utf-8";
body{background:url("../lib/top-bg.png") center center no-repeat #3f3c3c; background-size:contain;}

#wrapper{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding-top:20px; height:100vh;}
h1{width:25%; max-width:130px; margin:0 auto; margin-bottom:20px;}
@media only screen and (min-width:340px) {
h1{width:25%; max-width:148px;}
}

nav{font-family: 'Kanit', sans-serif; font-weight:300; font-size:3.0rem;}
nav.type2 ul{}
nav.type2 ul li{position:relative; width:60%; margin:12px auto;}
nav.type2 a,nav.type2 .coming{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
nav.type2 .coming{color:#999;}
nav.type2 .bg{position:absolute;}
nav.type2 span{position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index:10;}

@media only screen and (min-width:340px) {
nav.type2 ul li{margin:16px auto;}
}
@media only screen and (min-width:700px) {
nav.type2 ul{display:flex; gap:16px; margin:0 auto; padding:0 20px; max-width:1000px;}
nav.type2 ul li{position:relative; width:calc((100% / 3) - 16px);}
}

@media (orientation: landscape) {
  body{grid-auto-flow:column;}
}