@charset "UTF-8";
/* 導入事例 */
.post-template-default #main_contents a { color: #0099cc;}
.post-template-default #main_contents .btn-base { display: block; width: 80%; max-width: 300px; height: 60px; margin: auto; line-height: 60px; text-align: center;}
.post-template-default #main_contents .b-radius6 { border-radius: 6px;}
.post-template-default #main_contents .b-radius100 { border-radius: 100%;}
.post-template-default #main_contents .bgc01 { background: #0099cc;}
.post-template-default #main_contents .bgc02 { background: #000;}
.post-template-default #main_contents .bgc03 { background: #CC0047;}
.post-template-default #main_contents .bgc04 { background: #99CC00;}
.post-template-default #main_contents .fontc-w { color: #fff;}
.post-template-default #main_contents .fontc-b { color: #000;}
/* レコメンド・ご利用のサービス（style.cssに追加すべきもの） */
.service-area .spot-baitoru li.spot-baitoru { display: block;}

.column-case-study .h-design01 { margin-bottom: 50px; text-align: center;}
.column-case-study .h-design02 { color: #0099cc;}
.column-case-study .company-logo img { width: 160px!important;}
@media only screen and (max-width: 767px) {
.column-case-study .company-logo { width: 100%; text-align: center;}
.column-case-study .company-logo img { margin-bottom: 30px;}
}
@media print, (min-width: 768px) { 
  .column-case-study .logo-area-add { display: flex; justify-content: flex-start;}
  .column-case-study .logo-area-add .box-right {  margin-left: 50px;}
}
.column-case-study .dl-company { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.column-case-study .dl-company dt { width: 20%;}
.column-case-study .dl-company dd { width: 80%;}
.column-case-study .dl-success { padding: 20px; text-align: left; border: 2px solid #e4e4e4;}
.column-case-study .dl-success dt span { padding: 3px 20px; color:#fff; background: #0099cc;  border-radius: 3px;}

.design-change.spot { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); padding: 20px 0 60px; background: #ffd555}
#main-single .box-company { clear: both; width: 100%; margin: 50px 0; padding: 20px; background: #f6f6f6; border-radius: 6px;}
.design-change.spot .inr { width: 100%; max-width: 1030px; padding: 0 20px; margin: auto}
#main-single .design-change.spot .box-company { margin-bottom: 30px; padding: 20px; background: #fff!important; border-radius: 12px}
#main-single .design-change.spot .post_content { padding: 20px; background: #fff; border-radius: 12px}
.design-change.spot h3.wp-block-heading { padding-left: 0!important; border-left: 0!important; padding-bottom: 15px; border-bottom: 3px solid #ffc000!important}

@media (min-width: 768px) { 
}
/* ----------------------------------------------------------------------
 single「recruitment」
---------------------------------------------------------------------- */
#main-vis.recruitment .bg_key-vis { position: relative; height: 200px; z-index: 1}
#main-vis.recruitment .bg_key-vis img { position: absolute; width: 100%; height: 200px; object-fit: cover; z-index: 2}
#main-vis.recruitment .recruitment-ttl { position: absolute; top:0; left: 0; width: 100%; height: calc(100% - 29px); z-index: 3; background: rgba(0,0,0,.5)}
#main-vis.recruitment .recruitment-ttl h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1030px; margin-top: 30px; padding: 0 20px; color: #fff; font-size: 20px; line-height: 1.5; font-weight: bold}
@media screen and (min-width: 768px) {
  #main-vis.recruitment .bg_key-vis { height: 400px}
  #main-vis.recruitment .bg_key-vis img { margin-top: -10px; height: 410px}
  #main-vis.recruitment .recruitment-ttl h1 { font-size: 30px}
}
.recruitment .post_content a { color: #c1625f!important; text-decoration: underline}
.recruitment .post_content sup { font-size: 10px}
.recruitment h2.wp-block-heading { text-align: center; margin-bottom: 30px}
.recruitment h3.wp-block-heading { padding: 5px 0 5px 15px;  color: #333; border-left: 5px solid #df8e8c;}
.recruitment h4.wp-block-heading { margin-bottom: 20px; color: #333}
.recruitment .wp-block-columns .wp-block-column { margin-bottom: 50px}
.recruitment h2.wp-block-heading + figure, .recruitment h3.wp-block-heading + figure { margin: 30px 0}
.recruitment h3.wp-block-heading + .wp-block-media-text { margin: 30px 0}
.recruitment .wp-block-columns-is-layout-flex { padding: 20px 20px 0; border: 2px solid #ddd; border-radius: 12px}
.recruitment .wp-block-column-is-layout-flow { margin-bottom: 30px!important}
.recruitment .wp-element-caption { margin-top: 20px; font-size: 12px}
.recruitment .box-index-top { margin-bottom: 50px}
.recruitment .box-index-top img { max-width: 150px; height: auto; margin-right: 30px}
.recruitment .btn.baitoru, .recruitment .btn.next { width: 330px; margin: auto; font-size: 13px; text-align: center; font-weight: 500}
.recruitment .btn a { color: #333!important; text-decoration: none}
.recruitment .btn a span { position: relative; display: flex; justify-content: center; align-items: center; height: 55px; margin: 6px 0; color: #fff; font-size: 18px; font-weight: bold; border-radius: 55px}
.recruitment .btn a span::after { content: ""; position: absolute; top: 50%; right: 30px; width: 13px; height: 13px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg) translateY(-50%)}
.recruitment .btn.baitoru a span { background: #d62C29}
.recruitment .btn.next a span { background: #214e9c}
@media only screen and (max-width: 767px) {
  .recruitment .box-index-top .box-image { text-align: center}
  .recruitment .box-index-top img { margin: 0 auto 20px}
  .recruitment .wp-block-media-text__content { margin: 30px 0 60px; padding: 0!important}
}
@media screen and (min-width: 768px) {
  .recruitment h2.wp-block-heading { font-size: 26px}
  .recruitment .wp-block-columns-is-layout-flex { margin: 30px 0 80px!important; padding: 10px 5% 0}
  .recruitment .box-index-top { display: flex; justify-content: space-between}
  .recruitment .box-index-top figure { display: flex; align-items: center}
  .recruitment .box-index-top img { max-width: 180px}
  .recruitment .box-index-top .box-text { width: 100%}
  .recruitment .box-index-top .box-text p { margin-bottom: 10px!important; font-size: 14px}
  .recruitment .box-index-top .box-text p:last-of-type { margin-bottom: 0!important}
}
/* ----------------------------------------------------------------------
 single「emp-column」「column」
---------------------------------------------------------------------- */
cite { display: block; width: 100%; margin: 10px auto 50px; font-size: 12px; text-align: right; font-style: normal; line-height: 1.5;}
.ul-tag, .tag-list { position:relative; margin: 10px 0 30px!important; color: #0099cc; font-size: 13px; line-height: 1.5;}
.ul-tag li { padding-left: 20px; color: #0099cc!important;}
.ul-tag li:before, .tag-list a:before  { font-family:'design_plus'; color:#0099cc; font-size:15px; line-height:1; position: absolute; top: 3px; left: 0;}
.ul-tag li.post_category:before { content:'\e92f';}
.ul-tag li.post_tag:before, .tag-list a:before { content:'\e935';}
.tag-list { padding-left: 20px; font-size: 14px;}
.tag-list a { padding-left: 3px; color: #666!important;}
.tag-list a:hover { color: #ed2c00!important;}
@media print, (min-width: 768px) { 
  .tag-list { font-size: 16px;}
  .tag-list a:before { top: 5px; font-size: 16px;}
}