/*--------------------------------------------------------------------
共通
common.css 2020/03
--------------------------------------------------------------------*/
.btn-social-square {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin:2px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
}
.btn-social-square i {
  line-height:50px;
}
.btn-social-square:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.btn-social-square--twitter {
  background: #22b8ff;
}
.btn-social-square--facebook {
  background: #6680d8;
}
.btn-social-square--hatebu {
  background: #49a8fb;
}

/*----------------------------------------------
 ボタンカスタマイズ
  ---------------------------------------------*/
/*購入用*/
.btn-orange,
.btn-orange.disabled, .btn-orange:disabled {
  color: #fff;
  background-color: #F8703E;
  border: 2px solid #F76723;
}

/* focusされた時の枠線の色 */
.btn-orange:focus, .btn-orange.focus,
.btn-orange:not(:disabled):not(.disabled):active:focus, .btn-orange:not(:disabled):not(.disabled).active:focus,
.show > .btn-orange.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(200, 123, 255, 0.5);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.btn-orange:hover {
  color: #fff;
  background-color: #F5640E;
  border: 2px solid #FB4B00;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-orange:not(:disabled):not(.disabled):active, .btn-orange:not(:disabled):not(.disabled).active,
.show > .btn-orange.dropdown-toggle {
  color: #fff;
  background-color: #F1612C;
  border-color: #F1612C;
}

/*閲覧用*/
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #4A76E1;
  border: 2px solid #4A76E1;
}

/* focusされた時の枠線の色 */
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(200, 123, 255, 0.5);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.btn-orange:hover {
  color: #fff;
  background-color: #F5640E;
  border: 2px solid #FB4B00;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #1B43A1;
  border-color: #2255ce;
}
/*----------------------------------------------
 レスポンシブ表示設定
  ---------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 767px) {
.pc { display: none !important; }
.sp { display: block !important; }
}   
/*----------------------------------------------
レスポンシブ表示詳細設定
  ---------------------------------------------*/
/* 大デバイス（デスクトップ, 1200px 未満） */
@media (min-width: 992px) {
 .display-4{
   font-size: 4rem; 
}
  .lead{
   margin-top: 2em;
 }
}
/* 中デバイス（タブレット, 992px 未満） */
@media (max-width: 991.98px) {
 .lead{
   margin-top: 2em;
 }
}
/* 小デバイス（横向きモバイル, 768px 未満） */
@media (max-width: 767.98px) {
 .lead{
   margin-top: 2em;
 }
}
/* @include media-breakpoint-up(sm) {
/* 極小デバイス（縦向きモバイル, 576px 未満） */
@media (max-width: 575.98px) {
.display-4{
   font-size: 2.3rem;
 }
 .h2 {
   font-size: 1.3rem;
 }
 .h3 {
   font-size: 1.2rem;
 }
 .h4 {
   font-size: 1rem;
 }
 .lead{
   font-size: 1rem;
   margin-top: 0;
 }
}
/* @include media-breakpoint-up(sm) {
/* 極小デバイス2（縦向きモバイル, 320px 未満） */
@media (max-width: 320px) {
 .display-4{
   font-size: 2rem;
 }
 .h4 {
   font-size: 0.8rem;
 }
.infolink {
   display:none;
 }
.subtit2 {
   font-size: 0.8rem;
 }
}
/* @include media-breakpoint-up(sm) {
/* 極小デバイス3（縦向きモバイル, 300px 未満） */
@media (max-width: 300px) {
.display-4{
   font-size: 1.7rem;
 }
 .h2 {
   font-size: 1.3rem;
 }
 .h3 {
   font-size: 1rem;
 }
 .h4 {
   font-size: 0.7rem;
 }
 .subtit2 {
   font-size: 0.7rem;
 }
 .infolink {
   display:none;
 }
.sinjindetailbox{
	width: 200px;
    height: 200px;
}
.navbar-brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 0rem !important;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
　}
 .lead{
   margin-top: 0;
 }
.qazone h4{
  color: #009B1B;
  background-color: #F8FFF4;
  border: solid;
  border-color: #1EBF4A;
  border-width:1px 0 1px 0;
  padding: 18px 0px 18px 18px;
  background-image: none;
  line-height: 1.5em;
}
.qazone li{
  margin-left: 0em;
  line-height: 1.7em;
}
}


/*----------------------------------------------
各種設定設定
  ---------------------------------------------*/
/*タイトル下矢印*/
.content-title-type02 {
  border-bottom: 4px solid #49a0ef;
  font-size: 1.8em;
  font-weight: bold;
  margin: 0 0 40px;
  padding: 0 0 15px;
  position: relative;
  text-align: center;
  color: #4F4F4F;
}

.content-title-type02::after {
  border-color: #49a0ef transparent transparent transparent;
  border-style: solid;
  border-width: 13px 11px 0 11px;
  bottom: -17px;
  content: "";
  display: block;
  height: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 0;
}

.jumbotron_j {
padding: 2rem 1rem;	padding: 1px 1px 16px 1px;
background-color: #e9ecef;	border-top-style: solid;
border-top-color: #018b50;
border-top-width: 85px;
background-color: white;
border-radius: 0.3rem;	border-radius: 0.3rem;
}	
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}
.waku {
padding: 0px 20px 20px 20px;
border-style: solid;
border-width: 1px;
border: double #000;
border-color: #54c96a;
}
.lh-150{
  line-height: 1.5 !important;
}
.bg-vividgreen{
  background-color:#3CC257 !important;}
  
.bg-yellow{
  background-color:#fefdd8 !important;}
  
.bg-white{
  background-color:#ffffff !important;}
  
.bg-lightgreen{
  background-color:#BDF3BD !important;}
  
.bg-lightgreen2{
background-color:#efffef !important;}
  
.bg-lightgray{
  background-color:#F4F4F4 !important;}
  
.bg-black{
  background-color: black !important;}
  
.bg-lightblue{
  background-color:#d2efff !important;}
   
.text-yellow {
    color: #ffff00 !important;
}
.text-vividgreen{
    color:#1ebf4a !important;
}
.text-blue {
    color: #3264d4 !important;
}
.text-darkblue {
    color: #00156B !important;
}

.bg_plus {
	background-image:url(../images/note/back_plus.png);
	padding-top: 20px;
	}
.bg_plus li {
  font-size: 1.1em;
  padding-bottom: 10px;
}
.kaiketsu{
    padding-top: 50px;
    background-color: #4bb360;
    /* background-color: #3CC257;*/
    position: relative;
}
.sinjinbox{
	border-radius: 30px;
	border: 1px solid; 
	border-color: #FF8587;
	background-color: #FFF6F4;
	padding: 50px;
}
.sinjinbox span{
	color: #FF8587;
	}
.sinjindetailbox{
	font-size: 1.2em;
	border-radius: 50%;
	width: 230px;
    height: 230px;
    padding-top:  70px;
    background-color: #F9D8C9;
	text-align: center;
	position: relative;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
	margin: auto;
	
	}
/* 上付き下三角 */
.kaiketsu::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  top: 0px;
  margin: 0 auto;
  border-top: 30px solid #edefef;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
}
  
.kaiketsu ul{
list-style: none;
padding-left: 0;
color: #007931;
}


/*タイトル下矢印*/
.content-title-type02 {
  border-bottom: 4px solid #1ebf4a;
  font-size: 1.8em;
  font-weight: bold;
  margin: 0 0 40px;
  padding: 0 0 15px;
  position: relative;
  text-align: center;
  color: #464646;
}

.content-title-type02::after {
  border-color: #1ebf4a transparent transparent transparent;
  border-style: solid;
  border-width: 13px 11px 0 11px;
  bottom: -17px;
  content: "";
  display: block;
  height: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 0;
}
	
.hview{
	position: relative;
    /*margin-bottom: 11vw;*/
    padding-top: 5vw;
    height: 33vw;
    /*background-image: url(../images/headerimg.png);*/
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.appeal-title {
    /*float: left;*/
    /*width: 60%;*/
	margin-left: 0vw;
	margin-right: 0vw;
}
/* 新入社員教育のモデルプランボタン */
.btn_sinjin {
  display: block;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #808080;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  margin: 10px 0px;}
  
.btn_sinjin span{
  color: #FFF;
  font-size:80%;
  position: relative;
  padding-right: 10px;
  padding-left: 40px;
}
.btn_sinjin span::before{
  content: "";
  position: absolute;
  content: url('../images/note/icon_pdf.png');
  margin-top: 5px;
  left: 0;

}
.btn_sinjin span::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-top: -5px;
}
/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.btn_sinjin:hover {
  color: #fff;
  background-color: #727272;
}
/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn_sinjin:not(:disabled):not(.disabled):active, .btn_sinjin:not(:disabled):not(.disabled).active,
.show > .btn_sinjin.dropdown-toggle {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}
/* QA */
.qazone h4{
  color: #009B1B;
  background-color: #F8FFF4;
  border: solid;
  border-color: #1EBF4A;
  border-width:1px 0 1px 0;
  padding: 18px 0px 18px 0px;
  background-image: url("../images/note/icon_q.png");
  background-size:30px;
  background-repeat: no-repeat;
  padding-left: 90px;
  background-position: 40px; 20px;
}
.qazone li{
  margin-left: 2em;
  line-height: 2em;
}