@charset "UTF-8";
/*
Theme Name: 木下建設（2026年）
Theme URI:
Author: grafix
Author URI: https://www.gd-system.jp/
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* ==================================== */
/* 共通スタイルとリセット */
/* ==================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Google FontsのNoto Sans JPを使用 */
    font-family: 'Noto Sans JP', sans-serif;

}
a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style: none;
}
:root{
  --color-key: #007bff;        /* メイン青 */
  --color-key-dark: #0056b3;   /* ホバー／濃色 */
  --color-accent: #ff9800;    /* ★目立つオレンジ色 */
  --color-accent-dark: #f57c00;/* ★オレンジのホバー色 */
  --color-bg: #ffffff;
  --color-text: #222;
  --color-muted: #f4f4f4;
  --color-border: #e5e7eb;
  --radius: 8px;
  --header-height: 80px;
}
body {
    /*
    background-color: var(--color-muted);
    */

    /* 画像ファイルを使用した和紙テクスチャの適用 */
    background-image: url('img/26131172_s.jpg');
    background-repeat: repeat; /* 画像を繰り返して敷き詰める */
    background-size: 500px 500px; /* テクスチャ画像のサイズに合わせて調整 */

    /* (オプション) 背景色とテクスチャをより自然に馴染ませる（テクスチャがモノクロの場合に効果的） */
    background-blend-mode: multiply;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================
   Header（浮遊ヘッダー）
============================= */
.header.floating {
    position: absolute; /* 浮遊状態に戻す */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* スクロール後の固定時に透明な背景・影を適用するため、ここではクリア */
    background: none !important;
    box-shadow: none !important;
}
.header-inner{
  max-width: 1200px;
  margin: 20px auto; /* 左右の余白と上下マージン */
  padding: 15px 30px;
  background: rgba(255,255,255,1.0); /* 半透明の白背景 */
  backdrop-filter: blur(4px);
  border-radius: var(--radius); /* 角丸 */
  box-shadow: 0 4px 10px rgba(0,0,0,.1); /* 影 */
  display: flex; justify-content: space-between; align-items: center; position: relative;
  transition: all 0.3s ease; /* スムーズな遷移のため追記 */
}

.header-inner .logo {
    width: 320px;
    max-width: 100%; /* 親要素（.header-inner）の幅を超えないように */
    height: auto; /* 高さは自動調整 */
    z-index: 1010;
}
/* ロゴ画像（imgタグ）のスタイル */
.header-inner .logo img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .header-inner .logo {
        width: 240px; /* スマートフォンサイズでの最大幅を調整 */
    }
}

/* スクロール後に適用される固定ヘッダーのスタイル */
.header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 110;
    background: var(--color-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.3s, box-shadow 0.3s;
}
.header.is-sticky .header-inner {
    margin: 10px auto;
    padding: 10px 30px;
    background: rgba(255,255,255,1.0); /* 半透明の白背景 */
    backdrop-filter: blur(4px);
    border-radius: var(--radius); /* 角丸 */
    box-shadow: 0 4px 10px rgba(0,0,0,.1); /* 影 */
    transition: all 0.3s ease;
}
.logo a{ font-size: 24px; font-weight: 700; color: #333; }
/* Global Nav */
.nav-list{ display: flex; gap: 30px; }
.nav-item a{
  font-size: 15px; color: #333; padding: 5px 0; display: block; transition: color .2s ease;
}
.nav-item a:hover{ color: var(--color-key); }
.nav-item.active a{color: var(--color-key);}
.burger-menu{ display: none; background:none; border:none; }
/* =============================
   Responsive
============================= */
@media (max-width: 1200px){
  .header-inner { margin: 15px 20px; padding: 10px 15px; }
}
@media (max-width: 960px){
  /* SP Nav */
  .burger-menu{
    display:block; font-size:24px; color:#333; cursor:pointer; padding:6px; z-index:200;
  }
  /* is-sticky時の header-innerの修正 */
  .header.is-sticky .header-inner { margin: 10px 20px; padding: 5px 15px; }

  .nav{
    position:absolute; left:15px; top:100%;
    width: calc(100% - 30px);
    max-height:0; overflow:hidden; opacity:0;
    background:#fff; box-shadow: 0 8px 16px rgba(0,0,0,.2);
    border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
    transition: max-height .35s ease, opacity .25s ease; z-index:150;
  }
  .nav.is-active{ max-height: 500px; opacity: 1; }
  .nav-list{ flex-direction: column; gap:0; width:100%; }
  .nav-item{ border-bottom: 1px solid var(--color-border); }
  .nav-item:last-child{ border-bottom: none; }
  .nav-item a{ font-size:16px; font-weight:700; padding:15px; text-align:left; color:#333; }
}


/* ==================================== */
/* 2. ヒーロー (スライドショー) */
/* ==================================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-top: 0 !important;
    height: 100vh !important;
}
.hero-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
/* 仮の背景画像 */
/* .slide-item:nth-child(1) { background-image: url('http://grafix002.xsrv.jp/kinoshita-kensetsu.co.jp/wp2026/wp-content/uploads/2026/01/33490496_m.jpg'); }
.slide-item:nth-child(2) { background-image: url('http://grafix002.xsrv.jp/kinoshita-kensetsu.co.jp/wp2026/wp-content/uploads/2026/01/33198841_m.jpg'); }
.slide-item:nth-child(3) { background-image: url('http://grafix002.xsrv.jp/kinoshita-kensetsu.co.jp/wp2026/wp-content/uploads/2026/01/33076427_m.jpg'); } */
.slide-item.active {
    opacity: 1;
}

/* ヒーローコンテンツ */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
}
.hero-content h1 span {
    font-size: 24px;
    display: block;
    font-weight: 400;
}
.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 600px) {
   /* 2. ヒーロー */
    .hero-content h1 {
        font-size: 28px;
    }
    .hero-content h1 span {
        font-size: 16px;
    }
    .hero-content p {
        font-size: 16px;
    }
}
.btn-cta {
    display: inline-block;
    padding: 12px 30px;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    transition: background-color 0.3s;
}
.btn-cta:hover {
    background-color: #0056b3;
}

/* スライダーインジケーター */
.slider-indicator {
    position: absolute;
    bottom: 33px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px; /* インジケーター全体の幅 */
}
.dots-container {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}
.dot.active {
    background-color: #fff;
    transform: scale(1.2);
}
.progress-bar-container {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #fff;
    transition: width 5s linear;
}
/* ==================================== */
/* 3. ニュースセクション */
/* ==================================== */
.news-section {
    padding-top: 7em;
    padding-bottom: 6em;
    /*
    padding: 100px 0;
    background-color: #fff;
    */
}
.news-section h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #333;
}

.news-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-item {
    display: block;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.news-item:hover {
    transform: translateY(-4px);
}

.news-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-meta {
    padding: 15px;
}

.news-date {
    font-size: 13px;
    color: #888;
    margin-bottom: 6px;
    display: block;
}

.news-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
}

/* ボタンを中央に配置するためのラッパー */
.btn-wrap {
    text-align: center;
    margin-top: 50px; /* リストとの間にスペース */
}

/* ボタンの共通スタイル */
.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    /*
    background-color: #333;
    */
    background-color: #22419d;
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    /*
    transition: background-color 0.3s;
    */
}

.btn-primary:hover {
    background-color: #555;
}
@media (max-width: 600px) {
    /* 3. ニュース */
    .news-section {
        padding: 60px 0;
    }
    .news-section h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }
    .news-list {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .btn-wrap {
        margin-top: 30px;
    }
}

/* ==================================== */
/* 4. 強み/特徴セクション */
/* ==================================== */
.strength-section {
    padding: 100px 20px;

    /* 背景画像の設定 */
    /* background-image: url('33075199_m.jpg'); 仮の背景画像 */
    background-size: cover;
    background-position: center;
    position: relative; /* オーバーレイの基準にする */

    color: #fff; /* 文字を白に変更 */
    text-align: center;
}

/* オーバーレイ（画像を暗くし、文字を読みやすくする） */
.strength-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    z-index: 1;
}

/* テキストをオーバーレイより手前に配置 */
.strength-section .container {
    max-width: 800px;
    margin: 0 auto;
    position: relative; /* オーバーレイ (z-index: 1) より手前へ */
    z-index: 2;
}

.strength-section h3 {
    font-size: 32px;
    font-weight: 700;
    color: #fff; /* 白に変更 */
    margin-bottom: 25px;
    line-height: 1.4;
}

.strength-section p {
    font-size: 18px;
    color: #eee; /* 薄い白 */
    line-height: 1.8;
}
@media (max-width: 600px) {
    /* 4. 強み */
    .strength-section {
        padding: 60px 20px;
    }
    .strength-section h3 {
        font-size: 24px;
    }
    .strength-section p {
        font-size: 16px;
    }

}

/* ==================================== */
/* 5. 実績セクション (WORKS) */
/* ==================================== */
.works-section {
    padding-top: 5em;
    padding-bottom: 4em;
/*    background-color: var(--color-muted);  */

    /* 【修正】画像ファイルを使用した和紙テクスチャの適用 */
    background-image: url('26131172_s.jpg');
    background-repeat: repeat;
    background-size: 500px 500px;

    background-blend-mode: multiply;
}

/* セクションの見出し */
.section-heading {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
}
.section-heading h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #333;
}
.section-heading p {
    font-size: 16px;
    color: #555;
}
/* 実績グリッド（ウィンドウ幅いっぱいに広げる） */
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
/* 実績アイテム */
.work-item {
    display: block;
    position: relative; /* タイトルオーバーレイの基準 */
    overflow: hidden;
    /* 1:1 アスペクト比 (正方形) の確保 */
    height: 0;
    padding-bottom: 100%;
}
.work-item a{background:none;box-shadow:none;border-radius:0;}

.work-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
/* ホバーエフェクト */
.work-item:hover img {
    transform: scale(1.05);
}
/* タイトルオーバーレイ（写真に被せる部分） */
.work-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    color: #fff;
    transition: background 0.3s;
}

.work-title-overlay h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.works-section .btn-wrap {
    text-align: center;
    margin-top: 50px;
}
@media (max-width: 960px) {
    /* 5. 実績 */
    .works-grid {
        /* タブレットでは2列 */
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {
    /* 5. 実績 */
    .works-section {
        padding-top: 3em;
        padding-bottom: 2em;
    }
    .works-grid {
        /* SPでは1列 */
        grid-template-columns: 1fr;
    }
    .work-title-overlay h3 {
        font-size: 18px;
    }
}

/* ==================================== */
/* 6. ピックアップセクション */
/* ==================================== */
.pickup-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fff;
}

.pickup-scroll-container {
    padding: 0 0 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    /* スクロールバーを非表示にする */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.pickup-scroll-container::-webkit-scrollbar {
    display: none;
}
/* ドラッグ中: 掴んでいるカーソル */
.pickup-scroll-container.active-drag {
    cursor: grabbing;
}
/* グリッドコンテナ（フレックスで横並びにする） */
.pickup-grid {
    display: flex;
    gap: 24px;
    /* 左右の余白をコンテンツ自体に適用 (進捗バー修正のため) */
    padding: 0 20px;
    padding-bottom: 10px;
}
/* ピックアップアイテムのサイズ設定 */
.pickup-item {
    /* PC: 4件表示 */
    flex: 0 0 calc(25% - 18px); /* 18px = gap(24px) * 3/4 */
    max-width: 300px;
    background-color: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.pickup-item:hover {
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

/* 画像コンテナ */
.pickup-thumb {
    position: relative;
    /* 1:1（正方形）の比率を維持 */
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
}

.pickup-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* メタ情報 */
.pickup-meta {
    padding: 15px;
    color: #333;
}

.pickup-meta h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pickup-meta p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}


/* カスタムナビゲーションバー本体 */
.pickup-custom-nav {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 0 20px;
}

/* スクロールインジケーター（線）部分 */
.scroll-indicator {
    position: relative;
    flex-grow: 1;
    height: 8px;
    margin-right: 20px;
}

/* 細い線 (背景: ----) */
.scroll-indicator-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 1px; /* 細い線の太さ */
    background-color: #ccc; /* 細い線の色 */
    z-index: 1;
}

/* 太い線 (進捗: ======) */
.scroll-progress-bar {
    position: absolute;
    top: 50%;
    /* Y軸の位置固定と、X軸の移動はJSで制御 */
    transform: translateY(-50%) translateX(0%);
    height: 8px; /* 太い線の太さ */
    background-color: #333; /* 太い線の色 */
    width: 0%; /* JSで更新 */
    z-index: 2;
    border-radius: 4px;
    transition: width 0.1s, transform 0.1s;
}

/* 矢印ボタンのラッパー */
.nav-arrows {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 矢印ボタンのスタイル (円と枠線を削除) */
.scroll-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s;
}

.scroll-btn.nav-arrow {
    position: static;
    transform: none;
    width: 36px;
    height: 36px;
    font-size: 18px; /* アイコンサイズを調整 */

    background-color: transparent;
    border: none;
    border-radius: 0;

    color: #333; /* アイコンの色 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-btn.nav-arrow:hover {
    /* ホバー時のデザインを、アイコンの色変更のみに変更 */
    background-color: transparent;
    color: #007bff;
    border-color: transparent;
}
.scroll-btn.nav-arrow[disabled] {
    opacity: 0.2;
    cursor: default;
    border-color: transparent;
}
@media (max-width: 600px) {
    /* 6. ピックアップ */
    .pickup-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .pickup-item {
        /* SPでは1件を大きく、隣を少しだけ表示 */
        flex: 0 0 calc(100% - 40px);
    }
    .pickup-custom-nav {
        padding: 0 10px;
    }
}
/* =============================
   7. Contact Section (New)
============================= */
.contact-section {
    padding: 100px 0; /* 上下に少し余白を増やして画像を見せる */
    text-align: center;
    color: #fff;

    /* --- 背景画像の設定 --- */
    /* background-image: url('33076427_m.jpg'); ★任意の画像URLに変更してください */
    background-size: cover;
    background-position: center;
    position: relative; /* オーバーレイを重ねるために必要 */
    overflow: hidden;
}

/* ★画像を暗くするためのオーバーレイ（重ね色） */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* メインカラーの青 (var(--color-key)) を半透明で重ねる */
    background-color: rgba(55, 55, 55, 0.7); /* 青(0.7の透明度) */
    z-index: 1;
}

/* コンテンツをオーバーレイより手前に出す */
.contact-section .container {
    position: relative;
    z-index: 2;
}

.contact-section h2 {
    font-size: 38px; /* 少し大きく */
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.contact-section p {
    font-size: 20px; /* 少し大きく */
    margin-bottom: 50px;
}

/* CTAボタンのスタイル (背景を白、文字を青に反転) */
.btn-contact {
    /* 背景をアクセントカラーに */
    background-color: var(--color-accent); /* ★オレンジ */
    color: #fff; /* 文字色は白 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700; /* 太字でさらに強調 */
    /* ホバー時にアニメーションでわずかに上に動く */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.btn-contact:hover {
    /* ホバーで少し濃いオレンジに */
    background-color: var(--color-accent-dark);
    transform: translateY(-3px); /* 持ち上がりを強調 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* 影を濃くする */
}
/* --- レスポンシブ調整 --- */
@media (max-width: 960px) {
    .contact-section {
        padding: 80px 0;
    }
    .contact-section h2 {
        font-size: 32px;
    }
    .contact-section p {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    .contact-section {
        padding: 60px 0;
    }
    .contact-section h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }
    .contact-section p {
        font-size: 16px;
        margin-bottom: 30px;
    }
    .btn-contact {
        padding: 12px 30px;
        font-size: 16px;
    }
}

/* =============================
   7. Recruit Section
============================= */
.recruit-section {
/*    background-color: var(--color-muted); */
    padding: 100px 0; /* 【修正】PCでのデフォルトの上下の余白 */
}

.recruit-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.recruit-text {
    flex: 1;
}

.recruit-text h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--color-key-dark); /* タイトルは濃いめの青 */
}

.recruit-text p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.job-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 40px;
}

.job-list li {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}

/* チェックマークアイコンのスタイル */
.job-list li i {
    color: var(--color-key);
    margin-right: 8px;
}

.recruit-image {
    flex: 1;
}

.recruit-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* --- レスポンシブ調整 --- */
@media (max-width: 960px) {
    /* ... (既存のメディアクエリが続く) ... */

    /* 採用セクションの調整 */
    .recruit-content {
        flex-direction: column;
    }
    .recruit-image {
        order: -1; /* 画像を上に移動 */
        margin-bottom: 30px;
    }
/* 【追記】960px以下でのパディング調整 (タブレット) */
    .recruit-section {
        padding: 80px 0;
    }
}

@media (max-width: 600px) {
    /* ... (既存のメディアクエリが続く) ... */

    .recruit-text h3 {
        font-size: 24px;
    }
    .job-list li {
        font-size: 15px;
    }
/* 【追記】600px以下でのパディング調整 (スマートフォン) */
    .recruit-section {
        padding: 60px 0;
    }
}
/* =============================
   8. Footer (New)
============================= */
.footer {
    background-color: var(--color-bg); /* 白に変更 */
    color: var(--color-text); /* 文字色を濃い色に変更 */
    padding: 60px 0 20px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

/* 会社情報エリア */
.footer-info {
    flex: 1.5;
    max-width: 400px;
}
.footer-logo {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-accent);
}
.footer-info p {
    font-size: 14px;
    line-height: 1.25;
    margin-bottom: 10px;
    color: var(--color-text); /* 白背景のため濃い色に調整 */
}
.footer-info a {
    color: var(--color-text); /* 濃い色に変更 */
    transition: color 0.3s;
}
.footer-info a:hover {
    color: var(--color-accent);
}

/* フッターナビゲーションエリア */
.footer-nav-area {
    flex: 2;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.footer-nav h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text); /* 濃い色に変更 */
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-border); /* 線を濃い色に変更 */
}

.footer-nav-list li {
    margin-bottom: 8px;
}

.footer-nav-list a {
    font-size: 14px;
    color: #555; /* 濃い色に変更 */
    display: block;
    transition: color 0.3s;
    padding:0;
}
.footer-nav-list a:hover {
    color: var(--color-accent);
}

/* CMS認証アイコンエリア */
.footer-certifications {
    flex: 1;
    min-width: 200px;
}

.cert-icons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* CMSアイコンのスタイル */
.cert-icons a {
    display: block;
    width: 60px;
    height: 60px;
    background-color: var(--color-muted); /* アイコン背景を薄いグレーに */
    border: 1px solid var(--color-border); /* 境界線を追加 */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cert-icons img {
    max-width: 80%;
    max-height: 80%;
    width:auto;
    height: auto;
}

/* コピーライト */
.copyright {
    text-align: center;
    font-size: 12px;
    color: #555;
    padding-top: 20px;
    border-top: 1px solid var(--color-border); /* 線を濃い色に変更 */
}

@media (max-width: 600px) {
    .footer {
        padding: 40px 0 15px 0; /* 上下のパディングを調整 */
    }
    .footer-nav h4 {
        margin-top: 20px; /* ナビゲーション見出しの上のスペースを確保 */
    }
    /* CMS認証アイコンエリア */
    .footer-certifications {
        padding-top: 20px; /* 上部にスペースを追加 */
        border-top: 1px solid var(--color-border); /* ナビエリアとの間に境界線 */
    }
    .cert-icons {
        justify-content: center; /* アイコンを中央に配置 */
    }
    .footer-inner {
        flex-direction: column;
        gap: 0; /* SPでは間隔を詰める */
    }
}
/* ====================================
   9. Page Header & Company Profile Section
==================================== */
.page-header {
    padding-top: 130px; /* ヘッダーの高さと余白を考慮 */
    padding-bottom: 30px;
/*    background-color: var(--color-muted);
    margin-top: -50px;
*/
}

/* ページタイトル (会社概要) */
.page-header h1 {
    font-size: 42px;
    font-weight: 500;
    color: var(--color-text);
    text-align: center;
/*    margin-bottom: 60px; */
    padding-top: 1.2em;
}

.page-nav-list {
    display: flex;
    justify-content: center;
    gap: 30px; /* 項目間の間隔 */
    background-color: var(--color-bg);
    padding: 15px 30px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 影を付けて浮き上がらせる */
    max-width: 900px;
    margin: 2em auto; /* 中央寄せ */
}

.page-nav-list a {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    transition: color 0.2s;
}

.page-nav-list a:hover {
    color: var(--color-key); /* ホバーでキーカラー */
}
/* 各コンテンツセクションの共通スタイル */
.company-profile-section {
    padding: 60px 0; /* 上下パディング */
}
/* セクション内コンテンツタイトル (代表挨拶など) */
.content-title {
    font-size: 1.75em;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 15px;
}

/* 見出しのカッコ書きテキスト */
.content-title .small-text {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    margin-top: 5px;
}

/* --- 代表挨拶のコンテンツ --- */
.greeting-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.greeting-text p {
    font-size: 16px;
    line-height: 2.0;
    margin-bottom: 30px;
    text-align: justify;
    text-indent: 1em;
}

/* --- 品質方針のコンテンツ --- */
.policy-content {
    max-width: 850px;
    margin: 0 auto;
}

/* 品質方針の番号付きリスト（OL） */
.quality-policy-list {
    list-style-type: none;
    counter-reset: policy-counter;
    padding-left: 0;
}

.quality-policy-list li {
    counter-increment: policy-counter;
    font-size: 16px;
    line-height: 2.0;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
    padding-left: 35px;
    position: relative;
}

.quality-policy-list li::before {
    content: counter(policy-counter) ".";
    color: var(--color-key);
    font-weight: 700;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 15px;
}
/* --- 沿革のコンテンツ --- */
.history-content {
    max-width: 800px;
    margin: 0 auto;
}

.history-data-list {
/*
    margin-bottom: 50px;
*/
    position: relative;
    padding-left: 20px;
}

/* タイムラインの縦線（PCのみ） */
.history-data-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border);
    z-index: 1;
}

/* 項目 (DT/DDを囲むDIV) */
.history-data-list .data-item {
    display: flex;
    margin-bottom: 30px;
    align-items: baseline;
    position: relative;
    z-index: 2;
}

/* 年号 (DT) */
.history-data-list dt {
    width: 150px;
    font-weight: 700;
    font-size: 16px;
    color: #454545;
    flex-shrink: 0;
    position: relative;
}

/* タイムライン上の丸点（PCのみ） */
.history-data-list dt::before {
    content: '';
    position: absolute;
    right: -25px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: var(--color-key);
    border-radius: 50%;
    border: 3px solid var(--color-bg);
}

/* 内容 (DD) */
.history-data-list dd {
    flex-grow: 1;
    padding-left: 50px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}
/* --- 会社概要データ (企業情報) --- */
.company-data-list {
    max-width: 800px;
    margin: 0 auto 0 auto;
    border-top: 1px solid var(--color-border);
}

/* 項目 (DT/DDを囲むDIV) */
.company-data-list .data-item {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}

/* 項目名 (DT) */
.company-data-list dt {
    width: 180px;
    padding: 15px 20px;
    font-weight: 700;
    font-size: 16px;
    background-color: var(--color-muted);
    color: #454545;
    flex-shrink: 0;
}

/* 内容 (DD) */
.company-data-list dd {
    flex-grow: 1;
    padding: 15px 20px;
    font-size: 16px;
    color: var(--color-text);
}

/* 建設業許可の許可年月日を小さく表示 */
.company-data-list .permit-date {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

/* 主要取引先DD内の調整 (官庁と民間を横並びにする) */
.company-data-list .major-client dd {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 5px;
}

/* 主要取引先 - 各グループの調整 */
.company-data-list .major-client .client-group {
    min-width: 250px;
}

.company-data-list .major-client .client-group p,
.company-data-list .major-client .client-list li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 5px;
}

/* 主要取引先 - タイトル（【官庁】、【民間】など） */
.company-data-list .major-client .client-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-key-dark);
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    padding-bottom: 3px;
}

.company-data-list .major-client .client-list {
    list-style: none;
    padding-left: 0;
}


/* --- 資格取得者 --- */
/* 資格リスト全体を中央に寄せる */
.qualification-data-list {
    max-width: 900px;
    margin: 0 auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
}

/* 項目 (DT/DDを囲むDIV) */
.qualification-data-list .data-item {
    display: flex;
    width: 50%;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

/* 偶数番目の項目は右の罫線を消す (見た目の調整) */
.qualification-data-list .data-item:nth-child(even) {
    border-right: none;
}

/* 項目名 (DT) */
.qualification-data-list dt {
    width: 60%;
    padding: 15px 20px;
    font-weight: 700;
    font-size: 15px;
    background-color: var(--color-muted);
    color: #454545;
    flex-shrink: 0;
}

/* 人数 (DD) */
.qualification-data-list dd {
    flex-grow: 1;
    width: 40%;
    padding: 15px 20px;
    font-size: 16px;
    color: var(--color-text);
    font-weight: normal;
    text-align: right;
}


/* --- 事業所・営業所情報 --- */
/* 拠点リスト全体 */
.office-list-wrapper {
    max-width: 1000px;
    margin: 0 auto 80px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* 各拠点ブロック */
.office-location {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--color-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 拠点名 (本社、和歌山営業所など) */
.office-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-bg);
    background-color: #959595;
    padding: 15px 20px;
    margin: 0;
}

/* 地図参照リンク */
.office-name .map-link {
    font-size: 14px;
    font-weight: 400;
    color: #ccc;
    margin-left: 10px;
}

/* 拠点データリスト (住所、電話、FAX) */
.office-data-list {
    padding: 0;
    margin: 0;
}

/* リスト内の項目 (住所、電話、FAX) */
.office-data-list .data-item {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
}
/* 最後の項目の下線を削除 */
.office-data-list .data-item:last-child {
    border-bottom: none;
}

/* 項目名 (DT: 住所、電話、FAX) */
.office-data-list dt {
    width: 80px;
    padding: 12px 0 12px 20px;
    font-weight: 700;
    color: #454545;
    flex-shrink: 0;
}

/* 内容 (DD: データ) */
.office-data-list dd {
    flex-grow: 1;
    padding: 12px 20px 12px 10px;
    color: var(--color-text);
}

/* Google Mapコンテナ */
.office-location .map-container {
    width: 100%;
    /* リストデータのボーダーと地図の間に線を入れる */
    border-top: 1px solid var(--color-border);
}

/* iframeのスタイリング */
.office-location .map-container iframe {
    display: block;
    width: 100%;
    height: 300px;
}
/* --- 900px以下 --- */
@media (max-width: 900px) {
    .page-header h1 {
        font-size: 1.75em;
        margin-bottom: 0.5em;
        padding-top: 2em;
    }
    .page-nav-list {
        padding: 12px 20px;
        max-width: 95%;
        gap: 20px;
    }
    .company-profile-section {
        padding: 3em 0 2em 0;
    }
}
/* --- 600px以下 (スマートフォン) --- */
@media (max-width: 600px) {
    .page-header {
        padding-top: 100px;
        margin-top: -50px;
    }
    .content-title {
        font-size: 1.35em;
        margin-bottom: 40px;
        gap: 0 5px;
    }

    /* ページ内メニュー (浮かせた部分) */
    .page-nav-list {
        gap: 10px 15px;
        flex-wrap: wrap;
        padding: 8px 15px;
        margin-top: 1em;
    }
    .page-nav-list a {
        font-size: 14px;
    }

    /* 代表挨拶本文 */
    .greeting-text p {
        font-size: 1.0em;
        line-height: 1.8;
        margin-bottom: 20px;
        text-indent: 0;
        text-align: left;
    }

    /* 品質方針リスト */
    .quality-policy-list li {
        font-size: 15px;
        line-height: 1.8;
        padding: 10px 0;
        padding-left: 30px;
    }
    .quality-policy-list li::before {
        font-size: 16px;
        top: 10px;
    }

    /* 沿革リスト */
    .history-data-list {
        padding-left: 0;
        margin-bottom: 30px;
    }
    .history-data-list::before,
    .history-data-list dt::before {
        display: none;
    }
    .history-data-list .data-item {
        flex-direction: column;
        margin-bottom: 20px;
        border-left: 4px solid var(--color-border);
        padding-left: 10px;
    }
    .history-data-list dt {
        width: 100%;
        font-size: 15px;
        margin-bottom: 5px;
        position: static;
    }
    .history-data-list dd {
        padding-left: 0;
        font-size: 15px;
    }

    /* 会社概要データ (企業情報) */
    .company-data-list {
        margin-bottom: 0px;
    }
    .company-data-list .data-item {
        flex-direction: column;
    }
    .company-data-list dt {
        width: 100%;
        padding: 10px 15px;
        font-size: 14px;
        background-color: #eee;
    }
    .company-data-list dd {
        padding: 10px 15px;
        font-size: 15px;
        background-color: var(--color-bg);
    }
    /* 主要取引先DD内の調整 (縦並びに戻す) */
    .company-data-list .major-client dd {
        flex-direction: column;
        gap: 20px;
    }
    .company-data-list .major-client .client-group {
        min-width: 100%;
    }
    .company-data-list .major-client .client-group p,
    .company-data-list .major-client .client-list li {
        font-size: 14px;
    }

    /* 資格取得者 */
    .qualification-data-list {
        max-width: 100%;
        margin-bottom: 0px;
    }
    .qualification-data-list .data-item {
        width: 100%;
        border-right: none !important;
    }
    .qualification-data-list dt {
        width: 70%;
        font-size: 14px;
        padding: 10px 15px;
    }
    .qualification-data-list dd {
        width: 30%;
        font-size: 15px;
        padding: 10px 15px;
    }

    /* 事業所・営業所情報 */
    .office-list-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 60px;
    }
    .office-name {
        font-size: 18px;
        padding: 12px 15px;
    }
    .office-data-list dt {
        width: 60px;
        padding: 10px 0 10px 15px;
        font-size: 14px;
    }
    .office-data-list dd {
        padding: 10px 15px 10px 10px;
        font-size: 14px;
    }
    .office-location .map-container iframe {
        height: 200px;
    }
}
/* =============================
   実績ページ (Works)
============================= */
/* --- タブナビゲーション (フィルター) --- */
.work-tabs {
    display: flex;
    justify-content: center; /* 中央に寄せる */
    align-items: center;
    gap: 10px;
    margin-bottom: 60px;
}

.work-tabs .tab-button {
    background-color: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 10px 25px;
    border-radius: 50px;
/*    font-weight: 700; */
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    white-space: nowrap;
}

/* アクティブなタブ */
.work-tabs .tab-button.is-active {
    background-color: var(--color-key);
    border-color: var(--color-key);
    color: var(--color-bg);
}

/* ホバー時のスタイル */
.work-tabs .tab-button:not(.is-active):hover {
    background-color: #e6e9ed;
}
.work-list-container {
    max-width: 1200px; /* 【修正】最大幅を設定 */
    margin: 0 auto; /* 【修正】中央寄せ */
}

/* --- 実績カードリスト (3列グリッド) --- */
.work-list {
    display: grid;
    /* 🌟 修正後: 常に3列を明示的に指定し、空の領域は空のままにする */
    grid-template-columns: repeat(3, 1fr);

    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;

    /* 3列の幅を保つための調整 */
    max-width: 1200px; /* 3列分の最大幅を設定（任意で調整） */
    margin-left: auto;
    margin-right: auto;
}

.work-item {
    display: block;
    /*
    background-color: var(--color-bg);
    border-radius: 8px; */
    border-radius: 0; /* 【修正】角丸を廃止 */
    overflow: hidden;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); */
    box-shadow: none; /* 【修正】影を廃止 */
    transition: transform 0.3s ease;
}

/* ホバーエフェクト */
/*
.work-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
*/
.work-item a {
    display: block;
    text-decoration: none;
    color: var(--color-text);
}

/* カード画像 */
.work-thumb {
    width: 100%;
    /* 16:9のアスペクト比を維持 */
    padding-top: 56.25%;
    position: relative;
    overflow: hidden;
}

.work-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* ホバー時の画像ズーム */
.work-item:hover .work-thumb img {
    transform: scale(1.05);
}

/* カード本文 */
.work-body {
    padding: 15px 0px 20px;
}

/* タグ (元請け/下請け) */
.work-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.tag-prime { /* 元請け工事 (メインカラーの青) */
    background-color: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 14px;

}
.tag-sub { /* 下請け工事 (今回は緑色で差別化) */
/*    background-color: #4CAF50; */
    background-color: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

/* タイトル */
.work-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* 日付 */
.work-date {
    font-size: 14px;
    color: #888;
}

/* フィルターで非表示にするスタイル */
.work-item.is-hidden {
    display: none;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 992px) {
    .work-list {
        /* タブレットでは2列 */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .work-tabs {
        margin-bottom: 40px;
        gap: 8px;
    }
    .work-tabs .tab-button {
        padding: 8px 15px;
        font-size: 14px;
    }
    .work-list {
        /* スマホでは1列 */
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* =============================
   ロードモアボタン
============================= */
.load-more-wrapper {
    text-align: center;
    margin-top: 40px; /* 実績リストとの間に余白 */
}

.load-more-button {
    background-color: var(--color-key);
    color: var(--color-bg);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-block;
}

.load-more-button:hover {
    background-color: var(--color-key-dark);
}

/* ボタンを非表示にする場合 */
.load-more-button.is-hidden {
    display: none;
}

/* -------------------------------------- */
/* 11. News Archive Grid (レスポンシブ対応 1列/2列/4列) */
/* -------------------------------------- */
.news-list-content{
    padding-top:3em;
}
.news-list-content .container{margin-bottom:6em;}
.news-page-content {
    background-color: var(--color-muted);
    padding: 80px 0; /* セクションの上下パディング */
}

/* ニュースグリッドコンテナの基本設定 (モバイルファースト: 1列) */
.news-archive-grid {
    display: grid;
    grid-template-columns: 1fr; /* デフォルトは1列 */
    gap: 20px; /* カード間のスペース (SP) */
    max-width: 1200px;
    margin: 0 auto;
}

/* ニュースカード本体 */
.news-card {
    display: block;
    background-color: var(--color-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* SPでは控えめ */
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* サムネイル画像 */
.news-thumb {
    width: 100%;
    /* 縦横比を固定: 4:2.5 */
    aspect-ratio: 4 / 2.5;
}
.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カード内のテキストエリア */
.news-meta {
    padding: 15px;
}
.news-meta .news-date {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

/* SPでのタグとタイトル、要約の配置調整 */
/* 768px以下で適用 */
.news-meta .news-tag {
    float: none;
    display: inline-block;
    margin-right: 10px;
}
.news-meta .news-title {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
}
.news-meta .news-excerpt {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* =============================
   メディアクエリ
============================= */
/* タブレット版 (2つ版): 768px以上 */
@media (min-width: 768px) {
    .news-archive-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
        gap: 25px;
    }

    /* タブレット以上では、タグを右寄せに戻す */
    .news-meta .news-tag {
        float: right; /* 右寄せにする */
        margin-right: 0;
    }
    .news-meta .news-title {
        /* タグがフロートしているのでマージンを調整 */
        margin-top: 5px;
        font-size: 16px;
    }
}

/* PC版 (4つ版): 1025px以上 */
@media (min-width: 1025px) {
    .news-archive-grid {
        grid-template-columns: repeat(4, 1fr); /* 4列に変更 */
        gap: 30px;
    }
}
/* =============================
   12. Pagination (ページネーション)
============================= */
.pagination-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* リンク間のスペース */
    margin-top:6em;
    margin-bottom:6em;


}
.page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    transition: background-color 0.3s, border-color 0.3s;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* リンク間のスペース */
    margin-top:6em;
    margin-bottom:6em;


}
.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    transition: background-color 0.3s, border-color 0.3s;
}
.page-numbers.current {
    background-color: var(--color-key); /* メインカラーの背景 */
    color: #fff;
    border-color: var(--color-key);
    font-weight: 700;
}
.page-numbers:hover:not(.current):not(.disabled):not(.dots) {
    background-color: var(--color-muted); /* 背景色を薄くする */
    border-color: var(--color-key); /* メインカラーの枠線にする */
}
.page-numbers.dots{border:none;}
/* ホバー時のスタイル：クリック可能であることを示す */
.page-link:hover:not(.is-current):not(.disabled) {
    background-color: var(--color-muted); /* 背景色を薄くする */
    border-color: var(--color-key); /* メインカラーの枠線にする */
}

/* 現在のページ */
.page-link.is-current {
    background-color: var(--color-key); /* メインカラーの背景 */
    color: #fff;
    border-color: var(--color-key);
    font-weight: 700;
}

/* 無効化された（クリックできない）リンク */
.page-link.disabled {
    color: #ccc;
    cursor: not-allowed; /* カーソルを無効に */
    opacity: 0.7;
    /* ホバー効果を削除 */
    pointer-events: none;
}
.page-ellipsis {
    font-size: 18px;
    color: #888;
}
/* =============================
   13. Article Detail (個別記事)
============================= */

/* 記事本文の最大幅を制限するためのコンテナ */
.container-narrow {
    max-width: 800px;
    margin: 0 auto;
}

/* 記事ヘッダー */
.article-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    margin-top: 8em;
}
.article-meta {
    margin-bottom: 10px;
}
.article-date {
    font-size: 14px;
    color: #888;
    margin-right: 15px;
}
.article-header h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}

/* 記事本文 (article-content) のスタイル */
.article-content {
    line-height: 1.8;
    color: #444;
}

.article-content p,
.article-content h2,
.article-content h3,
.article-content figure,
.article-content ul,
.article-content ol,
.article-content table {
    margin-bottom: 25px;
}

.article-content h2 {
    font-size: 28px;
    font-weight: 700;
    border-left: 5px solid var(--color-key);
    padding-left: 15px;
    margin-top: 40px;
}
.article-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 30px;
}

/* 画像とキャプション */
.article-content figure {
    margin: 30px 0;
    text-align: center;
}
.article-content .main-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.article-content figcaption {
    font-size: 14px;
    color: #888;
    margin-top: 10px;
}

/* リスト要素 (ul, ol) */
.article-content ul,
.article-content ol {
    padding-left: 20px;
}
.article-content ul li {
    list-style: disc; /* 黒丸 */
    margin-bottom: 8px;
}
.article-content ol li {
    list-style: decimal; /* 数字 */
    margin-bottom: 8px;
}

/* テーブル要素 */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    table-layout: fixed; /* SPで列幅が崩れるのを防ぐ */
}
.article-content th,
.article-content td {
    border: 1px solid var(--color-border);
    padding: 12px 15px;
    text-align: left;
}
.article-content th {
    background-color: var(--color-muted);
    font-weight: 700;
    color: var(--color-text);
}

/* 記事フッターのナビゲーション */
.article-footer-nav {
    margin-top: 60px;
    text-align: center;
}
/* 記事フッターのボタン（news.htmlで使ったbtn-secondaryと仮定） */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 25px;
    border: 1px solid var(--color-key);
    border-radius: var(--radius);
    color: var(--color-key);
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
}
.btn-secondary:hover {
    background-color: var(--color-key);
    color: #fff;
}


/* =============================
   Responsive (Max 768px)
============================= */
@media (max-width: 768px) {
    .article-header h1 {
        font-size: 28px;
    }
    .article-content h2 {
        font-size: 24px;
    }
    .article-content h3 {
        font-size: 18px;
    }

    /* SPでテーブルが横スクロールするように設定 */
    .article-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .article-content thead,
    .article-content tbody,
    .article-content tr,
    .article-content th,
    .article-content td {
        display: table-cell; /* 基本は table-cell に戻す */
    }

    /* 記事ヘッダーの要素を縦積みにする */
    .article-meta {
        display: flex;
        align-items: center;
        /* タグとの間にスペースを調整 */
    }
}
/* =============================
   Responsive (Max 768px)
============================= */
@media (max-width: 768px) {

    /* ... (他の既存のSPスタイル) ... */

    /* SPでのテーブル表示をリスト/カード形式に変更 */
    .article-content table {
        border: none; /* 全体の枠線を削除 */
        /* 横スクロール用の設定はすべて削除されます */
    }

    /* ヘッダーは非表示にする */
    .article-content thead {
        display: none;
    }

    /* 行 (<tr>) をブロック要素として表示し、カードのように見せる */
    .article-content tr {
        display: block;
        margin-bottom: 15px; /* カード間のスペース */
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    /* セル (<td>) をブロック要素として表示 */
    .article-content td {
        display: block;
        text-align: right; /* データは右寄せ */
        border-bottom: 1px solid var(--color-border); /* セル間の仕切り */
        position: relative;
        padding-left: 50%; /* ラベル用のスペース確保 */
        font-size: 14px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* 最後のセルは仕切りをなくす */
    .article-content tr:last-child td:last-child,
    .article-content td:last-child {
        border-bottom: none;
    }

    /* data-label 属性から列ヘッダーを疑似要素として挿入 */
    .article-content td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%; /* ラベルの幅 */
        padding-left: 15px;
        text-align: left;
        font-weight: 700;
        color: var(--color-text);
        background-color: var(--color-muted); /* ラベルの背景色 */
        height: 100%;
        display: flex;
        align-items: center;
        top: 0;
        box-sizing: border-box;
    }
}

/* PCサイズに戻った時にテーブル表示を復元するための @media (min-width: 769px) の追加 */
@media (min-width: 769px) {
    .article-content thead {
        display: table-header-group;
    }
    .article-content tr {
        display: table-row;
        margin-bottom: 0;
        border: none;
    }
    .article-content td {
        display: table-cell;
        padding-left: 15px;
        text-align: left;
        border: 1px solid var(--color-border);
    }
    .article-content td::before {
        content: none; /* SPで挿入したラベルを非表示 */
    }
}

/* =============================
   14. Related News
============================= */
.related-news-section {
    background-color: var(--color-muted); /* 背景色を薄くして区切りを明確に */
    padding: 6em 0em 6em 0em;
}

/* セクションの見出し */
.related-news-section .section-heading {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--color-text);
}

/* 関連ニュースグリッド (PC: 3列) */
.related-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px; /* ニュース一覧と同じ最大幅 */
    margin: 0 auto 50px; /* 下にボタンとの間隔を設ける */
}


/* =============================
   Responsive Media Queries for Related News
============================= */

/* タブレット版 (2つ版): 768px以上 */
@media (max-width: 1024px) {
    .related-news-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
        gap: 25px;
    }
}

/* スマートフォン版 (1つ版): 768px以下 */
@media (max-width: 768px) {
    .related-news-section .section-heading {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .related-news-grid {
        grid-template-columns: 1fr; /* 1列に変更 */
        gap: 20px;
    }
}

/* =============================
   15. Work Detail (実績詳細)
============================= */
.work-detail-page {
}

/* 実績詳細ヘッダー */
.work-detail-header {
    max-width: 900px;
    margin: 8em auto 1em;
    text-align: left;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}
.work-detail-header h1{
    font-weight: 500;
    text-align: left;
    padding-bottom: 0.75em;
}
.work-detail-header-subtitle{
    font-size: 1.2em;
    width: 40px;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #454545;
    margin-bottom: 0.75em;
}
@media (max-width: 768px) {
    .work-detail-header-subtitle{
    font-size: 0.9em;
    width: 30px;
    }
}
.work-category {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.75em;
    /*
    font-weight: 700;
    */
    margin-bottom: 15px;
}
/* タグの色の例 */
.work-category.tag-design { background-color: #007bff; }
.work-category.tag-system { background-color: #28a745; }
.work-category.tag-branding { background-color: #ff9800; }

.work-detail-header h2 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* 実績メタ情報 (テーブル風に) */
.work-meta{

}

.work-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* 横線のみ（上下） */
.work-table tr {
  border-bottom: 1px solid #ccc; /* 下線（細） */
}

.work-table tr:first-child {
  border-top: 1px solid #ccc; /* 上線（細） */
}

/* 左列（th）だけ下線を濃く */
.work-table th {
  width: 140px;
  /*
  font-weight: bold;
  */
  border-bottom: 1px solid #333; /* 濃い太めの横線 */
  padding: 2em 0em 2em 0em;
  text-align: left;
}

/* 1行目の th に上線も濃く */
.work-table tr:first-child th {
  border-top: 1px solid #333;
}

.work-table td {
  padding: 8px 10px;
}


/* --- 画像スライダーエリア --- */
.work-slider-area {
    max-width: 900px; /* 画像の最大幅 */
    margin: 0 auto 50px;
}

/* メイン画像コンテナ */
.main-slides {
    position: relative;
    margin-bottom: 15px;
    aspect-ratio: 10 / 6; /* メイン画像のアスペクト比を固定 */
    overflow: hidden;
/*
    border-radius: var(--radius);
*/
    }

.main-slides .slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* スムーズな切り替え */
    transition: opacity 0.5s ease-in-out;
}
.main-slides .slide-item.active {
    opacity: 1;
    position: relative; /* activeな要素だけ領域を占める */
}
.main-slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* サムネイルギャラリー - 横スクロール対応の修正 */
.thumbnail-gallery {
    display: flex;
    gap: 10px;
    margin-bottom: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none; /* IEとEdge */
    scrollbar-width: none;    /* Firefox */
    white-space: nowrap;
    padding: 10px 0;
    margin-top: -10px; /* paddingの相殺 */
    cursor: grab;
}


/* スクロールバー非表示のための追加（必要に応じて） */
.thumbnail-gallery::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
.thumbnail-gallery .thumbnail-item {
  width: 150px;     /* 固定幅 */
  height: 100px;    /* 固定高さ */
  object-fit: cover; /* 枠いっぱいに、中央切り取り */
  object-position: center;
/*
  border-radius: 4px;
*/
  cursor: pointer;
}

.thumbnail-item {
    /* ★全てのアイテムが並ぶように、固定幅を設定 */
    flex: 0 0 120px; /* 120pxの固定幅。画面サイズに合わせて調整可 */
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s, border 0.3s, transform 0.3s;
/*
    border-radius: 4px;
*/
    aspect-ratio: 1.5 / 1;
    object-fit: cover;
    width: auto; /* flexアイテムとしてautoに戻す */
    height: 100%;
}

.thumbnail-item:hover {
    opacity: 0.8;
}
.thumbnail-item.active {
    opacity: 1;
    border:1px solid #555;
    transform: translateY(-2px); /* 少し持ち上げてアクティブ感を強調 */
}
@media (max-width: 768px) {
    .thumbnail-gallery .thumbnail-item {
    width: 90px;     /* 固定幅 */
    height: 60px;    /* 固定高さ */
    }

}


/* 実績詳細本文（news-single.htmlのスタイルを流用） */
.work-content {
    max-width: 900px;
    margin: 0 auto 60px;
    line-height: 1.8;
    color: #444;
}
.work-content h3 {
    font-size: 1.2em;
    font-weight: 400;
    margin-top: 40px;
    margin-bottom: 15px;
    /*
    border-bottom: 2px solid var(--color-border);
    */
    padding-bottom: 5px;
    color: var(--color-text);
}
.work-content figure {
    margin: 30px 0;
    text-align: center;
}
.work-content figure img{
        width: 100%;
}
.work-content figcaption {
    font-size: 14px;
    color: #888;
    margin-top: 10px;
}

/* 実績詳細フッター（一覧へ戻るボタン）*/
.work-detail-footer {
    text-align: center;
}


/* --- レスポンシブ対応 (Max 768px) --- */
@media (max-width: 768px) {
    .work-detail-header h1{
        font-size: 1.35em;
    }
    .work-detail-header h2 {
        font-size: 28px;
    }

    /* メタ情報 */
    .work-meta dl {
        flex-direction: column;
    }
    .work-meta dl > div {
        flex-direction: column;
        border-bottom: none; /* 縦積みになったので行のボーダーは削除 */
    }
    .work-meta dt, .work-meta dd {
        flex: 1 1 100%;
        border-right: none;
        padding: 8px 15px;
    }
    .work-meta dt {
        background-color: transparent;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        padding-bottom: 0;
    }
    .work-meta dd {
        padding-top: 5px;
        text-align: left;
    }

    /* サムネイル */
    .thumbnail-gallery {
        /* 8枚は多すぎるので、モバイルでは4列にする */
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
/* サムネイルの固定幅をSP向けに小さく調整 */
    .thumbnail-item {
        flex: 0 0 80px; /* SPでは80pxの固定幅 */
    }
    .work-content h3 {
        font-size: 1.0em;
    }
    .work-table th{
        font-size: 0.9em;
    }
}
/* =============================
   16. Related Works (実績詳細の下部)
============================= */
.related-works-section {
    /* news-singleの関連ニュースセクションと統一 */
    background-color: var(--color-muted);
    padding: 6em 0em;
}

.related-works-section .section-heading {
    /* 既存のセクション見出しスタイルを流用 */
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--color-text);
}

/* 関連実績グリッド (PC: 3列) */
.related-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px;
}

/* --- work-card スタイル定義 --- */
.work-card {
    display: block;
    background-color: #fff;
/*    border-radius: var(--radius); */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.work-card .work-thumb {
    overflow: hidden;
    aspect-ratio: 4 / 2.5;
}

.work-card .work-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
}

.work-card:hover .work-thumb img {
    transform: scale(1.05);
}

.work-card .work-meta {
    padding: 20px 15px;
}

.work-card .work-category {
    /* 実績詳細ヘッダーのタグスタイルを流用 */
    display: inline-block;
    padding: 4px 8px;
/*
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
*/
    font-size: 12px;
    margin-bottom: 8px;
}

.work-card .work-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}
/* --- レスポンシブ対応 (Max 1024px) --- */
@media (max-width: 1024px) {
    .related-works-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
        gap: 25px;
    }
}

/* --- レスポンシブ対応 (Max 768px) --- */
@media (max-width: 768px) {
    .related-works-section .section-heading {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .related-works-grid {
        grid-template-columns: 1fr; /* 1列に変更 */
        gap: 20px;
    }
    .related-works-section {
         padding: 4em 0em;
    }
}
/* =============================
   16. Contact Form (お問い合わせフォーム)
============================= */
.contact-form-section {
    padding-top: 50px; /* パンくずリストとの間隔 */
}

/* フォーム全体（コンテナ） */
.form-container,
.wpcf7-form {
    max-width: 100%;
    margin: 40px auto 80px;
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg); /* 白い背景 */
}

/* 各入力グループ */
.form-group {
    margin-bottom: 25px;
}

/* ラベル */
.form-group label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text);
}

/* 必須タグ */
.required-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #dc3545; /* 赤色 */
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 3px;
    vertical-align: top;
}

/* 入力フィールド */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="tel"],
.form-container select,
.form-container textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 16px;
    transition: border-color 0.3s;
    background-color: #fff;
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--color-key); /* フォーカス時に青色に */
    outline: none;
}

/* テキストエリア */
.form-container textarea,
.wpcf7-form textarea {
    resize: vertical;
    min-height: 150px;
}

/* プライバシーポリシーのチェックボックス */
.privacy-policy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 40px;
    font-size: 14px;
}

.privacy-policy a {
    color: var(--color-key);
    text-decoration: underline;
}

/* ボタン (共通スタイルを流用) */
.btn-primary.btn-wide{
    width: 100%;
    max-width: 300px;
    margin: 0 auto; /* 中央揃え */
    display: block;
    padding: 15px 30px;
    font-size: 18px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .form-container,
    .wpcf7-form {
        padding: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

.wpcf7-turnstile{text-align:center;margin:20px 0;}
.wpcf7-submit {
    display: inline-block;
    padding: 12px 30px;
    background-color: #22419d;
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    width: 100%;
    max-width: 300px;
    margin: 0 auto; /* 中央揃え */
    display: block;
    padding: 15px 30px;
    font-size: 18px;
    cursor:pointer;
}
.wpcf7-submit:hover{background-color: #555;}
img{max-width:100%;height:auto;}

.default-page-section{padding:60px 0;line-height:1.75;color:var(--color-text);}
.default-page-section h2{font-size:1.75em;font-weight:600;color:var(--color-text);margin:3em 0 60px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 15px;}
.default-page-section h2:first-child{margin-top:0;}
.default-page-section h2:last-child{margin-bottom:0;}
.default-page-section h2 .small-text {display:block;font-size:16px;font-weight:400;color:#555;margin-top:5px;}
.default-page-section h3{margin:3em 0 1em;}
.default-page-section h4{margin:3em 0 1em;}
.default-page-section p{font-size:16px;line-height:2.0;margin-bottom:30px;text-align:justify;}
.default-page-section ul{list-style-type:disc;margin:1em 0 1em 1.5em;}
.default-page-section ul ul,
.default-page-section ul ol{margin-top:0;margin-bottom:0;}
.default-page-section ul ul{list-style-type:circle;}
.default-page-section ul ul ul{list-style-type:square;}
.default-page-section ol{margin:1.5em 0 1.5em 1.5em;}
.default-page-section ol ul,
.default-page-section ol ol{margin-top:0;margin-bottom:0;}
.default-page-section ol ol{list-style-type:lower-alpha;}
.default-page-section ol ol ol{list-style-type:lower-roman;}
/* ul, ol */
.default-page-section ul.is-style-sme-list-arrow,
.default-page-section ul.is-style-sme-list-check,
.default-page-section ul.is-style-sme-list-remark,
.default-page-section ul.is-style-sme-list-times,
.default-page-section ul.is-style-sme-ordered-list-circle,
.default-page-section ul.is-style-sme-ordered-list-square,
.default-page-section ol.is-style-sme-list-arrow,
.default-page-section ol.is-style-sme-list-check,
.default-page-section ol.is-style-sme-list-remark,
.default-page-section ol.is-style-sme-list-times,
.default-page-section ol.is-style-sme-ordered-list-circle,
.default-page-section ol.is-style-sme-ordered-list-square{list-style-type:none;}
/* ul > ul */
.default-page-section ul.is-style-sme-list-arrow ul li::before,
.default-page-section ul.is-style-sme-list-arrow ul li::after,
.default-page-section ul.is-style-sme-list-check ul li::before,
.default-page-section ul.is-style-sme-list-remark ul li::before,
.default-page-section ul.is-style-sme-list-times ul li::before,
.default-page-section ul.is-style-sme-list-times ul li::after,
.default-page-section ul.is-style-sme-ordered-list-circle ul li::before,
.default-page-section ul.is-style-sme-ordered-list-square ul li::before,
/* ul > ol */
.default-page-section ul.is-style-sme-list-arrow ol li::before,
.default-page-section ul.is-style-sme-list-arrow ol li::after,
.default-page-section ul.is-style-sme-list-check ol li::before,
.default-page-section ul.is-style-sme-list-remark ol li::before,
.default-page-section ul.is-style-sme-list-times ol li::before,
.default-page-section ul.is-style-sme-list-times ol li::after,
.default-page-section ul.is-style-sme-ordered-list-circle ol li::before,
.default-page-section ul.is-style-sme-ordered-list-square ol li::before,
/* ol > ul */
.default-page-section ol.is-style-sme-list-arrow ul li::before,
.default-page-section ol.is-style-sme-list-arrow ul li::after,
.default-page-section ol.is-style-sme-list-check ul li::before,
.default-page-section ol.is-style-sme-list-remark ul li::before,
.default-page-section ol.is-style-sme-list-times ul li::before,
.default-page-section ol.is-style-sme-list-times ul li::after,
.default-page-section ol.is-style-sme-ordered-list-circle ul li::before,
.default-page-section ol.is-style-sme-ordered-list-square ul li::before,
/* ol > ol */
.default-page-section ol.is-style-sme-list-arrow ol li::before,
.default-page-section ol.is-style-sme-list-arrow ol li::after,
.default-page-section ol.is-style-sme-list-check ol li::before,
.default-page-section ol.is-style-sme-list-remark ol li::before,
.default-page-section ol.is-style-sme-list-times ol li::before,
.default-page-section ol.is-style-sme-list-times ol li::after,
.default-page-section ol.is-style-sme-ordered-list-circle ol li::before,
.default-page-section ol.is-style-sme-ordered-list-square ol li::before{display:none;}
.default-page-section .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.default-page-section .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th{background:var(--color-muted);color:#454545;padding:15px 20px;border:none;}
.default-page-section .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td{background:transparent;padding:15px 20px;border:none;}
.default-page-section .wp-block-image :where(figcaption){margin-top:0;font-size:90%;background:#fff;padding:0.5em;}

@media (max-width: 768px) {
    .default-page-section{padding:3em 0 2em 0;}
    .default-page-section h2{font-size:1.35em;margin-bottom:40px;gap:0 5px;}
    .default-page-section p{font-size: 1.0em;line-height:1.8;margin-bottom:20px;text-indent:0;text-align:left;}
}
/*20260420*/
@media (max-width: 768px) {
	.hero-content{
		width: 90%;
	}
	.hero {
		height: 64vh !important;
	}
	.strength-section .container{
		padding:0;
	}
}