/* ==================================
   グローバル (このファイルのみ)
================================== */

/* index.html のみ、ヒーローセクションが透過するため
   メインコンテンツの開始位置をヘッダーの下にする/* 
/* main {
    padding-top: var(--header-height-sp);
}
@media (min-width: 992px) {
    main {
        padding-top: var(--header-height);
    }
}/* 

/* 交互のセクション背景色 */
section.section.greeting {
    background: #fffdee;
    padding: 120px 0;
}
.section:nth-of-type(odd) {
    background-color: var(--color-white);
}
.section:nth-of-type(even) {
    background-color: var(--color-white);
}

/* ==================================
   ヒーローセクション
================================== */

/* 【スマホのスタイル（デフォルト）】
  「先ほどのように」全幅の背景画像（main_view.jpg）を表示します。
*/
.hero {
    /* (1) スマホ用の背景画像 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/main_view.png');
    background-size: cover;
    background-position: center center;
    color: var(--color-white); /* 文字色は白 */

    position: relative; 
    overflow: hidden; 
    margin-top: calc(var(--header-height-sp) * -1);
    padding-top: calc(var(--header-height-sp) + 80px);
    padding: 190px 0 100px;
    z-index: 1;
}

/* (2) 上下分割の背景色はスマホでは非表示 */
.hero::before,
.hero::after {
    display: none;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

.hero-content {
    max-width: 600px;
    margin: 0 auto; 
    text-align: center; 
}

.hero-title {
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--color-white); /* スマホでは白文字 */
}

.hero-text {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-white); /* スマホでは白文字 */
}

.hero-buttons {
    display: flex;
    flex-direction: column; 
    gap: 15px;
    align-items: center; 
}
/* スマホのボタン色（白背景の画像に映えるように） */
.hero-buttons .btn-primary {
    background-color: var(--color-primary); /* 緑 */
    border-color: var(--color-primary);
    color: var(--color-white);
}
.hero-buttons .btn-secondary {
    background-color: var(--color-secondary); /* 薄い黄色 */
    color: var(--color-text); /* 文字は黒 */
    border-color: var(--color-secondary);
}

/* (3) 右側の画像はスマホでは非表示 */
.hero-image-right {
    display: none; 
}


/* 【PCのスタイル（@media）】
  スマホのスタイル（背景画像など）を打ち消し、
  PC用の複雑なレイアウト（上下分割＋右画像）を適用します。
*/
@media (min-width: 768px) {
    
    .hero {
        /* (1) スマホ用の背景画像を解除 */
        background-image: none; 
        color: var(--color-text); /* 文字色の基本を黒に戻す */
        
        padding-top: calc(var(--header-height) + 110px);
        padding: 240px 0 140px;
        margin-top: calc(var(--header-height) * -1);
    }

    /* (2) PC用の上下分割背景色（緑/白）を適用 */
    .hero::before {
        display: block; 
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 60%;
        background-color: #fffdee; 
        z-index: -1;
    }
    .hero::after {
        display: block; 
        content: '';
        position: absolute;
        top: 60%; left: 0; width: 100%; height: 40%;
        background-color: #fffdee; 
        /* background-color: var(--color-white); 下：白 */
        z-index: -1;
    }

    .hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
    
    .hero-content {
        text-align: left;
        margin: 70px 20px;
    }
    
    .hero-title {
        color: var(--color-primary); /* PCのテキストは緑背景の上なので白 */
        text-align: center;
    }
    
    .hero-text {
        color: var(--color-text); /* PCのテキストは緑背景の上なので白 */
    }
    
    .hero-buttons {
        flex-direction: row;
        align-items: flex-start;
    }

    /* (3) PC用の右側画像を表示 */
    .hero-image-right {
        display: block; 
        position: absolute; 
        bottom: 0;
        right: 0;
        width: 50vw; 
        height: 70%; 
        
        /* ★画像パス★ */
        background-image: url('../images/main_view.png'); 

        background-size: cover;
        background-position: center;
        z-index: 0;
        border-radius: 5px 0 0 0;
        /* デザイン調整（任意） */        
        box-shadow: -10px 10px 30px rgb(249 249 249);
        filter: blur(0.6px) brightness(1.10);
    }
}
.hero-title {
  margin: 0;
  text-align: center;
}

.hero-title-img {
  max-width: 420px; /* PC基準 */
  width: 100%;
  height: auto;
}
/* ==================================
   お知らせ (トップページ)
================================== */

/* 【スマホのスタイル（デフォルト）】 */

/* "News" タイトルはスマホでは非表示 */
.news-title-area {
    font-size: 2.4rem;
        color: var(--color-primary);
        padding-top: 15px;
}

.news-list-items {
    border-top: 1px solid #ddd;
}
.news-item {
    border-bottom: 1px solid #ddd;
}
.news-item a {
    display: flex;
    flex-direction: column; /* スマホは縦積み */
    padding: 20px 10px;
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 0.3s;
}
.news-item a:hover {
    background-color: #f5f5f5;
}
.news-date {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.news-title {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
}

/* 「もっと見る」は中央揃え */
.news-more-link {
    text-align: center;
    margin-top: 30px;
}
.news-more-link a {
    font-size: 1.6rem;
}


/* 【PCのスタイル（@media）】 */
@media (min-width: 768px) {
    
    /* PCではグリッドレイアウトを有効化 */
    .news-layout-grid {
        display: grid;
        grid-template-columns: 150px 1fr; /* 左(150px) と 右(残り) */
        gap: 30px;
        align-items: flex-start;
    }

    /* PCでは "News" タイトルを表示 */
    .news-title-area {
        display: block;
        font-size: 2.4rem;        
        color: var(--color-text);
        padding-top: 15px; /* リストの余白と高さを合わせる */
    }

    .news-list-items {
        border-top: none; /* PCでは上の線は不要 */
    }

    /* リスト項目を横並びに */
    .news-item a {
        flex-direction: row; /* 横並び */
        align-items: center;
        gap: 20px;
        padding: 20px;
    }
    .news-date {
        margin-bottom: 0;
        width: 100px;
    }

    /* 「もっと見る」を右寄せに */
    .news-more-link {
        text-align: right;
        margin-top: 10px;
    }
}

/* ==================================
   ごあいさつ
================================== */
.greeting-subtitle {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-text);
}
.greeting-content {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1カラム */
    gap: 30px;
    align-items: center;
}
.greeting-text p {
    font-size: 1.6rem;
    margin-bottom: 20px;
}
.greeting-image img {
    width: 100%;
    border-radius: 0px;
}

@media (min-width: 768px) {
    .greeting-content {
        grid-template-columns: 1fr 1fr; /* PCは2カラム */
        gap: 50px;
    }
    .greeting-text {
        order: 1; /* (画像に合わせてテキストを左に) */
    }
    .greeting-image {
        order: 2;
    }
}

.greeting {
  position: relative;
  background-color: #fff9e6; /* 今の黄色系 */
  overflow: hidden;
}

/* 背景用レイヤー */
.greeting::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/main_view.png"); /* オフィス外観 */
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  opacity: 0.08; /* ←ここ超重要 */
  z-index: 0;
}

/* 中のテキストは前面に */
.greeting > * {
  position: relative;
  z-index: 1;
}


/* ==================================
   沿革 (index.html)
================================== */
.history-list {
    max-width: 800px; /* 中央寄せで幅を制限 */
    margin: 0 auto 40px auto;
}
.history-list li {
    display: flex;
    flex-direction: column; /* スマホは縦積み */
    gap: 8px;
    padding: 15px 0;
    border-bottom: 1px dotted #ccc;
    font-size: 1.5rem;
}
.history-list time {
    font-weight: bold;
    flex-shrink: 0;
}
.history-more-link {
    text-align: center;
}
h3.section-title {
    margin-bottom: 30px;
    padding-left: 12px;
    border-left: 4px solid #006b4f;
    font-size: 2.5rem;
    font-weight: 700;
    color: #006b4f;
    text-align: left;
}
/* 会社沿革内の小見出し */
.history-subtitle {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #006b4f;
  border-left: 4px solid #006b4f;
  padding-left: 12px;
}

/* 営業許可リスト */
.license-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.license-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 10px;
  line-height: 1.7;
}

.license-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: #006b4f;
  font-weight: bold;
}

/* 「一覧をみる」ボタンは common.css の .btn-secondary を流用 */

@media (min-width: 768px) {
    .history-list li {
        flex-direction: row; /* PCは横並び */
        gap: 30px;
        align-items: center;
    }
    .history-list time {
        width: 170px; /* 日付の幅を揃える */
    }
}

.business {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

/* 左側の作業写真 */
.business::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
    height: 45%;
  background-image: url("../images/battery-inspection-specific-gravity.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  opacity: 0.15;
  z-index: 0;
  border-radius: 0 5px 0 0;
}

/* 文字・カードは前面 */
.business > * {
  position: relative;
  z-index: 1;
}



/* ==================================
   下層ページ共通
================================== */

/* 下層ページのメインコンテンツ開始位置 */
.page-header + .breadcrumb + .section,
.page-header + .section {
    padding-top: 60px;
}
@media (min-width: 768px) {
    .page-header + .breadcrumb + .section,
    .page-header + .section {
        padding-top: 90px;
    }
}

/* 下層ページ共通ヘッダー (青背景) */
.page-header {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 40px 0;
    margin-top: var(--header-height-sp); /* スティッキーヘッダー分下げる */
}
.page-title {
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.page-subtitle {
    font-size: 1.5rem;
    text-align: center;
}

/* パンくずリスト */
.breadcrumb {
    background-color: var(--color-bg-gray);
    padding: 15px 0;
    font-size: 1.3rem;
    color: #777;
}
.breadcrumb a {
    color: var(--color-primary);
}

@media (min-width: 992px) {
    /* PCでは下層ヘッダーの高さを固定 */
    .page-header {
        margin-top: var(--header-height);
        padding: 50px 0;
    }
    .page-title {
        font-size: 3.2rem;
    }
}


/* ==================================
   事業内容ページ (business.html)
================================== */

/* 背景色ユーティリティ */
.section-gray {
    background-color: var(--color-bg-gray);
}

/* 事業部ごとのタイトル */
.business-main-title {
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 15px;
}
.business-main-subtitle {
    font-size: 1.6rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.business-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 50px;
}
.business-item.business-item-reverse {   
    margin-bottom: 100px;
}
.business-item .business-image img {
    width: 100%;
    border-radius: 0px;
}
.business-item .business-image.w img {
    width: 75%;
    border-radius: 0px;
    margin: 20px 0 5px;
}
.business-item .business-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.business-item .business-list {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 1.5rem;
}
.business-item.business-item-reverse {
  margin: 100px 0;
}
.business-item.business-item-reverse.third {
    margin-bottom: 0px;
}
@media (min-width: 768px) {
    .business-item {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
    .business-item.business-item-reverse .business-image {
        order: 2;
    }
    .business-item.business-item-reverse .business-text {
        order: 1;
    }
    .business-item.business-item-reverse.third .business-image {
        text-align: end;
    }
}
@media (max-width: 767px) {
  .business-item.third .business-text { order: -1; }
  .business-item.third .business-image { order: 1; }
  .business-item .business-image.w img {
    width: 100%;}
}
/* 主な作業例 見出し */
.work-title {
  margin-top: 28px;
  margin-bottom: 10px;
  padding-left: 12px;
  border-left: 4px solid #006b4f;
  font-size: 1.5rem;
  font-weight: 700;
  color: #006b4f;
}

/* 作業リスト */
.business-list {
  padding-left: 1.4em;
}

.business-list li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.business-list li::marker {
  color: #006b4f;
}

/* カーサービス (3カラム) */
.service-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1カラム */
    gap: 30px;
}
.service-item img {
    width: 100%;
    border-radius: 0px;
    margin-bottom: 15px;
}
.service-title {
    font-size: 2.0rem;
    font-weight: bold;
    margin-bottom: 10px;
}
h4.service-title {
    font-size: 1.5rem;
    text-align: end;
}
.service-item p {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .service-grid {
        grid-template-columns: repeat(3, 1fr); /* PCは3カラム */
        gap: 40px;
    }
}
.service-grid ul.business-list{
    list-style-type: disc;
    padding-left: 20px;
    font-size: 1.5rem;
}
/* 有資格者一覧 (business.html用) */
.works-list.dark-text li a {
    color: var(--color-text);
    border-bottom-color: #ddd;
}
.works-list.dark-text li a:hover {
    background-color: #f5f5f5;
}

/* ==================================
   会社概要ページ (company.html)
================================== */

/* 会社概要テーブル */
.profile-table {
    border-top: 1px solid #ddd; /* 上罫線 */
    max-width: 900px;
    margin: 0 auto;
}
.profile-row {
    display: flex;
    flex-direction: column; /* スマホでは縦積み */
    border-bottom: 1px solid #ddd; /* 下罫線 */
}
.profile-row dt {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px 15px;
    background-color: var(--color-bg-gray); /* 項目名の背景色 */
}
.profile-row dd {
    font-size: 1.6rem;
    padding: 20px 15px;
    line-height: 1.7;
}

/* アクセス (2カラム) */
.access-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1カラム */
    gap: 30px;
}
.access-item img {
    width: 100%;
    border-radius: 0px;
    border: 1px solid #eee; /* 地図に枠線 */
}

@media (min-width: 768px) {
    /* PCではテーブルを横並びに */
    .profile-row {
        flex-direction: row;
    }
    .profile-row dt {
        width: 25%; /* 項目名の幅 */
        flex-shrink: 0;
    }
    .profile-row dd {
        width: 75%; /* 内容の幅 */
    }

    /* PCではアクセスを2カラムに */
    .access-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ==================================
   お知らせ一覧ページ (news/index.html)
================================== */

/* お知らせ一覧リスト */
.news-page-list {
    max-width: 900px; /* 幅を制限 */
    margin: 0 auto;
    border-top: 1px solid #ddd;
}
.news-page-list li {
    border-bottom: 1px solid #ddd;
}
.news-page-list li a {
    display: flex;
    flex-direction: column; /* スマホは縦積み */
    gap: 8px;
    padding: 20px 15px;
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 0.3s;
}
.news-page-list li a:hover {
    background-color: #f9f9f9;
}
.news-page-list time {
    font-size: 1.5rem;
    color: #555;
    flex-shrink: 0;
}
.news-page-list span {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
}

/* ページネーション */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}
.page-numbers {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
}
.page-numbers:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}
.page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}


@media (min-width: 768px) {
    .news-page-list li a {
        flex-direction: row; /* PCは横並び */
        align-items: center;
        gap: 30px;
    }
    .news-page-list time {
        width: 100px;
    }
}


/* ==================================
   お知らせ詳細ページ (news/article1.html)
================================== */

/* ヘッダーがないため、パンくずリストにヘッダー分の余白を */
.breadcrumb-article {
    margin-top: var(--header-height-sp);
}
/* 記事セクションの余白を調整 */
.section-article {
    padding-top: 50px;
}

/* 記事コンテナ (幅を狭くする) */
.article-container {
    max-width: 800px;
}

/* 記事ヘッダー */
.post-header {
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}
.post-date {
    display: block;
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 10px;
}
.post-title {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--color-text);
}

/* 記事本文 (CMSの出力を想定) */
.post-content {
    font-size: 1.6rem;
    line-height: 1.8;
}
.post-content p {
    margin-bottom: 25px;
}
.post-content ul {
    list-style-type: disc;
    padding-left: 1.5em; /* インデント */
    margin-bottom: 25px;
}
.post-content li {
    margin-bottom: 10px;
}
.post-content strong {
    font-weight: bold;
}
/* (その他、h2, h3, blockquote などのスタイルも必要に応じて追加) */


/* 一覧へ戻るボタン */
.post-back-link {
    text-align: center;
    margin-top: 50px;
}
.post-back-link a {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--color-primary);
}

@media (min-width: 992px) {
    .breadcrumb-article {
        margin-top: var(--header-height);
    }
    .post-title {
        font-size: 3.0rem;
    }
}

/* ==================================
   事業内容 (トップページ・新デザイン)
================================== */

/* 共通サブタイトル */
.section-subtitle {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 50px;
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* 2カラムグリッド */
.business-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1カラム */
    gap: 40px;
}

.business-card {
    border: 1px solid #eee;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden; 
    padding: 25px;
        background: #fff;
}
.business-card-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 20px;
}
.business-card-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 45px;
    padding-left: 12px;
    border-left: 4px solid #006b4f;
    text-align: left;
}
.business-card p {
    font-size: 1.5rem;
    line-height: 1.7;
    margin-bottom: 20px;
}
.business-card-subtitle {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 15px;
}

/* チェックマーク付きリスト */
.checked-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
.checked-list li {
    font-size: 1.5rem;
    margin-bottom: 10px;
    padding-left: 24px; 
    position: relative;
}
.checked-list li::before {
    content: '✔'; 
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-secondary); 
    font-weight: bold;
}

/* 「詳しく見る」リンク (左寄せ) */

.btn-text-link {
position: relative;
padding-right: 15px;
color: #333;
text-decoration: none;
}

.btn-text-link::after {
content: '';
display: block;
width: 8px; /* 矢印の大きさの指定 */
height: 8px; /* 矢印の大きさの指定 */
border-top: 2px solid #007560; /* 矢印の太さの指定 */
border-left: 2px solid #007560; /* 矢印の太さの指定 */
}

.btn-text-link--right::after {
transform: rotate(135deg); /* 矢印の角度の指定 */
position: absolute; /* 矢印の位置の指定 */
right: 0; /* 矢印の位置の指定 */
top: 8px; /* 矢印の位置の指定 */

}
.btn-text-link {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s;
        text-align: right;
}
.btn-text-link:hover {
    color: #33333373;
    text-decoration: none;
}

.btn-text-link:hover::after{
  border-top: 2px solid #33333373;
    border-left: 2px solid #33333373;
}
.news-more-link .btn-text-link--right::after {
    transform: rotate(135deg);
    position: absolute;
    right: 0;
    top: 10px;
}
/* ==================================
   有資格者一覧 (トップページ・新デザイン)
================================== */

/* ★★★【修正】★★★
   HTML構造の変更（.section-gray削除）に伴い、
   .license-title にマージンを追加します
*/
.license-title {
    margin-top: 80px; /* 事業内容グリッドとの間に余白を設ける */
}


.license-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1カラム */
    gap: 15px;
    margin-top: 60px;
    border-top: 1px solid #ddd;
    padding-top: 40px;
}
.license-item {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
}
.license-item span {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}
.license-note {
    font-size: 1.3rem;
    color: #555;
    text-align: center;
    margin-top: 40px;
}


/* --- PC表示 --- */
@media (min-width: 768px) {
    /* 事業内容 2カラム */
    .business-grid {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    /* ★★★【修正】★★★
       PC用のマージンも追加
    */
    .license-title {
        margin-top: 100px; 
    }

    /* 有資格者一覧 3カラム */
    .license-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 30px; 
        border: none;
        padding-top: 0;
    }
    .license-item {
        border-bottom: 1px solid #ddd;
    }
}

/* ==================================
   ごあいさつ (レイアウト変更)
================================== */

/* 1. "ごあいさつ"セクションの .container を
      絶対配置(absolute)の基準点にします */
.section.greeting .container {
    position: relative;
}

/* --- PC表示 (768px以上) --- */
@media (min-width: 768px) {
    
    /* 2. 画像(.greeting-image)をコンテナの右上に浮かせる */
    .greeting-image {
        position: absolute;
        top: 80px;  /* タイトルとサブタイトルの下 (微調整してください) */
        right: -70px;
        width: 200px; /* 画像の幅 (微調整してください) */
        z-index: 10;
    }

    /* 3. PCの時、グリッドレイアウトを解除して
          テキストが1カラム (100%幅) になるようにする */
    .greeting-content {
        display: block; /* 既存の grid-template-columns を無効化 */
    }

    /* 4. テキストが浮かせた画像に回り込まないよう、
          右側に余白(padding)を作る */
    .greeting-text {
        width: 85%;
        margin: 0 auto;
    }
}

/* --- スマホ表示 (767px以下) --- */
@media (max-width: 767px) {
    
    /* スマホでは画像をテキストの下に、中央揃えで配置 */
    .greeting-image {
        width: 150px; /* スマホ用の画像サイズ */
        margin: 20px auto 0 auto; /* テキストの下に中央配置 */
    }
}

/* 事業内容 2行・カード内2カラムレイアウト */

.business-grid {
  display: grid;
  grid-template-columns: 1fr;   /* PCでも1カラム（＝2行） */
  gap: 40px;
}

/* カードの見た目はそのまま使う */
.business-card {
  border: 1px solid #eee;
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  padding: 25px;
  margin-bottom: 20px;
}

/* 中身をまとめるラッパー */
.business-card-inner {
  display: flex;
  flex-direction: column;   /* スマホでは縦積み */
  gap: 20px;
}

/* 画像 */
.business-card-image img {
  width: 95%;
  height: auto;
  border-radius: 0px;
}

/* PC 768px 以上で横並びにする */
@media (min-width: 768px) {
  .business-card-inner {
    display: grid;
    grid-template-columns: 1.8fr 1fr; /* テキスト広め＋画像 */
    gap: 30px;
    align-items: center;
  }

  /* カーサービス部だけ左右反転したい場合 */
  .business-card.business-card--reverse .business-card-text {
    order: 2;
  }
  .business-card.business-card--reverse .business-card-image {
    order: 2;
  }
}

/* スマホ（767px以下）は画像を上、テキストを下に */
@media (max-width: 767px) {
  .business-card-inner {
    display: flex;
    flex-direction: column; /* 画像 → テキスト */
  }

  .business-card-image {
    order: 1; /* 画像を上に */
  }

  .business-card-text {
    order: 2; /* テキストを下に */
  }
}

/* 投稿記事画像表示 */
.post-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
p.post-image {
    width: 50%;
    margin: 0 auto;
}
/* フッター */
.footer-cta-buttons {
  margin-top: 24px;
}

.btn-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.tel-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.icon-tel {
  background: url("../images/phon.svg") no-repeat center / contain;
  width: 16px;
  height: 16px;
}
.footer-tel-number {
  margin-top: 16px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff; /* 緑背景なら白が強い */
}

/* ==================================
   セクション見出し（中央＋サブ＋短い下線）
================================== */
.section-title{
  /* 既存の設定を活かしつつ上書き */
  position: relative;
  line-height: 1.2;
  margin-bottom: 40px;
  text-align: center;
}


.section-title-sub{
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-bottom: 10px;
  color: var(--color-text); /* サブは濃すぎない方が上品 */
  font-family: sans-serif;
}

/* 短い下線 */
.section-title::after{
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin: 1.5rem auto 0;
  background-color: currentColor; /* タイトル色に追従 */
}
h3.section-title::after {
    display: none;
}
/* PCで微調整 */
@media (min-width: 768px){
  .section-title-sub{ font-size: 1.3rem; }
  .section-title::after{ width: 3.2rem; }
}