/* ==========================================================================
   AsaBee Consulting - Responsive Styles
   ========================================================================== */

/* ==========================================================================
   Extra Large Devices (Large Desktops, 1400px and down)
   ========================================================================== */

@media screen and (max-width: 1400px) {
    /* Navigation - Reduce spacing for smaller screens */
    .nav-menu {
        gap: 30px;
    }
    
    .nav-link {
        font-size: 0.938rem;
    }
}

/* ==========================================================================
   Large Devices (Desktops, 1200px and down)
   ========================================================================== */

@media screen and (max-width: 1200px) {
    :root {
        --section-padding: 80px;
    }
    
    .container {
        max-width: 960px;
    }
    
    /* Navigation - Further reduce spacing */
    .nav-menu {
        gap: 20px;
    }
    
    .nav-link {
        font-size: 0.875rem;
    }
    
    .nav-wrapper {
        gap: 40px;
    }
    
    /* Hero セクション - 中型PC用 */
    .hero-title {
        font-size: 4.7rem; /* 75px */
    }
    
    .hero-subtitle {
        font-size: 1.5rem; /* 24px */
    }
    
    .hero-description {
        font-size: 1.125rem; /* 18px */
    }
    
    .hero-description .company-name-large {
        font-size: 1.75rem; /* 28px */
    }
    
    .hero-company-name {
        font-size: 1.75rem; /* 28px */
    }
    
    .section-title {
        font-size: 2.25rem;
    }
}

/* ==========================================================================
   Medium Devices (Tablets, 992px and down)
   ========================================================================== */

@media screen and (max-width: 992px) {
    :root {
        --section-padding: 60px;
    }
    
    .container {
        max-width: 720px;
    }
    
    /* Navigation - Further reduce spacing */
    .nav-menu {
        gap: 15px;
    }
    
    .nav-link {
        font-size: 0.813rem;
        padding: 8px 0;
    }
    
    .nav-wrapper {
        gap: 30px;
    }
    
    /* Navigation */
    .navbar {
        padding: 14.4px 0;
    }
    
    .navbar.scrolled {
        padding: 12px 0;
    }
    
    .logo-image {
        height: 90px;
        margin: -18.75px 0;
    }
    
    .navbar.scrolled .logo-white {
        display: none;
    }
    
    .navbar.scrolled .logo-dark {
        display: block;
    }
    
    .navbar.scrolled .logo-image {
        height: 75px;
        margin: -15px 0;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        padding: 100px 40px 40px;
        gap: 0;
        align-items: flex-start;
        box-shadow: var(--shadow-xl);
        transition: right var(--transition-normal);
        overflow-y: auto;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-link {
        display: block;
        padding: 15px 0;
        color: var(--text-dark);
        width: 100%;
    }
    
    /* Mobile: Show Japanese by default */
    .nav-link .nav-text {
        display: none;
    }
    
    .nav-link::before {
        position: static;
        transform: none;
        opacity: 1;
    }
    
    .nav-link.cta-btn .nav-text {
        display: inline-block;
    }
    
    .nav-link.cta-btn::before {
        display: none;
    }
    
    .nav-link.cta-btn {
        margin-top: 20px;
        text-align: center;
        justify-content: center;
    }
    
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
    
    /* Hero - タブレット用（横向きiPad等） */
    .hero-title {
        font-size: 5.3rem; /* 85px */
    }
    
    .hero-subtitle {
        font-size: 1.65rem; /* 26px */
    }
    
    .hero-description {
        font-size: 1.25rem; /* 20px */
    }
    
    .hero-company-name {
        font-size: 1.875rem; /* 30px */
    }
    
    .hero-buttons {
        gap: 30px; /* タブレット用にgapを調整 */
    }
    
    .hero-buttons .btn {
        width: auto; /* タブレットでは自動幅 */
        max-width: none;
        flex: 0 1 auto;
        justify-content: center;
        padding: 16px 32px;
        font-size: 1.125rem; /* 18px */
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* News */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* Philosophy */
    .philosophy-pillars {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    /* Media Coverage Compact - タブレット対応 */
    .media-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .media-link-compact {
        padding: 10px 12px;
    }
    
    .media-icon-compact {
        width: 34px;
        height: 34px;
    }
    
    .media-title-compact {
        font-size: 0.75rem;
    }
    
    /* Core Values */
    .core-values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .value-card {
        padding: 30px 20px;
    }
    
    .value-icon {
        width: 66px;
        height: 66px;
        font-size: 2.438rem;
    }
    
    .value-card h4 {
        font-size: 1.25rem;
    }
    
    .value-subtitle {
        font-size: 0.938rem;
    }
    
    .value-card p {
        font-size: 0.875rem;
    }
    
    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* About - 1カラムレイアウト */
    .about-content {
        display: block;
    }
    
    /* 以下は使用しないが、削除せずコメントアウト */
    /*
    .about-image {
        order: 2;
    }
    
    .image-wrapper img {
        height: 500px;
    }
    */
    
    .about-text {
        order: 1;
    }
    
    /* Career Section */
    .credentials-grid {
        grid-template-columns: 1fr;
    }
    
    /* Career Detail Section */
    .career-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .advisor-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    
    .career-summary {
        padding: 30px;
    }
    
    /* Financial Report */
    .financial-grid {
        grid-template-columns: 1fr;
    }
    
    /* Contact */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    
    /* Footer */
    .footer-logo-image {
        height: 90px;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    /* Team Section */
    .team-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .team-card {
        grid-template-columns: 1fr;
    }
    
    .team-image {
        height: 350px;
    }
    
    /* Nakamura Services - Tablet */
    .nakamura-services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   Small Devices (Landscape Phones, 768px and down)
   ========================================================================== */

@media screen and (max-width: 768px) {
    :root {
        --section-padding: 50px;
    }
    
    .container {
        max-width: 100%;
        padding: 0 20px; /* 左右に余白を確保 */
    }
    
    html {
        font-size: 16px; /* スマホでも16pxを維持 */
    }
    
    body {
        font-size: 1rem; /* 16px - 本文の最小サイズを確保 */
        line-height: 1.7;
    }
    
    p {
        font-size: 1rem; /* 16px - 段落テキストは最低16px */
    }
    
    /* Hero - タブレット縦向き・大型スマホ用 */
    .hero {
        min-height: 100vh; /* 画面全体の高さを確保 */
        padding-top: 100px;
        padding-bottom: 40px;
        display: flex;
        align-items: center;
    }
    
    /* タブレットでも1カラムに */
    .hero-two-column {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* 写真を上に配置 */
    .hero-image {
        order: -1;
        margin-bottom: 30px;
    }
    
    .hero-image-wrapper {
        transform: translateX(0);
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* タブレットでは正方形に近いアスペクト比 */
    .founder-photo {
        aspect-ratio: 4 / 5;
    }
    
    /* タイポグラフィのタブレット調整 */
    .hero-typography {
        bottom: 18px;
        right: 18px;
    }
    
    .typo-line {
        font-size: 1.22rem;
        line-height: 1.35;
    }
    
    /* テキストを中央揃えに */
    .hero-text {
        text-align: center;
        padding: 0 20px; /* 左右の余白を均等に */
        margin: 0 auto; /* 完全に中央配置 */
        max-width: 100%;
    }
    
    /* タブレット・スマホではタイトルを縦並びに */
    .title-line {
        display: block;
        white-space: normal;
    }
    
    .hero-signature {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .signature-line {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-description {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    /* 1st Anniversary Logo - Mobile: 1.8pxに設定（最小サイズ） */
    .anniversary-logo {
        position: absolute !important;
        top: -40px !important; /* 画像の上端より40px上に配置 */
        left: 10px !important; /* 画像の左から10px */
        margin: 0 !important;
        z-index: 20 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 0.95 !important;
    }
    
    .anniversary-logo-number {
        font-family: 'Georgia', 'Times New Roman', serif !important;
        font-size: 0.05625rem !important; /* 0.9px (1.8px→0.9px 50%ダウン) */
        font-weight: 900 !important;
        display: inline-block !important;
        visibility: visible !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
        position: relative !important;
    }
    
    .anniversary-logo-number::before {
        content: '' !important; /* スマホ版ではANNIVERSARYを非表示 */
        display: none !important;
    }
    
    .anniversary-logo-suffix {
        font-family: 'Georgia', 'Times New Roman', serif !important;
        font-size: 0.01875rem !important; /* 0.3px (0.9pxの約1/3) */
        font-weight: 600 !important;
        display: inline !important;
        visibility: visible !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
        vertical-align: super !important;
        margin-left: -0.2px !important;
    }
    
    .hero-title {
        font-size: 4.7rem; /* 75px */
    }
    
    .hero-subtitle {
        font-size: 1.65rem; /* 26px */
    }
    
    .hero-description {
        font-size: 1.125rem; /* 18px - より読みやすく */
    }
    
    .hero-company-name {
        font-size: 1.875rem; /* 30px - より大きく */
    }
    
    .scroll-indicator {
        display: none;
    }
    
    /* Page Hero */
    .page-hero {
        min-height: 350px;
        padding-top: 95px; /* タブレットのナビゲーションバーの高さ分 */
    }
    
    .page-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .page-hero-content p {
        font-size: 1.125rem;
    }
    
    /* Section Header */
    .section-title {
        font-size: 2.25rem; /* 36px - より大きく */
    }
    
    .section-description {
        font-size: 1.125rem; /* 18px - より読みやすく */
    }
    
    /* Stats */
    .stats-section {
        padding: 40px 0;
    }
    
    .stats-grid {
        gap: 20px;
    }
    
    .stat-number {
        font-size: 2.75rem; /* 44px - より大きく */
    }
    
    .stat-icon {
        font-size: 2rem;
    }
    
    /* News */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .news-title {
        font-size: 1.125rem;
        min-height: auto;
    }
    
    .news-excerpt {
        min-height: auto;
    }
    
    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: 30px 25px;
    }
    
    /* About */
    .about-message h3 {
        font-size: 1.625rem; /* 26px - タブレット用 */
    }
    
    .about-message p {
        font-size: 1.125rem; /* 18px - 読みやすく */
    }
    
    .read-more-btn {
        padding: 10px 24px;
        font-size: 0.938rem;
    }
    
    .message-expandable .highlight-text {
        padding: 18px 24px;
        font-size: 1.063rem; /* 17px */
    }
    
    .message-expandable .final-message {
        font-size: 1.25rem; /* 20px */
    }
    
    /* 使用しないためコメントアウト */
    /*
    .image-wrapper img {
        height: 400px;
    }
    */
    
    .founder-credentials {
        padding: 15px 20px;
        margin-top: 20px;
    }
    
    .signature-image-mobile {
        margin: 12px 0;
    }
    
    .signature-image-mobile img {
        width: 180px;
        height: 180px;
        border-radius: 10px;
        border: 2px solid rgba(30, 107, 255, 0.2);
    }
    
    .credentials-title {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    .credentials-summary {
        padding-left: 30px;
    }
    
    .credentials-summary p {
        font-size: 0.875rem;
        line-height: 1.7;
    }
    
    .about-features {
        gap: 15px;
    }
    
    .feature-item {
        flex: 1 1 100%;
    }
    
    /* Career Detail Section */
    .career-detail-content {
        gap: 50px;
    }
    
    .category-title {
        font-size: 1.5rem;
    }
    
    .career-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    
    .advisor-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .career-card {
        padding: 12px 15px;
    }
    
    .advisor-card {
        padding: 18px;
    }
    
    .career-summary {
        padding: 25px;
    }
    
    .summary-title {
        font-size: 1.5rem;
    }
    
    .summary-content p {
        font-size: 1rem;
    }
    
    /* CTA */
    .cta-section {
        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%) !important;
        padding: 60px 0;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-content p {
        font-size: 1.063rem;
    }
    
    /* CTA Buttons - Responsive for tablets */
    .cta-content > div[style*="flex"] {
        gap: 15px !important;
    }
    
    .cta-content .btn-large {
        padding: 16px 36px;
        font-size: 1rem;
    }
    
    /* Contact */
    .contact-form-wrapper {
        padding: 30px 25px;
    }
    
    /* Career Details */
    .career-profile {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 35px 25px;
    }
    
    .career-profile-image img {
        height: 400px;
    }
    
    .career-profile-info h2 {
        font-size: 2rem;
    }
    
    .career-profile-name-en {
        font-size: 1.25rem;
    }
    
    .career-profile-role {
        font-size: 1rem;
    }
    
    .position-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .position-grid.three-columns {
        grid-template-columns: 1fr;
    }
    
    .position-card {
        padding: 30px 25px;
    }
    
    .career-timeline {
        padding-left: 40px;
    }
    
    .career-timeline::before {
        left: 10px;
    }
    
    .timeline-item::before {
        left: -38px;
    }
    
    .timeline-year {
        font-size: 1rem;
    }
    
    .timeline-content h4 {
        font-size: 1.125rem;
    }
    
    .career-cta {
        padding: 40px 25px;
    }
    
    .career-cta h3 {
        font-size: 1.5rem;
    }
    
    /* Footer */
    .footer {
        padding: 50px 0 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Scroll to Top */
    .scroll-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   Extra Small Devices (Portrait Phones, 576px and down)
   ========================================================================== */

@media screen and (max-width: 576px) {
    :root {
        --section-padding: 40px;
        --container-padding: 15px;
    }
    
    .container {
        max-width: 100%;
    }
    
    html {
        font-size: 16px; /* 小型スマホでも16pxを維持 */
    }
    
    body {
        font-size: 1rem; /* 16px - 本文の最小サイズを確保 */
        line-height: 1.7;
    }
    
    p {
        font-size: 1rem; /* 16px - 段落テキストは最低16px */
    }
    
    /* Navigation */
    .navbar {
        padding: 12px 0;
    }
    
    .navbar.scrolled {
        padding: 9.6px 0;
    }
    
    .logo-image {
        height: 75px;
        margin: -15px 0;
    }
    
    .navbar.scrolled .logo-white {
        display: none;
    }
    
    .navbar.scrolled .logo-dark {
        display: block;
    }
    
    .navbar.scrolled .logo-image {
        height: 63.75px;
        margin: -13.5px 0;
    }
    
    .logo-text {
        font-size: 1.5rem;
    }
    
    .nav-menu {
        width: 100%;
        padding: 80px 30px 30px;
    }
    
    /* Hero - スマホ用（iPhone 12 Pro等） */
    .hero {
        min-height: auto !important;
        padding-top: 75px !important; /* 80→75px (-5px) */
        padding-bottom: 110px !important; /* 100→110px (+10px) */
        display: block !important;
        align-items: unset !important;
    }
    
    /* スマホでは1カラムに */
    .hero-two-column {
        grid-template-columns: 1fr;
        gap: 25px; /* 要素間の余白を確保 */
    }
    
    /* 写真を上に配置 */
    .hero-image {
        order: -1;
        margin-bottom: 15px !important;
        position: relative !important; /* ロゴ配置の基準点 */
    }
    
    .hero-image-wrapper {
        transform: translateX(0) !important;
        max-width: 240px !important;
        margin: 0 auto !important;
        position: relative !important; /* この中にロゴを配置したい */
    }
    
    /* スマホでは正方形に圧縮 */
    .founder-photo {
        aspect-ratio: 1 / 1;
    }
    
    /* タイポグラフィのスマホ調整 */
    .hero-typography {
        bottom: 15px;
        right: 15px;
    }
    
    .typo-line {
        font-size: 1.125rem;
        line-height: 1.4;
    }
    
    /* テキストを中央揃えに */
    .hero-text {
        text-align: center;
        padding: 0 20px; /* 左右の余白を均等に */
        margin: 0 auto; /* 完全に中央配置 */
        max-width: 100%;
    }
    
    /* タブレット・スマホではタイトルを縦並びに */
    .title-line {
        display: block;
        white-space: normal;
    }
    
    .hero-signature {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .signature-line {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-description {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important; /* 高さ統一 */
    }
    
    .btn-hero-cta,
    .btn-hero-message {
        width: calc(50% - 5px) !important; /* gap 10pxを考慮 */
        flex: 1 1 0 !important; /* 完全に均等配分 */
        min-width: 0 !important;
        padding: 6px 6px !important; /* 4px→6px バランス重視 */
        padding-top: 6px !important; /* 明示的指定 */
        padding-bottom: 6px !important; /* 明示的指定 */
        font-size: 0.688rem !important; /* 11px */
        white-space: nowrap !important;
        text-align: center !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important; /* テキストとアイコンの間隔 */
        line-height: 1 !important; /* 行間を最小に */
        height: auto !important; /* 高さを自動計算 */
    }
    
    /* スマホではアイコンのマージンを削除（gapで制御） */
    .btn-hero-cta i,
    .btn-hero-message i {
        margin-left: 0 !important;
        font-size: 0.625rem !important; /* 11px→10px アイコン縮小 */
    }
    
    .btn-hero-message {
        background: transparent !important; /* 透明背景 */
        border: 2px solid var(--primary-color) !important; /* 青枠 */
        color: white !important; /* 白文字 */
    }
    
    .btn-hero-message:hover {
        background: var(--primary-color) !important; /* ホバー時：青背景 */
        border-color: var(--primary-color) !important;
        color: white !important; /* 白文字維持 */
    }
    
    .hero-title {
        font-size: 1.75rem; /* 28px (30→28px, -2px) */
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        margin-bottom: 2px !important; /* 余白を極限まで減らす */
    }
    
    .hero-subtitle {
        font-size: 0.75rem; /* 12px (13→12px, -1px) */
        margin-bottom: 2px !important; /* 余白を極限まで減らす */
        line-height: 1.25; /* 1.3→1.25 (更に詰める) */
    }
    
    .hero-signature {
        margin-top: 2px !important; /* 余白を極限まで減らす */
        margin-bottom: 2px !important; /* 余白を極限まで減らす */
    }
    
    .signature-name {
        font-size: 0.938rem; /* 15px (16→15px, -1px) */
    }
    
    .signature-title {
        font-size: 0.813rem; /* 13px (14→13px, -1px) */
        margin-bottom: 10px;
    }
    
    /* Signature Credentials - Mobile */
    .signature-credentials {
        gap: 6px;
        margin-top: 10px;
    }
    
    .credential-item {
        font-size: 0.75rem !important; /* 12px */
        padding-left: 0 !important; /* チェックマーク削除のため左パディングを0に */
        line-height: 1.4 !important;
        letter-spacing: 0 !important; /* 通常の文字間に戻す */
        word-spacing: 0 !important; /* 通常の単語間に戻す */
        white-space: normal !important;
        word-break: keep-all !important;
        display: block !important;
        text-indent: 0 !important; /* テキストインデントをリセット */
    }
    
    .credential-item::before {
        content: '' !important; /* チェックマークを削除 */
    }
    
    .hero-description {
        font-size: 0.688rem; /* 11px */
        margin-bottom: 2px !important; /* 余白を極限まで減らす */
    }
    
    .hero-buttons {
        margin-top: 2px !important; /* 3→2px (-1px) */
        margin-bottom: 60px !important;
    }
    
    .hero-company-name {
        font-size: 1rem !important; /* 16px (17.3→16px, -1.3px) */
    }
    
    .btn {
        padding: 14px 28px;
        font-size: 1.0625rem; /* 17px - より読みやすく */
    }
    
    .btn-large {
        padding: 16px 32px;
        font-size: 1.125rem; /* 18px - より読みやすく */
    }
    
    /* Page Hero */
    .page-hero {
        min-height: 300px;
        padding-top: 90px; /* スマホのナビゲーションバーの高さ分 */
    }
    
    .page-hero-content h1 {
        font-size: 2rem;
    }
    
    .page-hero-content p {
        font-size: 1rem;
    }
    
    /* Section Header */
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-label {
        font-size: 0.813rem;
    }
    
    /* Stats */
    .stats-section {
        padding: 20px 0; /* 30→20px (-10px) */
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px; /* 15→10px (-5px) */
    }
    
    .stat-item {
        padding: 15px 10px; /* 25px 15px→15px 10px (-10px vertical, -5px horizontal) */
    }
    
    .stat-icon {
        font-size: 1.5rem !important; /* アイコン縮小 */
        margin-bottom: 8px !important; /* 余白縮小 */
    }
    
    .stat-number {
        font-size: 1.875rem !important; /* 2.25rem→1.875rem (-0.375rem) */
        margin-bottom: 5px !important; /* 余白縮小 */
    }
    
    .stat-label {
        font-size: 0.813rem !important; /* ラベル縮小 */
        margin-bottom: 3px !important; /* 余白縮小 */
    }
    
    .stat-unit {
        font-size: 0.875rem !important; /* 単位縮小 */
    }
    
    /* Philosophy - Circular Vision Design */
    .philosophy-intro {
        padding: 20px;
        margin-bottom: 40px;
    }
    
    .philosophy-intro p {
        font-size: 0.938rem;
    }
    
    .philosophy-pillars {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pillar-card {
        padding: 30px 20px;
    }
    
    .pillar-number-badge {
        width: 50px;
        height: 50px;
        font-size: 1.75rem;
    }
    
    .pillar-card h4 {
        font-size: 1.25rem;
    }
    
    .pillar-card p {
        font-size: 0.938rem;
    }
    
    /* Core Values */
    .core-values-section {
        padding: 40px 0 !important; /* セクション全体の余白を縮小 */
    }
    
    .core-values-intro {
        padding: 15px !important; /* 20→15px (-5px) */
        margin-bottom: 20px !important; /* 40→20px (-20px) */
    }
    
    .core-values-intro p {
        font-size: 0.875rem !important; /* 1rem→0.875rem (14px) */
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }
    
    .core-values-grid {
        grid-template-columns: 1fr;
        gap: 12px !important; /* 20→12px (-8px × 4間隔 = -32px) */
    }
    
    .value-card {
        padding: 20px 15px !important; /* 30px 20px→20px 15px (-10px vertical, -5px horizontal) */
    }
    
    .value-icon {
        width: 50px !important; /* 60→50px (-10px) */
        height: 50px !important; /* 60→50px (-10px) */
        font-size: 1.875rem !important; /* 2.25rem→1.875rem (-0.375rem) */
        margin-bottom: 10px !important; /* アイコン下余白縮小 */
    }
    
    .value-card h4 {
        font-size: 1rem !important; /* 1.125rem→1rem (16px, -2px) */
        margin-bottom: 6px !important; /* 余白縮小 */
        line-height: 1.3 !important;
    }
    
    .value-subtitle {
        font-size: 0.75rem !important; /* 0.875rem→0.75rem (12px, -2px) */
        margin-bottom: 8px !important; /* 余白縮小 */
    }
    
    .value-card p {
        font-size: 0.813rem !important; /* 0.875rem→0.813rem (13px, -1px) */
        line-height: 1.5 !important; /* 行間を詰める */
        margin-bottom: 0 !important; /* 下余白削除 */
    }
    
    /* Services */
    .service-card {
        padding: 25px 20px;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        border-radius: 12px;
    }
    
    .service-card h3 {
        font-size: 1.375rem; /* 22px - より大きく */
    }
    
    .featured-badge {
        top: 15px;
        right: 15px;
        padding: 5px 12px;
    }
    
    /* About */
    .about-message h3 {
        font-size: 1.5rem; /* 24px - スマホ用 */
    }
    
    .about-message p {
        font-size: 1.063rem; /* 17px - スマホでも読みやすく */
        line-height: 1.8;
    }
    
    .signature .title {
        font-size: 1.125rem;
    }
    
    .signature-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .career-link-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Media Coverage Compact - モバイル対応 */
    .media-coverage-compact {
        padding: 15px;
        margin-top: 20px;
    }
    
    .media-coverage-compact .media-coverage-title {
        font-size: 0.938rem;
        margin-bottom: 12px;
    }
    
    .media-links-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .media-link-compact {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .media-icon-compact {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
    
    .media-source-compact {
        font-size: 0.688rem;
    }
    
    .media-title-compact {
        font-size: 0.75rem;
    }
    
    .media-link-compact .fa-external-link-alt {
        font-size: 0.688rem;
    }

    
    .read-more-btn {
        padding: 12px 24px;
        font-size: 1rem; /* 16px - 読みやすく */
    }
    
    .message-expandable .highlight-text {
        padding: 16px 20px;
        font-size: 1rem; /* 16px - 読みやすく */
        margin: 20px 0;
    }
    
    .message-expandable .final-message {
        font-size: 1.125rem; /* 18px - 読みやすく */
        margin-top: 25px;
    }
    
    /* Career Detail Section - Mobile */
    .career-detail-section {
        padding: 40px 0;
    }
    
    .career-detail-content {
        gap: 40px;
    }
    
    /* Career Details Page */
    .career-profile {
        padding: 30px 20px;
    }
    
    .career-profile-image img {
        height: 350px;
    }
    
    .career-profile-info h2 {
        font-size: 1.75rem;
    }
    
    .career-profile-name-en {
        font-size: 1.125rem;
    }
    
    .career-profile-role {
        font-size: 0.938rem;
        padding: 10px 20px;
    }
    
    .career-profile-description {
        font-size: 1rem;
    }
    
    .position-card {
        padding: 25px 20px;
    }
    
    .position-card h3 {
        font-size: 1.125rem;
    }
    
    .position-role {
        font-size: 0.938rem;
    }
    
    .career-timeline {
        padding-left: 35px;
    }
    
    .timeline-year {
        font-size: 0.938rem;
    }
    
    .timeline-content h4 {
        font-size: 1rem;
    }
    
    .timeline-content p {
        font-size: 0.938rem;
    }
    
    .career-cta {
        padding: 35px 20px;
    }
    
    .career-cta h3 {
        font-size: 1.25rem;
    }
    
    .career-cta p {
        font-size: 1rem;
    }
    
    .category-title {
        font-size: 1.25rem;
        gap: 10px;
    }
    
    .category-title i {
        font-size: 1.125rem;
    }
    
    .career-card {
        padding: 12px 12px;
    }
    
    .career-company {
        font-size: 0.938rem;
        margin-bottom: 6px;
    }
    
    .career-position {
        font-size: 0.813rem;
        padding: 2px 8px;
        line-height: 1.2;
    }
    
    .advisor-card {
        padding: 15px;
    }
    
    .advisor-company {
        font-size: 0.938rem;
    }
    
    .advisor-role {
        font-size: 0.813rem;
    }
    
    .career-summary {
        padding: 20px;
    }
    
    .summary-title {
        font-size: 1.25rem;
        margin-bottom: 20px;
    }
    
    .summary-content p {
        font-size: 0.938rem;
        line-height: 1.7;
        margin-bottom: 15px;
    }
    
    /* CTA */
    .cta-section {
        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%) !important;
        padding: 50px 0;
    }
    
    .cta-content h2 {
        font-size: 1.75rem;
    }
    
    .cta-content p {
        font-size: 1rem;
    }
    
    /* CTA Buttons - Stack vertically on mobile */
    .cta-content > div[style*="flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .cta-content .btn-large {
        width: 100%;
        padding: 18px 36px;
        font-size: 1rem;
        text-align: center;
    }
    
    /* Contact */
    .contact-form-wrapper {
        padding: 25px 20px;
    }
    
    .contact-form {
        gap: 20px;
    }
    
    .info-card {
        padding: 25px 20px;
    }
    
    .info-icon {
        width: 45px;
        height: 45px;
        font-size: 1.125rem;
    }
    
    /* Team Section */
    .team-section {
        padding: 60px 0;
    }
    
    .team-grid {
        gap: 20px;
        grid-template-columns: 1fr;
    }
    
    .team-card {
        grid-template-columns: 1fr;
    }
    
    .team-image {
        height: 300px;
    }
    
    .team-info {
        padding: 25px 20px;
        gap: 10px;
    }
    
    .team-name {
        font-size: 1.375rem;
    }
    
    .team-role {
        font-size: 1rem;
    }
    
    .team-description {
        font-size: 0.938rem;
    }
    
    /* Footer */
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer-logo-image {
        height: 70px;
    }
    
    .footer-content {
        gap: 25px;
    }
    
    .footer-section h4 {
        font-size: 1rem;
    }
    
    /* Scroll to Top */
    .scroll-top {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        bottom: 15px;
        right: 15px;
    }
}

/* ==========================================================================
   Tiny Devices (Very Small Phones, 400px and down)
   ========================================================================== */

@media screen and (max-width: 400px) {
    :root {
        --section-padding: 30px;
    }
    
    html {
        font-size: 13px;
    }
    
    .hero {
        min-height: 500px;
    }
    
    .hero-title {
        font-size: 2.1rem;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .philosophy-quote h3 {
        font-size: 1.25rem;
    }
    
    .cta-content h2 {
        font-size: 1.5rem;
    }
    
    /* CTA Buttons - Small mobile */
    .cta-content .btn-large {
        padding: 16px 28px;
        font-size: 0.938rem;
    }
    
    /* 極小画面では画像を少しコンパクトに */
    .hero-image-wrapper {
        max-width: 350px;
    }
    
    .founder-photo {
        aspect-ratio: 1 / 1;
    }
}

/* ==========================================================================
   Landscape Orientation (Mobile Devices)
   ========================================================================== */

@media screen and (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        height: auto;
        padding: 120px 0 80px;
    }
    
    .hero-title {
        font-size: 2.85rem;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    .hero-subtitle {
        font-size: 1.36rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-description .company-name-large {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    
    .hero-company-name {
        font-size: 1.4rem;
    }
    
    .scroll-indicator {
        display: none;
    }
    
    .hero-buttons {
        flex-direction: row;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .navbar,
    .menu-toggle,
    .scroll-top,
    .hero-buttons,
    .scroll-indicator,
    .cta-section,
    .contact-form-wrapper {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    .hero {
        height: auto;
        min-height: auto;
        padding: 40px 0;
        background: #fff;
    }
    
    .hero-title,
    .hero-subtitle,
    .hero-description {
        color: #000;
    }
    
    section {
        padding: 30px 0;
        page-break-inside: avoid;
    }
    
    .section-title {
        font-size: 18pt;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --primary-color: #0052a3;
        --text-gray: #333;
        --border-color: #666;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    .service-card,
    .pillar-card,
    .info-card {
        border: 2px solid var(--border-color);
    }
}

/* ==========================================================================
   Dark Mode Support (Future Enhancement)
   ========================================================================== */

/* ==========================================================================
   News Modal Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
    .news-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .news-modal-body {
        padding: 40px 30px;
    }
    
    .news-modal-title {
        font-size: 1.5rem;
    }
    
    .news-modal-text {
        font-size: 1rem;
    }
    
    .news-modal-close {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }
    
    /* Nakamura Services - Mobile */
    .nakamura-services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .service-number-icon {
        height: 50px;
    }
    
    .service-number {
        font-size: 2rem;
    }
    
    .service-content {
        padding: 10px 15px;
    }
    
    .nakamura-service-card h5 {
        font-size: 1.125rem;
    }
    
    .nakamura-service-card .service-subtitle {
        font-size: 0.75rem;
        margin-bottom: 4px;
    }
    
    .nakamura-service-card .service-price {
        font-size: 0.938rem;
        margin-bottom: 6px;
    }
    
    .nakamura-service-card .service-tagline {
        font-size: 0.813rem;
        margin-bottom: 5px;
    }
    
    .nakamura-service-card .service-desc {
        font-size: 0.75rem;
        line-height: 1.5;
        margin-bottom: 8px;
    }
    
    .nakamura-service-card .service-contact-btn {
        padding: 6px 18px;
        font-size: 0.75rem;
    }
    
    .services-contact-action {
        margin-top: 30px;
        padding-top: 30px;
    }
    
    .services-contact-action p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .services-main-contact-btn {
        padding: 14px 36px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 480px) {
    /* Hero - 小型スマホ用（iPhone SE等） */
    .hero-title {
        font-size: 2.85rem; /* 55px */
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    .hero-subtitle {
        font-size: 1.42rem; /* 23px */
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-description .company-name-large {
        font-size: 1.5rem; /* 16px - より読みやすく */
    }
    
    .hero-company-name {
        font-size: 1.5rem; /* 24px - より大きく */
    }
    
    /* Hero Buttons - Small mobile */
    .hero-buttons {
        gap: 12px;
    }
    
    .hero-buttons .btn {
        width: 50%; /* 1/2 width for small mobile */
        max-width: 50%;
        flex: 0 0 50%;
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    /* Contact */
    .contact-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .info-card {
        padding: 20px;
    }
    
    .info-card p {
        font-size: 1rem; /* 16px - 読みやすく */
    }
    
    /* Page Hero */
    .page-hero {
        min-height: 280px;
        padding-top: 85px;
    }
    
    .page-hero-content {
        padding: 15px;
    }
    
    .page-hero-content h1 {
        font-size: 2rem; /* 32px - より大きく */
    }
    
    .page-hero-content p {
        font-size: 1rem; /* 16px - 読みやすく */
    }
    
    .breadcrumb {
        font-size: 0.875rem;
        gap: 8px;
    }
    
    /* News Modal */
    .news-modal-body {
        padding: 30px 20px;
    }
    
    .news-modal-title {
        font-size: 1.25rem;
    }
    
    .news-modal-text {
        font-size: 0.938rem;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if needed */
}

/* ==========================================================================
   Desktop - Force buttons horizontal (993px and up) - HIGHEST PRIORITY
   ========================================================================== */

@media screen and (min-width: 993px) {
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 40px !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important; /* 高さを揃える */
    }
    
    .btn-hero-cta,
    .btn-hero-message {
        flex: 1 1 0 !important; /* 完全に均等配分 */
        width: 280px !important; /* 固定幅に統一 */
        max-width: 280px !important; /* 最大幅を制限 */
        min-width: 280px !important; /* 最小幅も統一 */
        height: 64px !important; /* 高さも統一 */
        padding: 18px 36px !important; /* パディングも統一 */
        font-size: 18px !important; /* フォントサイズも統一 */
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}