@charset "UTF-8";

/* ==========================================================
   Influence+
   common.css
========================================================== */

/* ----------------------------------------------------------
   CSS Variables
---------------------------------------------------------- */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#38bdf8;
    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --white:#ffffff;

    --text:#1e293b;
    --text-light:#64748b;

    --border:#e2e8f0;

    --bg:#f8fafc;
    --bg-gray:#f1f5f9;

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --shadow:0 10px 30px rgba(15,23,42,.08);
    --shadow-lg:0 20px 50px rgba(15,23,42,.12);

    --radius:18px;
    --radius-sm:12px;
    --radius-lg:26px;

    --transition:.3s ease;

    --container:1280px;

}

/* ----------------------------------------------------------
   Base
---------------------------------------------------------- */

body{
    background:var(--bg);
    color:var(--text);
    font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
    font-size:16px;
    line-height:1.8;
}

main{
    overflow:hidden;
}

a{
    transition:var(--transition);
}

img{
    user-select:none;
}

.container{
    width:min(100% - 40px,var(--container));
    margin:auto;
}

/* ----------------------------------------------------------
   Section
---------------------------------------------------------- */

.section{
    padding:100px 0;
}

.section--gray{
    background:var(--bg-gray);
}

.section--primary{
    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );
    color:#fff;
}

/* ----------------------------------------------------------
   Typography
---------------------------------------------------------- */

h1{
    font-size:clamp(2.3rem,5vw,4rem);
    line-height:1.2;
    font-weight:700;
}

h2{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.3;
    font-weight:700;
}

h3{
    font-size:1.35rem;
    font-weight:700;
}

p{
    color:var(--text-light);
}

/* ----------------------------------------------------------
   Section Title
---------------------------------------------------------- */

.section__title{
    text-align:center;
    margin-bottom:60px;
}

.section__title h2{
    margin-bottom:12px;
}

.section__title p{
    font-size:1rem;
}

.section__title--white p{
    color:rgba(255,255,255,.8);
}

/* ----------------------------------------------------------
   Grid
---------------------------------------------------------- */

.card-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.job-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.company-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.feature-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));
    gap:35px;
}

/* ----------------------------------------------------------
   Badge
---------------------------------------------------------- */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    border-radius:999px;
    background:#dbeafe;
    color:var(--primary);
    font-size:.85rem;
    font-weight:700;
}

/* ----------------------------------------------------------
   Card
---------------------------------------------------------- */

.card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

/* ----------------------------------------------------------
   Utility
---------------------------------------------------------- */

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.mt-20{
    margin-top:20px;
}

.mt-40{
    margin-top:40px;
}

.mt-60{
    margin-top:60px;
}

.mb-20{
    margin-bottom:20px;
}

.mb-40{
    margin-bottom:40px;
}

.mb-60{
    margin-bottom:60px;
}

.pt-80{
    padding-top:80px;
}

.pb-80{
    padding-bottom:80px;
}

/* ----------------------------------------------------------
   Animation
---------------------------------------------------------- */

.fade-up{
    opacity:0;
    transform:translateY(30px);
    transition:.8s ease;
}

.fade-up.is-show{
    opacity:1;
    transform:none;
}

/* ----------------------------------------------------------
   Scrollbar
---------------------------------------------------------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#edf2f7;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary-dark);
}