html { 
    overflow-x: clip;          
    scroll-padding-top: 100px;
}

.grid-container.container {
    padding: 0 24px; 
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
    background-color: unset;
}

@media (max-width: 768px) {
    .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
        padding: 30px 0px;
    }
}
.custom-page-top {
    margin-top: 4em;
}

.custom-page-wrapper.top {
    position: relative;
    top: 5em;
}

section.page-top {
    padding-top: clamp(120px, 6vw, 90px) !important;
    padding-bottom: clamp(60px, 6vw, 90px) !important;
}

.custom-page-wrapper.top-with-breadcrumbs {
    position: relative;
    top: 2em;
}

.custom-page-wrapper {
    max-width: 1200px; margin: auto; padding: 40px 40px;
}

.custom-page-wrapper-post {
    max-width: 800px; margin: auto; padding: 40px 40px;
}



@media (max-width: 768px) {
    .custom-page-wrapper {
        max-width: 1200px; margin: auto; padding: 40px 24px;
    }    

    .custom-page-wrapper-post {
        max-width: 800px; margin: auto; padding: 0px;
        top: 5em;
        position: relative;
    }

    .custom-page-wrapper.top-with-breadcrumbs {
        padding: 0;
        top: 4em;
    }  
}

@media (max-width: 992px) {
    .custom-page-wrapper.top-with-breadcrumbs nav {
        margin-left: 0;
    }
}

/* all pages start with this */ 
.custom-page-top {
    padding-top: clamp(30px, 6vw, 90px) !important; /* 70px nav height and 60px on mobile */
    margin-top: clamp(60px, 6vw, 90px);
}


section.section-page-top {
    min-height: clamp(60vh, 90vh, 601px);
    padding-top: clamp(30px, 6vw, 90px) !important;
    padding-bottom: clamp(30px, 6vw, 90px) !important;
}

.section-rounded-top {
    border-radius: 30px 30px 0 0;
}

.one-container .site-main>:last-child, .separate-containers .site-main>:last-child {
    padding-bottom: 3em;
}

/* background colors */
.background-white {
    background: white;
}

.background-navy {
    color: white;
    background: #002661;
}

.background-lightblue-post {
    position: relative;
    padding-top: 5em;
    margin-top: 5em;
}

.background-lightblue-post::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;          /* span full viewport width */
    height: 120%;          /* or a fixed value if you only need a cap */
    transform: translateX(-50%);
    background: #f0f4f5;
    border-top-left-radius: 30px;
    border-top-right-radius: 40px;
    z-index: -1;
    pointer-events: none;
  }

.background-lightblue {
    position: relative; 
    background: #f0f4f5;
}

.background-lightblue.section-rounded-top {
    top: -3em; /* adjust for top page */
}

.page-section-separator { /*blue background for hook on feature pages */
    padding-top: clamp(48px, 8vw, 90px) !important;
    padding-bottom: clamp(48px, 8vw, 90px) !important;
}

.section-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Specific sections */

.section-hero,
.hero-phone,
#widen-your-audience,
.background-navy.top-page-navy-grid,
.section-compact,
.section-compact-bg,
#top-demo-code,
ol#three-steps,
#faq, .pricing-wrapper {
    display: grid;
}

/* pricing page */
.pricing-wrapper {
    grid-template-columns: 4fr 4fr 5fr; gap: 3em;
}

.pricing-wrapper section {
    padding: 30px;
    border-radius: 30px;
}

.pricing-section-commercial {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3em;
}

@media only screen and (max-width: 768px) {
    .pricing-wrapper, .pricing-section-commercial {
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 8px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    /* tablet */
    .pricing-wrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: max-content max-content;
    }

    .pricing-wrapper .pricing-larger-projects {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        grid-area: 2 / 1 / 3 / 3; 
        text-align: center;
        display: none;
    }
}

/* FAQ page */
#faq {
    grid-template-columns: max-content auto; /* anker navigation | content */
    gap: 5em;
}

.page-features-centered {
    max-width: 845px;
    margin-left: auto;
    margin-right: auto;
}

.page-feature-section {
    display: grid;
    grid-template-columns: 4fr 3fr;
    gap: 60px 180px;
}

.all-features .page-feature-section {
    align-items: center;
}

.rounded-box {
    border-radius: 20px;
    padding: 1em 2em;
}

.page-feature-section .background-white.rounded {
    max-height: 350px;
    padding: 1em 2em;
    border-radius: 30px;
    display: flex;
    justify-content: center;
}

.page-feature-section .background-white.rounded img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.section-hero {
    grid-template-columns: 6fr 5fr;
    margin-top: 0;
    background: url('https://en-test.qrtranslator.net/wp-content/uploads/2025/08/hero-bg-img.png') !important;
    background-size: 53% !important;
    background-repeat: no-repeat !important;
    background-position: top 1em right -2em !important;
}

@media only screen and (max-width: 768px) {
    .section-hero .hero-content {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}

.hero-phone {
    justify-self: center;
    max-width: 220px;
}

#widen-your-audience {
    grid-template-columns: 5fr 3fr;
    justify-items: center;
    align-items: center;
    gap: 2em;
}

.background-navy.top-page-navy-grid {
    grid-template-rows: auto auto;
    gap: 90px; /* デザイナー(EXJ高さん）により指定 */
    padding-bottom: 10em;
    padding-top: 6em;
}

.section-compact {
    grid-template-columns: 6fr 7fr;
    gap: 2em;
    align-items: center;
}

.section-compact-bg {
    position: relative;
    place-items: center; /* centers the text */
    justify-self: end;
    align-self: stretch;
    aspect-ratio: 1 / 1; /* keep container square for background image */
    max-height: 80vh;
    width: 100%;
    background: url('https://en-test.qrtranslator.net/wp-content/uploads/2025/08/section-compact-bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Demo QR code */
img#demo-code {
    max-width: 170px;
}

#top-demo-code {
    grid-template-columns: 1fr 320px;
    justify-items: center;
    align-items: center;
    gap: 1.5em;
    margin-top: 1.5em;
}


/* 3 steps */
ol#three-steps {
    grid-template-columns: 1fr 21px 1fr 21px 1fr; /* step | arrow | step | arrow | step */
    gap: 1.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-top: 1em;
    list-style: none;
    counter-reset: step;
}

/* Step cards */
#three-steps > li.step {
    position: relative;
    height: 100%;
    max-width: 332px;
    padding: 2em;
    padding-top: 1em;
    border-radius: 40px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    counter-increment: step;
    color: #002661;
    background: #fff;
}

/* Step badge near title (visual only) */
#three-steps > li.step h3 {
    min-height: 4.5em;
    padding-top: 1.5em;
    margin-bottom: 0;
    line-height: 1.3em;
}

#three-steps > li.step h3 span.material-symbols-outlined {
    position: relative;
    top: 3px;
}

#three-steps > li.step h3::before {
    position: absolute;
    top: 1.5em;
    display: inline-block;
    content: "Step " counter(step);
    font-size: 0.8em;
    line-height: 1.6;
    color: #0065B3;
}

/* Centering the arrows */
#three-steps > li.arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrow styling */
#three-steps .icon {
    padding: 10px;
    font-size: 28px;        /* icon size */
    line-height: 1;
}

@media (max-width: 768px) {
    /* CSS in here for mobile only */

    .section-hero,
    #widen-your-audience,
    .section-compact,
    #top-demo-code,
    #faq,
    ol#three-steps, .page-feature-section {
        grid-template-columns: 1fr;
    }

    #widen-your-audience div.d-flex {
        justify-content: center;
    }

    .white-offset-bg::after {
        display: none;
    }

    .section-hero {
        gap: 2em;
        background-size: 97% !important;
        background-position: bottom 25% center !important;
    }

    .hero-phone {
        max-width: 180px;
    }

    ol#three-steps {
        grid-template-columns: 1fr; /* 1 column: Step, Arrow, Step, Arrow, Step */
        gap: 1rem;
    }

    .page-feature-section {
        gap: 0;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    /* tablet */
    #widen-your-audience {
        grid-template-columns: 4fr 3fr;
    }

    .page-feature-section {
        grid-template-columns: 1fr 1fr;
        gap: clamp(18px, 4vw, 30px) ;
    }
}

@media (min-width: 769px) {
    #widen-your-audience .top-page-rounded {
        max-width: 100%;
    }

    .white-offset-bg {
        position: relative; /* create containing block */
        z-index: 1;         /* ensure content stays above */
    }

    .white-offset-bg::after {
        position: absolute;
        right: 0;
        bottom: 0;
        padding-right: 2em;
        border-radius: 40px;
        content: "";
        z-index: -1;
        gap: 2em;
        background-color: #fff;
    }
}

@media (min-width: 993px) and (max-width: 1120px) {
    #widen-your-audience {
        grid-template-columns: 11fr 4fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* tablet */
    #widen-your-audience {
        align-items: start;
    }

    #widen-your-audience h2.section-title {
        margin-top: 0;
    }

    #widen-your-audience h2.section-title .material-symbols-outlined,
    #widen-your-audience h2.section-title .material-symbols {
        display: inline-block;
        top: 6px;
        margin-right: 8px;
    }

    #widen-your-audience a.main-btn {
        max-width: max-content;
        margin-top: 0;
    }

    .white-offset-bg::after {
        top: 20px;
        left: 87px;
        height: 72%;
    }
}

@media (min-width: 1025px) {
    .white-offset-bg::after {
        top: 71px;
        left: 229px;
        height: 70%;
    }
}

/* News */
@media (max-width: 1024px) {
    .news-carousel-section h2, .examples-carousel-section h2  {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }
}

article.news {
    max-width: 400px;
}

article.example {
    max-width: 100%;
}

/* Force thumbnails to be square with rounded corners */
.entry-image-link {
    display: block;
    overflow: hidden;        /* hides image overflow */
    width: 100%;
    margin-bottom: 1.3em;
    border-radius: 17px;     /* adjust radius as you like */
}

.entry-image-link .entry-image {
    display: block;
    width: 100%;
    border-radius: inherit;  /* matches parent’s radius */
    object-fit: cover;
}

/* Examples */
#examples-splide {
    max-width: 800px;
    margin: auto;
    margin-bottom: 2em;
}

#examples-splide div.examples-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: start;
}

#examples-splide div.examples-content span {
    background-color: white;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 2px 8px;
}

#examples-splide a.example-title {
    background-color: #002661;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.02em;
    color: white;
    font-family: Montserrat Alternates, sans-serif;
    text-decoration: none;
    line-height: 1;
    padding: 8px 8px;
}
/* Marigolds & onions */
#examples-splide .example-1 {
    background: url('https://en-test.qrtranslator.net/wp-content/uploads/2024/11/signal-2024-08-05-154947_007.jpeg')
}

/* Missouri */
#examples-splide .example-2 {
    background: url('https://en-test.qrtranslator.net/wp-content/uploads/2024/02/Battleship-Missouri_Entrance-1-scaled.jpg')
}

/* Osaka Expo */
#examples-splide .example-3 {
    background: url('https://en-test.qrtranslator.net/wp-content/uploads/2025/05/osakaexpo.jpg')
}

/* */
#examples-splide .example-4 {
    background: url('https://jp.qrtranslator.com/wp-content/uploads/2022/05/boxes.jpg')
}

#examples-splide .splide__slide {
    width: 100%;
    min-height: 350px;
    max-height: 300px;
    border-radius: 40px;
    margin-bottom: 1em;
    background-size: cover;
    background-position: center;
}