/* ===================================================
採用情報
 =================================================== */

/* ページタイトル */
div.page-title { background-image:linear-gradient(84deg, #46EB75 5.55%, #2BB24D 88.29%); }
div.title-image.recruit-title { background-image:url(../img/recruit/first-view.jpg); }
div.title-image.recruit-title::before { background-image:linear-gradient(293.75deg, rgba(63, 221, 108, 0.280236) 26.78%, rgba(70, 235, 117, 0.25) 65.57%); }

/* 共通項 */
section.appeal ul.flex li.card div.text-box h3, section.appeal ul.flex li.card div.text-box p, section.welfare ul.flex li.card h3, section.welfare ul.flex li.card p, section.matching ul li, section.recruitment h3, section.recruitment div.item-content p, section.voice ul li { font-size:16px; line-height:200%; }
section.appeal ul.flex li.card div.text-box h3, section.welfare ul.flex li.card h3, section.matching ul li, section.recruitment h3, section.voice ul li h3 {color:var(--gr); font-weight:700; margin-bottom:4px; }
section.recruit-content.appeal h2, section.welfare h2, section.matching h2, section.recruitment p.read-text, section.voice h2 { margin-bottom:40px; }
h2.top-midashi span, section.voice ul li h3 { color:var(--bl); }

/* 見出し */
h2.top-midashi img { display:none; }
h2.top-midashi { font-size:24px; font-weight:600; line-height:150%; letter-spacing:-0.24px; margin-bottom:80px; }

/* コンテンツベース */
section.recruit-content { margin-bottom:80px; }

/* 共通 */
section.appeal ul.flex, section.welfare ul.flex { flex-direction:column; padding:0 16px; }
section.appeal ul.flex li.card, section.welfare ul.flex li.card { gap:16px; }

/* 魅力 */
section.appeal ul.flex { gap:16px; }
section.appeal ul.flex li.card { align-items:center; flex-direction:row; }
section.appeal ul.flex li.card div.image-box { aspect-ratio:1/1; max-width:120px; }
section.appeal ul.flex li.card div.image-box img { height:auto; max-width:100%; }
section.appeal ul.flex li.card div.text-box { width:calc( 100% - ( 120px + 16px ) ) }
section.appeal ul.flex li.card div.text-box h3 br { display:none; }
section.appeal ul.flex li.card div.text-box p { font-weight:400; }

/* 福利厚生 */
section.welfare ul.flex { gap:40px; }
section.welfare ul.flex li.card { align-items:center; flex-direction:column; justify-content:center; }

/* 求める人物像 */
section.matching ul { flex-direction:column; border-top:1px solid var(--bl); margin:auto; max-width:260px; }
section.matching ul li { align-content:center; border-bottom:1px solid var(--bl); color:var(--bl); margin-bottom:0; justify-content:center; padding:24px 20px; }

/* 社員の声 */
section.voice ul { flex-direction:column; gap:40px; }
section.voice ul li { flex-direction:column; gap:24px; padding:0 20px; }
section.voice ul li h3 { text-align:center; margin-bottom:8px; }
div.voice-image { align-items:center; justify-content:center; }
div.voice-image img { height:140px; width:140px; }

/* 募集職種例 */
section.recruitment h3 { border-left:4px solid var(--gr); padding:0 16px; margin-bottom:8px; }
section.recruitment div.flex { flex-direction:column; gap:40px; padding:0 20px; margin-bottom:80px; }
section.recruitment div.item-content p { padding:0 16px; }

/* リクルートページ応募フォームボタン */
section.recruitment::after { background:url(../img/recruit/contact-button-ov.svg) no-repeat; content:''; display:none; }
section.recruitment a.hover-button { background-image:url(../img/recruit/contact-button.svg); height:66px; width:208px; }
section.recruitment a.hover-button:hover { background-image:url(../img/recruit/contact-button-ov.svg); }

@container(min-width:960px){

/* 共通項 */
section.appeal ul.flex, section.welfare ul.flex { flex-direction:row; gap:80px; padding:0; margin:auto; max-width:1060px; }
section.recruit-content.appeal h2, section.welfare h2, section.matching h2, section.matching h2, section.voice h2 { margin-bottom:80px; }
section.recruit-content { margin-bottom:160px; }

/* 見出し */
h2.top-midashi img { display:block; margin:auto; height:auto; max-width:100%; width:auto; }
h2.top-midashi span.title-text { display:none; }

/* 魅力 */
section.appeal ul.flex li.card { flex-direction:column; width:calc( 25% - 40px ); }
section.appeal ul.flex li.card div.image-box { max-width:200px; }
section.appeal ul.flex li.card div.text-box { width:auto; }
section.appeal ul.flex li.card div.text-box h3 { font-size:20px; font-weight:600; text-align:center; line-height:170%; }
section.appeal ul.flex li.card div.text-box h3 br { display:block; }

/* 福利厚生 */
section.welfare ul.flex { align-items:flex-start; }
section.welfare ul.flex li.card { width:calc( 33% - 40px ); }
section.welfare ul.flex li.card div.image-box { max-width:200px; }
section.welfare ul.flex li.card div.image-box img { height:auto; width:100%; }
section.welfare ul.flex li.card div.text-box h3 { font-size:20px; font-weight:600; text-align:center; line-height:170%; }

/* 求める人物像 */
section.matching ul { align-items:center; align-self:stretch; border-bottom:none; flex-direction:row; justify-content:space-around; border-top:none; gap:auto; margin:auto; max-width:1170px; }
section.matching ul li { border-top:1px solid var(--bl); font-size:20px; font-weight:600; line-height:170%; padding:24px 0; width:calc( 25% - 25px ); }

/* 社員の声 */
section.voice ul li { align-items:center; flex-direction:row; gap:40px; justify-content:flex-start; padding:0; margin:auto; max-width:1000px; }
div.voice-image { aspect-ratio:1/1; max-height:256px; max-width:256px; width:auto; }
div.voice-image img { aspect-ratio:1/1; max-height:256px; height:100%; max-width:256px; width:100%; }
div.voise-text { width:calc( 100% - 256px ); }
section.voice ul li div.voise-text h3 { font-size:24px; font-weight:600; text-align:left; margin-bottom:24px; }

/* 募集職種例 */
section.recruitment p.read-text br, div.item-content h3 { font-size:20px; font-weight:600; line-height:170%; }
section.recruitment p.read-text br, div.item-content h3 br { display:none; }
section.recruitment div.flex { gap:40px; margin:auto auto 160px auto; max-width:1170px; }
section.recruitment div.item-content p { padding:0 20px; }

/* リクルートページ応募フォームボタン */
section.recruitment::after { background:url(../img/recruit/pc-contact-button-ov.svg) no-repeat; display:none; }
section.recruitment a.hover-button { background-image:url(../img/recruit/pc-contact-button.svg); height:69px; width:464px; }
section.recruitment a.hover-button:hover { background-image:url(../img/recruit/pc-contact-button-ov.svg); }

}