@charset "UTF-8";
.smp-block {
  display: block;
}
@media screen and (min-width: 768px) {
  .smp-block {
    display: none;
  }
}

.pc-block {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc-block {
    display: block;
  }
}

main img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
main p {
  text-align: justify;
  word-break: break-all;
}
@media screen and (min-width: 768px) {
  main p {
    font-size: 14px;
  }
}
@media screen and (min-width: 1000px) {
  main p {
    font-size: 17px;
  }
}

#mv #pageTitle img {
  width: 100%;
}

#mvInner {
  height: auto;
}

#mv {
  background-image: url(../../img/bessatsu2025/topics/header-bg_sp.png);
  background-position: center;
  background-size: cover;
  height: 160px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  #mv {
    background-image: url(../../img/bessatsu2025/topics/header-bg.png);
    height: 260px;
  }
}
@media screen and (min-width: 1000px) {
  #mv {
    height: 320px;
  }
}
#mv #pageTitle {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 152px;
}
@media screen and (min-width: 768px) {
  #mv #pageTitle {
    width: 400px;
  }
}
@media screen and (min-width: 1000px) {
  #mv #pageTitle {
    width: 580px;
  }
}
#mv div.flower-img01 {
  width: 50px;
  position: absolute;
  bottom: 0;
  left: 20%;
  transform: translate(0, 50%);
}
@media screen and (min-width: 768px) {
  #mv div.flower-img01 {
    width: 90px;
    left: 25%;
    transform: translate(0, 50%);
  }
}
@media screen and (min-width: 1000px) {
  #mv div.flower-img01 {
    width: 123px;
  }
}
#mv div.flower-img02 {
  width: 50px;
  position: absolute;
  bottom: 0;
  right: 20%;
  transform: translate(0, 50%);
}
@media screen and (min-width: 768px) {
  #mv div.flower-img02 {
    width: 90px;
    right: 25%;
  }
}
@media screen and (min-width: 1000px) {
  #mv div.flower-img02 {
    width: 130px;
  }
}
#mv div.flower-img03 {
  position: absolute;
}
@media screen and (min-width: 768px) {
  #mv div.flower-img03 {
    width: 90px;
    right: 6%;
    bottom: 0;
    transform: translate(0, 120%);
  }
}
@media screen and (min-width: 1000px) {
  #mv div.flower-img03 {
    right: 12%;
  }
}

div.sec-topics-wrap {
  width: 90%;
  margin: auto;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  div.sec-topics-wrap {
    max-width: 1000px;
  }
}

section.sec01 {
  margin-top: 10%;
  /*sec01共通*/
  /**/
}
@media screen and (min-width: 768px) {
  section.sec01 {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}
section.sec01 div.cm-sec01-topics-number {
  width: 65%;
}
@media screen and (min-width: 768px) {
  section.sec01 div.cm-sec01-topics-number {
    width: 37%;
  }
}
section.sec01 div.cm-sec01-topics-number.topics02 {
  position: relative;
  right: -11%;
}
@media screen and (min-width: 768px) {
  section.sec01 div.cm-sec01-topics-number.topics02 {
    position: revert;
  }
}
section.sec01 p.cm-sec01-txt01 {
  width: 92%;
  margin: 5% auto 0;
  text-align: justify;
  word-break: break-all;
}
@media screen and (min-width: 768px) {
  section.sec01 p.cm-sec01-txt01 {
    width: 32%;
    margin: 0;
  }
}
section.sec01 div.sec01-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 5% 2%;
  position: relative;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  section.sec01 div.sec01-box {
    align-items: center;
    padding: 50px 0 50px 20px;
    margin-bottom: 0;
  }
}
section.sec01 div.sec01-box.topics02 {
  border: solid 5px #f2a7bb;
  border-radius: 30px;
}
@media screen and (min-width: 768px) {
  section.sec01 div.sec01-box.topics02 {
    margin-bottom: 30px;
  }
}
section.sec01 div.topics01-img01 {
  width: 22%;
  margin-left: 3%;
}
@media screen and (min-width: 768px) {
  section.sec01 div.topics01-img01 {
    width: 14%;
    order: 2;
    margin-left: 5%;
  }
}
section.sec01 div.topics02-img01 {
  width: 18%;
  margin-left: 5%;
}
@media screen and (min-width: 768px) {
  section.sec01 div.topics02-img01 {
    width: 12%;
    order: 2;
    position: absolute;
    top: 50px;
    right: 12%;
  }
}
section.sec01 div.topics03-img01 {
  width: 33%;
}
@media screen and (min-width: 768px) {
  section.sec01 div.topics03-img01 {
    width: 20%;
    order: 2;
    margin-left: 5%;
  }
}

section.sec03 {
  margin-bottom: 20%;
}
@media screen and (min-width: 768px) {
  section.sec03 {
    margin-bottom: 82px;
  }
}

section.sec02 {
  position: relative;
  margin-bottom: 38%;
}
@media screen and (min-width: 768px) {
  section.sec02 {
    margin-bottom: 150px;
  }
}
section.sec02 div.flower-img {
  width: 40%;
  position: absolute;
  bottom: -15%;
}
@media screen and (min-width: 768px) {
  section.sec02 div.flower-img {
    width: 30%;
    bottom: -38%;
    left: -6%;
  }
}

section.sec04 {
  border: solid 5px #f2a7bb;
  border-radius: 30px;
  padding: 10% 0;
  margin-bottom: 15%;
}
@media screen and (min-width: 768px) {
  section.sec04 {
    margin-bottom: 20px;
    padding: 50px 0;
  }
}
section.sec04 div.sec04-inner {
  width: 90%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec04 div.sec04-inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  section.sec04 div.sec04-box {
    width: 50%;
    padding: 0 4%;
  }
}
section.sec04 div.sec04-box:first-child {
  padding-bottom: 10%;
  margin-bottom: 10%;
  border-bottom: dashed 5px #f2a7bb;
}
@media screen and (min-width: 768px) {
  section.sec04 div.sec04-box:first-child {
    border: none;
    border-right: dashed 5px #f2a7bb;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
section.sec04 div.sec04-box div.sec04-img {
  width: 80%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec04 div.sec04-box div.sec04-img {
    width: 90%;
  }
}

section.sec05 div.sec05-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0 2% 5% 2%;
  position: relative;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  section.sec05 div.sec05-box {
    align-items: center;
    padding: 0 0 0 20px;
    margin-bottom: 50px;
  }
}
section.sec05 div.cm-sec01-topics-number {
  width: 65%;
}
@media screen and (min-width: 768px) {
  section.sec05 div.cm-sec01-topics-number {
    width: 37%;
    margin-right: 5%;
  }
}
section.sec05 div.topics06-img01 {
  width: 22%;
  margin-left: 3%;
}
@media screen and (min-width: 768px) {
  section.sec05 div.topics06-img01 {
    width: 26%;
    order: 2;
    margin-left: 5%;
  }
}
section.sec05 p {
  width: 92%;
  margin: 5% auto 0;
  text-align: justify;
  word-break: break-all;
}
@media screen and (min-width: 768px) {
  section.sec05 p {
    width: 26%;
    margin: 0;
  }
}

section.sec06 {
  margin-bottom: 20%;
}
@media screen and (min-width: 768px) {
  section.sec06 {
    margin-bottom: 80px;
  }
}
section.sec06 div.sec06-inner {
  position: relative;
}
section.sec06 div.topics07-img01 {
  position: absolute;
  top: 0;
}
@media screen and (min-width: 768px) {
  section.sec06 div.topics07-img01 {
    width: 30%;
    top: -20px;
    right: 5%;
  }
}
section.sec06 p {
  position: absolute;
  top: 69%;
  left: 0;
  right: 0;
  width: 89%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec06 p {
    width: 28%;
    left: 42%;
    right: auto;
    top: auto;
    bottom: 18%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec06 p {
    bottom: 25%;
  }
}

section.sec07 {
  margin-bottom: 20%;
}
@media screen and (min-width: 768px) {
  section.sec07 {
    margin-bottom: 72px;
  }
}
@media screen and (min-width: 768px) {
  section.sec07 div.sec07-inner div.sec07-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
section.sec07 div.sec07-inner div.sec07-box div.topics08-number {
  width: 70%;
  margin: 10% auto 5%;
}
@media screen and (min-width: 768px) {
  section.sec07 div.sec07-inner div.sec07-box div.topics08-number {
    width: 35%;
    margin: 0;
    margin-left: 5%;
  }
}
section.sec07 div.sec07-inner div.sec07-box p {
  width: 89%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec07 div.sec07-inner div.sec07-box p {
    width: 40%;
    margin: 0;
    margin-left: 8%;
  }
}

section.sec08 {
  border: solid 5px #5fbed4;
  border-radius: 30px;
  padding: 10% 0;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  section.sec08 {
    margin-bottom: 82px;
    padding: 50px 0;
  }
}
section.sec08 div.sec08-inner {
  width: 90%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec08 div.sec08-inner {
    width: 60%;
  }
}
section.sec08 div.sec08-box {
  position: relative;
}
section.sec08 div.sec08-box:first-child {
  padding-bottom: 10%;
  margin-bottom: 10%;
  border-bottom: dashed 5px #7fcbdd;
}
@media screen and (min-width: 768px) {
  section.sec08 div.sec08-box:first-child {
    padding-bottom: 40px;
    margin-bottom: 50px;
  }
}
@media screen and (min-width: 768px) {
  section.sec08 div.sec08-box div.topics09-img {
    width: 90%;
    margin: auto;
  }
}
section.sec08 div.sec08-box div.topics10-img {
  width: 50%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  section.sec08 div.sec08-box div.topics10-img {
    width: 40%;
  }
}
section.sec08 div.sec08-box div.flower-img01 {
  position: absolute;
  width: 30%;
  top: -40%;
  left: -15%;
}
@media screen and (min-width: 768px) {
  section.sec08 div.sec08-box div.flower-img01 {
    width: 30%;
    top: -38%;
    left: -45%;
  }
}
section.sec08 div.sec08-box div.flower-img02 {
  position: absolute;
  width: 40%;
  bottom: -30%;
  right: -15%;
}
@media screen and (min-width: 768px) {
  section.sec08 div.sec08-box div.flower-img02 {
    width: 37%;
    bottom: -38%;
  }
}
section.sec08 div.sec08-box div.flower-img03 {
  position: absolute;
  width: 20%;
  top: 10%;
  right: -15%;
}
@media screen and (min-width: 768px) {
  section.sec08 div.sec08-box div.flower-img03 {
    top: 20%;
    right: -45%;
  }
}
section.sec08 div.sec08-box p {
  margin-top: 5%;
}

div.btm-illust {
  margin: auto;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  div.btm-illust {
    max-width: 1100px;
    margin-bottom: 50px;
  }
}/*# sourceMappingURL=topics.css.map */