@charset "utf-8";
/* Job list CSS Document */
.prefectures-link ul{
  display: flex;
  gap:10px;
  flex-wrap: wrap;
}
.prefectures-link ul li a{
  display: inline-block;
  height:35px;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  border:1px solid #2E86C1;
  padding:0px 15px;
    
}
.prefectures-link ul li a:hover{
  background:#2E86C1;
  color:#fff;
}
/* 初期は200pxでクランプしてグラデを被せる */
.view-id-builjob_city_list .view-content .clamp-200 {
  max-height: 120px;
  overflow: hidden;
  position: relative;
  transition: max-height .25s ease;
}
.view-id-builjob_city_list .view-content .clamp-200::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  /* 背景色はサイトの背景に合わせて調整 */
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
  pointer-events: none;
}
/* 展開時 */
.view-id-builjob_city_list .is-open .clamp-200 {
  max-height: 9999px; /* アニメ用に none ではなく大きめ数値 */
  overflow: visible;
}
.view-id-builjob_city_list .is-open .clamp-200::after { display: none; }

/* ボタン（お好みで） */
.prefectures-toggle {
  margin-top: .5rem;
  display: inline-block;
  padding: .5rem .9rem;
  border: 1px solid #ccc;
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
}
.prefectures-toggle {
  display: block;        /* 行全体を使う */
  margin: 12px auto 0;   /* 左右 auto で中央寄せ */
}

/****求人検索 views ヘッダー****/
.path-job .view-joblist .view-header{
	position: relative;
  display: flex;
  gap:10px;
}
.path-job .view-joblist .view-header .totalcnt{
  position: absolute;
  bottom:0px;
}
.path-job .view-joblist .view-header .pagecnt{
	margin-left:10px;
}
.sort-link {
  display: flex;
  gap:10px;
  margin-left:auto;
}
.sort-link a{
  display: inline-block;
  height:30px;
  line-height: 30px;
  padding:0px 15px;
  border-radius: 5px;
  background:#FCF3CF;
  color:#D4AC0D;
}
.sort-link a:hover{
  opacity: 0.8;
}
.sort-link a.active{
  font-weight: 600;
}


.path-job main{
  padding-bottom:20px;
}
.path-job main .b-column > .grid{
  overflow: inherit
}
.node.node--type-job.node--view-mode-list{
	position: relative;
	border-top:2px solid #5499C7;
	padding:10px 20px;
	margin-top: 15px;
	background:#fff;
  border-radius: 5px;
  box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}
.node.node--type-job.node--view-mode-list:hover{
  background:#F5FBFF;
}
.block.block-layout-builder.block-field-blocknodejobfield-job-pickup,
.block.block-layout-builder.block-field-blocknodejobfield-job-kyubo{
	display: inline-block;
}
.node.node--type-job.node--view-mode-list .field--name-field-job-location-name{
  font-weight: 600;
  font-size:1.5rem;
  margin-bottom:8px;
  color: var(--h1-color);
}
.node.node--type-job.node--view-mode-list .job-list-title {
  font-weight: 600;
  font-size:1.8rem;
  margin-bottom:8px;
  color: var(--h1-color);
}
.node.node--type-job.node--view-mode-list .field--name-field-job-employment-type {
  margin-bottom:8px;
  line-height: 25px;
  height:25px;
  border:1px solid #3498DB;
  color:#fff;
  background:#3498DB;
  border-radius: 5px;
  text-align: center;
  padding:0px 15px;
  display: inline-block;
  font-size:1.1rem;
}
.node.node--type-job.node--view-mode-list .field--name-field-job-employment-type.employment-2{
  border:1px solid #D4AC0D;
  color:#fff;
  background:#D4AC0D;
}
.node.node--type-job.node--view-mode-list .field--name-field-job-description {
  color: var(--text-color);
  margin-bottom:12px;
  padding:10px;
  background:#F5FBFF;
  line-height: 160%;
  border-top:1px solid #fff;
  font-size:15px;
}

.node.node--type-job.node--view-mode-list .layout__region--second .block{
	margin-bottom:1rem;
}
.node--type-job.node--view-mode-list .field--type-image a img{
	width:100%;
	height: auto;
	object-fit: cover;
}

.node--type-job.node--view-mode-list  {
  line-height: 1.2;
  margin-bottom: 2rem;
}
.node--type-job.node--view-mode-list  .field--name-field-job-message {
  padding: 1.5rem 2rem;
  background-color: #fafafa;
}

.node--type-job.node--view-mode-list h2,
.node--type-job.node--view-mode-list .block-field-blocknodejobtitle a{
	color:var(--h1-color);
	font-size:2.1rem;
	font-weight: 600;
  margin-bottom:10px;
  display: block;
}
.node--type-job.node--view-mode-list .layout--twocol-section {
	flex-wrap: nowrap;
  margin-top: 1rem;
}
.node--type-job.node--view-mode-list .layout--twocol-section .layout__region.layout__region--first{
	/* padding-right:40px; */
  padding-right: 2rem;
}
.node--type-job.node--view-mode-list .layout.layout--onecol .layout__region.layout__region--content .field .field__label{
	font-weight:600;
	white-space: nowrap;
	color:var(--first-color);
}
.node--type-job.node--view-mode-list .layout.layout--onecol .layout__region.layout__region--content .block{
  margin-bottom:10px;
  font-size:1.5rem;
  line-height: 180%;
}
.node--type-job.node--view-mode-list .layout.layout--onecol .layout__region.layout__region--content .block .field__item p{
  margin-top:0px;
  line-height: 180%;
  font-size:1.5rem;
}
.node--type-job.node--view-mode-list .layout.layout--onecol .layout__region.layout__region--content .block .field--name-field-job-location-name {
  font-size:1.6rem;
  font-weight: 600;
}
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-occupation .field ,
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-description .field ,
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-employment-type .field ,
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-salary-text .field {
	display:flex;
	flex-wrap: nowrap;
  gap:20px;
}
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-occupation .field .field__label,
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-description .field .field__label,
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-employment-type .field .field__label,
.node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-salary-text .field .field__label{
	min-width:60px;
}

.node--type-job.node--view-mode-list .layout__region--content {
  position: static;
}
.node--type-job.node--view-mode-list .block-extra-field-blocknodejobflag-flag-job .flag a {
  position: absolute;
  top: 10px;
  right: 15px;
}
.node--type-job.node--view-mode-list .flex {
  display: flex;
  gap:10px;
}
.view-empty .alert.alert-success {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  color: #000;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
h4.alert-heading {
  margin-top:0px;
  margin-bottom: 20px;
}
.view-empty .alert.alert-success p{
  margin:0px;
}
/***** 検索フォーム*****/
.layout-sidebar-first .block-views-exposed-filter-blockjoblist-page-job-search{
	padding:15px;
	background:#fff;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
	margin-top:20px;
	border-radius: 3px;
  margin-bottom:20px;
}
.layout-sidebar-first .block-views-exposed-filter-blockjoblist-page-job-search .form-actions input[type="submit"]{
	width:100%;
}
.layout-sidebar-first .block-views-exposed-filter-blockjoblist-page-job-search h2.block-title{
	margin-top:0px;
}
#views-exposed-form-joblist-page-job-search .form-checkboxes .form-item,#views-exposed-form-joblist-page-job-search .form-radios .form-item{
  margin-top: 1rem;
  margin-bottom: 1rem;
}


@media screen and (max-width: 767px) {
  .node--type-job.node--view-mode-list .layout--twocol-section {
    flex-direction: column;
  }
  
  .node--type-job.node--view-mode-list .layout--twocol-section .layout__region.layout__region--first {
    padding-right: 0;
  }
  
  .node--type-job.node--view-mode-list .field--type-image a img {
    width: 100%;
  }
  .node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-occupation,
  .node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-description,
  .node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-employment-type,
  .node--type-job.node--view-mode-list .block.block-field-blocknodejobfield-job-salary-text{
		font-size:1.2rem;
  }
}

.node--type-job.node--view-mode-list .block-field-blocknodejobfield-job-salary-text .field__item p:last-child {
  margin-bottom: 0;
}
.node--view-mode-list .flex-group{
  display: flex;
  gap:5px;
}


@media screen and (max-width: 767px) {
  .node--type-job.node--view-mode-list .block-extra-field-blocknodejobflag-flag-job {
    top: 3rem;
    left: 0;
    right: 1rem;
  }
  .node.node--type-job.node--view-mode-list{
    padding:5px 10px;	
  }
  .node--type-job.node--view-mode-list h2, .node--type-job.node--view-mode-list .block-field-blocknodejobtitle a{
    font-size:1.5rem;
  }
  .sort-link {
    margin-bottom:25px;
  }
  .node .field--name-field-job-kodawari{
    flex-wrap: wrap;
  }
}



/*** テキストのみ ****/
.row>div.stretch-layout{
   align-items: stretch;
   display: flex;
}
.row>div.stretch-layout>div.text-only{
   flex:1;
   display: block;
   position: relative;
}
.view .row>div.stretch-layout>div.text-only  .flag a{
  bottom:20px;
  top:auto;
}
.text-only {
  padding: 15px;
  border-radius: 5px;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  margin-bottom:30px; 
}

.text-only:hover{
  background:#ebf5fb;
}
.text-only a{
  color:var(--black-color);
}
.text-only a:hover{
  opacity: 0.9;
}
.text-only a .job-grid-flex{

}
.text-only a .job-grid-image{
  max-width: 100%;
  margin-bottom: 10px;
}
.text-only a .job-grid-image img{
  margin-bottom:10px;
  width:100%;
  height: auto;
  object-fit: cover;
  box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
  min-width: 100px;
}
.text-onli-title{
  font-size:1.4rem;
  font-weight: 500;
  line-height: 130%;
  margin-bottom:5px;
}
.list-address{
  display: flex;
  padding-left:20px;
  background: url(../img/icon/pin.svg) no-repeat;
  background-size:16px;
  margin-bottom:4px;
}
.list-salary{
  display: flex;
  padding-left:15px;
  background: url(../img/icon/yen.svg) no-repeat;
  background-size:16px;
  margin-bottom:4px;
}
.list-emp{
  padding-left:20px;
  background: url(../img/icon/bag.svg) no-repeat;
  background-size:16px;
  margin-bottom:10px;
}
.list-salary .field--name-field-job-salary-low:after{
  content:"～";
  display: inline-block;
}
.node.node--type-job.node--view-mode-text-only-job-grid{
  font-size:1.2rem;
}
.node .field--name-field-job-kodawari{
  display: flex;
  gap:5px;
  flex-wrap: wrap;
}
.node.node--type-job.node--view-mode-text-only-job-grid .field--name-field-job-location-name{
  margin-bottom:10px;
}
.node .field--name-field-job-kodawari .field__item{
   background:var(--blue-color);
  color:#fff;
  font-size:11px;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  height:20px;
  padding:0px 5px;
  border:none;
}
h2.block-title.block-title-views-exposed-filter-blockjoblist-page-job-search{
  margin-bottom:0px;
}
#views-exposed-form-joblist-page-job-search fieldset{
  padding:0px;
}
#views-exposed-form-joblist-page-job-search fieldset legend{
  width:100%;
  display: block;
  height:40px;
  line-height: 40px;
  padding:0px 15px;
  color:#fff;
  background:#3498DB;
  border-radius: 5px;
  color:#fff;
}
#views-exposed-form-joblist-page-job-search fieldset legend span.fieldset-legend{
  color:#fff;
}
legend.close-legend,
legend.open-legend{
  position: relative;
}
legend.close-legend:after,
legend.open-legend:after{
  content:"";
  background:url("../img/icon/arrow-down-1-icon.svg") no-repeat;
  background-size: contain;
  filter: invert(82%) sepia(98%) saturate(3142%) hue-rotate(171deg) brightness(96%) contrast(96%);
  display: inline-block;
  width:12px;
  height: 12px;
  position: absolute;
  right:15px;
  top:13px;
}
legend.open-legend:after{
  transform: rotate(180deg);
}
#views-exposed-form-joblist-page-job-search{
  -ms-overflow-style: none;  /* IE / Edge (旧) */
  scrollbar-width: none;     /* Firefox */
}

/* Chrome / Safari / Edge(Chromium) */
#views-exposed-form-joblist-page-job-search::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 992px) {
  .region.region-sidebar-first{
    position: sticky;
    top:100px;
    
    display: block;
  }
  #views-exposed-form-joblist-page-job-search {
    overflow: auto;
    max-height: calc(100vh - 300px);
  }
  #views-exposed-form-joblist-page-job-search .form-actions.form-wrapper{
    position: sticky;
    bottom: 0;             /* filter-scroll のスクロールポート下端に追従 */
    padding: 12px;
    background: #fff;      /* 下の内容と重なっても可読に */
    box-shadow: 0 -6px 12px rgba(0,0,0,.06); /* 仕切りの視覚効果（任意） */
    z-index: 1;            /* 内部要素より前面に */
    isolation: isolate;    /* まれな z-index 干渉対策（任意） */
    margin-bottom: 0px;
  }
  .path-job.sticked .dialog-off-canvas-main-canvas{
    overflow:inherit;
  }
}
@media screen and (max-width: 991.9px) {
  #views-exposed-form-joblist-page-job-search{
    display: none;
  }
  .sp-form-open #views-exposed-form-joblist-page-job-search{
    display: block;
  }
  .layout-sidebar-first .block h2.block-title.block-title-views-exposed-filter-blockjoblist-page-job-search {
        background: var(--blue2-color) url(/themes/custom/builjob_front/img/icon/plus.svg) right 15px top 8px no-repeat;
        color: #fff;
        border-radius: 5px;
  }
  .layout-sidebar-first .block.sp-form-open h2.block-title.block-title-views-exposed-filter-blockjoblist-page-job-search {
        background: var(--blue2-color) url(/themes/custom/builjob_front/img/icon/close.svg) right 15px top 8px no-repeat;
  }
  .layout-sidebar-first .block-views-exposed-filter-blockjoblist-page-job-search h2.block-title {
    margin-top: 0px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    padding: 0px 15px;
  }
}
/*** エリアトップ ***/
.area_top{
  margin-inline: calc(50% - 50svw);
  inline-size: 100svw;            /* width の論理表現 */
  box-sizing: border-box;
  height: 200px; /* 例 */
}
.area_top h2{
  margin:0px;
}
html{overflow-x:clip}
#block-area-top-hokkaido{
  background: url(../img/area-top/hokkaido.webp) no-repeat center;
}
#block-area-top-chugoku{
  background: url(../img/area-top/chugoku.webp) no-repeat center;
}
.area_top .container{
  padding-top:40px;
}
.area-top-text{
  text-align: center;
  margin:20px auto;
  max-width: 680px;
  padding: 20px 40px;
  border-radius: 5px;
  box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
  
  backdrop-filter: blur(6px);
  background-color: #12c0f11d;
  color:#fff;
  text-shadow: 1px 1px 5px #235f85;
}
#views-exposed-form-joblist-page-job-search{

}
#views-exposed-form-joblist-page-job-search .form-actions{
  bottom: 0px;
  box-sizing: border-box;
}
/**** カルーセル ****/
.node.node--type-job.node--view-mode-carousel{
  padding: 10px;
  box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
  border-radius: 5px;
  height: -webkit-fill-available;
  position: relative;
}
.view .node.node--type-job.node--view-mode-carousel .flag a{
  right:15px;
  bottom:10px;
  top:auto;
}
.view .node.node--type-job.node--view-mode-carousel .layout__region--content{
  position: static;
}
@media screen and (min-width: 992px) {
  .layout-sidebar-second .text-only a .job-grid-flex{
    flex-wrap: wrap;
    
  }
  .layout-sidebar-second .text-only a .job-grid-image{
    width:100%;
    margin-right: 0px;
    max-width: 100%;
  }
}
@media screen and (max-width: 991.9px) {
    .sp-form-open #views-exposed-form-joblist-page-job-search .form-actions {
        position: sticky;
        bottom: 0px;
        padding-top: 15px;
        background: #fff;
        box-shadow: 0 -6px 12px rgba(0, 0, 0, .06);
        z-index: 1;
        margin-bottom: 0px;
    }
    .sp-form-open #views-exposed-form-joblist-page-job-search {
        display: block;
        position: relative;
        max-height: 400px;
        overflow: scroll;
    }
}
@media screen and (max-width: 560px) {
  .flex.list-main{
    flex-wrap: wrap;
  }
  .flex.list-main .job-main-image.col-4,
  .flex.list-main .field.field--name-field-job-description.col-8{
    width:100%;
  }
  
}
h3.line-title{
  font-size:21px;
  height:55px;
  line-height: 55px;
  padding:0px 15px;
  background: #006FDF;
  color:#fff;
  margin-bottom:20px;
  border-radius: 5px;
}
.occu-area{
  margin-bottom:25px;
  background:#e9f5f9;
  padding:20px 25px;
  border-radius: 5px;
}
.occu-area h3{
  font-size:21px;
  color:#111;
  margin-top: 0px;
}
.occu-area h4{
  font-size:18px;
}
.occu-area p{
  font-size:16px;
  line-height:180%;
}