/* ==============================================
   概要: about.css
   共通: ../css/common/base.css, header.css, footer.css
============================================== */

/* MENU CARDS */
.menuGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.menuCard{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--rule); border-radius:10px; overflow:hidden; transition:box-shadow .25s,transform .25s; position:relative;}
.menuCard:hover{box-shadow:0 12px 40px rgba(13,43,62,0.10); transform:translateY(-4px);}
.menuCardThumb{height:220px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}

/* 各カードのサムネカラー */
.menuCardThumb.thumbMessage{background:linear-gradient(135deg,#0D2B3E 0%,#1E3D55 60%,#00b5d9 100%);}
.menuCardThumb.thumbOverview{background:linear-gradient(135deg,#162F45 0%,#1E3D55 100%);}
.menuCardThumb.thumbHistory{background:linear-gradient(135deg,#0a1e2e 0%,#0D2B3E 60%,#162F45 100%);}
.menuCardThumb.thumbRecruit{background:linear-gradient(135deg,#F84462 0%,#D62F4D 50%,#0D2B3E 100%);}

/* サムネ内装飾 */
.thumbDeco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.thumbNum{font-family:'Bebas Neue',sans-serif; font-size:120px; color:rgba(255,255,255,0.06); line-height:1; position:absolute; right:20px; bottom:-10px; pointer-events:none;}
.thumbIcon{font-size:56px; opacity:0.25; position:absolute; left:32px; top:50%; transform:translateY(-50%);}
.thumbLabelWrap{position:absolute; bottom:0;left:0;right:0; padding:16px 24px; background:linear-gradient(to top,rgba(13,43,62,0.85) 0%,transparent 100%);}
.thumbEyebrow{font-family:'Bebas Neue',sans-serif; font-size:10px; letter-spacing:4px; color:var(--cyan); margin-bottom:4px;}
.thumbTitleJa{font-family:'Noto Serif JP',serif; font-size:18px; font-weight:700; color:var(--white);}

/* recruitだけアクセント */
.menuCardThumb.thumbRecruit .thumbEyebrow{color:#FFD6DC;}
.menuCardThumb.thumbRecruit .thumbTitleJa{color:var(--white);}

/* カード下部テキスト */
.menuCardBody{padding:24px 28px 28px; flex:1; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--rule);}
.menuCardDesc{font-size:13px;color:var(--gray);line-height:1.9;flex:1;}
.menuCardLink{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--cyan); align-self:flex-start; border-bottom:1px solid transparent; transition:border-color .2s;}
.menuCard:hover .menuCardLink{border-bottom-color:var(--cyan);}
.menuCardThumb.thumbRecruit ~ .menuCardBody .menuCardLink{color:var(--red);}
.menuCard:hover .menuCardThumb.thumbRecruit ~ .menuCardBody .menuCardLink{border-bottom-color:var(--red);}

/* サムネ内グラフィック装飾 */
.thumbGridDeco{position:absolute;inset:0; background-image:linear-gradient(rgba(0,181,217,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,181,217,0.05) 1px,transparent 1px); background-size:40px 40px;}
.thumbGlow{position:absolute; width:200px;height:200px; border-radius:50%; background:radial-gradient(circle,rgba(0,181,217,0.15) 0%,transparent 70%); top:-40px;right:-40px;}
.thumbGlowRecruit{position:absolute; width:200px;height:200px; border-radius:50%; background:radial-gradient(circle,rgba(248,68,98,0.2) 0%,transparent 70%); bottom:-40px;left:-40px;}

/* RESPONSIVE */
@media screen and (max-width:1024px){
}
@media screen and (max-width:640px){
 .menuGrid{grid-template-columns:1fr; gap:20px;}
 .menuCardThumb{height:180px;}
}

/* ===== INLINE STYLE 移行クラス ===== */
.sectionDescSm{font-size:14px; color:var(--gray); margin-bottom:48px; line-height:1.9; }
.cardNumOverlay{position:absolute; left:32px; top:50%; transform:translateY(-50%); }
.cardNumBg{font-family:'Bebas Neue', sans-serif; font-size:48px; color:rgba(0,181,217,0.3); line-height:1; }
.cardLabelEn{font-family:'Bebas Neue', sans-serif; font-size:11px; letter-spacing:4px; color:rgba(255,255,255,0.25); }
.gridBg{background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size:40px 40px; }
.textWhiteDim {color:rgba(255,255,255,0.08); }
.cardOverlayRed{background:linear-gradient(to top, rgba(214,47,77,0.9) 0%, transparent 100%); }