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

/* setting */
@font-face {
  src: url("https://www.recruit.co.jp/fonts/AnyConv.com__Branding-Bold.eot?#iefix");
  src: url("https://www.recruit.co.jp/fonts/AnyConv.com__Branding-Bold.eot?#iefix") format("eot"), url("https://www.recruit.co.jp/fonts/Branding-Bold.woff") format("woff");
  font-family: "Branding-Bold";
}

@font-face {
  src: url("https://www.recruit.co.jp/fonts/AnyConv.com__Branding-Medium.eot?#iefix");
  src: url("https://www.recruit.co.jp/fonts/AnyConv.com__Branding-Medium.eot?#iefix") format("eot"), url("https://www.recruit.co.jp/fonts/Branding-Medium.woff") format("woff");
  font-family: "Branding-Medium";
}

@font-face {
  src: url("https://www.recruit.co.jp/fonts/AnyConv.com__Branding-Semibold.eot?#iefix");
  src: url("https://www.recruit.co.jp/fonts/AnyConv.com__Branding-Semibold.eot?#iefix") format("eot"), url("https://www.recruit.co.jp/fonts/Branding-Semibold.woff") format("woff");
  font-family: "Branding-Semibold";
}

.cfix::after {
   content: "";
   display: block;
   clear: both;
}

/* リストの高さ揃える */
.list-flex { display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

#blog { padding: 5.88vw 0; letter-spacing: 0.08em; line-height: 1.8em;  }
#blog .b-tit { text-align: center; padding-bottom: 4.4vw }
#blog .b-tit h2 { font-size: 30px; letter-spacing: 0.12em; font-family: "Branding-Semibold", sans-serif !important; color: #55656e }
#blog .b-tit h2 span { color: #2862ac }

#blog .content-inner { padding: 0 20px 5.88vw }

#blog .top-slide { position: relative }
#blog .top-slide .top-slide-container { position: relative; width: 100%; height: 520px; overflow-x: hidden; }
#blog .top-slide ul { position: relative; left: 0; top: 0; width: 7290px; margin-left: calc( (50% - 405px) - 1620px) }
#blog .top-slide li { float: left; margin: 0 15px; width: 780px; opacity: 0.4 }
#blog .top-slide li a { display: block; position: relative; border-radius: 16px; overflow: hidden }
#blog .top-slide li a .sld-tit { width: 86%; min-height: 80px; position: absolute; left: 7%; bottom: -100px; background: #fff; border-radius: 12px 12px 0 0; }
#blog .top-slide li a .sld-tit h3 { font-size: 20px; line-height: 1.6em; padding: 20px 20px 0 120px }
#blog .top-slide li a .sld-tit .date { position: absolute; left: 0; bottom: 0; width: 96px; height: 100%; padding-top: 10px; font-size: 14px; line-height: 1.6em; text-align: center; vertical-align: bottom; border-right: solid 1px #55656e }
#blog .top-slide li a .sld-tit .date span { display: block; font-size: 18px; font-weight: 550 }
#blog .top-slide li img.grey { position: absolute; left: 0; top: 0; filter: grayscale(100%); /*opacity: 0*/ }
#blog .top-slide .prev { position: absolute; left: 6.4vw; top: 228px; width: 64px; cursor: pointer; transition: all 0.2s }
#blog .top-slide .next { position: absolute; right: 6.4vw; top: 228px; width: 64px; cursor: pointer; transition: all 0.2s }
#blog .top-slide .prev:hover, #blog .top-slide .next:hover { transform: scale(1.08) }
#blog .top-slide .bullets { width: 100%; text-align: center; margin-top: 10px }
#blog .top-slide .bullets img { width: 36px; cursor: pointer }

#blog .blog-nav { padding: 20px 0 }
#blog .blog-nav .menu-cate { text-align: center; padding-bottom: 10px }
#blog .blog-nav .menu-cate li { display: inline-block; padding: 0 4px; }
#blog .blog-nav .menu-cate li a { display: block; width: 190px; height: 52px; text-align: center; line-height: 52px; font-size: 16px; color: #fff; background: url(https://www.recruit.co.jp/blog/assets/img/blog/cate_bg.png) no-repeat; background-size: contain; transition: all 0.2s }
#blog .blog-nav .menu-cate li a:hover { transform: scale(1.04) }
#blog .blog-nav .menu-service, #blog .blog-nav .menu-tag { text-align: center; background: #f1f3f8; border-radius: 26px; box-shadow: 1px 1px 0 0 #577db7; margin-top: 10px }
#blog .blog-nav .mn-tit { position: relative; width: 100%; line-height: 52px; padding: 0; text-align: center; cursor: pointer }
#blog .blog-nav .mn-tit span { font-weight: bolder }
#blog .blog-nav .mn-tit span.bl { color: #2862ac }
#blog .blog-nav .mn-tit .arw { position: absolute; right: 20px; top: 50%; margin-top: -5px; width: 10px }
#blog .blog-nav .mn-cont { padding: 0 1em 1em; text-align: left; display: none }
#blog .blog-nav .mn-cont li { display: inline-block; margin: 0 0.5em }
#blog .blog-nav .mn-cont h4.mt { margin-top: 1em }

#blog .blog-index {}
#blog .blog-index ul { margin: 0 -15px }
#blog .blog-index ul li { float: left; width: 33.33% }
#blog .blog-index ul li .blog-idx { padding: 20px 15px }
#blog .blog-index ul li .blog-idx a.thumb { display: block; border-radius: 16px; overflow: hidden; box-shadow: 1px 1px 0 0 #577db7; transition: all 0.2s }
#blog .blog-index ul li .blog-idx a.thumb:hover { transform: scale(1.025); box-shadow: 4px 4px 16px 0 #c7c7c7; }
#blog .blog-index ul li .blog-idx .date { font-size: 14px; margin: 0.66em 0 0.33em }
#blog .primary-cat { display: inline-block; font-size: 11px; line-height: 30px; margin: 10px 0 0 }
#blog .primary-cat a { position: relative; display: block; padding: 0 1em; color: #2862ac; background: #dce6f2; border-radius: 15px; transition: all 0.2s }
#blog .primary-cat a:hover { box-shadow: 1px 1px 0 0 #577db7; left: -1px; top: -1px }
#blog .sub-cats li { display: inline-block; float: none !important; width: auto !important; font-size: 11px; line-height: 30px; margin: 6px 0 0 0 }
#blog .sub-cats li a { position: relative; display: block; padding: 0 1em; background: #f1f3f8; border-radius: 15px; transition: all 0.2s }
#blog .sub-cats li a:hover { box-shadow: 1px 1px 0 0 #577db7; left: -1px; top: -1px }
#blog .tags { margin: 4px 0 0 }
#blog .tags li { display: inline-block; float: none !important; width: auto !important; font-size: 10px; line-height: 24px; margin: 6px 2px 0 0 }
#blog .tags li a { display: block; padding: 0 1em 0 16px; background: url(https://www.recruit.co.jp/blog/assets/img/blog/ico_tag.png) 0 0 no-repeat; background-size: contain; transition: all 0.2s }
#blog .tags li a:hover { color: #2862ac; background-position: 2px 0 }
#blog .btn-more { width: 33.33%; margin: 20px auto 0 }
#blog .btn-more a { position: relative; display: block; font-size: 16ox; line-height: 40px; color: #fff; border-radius: 20px; background: #55656e; text-align: center; box-shadow: 1px 1px 0 0 #577db7; transition: all 0.2s }
#blog .btn-more a .plus { font-weight: bold; position: absolute; right: 1em; top: 50%; line-height: 1em; margin-top: -0.5em; }	
#blog .btn-more a:hover { transform: scale(1.04) }

#blog .archive-tit { padding: 0 0 30px }
#blog .archive-tit h2 { font-size: 32px; margin-bottom: 1em }
#blog .archive-tit h2 span { color: #2862ac }

#blog .lower-nav { border-top: solid 1px #b9cce4; margin-top: 80px }

#blog .blog-article {}
#blog .blog-article p { font-size: 16px; }
#blog .blog-article p.date { margin-bottom: 1em }
#blog .blog-article h1 { font-size: 32px; line-height: 1.3em; margin-bottom: 1em }
#blog .blog-article h2 { font-size: 27px; }
#blog .blog-article h3 { font-size: 24px; }
#blog .blog-article .blog-single__mv img { border-radius: 16px; overflow: hidden; box-shadow: 1px 1px 0 0 #577db7; }
#blog .blog-article .blog-single__mv figcaption { text-align: right; font-size: 12px }
#blog .blog-article .blog-scat-tags { padding: 0 0 40px }
#blog .blog-article .blog-single__lead h2 { font-size: 27px; line-height: 1.3em; font-weight: 500; font-style: normal }
#blog .blog-article .sb-profile h2 { font-size: 16px }
#blog .blog-article .sb-profile h3 { font-size: 16px }
#blog .blog-article .sb-profile__note { font-size: 12px }

#blog .new-articles { background: #edf2f8; padding: 4.4vw 0 }
#blog .new-articles .content-inner { padding-bottom: 0 }

a.blank-blue {
  padding-right: 0;
}
a.blank-blue::before {
  content: none;
}
a.blank-blue::after {
  content: "";
  display: inline-block;
  width: 2.8vw;
  height: 2.66667vw;
  margin: 0 0 0 1.4vw;
  background: url("https://www.recruit.co.jp/assets/img/common/icon_blank-blue.svg") left top/100% 100%;
}

@media (min-width: 768px) {
  a.blank-blue::after {
    width: 15px;
    height: 14px;
    margin: 0 0 0 10px;
  }
}

@media screen and (max-width: 768px){
	
	#blog { font-size: 13px; padding: 11.76vw 0; letter-spacing: 0.04em; line-height: 1.8em;  }
	#blog .b-tit { text-align: center; padding-bottom: 8.8vw }
	#blog .b-tit h2 { font-size: 18px; }
	
	#blog .content-inner { padding: 0 0 11.76vw }
	
	#blog .top-slide .top-slide-container { position: relative; width: 100%; height: 66.66vw; overflow-x: hidden; }
	#blog .top-slide ul { position: relative; left: 0; top: 0; width: 900%; margin-left: -200% }
	#blog .top-slide li { float: left; margin: 0; width: 11.11%; }
	#blog .top-slide li a { display: block; position: relative; border-radius: 12px; overflow: hidden }
	#blog .top-slide li a img { width: 100% }
	#blog .top-slide li a .sld-tit { width: 92%; min-height: 66px; position: absolute; left: 4%; bottom: -100px; background: #fff; border-radius: 8px 8px 0 0; }
	#blog .top-slide li a .sld-tit h3 { font-size: 14px; line-height: 1.6em; padding: 10px 10px 0 72px }
	#blog .top-slide li a .sld-tit h3 br { display: none }
	#blog .top-slide li a .sld-tit .date { position: absolute; left: 0; bottom: 0; width: 64px; height: 100%; padding-top: 10px; font-size: 12px; line-height: 1.6em; }
	#blog .top-slide li a .sld-tit .date span { display: block; font-size: 14px; font-weight: 550 }
	#blog .top-slide .prev { display: none }
	#blog .top-slide .next { display: none }
	#blog .top-slide .bullets { margin-top: 0 }
	#blog .top-slide .bullets img { width: 36px; cursor: pointer }
	
	#blog .blog-nav { padding: 10px }
	#blog .blog-nav .menu-cate { text-align: center; padding-bottom: 0 }
	#blog .blog-nav .menu-cate li { display: inline-block; padding: 4px; }
	#blog .blog-nav .menu-cate li a { display: block; width: 40vw; height: 11vw; text-align: center; line-height: 11vw; font-size: 14px; color: #fff; }
	#blog .blog-nav .menu-service, #blog .blog-nav .menu-tag { text-align: center; background: #f1f3f8; border-radius: 22px; box-shadow: 1px 1px 0 0 #577db7; margin-top: 10px }
	#blog .blog-nav .mn-tit { position: relative; width: 100%; line-height: 44px; padding: 0; text-align: center; cursor: pointer }
	#blog .blog-nav .mn-tit span { font-weight: bolder }
	#blog .blog-nav .mn-tit span.bl { color: #2862ac }
	#blog .blog-nav .mn-tit .arw { position: absolute; right: 20px; top: 50%; margin-top: -5px; width: 10px }
	#blog .blog-nav .mn-cont { padding: 0 1em 1em; text-align: left; display: none }
	#blog .blog-nav .mn-cont li { font-size: 12px }
	
	#blog .blog-index { padding: 20px }
	#blog .blog-index ul { margin: 0 }
	#blog .blog-index ul li { float: none; width: 100% }
	#blog .blog-index ul li .blog-idx { padding: 10px 0 }
	#blog .blog-index ul li .blog-idx .thumb { border-radius: 12px;  }
	#blog .blog-index ul li .blog-idx .date { font-size: 12px; }
	#blog .primary-cat { display: inline-block; font-size: 10px; line-height: 30px; margin: 10px 0 0 }
	#blog .sub-cats li { display: inline-block; float: none !important; width: auto !important; font-size: 10px; line-height: 28px; margin: 5px 0 0 0 }
	#blog .sub-cats li a { position: relative; display: block; padding: 0 1em; background: #f1f3f8; border-radius: 15px; transition: all 0.2s }
	#blog .sub-cats li a:hover { box-shadow: 1px 1px 0 0 #577db7; left: -1px; top: -1px }
	#blog .tags { margin: 4px 0 0 }
	#blog .tags li { display: inline-block; float: none !important; width: auto !important; font-size: 9px; line-height: 22px; margin: 5px 2px 0 0 }
	#blog .tags li a { display: block; padding: 0 1em 0 16px; background: url(https://www.recruit.co.jp/blog/assets/img/blog/ico_tag.png) 0 0 no-repeat; background-size: contain; transition: all 0.2s }
	#blog .tags li a:hover { color: #2862ac; background-position: 2px 0 }
	#blog .btn-more { width: 66.66%; margin: 10px auto 0 }
	#blog .btn-more a { font-size: 14ox; line-height: 40px; }
	
	#blog .archive-tit { padding: 0 20px }
	#blog .archive-tit h2 { font-size: 20px; }
	#blog .archive-tit h2 span { color: #2862ac }
	
	#blog .lower-nav { border-top: solid 1px #b9cce4; margin-top: 40px; padding-top: 10px }
	
	#blog .blog-article { padding: 0 20px }
	#blog .blog-article p.date { margin-bottom: 1em }
	#blog .blog-article h1 { font-size: 24px; }
	#blog .blog-article h2 { font-size: 20px; }
	#blog .blog-article h3 { font-size: 18px; }
	#blog .blog-article .blog-single__mv img { border-radius: 12px; margin: 0 -10px; width: calc(100% + 20px) }
	#blog .blog-article .blog-single__mv figcaption { text-align: left; font-size: 10px }
	#blog .blog-article .blog-scat-tags { padding: 6px 0 40px }
	#blog .blog-article .blog-single__lead h2 { font-size: 20px; }	
	
	#blog .new-articles { padding: 8.8vw 20px }
	
}

#blog .blog-article .single-body .sb-small {
    font-size: 12px;
    font-size: 1.2rem;
}

#blog .blog-article .single-body p.sb-note {
  font-size: 12px;
}

@media (min-width: 768px) {
.single-body .sb-note {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
    .sb-flex-wrap-spacebetween .sp-column_reverse {
        flex-direction: column-reverse;
        display: flex;
      }
}

sup.sup02{
    position: relative;
    font-size: 50%;
    line-height: 0;
    vertical-align: baseline;
    top:-0.8em;
}