@charset "UTF-8";
/*! # kracie © 2019 amana*/

.mod-intro .mod-intro-inner h1{
  position:absolute;
  top:53px;
  left:36px;
}
.mod-intro .mod-intro-inner .figure{
  position:absolute;
  top:-7px;
  right:36px;
}

.sec-inner{
  position:relative;
  margin:0 auto;
  padding-top:50px;
  padding-bottom:50px;
  width:100%;
  max-width:860px;
}
.sec-inner_end{
  position:relative;
  margin:0 auto;
  padding-top:50px;
  padding-bottom:50px;
  width:100%;
  max-width:930px;
}
.sec-inner img{
  width:100%;
  height:auto;
}
.sec1,.sec3,.sec5,.sec7{
  background:#fff;
}
.sec2,.sec4,.sec6,.sec8{
  background:#fff3f3;
}
.teach_bnr{
  background-color:#fd6769;
}
.teach_bnr .sec-inner{
  padding:30px 0;
}
@media (max-width:769px) {
  .mod-intro-inner{
    width:100%!important;
    height:37.5vw!important;
    background-position:right -25vw center;
    background-size: auto 100%;
  }
  .sec-inner .caption{
    margin:0 auto;
    width:90%;
    float:none;
  }
  .mod-intro .mod-intro-inner img{
    width:100%;
  }
  .mod-intro .mod-intro-inner h1{
    /*top:7vw;
    left:8vw;*/
    width:60vw;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  .mod-intro .mod-intro-inner .figure{
    top:0;
    right:0;
    width:100%;
  }
  .sec-inner{
    padding:8vw 0;
    width:90vw;
  }
  .sec-inner_end{
    padding:8vw 0;
    width:90vw;
  }
  .teach_bnr .sec-inner{
    padding:6vw 0;
  }
}

.sec-inner .answer{
  margin:0;
  padding:0;
}
.sec-inner .answer p{
  font-size:14px;
  line-height:21px;
  color:#555;
  text-align:left;
}
.sec-inner .question{
  position:relative;
  margin-bottom:18px;
  padding-left:62px;
  font-size:20px;/*1.42857em;*/
  line-height:50px;
  font-weight:bold;
  color:#ff6666;
}
.sec-inner .question::before{
  content:'';
  position:absolute;
  width:50px;
  height:50px;
  top:0;
  left:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  z-index:1;
}
.sec-inner .question.icon_no1::before{
  background-image:url("../../img/learn/icon_no1.png");
}
.sec-inner .question.icon_no2::before{
  background-image:url("../../img/learn/icon_no2.png");
}
.sec-inner .question.icon_no3::before{
  background-image:url("../../img/learn/icon_no3.png");
}
.sec-inner .question.icon_no4::before{
  background-image:url("../../img/learn/icon_no4.png");
}
.sec-inner .question.icon_no5::before{
  background-image:url("../../img/learn/icon_no5.png");
}
.sec-inner .question.icon_no6::before{
  background-image:url("../../img/learn/icon_no6.png");
}
.sec-inner .question.icon_no7::before{
  background-image:url("../../img/learn/icon_no7.png");
}
.sec-inner .caption1{
  margin-left:auto;
  width:536px;
}
.sec-inner .caption2{
  margin-right:auto;
  width:690px;
}
.sec-inner .caption3{
  margin-left:auto;
  width:536px;
}
.sec-inner .caption4{
  margin-right:auto;
  width:560px;
}
.sec-inner .caption5{
  margin-left:auto;
  width:615px;
}
.sec-inner .caption6{
  margin-right:auto;
  width:625px;
}
.sec-inner .caption7{
  margin-left:auto;
  width:536px;
}
.sec-inner .no1_figure{
  position:absolute;
  width:289px;
  top:50px;
  left:0;
  z-index:1;
}
.sec-inner .no2_figure{
  position:absolute;
  width:135px;
  top:65px;
  right:0;
  z-index:1;
}
.sec-inner .no3_figure{
  position:absolute;
  width:289px;
  top:50px;
  left:0;
  z-index:1;
}
.sec-inner .no4_figure{
  position:absolute;
  width:268px;
  top:50px;
  right:0;
  z-index:1;
}
.sec-inner .no5_figure{
  position:absolute;
  width:223px;
  top:100px;
  left:0;
  z-index:1;
}
.sec-inner .no6_figure{
  position:absolute;
  width:227px;
  top:78px;
  right:0;
  z-index:1;
}
.sec-inner .no7_figure{
  position:absolute;
  width:289px;
  top:50px;
  left:0;
  z-index:1;
}
@media (max-width:769px) {
  .sec-inner .answer p{
    font-size:0.9rem;
    line-height:1.6rem;
  }
  .sec-inner .question{
    margin-bottom:3vw;
    padding-left:10vw;
    font-size:1rem;
    line-height:8vw;
  }
  .sec-inner .question.sp_ttl_setting{
    line-height:1.6rem;
  }
  .sec-inner .question::before{
    width:8vw;
    height:8vw;
  }
  .sec-inner .caption1{
    margin:0 auto;
    padding-bottom:8vw;
    width:90vw;
  }
  .sec-inner .caption2{
    margin:0 auto;
    padding-bottom:8vw;
    width:90vw;
  }
  .sec-inner .caption3{
    margin:0 auto;
    padding-bottom:8vw;
    width:90vw;
  }
  .sec-inner .caption4{
    margin:0 auto;
    padding-bottom:8vw;
    width:90vw;
  }
  .sec-inner .caption5{
    margin:0 auto;
    padding-bottom:8vw;
    width:90vw;
  }
  .sec-inner .caption6{
    margin:0 auto;
    padding-bottom:8vw;
    width:90vw;
  }
  .sec-inner .caption7{
    margin:0 auto;
    padding-bottom:8vw;
    width:90vw;
  }
  .sec-inner .no1_figure{
    position:relative;
    margin:0 auto;
    width:90vw;
    top:0;
  }
  .sec-inner .no2_figure{
    position:relative;
    margin:0 auto;
    width:35vw;
    top:0;
  }
  .sec-inner .no3_figure{
    position:relative;
    margin:0 auto;
    width:90vw;
    top:0;
  }
  .sec-inner .no4_figure{
    position:relative;
    margin:0 auto;
    width:90vw;
    top:0;
  }
  .sec-inner .no5_figure{
    position:relative;
    margin:0 auto;
    width:43vw;
    top:0;
  }
  .sec-inner .no6_figure{
    position:relative;
    margin:0 auto;
    width:50vw;
    top:0;
    right:0;
  }
  .sec-inner .no7_figure{
    position:relative;
    margin:0 auto;
    width:90vw;
    top:0;
  }
}

.learn_end{
  position:relative;
  margin:0 auto;
  width:100%;
  border-radius:10px;
  background-color:#fff;
}
.learn_end .innr{
  position:relative;
  padding:50px 60px;
}
.learn_end .learn_end_ttl{
  position:relative;
  display:table;
  margin:0 auto 45px auto;
  padding:0 5px;
  text-align:center;
  font-size:24px;
  letter-spacing:1px;
  font-weight:600;
}
.learn_end .learn_end_ttl span {
  position:relative;
  color:#ff6666;
  z-index:2;
}
.learn_end .learn_end_ttl::after {
  content:'';
  position:absolute;
  width:100%;
  height:13px;
  bottom:4px;
  left:0;
  background-color: #fff4c3;
  z-index:1;
}
.learn_end .learn_end_detail{
  margin-right:auto;
  width:390px;
  color:#555;
}
.learn_end_list{
  display:block;
  list-style:none;
}
.learn_end_list li{
  position:relative;
  margin-bottom:20px;
  padding-left:20px;
  vertical-align:top;
  text-align:left;
  font-size:19px;
  line-height:30px;
  font-weight:bold;
}
.learn_end_list .txt_dot::before{
  content:'●';
  position:absolute;
  left:0;
  top:0;
  font-size:14px;
  line-height:30px;
  color:#ff6666;
  z-index:1;
}
.learn_end_list li:last-child{
  margin-bottom:0;
}
.learn_end_note{
  margin-top:13px;
  font-size:12px;
  line-height:19px;
}
.learn_end .end_figure{
  position:absolute;
  width:380px;
  top:124px;
  right:60px;
  z-index:1;
}
.learn_end .end_figure img{
  width:100%;
  height:auto;
}
@media (max-width:769px) {
   .learn_end{
    width:90vw;
    border-radius:2vw;
  }
  .learn_end .innr{
    padding:6vw 4vw;
  }
  .learn_end .learn_end_ttl{
    margin:0 auto 4vw auto;
    padding:0 1vw;
    font-size:1rem;
    letter-spacing:0;
  }
  .learn_end .learn_end_ttl::after {
    height:1.6vw;
    bottom:1vw;
  }
  .learn_end .learn_end_detail{
    margin:0 auto;
    width:80vw;
  }
  .learn_end_list li{
    position:relative;
    margin-bottom:2vw;
    padding-left:4.7vw;
    font-size:0.9rem;
    line-height:1.5rem;
  }
  .learn_end_list .txt_dot::before{
    font-size:0.8rem;
    line-height:1.5rem;
  }
  .learn_end_note{
    margin-top:4vw;
    font-size:0.8rem;
    line-height:1.4rem;
  }
  .learn_end .end_figure{
    position:relative;
    margin:0 auto;
    padding-top:6vw;
    width:80vw;
    top:0;
    right:0;
  }
}
/*teach_bnr*/
.teach_bnr .btn-teach{
  width:470px;
  margin:0 auto;
  cursor:pointer;
}
.teach_bnr .btn-teach a{
  display:block;
  width:470px;
  height:90px;
  cursor:pointer;
  overflow:hidden;
  font-size:0;
  text-indent:100%;
  white-space:nowrap;
  outline:none;
  background:url(../../img/learn/link-btn.png) no-repeat 0 0;
}
.teach_bnr .btn-teach a:hover{
  background-position:0 -90px;
}
@media (max-width:769px) {
  .teach_bnr .btn-teach{
    width:85vw;
  }
  .teach_bnr .btn-teach a{
    width:85vw;
    height:16.2766vw;
    background-size:100% auto;
  }
  .teach_bnr .btn-teach a:hover{
    background-position:0 0;
  }
}