/* レスポンシブデザイン対応 */

/* タブレット対応 (768px以下) */
@media screen and (max-width: 768px) {
    .header_siteTitle {
        display: none !important;
    }
    
    /* ヘッダー */

    .header {
        transition: none !important;
    }

    /* モバイルではヘッダーバー用ロゴを最初から表示 */
    .logoimg2 {
        display: block;
    }

    .header_navList {
        display: none;
    }
    
    .sp-menu {
        display: block;
        position: fixed;
        top: 15px;   /* 少し上に配置 */
        right: 20px;
        z-index: 300;
    }
    
    .sp-menu__check {
        display: none;
    }
    
    .sp-menu__box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        background: rgba(255, 235, 59, 0.9);
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        font-size: 1.4rem;
        color: #4C4948;
    }
    
    .sp-menu__box::after {
        content: '☰';
        font-size: 1.4rem;
        color: #4C4948;
    }
    
    .sp-menu__box span {
        display: none;
    }
    
    .sp-menu__box span::before,
    .sp-menu__box span::after {
        display: none;
    }
    
    /* メニューオープン時 */
    .sp-menu__check:checked ~ .sp-menu__box {
        background: rgba(255, 235, 59, 0.95);
    }
    
    .sp-menu__check:checked ~ .sp-menu__box::after {
        content: '✕';
        color: #CECE00;
        font-size: 2rem;
    }
    
    /* スマートフォンメニュー内容（背景グラデーション） */
    .sp-menu__content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(135deg, #2C5F7F 0%, #1a4a66 100%);
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
        transition: all 0.3s ease;
        z-index: 250;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sp-menu__check:checked ~ .sp-menu__content {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    /* メニュー右上のクローズボタン */
    .sp-menu__close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.25);
        cursor: pointer;
        z-index: 260;
        transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    }

    .sp-menu__close:hover,
    .sp-menu__close:active {
        background: rgba(0, 0, 0, 0.45);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        transform: scale(1.03);
    }
    
    .sp-menu__list {
        list-style: none;
        text-align: center;
    }
    
    .sp-menu__item {
        margin: 0.5rem 0;
    }
    
    .sp-menu__link {
           display: flex;
           color: #2C2C2C;
           text-decoration: none;
           font-size: 0.8rem;           /* さらに小さく */
           padding: 0.7rem 1rem;         /* 余白もさらにコンパクトに */
           border-radius: 12px;
           transition: all 0.25s ease;
           background: rgba(255, 255, 255, 0.88);
           backdrop-filter: blur(8px);
           min-height: 0;
           align-items: center;
           justify-content: flex-start;
           font-weight: 600;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
           border: 1px solid rgba(0, 0, 0, 0.04);
    }

    /* 英字ラベル（nav-script）をやや小さめに */
    .sp-menu__link .nav-script {
        font-size: 1.0rem;
        margin-right: 0.4rem;
    }
    
    .sp-menu__link:hover,
    .sp-menu__link:active {
        background: rgba(255, 235, 59, 0.9);
        color: #4C4948;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }
    
    /* メインビジュアル */
    .imgArea {
        height: 100vh;      /* 高さをちょうど1画面分に固定 */
        overflow: hidden;   /* それ以上ははみ出さない */
    }
    
    .over {
            font-size: 1.4rem;
            padding: 0.5rem;
            white-space: normal;     /* 横はみ出し防止 */
            max-width: 100%;
            display: inline-block;   /* 全体は中央寄せのまま */
            text-align: center;
            overflow-wrap: break-word;
    }
    .over .hero-line1 {
        display: block;               /* 1行目だけ少し左にシフト */
        margin-left: -6vw;
    }
    .over .hero-word-future {
        margin-left: 6vw;             /* 2行目（FUTURE〜）を少し右にシフト */
    }
    .over span:nth-child(1),
    .over span:nth-child(2),
    .over span:nth-child(3) {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    .over span:nth-child(5) {
        font-size: 1.1rem;
        margin-top: -0.4rem;   /* power of the ZEST を少し上に詰める */
        display: inline-block;
    }
    
    /* セクション */
    .section01, .section02, .padjigyou {
        width: 90%;
        padding: 60px 0px;
    }
    
    .heading-06 {
        font-size: 2rem;
    }
    
    .heading-06::before {
        left: 5.25rem !important;
        font-size: 1.2rem !important;
    }
    .heading-06::before {
        top: -10px !important;
    }
    .section-bullet::before {
        height: 3.5rem !important;
        top: -65% !important;
        left: -15% !important;
    }
    .heading-07 {
        font-size: 1.75rem;
    }
    .heading-07::before {
        font-size: 13px;
        left: 55%;
    }
    .heading-08 {
        font-size: 1.75rem;
    }
    .heading-08::before {
        left: 42.5% !important;
        font-size: 12px;
    }
    .heading-09 {
        font-size: 1.75rem;
    }
    .heading-09::before {
        font-size: 15px;
    }
    .heading-10 {
        font-size: 1.75rem;
    }
    .heading-10::before {
        font-size: 15px;
    }

    /* プライバシーポリシーの英語ラベル（PRIVACY POLICY）はモバイルでも1行に */
    #privacy-modal-title::before {
        white-space: nowrap;
    }
    
    /* About Us */
    .about-hero {
        padding: 48px 0px;
    }

    /* モバイル時 About Usタイトル小さく */
    .about-main-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    .about-main-title-line2 {
        font-size: 1.8rem !important;
    }
    .about-main-subtitle {
        font-size: 0.9rem !important;
    }

    /* モバイルでは感謝の心カードをすぐ表示 */
    .about-philosophy {
        opacity: 1;                    /* 最初から表示 */
        transform: translateY(0);      /* 下からのずれをなくす */
        transition: none;              /* 過度な遅延をなくす */
    }

    /* 写真位置はそのまま、カード(テキスト部分)だけ少し下げる */
    .philosophy-card {
        margin-top: 5vw;               /* 1個目の基準位置 */
        padding-top: 9rem;             /* 1個目のテキスト位置 */
    }

    /* 2個目・3個目のカード全体をさらに下げる */
    .philosophy-card--challenge,
    .philosophy-card--creativity {
        margin-top: 9vw;               /* 1個目より少し下に */
    }
    
    .philosophy-card h3 {
        font-size: 1.2rem;
    }
    .philosophy-card p {
        font-size: 0.82rem;
    }

    /* 「未来への扉を開く鍵、」「それがZEST」で2行に */
    .about-main-title-line2 {
        display: block;      /* モバイル時のみ2行目にする */
        margin-top: 0.3rem;
    }

    .about-main-subtitle-line2 {
        display: block;      /* モバイル時のみ2行目にする */
        margin-top: 0.3rem;
    }

    .aboutbox h2 {
        font-size: 1.5rem;
    }
    
    .aboutbox p {
        font-size: 1rem;
    }
    
    /* 事業紹介 */
    .servicebox {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* 事業紹介カード：モバイル時はすべて縦並びに */
    .servicebox > div {
        grid-column: auto !important;
    }

    /* CyACの特徴カード：モバイル時は1列に */
    .cyac-features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    
    .gradation {
        font-size: 1.5rem;
    }

    /* アクセス - モバイルでは地図を非表示 */
    .business-access-map {
        display: none;
    }
    
    /* 企業情報 */
    .company_info {
        font-size: 0.9rem;
    }
    
    .company_info td {
        padding: 1rem;
        display: block;
        width: 100% !important;
        border-right: none !important;
    }
    
    .company_label {
        font-weight: bold;
        border-bottom: 1px solid #CECE00 !important;
    }
    
    .company_value {
        border-bottom: 2px solid #eee !important;
        margin-bottom: 1rem;
    }

    /* section03（企業情報）の横幅をモバイルでは横いっぱいに */
    .business-info-section .companybox {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }

    .business-info-section .company-info-list {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .company-info-list {
        padding: 2.2rem 0.5rem 2rem 0.5rem;
    }

    /* 企業情報イントロ文の文字をモバイルでは少し小さく */
    .company-intro h2 {
        font-size: 1.5rem;
    }

    .company-intro p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* アクセス情報イントロ文もモバイルでは少し小さく（企業情報と同様） */
    .access-intro h2 {
        font-size: 1.5rem;
    }

    .access-intro p {
        font-size: 1.0rem;
    }

    /* アクセス情報イントロ文を2行に（2文目を改行） */
    .access-intro-line2 {
        display: block;
        margin-top: 0.3rem;
    }

    /* 企業情報イントロ文の本文をモバイルでは1行に（改行タグを無効化） */
    .company-intro p br {
        display: none;
    }

    /* 物流ページヒーロー文の本文もモバイルでは1行に（改行タグを無効化） */
    .logistics-hero p br {
        display: none;
    }

    /* 「信頼されるビジネス／パートナーとして」を2行に */
    .company-intro-line2 {
        display: block;
        margin-top: 0.3rem;
    }

    /* お問い合わせ文言「経験豊富なスタッフ〜」を2行目に */
    .contact-intro-line2 {
        display: block;
        margin-top: 0.3rem;
    }

    /* 物流ページ見出し「安心・確実・スピーディーに、／そして何より安全に」を2行に */
    .logistics-hero-line2 {
        display: block;
        margin-top: 0.3rem;
    }

    /* 企業情報セクションをモバイルでは横いっぱいに */
    .business-info-section {
        border-radius: 0;
    }

    .business-info-section .business-container {
        padding: 4rem 1rem;
    }

    .business-info-section .business-company-container {
        margin: 0;
    }

    .business-info-section .company-info-list {
        margin-left: 0;
        margin-right: 0;
    }

    .business-container {
        padding: 4rem 1rem;
    }

    /* 企業情報テーブル（モバイル調整） */
    .company-info-value-cell {
        font-size: 0.95rem;
    }
    /* 社名・資本金・従業員数のみ左側に大きめの余白を付与 */
    .business-info-section .company-info-list .company-info-item:nth-child(1) .company-info-value-cell,
    .business-info-section .company-info-list .company-info-item:nth-child(3) .company-info-value-cell,
    .business-info-section .company-info-list .company-info-item:nth-child(4) .company-info-value-cell {
        padding-left: 15vw;
    }
    .business-info-section .company-info-list .company-info-item:nth-child(5) .company-info-value-cell,
    .business-info-section .company-info-list .company-info-item:nth-child(2) .company-info-value-cell,
    .business-info-section .company-info-list .company-info-item:nth-child(6) .company-info-value-cell {
        padding-left: 2.5vw;        
    }
    .company-info-value1 {
        font-size: 0.85rem;
    } 
    
    /* フッター */
    .footer_contents {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* フッター：モバイル時は2カラムの横幅をそろえる */
    .business-footer-container {
        width: 95%;
        max-width: 95%;
    }

    .footer_access,
    .footer_access2 {
        margin: 0;
    }

    .sitemap-column {
        padding-left: 2.5rem;
    }

    .footer-contact,
    .footer-group {
        width: 75%;
        margin: auto;
    }

    .business-sitemap h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    /* サイトマップ：1列目を1行で、その下に2列目・3列目を横並びに */
    .sitemap-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .sitemap-column:nth-child(1) {
        grid-column: 1 / -1;  /* 1列目だけ横幅いっぱいに */
    }
    
    /* ページトップボタン */
    #page_top {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }

    /* 「理想の姿」カード（.ideal-item）のモバイル調整 */
    .ideal-list {
        justify-items: stretch;
    }

    .ideal-item {
        min-width: 0;
        width: 100%;
        margin: 0 auto 1.5rem;
        padding-left: 0.5rem;
        box-sizing: border-box;
    }
    .ideal-item span {
        padding-left: 0.5rem;
        font-size: 0.9rem;
    }
    .ideal-item i {
        margin: 0.5rem 0;
    }

    .ideal-title {
        font-size: 1.4rem;
    }
    .ideal-conclusion {
        font-size: 0.9rem;
    }

    .ideal-conclusion-line2 {
        display: block;
        margin-top: 0.3rem;
    }

    .service-content {
        padding: 2.5rem 0.8rem;
    }

    .service-subtitle-line2 {
        display: block;
        margin-top: 0.3rem;
    }

    .service-description p br {
        display: none;
    }

    /* 事業紹介の feature-item をモバイルでは3つ横一列に */
    .service-features {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .service-description p {
        font-size: 0.9rem;
    }

    .feature-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.6rem;
    }

    
    /* 物流ページ：モバイル時は BLUE CEILING の文字を少し大きく */
    .logistics-hero #makeImg span:nth-child(2),
    .logistics-hero #makeImg span:nth-child(3) {
        font-size: 1.5rem;
    }

    /* 物流ページ：モバイル時は「安心・確実・スピーディー、そして何より安全に」を少し小さく */
    .logistics-hero h2 {
        font-size: 1.1rem;
    }
    .feature-item span {
        font-size: 0.8rem;
    }

    /* 物流事業部ヒーローの高さをモバイル時に少し広げる */
    .logistics-sky-image {
        height: 50vh;
        max-height: 50vh;
        margin-bottom: 3rem;
    }

    /* 物流ページ：モバイル時はブランドロゴを少し大きく */
    .logistics-summary-card .logistics-brand-logo {
        width: 60%;
    }
    .logistics-summary-card p br {
        display: none;
    }

    /* 物流ページ：モバイル時のトラック画像（truck_zest.png）の大きさと位置を調整 */
    .logistics-truck-image {
        width: 60vw;   /* 少し大きめに */
        top: 15rem;     /* テキストの少し下に */
        right: 0.5rem;   /* 画面内に寄せる */
    }

    .logistics-truck1-image {
        width: 70vw;   /* 少し大きめに */
        top: -157vh;     /* テキストの少し下に */
        left: 30vw;
    }

    .logistics-service-card {
        padding: 2rem 0.5rem;
    }
    
    .logistics-strengths {
        padding: 3rem 0.5rem;
        margin-top: 0;
    }

    /* お問い合わせイントロ文もモバイルでは少し小さく */
    .contact-intro h2 {
        font-size: 1.3rem;
    }
    .contact-intro p {
        font-size: 1.0rem;
    }
    .contact-intro-line2 {
        display: block;
        margin-top: 0.3rem;
    }

    .president-message p{
        font-size: 0.9rem;
    }
    
    .outsourcing-container {
        padding: 0;
    }
    
    .outsourcing-hero h2 {
        font-size: 1.1rem;
    }
    .outsourcing-hero p {
        font-size: 0.9rem;
    }
    .outsourcing-summary-card {
        padding: 0.85rem;
    }
    .outsourcing-summary-card h3 {
        font-size: 1.4rem
    }
    .outsourcing-service-card h4 {
        font-size: 1.2rem;
    }
    .outsourcing-summary-card p,
    .outsourcing-service-card p {
        font-size: 0.9rem;
    }
    .font-a {
        font-size: 1.2rem !important;
    }
    .font-a1 {
        font-size: 1.0rem !important;
    }
    .line3 {
        font-size: 0.9rem !important;
    }
    .line3 br {
        display: none;
    }
    .line4 {
        font-size: 0.85rem !important;
    }
    .padding-change { 
        padding: 1.3rem !important;
    }
    .padding-change1 { 
        padding: 0.5rem !important;
    }
    .disclosure-line2,
    .achievements-line2,
    .features-line2 {
        display: block;
        margin-top: 0.3rem;
    }
    .width-change {
        width: 60% !important;
    } 
}

/* スマートフォン対応 (480px以下) */
@media screen and (max-width: 480px) {
    
    /* ヘッダータイトル */
    .line1 {
        font-size: 1.5rem;
    }
    
    .line2 {
        font-size: 1rem;
    }
    
    /* メインビジュアル */
    .over {
        font-size: 1.6rem;
        line-height: 1.35;
        white-space: normal;      /* 横はみ出し防止 */
        max-width: 100%;
        width: 100%;             /* 行揃えを画面幅いっぱいに効かせる */
        display: block;
        text-align: right;        /* 2行目以降は右寄せ */
        overflow-wrap: break-word;
    }

    /* 物流ページの "beyond the BLUE CEILING" はモバイルでも中央寄せに */
    .logistics-hero #makeImg,
    .logistics-hero .over {
        text-align: center;
    }
    .over .hero-line1 {
        display: block;           /* スマホ小サイズでも1行目だけ左寄せ */
        text-align: left;
        padding-left: 8vw;
    }
        .over .hero-line1 {
            display: block;           /* 1行目だけ少し左にシフト */
            margin-left: -8vw;
        }
        .over .hero-word-future {
            margin-left: 8vw;         /* 2行目（FUTURE〜）を少し右にシフト */
        }
    .over span:nth-child(1),
    .over span:nth-child(2),
    .over span:nth-child(3) {
        font-size: 1.6rem;
        line-height: 1.3;
    }
    .over span:nth-child(5) {
        font-size: 1.2rem;
        margin-top: -1.2rem;   /* 480px以下でも同様に少し上に詰める */
        display: inline-block;
    }
    
    /* セクション */
    .heading-06 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    .business-container {
        padding: 4rem 5px;
    }
    
    /* About Us */
    .aboutbox {
        padding: 0 1rem;
    }
    
    .aboutbox h2 {
        font-size: 1.3rem;
        line-height: 1.4;
    }
    
    .aboutbox h3 {
        font-size: 1.2rem;
    }
    
    .aboutbox p {

    /* 「それが ZEST」で ZEST を改行 */
    .about-main-title .zest-highlight {
        display: block;      /* それが の次で改行して ZEST を1行に */
        margin-top: 0.3rem;
    }
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    /* 事業紹介 */
    .box3, .box4, .box5 {
        padding: 1.5rem;
    }
    
    .gradation {
        font-size: 1.3rem;
        line-height: 1.4;
    }
    
    .bumon h3 {
        font-size: 1.1rem;
    }
    
    .bumon p {
        font-size: 0.9rem;
    }
    
    /* 企業情報 */
    .company_info {
        font-size: 0.8rem;
    }
    
    .company_info td {
        padding: 0.8rem;
    }
    
    /* お問い合わせ */
    .contact_btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    .contact_tel {
        font-size: 1.2rem;
    }
    
    /* アクセス */
    .access1 {
        padding: 1.5rem;
    }
    
    .access_tel {
        font-size: 1rem;
    }
    
    /* ニュース */
    .newstext h1 {
        font-size: 2rem;
    }
    
    .newstext p {
        font-size: 1rem;
    }
    
    /* フッター */
    .business-footer-container {
        width: 95%;
        max-width: 95%;
    }
    .footer_access {
        margin: 0;
    }

    .footer_access h1 {
        font-size: 1.5rem;
    }
    
    .footer_access h2 {
        font-size: 1.1rem;
    }
    
    .footer_tel {
        font-size: 1rem;
    }
}

/* 横向きスマートフォン対応 */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .imgArea {
        height: 100vh;
    }
    
    .over {
        font-size: 2.5rem;
    }
    
    .sp-menu__content {
        padding: 2rem;
    }
    
    .sp-menu__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 600px;
    }
}

/* アニメーション無効化（動作軽量化） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 印刷対応 */
@media print {
    .header, .sp-menu, #page_top, .scrolldown1 {
        display: none !important;
    }
    
    .imgArea {
        height: auto;
        background: none;
        color: #000;
    }
    
    .over {
        color: #000;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .section01, .section02, .padjigyou {
        padding: 20pt 0;
        break-inside: avoid;
    }
    
    .heading-06 {
        color: #000 !important;
        font-size: 18pt;
    }
    
    .box3, .box4, .box5 {
        box-shadow: none;
        border: 1pt solid #ccc;
        break-inside: avoid;
    }
    
    footer {
        background: none;
        color: #000;
    }
    
    .waves {
        display: none;
    }
}