body{
  color: #000;
  background-color: #f2f2f2;
  font-size: 17px;
  font-family: "BIZ UDPShinGothic", "BIZ UDP新ゴ", sans-serif;
}

.tab1_ttl{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  gap: 20px;
}
.tab1_ttl img{
  width: 80px;
  height: 80px;
}
.tab1_ttl p{
  font-size: 30px;
}

input[type="radio"]{
  display: none;
}
/*input[type="radio"]:checked + label {
  background-color: #fc9325;
  color: #fff;
}*/
label:hover {
  background-color: #fffaf5;
}

/*ステータス*/
.tab2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 20px;
  padding: 10px 50px;
  background-color: #fff;
  border: 3px solid #fc9325;
  border-radius: 8px;
}
.tab2_ttl{
  text-align: left;
  margin: 0;
  width: 100%;
  font-size: 17px;
  color: #fc9325;
}
.tab2_btn{
  margin: 5px;
}
.tab2_btn label{
  display: inline-flex;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  align-items: center;
  border: 2px solid #fc9325;
  border-radius: 8px;
  width: 100px;
  height: 30px;
  margin: 5px;
  font-size: 15px;
  font-weight: bold;
  color: #fc9325;
  background-color: #fff;
  cursor: pointer;
}
.tab2_text > div {
  display: none;
}
#tab2_contents1:checked ~ .tab2_text .content1,
#tab2_contents2:checked ~ .tab2_text .content2,
#tab2_contents3:checked ~ .tab2_text .content3,
#tab2_contents4:checked ~ .tab2_text .content4 {
  display: grid;
}
#tab2_contents1:checked ~ .tab2_btn label[for="tab2_contents1"],
#tab2_contents2:checked ~ .tab2_btn label[for="tab2_contents2"],
#tab2_contents3:checked ~ .tab2_btn label[for="tab2_contents3"],
#tab2_contents4:checked ~ .tab2_btn label[for="tab2_contents4"] {
  background-color: #fc9325;
  color: #fff;
}
.tab2_text{
  grid-column: 1 / 6;
  text-align: left;
  width: 100%;
  margin: 0;
/*  margin-left: 50px;*/
}
.tab2_text p{
  margin-top: 10px;
}

/*スキル*/
.tab3{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 20px;
  padding: 10px 50px;
  background-color: #fff;
  border: 3px solid #fc9325;
  border-radius: 8px;
}

.tab3_ttl{
  text-align: left;
  margin: 0;
  width: 100%;
  font-size: 17px;
  color: #fc9325;
}
.tab3_btn{
  margin: 5px;
}
.tab3_btn label{
  display: inline-flex;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  align-items: center;
  border: 2px solid #fc9325;
  border-radius: 8px;
  width: 100px;
  height: 30px;
  margin: 5px;
  font-size: 15px;
  font-weight: bold;
  color: #fc9325;
  background-color: #fff;
  cursor: pointer;
}

.tab3_text > div {
  display: none;
}
#tab3_contents1:checked ~ .tab3_text .content1,
#tab3_contents2:checked ~ .tab3_text .content2,
#tab3_contents3:checked ~ .tab3_text .content3,
#tab3_contents4:checked ~ .tab3_text .content4,
#tab3_contents5:checked ~ .tab3_text .content5 {
  display: grid;
}
#tab3_contents1:checked ~ .tab3_btn label[for="tab3_contents1"],
#tab3_contents2:checked ~ .tab3_btn label[for="tab3_contents2"],
#tab3_contents3:checked ~ .tab3_btn label[for="tab3_contents3"],
#tab3_contents4:checked ~ .tab3_btn label[for="tab3_contents4"],
#tab3_contents5:checked ~ .tab3_btn label[for="tab3_contents5"] {
  background-color: #fc9325;
  color: #fff;
}

.tab3_text{
  grid-column: 1 / 6;
  text-align: left;
  width: 100%;
  margin: 0;
/*  margin-left: 50px;*/
}
.tab3_text p{
  margin-top: 10px;
}

/*EX*/
.tab4{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  margin: 20px;
  padding: 10px 50px;
  background-color: #fff;
  border: 3px solid #fc9325;
  border-radius: 8px;
}
.tab4_ttl{
  text-align: left;
  margin: 0;
  width: 100%;
  font-size: 17px;
  color: #fc9325;
}
.tab4 p{
  text-align: left;
  line-height: 1.5;
}

/*文字色の設定*/
span{
  color: #fc9325;
  font-size: 17px;
}
.red{
  color: #f00;
}
.blue{
  color: #0ABFFF;
}
.green{
  color: #63ED01;
}

/* --- スマホ用の設定  --- */
@media screen and (max-width: 768px) {
  .tab1_ttl p{
    font-size: 18px;
    font-style: bold;
  }

  .tab1_ttl img{
    width: 50px;
    height: 50px;
  }

  .tab2, .tab3, .tab4 {
    margin: 10px;
    padding: 10px 15px;
    font-size: 13px;
    border: 2px solid #fc9325;
  }

  .tab2_ttl, .tab3_ttl, .tab4_ttl{
    font-size: 12.5px;
  }

  .tab2_btn, .tab3_btn {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    width: 100%;
    margin: 5px;
    margin-bottom: 10px;
  }

  .tab2_btn label, .tab3_btn label {
    margin: 0 5px;
    width: 23%;
    height: 28px;
    font-size: 12px;
    gap: 5px;
    border-radius: 6px;
  }

  .tab2_text, .tab3_text {
    font-size: 13px;
  }
  span{
    font-size: 13px;
  }
}

/* --- さらに小さい画面 (480px以下) --- */
@media screen and (max-width: 480px) {
  .tab2_btn label, .tab3_btn label {
    width: 100%;
  }
}