body{
  color: #000;
  background-color: #f2f2f2;
  font-size: 15px;
  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;
}

.tab3{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
	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;
}
#contents1:checked ~ .tab3_text .content1,
#contents2:checked ~ .tab3_text .content2,
#contents3:checked ~ .tab3_text .content3,
#contents4:checked ~ .tab3_text .content4 {
  display: grid;
}
#contents1:checked ~ .tab3_btn label[for="contents1"],
#contents2:checked ~ .tab3_btn label[for="contents2"],
#contents3:checked ~ .tab3_btn label[for="contents3"],
#contents4:checked ~ .tab3_btn label[for="contents4"] {
  background-color: #fc9325;
  color: #fff;
}

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

/*文字色の設定*/
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;
  }

  .tab3 {
    margin: 10px;
    padding: 10px 15px;
    font-size: 13px;
  }

  .tab3_ttl{
    font-size: 15px;
  }

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

  .tab3_btn label {
    margin: 0 5px;
    width: 23%;
    height: 35px;
    font-size: 13px;
    gap: 5px;
    border-radius: 6px;
  }

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

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