/* ---------------トップビュー--------------- */
#topview>.sectionContainer {
  background: url(../img/bg_topview.png);
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template:
    "... .......... ..." 100px
    "... subttl     ..." auto
    "... .......... ..." 20px
    "... ttl        ..." auto
    "... .......... ..." 20px
    "... result     ..." auto
    "... .......... ..." 250px
    / 1fr auto 1fr;
}

#topview .subttl {
  grid-area: subttl;
}

#topview .ttl {
  grid-area: ttl;
}

#topview .result {
  grid-area: result;
}

@media screen and (max-width: 768px) {
  #topview>.sectionContainer {
    grid-template:
      "... .......... ..." 45px
      "... subttl     ..." auto
      "... .......... ..." 8px
      "... ttl        ..." auto
      "... .......... ..." 12px
      "... result     ..." auto
      "... .......... ..." 80px
      / 1fr auto 1fr;
  }
}

/* ---------------テーマ--------------- */
#theme>.sectionContainer {
  position: relative;
  display: grid;
  grid-template:
    "... ........... ........... ........... ..." 24px
    "... ttl         ttl         ttl         ..." auto
    "... ........... ........... ........... ..." 38px
    "... logo        ........... subttl      ..." auto
    "... ........... ........... ........... ..." 36px
    "... description description description ..." auto
    "... ........... ........... ........... ..." 47px
    / 1fr 230px 24px auto 1fr;
}

#theme .ttl {
  grid-area: ttl;
}

#theme .logo {
  grid-area: logo;
}

#theme .subttl {
  grid-area: subttl;
}

#theme .description {
  grid-area: description;
}

@media screen and (min-width: 768px) {
  #theme>.sectionContainer::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/parts_humanLadder.svg);
    background-repeat: no-repeat;
    background-size: 130px;
    background-position: 40px -20px;
  }
}

@media screen and (max-width: 768px) {
  #theme>.sectionContainer {
    background-image: none;
    grid-template:
      "... ........... ..." 15px
      "... ttl         ..." auto
      "... ........... ..." 30px
      "... logo        ..." auto
      "... ........... ..." 15px
      "... subttl      ..." auto
      "... ........... ..." 24px
      "... description ..." auto
      "... ........... ..." 24px
      / 1fr 90% 1fr;
  }
}

/* ---------------応募総数--------------- */
#totalization>.sectionContainer {
  display: grid;
  place-items: center;
  grid-template:
    "... ........... ..." 27px
    "... ttl         ..." auto
    "... ........... ..." 56px
    "... count       ..." auto
    "... ........... ..." 8px
    "... detail      ..." auto
    "... ........... ..." 16px
    "... thanks      ..." auto
    "... ........... ..." 43px
    / 1fr auto 1fr;
}

#totalization .ttl {
  grid-area: ttl;
}

#totalization .count {
  grid-area: count;
}

#totalization .detail {
  grid-area: detail;
}

#totalization .thanks {
  grid-area: thanks;
}

@media screen and (max-width: 768px) {
  #totalization>.sectionContainer {
    grid-template:
      "... ........... ..." 17px
      "... ttl         ..." auto
      "... ........... ..." 27px
      "... count       ..." auto
      "... ........... ..." 5px
      "... detail      ..." auto
      "... ........... ..." 15px
      "... thanks      ..." auto
      "... ........... ..." 20px
      / 1fr auto 1fr;
  }
}

/* ---------------審査員--------------- */
#judge>.sectionContainer {
  display: grid;
  grid-template:
    "... ........... ..." 16px
    "... ttl         ..." auto
    "... ........... ..." 30px
    "... judge       ..." auto
    "... ........... ..." 50px
    / 1fr auto 1fr;
}

#judge .ttl {
  grid-area: ttl;
}

#judge .judge {
  grid-area: judge;
}

#judge .judge_img {
  box-shadow: 14.4px 14.4px #2ca9e1;
}

#judge .judge_description {
  background-image: url(../img/parts_triangle.svg);
  background-size: 100%;
  background-position: 0;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  #judge>.sectionContainer {
    grid-template:
      "... ........... ..." 16px
      "... ttl         ..." auto
      "... ........... ..." 30px
      "... judge       ..." auto
      "... ........... ..." 25px
      / 1fr auto 1fr;
  }
}

/* ---------------スライダー--------------- */
.swiper {
  height: 36.5vw;
  max-height: 650px;
  min-height: 440px;
}

.swiper-container {}

.swiper-slide {
  display: flex;
  align-items: flex-end;
  /* スライド内の内容を下に揃える */
}

.swiper-slide-next img,
.swiper-slide-prev img {
  /* position: absolute; */
  /* top: 5.7vw; */
}

@media screen and (max-width: 768px) {
  .swiper {
    display: none !important;
  }

}

/* ---------------------------------------- */
/* #celebrationBtn>.sectionContainer {

}

@media screen and (max-width: 768px) {
  #celebrationBtn>.sectionContainer {}
} */
/* ---------------お祝いの言葉--------------- */
#celebration {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}
#celebration>.sectionContainer {
  display: grid;
  grid-template:
    "... ........... ..." 40px
    "... ttl         ..." auto
    "... ........... ..." 117px
    "... cards       ..." auto
    "... ........... ..." 105px
    / 1fr auto 1fr;
}

#celebration .ttl {
  grid-area: ttl;
}

#celebration .cards {
  grid-area: cards;
}

/* .dli-chevron-down {
  display: block;
  color: #333;
  line-height: 1;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(-45deg);
} */

@media screen and (max-width: 768px) {
  #celebration>.sectionContainer {
    display: grid;
    grid-template:
      "... ........... ..." 16px
      "... ttl         ..." auto
      "... ........... ..." 20px
      "... cards       ..." auto
      "... ........... ..." 30px
      / 1fr auto 1fr;
  }
}

/* ---------------コンテスト結果--------------- */
#contestResults .js_contestResults_inactiveContents {
  display: none !important;
}
#contestResults .js_contestResults_activeContents {
  display: flex !important;
}

#contestResults .js_contestResults_activeBtn {
  color: white;
  background: #2ca9e1;
  position: relative;
}

#contestResults .js_contestResults_activeBtn::before {
  content: "";
  position: absolute;
  bottom: -36px;
  left: calc(50% - 18px);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 36px solid #2ca9e1;
}

#contestResults .description {
  position: relative;
}
#contestResults .description::before {
  content: "";
  position: absolute;
  bottom: -26px;
  left: calc(50% - 13px);
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 26px solid #f2f2f2;
}
@media screen and (max-width: 768px) {
  #contestResults .js_contestResults_activeBtn::before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: calc(50% - 8px);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #2ca9e1;
  }
}

#contestResults .js_contestResults_inactiveBtn {
  color: #2ca9e1;
  background: #f2f2f2;
}

#contestResults>.sectionContainer {
}

@media screen and (max-width: 768px) {
  #contestResults>.sectionContainer {}
}

/* ---------------総評--------------- */
#souhyou>.sectionContainer {
  display: grid;
  grid-template:
    "... ........... ..." 28px
    "... ttl         ..." auto
    "... ........... ..." 79px
    "... comment     ..." auto
    "... ........... ..." 38px
    "... name        ..." auto
    "... ........... ..." 68px
    / 1fr 1150px 1fr;
}

#souhyou .ttl {
  grid-area: ttl;
}

#souhyou .comment {
  grid-area: comment;
}

#souhyou .name {
  grid-area: name;
}

@media screen and (max-width: 768px) {
  #souhyou>.sectionContainer {
    display: grid;
    grid-template:
      "... ........... ..." 18px
      "... ttl         ..." auto
      "... ........... ..." 28px
      "... comment     ..." auto
      "... ........... ..." 35px
      "... name         ..." auto
      "... ........... ..." 25px
      / 1fr 90% 1fr;
  }
}

/* ---------------リンクス--------------- */
#links>.sectionContainer {
  display: grid;
  grid-template:
    "... ........... ..." 66px
    "... past        ..." auto
    "... ........... ..." 45px
    "... rokuichi    ..." auto
    "... ........... ..." 28px
    "... description ..." auto
    "... ........... ..." 52px
    / 1fr auto 1fr;
}

#links .past {
  grid-area: past;
  box-shadow: 8px 8px #eee;
}

#links .rokuichi {
  grid-area: rokuichi;
}

#links .description {
  grid-area: description;
}

@media screen and (max-width: 768px) {
  #links>.sectionContainer {
    grid-template:
      "... ........... ..." 35px
      "... past        ..." auto
      "... ........... ..." 40px
      "... rokuichi    ..." auto
      "... ........... ..." 39px
      "... description ..." auto
      "... ........... ..." 38px
      / 1fr 90% 1fr;
  }
}