/* ==============================================
   採用: recruit.css
   共通: ../css/common/base.css, header.css, footer.css
============================================== */

/* PAGE HERO — リクルートは赤アクセント */
.pageHeroEyebrow{color:var(--red);}

/* ===== NUMBERS ===== */
.numbersGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.numberCard{background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:36px 24px 32px; text-align:center; transition:box-shadow .2s, transform .2s;}
.numberCard:hover{box-shadow:0 8px 32px rgba(13,43,62,0.08); transform:translateY(-3px);}
.numberCardIcon{font-size:36px; margin-bottom:16px;}
.numberCardValue{font-family:'Bebas Neue',sans-serif; font-size:64px; color:var(--navy); line-height:1; margin-bottom:6px;}
.numberCardValue span{font-size:28px; color:var(--gray);}
.numberCardValue em{color:var(--red); font-style:normal;}
.numberCardLabel{font-size:13px; font-weight:500; color:var(--text); line-height:1.6; margin-bottom:4px;}
.numberCardNote{font-size:10px; color:var(--navy); letter-spacing:2px; font-family:'Bebas Neue',sans-serif;}

/* ===== WHY MEIDENTSU ===== */
.whyGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.whyCard{background:var(--white); border:1px solid var(--rule); border-radius:10px; padding:36px 28px; position:relative; overflow:hidden; transition:box-shadow .25s, transform .25s;}
.whyCard:hover{box-shadow:0 8px 32px rgba(13,43,62,0.08); transform:translateY(-3px);}
.whyCard::before{content:''; position:absolute; top:0;left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cyan),var(--cyan-dark));}
.whyCardNum{font-family:'Bebas Neue',sans-serif; font-size:56px; color:var(--cyan); line-height:1; margin-bottom:8px;}
.whyCardTitle{font-family:'Noto Serif JP',serif; font-size:17px; font-weight:700; color:var(--navy); margin-bottom:12px; line-height:1.5;}
.whyCardBody{font-size:13px; color:var(--gray); line-height:1.9;}

/* ===== 職種 ===== */
.jobList{display:flex; flex-direction:column; gap:24px;}
.jobCard{background:var(--white); border:1px solid var(--rule); border-radius:10px; overflow:hidden;}
.jobCardHeader{display:flex; align-items:center; gap:20px; padding:28px 32px; background:var(--navy); cursor:pointer; user-select:none;}
.jobCardTag{font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px; padding:8px 10px 4px 10px; border-radius:2px; flex-shrink:0; width:100px; text-align:center;}
.jobCardTag.sales{background:rgba(0,181,217,0.2); color:var(--cyan);}
.jobCardTag.engineer{background:rgba(248,68,98,0.2); color:#FF8096;}
.jobCardTitle{font-family:'Noto Serif JP',serif; font-size:20px; font-weight:700; color:var(--white); flex:1;}
.jobCardToggle{font-size:20px; color:rgba(255,255,255,0.3); transition:transform .3s; flex-shrink:0;}
.jobCard.isOpen .jobCardToggle{transform:rotate(180deg);}
.jobCardBody{display:none; padding:32px;}
.jobCard.isOpen .jobCardBody{display:block;}
.jobTable{width:100%; border-collapse:collapse;}
.jobTable tr{border-bottom:1px solid var(--rule);}
.jobTable tr:last-child{border-bottom:none;}
.jobTable th{width:140px; padding:14px 16px 14px 0; font-size:12px; font-weight:500; color:var(--gray); text-align:left; vertical-align:top; white-space:nowrap;}
.jobTable td{padding:14px 0; font-size:14px; color:var(--text); line-height:1.9;}
.jobApplyBtn{display:inline-flex; align-items:center; gap:8px; margin-top:24px; background:var(--red); color:var(--white); padding:14px 32px; border-radius:4px; font-size:14px; font-weight:500; transition:background .2s;}
.jobApplyBtn:hover{background:var(--red-dark);}

/* ===== 先輩社員の声 ===== */
.voiceGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.voiceCard{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:32px 28px; position:relative; transition:background .2s;}
.voiceCard:hover{background:rgba(255,255,255,0.07);}
.voiceCard::before{content:'"'; position:absolute; top:12px; left:20px; font-family:'Noto Serif JP',serif; font-size:80px; color:rgba(0,181,217,0.12); line-height:1; pointer-events:none;}
.voiceCardTag{font-family:'Bebas Neue',sans-serif; font-size:10px; letter-spacing:3px; color:var(--cyan); margin-bottom:16px;}
.voiceCardQuote{font-size:14px; color:rgba(255,255,255,0.75); line-height:2; margin-bottom:24px; font-family:'Noto Serif JP',serif;}
.voiceCardProfile{display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.06);}
.voiceCardAvatar{width:44px;height:44px; border-radius:50%; background:var(--navy3); display:flex;align-items:center;justify-content:center; font-size:18px; flex-shrink:0;}
.voiceCardName{font-size:13px; font-weight:500; color:var(--white);}
.voiceCardRole{font-size:11px; color:rgba(255,255,255,0.35); margin-top:2px;}

/* ===== 福利厚生 ===== */
.welfareGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.welfareCard{background:var(--white); border:1px solid var(--rule); border-radius:8px; padding:24px 20px; text-align:center; transition:box-shadow .2s,transform .2s;}
.welfareCard:hover{box-shadow:0 4px 16px rgba(13,43,62,0.08); transform:translateY(-2px);}
.welfareCardIcon{font-size:28px; margin-bottom:10px;}
.welfareCardTitle{font-size:13px; font-weight:700;color:var(--navy); margin-bottom:6px;}
.welfareCardBody{font-size:11px; color:var(--gray); line-height:1.8;}

/* ===== ENTRY CTA ===== */
.entryCta{background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 50%,#a01f35 100%); padding:80px 0; text-align:center; position:relative; overflow:hidden;}
.entryCta::before{content:'';position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:40px 40px;}
.entryCtaInner{position:relative;z-index:1;}
.entryCtaEyebrow{font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:6px; color:rgba(255,255,255,0.5); margin-bottom:16px;}
.entryCtaTitle{font-family:'Noto Serif JP',serif; font-size:32px; font-weight:900; color:var(--white);letter-spacing:3px; margin-bottom:16px;}
.entryCtaBody{font-size:14px; color:rgba(255,255,255,0.6); margin-bottom:40px; line-height:2;}
.entryBtn{display:inline-flex; align-items:center; gap:10px; background:var(--white);color:var(--red); padding:18px 48px; border-radius:4px; font-size:15px;font-weight:700; transition:opacity .2s,transform .2s; margin:0 8px;}
.entryBtn:hover{opacity:0.9; transform:translateY(-2px);}
.entryBtnSub{display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,0.4); color:var(--white); padding:18px 48px; border-radius:4px; font-size:15px;font-weight:500; transition:background .2s,transform .2s; margin:0 8px;}
.entryBtnSub:hover{background:rgba(255,255,255,0.1); transform:translateY(-2px);}

/* NOTE */
.dataNote{font-size:11px; color:var(--gray); margin-top:16px; text-align:right;}
.dataNoteWhite{font-size:11px; color:rgba(255,255,255,0.2); margin-top:16px; text-align:right;}

/* RESPONSIVE */
@media screen and (max-width:1024px){
 .numbersGrid{grid-template-columns:repeat(2,1fr);}
 .whyGrid{grid-template-columns:1fr 1fr;}
 .voiceGrid{grid-template-columns:1fr 1fr;}
 .welfareGrid{grid-template-columns:repeat(2,1fr);}
}
@media screen and (max-width:640px){
 .numbersGrid{grid-template-columns:repeat(2,1fr);}
 .whyGrid{grid-template-columns:1fr;}
 .voiceGrid{grid-template-columns:1fr;}
 .welfareGrid{grid-template-columns:1fr 1fr;}
 .jobCardHeader{padding:20px 20px;}
 .jobCardBody{padding:20px;}
 .entryBtn,.entryBtnSub{padding:16px 28px; font-size:14px; margin:4px 0; display:flex; width:100%; max-width:320px; justify-content:center;}
}
/* ===== INLINE STYLE 移行クラス ===== */
.headerNavLink.activeRecruit{color:var(--red); border-bottom-color:var(--red);}
.textNavySm{font-size:13px; color:var(--navy);}
.textGrayXs{font-size:12px; color:var(--gray);}

/* ===== 売上推移グラフ ===== */
.numberCardWide{grid-column:1 / -1; text-align:center; margin-top:1em;}
.revenueChart{position:relative; padding:16px 0 0;}
.revenueBars{display:flex; align-items:flex-end; justify-content:center; gap:10px; height:180px; border-bottom:2px solid var(--rule); padding:0 8px; margin-bottom:6px;}
.revenueBarWrap{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; max-width:88px; height:100%; justify-content:flex-end;}
.revenueBar{width:100%; height:var(--h); background:linear-gradient(to top, var(--cyan-dark), var(--cyan)); border-radius:4px 4px 0 0; position:relative; display:flex; align-items:flex-start; justify-content:center; min-height:28px; transition:opacity 0.2s;}
.revenueBarWrap.highlight .revenueBar{background:linear-gradient(to top, var(--red-dark), var(--red)); box-shadow:0 4px 16px rgba(13,43,62,0.25);}
.revenueVal{font-size:10px; font-weight:700; color:var(--white); padding-top:5px; letter-spacing:0; white-space:nowrap;}
.revenueYear{font-family:'Bebas Neue', sans-serif; font-size:13px; color:var(--gray); letter-spacing:1px;}
.revenueBarWrap.highlight .revenueYear{color:var(--navy); font-weight:700;}
.revenueAxisNote{font-size:10px; color:var(--gray); text-align:right; padding-right:8px; margin-bottom:12px;}
.revenueGrowthBadge{display:inline-block; margin-top:4px; background:var(--navy); color:var(--white); font-size:13px; font-weight:500; padding:8px 28px; border-radius:99px; letter-spacing:0.5px;}
.revenueGrowthBadge em{color:var(--cyan); font-style:normal; font-size:18px; font-weight:700; margin:0 4px;}

@media screen and (max-width:640px){
 .revenueBars{gap:5px; height:130px;}
 .revenueVal{font-size:9px;}
 .revenueYear{font-size:10px;}
}