:root {
    --primary-color: #003366;
    --secondary-color: #007B8A;
    --accent-color: #4CAF50;
    --text-color: #333;
    --bg-light-gray: #f4f4f4;
    --font-family: 'Noto Sans JP', sans-serif;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

.section-title {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.section-title .subtitle {
    display: block;
    font-size: 1rem;
    color: var(--secondary-color);
    font-weight: normal;
}

/* Header */
.header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.logo img {
    height: 60px;
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* --- 電話番号のスタイル --- */
.header-contact {
    font-weight: bold;
}
.header-contact a {
    text-decoration: none;
color:white;
    background-color: var(--primary-color);
padding:10px;
    font-size: 1.3rem;
border-radius:15px;
}
.header-contact a:hover{
opacity:0.6;
}
/* --- 電話番号のスタイルここまで --- */

.nav-main > ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-main > ul > li {
    margin-left: 20px;
}

.nav-main > ul > li:first-child {
    margin-left: 0;
}

.nav-main ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-main ul li a:hover {
    color: var(--secondary-color);
}

.nav-main .lang-btn {
    border: 1px solid var(--primary-color);
    padding: 5px 15px;
    border-radius: 5px;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 5px 0;
}
/* --- ナビゲーション ドロップダウンメニュー --- */

/* サブメニューを持つ親要素の位置を基準にする */
.nav-main > ul > li {
    position: relative;
}

/* 「業務案内」のテキストの隣に下向き矢印を追加 */
.has-submenu > a::after {
    content: ;
    font-size: 0.7em;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block; /* after要素のtransformを有効にするため */
    transition: transform 0.2s ease-in-out;
}

/* ホバー時に矢印を回転させる */
.has-submenu:hover > a::after {
    transform: rotate(180deg);
}


/* サブメニューの基本スタイル（通常時は非表示） */
.submenu {
    /* display: none; を以下のプロパティに変更 */
    visibility: hidden; /* 表示はするが操作はできない状態 */
    opacity: 0;         /* 透明にする */
    
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    list-style: none;
    padding: 10px 0;
    margin: 10px 0 0 0; /* 隙間は維持したままでOK */
    min-width: 240px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 1100;
    
    /* ふんわりと表示/非表示にするためのアニメーション設定 */
    transition: opacity 0.2s ease-in-out, visibility 0s 0.2s;
}

/* 親メニューにホバーした時にサブメニューを表示 */
.nav-main > ul > li:hover > .submenu {
    /* display: block; を以下のプロパティに変更 */
    visibility: visible; /* 表示して操作可能にする */
    opacity: 1;          /* 不透明にする */
    
    /* 表示される際は遅延させない */
    transition: opacity 0.2s ease-in-out, visibility 0s 0s;
}


/* サブメニュー内の各項目のスタイル */
.submenu li {
    margin: 0;
}

.submenu li a {
    display: block;
    padding: 10px 20px;
    color: var(--text-color);
    white-space: nowrap; /* テキストが折り返さないように */
    transition: background-color 0.2s;
}

/* サブメニュー内の項目にホバーした時のスタイル */
.submenu li a:hover {
    background-color: var(--bg-light-gray);
    color: var(--secondary-color); /* ホバー時の文字色も変える */
}

/* レスポンシブ対応：ハンバーガーメニュー内ではドロップダウンを無効化 */
@media (max-width: 992px) {
    .has-submenu > a::after {
        display: none; /* スマホ表示では矢印を消す */
    }

     .submenu {
        display: block;         /* ハンバーガー内では常に表示状態に */
        position: static;       /* ★最重要：絶対配置を解除し、通常の流れに戻す */
        background-color: transparent; /* ★白い背景をなくす */
        box-shadow: none;       /* 影をなくす */
        border: none;           /* ボーダーをなくす */
        margin: 5px 0 10px 0;   /* 上下の余白を調整 */
        padding: 0 0 0 20px;    /* ★左側にインデント（20pxの余白）を追加 */
        width: auto;            /* 幅を自動に */
        opacity: 1;             /* 常に表示 */
        visibility: visible;    /* 常に表示 */
        transition: none;       /* PC用のtransitionを無効化 */
    }
    
    .submenu li a {
        padding: 8px 15px;      /* サブメニュー項目の余白を調整 */
        font-size: 0.9em;       /* 文字を少し小さく */
        color: #555;            /* 文字色を少し薄くして階層を表現 */
        border-radius: 4px;
    }

    .submenu li a:hover {
        background-color: #f0f0f0; /* ホバー時の背景色 */
        color: var(--text-color);
    }

    .has-submenu > a::after {
        display: none; /* スマホ表示では下向き矢印は不要 */
    }
}
/* Hero Section */
.hero {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative; /* 子要素を絶対配置するための基準 */
    overflow: hidden;   /* はみ出した画像を隠す */
}

/* 背景画像とアニメーションを設定する疑似要素 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://rc-roumu.com/wp/wp-content/uploads/2025/10/3933518_m.jpg') no-repeat center center/cover;
    z-index: -1; /* テキストの背面に配置 */

    /* アニメーションの適用 */
    animation-name: heroZoomEffect;
    animation-duration: 20s;           /* 20秒かけてアニメーション */
    animation-timing-function: ease-in-out; /* ゆっくり始まってゆっくり終わる */
    animation-iteration-count: infinite;  /* 無限に繰り返す */
    animation-direction: alternate;     /* 拡大・縮小を交互に行う */
}

/* ヒーローエリアのテキストコンテンツ（変更なし） */
.hero-content {
    /* 念のため、疑似要素より手前に来るようにz-indexを指定 */
    position: relative;
    z-index: 1;
}
.hero-content h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.cta-button {
    background-color: var(--secondary-color);
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #005f6b;
}
/* --- 下層ページのCTAボタンの余白調整 --- */
.main-content .cta-button {
display:inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* News Ticker */
.news-ticker {
    background-color: var(--bg-light-gray);
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}
.news-ticker .container {
    display: flex;
    align-items: center;
}
.news-ticker .date {
    font-weight: bold;
    margin-right: 15px;
}
.news-ticker .label {
    background-color: var(--accent-color);
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-right: 15px;
}
.news-ticker a {
    text-decoration: none;
    color: var(--text-color);
}

/* Service Categories */
.service-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: white;
    text-align: center;
}
.service-item {
    padding: 80px 20px;
    position: relative;
    overflow: hidden; /* はみ出した画像を隠す */
    color: white;
    text-align: center;
    /* ★★ ここで直接 background-image を指定しない ★★ */
}

/* 背景画像とズームアニメーション用の疑似要素 */
.service-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: inherit; を削除 */
    background-size: cover;
    background-position: center;
    z-index: -2; /* テキストとオーバーレイの更に背面 */
    transition: transform 0.4s ease-out;
}

/* オーバーレイ用の疑似要素 */
.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1; /* テキストの背面 */
    transition: background-color 0.4s ease-out;
}

/* テキストコンテンツ */
.service-item h3, .service-item p {
    position: relative;
    z-index: 1;
}

/* ホバー時に背景画像を拡大 */
.service-item:hover::after {
    transform: scale(1.1);
}

/* ホバー時にオーバーレイを少し濃くする */
.service-item:hover::before {
    background-color: rgba(0, 0, 0, 0.75);
}
.service-item.bpo::after { background-image: url('http://rc-roumu.com/wp/wp-content/uploads/2025/10/Generated-Image-October-21-2025-4_45PM.png'); }
.service-item.spot::after { background-image: url('http://rc-roumu.com/wp/wp-content/uploads/2025/10/Generated-Image-October-21-2025-4_47PM.png'); }
.service-item.subsidy::after { background-image: url('http://rc-roumu.com/wp/wp-content/uploads/2025/10/Generated-Image-October-21-2025-4_49PM.png'); }
.service-item.local-gov::after { background-image: url('http://rc-roumu.com/wp/wp-content/uploads/2025/10/Generated-Image-October-21-2025-5_10PM.png'); }

/* Client Section */
.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
.client-logos img {
    height: 50px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s;
}
.client-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Why Us Section */
.why-us {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://rc-roumu.com/wp/wp-content/uploads/2025/10/Generated-Image-October-21-2025-4_34PM.png') no-repeat center center/cover;
    padding: 100px 0;
    color: #fff;
    text-align: center;
}
.why-us h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.why-us p {
    margin-bottom: 40px;
}
.why-us-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.why-us-btn {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s;
}
.why-us-btn:hover {
    background-color: #fff;
    color: #000;
}

/* Office Scale Section */
.container-flex {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.scale-image { flex: 1; }
.scale-image img { max-width: 100%; border-radius: 8px; }
.scale-text { flex: 1.2; }
.scale-text h3 { font-size: 1.2rem; color: var(--secondary-color); }
.scale-text h4 { font-size: 1.8rem; margin-bottom: 20px; }
.scale-text p { margin-bottom: 15px; }

/* News Section */
.news-list {
    max-width: 800px;
    margin: 40px auto;
    text-align: left;
}
.news-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.news-date {
    margin-right: 20px;
    font-weight: bold;
}
.news-category {
    padding: 3px 12px;
    border-radius: 15px;
    color: #fff;
    font-size: 0.8rem;
    margin-right: 20px;
    background-color: var(--accent-color);
}
.news-category.important {
    background-color: #d32f2f;
}
.news-title {
    font-size: 1rem;
    font-weight: normal;
}
.news-title a {
    text-decoration: none;
    color: var(--text-color);
}
.btn-more {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 40px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 5px;
}

/* Offices Section */
.offices { background-color: var(--bg-light-gray); }
.office-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    text-align: left;
    margin: 40px 0;
}
.office-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.office-card h4 {
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.cta-button.large {
    margin-top: 20px;
    padding: 20px 60px;
    font-size: 1.2rem;
}

/* Footer */
.footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: 60px 0 20px;
}
.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer-logo img{
height:60px;
}
.social-icons a {
    color: #fff; text-decoration: none; border: 1px solid #fff; padding: 5px 10px; border-radius: 50%;
}
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 40px 0;
}
.link-column h4 { margin-bottom: 15px; }
.link-column ul { list-style: none; }
.link-column ul li a { color: #fff; text-decoration: none; font-size: 0.9rem; line-height: 2; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 0.8rem;
}
.policy-links a { color: #fff; text-decoration: none; margin-right: 20px; }

/* Floating Ad */
.floating-ad {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 15px;
    z-index: 1001;
    width: 250px;
    transition: opacity 0.3s, transform 0.3s;
}
.floating-ad.hidden {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}
.floating-ad .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
}
.floating-ad p {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 10px;
}
.floating-ad .ad-content img {
    width: 100%;
    border-radius: 5px;
}
.floating-ad .ad-content a {
    display: block;
    background-color: var(--secondary-color);
    color: #fff;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
}


/* --- ヒーローエリアの背景ズームインアニメーション定義 --- */
@keyframes heroZoomEffect {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.4); /* 1.4倍に拡大 */
  }
}


/* Responsive Design */
@media (max-width: 1024px) {
    .nav-main ul li { margin-left: 15px; }
    .header-right { gap: 15px; }
}

@media (max-width: 992px) {
    .nav-main { display: none; }
    .header-contact { display: none; } /* スマホ・タブレットサイズでは電話番号を非表示 */
    .hamburger { display: block; }

    .nav-main.active {
        display: block;
        position: absolute;
        top: 60px;
        right: 0;
        background: white;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .nav-main.active ul {
        flex-direction: column;
        padding: 20px;
    }
    .nav-main.active ul li {
        margin: 10px 0;
        text-align: center;
    }
    .hero h1 { font-size: 2rem; }
    .container-flex { flex-direction: column; }
    .office-grid, .footer-links { grid-template-columns: 1fr 1fr; }
    .service-categories { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .section-padding { padding: 60px 0; }
    .footer-bottom { flex-direction: column; gap: 10px; }
    .news-item { flex-direction: column; align-items: flex-start; gap: 5px; }
    .why-us-nav { flex-direction: column; gap: 10px; align-items: center; }
    .why-us-btn { width: 80%; }
}

@media (max-width: 576px) {
    .service-categories { grid-template-columns: 1fr; }
    .office-grid, .footer-links { grid-template-columns: 1fr; }
}




/* 下層ページ */

/* パンくずリスト */
.breadcrumbs {
    background-color: #f8f8f8;
    padding: 15px 0;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
}
.breadcrumbs a {
    text-decoration: none;
    color: var(--secondary-color);
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

/* メインコンテンツエリアのコンテナ */
.page-content {
    padding-top: 50px;
    padding-bottom: 80px;
}

/* メインコンテンツ内のスタイル */
.main-content h1 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.main-content hr {
    border: 0;
    border-top: 2px solid var(--secondary-color);
    margin-bottom: 30px;
}
.main-content .content-section {
    margin-bottom: 40px;
    max-width: 800px; /* 本文の最大幅を設定して読みやすくする */
    margin-left: auto;
    margin-right: auto;
}
.main-content h2 {
    font-size: 1.6rem;
    color: var(--primary-color);
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.main-content .feature-title {
    font-size: 1.2rem;
    padding-left: 15px;
    border-left: 5px solid var(--secondary-color);
    margin: 25px 0 15px;
}

/* 下部CTAブロック */
.cta-block {
    margin-top: 60px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://placehold.co/800x200/5499C7/ffffff?text=CTA+Background') no-repeat center center/cover;
    padding: 40px;
    text-align: center;
    border-radius: 8px;
    max-width: 900px; /* CTAブロックの最大幅 */
    margin-left: auto;
    margin-right: auto;
}
.cta-block .cta-content {
    color: #fff;
}
.cta-block p {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}
.cta-block a {
    display: inline-block;
    background-color: #f39c12;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.cta-block a:hover {
    background-color: #e67e22;
}

/* レスポンシブ対応 (下層ページ) */
@media (max-width: 768px) {
    .main-content h1 {
        font-size: 1.8rem;
    }
    .main-content h2 {
        font-size: 1.4rem;
    }
    .cta-block p {
        font-size: 1.2rem;
    }
}


/* --- 事務所概要テーブルのスタイル --- */
.office-profile-table {
    width: 100%;
    border-collapse: collapse; /* ボーダー間の隙間をなくす */
    margin-top: 20px;
}

.office-profile-table th,
.office-profile-table td {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: left;
    vertical-align: top; /* セル内のテキストを上揃えに */
}

.office-profile-table th {
    background-color: #f8f8f8; /* 見出しセルの背景色 */
    font-weight: bold;
    width: 25%; /* 見出しセルの幅を指定 */
}

/* レスポンシブ対応：スマホ表示 */
@media (max-width: 768px) {
    .office-profile-table th,
    .office-profile-table td {
        display: block; /* 縦並びにする */
        width: 100%; /* 幅を100%に */
        border: none;
        padding: 10px 0;
    }
    
    .office-profile-table tr {
        border-bottom: 1px solid #ddd; /* 各項目の区切り線 */
        display: block;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    
    .office-profile-table tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .office-profile-table th {
        background-color: transparent;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
}
.page-id-184 .wpcf7 { /* このページのフォームに限定 */
    max-width: 720px; /* フォーム全体の最大幅 */
    margin: 2em auto;   /* 上下に余白、左右は中央寄せ */
    padding: 2em 2.5em; /* フォームの内側の余白 */
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* 角を少し丸くする */
    background-color: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.contact-title{
text-align:center;
margin-top:30px;

}
.flx565{
margin:0 auto;
}
/* --- 各入力項目（ラベルとフィールドのセット） --- */
.wpcf7-form p {
    margin-bottom: 1.8em; /* 各項目の下の余白を広めに */
}

/* --- ラベルのスタイル --- */
.wpcf7-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.6em; /* ラベルと入力欄の間の余白 */
    color: #333;
    font-size: 15px;
}

/* --- 必須マーク「*」のスタイル --- */
.wpcf7-form .wpcf7-validates-as-required::after {
    content: "必須";
    font-size: 12px;
    background: #c7254e;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}
.wpcf7-form span.wpcf7-not-valid-tip {
    font-size: 13px; /* エラーメッセージの文字サイズ */
}


/* --- テキスト入力欄、メールアドレス欄、テキストエリア共通のスタイル --- */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* --- 入力欄にフォーカスした時のスタイル --- */
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus {
    border-color: #0073aa; /* サイトの雰囲気に合わせた青色 */
    outline: none;
    box-shadow: 0 0 8px rgba(0, 115, 170, 0.3);
}

/* --- テキストエリアの高さ調整 --- */
.wpcf7-form-control.wpcf7-textarea {
    height: 160px;
    resize: vertical; /* 縦方向のみリサイズ可能に */
}

/* --- 送信ボタンのスタイル --- */
.wpcf7-form-control.wpcf7-submit {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 2.5em auto 0;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #0073aa; /* クリックしたくなる青色 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

/* --- 送信ボタンにマウスを乗せた時のスタイル --- */
.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #005a87; /* 少し濃い青 */
    transform: translateY(-2px); /* 少し浮き上がる効果 */
}

/* --- 送信後のメッセージのスタイル --- */
.wpcf7-response-output {
    margin: 2em 0 0;
    padding: 1em 1.5em;
    border-radius: 5px;
    font-size: 15px;
}

/* --- スマートフォン向けの調整 --- */
@media screen and (max-width: 768px) {
    .page-id-184 .wpcf7 {
        padding: 1.5em; /* スマホでは内側の余白を少し狭く */
    }

    .wpcf7-form-control.wpcf7-submit {
        font-size: 16px;
        padding: 12px 15px;
    }
}
/* --- ピックアップサービスセクション (ロゴ用に調整版) --- */
.pickup-service {
    background-color: #f8f9fa;
}

.pickup-container {
    display: grid;
    /* 左(ロゴ):右(テキスト) = 1:2 の比率に変更 */
    grid-template-columns: 1fr 2fr;
    gap: 50px; /* 間の余白を少し広げる */
    align-items: center;
}

/* 左側のロゴエリアのスタイル */
.pickup-banner {
    text-align: center; /* ロゴを中央に配置 */
}

.pickup-banner .logo-wrapper {
    width: 200px;  /* ロゴの最大幅 */
    height: 200px; /* ロゴの最大高さ */
    margin: 0 auto; /* 中央揃え */
    border-radius: 50%; /* 完全な円にする */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* ロゴ背景が透過の場合の背景色 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pickup-banner .logo-wrapper:hover {
    transform: scale(1.05) translateY(-5px); /* ホバーで少し拡大して浮き上がる */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.pickup-banner img {
    max-width: 100%;
    height: auto;
    display: block;
margin: 0 auto;
}


/* 右側のテキストエリアのスタイル（変更なし）*/
.pickup-text .pickup-subtitle {
    font-size: 1rem;
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: 5px;
}

.pickup-text .pickup-title {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

.pickup-text .pickup-catchphrase {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 30px;
}

/* --- レスポンシブ対応 (ピックアップサービス) --- */
@media (max-width: 768px) {
    .pickup-container {
        grid-template-columns: 1fr; /* 1カラムレイアウトに */
        gap: 30px;
        text-align: center; /* テキストも中央揃えに */
    }

    /* スマホ表示ではロゴサイズを少し調整 */
    .pickup-banner .logo-wrapper {
        width: 180px;
        height: 180px;
    }

    .pickup-text .pickup-title {
        font-size: 1.8rem;
    }

    .pickup-text .pickup-catchphrase {
        font-size: 1.3rem;
    }
.pickup-banner img {
    width: 100%;
max-width:350px;

}
}