@charset "UTF-8";

/* =========================================
   Reset & Base
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* =========================================
   Header
========================================= */
.header {
    width: 100%;
    background-color: #fff;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ロゴ */
.logo {
    width: 250px; /* ロゴのサイズ調整用 */
}

/* 連絡先エリア */
.header-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tel-number {
    font-size: 32px;
    font-weight: 900;
    color: #000;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
    font-family: "Arial Black", Arial, sans-serif;
}

.btn-contact {
    display: inline-block;
    background-color: #006837; /* 緑色 */
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 60px;
    text-align: center;
    transition: opacity 0.3s;
}

.btn-contact:hover {
    opacity: 0.8;
}

/* =========================================
   Navigation
========================================= */
.global-nav {
    background-color: #4a2e1b; /* 茶色 */
    width: 100%;
}

.global-nav ul {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    list-style: none;
}

.global-nav li {
    flex: 1;
    text-align: center;
}

.global-nav a {
    display: block;
    color: #fff;
    padding: 15px 10px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.global-nav a:hover {
    background-color: #6d462a;
}

/* =========================================
   Main Visual
========================================= */
.main-visual {
    width: 100%;
}

.main-visual img {
    width: 100%;
    display: block;
}

/* =========================================
   Footer (SEO用エリア)
========================================= */
.footer {
    background-color: #f5f5f5;
    padding: 40px 20px;
    margin-top: 50px;
}

.seo-keywords-area {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 12px; 
    color: #666;
}

.seo-keywords-area h3 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.seo-keywords-area p {
    line-height: 1.8;
}
/* =========================================
   About Intro (動画セクション)
========================================= */
.about-intro {
    padding: 60px 0 0 0; /* 上に余白、下は動画が続くので0 */
    text-align: center;
}

.about-title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 0 20px;
}

.bear-icon {
    width: 80px; 
    height: auto;
}

.about-title {
    font-size: 32px;
    color: #4a2912; 
    font-weight: 900;
}

.about-subtitle {
    font-size: 18px;
    margin-bottom: 40px;
    padding: 0 20px;
}

/* 動画プレースホルダー */
.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 800px; 
    background-color: #c0c0c0; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-wrapper p {
    color: #666;
    font-size: 24px;
    font-weight: bold;
}

/* 後から追加する動画用） */
.video-wrapper video,
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* =========================================
   Message Section (メッセージエリア)
========================================= */
.message-section {
    text-align: center;
    padding: 60px 20px;
}

.message-heading {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 30px;
    color: #000;
}

.message-text {
    font-size: 16px;
    line-height: 2; /* 行間を広めにとって読みやすく */
    margin-bottom: 25px;
}

.message-text strong {
    font-size: 18px; /* 強調部分は少し大きく */
    display: inline-block;
    margin: 10px 0;
}

/* =========================================
   Service & Price Section Title (木目背景見出し)
========================================= */
.service-price-section {
    width: 100%;
}

.section-title-bg {
    /* 背景画像の設定 */
    background-image: url('image/文字の背景.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 40px 20px; /* 上下の余白で帯の太さを調整 */
}

.section-title {
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 文字を読みやすくするために少し影をつけています */
}

/* =========================================
   Service List Section (対応業務リスト)
========================================= */
.service-list-section {
    padding: 60px 20px;
    background-color: #fff;
}

.service-list-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* 全体を中央寄せ */
}

.service-list-heading {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 50px;
    color: #000;
}

/* リスト全体の枠組み（中身は左揃えにしつつ、ブロックごと中央に配置） */
.service-items {
    list-style: none;
    padding: 0;
    margin: 0 auto 40px auto;
    display: inline-block;
    text-align: left; 
}

/* 各リスト項目 */
.service-items li {
    display: flex;
    align-items: center; /* アイコンとテキストを縦の中央で揃える */
    margin-bottom: 35px;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

.service-items li:last-child {
    margin-bottom: 0;
}

/* アイコンのスタイル */
.service-icon {
    width: 45px; /* デザインに合わせてアイコンの大きさを調整 */
    height: auto;
    margin-right: 25px; /* アイコンとテキストの間の余白 */
    object-fit: contain;
}

.service-text {
    line-height: 1.6;
}

/* 補足メッセージエリア */
.service-notice {
    display: inline-block;
    text-align: left;
    font-size: 16px;
    line-height: 1.8;
    margin-top: 20px;
    font-weight: 500;
}

.service-notice p {
    margin-bottom: 20px;
}

.service-notice p:last-child {
    margin-bottom: 0;
}

/* =========================================
   Works Section (実績紹介・ビフォーアフター)
========================================= */
.works-section {
    padding: 60px 20px;
    background-color: #fff;
}

.works-inner {
    max-width: 1000px; /* 画像が大きくなりすぎないよう最大幅を設定 */
    margin: 0 auto;
}

.works-title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.works-title {
    font-size: 28px;
    color: #000;
    font-weight: 900;
}

/* 2列のグリッドレイアウト */
.works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 均等な2列 */
    gap: 30px; /* 画像同士の隙間 */
}

.works-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.works-caption {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: left;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    /* スマホ画面では画像を1列（縦並び）にする */
    .works-grid {
        grid-template-columns: 1fr; 
    }
    
    .works-title {
        font-size: 20px;
    }
    
    .works-title-wrap {
        flex-direction: column; /* キャラクターとタイトルを縦並びに */
        text-align: center;
    }
}

/* =========================================
   Service Detail Button (サービス詳細ボタン)
========================================= */
.service-detail-btn-wrap {
    text-align: center;
    padding: 20px 20px 80px 20px; /* 下にしっかり余白を取る */
}

.btn-service-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b1e08; /* デザインに合わせたこげ茶色 */
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 18px 60px;
    position: relative;
    /* 右下の黒い影（ズレたようなデザイン）をbox-shadowで再現 */
    box-shadow: 6px 6px 0px #0e0500; 
    transition: all 0.2s ease;
}

.btn-service-detail .arrow {
    margin-left: 30px; /* 矢印との間隔 */
    font-family: Arial, sans-serif; /* 矢印を綺麗に表示 */
}

/* マウスホバー時の動き（ボタンが少し押し込まれるように） */
.btn-service-detail:hover {
    transform: translate(3px, 3px); /* 右下に少し移動 */
    box-shadow: 3px 3px 0px #0e0500; /* 影を小さくして押し込んだ感を出す */
    color: #fff;
}

/* =========================================
   Price Estimate Section (料金の目安)
========================================= */
.price-estimate-section {
    text-align: center;
    padding: 0 20px 60px;
}

.price-title {
    font-size: 32px;
    color: #2b1f1a; /* 少し紫がかったような濃い茶色/黒 */
    font-weight: 900;
    margin-bottom: 25px;
}

.price-text {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    line-height: 1.8; /* 行間を広めに */
}

/* =========================================
   Responsive (スマートフォン用調整追加)
========================================= */
@media screen and (max-width: 768px) {
    .btn-service-detail {
        font-size: 16px;
        padding: 15px 30px;
        width: 100%; /* スマホでは横幅いっぱいに近くする */
        max-width: 300px;
    }
    
    .price-title {
        font-size: 26px;
    }
    
    .price-text {
        font-size: 16px;
    }
}

/* =========================================
   Price Table (料金表)
========================================= */
.price-table {
    max-width: 800px;
    margin: 0 auto 50px auto;

}

.price-row {
    display: flex;
    border-bottom: 3px solid #1a1b41; 
}


/* 左側の見出し列 */
.price-head {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #000;
    padding: 20px 10px;
    text-align: center;
}

/* 右側の内容列 */
.price-body {
    width: 75%;
    display: flex;
    flex-direction: column;
}

/* 右側の中の各行 */
.price-sub-row {
    padding: 20px 0;
    border-bottom: 1px solid #7c83a1; /* 細い青灰色の線 */
    display: flex;
    align-items: center;
}

.price-sub-row:last-child {
    border-bottom: none;
}

/* 1カラムで表示する部分 */
.price-full-col {
    width: 100%;
    text-align: left;
    padding-left: 20px;
    font-weight: bold;
}

.price-full-col.text-center {
    text-align: center;
    padding-left: 0;
}

/* 左右2カラムに分ける部分 */
.price-flex-col {
    width: 100%;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
    text-align: left;
    line-height: 1.6;
}

.price-flex-col.align-center {
    align-items: center; /* 縦の中央で揃える */
}

.col-left {
    width: 50%;
}

.col-right {
    width: 50%;
}

.price-text-main {
    font-size: 18px;
}

.price-note {
    font-size: 14px;
    margin-top: 5px;
}

/* =========================================
   Button Group (料金ボタン・お問い合わせボタン)
========================================= */
.btn-group {
    display: flex;
    justify-content: center;
    gap: 30px; /* ボタン同士の隙間 */
}

/* ボタン共通設定 */
.btn-brown, .btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 40px;
    position: relative;
    transition: all 0.2s ease;
}

/* 茶色ボタン */
.btn-brown {
    background-color: #3b1e08;
    box-shadow: 5px 5px 0px #0e0500;
}

.btn-brown:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px #0e0500;
}

/* 緑色ボタン */
.btn-green {
    background-color: #008f3e;
    box-shadow: 5px 5px 0px #003617;
}

.btn-green:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px #003617;
    color: #fff;
}

.arrow {
    margin-left: 20px;
    font-family: Arial, sans-serif;
}

/* =========================================
   Responsive (スマートフォン用調整)
========================================= */
@media screen and (max-width: 768px) {
    /* スマホでは表を縦並びにする */
    .price-row {
        flex-direction: column;
    }
    
    .price-head {
        width: 100%;
        padding: 15px;
        background-color: #f5f5f5; /* 見出しを分かりやすく */
        border-bottom: 1px solid #1a1b41;
    }
    
    .price-body {
        width: 100%;
    }
    
    .price-flex-col {
        flex-direction: column; /* 内容も縦並び */
        gap: 10px;
    }
    
    .col-left, .col-right {
        width: 100%;
    }
    
    /* スマホではボタンも縦並びにする */
    .btn-group {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
    }
    
    .btn-brown, .btn-green {
        width: 100%;
        font-size: 16px;
        padding: 15px 20px;
    }
}

/* =========================================
   Q&A Section (よくある質問)
========================================= */
.qa-section {
    width: 100%;
    padding-bottom: 80px;
}

/* タイトルエリアは .section-title-bg を使い回すため設定なしでOK */

.qa-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.qa-lead {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 40px 0 60px 0;
    color: #333;
}

/* Q&Aリスト全体 */
.qa-list {
    margin-bottom: 50px;
}

.qa-item {
    margin-bottom: 40px;
}

/* 行の共通設定 */
.qa-box {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

/* Q（質問）は左寄せ、A（回答）は右寄せ */
.q-box {
    justify-content: flex-start;
}

.a-box {
    justify-content: flex-end;
}

/* アイコン画像の設定 */
.qa-icon {
    width: 60px;
    height: auto;
    object-fit: contain;
}

/* 吹き出しの共通設定 */
.balloon {
    position: relative;
    padding: 15px 30px;
    border-radius: 30px; /* 角を丸く */
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    max-width: 75%; /* 長くなりすぎないように */
}

/* Q（質問）の吹き出し：薄紫 */
.q-balloon {
    background-color: #e6dee4;
    color: #4a4a4a;
    margin-left: 15px; /* アイコンとの隙間 */
}

/* Qのしっぽ（左側） */
.q-balloon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #e6dee4 transparent transparent;
}

/* A（回答）の吹き出し：薄緑 */
.a-balloon {
    background-color: #a4c76b;
    color: #333;
    margin-right: 15px; /* アイコンとの隙間 */
    text-align: right; /* 回答は右寄せ気味のデザイン */
}

/* Aの「A.」の文字を少し大きく */
.a-balloon strong {
    font-size: 20px;
    color: #4a4a4a;
}

/* Aのしっぽ（右側） */
.a-balloon::after {
    content: "";
    position: absolute;
    bottom: 20px; /* 少し下側からしっぽを出す */
    right: -12px;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #a4c76b;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .qa-lead {
        font-size: 16px;
        margin: 30px 0 40px 0;
    }

    .qa-icon {
        width: 45px; /* スマホではアイコンを少し小さく */
    }

    .balloon {
        padding: 15px 20px;
        font-size: 14px;
        max-width: 80%; /* スマホでは横幅を広く取る */
    }
    
    .a-balloon {
        text-align: left; /* スマホでは右寄せだと読みにくいので左寄せに */
    }
    
    .a-balloon::after {
        bottom: 15px; /* しっぽの位置を微調整 */
    }
}

/* =========================================
   Customer Voice Section (新・お客様の声)
========================================= */
.customer-voice-section {
    width: 100%;
    padding-bottom: 80px;
}

.customer-voice-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.voice-lead {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 40px 0 50px 0;
    line-height: 1.8;
    color: #000;
}

/* 3列のカードグリッド */
.voice-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* カードの外枠デザイン */
.customer-card {
    border: 4px solid #3b1e08; /* 焦げ茶色の太枠 */
    border-radius: 15px; /* 角を丸く */
    padding: 25px 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

/* カード上部（アイコンと属性） */
.card-top {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.customer-icon {
    width: 70px;
    height: auto;
    margin-right: 15px;
}

.customer-info {
    text-align: left;
}

.c-attr {
    font-size: 22px;
    font-weight: 900;
    color: #000;
    margin-bottom: 5px;
}

.c-service {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.5;
    color: #000;
}

/* カード下部（吹き出しコメント） */
.card-bottom {
    background-color: #3b1e08; /* 焦げ茶色の背景 */
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.8;
    position: relative;
    flex-grow: 1; /* コメントの長さが違っても高さを揃える */
}

/* 吹き出しの上向きのしっぽ（CSSで三角形を描画） */
.card-bottom::before {
    content: "";
    position: absolute;
    top: -15px; /* 上にはみ出させる */
    left: 40px; /* アイコンの真下あたりに配置 */
    border-style: solid;
    border-width: 0 10px 15px 10px;
    border-color: transparent transparent #3b1e08 transparent;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 900px) {
    /* スマホやタブレットではカードを縦1列に並べる */
    .voice-card-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto 50px auto;
    }
}

@media screen and (max-width: 768px) {
    .voice-lead {
        font-size: 15px;
        margin: 30px 0 40px 0;
    }
}
/* =========================================
   新・お客様の声 セクション - ボタン中央寄せ修正
========================================= */
/* 親要素（.btn-wrap）に中央揃えの設定を指定します */
.customer-voice-section .btn-wrap {
    width: 100%;
    text-align: center; /* 中にあるボタン（インライン要素）を中央に配置します */
    margin-top: 50px; /* 上のカードグリッドとの余白を確保します */
}

/* 念のため、ボタンがブロック要素になっていないか確認するスタイル
   (以前お渡しした .btn-brown のスタイルが適用されていれば、
   通常はインライン要素になっているはずですが、確実にするため) */
.customer-voice-section .btn-wrap .btn-brown {
    display: inline-flex; /* インライン要素として扱う */
}

/* =========================================
   Blog Section (ブログ)
========================================= */
.blog-section {
    width: 100%;
    /* ご提供いただいた背景画像を設定 */
    background-image: url('image/BLOGの背景.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 20px;
}

.blog-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.blog-title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
}

.blog-title {
    font-size: 22px;
    font-weight: 900;
    color: #000;
}

/* ブログの4列グリッド */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 均等な4列 */
    gap: 20px;
    margin-bottom: 50px;
}

/* ブログのリンク領域 */
.blog-item {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

/* マウスを乗せた時に少しふわっと浮く動き */
.blog-item:hover {
    opacity: 0.8;
    transform: translateY(-5px); 
}

/* グレーの正方形プレースホルダー */
.blog-thumb {
    background-color: #666666; /* デザインに合わせたグレー */
    color: #111;
    font-size: 18px;
    font-weight: normal;
    aspect-ratio: 1 / 1; /* 自動的に正方形を維持する */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 少し影をつけて目立たせる */
}

/* 親要素（.btn-wrap）の中央揃えは既定のCSSで効くはずですが、
   念のためこのセクション用にも指定 */
.blog-section .btn-wrap {
    text-align: center;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 900px) {
    /* タブレットでは4列だと狭いので2列に変更 */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .blog-title-wrap {
        flex-direction: column; /* キャラクターと文字を縦並びに */
        text-align: center;
    }
    
    .blog-title {
        font-size: 18px;
        line-height: 1.6;
    }
    
    /* スマホでは大きめの2列（または1列）にする。今回は2列でキープ */
    .blog-grid {
        gap: 15px;
    }
}

/* =========================================
   Access Section (アクセス)
========================================= */
.access-section {
    width: 100%;
    padding: 80px 20px;
    background-color: #fff;
}

.access-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.access-title {
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    color: #4a2912; /* こげ茶色 */
    margin-bottom: 15px;
}

.access-lead {
    text-align: center;
    font-size: 16px;
    color: #000;
    margin-bottom: 50px;
}

/* 左右のレイアウト */
.access-content {
    display: flex;
    gap: 50px; /* 左右の隙間 */
    align-items: flex-start;
}

/* 左側：グレー領域 */
.access-map-box {
    flex: 1; /* 左右で50%ずつの幅にする */
    width: 100%;
}

.gray-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形にする */
    background-color: #999999; /* デザインに合わせたグレー */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

/* 後から追加するマップや画像用 */
.access-map-box img,
.access-map-box iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右側：会社情報 */
.access-info-box {
    flex: 1; /* 左右で50%ずつの幅にする */
    width: 100%;
}

.access-logo {
    width: 180px;
    height: auto;
    margin-bottom: 20px;
}

/* テーブル（表）のデザイン */
.info-table {
    width: 100%;
    border-collapse: collapse; /* 線の重なりをなくす */
    text-align: left;
}

.info-table th,
.info-table td {
    padding: 20px 0;
    border-top: 1px solid #cccccc; /* 薄いグレーの線 */
    vertical-align: top; /* 文字を上揃えにする */
    color: #000;
    line-height: 1.6;
}

/* 一番下の行だけ下線を引く */
.info-table tr:last-child th,
.info-table tr:last-child td {
    border-bottom: 1px solid #cccccc;
}

.info-table th {
    width: 100px; /* 見出しの幅を固定 */
    font-weight: normal; /* デザインに合わせて太字を解除 */
}

.info-table .small-text {
    font-size: 14px; /* 備考欄だけ少し文字を小さめに */
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    /* スマホでは左右並びを縦並びに変更 */
    .access-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .access-title {
        font-size: 24px;
    }
    
    .gray-placeholder {
        aspect-ratio: 16 / 9; /* スマホでは少し横長の長方形にする */
    }
}

/* =========================================
   Full Map Section (フルワイドマップ)
========================================= */
.full-map-section {
    width: 100%;
    padding: 0 0 80px 0; /* マップ上は余白なし、ボタンの下に余白 */
}

/* マップを囲う枠 */
.map-wrapper {
    width: 100%;
    height: 450px; /* マップの高さを指定 */
    background-color: #cccccc; /* マップ読み込み前の背景色 */
}

/* iframe（マップ本体）を枠いっぱいに広げる */
.map-wrapper iframe {
    width: 100%;
    height: 100%;
    vertical-align: bottom; /* 下にできる謎の隙間を消す */
}

/* ボタンエリアの中央寄せと余白 */
.full-map-section .btn-wrap {
    text-align: center;
    margin-top: 40px;
}

/* アクセスへボタン（影のないフラットなデザイン） */
.btn-flat-brown {
    display: inline-block;
    background-color: #3b1e08; /* 焦げ茶色 */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 80px; /* 横幅を広めにとる */
    transition: opacity 0.3s ease;
}

/* マウスを乗せた時は少し透明にする */
.btn-flat-brown:hover {
    opacity: 0.8;
    color: #fff;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .map-wrapper {
        height: 300px; /* スマホではマップの高さを少し抑える */
    }
    
    .btn-flat-brown {
        padding: 15px 60px;
        width: 90%; /* スマホでは画面幅に合わせて広げる */
        max-width: 300px;
    }
}

/* =========================================
   Footer Contact Bar (緑のお問い合わせバー)
========================================= */
.footer-contact-bar {
    background-color: #006837; /* 深い緑色 */
    padding: 30px 20px;
    color: #fff;
}

.contact-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.contact-info {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.footer-tel {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    font-family: "Arial Black", Arial, sans-serif;
    letter-spacing: 2px;
}

.footer-time {
    font-size: 16px;
    font-weight: bold;
}

.btn-contact-brown {
    background-color: #3b1e08;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 40px;
    text-align: center;
    transition: opacity 0.3s;
}

.btn-contact-brown:hover {
    opacity: 0.8;
    color: #fff;
}

/* =========================================
   Site Footer (茶色のフッターエリア)
========================================= */
.site-footer {
    background-color: #3b1e08;
    color: #fff;
    padding: 50px 20px 20px;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* ナビゲーションリンク */
.footer-nav, .footer-sub-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    gap: 25px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 15px;
}

.footer-nav a, .footer-sub-nav a {
    color: #fff;
    transition: opacity 0.3s;
}

.footer-nav a:hover, .footer-sub-nav a:hover {
    opacity: 0.7;
}

/* 会社情報エリア */
.footer-company-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 50px 0;
}

.footer-logo {
    width: 250px;
}

.footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-address {
    font-size: 14px;
    line-height: 1.8;
    font-weight: bold;
}

.copyright {
    text-align: center;
    font-size: 11px;
    color: #cccccc;
    margin-bottom: 30px;
}

/* フッター内のSEOテキストの微調整 */
.footer-seo {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    color: rgba(255, 255, 255, 0.5); /* 目立ちすぎないよう半透明に */
    text-align: center;
}

.footer-seo p {
    font-size: 11px;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 900px) {
    .contact-bar-inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .contact-info {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    
    .footer-company-info {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .footer-nav, .footer-sub-nav {
        gap: 15px;
    }
}

/* =========================================
   下層ページ共通 ヘッダー画像 (コンセプト、サービス、料金などで使い回せます)
========================================= */
.page-header {
    width: 100%;
    height: 350px; /* 画像の縦幅 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* 帯を上下中央に配置 */
}

/* サービスページ専用の背景画像 */
.service-header {
    background-image: url('image/サービス背景.jpg');
}

/* 中央を横切る緑の帯 */
.page-title-band {
    width: 100%;
    background-color: #006837; /* ヘッダーのボタンと同じ緑色 */
    padding: 20px 0;
    text-align: center;
}

.page-title {
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 4px;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .page-header {
        height: 250px; /* スマホでは縦幅を少し狭くする */
    }
    
    .page-title {
        font-size: 28px;
    }
}

/* =========================================
   Service Detail Section (サービス詳細ページ用)
========================================= */
.service-detail-section {
    padding: 60px 20px 80px 20px;
    background-color: #fff;
}

.service-detail-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* 導入メッセージ */
.service-intro-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 60px;
}

.service-intro-title {
    font-size: 26px;
    font-weight: 900;
    color: #3b1e08; /* 焦げ茶色 */
}

/* サービスブロック全体のレイアウト（横並び） */
.service-box {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* 上揃え */
    margin-bottom: 60px;
}

.service-box:last-child {
    margin-bottom: 0;
}

/* 左側の画像エリア */
.service-img {
    width: 45%;
    /* デザインにある緑の太枠を設定 */
    border: 6px solid #006837; 
}

.service-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側のテキストエリア */
.service-text-box {
    width: 55%;
}

/* 各サービスの見出し（アイコン＋テキスト＋緑の下線） */
.service-box-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid #588b64; /* 少し落ち着いた緑色の下線 */
}

.service-icon-small {
    width: 40px;
    height: auto;
    object-fit: contain;
}

.service-box-header h3 {
    font-size: 22px;
    font-weight: 900;
    color: #3b1e08;
}

/* 説明文 */
.service-text-box p {
    font-size: 16px;
    line-height: 2; /* 読みやすいように行間を広めに */
    color: #333;
    font-weight: 500;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .service-intro-wrap {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .service-intro-title {
        font-size: 20px;
        line-height: 1.5;
    }

    /* スマホでは画像とテキストを縦並びに変更 */
    .service-box {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 50px;
    }

    .service-img, .service-text-box {
        width: 100%;
    }

    .service-box-header h3 {
        font-size: 20px;
    }
}

/* =========================================
   Service to Price Section (サービスページ下部 料金誘導)
========================================= */
.service-to-price-section {
    padding: 40px 20px 100px 20px; /* フッターとの間隔をしっかり取る */
    text-align: center;
    background-color: #fff;
}

.guide-text {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    line-height: 2; /* 行間を広めにして読みやすく */
    margin-bottom: 40px;
}

/* カギカッコの文章を少し大きく目立たせる */
.guide-text strong {
    font-size: 24px;
    display: inline-block;
    margin-bottom: 10px;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .guide-text {
        font-size: 15px;
    }
    
    .guide-text strong {
        font-size: 18px;
    }
}

/* =========================================
   料金ページ専用の背景画像
========================================= */
.price-header {
    background-image: url('image/料金の背景.jpg'); 
}

/* =========================================
   Price Page Details (料金ページ詳細)
========================================= */
.price-about-section,
.price-table-section {
    padding: 60px 20px;
    background-color: #fff;
    text-align: center;
}

.price-table-section {
    padding-top: 0; /* 上のセクションと近すぎるのを防ぐため上余白を0に */
    padding-bottom: 100px; /* フッターとの間隔 */
}

.price-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* 共通の見出し（焦げ茶色） */
.page-section-title {
    font-size: 28px;
    font-weight: 900;
    color: #3b1e08;
    margin-bottom: 40px;
}

/* 料金について の説明文 */
.price-about-text {
    font-size: 16px;
    line-height: 2; /* 読みやすいように行間を広げる */
    color: #000;
    font-weight: bold;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .page-section-title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    .price-about-text {
        font-size: 14px;
        text-align: left; /* スマホでは左揃えの方が読みやすい場合があるため */
        display: inline-block;
    }
}

/* =========================================
   Price Notice Area (料金ページ 注意事項など)
========================================= */
.price-notice-area {
    margin-top: 50px;
    text-align: center;
}

.price-notice-lead {
    font-size: 16px;
    line-height: 1.8;
    color: #000;
    margin-bottom: 60px;
}

/* お見積りについて */
.estimate-box {
    margin-bottom: 60px;
    padding-bottom: 40px;
    /* ★ここに線を復活させます */
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding-top: 40px;
}

.estimate-title,
.caution-title {
    font-size: 24px;
    font-weight: 900;
    color: #3b1e08;
    margin-bottom: 30px;
}

.estimate-points {
    font-size: 20px;
    font-weight: 900;
    color: #000;
    line-height: 1.8;
    margin-bottom: 25px;
}

.estimate-text {
    font-size: 16px;
    color: #333;
}

/* ご注意事項 */
.caution-box {
    padding-bottom: 40px;
    /* ★ここにも下線を復活させます */
    border-bottom: 1px solid #e0e0e0;
}

.caution-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .price-notice-lead {
        font-size: 14px;
    }
    
    .estimate-title,
    .caution-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .estimate-points {
        font-size: 18px;
    }
    
    .estimate-text,
    .caution-text {
        font-size: 14px;
    }
}

/* =========================================
   Price Contact Lead Section (料金ページ下部 お問い合わせ誘導)
========================================= */
.price-contact-lead-section {
    padding: 60px 20px 100px 20px; /* フッターとの間隔を確保 */
    text-align: center;
    background-color: #fff;
}

.price-contact-lead-inner {
    max-width: 800px;
    margin: 0 auto;
}

/* タイトル部分（アイコンとテキストの横並び） */
.contact-lead-title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.bear-icon-small {
    width: 60px; /* アイコンのサイズ調整 */
    height: auto;
}

.contact-lead-title {
    font-size: 28px;
    font-weight: 900;
    color: #3b1e08; /* 焦げ茶色 */
}

/* 大きめの強調テキスト */
.contact-lead-text-large {
    font-size: 24px;
    line-height: 1.8;
    color: #000;
    margin-bottom: 30px;
}

/* 通常の補足テキスト */
.contact-lead-text {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .contact-lead-title-wrap {
        flex-direction: column; /* スマホでは縦並びに */
        gap: 10px;
    }

    .contact-lead-title {
        font-size: 22px;
    }

    .contact-lead-text-large {
        font-size: 20px;
    }

    .contact-lead-text {
        font-size: 15px;
    }
}

/* =========================================
   お客様の声ページ専用の背景画像
========================================= */
.voice-header {
    background-image: url('image/お客様の声の背景.jpg');
}

/* =========================================
   Voice Page Details (お客様の声ページ詳細)
========================================= */
.voice-detail-section {
    padding: 80px 20px 100px 20px;
    background-color: #fff;
}

.voice-detail-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* リード文 */
.voice-intro {
    text-align: center;
    margin-bottom: 80px;
}

.voice-intro-title {
    font-size: 24px;
    font-weight: 900;
    color: #3b1e08; /* 焦げ茶色 */
    margin-bottom: 30px;
}

.voice-intro-text {
    font-size: 16px;
    line-height: 2;
    color: #333;
}

/* お客様の声 1件分のブロック（横並び） */
.voice-item {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px;
}

.voice-item:last-child {
    margin-bottom: 0;
}

/* 左側の画像エリア */
.voice-item-img {
    width: 45%;
}

.voice-item-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側のテキストエリア */
.voice-item-text {
    width: 55%;
    padding-top: 10px; /* 画像と上部を少し揃えるための調整 */
}

/* サービス名と見出し装飾 */
.voice-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.voice-badge {
    color: #b0b0b0; /* 薄いグレーの四角いマーク */
    font-size: 18px;
}

.voice-service-name {
    font-size: 20px;
    font-weight: 900;
    color: #333;
}

/* お客様の属性（年代・性別） */
.voice-user-attr {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

/* コメント本文（左側に薄いグレーの線） */
.voice-comment-box {
    padding-left: 20px; /* 線の左側の余白 */
    border-left: 2px solid #e0e0e0; /* 薄いグレーの左線 */
}

.voice-comment-box p {
    font-size: 15px;
    line-height: 2;
    color: #333;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .voice-intro-title {
        font-size: 20px;
        line-height: 1.5;
    }
    
    .voice-intro-text {
        font-size: 14px;
        text-align: left; /* スマホでは左揃えが読みやすい */
        display: inline-block;
    }

    /* 画像とテキストを縦並びに変更 */
    .voice-item {
        flex-direction: column;
        gap: 20px;
    }

    .voice-item-img, 
    .voice-item-text {
        width: 100%;
    }
    
    .voice-item-text {
        padding-top: 0;
    }
}

/* =========================================
   Voice Page Closing (お客様の声ページ 締めくくり)
========================================= */
.voice-closing {
    margin-top: 80px;
    padding-top: 60px;
    text-align: center;
    border-top: 1px solid #e0e0e0; /* 上のコンテンツとの区切り線 */
}

.voice-closing-title {
    font-size: 24px;
    font-weight: 900;
    color: #1a1b41; /* 少し青みがかった濃い色（デザインに寄せています） */
    margin-bottom: 30px;
}

.voice-closing-text {
    font-size: 18px;
    line-height: 2;
    color: #000;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .voice-closing {
        margin-top: 60px;
        padding-top: 40px;
    }

    .voice-closing-title {
        font-size: 20px;
    }

    .voice-closing-text {
        font-size: 15px;
        line-height: 1.8;
    }
}

/* =========================================
   FAQ Page (よくある質問ページ)
========================================= */

/* 背景画像の指定 */
.faq-header {
    background-image: url('image/よくある質問の背景.jpg');
}

/* 挨拶エリア（上部） */
.faq-intro-section {
    padding: 80px 20px 60px 20px;
    background-color: #fff;
}

.faq-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.faq-intro-title {
    font-size: 28px;
    font-weight: 900;
    color: #1a1b41;
    margin-bottom: 30px;
}

.faq-intro-text {
    font-size: 16px;
    line-height: 2;
    color: #333;
}

/* =========================================
   FAQ List Area (Q&A リスト部分)
========================================= */
.faq-list-wrap {
    /* 木目調の背景画像を画面いっぱいに */
    background-image: url('image/Q&Aの背景.jpg');
    background-size: cover;
    background-position: center;
    padding: 80px 20px 100px 20px;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
}

/* 各Q&Aのブロック */
.faq-list li {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 質問 (Q) */
.faq-question {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.faq-question strong {
    font-size: 20px;
}

/* 回答 (A) */
.faq-answer {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    display: flex;
    gap: 10px;
}

.faq-answer strong {
    font-size: 18px;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .faq-intro-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .faq-intro-text {
        font-size: 14px;
        text-align: left;
        display: inline-block;
    }

    .faq-list-wrap {
        padding: 60px 20px;
    }

    .faq-list li {
        margin-bottom: 40px;
        padding-bottom: 40px;
    }

    .faq-question {
        font-size: 16px;
    }

    .faq-question strong {
        font-size: 18px;
    }

    .faq-answer {
        font-size: 14px;
    }

    .faq-answer strong {
        font-size: 16px;
    }
}

/* =========================================
   FAQ Closing Section (よくある質問ページ 締めくくり)
========================================= */
.faq-closing-section {
    padding: 80px 20px 100px 20px;
    background-color: #fff;
    text-align: center;
}

.faq-closing-inner {
    max-width: 800px;
    margin: 0 auto;
}

.faq-closing-text {
    font-size: 16px;
    line-height: 2;
    color: #333;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .faq-closing-section {
        padding: 60px 20px 80px 20px;
    }
    
    .faq-closing-text {
        font-size: 14px;
        text-align: left; /* スマホでは左揃えが読みやすい */
        display: inline-block; /* 左揃えのまま全体を中央に配置する */
    }
}

/* =========================================
   Contact Page (お問合せページ)
========================================= */

/* 背景画像の指定 */
.contact-header {
    background-image: url('image/お問い合わせの背景.jpg'); 
}

/* 導入文エリア */
.contact-intro-section {
    padding: 80px 20px 60px 20px;
    background-color: #fff;
    text-align: center;
}

.contact-intro-inner {
    max-width: 800px;
    margin: 0 auto;
}

.contact-intro-title {
    font-size: 28px;
    font-weight: 900;
    color: #3b1e08; /* 焦げ茶色 */
    margin-bottom: 30px;
}

.contact-intro-text {
    font-size: 16px;
    line-height: 2;
    color: #333;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .contact-intro-section {
        padding: 60px 20px;
    }
    
    .contact-intro-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .contact-intro-text {
        font-size: 14px;
        text-align: left; /* スマホでは左揃えが読みやすい */
        display: inline-block; /* 全体は中央揃えのまま、テキストだけ左揃えにする */
    }
}

/* =========================================
   Contact Detail Section (お問合せ 詳細内容)
========================================= */
.contact-detail-section {
    padding-bottom: 100px;
    background-color: #fff;
    text-align: center;
}

.contact-detail-inner {
    max-width: 800px;
    margin: 0 auto;
}

/* 各ブロック（間に線を引く） */
.contact-block {
    padding: 60px 20px;
    border-top: 1px solid #e0e0e0; /* 上の線 */
}

/* 最後のブロックは下の余白を調整 */
.contact-block-last {
    padding-bottom: 0;
}

/* 小見出し */
.contact-block-title {
    font-size: 22px;
    font-weight: 900;
    color: #3b1e08; /* 焦げ茶色 */
    margin-bottom: 30px;
}

/* 本文テキスト */
.contact-block-text {
    font-size: 16px;
    line-height: 2;
    color: #333;
}

/* お問合せの流れ 部分 */
.contact-flow p {
    font-size: 16px;
    line-height: 2;
    color: #333;
    margin-bottom: 25px;
}

.contact-flow p:last-child {
    margin-bottom: 0;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .contact-block {
        padding: 40px 20px;
    }

    .contact-block-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .contact-block-text,
    .contact-flow p {
        font-size: 14px;
    }
}

/* =========================================
   LINE Form Section (お問合せ 公式LINE)
========================================= */
.line-form-section {
    background-image: url('image/お問い合わせフォームの背景.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 20px 80px 20px;
    border-top: 1px solid #d0d0d0;
}

.line-form-inner {
    max-width: 800px;
    margin: 0 auto;
}

.line-form-title {
    font-size: 24px;
    font-weight: 900;
    color: #3b1e08;
    text-align: center;
    margin-bottom: 30px;
}

/* ボタンエリア */
.line-form-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.btn-line-action {
    display: inline-block;
    background-color: #3b1e08; /* 焦げ茶色 */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-line-action:hover {
    opacity: 0.8;
}

/* フォームレイアウト */
.line-template-form {
    max-width: 700px;
    margin: 0 auto;
}

.form-row {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start;
}

.form-label {
    width: 150px;
    font-size: 16px;
    color: #333;
    padding-top: 10px;
}

.form-input-wrap {
    flex: 1;
}

/* 入力パーツのデザイン */
.form-input,
.form-textarea {
    width: 100%;
    background-color: #ccc; /* 薄いグレー */
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #3b1e08;
}

.form-file {
    font-size: 14px;
    margin-top: 5px;
}

.file-note {
    font-size: 13px;
    color: #333;
    margin-top: 10px;
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .line-form-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .btn-line-action {
        width: 80%;
        max-width: 300px;
        text-align: center;
    }

    .form-row {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .form-label {
        width: 100%;
        margin-bottom: 5px;
        padding-top: 0;
    }
}

/* =========================================
   Company Page (会社概要ページ)
========================================= */

/* 背景画像の指定 */
.company-header {
    background-image: url('image/会社概要の背景.jpg');
}

/* =========================================
   Company Detail Section (会社概要 詳細内容)
========================================= */
.company-detail-section {
    padding: 80px 20px 100px 20px;
    background-color: #fff;
}

.company-detail-inner {
    max-width: 800px;
    margin: 0 auto;
}

.company-title {
    font-size: 28px;
    font-weight: 900;
    color: #1a1b41; /* デザインに合わせた濃い紺色 */
    text-align: center;
    margin-bottom: 50px;
}

/* 会社概要の表（テーブル） */
.company-table {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    border-collapse: collapse; /* 隙間をなくす */
}

/* 左側の項目名 */
.company-table th {
    width: 30%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #1a1b41; /* 濃い紺色 */
    padding: 20px 20px 20px 0;
    vertical-align: top; /* 上揃えにする（改行された時に綺麗に見えるため） */
}

/* 右側の内容 */
.company-table td {
    width: 70%;
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    padding: 20px 0 20px 30px;
    border-left: 1px solid #b0b0b0; /* 中央の縦線 */
}

/* =========================================
   Responsive (スマートフォン・タブレット用調整)
========================================= */
@media screen and (max-width: 768px) {
    .company-detail-section {
        padding: 50px 20px 80px 20px;
    }

    .company-title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .company-table th {
        width: 35%;
        font-size: 15px;
        padding: 15px 10px 15px 0;
    }

    .company-table td {
        width: 65%;
        font-size: 14px;
        padding: 15px 0 15px 15px; /* スマホでは左の余白を少し狭く */
    }
}

/* =========================================
   各種「もっと見る」ボタンの共通設定（中央揃え）
========================================= */
.btn-wrap {
    text-align: center;
    margin-top: 40px; /* 上の要素との隙間（お好みで調整してください） */
    width: 100%;
}

/* =========================================
   スマホ表示（レスポンシブ）最終調整
========================================= */
/* PC画面ではスマホ用の改行タグ（br）を隠す */
.sp-only {
    display: none;
}

/* -----------------------------------------
   スマホ（画面幅768px以下）の時の設定
----------------------------------------- */
@media screen and (max-width: 768px) {
    
    /* スマホ画面では改行タグを表示して、文字を2段にする */
    .sp-only {
        display: inline;
    }

    /* ▼ 1〜7. これまでの調整（中略） ▼ */
    .tel-number { font-size: 18px !important; white-space: nowrap !important; }
    .btn-contact { font-size: 13px !important; padding: 8px 12px !important; text-align: center; line-height: 1.4; }
    .about-title { font-size: 24px !important; line-height: 1.4 !important; }
    .about-subtitle { font-size: 13px !important; white-space: nowrap !important; margin-top: 10px !important; }
    .message-heading { font-size: 18px !important; line-height: 1.5 !important; margin-bottom: 20px !important; padding: 0 10px !important; }
    .message-text { font-size: 14px !important; line-height: 1.8 !important; margin-bottom: 20px !important; }
    .service-list-heading { font-size: 18px !important; line-height: 1.5 !important; text-align: center !important; margin-bottom: 30px !important; }
    .service-items li { display: flex !important; align-items: center !important; margin-bottom: 25px !important; }
    .service-icon { width: 40px !important; height: 40px !important; object-fit: contain !important; margin-right: 15px !important; }
    .service-text { font-size: 15px !important; line-height: 1.6 !important; font-weight: bold; }
    .service-notice { margin-top: 30px !important; }
    .service-notice p { font-size: 13px !important; line-height: 2 !important; margin: 0 !important; }
    .qa-lead { font-size: 15px !important; line-height: 1.6 !important; padding: 0 15px !important; }
    .voice-lead { font-size: 15px !important; line-height: 1.8 !important; padding: 0 10px !important; }
    .blog-title { font-size: 18px !important; line-height: 1.5 !important; padding: 0 10px !important; }

    /* ▼ 8. トップページ：アクセスエリアの調整（今回追加） ▼ */
    
    /* 導入文（地域に根差した〜） */
    .access-lead {
        font-size: 15px !important; /* スマホ用に文字サイズを調整 */
        line-height: 1.6 !important; /* 行間を調整 */
        padding: 0 15px !important; /* 左右に少し余白 */
    }

    /* 左右並びを縦並びに変更 */
    .access-content {
        flex-direction: column !important; /* 縦並びに */
        gap: 30px !important; /* 画像とテキストの隙間を調整 */
    }

    /* 左側：画像エリア */
    .access-map-box {
        width: 100% !important;
        max-width: 400px !important; /* スマホで画像が大きくなりすぎないように制限 */
        margin: 0 auto !important; /* 中央揃え */
    }

    /* いただいた顔画像を正方形にする（PC用CSSを上書き） */
    .access-map-box img {
        aspect-ratio: 1 / 1 !important; /* 正方形を維持 */
        object-fit: cover !important; /* 綺麗にトリミングして収める */
        border-radius: 10px; /* 少し角を丸くすると雰囲気に合います */
    }

    /* 右側：会社情報エリア */
    .access-info-box {
        width: 100% !important;
        text-align: center; /* スマホでは中央揃えが綺麗です */
    }

    /* ロゴ */
    .access-logo {
        width: 150px !important; /* 少し小さく */
        margin: 0 auto 20px auto !important; /* 中央揃え */
    }

    /* テーブル */
    .info-table {
        font-size: 14px !important; /* 全体的に少し文字を小さく */
    }

    .info-table th,
    .info-table td {
        padding: 15px 5px !important; /* 余白を狭く */
    }

    .info-table th {
        width: 80px !important; /* 見出しの幅を少し狭く */
    }

    /* ▼ 9. フッター：お問い合わせエリアの調整（今回追加） ▼ */
    .footer-tel {
        font-size: 26px !important; /* スマホ画面に収まるようサイズを調整 */
        white-space: nowrap !important; /* 途中で改行させない指定 */
    }
}