.p-area{
  padding-block-start:calc(50/ 16 * 1rem) ;
  padding-block-end: calc(120/ 16 * 1rem);
  
}
.p-area__tabs{
  margin-block-start:calc(30/ 16 * 1rem);
}
.p-tabs {
  background-color: #fff;
  text-align: center;
}

.p-tabs__header {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.p-tab__item {
  max-inline-size: 340px;
  inline-size: 100%;
  display: block;
  font-size: 24px;
  text-align: center;
  background-color: #f8f8f8;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 900;
  @media screen and (max-width: 768px) {   
    font-size: 20px;
}
}


.p-tab__item.is-active {
  background-color: #f6cc00;
  color: #fff;
  border-color: #f6cc00;
}

.p-area__tabs {
  max-width: 1036px;
  inline-size: 100%;
  margin-inline: auto;
}

input[name="tab__item"] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.p-tab__content {
  display: none;
  overflow: hidden;
  border: 10px solid #f6cc00;
}
.p-tab__content-item{
  display: flex;
  justify-content: space-between;
  padding-block:clamp(1.25rem, -3.036rem + 8.93vw, 5rem);
  padding-inline:clamp(1.875rem, -2.411rem + 8.93vw, 5.625rem);
  @media screen and (max-width: 768px) {
    flex-direction: column;
    padding-block:16px;
    padding-inline:16px;
  }
    

}
.p-tab__content-img{
  inline-size:clamp(28.125rem, 20.411rem + 16.07vw, 34.875rem);
  flex-shrink: 0;

  img{
    aspect-ratio: 558/558;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  @media screen and (max-width: 768px) {
    margin-inline: auto;
  }
}
.p-tab__textarea{
  inline-size: min(100%, 330px);
  background-color: #F8F8F8;
  border-radius: 10px;
  padding: calc(24/ 16 * 1rem);
  @media screen and (max-width: 768px) {
    inline-size: 100%;
  }
}
.p-tab__area-title{
  font-size: calc(16/ 16 * 1rem);
  color: #BB0D25;
  font-weight: 900;
  letter-spacing: 0.089em;
  line-height: calc(24 / 16);
  @media screen and (max-width: 768px) {
    font-size: 16px;
    
  }
}
.p-tab__area-text{
font-size: calc(16/ 16 * 1rem);
font-weight: 900;
letter-spacing: 0.089em;
line-height: calc(32 / 16);
margin-block-start:calc(16/ 16 * 1rem);
  text-align: left;
  @media screen and (max-width: 768px) {
    font-size: 16px;
  }
}
.p-tab__caption{
  font-size: calc(24/ 16 * 1rem);
  font-weight: 900;
  text-align: center;
  margin-block-start:calc(24/ 16 * 1rem);
}
input[name="tab__item"]:checked + .p-tab__item {
  background-color: #f6cc00;
  color: #fff;
  border-color: #f6cc00;
}

#p-tab1:checked ~ #p-tab__content,
#p-tab2:checked ~ #p-tab__content2,
#p-tab3:checked ~ #p-tab__content3 {
  display: block;
}