@charset "utf-8";

body{
  font-family: 'Noto Sans JP',"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #444;
  background-color: #fff		;
}


/* header */

.header{
  display: block;
  /* justify-content: space-between; */
  padding: 15px 0 10px;
  position: relative;
  background-color: rgb(214, 255, 255);  /*ここ*/
}

/*.header:after{
  content: "";
  position: absolute;
  inset: 100% auto auto 5%;
  width: 90%;
  background-color: #444; #888
  height: 1px;
}*/
 /*border-bottom: dotted 3px #1a720d;*/

.mypage{
  margin: 20px 5% 10px; /*横位置変え*/
}

.header-container{
  display: flex;
  justify-content: center;
}

.header-title{
  margin: 0;
  font-size: 40px;
}

.header-description{
  display: block;
  position: relative;
  margin: 0;
  margin-left: 150px;
  padding: 3px 5px;
  background-color: #fff;
  border: solid 2px #222;
  border-radius: 7px;
  text-align: center;
}

.header-description::before,
.header-description::after{
  content: "";
  position: absolute;
  width: 20px;
  height: 0.8rem;
  inset: 10% auto auto 100%;
  background-color: #222;
  clip-path: polygon(
    0 0,
    100% 65%,
    0 90%
  );
  border: solid 5px #222;
}

.header-description::after{
  background-color: #fff;
  translate: -3px 0;
  border: none;
}

.header-img{
  /*width: 100px;background-color: rgba(255,255,255,0,552);*/
  width: 110px;
  height: 100px;
  
}

.menu{
  margin: 10px 40px 10px;
}

.menu-button{
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background-color: #d6ffff;
  border: transparent;
  /*box-shadow: 5px 5px 5px 1px #aaaaaa;*/
}

.menu-button:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}


.menu-button > hr{
  height: 4px;
  width: 70%;
  /*background-color: #888;*/
  background-color: rgb(102, 204, 204);
  margin: 10px auto;
  border: none;
  text-align: center;
}


.menu-button:hover{
  border-color: red;
  background: #b4e9ee;
}

/*.menu-button:active{
  box-shadow: none;
}*/

/* conrtent */

.main{
  padding: 10px;
  background-color: #fff; /*ここ*/
  /*padding-left: 7%;
  padding-right: 7%;
  padding-top: 2%;*/
}