/*  */
/* inisyalaiz */
/*  */
a{
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}

/*  */
/* common */
/*  */
/*  */

body {
  padding: 0;
  margin: 0;
  background-color: aqua;
}
/* p {
  font-size:  16px;
  padding: 0;
  margin: 0;
} */

span {
  cursor: pointer;
  border-radius: 80%;
  background-color: rgb(182, 182, 185);
}

header{
  margin: 0;
  padding: 0;
}

/*  */
/* header */
/*  */

.gridh{
  background-color: #333;
  display: grid;
  grid-template: 
  ".... ..... ... ...... ...." 1px
  ".... time  ... ...... ...." 12px
  ".... ..... ... ...... ...." 5px
  ".... hed   ... navi   ...." 48px
  ".... ..... ... ...... ...." 5px
  /4px  auto 4px auto 4px;
}
#getday{grid-area: time; font-size: 4px; color: #999;}
#hedp  {grid-area: hed;  font-size: 28px; color: rgb(255, 255, 255); white-space: nowrap}
#navi  {grid-area: navi;}
.navis{
  display: grid;
  grid-template: 
  ".... ..... ... ..... ... ..... ..." 
  ".... bush  ... tue   ... tubo  ..." 
  ".... ..... ... ..... ... ..... ..." 
  ".... maki  ... ude   ... helps ..." 
  ".... ..... ... ..... ... ..... ..." 
  /auto ;
}

#help  {grid-area: helps;font-size: 16px; color: rgb(255, 255, 255);}
#busha  {grid-area: bush;font-size: 16px; color: rgb(255, 255, 255);}
#tuea  {grid-area: tue;font-size: 16px; color: rgb(255, 255, 255);}
#makimonoa  {grid-area: maki;font-size: 16px; color: rgb(255, 255, 255);}
#udewaa  {grid-area: ude;font-size: 16px; color: rgb(255, 255, 255);}
#tuboa  {grid-area: tubo;font-size: 16px; color: rgb(255, 255, 255);}
#help,#busha,#tuea,#makimonoa,#udewaa,#tuboa {
  display: inline-block;
}


.nbutton{
  justify-content: center;
  font-size: 32px;
  display: grid;
  grid-template: 
  ".... ..... ..... ..... ..... ...... ...." 0px
  ".... ..... ..... ten   ..... ...... ...." 40px
  ".... ..... ..... ..... ..... ...... ...." 5px
  ".... one   ..... two   ..... three  ...." 40px
  ".... ..... ..... ..... ..... ...... ...." 5px
  ".... four  ..... five  ..... six    ...." 40px
  ".... ..... ..... ..... ..... ...... ...." 5px 
  ".... seven ..... eight ..... nine   ...." 40px
  ".... ..... ..... ..... ..... ...... ...." 5px 
  ".... ..... ..... zero  ..... ileven ...." 40px
  ".... ..... ..... ..... ..... ...... ...." 10px
  /auto 120px 0.05fr 120px 0.05fr 120px auto;
}
#d0{grid-area: zero;} #d1{grid-area: one;}  #d2{grid-area: two;}
#d3{grid-area: three;}#d4{grid-area: four;} #d5{grid-area: five;}
#d6{grid-area: six;}  #d7{grid-area: seven;}#d8{grid-area: eight;}
#d9{grid-area: nine;} #d10{grid-area: ten; font-size: 24px; color: tomato;}
#d11{grid-area: ileven;}
.nbutton #d0:hover, #d1:hover, #d2:hover, #d3:hover, #d4:hover, #d5:hover, #d6:hover, #d7:hover, #d8:hover, #d9:hover{
  color: rgb(0, 255, 191);
}
#d10:hover, #d11:hover{
  display: inline-block;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: red;
  background-image: linear-gradient(45deg, #70ffa0 0%, #b0ffd4 100%);
  transition: .2s;
}

.nbutton button{
  font-size: 32px;
  color: #FFF;
  background: #25a50b;/*背景*/
  border-bottom: solid 2px #31ee6a;
  border-radius: 8px;/*角*/
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2), 0 4px 4px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}


/*  */
/* main */
/*  */

main {
  justify-content: center;
  display: grid;
  grid-template:
  ".... .... ..... .... ..... .... ...." 
  ".... .... Nu0   .... b0    .... ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... dip0 dip0  dip0 dip0  dip0 ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... .... Nu1   .... b1    .... ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... dip1 dip1  dip1 dip1  dip1 ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... .... Nu2   .... b2    .... ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... dip2 dip2  dip2 dip2  dip2 ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... .... Nu3   .... b3    .... ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... dip3 dip3  dip3 dip3  dip3 ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... .... Nu4   .... b4    .... ...." 
  ".... .... ..... .... ..... .... ...." 2px
  ".... dip4 dip4  dip4 dip4  dip4 ...." 
  ".... .... ..... .... ..... .... ...." 2px
  /10%  1fr  200px 4px  200px  1fr 10% ;
}
#number0{grid-area: Nu0;}#number1{grid-area: Nu1;}#number2{grid-area: Nu2;}
#number3{grid-area: Nu3;}#number4{grid-area: Nu4;}
#button0{grid-area: b0;}#button1{grid-area: b1;}#button2{grid-area: b2;}
#button3{grid-area: b3;}#button4{grid-area: b4;}
#div0{grid-area: dip0;}#div1{grid-area: dip1;}#div2{grid-area: dip2;}
#div3{grid-area: dip3;}#div4{grid-area: dip4;}

#number0, #number1, #number2, #number3, #number4{
  font-size: 18px;
}
#button0:hover,#button1:hover,#button2:hover,#button3:hover, #button4:hover {
  display: inline-block;
  padding: 0.2em 0.4em;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  background-image: linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
  transition: .4s;
}

main .lei {
  display: flex;
  justify-content: center;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  align-content: flex-start;
}
main .lei p {
  font-size: 18px;
  padding: 2px;
  margin: 2px;
  background-color: royalblue;
  border-radius: 3px;
  transition: transform .3s;
}

.my-color{
  color: red;
}
/*  */
/* checkbox */
/*  */
input[type=checkbox] {
  display: none; /* checkboxを非表示にする */
}

input[type="checkbox"]:checked + label {
  background: #31A9EE;/* マウス選択時の背景色を指定する */
  color: #ffffff; /* マウス選択時のフォント色を指定する */
  }

label {
  margin: 1px; /* ラベル外側の余白を指定する */
  border: 2px solid #006DD9;/* ラベルの境界線を実線で指定する */
  display: inline-block;
  text-align: center;
  line-height: 33px;
  padding: 0 5px 0 5px;
  cursor: pointer;
  border-radius: 5px;
}



/* carousel */
/**/
.carousel {
  width: 80%;
  margin: 16px auto;
}

.container {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.carousel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  transition: transform .3s;
}

.carousel li {
  height: 100%;
  min-width: 100%;
}

.carousel li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#prev,
#next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(80,0,0, 8);
  color: aliceblue;
  font-size: 16px;
  padding: 0 8px 4px;
  margin: 0;
  cursor: pointer;
}

#prev:hover,
#next:hover {
  opacity: .8;
}

#prev {
  left: 0;

}
#next {
  right: 0;
}

.hidden{
  display: none;
}

.carousel nav {
  margin-top: 16px;
  text-align: center;
}

.carousel nav button + button {
  margin-left: 8px;
}

.carousel nav button {
  border: none;
  width: 16px;
  height: 16px;
  background: #ddd;
  border-radius: 50%;
  cursor: pointer;
}

nav .current {
  background: #999;
}


/*  */
/* footer */
/*  */

footer {
  margin: 48px 48px;
  display: flex;
  justify-content: center;
}

/*  */
/* foo */
/*  */

.topdat{
  font-size: 150%;
  display: flex;
  justify-content: center;
}
/* .gridtb{
  padding: 20px;
} */

.gridtb {
  margin: 30px auto;
  width: 500px;
}
.ment{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.ment li a {
  display: inline-block;
  width: auto;
  text-align: center;
  padding: 4px 8px;
  columns: #333;
  text-decoration: none;
  border-radius: 8px 8px 0 0;
}

.ment li a.act{
  background-color: #333;
  color: #FFF;
}
.ment li a:not(.act):hover{
  opacity: 0.5;
  transition: opacity 0.4s;
}
.contentg.act{
  background-color: #333;
  color: #FFF;
  min-height: 150px;
  padding: 12px;
  display: block;

}

.contentg{
  display: none;
}

/*  */
/* small screen */
/*  */
@media (min-width: 0px) and (maX-width: 620px){

  #hedp  {grid-area: hed;  font-size: 20px; color: rgb(255, 255, 255); white-space: nowrap}

}