@charset "utf-8";
/* CSS Document */
#S01 {
  padding: 0 0 clamp(2em, 6.4vw, 4em);
}
#S02 {
  padding: 0 0 clamp(2em, 6.4vw, 4em);
}
#S03 {
  padding: clamp(2em, 6.4vw, 4em) 0;
}
#S01 .contents:nth-child(1) .contentsDetail {
  max-width: inherit;
}
#S01 .contents:nth-child(1) .contentsDetail img {
  width: 100%;
}
#S01 .contents:nth-child(2) .contentsDetail {
  padding: clamp(2em, 6.4vw, 4em) 0;
}
#S02 .contents:nth-child(1) .contentsDetail {
  max-width: inherit;
}
#S02 .contents:nth-child(1) .contentsDetail img {
  width: 100%;
}
#S02 .contents:nth-child(2) .contentsDetail {
  padding: clamp(2em, 6.4vw, 4em) 0;
}
#S03 .flexBox {
  padding: 0 0 2em;
}
#S03 .flexBox ul {
  display: flex;
}
#S03 .flexBox4 ul {justify-content: center;}
#S03 .flexBox4 ul li h4 {font-size: calc(var(--text-h4) * 0.8);}

/*----------------------------------------------------------- 1280px */
@media (max-width: 1280px) {
#S01 .contents:nth-child(1) .contentsDetail {padding-inline: 0;}
#S01 .contents:nth-child(2) .contentsDetail {padding-inline: 20px;}
#S02 .contents:nth-child(1) .contentsDetail {padding-inline: 0;}
#S02 .contents:nth-child(2) .contentsDetail {padding-inline: 20px;}
}
/*----------------------------------------------------------- 1024px */
@media (max-width: 1024px) {
#S03 .flexBox4 ul li {
    width: calc(100% / 2 - 10px);
}
}
/*----------------------------------------------------------- 768px */
@media (max-width: 768px) {
#S03 .flexBox4 ul {display: flex;flex-flow: wrap;}
#S03 .flexBox ul {
    flex-flow: wrap;
    justify-content: center;
}
#S03 .flexBox ul li {
    width: calc(100% / 2);
}
}

/*----------------------------------------------------------- 768px */
@media (max-width: 768px) {
#S03 .flexBox4 ul li {padding: 0;}

}