@charset "UTF-8";

/* 各セクションのCSS */

@media screen and (max-width: 768px) {
  /*----------------------------------------
  #result
  ----------------------------------------*/
  #result h3 {
    padding: 2rem 2rem 2rem 2rem;
    background: url(../images/result-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #result .text {
    padding: 3rem;
    background: #fff;
  }
  #result .text p {
    color: #000;
  }
  #result .result-calendar {
    position: relative;
  }
  #result .result-calendar li {
    margin-bottom: 0;
  }
  #result .slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100vw / 15);
    z-index: 10;
    cursor: pointer;
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000) hue-rotate(131deg);
    transition: 1s;
  }
  #result .slide-arrow:hover {
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000) brightness(2) hue-rotate(131deg);
  }
  #result .prev-arrow {
    left: 0%;
    transform: translateY(-50%) scale(-1, 1);
  }
  #result .next-arrow {
    right: 0%;
  }
  /*----------------------------------------
  #launch
  ----------------------------------------*/
  #launch h3 {
    padding: 1rem 1rem 1rem 1rem;
    background: url(../images/launch-background.jpg) no-repeat center top;
    background-size: cover;
    overflow: hidden;
    position: relative;
    z-index: 8;
  }
  #launch h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 9;
  }
  #launch h3 img {
    position: relative;
    z-index: 10;
  }
  #launch dt {
    padding: 1rem 1rem 1rem 1rem;
    background: url(../images/launch-background.jpg) repeat center top;
    background-size: cover;
  }
  #launch dd {
    padding: 0rem;
    background: #fff;
  }
  #launch dd p {
    color: #000;
  }
  /*----------------------------------------
  #teacher
  ----------------------------------------*/
  #teacher h3 {
    padding: 2rem 11rem 2rem 1rem;
    background: url(../images/teacher-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #teacher .text {
    padding: 3rem;
    background: #fff;
  }
  #teacher .text p {
    color: #000;
  }
}










@media screen and (min-width: 769px) {
  /*----------------------------------------
  #result
  ----------------------------------------*/
  #result {
    padding: 10% 0 5%;
    background: url(../images/result-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #result h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  /* #result .inner {
    margin: 0 40% 10% 5%;
  } */
/* テキストが真ん中 */
  #result .inner {
    margin: 0 auto 10%;
    width: 70%;
  }
/* テキストが右側 */
  /* #result .inner {
    margin: 0 5% 10% 40%;
  } */

  #result .text {
    padding: 10%;
    background: #fff;
  }
  #result .text p {
    color: #000;
  }
  #result .result-calendar {
    position: relative;
  }
  #result .result-calendar {
    position: relative;
  }
  #result .slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 7%;
    z-index: 10;
    cursor: pointer;
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px #000) hue-rotate(131deg);
    transition: 1s;
  }
  #result .slide-arrow:hover {
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px #000) brightness(2) hue-rotate(131deg);
  }
  #result .prev-arrow {
    left: -6%;
    transform: translateY(-50%) scale(-1, 1);
  }
  #result .next-arrow {
    right: -6%;
  }

  /*----------------------------------------
  #launch
  ----------------------------------------*/
  #launch {
    padding: 10% 0 5%;
    background: url(../images/launch-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #launch .inner {
    margin: 0 5% 10% 40%;
  }
  #launch h3 {
    margin: 0 5% 2% 40%;
  }
  #launch dl {
    margin-bottom: 10%;
  }
  #launch dt {
    /* margin-bottom: 5%; */
  }
  #launch dd {
    /* padding: 10%; */
    background: #fff;
  }
  #launch dd p {
    color: #000;
  }
  /*----------------------------------------
  #teacher
  ----------------------------------------*/
  #teacher {
    padding: 10% 0 5%;
    background: url(../images/teacher-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #teacher h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  #teacher .inner {
    margin: 0 40% 10% 5%;
  }
/* テキストが真ん中 */
  /* #teacher .inner {
    margin: 0 auto 10%;
    width: 70%;
  } */
/* テキストが右側 */
  /* #teacher .inner {
    margin: 0 5% 10% 40%;
  } */

  #teacher .text {
    padding: 10%;
    background: #fff;
  }
  #teacher .text p {
    color: #000;
  }
}

.result-chart img {
    border: 1px solid #6d6d6d;
}