@charset "UTF-8";

/* ==========================================================================
   Variables & Reset (Design73 Aesthetic: Natural / Adult / Calm)
   ========================================================================== */
:root {
    /* Colors */
    --color-bg-body: #ffffff;
    --color-bg-alt: #fdfcf8; /* Warm off-white */
    --color-bg-accent: #f5f0e6; /* Beige for emphasis */
    
    --color-text-main: #4a4a4a; /* Softer black (Charcoal) */
    --color-text-title: #5d5045; /* Brown-gray for headings */
    --color-text-sub: #7a7a7a;
    
    --color-primary: #8c7b6a; /* Muted Brown/Beige */
    --color-accent: #b8a07e; /* Goldish Beige */
    --color-line-green: #06c755;
    
    /* Fonts */
    --font-heading: 'Shippori Mincho', serif;
    --font-body: 'Noto Sans JP', sans-serif;

    /* Spacing (Generous for "Adult" feel) */
    --spacing-sm: 40px;
    --spacing-md: 80px;
    --spacing-lg: 120px;
    
    /* Layout */
    --content-width-pc: 1000px; /* Width of the center "strip" on PC */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 2.0; /* Loose leading for readability */
    color: var(--color-text-main);
    
    /* PARALLAX BACKGROUND EFFECT */
    /* Light beige/grey gradient or pattern fixed in back */
    background-color: #e6e6e6; 
    background-image: linear-gradient(135deg, #f5f5f5 25%, #e8e8e8 25%, #e8e8e8 50%, #f5f5f5 50%, #f5f5f5 75%, #e8e8e8 75%, #e8e8e8 100%);
    background-size: 40px 40px; /* Subtle pattern */
    background-attachment: fixed; /* Key for parallax feel */
    background-position: center;
    
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.05em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.4s ease;
}

a:hover {
    opacity: 0.7;
}

ul, ol {
    list-style: none;
}

img, video {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ==========================================================================
   Main Content Layout (Centered Strip)
   ========================================================================== */
main {
    /* PC: Centered strip with box shadow */
    max-width: var(--content-width-pc);
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 50px rgba(0,0,0,0.05);
    position: relative;
    z-index: 10;
    padding-bottom: 60px; /* Space for footer/bottom */
}

/* On PC, the Hero should probably be inside this strip OR full width?
   User said "middle content moves", "PC has side margins". 
   Usually hero is inside the strip for this specific "Jintan" look. */

/* ==========================================================================
   Utilities
   ========================================================================== */
.container {
    width: 100%;
    padding: 0 40px;
    margin: 0 auto;
}

.container-sm {
    max-width: 720px; /* Tighter for text Heavy sections */
    margin: 0 auto;
}

.section {
    padding: var(--spacing-lg) 0;
}

/* Typography */
.section-title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
    color: var(--color-text-title);
    letter-spacing: 0.1em;
}

.section-lead {
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    color: var(--color-primary);
    font-family: var(--font-heading);
}

/* Buttons */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 50px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s ease;
}

.btn-line {
    background-color: var(--color-line-green);
    color: #fff;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(6, 199, 85, 0.2);
}

.btn-line:hover {
    background-color: #05b34d;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(6, 199, 85, 0.3);
}

.icon-line {
    font-weight: 900;
    margin-right: 12px;
    font-size: 1.3em;
}

/* Animations (Slow & Calm) */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 1.8s ease;
}

.fade-in.visible {
    opacity: 1;
}

.delay-1 { transition-delay: 0.3s; }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* Staggered Animations for Lists */
.check-item {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.check-item.visible {
    opacity: 1;
    transform: translateX(0);
}
/* Loop for check items delays */
.check-item:nth-child(1) { transition-delay: 0.1s; }
.check-item:nth-child(2) { transition-delay: 0.3s; }
.check-item:nth-child(3) { transition-delay: 0.5s; }
.check-item:nth-child(4) { transition-delay: 0.7s; }
.check-item:nth-child(5) { transition-delay: 0.9s; }

.lineup-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.0s ease, transform 1.0s ease;
}
.lineup-item.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Loop for lineup items delays */
.lineup-item:nth-child(1) { transition-delay: 0.1s; }
.lineup-item:nth-child(2) { transition-delay: 0.3s; }
.lineup-item:nth-child(3) { transition-delay: 0.5s; }
.lineup-item:nth-child(4) { transition-delay: 0.7s; }
.lineup-item:nth-child(5) { transition-delay: 0.9s; }
.lineup-item:nth-child(6) { transition-delay: 1.1s; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Relative to body, but content constrained */
    z-index: 100;
    padding: 0;
    pointer-events: none; /* Let clicks pass through if needed */
}

/* To keep header logo aligned with main content on PC, we center its inner container too */
.header-inner {
    max-width: var(--content-width-pc);
    margin: 0 auto;
    padding: 30px 40px;
    pointer-events: auto;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    position: relative;
    /* Hero fits inside the Main strip on PC */
    width: 100%;
    /* Aspect ratio or fixed height */
    height: 700px; 
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(43, 37, 30, 0.3); /* Brown tone overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.hero-sub {
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    font-family: var(--font-heading);
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.hero-catch {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 50px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    line-height: 1.5;
}

/* ==========================================================================
   Anxiety (Structure: Problem Definition)
   ========================================================================== */
.anxiety {
    background-color: #fff; /* White base within strip */
}

.check-list {
    margin-bottom: 50px;
}

.check-item {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: var(--color-text-title);
    padding: 20px;
    border-bottom: 1px solid #eee;
    max-width: 600px;
    margin: 0 auto;
    font-family: var(--font-heading);
}

.check-icon {
    color: var(--color-accent);
    margin-right: 20px;
    font-size: 1.5rem;
}

.anxiety-conclusion {
    text-align: center;
    font-size: 1.5rem;
    color: var(--color-text-title);
    font-family: var(--font-heading);
    margin-top: 60px;
}

.anxiety-conclusion strong {
    font-size: 1.8rem;
    border-bottom: 2px solid var(--color-accent);
}

/* ==========================================================================
   Reasons (NRが選ばれる理由)
   ========================================================================== */
.reasons {
    background-color: var(--color-bg-alt);
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.reason-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.reason-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 15px;
    line-height: 1;
}

.reason-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-text-title);
    margin-bottom: 20px;
    line-height: 1.6;
}

.reason-text {
    font-size: 0.95rem;
    color: var(--color-text-sub);
    line-height: 2.0;
    text-align: left;
}

/* ==========================================================================
   Voices
   ========================================================================== */
.voices {
    background-color: var(--color-bg-accent); /* Beige bg within strip */
}

.voice-card {
    background: #fff;
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 4px;
    position: relative;
}

.voice-card::before {
    content: '"';
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 4rem;
    color: var(--color-bg-accent);
    font-family: var(--font-heading);
    line-height: 1;
}

.voice-text {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 2.2;
    color: var(--color-text-title);
    text-align: center;
}

.voice-note {
    text-align: right;
    font-size: 0.8rem;
    color: #999;
    margin-top: 15px;
}

/* ==========================================================================
   Lineup
   ========================================================================== */
.lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.lineup-item {
    text-align: center;
}

.lineup-img-box {
    margin-bottom: 20px;
    overflow: hidden;
}

.img-placeholder {
    width: 100%;
    height: 250px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-family: var(--font-heading);
    transition: transform 0.5s ease;
}

.lineup-item:hover .img-placeholder {
    transform: scale(1.05);
}

.lineup-item h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--color-text-title);
}

.lineup-item p {
    font-size: 0.9rem;
    color: var(--color-text-sub);
}

.lineup-more {
    text-align: right;
    margin-top: 30px;
}

.text-link {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 5px;
    font-size: 0.9rem;
}

.lineup-note {
    text-align: center;
    margin-bottom: 40px;
    font-size: 0.9rem;
    color: var(--color-text-sub);
    font-family: var(--font-heading);
}

/* ==========================================================================
   Tech/Trust
   ========================================================================== */
.lead-text {
    text-align: center;
    margin-bottom: 50px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.trust-points {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.point {
    flex: 1;
    text-align: center;
    padding: 30px 15px;
    border: 1px solid #eee;
}

.point h3 {
    font-family: var(--font-heading);
    color: var(--color-accent);
    font-size: 1.4rem;
    margin-bottom: 10px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

.accordion-header {
    width: 100%;
    padding: 20px 0;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-text-title);
    transition: color 0.3s;
}

.accordion-header:hover {
    color: var(--color-primary);
}

.toggle-icon {
    font-family: sans-serif;
    color: var(--color-accent);
    font-size: 1.2rem;
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    color: var(--color-text-sub);
    line-height: 1.8;
}

.accordion-body.open {
    padding-bottom: 25px;
}

/* ==========================================================================
   Company
   ========================================================================== */
.company {
    background: #fcfcfc;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
}

.company-table th, .company-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.company-table th {
    width: 120px;
    font-weight: normal;
    color: var(--color-text-sub);
}

.company-table td {
    font-family: var(--font-heading);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background: #2b251e;
    color: #fff;
    padding: 30px 0;
    text-align: center;
    /* Footer effectively ends the strip, typically it can be full width or inside.
       For Jintan look, usually footer is full width or same as strip.
       We'll keep it inside Main for simplicity to maintain the 'strip' effect seamlessly. */
}

.copyright {
    font-size: 0.75rem;
    opacity: 0.6;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   Floating CTA
   ========================================================================== */
.floating-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--color-line-green);
    color: #fff;
    padding: 20px 35px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    z-index: 1000;
    font-weight: bold;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    pointer-events: none;
    font-size: 1.1rem;
}

.floating-cta.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.icon-line-white {
    font-weight: 900;
    margin-right: 15px;
    font-size: 1.4em;
}

/* ==========================================================================
   Responsive (SP Overrides for Full Width)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Tablet adjustment */
    :root {
        --content-width-pc: 100%; /* Switch to full width earlier if needed, or 90% */
    }
}

@media (max-width: 768px) {
    /* SP LAYOUT: Full Width Override */
    body {
        /* On SP, the strict 'box on background' is removed as per requirement */
        background: #fff; 
    }

    main {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        padding-bottom: 0;
    }

    .container {
        padding: 0 20px;
    }

    .section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 1.8rem;
    }

    .hero {
        height: 500px;
    }

    .hero-catch {
        font-size: 2.2rem;
    }

    .pc-only { display: none; }
    .sp-only { display: block; }

    /* Header adjustments */
    .header-inner {
        max-width: 100%;
        padding: 20px;
    }

    /* Reasons Grid Stack */
    .reasons-grid {
        grid-template-columns: 1fr;
    }

    /* Grid Stacks */
    .lineup-grid {
        grid-template-columns: 1fr;
    }

    .trust-points {
        flex-direction: column;
        gap: 15px;
    }

    .floating-cta {
        bottom: 20px;
        right: 20px;
        left: 20px;
        justify-content: center;
    }
    
    .footer {
        padding-bottom: 100px; /* Space for CTA */
    }
}