@charset "UTF-8";

/* Contact Page Specific Styles */
.contact-intro-section {
    padding: 60px 0 100px;
}

/* Contact Intro & Buttons */
.contact-intro-content {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center;
}

.contact-desc {
    text-align: left;
    display: inline-block;
    margin-bottom: 60px;
    font-size: 16px;
    line-height: 2;
    color: #333;
}

.contact-action-buttons {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.contact-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 380px;
    height: 120px;
    border-radius: 60px;
    /* Full pill shape */
    position: relative;
    overflow: hidden;
    color: #fff;
    transition: transform 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-btn:hover {
    transform: translateY(-3px);
}

/* Glassy Shine Effect using ::before */
.contact-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    /* Top half */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    border-radius: 60px 60px 100% 100% / 60px 60px 20px 20px;
    /* Curve to simulate the shine in image */
    pointer-events: none;
}

/* Yellow Phone Button */
.btn-tel {
    background: linear-gradient(135deg, #fdd000 0%, #fbc02d 100%);
    /* Orange-ish yellow gradient */
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.btn-tel .btn-icon img {
    width: 40px;
    height: auto;
    /* Assuming you have a phone icon, otherwise use text icon */
    filter: brightness(0) invert(1);
    /* Ensure white icon */
}

.btn-tel .btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.btn-tel .tel-number {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-tel .tel-time {
    font-size: 14px;
    font-weight: normal;
}

/* Pink FAQ Button */
.btn-faq {
    background: linear-gradient(135deg, #ffadc1 0%, #ff8fa3 100%);
    /* Pink gradient */
}

.btn-faq .faq-text {
    font-size: 26px;
    font-weight: 700;
}

/* Form Container */
.contact-form-container {
    max-width: 900px;
    margin: 0 auto;
    /* Removed border/padding background as per new image usually being cleaner or different. 
       Wait, image shows the form fields essentially floating or just clean layout. 
       Let's keep it clean but maybe remove the heavy border if not in image. 
       The image shows a clean white background, maybe subtle. 
       Actually the image shows the form inside the white area. 
       Let's keep it simple. */
    background: transparent;
    padding: 0;
    border: none;
}

/* Form Row Layout */
.contact-form-table {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.form-label {
    width: 250px;
    /* Fixed width for labels */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* Align badge and text */
    gap: 15px;
    padding-top: 10px;
    /* Align with input text */
}

.form-input {
    flex-grow: 1;
}

.label-text {
    font-weight: bold;
    font-size: 20px;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    min-width: 45px;
    text-align: center;
}

.badge.required {
    background-color: #e07563;
    /* Muted red/terra cotta */
}

.badge.optional {
    background-color: #cccccc;
}

/* Inputs */
.contact-form-table input[type="text"],
.contact-form-table input[type="email"],
.contact-form-table input[type="tel"],
.contact-form-table textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background-color: #fff;
}

.contact-form-table textarea {
    resize: vertical;
    border-color: #ccc;
}

/* Radio Groups */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 10px;
    /* Align with label */
}

.radio-group.column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columns for inquiry types if needed, or stick to flex wrap */
    gap: 10px 20px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    font-size: 18px;
}

.radio-group input[type="radio"] {
    accent-color: #00bef4;
    /* Blue accent for checked state */
    width: 18px;
    height: 18px;
}

/* Submit Button */
.form-submit {
    margin-top: 50px;
    text-align: center;
}

.submit-btn {
    background-color: #db6b56;
    /* Terracotta red from image */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 100px;
    /* Wide button */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: opacity 0.3s;
    box-shadow: 0 4px 10px rgba(219, 107, 86, 0.4);
}

.submit-btn:hover {
    opacity: 0.9;
}


/* Responsive */
@media (max-width: 768px) {
    .contact-action-buttons {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .contact-btn {
        width: 100%;
        max-width: 400px;
        height: auto;
        padding: 20px 0;
        border-radius: 40px;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .form-label {
        width: 100%;
        padding-top: 0;
    }

    .radio-group.column-layout {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .submit-btn {
        width: 100%;
        padding: 15px;
    }

    .form-input {
        width: 100%;
    }

    .contact-form-table input[type="text"],
    .contact-form-table input[type="email"],
    .contact-form-table input[type="tel"],
    .contact-form-table input[type="text"],
    .contact-form-table input[type="email"],
    .contact-form-table input[type="tel"],
    .contact-form-table textarea {
        width: 100%;
        padding: 15px;
        /* Increased height */
    }
}



/* =========================================
   Snow Monkey Forms Overrides
   (Mapping original design to SMF structure)
   ========================================= */

/* Use the wrapper class we added in the shortcode for specificity */
.wp-block-snow-monkey-forms-snow-monkey-form {
    max-width: 900px;
    margin: 0 auto;
}

/* Reset/Layout for SMF Item */
.smf-item {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 30px;
    border-bottom: none !important;
    /* Remove any border from default SMF logic if present */
    position: relative;
}

/* Label Column (Label + Badge) */
.smf-item__col--label {
    width: 290px;
    /* Revised: Compact but enough for nowrap text */
    min-width: 290px !important;
    /* Force width */
    flex-shrink: 0;
    padding-top: 15px;
    /* Align text with input, slightly increased for larger font */
    display: flex;
    flex-direction: row;
    /* Ensure label and badge are horizontal */
    align-items: center;
    gap: 15px;
    background: transparent !important;
}

.smf-item__label {
    margin-bottom: 0 !important;
    font-weight: bold;
    font-size: 22px;
    /* Increased from 20px */
    background: transparent !important;
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    /* Strictly no wrap */
    /* Prevent wrapping */
    gap: 10px;
    white-space: nowrap !important;
    /* Force text to stay on one line */
    width: 100%;
}

/* CSS-based Badges using Pseudo-elements */
/* Common Badge Style - Moved to ::before */
.smf-item__label::before {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    min-width: 45px;
    text-align: center;
    margin-right: 10px;
    /* Spacing between badge and text */
    content: "必須";
    /* Default to Required */
    background-color: #e07563;
    /* Required Color */
    line-height: 1.2;
}

/* Address (5th item) is Optional */
.smf-item:nth-of-type(5) .smf-item__label::before {
    content: "任意";
    background-color: #cccccc;
    /* Optional Color */
}

/* If badges are not output by SMF by default, we rely on the user adding them in the label or text ?? 
   Actually, SMF often adds a span with class .smf-item__label__badge or similar?
   Wait, save.js didn't show badge logic... It might be handled by `label` attribute content or strict settings.
   However, let's style the standard label text.
*/

.smf-item__label__text {
    font-weight: bold;
    font-size: 18px;
    /* Increased from 16px */
}

/* Controls (Input Area) */
.smf-item__col--controls {
    flex-grow: 1;
    width: auto !important;
    /* Override default width */
}

.smf-item__controls {
    margin: 0 !important;
}

/* Inputs styling matching original */
.smf-text-control input,
.smf-email-control input,
.smf-tel-control input,
.smf-textarea-control textarea {
    width: 100%;
    padding: 16px 20px !important;
    /* Increased padding */
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    font-size: 18px !important;
    /* Increased from 16px */
    background-color: #fff;
    box-sizing: border-box;
    max-width: 100% !important;
    height: auto !important;
}

/* Placeholder Styling */
.smf-text-control input::placeholder,
.smf-email-control input::placeholder,
.smf-tel-control input::placeholder,
.smf-textarea-control textarea::placeholder {
    color: #cccccc;
    font-weight: normal;
}

.smf-textarea-control textarea {
    min-height: 240px;
    /* Increased height */
}

/* Radio Buttons layout */
.smf-radio-buttons-control {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* Increased gap */
    padding-top: 8px;
}

.smf-radio-buttons-control .smf-radio-buttons-control__item {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
}

.smf-radio-buttons-control label {
    display: flex;
    align-items: center;
    gap: 10px;
    /* space between radio and text */
    cursor: pointer;
    font-size: 18px !important;
    /* Increased font size */
    font-weight: normal;
}

/* Submit Button Container */
.smf-action {
    margin-top: 60px;
    text-align: center;
    padding: 0 !important;
    display: flex;
    justify-content: center;
}

/* Target the button inside the action area */
.smf-action button,
.smf-button-control button {
    background-color: #ff9933 !important;
    /* Changed to theme orange */
    background-image: none !important;
    /* Remove gradient that forces white */
    color: #fff !important;
    font-size: 20px !important;
    /* Increased font size */
    font-weight: bold !important;
    padding: 20px 120px !important;
    /* Increased button size */
    border: none !important;
    border-radius: 60px !important;
    cursor: pointer;
    display: inline-block;
    transition: opacity 0.3s;
    box-shadow: 0 5px 15px rgba(255, 153, 51, 0.4);
    /* Matches button color */
    min-width: 320px;
    /* Ensure button width */
}

/* Subtler shadow for buttons */
.smf-action button:hover,
.smf-button-control button:hover {
    opacity: 0.9;
}

/* Specific Style for Back Button (Return) */
.smf-action button[data-action="input"],
.smf-button-control button[data-action="input"] {
    background-color: #cccccc !important;
    /* Gray */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    /* Subtler shadow */
}

.smf-action button:hover,
.smf-button-control button:hover {
    opacity: 0.9;
    transform: translateY(-3px);
}

/* Progress Tracker Hidden (cleaner look) */
.smf-progress-tracker {
    display: none !important;
}


/* Mobile Responsive Overrides for SMF */
@media (max-width: 768px) {
    .smf-item {
        flex-direction: column;
        gap: 15px;
    }

    .smf-item__col--label {
        width: 100%;
        padding-top: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .smf-item__label {
        width: 100%;
        font-size: 18px;
        justify-content: flex-start;
        /* Badge is now before, so valid flow is fine */
    }

    /* Adjust pseudo-badge spacing if needed on mobile */
    .smf-item__label::before {
        margin-right: 15px;
    }

    .smf-action button,
    .smf-button-control button {
        width: 100% !important;
        padding: 18px !important;
        min-width: unset;
    }

    .smf-radio-buttons-control {
        flex-direction: column;
        gap: 15px;
    }
}


/* =========================================
   Completion Screen Styling
   ========================================= */
.smf-complete-content {
    text-align: center;
    padding: 60px 40px;
    background-color: #f9f9f9;
    border: 3px solid #eee;
    border-radius: 20px;
    margin: 40px auto;
    max-width: 800px;
    line-height: 2;
    font-size: 18px;
    color: #333;
}

.smf-complete-content p {
    margin-bottom: 20px;
}

/* Bold text for "お急ぎの方" if user wrapped it in strong or bold, 
   or we can target it if it's a heading. 
   Assuming standard paragraphs for now. */