/* ==========================
   PC
========================== */

.menu-toggle{
    display:none;
}


/* ==========================
   スマホ対応
========================== */

@media screen and (max-width:768px){

    /* ==========================
       共通
    ========================== */

    .container{
        width:94%;
        max-width:none;
        margin:0 auto;
    }

    section{
        padding-top:30px;
        padding-bottom:30px;
    }

    .section-en{
        font-size:12px;
        line-height:1.2;
        letter-spacing:5px;
        margin-bottom:8px;
    }

    .section-title{
        font-size:28px;
        line-height:1.25;
        margin-bottom:18px;
    }


    /* ==========================
       Header / Menu
    ========================== */

    nav{
        display:none;
    }

    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:space-between;

        width:38px;
        height:28px;

        background:none;
        border:none;
        padding:0;

        cursor:pointer;
    }

    .menu-toggle span{
        display:block;

        width:100%;
        height:3px;

        background:#ffffff;
        border-radius:3px;
    }

    nav.open{
        display:block;

        position:absolute;
        top:100%;
        left:0;

        width:100%;

        background:rgba(11,45,99,0.94);

        padding:18px 0;

        backdrop-filter:blur(8px);
    }

    nav.open ul{
        display:flex;
        flex-direction:column;
        align-items:center;

        gap:16px;
    }

    nav.open ul li a{
        color:#ffffff;
        font-size:15px;
    }


    /* ==========================
       Hero
    ========================== */

    .hero{
        min-height:100vh;
    }

    .hero-content{
        width:100%;
        padding:0 18px;
    }

    .hero h1{
        font-size:56px;
        line-height:1;
    }

    .hero h2{
        font-size:30px;
        line-height:1.3;
        margin-top:18px;
    }

    .hero p{
        font-size:16px;
        line-height:1.7;
        margin-top:24px;
    }

    .button-area{
        flex-direction:column;
        align-items:center;
        gap:12px;

        margin-top:24px;
    }

    .btn-main,
    .btn-sub{
        width:100%;
        max-width:320px;

        text-align:center;
    }


    /* ==========================
       Schedule
    ========================== */

    .schedule{
        padding:28px 0 30px;
    }

    .schedule .container{
        width:94%;
    }

    .schedule .section-title{
        font-size:27px;
        margin-bottom:16px;
    }

    .schedule-info{
        width:100%;
        max-width:none;

        margin:0 auto;
        padding:8px 14px;

        border-radius:14px;
    }

    .schedule-item{
        display:grid;

        grid-template-columns:36px minmax(0,1fr);

        column-gap:12px;
        align-items:center;

        min-height:66px;

        width:100%;
        max-width:none;

        margin:0;
    }

    .schedule-item:not(:last-child){
        border-bottom:1px solid #e2e8f0;
    }

    .schedule-icon{
        width:32px;
        height:32px;
    }

    .schedule-icon svg{
        width:16px;
        height:16px;
    }

    .schedule-item:not(:last-child) .schedule-icon::after{
        top:32px;
        height:34px;
    }

    .schedule-content{
        width:100%;
        min-width:0;
    }

    .schedule-label{
        display:block;

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

        letter-spacing:2.5px;

        margin-bottom:2px;
    }

    .schedule-value{
        font-size:15px;
        font-weight:700;

        line-height:1.3;

        white-space:nowrap;
    }

    .schedule-date{
        display:flex;
        align-items:center;

        flex-wrap:nowrap;

        gap:4px;

        white-space:nowrap;
    }

    .schedule-date strong{
        font-size:17px;
    }

    .day{
        width:20px;
        height:20px;

        font-size:10px;

        border-radius:4px;

        flex-shrink:0;
    }

    .schedule-arrow{
        font-size:16px;

        margin:0 1px;

        flex-shrink:0;
    }

    .schedule-item:nth-child(3) .schedule-value{
        font-size:14px;
        letter-spacing:-0.4px;
    }


    /* ==========================
       Concept
    ========================== */

    .concept{
        padding:30px 0;
    }

    .concept .container{
        width:94%;
    }

    .concept-title{
        font-size:22px;
        line-height:1.3;

        white-space:nowrap;

        text-align:center;
        letter-spacing:-0.5px;

        margin-bottom:10px;
    }

    .concept-catch{
        font-size:17px;
        line-height:1.4;

        white-space:nowrap;

        text-align:center;

        margin-top:10px;
        margin-bottom:20px;
    }

    .concept-text{
        font-size:14px;
        line-height:1.85;

        margin-top:20px;
    }


    /* ==========================
       Mission
    ========================== */

    .mission{
        padding:30px 0;
    }

    .mission .container{
        width:94%;
    }

    .mission-title{
        font-size:26px;
        line-height:1.3;

        text-align:center;

        margin-bottom:10px;
    }

    .mission-catch{
        font-size:18px;
        line-height:1.4;

        text-align:center;

        margin-top:10px;
    }

    .mission-text{
        margin-top:22px;
    }

    .mission-copy{
        font-size:14px;
        line-height:1.85;

        text-align:center;
    }

    .mission-copy strong{
        display:block;

        font-size:17px;

        margin-top:8px;
    }

    .mission-text > p:last-child{
        font-size:14px;
        line-height:1.85;

        text-align:center;

        margin-top:18px;
    }


   /* ==========================
   Products
========================== */

.products{
    padding:30px 0;
}

.products .container{
    width:94%;
}

.products .section-title{
    font-size:28px;
    margin-bottom:20px;
}


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

.product-grid{
    grid-template-columns:1fr;
    gap:18px;
}


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

.product-card{
    padding:18px;
    border-radius:16px;
}


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

.product-card img{
    display:block;

    width:100%;
    height:auto;
    max-height:250px;

    object-fit:contain;

    margin:0 auto 12px;

    flex-shrink:0;
}


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

.product-card h3{
    font-size:23px;
    line-height:1.35;

    flex:none;
    min-height:0;
    height:auto;

    margin:6px 0 14px;

    /* スマホは中央揃え */
    text-align:center;
}


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

.product-card h4,
.product-catch{
    font-size:21px;
    line-height:1.5;

    flex:none;
    min-height:0;
    height:auto;

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

    /* キャッチ全体を中央へ */
    text-align:center;
}


/* キャッチ1行目 */

.product-catch-first{
    display:block;
    white-space:nowrap;

    text-align:center;

    /* 中央から約1文字分左へ */
    transform:translateX(-2.5em);
}


.product-catch-second{
    display:block;
    width:100%;

    text-align:center;

    /* 中央から約1文字分右へ */
    transform:translateX(2.5em);

    margin-top:2px;
    padding-right:0;

    box-sizing:border-box;
}

/* 黄色マーカー */

.catch-highlight{
    padding:0 2px;
}


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

.product-card p{
    font-size:14px;
    line-height:1.75;

    margin:0;
}

/* PP4060・BSチェッカーだけキャッチ位置を調整 */

.product-card.catch-long .product-catch-first{
    transform:translateX(-3.5em);
}

.product-card.catch-long .product-catch-second{
    transform:translateX(1.0em);
}

/* ==========================
   IritoDe
   SMARTPHONE
========================== */

@media (max-width:768px){

    /* 全体 */
    .irito-special{
        margin-top:22px;
        padding:20px 18px 24px;

        border-radius:16px;
    }


    /* 注目展示 */
    .irito-special-label{
        display:flex;
        align-items:center;

        gap:14px;

        margin-bottom:20px;
    }

    .irito-label-jp{
        font-size:17px;
        line-height:1.3;

        letter-spacing:1px;

        padding:8px 14px;
    }

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

        line-height:1.4;

        letter-spacing:3px;
    }


    /* ==========================
       並び順を縦1列に変更
    ========================== */

    .irito-main{
        display:flex;
        flex-direction:column;

        gap:0;

        width:100%;
    }


    /* ==========================
       ① IritoDe文字画像
    ========================== */

    .irito-brand{
        order:1;

        width:100%;

        margin:0 0 18px;
    }

    .irito-logo{
        display:block;

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

        height:auto;

        margin:0 auto;
    }


    /* ==========================
       ② PC・RFID機器の図
    ========================== */

    .irito-visual{
        order:2;

        display:flex;

        width:100%;

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

        gap:10px;

        margin:0 0 24px;
    }

    .irito-pc{
        width:68%;
        max-height:none;

        object-fit:contain;
    }

    .irito-devices{
        display:flex;

        width:27%;

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

        gap:4px;
    }

    .irito-scanner{
        width:48%;
        max-height:120px;

        object-fit:contain;
    }

    .irito-reader{
        width:52%;
        max-height:105px;

        object-fit:contain;
    }


    /* ==========================
       ③ キャッチ＋説明
    ========================== */

    .irito-copy{
        order:3;

        width:100%;

        padding:0;

        border-left:none;
    }


    /* キャッチ */
    .irito-catch{
        font-size:27px;

        line-height:1.4;

        text-align:center;

        margin:0 0 18px;
    }

    .irito-catch span{
        display:inline-block;
    }


    /* 説明文 */
    .irito-description{
        padding-top:16px;

        border-top:2px solid #e4edf7;
    }

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

        line-height:1.8;

        margin:0 0 5px;
    }

}



    /* ==========================
       Access
    ========================== */

    .access{
        padding:28px 0 30px;
    }

    .access .container{
        width:96%;
        max-width:none;
    }

    .access .section-en{
        font-size:11px;
        letter-spacing:5px;

        margin-bottom:7px;
    }

    .access .section-title{
        font-size:27px;

        margin-bottom:18px;
    }

    .access-box{
        display:flex;
        flex-direction:column;

        gap:14px;
    }

    .access-map{
        width:100%;
    }

    .access-map iframe{
        display:block;

        width:100%;
        height:190px;

        border-radius:12px;
    }

    .access-info{
        width:100%;

        padding:0 4px;
    }

    .access-info h3{
        font-size:17px;
        line-height:1.4;

        white-space:nowrap;

        margin:0 0 12px;
    }

    .access-info p{
        font-size:13px;
        line-height:1.65;

        margin:0 0 10px;
    }

    .access-info strong{
        font-size:14px;
    }


/* ==========================
   Contact
========================== */

.contact{
    padding:28px 0 22px;
}

.contact .container{
    width:94%;
}


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

.contact .section-en{
    font-size:11px;
    letter-spacing:5px;

    margin-bottom:6px;
}

.contact .section-title{
    font-size:28px;
    line-height:1.3;

    margin-bottom:14px;
}


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

.contact .contact-text{
    font-size:14px;
    line-height:1.75;

    margin:0 auto 16px;
}


/* ==========================
   RESERVATION BUTTON
========================== */

.contact-buttons{
    flex-direction:column;

    gap:10px;

    margin-top:16px;
    margin-bottom:18px;
}

.contact-btn{
    width:100%;

    min-height:auto;

    padding:15px 18px;

    font-size:17px;
    line-height:1.4;
}


/* ==========================
   CONTACT INFO
========================== */

.contact-info{
    margin-top:0;

    display:flex;
    flex-direction:column;

    gap:18px;
}


/* TEL / MAIL 各ブロック */
.contact-item{
    margin:0;
    padding:0;
}


/* TEL / MAIL 見出し */
.contact-item h3{
    font-size:18px;
    line-height:1.3;

    margin:0 0 6px;

    letter-spacing:2px;
}


/* 電話番号・メールアドレス */
.contact-item p{
    font-size:18px;
    line-height:1.4;

    margin:0;
}


    /* ==========================
       Footer
    ========================== */

    footer{
        padding:20px 0;
    }

    footer p{
        font-size:11px;
        line-height:1.6;
    }

}


/* ==========================
   スクロール後のメニュー
========================== */

.header.scrolled nav.open{
    background:rgba(255,255,255,0.98);
    backdrop-filter:none;
}

.header.scrolled nav.open ul li a{
    color:#0b2d63;
}

.header.scrolled .menu-toggle span{
    background:#0b2d63;
}