/* ==============================================
   トップページ: top.css
   共通: css/common/base.css, header.css, footer.css
============================================== */

/* ===== HERO ===== */
#hero{background:var(--navy); min-height:600px; display:grid; grid-template-columns:1fr 440px; position:relative; overflow:hidden; margin-top:71px; /* header高さ分 */}
.heroBgImg{position:absolute; inset:0; background-image:url("./../images/hero_bg.jpg"); background-size:cover; background-position:center; opacity:0.18; pointer-events:none;}

/* 背景グリッド */
.heroGrid{position:absolute; inset:0; background-image:  linear-gradient(rgba(0,181,217,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,181,217,0.04) 1px, transparent 1px); background-size:60px 60px; pointer-events:none;}
/* 背景グロー */
.heroGlow{position:absolute; top:-120px; right:300px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(0,181,217,0.12) 0%, transparent 65%); pointer-events:none;}
.heroGlow2{position:absolute; bottom:-80px; left:20%; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(248,68,98,0.06) 0%, transparent 65%); pointer-events:none;}
/* ヒーロー左 */
.heroLeft{padding:72px 40px 72px 64px; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;}
.heroBadge{display:inline-flex; align-items:center; gap:10px; background:rgba(0,181,217,0.12); border:1px solid rgba(0,181,217,0.25); border-radius:4px; padding:7px 16px; margin-bottom:32px; width:fit-content;}
.heroBadgeDot{width:6px; height:6px; background:var(--cyan); border-radius:50%;}
.heroBadgeText{font-size:11px; letter-spacing:3px; color:var(--cyan); font-weight:500;}
.heroH1{font-family:'Noto Serif JP', serif; font-size:clamp(32px, 3.5vw, 50px); font-weight:900; color:var(--white); line-height:1.55; margin-bottom:12px; letter-spacing:2px;}
.heroH1 em{color:var(--cyan); font-style:normal;}
.heroH2{font-size:15px; color:rgba(255,255,255,0.45); margin-bottom:28px; letter-spacing:1px;}
.heroBody{font-size:14px; color:rgba(255,255,255,0.5); line-height:2.3; margin-bottom:44px; max-width:520px;}
.heroBtns{display:flex; gap:12px; flex-wrap:wrap;}
.btnPrimary{display:inline-flex; align-items:center; gap:8px; background:var(--cyan); color:var(--white); padding:14px 28px; font-size:13px; font-weight:500; letter-spacing:0.5px; border-radius:4px; transition:background 0.2s;}
.btnPrimary:hover{background:var(--cyan-dark);}
.btnPrimary::after{content:'→';}
.btnSecondary{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.7); padding:14px 28px; font-size:13px; border-radius:4px; transition:border-color 0.2s, color 0.2s;}
.btnSecondary:hover{border-color:rgba(255,255,255,0.5); color:var(--white);}
.btnSecondary::after{content:'→'; }

/* ヒーロー右（実績パネル） */
.heroRight{background:rgba(255,255,255,0.04); border-left:1px solid rgba(255,255,255,0.06); padding:64px 48px 64px 32px; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;}
.heroStatsLabel{font-size:9px; letter-spacing:4px; color:var(--cyan); margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.06); font-family:'Bebas Neue', sans-serif;}
.heroStat{padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:16px;}
.heroStat:last-child{border-bottom:none;}
.heroStatNum{font-family:'Bebas Neue', sans-serif; font-size:52px; color:var(--white); line-height:1; flex-shrink:0; min-width:100px;}
.heroStatNum span{font-size:18px; color:var(--cyan);}
.heroStatLabel{font-size:13px; color:rgba(255,255,255,0.75); font-weight:500; margin-bottom:3px;}
.heroStatSub{font-size:10px; color:rgba(255,255,255,0.3); letter-spacing:1px;}

/* ===== TRUST BAR ===== */
#trust{background:var(--cyan);}
.trustInner{max-width:1280px; margin:0 auto; padding:12px 64px; display:flex; align-items:center; gap:0;}
.trustItem{display:flex; align-items:center; gap:8px; padding:4px 28px; border-right:1px solid rgba(255,255,255,0.2);}
.trustItem:first-child{padding-left:0;}
.trustItem:last-child{border-right:none;}
.trustCheck{color:rgba(255,255,255,0.9); font-size:13px; flex-shrink:0;}
.trustText{font-size:11px; color:rgba(255,255,255,0.9); white-space:nowrap; font-weight:500;}

/* ===== REASON ===== */
.reasonGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.reasonCard{background:var(--white); border:1px solid var(--rule); border-radius:8px; padding:32px 28px; position:relative; overflow:hidden; transition:box-shadow 0.25s, transform 0.25s;}
.reasonCard:hover{box-shadow:0 8px 32px rgba(13,43,62,0.08); transform:translateY(-2px);}
.reasonCard::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--cyan), var(--cyan-dark));}
.reasonNum{font-family:'Bebas Neue', sans-serif; font-size:11px; letter-spacing:4px; color:var(--cyan); margin-bottom:16px;}
.reasonTitle{font-family:'Noto Serif JP', serif; font-size:17px; font-weight:700; color:var(--navy); margin-bottom:12px; line-height:1.55;}
.reasonBody{font-size:13px; color:var(--gray); line-height:2;}

/* ===== BUSINESS ===== */
.bizGrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;}
.bizCard{background:var(--navy2); border:1px solid rgba(255,255,255,0.06); border-radius:10px; overflow:hidden; transition:border-color 0.2s, box-shadow 0.2s;}
.bizCard:hover{border-color:rgba(0,181,217,0.3); box-shadow:0 8px 40px rgba(0,0,0,0.2);}
.bizHead{padding:28px 36px; display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid rgba(255,255,255,0.06);}
.bizHeadNe{background:linear-gradient(135deg, var(--cyan-dark), var(--cyan)); }
.bizHeadBp{background:linear-gradient(135deg, var(--navy), var(--navy3)); }
.bizCat{font-size:9px; letter-spacing:3px; color:rgba(255,255,255,0.6); margin-bottom:6px;}
.bizTitle{font-family:'Noto Serif JP', serif; font-size:20px; font-weight:700; color:var(--white);}
.bizYears{font-family:'Bebas Neue', sans-serif; font-size:56px; color:rgba(255,255,255,0.12); line-height:1;}
.bizBody{padding:28px 36px;}
.bizText{font-size:13px; color:rgba(255,255,255,0.5); line-height:2.2; margin-bottom:20px;}
.bizTags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px;}
.bizTag{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); font-size:11px; padding:3px 10px; color:rgba(255,255,255,0.5); border-radius:3px;}
.bizLink{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--cyan); font-weight:500; transition:gap 0.2s;}
.bizLink:hover{gap:10px;}
.bizLink::after{content:'→';}
.bizHeadShop{background:linear-gradient(135deg, #1a3a2a, #0f4a30);}
.bizShopIcon{font-size:32px; margin-bottom:8px; opacity:0.7;}
.bizShopLinks{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.bizShopLink{display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:4px; font-size:12px; font-weight:500; transition:opacity 0.2s; text-decoration:none;}
.bizShopLink:hover{opacity:0.8;}
.bizShopLink.rakuten{background:#BF0000; color:#fff;}
.bizShopLink.yahoo{background:#FF0033; color:#fff;}
.bizShopLink.amazon{background:#FF9900; color:#111;}
.bizShopLinkIcon{font-size:15px; flex-shrink:0;}

/* ===== NEWS ===== */
.newsList{border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin-bottom:24px;}
.newsItem{display:grid; grid-template-columns:110px 80px 1fr 20px; gap:20px; align-items:center; padding:16px 24px; border-bottom:1px solid var(--rule); background:var(--white); transition:background 0.2s; cursor:pointer;}
.newsItem:last-child{border-bottom:none;}
.newsItem:hover{background:var(--cyan-light);}
.newsDate{font-size:12px; color:var(--gray); white-space:nowrap;}
.newsTag{display:inline-block; font-size:10px; letter-spacing:1px; padding:2px 8px; border-radius:3px; white-space:nowrap; text-align:center;}
.newsTagCyan{color:var(--cyan-dark); background:var(--cyan-light); border:1px solid rgba(0,181,217,0.2);}
.newsTagRed{color:var(--red-dark); background:var(--red-light); border:1px solid rgba(248,68,98,0.2);}
.newsTagNavy{color:var(--navy); background:var(--gray-light); border:1px solid var(--rule);}
.newsTitle{font-size:14px; color:var(--text); transition:color 0.2s;}
.newsItem:hover .newsTitle{color:var(--cyan-dark);}
.newsArrow{font-size:12px; color:var(--rule); transition:color 0.2s;}
.newsItem:hover .newsArrow{color:var(--cyan);}
.newsMore{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--cyan); font-weight:500; border:1px solid var(--cyan); padding:8px 20px; border-radius:4px; transition:background 0.2s, color 0.2s;}
.newsMore:hover{background:var(--cyan); color:var(--white);}
.newsMore::after{content:'→';}

/* ===== RECRUIT BAND ===== */
#recruit{background:var(--bg); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:64px 0;}
.recruitInner{max-width:1280px; margin:0 auto; padding:0 64px; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center;}
.recruitLabel{font-size:16px; letter-spacing:4px; color:var(--cyan); margin-bottom:10px; font-family:'Bebas Neue', sans-serif;}
.recruitTitle{font-family:'Noto Serif JP', serif; font-size:clamp(18px, 2vw, 24px); font-weight:700; color:var(--navy); margin-bottom:8px; line-height:1.5;}
.recruitTitle em{color:var(--cyan); font-style:normal;}
.recruitBody{font-size:13px; color:var(--gray); line-height:1.9;}
.recruitBtns{display:flex; flex-direction:column; gap:12px;}
.recruitBtn{display:inline-flex; align-items:center; justify-content:space-between; gap:16px; background:var(--navy); color:var(--white); padding:16px 28px; font-size:13px; font-weight:500; letter-spacing:0.5px; border-radius:4px; white-space:nowrap; transition:background 0.25s, transform 0.25s, box-shadow 0.25s;}
.recruitBtn::after{content:'→'; display:inline-block; transition:transform 0.25s ease;}
.recruitBtn:hover{background:var(--cyan-dark); transform:translateY(-3px); box-shadow:0 8px 24px rgba(13,43,62,0.2);}
.recruitBtn:hover::after{transform:translateX(6px);}
.recruitBtn.secondary{background:transparent; color:var(--navy); border:2px solid var(--navy);}
.recruitBtn.secondary:hover{background:var(--navy); color:var(--white); transform:translateY(-3px); box-shadow:0 8px 24px rgba(13,43,62,0.2);}

/* ===== ACTIVITY ===== */
#activity{background:var(--white); }
.activityGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.activityCard{border:1px solid var(--rule); border-radius:8px; padding:24px 22px; display:flex; flex-direction:column; gap:10px; transition:box-shadow 0.2s, transform 0.2s; position:relative; overflow:hidden; background:var(--white); text-decoration:none; color:inherit;}
.activityCard:hover{box-shadow:0 6px 24px rgba(13,43,62,0.08); transform:translateY(-2px);}
.activityCard::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(to bottom, var(--cyan), var(--cyan-dark));}
.activityBadge{display:inline-flex; align-items:center; gap:5px; background:var(--cyan-light); border:1px solid rgba(0,181,217,0.2); border-radius:3px; padding:3px 10px; font-size:10px; letter-spacing:1px; color:var(--cyan-dark); width:fit-content; font-weight:500;}
.activityTitle{font-family:'Noto Serif JP', serif; font-size:14px; font-weight:700; color:var(--navy); line-height:1.55;}
.activityBody{font-size:12px; color:var(--gray); line-height:1.9; flex:1;}
.activityLink{font-size:11px; color:var(--cyan); display:flex; align-items:center; gap:4px; margin-top:4px;}
.activityLink::after{content:'→';}

/* ===== IMAGE STYLES ===== */
.heroBgImg{position:absolute; inset:0; background-image:url("./../images/hero_bg.jpg"); background-size:cover; background-position:center; opacity:0.18; pointer-events:none;}
.reasonCardImg{width:100%; height:148px; object-fit:cover; border-radius:4px; margin-bottom:20px; display:block;}
.bizCardImgWrap{position:relative; overflow:hidden;}
.bizCardImg{width:100%; height:200px; object-fit:cover; display:block; opacity:0.4; mix-blend-mode:luminosity; transition:opacity 0.3s;}
.bizCard:hover .bizCardImg{opacity:0.5;}
.bizCardImgWrap .bizHead{position:absolute;bottom:0; left:0; right:0; border-bottom:none;}
.bizCardImgWrap .bizHead.bizHeadNe{background:linear-gradient(to top, rgba(0,120,160,0.98) 0%, transparent 100%);}
.bizCardImgWrap .bizHead.bizHeadBp{background:linear-gradient(to top, rgba(10,28,46,0.98) 0%, transparent 100%);}
.recruitBgImg{position:absolute; inset:0; background-image:url('./../images/recruit.JPG'); background-size:cover; background-position:center top; opacity:0.1; pointer-events:none;}

/* ===== INLINE STYLE 移行クラス ===== */
.statIconWrap{display:block; flex-shrink:0;}
.statNumLg{font-size:28px; min-width:100px; padding-top:8px;}
.trustBarRow{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px;}
.trustBarLink{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--cyan); border:1px solid rgba(0,181,217,0.2); padding:6px 14px; border-radius:3px;}
.trustCardPad{padding:28px 36px 20px;}
.trustCardNote{font-size:12px; color:rgba(255,255,255,0.6); border-top:1px solid rgba(255,255,255,0.1); margin-top:16px; padding-top:12px;}
.recruitSection{position:relative; overflow:hidden;}

/* ===== RESPONSIVE ===== */
@media screen and (max-width:1024px){
 .activityGrid{grid-template-columns:repeat(2, 1fr);}
 .headerHamburger{display:flex;}
 .headerTel{display:none;}
 .trustInner{padding:12px 24px; flex-wrap:wrap; gap:4px;}
 .trustItem{padding:4px 14px;}
 #hero{grid-template-columns:1fr; margin-top:71px;}
 .heroRight{display:none;}
 .heroLeft{padding:56px 24px;}
 .reasonGrid{grid-template-columns:1fr; gap:16px;}
 .bizGrid{grid-template-columns:1fr 1fr; gap:16px;}
 .newsItem{grid-template-columns:90px 70px 1fr;}
 .newsArrow{display:none;}
 .recruitInner{grid-template-columns:1fr; gap:24px;}
}

@media screen and (max-width:640px){
 .activityGrid{grid-template-columns:1fr;}
 .heroH1{font-size:28px;}
 .heroBtns{flex-direction:column;}
 .btnPrimary, .btnSecondary{justify-content:center;}
 .trustInner{display:none;} /* SPでは非表示にして別途表示 */
 .newsItem{grid-template-columns:1fr; gap:6px;}
 .newsDate{font-size:11px;}
 .pageTop{bottom:16px; right:16px;}
}