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


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

    common

================================*/
body{
  color: #333;
  font: 500 14px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
  line-height: 1.6;
  letter-spacing: .1em;
}

#base { width: 1220px; }

.p_wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.p_mainContainer {
  order: 2;
  width: 750px;
}

[v-cloak]{
  display: none;
}

@media screen and (max-width:768px){
  #base { width: 100%; }
  .p_mainContainer { width: 100%; }
  .p_wrapper { display: block; }
}


/* 左ナビのCS上書き */
#bottomLineups .ap_ttl--subRelativeTraining{
  background: #5558af;
}
#bottomLineups .ap_ico--middle{
  background: #5558af;
}
#bottomLineups .ap_ico--drop--red{
  color: #5558af;
  border-color: #5558af;
}

.side_rslt > dt::before{
  border-color: #5558af; 
}
.side_rslt > dt > img{
  background-color: #5558af; 
}

/* 右ナビのCS上書き（初めての方はこちら） */
.m_sideNavBox { margin-bottom: 24px; }

/*
    トップ画
================================*/

/* 2016/09/26
 新デザインTOP画まわり用 */
.top_section{margin-bottom:20px;}
.top_section .top_box{display:table;}
.top_section .top_image{display:table-cell;vertical-align:top;}
.top_section .top_info{display:table-cell;vertical-align:top;padding-left:20px;width:420px;}

.top_section .top_titleBox{position:relative;height:155px;margin-bottom:15px;}
.top_section h1{font-family:"游ゴシック";font-size:25px;position:absolute;top:40%;transform: translateY(-50%);line-height:1.4em;}

.top_section .notice_box a{color:#333;}
.top_section .notice_box a:hover{text-decoration:none;}

 .var_program{
  position: absolute;
  bottom: 0;
  width: 100%;list-style:none;
  overflow: hidden;
}

 .var_program li a{   font-size: 13px;
  font-family: 游ゴシック;
  font-weight: 700;
  display: block;
  border: 1px solid #555;
  padding: 2px;text-align: center;
  color: white;
}

.var_program li a:hover{text-decoration:none;background-color: white; border: 1px solid;}

.var_program li{margin-right: 7px;    width: 32%;    float: left;}
.var_program li:last-child{margin-right: 0;}

@media (max-width: 430px){
  .var_program li a{  font-size: 11px;    height: 40px;}
  .var_program li{width: 31%;}
}


/* 2016/10/25 研修コード用 */
.top_section .code_box{color:#ccc;}
@media(max-width:768px){
.top_section .code_box{display:none;}
}

/***********
2018/9/12トップ画500-200対応
***********/
/*reset*/
/*2016テンプレート*/
.top_section.top_section--w500{
  display: block;
  height: auto;
}
.p_heading--500w > .p_heading__ttl{
  position: static;
  transform: none;
}
.top_section.top_section--w500 .notice_box__w500{
  position: static;
}
/*標準テンプレート*/
#cont #chead .top_section--w500 h1{
  border-top: none;
  padding: 0;
  text-indent: 0;
}
/*new*/
/*全体構造*/
.top_section--w500{
  font-weight: 500;
  font-family:"游ゴシック","Yu Gothic",sans-serif;
}
.top_section__imageWrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-bottom: 3px;
}
.top_section__comment {
  background-color: #dcddef;
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
}
.top_section__comment__logo {
  -ms-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
  width: 100%;
}
.top_section__comment__text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 10px;
  padding: 0 15px;
  word-break: break-all;
}
/* ▼画像サイズ500*150▼ */
.top_section__comment.short { padding: 5px; }
.top_section__comment__logo.short { margin-bottom: 5px; }
.top_section__comment__text.short { font-size: 14px; }
/* ▲画像サイズ500*150▲ */
.top_section__image{
  text-align: center;
}
.top_section__image img{ vertical-align: bottom; }

.top_section__aside{
  display: flex;
  justify-content: flex-end;
  line-height: 1;
  font-size: 11px;
}
.top_section__code + .top_section__date{
  padding-left: 16px;
}
.top_section__image + .top_section__aside{
  margin-top: 8px;
}
.top_section__aside + .notice_box__w500{
  margin-top: 8px;
}

.top_section__ida { 
  margin: 0 0 0 auto; 
  line-height: 0;
}

.top_section__ida a:hover { opacity: .6; }

@media screen and (max-width: 599px){
  .top_section__code + .top_section__date{ padding-left: 8px; }
  .top_section__imageWrap { display: block; }
  .top_section__comment__logo { display: none; }
  .top_section__comment { padding: 10px;margin-bottom: 0; }
  .top_section__comment__text { font-size: 13px; }
}

@media screen and (max-width: 768px){
  .top_section__comment__logo { margin-bottom: 0; }
  .top_section__comment { padding: 0;margin-bottom: 0; }
  .top_section__comment__text { font-size: 13px; }
}

/*見出し*/
.p_heading{}
.p_heading--500w{
  position: relative;
  padding: 8px 0 8px 72px;
  border-top:3px solid #5558af;
}
.p_heading--500w::before{
  content: url(/resource/img/icons/bottom_online.svg);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 64px;
}
.p_heading--500w > .p_heading__ttl, #cont #chead .p_heading--500w > .p_heading__ttl{
  font-size: 15px;
  line-height: 1.4;
}

@media screen and (max-width:599px){
  .p_heading--500w{
    padding-left: 56px
  }
 .p_heading--500w::before{
    width: 48px;
  }
}

/*キャッチコピー*/
.p_catchCopy{
  font-weight: bold;
  line-height: 1;
}
.p_catchCopy--500w{
  color: #5558af;
}

/* 講師派遣 */
.top_section .notice_box{width:100%;/*max-height:155px;*/}
.top_section .notice_box li{list-style-type:none;}
.top_section .notice_box .fl{width:45%;}
.top_section .notice_box .fr{width:53%;}
.top_section .notice_box .notice_koushi{border:1px solid #333;border-radius:2px;padding:10px;font-size:14px;height:140px;position:relative;}
.top_section .notice_box .notice_koushi p{font-family:"游ゴシック";font-size:18px;font-weight:bold;text-align:center;margin-bottom:10px;line-height:1.3;position:absolute;top:30%;right:0;left:0;}
.top_section .notice_box .notice_koushi p a{font-family:"游ゴシック";display:block;}
.top_section .notice_box .notice_koushi p span{font-family:"游ゴシック";font-size:20px;}
.top_section .notice_box .notice_koushi ul{}
.top_section .notice_box .notice_koushi ul li{border-bottom:1px solid #333;margin-bottom:5px;padding-bottom:5px;position:relative;}
.top_section .notice_box .notice_koushi ul li:last-child{margin-bottom:0;}
.top_section .notice_box .notice_koushi ul li span.price{position:absolute;right:0;font-weight:bold;}
.top_section .notice_box .notice_koushi ul li a{text-decoration:none;display:block;}
.top_section .notice_box .notice_koushi:hover{border-color:#c23535;cursor:pointer;}
.top_section .notice_box .notice_koushi:hover *{color:#c23535;border-color:#c23535;}

/* 公開講座＆eラーニング (2019/6/24 追記)*/
.top_section .notice_box .notice_bup{border:1px solid #333;border-radius:2px;margin-bottom:12px;text-align:center;}
.top_section .notice_box .notice_bup span{font-family:"游ゴシック";font-size:12px;display:block;}
.top_section .notice_box .notice_bup a{font-family:"游ゴシック";font-size:14px;font-weight:bold;display:block;padding:8px;height: 62px;}
.top_section .notice_box .notice_bup:hover,
.top_section .notice_box .notice_bup a:hover{border-color:#c23535;color:#c23535;}

.top_section .notice_box .notice_elearning{border:1px solid #333;border-radius:2px;font-family:"游ゴシック";font-size:14px;font-weight:bold;text-align:center;}
.top_section .notice_box .notice_elearning span{font-family:"游ゴシック";font-size:12px;display:block;}
.top_section .notice_box .notice_elearning a{font-family:"游ゴシック";display:block;padding:8px;height: 62px;}

.top_section .notice_box .notice_elearning:hover,
.top_section .notice_box .notice_elearning a:hover{border-color:#c23535;color:#c23535;}

/* 2019/6/24ドロップダウン追加 */
.subNav{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -4px;
}
.subNav__item{
  display: block;
  width: 33.333%;
  padding: 4px;
}

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

.subNav__inner{
  border-radius: 2px;
  position: relative;
}
.subNav__btn{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 8px 24px 8px 8px;
  color: inherit;
  text-decoration: none;
}
.subNav__msg{
  line-height: 1.2;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.subNav__btn::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: auto 0;
  border: 1px solid #333;
  line-height: 1;
  font-size: 12px;
}
.subNav__btn.is_show::after{
  content: "-";
}
.subNav__btn.is_hide::after{
  content: "+";
}
.subNav__list{
  background: #f3f3f3;
  padding: 8px 4px;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.subNav__listItem{
  position: relative;
  padding-left: 28px;
  line-height: 1.2;
}
.subNav__listItem::before{
  position: absolute;
  top: 50%;
  left: 0;
  line-height: 0;
  transform: translateY(-50%);
}
.subNav__listItem + .subNav__listItem{
  margin-top: 16px;
}
.subNav__listItem--same::before{
  content: url(/common/img/bottom/icon_sameContents.png);
}
.subNav__listItem--ask::before{
  content: url(/common/img/bottom/icon_ask.png);
}
.subNav__listItem--lineup::before{
  content: url(/common/img/bottom/icon_lineup.png);
}
.subNav__target{
  letter-spacing: 0;
  font-weight: bold;
  font-size: 11px;
  text-decoration: none;
}
.subNav__target:hover{/* カスケード対応 */
  text-decoration: underline;
}
.subNav__subMsg{
  font-size: 10px;
}

.js_subNavList{
  display: none;
  transition: .5s height, .5s padding;
  overflow: hidden;
}


/* 全力Q&Aの見出し上書き */
.simple.faq {
  border: 1px solid #5558af;
  padding: 20px;
}

.faq__ttl {
  color: #5558af;
  border-bottom: 1px solid #5558af;
  font-size: 18px;
  margin-bottom: 16px;
  padding-bottom: 5px;
}

.faq__ttl img {
  margin-right: 10px;
  vertical-align: bottom;
}

.faq__lead {
  margin-bottom: 10px;
}

.faq__listItem + .faq__listItem { margin-top: 8px; }

.faq__link {
  display: block;
  padding-left: 16px;
  position: relative;
}

.faq__link:hover {
  text-decoration: underline;
}

.faq__link::before {
  border: 8px solid transparent;
  border-left: 8px solid;
  border-right: none;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
}


/*18/8/13　見出しに研修コード追加*/
.programHeading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.programHeading--hasMargin{
  margin-bottom:20px;
}
#cont .simple .programHeading__ttl{
  margin-bottom:0;/*要素に直に当てているCSSキャンセル（カスケーディングも実施）*/
}
.programHeading__code{
  padding:8px;
  border:1px solid #ccc;
}

@media screen and (max-width:599px){
  .programHeading{
    justify-content:flex-end;
  }
  
  .programHeading--resSmHasMargin{
    margin-bottom:20px;
  }
  .programHeading__ttl{
    flex:0 0 100%;
  }
  .programHeading__code{
    padding:4px;
  }
}

/*
    ナビゲーション
================================*/
.bottomNavWrapper { margin: 10px 0 15px; }

.bottomNavWrapper-box {
  background-color: #fff;
  width: 750px;
}

.bottomNavWrapper-box.is-fixed {
  position: fixed;
  top: 0;
  z-index: 999;
  /* test */
  width: 100%;
  left: 0;
  box-shadow: 0 1px 8px rgba(0,0,0,.3);
}

.bottomNav {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  /*justify-content: space-between;*/
  /*margin-top: 15px;*/
  padding-bottom: 5px;
  width: 100%;
  /* test */
  max-width: 750px;
  margin: 0 auto;
  background: #f3f3f3 content-box;
}


.bottomNav_item {
  /*
  -webkit-flex: 1 0 25%;
  -moz-flex: 1 0 25%;
  -ms-flex: 1 0 25%;
  -o-flex: 1 0 25%;
  flex: 1 0 25%;
  */
  -webkit-flex: 0 0 25%;
  -moz-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  -o-flex: 0 0 25%;
  flex: 0 0 25%;
  font-size: 14px;
}

.bottomNav_link {
  /*background-color: #f3f3f3;*/
  border: 1px solid transparent;
  color: #333;
  display: block;
  font-weight: bold;
  padding: 5px;
  /*text-align: center;*/
}

.bottomNav_link >　span {}

.bottomNav_link:hover {
  background-color: #5558af;
  /*border: 1px solid #bbb;*/
  color: #fff;
  text-decoration: none;
}

.bottomNav_link span::before {
  color: #5558af;
  display: inline;
  font-family: "fontAwesome";
  font-size: 1em;
  margin-right: 5px;
  vertical-align: baseline;
}

.bottomNav_link.programMenu span::before{ content: '\f0ce'; }
.bottomNav_link.needs span::before{ content: '\f2b5'; }
.bottomNav_link.attainmentTarget span::before{ content: '\f024'; }
.bottomNav_link.programExample span::before{ content: '\f03a'; }
.bottomNav_link.qa span::before{ content: '\f2c4'; }
.bottomNav_link.sampleMovie span::before{ content: "\f03d"; }

.bottomNav_link.impressions span::before{ content: '\f2bd'; }
.bottomNav_link.comment span::before{ content: '\f075'; }
.bottomNav_link.search-bup span::before{ content: '\f0fe'; }
.bottomNav_link.search-elearning span::before{ content: '\f0fe'; }

.bottomNav_link:hover span::before { color: #fff; }

/* サブナビ（お問合せ＆印刷ボタン） */
.bottomSubNav {
  -ms-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  /*margin: 15px 0 0;*/
  padding-bottom: 5px;
  /* test */
  width: 750px;
  margin: 5px auto 0;
}

.bottomSubNav_item {
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  -o-flex: 0 0 auto;
  flex: 0 0 auto;
}
.bottomSubNav_item + .bottomSubNav_item { margin-left: 10px; }

.bottomSubNav_item.search { width: auto;flex: 1 0 auto; }
.bottomSubNav_item.column { align-self: center; }
.bottomSubNav_item.print {}
.bottomSubNav_item.contact { width: 180px; }

.bottomSubNav_item-wrapper{
  display: flex;
}


.c_navLink-btn {
  -ms-align-items: center;
  align-items: center;
  background-color: #ff9e1d;
  border-radius: 5px;
  box-shadow: inset -2px 2px 0 rgba(255, 255, 255, 0.4), -2px 2px 0 rgba(115, 99, 87, 1);
  color: #1a1a1a;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  line-height: 1.3;
  padding: 7px;
  width: 100%;
  transition: .3s;
}

.c_navLink-btn:hover {
  opacity: .6;
  text-decoration: none;
}

.c_navLink-btn::before {
  content: "\f040";
  display: block;
  font-family: "FontAwesome";
  font-size: 1.2em;
  margin-right: 5px;
}

/* 読み物・コラム */
.c_navLink-banner {
  display: flex;
  transition: .3s;
}
.c_navLink-banner:hover { opacity: .6; }


/* 印刷ボタン打消し */
div#print_preview_button { margin-top: 0 !important; }/* importantの打消し */
div#print_preview_button img {
  display: block;
  float: none;
  margin: 0;
}

/* オンライン研修導線 */
.p_mid_attentionBox {
  -ms-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-bottom: 10px;
}

.p_mid_attentionBox_img {
  flex-shrink: 0;
  margin-right: 10px;
}

.p_mid_attentionBox_txt {}

.p_mid_attentionBox_txt > span:first-of-type {
  color: #9e2730;
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline;
}

.p_mid_attentionBox_txt > span:last-of-type {
  color: #333;
  display: block;
  font-size: .8em;
  font-weight: normal;
}

/* 検索窓上書き */
#searchField .searchField__heading,
#searchField .js_themeSearch { display: none; }
#searchField .searchField__item + .searchField__item { margin-top: 0 !important; }


@media screen and (max-width:768px){
  .bottomNavWrapper-box { width: 100%; }
  .bottomNavWrapper-box.is-fixed { left: 0; }
  .bottomNav_link { font-size: 13px;font-weight: normal; }
  .bottomNav_item {flex: 0 1 33.333%; }
  .bottomSubNav { width: auto; }
} 

@media screen and (max-width:599px){
  /*.bottomNav_item { width: auto;flex: 1 1 50%; }*/
  .bottomNav_item { width: auto;flex: 0 1 50%; }
  .bottomNav_link { font-size: 11px; }
  .bottomSubNav { flex-wrap: wrap;width: auto; }
  .bottomSubNav_item.search { width: 50%; }
  .bottomSubNav_item.contact { margin-left: 0;margin-top: 10px;width: 100%; }
}

@media screen and (max-width:320px){
  .bottomNav_item { width: 100%;flex: auto; }
  .bottomNav_link { font-size: 13px; }
  .bottomSubNav_item + .bottomSubNav_item { margin-left: 0; }
}


/*
    見出し
================================*/
.p_heading-main {
  -ms-align-items: center;
  align-items: center;
  border: 1px solid #5558af;
  background:none;
  color: #5558af;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 4px;
  margin-bottom: 10px;
  padding: 3px 10px;
  position:relative;
}

.p_heading-main::before {
  display: block;
  font-family: "FontAwesome";
  font-size: 1.2em;
  margin-right: 10px;
}

#target::before { content: "\f007"; }
#needs::before { content: "\f2b5"; }
#programMenu::before { content: "\f0ce"; }
#attainmentTarget::before { content: "\f024"; }
#programExample::before { content: "\f03a"; }
#comment::before { content: "\f075"; }
#schedule::before { content: "\f073"; }
/*#faq::before { content: "\f059"; }*/
#evaluation::before { content: "\f005"; }
#relatedTraining::before { content: "\f0c1"; }
#relatedColumn::before {
  content: "";
  background-image:url("../../img/bup/icon_column_heading2.gif");
  background-position: center;
  background-repeat: no-repeat;
  height: 34px;
  width: 32px;
}
#sampleMovie::before { content: "\f03d"; }

.p_heading-main_subtxt {
  display: inline-block;
  font-size: .6em;
  font-weight: normal;
  letter-spacing: 5px;
  margin-left: 5%;
  text-transform: uppercase;
}

@media screen and (max-width:600px){
  .p_heading-main_subtxt { display: none; }
}

/* 枠線の中のh3 */
.p_heading-inner {
  font-size: 14px;
  margin-bottom: 20px;
}

.p_heading-inner img {
  background-color: #5558af;
  margin-right: 5px;
  vertical-align: -6px;
}

/* 全力Q&A */
.p_heading--qa{
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #5558af;
}
.p_heading--qa > .p_heading__img{
  margin-right: 12px;
  line-height: 0;
  filter: hue-rotate(154deg) contrast(2) saturate(70%);/*仮*/
}
.p_heading--qa > .p_heading__sub{
  font-size: 15px;
}
.p_heading--commonQa{
  position: relative;
  margin-bottom: 12px;
  padding-left: 1.5em;
}
.p_heading--commonQa::before{
  content: "?";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  line-height: 1;
  color: #5398FF;
  font-size: 24px;
  transform: translateY(-50%);
}
.p_heading--commonQa > .p_heading__ttl{
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: normal;
}
.p_heading--commonQa .p_heading__sub{}



/*
    対象者タグ
================================*/
.p_tagWrapper {
  -ms-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.p_targetTags {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

.p_targetTags.besideHeading { max-width: 80%; }/* 対象者見出しの横に表示する場合 */

.p_targetTags_item {
  -webkit-flex:0 1 auto;
  -moz-flex:0 1 auto;
  -ms-flex:0 1 auto;
  -o-flex:0 1 auto;
  flex:0 1 auto;
  margin: 3px 0;
}

.c_targetTags {
  background-color: #ccc;
  border-radius: 25px;
  color: #fff;
  display: block;
  font-size: 12px;
  margin: 0 3px;
  padding: 1px 12px;
  text-align: center;
}

.c_targetTags.young { background-color: #00a99d; }
.c_targetTags.middle { background-color: #ff9e1d; }
.c_targetTags.leader { background-color: #cc1b5b; }
.c_targetTags.naiteisha { background-color: #09a2c6; }
.c_targetTags.newcom { background-color: #1eba2c; }
.c_targetTags.head { background-color: #b865c1; }
.c_targetTags.mng { background-color: #8e6747; }
.c_targetTags.all { background-color: #e80000; }




/*
    各カスタムフィールドの中身
================================*/
.p_cntContainer {
  font-size: 15px;
  line-height: 1.5;
  position: relative;
}

/****** ▼対象者＆ニーズ▼ */
.p_notice {
  background-color: #dcddef;
  padding: 10px;
}

.p_notice .p_heading-main {
  border: none;
  padding: 0;
}

.p_notice #target { margin: 0 10px 0 0;font-weight: bold; }
.p_notice #needs { font-weight: bold; }

.p_notice .main_box {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 8px;
}
/****** ▲対象者＆ニーズ▲ */


.main_box p {  padding-bottom: 0; }
.main_box p + p {  padding-top: 20px; }

/* ニーズにお応えします（チェックマーク） */
.p_needsBox {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 8px;
}

.p_needsBox_item {
  position: relative;
  padding-left: 2em;
}

.p_needsBox_item + .p_needsBox_item { margin-top: 5px; }

.p_needsBox_item::before {
  border-right: 4px solid #E51E19;
  border-bottom: 4px solid #E51E19;
  content: "";
  display: block;
  height: 11px;
  position: absolute;
  top: 0;
  left: 0.7em;
  transform: rotate(45deg);
  width: 4px;
}

.cf_box {
  border-color: #D9D0BB;
  border-style: solid;
  border-width: 4px 1px 1px;
  margin-bottom: 20px;
  padding: 20px;
}

.p_cntContainer + .p_cntContainer { margin-top: 24px; }


/* 全力QA */
.p_faq{
  border: 1px solid;
}
.p_faq__item{
  padding: 12px 16px;
}
.p_faq__item--common{
  background: #e9ecff;
}
.p_faq__listItem{}
.p_faq__listItem + .p_faq__listItem{
  margin-top: 8px;
}
.p_faq__qa{
  position: relative;
  padding-left: 1.5em;
}
.p_faq__qa::before{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  color: #5558af;
}
.p_faq__qa--question{
  cursor: pointer;
  font-weight: bold;
}
.p_faq__qa--question::before{
  content: "Q.";
}
.p_faq__qa--answer{
  margin-top: 8px;
  white-space: pre-wrap;
}
.p_faq__qa--answer::before{
  content: "A.";
  font-weight: bold;
}

.p_faq--bup{
  border-color: #5558af;
}
.v-enter-active,.v-leave-active{transition:.5s height,.5s opacity;}
.v-enter{opacity:0;}
.v-leave-to{visibility:hidden}

/* プランナー動画 */
.p_movie{
  position: relative;
  width: 100%;
  padding-top: calc(100% * 9 / 16);
}
.p_movie > iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* プランナー動画のサムネイル */
.p_thumbnailMovie{
  text-align: center;
}
.p_thumbnailMovie__target{
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  color: inherit;
}
.p_thumbnailMovie__target::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 20%;
  padding-top: 20%;
  display: block;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .8) calc(100% * .707), transparent 0);
  transform: translate(-50%, -50%);
  transition: .3s transform;
}
.p_thumbnailMovie__target:hover::before{
  transform: translate(-50%, -50%) scale(1.6);
}
.p_thumbnailMovie__target::after{
  content: "▼";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  font-size: 24px;
  line-height: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.p_thumbnailMovie__target > img{
  max-width: 100%;
  height: auto;
}

/* モーダル */
.p_modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10001;
  width: 80vw;
  max-width: 980px;
  transform: translate(-50%, -50%);
}
.p_modal__inner{
  background: #fff;
}
.p_modal__close{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
.p_modal__closeTarget{
  line-height: 0;
}
.p_modal__closeTarget:hover{
  opacity: .8;
}
@media screen and (max-width:599px){
  .p_modal{
    min-width: auto;
  }
}

/* オーバーレイ */
.p_overlay{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  min-width: 100vw;
  min-height: 100vh;
  background: #333;
  opacity: .9;
}


/*
    カリキュラムテーブル
================================*/
#programTable,
#programTable2,
#programTable3,
#programTable4,
#programTable5,
#programTable6 {
border-collapse: separate;
border-spacing: 1px;
width: 100%;
background-color: #5558af;
}

#programTable td,
#programTable2 td,
#programTable3 td,
#programTable4 td,
#programTable5 td,
#programTable6 td {
padding: 4px;
border-width:0px;
background-color:white;
text-align:center;
}
#programTable td.tblTitle,
#programTable2 td.tblTitle,
#programTable3 td.tblTitle,
#programTable4 td.tblTitle,
#programTable5 td.tblTitle,
#programTable6 td.tblTitle {
background-color:transparent;
color:white;
text-align:left;
height:29px;
padding:0px 0.5em;
}
#programTable td.tblSubTitle1,
#programTable2 td.tblSubTitle1,
#programTable3 td.tblSubTitle1,
#programTable4 td.tblSubTitle1,
#programTable5 td.tblSubTitle1,
#programTable6 td.tblSubTitle1 {
height:2em;
width: 35px;
padding:1px;
vertical-align:middle;
background-color:#eeeef7;
}
#programTable td.tblSubTitle2,
#programTable2 td.tblSubTitle2,
#programTable3 td.tblSubTitle2,
#programTable4 td.tblSubTitle2,
#programTable5 td.tblSubTitle2,
#programTable6 td.tblSubTitle2 {
height:2em;
width:406px;
padding:1px;
vertical-align:middle;
background-color:#eeeef7;
}
#programTable td.tblSubTitle3,
#programTable2 td.tblSubTitle3,
#programTable3 td.tblSubTitle3,
#programTable4 td.tblSubTitle3,
#programTable5 td.tblSubTitle3,
#programTable6 td.tblSubTitle3{
height:2em;
width: 55px;
padding:1px;
vertical-align:middle;
background-color:#eeeef7;
}
#programTable td *,
#programTable2 td *,
#programTable3 td *,
#programTable4 td *,
#programTable5 td *,
#programTable6 td * {
text-align:left;
}
#programTable td center,
#programTable2 td center,
#programTable3 td center,
#programTable4 td center,
#programTable5 td center,
#programTable6 td center {
text-align:center;
}
#programTable ul,
#programTable2 ul,
#programTable3 ul,
#programTable4 ul,
#programTable5 ul,
#programTable6 ul {
list-style:none outside;
line-height:1.6em;
margin-left:0px;
padding-left:0px;
}
#programTable ul li,
#programTable2 ul li,
#programTable3 ul li,
#programTable4 ul li,
#programTable5 ul li,
#programTable6 ul li {
list-style:none outside;
margin-left:0.5em;
padding-left:0px;
}
#programTable ol,
#programTable2 ol,
#programTable3 ol,
#programTable4 ol,
#programTable5 ol,
#programTable6 ol {
list-style:decimal outside;
margin-left:0px;
padding-left:2.2em;
}
#programTable ol li,
#programTable2 ol li,
#programTable3 ol li,
#programTable4 ol li,
#programTable5 ol li,
#programTable6 ol li {
list-style:decimal outside;
margin-left:0px;
padding-left:0px;
}
#programTable .style1,
#programTable2 .style1,
#programTable3 .style1,
#programTable4 .style1,
#programTable5 .style1,
#programTable6 .style1,
#programTable .emphasis,
#programTable2 .emphasis,
#programTable3 .emphasis,
#programTable4 .emphasis,
#programTable5 .emphasis,
#programTable6 .emphasis {
line-height:1.6em;
font-weight:bolder;
color:#8b0303;
font-size:12px;
}

/* カリキュラム下の関連リンク */
.var_program_bottom {
  margin-bottom: 20px;
  width: 100%;list-style:none;
  overflow: hidden;
}
.var_program_bottom li a{
  font-size: 13px;
  font-family: 游ゴシック;
  font-weight: 700;
  display: block;
  border: 1px solid #555;
  padding: 2px;text-align: center;
  color: white;
  background-color: #5f4f3d;
  }

.var_program_bottom li a:hover{
  text-decoration:none;
  color:#5f4f3d;
  background-color: white;
  border: 1px solid #5f4f3d;
}
.var_program_bottom li{
  margin-right: 7px;
  width: 32%;
  float: left;
}
.var_program_bottom li:last-child{ margin-right: 0; }

@media (max-width: 430px){
.var_program_bottom li a{font-size: 11px;height: 40px;}
.var_program_bottom li{width: 31%;}
}


/*
    受講者の声
================================*/
.ibox { margin-bottom: 20px; }

.ibox {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.ibox:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ibox dt { margin-bottom: 5px; }

.ibox dd + dt { margin-top: 10px; }

/* 内容、講師評価は出さない
.ibox dd:nth-of-type(3) {display: flex;font-weight: bold;font-size: 20px;}

.ibox dd:nth-of-type(3) span {
    font-weight: normal;
    font-size: 16px;
}

.ibox dd:nth-of-type(3) img {
  margin-right: 15px;
  height: 10px;
}

.ibox dd:nth-of-type(3) div {
  width: 50%;
}

@media screen and (max-width:599px) {
  .ibox dd:nth-of-type(3) { flex-direction: column; }
  .ibox dd:nth-of-type(3) div { width: 100%; }
}
*/

.ibox ul {}

.ibox li {
  padding-left: 27px;
  position: relative;
}

.ibox li + li { margin-top: 10px; }

.ibox li::before {
  content: "\f2bd";
  color: #5558af;
  font-family: "fontAwesome";
  font-size: 1.3em;
  position: absolute;
  top: 0;
  left: 0;
}

/* アンケートの業種と評価を削除 */
.ibox dt,
.ibox dd{
  display: none;
}
.ibox dt:first-of-type,
.ibox dd:first-of-type,
.ibox dt:last-of-type,
.ibox dd:last-of-type{
  display: block;
}

/*
    旧デザインからの引継ぎ
================================*/
/*「流れ」「ポイント」ボックス*/
.pointBoxChara {
  margin-bottom: 35px;
}

.pointFlowBox {
  margin-bottom: 30px;
}
.pointFlowBox .seminarPointBox {
  width: 100%;
  margin-bottom: 10px;
  line-height: 1.5em;
  background-color: #EFF8F5;
}
.pointFlowBox .seminarPointBox dt img {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 29px;
}
.pointFlowBox .seminarPointBox dt {
  margin-top: auto;
  margin-bottom: auto;
  height: 29px;
}
.pointFlowBox .seminarPointBox dd {
  list-style-type: none;
  padding-top: 3px;
  padding-bottom: 11px;
  padding-left: 92px;
  font-size: 14px;
  font-weight: bold;
  color: #005B5B;
  margin-top: -20px;
}
.flowBox {
  width: 100%;
  border-width: 0px 0px 1px 0px; /* 下だけ引く */
  border-color: #9BCDD2;
  border-style: solid;
  /*padding: 0.3em; /* セル内側の余白 */
  line-height: 1.5em;
}

.flowBox tr {
  background-color: #EFF8F5;
}
.flowBox td {
  border-width: 1px 0px 0px 0px; /* 上だけ引く */
  border-color: #9BCDD2;
  border-style: solid;
}
.pointFlowBox .flowBox .flowLeftBox p {
  margin-left:7px;
  margin-right:7px;
  margin-bottom: 0px;
  color: #29728D;
}
.pointFlowBox .flowBox .flowLeftLastBox p {
  margin-left:7px;
  margin-right:7px;
  margin-bottom: 0px;
  color: #29728D;
}

.flowBox .flowLeftBox {
  width: 64px;
  padding-top: 17px;
  padding-bottom: 30px;
  background-image: url(/common/images/arrow_flow.png);
  background-position: bottom;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  background-repeat: no-repeat;
}
.flowBox .flowLeftLastBox {
  width: 105px;
  padding-top: 20px;
  padding-bottom: 15px;
  background-image: url(/common/images/arrow_base_green_2_2.gif);
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #29728D;
  background-repeat: repeat;
}
.pointFlowBox .flowBox .flowRightBox {
  width: 395px;
  vertical-align: center;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.pointFlowBox .flowBox .flowRightBox p {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #445751;
}
.charaTitle {
  font-size: 14px;
  font-weight: bold;
  color: #005B5B;
  margin-bottom: 8px;
  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 20px;
  background-image: url(/common/images/caption_chara_blue.gif);
  background-repeat: no-repeat;
  background-position: left;
}

.pointFlowBox .goalBox { margin-bottom: 10px; }

.pointFlowBox .goalBox p {
  border: 1px solid #9BCDD2;
  padding: 15px;
  width: 100%;
  margin-left:0px;
  color: #333333;
}

/* 受講者の声をもっと見る */
.m_link a:hover{
  color:#666;
  text-decoration:none;
  opacity:0.7;
  background-color:transparent;
}
.m_link a {padding: 0;color:#666;}
#cont .m_link p {
  margin-bottom: 0;
  position: relative;
  width: 184px;
  z-index: 1;
}
.m_link p span {
  cursor: pointer;
  font-size: 13px;
  left: 12px;
  position: absolute;
  top: 3px;
  z-index: 5;
}

/* 本研修のねらいのボックス部分 */
.p_cntContainer .box-green {
  font-weight:bold;
  border:4px solid ;
  color:#33CC99;
  padding:9px;
  width: 100%;
  margin: 16px 0;
}
.p_cntContainer .box-pink {
  border:2px solid ;
  color:#ff5f86;padding:9px;
  margin-bottom: 17px;
  width: 100%;
  margin: 16px 0;
}

/* テキスト試し読み */
.trial-reading { overflow:hidden; }


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

    左右ナビ

================================*/
/*
    別カテゴリから探す
================================*/
.p_sideSection {
  font-family: "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
}

.p_sideSection_ttl {
  background-color: #5558af;
  color: #fff;
  padding: 5px 5px 5px 10px;
}

.p_sideSecList { margin-bottom: 20px; }

.p_sideSecList_item {
  border-bottom: 1px solid #7c7b7c;
}

.c_sideSec_link {
  color: currentColor;
  display: block;
}

.c_sideSec_link:hover { text-decoration: underline; }


.c_sideSec_link.hasIcon {
  -ms-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: 5px 0;
}

.c_sideSec_link.hasIcon img {
  background-color: #5558af;
  margin-right: 8px;
}

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

　受講の流れボタン

================================*/
.p_btnFlow{
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.p_btnFlow::before{
  content: "";
  display: flex;
  width: 0;
  height: 2.5em;
}
.p_btnFlow__target{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3em;
  border-radius: 8px;
}
.p_btnFlow__target:hover{
  opacity: .7;
}
.p_btnFlow__target::before,
.p_btnFlow__target::after{
  position: absolute;
  top: 50%;
  display: block;
  line-height: 1;
  font-family: 'FontAwesome';
  transform: translateY(-50%);
}
.p_btnFlow__target::before{
  content: "\f109";
  left: 12px;
  font-size: 20px;
}
.p_btnFlow__target::after{
  content: "\f105";
  right: 8px;
  font-size: 24px;
}
.p_btnFlow--colorDeep{}
.p_btnFlow--colorDeep .p_btnFlow__target{
  background: #052674;
  color: #fff;
}
@media screen and (max-width: 599px){
  .p_btnFlow__target{
    width: 100%;
    padding: 0;
    letter-spacing: 0;
  }
  .p_btnFlow__resHide{
    display: none;
  }
}

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

    State

================================*/
.js_hide{
  display: none;
}


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

    Utility

================================*/
/* color */
.u_color-coral { color: #ff7f50 !important; }
.u_color-rouge { color: #ec2c43 !important; }
.u_color-crimson { color: #e6002d !important; }

/* display */
.u_d-b { display: block !important; }
.u_d-fx { display: flex !important; }

/* float */
.u_fl-n { float: none !important; }
.u_fl-l { float: left !important; }
.u_fl-r { float: right !important; }

/* font-size */
.u_fz-xs { font-size: .75em !important; }
.u_fz-sm { font-size: .875em !important; }
.u_fz-md { font-size: 1em !important; }
.u_fz-lg { font-size: 1.25em !important; }
.u_fz-xl { font-size: 1.5em !important; }
.u_fz-sr { font-size: smaller !important; }
.u_fz-lr { font-size: larger !important; }

.u_fz10 { font-size: 10px !important; }
.u_fz11 { font-size: 11px !important; }
.u_fz12 { font-size: 12px !important; }
.u_fz13 { font-size: 13px !important; }
.u_fz14 { font-size: 14px !important; }
.u_fz15 { font-size: 15px !important; }
.u_fz16 { font-size: 16px !important; }
.u_fz17 { font-size: 17px !important; }
.u_fz18 { font-size: 18px !important; }
.u_fz19 { font-size: 19px !important; }
.u_fz20 { font-size: 20px !important; }

/* font-weigth */
.u_fw-b { font-weight: bold !important; }
.u_fw-n { font-weight: normal !important; }

/* line-height */
.u_lh-nm { line-height: normal !important; }
.u_lh-ih { line-height: inherit !important; }
.u_lh0 { line-height: 0 !important; }
.u_lh1 { line-height: 1 !important; }
.u_lh2 { line-height: 2 !important; }
.u_lh3 { line-height: 3 !important; }
.u_lh4 { line-height: 4 !important; }
.u_lh5 { line-height: 5 !important; }
.u_lh6 { line-height: 6 !important; }
.u_lh-xs { line-height: 1.25 !important; }
.u_lh-sm { line-height: 1.33 !important; }
.u_lh-md { line-height: 1.5 !important; }
.u_lh-lg { line-height: 1.75 !important; }
.u_lh-xl { line-height: 2 !important; }

/* padding */
.u_py0 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* margin */
.u_mt0 { margin-top: 0 !important; }
.u_mt-xs { margin-top: 0.2rem !important; }
.u_mt-sm { margin-top: 0.5rem !important; }
.u_mt-md { margin-top: 1rem !important; }
.u_mt-lg { margin-top: 1.5rem !important; }
.u_mt-xl { margin-top: 3rem !important; }

.u_ml0 { margin-left: 0 !important; }
.u_ml-xs { margin-left: 0.2rem !important; }
.u_ml-sm { margin-left: 0.5rem !important; }
.u_ml-md { margin-left: 1rem !important; }
.u_ml-lg { margin-left: 1.5rem !important; }
.u_ml-xl { margin-left: 3rem !important; }

.u_mb0 { margin-bottom: 0 !important; }
.u_mb-xs { margin-bottom: 0.2rem !important; }
.u_mb-sm { margin-bottom: 0.5rem !important; }
.u_mb-md { margin-bottom: 1rem !important; }
.u_mb-lg { margin-bottom: 1.5rem !important; }
.u_mb-xl { margin-bottom: 3rem !important; }

.u_mr0 { margin-right: 0 !important; }
.u_mr-xs { margin-right: 0.2rem !important; }
.u_mr-sm { margin-right: 0.5rem !important; }
.u_mr-md { margin-right: 1rem !important; }
.u_mr-lg { margin-right: 1.5rem !important; }
.u_mr-xl { margin-right: 3rem !important; }

.u_my0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.u_my10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.u_my20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.u_my30 { margin-top: 30px !important; margin-bottom: 30px !important; }

.u_mt5 { margin-top: 5px !important; }
.u_mt10 { margin-top: 10px !important; }
.u_mt15 { margin-top: 15px !important; }
.u_mt20 { margin-top: 20px !important; }
.u_mt30 { margin-top: 30px !important; }
.u_mt50 { margin-top: 50px !important; }
.u_mt100 { margin-top: 100px !important; }

.u_mt-5 { margin-top: -5px !important; }
.u_mt-10 { margin-top: -10px !important; }
.u_mt-15 { margin-top: -15px !important; }
.u_mt-20 { margin-top: -20px !important; }
.u_mt-30 { margin-top: -30px !important; }
.u_mt-50 { margin-top: -50px !important; }
.u_mt-100 { margin-top: -100px !important; }

.u_mb5 { margin-bottom: 5px !important; }
.u_mb10 { margin-bottom: 10px !important; }
.u_mb15 { margin-bottom: 15px !important; }
.u_mb20 { margin-bottom: 20px !important; }
.u_mb30 { margin-bottom: 30px !important; }
.u_mb50 { margin-bottom: 50px !important; }
.u_mb100 { margin-bottom: 100px !important; }

.u_mb-5 { margin-bottom: -5px !important; }
.u_mb-10 { margin-bottom: -10px !important; }
.u_mb-15 { margin-bottom: -15px !important; }
.u_mb-20 { margin-bottom: -20px !important; }
.u_mb-30 { margin-bottom: -30px !important; }
.u_mb-50 { margin-bottom: -50px !important; }
.u_mb-100 { margin-bottom: -100px !important; }

/* position */
.u_pos-r { position: relative !important; }
.u_pos-a { position: absolute !important; }

/* text-align */
.u_ta-c { text-align: center !important; }
.u_ta-r { text-align: right !important; }
.u_ta-l { text-align: left !important; }

/* text-indent */
.u_ti--1 { text-indent: -1em !important; padding-left: 1em !important; }
.u_ti-0 { text-indent: 0em !important; padding-left: 0em !important; }

/* text-decoration */
.u_td-n { text-decoration: none !important; }
.u_td-u { text-decoration: underline !important; }
.u_td-o { text-decoration: overline !important; }
.u_td-l { text-decoration: line-through !important; }

/* vertical-align */
.u_va-sup { vertical-align: super !important; }
.u_va-t { vertical-align: top !important; }
.u_va-tt { vertical-align: text-top !important; }
.u_va-m { vertical-align: middle !important; }
.u_va-bl { vertical-align: baseline !important; }
.u_va-b { vertical-align: bottom !important; }
.u_va-tb { vertical-align: text-bottom !important; }
.u_va-sub { vertical-align: sub !important; }

/* flexbox */
.u_ac-fs { align-content: flex-start !important; }
.u_ac-fe { align-content: flex-end !important; }
.u_ac-c { align-content: center !important; }
.u_ac-sb { align-content: space-between !important; }
.u_ac-sa { align-content: space-around !important; }
.u_ac-s { align-content: stretch !important; }
.u_ai-fs { align-items: flex-start !important; }
.u_ai-fe { align-items: flex-end !important; }
.u_ai-c { align-items: center !important; }
.u_ai-b { align-items: baseline !important; }
.u_ai-s { align-items: stretch !important; }
.u_as-a { align-self: auto !important; }
.u_as-fs { align-self: flex-start !important; }
.u_as-fe { align-self: flex-end !important; }
.u_as-c { align-self: center !important; }
.u_as-b { align-self: baseline !important; }
.u_as-s { align-self: stretch !important; }
.u_jc-fs { justify-content: flex-start !important; }
.u_jc-fe { justify-content: flex-end !important; }
.u_jc-c { justify-content: center !important; }
.u_jc-sb { justify-content: space-between !important; }
.u_jc-sa { justify-content: space-around !important; }
.u_fx0-1-a { flex: 0 1 auto !important; }
.u_fx1-0-a { flex: 1 0 auto !important; }
.u_fx1-1-a { flex: 1 1 auto !important; }
.u_fx0-0-a { flex: 0 0 auto !important; }
.u_fx1-0-0 { flex: 1 0 0% !important; }

/* table-layout */
.u_tbl-a { table-layout: auto !important; }
.u_tbl-f { table-layout: fixed !important; }

/* width */
.u_w350 { width: 350px !important; }
.u_w400 { width: 400px !important; }

.u_w40p { width: 40% !important; }
.u_w45p { width: 45% !important; }
.u_w50p { width: 50% !important; }

.u_maW70p { max-width: 70% !important; }
.u_maW75p { max-width: 75% !important; }
.u_maW80p { max-width: 80% !important; }