@charset 'UTF-8';
/* アイコン */
.pageIco{
  margin-bottom: 16px;
}
.pageIco_tag{
  display: inline-block;
  padding: 4px 24px;
  background: #DFA300;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
}

/* パネル */
.panel{
  margin-bottom: 64px;
}
#leaf_cont .panel h2{
  margin-bottom: 20px;
}
/* メリット */
.merit{
  display: flex;
  align-items: stretch;
}
.merit_body{
  flex: 1 1 auto;
}
.merit_img{
  flex: 0 0 225px;
  margin-left: 48px;
  text-align: center;
}
#article .panel .merit_ttl{
  position: relative;
  margin-bottom: 12px;
  padding-left: 32px;
  font-size: 16px;
  font-weight: bold;
}
.merit_ttl::before{
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #DFA300;
}
.merit_ttl::after{
  content: "";
  position: absolute;
  top: 9px;
  left: 5px;
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.merit_msg + .merit_ttl{
  margin-top: 24px;
}
.merit_msg + .merit_msg{
  margin-top: 16px;
}
.merit--lgImg{
  display: block;
}
.merit--lgImg .merit_img{
  margin: 32px 0 0;
}
.merit--lgImg .merit_img + .merit_txt{
  margin-top: 32px;
}
@media screen and (max-width:768px){
  .merit{
    display: block;
  }
  .merit_img{
    margin: 32px 0 0;
  }
}
/* 活用例 */
.service_case_title{
  margin-bottom: 20px;
}
.service_case_box + .service_case_box{
  margin-top: 20px;
}
#article .panel .service_case_kadai{
  display: inline-block;
  margin-bottom: 14px;
  padding: 0 16px;
  background: #707070;
  font-weight: bold;
  color: #fff;
}
#article .panel .service_case_kaiketsu{
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  border: 2px solid #DFA300;
  padding: 0 14px 0 30px;
  background: #fff;
  font-weight: bold;
  color: #DFA300;
}
.service_case_kaiketsu::before{
  content: "\f0eb";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  display: block;
  height: 1em;
  margin: auto 0;
  line-height: 1;
  font-size: 20px;
  font-family: FontAwesome;
}
/* Faq */
.faq{}
.faq_item + .faq_item{
  margin-top: 20px;
}
.a_box > p + p{
  margin-top: 16px;
}
#article .panel .q_box p{
  font-weight: bold;
}
/* 質問 */
.q_box{
  margin-bottom: 12px;
  color: #DFA300;
}

/* おすすめの機能 */
.funcs{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -10px -10px 54px;
}
.funcs_item{
  display: flex;
  width: 33.333%;
  padding: 10px;
  font-size: 16px;
}
.funcs_item::before{
  content: "";
  display: block;
  height: 4em;
  width: 0;
}
.funcs_target{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 16px;
  border: 2px solid #DFA300;
  background: #fff;
  transition: .3s opacity;
}
.funcs_target:hover{
  opacity: .7;
}
.funcs_inner{
  position: relative;
  padding-right: 40px;
}
.funcs_inner::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0px;
  display: block;
  width: 16px;
  height: 16px;
  margin: auto 0;
  border-radius: 50%;
  background: #DFA300;
}
.funcs_inner::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  display: block;
  width: 4px;
  height: 4px;
  margin: auto 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
@media screen and (max-width:1250px){
  .funcs_item{
    width: 50%;
  }
}
@media screen and (max-width:768px){
  .funcs_item{
    width: 100%;
  }
  .funcs_inner{
    padding-right: 24px;
    font-size: 14px;
  }
}
/* コラム */
.columns{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -10px -10px 54px;
}
.columns_item{
  display: flex;
  width: 33.333%;
  padding: 10px;
  font-size: 16px;
}
.columns_item::before{
  content: "";
  display: block;
  height: 8em;
  width: 0;
}
.columns_target{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 3em 16px 8px;
  border: 2px solid #DFA300;
  background: #fff;
  transition: .3s opacity;
}
.columns_target:hover{
  opacity: .7;
}
.columns_target::before{
  content: "\f02d";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: block;
  width: 1em;
  margin: 0 auto;
  color: #DFA300;
  font-size: 40px;
  line-height: 1;
  font-family: FontAwesome;
}
.columns_inner{
  position: relative;  
  padding-right: 40px;
}
.columns_inner::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: 16px;
  height: 16px;
  margin: auto 0;
  border-radius: 50%;
  background: #DFA300;
}
.columns_inner::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  display: block;
  width: 4px;
  height: 4px;
  margin: auto 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
@media screen and (max-width:1250px){
  .columns_item{
    width: 50%;
  }
  .columns_inner{
    padding-right: 24px;
    font-size: 14px;
  }
}
@media screen and (max-width:768px){
  .columns_item{
    width: 100%;
  }
}
/* ボタン */
.btns{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -10px -10px 54px;
}
.btns_item{
  display: flex;
  width: 50%;
  padding: 10px;
  font-size: 16px;
}
.btns_item::before{
  content: "";
  display: block;
  width: 0;
  height: 3em;
}
.btns_target{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 16px;
  border: 2px solid #DFA300;
  border-radius: 8px;
  color: #DFA300;
  background: #fff;
  transition: .3s opacity;
}
.btns_target:hover{
  opacity: .7;
}
.btns_inner{
  position: relative;
  padding-right: 40px;
  color: #DFA300;
}
.btns_inner::before{
  content: url("../img/leaf/lightning/ico_btn_off.svg");
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  margin: auto 0;
  width: 20px;
  height: 20px;
}
.btns_item.btns_target-main_wrap {
  width: 100%;
}
.btns_target-main{
  background: #DFA300;
  color: #fff;
  transition: .3s color, .3s background;
}
.btns_target-main:hover{
  opacity: 1;
  background: #fff;
}
.btns_target-main .btns_inner{
  color: #fff;
  transition: .3s color;
}
.btns_target-main:hover .btns_inner{
  color: #DFA300;
}
.btns_target-main .btns_inner::before{
  content: url("../img/leaf/lightning/ico_btn_on.svg");
}
.btns_target-main:hover .btns_inner::before{
  content: url("../img/leaf/lightning/ico_btn_off.svg");
}

@media screen and (max-width:1250px){
  .btns_item{
    width: 100%;
  }
}

/* --------- 
テーマ
--------- */
/* ライトニング */
/* 
.theme_lightning #leaf_bg{
    background: url("../img/leaf/lightning/bk1.png") no-repeat top 8% left 50%/2042px 792px,url("../img/leaf/lightning/bk2.png") no-repeat top 60% left calc(50% + 200px)/2704px 1739px, #fff;
}
*/
.theme_lightning .panel{
  box-shadow: 2px 2px 6px #aaa;
}
@media screen and (max-width: 768px){
  .theme_lightning #leaf_bg{
      background: none;
  }
}
/* インオーダー（機能ページの型をinorderと共有） */
.theme_inorder #leaf_bg{
    background: url("/resource/img/leaf/inorder/bk_ptn1.png") no-repeat top 2% left 50%/1955px 1045px ,url("/resource/img/leaf/inorder/bk_ptn3.png") no-repeat top 50% left 50% / 1661px 651px, #fff;
}
.theme_inorder .panel{
  box-shadow: 2px 2px 6px #aaa;
}
.theme_inorder .pageIco_tag{
  background: #A1001F;
}
.theme_inorder .merit_ttl::before{
  background: #A1001F;
}
.theme_inorder #article .panel .service_case_kaiketsu{
  border-color: #A1001F;
  color: #A1001F;
}
.theme_inorder .q_box{
  color: #A1001F;
}
.theme_inorder .funcs_target{
  border-color: #A1001F;
}
.theme_inorder .funcs_inner::before{
  background: #A1001F;
}
.theme_inorder .columns_item::before{
  height: 11em;
}
.theme_inorder .columns_target{
  border-color: #A1001F;
}
.theme_inorder .columns_target::before{
  color: #A1001F;
}
.theme_inorder .columns_inner{
  text-align: center;
}
.theme_inorder .columns_inner::before{
  background: #A1001F;
}
.theme_inorder .btns_target{
  border-color: #A1001F;
  color: #A1001F;
}
.theme_inorder .btns_inner{
  color: #A1001F;
}
.theme_inorder .btns_inner::before{
  content: url("/resource/img/leaf/inorder/ico_btn_ins_off.svg");
}
.theme_inorder .btns_target-main{
  background: #A1001F;
}
.theme_inorder .btns_target-main:hover{
  background: #fff;
}
.theme_inorder .btns_target-main .btns_inner{
  color: #fff;
}
.theme_inorder .btns_target-main .btns_inner::before{
  content: url("/resource/img/leaf/inorder/ico_btn_ins_on.svg");
}
.theme_inorder .btns_target-main:hover .btns_inner{
  color: #A1001F;
}
.theme_inorder .btns_target-main:hover .btns_inner::before{
  content: url("/resource/img/leaf/inorder/ico_btn_ins_off.svg");
}
@media screen and (max-width: 768px){
  .theme_inorder #leaf_bg{
      background: none;
  }
}
/* --------- 
utility
--------- */
/* 文字間隔 */
.u_ls0{
  letter-spacing: 0 !important;
}