/* CSS Document */

/* ============
  foundation 
============ */
/* 既存CSSハック */
p#tp {
  clear:both;
  height:24px;
  font-size:10px;
}
p#tp a {
  display:block;
  float:left;
  padding:1px 15px 2px 7px;
  background:url(/common/images/bg_tpath.gif) no-repeat 100% 0px;
  line-height:24px;font-family:  游ゴシック, メイリオ,sans-serif;
  font-weight: 700;
  font-size: 11px;
}
p#tp a:hover {color:#0066FF;text-decoration:none;}
p#tp strong {
  display:block;
  float:left;
  padding-left:7px;
  font-weight:normal;
  line-height:24px;
  font-family: 游ゴシック, メイリオ,sans-serif;
  font-weight: 700;
  font-size: 11px;
}
p#tp span {
  display:none;
}
/*初期設定CSS*/
#trainarPageCont, #trainarPageOpt{
  font:400 16px/1.3 "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
  letter-spacing:.1em;
}
@media print{
  #trainarPageCont, #trainarPageOpt{
    font-family: "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif
  }
}
[v-cloak]{
  display: none;
}

/*既存CSS対応*/
#trainarPageCont *, #trainarPageOpt *{
  letter-spacing:inherit;
}
.relatedTraining{
  margin-bottom: 0;
}
/* ============
  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_nav{
  display: flex;
  justify-content: flex-start;
  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;
  text-decoration: none;
}
.c_nav__target:hover{
  color: inherit;
  text-decoration: none;
}

/* ボタン */
.c_btn{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  line-height: 1;
}
.c_btn::before{
  content: "";
  display: block;
  width: 0;
  height: 1em;
}
.c_btn__target{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: inherit;
  color: inherit;
}

/* アイコン */
.c_hasIco{
  position: relative;
  display: block;
}
.c_hasIco > .c_hasIco__item,
.c_hasIco::before,
.c_hasIco::after{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.c_hasIco > .c_hasIco__item,
.c_hasIco::before{
  left: 0;
}
.c_hasIco::after{
  right: 0;
}
.c_hasIco--top > .c_hasIco__item,
.c_hasIco--top::before,
.c_hasIco--top::after{
  top: 0;
  transform: none;
}
/* ============
  project 
============ */
/*節*/
.p_sec{}
.p_sec--xl{}
.p_sec--lg{}
.p_sec--md{}
.p_sec__item{}
.p_sec--xl > .p_sec__item + .p_sec__item{
  margin-top: 64px;
}
.p_sec--lg > .p_sec__item + .p_sec__item{
  margin-top: 40px;
}
.p_sec--md > .p_sec__item + .p_sec__item{
  margin-top: 24px;
}
.p_sec--sm > .p_sec__item + .p_sec__item{
  margin-top: 16px;
}
/*リスト*/
.p_list{}
.p_list--md{}
.p_list--sm{}
.p_list--hasDot{}
.p_list__item{}
.p_list--md > .p_list__item + .p_list__item{
  margin-top: 16px;
}
.p_list--sm > .p_list__item + .p_list__item{
  margin-top: 8px;
}
.p_list--md.p_list--hasDot > .p_list__item + .p_list__item{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted;
}
/* グリッド */
.p_grid--hasGutterMd{
  margin: -12px;
}
.p_grid--hasGutterMd > .c_grid__item{
  padding: 12px;
}
.p_grid--hasGutterSm{
  margin: -8px;
}
.p_grid--hasGutterSm > .c_grid__item{
  padding: 8px;
}
/* ナビ */
.p_nav--cat{
  margin: 0 -8px;
}
.p_nav--cat > .c_nav__item{
  padding: 0 8px;
}
.p_nav--cat .c_nav__target{
  height: 3.5em;
  border: 1px solid;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.p_nav--cat .c_nav__target:hover,
.p_nav--cat .c_nav__target.is_select{
  border-color: #ee7325;
  background: #ee7325;
  color: #fff;
}
.p_nav--subProf{
  margin: 0 -8px;
}
.p_nav--subProf > .c_nav__item{
  width: auto;  
  padding: 0 8px;
}
.p_nav--subProf .c_nav__target{
  height: 2.5em;
  padding-left: 1em;
  padding-right: 1em;
  background: #fff;
  color: #ee7325;
  font-weight: bold;
}
.p_nav--subProf .c_nav__target:hover{
  opacity: .7;
}

@media screen and (max-width: 768px){
  .p_nav--cat{
    margin: 0 -2px;
  }
  .p_nav--cat > .c_nav__item{
    padding: 0 2px;
  }
  .p_nav--cat .c_nav__target{
    font-size: 11px;
  }
}
@media screen and (max-width: 599px){
  .p_nav--cat{
    width: 600px;
  }
  .p_nav--subProf .c_nav__target{
    font-size: 12px;
  }
}

/* ボタン */
.p_btn--memoOpt{}
.p_btn--memoOpt::before{
  padding-top: 8px;
  padding-bottom: 8px;  
}
.p_btn--memoOpt > .c_btn__target{
  width: 104px;
  font-weight: bold;
}
.p_btn--memoOpt > .c_btn__target:hover{
  opacity: .7;
}
.p_btn--save > .c_btn__target{
  background: #ee7325;
  color: #fff;
}
.p_btn--del > .c_btn__target{
  border: 1px solid;
  background: #fff;
}
.p_btn--modalClose::before{
  padding-top: 2px;
  padding-bottom: 2px; 
}
.p_btn--modalClose > .c_btn__target{
  padding-left: 2px;
  padding-right: 2px;  
  color: #ee7325;
  font-size: 32px;
  font-weight: bold;
}
.p_btn--modalClose > .c_btn__target:hover{
  opacity: .7;
}
@media screen and (max-width:599px){
  .p_btn--memoOpt > .c_btn__target{
    width: 72px;
  }
}
/*見出し*/
.p_heading{
  font-weight: bold;
}
.p_heading--primary{}
.p_heading--secondary{}
.p_heading--hasBorder{}
.p_heading__ttl{
  font-size: inherit;
  font-weight: inherit;
}
.p_heading__opt{}
.p_heading--primary{
  margin-bottom: 24px;
  border-top:2px solid #ee7325;
  font-size: 20px;
}
.p_heading--primary > .p_heading__opt{
  font-weight: normal;
  text-align: right;
}
.p_heading--primary .p_heading__en{
  margin-left: 12px;
  font-size: 14px;
}
.p_heading--secondary{
  margin-bottom: 16px;
  font-size: 16px;
}
.p_heading--secondary.p_heading--hasBorder{
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid;
}
.p_heading--topImage{
  position: relative;
  margin-bottom: 24px;
}
.p_heading--topImage > .p_heading__ttl{
  position: absolute;
  top: 50%;
  left: 0;
  font-weight: normal;
  transform: translateY(-50%);
}
.p_heading--topImage > .p_heading__img{
  line-height: 1;
}
.p_heading--topImage > .p_heading__img > img{
  vertical-align: top;
}

.p_heading--hasOpt{
  display: flex;
  justify-content: space-between;
}
.p_heading--trainerId{
  margin-bottom: 16px;
  font-size: 14px;
  color: #333366;
}
.p_heading--memo{
  font-size: 13px;
}
.p_heading--modal{
  margin-bottom: 16px;
  font-size: 20px;
  color: #ee7325;
}
@media screen and (max-width: 768px){
  .p_heading--hasOtp{
    display: block;
  }
  .p_heading--hasOtp > .p_heading__opt{
    margin-top: 8px;
  }
}
@media screen and (max-width: 599px){
  .p_heading--primary{
    font-size: 14px;
  }
}
/*アイコン*/
.p_hasIco--heading{
  padding: 2px 0 2px 36px;
}
.p_hasIco--listItem{
  padding-left: 1em;
}
.p_hasIco--listItem::before{
  content: "・";
  line-height: inherit;
}
.p_hasIco--square{
  padding-left: 1em;
}
.p_hasIco--square::before{
  content: "■";
  line-height: inherit;
}
.p_hasIco--reading{
  padding-right: 30px;
}
.p_hasIco--reading::after{
  content: url("/resource/img/trainer-search/icon_seminar-instructors_read-off.png");
}
.p_hasIco--reading.is_active::after{
  content: url("/resource/img/trainer-search/icon_seminar-instructors_read-on.png");
}
.p_hasIco--favorite{
  padding-right: 28px;
}
.p_hasIco--favorite::after{
  content: url("/resource/img/trainer-search/icon_seminar-instructors_favorite-off.png");
}
.p_hasIco--favorite.is_active::after{
  content: url("/resource/img/trainer-search/icon_seminar-instructors_favorite-on.png");
}
.p_hasIco--edit{
  padding-right: 24px;
}
.p_hasIco--edit::after{
  content: url("/resource/img/trainer-search/icon_seminar-instructors_memo.png");
}
.p_hasIco--print{
  padding-right: 32px;
}
.p_hasIco--print::after{
  content: url("/resource/img/trainer-search/icon_seminar-instructors_print.png");
}
.p_hasIco--ask{
  padding-right: 28px;
}
.p_hasIco--ask::after{
  content: url("/resource/img/trainer-search/icon_seminar-instructors_lnquiry.png");
}
.p_hasIco--asterisk{
  padding-left: 1em;
}
.p_hasIco--asterisk::before{
  content: "※";
  top: 3px;
}
@media screen and (max-width: 599px){
  .p_hasIco--heading{
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ページ見出しのボックス */
.p_mainTtlBox{
  background: rgba(255, 255, 255, .7);
}
.p_mainTtlBox__ttl{
  display: block;
  padding: 16px 24px 8px;
  border-bottom: 1px solid;
  font-size: 32px;
}
#trainarPageCont .p_mainTtlBox__ttl{
  letter-spacing: 12px;
}
.p_mainTtlBox__sub{
  display: block;
  font-size: 12px;
}
#trainarPageCont .p_mainTtlBox__sub{
  letter-spacing: 3px;
}
.p_mainTtlBox__theme{
  display: block;
  padding: 8px 24px 16px;
}
.p_mainTtlBox__ttl--orange{
  border-color: #ee7325;
}

@media screen and (max-width: 599px){
  .p_mainTtlBox__ttl{
    padding: 4px 8px 4px;
    font-size: 18px;
  }
  .p_mainTtlBox__sub{
    font-size: 10px;
  }
  #trainarPageCont .p_mainTtlBox__sub{
    letter-spacing: 1px;
  }
  .p_mainTtlBox__theme{
    padding: 4px 8px 4px;
    font-size: 11px;
  }
}

/*講師経歴（個別）*/
.p_career{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.p_career__item{
  padding: 8px;
}
.p_career__item--year{
  white-space: nowrap;
}
@media screen and (max-width: 599px){
  .p_career{
    display: block;
  }
}

/* タグリスト */
.p_tagList{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
.p_tagList__item{
  display: flex;
}
.p_tagList__inner{
  padding: 4px 8px;
  border: 1px solid;
  border-radius: calc(1em + 4px);
  line-height: 1;
  font-size: 12px;
}
.p_tagList--hasGutterSm{
  margin: -4px;
}
.p_tagList--hasGutterSm > .p_tagList__item{
  padding: 4px;
}
/* 講師情報 */
.p_trainerInfo{}
.p_trainerInfo__opt{
  width: 100%;
  padding: 16px;
}
.p_trainerInfo__body{
  padding: 16px;
  border: 1px solid;
  color: inherit;
}
.p_trainerInfo__body:hover{
  opacity: .7;
}
.p_trainerInfo__item + .p_trainerInfo__item {
  margin-top: 16px
}
.p_trainerInfo__item--catch + .p_trainerInfo__item {
  margin-top: 24px
}

/* 講師のキャッチコピー */
.p_catch{
  display: flex;
}
.p_catch__img{
  flex: 0 0 150px;
  line-height: 0;
}
.p_catch__img img{
  width: 150px;
  max-width: 100%;
  height: auto;
}
.p_catch__body{
  flex: 1 1 auto;
}
.p_catch__img + .p_catch__body{
  padding-left: 24px;
}

/* お気に入り/閲覧済 */
.p_trainerState{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.p_trainerState__item + .p_trainerState__item{
  padding-left: 8px;
}
.p_trainerState__inner{
  font-size: 13px;
}
.p_trainerState--orange .p_trainerState__inner{
  color: #ee7325;
}
@media screen and (max-width:768px){
  .p_trainerState{
    justify-content: flex-start;
  }
}
/* メモ */
.p_memo{
  display: block;
  padding: 8px;
  border: 1px solid;
  border-radius: 2px;
  background: #fff;
  color: inherit;
}
.p_memo__ttl{}
.p_memo__edit{
  color: #b4b3b4;
}
.p_memo__body{
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 13px;
}
.p_memo--orange{
  border-color: #ee7325;
}
.p_memo--orange .p_memo__ttl{
  color: #ee7325;
}
.p_memo__textarea{
  width: 100%;
  border: none;
  font-family: inherit;
  background-color: transparent;
}
.p_memo__textarea:focus{
  outline: none;
}
.p_memo.is_focus{
  border-color: #66afe9;
  background-color: #fff8dc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
@media screen and (max-width: 599px){
  .p_memo__textarea{p_memo
    font-size: 12px;
  }
}
/* メモのオプション */
.p_memoOpt{
  position: relative;
  display: flex;
  justify-content: flex-end;
  line-height: 1;
}
.p_memoOpt__cont{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.p_memoOpt__sup{
  position: absolute;
  top: 8px;
  left: 0;
}
.p_memoOpt__item + .p_memoOpt__item{
  padding-left: 24px;
}
.p_memoOpt__msg{}
.p_memoOpt__msg--alert{
  color: #e52c39;
  font-weight: bold;
}

@media screen and (max-width:768px){
  .p_memoOpt{
    display: block;
  }
  .p_memoOpt__sup{
    position: static;
    margin-bottom: 16px;
  }
  .p_memoOpt__cont{
    justify-content: flex-end;
  }
}
@media screen and (max-width:599px){
  .p_memoOpt__item + .p_memoOpt__item{
    padding-left: 4px;
  }
}

/* ページネーション */
.p_pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 -8px;
}
.p_pagination__body{
  display: flex;
  margin: 0 -4px;
  padding: 0 8px;
}
.p_pagination__feed{
  padding: 0 8px;
}
.p_pagination__item{
  padding: 0 4px;
}
.p_pagination__num{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid;
  line-height: 1;
}
.p_pagination__arrow{
  display: block;
  width: 0;
  height: 24px;
  border-top: 12px solid #fff;
  border-bottom: 12px solid #fff;
  overflow: hidden;
}
.p_pagination__arrow:hover{
  opacity: .7;
}
.p_pagination__arrow.is_unactive{
  opacity: .2;
}
.p_pagination__arrow--prev{
  border-right: 12px solid #b4b4b5;
}
.p_pagination__arrow--next{
  border-left: 12px solid #b4b4b5;
}
.p_pagination__body--orange{}
.p_pagination__body--orange .p_pagination__num{
  border-color: #ee7325;
  color: #ee7325;
}
.p_pagination__body--orange .p_pagination__num:hover,
.p_pagination__body--orange .p_pagination__num.is_current{
  background: #ee7325;
  color: #fff;
}

/*カテゴリーラベル*/
.p_catLabel{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  color: inherit;
}
.p_catLabel::before{
  content: "";
  display: block;
  width: 14px;
  border-right: 2px solid;
}
.p_catLabel:hover::before,
.p_catLabel--orange.is_active::before{
  border-color: #fff;
}
.p_catLabel__item{
  display: flex;
  align-items: center;
  width: calc(100% - 16px);
  min-height: 3.5em;
  padding: 0 8px;
  border: 1px solid;
  border-left: none;
  font-size: 13px;
}
.p_catLabel--orange{}
.p_catLabel--orange::before{
  background: #ee7325;
  border-color: #ee7325;
}
.p_catLabel--orange > .p_catLabel__item{
  border-color: #ee7325;
}
.p_catLabel--orange:hover > .p_catLabel__item,
.p_catLabel--orange.is_active > .p_catLabel__item{
  background: #ee7325;
  color: #fff;
}
@media screen and (max-width: 599px){
  .p_catLabel__item{
    font-size: 11px;
  }
}
/* サブメニュー（スクロールで表示） */
.p_subMenu{
  position: fixed;
  top: 0;
  left: auto;
  display: flex;
  justify-content: flex-end;
  width: 960px;
  padding: 8px;
  background: rgba(220, 220, 220, .8);
}
@media screen and (max-width: 768px){
  .p_subMenu{
    width: 100%;
    left: 0;
  }
}
/* モーダル */
.p_modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  width: 90vw;
  padding: 32px;
  border-radius: 16px;
  background: rgba(220, 220, 220, .9);
  transform: translate(-50%, -50%);
}
.p_modal__close{
  position: absolute;
  top: 24px;
  right: 24px;
}
@media screen and (max-width: 599px){
  .p_modal{
    padding: 16px;
  }
}

/* オーバーレイ */
.p_overlay{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99998;
  width: 100vw;
  height: 100vh;
  background: rgba(35, 24, 21, .5);
}
/* ============
  utility
============ */
/* 幅 */
.u_col1{
  width: calc(100% * 1 / 12); 
}
.u_col2{
  width: calc(100% * 2 / 12); 
}
.u_col3{
  width: calc(100% * 3 / 12); 
}
.u_col4{
  width: calc(100% * 4 / 12); 
}
.u_col5{
  width: calc(100% * 5 / 12); 
}
.u_col6{
  width: calc(100% * 6 / 12); 
}
.u_col7{
  width: calc(100% * 7 / 12); 
}
.u_col8{
  width: calc(100% * 8 / 12); 
}
.u_col9{
  width: calc(100% * 9 / 12); 
}
.u_col10{
  width: calc(100% * 10 / 12); 
}
.u_col11{
  width: calc(100% * 11 / 12); 
}
.u_col12{
  width: calc(100% * 12 / 12); 
}
@media screen and (max-width: 768px){
  .u_resMdCol4{
    width: calc(100% * 4 / 12); 
  }
}
@media screen and (max-width: 599px){
  .u_resSmCol6{
    width: 50%;
  }
  .u_resSmCol12{
    width: 100%;
  }
}

/* 間隙 */
.u_mt8{
  margin-top: 8px;
}
.u_mt40{
  margin-top: 40px;
}
.u_mb24{
  margin-bottom: 24px;
}
.u_mb40{
  margin-bottom: 40px;
}

/* 上付き文字 */
.u_super{
  font-size: 11px;
  vertical-align: super;
}

/* 文字サイズ */
.u_fs13{
  font-size: 13px;
}
.u_fs11{
  font-size: 11px;
}

/* 文字色 */
.u_colorTheme{
  color: #ee7325;
}

/* 行送り */
.u_lh16{
  line-height: 1.6;
}

/* 要素を隠す/出す */
.u_hide{
  display: none;
}
@media screen and (max-width: 768px){
  .u_resMdHide{
    display: none;
  }
}

/* スクロール */
.u_scrollX{
  overflow-y: visible;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 568px){
  .u_resSmScrollX{
    overflow-y: visible;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============
  anime
============ */
/* ページ遷移 */
.changePage-leave-active,
.changePage-enter-active{
  transition: .8s all;
}
.changePage-leave-active{
  position: absolute;
  width: 730px;
}
.changePage-leave,
.changePage-enter-to{
  transform: translateY(0px);
}
.changePage-leave-to{
  opacity: 0;
  transform: translateY(40px);
}
.changePage-enter{
  opacity: 0;
  transform: translateY(40px);
}
@media screen and (max-width: 768px){
  .changePage-leave-active{
    width: calc(95% - 20px);
  }
}
/* カード変更 */
.card-enter-active, .card-move {
  transition: .8s all;
}
.card-leave-active {
  position: absolute;
  visibility: hidden;
}
.card-enter {
  opacity: 0;
  transform: scale(.9);
}

/* モーダル */
.modal-leave-active,
.modal-enter-active{
  transition: .8s all;
}
.modal-enter,
.modal-leave-to{
  opacity: 0;
}

/* サブナビ */
.subNav-leave-active,
.subNav-enter-active{
  transition: .8s all;
}
.subNav-enter,
.subNav-leave-to{
  transform: translateY(-100%);
}


/*おすすめ講師用　追加*/
.p_trainerInfo__body{
  padding: 16px 10px;
}
.p_tagList__inner{
  line-height: 1.2;
  font-size: 11px;
  letter-spacing: -1px;
}
@media screen and (max-width: 768px){
  .u_resSmCol12{
    width: 100%;
  }
}