@charset "UTF-8";

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

@media screen and (max-width: 768px) {
  /*----------------------------------------
  #result
  ----------------------------------------*/
  #result h3 {
    padding: 1rem 1rem 1rem 1rem;
    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%;
  }
  #result .result-chart.mb-60 {
    margin-bottom: 0!important;
  }
  /*----------------------------------------
  #teacher
  ----------------------------------------*/
  #teacher h3 {
    padding: 2rem 2rem 2rem 13rem;
    background: url(../images/teacher-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #teacher .text {
    padding: 3rem;
    background: #100a0a;
  }
  #teacher .text.mb-60 {
    margin-bottom: 0!important;
  }
  #teacher .text.mb-60:nth-child(2) {
    /* border-bottom: 1px solid #909090; */
  }
  #teacher .text.mb-60:nth-child(5) {
    /* border-bottom: 1px solid #909090; */
  }
  #teacher .text p {
    color: #fff;
  }
  /*----------------------------------------
  #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: rgb(238 97 156 / 60%);
    z-index: 9;
  }
  #launch h3 img {
    position: relative;
    z-index: 10;
  }
  #launch dt {
    padding: 1rem 1rem .5rem 1rem;
    background: url(../images/launch-background.jpg) repeat center top;
    background-size: cover;
  }
  #launch dd {
    padding: 0rem;
    background: #fff;
  }
  #launch dd p {
    color: #000;
  }
  #launch dl {
    border-bottom: 5px solid #000000;
  }
  /*----------------------------------------
  #freedom
  ----------------------------------------*/
  #freedom h3 {
    padding: 2rem 3rem 2rem 3rem;
    background: url(../images/freedom-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #freedom .text {
    padding: 3rem;
    background: #fff;
  }
  #freedom .text p {
    color: #000;
  }
#freedom .name {
    margin-left: auto;
    width: 60%;
}
#freedom .result-chart li {
  margin-bottom: 3%!important;
}
  /*----------------------------------------
  #secret
  ----------------------------------------*/
  #secret h3 {
    padding: 3rem 11rem 2rem 1rem;
    background: url(../images/secret-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #secret .text {
    padding: 3rem;
    background: #d0cac8;
  }
  #secret .text p {
    color: #000;
  }
#secret .name {
    margin-left: auto;
    width: 60%;
}
  /*----------------------------------------
  #cross
  ----------------------------------------*/
  #cross h3 {
    padding: 2rem 2rem 2rem 2rem;
    background: url(../images/cross-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #cross .text {
    padding: 3rem;
    background: #fff;
  }
  #cross .text p {
    color: #000;
  }
#cross .name {
    margin-left: auto;
    width: 60%;
}


a.btn-emergency-real {
  position: relative;

  display: block;

  width: 150px;
  height: 97.5px;
  margin-bottom: 3%;
}

a.btn-emergency-real:hover .btn-emergency-real-top {
  top: 10px;

  height: 35px;
  cursor: pointer;
}

a.btn-emergency-real:active .btn-emergency-real-top {
  /* top: 20px; */

  height: 35px;
}

.btn-emergency-real-top {
    position: absolute;
    top: 0;
    left: 15px;
    width: 120px;
    height: 45px;
    margin-top: 30px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 0 0 50% 50%;
    background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    from(#630909),
    to(#d62d2d)
  );
    background-image: -webkit-linear-gradient(right, #630909 0%, #d62d2d 100%);
    background-image: linear-gradient(to left, #730909 0%, #ff2a2a 100%);
    -webkit-box-shadow: inset 0 -1px 10px 0 rgba(0, 0, 0, 0.9),
    0 5px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -1px 10px 0 rgba(0, 0, 0, 0.9),
    0 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn-emergency-real-top:before {
    position: absolute;
    top: -27px;
    left: 0;
    width: 120px;
    height: 46px;
    content: "";
    border-radius: 80px / 30px;
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#6c0c0b),
    to(#ed4c4c)
  );
    background-image: -webkit-linear-gradient(bottom, #6c0c0b 0%, #ed4c4c 100%);
    background-image: linear-gradient(to top, #710100 0%, #ff0000 100%);
    -webkit-box-shadow: 0 10px 28px 2px rgba(0, 0, 0, 0.2),
    inset 0 5px 10px 0 rgba(0, 0, 0, 0.2),
    inset 0 2px 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 10px 5px rgba(237, 76, 76, 0.6),
    inset 5px 0 1px 1px rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 28px 2px rgba(0, 0, 0, 0.2), inset 0 5px 10px 0 rgba(0, 0, 0, 0.2), inset 0 2px 1px 0 rgb(255 255 255 / 89%), inset 0 -2px 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 10px 5px rgb(237 76 76 / 74%), inset 5px 0 1px 1px rgba(255, 255, 255, 0.3);
}

.btn-emergency-real-top span {
  font-size: 38px;
  font-weight: bold;

  position: absolute;
  top: -24px;
  left: 0;

  width: 100%;

  -webkit-transform: scaleY(0.75);

  transform: scaleY(0.75);
  text-align: center;

  color: #e48a8a;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 5px rgba(255, 255, 255, 0.3);
}

.btn-emergency-real-bottom {
  position: absolute;
  top: 38px;
  left: 0;

  width: 150px;
  height: 60px;

  border-radius: 100px / 40px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f2f2f2),
    color-stop(48%, #b4b4b4),
    to(#767676)
  );
  background-image: -webkit-linear-gradient(
    left,
    #f2f2f2 0%,
    #b4b4b4 48%,
    #767676 100%
  );
  background-image: linear-gradient(
    to right,
    #f2f2f2 0%,
    #b4b4b4 48%,
    #767676 100%
  );
  -webkit-box-shadow: 0 8px 0 #c4cacc, inset 1px -1px 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 0 #c4cacc, inset 1px -1px 10px 0 rgba(0, 0, 0, 0.2);
}

.btn-green {
  position: relative;
  background: #1ca800;
  background: linear-gradient(to bottom, #0fff0d 25%, #04af14 75%)!important;
  text-shadow: 0 0px 3px #0f830d, 0 0px 5px #0f830d, 0 0 7px #0f830d!important;
  border: 1px solid #37e70b!important;
  box-shadow: 0 1rem 0 #045b0c!important;
  overflow: hidden;
  margin-bottom: 0;
}

.btn-green::after {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn4 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn4 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

#notes {
  background-color: #ececec;
  text-align: left;
  padding: 2% 0%;
}
#notes dl {
  font-size: 2.5vw;
  margin-bottom: 0%;
  letter-spacing:.1em;
  /* border: 0.05rem solid #C3C8CD; */
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding: 1%;
}
#notes dt{
  margin-bottom: 0.5%;
  font-weight: 600;
  font-size: 3.4vw;
}
#annotation {
  background-color: #fff;
  text-align: center;
  padding: 2% 0%;
}

#annotation dl {
  font-size: 2.5vw;
  margin-bottom: 0%;
  letter-spacing: .15em;
  /* border: 0.05rem solid #C3C8CD; */
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding: 3%;
}

#annotation dt {
  margin-bottom: 0.5%;
  font-weight: 600;
  font-size: 3.4vw;
}

        .checkbox-container {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 2% 0;
            line-height: 1;
        }
        .checkbox-container input[type="checkbox"] {
            width: 2rem;
            height: 2rem;
            margin-right: 10px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid #fff;
            border-radius: 2px;
            position: relative;
            cursor: pointer;
            line-height: 1;
        }
        input[type="checkbox"]:checked::before {
            content: '\f00c';
            font-family: "Font Awesome 6 Free";
            font-size: 1.2rem;
            font-weight: bold;
            color: #000;
            text-align: center;
            display: block;
            line-height: 1.6;
            background-color: #fff;
            /* border-radius: 2px; */
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .checkbox-container label {
            font-size: 1.2rem;
            color: #fff;
            line-height: 1;
        }
}










@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% 8%;
  } */
/* テキストが真ん中 */
  #result .inner {
    margin: 0 auto 10%;
    width: 60%;
  }
/* テキストが右側 */
  /* #result .inner {
    margin: 0 8% 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%;
  }
  /*----------------------------------------
  #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% 8%;
  } */
/* テキストが真ん中 */
  /* #teacher .inner {
    margin: 0 auto 10%;
    width: 70%;
  } */
/* テキストが右側 */
  #teacher .inner {
    margin: 0 8% 10% 40%;
  }

  #teacher .text {
    padding: 10%;
    background: #1c0a02f5;
  }
  #teacher .text p {
    color: #ffffff;
  }
  #teacher .text #reviewbtn {
    padding: 1%;
    text-align: center;
    width: 70%;
    font-weight: bold;
    margin-bottom: 0;
    cursor: pointer;
    background: #312313;
    border: 2px solid #795930;
  }
  #reviewbox {
    padding: 2%;
    background: #7c572e;
    margin-bottom: 5%;
    width: 70%;
  }
  /*----------------------------------------
  #freedom
  ----------------------------------------*/
  #freedom {
    padding: 10% 0 5%;
    background: url(../images/freedom-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #freedom h3 {
    margin-bottom: 2%;
  }

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

  #freedom .text {
    padding: 10%;
    background: #fffffff2;
  }
  #freedom .text p {
    color: #000;
  }
  /*----------------------------------------
  #secret
  ----------------------------------------*/
  #secret {
    padding: 10% 0 5%;
    background: url(../images/secret-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #secret h3 {
    margin-bottom: 2%;
  }

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

  #secret .text {
    padding: 10%;
    background: #fffffff2;
  }
  #secret .text p {
    color: #000;
  }
  /*----------------------------------------
  #cross
  ----------------------------------------*/
  #cross {
    padding: 10% 0 5%;
    background: url(../images/cross-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #cross h3 {
    margin-bottom: 2%;
  }

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

  #cross .text {
    padding: 10%;
    background: #ebf1f8;
  }
  #cross .text p {
    color: #000;
  }
a.btn-emergency-real {
  position: relative;

  display: block;

  width: 200px;
  height: 130px;
  margin-bottom: 3%;
}

#freedom .name {
    margin-left: auto;
    width: 40%;
}

a.btn-emergency-real:hover .btn-emergency-real-top {
  top: 10px;

  height: 50px;
  cursor: pointer;
}

a.btn-emergency-real:active .btn-emergency-real-top {
  top: 20px;

  height: 40px;
}

.btn-emergency-real-top {
    position: absolute;
    top: 0;
    left: 20px;
    width: 160px;
    height: 60px;
    margin-top: 30px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 0 0 50% 50%;
    background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    from(#630909),
    to(#d62d2d)
  );
    background-image: -webkit-linear-gradient(right, #630909 0%, #d62d2d 100%);
    background-image: linear-gradient(to left, #730909 0%, #ff2a2a 100%);
    -webkit-box-shadow: inset 0 -1px 10px 0 rgba(0, 0, 0, 0.9),
    0 5px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -1px 10px 0 rgba(0, 0, 0, 0.9),
    0 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn-emergency-real-top:before {
    position: absolute;
    top: -30px;
    left: 0;
    width: 160px;
    height: 60px;
    content: "";
    border-radius: 80px / 30px;
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#6c0c0b),
    to(#ed4c4c)
  );
    background-image: -webkit-linear-gradient(bottom, #6c0c0b 0%, #ed4c4c 100%);
    background-image: linear-gradient(to top, #710100 0%, #ff0000 100%);
    -webkit-box-shadow: 0 10px 28px 2px rgba(0, 0, 0, 0.2),
    inset 0 5px 10px 0 rgba(0, 0, 0, 0.2),
    inset 0 2px 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 10px 5px rgba(237, 76, 76, 0.6),
    inset 5px 0 1px 1px rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 28px 2px rgba(0, 0, 0, 0.2), inset 0 5px 10px 0 rgba(0, 0, 0, 0.2), inset 0 2px 1px 0 rgb(255 255 255 / 89%), inset 0 -2px 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 10px 5px rgb(237 76 76 / 74%), inset 5px 0 1px 1px rgba(255, 255, 255, 0.3);
}

.btn-emergency-real-top span {
  font-size: 38px;
  font-weight: bold;

  position: absolute;
  top: -24px;
  left: 0;

  width: 100%;

  -webkit-transform: scaleY(0.75);

  transform: scaleY(0.75);
  text-align: center;

  color: #e48a8a;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5),
    1px 1px 5px rgba(255, 255, 255, 0.3);
}

.btn-emergency-real-bottom {
  position: absolute;
  top: 38px;
  left: 0;

  width: 200px;
  height: 80px;

  border-radius: 100px / 40px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f2f2f2),
    color-stop(48%, #b4b4b4),
    to(#767676)
  );
  background-image: -webkit-linear-gradient(
    left,
    #f2f2f2 0%,
    #b4b4b4 48%,
    #767676 100%
  );
  background-image: linear-gradient(
    to right,
    #f2f2f2 0%,
    #b4b4b4 48%,
    #767676 100%
  );
  -webkit-box-shadow: 0 8px 0 #c4cacc, inset 1px -1px 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 0 #c4cacc, inset 1px -1px 10px 0 rgba(0, 0, 0, 0.2);
}

.btn-green {
  position: relative;
  background: #1ca800;
  background: linear-gradient(to bottom, #0fff0d 25%, #04af14 75%)!important;
  text-shadow: 0 0px 3px #0f830d, 0 0px 5px #0f830d, 0 0 7px #0f830d!important;
  border: 1px solid #37e70b!important;
  box-shadow: 0 1rem 0 #045b0c!important;
  overflow: hidden;
  margin-bottom: 0;
  max-width: 800px!important;
}

.btn:hover {
    box-shadow: none!important;
    transform: translate3d(0, 10px, 0);
    cursor: pointer!important;
}


.btn-green::after {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn4 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn4 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

#notes {
  background-color: #ececec;
  text-align: left;
  padding: 2% 0%;
}
#notes dl {
  font-size: 1.2vw;
  margin-bottom: 0%;
  letter-spacing:.1em;
  /* border: 0.05rem solid #C3C8CD; */
  width: 59%;
  margin-left: auto;
  margin-right: auto;
  padding: 1%;
}
#notes dt{
  margin-bottom: 0.5%;
  font-weight: 600;
  font-size: 1.4vw;
}

.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5%;
    line-height: 1;
}
        .checkbox-container input[type="checkbox"] {
            width: 2rem;
            height: 2rem;
            margin-right: 10px;
            accent-color: #fff;
            color: #000;
            line-height: 1;
        }
        .checkbox-container label {
    font-size: 1vw;
    color: #fff;
    line-height: 1.4;
}
}

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