/* Tablet Styles - 834px and below */
@media screen and (max-width: 834px) {
    /* Header */
    .header-container {
        height: 70px;
    }
    
    .logo img {
        height: 40px;
    }
    
    /* Navigation */
    .navigation {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: calc(100vh - 70px);
        background-color: #2f4f4f;
        transition: left 0.3s ease;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    }
    
    .navigation.active {
        left: 0;
    }
    
    .navigation ul {
        flex-direction: column;
    }
    
    .navigation a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Mobile Menu Button */
    .mobile-menu-button {
        display: block;
    }
    
    .mobile-menu-button.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-button.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-button.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    /* Sections */
    section {
        padding: 60px 0;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Driver Page Responsive */
@media screen and (max-width: 834px) {
    .column-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .column-left {
        flex: 1;
        padding-right: 0;
    }
    
    .recruitment-overview {
        padding: 40px 20px;
    }
    
    .recruitment-message h2 {
        font-size: 1.5rem;
    }
}

/* FAQ Page Responsive */
@media screen and (max-width: 834px) {
    .faq-question {
        padding: 20px 70px 20px 20px;
    }
    
    .faq-q-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .faq-toggle {
        right: 20px;
        top: 25px;
    }
    
    .faq-item.active .faq-answer {
        padding: 20px;
    }
    
    .faq-a-wrapper {
        flex-direction: column;
        gap: 15px;
    }
}

/* Contact Page Responsive */
@media screen and (max-width: 834px) {
    .contact-message {
        padding: 30px 15px;
        margin-bottom: 50px;
    }
    
    .method-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 20px;
    }
    
    .method-item {
        padding: 30px 20px;
    }
    
    .contact-form {
        padding: 30px 25px;
        margin: 0 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }
    
    .contact-info {
        padding: 50px 0;
    }
}

@media screen and (max-width: 480px) {
    /* Intro Section - 始めにセクション */
    .intro-content {
        flex-direction: column !important;
    }
    
    .intro-image {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .intro-text {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    .intro-text .service-list {
        margin-left: 2em !important;
    }
    
    /* Service Page - benefit columns */
    .keeper-benefits {
        flex-direction: column !important;
    }
    
    .benefit-column {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Service Page - mechanism section */
    .mechanism-content {
        flex-direction: column !important;
    }
    
    .mechanism-text,
    .mechanism-video {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    .mechanism-video {
        margin-top: 20px;
    }
    
    /* Service Page - keeper header section */
    .keeper-header-section {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .keeper-header-left,
    .keeper-header-right {
        width: 100% !important;
    }
    
    .keeper-header-left {
        margin-bottom: 15px;
    }
    
    /* Service Page - feature grid */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .feature-item {
        padding: 10px;
    }
    
    /* Service Page - mechanism columns */
    .mechanism-columns {
        flex-direction: column !important;
    }
    
    .mechanism-column {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    /* Service Page - annual benefits */
    .annual-benefits {
        flex-direction: column !important;
    }
    
    .annual-text,
    .patents-info {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    /* Service Page - stain content */
    .stain-content {
        flex-direction: column !important;
    }
    
    .stain-text,
    .stain-image {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    /* Service Page - keeper services flex */
    .keeper-services-flex {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        justify-items: center !important;
    }
    
    .keeper-services-flex figure {
        width: 100% !important;
        max-width: 150px !important;
        flex: none !important;
    }
    
    .keeper-services-flex figure img {
        width: 100% !important;
        height: auto !important;
    }
    
    
    .faq-message {
        padding: 30px 15px;
    }
    
    .faq-question {
        padding: 15px 60px 15px 15px;
    }
    
    .faq-q-wrapper p {
        font-size: 1rem;
    }
    
    .faq-toggle {
        right: 15px;
        top: 20px;
    }
    
    .faq-item.active .faq-answer {
        padding: 15px;
    }
}

@media screen and (max-width: 480px) {
    /* Contact Confirm Page Mobile Styles */
    .contact-section > div:nth-child(1) {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
    }
    
    .contact-form {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .confirm-content {
        padding-top: 0px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .confirm-buttons .back-button {
        margin-top: 30px;
    }
    
    /* 確認テーブルのモバイル最適化 */
    .confirm-table {
        font-size: 0.9rem;
    }
    
    .confirm-table th,
    .confirm-table td {
        padding: 10px;
    }
    
    .confirm-table th {
        width: 35%;
        font-size: 0.85rem;
    }
    
    /* ボタンのモバイル最適化 */
    .confirm-buttons .submit-button,
    .confirm-buttons .back-button {
        padding: 12px 20px;
        font-size: 1rem;
        display: block;
        width: 90%;
        margin: 10px auto;
    }
    
    /* モバイルでのタッチ効果 */
    .confirm-buttons .submit-button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .confirm-buttons .back-button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* タッチ時の効果 */
    .confirm-buttons .submit-button:active,
    .confirm-buttons .submit-button.button-active {
        background-color: #1e3a3a !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    }
    
    .confirm-buttons .back-button:active,
    .confirm-buttons .back-button.button-active {
        background-color: #555 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    }
    
    /* タッチデバイスでもホバー効果を有効にする */
    @media (hover: hover) and (pointer: fine) {
        .confirm-buttons .submit-button:hover {
            background-color: #1e3a3a !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
        }
        
        .confirm-buttons .back-button:hover {
            background-color: #555 !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
        }
    }
    
    .contact-message {
        padding: 25px 10px;
        margin-bottom: 40px;
    }
    
    .contact-message p {
        font-size: 1rem;
    }
    
    .method-grid {
        gap: 20px;
        padding: 0 10px;
    }
    
    .method-item {
        padding: 25px 15px;
    }
    
    .method-icon {
        font-size: 2.5rem;
    }
    
    .phone-number,
    .email-address {
        font-size: 1.2rem;
    }
    
    .contact-form {
        padding: 25px 15px;
        margin: 0 10px;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
    
    .section-header p {
        font-size: 1rem;
    }
    
    .form-control {
        padding: 10px 12px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .submit-button {
        padding: 12px 30px;
        font-size: 14px;
    }
    
    .info-grid {
        gap: 25px;
        padding: 0 10px;
    }
    
    .info-section {
        padding: 25px 20px;
    }
    
    .info-section h3 {
        font-size: 1.2rem;
    }
    
    .contact-info {
        padding: 40px 0;
    }
    
    /* Privacy Policy Page */
    .policy-text {
        padding: 25px 15px;
        margin: 0 10px;
    }
    
    .policy-intro {
        padding: 15px;
        font-size: 1rem;
    }
    
    .policy-section h2 {
        font-size: 1.2rem;
    }
}

/* Mobile Styles - 480px and below */
@media screen and (max-width: 480px) {
    /* Base Font Size */
    body {
        font-size: 14px;
    }
    
    /* Container */
    .container {
        padding: 0 15px;
    }
    
    /* Header */
    .header-container {
        height: 60px;
        padding: 0 15px;
    }
    
    .logo img {
        height: 35px;
    }
    
    /* Navigation */
    .navigation {
        top: 60px;
        height: calc(100vh - 60px);
        width: 90%;
    }
    
    /* Main */
    .main {
        margin-top: 60px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 1.8rem;
        line-height: 1.4;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        padding: 0 10px;
    }
    
    /* Sections */
    section {
        padding: 40px 0;
    }
    
    .section-header {
        margin-bottom: 30px;
    }
    
    .section-header h2 {
        font-size: 1.6rem;
    }
    
    /* About Section */
    .text-content {
        font-size: 1rem;
        padding: 0 10px;
    }
    
    .main-image img {
        border-radius: 5px;
    }
    
    /* News Section */
    .news-item {
        padding: 15px 0;
    }
    
    .news-item h3 {
        font-size: 1.1rem;
    }
    
    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .service-item {
        padding: 30px 15px;
    }
    
    .service-icon {
        font-size: 2.5rem;
    }
    
    .service-item h3 {
        font-size: 1.3rem;
    }
    
    /* Footer */
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer-content {
        gap: 30px;
    }
    
    .footer-section h3 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    
    .footer-bottom {
        padding-top: 20px;
        font-size: 0.9rem;
    }
}

/* Landscape Mode Adjustments */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 40px 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
}

/* High Resolution Displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    /* Adjust font weights for better rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Company Page Responsive */
@media screen and (max-width: 834px) {
    /* Page Header */
    .page-title {
        font-size: 2rem;
    }
    
    /* Company Table */
    .company-table th,
    .company-table td {
        padding: 15px;
    }
    
    /* Access Section */
    .access-content {
        grid-template-columns: 1fr;
    }
    
    .map-container {
        margin-top: 30px;
    }
}

@media screen and (max-width: 480px) {
    /* Page Header */
    .page-header {
        padding: 40px 0;
        margin-bottom: 40px;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-subtitle {
        font-size: 0.9rem;
    }
    
    /* Company Table */
    .company-table {
        font-size: 0.9rem;
    }
    
    .company-table th,
    .company-table td {
        padding: 12px 10px;
    }
    
    .company-table th {
        width: 35%;
    }
    
    /* Philosophy Section */
    .philosophy-section {
        padding: 60px 0;
        margin: 60px 0;
    }
    
    .philosophy-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .philosophy-text {
        font-size: 1rem;
    }
    
    /* Access Section */
    .access-info h3 {
        font-size: 1.3rem;
    }
    
    .access-info h4 {
        font-size: 1.1rem;
    }
    
    .map-placeholder {
        height: 300px;
    }
}

/* Service Page Responsive */
@media screen and (max-width: 834px) {
    /* Service Detail */
    .service-detail-content {
        padding: 30px;
    }
    
    .support-list {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    /* Service Intro */
    .intro-content h2 {
        font-size: 1.5rem;
    }
    
    .intro-content p {
        font-size: 1rem;
    }
    
    /* Service Detail */
    .service-detail-header {
        padding: 30px 20px;
    }
    
    .service-icon-large {
        font-size: 3rem;
    }
    
    .service-detail-header h3 {
        font-size: 1.5rem;
    }
    
    .service-detail-content {
        padding: 20px;
    }
    
    .service-detail-content h4 {
        font-size: 1.3rem;
    }
    
    .service-detail-content h5 {
        font-size: 1.1rem;
    }
    
    .type-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .type-item {
        padding: 10px;
        font-size: 0.9rem;
    }
    
    .info-list {
        grid-template-columns: 1fr;
    }
    
    /* Service CTA */
    .service-cta {
        padding: 40px 20px;
    }
    
    .cta-content h2 {
        font-size: 1.5rem;
    }
    
    .cta-button {
        padding: 12px 30px;
    }
    
    /* Service Gallery */
    .gallery-images {
        flex-direction: column;
        gap: 15px;
    }
    
    .gallery-item {
        max-width: 100%;
        min-width: auto;
    }
}

/* Print Styles */
@media print {
    .mobile-menu-button,
    .navigation {
        display: none !important;
    }
    
    .header {
        position: static;
        box-shadow: none;
    }
    
    .main {
        margin-top: 0;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
}