@charset "utf-8";


/*
---------------
-common
---------------
*/
.commonImageButton{background-color:transparent;border:none;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}
.commonImageButton:focus{outline:0px}

html{position:relative;height:100%;overflow:hidden}
body{position:relative;width:100%;height:100vh;background:#fff;overflow:hidden}

input{border:1px solid #666;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0 10px 0 10px}

.maintainButton{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font-size:14px;background:#f71961;color:#000;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.maintainButton:hover{background:#d7b100;color:#fff}
.maintainButton:active{background:#a28500;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}


.greenButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#000000;color:#fff;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.greenButton:hover{background:#fcae1a;color:#000}
.greenButton:active{background:#444;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}
.orangeButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#fcae1a;color:#000;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.orangeButton:hover{background:#000000;color:#fff}
.orangeButton:active{background:#a86d02;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}

.purpleButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#6b37ff;color:#fff;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.purpleButton:hover{background:#000}
.purpleButton:active{background:#999;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}
.grayButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#ccc;color:#444;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.grayButton:hover{background:#bbb;color:#fff}
.grayButton:active{background:#aaa;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}
.blackButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#000;color:#fff;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.blackButton:hover{background:#f71961;color:#000}
.blackButton:active{background:#999;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}

.whiteButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#fff;color:#000;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.whiteButton:hover{background:#444;color:#fff}
.whiteButton:active{background:#000;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}

.blueButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#007bc4;color:#fff;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.blueButton:hover{background:#0095dd}
.blueButton:active{background:#444;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}

.redButton{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:14px;background:#ff0000;color:#fff;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.redButton:hover{background:#880000}
.redButton:active{background:#660000;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}

.yellowButton{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font-size:14px;background:#f71961;color:#fff;font-size:14px;border:none;transition:background-color 1s;-webkit-transition:background-color 1s;-moz-transition:background-color 1s}
.yellowButton:hover{background:#d7b100;color:#fff}
.yellowButton:active{background:#a28500;transition:.1s;-webkit-transition:.1s;-moz-transition:.1s}


.disableButton{background:#ddd;border:none;color:#000;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0}
.disableButton:hover{background:#ddd}
.disableButton:active{background:#ddd}

.hiddenInput{display:none}
.disableInput{background:#f9f9f9}
.periodInput{cursor:pointer}
.periodInput:hover{background:#ffd8d8}
.periodInput:active{background:#ddd8d8}


.entireArea{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}

.bottomArea{position:absolute;left:0;bottom:0;width:100%;height:72px;background:#fff}
.bottomArea .bottomCenterArea{position:relative;width:calc(100% - 40px);width:-webkit-calc(100% - 40px);width:-moz-calc(100% - 40px);height:72px;margin-left:20px}
.bottomArea .bottomCenterArea .bottomItem{position:absolute;top:0;width:calc((100% - 80px)/5);width:-webkit-calc((100% - 80px)/5);width:-moz-calc((100% - 80px)/5);height:72px;cursor:pointer}
.bottomArea .bottomCenterArea .bottomItem_home{left:0}
.bottomArea .bottomCenterArea .bottomItem_question{left:calc((((100% - 80px)/5)*1) + (20px * 1));left:-webkit-calc((((100% - 80px)/5)*1) + (20px * 1));left:-moz-calc((((100% - 80px)/5)*1) + (20px * 1))}
.bottomArea .bottomCenterArea .bottomItem_map{left:calc((((100% - 80px)/5)*2) + (20px * 2));left:-webkit-calc((((100% - 80px)/5)*2) + (20px * 2));left:-moz-calc((((100% - 80px)/5)*2) + (20px * 2))}
.bottomArea .bottomCenterArea .bottomItem_wish{left:calc((((100% - 80px)/5)*3) + (20px * 3));left:-webkit-calc((((100% - 80px)/5)*3) + (20px * 3));left:-moz-calc((((100% - 80px)/5)*3) + (20px * 3))}
.bottomArea .bottomCenterArea .bottomItem_my{left:calc(100% - ((100% - 80px)/5));left:-webkit-calc(100% - ((100% - 80px)/5));left:-moz-calc(100% - ((100% - 80px)/5))}

.bottomArea .bottomCenterArea .bottomItem img{position:absolute;left:calc(50% - 20px);left:calc(50% - 20px);left:-moz-calc(50% - 20px);top:4px;width:40px;height:40px;object-fit:contain}
.bottomArea .bottomCenterArea .bottomItem p{position:absolute;left:0;top:44px;width:100%;height:20px;font-size:12px;color:#8a8a8a;text-align:center}
.bottomArea .bottomCenterArea .bottomItem .bottomLine{display:none;position:absolute;left:0;top:0;width:100%;height:4px;background:#f71961}
.bottomArea .bottomCenterArea .bottomItemOn p{color:#000;font-weight:bold}
.bottomArea .bottomCenterArea .bottomItemOn .bottomLine{display:block}

.bottomArea .bottomCenterArea .bottomItem:hover{opacity:0.8}
.bottomArea .bottomCenterArea .bottomItem:active{opacity:0.6}
.bottomArea .bottomCenterArea .bottomItemOn:hover{opacity:1}
.bottomArea .bottomCenterArea .bottomItemOn:active{opacity:1}

.bottomShadow{position:absolute;left:0;bottom:72px;width:100%;height:10px;object-fit:fill;opacity:0.1}

.commonSelectArea{position:relative;width:100%;height:40px;overflow:hidden;background:#fff;padding:0;border:1px solid #ccc;margin:24px 0 0 0;cursor:pointer;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.commonSelectArea:hover{border-color:#f71961}
.commonSelectArea select{position:absolute;left:0;top:0;padding:0;width:100%;height:40px;padding-left:10px;font-size:14px;color:#000;cursor:pointer}
.commonSelectArea select:focus{outline:0}
.commonSelectArea img{position:absolute;right:8px;top:15px;width:10px;height:5px;object-fit:contain}


@media(max-width:460px){
.centerArea{width:100%;margin-left:0}
}