/* ===============================================
   iPhone SE & Small Smartphones Optimization
   Screen width: 375px x 667px (iPhone SE 2nd/3rd gen)
   =============================================== */

@media (max-width: 375px) {
    /* ベースフォントサイズをさらに縮小 */
    :root {
        font-size: 13px;
        --spacing-xs: 0.4rem;
        --spacing-sm: 0.8rem;
        --spacing-md: 1.5rem;
        --spacing-lg: 2.5rem;
        --spacing-xl: 3.5rem;
    }
    
    /* コンテナの余白を最小化 */
    .container {
        padding: 0 0.75rem;
    }
    
    /* ===============================================
       ヘッダー最適化
       =============================================== */
    
    .header {
        padding: 0.75rem 0;
    }
    
    .logo-character {
        width: 35px;
        height: 35px;
    }
    
    .logo h1 {
        font-size: 1rem;
        line-height: 1.2;
    }
    
    .logo .tagline {
        font-size: 0.55rem;
        line-height: 1.2;
    }
    
    /* ナビゲーション */
    .nav-links {
        gap: 0.5rem;
    }
    
    .nav-links a {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }
    
    /* ハンバーガーメニュー */
    .hamburger span {
        width: 22px;
        height: 2px;
    }
    
    /* ===============================================
       ヒーローセクション最適化
       =============================================== */
    
    .hero-section {
        padding: 2rem 0;
        min-height: auto;
    }
    
    .hero-content {
        gap: 1rem;
    }
    
    .hero-title {
        font-size: 1.6rem;
        line-height: 1.3;
        border-width: 4px;
        padding: 0.5rem 0.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    .hero-description {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* ヒーローキャラクター */
    .hero-characters {
        gap: 1rem;
    }
    
    .hero-character {
        width: 60px !important;
        height: auto;
    }
    
    .character-intro-link {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .character-intro-link i {
        font-size: 0.7rem;
    }
    
    /* バッジ */
    .hero-badges {
        gap: 0.5rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .badge {
        padding: 0.6rem 0.8rem;
        border-width: 2px;
        gap: 0.6rem;
        width: 100%;
    }
    
    .badge i {
        font-size: 1.4rem;
    }
    
    .badge span {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    /* ヒーローCTAボタン */
    .hero-cta {
        gap: 0.6rem;
        flex-direction: column;
    }
    
    .hero-cta .btn {
        width: 100%;
        padding: 0.9rem 1.2rem;
        font-size: 0.95rem;
    }
    
    /* ===============================================
       セクションタイトル & 共通要素
       =============================================== */
    
    .section-title {
        font-size: 1.6rem;
        line-height: 1.3;
        margin-bottom: 0.8rem;
    }
    
    .section-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    section {
        padding: 2.5rem 0;
    }
    
    /* ===============================================
       WHYセクション（なぜ選ばれる）
       =============================================== */
    
    .why-grid {
        gap: 1rem;
    }
    
    .why-card {
        padding: 1.2rem;
    }
    
    .why-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .why-card h3 {
        font-size: 1.1rem;
        margin: 0.8rem 0 0.5rem;
    }
    
    .why-card p {
        font-size: 0.9rem;
    }
    
    /* ===============================================
       買取カテゴリー
       =============================================== */
    
    .category-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .category-card {
        padding: 1.2rem;
    }
    
    .category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .category-card h3 {
        font-size: 1.1rem;
        margin: 0.8rem 0;
    }
    
    .category-card .examples {
        font-size: 0.85rem;
    }
    
    /* ===============================================
       業者様向けサービス
       =============================================== */
    
    .business-features {
        gap: 1rem;
    }
    
    .business-card {
        padding: 1.2rem;
    }
    
    .business-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .business-card h3 {
        font-size: 1.1rem;
    }
    
    .business-card p {
        font-size: 0.9rem;
    }
    
    /* ===============================================
       再生・修理の実例
       =============================================== */
    
    .restoration-grid {
        gap: 1rem;
    }
    
    .restoration-card {
        padding: 1rem;
    }
    
    .restoration-before,
    .restoration-after {
        height: 150px;
    }
    
    .restoration-label {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .restoration-info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .restoration-info p {
        font-size: 0.85rem;
    }
    
    /* ===============================================
       お客様の声
       =============================================== */
    
    .testimonials-slider {
        gap: 1rem;
    }
    
    .testimonial-card {
        padding: 1.2rem;
        min-width: 280px;
    }
    
    .testimonial-header img {
        width: 50px;
        height: 50px;
    }
    
    .testimonial-name {
        font-size: 1rem;
    }
    
    .testimonial-meta {
        font-size: 0.75rem;
    }
    
    .testimonial-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .rating i {
        font-size: 0.9rem;
    }
    
    /* ===============================================
       買取の流れ
       =============================================== */
    
    .process-steps {
        gap: 1.5rem;
    }
    
    .process-item {
        padding: 1.2rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .step-icon {
        font-size: 1.8rem;
    }
    
    .process-item h3 {
        font-size: 1.1rem;
        margin: 0.8rem 0 0.5rem;
    }
    
    .process-item p {
        font-size: 0.85rem;
    }
    
    /* ===============================================
       お問い合わせフォーム
       =============================================== */
    
    .contact-form-container {
        padding: 1.2rem;
    }
    
    .contact-character {
        width: 60px;
        top: -30px;
        right: 0.5rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.9rem;
        padding: 0.7rem;
    }
    
    .contact-form .btn-large {
        width: 100%;
        padding: 0.9rem 1.2rem;
        font-size: 0.95rem;
    }
    
    /* ===============================================
       フッター
       =============================================== */
    
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .footer-about,
    .footer-menu,
    .footer-contact {
        padding: 0;
        border: none;
    }
    
    .footer-logo {
        width: 50px;
    }
    
    .footer h3 {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    
    .footer p,
    .footer a,
    .footer li {
        font-size: 0.85rem;
    }
    
    .social-links {
        gap: 0.8rem;
    }
    
    .social-links a {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .footer-bottom {
        padding: 1rem 0;
        font-size: 0.75rem;
    }
    
    /* ===============================================
       ボタン最適化
       =============================================== */
    
    .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .btn-large {
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .btn i {
        font-size: 0.9rem;
    }
    
    /* ===============================================
       スクロールトップボタン
       =============================================== */
    
    .scroll-to-top {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
        font-size: 1.1rem;
    }
    
    /* ===============================================
       買取強化メーカー
       =============================================== */
    
    .makers-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .maker-card {
        padding: 1.2rem;
    }
    
    .maker-icon {
        width: 50px;
        height: 50px;
    }
    
    .maker-icon i {
        font-size: 1.5rem;
    }
    
    .maker-card h3 {
        font-size: 1rem;
    }
    
    .featured-icon {
        width: 60px;
        height: 60px;
    }
    
    .featured-icon i {
        font-size: 2rem;
    }
    
    /* ===============================================
       ぽん太&もも子の約束
       =============================================== */
    
    .about-values {
        gap: 1rem;
    }
    
    .value-item {
        padding: 1.2rem;
    }
    
    .value-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .value-item h3 {
        font-size: 1.1rem;
        margin: 0.8rem 0 0.5rem;
    }
    
    .value-item p {
        font-size: 0.85rem;
    }
    
    /* ===============================================
       キャラクター紹介
       =============================================== */
    
    .character-intro {
        padding: 1.5rem 0;
    }
    
    .character-intro-items {
        gap: 1.5rem;
    }
    
    .character-intro-item {
        padding: 1.2rem;
    }
    
    .character-intro-item img {
        width: 70px;
    }
    
    .character-intro-item h3 {
        font-size: 1.1rem;
        margin: 0.8rem 0 0.5rem;
    }
    
    .character-intro-item p {
        font-size: 0.85rem;
    }
    
    /* ===============================================
       LINEモーダル
       =============================================== */
    
    .line-modal-content {
        margin: 5% auto;
        padding: 1.5rem;
        width: 90%;
    }
    
    .line-modal-content h2 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .line-modal-content p {
        font-size: 0.95rem;
    }
    
    .qr-code {
        width: 180px;
        height: 180px;
    }
    
    .qr-code-container {
        padding: 1rem;
    }
    
    .line-id {
        font-size: 1rem;
    }
    
    .close-modal {
        font-size: 2rem;
        top: 0.5rem;
        right: 0.8rem;
    }
}