/*
Theme Name: TpacJapan-Theme
Theme URI: https://www.db-kk.com/
Description: ディービー株式会社様公式サイト用カスタムテーマ「Twenty Twenty-Five」が親テーマのため両方のテーマをサーバーに残してください
Author: popodesign
Author URI: https://popo-design.net
Template: twentytwentyfive
Version: 1.0.0
*/

/* ここにカスタムCSSを記述できます */

/* メガメニューここから
------------------------ */
/* メガメニューの画像を拡大 */
.tpac-card-img-wrap {
cursor: pointer;
  max-width: 350px;
  overflow: hidden;
  width: 100%;
}
.tpac-card-img-wrap img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.tpac-card-img-wrap:hover img {
  transform: scale(1.1); /* 拡大 */
}

/* メニュー固定 */
.wp-block-group.headerbar {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background-color: #ffffff !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    
    /* 余計なマージンをリセット */
    margin: 0 !important;
}

/* すぐ下の要素に余白を作る */
body {
    padding-top: 60px; /* ヘッダーの高さ分だけ余白を作る */
}

/* 管理バーがある時の位置調整（ログイン中用） */
.admin-bar .wp-block-group.headerbar {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    .admin-bar .wp-block-group.headerbar {
        top: 46px !important;
    }
    body { padding-top: 60px; } /* スマホ時の高さ調整 */
}

.tpac-final-wrap, .tpac-final-wrap * {
    margin: 0; padding: 0; box-sizing: border-box;
    list-style: none; 
}

.tpac-site-header {
    width: 100%; background: #fff;
    position: sticky; top: 0; z-index: 9999;
}

.tpac-header-container {
    max-width: 1250px; margin: 0 auto; padding: 0;/* 横幅コンテンツに合わせるなら20px */
    display: flex; justify-content: space-between; align-items: center;
    height: 60px; position: relative;
}

/* --- ロゴ --- */
.tpac-header-left { display: flex; align-items: center; height: 100%; }
.tpac-logo-link { display: flex; align-items: center; gap: 15px; }
.tpac-logo-img { 
    height: 50px; width: 50px; background: #7ca1c1; 
    display: flex; align-items: center; justify-content: center; 
    color: white; font-size: 10px; flex-shrink: 0;
}
.tpac-company-info {   display: flex;  flex-direction: column; gap: 0px; align-items: center;}
.tpac-brand-name { font-size: 26px; font-weight: bold; color: #002b5b; line-height: 0.3; }
.tpac-company-name { font-size: 13px; font-weight: bold; color: #002b5b; }

/* --- PC版設定 --- */
@media (min-width: 1201px) {
    .tpac-mobile-menu-btn, .tpac-mobile-menu-wrapper { display: none; }
    .tpac-pc-nav-list { display: flex; height: 60px; align-items: center; }
    .tpac-menu-item { height: 100%; display: flex; align-items: center; position: relative; }
    .tpac-menu-item > a { padding: 0 10px; color: #333; font-size: 15px; font-weight: 400; height: 100%; display: flex; align-items: center; transition: 0.3s; }
    .tpac-menu-item:hover > a { color: #1f2e6e; }
    .tpac-company-info {   display: flex;  flex-direction: row; gap: 10px; align-items: center;}

    /* PCの▼矢印 */
    .tpac-has-mega > a::after {
        content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent;
        border-top: 5px solid #333; margin-left: 8px; transition: 0.3s;
    }
    .tpac-menu-item:hover > a::after { transform: rotate(180deg); border-top-color: #1f2e6e; }

    /* メガメニュー上の▲矢印 */
    .tpac-has-mega::before {
        content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
        border-left: 10px solid transparent; border-right: 10px solid transparent;
        border-bottom: 10px solid #1f2e6e; visibility: hidden; opacity: 0; z-index: 10000;
    }
    .tpac-has-mega:hover::before { visibility: visible; opacity: 1; }

    /* メガメニュー本体 */
    .tpac-mega-content {
        position: fixed; top: 60px; left: 0; width: 100%;
        background: #1f2e6e; visibility: hidden; opacity: 0; transition: 0.3s;
    }
    .tpac-has-mega:hover .tpac-mega-content { visibility: visible; opacity: 1; }
    .tpac-mega-inner { 
    max-width: 1250px; 
    margin: 0 auto; 
    padding: 40px 20px; 
    display: grid; /* gridに変更 */
    grid-template-columns: repeat(4, 1fr); /* 4列に分割 */
    gap: 30px; 
}
    .tpac-mega-card { width: 280px; color: #fff; }
    .tpac-card-img-wrap { width: 100%; aspect-ratio: 16/9; background: #fff; margin-bottom: 10px; overflow: hidden; }
    .tpac-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .tpac-card-body { display: flex; justify-content: space-between; padding-bottom: 5px; font-weight: normal; }
    /* メガメニュー内の文字サイズ調整 */
    .tpac-card-title {
    font-size: 16px;    /* ここで数値を調整（例: 14px, 18pxなど） */
    line-height: 1.4;   /* 行間の調整 */
    display: block;     /* 改行を適切に扱うため */
}

    /* PC検索オーバーレイ */
    .tpac-pc-search-overlay {
        position: fixed; top: 60px; left: 0; width: 100%;
        background: #1f2e6e; padding: 30px 0; display: none; z-index: 9998;
    }
    .tpac-pc-search-overlay.tpac-show { display: block; }
    .tpac-search-inner { max-width: 800px; margin: 0 auto; display: flex; padding: 0 20px; }
    .tpac-search-inner input { flex: 1; padding: 15px; border: none; }
    .tpac-search-inner button { padding: 0 30px; background: #002b5b; color: #fff; border: none; cursor: pointer; }
    .tpac-search-trigger { background: none; border: none; cursor: pointer; padding: 0 20px; font-weight: 400; display: flex; flex-direction: column; align-items: center; }
}

/* --- スマホ用設定 --- */
@media (max-width: 1200px) {
    .tpac-pc-navigation, .tpac-pc-search-overlay { display: none; }
    .tpac-mobile-menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 30px; height: 30px; background: none; border: none; z-index: 10003; }
    .tpac-mobile-menu-btn span { display: block; width: 100%; height: 2px; background: #005bac; transition: 0.3s; }
    .tpac-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .tpac-active span:nth-child(2) { opacity: 0; }
    .tpac-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .tpac-mobile-menu-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; z-index: 10000; }
    .tpac-mobile-menu-wrapper.tpac-open { visibility: visible; }
    .tpac-mobile-menu-inner { position: absolute; top: 0; left: 0; width: 80%; max-width: 350px; height: 100%; background: #fff; transform: translateX(-100%); transition: 0.4s; z-index: 10002; padding-top: 60px; }
    .tpac-open .tpac-mobile-menu-inner { transform: translateX(0); }
    .tpac-mobile-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10001; }
    .tpac-mobile-search { padding: 15px 20px; }
    .tpac-mobile-search form { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
    .tpac-mobile-search input { flex: 1; padding: 10px; border: none; outline: none; }
    .tpac-mobile-search button { background: #005bac; color: #fff; padding: 0 15px; border: none; }
    .tpac-mobile-nav-list a, .tpac-acc-btn { display: block; padding: 15px 20px; color: #333; font-weight: bold; border-bottom: 1px solid #eee; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size:14px; }
    .tpac-acc-btn::after { content: "▼"; float: right; font-size: 10px; transition: 0.3s; }
    .tpac-acc-active::after { transform: rotate(180deg); }
    .tpac-acc-content { display: none; background: #f9f9f9; }
    .tpac-acc-content a { padding-left: 40px; font-weight: normal; }
}

/* メニューの背景色 */
.contactwaku {
background: linear-gradient(to bottom, #b3c9d8, #9ec1db);
}
.searchwaku {
background: #d1d7e4;
}
/* メガメニューここまで
------------------------ */

/*  サイト全体のスクロール位置を調整 */
html {
    scroll-padding-top: 100px !important;
    scroll-behavior: smooth;
}

/*  リンク先の要素そのものにも余白を指定 */
:target {
    scroll-margin-top: 100px !important;
}

/* サイト全体のURLリンク要素が枠からはみ出ないようにする */
/* リンクのハミ出し防止 */
a {
    overflow-wrap: break-word;
text-decoration: none;
}
a:hover {
  text-decoration: underline !important;
}

/* リンク付き画像にふわっと拡大エフェクト */
a img {
    transition: transform 0.4s ease;
}
/* マウスホバーで画像を拡大 透明 */
a:hover img {
    transform: scale(1.05);
filter: brightness(1.1); /* 明るさを10%アップ */
    opacity: 1 !important;   /* 透明化を完全に無効化 */
}

/* ヘッダーロゴは拡大しない */
.tpac-logo-link:hover img {
    transform: none !important;
}

/* 画像拡大してはみ出さないようにする設定 */
/* ブロックエディターの画像ブロックなどに適用 */
.wp-block-image, .wp-block-post-featured-image {
    overflow: hidden;
}

/* Safariの過敏な改行を調整　段落ブロックの基本設定 */
/* 段落の基本設定 */
.entry-content p,
.wp-block-post-content p,
.wp-site-blocks p {
    display: block;
    text-wrap: wrap; 
    overflow-wrap: anywhere;
    word-break: normal; 
}
/* 優先度を確保しつつ全コンテンツエリアに対応 */
.entry-content p.has-text-align-center,
.wp-block-post-content p.has-text-align-center { text-align: center !important; }

.entry-content p.has-text-align-right,
.wp-block-post-content p.has-text-align-right { text-align: right !important; }

.entry-content p.has-text-align-left,
.wp-block-post-content p.has-text-align-left { text-align: left !important; }

/* 見出し全体のベース設定 */
.yellow-kasen {
    position: relative;
    display: table;       /* inline-blockから変更（中央寄せしやすくするため） */
    margin-left: auto;    /* 左側の余白を自動調整 */
    margin-right: auto;   /* 右側の余白を自動調整 */
    text-align: center;
    padding-bottom: 15px; 
    color: #005b8e;       
    font-weight: bold;
}

/* 下線の設定 */
.yellow-kasen::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;          /* 文字より少し長く（お好みで調整） */
    height: 3px;          
    background-color: #ffb800;
}

/* スライダー上の余白を消す */
.n2_clear { margin-top: 0rem; }

/* 見出し線を表示 */
.news-block .wp-block-group:first-child {
    margin-bottom: -10px !important;
    /* 消えた線を表示 */
    border-bottom: 2px solid var(--wp--preset--color--accent-3) !important;
}

/* 記事リスト(ul)内の余計な線を消す */
.news-block ul.wp-block-post-template {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none !important; /* ul自体の線を消す */
}

/* 各記事(li)の下線 */
.news-block li.wp-block-post {
    margin: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #ddd !important; /* 記事ごとの細い線 */
    border-top: none !important;
    list-style: none !important;
}

/* 記事内のグループに付いている線を消す（二重線対策） */
.news-block li.wp-block-post .wp-block-group {
    border: none !important;
}


/* 検索 ボタンのデザイン */
.search-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    padding: 10px;
}

/* 検索バーの配置とアニメーション */
.search-dropdown-overlay {
    position: fixed;   /* 画面に対して固定（確実に見えるようにする） */
    top: 60px;         /* ヘッダーの高さに合わせて適宜調整してください */
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 999999;   /* 最前面に持ってくる */
    
    /* アニメーション */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

/* 表示された時の状態 */
.search-dropdown-overlay.is-open {
    max-height: 200px; /* 十分な高さを指定 */
    opacity: 1;
    padding: 30px 0;
}

/* フォーム内部のレイアウト */
.search-dropdown-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.search-form-flex {
    display: flex;
    gap: 0;
    border: 1px solid #333; /* 枠線 */
}

.search-input {
    flex: 1;
    padding: 15px;
    border: none;
    outline: none;
    font-size: 15px;
}

.search-submit-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 0 30px;
    cursor: pointer;
    font-weight: 400;
}

/* スライダー全体の親要素 */
.n2-section-smartslider {
    position: relative;
}

/* 上の線 */
.n2-section-smartslider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* これでスライダーの幅いっぱいになります */
    height: 3px;
    background-color: #658ebc;
    z-index: 10; /* 画像より上に表示 */
}

/* 下の線（修正版） */
.n2-section-smartslider::after {
    content: "";
    position: absolute;
    /* bottomを「線の太さ分」マイナスに振ることで外側に出します */
    bottom: 0px; 
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #658ebc;
    z-index: 10;
}

/* 「塗りつぶし」スタイル（is-style-fill） */
.wp-block-button.is-style-fill .wp-block-button__link {
    background: linear-gradient(to right, #6188ae, #84add3);
    color: #ffffff;            /* 白文字 */
    border: none;
    border-radius: 0;          /* 角を直角にする場合。丸めるなら 4px 等 */
    padding: 5px 50px;        /* 余白の調整 */
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s ease;
}

/* ホバー時の演出 */
.wp-block-button.is-style-fill .wp-block-button__link:hover {
    opacity: 0.8;
}

/* 「輪郭」スタイルをグラデーションに変更（is-style-outline） */
.wp-block-button.is-style-outline .wp-block-button__link {
    /* 左から右へのグラデーション（画像の色味を再現） */
    background: linear-gradient(to right, #e3bc53, #f5da7e);
    color: #000;            /* 文字は黒 */
    border: none;              /* 枠線を消してグラデーションを活かす */
    border-radius: 0;          /* 角を直角にする場合 */
    padding: 5px 50px;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    transition: filter 0.3s ease;
}

/* ホバー時に少し明るくする演出 */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    filter: brightness(1.05);
}

.sub-img{border-bottom: 3px solid #5a8fbe;}

/* 幅いっぱいの紺色ボタン */
.wp-block-button.is-style-full-navy-button {
    width: 100%;
}

.wp-block-button.is-style-full-navy-button .wp-block-button__link {
    background-color: #22303e; /* 画像に基づいた紺色 */
    color: #ffffff;
    width: 100%;
    display: block;
    text-align: center;
    border-radius: 0; /* 角を丸めない場合 */
    padding: 0.5em 1em;
    text-decoration: none; /* リンクの下線 */
    text-underline-offset: 4px;
    border: none;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

/* ホバー時の挙動 */
.wp-block-button.is-style-full-navy-button .wp-block-button__link:hover {
    background-color: #2c3e50;
    text-decoration: underline;
}

/* カラム内などでボタンが並ぶ際の隙間調整 */
.wp-block-buttons:has(.is-style-full-navy-button) {
    width: 100%;
}

/* 幅いっぱいのグレーボタン */
.wp-block-button.is-style-full-gray-button {
    width: 70%;
    margin-bottom: 1rem; /* 前後の余白調整用 */
}

.wp-block-button.is-style-full-gray-button .wp-block-button__link {
    background-color: #b8b3b3; /* 画像に基づいたグレー */
    color: #ffffff;
    width: 100%;
    display: block;
    text-align: center;
    border-radius: 0; /* 角を丸めない */
    padding: 0.1em 1em;
    text-decoration: none; /* リンクの下線 */
    text-underline-offset: 4px;
    border: none;
    font-size: 1.1rem;
    transition: opacity 0.3s ease;
}

/* ホバー時の挙動 */
.wp-block-button.is-style-full-gray-button .wp-block-button__link:hover {
    opacity: 0.8;
    color: #ffffff;
    text-decoration: underline;
}

/* TOP 産業セクションアイコンをモバイル表示時に2列表示 */
@media (max-width: 781px) {
/* 親要素の修正 */
    .wp-block-columns.san-mobile-2col {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        /* justify-contentを追加して左右の端を揃える */
        justify-content: space-between !important;
        gap: 20px 0 !important; /* 横のgapを0にし、子要素のmargin/widthで調整 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 子要素の修正 */
    .wp-block-columns.san-mobile-2col > .wp-block-column {
        /* 48%〜49%程度に設定し、余った分が自動的に中央の空きになります */
        flex-basis: 48% !important; 
        width: 48% !important;
        flex-grow: 0 !important;
        margin: 0 !important; /* 余計なマージンをリセット */
    }
    /* カラム内の画像サイズを調整 */
.wp-block-columns.san-mobile-2col .wp-block-column img {
    width: 80% !important; /* パーセント調整 */
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
}
}

/* お知らせクエリーループ内の各アイテムを整列 */
.custom-post-item {
    display: grid !important;
    /* 日付100px、タイトルは残り全部。90pxの部分はお好みで調整 */
    grid-template-columns: 90px minmax(0, 1fr) !important; 
    column-gap: 15px; /* 要素間の隙間 */
    align-items: center; 
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* 各要素の余白リセットと幅の確保 */
.custom-post-item .wp-block-post-date,
.custom-post-item .taxonomy-category.wp-block-post-terms {
    margin: 0 !important;
    white-space: nowrap;
}

/* タイトルが長い場合に自動で折り返し、日付の位置 */
.custom-post-item .wp-block-post-title {
    margin: 0 !important;
    line-height: 1.5;
    word-break: break-all;
    min-width: 0; /* Grid内での崩れ防止 */
}

/* モバイル表示では縦に並べる */
@media (max-width: 600px) {
    .custom-post-item {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
}

/* カテゴリー共通の基本スタイル */
.custom-post-item .wp-block-post-terms a {
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    width: 100%; /* 親の90pxいっぱいに広げる */
    box-sizing: border-box;
}

/* 枠に黒シャドウ */
.kuro-shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 左右のズレ, 上下のズレ, ぼかし具合, 色 */
    border: 1px solid #D1D7E4;
}

/* コピーライト */
.copy{ font-size: 13px; text-align:center; color:#fff;}

/* フッターメニュー装飾 */
.footer-nav-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  color: #fff;
  font-size: 12px;
}

.footer-nav-column {
  flex: 0 1 auto;
  min-width: 140px;
}

.footer-nav-group {
  margin-bottom: 25px;
}

.parent-label, .parent-link {
  display: block;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
  color: #fff;
  text-decoration: none;
}

.child-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.child-list a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s;
  /* 2つ目にあった設定を合体 */
  display: flex;
  align-items: flex-start; 
}

.child-list a:hover {
  opacity: 1;
  text-decoration: underline;
}
/* PC・モバイル共通設定 */

/* 親リンク・ラベルの前に「＞」を追加 */
.parent-label::before, .parent-link::before {
  content: "＞";
  font-weight: normal; /* 細く */
  font-size: 0.8em; /* 小さく */
  opacity: 0.6; /* 薄く */
  margin-right: 6px; /* テキストとの間に余白 */
  display: inline-block;
}

/* 子リンクの前に「＞」を追加 */
.child-list a::before {
  content: "＞";
  font-weight: normal; 
  font-size: 0.75em; 
  opacity: 0.5; 
  margin-right: 8px; 
  display: inline-block;
  transform: translateY(-1px); /* 位置を上下に微調整 */
  margin-top: 4px;            /* 複数行時の位置調整 */
  flex-shrink: 0;             /* アイコンが潰れないように固定 */
}

/* スマホ・タブレット表示対応 */
@media (max-width: 768px) {
  .footer-nav-container {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 20px 10px; /* 縦の隙間20px、横の隙間10px */
    padding: 30px 15px;
  }

  .footer-nav-column {
    /* 2列にするための設定：計算式 (100% - 隙間) / 2列 */
    flex: 0 0 calc(50% - 5px); 
    min-width: 0; /* 最小幅を解除して2列を優先 */
    margin-bottom: 10px;
  }

  .parent-label, .parent-link {
    font-size: 15px; /* スマホでは少しだけ小さくして収まりを良くする */
  }

  .child-list a {
    font-size: 13px;
    display: block;
    padding: 5px 0; /* タップしやすくするために上下に余白 */
  }
}

/* 下層ページ　紺色のタブ（見出し） */
.my-tab-label {
    position: absolute !important;
    top: 0 !important;
    transform: translateY(-100%);
    left: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    padding: 8px 25px !important;
    background-color: #1a2b3c !important;
    color: #ffffff !important;
    z-index: 100 !important;
    
    /* タブの角丸 上だけ丸く下は直線 */
    border-radius: 10px 10px 0 0 !important;
    border: none !important;
}

/* white-box */
.white-box {
    position: relative !important;
    padding-top: 0px !important; /* 隙間をなくす */
    overflow: visible !important;
    
    /* 紺色の太線 */
    border-top: 15px solid #1a2b3c !important; 
    
    /* 上側だけ丸める */
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    
    background-color: #ffffff !important;
    margin-top: 60px !important;
}

/* NEW装飾 */
.card-new {
    position: relative !important;
}

/* 「NEW」バッジ本体 */
.card-new::before {
    content: "NEW"; /* 表示する文字 */
    position: absolute !important;
    top: 0px !important;    /* 左上に合わせる */
    left: 0px !important;   /* 左に合わせる */
    background-color: #f3d16b !important; /* 黄色 */
    color: #000000 !important;   /* 文字色（黒） */
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 4px 20px !important;
    z-index: 10 !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2) !important;
}

/* 修正：782px以上（横並びの時）だけ中央に線を引く */
@media (min-width: 782px) {
    .vertical-line-container {
        position: relative;
        /* カラム間の隙間（ギャップ）を調整 */
        column-gap: 20px !important; 
    }

    /* 1つ目のカラムの右側に線を引く */
    .vertical-line-container > .wp-block-column:first-child {
        border-right: 1px solid #ddd; /* 線の太さと色 */
        padding-right: 20px; /* 線からテキストまでの余白 */
    }
}

/* 製品・サービス内のh1装飾 */
h1.products-h1 {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

/* 下線部分（疑似要素） */
h1.products-h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 10%; /* 文字の幅いっぱいに広がる */
    height: 2px;
    background-color: #006699;
}

/* 個別ページのh1に下線 */
h1.individual {
    display: block;        /* ブロック要素にする */
    width: fit-content;    /* 幅を文字量に合わせる */
    margin-left: auto;     /* 左マージンを自動（中央寄せ） */
    margin-right: auto;    /* 右マージンを自動（中央寄せ） */
    position: relative;
    padding-bottom: 15px;  /* 線との余白 */
    margin-bottom: 10px;
    text-align: center;
}

/* 下線（疑似要素） */
h1.individual::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;           /* 文字幅の1.4倍 */
    height: 2px;
    background-color: #006699;
}

/* 製品・サービス スマホ表示に2カラム */
@media (max-width: 781px) {
    /* 親要素：bodyを付けてWP本体のdisplay:blockを上書き */
    body div.wp-block-columns.products-mobile-2col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: none;
    }

    /* 子要素（各カラム）：各プロパティから!importantを削除 */
    body div.wp-block-columns.products-mobile-2col > div.wp-block-column {
        /* gapが10pxの場合、5px引くのが計算上の限界値 */
        flex: 0 0 calc(50% - 5px);
        width: calc(50% - 5px);
        min-width: calc(50% - 5px);
        max-width: calc(50% - 5px);
        
        box-sizing: border-box;
        
        /* 余白の調整 */
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 画像のレスポンシブ：セレクタを具体的にして上書き */
    body div.wp-block-columns.products-mobile-2col > div.wp-block-column figure,
    body div.wp-block-columns.products-mobile-2col > div.wp-block-column img {
        width: 100%;
        height: auto;
        margin: 0;
    }
}

/* クラス「move」がついたカラムブロックのみ、左右の余白を強制解除 */
.wp-block-columns.move {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 画面を縮めた際（モバイル時）の余白も念のためリセット */
@media (max-width: 781px) {
    .wp-block-columns.move {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Contact Form7全体のレイアウト調整 */
.wpcf7-form {
    max-width: 900px; /* フォームの最大幅を広げる */
    margin: 0 auto;
}

/* ラベルの装飾（文字を少し大きく、太く） */
.wpcf7-form p {
    font-weight: bold;
    margin-bottom: 1.5rem;
}

/* 入力フィールドの共通スタイル */
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select {
    width: 100%; /* 横幅を100%にして画面一杯に */
    padding: 12px 15px; /* 余白を広げて入力しやすく */
    font-size: 16px; /* iPhoneでの自動ズーム防止のため16px以上 */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    box-sizing: border-box; /* paddingを含めた幅計算 */
    margin-top: 5px;
}

/* テキストエリア（メッセージ本文）の高さを調整 */
.wpcf7-textarea {
    height: 200px;
}

/* 送信ボタンの装飾 */
.wpcf7-submit.wp-block-button__link {
    /* 提示いただいたスタイルを継承 */
    background: linear-gradient(to right, #6188ae, #84add3);
    color: #ffffff;
    border: none;
    border-radius: 0;
    padding: 10px 60px; /* フォームのバランスに合わせて少し調整 */
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s ease;
    cursor: pointer;
    appearance: none; /* ブラウザ独自のスタイルを無効化 */
    
    /* フォーム内で中央寄せにする場合 */
    margin: 20px auto;
    display: block;
    width: fit-content;
}

/* ホバー時の演出 */
.wpcf7-submit.wp-block-button__link:hover {
    opacity: 0.8;
}

/* ラジオボタンのレイアウト（横並びが見づらい場合） */
.wpcf7-radio {
    display: block;
    margin-top: 10px;
}
.wpcf7-list-item {
    display: inline-block;
    margin-right: 15px;
    font-weight: normal;
}