@font-face {
    font-family: 'km-r';
    src: url('./font/Kuma-Regular.otf') format('woff');
}

*{
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0.1em;
}

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #fff;
    font-family: 'ROBOTO';
    color: #000;
    overflow: hidden;
    user-select: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none; 
    font-size: min( 2.8vw, calc( 2.8vh * (1 / 1.6)) );
}

.container {
    /* 横1:縦1.5のアスペクト比 */
    aspect-ratio: 1 / 1.6;
    /* 横と縦のどちらが大きくても、ウィンドウに収まるように調整 */
    width: min(100vw, calc(100vh * (1 / 1.6)));
    height: min(calc(100vw * (1.6 / 1)), 100vh);
}

.btn-area li img{
    pointer-events: none;
}

.page-change.disabele{
    pointer-events: none;
    opacity: 0.2;
}


/* Change Screen ------------------------------------ */
.change-screen{
    position: absolute;
    width: min(100vw, calc(100vh * (1 / 1.6)));
    height: min(calc(100vw * (1.6 / 1)), 100vh);
    z-index: 100;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.change-screen .gif-anim img{
    width: min(10vw, calc(10vh * (1 / 1.6)));
    height: min(10vw, calc(10vh * (1 / 1.6)));
    margin-bottom: min(4vw, calc(4vh * (1 / 1.6)));
}


/* Planet ------------------------------------ */

#page-planet {
    display: none;
    position: relative;
    margin: min( 4vw, calc( 4vh * (1 / 1.6)) );
}
#page-planet .wipe-frame {
    position: absolute;
    top:  0;
    right: min( 4vw, calc( 4vh * (1 / 1.6)) );
    width: min( 24vw, calc( 24vh * (1 / 1.6)) );
    height: min( 24vw, calc( 24vh * (1 / 1.6)) );
    /* border: 1px solid #DDDDDD; */
    box-sizing: border-box;
}

#page-planet .status-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: min( 40vw, calc( 40vh * (1 / 1.6)) );
    height: min( 28vw, calc( 28vh * (1 / 1.6)) );
    text-align: left;
}
#page-planet .status-wrap .name{
    /* position: absolute;
    top: 8vw; */
}
#page-planet .status-wrap .name .en{
    font-size: min( 3.2vw, calc( 3.2vh * (1 / 1.6)) );
    font-weight: 500;
    /* font-family: 'zm-m'; */
}
#page-planet .status-wrap .name .ja{
    margin-left: max( -0.5vw, calc( -0.5vh * (1 / 1.6)) );
}
#page-planet .status-wrap .status{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: min( 12vw, calc( 12vh * (1 / 1.6)) );
}

#page-planet .status-wrap .status dt{
    width: min( 10vw, calc( 10vh * (1 / 1.6)) );
    height: min( 6vw, calc( 6vh * (1 / 1.6)) );
    box-sizing: border-box;
}
#page-planet .status-wrap .status dd{
    width: min( 26vw, calc( 26vh * (1 / 1.6)) );
    height: min( 6vw, calc( 6vh * (1 / 1.6)) );
    box-sizing: border-box;
}
#page-planet .status-wrap .status dd::before{
    content: ' : ';
}
#page-planet .status-wrap .status-bar-wpap{
    position: absolute;
    display: block;
    top: min( 22vw, calc( 22vh * (1 / 1.6)) );
    width:100%;
    height: min( 1vw, calc( 1vh * (1 / 1.6)) );
    background-color: #DDDDDD
}
#page-planet .status-wrap .status-bar{
    width:0%;
    height: min( 1vw, calc( 1vh * (1 / 1.6)) );
    background-color: #A8783D;
}

#page-planet .btn-area ul{
    position: absolute;
    top: min( 144vw, calc( 144vh * (1 / 1.6)) );
    display: flex;
    text-align: center;
}
#page-planet .btn-area ul li{
    color: #fff;
    background-color: #A8783D;
    width: min( 8vw, calc( 8vh * (1 / 1.6)) );
    height: min( 8vw, calc( 8vh * (1 / 1.6)) );
    /* font-family: 'zm-m'; */
    font-size: min( 4vw, calc( 4vh * (1 / 1.6)) );
    line-height: min( 5.2vw, calc( 5.2vh * (1 / 1.6)) );
    border-radius: 50%;
    text-align: center;
    margin-right: min( 2vw, calc( 2vh * (1 / 1.6)) );
}
#page-planet .btn-area ul li:first-child{
    margin-right: min( 66vw, calc( 66vh * (1 / 1.6)) );
}


/* ジョイスティック */
#page-planet .joystick {
    position: absolute;
    top: min( 124vw, calc( 124vh * (1 / 1.6)) );
    left: min( 46vw, calc( 46vh * (1 / 1.6)) );
    transform: translateX(-50%);
    z-index: 10;
}
#page-planet .joystick.disable{
    pointer-events: none;
    opacity: 0.3;
}
#page-planet .joystick-frame {
    width: min( 28vw, calc( 28vh * (1 / 1.6)) );
    height: min( 28vw, calc( 28vh * (1 / 1.6)) );
    border-radius: 100rem;
    border: 1px #A8783D solid;
    position: relative;
}
#page-planet .joystick-ball {
    width: min( 14vw, calc( 14vh * (1 / 1.6)) );
    height: min( 14vw, calc( 14vh * (1 / 1.6)) );
    background: #A8783D;
    border-radius: 100rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/* Resident ------------------------------------ */

#page-resident{
    display: none;
    position: relative;
    margin: min( 4vw, calc( 4vh * (1 / 1.6)) );
}
#page-resident .status-wrap{
    position: absolute;
    top: 0;
    right: 0;
    width: min( 44vw, calc( 44vh * (1 / 1.6)) );
    height: min( 56vw, calc( 56vh * (1 / 1.6)) );
    text-align: left;
}

#page-resident .status-wrap .label{
    position: absolute;
    right: 0;
    color: #A8783D;
    border: 1px solid #A8783D;
    border-radius: min( 0.5vw, calc( 0.5vh * (1 / 1.6)) );
    padding-top: min( 0.3vw, calc( 0.3vh * (1 / 1.6)) );
    padding-right: min( 1vw, calc( 1vh * (1 / 1.6)) );
    padding-bottom: min( 0.1vw, calc( 0.1vh * (1 / 1.6)) );
    padding-left: min( 1vw, calc( 1vh * (1 / 1.6)) );
}
#page-resident .status-wrap .name{
    position: absolute;
    top: min(8vw, calc( 8vh * (1 / 1.6)) );
}
#page-resident .status-wrap .name .en{
    font-size: min( 5vw, calc( 5vh * (1 / 1.6)) );
    font-weight: 500;
    /* font-family: 'zm-m'; */
}
#page-resident .status-wrap .name .ja{
    margin-top: max( -0.5vw, calc( -0.5vh * (1 / 1.6)) );
}
#page-resident .status-wrap .status{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: min( 24vw, calc( 24vh * (1 / 1.6)) );
}
#page-resident .status-wrap .status dt{
    width: min( 12vw, calc( 12vh * (1 / 1.6)) );
    height: min( 6vw, calc( 6vh * (1 / 1.6)) );
    box-sizing: border-box;
}
#page-resident .status-wrap .status dd{
    width: min( 32vw, calc( 32vh * (1 / 1.6)) );
    box-sizing: border-box;
}
#page-resident .status-wrap .status dd.rate span{
    font-family: 'km-r';
    font-size: min( 4vw, calc( 4vh * (1 / 1.6)) );
    color: #A8783D;
}
#page-resident .status-wrap .status dd::before{
    content: '：';
}

#page-resident .list-wrap{
    width: min( 96vw, calc( 96vh * (1 / 1.6)) );;
    height: min( 85vw, calc( 85vh * (1 / 1.6)) );
    /* overflow-y: auto; */
}
#page-resident .list-wrap .list{
    margin-top: min( 2vw, calc( 2vh * (1 / 1.6)) );
    font-size:0;
}
#page-resident .list-wrap .list li{
    position: relative;
    display: inline-block;
    width: min( 12vw, calc( 12vh * (1 / 1.6)) );
    height: min( 12vw, calc( 12vh * (1 / 1.6)) );
    margin-right: min( 4vw, calc( 4vh * (1 / 1.6)) );
    margin-bottom: min( 4vw, calc( 4vh * (1 / 1.6)) );
    border: 1px solid #DDDDDD;
    border-radius: min( 0.5vw, calc( 0.5vh * (1 / 1.6)) );
    box-sizing: border-box;
}
#page-resident .list-wrap .list li img{
    width: min( 11.4vw, calc( 11.4vh * (1 / 1.6)) );
    height: min( 11.4vw, calc( 11.4vh * (1 / 1.6)) );
    pointer-events: none;
}
#page-resident .list-wrap .list li.active{
    border: 1px solid #A8783D;
}
#page-resident .list-wrap .list li.new::after{
    /* display: inline-block; */
    position: absolute;
    top: min( -1.3vw, calc(-1.3vh * (1 / 1.6)) );
    right: min( -1vw, calc(-1vh * (1 / 1.6)) );
    content: "NEW";
    background: #A8783D;
    color: #ffffff;
    font-size: min( 2vw, calc(2vh * (1 / 1.6)) );
    letter-spacing: min( 0.3vw, calc(0.3vh * (1 / 1.6)) );
    line-height: 1px;
    margin: 0;
    padding-top: min( 1.5vw, calc( 1.5vh * (1 / 1.6)) );
    padding-right: min( 0.8vw, calc( 0.8vh * (1 / 1.6)) );
    padding-bottom: min( 1.3vw, calc( 1.3vh * (1 / 1.6)) );
    padding-left: min( 1vw, calc( 1vh * (1 / 1.6)) );
    /* transform : scale(0.6) translateX(-30%); */
    animation: newAnime .7s infinite alternate;
    border-radius: min( 1vw, calc(1vh * (1 / 1.6)) );
}
/* @keyframes newAnime {
     0% { color      : #cc0000;
          background : #ffffff;
        }
   100% { color      : #ffffff;
          background : #cc0000;
        }
} */

#page-resident .list-wrap .list li:nth-child(6n){
    margin-right: 0;
}

#page-resident .btn-area ul{
    position: absolute;
    top: min( 144vw, calc( 144vh * (1 / 1.6)) );
    display: flex;
    text-align: center;
}
#page-resident .btn-area ul li{
    color: #fff;
    background-color: #A8783D;
    width: min( 8vw, calc( 8vh * (1 / 1.6)) );
    height: min( 8vw, calc( 8vh * (1 / 1.6)) );
    /* font-family: 'zm-m'; */
    font-size: min( 4vw, calc( 4vh * (1 / 1.6)) );
    line-height: min( 5.2vw, calc( 5.2vh * (1 / 1.6)) );
    border-radius: 50%;
    text-align: center;
    margin-right: min( 2vw, calc( 2vh * (1 / 1.6)) );
}
#page-resident .btn-area ul li:first-child{
    margin-right: min( 66vw, calc( 66vh * (1 / 1.6)) );
}

/* visit ------------------------------------ */

#page-visit{
    display: none;
    position: relative;
    /* margin-top:  min(4vw, calc( 4vh * (1 / 1.6)) ); */
    overflow: hidden;
}
#page-visit .message-wrap{
    position: absolute;
    width: min( 100vw, calc(100vh * (1 / 1.6)) );
    height: min( calc(100vw * (1.6 / 1)), 100vh );
    background-color: #FFF;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
#page-visit .message-wrap .message{
   text-align: center;
   font-size: min(3vw, calc( 3vh * (1 / 1.6)) );
   line-height: min(6vw, calc( 6vh * (1 / 1.6)) );
   width:100%
}
#page-visit .message-wrap .message .mes{
    margin-bottom: min(4vw, calc( 4vh * (1 / 1.6)) );
}
#page-visit .message-wrap .message .mes2{
    display: none;
    padding: 5px 10px;
    color: #A8783D;
    border:1px solid #A8783D;
    border-radius: min(1vw, calc( 1vh * (1 / 1.6)) );

}
#page-visit .message-wrap .message .visit-btn-next{
    display: inline-block;
    padding: min(1.6vw, calc( 1.6vh * (1 / 1.6)) );
    width: min(24vw, calc( 24vh * (1 / 1.6)) );
    color: #FFF;
    font-size: min(3vw, calc( 3vh * (1 / 1.6)) );
    line-height: min(3vw, calc( 3vh * (1 / 1.6)) );
    background: #A8783D;
    border-radius: min(1vw, calc( 1vh * (1 / 1.6)) );
}

#page-visit .newkuma-wrap{
    width: min(100vw, calc( 100vh * (1 / 1.6)) );
    height: min( calc(100vw * (1.6 / 1)), 100vh );
    display: flex;
    justify-content: center;
    align-items: center;
}
#page-visit .newkuma-wrap .visit-wrap{
    width:100%;
}
#page-visit .newkuma-wrap .visit-wrap canvas{
    width:100%;
}

#page-visit .newkuma-wrap .balloon-wrap {
    width: 100%;
    text-align: center;
    height: min(16vw, calc( 16vh * (1 / 1.6)) );
}
#page-visit .newkuma-wrap .balloon-wrap .balloon {
    position: relative;
    display: none;
    margin: 0 auto;
    padding-top: min(2vw, calc( 2vh * (1 / 1.6)) );
    padding-bottom: min(6vw, calc( 6vh * (1 / 1.6)) );
    padding-left: min(4vw, calc( 4vh * (1 / 1.6)) );
    padding-right: min(4vw, calc( 4vh * (1 / 1.6)) );
    color: #000;
    height: min(4vw, calc( 4vh * (1 / 1.6)) );
    font-size: min(4vw, calc( 4vh * (1 / 1.6)) );
    line-height: min(4vw, calc( 4vh * (1 / 1.6)) );
    text-align: left;
    background: #eae6e1;
    border-radius: min(3vw, calc( 3vh * (1 / 1.6)) );
    font-family: 'km-r';
}
#page-visit .newkuma-wrap .balloon-wrap .balloon:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: max(-2vw, calc( -2vh * (1 / 1.6)) );
    border:  min(2vw, calc( 2vh * (1 / 1.6)) ) solid transparent;
    border-top:  min(2vw, calc( 2vh * (1 / 1.6)) ) solid #eae6e1;
}
  
#page-visit .newkuma-wrap .balloon-wrap .balloon p {
    margin: 0;
    padding: 0;
}

#page-visit .newkuma-wrap .add-wrap{
    opacity: 0;
}
#page-visit .newkuma-wrap .add-wrap .add{
   text-align: center;
   font-size: min(3vw, calc( 3vh * (1 / 1.6)) );
   line-height: min(4vw, calc( 4vh * (1 / 1.6)) );
   width: min(100vw, calc( 100vh * (1 / 1.6)) );
}


#page-visit .newkuma-wrap .add-wrap .add .text{
    margin-bottom: min(2vw, calc(24vh * (1 / 1.6)) );
}
#page-visit .newkuma-wrap .add-wrap .add .text2{
    display: none;
}

#page-visit .select-wrap{
    width: min(100vw, calc( 100vh * (1 / 1.6)) );
    height: min( calc(100vw * (1.6 / 1)), 100vh );
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    position: absolute;
    top: min( calc(100vw * (1.6 / 1)), 100vh );
    left: 0;
    background-color: #FFF;
}
#page-visit .select-wrap .select{
    text-align: center;
    font-size: min(3vw, calc( 3vh * (1 / 1.6)) );
    line-height: min(4vw, calc( 4vh * (1 / 1.6)) );
    width: min(100vw, calc( 100vh * (1 / 1.6)) );
 }

#page-visit .select-wrap .select .text{
    margin-bottom: min(2vw, calc(24vh * (1 / 1.6)) );
}

#page-visit .select-wrap .list-wrap{
    width: min( 96vw, calc( 96vh * (1 / 1.6)) );;
    height: min( 96vw, calc( 96vh * (1 / 1.6)) );
    /* overflow-y: auto; */
}
#page-visit .select-wrap .list-wrap .list{
    font-size:0;
    margin-top: min( 4vw, calc( 4vh * (1 / 1.6)) );
    margin-left: min( 4vw, calc( 4vh * (1 / 1.6)) );
}

#page-visit .select-wrap .list-wrap .list li{
    position: relative;
    display: inline-block;
    width: min( 12vw, calc( 12vh * (1 / 1.6)) );
    height: min( 12vw, calc( 12vh * (1 / 1.6)) );
    margin-right: min( 4vw, calc( 4vh * (1 / 1.6)) );
    margin-bottom: min( 4vw, calc( 4vh * (1 / 1.6)) );
    border: 1px solid #DDDDDD;
    border-radius: min( 0.5vw, calc( 0.5vh * (1 / 1.6)) );
    box-sizing: border-box;
}
#page-visit .list-wrap .list li img{
    width: min( 11.4vw, calc( 11.4vh * (1 / 1.6)) );
    height: min( 11.4vw, calc( 11.4vh * (1 / 1.6)) );
    pointer-events: none;
}
#page-visit .select-wrap .list-wrap .list li.active{
    border: 1px solid #A8783D;
}

#page-visit .add-wrap .add .visit-btn-add,
#page-visit .add-wrap .add .visit-btn-slc,
#page-visit .add-wrap .add .visit-btn-sep,
#page-visit .select-wrap .select .visit-btn-ok,
#page-visit .select-wrap .select .visit-btn-cancel{
    display: inline-block;
    margin-left: min( 1vw, calc( 1vh * (1 / 1.6)) );
    margin-right: min( 1vw, calc( 1vh * (1 / 1.6)) );
    padding: min( 1.6vw, calc( 1.6vh * (1 / 1.6)) );
    width: min(24vw, calc( 24vh * (1 / 1.6)) );
    color: #FFF;
    font-size: min(3vw, calc( 3vh * (1 / 1.6)) );
    line-height: min(3vw, calc( 3vh * (1 / 1.6)) );
    background: #A8783D;
    border-radius: min(1vw, calc( 1vh * (1 / 1.6)) );
}
#page-visit .add-wrap .add .visit-btn-add.disabele,
#page-visit .add-wrap .add .visit-btn-slc.disabele,
#page-visit .add-wrap .add .visit-btn-sep.disabele,
#page-visit .select-wrap .select .visit-btn-ok.disabele,
#page-visit .select-wrap .select .visit-btn-cancel.disabele{
    pointer-events: none;
}
#page-visit .select-wrap .select .visit-btn-ok.disabele,
#page-visit .select-wrap .select .visit-btn-cancel.disabele{
    opacity: 0.2;
}


/* end ------------------------------------ */

#page-end{
    display: none;
    /* position: relative; */
    overflow: hidden;
}
#page-end .message-wrap{
    position: absolute;
    width: min( 100vw, calc(100vh * (1 / 1.6)) );
    height: min( calc(100vw * (1.6 / 1)), 100vh );
    background-color: #FFF;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
#page-end .message-wrap .message{
   text-align: center;
   font-size: min(3vw, calc( 3vh * (1 / 1.6)) );
   line-height: min(6vw, calc( 6vh * (1 / 1.6)) );
   width:100%
}
#page-end .message-wrap .message .mes{
    margin-bottom: min(4vw, calc( 4vh * (1 / 1.6)) );
    opacity: 0;
}
#page-end .message-wrap .message .mes span.kuma{
    font-family: 'km-r';
    font-size: min(8vw, calc( 8vh * (1 / 1.6)) );
    line-height: min(6vw, calc( 6vh * (1 / 1.6)) );
}

#page-end .message-wrap .message .end-btn-next{
    display: inline-block;
    padding: min(1.6vw, calc( 1.6vh * (1 / 1.6)) );
    width: min(24vw, calc( 24vh * (1 / 1.6)) );
    color: #FFF;
    font-size: min(3vw, calc( 3vh * (1 / 1.6)) );
    line-height: min(3vw, calc( 3vh * (1 / 1.6)) );
    background: #A8783D;
    border-radius: min(1vw, calc( 1vh * (1 / 1.6)) );
    opacity: 0;
}
#page-end .message-wrap .message .end-btn-next.disabele{
    pointer-events: none;
}


/* menu ------------------------------------ */

#page-menu{
    display: none;
    position: relative;
    overflow: hidden;
    width: min( 100vw, calc( 100vh * (1 / 1.6) ) );
    height: min( calc( 100vw * (1.6 / 1) ), 100vh );
}
#page-menu h1 img{
    width: min( 50vw, calc( 50vh * (1 / 1.6) ) );

}

#page-menu .menu-wrap{
    margin: min( 4vw, calc( 4vh * (1 / 1.6)) );
}

#page-menu h2{
    margin-top: min( 8vw, calc( 8vh * (1 / 1.6) ) );
    margin-bottom: min( 1vw, calc( 1vh * (1 / 1.6) ) );
    font-weight: 300;
}
#page-menu .share-wrap{

    /* position: absolute;
    top: min( 132vw, calc( 132vh * (1 / 1.6)) ); */
    display: flex;
    text-align: left;
    width: 100%;
}
#page-menu .share-wrap .share{
    width: 100%;
}
#page-menu .share-wrap a{
	display: inline-block;
	background-color: #333;
	text-decoration: none;
	/* transition: 0.4s; */
    color: #fff;
    width: min( 8vw, calc( 8vh * ( 1 / 1.6 ) ) );
    height: min( 8vw, calc( 8vh * ( 1 / 1.6) ) );
    margin-right: min( 2vw, calc( 2vh * ( 1 / 1.6 )) );
    /* font-family: 'zm-m'; */
    /* font-size: min(4vw, calc(4vh*(1 / 1.6)));
    line-height: min(5.2vw, calc(5.2vh*(1 / 1.6))); */
    border-radius: 50%;
    text-align: center;
}
#page-menu .share-wrap a:hover {
	opacity: 0.7;
}
#page-menu .share-wrap a.share-tw {
	background-color: #1da1f2;
}
#page-menu .share-wrap a.share-fb {
	background-color: #1877f2;
}
#page-menu .share-wrap a.share-li {
	background-color: #00b900;
}
#page-menu .share-wrap a.share-pi {
	background-color: #E60022;
}
#page-menu .btn-area ul{
    position: absolute;
    bottom: min( 4vw, calc( 4vh * (1 / 1.6)) );
    display: flex;
    text-align: center;
}
#page-menu .btn-area ul li{
    color: #fff;
    background-color: #A8783D;
    width: min( 8vw, calc( 8vh * (1 / 1.6)) );
    height: min( 8vw, calc( 8vh * (1 / 1.6)) );
    /* font-family: 'zm-m'; */
    font-size: min( 4vw, calc( 4vh * (1 / 1.6)) );
    line-height: min( 5.2vw, calc( 5.2vh * (1 / 1.6)) );
    border-radius: 50%;
    text-align: center;
    margin-right: min( 2vw, calc( 2vh * (1 / 1.6)) );
}
#page-menu .btn-area ul li:first-child{
    margin-right: min( 66vw, calc( 66vh * (1 / 1.6)) );
}

#page-menu .share-wrap a.share{
    display: inline-block;
	background-color: #A8783D;
	text-decoration: none;
	/* transition: 0.4s; */
    color: #fff;
    width: min( 40vw, calc( 40vh * ( 1 / 1.6 ) ) );
    height: min( 8vw, calc( 8vh * ( 1 / 1.6) ) );
    margin-right: min( 2vw, calc( 2vh * ( 1 / 1.6 )) );
    font-size: min(3vw, calc(3vh*(1 / 1.6)));
    line-height: min(8vw, calc(8vh*(1 / 1.6)));
    border-radius: min( 4vw, calc( 4vh * ( 1 / 1.6 ) ) );
    text-align: center;
}

#page-menu .share-wrap .copy{
    display: inline-block;
	background-color: #FFF;
	text-decoration: none;
    color: #A8783D;
    width: min( 16vw, calc( 16vh * ( 1 / 1.6 ) ) );
    height: min( 8vw, calc( 8vh * ( 1 / 1.6) ) );
    margin-right: min( 2vw, calc( 2vh * ( 1 / 1.6 )) );
    font-size: min(3vw, calc(3vh*(1 / 1.6)));
    line-height: min(8vw, calc(8vh*(1 / 1.6)));
    border: 1px solid #A8783D;
    border-radius: min( 4vw, calc( 4vh * ( 1 / 1.6 ) ) );
    text-align: center;
    box-sizing: border-box;
}


#page-menu .link-wrap .link,
#page-menu .settings-wrap .remove-game-data{
    display: inline-block;
	background-color: #A8783D;
	text-decoration: none;
	/* transition: 0.4s; */
    color: #fff;
    width: min( 28vw, calc( 28vh * ( 1 / 1.6 ) ) );
    height: min( 5.8vw, calc( 5.8vh * ( 1 / 1.6) ) );
    margin-right: min( 2vw, calc( 2vh * ( 1 / 1.6 )) );
    font-size: min(2.6vw, calc(2.6vh*(1 / 1.6)));
    line-height: min(5.8vw, calc(5.8vh*(1 / 1.6)));
    border-radius: min( 3vw, calc( 3vh * ( 1 / 1.6 ) ) );
    text-align: center;
}


#page-menu .ex{
    margin-top: min(0.5vw, calc(0.5vh*(1 / 1.6)));
    margin-left: min(0.5vw, calc(0.5vh*(1 / 1.6)));
}