@charset "utf-8";
/* CSS Document */


.headerTtl {
  border-top: 1px solid #9E2730;
  border-bottom: 1px solid #9E2730;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 16px;
  padding: 8px 0;
}

.headerTtl_sub {
  display:block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.leadMsg{
  margin-bottom:8px;
  line-height:1.6;
}

.updateDate{
  margin-bottom:8px;
  text-align:right;
}


.categoryTtl {
  border-left: 8px solid #9E2730;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  padding: 5px 0 5px 10px;
}

/*********
foundation
*********/
/* body */
body {
  counter-reset: qnum; 
}
/* 既存CSSリセット */
#leaf_sub{
  width: 200px;
}
#leaf_sub dl.nav_panel{
  padding: 0;
}
.container_main{
  width: auto;
}
/* 既存CSSの利用 */
#leaf_new_footer{
  display: flex;
}
#leaf_new_footer div{    
  width: 350px;
  height: 88px;
  margin-right: 25px; 
  margin-bottom: 25px;   
}

#leaf_new_footer div:nth-child(2n){
  margin-right:0;
}

#leaf_new_footer div a{
  display: block;
  width: 100%;
  height: 100%;
  padding: 11px;
  color: #fff;border: 1px solid #1fc5ae;
  background-color: #1fc5ae;
  -webkit-transition: 0.3s;
  transition: 0.3s; 
  border-radius: 100px;
}
#leaf_new_footer div a:hover{
  background-color:#fff;
  color: #1fc5ae;
}
#leaf_new_footer div a dl dt{
  margin-bottom: 3px;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}
#leaf_new_footer div a dl dd{
  font-size: 13px;
  text-align: center;
}
@media screen and (max-width: 768px){
  #leaf_new_footer{
    display: block;
  }
  #leaf_new_footer div{    
    margin-right: auto; 
    margin-left: auto;   
  }
  #leaf_new_footer div:nth-child(2n){
    margin-right: auto; 
  }
}
@media screen and (max-width: 599px){
  #leaf_new_footer div{    
    width: 100%;
    height: 56px;
  }
  #leaf_new_footer div a dl dd{
    display :none;
  }
}

/* base 
ルートにつけられないので、レイアウト層でfont種を設定
*/

.l_main{
  font: 500 14px yu gothic,YuGothic,ヒラギノ角ゴ pron w3,hiragino kaku gothic pron,Arial,メイリオ,Meiryo,sans-serif
}
.l_side{
  font: 500 14px yu gothic,YuGothic,ヒラギノ角ゴ pron w3,hiragino kaku gothic pron,Arial,メイリオ,Meiryo,sans-serif
}

/*********
layout
*********/
.l_wrapper{
  margin-top: 40px;
  margin-bottom: 100px;
}
.l_main{
  width: 730px;
}
.l_side{
  order: -1;
  width: 200px;
}
.l_side--rev{
  order: 1;
  width: 200px;
}
@media screen and (max-width: 768px){
  .l_main{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .l_side{
    display: none;
  }
}

/*********
component
*********/
/*グリッド*/
.c_grid{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
}
.c_grid__item{
  display: flex;
}
.c_grid__inner{
  display: block;
  width: 100%;
}
.c_grid--qaList{
  margin: -4px;
}
.c_grid--qaList > .c_grid__item{
  padding: 4px;
}
.c_grid--tab{
  margin: -1px;
}
.c_grid--tab > .c_grid__item{
  padding: 1px;
}
/*ナビゲーション*/
.c_nav{
  display:flex;
  align-items: stretch;
}
.c_nav__item{
  display: flex;
  width: 100%;
}
.c_nav__target{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: inherit;
}
.c_nav--local{
  margin: -.5px;
}
.c_nav--local .c_nav__item{
  padding: .5px;
}
.c_nav--local .c_nav__target{
  height: 40px;
  background: linear-gradient(180deg, #fff 0%, #ddd 100%);
  font-size: 12px;
  letter-spacing: 0;
}
.c_nav--local .c_nav__target:hover{
  text-decoration: none;
}
.c_nav--local .c_nav__target.is_active{
  color: #fff;
  background: #E6002D;
  text-decoration: none;
}
@media screen and (min-width:769px){
  .c_nav--local .c_nav__target:hover{
    color: #fff;
    background: #E6002D;
  }
}

/*見出し*/
.c_heading{
  font-weight: bold;
}
.c_heading__ttl{}
.c_heading__sub{}
.c_heading--topImg{
  margin-bottom: 16px;
  line-height: 1;
}
.c_heading--primary{
  margin-bottom: 32px;
  padding-bottom: 8px;
  border-bottom: 4px solid #333;
  line-height: 1;
}
.c_heading--primary > .c_heading__ttl{
  font-size: 48px;
}
.c_heading--primary > .c_heading__ttl--name{
  font-size: 24px;
}
.c_heading--primary > .c_heading__sub{
  font-size: 24px;
}
.c_heading--secondary{
  margin-bottom: 32px;
}
.c_heading--secondary > .c_heading__ttl{
  padding: 8px 12px;
  background: #E6002D;
  line-height: 1.3;
  color: #fff;
  font-size: 24px;
}
.c_heading--tertiary{
  margin-bottom: 18px;
}
.c_heading--tertiary > .c_heading__ttl{
  font-size: 16px;
  font-weight: 500;
}
.c_heading--qList{
  margin-bottom: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid #E6002D;
}
.c_heading--qList > .c_heading__ttl{
  font-size: 18px;
}
.c_heading--qaList{
  margin-bottom: 16px;
}
.c_heading--qaList > .c_heading__ttl{
  line-height: 1.4;
  font-size: 14px;
  color: #E6002D;
}
.c_heading--card{
  margin-bottom: 8px;
}
.c_heading--card > .c_heading__ttl{
  color: #E6002D;
  line-height: 1.3;
  font-size: 16px; 
}

@media screen and (max-width:599px){
  .c_heading--primary > .c_heading__ttl{
    display: block;
    margin-bottom: 4px;
    font-size: 24px;
  }
  .c_heading--secondary > .c_heading__ttl{
    font-size: 18px;
  }
}
/*リンク*/
.c_link, .c_link:hover{
  color: inherit;
  text-decoration: none;  
}
.c_link--txt{
  color: #E6002D;
  text-decoration: underline;
}
.c_link--txt:hover{
  color: #f79494;
  text-decoration: underline;
}
.c_link--tab{
  display: block;
  align-items: center;
  padding: 8px;
  font-size: 12px;
  line-height: 1;
  background: #e6e6e6;
}
.c_link--tab:hover,
.c_link--tab.is_active{
  color: #fff;
  background: #E6002D;
}
/*ボタン*/
.c_btn{
  position:relative;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding:0 16px 0 calc(32px + 1em);
  border-radius:4px;
  text-decoration:none;
  line-height:1.2;
}
.c_btn::before{
  content:'▲';
  position:absolute;
  top:50%;
  left:16px;
  display:inline-block;
  margin-right:8px;
  transform:translateY(-50%) rotate(90deg);
}
.c_btn::after{
  content: "";
  display: block;
  width: 0;
  height: calc(1em * 1.2);
  padding: 10px 0;
}

.c_btn:hover{
  opacity:.7;
  color: inherit;
  text-decoration:none;
}
.c_btn-main{
  color:#fff;
  background:#E6002D;
  border: 2px solid #E6002D;
}
.c_btn-main:hover{
  color:#fff;
}
.c_btn-sub{
  border: 2px solid #E6002D;
  color: #E6002D;
}
.c_btn-sub:hover{
  color: #E6002D;
}

/*アイコン*/
.c_hasIco{
  position: relative;
}
.c_hasIco::before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.c_hasIco--localNav::before{
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: none;
}
.c_hasIco--category{
  padding-left: 53px;
}
.c_hasIco--category::before{
  line-height: 1;
}
.c_hasIco--qList{
  display: block;
  padding-left: 52px;
  counter-increment: qnum;
}
.c_hasIco--qList::before{
  content: "Q" counter(qnum) ".";
  top: 0;
  transform: none;
  color: #E6002D;
}
.c_hasIco--aList{
  display: block;
  padding-left: 52px;
}
.c_hasIco--aList::before{
  content: "A.";
  top: 0;
  font-size: 16px;
  font-weight: bold;
  transform: none;
}
.c_hasIco--innerLink{
  display: block;
  padding-right: 24px;
}
.c_hasIco--innerLink::before{
  content: "\f107";
  left: auto;
  right: 0;
  font-size: 24px;
  font-family: "FontAwesome";
}



[v-cloak]{display:none;}

@media screen and (max-width:768px){
  .c_res_md_col_25{width:20%;}
}

/*===============================

    コンテンツ

================================*/
/*********
project
*********/
/*サイドナビモジュール*/
.p_qaSideNav{
  line-height: 1.4;
  background: #fff;
}
.p_qaSideNav--colorTheme{}
.p_qaSideNav__ttl{
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 3px solid;
  line-height: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.p_qaSideNav_body{}
.p_qaSideNav__item{}
.p_qaSideNav__item + .p_qaSideNav__item{
  margin-top: 2px;
}
.p_qaSideNav__target{
  display: block;
  padding: 8px 12px;
  color: inherit;
  background: #e6e6e6;
  font-weight: bold;
  font-size: 12px;
}
.p_qaSideNav--colorTheme .p_qaSideNav__ttl{
  color: #E6002D;
}
.p_qaSideNav--colorTheme .p_qaSideNav__target:hover,
.p_qaSideNav--colorTheme .p_qaSideNav__target.is_active{
  background: #E6002D;
  color: #fff;
}
/*メインコンテンツモジュール*/
.p_main{}
.p_main__nav + .p_main__lead{
  margin-top: 24px;
}
.p_main__lead + .p_main__qaList{
  margin-top: 40px;
}
.p_main__qaList + .p_main__qaList{
  margin-top: 64px;  
}
.p_main__qaList + .p_main__link{
  margin-top: 40px;  
}
.p_main__lead + .p_main__qaTab{
  margin-top: 24px;    
}
.p_main__qaTab + .p_main__qList{
  margin-top: 16px;    
}
.p_main__qList + .p_main__qaList{
  margin-top: 40px;
}
/*
.main-enter-active{
  transition: 1s all;
}
.main-leave-active{
  visibility: hidden;
}
.main-enter{
  opacity: 0;
  transform: translateY(16px);
}
*/

/* カード */
.p_card{
  padding: 16px;
  border: 2px solid;
  color: inherit;
}
.p_card:hover{
  opacity: .7;
}
.p_card__inner{
  display: flex;
  align-items: center;
  justify-contents: flex-start;
  flex-wrap: wrap;
  margin: -8px;
}
.p_card__img{
  order: -1;
  width: 238px;
  padding: 8px;
  line-height: 0;
  text-align: center;
}
.p_card__img > img{
  max-width: 100%;
  height: auto;
}
.p_card__body{
  width: calc(100% - 238px);
  padding: 8px;
}
.p_card__catch{
  line-height: 1.4;
}
.p_card--colorGray{
  border-color: #e6e6e6;
}


/*カテゴリ毎のQAリストモジュール*/
.p_qaCategoryList{}
.p_qaCategoryList__item + .p_qaCategoryList__item{
  margin-top: 32px;
}
/*カテゴリ内のQAリストモジュール*/
.p_qaListBox{}
.p_qaListBox__lead{
  font-size: 12px;
}
.p_qaListBox__lead + .p_qaListBox__list{
  margin-top: 12px;
}
/*テキストボックスモジュール*/
.p_msg{
  font-size: 12px;
}
.p_msg_item + .p_msg_item{
  margin-top:8px;
}

/*QAタブモジュール*/
.p_qaTab{}
.p_qaList{
  width: 100%;
}
.p_qaList__item{
  padding: 2px;
}

/*Qリストモジュール*/
.p_qList{
  border: 2px solid #b3b3b3;
  padding: 20px;
}
.p_qList__list{}
.p_qList__item + .p_qList__item{
  margin-top: 8px;
}
/*QAリストモジュール*/
.p_qaList{counter-reset: qnum;}
.p_qaList__item + .p_qaList__item{
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #808080;
}
.p_qaList_answer{
  line-height: 1.5;
  white-space:pre-wrap;
  font-family:inherit;
  font-size:inherit;
}
.p_qaList_answer a{
  color: #E6002D;
  text-decoration: underline;
}
.p_qaList_answer a:hover{
  color: #f79494;
  text-decoration: underline;
}

/*ポップアップ*/
@keyframes popup{
  0% {
    transform: translateY(100%);
  }
  25% {
    transform: translateY(-20%);
  }
  50% {
   transform: translateY(0);
  }
  75% {
   transform: translateY(-5%);
  }
  100% {
    transform: translateY(0);
  }
}
.p_pop{
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translateY(100%);
}
.p_pop.is_active{
  animation: popup 1s ease-out;
  animation-fill-mode: both;
}
.p_pop__img{}
.p_pop__img img{
  vertical-align: top;
}
.p_pop__toggle{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 4px solid;
  transform: translateY(-100%);
}
.p_pop__toggle--insColor{
  border-color: #c30d23;
}
.p_pop__btn{
  display: block;
  padding: 4px 4px 0;
  line-height: 1;
  text-decoration: none;
  font-size: 20px;
}
.p_pop__btn:hover{
  text-decoration: none;
}
.p_pop__toggle--insColor > .p_pop__btn{
  color: #fff;
  background: #c30d23;
}
.p_pop__btn--open{
  padding: 2px 7px 2px;
}


/*初回ローディング*/
.p_loading{
  position: fixed;
  top: 0;
  left: 0;
  z-index : 99999;
  width: 100vw;
  height: 100vh;
  background: #fff;
}
.p_loading::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: #1a2336;
  transform: translateX(-100%);
  transition: .2s transform;
}
.p_loading::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 745px;
  height: 195px;
  background: url(/resource/img/faq/logo_qa.png) no-repeat top left/contain;
  transform: translate(-50%, -80%);
}

.p_loading--animation::before{
  transform: translateX(0);
}

.loading-leave-active{
  transition: .2s all;
}
.loading-leave-to{
  transform: translateX(100%);
}
@media screen and (max-width: 768px){
  .p_loading::after{
    width: 480px;
    height: 126px;
  }
}
@media screen and (max-width: 599px){
  .p_loading::after{
    width: 256px;
    height: 68px;
  }
}
/*
    メニュー
================================*/
.menuLink {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

.menuLink_item + .menuLink_item { margin-left: 15px; }

.menuLink_item > a::before {
    content: "\f178";
    display: inline-block;
    font-family: "FontAwesome";
    margin-right: 3px;
}

.tabSwitch {
  /*display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;*/
  width: 100%;
  margin-bottom:8px;
}

.tabSwitch_item {
  background-color: #e6e6e6;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  margin: 0 2px 2px 0;
  padding: 4px 8px;
  text-align: center;
  width: auto;
}

/*.tabSwitch_item + .tabSwitch_item { margin-left: 10px; }*/

.tabSwitch_item:hover,
.tabSwitch_item.is-on {
  background-color: #9E2730;
  color: #fff;
}


.selectList {
  border: 2px solid #e6e6e6;
  /*max-height: 270px;*/
  margin-bottom: 40px;
  /*overflow: auto;*/
  padding: 20px;
}

.selectList_ttl {
  border-bottom: 1px solid #9E2730;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 3px;
}

.selectList:first-of-type { display: block; }

.selectList_list {}

.selectList_item {
  position:relative;
  padding-left:42px;
  counter-increment: qnum;  
}

.selectList_item::before{
  content:"Q"counter(qnum)".";
  position:absolute;
  left:0;
  top:0;
  display:block;
  color:#9E2730;
  font-weight:bold;
}

.selectList_item + .selectList_item { margin-top: 15px; }


/*
    Q&A
================================*/
.qaBoxWrap{
  counter-reset: qnum; 
}
.qaBox {
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 24px;
  padding-bottom: 24px;
}

.qaBox:last-of-type { border-bottom: none; }

.faq_question {
  color: #9E2730;
  line-height: 1.5;
  margin-bottom: 15px;
  padding-left: 42px;
  position: relative;
  counter-increment: qnum;  
}

.faq_question::before {
  content: "Q"counter(qnum)".";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.faq_answer {
  font-family:inherit;
  font-size:inherit;
  white-space:pre-wrap;
  line-height: 1.5;
  padding-left: 42px;
  position: relative;
}

.faq_answer::before {
  content: "A.";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.p_btnBox{}
.p_btnBox_item + .p_btnBox_item{margin-top:16px;}

/*
    Q&Aトップ
================================*/

/*project*/



/*動的に研修一覧のCSSを読んでいます*/
/*その他*/



.theme_faqTop{line-height:normal;}
.theme_faqTop .top_img > img{vertical-align:top;}

/*===============================

    ★★レスポンシブ

================================*/
@media screen and (max-width:768px) {
.wrapper { width: 100%; }

.container {
  float: none;
  width: 100%;
}


}/* @media */

@media screen and (max-width:500px){
.tabSwitch_item { font-size: 12px; }

}

/**********
state
**********/
.js_sideNav{}
.js_sideNav.is_fixed{
  position: fixed;
  width: 200px;
  top: 93px;
}

/**********
utility
**********/
/*横幅*/
.u_col1{width:8.333%;}
.u_col2{width:16.667%;}
.u_col3{width:25%;}
.u_col4{width:33.333%;}
.u_col5{width:41.666%;}
.u_col6{width:50%;}
.u_col7{width:58.333%;}
.u_col8{width:66.666%;}
.u_col9{width:75%;}
.u_col10{width:83.33%;}
.u_col11{width:91.666%;}
.u_col12{width:100%;}
@media screen and (max-width:768px){
  .u_resMdCol1{width:8.333%;}
  .u_resMdCol2{width:16.667%;}
  .u_resMdCol3{width:25%;}
  .u_resMdCol4{width:33.333%;}
  .u_resMdCol5{width:41.666%;}
  .u_resMdCol6{width:50%;}
  .u_resMdCol7{width:58.333%;}
  .u_resMdCol8{width:66.666%;}
  .u_resMdCol9{width:75%;}
  .u_resMdCol10{width:83.33%;}
  .u_resMdCol11{width:91.666%;}
  .u_resMdCol12{width:100%;}
}
@media screen and (max-width:599px){
  .u_resSmCol1{width:8.333%;}
  .u_resSmCol2{width:16.667%;}
  .u_resSmCol3{width:25%;}
  .u_resSmCol4{width:33.333%;}
  .u_resSmCol5{width:41.666%;}
  .u_resSmCol6{width:50%;}
  .u_resSmCol7{width:58.333%;}
  .u_resSmCol8{width:66.666%;}
  .u_resSmCol9{width:75%;}
  .u_resSmCol10{width:83.33%;}
  .u_resSmCol11{width:91.666%;}
  .u_resSmCol12{width:100%;}
}
.u_col3{width:25%;}
.u_col4{width:33.333%;}
.u_col5{width:41.666%;}
.u_col6{width:50%;}
.u_col7{width:58.333%;}
.u_col8{width:66.666%;}
.u_col9{width:75%;}
.u_col10{width:83.33%;}
.u_col11{width:91.666%;}
.u_col12{width:100%;}
@media screen and (max-width:768px){
  .u_resMdCol1{width:8.333%;}
  .u_resMdCol2{width:16.667%;}
  .u_resMdCol3{width:25%;}
  .u_resMdCol4{width:33.333%;}
  .u_resMdCol5{width:41.666%;}
  .u_resMdCol6{width:50%;}
  .u_resMdCol7{width:58.333%;}
  .u_resMdCol8{width:66.666%;}
  .u_resMdCol9{width:75%;}
  .u_resMdCol10{width:83.33%;}
  .u_resMdCol11{width:91.666%;}
  .u_resMdCol12{width:100%;}
}
@media screen and (max-width:599px){
  .u_resSmCol1{width:8.333%;}
  .u_resSmCol2{width:16.667%;}
  .u_resSmCol3{width:25%;}
  .u_resSmCol4{width:33.333%;}
  .u_resSmCol5{width:41.666%;}
  .u_resSmCol6{width:50%;}
  .u_resSmCol7{width:58.333%;}
  .u_resSmCol8{width:66.666%;}
  .u_resSmCol9{width:75%;}
  .u_resSmCol10{width:83.33%;}
  .u_resSmCol11{width:91.666%;}
  .u_resSmCol12{width:100%;}
}

/*間隙*/
.u_mb8{
  margin-bottom: 8px;
}
.u_mb16{
  margin-bottom: 16px;
}
.u_mb24{
  margin-bottom: 24px;
}
.u_mb40{
  margin-bottom: 40px;
}
.u_mb64{
  margin-bottom: 64px;
}
.u_mr8{
  margin-right: 8px;
}

/*文字間*/
.u_ls0{
  letter-spacing: 0;
}

/*文字色*/
.u_colorTheme{
  color: #E6002D;
}
.u_colorIns{
  color: #e6002d;
}
/*文字サイズ*/
.u_fs24{
  font-size: 24px;
}

/*文字の太さ*/
.u_fb{
  font-weight: bold;
}

/*文字位置*/
.u_ar{
  text-align: right;
}
@media screen and (max-width: 599px){
  .u_resSmAl{
    text-align: left;
  }
}