/* =============================================================================
   📱 RESPONSIVE EXTENDED STYLES - レスポンシブ拡張スタイル
   ============================================================================= */

/* 🔧🔧🔧 【タブレット・モバイル対応】各セクション専用レスポンシブ設定 🔧🔧🔧 */

/* =============================================================================
   📱 TABLET RESPONSIVE (max-width: 1024px)
   ============================================================================= */
@media (min-width: 481px) and (max-width: 1024px) {
    /* 各サービスタイトルの統一サイズ調整 - desktop専用 */
    .cockpit-layout .service-detail-title-desktop,
    .management-layout .service-detail-title,
    .dataentry-layout .service-detail-title,
    .contact-layout .service-detail-title {
        font-size: 2.2rem;
    }
    
    /* コックピット特徴カード - PC/タブレット専用 */
    .service-workspace .cockpit-layout .service-features {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 30px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* ダッシュボード関連 */
    .cockpit-dashboard {
        min-height: 400px;
        padding: 25px;
    }
    
    .main-monitor {
        width: 320px;
        height: 200px;
    }
    
    .widget-item {
        width: 140px;
        height: 60px;
        padding: 10px;
    }
    
    /* タブレット用アイコンサイズ調整 */
    .widget-icon {
        width: 22px;
        height: 22px;
    }
    
    .widget-icon img,
    .emoji-fallback {
        width: 22px;
        height: 22px;
        font-size: 18px;
    }
    
    /* ワークフローセクション（タブレット版） */
    .workflow-layout {
        flex-direction: column !important;
        gap: 40px !important;
    }
    
    .workflow-layout .workflow-top-section {
        flex-direction: column;
        gap: 30px;
    }
    
    /* タブレット版レイアウト調整 */
    .workflow-top-section .service-detail-title {
        flex: 0 0 100%;
    }
    
    .workflow-top-section .service-detail-message {
        flex: 0 0 100%;
        order: 2;
    }
    
    .workflow-top-section .service-detail-right {
        flex: 0 0 100%;
        order: 3;
    }
    
    .workflow-layout .service-features {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
    }
    
    .service-detail-left {
        flex-direction: column;
        gap: 30px;
        text-align: left;
        align-items: stretch;
    }
    
    .workflow-layout .service-detail-title {
        display: block !important;
        flex: 1;
        align-self: stretch;
        width: 100% !important;
        min-width: 100%;
        box-sizing: border-box;
        font-size: 2.2rem;
        color: #1a2332;
        white-space: nowrap;
    }
    
    .service-detail-right {
        transform: translateY(20px);  /* 🚨 50px → 20px 親要素と統一 */
    }
    
    .service-detail-right.visible {
        transform: translateY(0);
    }
    
    .workflow-diagram-container {
        max-width: 100%;
        margin-top: calc(2.86rem + 30px);
    }
    
    .workspace-diagram-container {
        max-width: 100%;
        margin-top: calc(2.86rem + 30px);
        padding: 4px 20px !important;  /* 🔧 レスポンシブでも高さを半分に */
    }
    
    /* 🔧 【適切なサイズ】タブレット用円状図調整 */
    .circular-integration-chart {
        padding: 20px 15px !important; /* 🔧 適切なサイズに調整 */
        min-height: 180px !important;  /* 🔧 適切な高さに調整 */
    }
    
    .chart-title {
        font-size: 1rem !important;    /* 🔧 適切なサイズに調整 */
        margin-bottom: 12px !important;/* 🔧 適切な間隔に調整 */
    }
    
    .circular-container {
        height: 130px !important;      /* 🔧 適切な高さに調整 */
    }
    
    .central-hub {
        width: 25px !important;        /* 🔧 120px → 25px 劇的に縮小 */
        height: 25px !important;       /* 🔧 120px → 25px 劇的に縮小 */
    }
    
    .central-hub .hub-icon {
        font-size: 0.4rem !important; /* 🔧 2.2rem → 0.4rem 劇的に縮小 */
        margin-bottom: 0px !important; /* 🔧 4px → 0px 劇的に縮小 */
    }
    
    .central-hub .hub-title,
    .central-hub .hub-subtitle {
        font-size: 0.2rem !important; /* 🔧 1rem → 0.2rem 劇的に縮小 */
        margin-bottom: 0px !important; /* 🔧 2px → 0px 劇的に縮小 */
        display: none !important;      /* 🔧 極小サイズでは非表示に */
    }
    
    .central-hub .hub-description {
        font-size: 0.1rem !important; /* 🔧 0.7rem → 0.1rem 劇的に縮小 */
        display: none !important;      /* 🔧 極小サイズでは非表示に */
    }
    
    /* 🔧 【超縮小】サービス軌道調整 - 非表示 */
    .gmail-orbit { transform: rotate(0deg) translateY(-15px) rotate(0deg) !important; display: none !important; }
    .drive-orbit { transform: rotate(60deg) translateY(-15px) rotate(-60deg) !important; display: none !important; }
    .sheets-orbit { transform: rotate(120deg) translateY(-15px) rotate(-120deg) !important; display: none !important; }
    .appsheet-orbit { transform: rotate(180deg) translateY(-15px) rotate(-180deg) !important; display: none !important; }
    .chat-orbit { transform: rotate(240deg) translateY(-15px) rotate(-240deg) !important; display: none !important; }
    .calendar-orbit { transform: rotate(300deg) translateY(-15px) rotate(-300deg) !important; display: none !important; }
    
    .service-orbit {
        width: 10px !important;        /* 🔧 120px → 10px 劇的に縮小 */
        height: 10px !important;       /* 🔧 120px → 10px 劇的に縮小 */
        margin-left: -5px !important; /* 🔧 -60px → -5px 劇的に縮小 */
        display: none !important;      /* 🔧 極小サイズでは完全に非表示に */
        margin-top: -60px;
    }
    
    .service-node {
        width: 10px !important;        /* 🔧 120px → 10px 劇的に縮小 */
        display: none !important;      /* 🔧 極小サイズでは完全に非表示に */
        height: 120px;
    }
    
    .service-node .service-icon {
        font-size: 2.2rem;
        margin-bottom: 6px;
        height: 2.2rem;
    }
    
    .service-node .service-icon img {
        width: 2.2rem;
        height: 2.2rem;
    }
    
    .service-node .service-icon .emoji-fallback {
        font-size: 2.2rem;
    }
    
    /* タブレット用：特定サービスのアイコンサイズ拡大 */
    .service-node.gmail .service-icon,
    .service-node.appsheet .service-icon,
    .service-node.chat .service-icon,
    .service-node.calendar .service-icon {
        height: 2.6rem;
    }
    
    .service-node.gmail .service-icon img,
    .service-node.appsheet .service-icon img,
    .service-node.chat .service-icon img,
    .service-node.calendar .service-icon img {
        width: 2.6rem;
        height: 2.6rem;
    }
    
    .service-node.gmail .service-icon .emoji-fallback,
    .service-node.appsheet .service-icon .emoji-fallback,
    .service-node.chat .service-icon .emoji-fallback,
    .service-node.calendar .service-icon .emoji-fallback {
        font-size: 2.6rem;
    }
    
    .service-node .service-name {
        font-size: 1rem;
        margin-bottom: 3px;
    }
    
    .service-node .service-desc {
        font-size: 0.8rem;
    }
    
    .connection-line {
        width: 110px;
        display: none !important;      /* 🔧 極小サイズでは完全に非表示に */
    }
    
    /* サービスページ全体のレスポンシブ */
    .services-hero-content,
    .service-detail-content,
    .services-contact-content {
        flex-direction: column;
        gap: 40px;
        padding: 0 30px;
    }
    
    .services-hero-title,
    .service-detail-title,
    .services-contact-title {
        font-size: 6rem;
        text-align: center;
    }
    
    .service-detail-title {
        font-size: 8rem;
    }
}

/* =============================================================================
   📱 TABLET RESPONSIVE (481px〜768px) - 小型スマートフォンを除外
   ============================================================================= */
@media (min-width: 481px) and (max-width: 768px) {
    /* コックピット関連（タブレット） - desktop専用 */
    .cockpit-layout .service-detail-title-desktop {
        font-size: 1.8rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .cockpit-layout {
        padding: 0 20px;
        gap: 40px;
    }
    
    .service-workspace .cockpit-layout .service-features {
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 30px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    .cockpit-top-section .service-detail-title-desktop {
        flex: 0 0 100%;
        text-align: center;
    }
    
    .cockpit-dashboard {
        min-height: 350px;
        padding: 15px;
        flex-direction: column;
        gap: 20px;
    }
    
    .main-monitor {
        width: 100%;
        max-width: 280px;
        height: 180px;
    }
    
    .cockpit-widgets {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        pointer-events: auto;
    }
    
    .widget-item {
        position: static;
        width: auto;
        height: 50px;
        padding: 8px;
    }
    
    /* モバイル用アイコンサイズ調整 */
    .widget-icon {
        width: 20px;
        height: 20px;
    }
    
    .widget-icon img,
    .emoji-fallback {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }
    
    /* ワークフローセクション（モバイル） */
    .workflow-layout .service-detail-title {
        display: block !important;
        flex: 1;
        align-self: stretch;
        width: 100% !important;
        min-width: 100%;
        box-sizing: border-box;
        font-size: 1.8rem;
        color: #1a2332;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .service-detail-left {
        gap: 25px;
        text-align: center;
        align-items: stretch;
    }
    
    .workflow-layout .service-detail-message {
        padding: 30px 35px !important;
    }
    
    .workflow-diagram-container {
        padding: 20px;
        margin-top: calc(2.34rem + 25px);
    }
    
    .workspace-diagram-container {
        padding: 4px 20px !important;  /* 🔧 モバイルでも高さを半分に */
        margin-top: calc(2.34rem + 25px);
    }
    
    /* 🔧 【適切なサイズ】モバイル用円状図調整 */
    .circular-integration-chart {
        padding: 18px 12px !important; /* 🔧 適切なサイズに調整 */
        min-height: 160px !important;  /* 🔧 適切な高さに調整 */
    }
    
    .chart-title {
        font-size: 0.9rem !important;  /* 🔧 適切なサイズに調整 */
        margin-bottom: 10px !important;/* 🔧 適切な間隔に調整 */
    }
    
    .circular-container {
        height: 40px !important;       /* 🔧 300px → 40px 劇的に縮小 */
    }
    
    .central-hub {
        width: 20px !important;        /* 🔧 100px → 20px 劇的に縮小 */
        height: 20px !important;       /* 🔧 100px → 20px 劇的に縮小 */
    }
    
    .central-hub .hub-icon {
        font-size: 0.3rem !important; /* 🔧 1.8rem → 0.3rem 劇的に縮小 */
        margin-bottom: 0px !important; /* 🔧 3px → 0px 劇的に縮小 */
    }
    
    .central-hub .hub-title,
    .central-hub .hub-subtitle {
        font-size: 0.1rem !important; /* 🔧 0.85rem → 0.1rem 劇的に縮小 */
        margin-bottom: 0px !important; /* 🔧 1px → 0px 劇的に縮小 */
        line-height: 1;
        display: none !important;      /* 🔧 極小サイズでは非表示に */
    }
    
    .central-hub .hub-description {
        font-size: 0.1rem !important; /* 🔧 0.6rem → 0.1rem 劇的に縮小 */
        display: none !important;      /* 🔧 極小サイズでは非表示に */
    }
    
    /* 🔧 【超縮小】サービス軌道調整（モバイル） - 非表示 */
    .gmail-orbit { transform: rotate(0deg) translateY(-10px) rotate(0deg) !important; display: none !important; }
    .drive-orbit { transform: rotate(60deg) translateY(-10px) rotate(-60deg) !important; display: none !important; }
    .sheets-orbit { transform: rotate(120deg) translateY(-10px) rotate(-120deg) !important; display: none !important; }
    .appsheet-orbit { transform: rotate(180deg) translateY(-10px) rotate(-180deg) !important; display: none !important; }
    .chat-orbit { transform: rotate(240deg) translateY(-10px) rotate(-240deg) !important; display: none !important; }
    .calendar-orbit { transform: rotate(300deg) translateY(-10px) rotate(-300deg) !important; display: none !important; }
    
    .service-orbit {
        width: 8px !important;         /* 🔧 100px → 8px 劇的に縮小 */
        height: 8px !important;        /* 🔧 100px → 8px 劇的に縮小 */
        margin-left: -4px !important; /* 🔧 -50px → -4px 劇的に縮小 */
        display: none !important;      /* 🔧 極小サイズでは完全に非表示に */
        margin-top: -50px;
    }
    
    .service-node {
        width: 8px !important;         /* 🔧 100px → 8px 劇的に縮小 */
        display: none !important;      /* 🔧 極小サイズでは完全に非表示に */
        height: 100px;
    }
    
    .service-node .service-icon {
        font-size: 1.8rem;
        margin-bottom: 4px;
        height: 1.8rem;
    }
    
    .service-node .service-icon img {
        width: 1.8rem;
        height: 1.8rem;
    }
    
    .service-node .service-icon .emoji-fallback {
        font-size: 1.8rem;
    }
    
    /* モバイル用：特定サービスのアイコンサイズ拡大 */
    .service-node.gmail .service-icon,
    .service-node.appsheet .service-icon,
    .service-node.chat .service-icon,
    .service-node.calendar .service-icon {
        height: 2.2rem;
    }
    
    .service-node.gmail .service-icon img,
    .service-node.appsheet .service-icon img,
    .service-node.chat .service-icon img,
    .service-node.calendar .service-icon img {
        width: 2.2rem;
        height: 2.2rem;
    }
    
    .service-node.gmail .service-icon .emoji-fallback,
    .service-node.appsheet .service-icon .emoji-fallback,
    .service-node.chat .service-icon .emoji-fallback,
    .service-node.calendar .service-icon .emoji-fallback {
        font-size: 2.2rem;
    }
    
    .service-node .service-name {
        font-size: 0.85rem;
        margin-bottom: 2px;
        line-height: 1.1;
    }
    
    .service-node .service-desc {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    .connection-line {
        width: 90px;
        display: none !important;      /* 🔧 極小サイズでは完全に非表示に */
    }
    
    /* モバイル版レイアウト調整 */
    .workflow-top-section .service-detail-title {
        flex: 0 0 100%;
        text-align: center;
    }
    
    .workflow-top-section .service-detail-message {
        flex: 0 0 100%;
        order: 2;
    }
    
    .workflow-top-section .service-detail-right {
        flex: 0 0 100%;
        order: 3;
    }
    
    .workflow-layout .service-features {
        flex-direction: column;
        gap: 15px;
        margin-top: 25px;
    }
    
    .placeholder-content {
        padding: 30px 15px;
    }
    
    .placeholder-icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }
    
    .placeholder-content h4 {
        font-size: 1.3rem;
    }
    
    .placeholder-content p {
        font-size: 1rem;
    }
    
    /* サービスページ（モバイル） */
    .services-hero-content,
    .service-detail-content,
    .services-contact-content {
        padding: 0 20px;
        gap: 30px;
    }
    
    .services-hero-title,
    .services-contact-title {
        font-size: 4rem;
    }
    
    .service-detail-title {
        font-size: 6rem;
    }
    
    .services-hero-message,
    .service-detail-message,
    .services-contact-message {
        padding: 40px 30px;
        max-width: 100%;
        max-height: 90vh;
    }
    
    .services-main-title,
    .services-contact-main-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .service-detail-main-title {
        font-size: 1.6rem;
    }
    
    .services-description,
    .service-detail-description p,
    .services-contact-description p {
        font-size: 1rem;
    }
    
    .feature-card {
        flex-direction: column;
        text-align: center;
        padding: 15px !important;  /* 🚨 components.cssと統一 */
    }
    
    .feature-icon {
        margin-right: 0;
        margin-bottom: 15px;
        font-size: 2.2rem;
    }
    
    .feature-content h4 {
        font-size: 1.1rem;
        margin-bottom: 6px;  /* 🔧 8px → 6px 全セクション統一で高さを低く（デスクトップ版と統一） */
    }
    
    .feature-content p {
        font-size: 0.95rem;
    }
    
    .services-contact-buttons {
        gap: 12px;
    }
    
    .services-btn {
        padding: 14px 20px;
        min-height: 50px;
        justify-content: center;
    }
    
    .btn-icon {
        font-size: 1.3rem;
        margin-right: 10px;
    }
    
    .btn-text {
        font-size: 0.95rem;
    }
    
    /* サービス個別レスポンシブ（モバイル） */
    .services-hero-content {
        gap: 40px;
        padding: 0 20px;
    }
    
    .services-hero-title {
        font-size: 4rem;
    }
    
    .services-hero-message {
        padding: 40px 30px;
        max-width: 100%;
    }
    
    /* AppSheetセクションのモバイル対応 */
    .appsheet-layout {
        padding: 0 20px;
        gap: 40px;
    }
    
    .appsheet-top-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .appsheet-layout .service-detail-title {
        font-size: 2.2rem;
    }
    
    .appsheet-top-section .service-detail-title {
        flex: 0 0 100%;
        text-align: center;
    }
    
    .appsheet-layout .service-detail-title {
        font-size: 1.8rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .appsheet-top-section .service-detail-message,
    .appsheet-top-section .service-detail-right {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .service-appsheet .appsheet-layout .service-features {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* AppSheetデモのモバイル対応 */
    .appsheet-demo-container {
        padding: 20px;
    }
    
    .appsheet-demo-image {
        border-radius: 12px;
    }
    
    .demo-placeholder {
        min-height: 300px;
        padding: 20px;
    }
    
    .demo-placeholder .placeholder-icon {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }
    
    .demo-placeholder h4 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .demo-placeholder p {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    /* マネジメントセクションのモバイル対応 */
    .management-layout {
        padding: 0 20px;
        gap: 40px;
    }
    
    .management-top-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .management-layout .service-detail-title {
        font-size: 1.8rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .management-top-section .service-detail-title {
        flex: 0 0 100%;
        text-align: center;
    }
    
    .management-top-section .service-detail-message,
    .management-top-section .service-detail-right {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .service-management .management-layout .service-features {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* マネジメントサービスのモバイル対応 */
    .management-service-container {
        padding: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15px;
    }
    
    .management-services-image {
        max-width: 100%;
        border-radius: 10px;
    }
    
    /* データエントリーセクションのモバイル対応 */
    .dataentry-layout {
        padding: 0 20px;
        gap: 40px;
    }
    
    .dataentry-top-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .dataentry-layout .service-detail-title {
        font-size: 1.8rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .dataentry-top-section .service-detail-title {
        flex: 0 0 100%;
        text-align: center;
    }
    
    .dataentry-top-section .service-detail-message,
    .dataentry-top-section .service-detail-right {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .service-dataentry .dataentry-layout .service-features {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* データエントリー作業のモバイル対応 */
    .dataentry-work-container {
        padding: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15px;
    }
    
    .dataentry-work-image {
        max-width: 100%;
        border-radius: 10px;
    }
    
    /* コンタクトセクションのモバイル対応 */
    .contact-layout {
        padding: 0 20px;
        gap: 40px;
    }
    
    .contact-top-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .contact-layout .service-detail-title {
        font-size: 1.8rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .contact-top-section .service-detail-title {
        flex: 0 0 100%;
        text-align: center;
    }
    
    .contact-top-section .service-detail-message {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    
    .service-contact .contact-layout .contact-methods {
        flex-direction: column !important;
        gap: 30px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* 特別オファーのモバイル対応 */
    .special-offer {
        flex-direction: row;
        gap: 8px;
        padding: 12px;
        text-align: left;
    }
    
    .offer-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
        line-height: 1.4;
    }
    
    .offer-text {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    /* お問い合わせ方法カードのモバイル対応（2つ用に最適化） */
    .contact-method-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 25px;
        min-width: auto;
        max-width: none;
        width: 100%;
    }
    
    .method-icon {
        width: 70px;
        height: 70px;
        font-size: 3rem;
        margin: 0 auto;
    }
    
    .method-content h4 {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    
    .method-content p {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
    
    .method-action {
        font-size: 1rem;
        padding: 8px 15px;
    }
    
    .method-arrow {
        display: none; /* モバイルでは矢印を非表示 */
    }
    
    /* 基本レスポンシブ（ヒーロー・ビジョン） */
    .hero-title {
        font-size: 2.2rem;
        margin-bottom: 25px;
        line-height: 1.3;
        padding: 0 10px;
        white-space: nowrap;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        line-height: 1.5;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hamburger-menu {
        top: 30px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    .hamburger-menu span {
        width: 18px;
    }
    
    .main-nav {
        width: 90%;
        right: -90%;
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
    
    .main-nav.active {
        right: 0;
    }
    
    .main-nav ul {
        padding: 0;
        gap: 0;
        width: 100%;
        height: 100%;
    }
    
    .logo-container {
        top: 30px;
        left: 20px;
    }
    
    .hero-content {
        margin-top: 0;
        padding: 0 15px;
        max-width: 95%;
        gap: 15px;
    }

    .vision-content {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }
    
    .vision-title {
        font-size: 4rem;
        text-align: center;
    }
    
    .vision-message {
        padding: 25px 35px;
        margin: 0 20px;
    }
    
    .vision-message p {
        font-size: 1.2rem;
    }
}

/* =============================================================================
   📱 SMALL MOBILE RESPONSIVE (max-width: 480px) 
   ============================================================================= */
@media (max-width: 480px) {
    /* 小型スマートフォン専用レスポンシブ設定 */
    
    /* ロゴを中央寄せ（視覚的中央のため少し右に） */
    .logo-container {
        left: 52%;
        transform: translateX(-50%);
        top: 30px;
        text-align: center;
    }
    
    .logo {
        height: 150px;
        width: auto;
    }
    
    /* ハンバーガーメニュー */
    .hamburger-menu {
        top: 30px;
        right: 10px;
        width: 40px;
        height: 40px;
        z-index: 10001;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(12px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
    .hamburger-menu span {
        background: rgba(51, 51, 51, 0.55) !important; /* 黒線をやや薄く */
    }
    .hamburger-menu:hover {
        background: rgba(78, 205, 196, 0.2);
        border-color: rgba(78, 205, 196, 0.4);
    }
    
    .hamburger-menu span {
        width: 16px;
        height: 2px;
    }
    
    /* ナビゲーションメニュー */
    .main-nav {
        width: 100%;
        right: -100%;
        padding-top: 80px;
    }
    
    .main-nav.active {
        right: 0;
    }
    
    .main-nav ul {
        padding: 20px;
        gap: 0;
    }
    
    .main-nav li {
        margin-bottom: 20px;
    }
    
    .main-nav a {
        font-size: 1.1rem;
        padding: 15px 20px;
        display: block;
        text-align: center;
    }
    
    /* 🔧🔧🔧 【更新】393×852用Visionセクション最適化 🔧🔧🔧 */
    .vision-section {
        height: auto;
        min-height: 60vh;
        padding: 40px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
    
    .vision-content {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    
    .vision-title {
        font-size: 3.5rem;
        font-weight: 300;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 0;
        text-align: center;
        opacity: 0;
        transform: translateX(-100px);
        transition: all 1s ease-out;
    }
    
    .vision-title.visible {
        opacity: 0.9;
        transform: translateX(0);
    }
    
    .vision-message {
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        padding: 40px 25px;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateY(50px) scale(0.9);
        transition: all 1.2s ease-out;
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 350px;
        text-align: center;
    }
    
    .vision-message.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        animation: float 6s ease-in-out infinite;
    }
    
    .vision-message:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }
    
    .vision-main-title {
        font-size: 1.4rem;
        line-height: 1.4;
        color: #333;
        margin: 0 0 20px 0;
        text-align: center;
        font-weight: 600;
        position: relative;
        top: -15px;
        white-space: normal;
        width: 100%;
    }
    
    .vision-description {
        text-align: center;
        position: relative;
        top: 15px;
    }
    
    /* 🔧🔧🔧 【393幅専用】PC版テキストを非表示 🔧🔧🔧 */
    .vision-text-desktop {
        display: none;
    }
    
    /* 🔧🔧🔧 【393幅専用】モバイル版テキストを表示・最適化 🔧🔧🔧 */
    .vision-text-mobile {
        display: block;
        font-size: 0.9rem;           /* 🔧 文字サイズ調整可能：0.8rem〜1.0rem推奨 */
        line-height: 1.6;            /* 🔧 行間調整可能：1.4〜1.8推奨 */
        color: #555;
        margin: 0 0 10px 0;          /* 🔧 段落間隔調整可能：8px〜15px推奨 */
        text-align: center;
        font-weight: 400;
        white-space: normal;         /* 🔧 改行制御：normalで自然改行、nowrapで改行なし */
        width: 100%;
        word-break: keep-all;        /* 🔧 日本語改行制御：keep-allで単語単位、break-allで文字単位 */
        overflow-wrap: break-word;   /* 🔧 長い単語の改行制御 */
    }
    
    /* サービスセクション */
    .service-section {
        height: auto;
        min-height: 120vh;
        padding: 40px 0 30px 0;
    }
    
    .service-title {
        font-size: 3rem;
        margin-bottom: 25px;
        text-align: center;
        font-weight: 300;
    }
    

    
    .service-name {
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .service-tagline {
        font-size: 0.9rem;
        line-height: 1.4;
        text-align: center;
    }
    
    /* サービス円形要素 */
    .service-visual-container {
        padding: 20px 10px;
        max-width: 100%;
    }
    
    .service-center-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    
    .service-circle {
        min-width: 120px;
        max-width: 160px;
        height: 120px;
        font-size: 0.8rem;
        padding: 8px;
        line-height: 1.2;
    }
} 

/* =============================================================================
   📱 ADDITIONAL SERVICE SECTION RESPONSIVE - サービスセクション追加レスポンシブ
   ============================================================================= */

/* レスポンシブデザイン（サービスセクション）- タブレット用（481px〜768px） */
@media (min-width: 481px) and (max-width: 768px) {
    .service-section {
        height: auto;
        min-height: 200vh;
        padding-top: 80px;
        margin-top: 0;
    }
    
    .service-title {
        font-size: 4rem;
    }
    

    
    .service-name {
        font-size: 2.5rem; /* 2.8rem → 2.5rem に調整（適切なサイズ） */
        font-weight: 800;
        letter-spacing: 1px;
        margin-bottom: 35px; /* 20px → 35px に拡大（距離をさらに確保） */
        line-height: 1.3; /* モバイルで読みやすい行間 */
        padding: 0 10px; /* 左右に余白を追加 */
    }
    
    .service-tagline {
        font-size: 1.1rem;
        margin-top: 0; /* -3px → 0 に変更（重なりを防止） */
        line-height: 1.5; /* 読みやすい行間 */
        padding: 0 10px; /* 左右に余白を追加 */
        max-width: 90%; /* モバイルで幅を調整 */
    }
       
    /* 🔧🔧🔧 【修正】モバイル版でも他セクションタイトルと統一 🔧🔧🔧 */
    .service-section-title {
        font-size: 2.5rem; /* 2rem → 2.5rem に拡大 */
        font-weight: 300; /* section-titleと同じ */
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.08em; /* モバイルで少し狭く */
        margin-bottom: 30px;
        opacity: 0; /* 初期状態で非表示 */
        transform: translateY(-30px) scale(1.1) rotate(3deg); /* モバイル用に縮小 */
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        font-weight: bold;
    }
    
    .professional-roles {
        flex-direction: column;
        gap: 20px;
        margin: 30px 0;
    }
    
    .professional-role {
        min-width: auto;
        max-width: 100%;
        padding: 25px 20px;
    }
    
    .role-icon {
        font-size: 2.5rem;
    }
    
    /* 🔧🔧🔧 【修正】モバイル版でも専門職の文字を大きく 🔧🔧🔧 */
    .role-title {
        font-size: 1.8rem; /* 1.3rem → 1.8rem に拡大 */
        font-weight: 800;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }
    
    .role-description {
        font-size: 1rem; /* 0.9rem → 1rem に拡大（モバイル版） */
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.4; /* モバイルで読みやすく */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .service-box {
        padding: 30px 25px;
        max-width: 100%;
    }
    
    /* 🔧🔧🔧 【修正】タブレット版でもサービスネームを大きく 🔧🔧🔧 */
    .service-name {
        font-size: 2.4rem; /* 2rem → 2.4rem に拡大 */
        font-weight: 800;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }
    
    .service-tagline {
        font-size: 1.05rem; /* 1rem → 1.05rem に微増 */
        margin-top: -4px; /* service-nameに近づける */
    }

    .service-visual-container {
        height: 600px;
        max-width: 95%;
        margin: 30px auto;
        padding: 40px 20px;
    }
    
    .service-center-title {
        font-size: 2rem;
    }
    
    /* モバイル版「ぷちっ」アニメーション調整 */
    .service-puchi-text {
        animation: puchiShakeMobile 1500ms ease-in-out infinite;    /* 🔧 3000ms → 1500ms (2倍速) */
    }
    
    .service-circle {
        width: 156px;       /* 🔧 130px × 1.2 = 156px */
        height: 156px;      /* 🔧 130px × 1.2 = 156px */
        padding: 18px;      /* 🔧 15px × 1.2 = 18px */
        text-decoration: none;
        color: inherit;
    }
    
    /* モバイル版五角形配置 */
    .service-circle-1 {
        top: 40px;          /* 🔧 上からの距離（モバイル版）*/
        transform: translateX(-50%) scale(0.3) translateY(-100px);
    }
    
    .service-visual-container.visible .service-circle-1 {
        transform: translateX(-50%) scale(1) translateY(0);
    }
    
    .service-circle-2 {
        top: 130px;         /* 🔧 上からの距離（モバイル版）*/
        right: 40px;        /* 🔧 右からの距離（モバイル版）*/
    }
    
    .service-circle-3 {
        bottom: 100px;      /* 🔧 下からの距離（モバイル版）*/
        right: 80px;        /* 🔧 右からの距離（モバイル版）*/
    }
    
    .service-circle-4 {
        bottom: 100px;      /* 🔧 下からの距離（モバイル版）*/
        left: 80px;         /* 🔧 左からの距離（モバイル版）*/
    }
    
    .service-circle-5 {
        top: 130px;         /* 🔧 上からの距離（モバイル版）*/
        left: 40px;         /* 🔧 左からの距離（モバイル版）*/
    }
    
    .service-circle-text {
        font-size: 1rem;    /* 🔧 0.85rem → 1rem に拡大 */
        line-height: 1.3;   /* 🔧 1.2 → 1.3 に調整 */
    }
    
    /* モバイル版光沢効果サイズ調整 */
    .service-circle:before {
        width: 30px;
        height: 15px;
        top: 15px;
        left: 20px;
    }
    
    .service-circle:after {
        width: 15px;
        height: 8px;
        bottom: 20px;
        right: 25px;
    }
}