/* 全体の余白とパディングをリセット */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #fff;
}

/* 社名、住所、電話番号のスタイル */
.company-name {
    text-align: left; /* 上部の社名は左揃え */
    padding: 10px 20px;
    background-color: transparent;
    color: #333;
}

#company-info {
    text-align: center; /* 下部の社名と住所、電話番号は中央揃え */
    padding: 10px 20px;
    background-color: transparent;
    color: #333;
}

.company-name .small-text,
#company-info .small-text {
    font-size: 20px; /* 合同会社のフォントサイズ */
}

.company-name .large-text,
#company-info .large-text {
    font-size: 23px; /* ウッドラックのフォントサイズ */
}

#company-info p {
    margin: 5px 0; /* 段落の間に少し余白を追加 */
    font-size: 10px; /* 住所と電話番号のフォントサイズ */
}

/* パンくずリストのスタイル */
.breadcrumb {
    text-align: left; /* 左寄せ */
    padding: 0 20px; /* 社名と揃える */
    background-color: #f0f0f0; /* 背景をグレーに設定 */
    margin-bottom: 20px; /* 下部に余白を追加 */
    border-radius: 5px; /* 角を少し丸める */
}

.breadcrumb a {
    color: #333; /* リンクの色を設定 */
    text-decoration: none; /* リンクの下線を削除 */
    font-size: 14px; /* フォントサイズを設定 */
}

.breadcrumb a:hover {
    text-decoration: underline; /* ホバー時に下線を追加 */
}

.breadcrumb span {
    font-size: 14px; /* 最後のテキストのフォントサイズ */
    color: #555; /* 最後のテキストの色を設定 */
}

/* ヘッダーのスタイル */
header {
    text-align: center;
    padding: 20px 0;
}

header h1 {
    font-size: 24px;
    margin: 0;
}

/* メイン画像セクションのスタイル */
#main-image {
    text-align: center;
    margin: 20px 0;
}

#main-image img {
    max-width: 80%; /* 画像の最大幅を設定 */
    height: auto;
}

/* サービスリストセクションのスタイル */
#service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列グリッド */
    gap: 10px; /* 各アイテム間のギャップを調整 */
    max-width: 60%;
    margin: 20px auto;
}

.service-item {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    background-color: #f9f9f9;
}

/* 動画セクションのスタイル */
#video-section {
    display: flex;
    justify-content: center; /* 動画を中央に配置 */
    margin: 20px 0; /* 上下に適度な余白を追加 */
    padding: 0;
    overflow: hidden;
}

#video-section video {
    width: 100%; /* 動画の幅を親要素の幅に合わせる */
    height: auto;
    max-height: 200px; /* 縦のサイズを適切に調整 */
    object-fit: cover; /* アスペクト比を維持しつつ、コンテナ全体にフィット */
}

/* サイトマップリンクのスタイル */
.sitemap {
    text-align: center;
    margin-top: 20px; /* フッター内の他の要素と区別するためのマージン */
}

.sitemap ul {
    list-style: none; /* リストのマーカーを削除 */
    padding: 0;
    margin: 0;
}

.sitemap ul li {
    display: inline; /* リストを横並びに表示 */
    margin: 0 10px; /* 各リンク間に適度なスペースを追加 */
}

.sitemap ul li a {
    text-decoration: none; /* 下線を削除 */
    color: #333; /* リンクの色を設定 */
    font-size: 14px; /* リンクのフォントサイズを設定 */
}

.sitemap ul li a:hover {
    text-decoration: underline; /* ホバー時に下線を追加 */
}

/* フッターのスタイル */
footer {
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
}