/* =====================================================
   TENANi New — レスポンシブ補完CSS
   
   既存 style.css / article.css / news.css / service-detail.css の
   メディアクエリで不足しているスマホ対応を補完する。
   常時読み込み（全テンプレ共通）。
===================================================== */

/* ==========================================================================
   0. 基盤 — タッチデバイス / iOS 対策
   ========================================================================== */

/* iOS Safari のタップハイライト抑制 */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* ホバーが使えないデバイスではホバーエフェクト抑制 */
@media (hover: none) {
    .service-card:hover,
    .portfolio-item:hover,
    .pricing-card:hover,
    .news-item:hover,
    .filter-btn:hover,
    .error-action-btn:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   1. ヘッダー / ナビ — ダークテーマ対応モバイルメニュー
   ========================================================================== */

@media (max-width: 768px) {
    .header {
        padding: 10px 0;
    }

    .header-content {
        padding: 0 15px;
    }

    .logo-text {
        font-size: 1.2rem;
    }

    /* モバイルメニュー — ダークテーマ対応 */
    .nav {
        background-color: rgba(20, 20, 30, 0.98) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        top: 60px !important;
        height: calc(100vh - 60px) !important;
        padding: 32px 24px !important;
        z-index: 999 !important;
        overflow-y: auto;
    }

    .nav.active {
        display: flex !important;
        flex-direction: column;
    }

    .nav-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }

    .nav-list li {
        width: 100%;
    }

    .nav-list li a {
        display: block;
        padding: 16px 20px;
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 1.05rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        transition: background 0.2s ease, color 0.2s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-decoration: none !important;
    }

    .nav-list li:last-child a {
        border-bottom: none;
    }

    .nav-list li a:hover,
    .nav-list li a:active {
        background: rgba(255, 107, 53, 0.15);
        color: #fff !important;
    }

    .nav-list .btn-line {
        background: linear-gradient(135deg, var(--neon-orange, #FF6B35), var(--warm-orange, #FF8C42)) !important;
        color: #fff !important;
        text-align: center;
        border-radius: 10px;
        margin-top: 12px;
        padding: 16px 20px;
        font-weight: 600;
        border-bottom: none !important;
    }

    /* ハンバーガーボタン */
    .mobile-menu-toggle {
        display: flex !important;
        width: 36px;
        height: 36px;
    }

    .mobile-menu-toggle span {
        background-color: rgba(255, 255, 255, 0.85);
    }
}

/* ==========================================================================
   2. パンくずリスト — ダークテーマ対応 + モバイル折り返し
   ========================================================================== */

.breadcrumb {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0.75rem 0;
    margin-top: 70px;
}

.breadcrumb-list {
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.breadcrumb-list li {
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-list li:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.3) !important;
    margin: 0 0.4rem;
}

.breadcrumb-list a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.breadcrumb-list a:hover {
    color: var(--neon-orange, #FF6B35) !important;
}

.breadcrumb-list li[aria-current="page"] {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .breadcrumb {
        margin-top: 60px;
        padding: 0.6rem 0;
    }

    .breadcrumb-list {
        font-size: 0.78rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb-list {
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   3. 記事詳細 (single.php) — モバイル補完
   ========================================================================== */

@media (max-width: 768px) {
    .back-to-news {
        margin-bottom: 1.5rem;
    }

    .back-to-news-btn {
        font-size: 0.85rem;
        padding: 8px 14px;
    }

    .article-header .article-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .article-author {
        font-size: 0.85rem;
    }

    /* タグ */
    .article-tags .tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .article-tags .tag-item {
        font-size: 0.8rem;
        padding: 4px 10px;
    }

    /* SNSシェアボタン */
    .article-share .share-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

    .share-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 120px;
        justify-content: center;
        font-size: 0.85rem;
        padding: 10px 12px;
    }

    /* 関連記事 */
    .related-articles h2 {
        font-size: 1.3rem;
    }

    .related-article-item {
        padding: 12px;
    }

    .related-article-title {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .share-btn {
        flex: 1 1 100%;
    }

    .share-btn span {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   4. 404 ページ — レイアウト
   ========================================================================== */

.error-404-content {
    text-align: center;
    padding: 2rem 0 4rem;
}

.error-404-visual {
    margin-bottom: 2rem;
}

.error-404-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.error-digit {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--neon-orange, #FF6B35), var(--warm-orange, #FF8C42));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.error-digit-center {
    -webkit-text-fill-color: unset;
    background: none;
}

.error-digit-center svg {
    width: clamp(40px, 8vw, 80px);
    height: clamp(40px, 8vw, 80px);
    color: var(--neon-orange, #FF6B35);
}

.error-404-message {
    margin-bottom: 1.5rem;
}

.error-404-message h2 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    margin-bottom: 0.75rem;
}

.error-404-message p {
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.8;
}

.error-404-search {
    max-width: 500px;
    margin: 1.5rem auto;
}

.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 2rem 0;
}

.error-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius, 12px);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.04);
}

.error-action-btn:hover {
    border-color: var(--neon-orange, #FF6B35);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.2);
}

.error-action-primary {
    background: linear-gradient(135deg, var(--neon-orange, #FF6B35), var(--warm-orange, #FF8C42));
    border-color: transparent;
    color: #fff;
}

.error-action-primary:hover {
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
}

.error-404-recent {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.error-404-recent h3 {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .error-404-actions {
        flex-direction: column;
        align-items: center;
    }

    .error-action-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .error-404-content {
        padding: 1rem 0 2rem;
    }

    .error-404-message p {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   5. 検索ページ — フォーム + カテゴリリンク
   ========================================================================== */

.search-form-inline {
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.search-form-inline .search-form,
.search-form-inline form {
    display: flex;
    gap: 8px;
}

.search-form-inline input[type="search"],
.search-form-inline .search-field {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius, 12px);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.search-form-inline input[type="search"]:focus,
.search-form-inline .search-field:focus {
    border-color: var(--neon-orange, #FF6B35);
}

.search-form-inline input[type="submit"],
.search-form-inline .search-submit {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius, 12px);
    background: linear-gradient(135deg, var(--neon-orange, #FF6B35), var(--warm-orange, #FF8C42));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
    white-space: nowrap;
}

.search-form-inline input[type="submit"]:hover,
.search-form-inline .search-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* 404内の検索フォームにも同じスタイル */
.error-404-search .search-form,
.error-404-search form {
    display: flex;
    gap: 8px;
}

.error-404-search input[type="search"],
.error-404-search .search-field {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius, 12px);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.error-404-search input[type="search"]:focus,
.error-404-search .search-field:focus {
    border-color: var(--neon-orange, #FF6B35);
}

.error-404-search input[type="submit"],
.error-404-search .search-submit {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius, 12px);
    background: linear-gradient(135deg, var(--neon-orange, #FF6B35), var(--warm-orange, #FF8C42));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.search-category-links {
    margin-top: 2rem;
}

.search-category-links h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    opacity: 0.8;
}

.cat-count {
    opacity: 0.5;
    font-size: 0.85em;
    margin-left: 2px;
}

@media (max-width: 768px) {
    .search-form-inline {
        margin-bottom: 2rem;
    }

    .search-form-inline .search-form,
    .search-form-inline form,
    .error-404-search .search-form,
    .error-404-search form {
        flex-direction: column;
    }

    .search-form-inline input[type="submit"],
    .search-form-inline .search-submit,
    .error-404-search input[type="submit"],
    .error-404-search .search-submit {
        width: 100%;
        padding: 14px;
    }
}

/* ==========================================================================
   6. WordPress ページネーション — the_posts_pagination() 用
   ========================================================================== */

.navigation.pagination {
    margin-top: 2rem;
}

.navigation.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-small, 6px);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.04);
}

.navigation.pagination .page-numbers:hover {
    border-color: var(--neon-orange, #FF6B35);
    color: #fff;
}

.navigation.pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--neon-orange, #FF6B35), var(--warm-orange, #FF8C42));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.navigation.pagination .page-numbers.dots {
    border: none;
    background: none;
    opacity: 0.5;
    min-width: auto;
    padding: 0 4px;
}

.navigation.pagination .prev,
.navigation.pagination .next {
    font-size: 1rem;
}

@media (max-width: 480px) {
    .navigation.pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
        padding: 0 8px;
    }
}

/* ==========================================================================
   7. 0件メッセージ — アーカイブ / 検索 / 404
   ========================================================================== */

.no-posts-message {
    text-align: center;
    padding: 3rem 1.5rem;
    grid-column: 1 / -1;
}

.no-posts-icon {
    margin-bottom: 1.5rem;
}

.no-posts-icon svg {
    color: rgba(255, 255, 255, 0.3);
}

.no-posts-message h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.no-posts-message p {
    opacity: 0.65;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* ==========================================================================
   8. service-page-content — 固定ページ本文エリア
   ========================================================================== */

.service-page-content {
    padding: 3rem 0;
}

.service-page-content .article-content {
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .service-page-content {
        padding: 2rem 0;
    }
}

/* ==========================================================================
   9. セクション共通 — モバイルでマージン/パディング縮小
   ========================================================================== */

@media (max-width: 768px) {
    section:not(.hero) {
        padding: 60px 0;
        margin: 20px 10px;
        border-radius: 12px;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    section:not(.hero) {
        padding: 40px 0;
        margin: 12px 6px;
        border-radius: 8px;
    }

    .container {
        padding: 0 12px;
    }

    .section-title {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   10. フッター — モバイル調整
   ========================================================================== */

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 2rem;
    }

    .footer-section ul {
        padding: 0;
    }

    .footer-section ul li {
        list-style: none;
    }

    .company-info {
        text-align: center;
    }

    .footer-bottom {
        margin-top: 1.5rem;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   11. サービス詳細 — モバイル補完
   ========================================================================== */

@media (max-width: 768px) {
    .service-hero-content .service-title {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    .service-hero-content .service-subtitle {
        font-size: 0.9rem;
    }

    .service-badge {
        font-size: 0.8rem;
    }

    .overview-content .section-title {
        font-size: 1.4rem;
        text-align: left;
    }

    .feature-list li {
        font-size: 0.9rem;
    }

    /* 料金カード */
    .pricing-grid {
        gap: 1.5rem;
    }

    .plan-name {
        font-size: 1.1rem;
    }

    .plan-price .amount {
        font-size: 1.8rem;
    }

    .plan-features li {
        font-size: 0.85rem;
    }

    /* 制作フロー */
    .process-timeline {
        padding-left: 0;
    }

    .process-step {
        flex-direction: row;
        gap: 16px;
        align-items: flex-start;
    }

    .step-content {
        margin-left: 0;
    }

    .step-title {
        font-size: 1rem;
    }

    .step-description {
        font-size: 0.85rem;
    }

    /* CTA */
    .service-cta .cta-title {
        font-size: 1.3rem;
    }

    .service-cta .cta-subtitle {
        font-size: 0.9rem;
    }

    .cta-button {
        padding: 14px 28px;
        font-size: 0.9rem;
    }

    /* 制作事例 */
    .case-card {
        margin-bottom: 1rem;
    }

    .case-title {
        font-size: 1.05rem;
    }

    .case-description {
        font-size: 0.85rem;
    }

    .case-results {
        gap: 1rem;
    }

    .result-number {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .service-hero {
        padding: 80px 0 40px;
    }

    .pricing-card {
        padding: 24px 16px;
    }

    .plan-price .amount {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   12. ニュース / アーカイブ — フィルタUIモバイル
   ========================================================================== */

@media (max-width: 768px) {
    .news-filter {
        flex-wrap: wrap;
        justify-content: center;
    }

    .filter-btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .news-filter {
        gap: 6px;
    }

    .filter-btn {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   13. ポートフォリオ — モバイルグリッド
   ========================================================================== */

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .portfolio-item {
        border-radius: 8px;
    }

    .portfolio-title {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}

/* ==========================================================================
   14. コンタクトセクション — モバイル
   ========================================================================== */

@media (max-width: 768px) {
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 16px !important; /* iOS ズーム防止 */
    }

    .contact-form .form-group {
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   15. FAQ — モバイル
   ========================================================================== */

@media (max-width: 768px) {
    .faq-question {
        padding: 14px 16px;
        font-size: 0.9rem;
    }

    .faq-answer {
        padding: 0 16px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   16. キャラクターカルーセル — モバイル
   ========================================================================== */

@media (max-width: 768px) {
    .character-nav {
        gap: 12px;
    }

    .character-nav button {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   17. プログレスバー — モバイル
   ========================================================================== */

@media (max-width: 768px) {
    #progressBar {
        height: 3px;
    }
}

/* ==========================================================================
   18. ローディング画面 — モバイル
   ========================================================================== */

@media (max-width: 480px) {
    .loading-icon {
        width: 60px;
        height: 60px;
    }

    .loading .question-mark {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   19. ヒーロー MV — スマホ完全対応
   
   style.css のメディアクエリを完全にオーバーライド。
   主要修正:
   - hero-content を display:flex + flex-direction:column に変更
     (grid の 1fr 1fr だと character-showcase が3番目の子で崩れるため)
   - hero-illustration の固定高さを解除
   - tech-grid をモバイルでも複数列を維持
   - min-height: auto で不要な余白を排除
   ========================================================================== */

/* --- 1024px以下: タブレット + スマホ共通 --- */
@media (max-width: 1024px) {
    .front-page .hero {
        min-height: auto;
        padding: 120px 0 40px;
    }

    .front-page .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
        max-width: 700px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .front-page .hero-text {
        width: 100%;
    }

    .front-page .hero-illustration {
        height: auto;
        min-height: 0;
        width: 100%;
        max-width: 480px;
    }

    .front-page .hero-title {
        font-size: 2.4rem;
        line-height: 1.35;
    }

    .front-page .hero-subtitle {
        font-size: 1.05rem;
        margin-bottom: 1.5rem;
    }

    .front-page .hero-buttons {
        justify-content: center;
        gap: 12px;
    }

    .front-page .tech-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 0;
    }

    .front-page .tech-card {
        padding: 14px 10px;
    }

    .front-page .character-showcase {
        width: 100%;
        margin-top: 24px;
        padding-top: 24px;
    }

    .front-page .character-grid-container {
        max-width: 480px;
    }
}

/* --- 768px以下: スマホ --- */
@media (max-width: 768px) {
    .front-page .hero {
        padding: 80px 0 32px;
        padding-top: calc(70px + 20px); /* ヘッダー高さ + 余白 */
    }

    .front-page .hero-content {
        gap: 20px;
        padding: 0 16px;
        max-width: 400px;
    }

    .front-page .hero-title {
        font-size: 1.7rem;
        line-height: 1.4;
        letter-spacing: 0.5px;
        text-shadow:
            0 0 10px rgba(0, 255, 255, 0.5),
            0 0 20px rgba(255, 0, 255, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.8);
    }

    .front-page .hero-title .highlight {
        display: inline;
    }

    .front-page .hero-subtitle {
        font-size: 0.92rem;
        margin-bottom: 1.2rem;
        padding: 6px 10px;
    }

    .front-page .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .front-page .hero-buttons .btn-primary,
    .front-page .hero-buttons .btn-secondary,
    .front-page .hero-buttons .btn-large {
        width: 100%;
        max-width: 280px;
        text-align: center;
        display: flex;
        justify-content: center;
        padding: 14px 24px;
        font-size: 0.92rem;
        box-sizing: border-box;
    }

    .front-page .hero-illustration {
        max-width: 100%;
    }

    .front-page .tech-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .front-page .tech-card {
        padding: 12px 6px;
        min-height: auto;
        border-width: 1px;
    }

    .front-page .tech-card span {
        font-size: 0.68rem;
        white-space: normal;
        line-height: 1.3;
    }

    .front-page .tech-icon {
        font-size: 1.3rem;
        margin-bottom: 4px;
    }

    .front-page .character-showcase {
        margin-top: 20px;
        padding-top: 20px;
    }

    .front-page .character-intro {
        margin-bottom: 16px;
    }

    .front-page .character-title {
        font-size: 1rem;
    }

    .front-page .character-subtitle {
        font-size: 0.82rem;
    }

    .front-page .character-grid-container {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px;
        overflow: hidden !important;
    }

    .front-page .character-carousel {
        padding: 10px 0 15px;
        margin-bottom: 10px;
        overflow: hidden !important;
    }

    .front-page .character-slider {
        overflow: hidden !important;
    }

    .front-page .character-card {
        padding: 10px 6px;
        overflow: hidden;
    }

    .front-page .character-image {
        width: 50px;
        height: 50px;
        margin-bottom: 6px;
    }

    .front-page .character-name {
        font-size: 0.7rem;
    }

    .front-page .character-role {
        font-size: 0.58rem;
        margin-bottom: 4px;
    }

    .front-page .character-service {
        font-size: 0.55rem;
        padding: 2px 4px;
    }

    .front-page .character-navigation {
        margin-top: 10px;
        gap: 10px;
    }

    .front-page .nav-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

/* --- 480px以下: 小型スマホ --- */
@media (max-width: 480px) {
    .front-page .hero {
        padding-top: calc(60px + 16px); /* 小型スマホのヘッダー高さ + 余白 */
        padding-bottom: 24px;
    }

    .front-page .hero-content {
        gap: 16px;
        padding: 0 12px;
        max-width: 360px;
    }

    .front-page .hero-title {
        font-size: 1.4rem;
        line-height: 1.45;
    }

    .front-page .hero-subtitle {
        font-size: 0.82rem;
        margin-bottom: 1rem;
    }

    .front-page .hero-buttons .btn-primary,
    .front-page .hero-buttons .btn-secondary,
    .front-page .hero-buttons .btn-large {
        max-width: 260px;
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    .front-page .tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .front-page .tech-card {
        padding: 10px 6px;
    }

    .front-page .tech-card span {
        font-size: 0.62rem;
    }

    .front-page .tech-icon {
        font-size: 1.1rem;
    }

    .front-page .character-showcase {
        margin-top: 16px;
        padding-top: 16px;
    }

    .front-page .character-grid-container {
        max-width: 100%;
        padding: 0 8px;
        overflow: hidden !important;
    }

    .front-page .character-image {
        width: 44px;
        height: 44px;
        margin-bottom: 4px;
    }

    .front-page .character-name {
        font-size: 0.65rem;
    }

    .front-page .character-role {
        font-size: 0.55rem;
    }

    .front-page .character-service {
        font-size: 0.5rem;
        padding: 2px 3px;
    }

    .front-page .character-title {
        font-size: 0.88rem;
    }

    .front-page .character-subtitle {
        font-size: 0.75rem;
    }

    .front-page .hero-description {
        font-size: 0.82rem;
    }
}

/* ==========================================================================
   20. WP検索フォーム（デフォルト） — ダークテーマ対応
   ========================================================================== */

.search-form {
    display: flex;
    gap: 8px;
}

.search-form label {
    flex: 1;
    display: flex;
}

.search-form .search-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius, 12px);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.search-form .search-field:focus {
    border-color: var(--neon-orange, #FF6B35);
}

.search-form .search-field::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.search-form .search-submit {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius, 12px);
    background: linear-gradient(135deg, var(--neon-orange, #FF6B35), var(--warm-orange, #FF8C42));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
    white-space: nowrap;
}

.search-form .search-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .search-form {
        flex-direction: column;
    }

    .search-form .search-submit {
        width: 100%;
        padding: 14px;
    }
}

/* ==========================================================================
   21. iPad / タブレット専用（768px 〜 1024px）
   
   768px と 1024px の間は既存CSS だと「3カラムのまま窮屈」か
   「1カラムに落ちすぎ」のどちらかになる中間ゾーン。
   ここを 2 カラム中心に整える。
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

    /* --- 共通 --- */
    .container {
        padding: 0 24px;
    }

    section:not(.hero) {
        padding: 70px 0;
        margin: 30px 16px;
    }

    .section-title {
        font-size: 2rem;
    }

    /* --- ヘッダー / ナビ --- */
    .header-content {
        padding: 0 16px;
    }

    .nav-list {
        gap: 8px;
    }

    .nav-list li a {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    .nav-list .btn-line {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    /* --- ヒーロー（トップ）---
       1024px以下でも .front-page .hero で上書き済みだが、
       iPad専用の微調整を追加。
    */
    .front-page .hero-title {
        font-size: 2.4rem;
    }

    .front-page .hero-subtitle {
        font-size: 1.1rem;
    }

    .front-page .hero-illustration {
        max-width: 480px;
    }

    .front-page .tech-grid {
        max-width: 500px;
        margin: 0 auto;
    }

    .front-page .character-grid-container {
        max-width: 480px;
    }

    /* --- サービスグリッド（トップ） --- */
    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px;
    }

    .service-card {
        padding: 28px 20px;
    }

    /* --- ポートフォリオ --- */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* --- 料金 --- */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    .pricing-card {
        padding: 28px 20px;
    }

    /* --- 3つ目のカードを2列の中央寄せ --- */
    .pricing-grid > .pricing-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
    }

    /* --- 強み / strengths --- */
    .strengths {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px;
    }

    .strengths > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 500px;
        margin: 0 auto;
    }

    /* --- 問題提起 / problem --- */
    .problem-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* --- コンタクト --- */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* --- フッター --- */
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px;
    }

    /* --- ニュース / アーカイブ --- */
    .news-hero {
        padding: 100px 0 50px;
    }

    .news-hero-title {
        font-size: 2.5rem;
    }

    .news-item {
        grid-template-columns: 100px 1fr;
        gap: 20px;
        padding: 24px;
    }

    .news-filter {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* --- 記事詳細 --- */
    .article-container {
        padding: 0;
    }

    .article-title {
        font-size: 1.6rem;
    }

    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .share-buttons {
        flex-wrap: wrap;
    }

    .share-btn {
        flex: 0 0 auto;
    }

    /* --- サービス詳細 --- */
    .service-hero {
        padding: 100px 0 50px;
    }

    .service-hero-content .service-title {
        font-size: 2rem;
    }

    .overview-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .overview-image {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    /* service-detail 料金 */
    .pricing-section .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100%;
    }

    /* 制作事例 */
    .case-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* 制作フロー */
    .process-timeline {
        max-width: 600px;
        margin: 0 auto;
    }

    /* CTA */
    .service-cta .cta-title {
        font-size: 1.5rem;
    }

    /* --- 404 ページ --- */
    .error-404-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .error-action-btn {
        flex: 0 0 auto;
    }

    /* --- 検索 --- */
    .search-form-inline {
        max-width: 500px;
    }

    /* --- キャラクターカルーセル --- */
    .character-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- FAQ --- */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* --- プロセス（トップ） --- */
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   22. iPad Pro / 大型タブレット横（1025px 〜 1199px）
   
   3カラムに戻るが容器幅が足りない領域の微調整。
   ========================================================================== */

@media (min-width: 1025px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .service-grid {
        gap: 24px;
    }

    .service-card {
        padding: 30px 20px;
    }

    .pricing-grid {
        gap: 20px;
    }

    .pricing-card {
        padding: 28px 18px;
    }

    .portfolio-grid {
        gap: 20px;
    }

    .overview-grid {
        gap: 50px;
    }

    .footer-content {
        gap: 20px;
    }

    .strengths {
        gap: 24px;
    }

    .case-grid {
        gap: 20px;
    }
}