html{
	background-color: #CCC;
	text-align: center;
	margin-top: 10px;
}
body{
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items:center;
  overflow-x: hidden;
  /* Non-grid specific CSS */  
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


/*タブボタン部分*/
.goblin-one-regular {
  font-family: "Goblin One", serif;
  font-weight: 400;
  font-style: normal;
}
.tab a{
	text-decoration: none;
	color: white;
}
.tab li{
  padding: 5px 0.3em 0px 0.3em;
  cursor: pointer;
  font-family: "Goblin One", serif;
  font-size: 25px;
  background:black;
	border: 2px solid #cccccc;
	border-color: whitesmoke whitesmoke black black;
  list-style-type: none;
  border-radius: 5px 5px 0 0;
}
/*タブを選択したとき*/
.tab .clicked a{
	color: black;
}
.tab .clicked {
  background:white;
	border: 2px solid #cccccc;
	border-color: black black whitesmoke whitesmoke;
	color: black;
}
.tab{
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
}


/*ラジオボタンのデザイン*/
/* === ラジオボタンは非表示 ================== */
input[type="radio"]{
  display    : none;
}
 
 /* === 各ラジオボタンのラベルをボタンに変更 == */
label{
  font-weight: bold;
  font-style: italic;
  display    : inline-block;
  border     : 1px solid black;
  padding    : 4px;
  color      : white;
  background-color: red;
  height     : 10px;
  line-height: 6px;
  cursor: pointer;
}
label:hover {
  color      : yellow;
  background-color: blue;
}



img {
  width: 100%;
  vertical-align: bottom;
}

.content {
  transition: transform 0.3s;
  margin: 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  border: 1px solid;
}
.content:hover {
        transform: translateY(-10px);
}

.grid {
   margin: auto;
   margin-top: 20px;
   padding: 0px;
   width: 90%;
   display: grid;
   grid-gap: 0.2em;
   grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
   grid-auto-rows: 0px;
}

.text {
  background-color: white;
  color: black;
}

li{
  list-style: none;
}



@media (max-width: 800px) {
.grid {
   margin-top: 10px;
   width: 90%;
   grid-gap: 3px;
   grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
}
.content {
  margin: 2px;
}
}

@media (max-width: 619px) {
.grid {
   margin-top: 10px;
   width: 100%;
   grid-gap: 3px;
   grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
}
.content {
  margin: 2px;
}
  
.tab{
  width: 100%;
  margin: 0px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
} 
.tab li{
  width: 100%;
  height: 35px;
  font-size: 20px;
  padding-top: 5px;
}

}