@charset "utf-8";
/* CSS Document */
#S01 .contents:nth-child(1) .contentsDetail {
    max-width: inherit;
    padding-inline: 0;
}
#S01 .contents:nth-child(1) .contentsDetail img {
  width: 100%;
}
#S01 h2 {
  font-size: calc(var(--text-h2) * 1.8);
  color: #9e937d;
}
#S01 .contents:nth-child(2) .contentsDetail {
  padding: clamp(2em, 6.4vw, 4em) 0;
}
#S01 h2 span {
  font-size: calc(var(--text-h2) * 0.8);
}
#S01 .detailBox {
  padding: 0;
}
#S01 .detail {
  margin: clamp(1em, 3.2vw, 2em) 0;
}
#S01 .rightBox {
  flex: 1;
  background: #d7dce3;
  padding: clamp(0.5em, 1.6vw, 1em) clamp(1.5em, 4.8vw, 3em);
}
#S01 .rightBox h4 {
  text-align: left;
  font-size: calc(var(--text-h4) * 1.2);
}
#S01 .rightBox p {
  text-align: left;
}
#c01 .leftBox {
  width: 600px;
}
#c02 {
  background: #d7dce3;
}
#c02 .img {
  max-width: 800px;
  margin: auto;
}
#c02 .text {
    padding: 0 1.5em 2em;
}
#c02 .text h4 small {
    display: block;
    font-size: calc(var(--text-h4) * 0.8);
    padding: 10px 0 10px;
    line-height: 1.4em;
}
#c05 h4 {
    min-height: 80px;
}
#c05 h4 small {display: block;font-size: calc(var(--text-h4) * 0.8);}

#S01 h5 {
  font-size: calc(var(--text-h5) * 1.1);
  background: #716752;
  color: #fff;
  width: fit-content;
  margin: auto;
  padding: 10px;
}
.detail h3 {
  margin: 0.75em 0;
}
#c05 h5 {
  width: auto;
}
#c05 p {
  text-align: left;
}
#S02 {}
#S02 .leftBox {
  flex: 1;
  padding: 0 2em;
}
#S02 .rightBox {
  width: 600px;
}
#S02 .leftBox h4 {
  color: #9e937d;
}
#S02 .leftBox h5 {
  width: auto;
  background: #9e937d;
  color: #fff;
}
#S02 .leftBox p {
  text-align: left;
}
#S02 #ranking {
  padding: clamp( 1em, 3.2vw, 2em ) 0 clamp( 1em, 4.8vw, 3em );
}
#S02 #family {
  padding: clamp( 1em, 3.2vw, 2em ) 0 clamp( 1em, 4.8vw, 3em );
}
#S02 #family > ul {
  display: flex;
  flex-flow: wrap;
  gap: 60px;
}
#S02 #family > ul > li {
  width: calc(100% / 2 - 30px);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

#S02 #family h4 {
  text-align: left;
  display: flex;
  margin: 0 0 1em;
}
#S02 #family strong {
  background: #9e937d;
  color: #fff;
  padding: 10px 20px;
  margin: 0 7px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#S02 #family h4 span {
    line-height: 1.6em;
    display: flex;
    align-items: center;
}
#S02 #family p {
  text-align: left;
}
#support {}
#support ul {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}
#support li {
  width: calc(100% / 2 - 10px);
  background: #efece6;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5em 0;
}
#support  h5 {
    font-size: calc(var(--text-h5) * 1.2);
}
#support  h5 small {
font-size: calc(var(--text-h5) * 1.0);}

/*----------------------------------------------------------- 1280px */
@media (max-width: 1280px) {
  #S01 .contents:nth-child(2) .contentsDetail {
    padding-inline: 20px;
  }
  #S02 .contentsDetail {
    padding-inline: 20px;
  }
}

/*----------------------------------------------------------- 1024px */
@media (max-width: 1024px) {
#S01 .detailBox {
    flex-flow: column;
    background: #d7dce3;
}
#c01 .leftBox {
    width: 100%;
}
#c05 .flexBox3 ul {
    flex-flow: wrap;
}
#c05 .flexBox3 ul li {
    width: calc(100% / 2 - 10px);
}
#c05 h4 {
    min-height: inherit;
}
#S02 .detailBox {
    flex-flow: column;
    align-items: center;
}
#S02 .leftBox {
    padding: 0;
}
#S02 .rightBox {
    width: 100%;
}
#S02 #family > ul {
    flex-flow: column;
}
#S02 #family > ul > li {
    width: 100%;
align-items: center;
}
}

/*----------------------------------------------------------- 768px */
@media (max-width: 768px) {

#c05 .flexBox3 ul li {
    width: 100%;
}
#S02 #family h4 {
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
}
#S02 #family strong {
    margin: 0 0 10px;
}
#support li {
    width: 100%;
}
}