@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";
*, :before, :after {
  box-sizing: border-box;
  background-repeat: no-repeat
}

:before, :after {
  text-decoration: inherit;
  vertical-align: inherit
}

:where(:root) {
  cursor: default;
  line-height: 1.5;
  overflow-wrap: break-word;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%
}

:where(body) {
  margin: 0
}

:where(h1) {
  font-size: 2em;
  margin: .67em 0
}

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0
}

:where(hr) {
  color: inherit;
  height: 0
}

:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0
}

:where(nav li):before {
  content: "​";
  float: left
}

:where(pre) {
  font-family: monospace, monospace;
  font-size: 1em;
  overflow: auto
}

:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted
}

:where(b, strong) {
  font-weight: bolder
}

:where(code, kbd, samp) {
  font-family: monospace, monospace;
  font-size: 1em
}

:where(small) {
  font-size: 80%
}

:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle
}

:where(iframe) {
  border-style: none
}

:where(svg:not([fill])) {
  fill: currentColor
}

:where(table) {
  border-collapse: collapse;
  border-color: inherit;
  text-indent: 0
}

:where(button, input, select) {
  margin: 0
}

:where(button, [type=button i], [type=reset i], [type=submit i]) {
  -webkit-appearance: button
}

:where(fieldset) {
  border: 1px solid #a0a0a0
}

:where(progress) {
  vertical-align: baseline
}

:where(textarea) {
  margin: 0;
  resize: vertical
}

:where([type=search i]) {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: .54
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

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

:where(dialog) {
  background-color: #fff;
  border: solid;
  color: #000;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content
}

:where(dialog:not([open])) {
  display: none
}

:where(details>summary:first-of-type) {
  display: list-item
}

:where([aria-busy=true i]) {
  cursor: progress
}

:where([aria-controls]) {
  cursor: pointer
}

:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed
}

:where([aria-hidden=false i][hidden]) {
  display: initial
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute
}

:where(button, input, select, textarea) {
  background-color: transparent;
  border: 1px solid WindowFrame;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: .25em .375em
}

:where(select) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em
}

:where(select[multiple]) {
  background-image: none
}

:where([type=color i], [type=range i]) {
  border-width: 0;
  padding: 0
}

html {
  text-align: left;
  color: #000;
  font-feature-settings: "palt"
}

body {
  min-width: 320px
}

a {
  text-decoration: none;
  color: #000
}

ul {
  padding: 0;
  list-style: none
}

#mainContents .container {
  padding-top: 0
}

#mainContents .container>.contentsWrapper {
  max-width: 100%;
  padding: 0
}

#mainContents .container>.contentsWrapper>.wrapper {
  padding-bottom: 0
}

#traininfo .bg__green {
  background-color: #bcd8b7
}

#traininfo .bg__white {
  background-color: #fff
}

#traininfo .wrap__hero {
  overflow: hidden;
  position: relative;
  height: 500px
}

@media screen and (min-width: 768px) {
  #traininfo .wrap__hero {
    height: inherit
  }
}

#traininfo .hero {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 400px;
  margin-top: -250px;
  margin-left: -450px
}

@media screen and (min-width: 768px) {
  #traininfo .hero {
    position: relative;
    top: inherit;
    left: inherit;
    width: inherit;
    height: inherit;
    margin-top: 0;
    margin-left: 0
  }
}
@media screen and (min-width: 1051px) {
  #traininfo .hero {
    text-align: center;
  }
}

#traininfo .hero img {
  position: relative;
}
@media screen and (min-width: 1051px) {
  #traininfo .hero img {
    width: 100%;
    max-width: 1920px;
  }
}

#traininfo .hero .hero_txt {
  background-color: #fff;
  width: fit-content;
  border: 5px solid #70AF6A;
  position: relative;
  bottom: 28%;
  margin: auto;
  font-size: 1.0rem;
  text-align: center;
  padding: 1em 4em;
  border-radius: 100vh;
}
@media screen and (min-width: 768px) {
  #traininfo .hero .hero_txt {
    font-size: 1.4rem;
    position: absolute;
    width: 380px;
    padding: 0.5em 2em;
    bottom: 13%;
    left:calc(50% - 190px);
  }
}
@media screen and (min-width: 1051px) {
  #traininfo .hero .hero_txt {
    font-size: 1.8rem;
    width: 480px;
    left:calc(50% - 240px);
  }
}
@media screen and (min-width: 1491px) {
  #traininfo .hero .hero_txt {
    font-size: 2rem;
    width: 660px;
    left:calc(50% - 330px);
    padding: 1em 4em;
  }
}


#traininfo .box__chart {
  padding: 0 1.5rem;
  margin-top: -255px;
  margin-left: auto;
  margin-right: auto;
  max-width: 936.5px;
  width: 100%;
  z-index: 1;
  position: relative
}

@media screen and (min-width: 375px) {
  #traininfo .box__chart {
    margin-top: -255px
  }
}

@media screen and (min-width: 400px) {
  #traininfo .box__chart {
    margin-top: -275px
  }
}

@media screen and (min-width: 500px) {
  #traininfo .box__chart {
    margin-top: -300px
  }
}

@media screen and (min-width: 590px) {
  #traininfo .box__chart {
    margin-top: -340px
  }
}

@media screen and (min-width: 659px) {
  #traininfo .box__chart {
    margin-top: -360px
  }
}

@media screen and (min-width: 768px) {
  #traininfo .box__chart {
    margin-top: -220px
  }
}

@media screen and (min-width: 992px) {
  #traininfo .box__chart {
    margin-top: -280px
  }
}

#traininfo .list__btn li {
  position: absolute
}

#traininfo .list__btn li a img {
  transition: transform .3s
}

#traininfo .list__btn li a img:hover {
  transform: translateY(-5px)
}

#traininfo .list__btn li:first-child {
  bottom: 34.5%;
  left: 52%;
  max-width: clamp(70px, 20vw, 170px);
  width: 100%;
  height: auto
}

@media screen and (min-width: 751px) {
  #traininfo .list__btn li:first-child {
    left: 53%;
    bottom: 34.5%;
    max-width: clamp(70px, 17vw, 170px);
  }
}

@media screen and (min-width: 1051px) {
  #traininfo .list__btn li:first-child {
    left: inherit;
    max-width: 190px;
    right: 27.4%;
    bottom: 34.5%
  }
}

#traininfo .list__btn li:nth-child(2) {
  bottom: 27.75%;
  right: 30.25%;
  max-width: clamp(60px, 16vw, 130px);
  width: 100%;
  height: auto
}

@media screen and (min-width: 751px) {
  #traininfo .list__btn li:nth-child(2) {
    right: 30%;
    max-width: clamp(60px, 13vw, 130px);
  }
}

@media screen and (min-width: 1051px) {
  #traininfo .list__btn li:nth-child(2) {
    max-width: 149px;
    right: 29.5%
  }
}

#traininfo .list__btn li:nth-child(3) {
  bottom: 21%;
  left: 8.5%;
  width: 100%;
  height: auto;
  max-width: clamp(60px, 16vw, 130px)
}

@media screen and (min-width: 751px) {
  #traininfo .list__btn li:nth-child(3) {
    left: 8%;
    max-width: clamp(60px, 13vw, 130px);
  }
}

@media screen and (min-width: 1051px) {
  #traininfo .list__btn li:nth-child(3) {
    max-width: 149px;
    left: 7.25%
  }
}

#traininfo .list__btn li:nth-child(4) {
  bottom: 21%;
  left: 30%;
  max-width: 70px;
  width: 100%;
  height: auto;
  max-width: clamp(60px, 16vw, 130px)
}

@media screen and (min-width: 751px) {
  #traininfo .list__btn li:nth-child(4) {
    left: 30%;
    max-width: clamp(60px, 13vw, 130px);
  }
}

@media screen and (min-width: 1051px) {
  #traininfo .list__btn li:nth-child(4) {
    max-width: 165px;
    left: 28.75%
  }
}

#traininfo .list__btn li:nth-child(5) {
  bottom: 20.5%;
  right: 30%;
  width: 100%;
  height: auto;
  max-width: clamp(65px, 16vw, 130px)
}

@media screen and (min-width: 751px) {
  #traininfo .list__btn li:nth-child(5) {
    right: 31%;
    max-width: clamp(60px, 13vw, 130px);
  }
}

@media screen and (min-width: 1051px) {
  #traininfo .list__btn li:nth-child(5) {
    max-width: 153.5px;
    right: 29.5%
  }
}

#traininfo .list__btn li:last-child {
  bottom: 20.5%;
  right: 8%;
  max-width: clamp(65px, 16vw, 130px);
  width: 100%;
  height: auto
}

@media screen and (min-width: 751px) {
  #traininfo .list__btn li:last-child {
    right: 8%;
    max-width: clamp(60px, 13vw, 130px);
  }
}

@media screen and (min-width: 1051px) {
  #traininfo .list__btn li:last-child {
    max-width: 153.5px;
    right: 6.75%
  }
}

#traininfo .bg__green {
  overflow: hidden
}

#traininfo .btn__green {
  position: absolute;
  bottom: 1%;
  left: 5%;
  text-align: center;
  border: 8px solid #B6D6EE;
  background-color: #FFF;
  border-radius: 24px;
  max-height: 15%;
  width: 90%;
  padding: 1% 2% 0;
}

@media screen and (min-width: 576px) {
  #traininfo .btn__green {
    border: 16px solid #B6D6EE;
    padding: 3% 4% 0.5%;
  }
}

@media screen and (min-width: 1051px) {
  #traininfo .btn__green {
    border: 24px solid #B6D6EE;
    border-radius: 36px;
    padding: 5% 4% 3%;
  }
}

#traininfo .btn__green a {
  display: block;
  width: 40%;
  margin: auto;
  margin-top: 2%;
}

#traininfo .btn__green a:hover {
  transform: translateY(-5px)
}


#traininfo .mt-box {
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  #traininfo .mt-box {
    margin-top: 91px
  }
}

#traininfo .mt-box+.box {
  margin-top: 30px
}

@media screen and (min-width: 768px) {
  #traininfo .mt-box+.box {
    margin-top: 80px
  }
}

#traininfo .box {
  max-width: 850px;
  width: 100%;
  margin: auto;
  padding: 0 1.5rem;
  position: relative;
}

@media screen and (min-width: 850px) {
  #traininfo .box {
    padding: 0 0 16px
  }
}

#traininfo .box+.box {
  margin-top: 30px
}

@media screen and (min-width: 768px) {
  #traininfo .box+.box {
    margin-top: 80px
  }
}

#traininfo .pb-box {
  margin-bottom: 50px
}

@media screen and (min-width: 768px) {
  #traininfo .pb-box {
    margin-bottom: 135px
  }
}

#traininfo .btn {
  width: 100%;
  padding: 0 1.5rem;
  display: block;
  max-width: 240px;
  transition: transform .3s;
  position: absolute;
  bottom: 0px;
  left: calc(50% - 120px);
}

@media screen and (min-width: 520px) {
  #traininfo .btn {
    max-width: 360px;
    left: calc(50% - 180px);
  }
}

@media screen and (min-width: 850px) {
  #traininfo .btn {
    max-width: 400px;
    padding: 0;
    bottom: 30px;
    left: calc(50% - 200px);
  }
}

#traininfo .btn:hover {
  transform: translateY(-5px)
}

#traininfo .btn__red {
  width: 100%;
  padding: 0 1.5rem;
  display: block;
  margin: 0 auto;
  max-width: 350px;
  transition: transform .3s
}

@media screen and (min-width: 850px) {
  #traininfo .btn__red {
    max-width: 397px;
    padding: 0;
    margin: 0 auto
  }
}

#traininfo .btn__red:hover {
  transform: translateY(-5px)
}

#traininfo .box__beginner {
  max-width: 828px;
  width: 100%;
  margin: auto;
  padding: 0 1.5rem
}

@media screen and (min-width: 850px) {
  #traininfo .box__beginner {
    padding: 0
  }
}

#traininfo .text__thanks {
  max-width: 350px;
  margin: 15px auto 0
}

@media screen and (min-width: 768px) {
  #traininfo .text__thanks {
    max-width: 580px;
    margin: 35px auto 0
  }
}

#traininfo .box__present {
  max-width: 850px;
  width: 100%;
  margin: auto;
  padding: 0 1.5rem
}

@media screen and (min-width: 850px) {
  #traininfo .box__present {
    padding: 0
  }
}

#traininfo .box__present .btn__red {
  margin: -35px auto 0
}

@media screen and (min-width: 576px) {
  #traininfo .box__present .btn__red {
    padding-bottom: 20px
  }
}

@media screen and (min-width: 850px) {
  #traininfo .box__present .btn__red {
    margin: -90px auto 0
  }
}

@media screen and (min-width: 1200px) {
  #traininfo .box__present .btn__red {
    margin: -90px auto 0
  }
}

@media screen and (min-width: 1800px) {
  #traininfo .box__present .btn__red {
    margin: -90px auto 0
  }
}

#traininfo .t__c {
  font-size: 1.2rem;
  padding: 0 1.5rem 50px
}

@media screen and (min-width: 768px) {
  #traininfo .t__c {
    padding: 0 0 100px;
    text-align: center
  }
}

#traininfo .onlysp {
  display: inherit
}

@media screen and (min-width: 576px) {
  #traininfo .onlysp {
    display: inherit
  }
}

@media screen and (min-width: 768px) {
  #traininfo .onlysp {
    display: none
  }
}

@media screen and (min-width: 992px) {
  #traininfo .onlysp {
    display: none
  }
}

@media screen and (min-width: 1200px) {
  #traininfo .onlysp {
    display: none
  }
}

#traininfo .onlypc {
  display: none
}

@media screen and (min-width: 576px) {
  #traininfo .onlypc {
    display: none
  }
}

@media screen and (min-width: 768px) {
  #traininfo .onlypc {
    display: none
  }
}

@media screen and (min-width: 992px) {
  #traininfo .onlypc {
    display: inherit
  }
}

@media screen and (min-width: 1200px) {
  #traininfo .onlypc {
    display: inherit
  }
}

#traininfo .sansserif, main {
  font-family: Noto Sans JP, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal
}

#traininfo .serif {
  font-family: Noto Sans JP, sans-serif
}

main {
  font-size: 1.8rem
}

@media screen and (max-width: 575px) {
  main {
    font-size: 1.6rem
  }
}

#traininfo .add_txt_box {
  font-size: 1.4rem;
  position: absolute;
  bottom:0;
  text-align: center;
  width: calc(100% - 3rem);
  bottom: 40px;
}
@media screen and (min-width: 480px) {
  #traininfo .add_txt_box {
    font-size: 1.8rem;
    bottom: 50px;
  }
}
@media screen and (min-width: 520px) {
  #traininfo .add_txt_box {
    font-size: 1.8rem;
    bottom: 70px;
  }
}
@media screen and (min-width: 580px) {
  #traininfo .add_txt_box {
    font-size: 2.2rem;
    bottom: 90px;
  }
}
@media screen and (min-width: 850px) {
  #traininfo .add_txt_box {
    font-size: 2.8rem;
    bottom: 120px;
    width: 100%;
  }
}
@media screen and (min-width: 1051px) {
  #traininfo .add_txt_box {
    font-size: 2.8rem;
    bottom: 120px;
  }
}
#traininfo .tkl_cp .tkl_cp_txt {
  margin: 1em;
  padding: 0 1.5rem;
}
@media screen and (min-width: 1051px) {
  #traininfo .tkl_cp .tkl_cp_txt {
  	margin: 2em;
  }
}
#traininfo .tkl_cp .tkl_cp_txt h3 {
  font-size:1.6rem;
  font-weight: 900;
  text-align: center;
}
@media screen and (min-width: 1051px) {
  #traininfo .tkl_cp .tkl_cp_txt h3 {
  	font-size:2.4rem;
  }
}
#traininfo .tkl_cp .tkl_cp_txt p {
  margin: 1em 0 3em;
  padding: 0 1.5rem;
  font-size:1.6rem;
}
@media screen and (min-width: 1051px) {
  #traininfo .tkl_cp .tkl_cp_txt p {
  	width:100%;
  	max-width: 740px;
  	margin-left: auto;
  	margin-right: auto;
  	font-size:2rem;
  }
}
#traininfo .tkl_entry {
  width:100%;
  max-width: 220px;
  margin: 0 auto 1em;
}
@media screen and (min-width: 850px) {
  #traininfo .tkl_entry {
    max-width: 300px;
  }
}