@charset "UTF-8";
body{
  counter-reset: featureNum;
}
/* ----------------
layout
---------------- */
/* ラッパー */
.l_wrapper{
  width: 980px;
}
@media screen and (max-width: 768px){
  .l_wrapper{
    width: 100%;
  }
}

/* メイン */
.l_main{
  margin: 40px 0 80px;
}


/* 節 */
.l_section--primary{}
.l_section--primary > .l_section__item + .l_section__item{
  margin-top: 80px;
}

/* グリッド */
.l_grid--feature{
  margin: -16px;
}
.l_grid--feature > .l_grid__item{
  padding: 16px;
}
.l_grid--btn{
  margin: -16px;
}
.l_grid--btn > .l_grid__item{
  padding: 16px;
}
@media screen and (max-width: 768px){
  .l_grid--btn{
    margin: -8px;
  }
  .l_grid--btn > .l_grid__item{
    padding: 8px;
  }
}
/* ナビ */
.l_nav--page{
  margin: -12px;
  flex-wrap: wrap;
}
.l_nav--page > .l_nav__item{
  width: 25%;
  padding: 12px;
}
@media screen and (max-width: 768px){
  .l_nav--page > .l_nav__item{
    width: 50%;
  }
}
@media screen and (max-width: 599px){
  .l_nav--page > .l_nav__item{
    width: 100%;
  }
}
/* ----------------
module
---------------- */
/* ボタン */
.m_btn--cta{
  font-size: 20px; 
}
.m_btn--cta::before{
  content: "";
  display: block;
  height: 3em;
  width: 0;
}
.m_btn--cta .m_btn__target{
  border: 2px solid #ccc;
  border-radius: 100px;
  color: #fff;
  background: #ccc;
  transition: .3s background, .3s color;
}
.m_btn--cta .m_btn__inner{
  position: relative;
  display: block;
  padding-left: 30px;
}
.m_btn--cta .m_btn__inner::before{
  content: "\f061";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  height: 1em;
  margin: auto 0;
  line-height: 1;
  font-size: 18px;
  font-family: "FontAwesome";
}
.m_btn--leaf .m_btn__target{
  border-color: #1FC5AE;
  background: #1FC5AE;
}
.m_btn--leaf .m_btn__target:hover{
  background: #fff;
  color: #1FC5AE;
}
.m_btn--lightning .m_btn__target{
  border-color: #DFA300;
  background: #DFA300;
}
.m_btn--lightning .m_btn__target:hover{
  background: #fff;
  color: #DFA300;
}
.m_btn--inorder .m_btn__target{
  border-color: #E6012E;
  background: #E6012E;
}
.m_btn--inorder .m_btn__target:hover{
  background: #fff;
  color: #E6012E;
}
.m_btn--eva .m_btn__target{
  border-color: #02BBD4;
  background: #02BBD4;
}
.m_btn--eva .m_btn__target:hover{
  background: #fff;
  color: #02BBD4;
}
.m_btn--eval .m_btn__target{
  border-color: #4260AD;
  background: #4260AD;
}
.m_btn--eval .m_btn__target:hover{
  background: #fff;
  color: #4260AD;
}
.m_btn--stress .m_btn__target{
  border-color: #E6387B;
  background: #E6387B;
}
.m_btn--stress .m_btn__target:hover{
  background: #fff;
  color: #E6387B;
}
.m_btn--studio .m_btn__target{
  border-color: #E65D01;
  background: #E65D01;
}
.m_btn--studio .m_btn__target:hover{
  background: #fff;
  color: #E65D01;
}
.m_btn--wellness .m_btn__target{
  border-color: #FF7373;
  background: #FF7373;
}
.m_btn--wellness .m_btn__target:hover{
  background: #fff;
  color: #FF7373;
}
@media screen and (max-width: 768px){
  .m_btn--cta{
    font-size: 18px; 
  }
  .m_btn--cta::before{
    height: 2.4em;
  }
}

/* キービジュアル */
.m_keyvisual{
  margin: 0 auto 40px;
}
.m_keyvisual__img{
  line-height: 0;
  box-shadow: 4px 4px 4px #aaa;
}
.m_keyvisual__img img{
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 768px){
  .m_keyvisual{
    width: 95%;
  }
}
/* 見出し */
.m_heading--primary{
  margin-bottom: 40px;
  padding: 12px 0 12px 12px;
  border-left: 6px solid #79D5B2;
}
.m_heading--primary .m_heading__ttl{
  text-align: left;
  font-size: 24px;
}
.m_heading--primary .m_heading__subTtl{
  font-size: 18px;
}
/* コンテンツ */
.m_content{
  text-align: left;
}
.m_content__inner{
  width: 980px;
  margin: auto;
}
@media screen and (max-width: 768px){
  .m_content__inner{
    width: 100%;
  }
}
/* ページヘッダー */
.m_pageHeader{
  width: 980px;
  margin: 0 auto 64px;
}
@media screen and (max-width: 768px){
  .m_pageHeader{
    width: 95%;
  }
}
/* ページナビ */
.m_pageNav{
  position: relative;
  display: block;
  color: inherit;
  padding: 8px;
}
.m_pageNav:hover{
  opacity: 1;
}
.m_pageNav::before,
.m_pageNav::after{
  content: "";
  position: absolute;
  display: block;
  width: 0%;
  height: 0%;
  transition: .3s width, .3s height;
}
.m_pageNav::before{
  top: 0;
  left: 0;
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
}
.m_pageNav::after{
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
}
.m_pageNav:hover::before,
.m_pageNav:hover::after{
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.m_pageNav__msg{
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
}
.m_pageNav__msg + .m_pageNav__img{
  margin-top: 16px;
}
.m_pageNav__img{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 104px;
  line-height: 0;
  text-align: center;
}
.m_pageNav__img img{
  max-width: 100%;
  height: auto;
}
.m_pageNav__img + .m_pageNav__ttl{
  margin-top: 16px;
}
.m_pageNav__ttl{
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(2em * 1.6);
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.m_pageNav__ttl + .m_pageNav__btn{
  margin-top: 16px;
}
.m_pageNav__btn{
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
  font-size: 18px;
}
.m_pageNav__btn::before{
  content: "";
  display: block;
  height: 2em;
  width: 0;
}
.m_pageNav__btnTarget{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 100px;
  color: #fff;
  background: #ccc;
  transition: .3s background, .3s color;
}
.m_pageNav:hover .m_pageNav__btnTarget{
  background: #fff;
  color: #ccc;
}
.m_pageNav__btnInner{
  position: relative;
  display: block;
  padding-left: 30px;
}
.m_pageNav__btnInner::before{
  content: "\f063";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  height: 1em;
  margin: auto 0;
  line-height: 1;
  font-size: 18px;
  font-family: "FontAwesome";
}
.m_pageNav--leaf::before,
.m_pageNav--leaf::after{
  border-color: #1FC5AE;
}
.m_pageNav--leaf .m_pageNav__btnTarget{
  background: #1FC5AE;
  border-color: #1FC5AE;
}
.m_pageNav--leaf:hover .m_pageNav__btnTarget{
  color: #1FC5AE;
}
.m_pageNav--lightning::before,
.m_pageNav--lightning::after{
  border-color: #DFA300;
}
.m_pageNav--lightning .m_pageNav__btnTarget{
  background: #DFA300;
  border-color: #DFA300;
}
.m_pageNav--lightning:hover .m_pageNav__btnTarget{
  color: #DFA300;
}
.m_pageNav--studio::before,
.m_pageNav--studio::after{
  border-color: #E65D01;
}
.m_pageNav--studio .m_pageNav__btnTarget{
  background: #E65D01;
  border-color: #E65D01;
}
.m_pageNav--studio:hover .m_pageNav__btnTarget{
  color: #E65D01;
}
.m_pageNav--inorder::before,
.m_pageNav--inorder::after{
  border-color: #E6012E;
}
.m_pageNav--inorder .m_pageNav__btnTarget{
  background: #E6012E;
  border-color: #E6012E;
}
.m_pageNav--inorder:hover .m_pageNav__btnTarget{
  color: #E6012E;
}
.m_pageNav--eva::before,
.m_pageNav--eva::after{
  border-color: #02BBD4;
}
.m_pageNav--eva .m_pageNav__btnTarget{
  background: #02BBD4;
  border-color: #02BBD4;
}
.m_pageNav--eva:hover .m_pageNav__btnTarget{
  color: #02BBD4;
}
.m_pageNav--eval::before,
.m_pageNav--eval::after{
  border-color: #4260AD;
}
.m_pageNav--eval .m_pageNav__btnTarget{
  background: #4260AD;
  border-color: #4260AD;
}
.m_pageNav--eval:hover .m_pageNav__btnTarget{
  color: #4260AD;
}
.m_pageNav--stress::before,
.m_pageNav--stress::after{
  border-color: #E6387B;
}
.m_pageNav--stress .m_pageNav__btnTarget{
  background: #E6387B;
  border-color: #E6387B;
}
.m_pageNav--stress:hover .m_pageNav__btnTarget{
  color: #E6387B;
}
.m_pageNav--wellness::before,
.m_pageNav--wellness::after{
  border-color: #FF7373;
}
.m_pageNav--wellness .m_pageNav__btnTarget{
  background: #FF7373;
  border-color: #FF7373;
}
.m_pageNav--wellness:hover .m_pageNav__btnTarget{
  color: #FF7373;
}

@media screen and (max-width: 599px){
  .m_pageNav__ttl{
    font-weight: bold;
    font-size: 14px;
  }
}
/* 特徴ラッパー */
.m_featuresWrap{
  counter-reset: featureNum;
}
.m_featuresWrap__inner{
  padding: 32px;
}
.m_featuresWrap__ttl{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.m_featuresWrap__ttlBody{
  line-height: 1;
  font-weight: bold;
  font-size: 20px;
} 
.m_featuresWrap__ttlBody + .m_featuresWrap__ttlImg{
  padding-left: 20px;
}
.m_featuresWrap__ttlImg{
  line-height: 0;
}
.m_featuresWrap__ttlImg img{
  max-width: 100%;
  height: auto;
}
.m_featuresWrap__lead{
  text-align: center;
  font-size: 16px;
}
.m_featuresWrap__lead + .m_featuresWrap__reason{
  margin-top: 32px;
}
.m_featuresWrap__inner + .m_featuresWrap__footer{
  margin-top: 40px;
}
.m_featuresWrap__footer{
  width: 840px;
  margin: 0 auto;
}
.m_featuresWrap--leaf .m_featuresWrap__inner{
  background: #F3FFFB;
}
.m_featuresWrap--lightning .m_featuresWrap__inner{
  background: #FFFCF2;
}
.m_featuresWrap--inorder .m_featuresWrap__inner{
  background: #FFF3F3;
}
.m_featuresWrap--eva .m_featuresWrap__inner{
  background: #F3FEFF;
}
.m_featuresWrap--eval .m_featuresWrap__inner{
  background: #F1F5FF;
}
.m_featuresWrap--stress .m_featuresWrap__inner{
  background: #FFF8FA;
}
.m_featuresWrap--studio .m_featuresWrap__inner{
  background: #FFF5EF;
}
.m_featuresWrap--wellness .m_featuresWrap__inner{
  background: #FFF6F6;
}
@media screen and (max-width: 768px){
  .m_featuresWrap__inner{
    padding: 24px 16px;
  }
  .m_featuresWrap__footer{
    width: 95%;
  }
}
@media screen and (max-width: 599px){
  .m_featuresWrap__lead{
    text-align: left;
  }
  .m_featuresWrap__ttl{
    flex-direction: column;
  }
  .m_featuresWrap__ttlBody{
    order: 2;
    line-height: 1.4;
    font-size: 18px;
  }
  .m_featuresWrap__ttlImg{
    order: 1;
  }
  .m_featuresWrap__ttlBody + .m_featuresWrap__ttlImg{
    padding: 0 0 16px;
  }
}
/* 特徴リスト */
.m_features{
  padding: 32px;
  background: #fff;
}
.m_features__ttl{
  margin-bottom: 40px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 768px){
  .m_features{
    padding: 16px;
  }
}
@media screen and (max-width: 599px){
  .m_features{
    padding: 16px 8px;
  }
}
/* 特徴 */
.m_feature{
  position: relative;
  border: 16px solid #ccc;
  padding: 32px 24px;
  counter-increment: featureNum;
}
.m_feature__ttl{
  position: absolute;
  top: -8px;
  left: -16px;
  width: calc(100% + 32px);
  padding-left: 32px;
  line-height: 1;
  letter-spacing: 0;
  font-size: 18px;
  transform: translateY(-100%);
}
.m_feature__ttl::before{
  content: counter(featureNum);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  font-size: 40px;
  height: 1em;
  margin: auto 0;
}
.m_feature--leaf{
  border-color: #E8FFFB;
}
.m_feature--leaf .m_feature__ttl{
  color: #1A8192;
}
.m_feature--lightning{
  border-color: #FFF6DC;
}
.m_feature--lightning .m_feature__ttl{
  color: #DFA300;
}
.m_feature--inorder{
  border-color: #FFD8DF;
}
.m_feature--inorder .m_feature__ttl{
  color: #A1001F;
}
.m_feature--eva{
  border-color: #EAF6F8;
}
.m_feature--eva .m_feature__ttl{
  color: #02BBD4;
}
.m_feature--eval{
  border-color: #DBE5FF;
}
.m_feature--eval .m_feature__ttl{
  color: #4260AD;
}
.m_feature--stress{
  border-color: #FFE4EA;
}
.m_feature--stress .m_feature__ttl{
  color: #B52D61;
}
.m_feature--studio{
  border-color: #FFE4D5;
}
.m_feature--studio .m_feature__ttl{
  color: #C14809;
}
.m_feature--wellness{
  border-color: #FFE9E9;
}
.m_feature--wellness .m_feature__ttl{
  color: #C84545;
}
@media screen and (max-width: 768px){
  .m_feature{
    padding: 24px 16px;
  }
}
@media screen and (max-width: 599px){
  .m_feature{
    padding: 16px;
  }
}