body {
}

#wrapper{
    position: relative;
    height:800px;
    width: 100%;

    
    
}
/* ヘッダーバー */

header{
    position: fixed;
    width: 100%;
    height: 93px;
    background-color:white;
    z-index: 2;
}

a:visited{
    color:#5A5959;
}

#headlogo{
    position: relative;
    height: 70%;
    float: left;
    margin-left: 10px;
    margin-top: 11px;
}

h1{position: relative;
    float: left;
    font-family:;
    color: dimgray;
    margin-left: 10px;
    
}

.shift{
    position: relative;
    float: right;
    margin-right: 4%;
    font-family: '遊ゴシック';
    font-size: 20px;
    color:#5A5959;
    font-weight:;
    margin-top: 35px;
}

#logoutbtn{
    position: relative;
    float: right;
    height: 60px;
    margin-top: 15px;
    
    
}


/* mainview */
#mainview{position: relative;
    float: left;
    width: 100%;
    height: 707px;
    margin-left: 0px;
    margin-top:93px ;
}

/* スイッチボタン */

#switchbtns{
    position: relative;
    float:left;
    width: 150px;
    height: 660px;
}

#switchbtn1{
    position: relative;
    height: 218px;
}
#switchbtn2{
    position: relative;
    height: 218px;
}
#switchbtn3{
    position: relative;
    height: 218px;
}

.btn{
    width: 100%;
}

/* コンテンツ　　　ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー　*/
#contents{
    position: relative;
    float:left;
    width:1270px;
    height: 707px;
    background-color:#FFFDF8;
    
}

/* コンテンツ1です。　　　ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー　　*/
#contents1{
    position: relative;
    float:right;
    width:100%;
    height: 570px;
}
h2{
    position: relative;
    color:#2C445E;
    font-size: 25px;
    background-color:whitesmoke;
    margin-top: 0px;
    

}
/*コンディション*/
#condition{
    position: relative;
    float: left;
    float: left;
    height: auto;
    width: 300px;
    margin-left: 10%;
    margin-top: 80px;
    border: solid 1px;
    border-color: lightgray;
    text-align: center;
    background-color:;
}

#check1 p{
    font-weight: bold;
    color: dimgray;
    text-decoration: underline
}


/*セレクトボタンの部分ーーーーーーーーーーーーーーーーーーーー〜〜*/
.pt21{
  padding-top: 20px;
}
.inverse{
  background: #000;
  padding: 20px 0;
  color: #fff;
}
.select-wrap {
    position: relative;
}
.select-wrap:before {
    z-index: 1;
    position: absolute;
    right: 70px;
    top: 0;
    content: "\f123";
    font-family: "IonIcons";
    line-height: 43px;
    color: #7F878C;
    pointer-events: none;
    margin-top: 8px;
}
select{
    outline:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 8px 12px;
    border:1px solid #ddd;
    color:#828c9a;
    width:60%;
    border-radius:3px;
    margin-top: 10px;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #828c9a;
}
.select-wrap.select-primary:before{
  color:#fff;
}
.select-wrap.select-primary > select{
  background:#0084B4;
  color:#fff;
  border-color:#0084B4;
}
.select-wrap.select-primary > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}

.select-wrap.select-inverse:before{
  color:#fff;
}
.select-wrap.select-inverse > select{
  color:#fff;
  border-color: #fff;
}

.select-wrap.select-inverse > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}

/*空欄の箱*/
#kuuran{
    position: relative;
    float: left;
    width: 250px;
    height: 500px;
}

/*パーセント表示*/
#percentage{
    position: relative;
    float: left;
    height: 530px;
    width: 55%;
    margin-left:%;
    margin-top: 68px;
    margin-right: 100px;
}

#percentnum{
     position: relative;
    float: right;
    height: 440px;
    width: 90%;
}

#percentmess{
      position: relative;
    float: right;
    color: dimgray;
    font-size: 75px;
    font-weight: bold;
    color:#2C445E;
    
}

#per{
    position: relative;
    float: right;
    font-size: 510px;
    font-family:'arial narrow';
    margin-top: -43px;
    margin-bottom: 0px;
    font-weight: bold;
    color:#14253B;
}

#kigou{
    position: relative;
    float: right;
    font-family:'arial narrow';
    margin-top: 250px;
    margin-bottom: 0px;
    font-weight: bold;
    color:#14253B;
    font-size: 200px;
}

/*対策チェック*/
#chui{
    position: absolute;
    width: 100px;
    height: auto;
    left:0px;
    top: -100px;
    z-index: 2;
}

#countercheck{
    position: relative;
    float: left;
    width: 90%;
    height: 150px;
    margin-top:1%;
    margin-bottom: 60px;
    margin-left: 3%;;
    background-color: white;
    
}

#counterbar{
    position: relative;
    width: 30px;
    height: 150px;
    float:left;
    margin-right: 30px;
    background-color: #3EA88D;
}


/*チェックボタンの装飾*/

.counterbox{
    width: 17%;
    height: 70px;
    float: left;
    margin-right: 75px;
    margin-bottom: 4px;
    margin-top: 4px;
}

.checktitle{
    font-size: 15px;
    
}

.pt20{
  padding-top: px;
}

.checkbox-wrap{
}
.label-checkbox input[type="checkbox"]{
  display: none;
}
.label-checkbox{
  cursor: pointer;
  
  position: relative;
}
.label-checkbox .lever{
  display: block;
  color: #ccc;
  font-weight: normal;
  display: inline-block;
  padding: 8px 40px;
  border: 1px solid #e5e5e5;
  border-radius:20px;
  margin-right: 10px;
  margin-bottom: 10px;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox .lever:before{
  content:'';
  position: absolute;
  left: 4px;
  top:-8px;
  border: 1px solid #e5e5e5;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius:100%;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox:hover .lever:before{
   border-color: #ddd;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   background: #5cb85c;
   color: #fff;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   border-color:#5cb85c;
}
.label-checkbox input[type="checkbox"]:checked + .lever:before{
   left: 100%;
   margin-left: -44px;
   border-color: #fff;
}

.radio-wrap{
  
}
.label-radio input[type="radio"]{
  display: none;
}
.label-radio{
  cursor: pointer;
  font-size: 15px;
  color: #828c9a;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  margin-right: 1px;
}
.label-radio .lever:before{
  content:'';
  border: 1px solid #ddd;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  border-radius:10px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:before{
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform:scale(2);
}
.label-radio .lever:after{
  content:'';
  opacity: 0;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform:rotate(-200deg);
  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:after{
  opacity: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #5bc0de;
  border-bottom: 2px solid #5bc0de;
  transform:rotate(40deg);
}


#calc{
    position: relative;
    width: 40%;
    height:50px;
    background-color:#3EA88D;
    margin-top: 20px;
    margin-right: 30%;
    margin-bottom: 10px;
    float:right;
}

#calc p{
    color: whitesmoke;
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px
    
}




/* コンテンツ3　機能ーーーーーーーーーーーーーーーーーーーーーーーーー*/

#aboutservice{
    position: relative;
    float: left;
    width: 100%;
    height: 700px;
    margin-top: 10px;
    background-color: rgba(255,255,255,0.1);
}

#aboutbox{
    position: relative;
    margin-top: 250px;
    height: 450px;
    background-color: rgba(0,0,0,0.2);
}

.icon{
    position: relative;
    width:100%;
    float: left;
    margin-bottom: 25px;

    
}
#about1{
    position: relative;
    width:15%;
    height:500px;
    float: left;
    margin-left:13.8%;
    margin-top: -118px;
    
}

#about2{
    position: relative;
    width:15%;
    height:500px;
    float: left;
    margin-left:13.8%;
    margin-top: -118px;
    
}
#about3{
    position: relative;
    width:15%;
    height:500px;
    float: left;
    margin-left:13.8%;
    margin-top: -118px;
    
}

h3{
    position: relative;
    text-align: center;
    font-family:'遊ゴシック';
    font-size: 40px;
    color: #273037;
}

#aboutbox p{
    width: 270px;
    text-align: center;
    font-size: 20px;
    font-family:'遊ゴシック';
    color: #273037;
    margin-left:-30px;
    margin-top: -30px;
}


/* コンテンツ3のなかの過去データ表示ーーーーーーーーーーーーーーーーーーーーーーーーー*/

#logs{
  position: relative;
  float:left;
  width: 93%;
  height: 650px;
  margin-left:50px;
  margin-right:50px;

}

#graph{
    width:64%;
    margin-left: 100px;
    margin-top: 120px;
    border: solid 1px;
    border-color: #273037;
}

#datebox{
  position: relative;
  float:left;
  width: 100%;
  height: 50px;
  margin-left:0px;
  margin-top: 30px;
  font-weight: bold;
  font-size: 30px;
  color:#273037;
}

/*対策ページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#view{
    position: relative;
    width: 85%;
    height: 540px;
    margin-left: 7.5%;
    background-color:#FFFDF8;
}

#picselect{
    position: relative;
    width: 100%;
    height: 150px;
    border-bottom: solid 19px;
    border-bottom-color: rgba(62,168,141,0.35);
    
}

#centerpic{
    width:  80%;
    margin-left: 10%;
    height: 250px;
}

.picwaku{position: relative;
    float: left;
    width: 16%;
    height: 150px;
    margin-left: 7%;
    margin-top: 10px;
    text-align: center;
    
}

.picture{
    position: relative;
    float: left;
    width: 100%;
    height: 130px;
    border: solid 1px;
    z-index: 1;
    background-color: black;
    
}

#countertext{
    position: relative;
    float: left;
    width: 45%;
    height: 300px;
    margin-left: 5%;
    margin-top: 70px;
    color: dimgray;
}
#counterphoto{
    position: relative;
    float: right;
    width: auto;
    height: 280px;
    margin-right: 5%;
    margin-top: 150px;
    border:solid 1px;
}

h4{
    font-size: 30px;
    color:#273037;
}

/*リザルトページ*/

#result{
    width: 100%
}