/* ==========================================================
   DAIKOU Sales Partner
   style.css
   ========================================================== */

/* ==========================================================
   Root
   ========================================================== */

:root{

    --color-primary:#0F766E;
    --color-primary-dark:#115E59;
    --color-accent:#14B8A6;

    --color-text:#111827;
    --color-heading:#111111;

    --color-gray-100:#F8FAFC;
    --color-gray-200:#F1F5F9;
    --color-gray-300:#E2E8F0;
    --color-gray-400:#CBD5E1;
    --color-gray-500:#64748B;

    --color-white:#FFFFFF;

    --container:1200px;

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:24px;

    --shadow-sm:0 8px 24px rgba(15,23,42,.06);
    --shadow-md:0 20px 50px rgba(15,23,42,.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",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;

    color:var(--color-text);

    background:#fff;

    line-height:1.9;

    font-size:16px;

    -webkit-font-smoothing:antialiased;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

button,
input,
textarea{

    font:inherit;

}

textarea{

    resize:vertical;

}

section{

    padding:120px 0;

}

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

.container{

    width:min(92%,var(--container));

    margin:auto;

}

.section-heading{

    margin-bottom:72px;

}

.section-heading span{

    display:inline-block;

    color:var(--color-primary);

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-heading h2{

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

    line-height:1.35;

    color:var(--color-heading);

    font-weight:800;

}

.section-heading p{

    margin-top:24px;

    color:var(--color-gray-500);

}

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-height:60px;

    padding:0 34px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    color:#fff;

    background:var(--color-primary);

    box-shadow:var(--shadow-sm);

}

.btn-primary:hover{

    transform:translateY(-3px);

    background:var(--color-primary-dark);

    box-shadow:var(--shadow-md);

}

.btn-large{

    min-width:260px;

    height:68px;

    font-size:1.05rem;

}

.required{

    color:#DC2626;

    margin-left:6px;

    font-size:.85rem;

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

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

    backdrop-filter:blur(18px);

    border-bottom:1px solid var(--color-gray-200);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:82px;

}

.logo{

    font-size:1.15rem;

    font-weight:800;

    color:var(--color-heading);

    letter-spacing:.04em;

}

.header-nav ul{

    display:flex;

    align-items:center;

    gap:34px;

}

.header-nav a{

    font-size:.95rem;

    font-weight:600;

}

.header-nav a:hover{

    color:var(--color-primary);

}

.header-button{

    padding:14px 26px;

    border-radius:999px;

    color:#fff !important;

    background:var(--color-primary);

}

.header-button:hover{

    background:var(--color-primary-dark);

}

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

.hero{

    padding-top:180px;

    padding-bottom:140px;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );

}

.hero .container{

    max-width:860px;

}

.hero-label{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:#E6FFFB;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:34px;

}

.hero h1{

    font-size:clamp(2.8rem,6vw,4.8rem);

    line-height:1.18;

    font-weight:800;

    color:var(--color-heading);

    margin-bottom:32px;

}

.hero-lead{

    font-size:1.45rem;

    line-height:1.8;

    color:var(--color-text);

    margin-bottom:30px;

}

.hero-text{

    font-size:1.08rem;

    color:var(--color-gray-500);

    margin-bottom:46px;

}

.hero-copy{

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

    line-height:1.4;

    font-weight:800;

    margin-bottom:48px;

}

.hero-cta{

    display:flex;

    align-items:center;

    gap:20px;

}

/* ==========================================================
   Problem
   ========================================================== */

.problem{

    background:#fff;

}

.problem-content{

    max-width:820px;

}

.problem-content p{

    margin-bottom:22px;

    font-size:1.05rem;

}

.problem-list{

    margin-top:60px;

    display:grid;

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

    gap:24px;

}

.problem-card{

    padding:36px;

    border-radius:var(--radius-md);

    background:var(--color-gray-100);

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

    transition:var(--transition);

}

.problem-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-sm);

}

.problem-card p{

    font-weight:700;

    line-height:1.8;

}

.problem-message{

    margin-top:60px;

    max-width:860px;

}

.problem-message p{

    margin-bottom:20px;

}
/* ==========================================================
   Concept
   ========================================================== */

.concept{

    background:var(--color-gray-100);

}

.concept-content{

    max-width:860px;

}

.concept-content p{

    margin-bottom:24px;

    font-size:1.08rem;

}

.concept-message{

    margin-top:36px;

    padding-left:24px;

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

    font-size:1.2rem;

    font-weight:700;

}

/* ==========================================================
   Service
   ========================================================== */

.service{

    background:#fff;

}

.service-grid{

    display:grid;

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

    gap:32px;

}

.service-card{

    padding:42px;

    background:#fff;

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

    border-radius:var(--radius-lg);

    transition:var(--transition);

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.service-card h3{

    font-size:1.5rem;

    color:var(--color-heading);

    margin-bottom:22px;

}

.service-card p{

    color:var(--color-gray-500);

    line-height:1.9;

}

/* ==========================================================
   Phase
   ========================================================== */

.phase{

    background:var(--color-gray-100);

}

.phase-list{

    display:grid;

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

    gap:32px;

}

.phase-card{

    padding:42px;

    background:#fff;

    border-radius:var(--radius-lg);

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

    transition:var(--transition);

}

.phase-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.phase-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    padding:8px 18px;

    border-radius:999px;

    background:#E6FFFB;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

}

.phase-card h3{

    margin-bottom:24px;

    font-size:1.5rem;

    color:var(--color-heading);

}

.phase-card p{

    margin-bottom:18px;

    color:var(--color-gray-500);

}

/* ==========================================================
   Graduation
   ========================================================== */

.graduation{

    background:#fff;

}

.graduation-content{

    max-width:860px;

}

.graduation-content p{

    margin-bottom:24px;

    font-size:1.08rem;

}

.graduation-message{

    margin-top:36px;

    padding:36px;

    border-radius:var(--radius-lg);

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent)
    );

    color:#fff;

    font-size:1.25rem;

    font-weight:700;

    line-height:1.8;

}
/* ==========================================================
   Founder
   ========================================================== */

.founder{

    background:var(--color-gray-100);

}

.founder-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:80px;

    align-items:start;

}

.founder-content p{

    margin-bottom:22px;

    font-size:1.08rem;

}

.founder-message{

    margin-top:40px;

    padding-left:24px;

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

    font-size:1.2rem;

    font-weight:700;

}

.founder-profile{

    position:sticky;

    top:120px;

}

.profile-card{

    padding:40px;

    border-radius:var(--radius-lg);

    background:#fff;

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

    box-shadow:var(--shadow-sm);

}

.profile-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:999px;

    background:#E6FFFB;

    color:var(--color-primary);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

}

.profile-card h3{

    margin-bottom:12px;

    font-size:2rem;

    color:var(--color-heading);

}

.profile-card p{

    margin-bottom:12px;

    color:var(--color-gray-500);

}

/* ==========================================================
   Flow
   ========================================================== */

.flow{

    background:#fff;

}

.flow-list{

    display:grid;

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

    gap:24px;

}

.flow-card{

    position:relative;

    padding:36px 28px;

    border-radius:var(--radius-lg);

    background:var(--color-gray-100);

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

    transition:var(--transition);

}

.flow-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-sm);

}

.flow-step{

    display:inline-flex;

    margin-bottom:22px;

    padding:8px 16px;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

}

.flow-card h3{

    margin-bottom:18px;

    font-size:1.25rem;

    color:var(--color-heading);

}

.flow-card p{

    color:var(--color-gray-500);

    line-height:1.8;

}

/* ==========================================================
   Price
   ========================================================== */

.price{

    background:var(--color-gray-100);

}

.price-box{

    max-width:860px;

    margin:auto;

    padding:70px;

    background:#fff;

    border-radius:var(--radius-lg);

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

    box-shadow:var(--shadow-sm);

}

.price-box h3{

    margin-bottom:28px;

    font-size:2rem;

    color:var(--color-heading);

}

.price-box p{

    margin-bottom:20px;

}

.price-box ul{

    margin-top:36px;

}

.price-box li{

    position:relative;

    padding-left:28px;

    margin-bottom:16px;

}

.price-box li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--color-primary);

    font-weight:700;

}
/* ==========================================================
   CTA
   ========================================================== */

.cta{

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    color:#fff;

}

.cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.cta-label{

    display:inline-flex;

    padding:10px 20px;

    margin-bottom:28px;

    border-radius:999px;

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

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.cta h2{

    font-size:clamp(2.2rem,5vw,3.8rem);

    line-height:1.35;

    margin-bottom:30px;

}

.cta-lead{

    font-size:1.2rem;

    margin-bottom:18px;

}

.cta p{

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

    margin-bottom:18px;

}

.cta-copy{

    margin:42px 0 52px;

    font-size:1.25rem;

    font-weight:700;

    line-height:1.8;

}

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

.contact{

    background:#fff;

}

.contact-form{

    max-width:760px;

    margin:auto;

    padding:60px;

    border-radius:var(--radius-lg);

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

    box-shadow:var(--shadow-sm);

    background:#fff;

}

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:30px;

}

.form-group label{

    margin-bottom:12px;

    font-weight:700;

    color:var(--color-heading);

}

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

    width:100%;

    padding:18px 20px;

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

    border-radius:12px;

    background:#fff;

    transition:var(--transition);

}

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

    outline:none;

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

    box-shadow:0 0 0 4px rgba(15,118,110,.12);

}

.form-group textarea{

    min-height:220px;

}

.btn-submit{

    width:100%;

    height:64px;

    border:none;

    cursor:pointer;

    font-size:1rem;

}

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

.footer{

    padding:80px 0;

    background:#111827;

    color:#fff;

}

.footer .container{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.footer-logo{

    font-size:1.6rem;

    font-weight:800;

    margin-bottom:20px;

}

.footer-copy{

    margin-bottom:36px;

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

}

.footer-nav{

    display:flex;

    gap:32px;

    margin-bottom:36px;

}

.footer-nav a{

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

}

.footer-nav a:hover{

    color:#fff;

}

.footer small{

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

}

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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-up.is-active{

    opacity:1;

    transform:none;

}

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

.text-center{

    text-align:center;

}

.mt-0{

    margin-top:0;

}

.mb-0{

    margin-bottom:0;

}

.hidden{

    display:none;

}

.w-100{

    width:100%;

}

/* ==========================================================
   Selection
   ========================================================== */

::selection{

    background:var(--color-primary);

    color:#fff;

}

/* ==========================================================
   Scrollbar
   ========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F1F5F9;

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary-dark);

}
/* ==========================================================
   Form Validation
   ========================================================== */

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

    border-color:#DC2626;

    background:#FEF2F2;

}

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

    border-color:#16A34A;

    background:#F0FDF4;

}

.error-message{

    margin-top:10px;

    color:#DC2626;

    font-size:.88rem;

}

.success-message{

    margin-top:10px;

    color:#15803D;

    font-size:.88rem;

}

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

.btn-loading{

    position:relative;

    pointer-events:none;

    opacity:.85;

}

.btn-loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:12px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    display:inline-block;

    animation:loading .8s linear infinite;

}

@keyframes loading{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   Back To Top
   ========================================================== */

.page-top{

    position:fixed;

    right:32px;

    bottom:32px;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    box-shadow:var(--shadow-md);

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

.page-top.is-show{

    opacity:1;

    visibility:visible;

}

.page-top:hover{

    transform:translateY(-5px);

    background:var(--color-primary-dark);

}

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

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

    will-change:transform;

}

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

    border-color:rgba(15,118,110,.18);

}

/* ==========================================================
   Focus Visible
   ========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{

    outline:3px solid rgba(20,184,166,.35);

    outline-offset:3px;

}

/* ==========================================================
   Motion Preference
   ========================================================== */

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

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

@media print{

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

        display:none;

    }

    body{

        color:#000;

        background:#fff;

    }

    section{

        padding:30px 0;

    }

}

/* ==========================================================
   End of style.css
   ========================================================== */
/* ==========================================================
   DAIKOU Sales Partner
   responsive.css
   ========================================================== */

/* ==========================================================
   Large Desktop
   ========================================================== */

@media (max-width:1200px){

    .container{

        width:min(94%,1100px);

    }

    .flow-list{

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

    }

}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width:992px){

    section{

        padding:90px 0;

    }

    .header .container{

        min-height:72px;

    }

    .header-nav{

        display:none;

    }

    .hero{

        padding-top:150px;

        padding-bottom:90px;

    }

    .hero h1{

        font-size:3rem;

    }

    .hero-copy{

        font-size:2.2rem;

    }

    .problem-list{

        grid-template-columns:1fr;

    }

    .service-grid{

        grid-template-columns:1fr;

    }

    .phase-list{

        grid-template-columns:1fr;

    }

    .flow-list{

        grid-template-columns:1fr;

    }

    .founder-layout{

        grid-template-columns:1fr;

        gap:50px;

    }

    .founder-profile{

        position:static;

    }

    .contact-form{

        padding:45px;

    }

}

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

@media (max-width:768px){

    body{

        font-size:15px;

    }

    section{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        font-size:2rem;

        line-height:1.45;

    }

    .hero{

        padding-top:130px;

    }

    .hero-label{

        font-size:.75rem;

    }

    .hero h1{

        font-size:2.35rem;

    }

    .hero-lead{

        font-size:1.1rem;

    }

    .hero-copy{

        font-size:1.9rem;

    }

    .hero-cta{

        flex-direction:column;

        align-items:stretch;

    }

    .btn{

        width:100%;

    }

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

        padding:28px;

    }

    .price-box{

        padding:40px 28px;

    }

    .contact-form{

        padding:35px 24px;

    }

    .footer-nav{

        flex-direction:column;

        gap:18px;

    }

    .page-top{

        right:20px;

        bottom:20px;

        width:48px;

        height:48px;

    }

}

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

@media (max-width:480px){

    .hero h1{

        font-size:2rem;

    }

    .hero-copy{

        font-size:1.65rem;

    }

    .section-heading h2{

        font-size:1.75rem;

    }

    .price-box h3{

        font-size:1.6rem;

    }

    .profile-card h3{

        font-size:1.7rem;

    }

    .contact-form{

        padding:28px 20px;

    }

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

        padding:16px;

    }

    .btn{

        min-height:56px;

    }

}

/* ==========================================================
   End of responsive.css
   ========================================================== */
/* ==========================================================
   DAIKOU Sales Partner
   main.js
   ========================================================== */

'use strict';

/* ==========================================================
   DOM Ready
   ========================================================== */

document.addEventListener('DOMContentLoaded', () => {

    initSmoothScroll();

    initFadeAnimation();

    initHeaderShadow();

    initBackToTop();

    initFAQ();

});

/* ==========================================================
   Smooth Scroll
   ========================================================== */

function initSmoothScroll(){

    const links = document.querySelectorAll('a[href^="#"]');

    links.forEach(link=>{

        link.addEventListener('click',e=>{

            const targetId = link.getAttribute('href');

            if(targetId==="#" || targetId==="") return;

            const target = document.querySelector(targetId);

            if(!target) return;

            e.preventDefault();

            const header = document.querySelector('.header');

            const offset = header ? header.offsetHeight : 0;

            const position =
                target.getBoundingClientRect().top +
                window.pageYOffset -
                offset;

            window.scrollTo({

                top:position,

                behavior:'smooth'

            });

        });

    });

}

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

function initFadeAnimation(){

    const targets = document.querySelectorAll(

        '.problem-card,.service-card,.phase-card,.flow-card,.profile-card,.price-box,.faq-item,.cta-box,.contact-form'

    );

    targets.forEach(el=>{

        el.classList.add('fade-up');

    });

    const observer = new IntersectionObserver(entries=>{

        entries.forEach(entry=>{

            if(entry.isIntersecting){

                entry.target.classList.add('is-active');

                observer.unobserve(entry.target);

            }

        });

    },{

        threshold:.15

    });

    targets.forEach(target=>{

        observer.observe(target);

    });

}

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

function initHeaderShadow(){

    const header = document.querySelector('.header');

    if(!header) return;

    window.addEventListener('scroll',()=>{

        if(window.scrollY>20){

            header.style.boxShadow='0 10px 30px rgba(15,23,42,.08)';

        }else{

            header.style.boxShadow='none';

        }

    });

}

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

function initFAQ(){

    const items=document.querySelectorAll('.faq-item');

    items.forEach(item=>{

        item.addEventListener('toggle',()=>{

            if(!item.open) return;

            items.forEach(other=>{

                if(other!==item){

                    other.removeAttribute('open');

                }

            });

        });

    });

}

/* ==========================================================
   Back To Top
   ========================================================== */

function initBackToTop(){

    const button=document.createElement('button');

    button.className='page-top';

    button.setAttribute('aria-label','ページ上部へ戻る');

    button.innerHTML='↑';

    document.body.appendChild(button);

    window.addEventListener('scroll',()=>{

        if(window.scrollY>500){

            button.classList.add('is-show');

        }else{

            button.classList.remove('is-show');

        }

    });

    button.addEventListener('click',()=>{

        window.scrollTo({

            top:0,

            behavior:'smooth'

        });

    });

}

/* ==========================================================
   End
   ========================================================== */
/* ==========================================================
   DAIKOU Sales Partner
   analytics.js
   ========================================================== */

'use strict';

/* ==========================================================
   Google Tag Manager DataLayer
   ========================================================== */

window.dataLayer = window.dataLayer || [];

function pushEvent(eventName, params = {}){

    window.dataLayer.push({

        event: eventName,

        ...params

    });

}

/* ==========================================================
   DOM Ready
   ========================================================== */

document.addEventListener('DOMContentLoaded', () => {

    trackCTAButtons();

    trackScrollDepth();

    trackFormStart();

    trackOutboundLinks();

    trackPageView();

});

/* ==========================================================
   Page View
   ========================================================== */

function trackPageView(){

    pushEvent('page_view_custom',{

        page_path:location.pathname,

        page_title:document.title

    });

}

/* ==========================================================
   CTA Click
   ========================================================== */

function trackCTAButtons(){

    const buttons=document.querySelectorAll('.js-cta');

    buttons.forEach(button=>{

        button.addEventListener('click',()=>{

            pushEvent('cta_click',{

                button_name:button.dataset.event || 'cta',

                button_text:button.innerText.trim(),

                page:location.pathname

            });

        });

    });

}

/* ==========================================================
   Form Start
   ========================================================== */

function trackFormStart(){

    const form=document.getElementById('contactForm');

    if(!form) return;

    let fired=false;

    form.addEventListener('focusin',()=>{

        if(fired) return;

        fired=true;

        pushEvent('form_start',{

            form_name:'contact'

        });

    });

}

/* ==========================================================
   Scroll Depth
   ========================================================== */

function trackScrollDepth(){

    const points=[50,75,90];

    const fired=[];

    window.addEventListener('scroll',()=>{

        const scrollTop=window.scrollY;

        const height=document.documentElement.scrollHeight-window.innerHeight;

        const percent=Math.round((scrollTop/height)*100);

        points.forEach(point=>{

            if(percent>=point && !fired.includes(point)){

                fired.push(point);

                pushEvent('scroll_depth',{

                    percent:point

                });

            }

        });

    });

}

/* ==========================================================
   Outbound Link
   ========================================================== */

function trackOutboundLinks(){

    const links=document.querySelectorAll('a[target="_blank"]');

    links.forEach(link=>{

        link.addEventListener('click',()=>{

            pushEvent('outbound_click',{

                url:link.href,

                text:link.innerText.trim()

            });

        });

    });

}

/* ==========================================================
   Form Submit Success
   ========================================================== */

function trackFormSuccess(){

    pushEvent('form_submit',{

        form_name:'contact',

        result:'success'

    });

}

/* ==========================================================
   Form Submit Error
   ========================================================== */

function trackFormError(message='validation_error'){

    pushEvent('form_error',{

        error:message

    });

}

/* ==========================================================
   Clarity Custom Event
   ========================================================== */

function clarityEvent(name){

    if(typeof clarity==='function'){

        clarity("event",name);

    }

}

/* ==========================================================
   Export
   ========================================================== */

window.trackFormSuccess=trackFormSuccess;
window.trackFormError=trackFormError;
window.clarityEvent=clarityEvent;

/* ==========================================================
   End
   ========================================================== */
/* ==========================================================
   DAIKOU Sales Partner
   form.js
   ========================================================== */

'use strict';

/* ==========================================================
   DOM Ready
   ========================================================== */

document.addEventListener('DOMContentLoaded',()=>{

    const form=document.getElementById('contactForm');

    if(!form) return;

    initializeValidation(form);

    initializeSubmit(form);

});

/* ==========================================================
   Validation
   ========================================================== */

function initializeValidation(form){

    const requiredFields=form.querySelectorAll('[required]');

    requiredFields.forEach(field=>{

        field.addEventListener('blur',()=>{

            validateField(field);

        });

        field.addEventListener('input',()=>{

            if(field.parentElement.classList.contains('error')){

                validateField(field);

            }

        });

    });

}

function validateField(field){

    const value=field.value.trim();

    const group=field.closest('.form-group');

    removeMessage(group);

    if(value===''){

        setError(group,'入力してください。');

        return false;

    }

    if(field.type==='email'){

        const emailPattern=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if(!emailPattern.test(value)){

            setError(group,'メールアドレスの形式をご確認ください。');

            return false;

        }

    }

    group.classList.remove('error');

    group.classList.add('success');

    return true;

}

function setError(group,message){

    group.classList.remove('success');

    group.classList.add('error');

    const error=document.createElement('div');

    error.className='error-message';

    error.textContent=message;

    group.appendChild(error);

}

function removeMessage(group){

    const error=group.querySelector('.error-message');

    if(error){

        error.remove();

    }

}

/* ==========================================================
   Submit
   ========================================================== */

function initializeSubmit(form){

    form.addEventListener('submit',async(event)=>{

        event.preventDefault();

        const fields=form.querySelectorAll('[required]');

        let valid=true;

        fields.forEach(field=>{

            if(!validateField(field)){

                valid=false;

            }

        });

        if(!valid){

            if(window.trackFormError){

                window.trackFormError();

            }

            return;

        }

        const button=form.querySelector('.btn-submit');

        button.classList.add('btn-loading');

        button.disabled=true;

        const formData=new FormData(form);

        try{

            const response=await fetch(form.action,{

                method:'POST',

                body:formData

            });

            const result=await response.json();

            if(result.status==='success'){

                if(window.trackFormSuccess){

                    window.trackFormSuccess();

                }

                if(window.clarityEvent){

                    window.clarityEvent('form_submit');

                }

                window.location.href='thanks.html';

                return;

            }

            throw new Error(result.message);

        }

        catch(error){

            alert('送信に失敗しました。時間をおいて再度お試しください。');

            console.error(error);

        }

        finally{

            button.classList.remove('btn-loading');

            button.disabled=false;

        }

    });

}

/* ==========================================================
   End
   ========================================================== */
<!DOCTYPE html>
<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>お問い合わせありがとうございました｜DAIKOU Sales Partner</title>

    <meta name="robots" content="noindex,nofollow">

    <link rel="stylesheet" href="assets/css/style.css">

    <link rel="stylesheet" href="assets/css/responsive.css">

</head>

<body>

<main>

<section class="thanks">

    <div class="container">

        <div class="thanks-box">

            <span class="thanks-label">
                THANK YOU
            </span>

            <h1>
                お問い合わせ<br>
                ありがとうございました。
            </h1>

            <p class="thanks-lead">

                この度は、
                DAIKOU Sales Partnerへ
                お問い合わせいただき、
                誠にありがとうございます。

            </p>

            <p>

                内容を確認のうえ、
                2営業日以内を目安に
                担当者よりご連絡いたします。

            </p>

            <p>

                ご入力いただいたメールアドレス宛に、
                自動返信メールを送信しております。

            </p>

            <div class="thanks-info">

                <h2>
                    ご確認ください
                </h2>

                <ul>

                    <li>
                        自動返信メールが届かない場合は、
                        迷惑メールフォルダもご確認ください。
                    </li>

                    <li>
                        お急ぎの場合は、
                        下記メールアドレスまでご連絡ください。
                    </li>

                </ul>

            </div>

            <div class="thanks-contact">

                <a href="mailto:contact@the1.co.jp">

                    contact@the1.co.jp

                </a>

            </div>

            <div class="thanks-button">

                <a href="./" class="btn btn-primary">

                    トップページへ戻る

                </a>

            </div>

        </div>

    </div>

</section>

</main>

<script src="assets/js/analytics.js"></script>

<script>

document.addEventListener("DOMContentLoaded",function(){

    if(window.dataLayer){

        dataLayer.push({

            event:"thanks_page"

        });

    }

    if(typeof clarity==="function"){

        clarity("event","thanks_page");

    }

});

</script>

</body>

</html>
<?php

/**
 * ==========================================================
 * DAIKOU Sales Partner
 * form.php
 * ==========================================================
 */

header('Content-Type: application/json; charset=UTF-8');

require_once __DIR__ . '/config.php';
require_once __DIR__ . '/sendgrid.php';
require_once __DIR__ . '/spreadsheet.php';

/* ==========================================================
   Method Check
   ========================================================== */

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {

    http_response_code(405);

    echo json_encode([
        'status' => 'error',
        'message' => 'Method Not Allowed'
    ]);

    exit;

}

/* ==========================================================
   Input
   ========================================================== */

$company = trim($_POST['company'] ?? '');
$name    = trim($_POST['name'] ?? '');
$email   = trim($_POST['email'] ?? '');
$tel     = trim($_POST['tel'] ?? '');
$message = trim($_POST['message'] ?? '');

/* ==========================================================
   Validation
   ========================================================== */

if ($name === '') {

    responseError('お名前を入力してください。');

}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

    responseError('メールアドレスが正しくありません。');

}

if ($message === '') {

    responseError('お問い合わせ内容を入力してください。');

}

/* ==========================================================
   reCAPTCHA
   ========================================================== */

if (!verifyRecaptcha($_POST['g-recaptcha-response'] ?? '')) {

    responseError('reCAPTCHA認証に失敗しました。');

}

/* ==========================================================
   Save Google Spreadsheet
   ========================================================== */

saveSpreadsheet([

    date('Y-m-d H:i:s'),

    $company,

    $name,

    $email,

    $tel,

    $message,

    $_SERVER['REMOTE_ADDR']

]);

/* ==========================================================
   Send Mail
   ========================================================== */

sendAdminMail([

    'company'=>$company,

    'name'=>$name,

    'email'=>$email,

    'tel'=>$tel,

    'message'=>$message

]);

sendCustomerMail([

    'company'=>$company,

    'name'=>$name,

    'email'=>$email,

    'tel'=>$tel,

    'message'=>$message

]);

/* ==========================================================
   Success
   ========================================================== */

echo json_encode([

    'status'=>'success'

]);

exit;

/* ==========================================================
   Functions
   ========================================================== */

function responseError($message)
{

    http_response_code(400);

    echo json_encode([

        'status'=>'error',

        'message'=>$message

    ]);

    exit;

}

/* ==========================================================
   reCAPTCHA Verify
   ========================================================== */

function verifyRecaptcha($token)
{

    if(empty(RECAPTCHA_SECRET)){

        return true;

    }

    $endpoint='https://www.google.com/recaptcha/api/siteverify';

    $response=file_get_contents(

        $endpoint.

        '?secret='.

        urlencode(RECAPTCHA_SECRET).

        '&response='.

        urlencode($token)

    );

    $result=json_decode($response,true);

    return !empty($result['success']);

}
/* ==========================================================
   Section Divider
   ========================================================== */

.section-divider{

    width:80px;

    height:4px;

    margin:0 auto 48px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-accent)
    );

}

/* ==========================================================
   Section Background Variation
   ========================================================== */

.bg-white{

    background:#fff;

}

.bg-light{

    background:var(--color-gray-100);

}

.bg-gradient{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );

}

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

.card{

    background:#fff;

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}

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

.check-list{

    display:grid;

    gap:18px;

    margin-top:32px;

}

.check-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    line-height:1.9;

}

.check-list li::before{

    content:"✓";

    flex-shrink:0;

    width:26px;

    height:26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(20,184,166,.12);

    color:var(--color-primary);

    font-size:.9rem;

    font-weight:700;

}

/* ==========================================================
   Form Placeholder
   ========================================================== */

::placeholder{

    color:#94A3B8;

    opacity:1;

}

/* ==========================================================
   Disabled
   ========================================================== */

button:disabled{

    opacity:.65;

    cursor:not-allowed;

}

/* ==========================================================
   Anchor Offset
   ========================================================== */

section[id]{

    scroll-margin-top:110px;

}

/* ==========================================================
   Image Safety
   ========================================================== */

img{

    height:auto;

    vertical-align:middle;

}

/* ==========================================================
   Accessibility
   ========================================================== */

.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    margin:-1px;

    padding:0;

    overflow:hidden;

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

    white-space:nowrap;

    border:0;

}

/* ==========================================================
   Selection Improvement
   ========================================================== */

input:-webkit-autofill,
textarea:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    transition:background-color 9999s ease-in-out 0s;

}

/* ==========================================================
   Loading Overlay
   ========================================================== */

.loading{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:9999;

}

.loading.is-active{

    opacity:1;

    visibility:visible;

}

.loading-spinner{

    width:52px;

    height:52px;

    border:4px solid var(--color-gray-300);

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

    border-radius:50%;

    animation:loading .8s linear infinite;

}

/* ==========================================================
   End of style.css
   ========================================================== */