/*==================================================
Theme : JB Theme
File  : assets/css/main.css
Part 1
==================================================*/


/*======================================
Variables
======================================*/

:root{

    --color-primary:#0B3A6E;
    --color-secondary:#1565C0;
    --color-accent:#F57C00;

    --color-white:#ffffff;
    --color-black:#222222;
    --color-gray:#666666;

    --color-bg:#f7f9fc;
    --color-border:#e5e7eb;

    --container:1200px;

    --radius:12px;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

    --transition:.35s ease;

}


/*======================================
Reset
======================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
    "Noto Sans JP",
    sans-serif;

    font-size:16px;

    line-height:1.8;

    color:var(--color-black);

    background:#fff;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

button{

    cursor:pointer;

    border:none;

    background:none;

}

input,
textarea{

    font:inherit;

}


/*======================================
Common
======================================*/

.container{

    width:min(100% - 40px,var(--container));

    margin-inline:auto;

}

section{

    padding:100px 0;

}

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading__en{

    display:inline-block;

    color:var(--color-accent);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.2em;

    margin-bottom:12px;

}

.section-heading__title{

    font-size:2.5rem;

    font-weight:700;

    color:var(--color-primary);

    margin-bottom:20px;

}

.section-heading__lead{

    max-width:760px;

    margin:auto;

    color:var(--color-gray);

}


/*======================================
Button
======================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 36px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn--primary{

    color:#fff;

    background:var(--color-accent);

}

.btn--primary:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}

.btn--secondary{

    color:#fff;

    border:2px solid #fff;

}

.btn--secondary:hover{

    background:#fff;

    color:var(--color-primary);

}


/*======================================
Header Top
======================================*/

.site-header{

    position:fixed;

    inset:0 0 auto 0;

    z-index:9999;

    background:#fff;

    box-shadow:0 2px 20px rgba(0,0,0,.05);

}

.header-top{

    background:var(--color-primary);

    color:#fff;

    font-size:14px;

}

.header-top .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:42px;

}

.header-copy{

    font-size:.85rem;

}

.header-contact{

    display:flex;

    align-items:center;

    gap:20px;

}

.tel{

    display:flex;

    align-items:center;

    gap:12px;

}

.tel strong{

    display:block;

    font-size:1.15rem;

}

.tel small{

    display:block;

    opacity:.8;

    font-size:.75rem;

}

.contact-btn{

    background:var(--color-accent);

    color:#fff;

    padding:12px 24px;

    border-radius:999px;

    font-weight:700;

}

.contact-btn:hover{

    transform:translateY(-2px);

}


/*======================================
Header Main
======================================*/

.header-main{

    background:#fff;

}

.header-main .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:92px;

}

.logo img{

    max-height:60px;

}


/*======================================
Global Navigation
======================================*/

.global-nav{

    margin-left:auto;

}

.global-menu{

    display:flex;

    gap:42px;

}

.global-menu>li>a{

    position:relative;

    display:block;

    padding:10px 0;

    font-weight:700;

}

.global-menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--color-accent);

    transition:var(--transition);

}

.global-menu>li>a:hover::after{

    width:100%;

}

.global-menu>li.current-menu-item>a{

    color:var(--color-primary);

}


/*======================================
Hamburger
======================================*/

.hamburger{

    width:48px;

    height:48px;

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

}

.hamburger span{

    width:28px;

    height:2px;

    background:var(--color-primary);

    transition:var(--transition);

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:180px 0 120px;

    color:#fff;

}

.hero__bg{

    position:absolute;

    inset:0;

    z-index:-3;

}

.hero__bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:heroZoom 18s ease-in-out infinite alternate;

}

.hero__overlay{

    position:absolute;

    inset:0;

    z-index:-2;

    background:
    linear-gradient(
        90deg,
        rgba(11,58,110,.85) 0%,
        rgba(11,58,110,.55) 40%,
        rgba(11,58,110,.20) 100%
    );

}

.hero__content{

    max-width:700px;

    animation:fadeUp 1.2s ease;

}

.hero__sub{

    display:inline-block;

    font-size:1rem;

    letter-spacing:.15em;

    font-weight:700;

    margin-bottom:20px;

    color:#ffffff;

}

.hero__title{

    font-size:clamp(3rem,7vw,5.5rem);

    line-height:1.15;

    font-weight:800;

    margin-bottom:30px;

}

.hero__text{

    font-size:1.1rem;

    line-height:2;

    max-width:620px;

    opacity:.95;

    margin-bottom:40px;

}

.hero__buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.hero .btn{

    min-width:220px;

}

.hero .btn--primary{

    background:var(--color-accent);

    color:#fff;

}

.hero .btn--primary:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}

.hero .btn--secondary{

    border:2px solid #fff;

    color:#fff;

}

.hero .btn--secondary:hover{

    background:#fff;

    color:var(--color-primary);

}


/*==================================================
Scroll Indicator
==================================================*/

.hero__scroll{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    font-size:.75rem;

    letter-spacing:.2em;

    font-weight:700;

    color:#fff;

}

.hero__scroll::after{

    content:"";

    display:block;

    width:1px;

    height:60px;

    background:#fff;

    margin:10px auto 0;

    animation:scrollLine 2s infinite;

}


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

@keyframes scrollLine{

    0%{

        transform:scaleY(0);

        transform-origin:top;

    }

    50%{

        transform:scaleY(1);

        transform-origin:top;

    }

    51%{

        transform-origin:bottom;

    }

    100%{

        transform:scaleY(0);

        transform-origin:bottom;

    }

}


/*==================================================
Reason Section
==================================================*/

.reason{

    background:var(--color-bg);

}

.reason__grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.reason-card{

    position:relative;

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:var(--transition);

}

.reason-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.reason-card__number{

    position:absolute;

    top:20px;

    left:20px;

    font-size:2rem;

    font-weight:800;

    color:rgba(245,124,0,.15);

}

.reason-card__icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.reason-card__icon img{

    max-width:70px;

    max-height:70px;

}

.reason-card__title{

    font-size:1.3rem;

    color:var(--color-primary);

    font-weight:700;

    margin-bottom:15px;

}

.reason-card__text{

    color:var(--color-gray);

    line-height:1.9;

}


/*==================================================
Section Entrance Animation
==================================================*/

.reason-card,
.hero__content{

    will-change:transform;

}


/*==================================================
Spacing Adjustment
==================================================*/

.hero + .reason{

    margin-top:0;

}

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

.products{

    background:#fff;

}

.products__grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:all .35s ease;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.product-card a{

    display:block;

    height:100%;

}

.product-card__image{

    overflow:hidden;

    aspect-ratio:16 / 9;

    background:#f5f5f5;

}

.product-card__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.product-card:hover .product-card__image img{

    transform:scale(1.08);

}

.product-card__body{

    padding:28px;

}

.product-card__body h3{

    font-size:1.35rem;

    color:var(--color-primary);

    margin-bottom:15px;

    font-weight:700;

}

.product-card__body p{

    color:var(--color-gray);

    line-height:1.9;

}

.products__button{

    margin-top:60px;

    text-align:center;

}


/*==================================================
Manufacturers
==================================================*/

.makers{

    background:var(--color-bg);

}

.makers__logos{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:24px;

    margin-bottom:60px;

}

.makers__item{

    background:#fff;

    border-radius:14px;

    padding:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:120px;

    border:1px solid var(--color-border);

    transition:.35s;

}

.makers__item:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.makers__item img{

    max-width:140px;

    max-height:60px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.85;

    transition:.3s;

}

.makers__item:hover img{

    filter:none;

    opacity:1;

}

.makers__info{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    padding:45px;

    border-radius:20px;

    background:var(--color-primary);

    color:#fff;

}

.makers__count{

    text-align:center;

}

.makers__count strong{

    display:block;

    font-size:4rem;

    font-weight:800;

    line-height:1;

    color:var(--color-accent);

}

.makers__count span{

    display:block;

    margin-top:12px;

    font-size:1rem;

    letter-spacing:.08em;

}

.makers__text{

    max-width:620px;

    font-size:1.05rem;

    line-height:2;

}

.makers__button{

    margin-top:50px;

    text-align:center;

}


/*==================================================
Card Hover Animation
==================================================*/

.product-card,
.makers__item{

    will-change:transform;

}


/*==================================================
Fade Animation
==================================================*/

.product-card{

    animation:fadeUp .8s ease both;

}

.product-card:nth-child(2){

    animation-delay:.1s;

}

.product-card:nth-child(3){

    animation-delay:.2s;

}

.product-card:nth-child(4){

    animation-delay:.3s;

}

.product-card:nth-child(5){

    animation-delay:.4s;

}

.product-card:nth-child(6){

    animation-delay:.5s;

}


/*==================================================
Logo Animation
==================================================*/

.makers__item{

    animation:fadeUp .8s ease both;

}

.makers__item:nth-child(2){animation-delay:.05s;}
.makers__item:nth-child(3){animation-delay:.10s;}
.makers__item:nth-child(4){animation-delay:.15s;}
.makers__item:nth-child(5){animation-delay:.20s;}
.makers__item:nth-child(6){animation-delay:.25s;}
.makers__item:nth-child(7){animation-delay:.30s;}
.makers__item:nth-child(8){animation-delay:.35s;}
.makers__item:nth-child(9){animation-delay:.40s;}
.makers__item:nth-child(10){animation-delay:.45s;}
.makers__item:nth-child(11){animation-delay:.50s;}
.makers__item:nth-child(12){animation-delay:.55s;}


/*==================================================
Section Spacing
==================================================*/

.products + .makers{

    margin-top:0;

}

/*==================================================
Achievements
==================================================*/

.achievements{

    background:#fff;

}

.achievements__grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

.achievement-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:all .35s ease;

}

.achievement-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.achievement-card a{

    display:block;

    color:inherit;

}

.achievement-card__image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/9;

    background:#eee;

}

.achievement-card__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.achievement-card:hover
.achievement-card__image img{

    transform:scale(1.08);

}

.achievement-card__body{

    padding:28px;

}

.achievement-card__category{

    display:inline-block;

    background:var(--color-primary);

    color:#fff;

    font-size:.75rem;

    font-weight:700;

    padding:6px 14px;

    border-radius:999px;

    margin-bottom:18px;

}

.achievement-card__title{

    font-size:1.35rem;

    color:var(--color-primary);

    margin-bottom:14px;

    line-height:1.4;

}

.achievement-card__text{

    color:var(--color-gray);

    line-height:1.9;

}

.achievements__button{

    text-align:center;

    margin-top:60px;

}


/*==================================================
About
==================================================*/

.about{

    background:var(--color-bg);

}

.about__wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about__image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.about__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.about__image:hover img{

    transform:scale(1.06);

}

.about__content{

    position:relative;

}

.about__catch{

    font-size:2.2rem;

    color:var(--color-primary);

    line-height:1.5;

    margin-bottom:30px;

    font-weight:800;

}

.about__text{

    color:var(--color-gray);

    margin-bottom:20px;

    line-height:2;

}

.about__features{

    margin:35px 0 45px;

}

.about__features li{

    position:relative;

    padding-left:36px;

    margin-bottom:18px;

    font-weight:600;

}

.about__features li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--color-accent);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.8rem;

}

.about .btn{

    min-width:240px;

}


/*==================================================
Animation
==================================================*/

.achievement-card{

    animation:fadeUp .8s ease both;

}

.achievement-card:nth-child(2){

    animation-delay:.15s;

}

.achievement-card:nth-child(3){

    animation-delay:.3s;

}

.about__image{

    animation:fadeUp .8s ease both;

}

.about__content{

    animation:fadeUp 1s ease both;

}


/*==================================================
Decoration
==================================================*/

.about__content::before{

    content:"ABOUT";

    position:absolute;

    top:-70px;

    left:-10px;

    font-size:5rem;

    font-weight:800;

    color:rgba(11,58,110,.05);

    pointer-events:none;

}


/*==================================================
Spacing
==================================================*/

.achievements + .about{

    margin-top:0;

}

/*==================================================
News
==================================================*/

.news{

    background:#ffffff;

}

.news-list{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.news-card{

    background:#fff;

    border-radius:16px;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    transition:.35s;

}

.news-card:hover{

    transform:translateY(-6px);

    box-shadow:0 16px 40px rgba(0,0,0,.12);

}

.news-card a{

    display:grid;

    grid-template-columns:180px 1fr 40px;

    align-items:center;

    gap:30px;

    padding:30px;

}

.news-card__date{

    font-weight:700;

    color:var(--color-primary);

}

.news-card__category{

    display:inline-block;

    margin-bottom:12px;

    padding:5px 12px;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    font-size:.75rem;

}

.news-card__title{

    font-size:1.2rem;

    color:var(--color-primary);

    margin-bottom:10px;

}

.news-card__excerpt{

    color:var(--color-gray);

}

.news-card__arrow{

    font-size:2rem;

    color:var(--color-accent);

    transition:.3s;

}

.news-card:hover .news-card__arrow{

    transform:translateX(8px);

}

.news-button{

    text-align:center;

    margin-top:60px;

}


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

.contact-cta{

    position:relative;

    overflow:hidden;

    color:#fff;

    padding:120px 0;

}

.contact-cta__bg{

    position:absolute;

    inset:0;

    z-index:-2;

}

.contact-cta__bg img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.contact-cta__overlay{

    position:absolute;

    inset:0;

    background:rgba(11,58,110,.82);

    z-index:-1;

}

.contact-cta__content{

    text-align:center;

    max-width:900px;

    margin:auto;

}

.contact-cta__en{

    display:inline-block;

    letter-spacing:.2em;

    margin-bottom:20px;

    color:var(--color-accent);

    font-weight:700;

}

.contact-cta__title{

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.5;

    margin-bottom:30px;

}

.contact-cta__text{

    font-size:1.05rem;

    line-height:2;

    opacity:.95;

    margin-bottom:50px;

}

.contact-cta__buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    flex-wrap:wrap;

}

.btn--tel{

    background:#fff;

    color:var(--color-primary);

    min-width:280px;

}

.btn--tel strong{

    display:block;

    font-size:1.5rem;

}

.btn--tel:hover{

    transform:translateY(-5px);

}


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

.site-footer{

    background:#0B3A6E;

    color:#fff;

}

.footer-top{

    padding:90px 0 60px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-logo{

    display:inline-block;

    margin-bottom:25px;

}

.footer-copy{

    color:rgba(255,255,255,.8);

    line-height:2;

}

.footer-info h3,
.footer-nav h3,
.footer-contact h3{

    margin-bottom:20px;

    font-size:1.2rem;

}

.footer-info li{

    margin-bottom:12px;

    color:rgba(255,255,255,.8);

}

.footer-menu li{

    margin-bottom:14px;

}

.footer-menu a{

    color:rgba(255,255,255,.8);

}

.footer-menu a:hover{

    color:var(--color-accent);

}

.footer-tel{

    display:block;

    margin-bottom:25px;

}

.footer-tel strong{

    display:block;

    font-size:2rem;

}

.footer-contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 32px;

    border-radius:999px;

    background:var(--color-accent);

    color:#fff;

    font-weight:700;

}

.footer-contact-btn:hover{

    transform:translateY(-4px);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.15);

    padding:25px 0;

}

.footer-bottom .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-bottom-menu{

    display:flex;

    gap:30px;

}

.footer-bottom-menu a{

    color:rgba(255,255,255,.75);

}

.footer-bottom-menu a:hover{

    color:#fff;

}

.copyright{

    font-size:.9rem;

    color:rgba(255,255,255,.65);

}


/*==================================================
Page Top
==================================================*/

.page-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--color-accent);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow);

    transition:.35s;

    z-index:100;

}

.page-top:hover{

    transform:translateY(-6px);

}


/*==================================================
Utility
==================================================*/

.text-center{

    text-align:center;

}

.bg-light{

    background:var(--color-bg);

}

.mb-0{

    margin-bottom:0;

}

.mt-0{

    margin-top:0;

}


/*==================================================
Common Animation
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}

.fade-up.is-active{

    opacity:1;

    transform:none;

}

.fade{

    opacity:0;

    transition:.8s;

}

.fade.is-active{

    opacity:1;

}

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:transform .8s ease;

}

.zoom:hover img{

    transform:scale(1.08);

}

/* ===========================
Mobile Navigation
=========================== */

@media (max-width:992px){

.global-nav{

    position:fixed;

    top:80px;

    left:0;

    width:100%;

    background:#fff;

    transform:translateY(-120%);

    transition:.35s;

    padding:30px;

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.global-nav.is-active{

    transform:translateY(0);

}

.global-menu{

    flex-direction:column;

    gap:25px;

}

body.menu-open{

    overflow:hidden;

}

}

/* ===========================
Hamburger Animation
=========================== */

.hamburger.is-active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.hamburger.is-active span:nth-child(2){

    opacity:0;

}

.hamburger.is-active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

/* ===========================
Header Scroll
=========================== */

.site-header{

    transition:.35s;

}

.site-header.is-scrolled{

    box-shadow:0 8px 30px rgba(0,0,0,.1);

}

.site-header.is-scrolled .header-main .container{

    min-height:72px;

}

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

.page-hero{

    position:relative;

    min-height:360px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    color:#fff;

}

.page-hero__bg{

    position:absolute;

    inset:0;

    z-index:-2;

}

.page-hero__bg img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.page-hero__overlay{

    position:absolute;

    inset:0;

    background:rgba(11,58,110,.75);

    z-index:-1;

}

.page-hero__content{

    text-align:center;

    padding-top:80px;

}

.page-title{

    font-size:clamp(2rem,5vw,3.5rem);

    font-weight:700;

    margin-bottom:20px;

}

.breadcrumb{

    font-size:.9rem;

    opacity:.9;

}

.breadcrumb a{

    color:#fff;

}

.breadcrumb span{

    margin:0 6px;

}

/*======================================
Page Content
======================================*/

.page-content{

    padding:80px 0;

    background:#fff;

}

.entry-content{

    max-width:900px;

    margin:0 auto;

    font-size:1rem;

    line-height:2;

}

.entry-content h2{

    color:var(--color-primary);

    font-size:2rem;

    margin:60px 0 20px;

    padding-bottom:10px;

    border-bottom:3px solid var(--color-accent);

}

.entry-content h3{

    color:var(--color-primary);

    margin:40px 0 15px;

    font-size:1.5rem;

}

.entry-content p{

    margin-bottom:24px;

}

.entry-content ul,
.entry-content ol{

    margin:20px 0 20px 24px;

}

.entry-content li{

    margin-bottom:10px;

}

.entry-content img{

    border-radius:12px;

    margin:30px auto;

}

.entry-content table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

.entry-content th,
.entry-content td{

    border:1px solid #ddd;

    padding:14px;

}

.entry-content th{

    background:#f5f7fa;

    width:30%;

}

.entry-content blockquote{

    border-left:4px solid var(--color-accent);

    background:#f9fafc;

    padding:20px 24px;

    margin:30px 0;

}

.page-links{

    margin-top:40px;

    text-align:center;

}

/*======================================
Single Post
======================================*/

.single-post{

    padding:90px 0;

}

.single-post__wrapper{

    display:grid;

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

    gap:60px;

}

.single-post__content{

    min-width:0;

}

.post-meta{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.post-category{

    background:var(--color-primary);

    color:#fff;

    padding:6px 16px;

    border-radius:999px;

    font-size:.8rem;

}

.post-thumbnail{

    margin-bottom:40px;

    overflow:hidden;

    border-radius:16px;

    box-shadow:var(--shadow);

}

.post-thumbnail img{

    width:100%;

    height:auto;

    display:block;

}

.post-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:70px;

    padding-top:40px;

    border-top:1px solid var(--color-border);

    gap:20px;

}

.post-navigation__prev,
.post-navigation__next{

    flex:1;

}

.post-navigation__next{

    text-align:right;

}

.post-navigation a{

    color:var(--color-primary);

    font-weight:700;

}

.sidebar{

    position:sticky;

    top:120px;

}

.widget{

    background:#fff;

    border-radius:16px;

    padding:25px;

    margin-bottom:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.widget-title{

    font-size:1.2rem;

    color:var(--color-primary);

    margin-bottom:20px;

    padding-bottom:10px;

    border-bottom:2px solid var(--color-accent);

}

/*======================================
Archive
======================================*/

.archive{

    padding:90px 0;

}

.archive__wrapper{

    display:grid;

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

    gap:60px;

}

.archive-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.archive-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

}

.archive-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.archive-card__image{

    overflow:hidden;

    aspect-ratio:16 / 9;

}

.archive-card__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.archive-card:hover .archive-card__image img{

    transform:scale(1.08);

}

.archive-card__body{

    padding:25px;

}

.archive-card__meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

    font-size:.85rem;

}

.archive-card__category{

    background:var(--color-primary);

    color:#fff;

    padding:5px 12px;

    border-radius:999px;

}

.archive-card__title{

    color:var(--color-primary);

    font-size:1.35rem;

    margin-bottom:15px;

    line-height:1.5;

}

.archive-card__excerpt{

    color:var(--color-gray);

}

.archive-pagination{

    margin-top:70px;

    text-align:center;

}

.archive-pagination .page-numbers{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    margin:0 5px;

    border-radius:50%;

    background:#fff;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.archive-pagination .current{

    background:var(--color-accent);

    color:#fff;

}

.archive-empty{

    text-align:center;

    padding:80px 0;

}

/*======================================
404
======================================*/

.error404-section{

    padding:100px 0;

    background:#fff;

}

.error404-box{

    max-width:760px;

    margin:auto;

    text-align:center;

}

.error404-number{

    font-size:8rem;

    font-weight:900;

    color:var(--color-accent);

    line-height:1;

    margin-bottom:20px;

}

.error404-box h2{

    font-size:2rem;

    color:var(--color-primary);

    margin-bottom:20px;

}

.error404-box p{

    color:var(--color-gray);

    line-height:2;

    margin-bottom:40px;

}

.error404-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:50px;

    flex-wrap:wrap;

}

.error404-search{

    max-width:500px;

    margin:auto;

}

.error-links{

    background:var(--color-bg);

    padding:80px 0;

}

.error-links__grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

}

.error-links__grid a{

    background:#fff;

    padding:30px;

    text-align:center;

    border-radius:15px;

    color:var(--color-primary);

    font-weight:700;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.3s;

}

.error-links__grid a:hover{

    background:var(--color-primary);

    color:#fff;

    transform:translateY(-5px);

}

/*======================================
Search
======================================*/

.page-hero__lead{

    margin-top:15px;

    font-size:1rem;

    color:rgba(255,255,255,.9);

}

.archive-empty{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.archive-empty h2{

    color:var(--color-primary);

    font-size:2rem;

    margin-bottom:20px;

}

.archive-empty p{

    color:var(--color-gray);

    margin-bottom:35px;

}

.archive-empty .search-form{

    margin-top:30px;

}

/*======================================
Search Form
======================================*/

.search-form{

    width:100%;

}

.search-form__inner{

    display:flex;

    align-items:center;

    position:relative;

}

.search-field{

    width:100%;

    height:60px;

    padding:0 70px 0 24px;

    border:2px solid var(--color-border);

    border-radius:999px;

    background:#fff;

    font-size:1rem;

    transition:.3s;

}

.search-field:focus{

    outline:none;

    border-color:var(--color-primary);

    box-shadow:0 0 0 4px rgba(11,58,110,.08);

}

.search-submit{

    position:absolute;

    right:8px;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

}

.search-submit:hover{

    background:var(--color-accent);

    transform:translateY(-50%) scale(1.05);

}

.search-submit svg{

    width:20px;

    height:20px;

}

.screen-reader-text{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/*======================================
Comments
======================================*/

.comments-area{

    margin-top:80px;

    padding-top:60px;

    border-top:1px solid var(--color-border);

}

.comments-title{

    font-size:2rem;

    color:var(--color-primary);

    margin-bottom:40px;

}

.comment-list{

    list-style:none;

    margin:0;

    padding:0;

}

.comment{

    margin-bottom:40px;

    padding-bottom:40px;

    border-bottom:1px solid #eee;

}

.comment-body{

    display:flex;

    gap:20px;

}

.comment-author img{

    border-radius:50%;

}

.comment-meta{

    font-size:.85rem;

    color:var(--color-gray);

    margin-bottom:10px;

}

.comment-content{

    line-height:2;

}

.comment-reply-link{

    display:inline-block;

    margin-top:15px;

    color:var(--color-primary);

    font-weight:700;

}

.comment-reply-title{

    margin:60px 0 25px;

    color:var(--color-primary);

}

.comment-form input,

.comment-form textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid var(--color-border);

    border-radius:8px;

    margin-bottom:20px;

    font-size:1rem;

}

.comment-form textarea{

    min-height:180px;

    resize:vertical;

}

.comment-form input:focus,

.comment-form textarea:focus{

    outline:none;

    border-color:var(--color-primary);

}

.comment-form .submit{

    min-width:220px;

    cursor:pointer;

}