@charset "UTF-8";
/* ---------------- reset ----------------- */
* {
  box-sizing: border-box; }

::before, ::after {
  box-sizing: inherit; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; }

main {
  display: block; }

p, table, blockquote, address, pre, iframe, form, figure, dl {
  margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; }

dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit; }

pre {
  font-family: monospace, monospace;
  font-size: inherit; }

address {
  font-style: inherit; }

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b, strong {
  font-weight: 900; }

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: inherit; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 60%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

img {
  width: 100%;
  border-style: none;
  vertical-align: baseline; }

embed, object, iframe {
  border: 0;
  vertical-align: bottom; }

button, input, optgroup, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit; }

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox; }

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio; }

button, input {
  overflow: visible; }

button, select {
  text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none; }

button[disabled], [type="button"][disabled], [type="reset"][disabled], [type="submit"][disabled] {
  cursor: default; }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

option {
  padding: 0; }

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0; }

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"], [type="radio"] {
  padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  outline-offset: -2px; }
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

label[for] {
  cursor: pointer; }

details {
  display: block; }

summary {
  display: list-item; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption {
  text-align: left; }

td {
  vertical-align: top;
  padding: 0; }

th {
  vertical-align: top;
  padding: 0;
  text-align: left;
  font-weight: bold; }

template, [hidden] {
  display: none; }

/* ---------------- style ----------------- */
/* common */
body {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 30px;
  font-size: min(calc((30/750)*100vw), 30px);
  font-weight: 300;
  color: #06201d;
  margin: 0 auto;
}

.section-contents{
  width: 1000px;
  margin: auto;
}

.yotsuya-global-menu-inner li ul li img{
  width: auto;
}



/*voice*/
h2{
  text-align: center;
}

.content-ttl{
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  border-bottom: #FCDDD8;
  background-color: #FCDDD8;
  border-radius: 30px 30px 0px 0px;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 50px;
  width: 800px;
  box-shadow: 8px 0px 0px 0px #ffaea1;
  position: relative;
  padding: 5px 0px;
}

.content-ttl:before{
  content: "";
  position: absolute;
  width: 1000px;
  height: 5px;
  background-color: #fcddd8;
  bottom: 0%;
  right: -10%;
}

.tti-right-top-img{
  position: absolute;
  width: 7%;
  left: 98.5%;
  bottom: 92%;
}

.voice-each-content{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.voice-img-box{
  width: 250px;
  text-align: center;
  position: relative;
}

.voice-img{
  width: 50%;
  z-index: 1;
}

.voice-img-name{
  font-size: 20px;
  color: #fff;
  text-align: center;
  width: 180px;
  margin: 0 auto;
  z-index: 100;
  position: absolute;
  bottom: 0%;
  right: 15%;
}

.voice-img-girl{
  background-color: #F9999E;
}

.voice-img-boy{
  background-color: #8EC3E3;
}

.voice-content-text{
  width: 700px;
}

.voice-content-text{
  font-size: 20px;
  border: solid 2px #eb1c24;
  border-radius: 5px;
  padding: 10px;
  font-weight: 500;
  box-shadow: 4px 5px #ff9e9e;
}


/*challenge*/
.challenge{
  margin-bottom: 50px;
}

.challenge-text-under-ttl{
  text-align: center;
  font-size: 20px;
}

.challenge-grade-btn-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 50px 0px;
}

.challenge-circle{
  border: solid 4px #000;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  cursor: pointer;
}

.circle-choiced{
  animation-name: circle-jump;
  animation-duration: 1s;
  animation-timing-function: liner;
  animation-iteration-count: infinite;
}

@keyframes circle-jump{
  50%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0px);
  }
}

.circle-grade-0{
  background-color: #73cf70;
}

.circle-grade-1{
  background-color: #e17782;
}

.circle-grade-2{
  background-color: #f9a14a;
}

.circle-grade-3{
  background-color: #26a055;
}

.circle-grade-4{
  background-color: #0698ED;
}

.circle-grade-5{
  background-color: #3476af;
}

.circle-grade-6{
  background-color: #6072ae;
}

.circle-ttl{
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  padding-top: 11px;
}

.circle-ttl-grade{
  font-size: 50px;
  font-weight: bold;
}

.circle-ttl-grade-0{
  font-size: 40px;
  font-weight: bold;
  margin-top: 40px;
}

.question-tab-btn-box{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.question-tab-btn-each{
  width: 300px;
  background-color: #fff;
}


.question-easy{
  background-color: #fff;
  border: solid 2px #ECA9B1;
  color: #ECA9B1;
}

.question-easy .choiced{
  color: #fff;
  background-color: #ECA9B1;
}

.question-normal{
  background-color: #fff;
  border: solid 2px #F3A44F;
  color: #F3A44F;
}

.question-normal .choiced{
  background-color: #F3A44F;
  color: #fff;
}

.question-difficult{
  background-color: #fff;
  border: solid 2px #E22605;
  color: #E22605;
}

.question-difficult .choiced{
  background-color: #E22605;
  color: #fff;
}

.question-tab-btn-each{
  transform: scale(1.0);
}

.question-img-content{
  display: block;
}

.js-grade-content{
  display: none;
}

.quetion-anwser-text{
  cursor: pointer;
  text-align: center;
}

.e0n_answer_img{
  width: 250px;
}

.e0e_answer_img{
  width: 650px;
}

.e0d_answer_img{
  width: 400px;
}

.e1n_answer_img{
  width: 300px;
}

.e1d_answer_img{
  width: 250px;
}

.quetion-anwser{
  cursor: pointer;
}

.question-tab-ttl{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.question-ttl-big{
  font-size: 25px;
}

.question-img-box{
  width: 900px;
  margin: 0 auto;
  border: solid 2px #AFAFAF;
  padding-bottom: 40px;
  display: none;
}

.show{
  display: block;
}

.question-img-content{
  position: relative;
}

.question-img{
  width: 70%;
  margin: 0px 100px;
}

.quetion-anwser{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
  color: #1065B8;
}

/*parent*/
.parent-ttl{
  border: solid 3px #eb1c24;
  width: 800px;
  margin: 0 auto;
  position: relative;
}

.parent-ttl:before{
  content: "";
  left: calc(45% - 10px);
  bottom: -15px;
  border-width: 25px 25px 0 25px;
  border-style: solid;
  border-color: #eb1c24 transparent transparent transparent;
  position: absolute;
  top: 102%;
}

.parent-ttl:after{
  content: "";
  left: calc(44.5% - 3px);
  bottom: -15px;
  border-width: 26px 26px 0 26px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 100%;
}

.parent-ttl-text{
  color: #eb1c24;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

.parent-ttl-img{
  width: 7%;
  position: absolute;
  top: 16%;
  left: 8%;
}

.parent-content-sub-ttl{
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-top: 40px;
}

.sub-ttl-red{
  color: #eb1c24;
}

.parent-content-ttl{
  background-color: #eb1c24;
  width: 800px;
  margin: 0 auto;
  padding: 5px 0px;
}

.parent-content-ttl-text{
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}

.parent-content-sub-box{
  position: relative;
  margin-top: 50px;
}

.parent-content-sub-box:before{
  content: "";
  width: 1px;
  height: 50px;
  position: absolute;
  right: 25%;
  bottom: 10%;
  background-color: #000;
  transform: rotate(25deg);
}

.parent-content-sub-box:after{
  content: "";
  width: 1px;
  height: 50px;
  position: absolute;
  left: 25%;
  bottom: 10%;
  background-color: #000;
  transform: rotate(-25deg);
}

.parent-content-main-box{
  margin-top: 30px;
}

.parent-content-main-text{
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}

.parent-text-yellow{
  background: linear-gradient(transparent 80%, #ffc926 0);
}

.parent-content-img-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-top: 30px;
}

.parent-contet-img-each{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  background-color: #fed4d6;
  border-radius: 10px;
  padding: 10px;
}

.parent-contetn-img-text{
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}

.parent-content-img{
  width: 20%;
}

.parent-content-img-arrow{
  position: relative;
}

.parent-content-img-box:before{
  content: "";
  width: 60px;
  height: 20px;
  background-color: #ffc926;
  position: absolute;
  top: 43%;
  right: 48%;
}

.parent-content-img-box:after{
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border: 30px solid transparent;
  border-left: 40px solid #ffc926;
  top: 25%;
  right: 42%;
  margin: auto;
}

.parent-img-point-box{
  margin-top: 30px;
}

.parent-hint-sub-box{
  position: relative;
  margin-top: 50px;
}

.parent-hint-sub-box:before{
  content: "";
  width: 1px;
  height: 50px;
  position: absolute;
  right: 10%;
  bottom: 10%;
  background-color: #000;
  transform: rotate(25deg);
}

.parent-hint-sub-box:after{
  content: "";
  width: 1px;
  height: 50px;
  position: absolute;
  left: 10%;
  bottom: 10%;
  background-color: #000;
  transform: rotate(-25deg);
}

.parent-hint-box{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.parent-hint-box-each-1{
  border: solid 8px #ffd831;
  text-align: center;
  width: 25%;
  height: 220px;
  position: relative;
}

.parent-hint-box-each-1:before{
  content: "";
  width: 12px;
  height: 12px;
  border: 40px solid transparent;
  border-left: 40px solid #ffd831;
  position: absolute;
  top: 25%;
  left: 100%;
}

.parent-hint-box-each-2{
  border: solid 8px #8cbcd9;
  text-align: center;
  width: 30%;
  height: 220px;
  position: relative;
}

.parent-hint-box-each-2:before{
  content: "";
  width: 12px;
  height: 12px;
  border: 36px solid transparent;
  border-left: 36px solid #8cbcd9;
  position: absolute;
  top: 31%;
  left: 100%;
}

.parent-hint-box-each-3{
  border: solid 8px #a3e066;
  text-align: center;
  width: 35%;
  height: 220px;
}

.parent-hint-each-ttl-1{
  background-color: #ffd831;
  color: #fff;
  font-weight: bold;
  font-size: 50px;
  height: 70px;
  line-height: 70px;
}

.parent-hint-each-ttl-2{
  background-color: #8cbcd9;
  color: #fff;
  font-weight: bold;
  font-size: 50px;
  height: 70px;
  line-height: 70px;
}

.parent-hint-each-ttl-3{
  background-color: #a3e066;
  color: #fff;
  font-weight: bold;
  font-size: 50px;
  height: 70px;
  line-height: 70px;
  width: 340px;
}

.parent-hit-ttl-small{
  color: #000;
  font-size: 20px;
  font-weight: bold;
}

.parent-hint-img{
  width: 20%;
  height: 50%;
}

.parent-hint-img-3{
  width: 15%;
  height: 50%;
}

.parent-hint-each-text{
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  margin-left: 20px;
  padding: 10px 0px;
}

.hint-each-text-1{
  padding-top: 25px;
}

.hint-each-text-2{
  padding-top: 10px;
}

.parent-hint-2-balloon-box{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e7f6ff;
  width: 295px;
  position: absolute;
  top: 0%;
  left: 30%;
  padding: 5px 0px;
}

.parent-hint-2-balloon-box:before{
  content: "";
  width: 12px;
  height: 12px;
  border: 32px solid transparent;
  border-bottom: 21px solid #e7f6ff;
  position: absolute;
  bottom: 100%;
  right: 40%;
}

.parent-hint-3-balloon-box{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cff3ac;
  width: 270px;
  position: absolute;
  top: 30%;
  left: 70%;
  position: relative;
  padding: 5px 0px;
}

.parent-hint-3-balloon-box:before{
  content: "";
  width: 12px;
  height: 12px;
  border: 32px solid transparent;
  border-bottom: 21px solid #cff3ac;
  position: absolute;
  bottom: 100%;
  right: 40%;
}

.parent-hint-balloon-text{
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  letter-spacing: -0.05em;
}

.parent-hint-balloon-text span{
  color: #0033cc;
}

.parent-hint-balloon-img{
  width: 16%;
}

.parent-hint-balloon{
  position: relative;
  margin-bottom: 60px;
  margin-top: 30px;
}

.parent-grow-sub-box{
  position: relative;
  margin-top: 50px;
}

.parent-grow-sub-box:before{
  content: "";
  width: 1px;
  height: 50px;
  position: absolute;
  right: 18%;
  bottom: 10%;
  background-color: #000;
  transform: rotate(25deg);
}

.parent-grow-sub-box:after{
  content: "";
  width: 1px;
  height: 50px;
  position: absolute;
  left: 18%;
  bottom: 10%;
  background-color: #000;
  transform: rotate(-25deg);
}

.parent-grow-bar-time{
  display: flex;
  justify-content: space-between;
  margin-top: 300px;
  position: relative;
  padding: 0px 110px;
}

.parent-grow-bar-time:before{
  content: "";
  width: 1000px;
  height: 1px;
  border: solid 1px #000;
  position: absolute;
  bottom: 100%;
  right: 0%;
}

.bar-times-text{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.parent-grow-bar-content{
  position: relative;
}

.grow-bar-each{
  position: absolute;
  bottom: 100%;
  width: 100px;
  background-color: #00b050;
}

.grow-bar-2{
  height: 170px;
  left: 7.5%;
}

.grow-bar-3{
  height: 185px;
  left: 26.5%;
}

.grow-bar-4{
  height: 200px;
  left: 45%;
}

.grow-bar-5{
  height: 230px;
  left: 64%;
}

.grow-bar-6{
  height: 250px;
  left: 82%;
}

.parent-grow-point-big{
  background-color: #eb1c24;
  color: #fff;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  width: 260px;
  margin: 0 auto;
  border: solid 3px #fff;
  box-shadow: 0px 0px 0px 5px #eb1c24;
  margin-top: 30px;
}

.grow-point-big-number{
  font-size: 50px;
}

.grow-point-2{
  position: absolute;
  left: 7.5%;
  bottom: 640%;
  font-size: 30px;
  font-weight: bold;
}

.grow-point-6{
  position: absolute;
  left: 80.5%;
  bottom: 910%;
  font-size: 40px;
  font-weight: bold;
}

.grow-bar-arrow{
  position: absolute;
  right: 23%;
  bottom: 825%;
  width: 60%;
}

.grow-left-point{
  position: absolute;
  width: 40px;
  background-color: #ccffcc;
  left: 0%;
  bottom: 300%;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  writing-mode: vertical-rl;
  height: 220px;
  padding: 0px 5px;
}
.grow-left-point span{
  text-combine-upright: all;
}

.grow-bottom-time{
  background-color: #ccffcc;
  width: 600px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 0px;
  margin-top: 40px;
}
.grow-bottom-time-anotation{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.grow-summary{
  font-size: 30px;
  font-weight: bold;
  color: #eb1c24;
  text-align: center;
  margin-top: 20px;
}

.bar-times-under-box{
  position: relative;
}

.bar-times-under-2{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 100%;
  left: 6.5%;
}

.bar-times-under-6{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 100%;
  left: 76%;
  width: 240px;
}

/*ファーストビュー*/
.firstview{
  margin-bottom: 50px;
}

.firstview-content-text{
  font-weight: bold;
  font-size: 20px;
  width: 450px;
  margin: 0 auto;
}

.firstview-content-text span{
  font-weight: bold;
  font-size: 24px;
  background: linear-gradient(transparent 40%,#fff100 60%);
}

.firstview-content-box{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.firstview-content-each{
  width: 50%;
  margin-top: 160px;
}

.firstview-content-img-1{
  width: 70%;
  margin-left: 70px;
  margin-top: 30px;
  margin-bottom: 25px;
}

.firstview-content-img-2{
  width: 55%;
  margin-left: 90px;
  margin-top: 15px;
}

.firrstview-content-2{
  background-color: #ffeeef;
}

.firstview-content-ttl-img{
  width: 80%;
  margin-left: 50px;
  margin-top: 50px;
}

.firstview-content-cross{
  position: absolute;
  color: #eb1c24;
  font-size: 140px;
  font-weight: 500;
  right: 44.5%;
  top: 46%;
}

.firstview-ttl-box{
  position: relative;
}

.firstview-ttl-img{
  position: absolute;
  top: 0%;
  right: 0%;
}

/*apply*/
.apply-section{
  margin: 50px auto;
  text-align: center;
}

.apply-link{
  font-size: 20px;
  text-decoration: underline;
  margin: 0 auto;
  font-weight: bold;
}

.apply-button{
  width: 600px;
}