@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body{
  position: relative;
  width: 100%;
  color: #535362;
  font-family: 'Roboto', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
  body{
    -webkit-text-stroke-width: 0.1px;
  }
}

a{
  color: #00A1E9;
  transition: all .3s;
}
a:hover{
  color: #0070A3;
}

.headline{
  position: relative;
  line-height: 32px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #DDD;
  margin-top: 2em;
  padding: 0 0 8px 16px;
}
.headline::before{
  content: "";
  position: absolute;
  display: block;
  width: 3px;
  height: 32px;
  background: #00A1E9;
  top: 0;
  left: 0;
}


/* header
--------------------------------------------------*/
.header{
  position: fixed;
  display: block;
  width: 100%;
  text-align: center;
  background: #FFF;
  border-bottom: 1px solid #DDD;
  padding: 24px 0 16px;
  top: 0;
  left: 0;
  z-index: 10000;
}

.header .logo{
  display: inline-block;
  width: 184px;
  height: auto;
}


/* footer
--------------------------------------------------*/
.footer{
  border-top: 1px solid #DDD;
  margin-top: 120px;
  padding: 16px 0;
}

.footer .copy{
  color: #9797A6;
  font-size: 12px;
  text-align: center;
}


/* container
--------------------------------------------------*/
.container{
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  align-items: flex-start;
  width: 1024px;
  margin: 104px auto 0;
}


/* main
--------------------------------------------------*/
.main{
  -webkit-box-flex: 1;
  flex: 1;
  margin-right: 40px;
}


/* main-content
--------------------------------------------------*/
.main-content{
  border: 1px solid #DDD;
}

.main-content h1{
  color: #313140;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background: #F9F9F9;
  border-bottom: 1px solid #DDD;
  padding: 8px 0;
}

.main-content .desc{
  text-align: center;
  padding: 16px;
}

.main-content .inner-box{
  padding: 16px;
}

.main-content .btn-area{
  text-align: center;
  margin-top: 24px;
}
.main-content .btn-area .btn{
  margin: 0 8px;
}

.main-content .adv{
  margin-top: 24px;
}


/* main-content #top-info
--------------------------------------------------*/
#top-info{
  padding-bottom: 40px;
}

#top-info p{
  padding-top: 16px;
}

#top-info .log{
  text-align: right;
  padding-top: 8px;
}


/* main-content #top-index
--------------------------------------------------*/
#top-index ul{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 16px;
}

#top-index li{
  width: 48%;
  margin-bottom: 16px;
}
#top-index li a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #535362;
  text-decoration: none;
  border: 2px solid #DDD;
  box-sizing: border-box;
  padding: 16px 8px;
  transition: all .3s;
}
#top-index li a:hover{
  background: #F0F0F0;
}

#top-index li img{
  width: 32px;
  height: auto;
  margin-right: 8px;
}


/* main-content #qrcode
--------------------------------------------------*/
#qrcode table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
}

#qrcode th{
  width: 100px;
  background: #F9F9F9;
  padding: 8px;
}

#qrcode td{
  padding: 4px 8px;
}

#qrcode td input,
#qrcode td select{
  width: 100%;
  margin: 0;
}
#qrcode td input{
  padding: 8px;
}
#qrcode td select{
  padding: 6px 8px;
}

#qrcode .result-area{
  display: none;
  text-align: center;
  background: #F9F9F9;
  margin-top: 24px;
  padding: 16px 0;
}


/* main-content #htpasswd
--------------------------------------------------*/
#htpasswd .input-area,
#htpasswd .result-area{
  text-align: center;
  background: #F9F9F9;
  padding: 16px;
}
#htpasswd .result-area{
  margin-top: 24px;
}

#htpasswd .input-area label:nth-of-type(1){
  margin-right: 24px;
}

#htpasswd .input-area input,
#htpasswd .result-area input{
  width: 200px;
  padding: 8px 4px;
}
#htpasswd .result-area input{
  width: 400px;
}


/* main-content #password
--------------------------------------------------*/
#password th{
  font-weight: bold;
  background: #F9F9F9;
  padding: 0 8px;
}
#password td{
  padding: 8px 16px 8px 8px;
}

#password .result-area{
  margin-top: 24px;
}
#password .result-area input{
  background: #F9F9F9;
  border: none;
  box-sizing: inherit;
  margin: 4px;
  padding: 8px;
}
#password .result-area .wrap4 input{
  width: 44px;
}
#password .result-area .wrap8 input{
  width: 88px;
}
#password .result-area .wrap16 input{
  width: 176px;
}
#password .result-area .wrap32 input{
  width: 46%;
}


/* main-content #url
--------------------------------------------------*/
#url .form{
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

#url .form textarea{
  width: 49%;
  height: 120px;
  margin: 0;
}

#url #result{
  background: #F9F9F9;
  border: none;
}


/* main-content #log
--------------------------------------------------*/
#log.main-content{
  border: none;
}

#log h1{
  border: 1px solid #DDD;
}

#log table{
  width: 100%;
  margin-top: 24px;
}
#log tr{
  border-bottom: 1px solid #DDD;
}
#log th{
  font-weight: bold;
  padding: 0 4px 8px;
}
#log td{
  padding: 8px 4px;
}
#log td:nth-of-type(1){
  width: 80px;
}
#log td:nth-of-type(2){
  width: 200px;
}


/* main-content #disclaimer
--------------------------------------------------*/
#disclaimer.main-content{
  border: none;
}

#disclaimer h1{
  border: 1px solid #DDD;
}

#disclaimer p{
  line-height: 2;
  padding-top: 1em;
}


/* sidebar
--------------------------------------------------*/
.sidebar{
  width: 300px;
}

.sidebar .menu{
  margin-top: 24px;
}
.sidebar .menu h3{
  color: #FFF;
  font-weight: bold;
  background: #00A1E9;
  padding: 8px;
}

.sidebar .menu li{
  margin-top: 8px;
}
.sidebar .menu li a{
  display: block;
  color: #535362;
  text-decoration: none;
  background: #F9F9F9;
  padding: 8px;
  transition: all .3s;
}
.sidebar .menu li a:hover{
  background: #F0F0F0;
}

.sidebar .about{
  margin-top: 24px;
}
.sidebar .about h3{
  border-bottom: 1px solid #DDD;
  padding-bottom: 4px;
}
.sidebar .about li{
  margin-top: 8px;
}


/* input & textarea
--------------------------------------------------*/
input[type='text'],
input[type='password'],
textarea,
select{
  font-weight: normal;
  border: 1px solid #CCC;;
  box-sizing: border-box;
  margin-bottom: 4px;
  padding: 4px 8px;
  transition: all .3s;
  outline: none;
}

textarea{
  resize: none;
}

input[type='text']:focus,
input[type='password']:focus,
textarea:focus,
select:focus{
  border: 1px solid #00A1E9;
}

input[type='text']:disabled,
input[type='password']:disabled,
textarea:disabled,
select:disabled{
  color: #999;
  background-color: #E0E0E0;
}

input[type='text']:read-only,
input[type='password']:read-only,
textarea:read-only{
  color: #999;
}

input[type='text'].hide-input,
input[type='password'].hide-input,
textarea.hide-input,
select.hide-input{
  position: relative;
  background-color: transparent;
  padding-left: 0;
}
input[type='text'].hide-input:hover,
input[type='password'].hide-input:hover,
textarea.hide-input:hover,
select.hide-input:hover{
  background-color: #F5F5F5;
}
input[type='text'].hide-input:focus,
input[type='password'].hide-input:focus,
textarea.hide-input:focus,
select.hide-input:focus{
  background-color: #E1F0FA;
  padding-left: 8px;
}
select.hide-input{
  background-image: none;
}
select.hide-input:hover,
select.hide-input:focus{
  background-image: url(../img/arrow-down.svg);
}


/* Select
--------------------------------------------------*/
select{
	-moz-appearance: none;
	-webkit-appearance: none;
  appearance: none;
  background-image: url(../img/arrow-down.svg);
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px auto;
  padding-right: 20px;
  transition: all .3s, color 0s;
}
select::-ms-expand{
    display: none;
}

select option{
  color: black;
}


/* Radio & Checkbox
--------------------------------------------------*/
.radio,
.checkbox{
  display: inline-block;
  cursor: pointer;
  margin-right: 16px;
}
.radio.single,
.checkbox.single{
  margin-right: 0;
}

/* Radio */
input[type='radio']{
  display: none;
}
.radio{
  position: relative;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding-left: 24px;
}
.radio::before,
.radio::after{
  content: '';
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #E0E0E0;
  border-radius: 50%;
  box-sizing: border-box;
  top: 0;
  left: 0;
}
.radio::before{
  background: #FFF;
  transition: all 0.3s cubic-bezier(0.455, 0.03, 0.215, 1.33) 0s;
}
input[type='radio']:checked + .radio::before{
  background: #00A1E9;
  border-width: 6px;
  border-color: #FFFFFF;
}

/* Toggle */
.toggle-radio{
  display: table;
}
.toggle-radio .radio{
  display: table-cell;
  background: #F5F5F5;
  border-right: 1px solid #E0E0E0;
  margin: 0;
  padding: 2px 12px;
  transition: all .3s;
}
.toggle-radio .radio:first-of-type{
  border-radius: 5px 0 0 5px;
}
.toggle-radio .radio:last-of-type{
  border-right: none;
  border-radius: 0 5px 5px 0;
}
.toggle-radio input[type='radio']:checked + .radio{
  color: #FFF;
  background: #00A1E9;
}
.toggle-radio input[type='radio']:checked + .radio.green{
  background: #5CB85C;
}
.toggle-radio input[type='radio']:checked + .radio.red{
  background: #D43F3A;
}
.toggle-radio input[type='radio']:checked + .radio.orange{
  background: #EC971F;
}
.toggle-radio .radio::before,
.toggle-radio .radio::after{
  display: none !important;
}

/* Check Box */
input[type='checkbox']{
  display: none;
}
.checkbox{
  position: relative;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding-left: 24px;
}
.checkbox::before,
.checkbox::after{
  content: '';
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #E0E0E0;
  box-sizing: border-box;
  top: 0;
  left: 0;
}
.checkbox::before{
  transition: 0.2s linear 0s, color 0.2s linear 0s;
}
.checkbox::after{
  content: "\f00c";
  line-height: 20px;
  color: #FFFFFF;
  font-family: FontAwesome;
  font-weight: normal;
  text-align: center;
  vertical-align: text-top;
}
input[type='checkbox']:checked + .checkbox::before{
  border-width: 10px;
  border-color: #00A1E9;
}

/* Checkbox Cover */
.checkbox.cover{
  font-size: 12px;
  border: 1px solid #E0E0E0;
  margin: 0;
  padding: 0 4px;
  transition: all .3s;
}
.checkbox.cover::before,
.checkbox.cover::after{
  display: none;
}
input[type='checkbox']:checked + .checkbox.cover{
  color: #FFF;
  background: #00A1E9;
}

/* Checkbox Toggle */
.checkbox.toggle{
  padding-left: 44px;
}
.checkbox.toggle::before,
input[type='checkbox']:checked + .checkbox.toggle::before{
  width: 34px;
  height: 14px;
  border: none;
  border-radius: 14px;
  padding: 0;
  top: 5px;
  left: 3px;
  transition: all .3s;
}
.checkbox.toggle::before{
  background: #E0E0E0;
}
input[type='checkbox']:checked + .checkbox.toggle::before{
  background: #00A1E9;
  opacity: .5;
}
.checkbox.toggle::after{
  content: "";
  width: 20px;
  height: 20px;
  background: #FFF;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .24);
  top: 2px;
  left: 0;
  transition: all .3s;
}
input[type='checkbox']:checked + .checkbox.toggle::after{
  background: #00A1E9;
  left: 20px;
}

/* Disabled */
input[type='radio']:disabled + .radio,
input[type='checkbox']:disabled + .checkbox{
  opacity: .5;
}


/* Button
--------------------------------------------------*/
.btn,
.btn-flat,
.btn-outline,
.btn-circle{
  display: inline-block;
  min-width: 90px;
  line-height: 1em;
  color: #666;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  border-radius: 3px;
  padding: 12px 16px;
  margin: 0 0 4px;
  cursor: pointer;
  transition: all .3s;
  outline: none;
}

.btn,
.btn-outline{
  background: #FFF;
  border: 1px solid #E0E0E0;  
}

.btn-flat{
  background: none;
  border: 1px solid transparent;
}

.btn-circle{
  width: 32px;
  min-width: inherit;
  height: 32px;
  line-height: 32px;
  background: #FFF;
  border: 1px solid transparent;
  border-radius: 50%;
  padding: 0;
}

/* Hover */
.btn:hover,
.btn-circle:hover{
  color: #666;
  background: #F0F0F0;
}

.btn-flat:hover,
.btn-outline:hover{
  background: #F0F0F0;
}

/* Active */
.btn:active,
.btn-flat:active,
.btn-outline:active{
  box-shadow: 0 0 8px rgba(0, 0, 0, .24) inset;
}

/* Size : Min */
.btn-min{
  min-width: inherit;
  font-size: 12px;
  padding: 8px;
}

/* Size : Large */
.btn-large{
  min-width: 120px;
  font-size: 16px;
  padding: 16px 24px;
}
.btn-circle.btn-large{
  width: 64px;
  min-width: inherit;
  height: 64px;
  line-height: 64px;
  padding: 0;
}

/* Color : Blue */
.btn.btn-blue,
.btn.btn-blue:hover,
.btn-circle.btn-blue,
.btn-circle.btn-blue:hover{
  color: #FFF;
  background: #00A1E9;
  border-color: #00A1E9;
}
.btn.btn-blue:hover,
.btn-circle.btn-blue:hover{
  background: #2A7AAF;
}

.btn-flat.btn-blue{  
  color: #00A1E9;
}

.btn-outline.btn-blue{
  color: #00A1E9;
  border-color: #00A1E9;
}
.btn-outline.btn-blue:hover{
  color: #FFF;
  background: #00A1E9;
}

/* Color : Green */
.btn.btn-green,
.btn.btn-green:hover,
.btn-circle.btn-green,
.btn-circle.btn-green:hover{
  color: #FFF;
  background: #5CB85C;
  border-color: #5CB85C;
}
.btn.btn-green:hover,
.btn-circle.btn-green:hover{
  background: #4A934A;
}

.btn-flat.btn-green{
  color: #5CB85C;
}

.btn-outline.btn-green{
  color: #5CB85C;
  border-color: #5CB85C;
}
.btn-outline.btn-green:hover{
  color: #FFF;
  background: #5CB85C;
}

/* Color : Red */
.btn.btn-red,
.btn.btn-red:hover,
.btn-circle.btn-red,
.btn-circle.btn-red:hover{
  color: #FFF;
  background: #D43F3A;
  border-color: #D43F3A;
}
.btn.btn-red:hover,
.btn-circle.btn-red:hover{
  background: #AA322E;
}

.btn-flat.btn-red{
  color: #D43F3A;
}

.btn-outline.btn-red{
  color: #D43F3A;
  border-color: #D43F3A;
}
.btn-outline.btn-red:hover{
  color: #FFF;
  background: #D43F3A;
}

/* Color : Orange */
.btn.btn-orange,
.btn.btn-orange:hover,
.btn-circle.btn-orange,
.btn-circle.btn-orange:hover{
  color: #FFF;
  background: #EC971F;
  border-color: #EC971F;
}
.btn.btn-orange:hover,
.btn-circle.btn-orange:hover{
  background: #BD7919;
}

.btn-flat.btn-orange{
  color: #EC971F;
}

.btn-outline.btn-orange{
  color: #EC971F;
  border-color: #EC971F;
}
.btn-outline.btn-orange:hover{
  color: #FFF;
  background: #EC971F;
}

/* Disabled */
.btn:disabled,
.btn:disabled:hover,
.btn-flat:disabled,
.btn-flat:disabled:hover,
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-circle:disabled,
.btn-circle:disabled:hover{
  color: #999;
  background: #E0E0E0;
  border: 1px solid #E0E0E0;
  opacity: 1;
}

/* Icon */
.btn i,
.btn-flat i,
.btn-outline i{
  margin-right: 8px;
}

.btn-circle i{
  margin-right: 0;
}