@charset "UTF-8";

/*///////////////////
 index 
///////////////////*/
/* 共通 -------------------------*/
.box_inr {
  width: 980px;
  margin: 0 auto;}

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4;}

.navfix{
  margin-top: 80px;}

a.link_style:hover {
  opacity:0.8;
  filter:alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";}

/* テキスト -------------------------*/
.fc_red {
  color: #F00;}

.t_bold {
  font-weight: bold;}

/* グローバルナビ -------------------------*/
.gnav_area {
  max-height: 80px;
  background: #000000;
  color: #ffffff;}

.gnav_area a {
  color: #ffffff;}

.gnav_area .box_gnav li {
  float: left;
  font-size: 15px;
  text-align: center;}

.gnav_area .box_gnav li span {
  font-size: 12px;}

.gnav_area .box_gnav a {
  display: block;
  width: 196px;
  padding: 14px 4px;
  box-sizing: border-box;}

.gnav_area .box_gnav a:hover {
  background: #c4494e;}

.gnav_area .box_gnav .nav_act {
  background: #c4494e;}

/* メインヴィジュアル -------------------------*/
.box_mv_001 {
  width: 100%;
  margin-top: 80px;
  background: url(../images/index/index_mv_001.jpg) fixed 50% no-repeat;
  background-size: cover;}

.box_mv_001 .mv_bg_001 {
  width: 100%;
  background: url(../images/index/index_mv_bg01.png) no-repeat left 0;}

.box_mv_001 .mv_bg_002 {
  width: 100%;
  background: url(../images/index/index_mv_bg02.png) no-repeat right bottom;}

.box_mv_001 .box_inr {
  position: relative;
  padding: 97px 0 42px 0;}

.box_mv_001 .box_text_001 p {
  margin-top: 58px;}

.box_mv_001 .box_inr .cap_icon {
  position: absolute;
  right: -34px;
  bottom: 35px;}

/* コンテンツ -------------------------*/
.section {
  margin-bottom: 0;
  padding: 0;}

#content_area .section.recruit {
  background: #c4494e;
  color: #ffffff;}

.section .box_inr { padding: 70px 0 50px 0;}

.section .box_head_001 { text-align: center;}

.section .box_head_001 .sub_ttl {
  display: block;
  margin-top: 20px;
  font-size: 18px;}

.section .box_head_001 .lead_txt {
  margin-top: 50px;
  font-size: 16px;}

/* 北海道エリア特徴 */
.features {
  background: #eeeeee url(../images/index/index_bg_001.png) no-repeat left 0;}

.features .section_bg{
  background: url(../images/index/index_bg_002.png) no-repeat right bottom;}

/* 沿革 */
.history { background: #dedddd url(../images/index/index_bg_003.png) no-repeat right 0;}

.history .section_bg { background: url(../images/index/index_bg_006.png) no-repeat left bottom;}

.history .section_bg_img01 { background: url(../images/index/index_bg_004.png) no-repeat right 100px top 0;}

.history .section_bg_img02 { background: url(../images/index/index_bg_005.png) no-repeat left 14.28571% top 0;}

/* 拠点マップ */
.basemap { background: #ffffff;}

/* 働きやすさ */
.work {background: #eee;}

.work .section_bg001 { background: url(../images/index/index_bg_007.png) no-repeat left top;}

.work .section_bg002 { background: url(../images/index/index_bg_008.png) no-repeat right top;}

.work .section_bg003 { background: url(../images/index/index_bg_009.png) no-repeat left bottom;}

.work .section_bg004 { background: url(../images/index/index_bg_010.png) no-repeat right 0 bottom 50px;}

/* 3カラム -------------------------*/
.column_area .item_column p {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.4;}

.column_area .column_ttl { text-align: center;}

.column_area .column_ttl .ttl_inr { font-size: 20px;}

.column_area .sub_txt { font-size: 14px;}

.box_3column_001 { margin-top: 30px;}

.box_3column_001 .column_inr { margin: 0 0 0 -40px;}

.box_3column_001 .item_column {
  float: left;
  width: 299px;
  margin: 20px 0 0 40px;
  padding: 153px 24px 26px;
}

.box_3column_001 .item_column p { margin-top: 20px;}

.box_3column_001 .item_column.cc { background: #ffffff url(../images/index/index_img_002.jpg) no-repeat top center;}

.box_3column_001 .item_column.bpo { background: #ffffff url(../images/index/index_img_003.jpg) no-repeat top center}

.box_3column_001 .item_column.dm { background: #ffffff url(../images/index/index_img_004.jpg) no-repeat top center;}

.box_3column_001 .column_ttl .ttl_inr {
  display: block;
  margin-top: 23px;}

.box_3column_002 .column_inr { margin: 0 0 0 -40px;}

.box_3column_002 .item_column {
  float: left;
  width: 299px;
  margin: 40px 0 0 40px;
  padding: 25px 20px;
  background: #ffffff;
}

.box_3column_002 .item_column p { margin-top: 15px;}

.box_3column_002 .column_ttl .ttl_icon {
  display: block;
  margin-bottom: 15px;}

.box_3column_002 .column_ttl .ttl_inr {
  display: table-cell;
  width: 259px;
  line-height: 1.4;
  vertical-align: middle;}

/* スライダー -------------------------*/
.l-visuals {
  padding-bottom: 50px;
  background: url(../images/index/index_slide_bg01.png) repeat-x left 0 top 17%;
}

.slider-wrap{
  max-width: 980px;
  margin: 0 auto;
}

/* マップ -------------------------*/
.box_map_001 { background: url(../images/index/index_map_bg01.png) no-repeat center 0;}

.box_map_001 .map_img {
  position: relative;
  width: 980px;
  margin: 0 auto;}

.box_map_001 .map_area span {
  position: absolute;
  display: block;}

.box_map_001 .map_area .text {
  background-color: #fff;
  width: 200px;
  padding: 9px;
  box-shadow:0px 0px 9px 1px #9c9c9c;
  -webkit-box-shadow:0px 0px 9px 1px #9c9c9c;
  text-align: center;
  line-height: 1.4;}

.box_map_001 .map_area .text:before {
  display: block;
  content: "";
 
  /* borderとwidthで三角形を作る */
  border-color: transparent transparent #fff #fff;
  border-width: 6px;
  border-style: solid;
  width: 0;}

.box_map_001 .map_area .text.arw_left:before {
  /* 回転して▼にする */
  -webkit-transform:rotate(45deg);
 
  /* ▼の位置を右部に表示調整 */
  position: absolute;
  left: -1px;
  top: 50%;
  margin: -6px 0 0 -5px;
 
  /* ▼に影をつける */
  -webkit-box-shadow: 1px 1px 0 #fff, 0px 2px 5px #9c9c9c;}

.box_map_001 .map_area .text.arw_right:before {
  /* 回転して▼にする */
  -webkit-transform:rotate(-135deg);
 
  /* ▼の位置を右部に表示調整 */
  position: absolute;
  right: -6px;
  top: 50%;
  margin: -6px 0 0 0;
 
  /* ▼に影をつける */
  -webkit-box-shadow: 1px 1px 0 #fff, 0px 2px 5px #9c9c9c;}

.box_map_001 .map_area .text:after {
  display: block;
  content: "";
  
  /* ■を作って見せたくない影を塗りつぶす */
  height: 16px;
  width: 20px;
  background-color: #fffaee;}

.box_map_001 .map_area .text.arw_left:after {
  /* ▼を左側に */
  position: absolute;
  top: 50%;
  left: 10%;
  bottom: 0;
  margin: -7px 0px 0 -20px;}

.box_map_001 .map_area .text.arw_right:after {
  /* ▼を右側に */
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  margin: -9px 0px 0 -20px;}

.box_map_001 .map_area .text > span {
  position: relative;
  z-index: 1;
  background-color: #fffaee;
  color: #333;}

.box_map_001 .map01 .icon { top: 35px; right: 410px;}
.box_map_001 .map01 .text { top: 32px; left: 583px;}

.box_map_001 .map02 .icon { top: 217px; right: 479px;}
.box_map_001 .map02 .text { top: 217px; left: 516px;}

.box_map_001 .map03 .icon { top: 274px; right: 466px;}
.box_map_001 .map03 .text { top: 251px; left: 262px;}

.box_map_001 .map04 .icon { top: 353px; right: 431px;}
.box_map_001 .map04 .text { top: 332px; left: 563px;}

.box_map_001 .map05 .icon { top: 383px; right: 464px;}
.box_map_001 .map05 .text { top: 368px; left: 262px;}

.box_map_001 .map06 .icon { top: 406px; right: 372px;}
.box_map_001 .map06 .text { top: 404px; left: 622px;}

/* モーダル -------------------------*/
#lean_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  display: none;}

.modal-content {
  position: relative;
  display: none;
  width: 790px;
  padding: 45px 30px;
  background-color: #FFFFFF;
  text-align: left;}

.modal_close {
  position: absolute;
  top: 20px;
  right: 36px;
  display: block;
  width: 16px;
  height: 16px;
  z-index: 2;
  cursor: pointer;}

.modal_close img {
  display: block;}

.modal-content .modal_ttl01 {
  padding-bottom: 20px;
  border-bottom: 2px solid #c9c9c9;
  font-size: 20px;}

.modal-content .detail_list {
  margin-top: 20px;
  font-size: 16px;}

.modal-content .detail_list dt {
  float: left;}

.modal-content .detail_list dd {
  overflow: hidden;
  display: block;
  margin-bottom: 10px;}

.modal-content .detail_list dd:last-child {
  margin-bottom: 0;}

.modal_2column .column_inr {
  margin: 0 0 0 -20px;}

.modal_2column .column_inr li {
  float: left;
  width: 350px;
  margin: 15px 0 0 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1;}

.modal_2column .column_inr li span {
  display: inline-block;
  margin-top: 15px;}

.modal_2column .column_inr li.cap_center {
  width: 100%;}

.modal-content .text_block,
.modal-content .text_block p+p{
  margin-top: 30px;}

/* バナー -------------------------*/
.box_bnr_001 { margin-top: 40px;}

.box_bnr_001 .bnr_inr {
  margin-top: 20px;
  background: #fff;}

.box_bnr_001 a:hover { opacity: 0.9;}

/* アコーディオン -------------------------*/
.accordion_block { margin-top: 30px;}

.l-acd-wrap { margin-top: 30px;}

.l-acd-wrap .acd-heading {
  width: 100%;
  position: relative;
  background:#fff;
  box-sizing: border-box;}

.l-acd-wrap .head-ttl {
  display: table;
  width: 100%;
  padding: 18px 20px;
  color: #000;
  font-size: 20px;
  cursor: pointer;}

.l-acd-wrap .head-ttl:before {
  content: '';
  display: table-cell;
  width: 50px;
  height: 50px;}

.l-acd-wrap .head-ttl.head-icon01:before { background: url(../images/index/acd_icon_001.png) no-repeat 0 center;}

.l-acd-wrap .head-ttl.head-icon02:before { background: url(../images/index/acd_icon_002.png) no-repeat 0 center;}

.l-acd-wrap .head-ttl.head-icon03:before { background: url(../images/index/acd_icon_003.png) no-repeat 0 center;}

.l-acd-wrap .head-ttl.head-icon04:before {
  width: 110px;
  background: url(../images/index/acd_icon_004.png) no-repeat 0 center;}

.l-acd-wrap .head-ttl .inr-txt {
  display: table-cell;
  padding-left: 30px;
  vertical-align: middle;}

.acd-heading .head-ttl:after{
  content: '';
  display: table-cell;
  width: 28px;
  height: 17px;
  background: url(../images/index/index_acd_icon01.png) no-repeat 0 center;
  vertical-align: middle;}

.acd-heading .head-ttl.is-open img{ display: none;}

.acd-heading .head-ttl.is-open:after{
  content: '';
  display: table-cell;
  width: 3%;
  height: 17px;
  background: url(../images/index/index_acd_icon02.png) no-repeat 0 center;}

.l-acd-wrap .acd-inr-box {
  display: none;
  padding: 25px 30px;
  background: #eeeeee;
  border-top: 2px solid #d2d2d2;
  color: #333333;
  box-sizing: border-box;}

.l-acd-wrap .acd-heading .info_btn {
  position: absolute;
  top: 26px;
  right: 98px;}

.l-acd-wrap .acd-heading .info_btn a {
  display: block;
  padding: 3px 44px 3px 10px;
  background: #c4494e url(../images/index/index_arrow_001.png) no-repeat 90% center;
  color: #fff;
  font-size: 18px;}

.l-acd-wrap .acd-heading .info_btn a:hover {
  opacity:0.8;
  filter:alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";}

/* プライバシー -------------------------*/
.box_mark_001 { padding: 22px 0;}

.box_mark_001 a {
  display: block;
  margin: 0 auto;
  width: 75px;
  height: 75px;}

/* トップへ戻る -------------------------*/
#pageTop {
  position: fixed;
  display: none;
  bottom: 20px;
  right: 20px;
  z-index: 3;}

#pageTop a { display: block;}

#pageTop a:hover {
  opacity:0.7;
  filter:alpha(opacity=70);
  -ms-filter: "alpha( opacity=70 )";}


@media screen and (max-width: 769px) {
  /* 共通 -------------------------*/
  .box_inr {
    width: 100%;}
  
  .fixed {
    //position: static;}
  
  .navfix{
    margin-top: 0px;}
  
  
  /* グローバルナビ -------------------------*/
  .gnav_area {
    max-height: 100%;}
  
  .gnav_area .box_inr {
    width: 100%;}
  
  .gnav_area .box_gnav li {
    width: 100%;
    font-size: 11px;
    text-align: center;}
  
  .gnav_area .box_gnav li+li {
    border-top: 1px solid #fff;}
  
  .gnav_area .box_gnav li span {
    display: inline-block;
    font-size: 10px;}
  
  .gnav_area .box_gnav a {
    width: 100%;
    padding: 12px 4px;
    box-sizing: border-box;}
  
  /* メインヴィジュアル -------------------------*/
  .box_mv_001 {
    margin-top: 0;
    background: url(../images/index/sp/sp_mv_001.jpg) no-repeat center center;
    background-size: cover;}
  
  .box_mv_001 .mv_bg_001,
  .box_mv_001 .mv_bg_002 {
    background-size: 24.0625%;}
  
  .box_mv_001 .box_inr {
    width: 100%;
    max-width: 414px;
    padding: 18px 10px 24px;}
  
  .box_mv_001 .box_text_001 p {
    margin-top: 19px;}
  
  .box_mv_001 .box_text_001 h2 img {
    width: 83.75%;}
  
  .box_mv_001 .box_text_001 p img {
    position: relative;
    width: 90.625%;
    z-index: 2;}
  
  .box_mv_001 .box_inr .cap_icon {
/*    width: 49.6875%;*/
    width: 40.6875%;
    right: 2.34375%;
/*    bottom: 27.1875%;*/
    bottom: 5%;
    z-index: 2;}
  
  
  /* コンテンツ -------------------------*/
  .section .box_inr {
    max-width: 414px;
    padding: 35px 10px 30px;}
  
  .section .box_head_001 .sub_ttl {
    margin-top: 11px;
    font-size: 12px;}
  
  .section .box_head_001 .lead_txt {
    margin-top: 27px;
    font-size: 12px;}
  
  /* 北海道エリア特徴 */
  .features {
    background-position: left -194px top 0;}
  
  .features .section_bg{
     background-size: 27.1875%;}
  
   /* 沿革 */
  .history {
     background-size: 27.1875%;}
  
  .history .section_bg {
    background-size: 24.53125%;}
  
  .history .section_bg_img01 {
    background-size: 32.03125%;
    background-position: right -20px top 0;}
  
  .history .section_bg_img02 {
    background-size: 32.03125%;
    background-position: left -18px top 0;}
  
  .history .head_ttl_001 img {
    width: 24.53125%;}
   
   /* 拠点マップ */
  .basemap .head_ttl_001 img {
    width: 40.625%;}
  
  /* 働きやすさ */
  .work .head_ttl_001 img {
    width: 55.3125%;}
  
  .work .section_bg001 {
    background-size: 17.65625%}
  
  .work .section_bg002 {
    background-size: 20.625%}
  
  .work .section_bg003 {
    background-size: 31.25%;}
  
  .work .section_bg004 {
    background-size: 26.25%;}
  
  /* 採用情報 */
  .recruit .head_ttl_001 img {
    width: 47.5%;}
  
  
  /* 3カラム -------------------------*/
  .column_area .sub_txt { font-size: 10px;}
  
  .box_3column_001 {
    margin-top: 7px;}
    
  .box_3column_001 .column_inr {
    margin: 0;}
    
  .box_3column_001 .item_column {
    float: none;
    width: 100%;
    margin: 20px 0 0 0;
    padding: 24.66666% 14px 15px;}
    
  .box_3column_001 .column_ttl .ttl_icon img {
    width: 13.33333%;}
  
  .box_3column_001 .item_column p {
    margin-top: 13px;
    font-size: 12px;}
  
  .box_3column_001 .item_column.cc {
    background: #fff url(../images/index/sp/sp_img_001.jpg) no-repeat top center;
    background-size: 100%;}
  
  .box_3column_001 .item_column.bpo {
    background: #fff url(../images/index/sp/sp_img_002.jpg) no-repeat top center;
    background-size: 100%;}
  
  .box_3column_001 .item_column.dm {
    background: #fff url(../images/index/sp/sp_img_003.jpg) no-repeat top center;
    background-size: 100%;}
  
  .box_3column_001 .column_ttl .ttl_inr {
    margin-top: 12px;
    font-size: 13px;}
  
  .box_3column_002 .column_inr {
    margin: 0 0 0 -5%;}
  
  .box_3column_002 .item_column {
    width: 45%;
    margin: 5% 0 0 5%;
    padding: 13px 6px;
    background: #ffffff;}
  
  .box_3column_002 .item_column p {
    margin-top: 8px;
    font-size: 12px;}
  
  .box_3column_002 .column_ttl .ttl_icon {
    display: block;
    width: 45%;
    margin: 0 auto;}
  
  .box_3column_002 .column_ttl .ttl_inr {
    display: block;
    width: 100%;
    margin-top: 13px;
    font-size: 12px;}
  
  .box_3column_002 .sp_inline{
    display: inline-block;}
  
  
  /* スライダー -------------------------*/
  .l-visuals {
    padding-bottom: 30px;
    background-position: left 0 top 16%;
    background-size: 100% 4px;}
  
  .slider-wrap{
    max-width: 414px;
    padding: 0 10px;}
  
  /* マップ -------------------------*/
  .box_map_001 {
    width: 100%;
    background: url(../images/index/sp/sp_mapbg_001.png) no-repeat center 0;
    background-size: cover;}
  
  .box_map_001 .map_img {
    width: 100%;
    max-width: 414px;}
  
  .box_map_001 .map_area .icon {
    width: 5.46875%;}
  
  .box_map_001 .map_area .text {
    background-color: #fff;
    width: 29.375%;
    padding: 1.25%;}
  
  .box_map_001 .map_area .text > span {
    font-size: 12px;
    line-height: 1.2;}
  
  .box_map_001 .map_area .text.arw_left:after {
    left: 12%;
    margin: -7px 0px 0 -11.4754%;}
  
  .box_map_001 .map01 .icon { top: 10.5%; right: 43.125%;}
  .box_map_001 .map01 .text { top: 7.25%; left: 59.375%;}
  
  .box_map_001 .map02 .icon { top: 44.5625%; right: 54.6875%;}
  .box_map_001 .map02 .text { top: 40.96875%; left: 49.0625%;}
  
  .box_map_001 .map03 .icon { top: 54.6875%; right: 51.8125%;}
  .box_map_001 .map03 .text { top: 50%; left: 9.1875%;}
  
  .box_map_001 .map04 .icon { top: 69.1875%; right: 46.25%;}
  .box_map_001 .map04 .text { top: 60.9375%; left: 57.1875%;}
  
  .box_map_001 .map05 .icon { top: 74.5%; right: 51.5625%;}
  .box_map_001 .map05 .text { top: 75%; left: 10.9375%;}
  
  .box_map_001 .map06 .icon { top: 78.8125%; right: 37.1875%;}
  .box_map_001 .map06 .text { top: 80.3125%; left: 65.625%;}
  
  /* モーダル -------------------------*/
  .modal-content{
    width: 93.75%;
    padding: 24px 15px;}
  
  .modal_close {
    top: 0.8%;
    right: 2.66666%;}
  
  .modal-content .modal_ttl01 {
    padding-bottom: 15px;
    border-bottom: 1px solid #c9c9c9;
    font-size: 15px;}
  
  .modal-content{
    width: 93.75%;
    padding: 24px 15px;}
  
  .modal-content .close_btn a {
    top: -17px;
    right: 0;}
  
  .modal-content .modal_ttl01 {
    padding-bottom: 15px;
    border-bottom: 1px solid #c9c9c9;
    font-size: 15px;}
  
  .modal-content .detail_list {
    margin-top: 15px;
    font-size: 13px;}
  
  .modal_2column .column_inr {
    margin: 0 0 0 0;}
  
  .modal_2column .column_inr li {
    float: none;
    width: 100%;
    margin: 14px 0 0 0;
    font-size: 13px;}
  
  .modal_2column .column_inr li.sp_mt00 {
    margin-top: 0;}
  
  .modal_2column .column_inr li img {
    display: block;
    width: 54.6875%;
    margin: 0 auto;}
  
  .modal-content .text_block {
    margin-top: 25px;}
  
  .modal-content .text_block p+p{
    margin-top: 15px;}
  
  /* バナー -------------------------*/
  .box_bnr_001 {
    margin-top: 25px;}
  
  /* アコーディオン -------------------------*/
  .accordion_block { margin-top: 25px;}
  
  .l-acd-wrap { margin-top: 10px;}
  
  .l-acd-wrap .head-ttl {
    padding: 10px;
    font-size: 12px;}
  
  .l-acd-wrap .head-ttl:before {
    width: 25px;
    height: 25px;}
  
  .l-acd-wrap .head-ttl.head-icon01:before { background-size: 25px;}
  
  .l-acd-wrap .head-ttl.head-icon02:before { background-size: 25px;}
  
  .l-acd-wrap .head-ttl.head-icon03:before { background-size: 25px;}
  
  .l-acd-wrap .head-ttl.head-icon04:before {
    width: 53px;
    background-size: 53px;}
  
  .l-acd-wrap .head-ttl .inr-txt {
    padding: 0 30% 0 1.875%;
    line-height: 1.2;}
    
  .l-acd-wrap .head-ttl .sp-inline {
    display: inline-block;}
  
  .acd-heading .head-ttl:after,
  .acd-heading .head-ttl.is-open:after{
    width: 14px;
    height: 8px;
    background-size: 14px;}
  
  .l-acd-wrap .acd-inr-box {
    padding: 13px 14px;
    border-top: 1px solid #d2d2d2;
    font-size: 12px;}
  
  .l-acd-wrap .acd-inr-box li { line-height: 1.35;}
  
  .l-acd-wrap .acd-heading .info_btn {
    top: 18%;
    right: 10%;}
  
  .l-acd-wrap .acd-heading .info_btn a {
    padding: 4px 20px 4px 4px;
    background-position: 94% center;
    background-size: 12px;
    font-size: 12px;}
  
  /* プライバシー -------------------------*/
  .box_mark_001 {
    padding: 15px 0;}
    
  /* トップへ戻る -------------------------*/
  #pageTop {
    width: 16.5625%;
    bottom: 10px;
    right: 10px;}
}

/* .scrollfixed_nav
**************************/
.scrollfixed_nav{
	position: absolute;
	width: 100%;
	z-index: 50;
}

.scrollfixed_nav.is_active{
	position: fixed;
	top: 0;
}