/*
========================================================
ファイル名    ：hero.css
管理番号　　：No.018
内容　　　　：Heroセクション専用CSS
バージョン　：Ver4.1
更新日　　　：2026-07-29
========================================================
*/
.hero{padding:40px 0}
.hero-top{width:100%;display:block;margin-bottom:30px}
.hero-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hero-cards img{width:100%;display:block;transition:.25s}
.hero-cards a:hover img{transform:translateY(-6px)}
@media(max-width:991px){.hero-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){
    .hero-cards{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
    .hero-card{padding:12px;border-radius:16px;}
}


.hero-card{
position:relative;
display:block;
background:#fff;
border-radius:20px;
padding:18px;
box-shadow:0 10px 25px rgba(0,0,0,.08),0 18px 40px rgba(0,0,0,.06);
transition:transform .3s ease,box-shadow .3s ease;
overflow:hidden;
}
.hero-card__badge{
position:absolute;
top:12px;
right:12px;
z-index:2;
padding:5px 10px;
color:#fff;
background:#0d6efd;
border-radius:999px;
box-shadow:0 3px 9px rgba(0,0,0,.15);
font-size:.78rem;
font-weight:700;
line-height:1;
}
.hero-card__badge--manga{
background:#e62117;
}
.hero-card__badge--partner{
background:#16835f;
}
.hero-card__badge--service{
background:#136ca5;
}
.hero-card--gateway{
display:flex;
align-items:center;
gap:18px;
min-height:220px;
padding:24px !important;
color:#071d50;
text-decoration:none;
}
.hero-card--gateway:hover,
.hero-card--gateway:focus-visible{
color:#071d50;
text-decoration:none;
}
.hero-card__gateway-icon{
display:grid;
flex:0 0 86px;
width:86px;
height:86px;
place-items:center;
color:#0d6efd;
background:#edf4ff;
border-radius:50%;
font-size:2.8rem;
}
.hero-card--gateway-manga .hero-card__gateway-icon{
color:#e62117;
background:#fff0ef;
}
.hero-card--gateway-partner .hero-card__gateway-icon{
color:#16835f;
background:#edf9f5;
}
.hero-card--gateway-service .hero-card__gateway-icon{
color:#136ca5;
background:#edf7fc;
}
.hero-card__gateway-copy{
display:flex;
min-width:0;
flex-direction:column;
text-align:left;
}
.hero-card__gateway-copy strong{
color:#073894;
font-size:clamp(1.15rem,1.75vw,1.65rem);
font-weight:800;
line-height:1.35;
}
.hero-card__gateway-copy small{
margin-top:10px;
color:#39465c;
font-size:1rem;
font-weight:500;
line-height:1.7;
}
.hero-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15),0 0 20px rgba(0,102,255,.12);
}
.hero-card img{
width:100%;
display:block;
background:transparent;
}


/* ===== Ver2.1 Mobile 2-column fix ===== */
.hero-cards{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}
.hero-card{
    min-width:0;
}
.hero-card img{
    width:100%;
    height:auto;
}

@media (max-width:991px){
    .hero-cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:16px;
    }
}

@media (max-width:576px){
    .hero-cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px;
    }
    .hero-card{
        padding:10px;
        border-radius:14px;
    }
}



/* ===== Ver3 Card image enlargement ===== */
.hero-card{
    padding:8px !important;
}

.hero-card img{
    width:100% !important;
    height:auto;
    transform:scale(1.12);
    transform-origin:center;
}

.hero-card:hover img{
    transform:scale(1.12) translateY(-4px);
}

@media (max-width:991px){
    .hero-card{
        padding:6px !important;
    }
    .hero-card--gateway{
        min-height:190px;
        padding:20px !important;
    }
}

@media (max-width:576px){
    .hero-card{
        padding:4px !important;
    }
    .hero-card--gateway{
        display:block;
        min-height:190px;
        padding:18px 12px !important;
        text-align:center;
    }
    .hero-card__gateway-icon{
        width:58px;
        height:58px;
        margin:8px auto 10px;
        font-size:1.9rem;
    }
    .hero-card__gateway-copy{
        align-items:center;
        text-align:center;
    }
    .hero-card__gateway-copy strong{
        font-size:1rem;
    }
    .hero-card__gateway-copy small{
        margin-top:8px;
        font-size:.88rem;
        line-height:1.6;
    }
    .hero-card__badge{
        top:7px;
        right:7px;
        padding:4px 7px;
        font-size:.68rem;
    }

    .hero-card img{
        transform:scale(1.16);
    }
}