*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav,section{box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none;outline:none}
a img{border-style:none}
ul,li{list-style-type:none}

html{
  font-size: 16px;
  height:100%
}
@media screen and (min-width: 681px) and ( max-width:768px) {
  html{
    font-size: 14px;
  }
}
@media screen and (max-width: 680px){
  html{
    font-size: 13px;
  }
}
body{
  background:#fff; /* 背景 */
  color:#333; /* 文字色(メイン部分の文字は別箇所#leftcolumn-innerで指定) */
  font-family: 'Noto Sans JP', sans-serif;
  text-align:left;
  height:100%;
  line-height:1.5;
  overflow-wrap:break-word;
  word-wrap:break-word;
  position:relative;
}
img {
  width: 100%;
}


.contents {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 2em 2em;
}
@media screen and (max-width: 768px){
  .contents {
    padding: 2em 1em;
  }
}
.sub-catch {
  display: inline-block;
}
h2 {
  text-align: center;
  color: #fff;
  font-size: 4em;
  font-weight: bold;
  padding: 30px 0;
      background-size: cover;
}
h2 span {
  display: block;
  font-size: .4em;
}

@media screen and (max-width: 768px){
  h2 {
    font-size: 3em;
  }
}

/* ----------decoration-------- */

.marker_y {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.marker_y_b {
  background:linear-gradient(transparent 0%, #fff100 0%);
}
.red {
  color: #e5004f;
}
.green {
  color: #3ab34e;
}
.yellow {
  color: #fff100;
}
.size_up {
  font-size: 120%;
}
.bg_effef2 {
  background-color: #effef2;
}

/* ----------floating-------- */
.float-button__wrap {
  width: 250px;
  height: 180px;
  position: fixed;
  bottom: 10px;
  right: 30px;
  z-index: 10;
}
.float-button__wrap a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

@media screen and (min-width: 769px){ 
.float-button__wrap img {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
}
@media screen and (max-width: 768px){
  .float-button__wrap {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0px;
    right: 0px;
    background-color: #fc6453;

  }
  .float-button__wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    font-size: 1.6em;
    font-weight: bold;
    padding: 20px;
  }
}

/* ----------offer-------- */
.offer {
  padding: 5em 0;
}
.offer img {
  width: 80%;
}
.offer ul {
  text-align: left;
  width: 60%;
  margin: 0 auto;
}
.offer ul li {
  list-style: circle;
  font-size: 1.5em;
  margin-bottom: .8em;
}
.cta {
  margin: 0 auto;
  margin-top: 5em;
}
.cta a {
  animation: anime1 0.5s ease 0s infinite alternate;
  width: 80%;
  margin: 0 auto;
  margin-bottom: .5em;
  display: block;
  transform-origin:center;
  background-color: #fc6453;
  color: #fff;
  font-size: 1.4em;
  padding: 1em ;
  font-weight: bold;
  border-radius: 10px;
}
.triangle-right {
  display: inline-block;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  margin-left: 10px;
}

@media screen and (min-width: 769px){
  .sp {
    display: none;
  }
  section {
    padding: 0em 0;
  }

}
@media screen and (max-width: 768px){
  .pc {
    display: none;
  }
  section {
    padding: 0em 0;
  }
  .offer {
    padding: 1em 0;
  }
  .offer img {
    width: 100%;
  }
  .offer ul {
    width: 80%;
    margin-top: 2em;
  }
  .offer ul li {
    font-size: 1.3em;
  }
  .cta {
    margin: 0 auto;
    margin-top: 5em;
  }
  .cta a {
  width: 90%;
}
}

#usecase .contents img,#case .contents img {
  margin: 2em 0;
  padding: 0 1em;
}
#reasons div.reason img {
  max-width: 980px;
  margin: 0 auto;
  display: block;
}


/* ----------FV--------- */
#Fv,#Startup {
  background-color: #3ab34e;
}
#Fv img {
  padding: 1em 0 2em;
}
@media screen and (max-width: 768px){
  #Fv img {
    padding: 0;
  }
  #Fv .contents {
    padding: 1em 0;
  }
}


/* ----------Introduction--------- */
#Introduction p {
  text-align: left;
}
.intro_head {
  font-size: 2.8em;
  font-weight: bold;
  color: #3ab34e;
  margin-bottom: 1em;
}
.special_price {
  margin: 0 auto;
  padding: 10px 50px;
  font-size: 2.3em;
  font-weight: bold;
  color: #e5004f;
  background-color: #fbedf2;
  border: 4px solid #e5004f;
  border-radius: 16px;
  display: inline-block;
  margin-top: 1em;
  margin-bottom: 2em;
}
.intro_p p {
  font-size: 1.5em;
  line-height: 1.8;
  margin-bottom: 2em;
}
.intro_p ul {
  text-align: left;
  margin: 1em 0;
  margin-left: 2em;
}
.intro_p ul li {
  list-style: square;
  font-size: 1.5em;
  line-height: 1.8;
}

@media screen and (min-width: 769px){
  #Introduction {
    background-image: url(images/img_02.png);
    background-position: right 20% center;
  }
}
@media screen and (max-width: 768px){
  #Introduction .contents {
    padding: 2em 2em;
  }
  .special_price {
    width: 100%;
    padding: 10px 30px;
    font-size: 1.8em;
    line-height: 1.3;
    text-align: center !important;
    margin-top: 0em;
    margin-bottom: 1em;
  }
  .intro_head {
    font-size: 2.2em;
    font-weight: bold;
    color: #3ab34e;
    margin-bottom: 1em;
  }
}


/* ----------Startup--------- */
#Startup .contents {
  padding: 80px 0;
}
#Startup h2 {
  background-image: url(images/title_b01.png);
}
#Startup p {
  color: #fff;
  font-size: 1.5em;
  line-height: 2;
}
#Startup img {
  width: 80%;
  margin-top: 60px;
}

/* ----------Usecase--------- */
#Usecase h2 {
  background-image: url(images/title_b02.png);
}
.usecase {
  margin: 2em 3em;
  padding: 3em 60px;
  border-radius: 20px;
  background-color: #effef2;
}
.usecase_head h3 {
  font-size: 2.3em;
  margin: 1em 0 1.3em;
}
.usecase_head img {
  width: 40%;
}
.usecase_detail {
  text-align: left;
}
.usecase_detail img {
  width: 30%;
}
.usecase_detail h4 {
  border-bottom: 1px #666 dotted;
  font-size: 1.5em;
  padding: 0 0 20px;
}
.usecase_detail p {
  margin-top: 20px;
  line-height: 2;
  font-size: 1.2em;
}
.usecase_close {
  font-size: 1.5em;
  line-height: 2;
  margin-bottom: 100px;
}
.usecase_close img {
  width: 80%;
  margin: 60px 0;
}
@media screen and (min-width: 769px){
}
@media screen and (max-width: 768px){
  .usecase {
    margin: 2em 0;
    padding: 3em 20px;
  }
  .usecase_head h3 {
    font-size: 1.8em;
    margin: 1em 0 1.3em;
  }
  .usecase_head img {
    width: 100%;
  }
  .usecase_detail {
    text-align: center;
  }
  .usecase_detail img {
    width: 80%;
  }
  .usecase_detail p {
    text-align: left;
    line-height: 1.8;
  }
  .usecase_close {
    font-size: 1.3em;
    line-height: 2;
    margin-bottom: 100px;
    letter-spacing: -1px;
    text-align: left;
  }

  .usecase_close img {
    width: 100%;
    margin: 30px 0;
  }
}
/* ----------Reasons--------- */
#Reasons h2 {
  background-image: url(images/title_b03.png);
  font-size: 2.5em;
}
.reason_detail .contents {
  padding: 5em 3em;
}
.reason_detail img {
  width: 80%;
  margin: 60px 0;
}
.reason_detail p {
  font-size: 1.3em;
  text-align: left;
  line-height: 2;
  margin: 1em 0;
}
.reason_detail_head {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.reason_detail_head h3 {
  text-align: left;
  display: inline-block;
  font-weight: bold;
  font-size: 1.7em;
}
.reason_detail_head img {
  width: 130px;
  margin: 0 15px 0 0;
}
.reason_detail ul {
  margin-top: 20px;
  padding: 0 20px;
}
.reason_detail  ul li {
  text-align: left;
  font-size: 1.2em;
  margin-bottom: 10px;
  list-style: circle;
}
.reason_detail_graph {
  margin: 0 auto;
  margin-top: 2em;
  margin-bottom: 2em;
  text-align: center;
  max-width: 980px;
}
.reason_detail_graph img {
  width: 49%;
  margin: 0;
}
.reason_detail_graph img:last-child {
  width: 98%;
}
.reason_ex {
  border: #3ab34e solid 1px;
  background-color: #fff;
  margin: 40px 0;
  padding: 2em 3em 1.5em;
}
.reason_ex h4 {
  color: #3ab34e;
  font-size: 2em;
}
.reason_ex p {
  border: #3ab34e solid 1px;
  background-color: #effef2;
  padding: 10px 20px;
  border-radius: 10px;
}
.reason_ex img {
  margin: 30px 0;
}
.reason_close  {
  padding: 2em 0 5em;
}
.reason_close img {
  width: 60%;
  margin-bottom: 2em;
}
.reason_close p {
  font-size: 1.5em;
  line-height: 2;
  text-align: left;
}
@media screen and (min-width: 769px){

}
@media screen and (max-width: 768px){
  #Reasons h2 {
    font-size: 1.6em;
  }
  .reason_detail .contents {
    padding: 3em 1em;
  }
  .reason_detail img {
    width: 100%;
    margin: 10px 0;
  }
  .reason_detail_head {
    margin-bottom: 30px;
    flex-direction: column;
  }
  .reason_detail_head h3 {
    text-align: center;

  }
  .reason_detail_head {
    margin-bottom: 30px;
    flex-direction: column;
  }
  .reason_detail_head img {
    width: 100px;
    margin: 0px 15px 10px 0px;
  }
  .reason_detail_graph {
  margin: 0em 0;
}
  .reason_detail_graph img {
    width: 100%;
    margin: 0;
  }
  .reason_ex {
    margin: 40px 0;
    padding: 2em 1em 1.5em;
  }
  .reason_ex h4 {
    font-size: 1.7em;
  }
  .reason_detail p {
    font-size: 1.2em;
    line-height: 1.5;
    margin: 0.5em 0;
  }
  .reason_close img {
    width: 90%;
    margin-bottom: 2em;
  }
  .reason_close p {
    font-size: 1.3em;
    line-height: 1.8;
  }
}


/* ----------Case--------- */
#Case h2 {
  background-image: url(images/title_b04.png);
  font-size: 2.5em;
}
.case_detail {
  margin: 4em 2.5em;
  padding: 30px 60px;
  border-radius: 20px;
  background-color: #effef2;
  position: relative;
}
.case_detail_title {
  width: 20%;
  position: absolute;
  top: -20px;
  left: 40%;
}
.case_detail_head {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  margin-top: 3em;
}
.case_detail_head p {
  display: inline-block;
  color: #fff100;
  background-color: #3ab34e;
  border-radius: 10px;
  padding: 5px 15px;
}
.case_detail_head_l {
  width: 30%;
  margin-right: 20px;
}
.case_detail_head_r {
  text-align: left;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.case_detail_head_r h3 {
  color: #e5004f;
  font-size: 1.5em;
  text-align: left;
  margin-bottom: 20px;
}
.case_detail_text {
  margin:  0 auto;
  text-align: left;
  margin: 2em 0;
  font-size: 1.1em;
  line-height: 2;
}
@media screen and (min-width: 769px){

}
@media screen and (max-width: 768px){
  #Case h2 {
    font-size: 1.6em;
  }
  .case_detail {
    margin: 4em 0em;
    padding: 30px 20px;
    border-radius: 10px;
  }
  .case_detail_title {
    width: 40%;
    position: absolute;
    top: -20px;
    left: 30%;
  }
  .case_detail_head {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    margin-top: 1em;
    flex-direction: column;
    align-items: center;
  }
  .case_detail_head p {
    display: inline-block;
    color: #fff100;
    background-color: #3ab34e;
    border-radius: 10px;
    padding: 5px 15px;
  }
  .case_detail_head_l {
    width: 50%;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .case_detail_head_r {
    text-align: left;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .case_detail_head_r h3 {
    font-size: 1.4em;
    text-align: center;
  }
  .case_detail_text {
    line-height: 1.8;
    letter-spacing: -1px;
  }
}


/* ----------Points--------- */
#Points h2 {
  background-image: url(images/title_b05.png);
  font-size: 2.5em;
}
.points_detail .contents {
  padding: 5em 5em;
}
.points_detail img {
  width: 80%;
  margin: 60px 0;
}
.points_detail p {
  font-size: 1.3em;
  text-align: left;
  line-height: 2;
}
.points_detail_head {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.points_detail_head h3 {
  text-align: left;
  display: inline-block;
  font-weight: bold;
  font-size: 1.9em;
}
.points_detail_head img {
  width: 130px;
  margin: 0 15px 0 0;
}
.points_close {
  font-size: 1.9em;
  font-weight: bold;
  color: #3ab34e;
  line-height: 2;
  margin-bottom: 2em;
}

@media screen and (min-width: 769px){
}
@media screen and (max-width: 768px){
  #Points h2 {
    font-size: 1.6em;
  }
  .points_detail .contents {
    padding: 5em 2em 1em;
  }
  .points_detail img {
    width: 100%;
    margin: 20px 0;
  }
  .points_detail p {
    font-size: 1.3em;
    text-align: left;
    line-height: 1.5;
  }
  .points_detail_head {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
  }
  .points_detail_head h3 {
    text-align: center;
    font-size: 1.6em;
  }
  .points_detail_head img {
    width: 130px;
    margin: 0 15px 10px 0;
  }
  .points_close {
    font-size: 1.7em;
    line-height: 1.8;
  }
  .points_close .contents {
    padding: 2em 1em;
  }
}



/* ----------Business--------- */
#Business h2 {
  background-image: url(images/title_b06.png);
  font-size: 2.5em;
}
#Business img {
  width: 80%;
}
#Business p {
  font-size: 1.4em;
  margin: 2em 0 3em;
}
@media screen and (min-width: 769px){

}
@media screen and (max-width: 768px){
  #Business h2 {
    font-size: 1.6em;
  }
  #Business img {
    width: 100%;
  }
  #Business p {
    font-size: 1.4em;
    margin: 2em 0 3em;
  }
}


/* ----------Skill--------- */
#Skill h2 {
  background-image: url(images/title_b07.png);
  font-size: 2.5em;
}
.skill_detail_head {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px dotted #666;
  text-align: left;
  padding-bottom: 2em;
}
.skill_detail_head h3 {
  text-align: left;
  display: inline-block;
  font-weight: bold;
  font-size: 1.9em;
}
.skill_detail_head img {
  width: 80px;
  margin: 0 15px 0 0;
}
.skill_detail_text p {
  text-align: left;
  font-size: 1.3em;
  padding-bottom: 1em;
}
@media screen and (min-width: 769px){

}
@media screen and (max-width: 768px){
  #Skill h2 {
    font-size: 1.6em;
  }
  .skill_detail_head {
    margin-bottom: 20px;
    padding-bottom: 1em;
  }
  .skill_detail_head h3 {
    font-size: 1.5em;
  }
  .skill_detail_head img {
    width: 50px;
    margin: 0 15px 0 0;
  }
  .skill_detail_text p {
    text-align: left;
    font-size: 1.3em;
    padding-bottom: 1em;
  }
}


/* ----------Course--------- */
#Course h2 {
  background-image: url(images/title_b08.png);
  font-size: 2.5em;
  padding: 60px 0;
}
#Course .contents {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 4em;
}
.course_detail {
  width: 33%;
  padding: 20px 15px; 
  margin: 0 10px;
  border: 1px solid #666;
  border-radius: 10px;
  align-self: stretch;
}
.course_detail img {
  margin-bottom: 20px;
} 
.course_detail p {
  font-size: 1.2em;
}
@media screen and (min-width: 769px){

}
@media screen and (max-width: 768px){
  #Course h2 {
    font-size: 1.6em;
    padding: 60px 0;
  }
  #Course .contents {
    display: flex;
    justify-content: space-around;
    margin-top: 2em;
    margin-bottom: 4em;
    align-content: center;
    align-items: center;
    flex-direction: column;
  }
  .course_detail {
    width: 100%;
    padding: 20px 30px; 
    margin: 0;
    margin-bottom: 20px;
  }
  .course_detail img {
    margin-bottom: 20px;
    width: 80%;
  } 
  .course_detail p {
    font-size: 1.2em;
    text-align: left;
  }
}


/* ----------Benefits--------- */
#Benefits h2 {
  background-image: url(images/title_b09.png);
  font-size: 2.5em;
}
#Benefits img {
  width: 80%;
  margin: 2em 0 3em;
}
#Benefits p {
  font-size: 1.5em;
  padding: 0 0 3em;
}
@media screen and (min-width: 769px){

}
@media screen and (max-width: 768px){

  #Benefits h2 {
    font-size: 1.6em;
  }
  #Benefits img {
    width: 100%;
    margin: 2em 0 3em;
  }
  #Benefits p {
    font-size: 1.5em;
    padding: 0 0 3em;
    }}

    /* ----------Price--------- */

    #Price .contents {
      padding: 3em 5em;
    }
    #Price h2 {
      background-image: url(images/title_b10.png);
      font-size: 2.5em;
      padding: 60px 0;
    }
    #Price img {
      width: 60%;
      margin-bottom: 3em;
    }
    #Price p {
      font-size: 1.4em;
      text-align: left;
      line-height: 2;
      margin-bottom: 2em;
    }
    @media screen and (min-width: 769px){

    }
    @media screen and (max-width: 768px){
      #Price .contents {
        padding: 3em 2em;
      }
      #Price img {
        width: 100%;
        margin-bottom: 3em;
      }
      #Price p {
        font-size: 1.2em;
        text-align: left;
        line-height: 1.8;
        margin-bottom: 2em;
      }
    }


    /* ----------Satisfaction-guarantee-------- */
    #Satisfaction-guarantee h2 {
      background-image: url(images/title_b11.png);
      font-size: 2.5em;
      padding: 60px 0;
    }
    .satisfaction-guarantee_detail .contents {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row-reverse;
      padding: 4em 2em;
    }
    .satisfaction-guarantee_detail h3 {
      margin-bottom: 1em;
      font-size: 1.5em;
      color: #3ab34e;
    }
    .satisfaction-guarantee_detail p {
      font-size: 1.3em;
      line-height: 2;
    }
    .satisfaction-guarantee_detail_l {
      text-align: left;
    }
    .satisfaction-guarantee_detail_r {
      width: 35%;
    }
    @media screen and (min-width: 769px){

    }
    @media screen and (max-width: 768px){
      .satisfaction-guarantee_detail .contents {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 4em 2em;
      }
      .satisfaction-guarantee_detail h3 {
        margin-bottom: 1em;
        font-size: 1.8em;
        color: #3ab34e;
      }
      .satisfaction-guarantee_detail p {
        font-size: 1.2em;
        line-height: 1.8;
      }
      .satisfaction-guarantee_detail_l {
        text-align: left;
      }
      .satisfaction-guarantee_detail_r {
        width: 65%;
        margin-bottom: 20px;
      }
    }

    /* ----------Sale--------- */
    #Sale h2 {
      background-image: url(images/title_b12.png);
      font-size: 2.5em;
    }
    #Sale div.red {
      text-align: right;
      margin-bottom: 2em;
    }
    #Sale div.red p {
      text-align: center;
      display: inline-block;
      margin-right: 20px;
      font-weight: bold;
    }
    @media screen and (min-width: 769px){

    }
    @media screen and (max-width: 768px){
      /* ----------Sale--------- */
      #Sale h2 {
        font-size: 1.6em;
      }
    }


    /* ----------Faq--------- */
    #Faq h2 {
      background-image: url(images/title_b12.png);
    }
    .faq_detail {
      text-align: left;
    }
    .faq_detail dt {
      color: #e5004f;
      font-weight: bold;
      border-bottom: #e5004f solid 1px;
      border-top: #e5004f solid 1px;
      padding: .8em;
      font-size: 1.3em;
      display: flex;
    }
    .faq_detail dt:before {
      content: "Q.";
      margin-right: 10px;
      font-size: 1.5em;
    }
    .faq_detail dd {
      padding: 2em .8em;
      line-height: 2;
      font-size: 1.3em;
      display: flex;
    }
    .faq_detail dd:before {
      content: "A.";
      margin-right: 10px;
      font-size: 1.5em;
    }
    @media screen and (min-width: 769px){

    }
    @media screen and (max-width: 768px){
      .faq_detail dt {
        padding: .8em;
        font-size: 1.3em;
      }
      .faq_detail dt:before {
        content: "Q.";
        margin-right: 10px;
        font-size: 1.3em;
      }
      .faq_detail dd {
        padding: 2em .8em;
        line-height: 1.5;
        font-size: 1.3em;
        display: flex;
      }
      .faq_detail dd:before {
        content: "A.";
        margin-right: 10px;
        font-size: 1.3em;
      }
    }

    /* ----------Closing--------- */

    #Closing {
      padding: 5em;
    }
    #Closing p {
      font-size: 2em;
      color: #3ab34e;
      line-height: 1.5;
      text-align: center;
      font-weight: bold;
    }
    #Closing p:last-child {
      font-size: 1.5em;
      color: #000;
      line-height: 2;
      text-align: center;
      font-weight: bold;
    }
    #Closing img {
      width: 60%;
    }
    @media screen and (min-width: 769px){

    }
    @media screen and (max-width: 768px){
      #Closing {
        padding: 2em;
      }
      #Closing p {
        font-size: 1.8em;
      }
      #Closing p:last-child {
        font-size: 1.2em;
      }
      #Closing img {
        width: 100%;
        margin: 1em 0;
      }
    }

    /* ----------Footer--------- */

    footer {
      text-align: center;
      background-color: #3ab34e;
      padding: 3em 0;
    }
    footer p,footer a {
      color: #fff;
      line-height: 2;
    }
    @media screen and (min-width: 769px){

    }
    @media screen and (max-width: 768px){
      footer {
        padding: 3em 0 8em;
      }
    }