@charset "UTF-8";

/*---------------------------------------------------------------
　　　common
---------------------------------------------------------------*/
/* =====================================================================
*   sections
* =================================================================== */
/*-------------  sections top  -----------------------------*/
#sections .sub_mv h1 {
  color: #b6d936;
}

@media screen and (min-width: 768px) {
  #sections .sub_mv h2.on_ttl {
    color: #fff;
    left: 50%;
    margin: calc(200 / 1856 * 100%) 0 0 calc(250 / 1856 * 100%);
  }
}

/*-------------  chart -----------------------------*/
.chart p {
  text-align: center;
  padding: 0 0 2em;
}

.chart .inner {
  max-width: 1000px;
  margin: auto auto calc(120 / 750 * 100%);
}

@media screen and (min-width: 768px) {
  .chart .inner {
    padding: 0;
    margin: auto auto calc(120 / 1000 * 100%);
  }
}

.chart .inner img {
  position: relative;
  z-index: -1;
}

.chart .inner a {
  display: block;
  position: absolute;
  z-index: 10;
}

.chart .inner a:hover {
  background: rgba(255, 255, 255, 0.2);

}

@media screen and (max-width: 767px) {
  .chart .inner a {
    width: calc(520 / 750 * 100%);
    height: 2.2em;
    top: 0;
    right: 0;
  }

  .chart .inner a.s02 {
    margin-top: calc(73.5 / 750 * 100%);
  }

  .chart .inner a.s03 {
    margin-top: calc((73.5*2) / 750 * 100%);
  }

  .chart .inner a.s04 {
    margin-top: calc((73.5*3) / 750 * 100%);
  }

  .chart .inner a.s05 {
    margin-top: calc((73.5*4) / 750 * 100%);
  }

  .chart .inner a.s06 {
    margin-top: calc((73.5*5) / 750 * 100%);
  }

  .chart .inner a.s07 {
    margin-top: calc((73.5*6) / 750 * 100%);
  }

  .chart .inner a.s08 {
    margin-top: calc((73.5*7) / 750 * 100%);
  }

  .chart .inner a.s08b {
    margin-top: calc((73.5*8) / 750 * 100%);
  }

  .chart .inner a.s09 {
    margin-top: calc((73.5*9) / 750 * 100%);
  }

  .chart .inner a.s10 {
    margin-top: calc((73.5*10) / 750 * 100%);
  }

  .chart .inner a.s11 {
    margin-top: calc((73.5*11) / 750 * 100%);
  }

  .chart .inner a.s11b {
    margin-top: calc((73.5*12) / 750 * 100%);
  }

  .chart .inner a.s12 {
    margin-top: calc((73.5*13) / 750 * 100%);
  }

  .chart .inner a.s13 {
    margin-top: calc((73.5*14) / 750 * 100%);
  }

  .chart .inner a.s13b {
    margin-top: calc((73.5*15) / 750 * 100%);
  }

  .chart .inner a.s14 {
    margin-top: calc((73.5*16) / 750 * 100%);
  }
  
  .chart .inner a.s15 {
    margin-top: calc((73.5*17) / 750 * 100%);
  }
  .chart .inner a.s16 {
    margin-top: calc((73.5*18) / 750 * 100%);
  }
  .chart .inner a.s08b,
  .chart .inner a.s09,
  .chart .inner a.s10,
  .chart .inner a.s11,
  .chart .inner a.s12,
  .chart .inner a.s10b,
  .chart .inner a.s15 {
    width: calc(460 / 750 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .chart .inner a {
    width: calc(40 / 1000 * 100%);
    height: calc(440 / 1000 * 100%);
    top: 0;
    left: 0;
    margin-top: calc(250 / 1000 * 100%);
  }

  .chart .inner a.s02 {
    margin-left: calc(53.5 / 1000 * 100%);
  }

  .chart .inner a.s03 {
    margin-left: calc((53.5*2) / 1000 * 100%);
  }

  .chart .inner a.s04 {
    margin-left: calc((53.5*3) / 1000 * 100%);
  }

  .chart .inner a.s05 {
    margin-left: calc((53.5*4) / 1000 * 100%);
  }

  .chart .inner a.s06 {
    margin-left: calc((53.5*5) / 1000 * 100%);
  }

  .chart .inner a.s07 {
    margin-left: calc((53.5*6) / 1000 * 100%);
  }

  .chart .inner a.s08 {
    margin-left: calc((53.5*7) / 1000 * 100%);
  }

  .chart .inner a.s08b {
    margin-left: calc((53.5*8) / 1000 * 100%);
  }

  .chart .inner a.s09 {
    margin-left: calc((53.5*9) / 1000 * 100%);
  }

  .chart .inner a.s10 {
    margin-left: calc((53.5*10) / 1000 * 100%);
  }

  .chart .inner a.s10b {
    margin-left: calc((53.5*10) / 1000 * 100%);
  }

  .chart .inner a.s11 {
    margin-left: calc((53.5*11) / 1000 * 100%);
  }

  .chart .inner a.s11b {
    margin-left: calc((53.5*12) / 1000 * 100%);
  }

  .chart .inner a.s12 {
    margin-left: calc((53.5*13) / 1000 * 100%);
  }

  .chart .inner a.s13 {
    margin-left: calc((53.5*14) / 1000 * 100%);
  }

  .chart .inner a.s13b {
    margin-left: calc((53.5*15) / 1000 * 100%);
  }

  .chart .inner a.s14 {
    margin-left: calc((53.5*16) / 1000 * 100%);
  }
  .chart .inner a.s15 {
    margin-left: calc((53.5*17) / 1000 * 100%);
  }
  .chart .inner a.s16 {
    margin-left: calc((53.5*18) / 1000 * 100%);
  }
  .chart .inner a.s09,
  .chart .inner a.s10,
  .chart .inner a.s11,
  .chart .inner a.s12,
  .chart .inner a.s08b,
  .chart .inner a.s10b,
  .chart .inner a.s15 {
    height: calc(425 / 1000 * 100%);
    margin-top: calc(315 / 1000 * 100%);
  }
}

/*-------------  紹介リスト　 -----------------------------*/
.top_wrap {
  max-width: 1240px;
  margin: auto;
}

.sections_box dl {
  padding-left: calc(130 / 750 * 100%);
}

@media screen and (min-width: 768px) {
  .sections_box dl {
    padding-left: calc(260 / 1856 * 100%);
  }
}

.sections_box dl dt {
  position: relative;
  font-size: 105%;
  line-height: 1.3;
  background: #f1f8d7;
  border-radius: 15px;
  vertical-align: middle;
  padding: 0.8em 1em;
  font-weight: bold;
  counter-increment: count;
  margin-bottom: calc(40 / 750 * 100%);
}

@media screen and (min-width: 768px) {
  .sections_box dl dt {
    margin-bottom: calc(30 / 1856 * 100%);
  }
}

.sections_box dl dt:before {
  content: counter(count);
  font-size: 10.4rem;
  line-height: 0.8;
  font-family: "Concert One";
  font-weight: normal;
  color: #b6d936;
  vertical-align: middle;
  position: absolute;
  left: -1.1em;
  display: block;
  top: 0;
  width: 1em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .sections_box dl dt:before {
    font-size: 7.8rem;
    width: calc(180 / 1856 * 100%);
    left: 0;
    margin-left: calc(180 / 1856 * 100% * -1);
  }
}

@media screen and (min-width: 768px) {
  .sections_box dl dt:after {
    content: "";
    display: block;
    background: #f1f8d7;
    font-family: "Concert One";
    font-weight: normal;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(120 / 1856 * 100%);
    max-width: 70px;
    height: 100%;
    border-radius: 15px;
    text-align: center;
    margin-left: calc(300 / 1856 * 100% * -1);
  }
}

.sections_box dl dd {
  padding: 5px 1.5em;
  margin-bottom: calc(50 / 750 * 100%);
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  .sections_box dl dd {
    line-height: 2.25;
    margin-bottom: calc(40 / 1856 * 100%);
  }
}

.sections_box dl dd.in_photo p,
.sections_box dl dd.in_photo2 p {
  display: block;
}

.sections_box dl dd.in_photo .photo figure,
.sections_box dl dd.in_photo2 .photo figure {
  display: block;
  margin-top: 1em;
}

.sections_box dl dd.in_photo .photo figure img,
.sections_box dl dd.in_photo2 .photo figure img {
  border-radius: 15px;
}

.sections_box dl dd.in_photo .photo figure figcaption,
.sections_box dl dd.in_photo2 .photo figure figcaption {
  font-size: 2rem;
}

@media screen and (min-width: 768px) {

  .sections_box dl dd.in_photo,
  .sections_box dl dd.in_photo2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .sections_box dl dd.in_photo .photo figure figcaption,
  .sections_box dl dd.in_photo2 .photo figure figcaption {
    font-size: 1.5rem;
  }

  .sections_box dl dd.in_photo p {
    width: 50%;
  }

  .sections_box dl dd.in_photo .photo {
    width: 48%;
  }

  .sections_box dl dd.in_photo2 p {
    width: 100%;
  }

  .sections_box dl dd.in_photo2 .photo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .sections_box dl dd.in_photo2 .photo figure {
    display: block;
    width: 48%;
  }

  .sections_box dl dd.in_photo2 .photo figure img {
    border-radius: 30px;
  }
}

/*# sourceMappingURL=sections.css.map */