@charset "UTF-8";

/* 採用情報のリンクバナー */
.recruit_banners { display: flex; gap: 2em 3em; align-items: center; justify-content: center; margin: 3em auto;}
.recruit_banners>*{width: calc((100% - 6em) / 3);}
.recruit_banners img{width: 100%; aspect-ratio: 75/23; object-fit: contain;}
@media screen and (max-width:960px){
.recruit_banners{flex-direction: column;}
.recruit_banners>*{width: min(80%,300px);}
}
/* 数字で見る秀和建設 */
ul.stats-list { display: flex; flex-wrap: wrap; gap: 3em 8%; margin: 3em auto;}
ul.stats-list>li {width: calc((100% - 8%) / 2); position: relative;}
ul.stats-list>li>*:last-child { margin-bottom: 0;}
ul.stats-list .heading { font-size: 150%; font-weight: var(--fw-regular); display: flex; align-items: baseline; gap:0 1em; border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom: 0.5em;}
ul.stats-list .heading+div{opacity: 0; transition: 0.4s 0.6s opacity;}
ul.stats-list .heading.active+div{opacity: 1;}
ul.stats-list .stat-label {font-weight: var(--fw-bold); }
ul.stats-list .stat-value {font-size: 80%;}
ul.stats-list .stat-num { font-size: 240%; font-family: "af", sans-serif; font-weight: 600; line-height: 1; position: relative; bottom: -0.05em;}
ul.stats-list>li:nth-child(4n + 1) .heading { border-color: color-mix(in srgb, var(--color-blue), transparent 50%);}
ul.stats-list>li:nth-child(4n + 1) .stat-num { color: var(--color-blue);}
ul.stats-list>li:nth-child(4n + 2) .heading { border-color: color-mix(in srgb, var(--color-yellow), transparent 40%);}
ul.stats-list>li:nth-child(4n + 2) .stat-num { color: var(--color-yellow);}
ul.stats-list>li:nth-child(4n + 3) .heading { border-color: color-mix(in srgb, var(--color-green), transparent 50%);}
ul.stats-list>li:nth-child(4n + 3) .stat-num { color: var(--color-green);}
ul.stats-list>li:nth-child(4n + 4) .heading { border-color: color-mix(in srgb, var(--color-pink), transparent 50%);}
ul.stats-list>li:nth-child(4n + 4) .stat-num { color: var(--color-pink);}
ul.stats-list p{font-size: 90%; padding-left: 1.5rem;}
@media screen and (max-width:960px){
ul.stats-list { flex-direction: column;}
ul.stats-list>li {width: 100%;}
ul.stats-list .heading {font-size: 120%;}
ul.stats-list p{font-size: 100%; padding-left: 0;}
}

/* 若手社員の一日 */
/* スケジュールを含むwrapper */
.wrapper:has(.schedule-swiper){overflow-x: hidden; padding: 4em 0; margin: 4em auto;}

/* 見出しの付近にswiperのボタンを配置 */
.schedule_heading_wrap {position: relative;}
.schedule_heading_wrap .swiper-buttons {position: absolute; z-index: 10; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; gap: 1rem;}
.schedule_heading_wrap .swiper-buttons .swiper-button-next,
.schedule_heading_wrap .swiper-buttons .swiper-button-prev {position: relative; top: auto; right: auto; left: auto; transform: none;}
@media screen and (min-width:961px){
.schedule_heading_wrap .heading {margin-right: 8rem;}
.schedule_heading_wrap p{padding-left: 7%; margin-right: 8rem;}
}
@media screen and (max-width:960px){
.schedule_heading_wrap .swiper-buttons {position: relative; top: auto; right: auto; transform: none; justify-content: center;}
}

/* スクロールバーを調整（上書き） */
.schedule-swiper .swiper-scrollbar {bottom: 0 !important;}

/* swiperの調整（上書き） */
.schedule-swiper { margin: 2em -20px 1em; padding-bottom: 2em; overflow: visible; }
.schedule-swiper .swiper-wrapper { overflow: visible;}
.schedule-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; /*height: auto;*/ padding: 0 20px;}

/* スケジュールカードのデザイン */
.schedule-card {background: linear-gradient(135deg, #fff 50%,#e5e5e5 ); width: 100%; min-height: 24em; position: relative; padding: 2em; line-height: 1.4; display: flex; flex-direction: column; align-items: flex-start; gap:0.5em; border-radius: 0.5em;}
.schedule-card .image img{ width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 0.3em;}
.schedule-date { color: var(--color-primary); font-family: "af", sans-serif; font-weight: 600;}
.schedule-text .heading{ font-size: 110%; margin: 0;}
.schedule-text p{ font-size: 90%; line-height: 1.8; margin: 0;}
@media screen and (max-width:960px){
.schedule-swiper {margin: 2em -10px 1em; padding-bottom: 2em;}
.schedule-swiper .swiper-slide {padding: 0 10px;}
.schedule-card{padding: 1em; min-height: initial; font-size: 85%;}
}

/* インタビュー */
ul.interview { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(0,0,0,0.8); border-left: 1px solid rgba(0,0,0,0.8); margin: 2em auto;}
ul.interview > li { width: 50%; border-right: 1px solid rgba(0,0,0,0.8); border-bottom: 1px solid rgba(0,0,0,0.8); padding: 3em;}
ul.interview .heading{font-weight: var(--fw-regular); font-size: 140%; margin: 0; letter-spacing: 0.05em; font-feature-settings: "palt";}
ul.interview .meta{display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.7em; margin: 1em 0;}
ul.interview .meta .year{font-weight: var(--fw-bold); color: var(--color-primary); font-size: 110%;}
ul.interview .text{line-height: 2;}
ul.interview .text>*:last-child{margin-bottom: 0;}
@media screen and (min-width:961px){
/* 奇数個のとき、最初の li を 100% にする */
ul.interview > li:first-child:nth-last-child(odd) {width: 100%;	padding-left: 6em; padding-right: 6em;}
}
@media screen and (max-width:960px){
ul.interview{flex-direction: column;}
ul.interview > li { width: 100%; font-size: 90%; padding: 2em 1.5em;}
ul.interview .heading{font-size: 130%;}
}

/* 私たちの文化 */
.image_recruit_culture {width: 100%; height: auto; aspect-ratio: 1/1;}
.image_recruit_culture img{width: 100%; height: 100%; object-fit: cover; object-position: right center;}
@media screen and (max-width:960px){
.image_recruit_culture {aspect-ratio: 3/2;}
}

/* Uターン就職のボタンを調整 */
.button.fix_u-turn {flex-direction: column; gap:0.5em; min-height: 4.5em; font-size: 120%; width: min(100%,24em);}
.button.fix_u-turn small{font-size: 65%; font-weight: var(--fw-regular);}
@media screen and (max-width:960px){
.button.fix_u-turn {align-items: flex-start; padding-left: 1.5em; font-size: 110%;}
}

/* 募集要項一覧 */
.youkou_index{margin: 6em auto;}
.youkou_index .text-text{row-gap: 4em;}
.youkou_index .text-text .text1{font-size: 110%; line-height: 2; max-width: 44em;}
.youkou_index .text-text .text1>*:last-child{margin-bottom: 0;}
.youkou_index .sticky{position: sticky; top: calc(var(--header-height) + 3em);}
.youkou_index .heading_wrap .large{font-family: "af", sans-serif; font-size: 600%; font-weight: 400; line-height: 0.6;}
.youkou_index .heading_wrap .small{font-size: 140%; margin-top: 1em;}
.youkou_index .button_wrap{font-size: 110%; width: min(80%,22em); margin-top: 2em;}
.youkou_index .button_wrap .button{width: 100%; letter-spacing: 0.1em;}
@media screen and (max-width:960px){
.youkou_index .text-text .text1{font-size: 100%;}
.youkou_index .sticky{position: relative; top: auto;}
.youkou_index .heading_wrap .large{font-size: 300%;}
.youkou_index .button_wrap{font-size: 100%; margin: 2em auto 0;}
}
@media screen and (max-width:480px){
.youkou_index .wrapper{padding-bottom: 5em;}
}
/* 募集要項リスト */
ul.youkou{display: flex; flex-direction: column; gap:6em;}
ul.youkou li>.heading{font-size: 160%; background: #fff !important;}
@media screen and (max-width:960px){
ul.youkou li>.heading{font-size: 140%;}
}

/* 募集要項詳細 */
.youkou_detail { border: 1px solid rgba(0,0,0,0.8); border-radius: 0; padding: 2em; display: flex; flex-wrap: wrap; gap: 2em; margin: 0 auto 4em;}
.youkou_detail header {border-radius: 0.6em 0.6em 0 0; width: calc(100% + 4em); margin: -2em -2em 0; background: var(--bg); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 1em 2em; position: relative; z-index: 20;}
.youkou_detail header .heading {font-size: 180%; margin: 0; display: flex; align-items: flex-start; flex-wrap: wrap; gap:0.5rem; flex-direction: column;}
.youkou_detail header .heading:before{font-size: 0.9rem; content: "募集職種"; display: inline-block; line-height: 1.4; background: var(--color-black); color: #fff; padding: 0 0.5em; font-feature-settings: "palt";
  font-weight: var(--fw-bold);}
.youkou_detail .inner {flex: 1;}
.youkou_detail .inner>*{margin: 0;}
.youkou_detail table.style:not(.hold){margin: 0;}
.youkou_detail table.style:not(.hold) p{margin: 0;}
.youkou_detail .entryButton {width: 100%; font-size: 120%; text-align: center; position: sticky; z-index: 10; bottom: 0; background: rgba(255,255,255,0.9);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 1em 0;}
.youkou_detail .entryButton .button{width: min(100% , 660px);}
.youkou_detail .entryButton .button .small{font-size: 90%;}
@media screen and (max-width:960px){
.youkou_detail{padding: 1em; font-size: 95%;}
.youkou_detail header {width: calc(100% + 2em); margin: -1em -1em 0; padding: 1em;}
/* .youkou_detail header .category{width: 100%;} */
.youkou_detail header .heading {font-size: 140%;}
.youkou_detail .inner {width: 100%;}
.youkou_detail table.style:not(.hold) > tbody > tr > th,
.youkou_detail table.style:not(.hold) > tbody > tr > td{padding-left: 0.5em; padding-right: 0.5em;}
.youkou_detail .entryButton .button .small{font-size: 80%;}
}

/* 募集要項詳細  */
/* 左下のお問い合わせボタンは完全に干渉するので消す */
.page:has(.youkou_detail) .contact_maru_buttons.fixed{display: none;}
@media screen and (max-width:960px){
/* ページトップボタンが干渉しないように小さめに調整 */
.page:has(.youkou_detail) .pageTopButton{width: 25px; height: 25px; bottom: 10px; right: 10px; font-size: 10px;}
}