.p-column{
  padding-inline: var(--padding-inline);
  padding-block: 16px 59px;
  overflow: hidden;
  @media(min-width:768px){
    padding-block: 30px 130px;
    position: relative;
    &::before{
      content: "";
      display: block;
      aspect-ratio: 1440 / 2613;
      background-image: url(../images/column/column-body-bg.svg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: absolute;
      top:  calc(100%* 378.4 / 2613);
      left: 0;
      right: 0;
      z-index: -1;
    }
  }
}
.p-column__heading{
  color: var(--main);
  padding-top: 4px;
}
.p-column__top-image{
  font-size: 24px;
  letter-spacing: 0.05em;
  line-height: calc(35/24);
  height: 115px;
  margin-top: 20px;
  text-align: center;
  align-content: center;
  position: relative;
  @media(min-width:768px){
    font-size: 32px;
    height: 197px;
  }
  &::before{
    content: "";
    display: block;
    background-image: url(../images/column/fv-bg02-sp.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: -24px;
    bottom: 0;
    right: -24px;
    @media(min-width:768px){
      background-image: url(../images/column/fv-bg02-pc.webp);
      width: 100vw;
      left: 50%;
      right: 0;
      translate: -50%;
    }
  }
}
.p-column__heading-text{
  margin-top: 25px;
  line-height: calc(114 / 4 / 16); 
  @media(min-width:768px){
    margin-top: 24px;
    text-align: center;
  }
}
.p-column__contents{
  margin-top: 62px;
  @media(min-width:768px){
    margin-top: 43px;
  }
}
.p-column__contents-h3{
  font-size: 20px;
  color: var(--main);
  text-align: center;
  font-weight: 600;
  padding-block: 9px;
  border-bottom: 2px solid var(--main);
  @media(min-width:768px){
    font-size: 24px;
  }
}
.p-column__contents-flex{
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 22.5px;
  counter-reset: number 0;
  @media(min-width:768px){
    gap: 57px;
    margin-top: 40px;
  }
}
.p-column__contents-container{
  display: flex;
  flex-direction: column;
  gap: 20px;
  @media(min-width:768px){
    align-items: center;
    flex-direction: row;
    gap: 48px;
    &:nth-child(even){
    flex-direction: row-reverse;
  }
  }
}
.p-column__contents-image{
  aspect-ratio: 463 / 393;
  @media(min-width:768px){
    width:  calc(100%* 463 / 960);
  }
}
.p-column__contents-text-box{
  @media(min-width:768px){
    flex: 1;
  }
}
.p-column__contents-h4{
  font-size: 18px;
  color: var(--main);
  line-height: calc(26/18);
  font-weight: 600;
  padding-block: 14.5px 8.5px;
  padding-left: 60px;
  border-bottom: 1px solid var(--main);
  white-space: nowrap;
  position: relative;
  @media(min-width:768px){
    font-size: 20px;
    padding-block: 12.5px 7.5px;
  }
  &::before{
    counter-increment: number 1;
    content: "0"counter(number);
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--base);
    width: 49px;
    aspect-ratio: 1;
    text-align: center;
    align-content: center;
    background-color: var(--main);
    position: absolute;
    top: 0;
    left: 0;
  }
}
.p-column__contents-p{
  line-height: calc(31.5/16);
  letter-spacing: 0.07em;
  &:first-child{
    margin-top: 16px;
  }
}
.p-column__btn{
  width: 263px;
  aspect-ratio: 263 / 58;
  margin-inline: auto;
  margin-top: 49px;
  @media(min-width:768px){
    margin-top: 40px;
  }
  &::after{
    right: 63.8px;
  }
}
.p-column__btn a{
    padding-left: 56.8px;
}