/* ==========================
   PRODUCTS
========================== */

.products{
    padding:60px 0;
    background:#ffffff;
}


/* ==========================
   SECTION HEADING
========================== */

.section-heading{
    text-align:center;
    margin-bottom:50px;
}

.section-en{
    font-size:15px;
    letter-spacing:8px;
    color:#1b6dd1;
    font-weight:700;
    margin-bottom:15px;
}

.section-title{
    font-size:48px;
    font-weight:700;
    color:#0b2d63;
    text-align:center;
    margin-bottom:20px;
}

.section-subtitle{
    font-size:22px;
    line-height:1.9;
    color:#666;
    text-align:center;
    margin-bottom:60px;
}


/* ==========================
   PRODUCT GRID
========================== */

.product-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:35px;
    align-items:stretch;
}


/* ==========================
   PRODUCT CARD
========================== */

.product-card{
    background:#ffffff;

    border:1px solid #e2e6eb;
    border-radius:22px;

    /* 32px 35px 35px → 圧縮 */
    padding:22px 28px 26px;

    box-shadow:0 7px 24px rgba(0,0,0,.055);

    display:flex;
    flex-direction:column;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.product-card:hover{
    transform:translateY(-7px);
    box-shadow:0 18px 40px rgba(0,0,0,.11);
}


/* ==========================
   PRODUCT IMAGE
========================== */

.product-card img{
    width:100%;

    /* 270px → 210px */
    height:210px;

    object-fit:contain;
    display:block;

    /* 25px → 14px */
    margin-bottom:14px;

    flex-shrink:0;
}


/* ==========================
   PRODUCT NAME
========================== */

.product-card h3{
    font-size:27px;
    line-height:1.4;

    font-weight:700;
    color:#0b2d63;

    /* 下の余白も圧縮 */
    margin:0 0 8px;

    /* 2行分は確保 */
    flex:0 0 68px;
}

/* ==========================
   CATCH COPY
========================== */

.product-catch{
    font-size:22px;
    line-height:1.5;

    font-weight:700;
    color:#1b6dd1;

    margin:0 0 16px;
    padding-bottom:14px;

    border-bottom:2px solid #e9eef5;

    /* 105px → 82px */
    flex:0 0 82px;

    box-sizing:border-box;
}


/* ==========================
   CATCH 1st LINE
========================== */

.product-catch-first{
    display:block;

    /* 1行目は必ず1行 */
    white-space:nowrap;
}


/* ==========================
   CATCH 2nd LINE
========================== */

.product-catch-second{
    display:block;

    width:100%;

    text-align:right;

    margin-top:4px;
    padding-right:8px;

    box-sizing:border-box;
}


/* ==========================
   YELLOW BRUSH HIGHLIGHT
========================== */

.catch-highlight{
    position:relative;

    display:inline-block;

    z-index:1;

    color:#1b6dd1;

    font-weight:800;

    padding:0 3px;
}


/* メインの黄色い筆跡 */
.catch-highlight::before{
    content:"";

    position:absolute;

    z-index:-1;

    left:-5px;
    right:-5px;

    top:16%;
    bottom:9%;

    background:#ffe24d;

    clip-path:polygon(
        0% 28%,
        3% 17%,
        7% 22%,
        11% 9%,
        16% 15%,
        21% 6%,
        27% 13%,
        33% 5%,
        39% 12%,
        45% 4%,
        51% 11%,
        57% 5%,
        63% 13%,
        69% 6%,
        75% 14%,
        81% 7%,
        87% 15%,
        93% 8%,
        100% 15%,

        97% 24%,
        100% 34%,
        96% 43%,
        100% 53%,
        97% 63%,
        100% 73%,
        96% 82%,
        99% 90%,

        93% 86%,
        87% 94%,
        80% 88%,
        74% 96%,
        67% 90%,
        60% 97%,
        53% 91%,
        46% 96%,
        39% 90%,
        32% 96%,
        25% 89%,
        18% 95%,
        11% 88%,
        5% 93%,
        0% 86%,

        4% 77%,
        0% 68%,
        4% 59%,
        1% 50%,
        5% 41%,
        1% 33%
    );

    transform:rotate(-1deg);
}


/* 筆のかすれ・重なり */
.catch-highlight::after{
    content:"";

    position:absolute;

    z-index:-1;

    left:-7px;
    right:1px;

    top:27%;

    height:50%;

    background:rgba(255,226,77,.55);

    clip-path:polygon(
        0% 22%,
        8% 8%,
        18% 16%,
        29% 5%,
        41% 15%,
        54% 7%,
        67% 14%,
        79% 5%,
        91% 15%,
        100% 10%,

        95% 76%,
        83% 92%,
        70% 83%,
        56% 95%,
        42% 85%,
        28% 93%,
        14% 82%,
        5% 90%
    );

    transform:rotate(.7deg);
}


/* ==========================
   PRODUCT DESCRIPTION
========================== */

.product-card p{
    font-size:16px;
    line-height:1.9;

    color:#555;

    margin:0;
}

/* ==========================================================
   IritoDe / SPECIAL EXHIBIT
========================================================== */

.irito-special{
    position:relative;

    margin-top:35px;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #ffffff 60%,
            #f4f9ff 100%
        );

    border:1px solid #dce6f2;
    border-radius:22px;

    padding:28px 32px 30px;

    box-shadow:0 7px 24px rgba(0,0,0,.055);

    overflow:hidden;
}


/* ==========================
   SPECIAL LABEL
========================== */

.irito-special-label{
    display:flex;

    align-items:center;

    gap:24px;

    margin-bottom:24px;
}

.irito-label-jp{
    display:inline-block;

    background:#0b4f9c;
    color:#ffffff;

    font-size:20px;
    font-weight:700;

    letter-spacing:2px;

    padding:9px 22px;

    border-radius:4px;
}

.irito-label-en{
    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    color:#1b6dd1;
}


/* ==========================
   MAIN LAYOUT
========================== */

.irito-main{
    display:grid;

    /* 左・中央を広く、右画像を小さく */
    grid-template-columns:
        1.05fr
        1.25fr
        0.8fr;

    gap:36px;

    align-items:center;
}


/* ==========================
   LEFT / BRAND
========================== */

.irito-brand{
    min-width:0;
}




/* ロゴ */

.irito-logo{
    display:block;

    width:100%;
    max-width:430px;

    height:auto;

    object-fit:contain;

    margin:0 0 14px;
}





/* ==========================
   CENTER / COPY
========================== */

.irito-copy{
    min-width:0;

    padding-left:32px;

    border-left:2px solid #e4edf7;
}


/* キャッチ */

.irito-catch{
    font-size:36px;

    line-height:1.3;

    font-weight:800;

    color:#0b2d63;

    margin:0 0 22px;
}

.irito-catch span{
    position:relative;

    display:inline-block;

    z-index:1;
}

.irito-catch span::before{
    content:"";

    position:absolute;

    z-index:-1;

    left:-5px;
    right:-5px;

    bottom:4px;

    height:43%;

    background:#ffe24d;

    transform:rotate(-1deg);

    clip-path:polygon(
        0% 25%,
        5% 10%,
        12% 18%,
        20% 5%,
        30% 15%,
        40% 4%,
        50% 14%,
        60% 6%,
        70% 15%,
        80% 5%,
        90% 14%,
        100% 8%,
        97% 88%,
        88% 80%,
        78% 94%,
        68% 84%,
        58% 95%,
        48% 85%,
        38% 94%,
        28% 84%,
        18% 95%,
        8% 85%,
        0% 92%
    );
}


/* 説明 */

.irito-description{
    padding-top:18px;

    border-top:1px solid #e4edf7;
}

.irito-description p{
    font-size:15px;

    line-height:1.75;

    color:#555;

    margin:0 0 5px;
}

.irito-description p:last-child{
    margin-bottom:0;
}


/* ==========================
   RIGHT / VISUAL
========================== */

.irito-visual{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:14px;

    min-width:0;
}


/* PC画面 */

.irito-pc{
    width:68%;

    max-height:190px;

    object-fit:contain;

    display:block;
}


/* RFID機器 */

.irito-devices{
    width:28%;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;
}

.irito-scanner{
    width:46%;

    max-height:145px;

    object-fit:contain;
}

.irito-reader{
    width:54%;

    max-height:125px;

    object-fit:contain;
}


/* ==========================
   TABLET
========================== */

@media (max-width:1000px){

    .irito-main{
        grid-template-columns:1fr 1fr;

        gap:28px;
    }

    .irito-visual{
        grid-column:1 / -1;
    }

    .irito-pc{
        width:55%;
    }

    .irito-devices{
        width:22%;
    }

}