@charset "UTF-8";
/* CSS Document */

html{-webkit-text-size-adjust: none; height:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

body{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:14px; line-height:18pt; margin:0;
background: url(/common/images/bg-main.png);}

body, input, button{-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

img{vertical-align: middle;}

a{
	text-decoration: none;
	color: #FFFFFF;
}
button:focus{ outline: none;}
.warpper{width: 100%; padding: 60px 0 70px; position: relative;}
.warpper-2{width: 100%; padding: 60px 0 70px; position: relative;
    background: url(/common/images/bg-violet.png) #312c40;
    /*background: -moz-radial-gradient(center, ellipse cover, #5a5073 0%, #312c40 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5a5073), color-stop(100%, #312c40));
    background: -webkit-radial-gradient(center, ellipse cover, #5a5073 0%, #312c40 100%);
    background: -o-radial-gradient(center, ellipse cover, #5a5073 0%, #312c40 100%);
    background: -ms-radial-gradient(center, ellipse cover, #5a5073 0%, #312c40 100%);
    background: radial-gradient(ellipse at center, #5a5073 0%, #312c40 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5073', endColorstr='#312c40', GradientType=1 );*/
  }

/*genaral*/

/*---------Main-Menu---------*/
.main-menu{position: fixed; z-index:99; top: 0; left: 0; width: 100%; padding:4px 8px; height:60px; background: #15a1e5;}
.main-menu a.mm-toggle{ float: right; font-size: 35px; margin-top: -41px; color: #434343;}
.main-menu .date{ font-size: 24px; color: #fff; margin-top: 15px; float: left;}
.main-menu .date span{ font-size: 14px;}

.header-logo { width: 100%; position: absolute; top: -8px; z-index: -9; left: 50%; margin-left: -72px;}
.header-logo img { width: 143px;}

.sp-apply {margin-left: 20px; visibility: hidden; margin-top: 4px;}

.header-news {width: 28%; float: right; text-align: center; margin-top: -36px; margin-right: 40px; }
.update-news{ background: #434343; color: #fff; position: relative; display: inline-block; text-align: center; padding: 6px 4px; width: 140px; border: 0px; border-radius: 4px;}
.update-news i{ font-size: 22px;}
.update-news div.text{ display: inline;}
.update-news span{ background: #D60000; width: 25px; height: 25px; border-radius: 12px; text-align: center; position: absolute; top: -5px; right: -10px; padding-top:4px; font-size: 16px; line-height: 18px}

/*---------pop up---------*/
.lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8);}
.lightbox:target { outline: none; display: block;}
.popup-show{ padding: 18px; width: 90%; margin: 12% auto; text-align: left; max-height: 70%; overflow-y: auto; border-radius: 4px;
    background: #434343;
    -webkit-box-shadow: 0px 0px 8px 3px rgba(23,21,21,1);
    -moz-box-shadow: 0px 0px 8px 3px rgba(23,21,21,1);
    box-shadow: 0px 0px 8px 3px rgba(23,21,21,1);}
.popup-show a.button-close { float: right; text-decoration: none; font-weight: bold; background: #C4C4C4; width: 30px; height: 30px; border-radius: 15px; color: #727272; text-align: center; font-size: 18px; padding-top: 4px;}
.popup-show a.button-close:hover{background: rgba(0, 0, 0, 0.6);}

/*---------content main---------*/
main{ width: 100%; }
.box-content{ width: 95%; margin: 20px auto;}
.username{ background: #4B4B4B; color: #fff; padding: 8px;}

.button-calculator{ display: flex; flex-wrap: wrap; margin: 24px auto; }
.button-number{ display: inline-block; width: 80%; text-align: center;}
.button-number button img{ width: 50px; margin-top: -8px;}
.button-number button:nth-child(even){ background: #313131;}
.button-number button:nth-child(odd){ background: #434343;}
.button-number button{ margin: 6px; padding: 24px; width: 29%; border-radius: 12px; border: 0; color: #fff; font-size: 50px; text-align: center;}
.button-number button.c{ background: #6A6A6A;}
.button-number button.del{ background: #C1C1C1;}
.button-search{ display: inline-block; width: 20%; border-radius: 12px; border: 0; margin: 6px auto; background: #00A0E9; font-size: 16px; font-weight: bold; color: #fff;}
.button-border-gray{ border: 1px solid #ccc; color: #ccc; text-align: center; display: block; padding: 12px; width: 200px; border-radius: 4px; margin: 12px auto;}

/*---------Footer---------*/
.footer-box{ background: #434343; padding: 4px; width: 100%; text-align: center; position: fixed; bottom: 0; z-index: 1000;}
.footer-box button{ width: 30%; font-size: 18px; padding:9px 2px; border: 0px; border-radius: 8px; margin: 4px;}
.footer-box button:focus{ outline: none;}
.footer-box .back, .footer-box .next{ background: #15a1e5; color: #fff; text-align: center; border: 4px solid #15a1e5;}
.footer-box .back i{ float: left; margin-top: 6px;}
.footer-box .next i{ float: right; margin-top: 6px;}
.footer-box .reload{ background: #5A5A5A; border: 4px solid #808080; text-align: center; color: #fff;}
.footer-box .reload span{ float: left; padding: 2px; width: 17px;}
.footer-box .reload span img{ width: 100%;}

@media (max-width: 560px){
  .update-news{ padding: 0 4px;}
  .header-news{ margin-top: -28px;}
  .update-news{ width: 115px; text-align: right; background: none; padding-right: 20px;}
  .update-news div.text{ display: none;}
  .update-news span{ padding-top:1px; }
}
@media (max-width: 480px){
  .header-logo img { width: 120px; margin-top: 8px; }
  .header-news{ margin-right: 65px;}
  .box-content{width: 95%;}
  .button-number button{ font-size: 35px; padding: 6px; width: 30%; margin: 2px;}
  .button-number button.del img{ width: 35px;}
  .button-search{ margin: 2px auto; padding: 1px; font-size: 11px;}
  .footer-box button{ width: 27%; margin: auto; margin: 2px; font-size: 12px;}
  .footer-box .reload{ width: 38%;}
}