/* --- 基本スタイル（デスクトップファースト V3） --- */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
    font-size: 16px;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
}

/* ヘッダー */
.site-header {
    display: flex;
    align-items: center;
    padding: 25px 0;
    border-bottom: 2px solid #0000cc;
    margin-bottom: 25px;
}

.site-header .logo-image {
    max-height: 120px;
    width: auto;
    margin-right: 25px;
    flex-shrink: 0;
}

.site-header h1 {
    margin: 0;
    font-size: 2.4em;
    color: #0000cc;
    line-height: 1.3;
}

/* グローバルナビゲーション */
.global-nav {
    background-color: #99cccc;
    padding: 0; /* アイコンがぴったりくっつくのでパディング不要に */
    text-align: left;
    /* 横スクロールを考慮する場合 */
    overflow-x: auto; /* 画面幅が狭い時に横スクロール可能に */
    white-space: nowrap; /* アイコンが折り返さないように */
}

.global-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0; /* li間のわずかな隙間を消すため */
}

.global-nav li {
    display: inline-block;
    /* margin-right: 8px; を削除 */
    margin-right: 0; /* ★アイコン同士をピッタリくっつける */
}

/* li間の隙間を完全に消すための追加（古いブラウザ対策）*/
/* .global-nav li + li {
    margin-left: -4px;
} */

.global-nav a {
    display: inline-block;
    line-height: 0;
    transition: opacity 0.3s;
    border: 2px solid transparent;
}

.global-nav a:hover,
.global-nav a:focus {
    opacity: 0.8;
    outline: none;
    border-color: #0000cc;
}

.global-nav img {
    display: block;
    /* ★アイコンサイズをCSSで指定 */
    width: 180px;
    height: 45px;
}

/* メインコンテンツ */
.main-content {
    padding: 25px 0;
}

.main-content h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #0000cc;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    font-size: 1.8em;
}

/* 会社情報と地図のラッパー (デスクトップ) */
.company-info-wrapper {
    display: flex;
    gap: 40px;
}

.company-details {
    flex: 2;
}

.map-section {
    flex: 1;
    border-left: 1px solid #ccc;
    padding-left: 40px;
}

.map-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #666;
    font-size: 1.3em;
}

.map-image {
    border: 1px solid #ccc;
    width: 100%;
}

/* 会社情報詳細 (デスクトップ) */
.company-details dl {
    margin: 0;
}

.company-details dl div {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dotted #ccc;
}

.company-details dl div:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.company-details dt {
    font-weight: bold;
    color: #666;
    /* width: 120px; */ /* 幅を少し広げる必要あり */
    width: 140px; /* 文字サイズに合わせて調整 */
    flex-shrink: 0;
    /* margin-right: 20px; */ /* マージンも調整 */
    margin-right: 25px;
    text-align: left;
    padding-top: 0.1em;
    /* ★文字サイズを大きくする (例: 1.3em) */
    font-size: 1.3em; /* bodyのfont-size(16px)基準で 16 * 1.3 = 20.8px */
    line-height: 1.5; /* dt内の行間調整 */
}

.company-details dd {
    margin: 0;
    flex-grow: 1;
    /* ★文字サイズを大きくする (例: 1.3em) */
    font-size: 1.3em;
    line-height: 1.5; /* dd内の行間調整 */
}

/* フッター */
.site-footer {
    background-color: #333399;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

.site-footer p {
    margin: 0;
}

.site-footer small {
    font-size: 0.9em;
}

/* --- メディアクエリ (タブレットサイズ以下) --- */
@media (max-width: 1151px) {
    .container {
        max-width: 992px;
        padding: 0 20px;
    }

    /* ナビゲーション: 横スクロールを維持 */
    /* .global-nav { } */

    /* 会社情報と地図を縦積みに */
    .company-info-wrapper {
        display: block;
    }

    .company-details dt,
    .company-details dd {
        /* タブレットでも大きめの文字サイズを維持 */
        font-size: 1.2em; /* デスクトップより少しだけ小さく */
    }
     .company-details dt {
        width: 120px; /* タブレットでのラベル幅 */
        margin-right: 20px;
    }


    .map-section {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #ccc;
        padding-top: 30px;
        margin-top: 30px;
    }

    .map-image {
         max-width: 600px;
         margin: 0 auto;
    }
}

/* --- メディアクエリ (モバイルサイズ以下) --- */
@media (max-width: 767px) {
    body {
        font-size: 15px;
        line-height: 1.6;
    }
    .container {
        width: auto;
        padding: 0 15px;
    }

    /* ヘッダー: ロゴとタイトルを縦積み、中央揃え */
    .site-header {
        display: block;
        text-align: center;
        padding: 20px 0;
    }

    .site-header .logo-image {
        margin: 0 auto 15px;
        max-height: 80px;
    }

    .site-header h1 {
        font-size: 1.8em;
    }

    /* ナビゲーション: 縦積み中央揃えではなく、横スクロールを維持 */
    .global-nav {
        /* padding: 15px 0; */ /* 縦積みのためのパディング削除 */
        text-align: left; /* スクロールなので左揃えのまま */
    }

    .global-nav ul {
         /* font-size: 0; は維持 */
         /* text-align: center; を削除 */
    }

    .global-nav li {
        /* display: block; を削除 */
        display: inline-block; /* 横並びを維持 */
        /* margin: 0 auto 10px; を削除 */
        margin-right: 0; /* くっつける */
        width: auto; /* 画像サイズに依存 */
    }
     .global-nav img {
        /* width/height は基本スタイルで指定済み */
     }
     .global-nav a:focus {
         border-color: transparent;
     }

    /* メインコンテンツ */
    .main-content h2 {
        font-size: 1.6em;
        margin-bottom: 30px;
        padding-bottom: 10px;
    }

    /* 会社情報詳細: ラベルと内容を縦積みに */
    .company-details dl div {
        display: block;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .company-details dt,
    .company-details dd {
        /* モバイルでの文字サイズ調整 (少し大きく) */
        font-size: 1.1em; /* body(15px)基準で 16.5px 相当 */
        line-height: 1.6;
    }

    .company-details dt {
        width: auto;
        text-align: left;
        margin-right: 0;
        margin-bottom: 8px;
        padding-top: 0;
    }

     /* マップセクション */
    .map-section h3 {
        font-size: 1.2em;
    }
    .map-section {
        padding-top: 20px;
        margin-top: 25px;
    }
     .map-image {
         max-width: 100%;
         margin: 0 auto;
    }
}

/* 画面が非常に狭い場合の調整 (任意) */
@media (max-width: 480px) {
     body {
        font-size: 14px;
    }
    .container {
        padding: 0 10px;
    }
    .site-header h1 {
        font-size: 1.5em;
    }
    .site-header .logo-image {
        max-height: 60px;
    }
    /* .global-nav は横スクロールなので特に追加調整不要かも */
    .main-content h2 {
        font-size: 1.4em;
        margin-bottom: 20px;
    }
    .company-details dt,
    .company-details dd {
        font-size: 1.05em; /* さらに狭い画面用の微調整 */
    }

}


/* --- responsive_style_desktop_first_v3.css に追記 --- */

/* ===============================================
   業務内容ページ用スタイル (Business Page Styles)
   =============================================== */

/* 業務内容リスト (business-list) */
.business-description {
    margin-bottom: 40px; /* 実績セクションとのマージン */
}

.business-description h3 {
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.business-list {
    list-style: disc; /* 元の circle に近い disc を使用 */
    margin-left: 0;
    padding-left: 25px; /* リストマーカーのスペース */
}

.business-list li {
    margin-bottom: 12px; /* 項目間のマージン */
    font-size: 1.1em; /* 文字サイズ調整 */
    line-height: 1.6;
}

/* 制作実績セクション (works-section) */
.works-section h3 {
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.works-category {
    margin-bottom: 30px;
    border: 1px solid #ff9900; /* 元のテーブル枠線の色 */
    background-color: #fff; /* 内側の背景は白 */
}

.works-category h4 {
    margin: 0;
    padding: 10px 15px;
    background-color: #ffdead; /* 元のカテゴリヘッダーの色 */
    font-size: 1.2em;
    color: #a0522d; /* 少し濃いめの茶色 */
    border-bottom: 1px solid #ff9900; /* カテゴリヘッダー下の線 */
}

.works-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.works-item {
    display: flex; /* デスクトップでは横並び */
    align-items: baseline; /* ベースライン揃え */
    padding: 12px 15px; /* 項目のパディング */
    border-bottom: 1px dotted #ccc; /* 項目間の区切り線 */
}

.works-item:last-child {
    border-bottom: none; /* 最後の項目は線なし */
}

.works-name {
    flex: 1; /* 利用可能なスペースを取る */
    min-width: 250px; /* 最低幅確保 */
    padding-right: 15px; /* 説明との間のスペース */
    font-weight: bold;
}
.works-name a {
     text-decoration: none;
     color: #0000cc;
}
.works-name a:hover {
     text-decoration: underline;
}

.works-description {
    flex: 1.5; /* 説明部分の幅比率 */
    font-size: 0.9em; /* 元の size="-1" / size="2" に相当 */
    color: #555;
}


/* --- メディアクエリ内の追記 --- */

/* タブレットサイズ以下 */
@media (max-width: 991px) {
    .business-list li {
        font-size: 1.05em;
    }
    /* .works-item は横並びを維持しても良いか検討 */
}

/* モバイルサイズ以下 */
@media (max-width: 767px) {
    .business-list li {
        font-size: 1em;
        padding-left: 5px; /* モバイルではインデント少し減らす */
    }

    .works-item {
        display: block; /* モバイルでは縦積み */
        padding: 10px 12px;
    }

    .works-name {
        min-width: auto; /* 最低幅解除 */
        padding-right: 0;
        margin-bottom: 5px; /* 説明との間にマージン */
        display: block; /* ブロック要素にする */
    }

    .works-description {
        /* font-size は基本スタイルを継承 */
        display: block; /* ブロック要素にする */
        padding-left: 10px; /* 少しインデント */
    }

    .works-category h4 {
        font-size: 1.1em;
        padding: 8px 12px;
    }
}

/* 非常に狭い画面 */
@media (max-width: 480px) {
     .business-list {
         padding-left: 20px;
     }
}

/* --- ../responsive_style.css に追記 --- */

/* ===============================================
   トップページ用スタイル (Top Page Styles)
   =============================================== */

/* スライドショー (Hero Slider) */
.hero-slider {
    margin-bottom: 2px; /* 下のコンテンツとのマージン */
    position: relative; /* 画像を重ねるための基準 */
    overflow: hidden; /* はみ出した画像を隠す */
    /* 高さをある程度確保 (例: アスペクト比 16:9 や 3:1 などで調整) */
    /* padding-top: 33.33%; /* 横幅基準で高さを指定する場合 (例: 3:1) */
    /* または画像の高さに合わせて最低限の高さを指定 */
    min-height: 250px; /* 最低限の高さを確保 */
    background-color: #f0f0f0; /* 画像読み込み中の背景色 */
}

.hero-slider .slides {
    position: relative;
    width: 100%;
    /* ↓ スライド実装時に重要。ここでは単純表示 */
    /* display: flex; */
}

.hero-slider .slides img {
    display: block;
    width: 100%;
    height: auto; /* 高さは自動調整 */
    /* 複数の画像を重ねて最初の1枚だけ表示する場合 */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* フェード効果 */
}

.hero-slider .slides img:first-child {
    position: relative; /* 最初の画像は通常配置（高さ確保のため） */
    opacity: 1; /* 最初の画像を表示 */
}
/* JavaScriptで .active クラスなどを付与して表示を切り替える想定
.hero-slider .slides img.active {
    opacity: 1;
    z-index: 1;
}
*/


/* 理念セクション (Philosophy) */
.philosophy {
    padding: 4px 0; /* 上下のパディング */
    /* text-align: center; */ /* 中央揃えにする場合 */
}

.philosophy h2 {
    /* main h2 と同じスタイルを流用 or 個別に指定 */
    text-align: center;
    margin-bottom: 20px; /* 本文とのマージン */
    color: #0000cc; /* 他の見出しと合わせる */
    font-size: 1.8em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.philosophy p {
    font-size: 1.1em; /* 少し大きめの文字 */
    line-height: 1.2; /* 行間を広めにとる */
    margin-bottom: 1.2em; /* 段落間のマージン */
    text-align: justify; /* 両端揃え (オプション) */
    text-justify: inter-word; /* 両端揃えの調整 */
}
.philosophy p:last-child {
    margin-bottom: 0;
}

/* --- メディアクエリ内の追記 --- */

/* タブレットサイズ以下 */
@media (max-width: 991px) {
    .hero-slider {
        min-height: 200px;
    }
    .philosophy p {
        font-size: 1.05em;
    }
}

/* モバイルサイズ以下 */
@media (max-width: 767px) {
    .hero-slider {
        min-height: 150px;
        margin-bottom: 3px;
    }
    .philosophy h2 {
        font-size: 1.6em;
        margin-bottom: 2px;
        padding-bottom: 1px;
    }
    .philosophy p {
        font-size: 1em;
        line-height: 1.7;
        text-align: left; /* モバイルでは左揃えの方が読みやすい場合が多い */
    }
}