@charset "utf-8";
/* CSS Document */
/* beginners */
/* message */
.message {padding: 0;}
section.message p {
  font-size: 100%;line-height: 1.3;
}
.message .hero-title h2 {
  margin-bottom: .6em;
  color: var(--color-text-white);
}
.message .hero-title h3 {
  margin: 1.2em 0 .6em;
  color: var(--color-text-white);font-weight: normal;
}
@media screen and (max-width:999px){
  .message .hero-title {
    background: url(../data/beginners/message-bg-sp.jpg) center top no-repeat;background-size: cover;
  }
  .message .hero-title > div {
    width: 100%;
    padding: 10vw 8vw;
  }
}
@media screen and (min-width:1000px){
  .message .hero-title {
    background: url(../data/beginners/message-bg.jpg) center top no-repeat;background-size: cover;
  }
  .message .hero-title > div {
    width: 100rem;
    margin: 0 auto;padding: 8vh 0;
  }
}
/* problems */
.problems {padding: 0;}
section.problems p {
  font-size: 100%;line-height: 1.3;
}
@media screen and (max-width:999px){
  .problems {
    background: url(../data/beginners/problems-bg-sp.jpg) center top no-repeat;background-size: cover;
  }
  .problems .inner {
    padding: 10vw 8vw;
  }
}
@media screen and (min-width:1000px){
  .problems {
    background: url(../data/beginners/problems-bg.jpg) center top no-repeat;background-size: cover;
  }
  .problems .inner {
    padding: 8vh 0 8vh 50rem;
  }
}
.problems h3 {
  margin-bottom: 1em;
  position: relative;
}
.problems h3:after{
  width: calc((2rem + ((1vw - .64rem) * 0.7143))*2);height: .3rem;
  content: '';
  position: absolute;bottom: -.6rem;left: 0;
  background: var(--color-primary);
}
.problems ul {
  margin-top: 2em;
}
.problems li {
  padding: .6em 0;
  font-weight: bold;
}
.problems li .fa {
  margin-right: 1em;
}
@media screen and (max-width:999px){
  .problems ul {
    border-top: dashed 2px var(--color-tertiary);
  }
  .problems li {
    border-bottom: dashed 2px var(--color-tertiary);
  }
}
@media screen and (min-width:1000px){
  .problems ul {
    border-top: dashed 2px var(--color-secondary);
  }
  .problems li {
    border-bottom: dashed 2px var(--color-secondary);
  }
}
/* flow */
.time-line {
  position: relative;
}
.time-line:before {
  width: .3rem;
  content: '';
  position: absolute;top: 1.5em;bottom: 0;
  background: var(--color-primary);
}
.time-line li {
  position: relative;
}
.time-line .fa {
  margin-left: calc(-.5em + .3rem);margin-top: 1em;
}
.time-line .step {
  margin-left: 1em;
  font-size: 100%;font-weight: bold;
}
.time-line .step span {
  vertical-align: middle;
  font-weight: bold;font-style: italic;
}
.time-line dl {
  margin-bottom: 2em;
}
@media screen and (max-width:999px){
  .time-line .step {
    line-height: 4rem;
  }
  .time-line .step span {
    font-size: 4rem;
}
  .time-line dl {
    margin-left: 2rem;
  }
  .time-line dt {
    font-size: 2rem;line-height: 4rem;
  }
  .time-line dd {
    font-size: 90%;
  }
}
@media screen and (min-width:1000px){
  .time-line .step {
    line-height: 6rem;
  }
  .time-line .step span {
    font-size: 6rem;
}
  .time-line dl {
    margin-left: 6rem;
  }
  .time-line dt {
    font-size: 2.6rem;line-height: 6rem;
  }
}

@media screen and (max-width:999px){
  .btn-comic {
    width: 100%;
    margin: 10vw auto 0;
  }
}
@media screen and (min-width:1000px){
  .btn-comic {
    width: 80%;
    margin: 10rem auto 0;
  }
}