@charset "UTF-8";


/*
// common
//
///////////////////////////////////////////////////////////*/
#manabiabout{
  --px10 : 10px;
  --px12 : 12px;
  --px15 : 15px;
  --px16 : 16px;
  --px18 : 18px;
  --px20 : 20px;
  --px24 : 24px;
  --px28 : 28px;
  --px30 : 30px;
  --px35 : 35px;
  --px40 : 40px;
  --px50 : 50px;
  --px60 : 60px;
  --px70 : 70px;
  --px75 : 75px;
  --px80 : 80px;
}
@media only screen and (max-width: 705px){
  #manabiabout{
    --px10 : 10px;
    --px12 : 10px;
    --px15 : 13px;
    --px16 : 14px;
    --px18 : 16px;
    --px20 : 16px;
    --px24 : 18px;
    --px28 : 18px;
    --px30 : 20px;
    --px32 : 25px;
    --px35 : 30px;
    --px40 : 30px;
    --px50 : 40px;
    --px60 : 45px;
    --px70 : 60px;
    --px80 : 60px;
  }
}
#manabiabout .forPC{
  display: inherit;
}
#manabiabout .forSP{
  display: none;
}
@media only screen and (max-width: 705px){
  #manabiabout .forPC{
    display: none;
  }
  #manabiabout .forSP{
    display: inherit;
  }
}
#contents{
  width: auto;
  padding: 0;
}
#contents p{
  padding-bottom: 0;
  line-height: 1.5;
}


/*
// .manabiInner
//
///////////////////////////////////////////////////////////*/

.manabiInner{
  width: 1030px;
  margin: 0 auto;
  font-size: var(--px16);
  font-weight: 400;
  box-sizing: border-box;
}
.manabiInner * {
  box-sizing: border-box;
}
.manabiInner a{
  color: #009DFF;
  text-decoration: underline;
}
.manabiInner__footer{
  margin-top:  var(--px60);
  font-weight: 600;
  text-align: center;
}
@media only screen and (max-width: 705px){
  .manabiInner{
    width: 100%;
    padding: 0 var(--px20);
  }
  .manabiInner * {
    box-sizing: border-box;
  }
}


/*
// .manabiButton
//
///////////////////////////////////////////////////////////*/
.manabiButton a{
  position: relative;
  top: 0;
  box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
.manabiButton a:hover{
  top: 3px;
  box-shadow: none;
}
.manabiButton-01 a{
  display: block;
  margin: 0 auto;
  font-size: var(--px24);
  width: 500px;
  padding: var(--px20) 0;
  line-height: 1;
  margin-top: var(--px15);
  background-color: #FF971D;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  position: relative;
}
.manabiButton-01 a::after{
  content:'';
  background-image: url('../img/icon_arrow03.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: var(--px15);
  width: var(--px18);
  height: 100%;
}
@media only screen and (max-width: 705px){
  .manabiButton-01 a{
    width: 100%;
  }
}


/*
// .manabiArrow
//
///////////////////////////////////////////////////////////*/
.manabiArrow a{
  display: flex;
  font-weight: 600;
  align-items: center;
  width: fit-content;
}
.manabiArrow a::after{
  content: '';
  background-image: url(../img/icon_arrow01.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  margin-left: 5px;
  transition: 0.3s;
  width: var(--px15);
  height: var(--px15);
}
.manabiArrow a:hover{
  text-decoration: none;
  opacity: 0.7;
}
.manabiArrow a:hover::after{
  opacity: 0.7;
}
h3.manabiArrow.blTxt {
    color: #009DFF;
}
h3.manabiArrow.blTxt img {
    margin-right: 15px;
}


/*
// .manabiHeading
//
///////////////////////////////////////////////////////////*/
.manabiHeading{
  text-align: center;
  position: relative;
}
.manabiHeading img{
  height: 57px;
  margin: 0 auto;
}
.manabiHeading.lg img{
  height: 114px;
}
.manabiHeading__num{
  width: var(--px70);
  height: var(--px70);
  border-radius: 50%;
  background-color: #009DFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: var(--px30);
  margin-bottom: var(--px10);
}
.manabiHeading__sub{
  font-size: var(--px12);
  font-weight: 400;
}
.manabiHeading__sub.lg{
  display: inline-block;
  position: absolute;
  right: var(--px75);
  top: calc( var(--px70) - var(--px30) );
  padding: 0.25em 2em;
  background-color: #009DFF;
  color: #fff;
  border-radius: 50px;
}
.manabiHeading__sub.md{
  margin-top: 1em;
}
@media only screen and (max-width: 705px){
  .manabiHeading img{
    height: 78px;
  }
  .manabiHeading.lg img{
    height: 100px;
  }
  .manabiHeading__sub.lg{
    position: relative;
    top: inherit;
    right: inherit;
    margin-top: 1.5em;
  }
  .manabiHeading__sub.md{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

}


/*
// .manabiIcon
//
///////////////////////////////////////////////////////////*/
.manabiIcon{
  width: var(--px40);
}
.manabiIcon2{
  width: 42px;
}

/*
// .manabiCol
//
///////////////////////////////////////////////////////////*/
.manabiCol{
  display: flex;
  flex-wrap: wrap;
}
.manabiCol{
  margin-top:  var(--px60);
}
.manabiCol + .manabiCol{
  margin-top: var(--px20);
}
.manabiCol__item.col-1{
  width: 100%;
}
.manabiCol__item.col-2{
  width: calc(50% - var(--px10));
}
.manabiCol__item.col-2:first-of-type{
  margin-right: var(--px20);
}
.manabiCol__item{
  border: 4px solid #A5E0FE;
  border-radius: var(--px10);
  background-color: #fff;
  padding: var(--px30);
}
@media only screen and (max-width: 705px){
  .manabiCol__item.col-2{
    width: 100%;
  }
  .manabiCol__item.col-2:first-of-type{
    margin-right: 0;
  }
  .manabiCol__item.col-2 + .col-2{
    margin-top: var(--px20);
  }
}



/*
// .manabiBlock
//
///////////////////////////////////////////////////////////*/
.manabiBlock{
  overflow: hidden;
  position: relative;
}
.manabiBlock.lg{
  font-weight: 600;
}
.manabiBlock.md{
  background-color: #F2FBFE;
  border-radius: var(--px10);
  margin: -10px;
}
.manabiBlock + .manabiBlock{
  margin-top: var(--px15);
}
.manabiBlock.lg + .manabiBlock.lg::before{
  display: block;
  position: absolute;
  content: '';
  background-color: transparent;
  background-image:
    radial-gradient(#D6DBE2 30%, transparent 30%);
  background-size: 8px 6px;
  background-position: 8px;
  height: 2px;
  width: 100%;
  top: 0;
  left: 0;
}
.manabiBlock.lg + .manabiBlock.lg{
  padding-top: var(--px35);
}
.manabiBlock__heading{
  font-weight: 600;
  background-color: #009DFF;
  color: #fff;
  padding: var(--px20) 0;
  text-align: center;
}
.manabiBlock__heading > *{
  font-size: var(--px24);
}


/*
// .manabiBox
//
///////////////////////////////////////////////////////////*/
.manabiBox{
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  align-items: center;
}
.manabiBox.sm{
  background-color: #fff;
  border-radius: var(--px10);
  padding: var(--px30);
}
.manabiBlock.md > .manabiBox.md{
  padding: var(--px30);
}
.manabiBox.sm + .manabiBox.sm{
  margin-top: var(--px20);
}
.manabiBox.md + .manabiBox.md::before{
  display: block;
  position: absolute;
  content: '';
  background-color: transparent;
  background-image:
    radial-gradient(#D6DBE2 30%, transparent 30%);
  background-size: 8px 6px;
  background-position: 8px;
  height: 2px;
  width: calc(100% -  var(--px60));
  top: 0;
  left: var(--px30);
}
.manabiBox .manabiBox__thumb{
  width: 450px;
  border: 1px solid #B7D9EB;
  flex-shrink: 0;
  margin-left: var(--px30);
}
.manabiBox .manabiBox__content{
  flex-grow: 1;
}
.manabiBox .manabiBox__heading{
  margin-bottom: var(--px30);
  line-height: 1.5;
}
.manabiBox .manabiBox__heading > *{
  font-size: var(--px30);
}
.manabiBox__heading a::after{
  width: var(--px18);
  height: var(--px18);
}
.manabiBox__heading a img{
  margin-right: var(--px15);
}
.manabiBox .manabiBox__desc{
  font-size: var(--px18);
}
.manabiBox .manabiBox__desc p + .manabiBox__desc_heading,
.manabiBox .manabiBox__desc p + p{
  margin-top: 1em;
}
.manabiBox .manabiBox__desc .manabiBox__desc_heading{
  font-weight: 600;
}

.manabiBox.md .manabiBox__thumb{
  width: 350px;
}
.manabiBox.md .manabiBox__heading > *{
  font-size: var(--px24);
}
.manabiBox.md .manabiBox__desc{
  font-size: var(--px16);
  font-weight: 400;
}
.Colttl{
  font-size: var(--px35);
  padding: 15px 0px 25px 0px;
}

@media only screen and (max-width: 705px){
  .manabiBox{
    flex-direction: column;
  }
  .manabiBox.md .manabiBox__thumb,
  .manabiBox .manabiBox__thumb{
    width: 100%;
    margin-left: 0;
    margin-bottom: var(--px30);
  }
  .manabiBox .manabiBox__desc{
    font-weight: 400;
  }
  .manabiBox .manabiBox__desc p.forPC{
    margin-top: 0px;
    display: block !important;
  }
  .manabiBox__heading a::after{
    margin-top: -1px;
  }
}


/*
// .manabiBox2
//
///////////////////////////////////////////////////////////*/
.manabiBox2{
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding: 25px 0px;
}
.manabiBox2 .manabiBox__content2{
  width: 50%;
  display: inline-block;
  vertical-align: top;
  margin: 0px 20px;
}
.manabiBox2 .manabiBox__heading2{
  margin-bottom: var(--px20);
  line-height: 1.5;
}
.manabiBox2 .manabiBox__heading2 > *{
  font-size: var(--px24);
}
.manabiBox__heading2 a::after{
  width: var(--px18);
  height: var(--px18);
}
.manabiBox__heading2 a img{
  margin-right: var(--px15);
}
.manabiBox2 .manabiBox__desc2{
  font-size: var(--px16);
  font-weight: 400;
}
.manabiBox2 .manabiBox__desc2 p + .manabiBox__desc_heading,
.manabiBox2 .manabiBox__desc2 p + p{
  margin-top: 1em;
}
.manabiBox2 .manabiBox__desc2 .manabiBox__desc_heading{
  font-weight: 600;
}
.manabiBox__thumb.forPC2 {
  width: 50%;
  margin: 0px 20px;
}
.komidashi_forSP2 {
  display:none;
 }

@media only screen and (max-width: 705px){
  .manabiBox2{
    flex-direction: column;
    padding: 0px 0px;
  }
  .manabiBox2 .manabiBox__content2{
   width: auto;
   display: inline-block;
   vertical-align: top;
   margin: 0px 0px 35px 0px;
}
  .manabiBox__heading2 a::after{
    margin-top: -1px;
  }
   .manabiBox2 .manabiBox__desc2{
    font-weight: 400;
  }
.manabiBox__thumb.forPC2 {
    display: none;
 }
.Colttl{
  font-size: var(--px32);
  padding: 15px 0px 25px 0px;
 }
.komidashi_forPC2 {
  display:none;
 }
.komidashi_forSP2 {
  display: inherit;
  margin: -20px 0px 25px 0px;
 }
}

/*
// .manabiBox3
//
///////////////////////////////////////////////////////////*/
.manabiBox3{
  /* display: flex; */
  flex-wrap: nowrap;
  position: relative;
  align-items: center;
}
.manabiBox3.sm{
  background-color: #fff;
  border-radius: var(--px10);
  padding: var(--px30);
}
.manabiBlock.md > .manabiBox3.md{
  padding: var(--px24);
}
.manabiBox3.sm + .manabiBox3.sm{
  margin-top: var(--px20);
}
/*
.manabiBox3.md + .manabiBox3.md::before{
  display: block;
  position: absolute;
  content: '';
  background-color: transparent;
  background-image:
    radial-gradient(#D6DBE2 30%, transparent 30%);
  background-size: 8px 6px;
  background-position: 8px;
  height: 2px;
  width: calc(100% -  var(--px60));
  top: 0;
  left: var(--px30);
}
*/
.manabiBox3 .manabiBox__thumb{
  width: 450px;
  border: 1px solid #B7D9EB;
  flex-shrink: 0;
  margin-left: var(--px30);
}
.manabiBox3 .manabiBox__content{
  margin: 5px 0 0 0;
  flex-grow: 1;
}
.manabiBox3 .manabiBox__heading{
  margin-bottom: var(--px30);
  line-height: 1.5;
}
.manabiBox3 .manabiBox__heading > *{
  font-size: var(--px30);
}
.manabiBox__heading a::after{
  width: var(--px18);
  height: var(--px18);
}
.manabiBox__heading a img{
  margin-right: var(--px15);
}
.manabiBox3 .manabiBox__desc{
  font-size: var(--px18);
}
.manabiBox3 .manabiBox__desc p + .manabiBox__desc_heading,
.manabiBox3 .manabiBox__desc p + p{
  margin-top: 1em;
}
.manabiBox3 .manabiBox__desc .manabiBox__desc_heading{
  font-weight: 600;
}

.manabiBox3.md .manabiBox__thumb{
  width: 350px;
}
.manabiBox3.md .manabiBox__heading > *{
  font-size: var(--px24);
}
.manabiBox3.md .manabiBox__desc{
  font-size: var(--px16);
  font-weight: 400;
}


@media only screen and (max-width: 705px){
  .manabiBox3{
    flex-direction: column;
  }
  .manabiBox3.md .manabiBox__thumb,
  .manabiBox3 .manabiBox__thumb{
    width: 100%;
    margin-left: 0;
    margin-bottom: var(--px30);
  }
  .manabiBox3 .manabiBox__desc{
    font-weight: 400;
  }
  .manabiBox3 .manabiBox__desc p.forPC{
    margin-top: 0px;
    display: block !important;
  }
  .manabiBox__heading a::after{
    margin-top: -1px;
  }
}


/*
// .manabiSec
//
///////////////////////////////////////////////////////////*/
.manabiSec{
  padding:  var(--px60) 0;
}


/*
// #manabiHero
//
///////////////////////////////////////////////////////////*/
#manabiHero{
  padding: 0 0  var(--px60) 0;
}

/* list */
.manabiHero__list{
  display: flex;
  margin: var(--px50) -25px 0 0;
}
.manabiHero__list li{
  margin-right: 25px;
  width: calc( (100% / 3) - 25px );
}
.manabiHero__list li a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  height: 100%;
  border: 3px solid #029DDD;
  border-radius: var(--px10);
}
.manabiHero__list_icon{
  position: absolute;
  width: 75px;
  height: 52px;
  top: -43px;
  left: var(--px5);
  z-index: 1;
}
.manabiHero__list_icon img{
  width: 100%;
}
a:hover .manabiHero__list_icon img{
  opacity: 1;
}
.manabiHero__list_label{
  padding: var(--px15) 0 var(--px15)  var(--px20);
  text-align: center;
  flex-grow: 1;
}
.manabiHero__list_arrow{
  display: block;
  flex-shrink: 0;
  width: 45px;
  height: 100%;
  background-color: #029DDD;
  background-image: url('../img/icon_arrow02.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--px20);
}

/* about */
.manabiHero__about{
  border: 1px solid #B7D9EB;
  border-radius: var(--px10);
  padding: var(--px30);
  margin-top:  var(--px60);
}
.manabiHero__about h2{
  font-size: var(--px24);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.manabiHero__about h2 img{
  height: var(--px40);
  margin-right: var(--px10);
  position: relative;
  top: 2px;
}
.manabiHero__about p{
  margin-top: var(--px30);
}

@media only screen and (max-width: 705px){
  .manabiHero__image_bg{
    margin: 0 calc( -1 * var(--px20) );
  }
  .manabiHero__image_sub{
    width: 50%;
    margin: -5vw auto 2.5vw;
  }
  .manabiHero__list{
    flex-direction: column;
    margin: var(--px50) 0 0 0 ;
  }
  .manabiHero__list li{
    width: 100%;
    margin-right: 0;
  }
  .manabiHero__list li + li{
    margin-top: var(--px16);
  }
  .manabiHero__list li a{
    border-color: #009dff;
    background-color: #009dff ;
  }
  .manabiHero__list_icon{
    position: relative;
    top: inherit;
    left: inherit;
    width: 52px;
    height: 100%;
  }
  .manabiHero__list_label{
    text-align: left;
    background-color: #fff;
  }
  .manabiHero__list_arrow{
    width: 45px;
    height: auto;
    background-color: #fff;
    border-radius: 0 10px 10px 0;
    align-self: stretch;
    background-image: url(../img/icon_arrow04.svg);
  }
  .manabiHero__about h2 img{
    top: -2px;
  }
}

/*
// #manabiSec01
//
///////////////////////////////////////////////////////////*/
#manabiSec01{
  background-color: #FDFEEA;
}

/*
// #manabiSec03
//
///////////////////////////////////////////////////////////*/
#manabiSec03{
  background-color: #FDFEEA;
}


/*
// #manabiFooter
//
///////////////////////////////////////////////////////////*/
#manabiFooter .manabiBlock.lg + .manabiBlock.lg::before{
  background-color: #D6DBE2;
  height: 1px;
}
#manabiFooter .manabiBox{
  align-items: flex-start;
}
#manabiFooter .manabiBox__heading {
  display: flex;
}
#manabiFooter .manabiBox__heading h2{
  font-size: var(--px28);
}
#manabiFooter .manabiBox__heading::before{
  content: '';
  background-color: #009DFF;
  width: 4px;
  border-radius: var(--px80);
  margin-right: var(--px15);
}
#manabiFooter .manabiBox__desc_link a{
  margin-top: var(--px30);
}
#manabiFooter .manabiBox__desc_link a::after {
  width: var(--px15);
  height: var(--px15);
}



/*
// manabiQA
//
///////////////////////////////////////////////////////////*/

.manabiQA > * + *{
  margin-top: var(--px20);
}
.manabiQA .manabiQA__A + .manabiQA__Q{
  margin-top: var(--px30);
}
.manabiQA__Q,
.manabiQA__A{
  display: flex;
  align-items: baseline;
}
.manabiQA__A.md{
  display: block;
  margin-left: var(--px50);
  margin-top: var(--px10);
}
.manabiQA__icon{
  flex-shrink: 0;
  width: var(--px40);
  height: var(--px40);
  border-radius: 50%;
  margin-right: var(--px10);
  color: #fff;
  font-size: var(--px20);
  display: flex;
  justify-content: center;
  align-items: center;
}
.manabiQA__Q .manabiQA__icon{
  background: linear-gradient(-70deg, #C4F0AB , #009DFF);
}
.manabiQA__A .manabiQA__icon{
  background-color: #656565;
}
.manabiQA__desc{
  font-size: var(--px20);
  font-weight: 600;
}
.manabiQA__desc p,
.manabiQA__desc .manabiArrow{
  font-size: var(--px16);
  font-weight: 400;
  margin-top: var(--px16);
}


/*
// manabiApp
//
///////////////////////////////////////////////////////////*/

#manabiApp .manabiBlock{
  background: linear-gradient(270deg, #C4F0AB , #89D7C4 50%, #009DFF 100%);
  padding: var(--px10);
  border-radius: var(--px10);
}
#manabiApp .manabiBox{
  background-color: #fff;
  border-radius: var(--px10);
  align-items: flex-end;
}
#manabiApp .manabiBox__content{
  padding: var(--px40);
}
#manabiApp .manabiBox__content .manabiBox__heading{
  font-size: var(--px28);
  display: flex;
  align-items: center;
}
#manabiApp .manabiBox__content .manabiBox__heading img{
  width: var(--px80);
  margin-left: var(--px20);
}
#manabiApp .manabiBox__content .manabiBox__desc{
  font-weight: 400;
  font-size: var(--px16);
}
#manabiApp .manabiBox__content .manabiBox__desc ul{
  display: flex;
  margin-top: var(--px30);
}
#manabiApp .manabiBox__content .manabiBox__desc ul li{
  height: var(--px50);
}
#manabiApp .manabiBox__content .manabiBox__desc ul li + li{
  margin-left: var(--px20);
}
#manabiApp .manabiBox__content .manabiBox__desc ul li a{
  display: block;
  height: 100%;
}
#manabiApp .manabiBox__content .manabiBox__desc ul li a img{
  width: auto;
  height: 100%;
}
#manabiApp .manabiBox__thumb{
  border: 0;
  margin: 0 var(--px20) 0 var(--px30);
  text-align: center;
}
#manabiApp .img_app{
   width: 60%;
}
@media only screen and (max-width: 705px){

  #manabiApp .manabiBox__thumb{
    margin: 0;
  }

}


/*
// .lineButton
//
///////////////////////////////////////////////////////////*/
.lineButton-01 a{
  margin: 0 auto;
  display: inline-block;
  border-radius: 6px;
  margin-top: var(--px15);
}