/*
Theme Name: Lightning
Text Domain: lightning
Theme URI: https://lightning.vektor-inc.co.jp/en/
Description: Lightning is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
Author: Vektor,Inc.
Author URI: https://www.vektor-inc.co.jp
Version: 15.37.1
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Lightning WordPress theme, Copyright (C) 2015-2026 Vektor,Inc.
Lightning WordPress theme is licensed under the GPL.

Lightning WordPress Theme bundles the following third-party resources:

Font Awesome icon font, Copyright 2012 Fonticons, Inc.
its fonts are licensed under the terms of the SIL OFL License 1.1, and its code is licensed under the terms of the MIT license
Source: https://fontawesome.com/

Bootstrap framework, Copyright 2011 Bootstrap Authors and Twitter, Inc.
Bootstrap is licensed under the terms of the MIT license
Source: https://getbootstrap.com/

CSS Simple Tree Shaking
CSS Simple Tree Shaking is licensed under the terms of the GNU General Public License v2 license
Source: https://celtislab.net/
*/


/* =================================
   EC制作LP
   Base CSS
================================= */


/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');



/* ---------------------------------
   Reset
--------------------------------- */

.site-header{
      display: none; 
}

.hero,
.simulation,
.concept,
.target,
.compare,
.benefits,
.service,
.flow,
.faq,
.contact {

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

    color: #0F172A;

    box-sizing: border-box;

}



.hero *,
.simulation *,
.concept *,
.target *,
.compare *,
.benefits *,
.service *,
.flow *,
.faq *,
.contact * {

    box-sizing: border-box;

}




/* ---------------------------------
   Common Layout
--------------------------------- */


.hero-inner,
.simulation-inner,
.concept-inner,
.target-inner,
.compare-inner,
.benefits-inner,
.service-inner,
.flow-inner,
.faq-inner,
.contact-inner {

    max-width:1200px;

    margin:0 auto;

    padding-left:20px;

    padding-right:20px;

}




/* ---------------------------------
   Section Heading
--------------------------------- */


.section-heading {

    text-align:center;

    margin-bottom:70px;

}



.section-label {

    font-size:13px;

    letter-spacing:0.18em;

    color:#C8A45D;

    font-weight:700;

    margin-bottom:20px;

}



.section-heading h2 {

    font-size:42px;

    line-height:1.4;

    letter-spacing:0.05em;

    margin:0 0 25px;

    font-weight:700;

}



.section-heading p {

    font-size:16px;

    line-height:2;

    color:#475569;

}






/* =================================
   第1章 HERO
================================= */


.hero {

    padding:100px 0;

    background:#ffffff;

}



.hero-inner {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}




.hero-content {

    width:50%;

}



.hero-label {

    font-size:14px;

    letter-spacing:0.1em;

    color:#64748B;

    margin-bottom:30px;

}



.hero-title {

    font-size:56px;

    line-height:1.35;

    letter-spacing:0.08em;

    margin:0 0 35px;

    font-weight:700;

}



.hero-description {

    font-size:18px;

    line-height:2;

    color:#475569;

    margin-bottom:40px;

}



.hero-description strong {

    color:#0F172A;

}



.hero-price {

    margin-bottom:40px;

}



.hero-price-label {

    font-size:14px;

    margin-bottom:10px;

    color:#64748B;

}



.hero-price-value {

    font-size:42px;

    font-weight:700;

    margin:0;

}



.hero-price-value span {

    font-size:18px;

    font-weight:400;

}




.hero-button {

    display:inline-block;

    background:#0F172A;

    color:#ffffff;

    text-decoration:none;

    padding:18px 50px;

    border-radius:50px;

    font-size:16px;

    transition:.3s;

}



.hero-button:hover {

    background:#C8A45D;

    color:#ffffff;

}





/* ---------------------------------
   Hero Image Area
--------------------------------- */


.hero-image {

    width:50%;

}



.store-transition {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

}




.store-box {

    width:320px;

    padding:40px 30px;

    text-align:center;

    border-radius:20px;

}



.store-rental {

    background:#F8F8F6;

}



.store-own {

    background:#0F172A;

    color:#ffffff;

}




.store-label {

    font-size:14px;

    margin-bottom:10px;

    opacity:.7;

}



.store-title {

    font-size:32px;

    font-weight:700;

    margin:0;

}



.transition-arrow {

    font-size:35px;

    color:#C8A45D;

}




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


@media(max-width:768px){


    .hero {

        padding:70px 0;

    }


    .hero-inner {

        flex-direction:column;

        gap:40px;

    }


    .hero-content,
    .hero-image {

        width:100%;

    }


    .hero-title {

        font-size:36px;

    }


    .hero-description {

        font-size:16px;

    }


    .hero-price-value {

        font-size:34px;

    }


    .store-box {

        width:100%;

    }


    .section-heading h2 {

        font-size:30px;

    }


}

/* =================================
   第2章 SIMULATION
================================= */


.simulation {

    padding:120px 0;

    background:#F8F8F6;

}



.simulation-form {

    max-width:700px;

    margin:0 auto 70px;

    background:#ffffff;

    padding:50px;

    border-radius:24px;

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

}



.form-item {

    margin-bottom:30px;

}



.form-item label {

    display:block;

    font-size:16px;

    font-weight:600;

    margin-bottom:12px;

}



.input-unit {

    display:flex;

    align-items:center;

    gap:12px;

}



.input-unit input {

    width:100%;

    padding:16px 20px;

    border:1px solid #CBD5E1;

    border-radius:12px;

    font-size:18px;

}



.input-unit span {

    font-size:16px;

    color:#475569;

}




#simulation-button {

    width:100%;

    margin-top:20px;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#0F172A;

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}



#simulation-button:hover {

    background:#C8A45D;

}





/* ---------------------------------
   Result
--------------------------------- */


.simulation-result {

    max-width:900px;

    margin:0 auto;

    background:#ffffff;

    padding:60px;

    border-radius:24px;

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

}



.simulation-result h3 {

    text-align:center;

    font-size:28px;

    margin-bottom:40px;

}




.cost-table {

    border-radius:16px;

    overflow:hidden;

    border:1px solid #E2E8F0;

}



.cost-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    border-bottom:1px solid #E2E8F0;

}



.cost-row:last-child {

    border-bottom:none;

}



.cost-name {

    font-size:18px;

    font-weight:600;

}



.cost-value {

    font-size:28px;

    font-weight:700;

}





/* あなた専用のお店 */

.cost-row.highlight {

    background:#0F172A;

    color:#ffffff;

}



.cost-row.highlight .cost-name {

    color:#ffffff;

}




/* ---------------------------------
   Saving Message
--------------------------------- */


.saving-result {

    text-align:center;

    margin-top:60px;

}



.saving-result p {

    margin:10px 0;

    color:#475569;

}



.saving-result strong {

    display:block;

    font-size:48px;

    color:#C8A45D;

    margin:15px 0;

}




.recovery-period {

    margin-top:50px;

    text-align:center;

    padding:35px;

    background:#F8F8F6;

    border-radius:16px;

}



.recovery-period p {

    margin:8px;

}



.recovery-period strong {

    font-size:36px;

}





.simulation-note {

    margin-top:35px;

    font-size:13px;

    color:#64748B;

    text-align:center;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .simulation {

        padding:80px 0;

    }


    .simulation-form {

        padding:30px 20px;

    }


    .simulation-result {

        padding:35px 20px;

    }


    .cost-row {

        padding:20px;

        flex-direction:column;

        gap:10px;

        text-align:center;

    }


    .cost-value {

        font-size:24px;

    }


    .saving-result strong {

        font-size:36px;

    }


}

/* =================================
   第3章 CONCEPT
================================= */


.concept {

    padding:120px 0;

    background:#ffffff;

}




.concept-content {

    max-width:900px;

    margin:0 auto;

    text-align:center;

}



.concept-content > p {

    font-size:17px;

    line-height:2;

    color:#475569;

    margin-bottom:25px;

}




/* ---------------------------------
   Shop Comparison Cards
--------------------------------- */


.shop-comparison {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    margin:70px 0;

}



.shop-card {

    width:360px;

    padding:45px 35px;

    border-radius:24px;

    text-align:center;

}



.shop-card.rental {

    background:#F8F8F6;

}



.shop-card.own {

    background:#0F172A;

    color:#ffffff;

}



.shop-card-label {

    font-size:13px;

    letter-spacing:.15em;

    margin-bottom:20px;

    opacity:.7;

}



.shop-card h3 {

    font-size:38px;

    margin-bottom:30px;

}




.shop-card ul {

    list-style:none;

    padding:0;

    margin:0;

}



.shop-card li {

    padding:12px 0;

    border-bottom:1px solid rgba(148,163,184,.3);

    font-size:15px;

}



.shop-card li:last-child {

    border-bottom:none;

}




.arrow {

    font-size:40px;

    color:#C8A45D;

}





/* ---------------------------------
   Message
--------------------------------- */


.concept-message {

    margin-top:70px;

    padding:45px 30px;

    background:#F8F8F6;

    border-radius:20px;

}



.concept-message p {

    font-size:20px;

    margin:12px 0;

}



.concept-message strong {

    display:block;

    font-size:32px;

    margin-top:20px;

    color:#0F172A;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .concept {

        padding:80px 0;

    }


    .shop-comparison {

        flex-direction:column;

        gap:25px;

    }


    .shop-card {

        width:100%;

        padding:35px 25px;

    }


    .arrow {

        transform:rotate(90deg);

    }


    .shop-card h3 {

        font-size:32px;

    }


    .concept-message strong {

        font-size:24px;

    }


}

/* =================================
   第4章 TARGET
================================= */


.target {

    padding:120px 0;

    background:#F8F8F6;

}



.target-list {

    max-width:900px;

    margin:0 auto;

    display:grid;

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

    gap:25px;

}




.target-item {

    background:#ffffff;

    padding:30px;

    border-radius:20px;

    display:flex;

    align-items:flex-start;

    gap:20px;

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

    transition:.3s;

}



.target-item:hover {

    transform:translateY(-5px);

}




.target-check {

    flex-shrink:0;

    width:32px;

    height:32px;

    border-radius:50%;

    background:#0F172A;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:bold;

}




.target-item p {

    margin:0;

    font-size:16px;

    line-height:1.8;

    color:#334155;

}





/* ---------------------------------
   Message
--------------------------------- */


.target-message {

    margin-top:70px;

    text-align:center;

}



.target-message p {

    font-size:18px;

    color:#475569;

    margin:10px 0;

}



.target-message strong {

    display:block;

    margin-top:20px;

    font-size:32px;

    color:#0F172A;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .target {

        padding:80px 0;

    }


    .target-list {

        grid-template-columns:1fr;

    }


    .target-item {

        padding:25px;

    }


    .target-message strong {

        font-size:24px;

    }


}

/* =================================
   第5章 COMPARE
================================= */


.compare {

    padding:120px 0;

    background:#ffffff;

}



.compare-table-wrap {

    width:100%;

    overflow-x:auto;

    margin:0 auto;

    padding-bottom:10px;

}




.compare-table {

    width:100%;

    min-width:1000px;

    border-collapse:separate;

    border-spacing:0;

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

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

}




.compare-table th,
.compare-table td {

    padding:22px 20px;

    text-align:center;

    border-bottom:1px solid #E2E8F0;

    font-size:15px;

}




.compare-table thead th {

    background:#F8F8F6;

    font-size:16px;

    font-weight:700;

}



.compare-table tbody th {

    background:#F8F8F6;

    text-align:left;

    font-weight:600;

    white-space:nowrap;

}




.compare-table td {

    color:#334155;

}




/* ---------------------------------
   あなた専用のお店 強調
--------------------------------- */


.compare-table .highlight {

    background:#0F172A;

    color:#ffffff;

}



.compare-table thead .highlight {

    background:#0F172A;

    color:#ffffff;

}



.compare-table tbody .highlight {

    font-weight:600;

}



.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {

    border-bottom:none;

}





/* ---------------------------------
   Message
--------------------------------- */


.compare-message {

    max-width:850px;

    margin:70px auto 0;

    text-align:center;

}



.compare-message p {

    font-size:18px;

    line-height:2;

    color:#475569;

    margin:15px 0;

}



.compare-message strong {

    color:#0F172A;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .compare {

        padding:80px 0;

    }


    .compare-table-wrap {

        margin-left:-20px;

        width:calc(100% + 40px);

    }


    .compare-message p {

        font-size:16px;

    }


}

/* =================================
   第6章 BENEFITS
================================= */


.benefits {

    padding:120px 0;

    background:#F8F8F6;

}




.benefit-list {

    max-width:900px;

    margin:0 auto;

}




.benefit-item {

    display:flex;

    gap:40px;

    padding:45px 0;

    border-bottom:1px solid #E2E8F0;

}



.benefit-item:first-child {

    padding-top:0;

}




.benefit-number {

    flex-shrink:0;

    font-size:48px;

    font-weight:700;

    color:#C8A45D;

    line-height:1;

}




.benefit-content h3 {

    font-size:28px;

    margin:0 0 20px;

    letter-spacing:.05em;

}




.benefit-content p {

    font-size:16px;

    line-height:2;

    color:#475569;

    margin:0;

}





/* ---------------------------------
   Message
--------------------------------- */


.benefits-message {

    margin-top:80px;

    text-align:center;

    padding:50px 30px;

    background:#ffffff;

    border-radius:24px;

}



.benefits-message p {

    font-size:20px;

    color:#475569;

    margin:15px 0;

}



.benefits-message strong {

    display:block;

    font-size:34px;

    color:#0F172A;

    margin:20px 0;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .benefits {

        padding:80px 0;

    }


    .benefit-item {

        gap:20px;

        padding:35px 0;

    }


    .benefit-number {

        font-size:36px;

    }


    .benefit-content h3 {

        font-size:22px;

    }


    .benefits-message strong {

        font-size:25px;

    }


}

/* =================================
   第7章 SERVICE
================================= */


.service {

    padding:120px 0;

    background:#ffffff;

}





/* ---------------------------------
   Price
--------------------------------- */


.service-price {

    text-align:center;

    margin-bottom:70px;

}



.price-label {

    font-size:14px;

    letter-spacing:.15em;

    color:#64748B;

    margin-bottom:15px;

}



.price-value {

    font-size:64px;

    font-weight:700;

    color:#0F172A;

    margin:0;

}



.price-value span {

    font-size:20px;

    font-weight:400;

}







/* ---------------------------------
   Service Cards
--------------------------------- */


.service-list {

    display:grid;

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

    gap:25px;

    max-width:1100px;

    margin:0 auto;

}





.service-item {

    background:#F8F8F6;

    padding:35px 30px;

    border-radius:20px;

}



.service-item h3 {

    font-size:22px;

    margin:0 0 20px;

}



.service-item p {

    font-size:15px;

    line-height:1.9;

    color:#475569;

    margin:0;

}






/* ---------------------------------
   Technology Note
--------------------------------- */


.technology-note {

    max-width:800px;

    margin:70px auto 0;

    padding:40px;

    background:#0F172A;

    color:#ffffff;

    border-radius:24px;

    text-align:center;

}



.technology-note p {

    font-size:16px;

    line-height:2;

    margin:10px 0;

}



.technology-note strong {

    color:#C8A45D;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .service {

        padding:80px 0;

    }


    .price-value {

        font-size:42px;

    }


    .service-list {

        grid-template-columns:1fr;

    }


    .technology-note {

        padding:30px 20px;

    }


}

/* =================================
   第8章 FLOW
================================= */


.flow {

    padding:120px 0;

    background:#F8F8F6;

}





.flow-list {

    max-width:850px;

    margin:0 auto;

    position:relative;

}




/* 縦ライン */

.flow-list::before {

    content:"";

    position:absolute;

    left:36px;

    top:20px;

    bottom:20px;

    width:1px;

    background:#CBD5E1;

}





.flow-item {

    display:flex;

    gap:40px;

    position:relative;

    padding-bottom:50px;

}



.flow-item:last-child {

    padding-bottom:0;

}





.flow-number {

    flex-shrink:0;

    width:72px;

    height:72px;

    border-radius:50%;

    background:#0F172A;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

    position:relative;

    z-index:2;

}





.flow-content {

    padding-top:10px;

}



.flow-content h3 {

    font-size:26px;

    margin:0 0 15px;

}



.flow-content p {

    margin:0;

    font-size:16px;

    line-height:2;

    color:#475569;

}





/* ---------------------------------
   Message
--------------------------------- */


.flow-message {

    max-width:700px;

    margin:70px auto 0;

    text-align:center;

}



.flow-message strong {

    font-size:24px;

    color:#0F172A;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .flow {

        padding:80px 0;

    }


    .flow-list::before {

        left:25px;

    }


    .flow-item {

        gap:20px;

    }


    .flow-number {

        width:50px;

        height:50px;

        font-size:15px;

    }


    .flow-content h3 {

        font-size:21px;

    }


    .flow-content p {

        font-size:15px;

    }


    .flow-message strong {

        font-size:20px;

    }


}

/* =================================
   第9章 FAQ
================================= */


.faq {

    padding:120px 0;

    background:#ffffff;

}




.faq-list {

    max-width:900px;

    margin:0 auto;

}




.faq-item {

    padding:35px 40px;

    background:#F8F8F6;

    border-radius:20px;

    margin-bottom:20px;

}





.faq-item h3 {

    position:relative;

    font-size:20px;

    line-height:1.6;

    margin:0 0 20px;

    padding-left:35px;

    color:#0F172A;

}





.faq-item h3::before {

    content:"Q";

    position:absolute;

    left:0;

    top:0;

    font-size:18px;

    font-weight:700;

    color:#C8A45D;

}





.faq-item p {

    position:relative;

    margin:0;

    padding-left:35px;

    font-size:15px;

    line-height:2;

    color:#475569;

}





.faq-item p::before {

    content:"A";

    position:absolute;

    left:0;

    top:0;

    font-size:18px;

    font-weight:700;

    color:#0F172A;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .faq {

        padding:80px 0;

    }


    .faq-item {

        padding:25px 20px;

    }


    .faq-item h3 {

        font-size:17px;

        padding-left:30px;

    }


    .faq-item p {

        font-size:14px;

        padding-left:30px;

    }


}

/* =================================
   第10章 CONTACT
================================= */


.contact {

    padding:120px 0;

    background:#0F172A;

    color:#ffffff;

}





.contact-inner {

    max-width:900px;

}





.contact-content {

    text-align:center;

}




.contact .section-label {

    color:#C8A45D;

}




.contact h2 {

    font-size:46px;

    line-height:1.5;

    letter-spacing:.05em;

    margin:0 0 35px;

}





.contact p {

    font-size:17px;

    line-height:2;

    color:#E2E8F0;

    margin:15px 0;

}




.contact strong {

    color:#C8A45D;

}





.contact-message {

    margin:50px auto;

    padding:40px 30px;

    max-width:700px;

    background:rgba(255,255,255,.05);

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

    border-radius:20px;

}



.contact-message p {

    margin:10px 0;

}



.contact-message strong {

    display:block;

    font-size:28px;

    color:#ffffff;

}





.contact-button {

    display:inline-block;

    margin-top:20px;

    padding:20px 70px;

    border-radius:50px;

    background:#C8A45D;

    color:#ffffff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}



.contact-button:hover {

    background:#ffffff;

    color:#0F172A;

}





.contact-note {

    margin-top:25px!important;

    font-size:13px!important;

    color:#94A3B8!important;

}





/* ---------------------------------
   Mobile
--------------------------------- */


@media(max-width:768px){


    .contact {

        padding:80px 0;

    }


    .contact h2 {

        font-size:30px;

    }


    .contact p {

        font-size:15px;

    }


    .contact-message {

        padding:30px 20px;

    }


    .contact-message strong {

        font-size:22px;

    }


    .contact-button {

        width:100%;

        padding:18px 20px;

    }


}

/* ==========================================
   第7章追加部分 専用CSS
========================================== */


/* 共通 */

.service7-section {

    margin-top:80px;

}


.service7-heading {

    text-align:center;

    margin-bottom:40px;

}


.service7-heading h3 {

    font-size:28px;

    font-weight:700;

    margin-bottom:20px;

}


.service7-heading p {

    line-height:1.8;

    color:#555;

}





/* ==========================================
   標準機能
========================================== */


.service7-feature-list {

    display:grid;

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

    gap:25px;

}



.service7-feature-item {

    background:#fff;

    border-radius:12px;

    padding:30px 25px;

    box-shadow:0 5px 20px rgba(0,0,0,0.06);

}



.service7-feature-item h4 {

    font-size:18px;

    margin-bottom:15px;

}



.service7-feature-item p {

    font-size:14px;

    line-height:1.8;

    color:#555;

}






/* ==========================================
   デモサイト
========================================== */


.service7-demo-image {

    max-width:1000px;

    margin:0 auto 40px;

}


.service7-demo-image img {

    width:100%;

    border-radius:15px;

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

}




.service7-demo-buttons {

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



.service7-demo-button {

    display:block;

    min-width:220px;

    padding:16px 30px;

    border:2px solid #C8A45D;

    color:#C8A45D;

    background:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:bold;

    transition:.3s;

}



.service7-demo-button:hover {

    background:#C8A45D;

    color:#fff;

}







/* ==========================================
   BASEとの差別化機能
========================================== */


.service7-card-list {

    display:grid;

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

    gap:25px;

}



.service7-card {

    border:1px solid #eee;

    border-radius:12px;

    padding:30px 25px;

    background:#fff;

}



.service7-card h4 {

    font-size:18px;

    margin-bottom:15px;

}



.service7-card p {

    font-size:14px;

    line-height:1.8;

    color:#555;

}







/* ==========================================
   帳票画像
========================================== */


.service7-document-list {

    display:flex;

    justify-content:center;

    gap:30px;

}



.service7-document-item {

    width:280px;

    text-align:center;

}



.service7-document-item img {

    width:100%;

    border-radius:10px;

    box-shadow:0 8px 25px rgba(0,0,0,0.12);

}



.service7-document-item p {

    margin-top:15px;

    font-weight:bold;

}






/* ==========================================
   メール画像
========================================== */


.service7-mail-image {

    max-width:800px;

    margin:0 auto;

}



.service7-mail-image img {

    width:100%;

    border-radius:15px;

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

}







/* ==========================================
   タブレット
========================================== */


@media(max-width:1024px){


    .service7-feature-list {

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

    }



    .service7-card-list {

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

    }


}







/* ==========================================
   スマホ
========================================== */


@media(max-width:767px){


    .service7-section {

        margin-top:60px;

    }



    .service7-heading h3 {

        font-size:22px;

    }



    .service7-feature-list {

        grid-template-columns:1fr;

    }



    .service7-card-list {

        grid-template-columns:1fr;

    }



    .service7-demo-buttons {

        flex-direction:column;

        align-items:center;

    }



    .service7-demo-button {

        width:90%;

    }



    .service7-document-list {

        flex-direction:column;

        align-items:center;

    }



    .service7-document-item {

        width:90%;

    }


}