/* 全体のリセットと共通設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.7;
    background-color: #f9f9f9;
}
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding-left:20px;
    padding-right:20px;
}
h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.2em;
}
h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #0076df; /* アクセントカラー（青） */
}

/* ヘッダー（ロゴ画像エリア） */
header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 15px 0;
    text-align: center;
}
.logo-img {
    max-height: 50px; /* ロゴの高さ。画像の比率に合わせて自動調整されます */
    width: auto;
    max-width: 100%; /* スマホ画面からはみ出さない設定 */
    display: block;
    margin: 0 auto;
}

/* メインビジュアル（一枚絵の背景画像） */
.hero {
    /* 背景画像の設定。'img/hero.jpg' など、ご自身の画像パスに変更してください */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('img/hero_img.jpg');
    background-size: cover;           /* 枠全体に画像をフィットさせる */
    background-position: center;      /* 画像の中心を基準に配置 */
    background-repeat: no-repeat;     /* 画像の繰り返しを禁止 */
    color: #fff;
    text-align: center;
    padding: 140px 20px;              /* 縦の余白を少し広げて写真を広く見せる */
}
.hero h1 {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* 文字に薄い影をつけて視認性をアップ */
}

/* セクション共通 */
section {
    padding: 80px 0;
}
.bg-white {
    background-color: #ffffff;
}

/* 事業内容（3カラム） */
.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
/* カード全体をリンク用のスタイルに修正 */
.service-card {
    display: block;      /* ブロック要素にして全体をクリック可能に */
    text-decoration: none; /* リンクの下線を消す */
    color: inherit;       /* 文字色を標準の色（#333）に合わせる */
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;      /* マウスを乗せたときに指マークにする */
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* ホバー時に影を強くして浮かび上がらせる */
}
.service-img {
    width: 100%;
    height: auto;          /* 縦幅を固定ではなく自動（可変）にする */
    aspect-ratio: 4 / 3;   /* 写真の比率を「横4：縦3」に完全に固定する */
    object-fit: cover;     /* 比率を守りつつ、枠内に綺麗に収める（トリミング） */
    background-color: #ddd;
    display: block; /* 画像の下にできる謎の微小な隙間を解消 */
}
.service-content {
    padding: 20px;
}
.service-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
    font-weight: bold;
    color: #111; /* タイトルを引き締める濃い色に */
}
.service-text {
    font-size: 0.95rem;
    color: #666;
}

/* 会社情報（テーブル） */
.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: #ffffff;
}
.company-table th, .company-table td {
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.company-table th {
    width: 30%;
    font-weight: bold;
    color: #111;
}
.company-table td {
    color: #444;
}

/* フッター */
footer {
    background-color: #111;
    color: #fff;
    text-align: center;
    padding: 30px 20px;
    font-size: 0.85rem;
}

/* スマートフォン向けレスポンシブ対応 */
@media (max-width: 768px) {
    .logo-img {
        max-height: 40px;
    }
    /* スマホでのメインビジュアル調整 */
    .hero {
        padding: 100px 20px; /* スマホでは高さを少し抑える */
    }
    .hero h1 {
        font-size: 1.8rem;   /* スマホ画面に合わせて文字を少し小さく */
    }
    h2 {
        font-size: 1.5rem;   /* スマホ画面に合わせて文字を少し小さく */
    }
    .services {
        grid-template-columns: 1fr; /* 縦に1列並べる */
        gap: 15px;
    }
    .service-card {
        display: flex; /* 横並び（左に写真、右に文字）にする */
        align-items: stretch;
    }
    .service-img {
        width: 35%;  /* 写真の横幅を全体の35%に抑える（大きくなりすぎない） */
        height: auto;
        aspect-ratio: 1 / 1; /* 写真を綺麗な正方形にしてスッキリ見せる */
    }
    .service-content {
        width: 65%;  /* 文字エリアの横幅 */
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 文字を上下中央に配置 */
    }
    /* 会社情報テーブルのスマホ対応 */
    .service-title {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    .service-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    .company-table th, .company-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .company-table th {
        border-bottom: none;
        padding-top: 15px;
    }
    .company-table tr:last-child td {
        border-bottom: none;
    }
}