body{
    background-color: lemonchiffon;
}

.headttl {
  margin:  0;             /* デフォルトCSS打ち消し */
  position:  relative;    /* 位置調整 */
  font-weight:  normal;   /* 文字の太さ調整 */
  margin-bottom: 35px;    /* 周りの余白指定 */
  font-size: 40px;        /* 文字サイズ指定 */
  text-align:  center;    /* 文字位置指定 */
  padding-top: 20px;      /* 余白指定 */
}
p {
  margin:  0;             /* デフォルトCSS打ち消し */
  line-height: 2;         /* 行間調整 */
}
.headttl:before {
  content: '';            /* 空の要素を作る */
  width: 150px;           /* 幅指定 */
  height: 150px;          /* 高さ指定 */
  border-radius:  50%;    /* 丸くする */
  border: solid #ccc;     /* 枠線指定 */
  display:  block;        /* ブロック要素にする */
  position:  absolute;    /* 位置調整 */
  left:  0;               /* 位置調整 */
  right:  0;              /* 位置調整 */
  margin:  auto;          /* 位置調整 */
  top: 0;                 /* 位置調整 */
  z-index: -1;            /* 重なり調整 */
}
.headttl:after {
  content: '';            /* 空の要素を作る */
  width: 140px;           /* 幅指定 */
  height: 140px;          /* 高さ指定 */
  border-radius:  50%;    /* 丸くする */
  border: 1px solid #ccc; /* 枠線指定 */
  display:  block;        /* ブロック要素にする */
  position:  absolute;    /* 位置調整 */
  left:  0;               /* 位置調整 */
  right:  0;              /* 位置調整 */
  margin:  auto;          /* 位置調整 */
  top: 7px;               /* 位置調整 */
  z-index: -1;            /* 重なり調整 */
}

.font{
  font-weight: 900;
}

h2{
    background: linear-gradient(transparent 50%, #00e257e1 70%);
    margin: 0 0 10px 0;
    font-size:38px;
}

div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-main{
    width: 100px;
    height: 100px;
    display: inline-block;
    padding: 10px 10px 10px 10px;
    margin: 15px 15px 15px 15px;
    text-decoration: none;
    border-radius: 4px;
    color: #ffffff;
    background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #5e7fca;
    font-size: 200%;
  }

  .btn-main:active{
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
  }

  .btn-login {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    margin:10px 0px 15px;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*背景色*/
    border: solid 2px #d27d00;/*少し濃い目の色に*/
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
    height: 50px;
    width: 120px;
    font-size:20px;
  }

  .btn-login:active {
    border: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
  }

  .btn-logout {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 25px;
    text-decoration: none;
    color: #FFF;
    background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
    transition: .4s;
  }

  .btn-logout:hover {
    background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
  }

  .text-idpass{
  height:30px;
  font-size:20px;
  }

  label{
  font-size:20px;
  }