/* =================================
   Page-Navi Version 2
   Modern SaaS Style
================================= */


* {
    box-sizing: border-box;
}


body {

    margin:0;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;

    color:#222;

    background:#fff;

    line-height:1.7;

}



img {

    max-width:100%;

    height:auto;

}



h1,h2,h3 {

    line-height:1.3;

}



section {

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:80px 20px;

}



h2 {

    text-align:center;

    font-size:36px;

    margin-bottom:50px;

}


/* =========================
 fadein
========================= */

.fadein {
  opacity: 0;
  transform: translateY(20px);
  animation: fadein 1.2s ease forwards;
}

@keyframes fadein {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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


.site-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    background:#fff;

}



.logo-area {

    display:flex;

    align-items:center;

    gap:12px;

}


.logo-area img {
    max-height:60px;
    max-width:160px;
    height:auto;
    width:auto;
}


.logo-text {
    font-size:24px;
    font-weight:bold;
    line-height:1;   /* ← これが重要 */
}




.header-right a {

    margin-left:20px;

    text-decoration:none;

}



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


.hero-v2 {


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;


    max-width:1200px;

    margin:auto;

    padding:90px 20px;


}



.hero-content {


    flex:1;

}



.hero-content h1 {


    font-size:52px;

    font-weight:800;

    margin-bottom:25px;


}



.hero-lead {


    font-size:24px;

    font-weight:bold;

}



.hero-content p {


    font-size:18px;

}





.hero-buttons {


    display:flex;

    gap:15px;

    margin-top:35px;

}



.btn-primary {


    background:#0066ff;

    color:#fff;

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

}



.btn-secondary {


    border:2px solid #0066ff;

    color:#0066ff;

    padding:13px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;


}



.hero-badges {


    display:flex;

    gap:10px;

    margin-top:35px;

    flex-wrap:wrap;

}



.hero-badges span {


    background:#f0f6ff;

    padding:8px 15px;

    border-radius:30px;

    font-size:14px;


}



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


.hero-preview {


    position:relative;

    width:430px;

    height:420px;


}



.preview-card {


    position:absolute;

    width:280px;


    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,.15);


}



.preview-card img {

    display:block;

}



.card-back {

    top:30px;

    left:30px;

    transform:rotate(-8deg);


}



.card-middle {


    top:60px;

    left:80px;

    transform:rotate(4deg);


}



.card-front {


    top:100px;

    left:120px;


}



/* =========================
 Stats
========================= */


.stats-bar {


    display:flex;

    justify-content:center;

    gap:50px;


    padding:40px 20px;


    background:#f7f9fc;


}



.stats-bar div {


    text-align:center;


}



.stats-bar strong {


    display:block;

    font-size:36px;

    color:#0066ff;


}



.stats-bar span {


    font-size:14px;


}
/* =========================
   Popular Templates
========================= */


.templates-section {

    background:#fff;

}


.template-grid {


    display:grid;

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

    gap:30px;


}



.template-card {


    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.3s;


}



.template-card:hover {


    transform:translateY(-8px);


}



.template-card a {


    color:#222;

    text-decoration:none;


}



.template-card img {


    width:100%;

    display:block;


}



.template-card h3 {


    padding:15px 20px 5px;

    margin:0;

}



.template-card span {


    display:block;

    padding:0 20px 20px;

    color:#0066ff;

    font-weight:bold;


}




/* =========================
   STEP
========================= */


.steps-v2 {


    background:#f7f9fc;


}



.steps-grid {


    display:grid;

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

    gap:30px;


}



.step-card {


    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

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


}



.step-number {


    width:60px;

    height:60px;

    margin:0 auto 20px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    background:#0066ff;

    color:white;


    font-size:24px;

    font-weight:bold;


}





/* =========================
 Features
========================= */


.feature-grid {


    display:grid;

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

    gap:25px;


}



.feature-card {


    background:white;

    border-radius:20px;


    padding:30px 20px;


    text-align:center;


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


}



.feature-card .icon {


    font-size:40px;

    margin-bottom:15px;


}





/* =========================
 Use Cases
========================= */


.usecases-v2 {


    background:#f7f9fc;


}



.usecase-grid {


    display:grid;

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

    gap:30px;


}



.usecase-card {


    background:white;


    padding:35px;


    border-radius:20px;


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


}



.usecase-card .icon {


    font-size:40px;


}





/* =========================
 Pricing
========================= */


.pricing-grid {


    display:grid;

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


    gap:30px;


}



.price-card {


    background:white;


    border-radius:20px;


    padding:40px 30px;


    text-align:center;


    border:1px solid #eee;


}



.popular-plan {


    border:3px solid #0066ff;


    transform:translateY(-10px);


}



.popular-label {


    color:#0066ff;

    font-weight:bold;

    margin-bottom:15px;


}



.price {


    font-size:32px;

    font-weight:bold;


    margin:20px 0;


}



.price-card ul {


    list-style:none;

    padding:0;


}



.price-card li {


    padding:8px 0;

    border-bottom:1px solid #eee;


}



.price-button {


    display:inline-block;


    margin-top:25px;


    padding:12px 30px;


    background:#0066ff;


    color:white;


    border-radius:30px;


    text-decoration:none;


}




/* =========================
 FAQ
========================= */


.faq-v2 {


    background:#f7f9fc;


}



.faq-box {


    max-width:800px;

    margin:auto;


}



.faq-item {


    background:white;


    padding:25px;


    margin-bottom:20px;


    border-radius:15px;


}



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


.footer-v2 {


    background:#111827;


    color:white;


    padding:70px 30px 30px;


}



.footer-inner {


    max-width:1100px;


    margin:auto;


    display:flex;


    justify-content:space-between;


}



.footer-logo img {


    width:60px;


}



.footer-links {


    display:flex;


    flex-direction:column;


    gap:10px;


}



.footer-links a {


    color:white;

    text-decoration:none;


}



.footer-company {


    margin-top:40px;


    text-align:center;


}



.copyright {


    text-align:center;


    margin-top:30px;


}






/* =========================
 Responsive
========================= */


@media(max-width:900px){


.hero-v2 {


    flex-direction:column;

    text-align:center;


}



.hero-content h1 {


    font-size:36px;


}



.hero-preview {


    width:330px;

    height:330px;


}



.template-grid {


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


}



.steps-grid {


    grid-template-columns:1fr;


}



.feature-grid {


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


}



.usecase-grid {


    grid-template-columns:1fr;


}



.pricing-grid {


    grid-template-columns:1fr;


}



.footer-inner {


    flex-direction:column;

    gap:30px;


}



}





@media(max-width:600px){


section {


    padding:50px 15px;


}


.template-grid {


    grid-template-columns:1fr;


}



.feature-grid {


    grid-template-columns:1fr;


}



.stats-bar {


    flex-wrap:wrap;

    gap:25px;


}



.hero-buttons {


    flex-direction:column;


}



.btn-primary,
.btn-secondary {


    width:100%;

}



}