/* ==========================================================
   DAIKOU Sales Partner
   responsive.css
   Part 1 / 3
   ========================================================== */

/* ==========================================================
   Desktop Large
   1440px～
   ========================================================== */

@media screen and (min-width:1440px){

    :root{

        --container:1200px;

    }

    body{

        font-size:16px;

    }

    section{

        padding:120px 0;

    }

}

/* ==========================================================
   Desktop
   ～1280px
   ========================================================== */

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

    .container{

        width:min(94%,1120px);

    }

    .hero h1{

        font-size:4rem;

    }

    .hero-copy{

        font-size:2.8rem;

    }

    .service-grid{

        gap:28px;

    }

    .phase-list{

        gap:28px;

    }

    .flow-list{

        gap:24px;

    }

}

/* ==========================================================
   Notebook
   ～1024px
   ========================================================== */

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

    section{

        padding:96px 0;

    }

    .header{

        backdrop-filter:blur(12px);

    }

    .header .container{

        min-height:72px;

    }

    .header-nav ul{

        gap:24px;

    }

    .hero{

        padding-top:150px;

        padding-bottom:96px;

    }

    .hero h1{

        font-size:3.2rem;

    }

    .hero-lead{

        font-size:1.25rem;

    }

    .hero-copy{

        font-size:2.3rem;

    }

    .problem-list{

        grid-template-columns:1fr;

        gap:20px;

    }

    .service-grid{

        grid-template-columns:1fr;

    }

    .phase-list{

        grid-template-columns:1fr;

    }

    .flow-list{

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

    }

    .founder-layout{

        grid-template-columns:1fr;

        gap:56px;

    }

    .founder-profile{

        position:static;

    }

    .price-box{

        padding:56px;

    }

    .contact-form{

        padding:48px;

    }

}

/* ==========================================================
   Tablet
   ～820px
   ========================================================== */

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

    html{

        font-size:15px;

    }

    section{

        padding:80px 0;

    }

    .section-heading{

        margin-bottom:52px;

    }

    .section-heading h2{

        font-size:2.2rem;

    }

    .hero{

        text-align:center;

        padding-top:130px;

    }

    .hero h1{

        font-size:2.7rem;

    }

    .hero-copy{

        font-size:2rem;

    }

    .hero-cta{

        flex-direction:column;

        align-items:stretch;

        gap:16px;

    }

    .btn{

        width:100%;

    }

    .flow-list{

        grid-template-columns:1fr;

    }

    .cta-box{

        width:100%;

    }

    .contact-form{

        padding:40px 32px;

    }

}
/* ==========================================================
   Mobile
   ～768px
   ========================================================== */

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

    body{

        font-size:15px;

        line-height:1.85;

    }

    section{

        padding:72px 0;

    }

    .container{

        width:92%;

    }

    .header .container{

        min-height:68px;

    }

    .logo{

        font-size:1rem;

    }

    .header-nav{

        display:none;

    }

    .hero{

        padding-top:120px;

        padding-bottom:72px;

    }

    .hero-label{

        font-size:.75rem;

    }

    .hero h1{

        font-size:2.3rem;

        line-height:1.35;

        margin-bottom:24px;

    }

    .hero-lead{

        font-size:1.05rem;

    }

    .hero-text{

        font-size:.95rem;

    }

    .hero-copy{

        font-size:1.75rem;

        margin-bottom:40px;

    }

    .section-heading{

        text-align:center;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .problem-card,
    .service-card,
    .phase-card,
    .flow-card,
    .profile-card{

        padding:30px;

    }

    .problem-card p,
    .service-card p,
    .phase-card p{

        font-size:.96rem;

    }

    .price-box{

        padding:42px 28px;

    }

    .cta{

        text-align:center;

    }

    .cta h2{

        font-size:2.1rem;

    }

    .cta-copy{

        font-size:1.1rem;

    }

    .contact-form{

        padding:36px 24px;

    }

    .form-group{

        margin-bottom:24px;

    }

    .form-group input,
    .form-group textarea{

        font-size:16px;

    }

    .footer{

        padding:64px 0;

    }

    .footer-nav{

        flex-direction:column;

        gap:16px;

    }

}

/* ==========================================================
   Small Mobile
   ～480px
   ========================================================== */

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

    html{

        font-size:14px;

    }

    section{

        padding:64px 0;

    }

    .hero{

        padding-top:105px;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero-copy{

        font-size:1.5rem;

    }

    .section-heading h2{

        font-size:1.75rem;

    }

    .service-card,
    .problem-card,
    .phase-card,
    .flow-card{

        padding:24px;

    }

    .price-box{

        padding:32px 20px;

    }

    .contact-form{

        padding:28px 18px;

    }

    .btn{

        min-height:54px;

        font-size:.95rem;

    }

    .page-top{

        right:16px;

        bottom:16px;

        width:46px;

        height:46px;

    }

}
/* ==========================================================
   Extra Small Mobile
   ～390px
   ========================================================== */

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

    body{

        font-size:14px;

    }

    .container{

        width:94%;

    }

    .hero{

        padding-top:96px;

        padding-bottom:56px;

    }

    .hero-label{

        font-size:.7rem;

        padding:7px 12px;

    }

    .hero h1{

        font-size:1.75rem;

        line-height:1.4;

    }

    .hero-lead{

        font-size:.95rem;

    }

    .hero-copy{

        font-size:1.35rem;

        line-height:1.6;

    }

    .section-heading{

        margin-bottom:40px;

    }

    .section-heading h2{

        font-size:1.55rem;

    }

    .section-heading p{

        font-size:.92rem;

    }

    .problem-card,
    .service-card,
    .phase-card,
    .flow-card,
    .profile-card,
    .price-box{

        padding:22px;

    }

    .contact-form{

        padding:24px 16px;

    }

    .form-group label{

        font-size:.95rem;

    }

    .form-group input,
    .form-group textarea{

        padding:14px;

    }

    .btn{

        min-height:52px;

        font-size:.92rem;

    }

}

/* ==========================================================
   Landscape Smartphone
   ========================================================== */

@media screen and (max-height:600px) and (orientation:landscape){

    .hero{

        padding-top:92px;

        padding-bottom:56px;

    }

    section{

        padding:56px 0;

    }

}

/* ==========================================================
   Touch Device
   ========================================================== */

@media (hover:none){

    .btn:hover,
    .problem-card:hover,
    .service-card:hover,
    .phase-card:hover,
    .flow-card:hover,
    .profile-card:hover{

        transform:none;

        box-shadow:inherit;

    }

}

/* ==========================================================
   iPhone Safe Area
   ========================================================== */

@supports (padding:max(0px)){

    body{

        padding-left:max(0px,env(safe-area-inset-left));

        padding-right:max(0px,env(safe-area-inset-right));

        padding-bottom:max(0px,env(safe-area-inset-bottom));

    }

    .header{

        padding-top:max(0px,env(safe-area-inset-top));

    }

}

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *{

        animation:none !important;

        transition:none !important;

    }

}

/* ==========================================================
   Print
   ========================================================== */

@media print{

    .header,
    .footer,
    .cta,
    .page-top{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

    section{

        padding:24px 0;

        page-break-inside:avoid;

    }

    a{

        text-decoration:none;

        color:#000;

    }

}

/* ==========================================================
   End of responsive.css
   ========================================================== */