@charset "UTF-8";
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  color: #00223e;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: calc(100 / 1366 * 16 / 1 * 1vw);
  line-height: 1.5;
  font-weight: 500;
  /* プロポーショナルメトリクスを有効にする指定 */
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}
@media only screen and (max-width: 1024px) {
  body {
    font-size: calc(100 / 1366 * 16 / 1 * 1vw);
  }
}
@media only screen and (max-width: 768px) {
  body {
    font-size: calc(100 / 750 * 24 / 1 * 1vw);
  }
}

a {
  /*color : $color-primary;*/
  /* &:hover {
  	color: $color-primary;
  } */
}

hr {
  margin-bottom: 1em;
}

picture {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

svg {
  vertical-align: top;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

small {
  font-size: 80%;
}

@media only screen and (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
.pc {
  display: block;
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.txt-sm {
  font-size: 80%;
}
.txt-b {
  font-weight: 700;
}

.kaisei-harunoumi-bold {
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 700;
  font-style: normal;
}

.bg {
  background: url(../img/bg.jpg) center no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .bg {
    background: none;
    height: auto;
  }
  .bg::before {
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    background: url(../img/bg.jpg) left center no-repeat;
    background-size: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
  }
}

.con-header {
  position: absolute;
  width: 50%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .con-header {
    position: static;
    width: auto;
    height: auto;
  }
}
@media only screen and (max-width: 768px) {
  .con-header .btn-back {
    display: none;
  }
}

.con-main {
  width: 42.8257686676vw;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0px 0px calc(100 / 1366 * 10 / 1 * 1vw) 0px rgba(0, 34, 62, 0.2);
          box-shadow: 0px 0px calc(100 / 1366 * 10 / 1 * 1vw) 0px rgba(0, 34, 62, 0.2);
  position: relative;
  /* transform: translate(0); */
  left: 50%;
  padding: calc(100 / 1366 * 30 / 1 * 1vw);
  position: relative;
  overflow-y: scroll;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
.con-main::-webkit-scrollbar {
  /*スクロールバー非表示（Chrome・Safari）*/
  display: none;
}
@media only screen and (max-width: 768px) {
  .con-main {
    width: 96%;
    left: 0;
    height: auto;
    margin: auto;
    -webkit-box-shadow: 0px 0px calc(100 / 750 * 10 / 1 * 1vw) 0px rgba(0, 34, 62, 0.2);
            box-shadow: 0px 0px calc(100 / 750 * 10 / 1 * 1vw) 0px rgba(0, 34, 62, 0.2);
    overflow: auto;
    padding: calc(100 / 750 * 30 / 1 * 1vw);
  }
}

.con-footer {
  position: absolute;
  bottom: 0;
  padding: calc(100 / 1366 * 10 / 1 * 1vw);
  font-size: 0.7320644217vw;
  line-height: 1.2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 50%;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
@media only screen and (max-width: 768px) {
  .con-footer {
    position: static;
    width: 100%;
    padding: calc(100 / 750 * 30 / 1 * 1vw);
    font-size: calc(100 / 750 * 22 / 1 * 1vw);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.con-footer .btn-official {
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .con-footer .btn-official {
    margin-bottom: calc(100 / 750 * 20 / 1 * 1vw);
  }
}
.con-footer .btn-back {
  display: none;
}
@media only screen and (max-width: 768px) {
  .con-footer .btn-back {
    display: block;
    margin-bottom: calc(100 / 750 * 20 / 1 * 1vw);
  }
}

.con-section {
  margin-bottom: calc(100 / 1366 * 60 / 1 * 1vw);
  position: relative;
}
@media only screen and (max-width: 768px) {
  .con-section {
    margin-bottom: calc(2 * 100 / 750 * 60 / 1 * 1vw);
  }
}

.pagetop {
  height: calc(100 / 1366 * 60 / 1 * 1vw);
  width: calc(100 / 1366 * 60 / 1 * 1vw);
  display: block;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 200px;
  /*  float: right; */
}
@media only screen and (max-width: 768px) {
  .pagetop {
    height: calc(100 / 750 * 60 / 1 * 1vw);
    width: calc(100 / 750 * 60 / 1 * 1vw);
  }
}
.pagetop-area {
  position: fixed;
  right: calc(100 / 1366 * 20 / 1 * 1vw);
  bottom: calc(100 / 1366 * 20 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .pagetop-area {
    right: calc(100 / 750 * 20 / 1 * 1vw);
    bottom: calc(100 / 750 * 20 / 1 * 1vw);
  }
}
.pagetop:before {
  content: "";
  display: block;
  background: #00223e;
  height: calc(1.7320508076 * calc(100 / 1366 * 30 / 1 * 1vw) / 2);
  width: calc(100 / 1366 * 30 / 1 * 1vw);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
          clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (max-width: 768px) {
  .pagetop:before {
    height: calc(1.7320508076 * calc(100 / 750 * 30 / 1 * 1vw) / 2);
    width: calc(100 / 750 * 30 / 1 * 1vw);
  }
}

.logo-area {
  position: absolute;
  left: calc(100 / 1366 * 10 / 1 * 1vw);
  top: 50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
@media only screen and (max-width: 768px) {
  .logo-area {
    position: static;
    left: 0;
    top: 0;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
    padding: calc(100 / 750 * 40 / 1 * 1vw) 0 calc(100 / 750 * 30 / 1 * 1vw);
  }
  .page-quiz .logo-area {
    padding: calc(100 / 750 * 30 / 1 * 1vw) calc(2 * 100 / 750 * 60 / 1 * 1vw) calc(100 / 750 * 30 / 1 * 1vw);
  }
}

.btn {
  display: block;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media only screen and (min-width: 1025px) {
  .btn:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.btn-img {
  margin: calc(100 / 1366 * 10 / 1 * 1vw) auto;
  width: 26.5007320644vw;
}
@media only screen and (max-width: 768px) {
  .btn-img {
    margin: calc(100 / 750 * 20 / 1 * 1vw) auto;
    width: 72.4vw;
  }
}
.btn-official {
  width: 21.1566617862vw;
}
@media only screen and (max-width: 768px) {
  .btn-official {
    width: 57.8vw;
  }
}
.btn-share {
  width: 23.5724743777vw;
}
@media only screen and (max-width: 768px) {
  .btn-share {
    width: 64.4vw;
  }
}
.btn-get {
  pointer-events: none;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.btn-get.is-active {
  pointer-events: all;
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.btn-back {
  width: 23.5724743777vw;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .btn-back {
    width: 64.4vw;
  }
}

.ttl {
  position: relative;
}
.ttl-xl {
  text-align: center;
  font-size: 2.635431918vw;
  margin-bottom: calc(100 / 1366 * 40 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .ttl-xl {
    font-size: 7.2vw;
    margin-bottom: calc(100 / 750 * 60 / 1 * 1vw * 1.5);
  }
}
.ttl-xl::after {
  content: "";
  display: block;
  position: absolute;
  width: 20.0585651537vw;
  height: 1.6105417277vw;
  background: url(../img/ttl_parts.png) center no-repeat;
  background-size: contain;
  top: 105%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .ttl-xl::after {
    width: 45.6666666667vw;
    height: 3.6666666667vw;
  }
}
.ttl-lg {
  font-size: calc(100 / 1366 * 30 / 1 * 1vw);
  line-height: 1;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .ttl-lg {
    font-size: calc(1.5 * 100 / 750 * 30 / 1 * 1vw);
    margin-bottom: calc(100 / 750 * 20 / 1 * 1vw);
  }
}
.ttl-md {
  font-size: calc(100 / 1366 * 24 / 1 * 1vw);
  line-height: 1;
  margin-bottom: calc(100 / 1366 * 10 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .ttl-md {
    font-size: calc(1.25 * 100 / 750 * 30 / 1 * 1vw);
    margin-bottom: calc(100 / 750 * 10 / 1 * 1vw);
  }
}

.invitation p + p {
  margin-top: 1em;
}
.invitation-paper {
  background: url(../img/invitation_bg.png) top no-repeat;
  background-size: contain;
  text-align: center;
  line-height: 1.75;
  padding: 7.3206442167vw calc(100 / 1366 * 60 / 1 * 1vw) calc(100 / 1366 * 60 / 1 * 1vw);
  font-size: calc(100 / 1366 * 18 / 1 * 1vw);
  margin-bottom: calc(100 / 1366 * 20 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .invitation-paper {
    background-size: cover;
    padding: 13.3333333333vw calc(100 / 750 * 60 / 1 * 1vw) 10.6666666667vw;
    font-size: calc(100 / 750 * 30 / 1 * 1vw * 0.9);
    margin-bottom: calc(100 / 750 * 30 / 1 * 1vw);
    letter-spacing: -0.05em;
  }
}
.invitation-paper-ttl {
  margin-bottom: calc(100 / 1366 * 20 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .invitation-paper-ttl {
    margin-bottom: calc(100 / 750 * 10 / 1 * 1vw);
    padding-left: calc(100 / 750 * 30 / 1 * 1vw);
    padding-right: calc(100 / 750 * 30 / 1 * 1vw);
  }
}
.invitation-paper-txt {
  color: #5a3728;
}

.speech {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  font-size: calc(100 / 1366 * 18 / 1 * 1vw);
  margin-top: calc(100 / 1366 * 10 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .speech {
    font-size: calc(100 / 750 * 30 / 1 * 1vw);
    margin-top: calc(100 / 750 * 10 / 1 * 1vw);
  }
}
.speech-r {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.speech-r .speech-balloon {
  margin: calc(100 / 1366 * 20 / 1 * 1vw) calc(100 / 1366 * 20 / 1 * 1vw) 0 0;
}
@media only screen and (max-width: 768px) {
  .speech-r .speech-balloon {
    margin: calc(100 / 750 * 20 / 1 * 1vw) calc(100 / 750 * 20 / 1 * 1vw) 0 0;
  }
}
.speech-r .speech-balloon::after {
  content: "";
  border-color: #ffffff transparent transparent transparent;
  border-width: 1.0248901903vw calc(100 / 1366 * 10 / 1 * 1vw) 0px 0px;
  left: 100%;
  right: auto;
}
@media only screen and (max-width: 768px) {
  .speech-r .speech-balloon::after {
    border-width: 1.8666666667vw calc(100 / 750 * 10 / 1 * 1vw) 0px 0px;
  }
}
.speech-img_img {
  width: 7.3206442167vw;
}
@media only screen and (max-width: 768px) {
  .speech-img_img {
    width: 20vw;
  }
}
.speech-balloon {
  background-color: white;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: auto;
  border-radius: calc(100 / 1366 * 20 / 1 * 1vw);
  padding: calc(100 / 1366 * 20 / 1 * 1vw) calc(100 / 1366 * 10 / 1 * 1vw);
  margin: calc(100 / 1366 * 20 / 1 * 1vw) 0 0 calc(100 / 1366 * 20 / 1 * 1vw);
  width: 29.7218155198vw;
  -webkit-filter: drop-shadow(0 0 0.7320644217vw rgba(0, 34, 62, 0.2));
          filter: drop-shadow(0 0 0.7320644217vw rgba(0, 34, 62, 0.2));
}
@media only screen and (max-width: 768px) {
  .speech-balloon {
    border-radius: calc(100 / 750 * 20 / 1 * 1vw);
    padding: calc(100 / 750 * 20 / 1 * 1vw) calc(100 / 750 * 10 / 1 * 1vw);
    margin: calc(100 / 750 * 20 / 1 * 1vw) 0 0 calc(100 / 750 * 20 / 1 * 1vw);
    width: 66.6666666667vw;
    -webkit-filter: drop-shadow(0 0 1.3333333333vw rgba(0, 34, 62, 0.2));
            filter: drop-shadow(0 0 1.3333333333vw rgba(0, 34, 62, 0.2));
  }
}
.speech-balloon-txt {
  line-height: 1.2;
}
.speech-balloon::after {
  content: "";
  display: block;
  position: absolute;
  right: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #ffffff transparent transparent;
  border-width: 0px calc(100 / 1366 * 10 / 1 * 1vw) 1.0248901903vw 0px;
  top: calc(100 / 1366 * 20 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .speech-balloon::after {
    border-width: 0px calc(100 / 750 * 10 / 1 * 1vw) 1.8666666667vw 0px;
    top: calc(100 / 750 * 20 / 1 * 1vw);
  }
}

.method {
  padding: 0 calc(100 / 1366 * 30 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .method {
    padding: 0 calc(100 / 750 * 20 / 1 * 1vw);
    letter-spacing: 0.05em;
  }
}
.method-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: calc(100 / 1366 * 20 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .method-step {
    margin-bottom: calc(100 / 750 * 30 / 1 * 1vw);
    -webkit-box-align: self-start;
        -ms-flex-align: self-start;
            align-items: self-start;
  }
}
.method-step-icon {
  width: 5.8565153734vw;
  margin-right: calc(100 / 1366 * 20 / 1 * 1vw);
  position: relative;
}
@media only screen and (max-width: 768px) {
  .method-step-icon {
    width: 16vw;
    margin-right: calc(100 / 750 * 20 / 1 * 1vw);
  }
}
.method-step-icon:after {
  content: "";
  display: block;
  width: 0.2928257687vw;
  height: calc(100 / 1366 * 20 / 1 * 1vw);
  background-color: #fedd6c;
  position: absolute;
  bottom: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .method-step-icon:after {
    width: 0.6666666667vw;
    height: calc(100 / 750 * 30 / 1 * 1vw);
  }
}
.method-step-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.method-step:first-child .method-step-icon::after {
  content: none;
}
.method-step:last-child .method-step-icon:after {
  /* height: $space_xl_sp; */
}
.method-notes {
  font-size: calc(100 / 1366 * 10 / 1 * 1vw);
  line-height: 1.2;
  margin-left: 1em;
  text-indent: -1em;
}
@media only screen and (max-width: 768px) {
  .method-notes {
    font-size: calc(100 / 750 * 20 / 1 * 1vw);
  }
}

.about {
  position: relative;
  padding-top: 3.7335285505vw;
  padding-bottom: 1.2445095168vw;
}
@media only screen and (max-width: 768px) {
  .about {
    padding-top: 10.2vw;
    padding-bottom: 3.4vw;
  }
}
.about::after {
  content: "";
  display: block;
  position: absolute;
  width: 38.5065885798vw;
  height: 3.7335285505vw;
  background: url(../img/about_bg01.png) center no-repeat;
  background-size: cover;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .about::after {
    width: 100%;
    height: 10.2vw;
    background-size: contain;
  }
}
.about::before {
  content: "";
  display: block;
  position: absolute;
  width: 38.5065885798vw;
  height: 1.2445095168vw;
  background: url(../img/about_bg02.png) center no-repeat;
  background-size: cover;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .about::before {
    width: 100%;
    height: 3.4vw;
    background-size: contain;
  }
}
.about-info {
  background: rgba(255, 255, 255, 0.8);
  padding: calc(100 / 1366 * 30 / 1 * 1vw);
  color: #5a3728;
  letter-spacing: 0.05em;
  margin: calc(100 / 1366 * 10 / 1 * 1vw) calc(100 / 1366 * 10 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .about-info {
    padding: calc(100 / 750 * 30 / 1 * 1vw);
    margin: calc(100 / 750 * 10 / 1 * 1vw) calc(100 / 750 * 10 / 1 * 1vw);
  }
}
.about-ttl {
  text-align: center;
  color: #9e732a;
  position: relative;
  padding-bottom: calc(100 / 1366 * 60 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .about-ttl {
    padding-bottom: calc(100 / 750 * 60 / 1 * 1vw);
    letter-spacing: -0.05em;
  }
}
.about-ttl::before {
  content: "";
  display: block;
  position: absolute;
  width: 12.3718887262vw;
  height: 2.1229868228vw;
  background: url(../img/ttl_parts02.png) center no-repeat;
  background-size: cover;
  bottom: calc(100 / 1366 * 10 / 1 * 1vw);
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .about-ttl::before {
    width: 33.8vw;
    height: 5.8vw;
    bottom: calc(100 / 750 * 10 / 1 * 1vw);
  }
}
.about-btn {
  margin: calc(100 / 1366 * 30 / 1 * 1vw) auto 0;
}
@media only screen and (max-width: 768px) {
  .about-btn {
    margin: calc(100 / 750 * 30 / 1 * 1vw) auto 0;
  }
}
.about-txt {
  font-size: 90%;
  line-height: 1.75;
}
@media only screen and (max-width: 768px) {
  .about-txt {
    font-size: 80%;
  }
}
.about-txt + .about-txt {
  margin-top: 1em;
}
.about-txt .txt-b {
  font-size: 125%;
}
@media only screen and (max-width: 768px) {
  .about-txt .txt-b {
    font-size: 120%;
  }
}

.secret-ttl_img {
  width: 2.196193265vw;
}
@media only screen and (max-width: 768px) {
  .secret-ttl_img {
    width: 6vw;
  }
}

.board {
  background: url(../img/bg_board.png) top center no-repeat;
  background-size: contain;
  text-align: center;
  color: #5a3728;
  position: relative;
  height: 33.9677891654vw;
  font-size: calc(100 / 1366 * 24 / 1 * 1vw);
  margin-bottom: calc(-1 * calc(100 / 1366 * 40 / 1 * 1vw));
}
@media only screen and (max-width: 768px) {
  .board {
    height: 92.8vw;
    font-size: calc(1.25 * 100 / 750 * 30 / 1 * 1vw);
    margin-bottom: calc(-2 * calc(100 / 750 * 60 / 1 * 1vw));
    line-height: 1.2;
  }
}

.question-ttl {
  padding-top: 3.2942898975vw;
}
@media only screen and (max-width: 768px) {
  .question-ttl {
    padding-top: 7.5vw;
  }
}
.question-ttl_img {
  width: 10.9077598829vw;
}
@media only screen and (max-width: 768px) {
  .question-ttl_img {
    width: 29.8vw;
  }
}
.question-txt {
  margin: calc(100 / 1366 * 10 / 1 * 1vw) auto;
}
@media only screen and (max-width: 768px) {
  .question-txt {
    margin: calc(100 / 750 * 10 / 1 * 1vw) auto;
  }
}
.question-img_img {
  width: 31.1127379209vw;
}
@media only screen and (max-width: 768px) {
  .question-img_img {
    width: 73.6666666667vw;
  }
}
.question-chara.chara01 {
  position: absolute;
  left: calc(-1 * calc(100 / 1366 * 20 / 1 * 1vw));
  top: 63%;
}
@media only screen and (max-width: 768px) {
  .question-chara.chara01 {
    left: calc(-1 * calc(100 / 750 * 20 / 1 * 1vw));
    top: 60%;
  }
}
.question-chara.chara01 .question-chara_img {
  width: 12.5183016105vw;
}
@media only screen and (max-width: 768px) {
  .question-chara.chara01 .question-chara_img {
    width: 22.8vw;
  }
}
.question-chara.chara02 {
  position: absolute;
  right: calc(-1 * calc(100 / 1366 * 20 / 1 * 1vw));
  top: 88%;
}
@media only screen and (max-width: 768px) {
  .question-chara.chara02 {
    right: calc(-1 * calc(100 / 750 * 20 / 1 * 1vw));
    top: 80%;
  }
}
.question-chara.chara02 .question-chara_img {
  width: 7.2840409956vw;
}
@media only screen and (max-width: 768px) {
  .question-chara.chara02 .question-chara_img {
    width: 13.2666666667vw;
  }
}

.changes {
  margin-bottom: calc(100 / 1366 * 40 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .changes {
    margin-bottom: calc(100 / 750 * 40 / 1 * 1vw);
  }
}

.change {
  color: #5a3728;
  background: url(../img/btn_bg.png) center no-repeat;
  background-size: contain;
  position: relative;
  z-index: 9;
  font-size: calc(100 / 1366 * 30 / 1 * 1vw);
  width: 26.7203513909vw;
  height: 5.270863836vw;
  margin: 0 auto calc(100 / 1366 * 10 / 1 * 1vw);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media only screen and (min-width: 1025px) {
  .change:hover {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media only screen and (max-width: 768px) {
  .change {
    font-size: calc(100 / 750 * 30 / 1 * 1vw * 1.25);
    width: 73vw;
    height: 14.4vw;
    margin: 0 auto calc(100 / 750 * 20 / 1 * 1vw);
  }
}
.change-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 calc(100 / 1366 * 30 / 1 * 1vw) 0 5.8565153734vw;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .change-link {
    padding: 0 calc(100 / 750 * 30 / 1 * 1vw) 0 16vw;
  }
}
.change:nth-of-type(1) .change-link {
  background: url(../img/icon_a.png) 10% center no-repeat;
  background-size: 2.9648609078vw auto;
}
@media only screen and (max-width: 768px) {
  .change:nth-of-type(1) .change-link {
    background: url(../img/icon_a.png) 10% center no-repeat;
    background-size: 8.1vw auto;
  }
}
.change:nth-of-type(2) .change-link {
  background: url(../img/icon_b.png) 10% center no-repeat;
  background-size: 2.9648609078vw auto;
}
@media only screen and (max-width: 768px) {
  .change:nth-of-type(2) .change-link {
    background: url(../img/icon_b.png) 10% center no-repeat;
    background-size: 8.1vw auto;
  }
}
.change:nth-of-type(3) .change-link {
  background: url(../img/icon_c.png) 10% center no-repeat;
  background-size: 2.9648609078vw auto;
}
@media only screen and (max-width: 768px) {
  .change:nth-of-type(3) .change-link {
    background: url(../img/icon_c.png) 10% center no-repeat;
    background-size: 8.1vw auto;
  }
}

.hint {
  margin-top: calc(100 / 1366 * 60 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .hint {
    margin-top: calc(100 / 750 * 60 / 1 * 1vw);
  }
}
.hint-ttl_img {
  width: 1.5007320644vw;
}
@media only screen and (max-width: 768px) {
  .hint-ttl_img {
    width: 4.1vw;
  }
}

.area {
  display: none;
}
.area.is-active {
  display: block;
}

.correct-txt {
  font-size: 2.635431918vw;
  color: #990000;
}
@media only screen and (max-width: 768px) {
  .correct-txt {
    font-size: 6vw;
  }
}
.correct-img_img {
  width: 14.1654465593vw;
}
@media only screen and (max-width: 768px) {
  .correct-img_img {
    width: 33.54vw;
  }
}

.incorrect-txt {
  font-size: 2.635431918vw;
  color: #00223e;
}
@media only screen and (max-width: 768px) {
  .incorrect-txt {
    font-size: 6vw;
  }
}
.incorrect-img_img {
  width: 14.1654465593vw;
}
@media only screen and (max-width: 768px) {
  .incorrect-img_img {
    width: 33.54vw;
  }
}

.correct3-txt {
  font-size: calc(100 / 1366 * 24 / 1 * 1vw);
  text-align: center;
  font-weight: 700;
  margin-top: calc(100 / 1366 * 60 / 1 * 1vw);
}
@media only screen and (max-width: 768px) {
  .correct3-txt {
    font-size: calc(100 / 750 * 30 / 1 * 1vw);
    margin-top: calc(100 / 750 * 60 / 1 * 1vw);
  }
}

.special-video {
  width: 80%;
  padding-top: 5.4172767204vw;
}
@media only screen and (max-width: 768px) {
  .special-video {
    padding-top: 12.3333333333vw;
  }
}
.special-img_img {
  width: 30.8931185944vw;
}
@media only screen and (max-width: 768px) {
  .special-img_img {
    width: 70.3333333333vw;
  }
}
.special-board-txt {
  font-size: calc(100 / 1366 * 18 / 1 * 1vw);
  line-height: 1.2;
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 768px) {
  .special-board-txt {
    font-size: calc(100 / 750 * 24 / 1 * 1vw);
  }
}
.special-txt {
  font-size: calc(100 / 1366 * 24 / 1 * 1vw);
  text-align: center;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .special-txt {
    font-size: calc(100 / 750 * 30 / 1 * 1vw);
  }
}