/*
Theme Name: パソコンレスキュー
*/

/* --- 基本的なリセットと共通設定 --- */
body {
	margin: 0;
	font-family: sans-serif; /* 基本フォント（後で調整） */
	color: #333;
	line-height: 1.6;
}

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

a {
	text-decoration: none;
	color: #333;
}
a:hover {
	opacity: 0.7;
}

/* 画面幅を制御するコンテナ */
.container {
	max-width: 1100px; /* PCでの最大幅（任意） */
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;  /* スマホ用の余白 */
	padding-right: 15px; /* スマホ用の余白 */
}

/* --- 1. ヘッダー (header.php) --- */
.site-header {
	padding: 15px 0;
	border-bottom: 1px solid #eee;
	position: relative; /* ★これを必ず追加してください */
    z-index: 1000;      /* ★ヘッダー自体を前面に */
}

.site-header .header-inner {
	display: flex; /* ロゴとナビを横並びにする */
	justify-content: space-between; /* 両端に配置 */
	align-items: center; /* 上下中央揃え */
}

.site-logo {
	/* ロゴ画像のサイズ調整など（必要に応じて） */
	flex-shrink: 0; /* 縮まないようにする */
}
.site-logo img {
	max-height: 40px; /* ロゴの高さを制限（任意） */
}

.global-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex; /* メニュー項目を横並びにする */
}

.global-navigation li {
	margin-left: 25px; /* メニュー間の余白 */
}
/* --- ドロップダウンメニューの設定 --- */

/* --- ドロップダウンメニューの設定 (修正版) --- */

/* 親メニューのリスト項目 */
.global-navigation li {
    position: relative; /* 子メニューの基準位置 */
}

/* 親メニューのリンクの矢印 */
.global-navigation li .arrow {
    font-size: 0.7em;
    margin-left: 5px;
    vertical-align: middle;
}

/* --- サブメニュー（ドロップダウン部分） --- */
.global-navigation .sub-menu {
    display: none; /* 最初は非表示 */
    position: absolute; /* 親メニューに対して絶対配置 */
    top: 100%; /* 親メニューの真下に配置 */
    left: 0;
    
    /* デザイン・サイズ調整 */
    background-color: #fff;
    width: 280px; /* ★重要: 横幅を固定する */
    min-width: 280px;
    padding: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    border-top: 2px solid #007bff;
    z-index: 999;
    
    /* 親の横並び設定を打ち消して、ブロック要素にする */
    flex-direction: column; 
}

/* ホバー時の挙動：表示する */
.global-navigation li:hover .sub-menu {
    display: block;
}

/* サブメニュー内のリスト項目（縦並びにする） */
.global-navigation .sub-menu li {
    display: block; /* ★重要: ブロック要素にして縦に積む */
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #eee;
}
.global-navigation .sub-menu li:last-child {
    border-bottom: none;
}

/* サブメニュー内のリンクスタイル */
.global-navigation .sub-menu a {
    display: block;
    padding: 12px 20px;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left; /* 左寄せ */
    text-decoration: none;
    transition: background-color 0.3s;
    
    /* ★重要: 文字が潰れないようにする */
    white-space: normal; 
    letter-spacing: normal;
}

/* サブメニューのリンクホバー時 */
.global-navigation .sub-menu a:hover {
    color: #007bff;
}


/* --- 
* * 4. レスポンシブ対応 (スマホ / ハンバーガーメニュー) 
* * --- */

/* --- メニューボタンの基本スタイル（PCでは隠す） --- */
.menu-toggle {
	display: none; /* PCでは非表示 */
	background: none;
	border: none;
	cursor: pointer;
	width: 30px;
	height: 30px;
	position: relative;
	padding: 0;
}
.menu-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #333;
	position: absolute;
	left: 0;
	transition: all 0.3s;
}
.menu-toggle span:nth-child(1) { top: 4px; }
.menu-toggle span:nth-child(2) { top: 14px; }
.menu-toggle span:nth-child(3) { top: 24px; }

/* スマホ表示時 (768px以下) の設定 */
@media (max-width: 768px) {

	/* ヘッダー配置 */
	.site-header .header-inner {
		/* ロゴとボタンを横並び、両端配置にする */
		display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
	}

	/* ボタンを表示 */
	.menu-toggle {
		display: block;
		z-index: 1100;
	}

	/* ナビゲーション（メニュー本体）のスタイル */
	.global-navigation {
		display: none; /* 最初は隠す */
        position: absolute;
        top: 100%; /* ヘッダーのすぐ下 */
        left: 0;
        width: 100%; /* 画面横幅いっぱい */
        background-color: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 100vh 0 100vh rgba(0,0,0,0.5); /* メニュー外を暗くする */
        
        /* ★重要: メニューが縦に長くなってもスクロールできるようにする */
        max-height: calc(100vh - 60px); 
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1000;
	}

	/* ボタンが押された時 (.is-active) にメニューを表示 */
	.global-navigation.is-active {
		display: block;
	}

	/* メニューリストのスタイル */
	.global-navigation ul {
        flex-direction: column; /* 縦並び */
        padding: 0;
        margin: 0;
    }
	.global-navigation li {
        margin-left: 0;
        width: 100%;
        border-bottom: 1px solid #eee;
    }
	/* 親リンク */
    .global-navigation > ul > li > a {
        display: block;
        padding: 15px 20px;
        color: #333;
        font-weight: bold;
    }

	/* ドロップダウンメニュー（サブメニュー）のスマホ対応 */
    .global-navigation .sub-menu {
        display: block !important; /* 常時表示（アコーディオンにしない場合） */
        position: static !important; /* 絶対配置を解除して、親要素の中に納める */
        width: 100% !important; /* PC用の280px固定を解除し、画面幅に合わせる */
        min-width: auto !important; /* PC用のmin-widthを解除 */
        
        box-shadow: none;
        border-top: none;
        background-color: #f2f5f7; /* 背景色を少し変えて階層を分かりやすく */
        padding: 0;
        margin: 0;
        opacity: 1 !important; /* PC用で透明にしている場合のリセット */
        visibility: visible !important;
        transform: none !important;
    }

    /* サブメニュー内のリストアイテム */
    .global-navigation .sub-menu li {
        border-bottom: 1px solid #e6e6e6;
        margin: 0;
    }

    /* サブメニュー内のリンク */
    .global-navigation .sub-menu a {
        padding: 12px 20px 12px 30px; /* 左の余白を増やして、インデント（字下げ）をつける */
        font-size: 0.85rem;
        color: #555;
    }

    /* ×ボタンのアニメーション */
    .menu-toggle.is-active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}


/* --- 2. フッター (footer.php) --- */
.site-footer {
	background-color: #f9f9f9; /* フッターの背景色（画像に近い色） */
	padding-top: 40px;
}

/* フッターの3カラムレイアウト */
.footer-widgets {
	display: grid; /* グリッドレイアウトを採用 */
	grid-template-columns: 1fr 1fr 1fr; /* 3等分のカラム */
	gap: 30px; /* カラム間の隙間 */
}

/* スマホでは縦積みにする（レスポンシブ対応） */
@media (max-width: 768px) {
	.footer-widgets {
		grid-template-columns: 1fr; /* 1カラムにする */
	}
}

.footer-widget {
	font-size: 0.9rem;
}
.footer-widget .widget-title {
	font-size: 1rem;
	font-weight: bold;
	margin-top: 0;
}
.footer-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-widget ul li {
	margin-bottom: 8px;
}

/* 法律に基づく表示 */
.legal-link {
	margin-top: 20px;
}

/* ページトップへ戻るボタン（右下に固定） */
#page-top-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background-color: #ccc; /* 画像のグレー */
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* CSSで「^」を描画 */
#page-top-btn::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(2px) rotate(-45deg);
}

/* コピーライト */
.copyright {
	background-color: #333; /* 画像の濃いグレー */
	color: #fff;
	padding: 15px 0;
	margin-top: 40px;
	text-align: center;
	font-size: 0.8rem;
}
.copyright p {
	margin: 0;
}

/* --- 
* * 3. フロントページ (front-page.php) 
* * --- */

/* --- 3-1. 共通セクション設定 --- */
.section-padding {
	padding-top: 60px;
	padding-bottom: 60px;
}
.bg-light-gray {
	background-color: #f7f7f7;
}

/* セクションの共通見出し */
.section-category {
	font-size: 0.9rem;
	color: #007bff; /* 例: 青色（画像に合わせて変更してください） */
	font-weight: bold;
	text-transform: uppercase;
	margin: 0;
}
.section-title {
	font-size: 2.2rem;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 30px;
}

/* 共通ボタン */
.btn {
	display: inline-block;
	padding: 10px 25px;
	font-weight: bold;
	border-radius: 5px;
	text-align: center;
	transition: all 0.3s;
}
/* 画像の青いボタン */
.btn-primary {
	background-color: #007bff; /* 画像の青 */
	color: #fff;
	border: 2px solid #007bff;
}
.btn-primary:hover {
	background-color: #0056b3;
	color: #fff;
}
/* 画像の白いボタン（枠線あり） */
.btn-secondary {
	background-color: #fff;
	color: #333;
	border: 2px solid #ccc;
}
.btn-secondary:hover {
	background-color: #f8f8f8;
	color: #333;
}


/* --- 3-2. ヒーローエリア (.hero-area) --- */
.hero-area {
	/* * ヒーロー画像のパスを正しく指定してください。
	* CSSファイルからの相対パスか、ルートパスで指定します。
	* 例: background-image: url('../images/hero-bg.jpg'); 
	*/
	background-image: url('./images/hero-bg.jpg'); /* CSSからの相対パス */
	background-size: cover;
	background-position: center;
	min-height: 500px;
	padding: 80px 0;
	display: flex;
	align-items: center;
	color: #fff; /* 背景が暗いので文字は白 */
}
.hero-content {
	max-width: 600px;
}
.hero-title {
	font-size: 2.8rem;
	font-weight: bold;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	margin-top: 0;
	line-height: 1.3;
}
.hero-description {
	font-size: 1.2rem;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	margin-bottom: 30px;
}
.hero-buttons .btn {
	margin-right: 15px;
	padding: 15px 30px;
	font-size: 1.1rem;
	max-width: 100%;
	box-sizing: border-box;
}
/* ヒーローの白ボタンは特別（背景が暗いため） */
.hero-area .btn-secondary {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
}
.hero-area .btn-secondary:hover {
	background-color: rgba(255,255,255,0.1);
	color: #fff;
}

/* --- 3-3. お知らせ (.info-section) --- */
.info-list {
	border-top: 1px solid #eee;
}
.info-item {
	display: flex;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid #eee;
}
.info-item time {
	font-weight: bold;
	margin-right: 25px;
	flex-shrink: 0; /* 日付が縮まないように */
}

/* --- 3-4. サービス紹介 (.service-intro-section) --- */
.speech-bubble {
	/* 吹き出しのスタイル（画像参照） */
	position: relative;
	background: #fff;
	border: 2px solid #ccc;
	padding: 15px;
	border-radius: 10px;
	max-width: 400px;
	margin-bottom: 30px;
}
.speech-bubble p {
	margin: 0;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}
.speech-bubble::after, .speech-bubble::before {
	/* 吹き出しの「しっぽ」 */
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.speech-bubble::after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 10px;
	margin-left: -10px;
}
.speech-bubble::before {
	border-color: rgba(204, 204, 204, 0);
	border-top-color: #ccc;
	border-width: 13px;
	margin-left: -13px;
}

.service-problems {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}
.problem-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.problem-list li {
	font-size: 1.1rem;
	margin-bottom: 10px;
}
.problem-list li span { /* チェックマーク */
	color: #007bff; /* 青色 */
	font-weight: bold;
	margin-right: 10px;
}
.problem-image {
	max-width: 500px;
}

/* --- 3-5. 主なパソコンサービス (.main-services-section) --- */
.service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* PCでは4カラム */
	gap: 20px;
}
.service-card {
	border: 1px solid #eee;
	padding: 20px;
	text-align: center;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.service-icon {
	/* アイコン用のスペース。実際のアイコンはSVGや画像で配置 */
	width: 90px;
	height: 90px;
	border-radius: 50%;
	margin: 0 auto 15px auto;
}
.service-card h3 {
	font-size: 1.2rem;
	margin-top: 0;
}
.service-card p {
	font-size: 0.9rem;
	color: #555;
	min-height: 80px; /* カードの高さを揃えるため（任意） */
}
.btn-detail {
	background-color: #f0f0f0;
	color: #333;
	font-size: 0.9rem;
	padding: 8px 20px;
	border: 1px solid #ddd;
}

/* --- 3-6. 訪問サポート CTA (.cta-section) --- */
.cta-section {
	background-image: url('../images/cta-bg.jpg'); /* 背景画像 */
	background-size: cover;
	background-position: center;
	padding: 40px 0;
	text-align: center;
	color: #fff; /* 文字色（背景による） */
}
.cta-text {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0 0 20px 0;
}
.cta-buttons .btn {
	margin: 0 10px;
	padding: 15px 30px;
	font-size: 1.1rem;
}
.btn-cta-phone {
	background-color: #007bff; /* 青 */
	color: #fff;
	border: 2px solid #007bff;
}
.btn-cta-mail {
	background-color: #fff;
	color: #333;
	border: 2px solid #fff;
}

/* --- 3-7. サービスの特徴 (.features-section) --- */
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* PCでは3カラム */
	gap: 30px;
}
.feature-card {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	overflow: hidden; /* 画像のはみ出し防止 */
}
.feature-card p, .feature-card h3 {
	padding-left: 20px;
	padding-right: 20px;
}
.feature-number {
	font-weight: bold;
	color: #aaa;
	margin-top: 20px;
	margin-bottom: 5px;
}
.feature-main-title {
	font-size: 1.8rem;
	margin-top: 0;
}
.feature-main-title.red { /* 「即日対応！！」用 */
	color: #e60000;
}
.feature-description {
	font-size: 0.9rem;
	color: #333;
}
.highlight { /* 黄色いハイライト（画像参照） */
	background: linear-gradient(transparent 60%, #ffff99 60%);
	font-weight: bold;
}
.feature-image img {
	width: 100%;
	height: auto;
	display: block; /* 画像下の余白消し */
	margin-top: 20px;
}

/* --- 3-8. サービスの流れ (.service-flow-section) --- */
.flow-intro-text {
	font-size: 0.9rem;
	max-width: 800px;
	margin: 0 auto 30px auto;
	text-align: center;
}
.flow-steps {
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin-bottom: 30px;
	text-align: center;
}
.flow-steps .step {
	flex: 1;
	padding: 10px;
	font-weight: bold;
	position: relative;
}
/* ステップの数字 */
.flow-steps .step span {
	display: block;
	font-size: 1.5rem;
	color: #007bff;
	margin-bottom: 5px;
}
/* ステップ間の矢印 */
.flow-steps .step:not(:last-child)::after {
	content: '→';
	position: absolute;
	right: -15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: #ccc;
}

.flow-cta {
	text-align: center;
	margin-bottom: 40px;
}
.service-compare-table {
	margin-top: 40px;
}
.service-compare-table img{
	max-width: 650px;
	height: auto;
	margin: 0 auto;
	display: block;
}
.service-compare-table table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}
.service-compare-table th, 
.service-compare-table td {
	border: 1px solid #ccc;
	padding: 10px;
}
.service-compare-table th {
	background-color: #f0f0f0;
}
/* 比較表の記号 */
.service-compare-table span {
	font-size: 1.5rem;
	font-weight: bold;
}
.service-compare-table span[data-mark="◎"] { color: #007bff; }
.service-compare-table span[data-mark="○"] { color: #333; }
.service-compare-table span[data-mark="△"] { color: #999; }
.service-compare-table span[data-mark="×"] { color: #ccc; }

.speech-bubble.bottom-bubble {
	/* 流れのセクションの最後にある吹き出し */
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	margin-bottom: 0;
}

/* --- 3-9. ご依頼頂く前に (.pre-order-notes-section) --- */
.notes-content {
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 30px;
	margin-bottom: 30px;
}
.public-payment-info {
	text-align: center;
	margin-bottom: 20px;
}
.public-payment-desc {
	font-size: 0.9rem;
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}

/* --- 3-10. アクセス (.access-section) --- */
.access-section .speech-bubble {
	/* 他の吹き出しと違い、左寄せの想定 */
	margin-left: 0;
	max-width: 300px;
}
.access-section .container .flex-gr{
	display: flex;
	gap: 50px;
}
.office-info, .access-details {
	padding-left: 20px;
}
.highlight-link {
	background-color: #f0f0f0;
	border-bottom: 2px solid #007bff;
	font-weight: bold;
}
/* --- モバイル対応: アクセスセクション --- */
@media (max-width: 768px) {
    
    /* 1. Flexboxを縦並びに変更 */
    .access-section .container .flex-gr {
        flex-direction: column; /* 横並びから縦並びへ */
        gap: 30px; /* 余白を少し詰める */
    }

    /* 2. Googleマップ(iframe)のレスポンシブ化 */
    .access-section .left iframe {
        width: 100%; /* 幅を親要素いっぱいに */
        height: 300px; /* スマホで見やすい高さに調整（任意） */
    }

    /* 3. 左右のコンテナの幅を100%に */
    .access-section .flex-gr .left,
    .access-section .flex-gr .right {
        width: 100%;
    }

    /* 4. 吹き出しの幅調整（必要であれば） */
    .access-section .speech-bubble {
        max-width: 100%; /* スマホでは画面幅いっぱいに広げる */
    }
}

/* --- 3-11. 採用情報 CTA (.recruit-cta-section) --- */
.recruit-cta-section {
	background-image: url('../images/recruit-bg.png'); /* 背景画像 */
	background-size: cover;
	background-position: center;
	padding: 60px 0;
	text-align: center;
}
.btn-recruit {
	background-color: #fff;
	color: #007bff;
	border: 2px solid #007bff;
	padding: 15px 40px;
	font-size: 1.1rem;
	font-weight: bold;
}
.btn-recruit:hover {
	background-color: #f0f8ff;
}


/* --- 
* * 4. レスポンシブ対応 (スマホ) 
* * --- */
@media (max-width: 768px) {
	/* --- 共通 --- */
	.section-padding {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.section-title {
		font-size: 1.8rem;
	}

	/* --- ヘッダー --- */
	.site-header .header-inner {
		gap: 15px;
	}
	.global-navigation ul {
		flex-wrap: wrap; /* メニューがはみ出たら折り返す */
		justify-content: center;
		gap: 10px;
	}
	.global-navigation li {
		margin-left: 10px;
	}

	/* --- ヒーロー --- */
	.hero-area {
		min-height: 300px;
		padding: 40px 0;
		text-align: center;
	}
	.hero-title {
		font-size: 2rem;
	}
	.hero-buttons {
		display: flex;
		flex-direction: column; /* ボタンを縦積みに */
		gap: 15px;
	}
	.hero-buttons .btn {
		margin-right: 0;
		width: 100%;
	}

	/* --- サービス紹介 --- */
	.service-problems {
		flex-direction: column; /* リストと画像を縦積みに */
	}
	.problem-image {
		order: -1;
		max-width: 500px;
	}

	/* --- 主なサービス（グリッド） --- */
	.service-grid {
		grid-template-columns: repeat(2, 1fr); /* スマホでは2カラム */
	}

	/* --- CTA --- */
	.cta-buttons {
		display: flex;
		flex-direction: column; /* ボタンを縦積みに */
		gap: 15px;
		padding: 0 15px;
	}

	/* --- サービスの特徴（グリッド） --- */
	.features-grid {
		grid-template-columns: 1fr; /* スマホでは1カラム */
	}

	/* --- サービスの流れ --- */
	.flow-steps {
		flex-direction: column; /* ステップを縦積みに */
		gap: 15px;
	}
	.flow-steps .step:not(:last-child)::after {
		content: '↓'; /* 矢印を下に変更 */
		right: 50%;
		top: 100%;
		transform: translateX(50%) translateY(5px);
	}
	.service-compare-table {
		/* テーブルはスマホで崩れやすいので、横スクロールを許可 */
		overflow-x: auto;
	}

	/* --- フッター --- */
	/* (前回記述済みだが、再掲) */
	.footer-widgets {
		grid-template-columns: 1fr; /* スマホでは1カラム */
	}
}

/* 画面がさらに狭い場合 (例: 480px以下) */
@media (max-width: 480px) {
	/* --- 主なサービス（グリッド） --- */
	.service-grid {
		grid-template-columns: 1fr; /* 1カラムにする */
	}
}

/* --- 
* * 5. 会社案内ページ (page-company.php) 
* * --- */

/* --- 5-1. ページタイトルバナー --- */
.page-title-banner {
	background-color: #333; /* 画像の黒い背景 */
	color: #fff; /* ★追加: 文字色を白に */
	padding: 80px 0;
	margin-bottom: 40px;
}
.page-title-banner h1 {
	font-size: 2rem;
	margin: 0;
	text-align: center;
}

/* --- 5-2. 会社概要の導入文 --- */

.profile-intro-text {
	max-width: 800px; /* 横幅を制限して読みやすく */
	margin: 0 auto;
	text-align: center;
	line-height: 1.8;
}

/* --- 5-3. 会社概要テーブル (セクション全体) --- */
.company-profile-table {
	padding-top: 80px; /* ★調整: 吹き出し上部の余白を確保 */
	position: relative; /* 吹き出しをセクションに対して絶対配置するため */
	z-index: 1; /* 吹き出しが前面に来るように */
}
/* 吹き出しの調整 */
.company-profile-table .speech-bubble {
	background: #007bff; /* ★修正: 青色に */
	border: none; /* ★修正: 枠線を消す */
	color: #fff; /* ★修正: 文字色を白に */
	max-width: 300px; /* ★調整: 横幅 */
	padding: 10px 20px; /* ★調整: 余白 */
	font-size: 1rem; /* ★調整: フォントサイズ */
	position: absolute; /* ★追加: 絶対配置 */
	top: 0; /* ★追加: セクションの最上部に */
	left: 50%; /* ★追加: 中央寄せ */
	transform: translateX(-50%) translateY(-50%); /* ★追加: 中央寄せの微調整と上方向への移動 */
	z-index: 10; /* 他の要素より手前に */
}
.company-profile-table .speech-bubble::after {
	/* 吹き出しのしっぽ（画像に合わせて色と位置を調整） */
	border-top-color: #007bff; /* ★修正: 青色に */
	top: 99%; /* ★調整: しっぽが吹き出しのすぐ下に来るように */
}
.company-profile-table .speech-bubble::before {
	/* beforeは不要、またはbackground-colorと同じ色に */
	border-top-color: #007bff; /* ★修正: 青色に */
	top: 99%;
}

.profile-table-wrapper {
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	margin-top: 0; /* ★調整: 吹き出しの位置調整のため、wrapperのmargin-topを0に */
}

.profile-table {
	width: 100%;
	border-collapse: collapse;
}

.profile-table th,
.profile-table td {
	padding: 20px;
	border-bottom: 1px solid #eee;
	text-align: left;
	vertical-align: top;
	font-size: 0.95rem; /* ★調整: フォントサイズ */
	color: #333; /* ★追加: デフォルトの文字色 */
}

.profile-table th {
	/* 画像の薄い水色/緑色の背景 */
	background-color: #e8f5fb; /* ★修正: 画像により近い水色 */
	font-weight: normal; /* ★修正: 太字ではなく通常のフォント */
	width: 25%;
	color: #555; /* ★調整: 見出しの文字色 */
}

/* テーブルの最後の行の下線を消す */
.profile-table tr:last-child th,
.profile-table tr:last-child td {
	border-bottom: none;
}

/* 事業内容のリスト */
.profile-table td ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.profile-table td ul li {
	margin-bottom: 8px;
}
.profile-table td ul li:last-child {
	margin-bottom: 0;
}

/* --- 5-4. 会社案内ページのレスポンシブ (スマホ) --- */
@media (max-width: 768px) {
	.page-title-banner {
		padding: 25px 0;
		margin-bottom: 25px;
	}
	.page-title-banner h1 {
		font-size: 1.5rem;
	}

	/* テーブルをスマホ対応 (スタック型) */
	.profile-table th,
	.profile-table td {
		display: block; /* 縦積みにする */
		width: 100%;
		box-sizing: border-box; /* paddingを含めて100%に */
	}
	.profile-table th {
		/* 見出しセルのスタイル */
		padding-bottom: 10px;
		border-bottom: none; /* thとtdの間の線を消す */
		text-align: center;
	}
	.profile-table td {
		padding-top: 0;
	}
	.profile-table tr:not(:last-child) td {
		/* 各項目の区切り線（thではなくtdの下に線を引く） */
		border-bottom: 1px solid #ddd;
	}
	/* 会社案内テーブルのスマホ対応 */
	.profile-table th,
	.profile-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.profile-table th {
		padding-bottom: 10px;
		border-bottom: none;
		text-align: left; /* ★調整: スマホでも左寄せに */
		background-color: #f5f5f5; /* ★調整: スマホ時のthの背景色 */
		padding-top: 15px; /* ★調整: スマホ時のthの上下余白 */
		padding-bottom: 15px;
	}
	.profile-table td {
		padding-top: 15px; /* ★調整: スマホ時のtdの上下余白 */
		padding-bottom: 15px;
	}
	.profile-table tr:not(:last-child) td {
		border-bottom: 1px solid #ddd;
	}

	/* 吹き出しのスマホ対応 */
	.company-profile-table .speech-bubble {
		position: static; /* スマホでは通常配置に戻す */
		transform: none; /* transformもリセット */
		margin: 0 auto 30px auto; /* 中央寄せ */
	}
}

.recruit.page-title-banner{
	background-image: url("./images/recruit.jpg");
	background-position: center;
}

/* --- 
* * 6. トラブル解決までの流れ (page-flow.php) 
* * --- */

/* --- 6-1. 青い左ラインの見出し (.blue-bar-title) --- */
.blue-bar-title {
	border-left: 5px solid #007bff; /* 青い線 */
	padding-left: 15px; /* 文字との間隔 */
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 15px;
	line-height: 1.4;
}

/* --- 6-2. フローの各ステップ --- */
.flow-step {
	margin-bottom: 20px;
}
.step-content p {
	margin-bottom: 15px;
	line-height: 1.8;
}
.step-content small {
	color: #666;
	font-size: 0.9em;
}
.link-text a {
	color: #007bff;
	text-decoration: underline;
}

/* --- 6-3. 矢印 (SVG版) --- */
.flow-arrow {
	text-align: left;
	padding-left: 30px; /* 見出しのインデントに合わせて調整 */
	margin: 10px 0;
}
.flow-arrow svg {
	/* SVGのサイズや色を調整 */
	width: 40px;  /* 幅 */
	height: 40px; /* 高さ */
	stroke: #000;
	display: block; /* 余白調整のため */
}

/* --- 6-4. 青い左寄せ吹き出し --- */
.blue-bubble-left {
	background: #4da3ff; /* 画像の明るい青 */
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 15px 30px;
	display: inline-block; /* 文字幅に合わせる */
	position: relative;
	margin-bottom: 40px;
	font-weight: bold;
	font-size: 1.1rem;
	line-height: 1.4;
}
.blue-bubble-left::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 20px; /* 左側にしっぽ */
	border-width: 10px;
	border-style: solid;
	border-color: #4da3ff transparent transparent transparent;
}
.speech-bubble.blue-bubble-left::before {
	display: none;
	content: none;
}
.speech-bubble.blue-bubble-left {
	border: none;
}
/* 既存のspeech-bubbleのスタイルを一部上書き */
.blue-bubble-left p {
	margin: 0;
	text-align: left;
}

/* --- 6-5. 決済方法 --- */
.payment-methods {
	margin-top: 30px;
}
.payment-item {
	margin-bottom: 40px;
}
.payment-image{
	max-width: 500px;
}
.payment-image img {
	max-width: 100%;
	border: 1px solid #eee; /* 薄い枠線 */
	padding: 5px;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.blue-bubble-left {
		display: block; /* スマホでは幅いっぱいに */
		width: 100%;
		box-sizing: border-box;
	}
}


/* --- 
* * 7. 出張エリアページ (page-area.php) 
* * --- */

/* --- 7-1. 導入セクション (.area-intro) --- */
.area-heading-lg {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 25px;
}
.area-intro-flex {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	align-items: flex-start;
}
.area-intro-text {
	flex: 1; /* テキストエリアを伸縮可能に */
}
.area-intro-text p {
	margin-bottom: 20px;
	line-height: 1.8;
}
.area-sub-msg {
	margin-top: 30px;
}
.area-sub-msg strong {
	font-weight: bold;
}
.area-intro-image {
	flex: 0 0 40%; /* 画像エリアの幅を40%に固定（PC時） */
}
.area-intro-image img {
	width: 100%;
	height: auto;
	border: 1px solid #ddd; /* 薄い枠線 */
}

/* --- 7-2. エリアリスト --- */
.area-block {
	margin-bottom: 40px;
}
.area-cities {
	margin-bottom: 10px;
	line-height: 1.8;
}
.area-cities a {
	color: #337ab7; /* リンク色（青） */
	text-decoration: underline;
}
.area-cities a:hover {
	text-decoration: none;
	color: #23527c;
}
.area-note {
	font-size: 0.9rem;
	color: #555;
	margin-bottom: 5px;
}

/* 「即日」などの強調スタイル */
.mark-highlight {
	color: #cc0000; /* 赤文字 */
	font-weight: bold;
	background-color: #ffffcc; /* 黄色っぽい背景 */
	padding: 0 2px;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.area-intro-flex {
		flex-direction: column; /* 縦積みに */
	}
	.area-intro-image {
		width: 100%; /* 横幅いっぱいに */
		margin-top: 20px;
	}
}


/* --- 
* * 8. エリア詳細ページ (page-area-detail-kyoto.php) 
* * --- */

/* --- 8-1. タイトルバナー --- */
.page-title-banner-area {
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 60px 0;
	text-align: center;
	margin-bottom: 40px;
	position: relative;
}
/* 暗いオーバーレイをかける（文字を見やすくするため） */
.page-title-banner-area::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 1;
}
.page-title-banner-area .container {
	position: relative;
	z-index: 2;
}
.page-title-banner-area h1 {
	font-size: 1.8rem;
	margin: 0;
	font-weight: bold;
}

/* --- 8-2. 各セクション共通 --- */
.detail-section {
	margin-bottom: 60px;
}
.detail-text {
	line-height: 1.8;
	color: #333;
}

/* --- 8-3. アイコン付き見出し (電球マーク) --- */
.detail-heading-icon {
	font-size: 1.4rem;
	font-weight: bold;
	color: #4682b4; /* くすんだ青色 */
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}
.detail-heading-icon::before {
	content: '\f0eb'; /* FontAwesomeの電球アイコンのコードなど */
	/* 今回はCSSで簡易的に電球っぽいアイコンを作るか、画像を使う */
	/* ここでは簡易的に「💡」の文字を使うか、画像を指定する */
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	background-image: url('../images/icon-bulb.png'); /* 電球アイコン画像 */
	background-size: contain;
	background-repeat: no-repeat;
}

/* --- 8-4. 左青線バーの見出し (summaryなど) --- */
.detail-bar-title {
	border-left: 5px solid #007bff;
	padding-left: 15px;
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 20px;
}

/* --- 8-5. リストスタイル --- */
.detail-check-list {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}
.detail-check-list li {
	padding-left: 1.5em;
	position: relative;
	margin-bottom: 5px;
}
.detail-check-list li::before {
	content: '•'; /* 黒丸 */
	position: absolute;
	left: 0;
	color: #333;
}

.detail-simple-list {
	list-style: none;
	padding: 0;
	margin: 15px 0;
}
.detail-simple-list li {
	margin-bottom: 5px;
}

/* --- 8-6. リンクスタイル --- */
.detail-link a {
	color: #337ab7;
	text-decoration: underline;
}
.detail-link a:hover {
	text-decoration: none;
}

/* --- 8-7. メーカー一覧テーブル --- */
.maker-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	background-color: #fff;
}
.maker-table th, .maker-table td {
	border: 1px solid #eee;
	padding: 15px;
	text-align: left;
	vertical-align: middle;
}
.maker-table th {
	background-color: #f5f5f5; /* 薄いグレー */
	font-weight: bold;
	width: 20%;
	white-space: nowrap;
}
/* 1行おきに色を変える */
.maker-table tr:nth-child(even) {
	background-color: #fafafa;
}

/* --- 8-8. センター青吹き出し --- */
.blue-bubble-center {
	background: #4da3ff;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 15px;
	position: relative;
	font-weight: bold;
	font-size: 1.2rem;
}
.blue-bubble-center::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 20%; /* 左寄りの下にしっぽ */
	border-width: 10px;
	border-style: solid;
	border-color: #4da3ff transparent transparent transparent;
}
/* 以前の吹き出しスタイルの打ち消し */
.blue-bubble-center::before {
	display: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
	.maker-table th, .maker-table td {
		display: block;
		width: 100%;
	}
	.maker-table th {
		background-color: #eee;
	}
}


/* --- 
* * 9. ホームページ制作ページ (page-web-production.php) 
* * --- */

/* --- 9-1. 共通ユーティリティ --- */
.mb-60 { margin-bottom: 60px; }
.mt-20 { margin-top: 20px; }
.web-heading-lg {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 25px;
}

/* --- 9-2. チェックボックスリスト --- */
.check-box-list {
	list-style: none;
	padding: 0;
}
.check-box-list li {
	padding-left: 25px;
	position: relative;
	margin-bottom: 10px;
	font-weight: bold;
}
.check-box-list li::before {
	/* 赤いチェックボックス風アイコン */
	content: '\2714'; /* チェックマーク */
	position: absolute;
	left: 0; top: 0;
	width: 18px; height: 18px;
	background: #cc0000;
	color: #fff;
	font-size: 12px;
	text-align: center;
	line-height: 18px;
	border-radius: 2px;
}

/* --- 9-3. 2カラムレイアウト (画像+テキスト) --- */
.web-flex-container {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	align-items: center;
}
.web-flex-container.align-top {
	align-items: flex-start;
}
.web-text-col { flex: 1; }
.web-img-col { flex: 0 0 40%; text-align: center; }
.web-img-col img { max-width: 100%; height: auto; }

/* 50%ずつのカラム */
.web-col-half {
	width: 48%;
}

/* --- 9-4. 吹き出し（青色・全幅） --- */
.blue-bubble-left.full-width {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border-radius: 5px; /* 角丸少し小さく */
	margin-bottom: 20px;
}

/* --- 9-5. リスト（星、矢印） --- */
.star-list, .arrow-list {
	list-style: none;
	padding: 0;
}
.star-list li, .arrow-list li {
	padding-left: 20px;
	position: relative;
	margin-bottom: 8px;
	line-height: 1.6;
}
.star-list li::before {
	content: '★';
	position: absolute;
	left: 0; color: #555;
}
.arrow-list li::before {
	content: '⤵'; /* 矢印 */
	position: absolute;
	left: 0; font-weight: bold;
}
.small-note {
	font-size: 0.85rem;
	color: #666;
	margin-top: 15px;
}

/* --- 9-6. 黄色ライン --- */
.highlight-yellow-underline {
	border-bottom: 3px solid #ffcc00;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fca503; /* オレンジっぽい黄色 */
	margin-bottom: 20px;
}

/* --- 9-7. ステップフロー --- */
.web-flow-steps {
	border-left: 3px solid #007bff; /* 左側の青い縦線 */
	padding-left: 30px;
	margin-left: 10px;
}
.web-flow-step {
	margin-bottom: 40px;
	position: relative;
}
/* ステップのアイコン（画像や文字） */
.step-title {
	font-size: 1.1rem;
	font-weight: bold;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}
.step-num {
	color: #007bff; /* 青文字 */
	margin-right: 15px;
	font-weight: normal;
}

.step-btns {
	margin-top: 15px;
	display: flex;
	gap: 10px;
}
.btn-black-tel, .btn-black-mail {
	background: #333;
	color: #fff;
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 0.9rem;
	text-decoration: none;
	display: flex;
	align-items: center;
}
.btn-black-tel::before {
	content: '☎'; margin-right: 5px;
}
.btn-black-mail::before {
	content: '✉'; margin-right: 5px;
}

.payment-req {
	display: flex;
	align-items: center;
	gap: 15px;
}
.icon-img { width: 40px; }

/* スマホ対応 */
@media (max-width: 768px) {
	.web-flex-container {
		flex-direction: column;
	}
	.web-img-col, .web-col-half {
		width: 100%;
		margin-top: 20px;
	}
	.step-btns {
		flex-direction: column;
	}
}


/* --- 
* * 10. パソコン故障修理ページ (page-pc_trouble.php) 
* * --- */

/* 中央寄せユーティリティ */
.text-center { text-align: center; }

/* --- 10-1. 水色のメッセージボックス --- */
.trouble-msg-box {
	background-color: #eef6fb; /* 薄い水色 */
	padding: 30px;
	margin-bottom: 30px;
	line-height: 1.8;
}
.trouble-msg-box p {
	margin-bottom: 20px;
}
.trouble-msg-box p:last-child {
	margin-bottom: 0;
}

/* --- 10-2. リンクエリア --- */
.trouble-link-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}
.link-icon {
	margin-right: 10px;
	width: 20px; /* アイコンサイズ調整 */
}
.trouble-link-wrap a {
	color: #337ab7;
	text-decoration: underline;
	font-weight: bold;
}

/* --- 10-3. 注意事項エリア --- */
.trouble-notes {
	font-size: 0.95rem;
	line-height: 1.8;
}
.trouble-notes strong {
	font-weight: bold;
}
/* オレンジ色の強調 */
.highlight-orange {
	color: #ff9900;
	font-weight: bold;
	border-bottom: 1px solid #ff9900;
}

/* バナープレースホルダー調整 */
.banner-placeholder img {
	max-width: 100%;
	height: auto;
}
.mb-40 { margin-bottom: 40px; }


/* --- 
* * 11. 料金体系表ページ (page-support.php) 
* * --- */

/* --- 11-1. 料金テーブル --- */
.fee-table-scroll {
	overflow-x: auto; /* スマホで横スクロール許可 */
	margin-bottom: 20px;
}
.fee-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px; /* スマホでもこれ以上縮めない（スクロールさせる） */
	font-size: 0.95rem;
}

.fee-table th, 
.fee-table td {
	border: 1px solid #ccc;
	padding: 12px 15px;
	vertical-align: middle;
}

.fee-table thead th {
	background-color: #e6e6e6; /* ヘッダー背景（グレー） */
	font-weight: bold;
	text-align: left;
}
/* 列幅の目安 */
.fee-table .col-service { width: 60%; }
.fee-table .col-price   { width: 20%; }
.fee-table .col-member  { width: 20%; }

/* カテゴリ行 */
.fee-table tr.cat-row td {
	background-color: #f2f4f5; /* 薄いグレーの背景 */
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 20px;
}

.fee-table small {
	font-size: 0.85em;
	color: #555;
	line-height: 1.4;
	display: block;
	margin-top: 5px;
}

/* --- 11-2. 注意書きエリア --- */
.fee-notes {
	font-size: 0.95rem;
	line-height: 1.8;
}
.mt-40 { margin-top: 40px; }
.mb-20 { margin-bottom: 20px; }


/* --- 
* * 12. セキュリティー・ウィルス対策ページ (page-security.php) 
* * --- */

/* --- 12-1. 赤いチェックボックスリスト --- */
.check-box-list-red {
	list-style: none;
	padding: 0;
}
.check-box-list-red li {
	padding-left: 25px;
	position: relative;
	margin-bottom: 10px;
	font-weight: normal; /* 太字にしない */
}
.check-box-list-red li::before {
	/* 赤いチェックマーク */
	content: '✔'; /* チェックマーク文字 */
	position: absolute;
	left: 0; top: 0;
	color: #cc0000;
	font-weight: bold;
	font-size: 1.2em;
}

/* --- 12-2. 画像スタイル --- */
.border-img {
	border: 1px solid #ccc;
	max-width: 100%;
	height: auto;
	display: block;
}
.mb-20 { margin-bottom: 20px; }

/* --- 12-3. 小見出し --- */
.sec-sub-title {
	font-size: 1.1rem;
	font-weight: bold;
	margin-bottom: 20px;
}
.sec-mini-title {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 15px;
}

/* --- 12-4. 法人リスト（中央寄せなど） --- */
.sec-corp-list p {
	margin-bottom: 30px;
	padding-left: 20px;
	/* 必要に応じてアイコンなどを追加 */
}



/* --- 
* * 13. インターネット接続トラブル設定サービス (page-internet.php) 
* * --- */

/* --- 13-1. 黒丸リスト (びっくりマーク) --- */
.check-box-list-black {
	list-style: none;
	padding: 0;
}
.check-box-list-black li {
	padding-left: 25px;
	position: relative;
	margin-bottom: 10px;
}
.check-box-list-black li::before {
	/* 黒丸に白抜きの！マーク */
	content: '!'; 
	position: absolute;
	left: 0; top: 2px;
	width: 18px; height: 18px;
	background: #333; /* 黒背景 */
	color: #fff; /* 白文字 */
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 18px;
	border-radius: 50%; /* 丸くする */
}



/* --- 
* * 14. データ復旧・復元ページ (page-delivery.php) 
* * --- */

/* --- 14-1. 黄色マーカー --- */
.mark-yellow {
	background: linear-gradient(transparent 60%, #ffff99 60%);
	font-weight: bold;
	color: #cc0000;
}

/* --- 14-2. 小さな文字 --- */
.text-small {
	font-size: 0.9rem;
	color: #555;
	line-height: 1.6;
}

/* --- 14-3. フローの赤見出し --- */
.step-head-red {
	color: #cc0000;
	font-weight: bold;
	font-size: 1.1rem;
	margin-bottom: 10px;
}

/* --- 14-4. 送料一覧表の色分け --- */
.bg-cyan { background-color: #e0f7fa; } /* 北海道 */
.bg-green { background-color: #e8f5e9; } /* 東北北部 */
.bg-yellow { background-color: #fff9c4; } /* 東北南部 */
.bg-pink { background-color: #fce4ec; } /* 関東・甲信越 */
.bg-beige { background-color: #fff3e0; } /* 中部・関西・中国・四国 */
.bg-blue-light { background-color: #e1f5fe; } /* 九州 */

.fee-table td {
	/* テーブルセルのスタイル微調整（前回のCSSを継承） */
	font-size: 0.9rem;
}



/* --- 
* * 15. 周辺機器のトラブルページ (page-peripheral-equipment.php) 
* * --- */

/* --- 15-1. 水色の背景ボックス --- */
.cyan-bg-box {
	background-color: #f0fbfc; /* 薄い水色 */
	padding: 30px;
	margin-bottom: 40px;
}

/* --- 15-2. シンプルなリスト（・付き） --- */
.simple-dot-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.simple-dot-list li {
	margin-bottom: 10px;
	padding-left: 1em;
	text-indent: -1em;
}
.simple-dot-list li::before {
	content: '・';
	margin-right: 5px;
}


/* --- 
 * * 16. メンバーズ会員ページ (page-member-price.php) 
 * * --- */

/* --- 16-1. 水色の料金ボックス --- */
.fee-box-light-blue {
    background-color: #dff2fa; /* 薄い水色 */
    padding: 40px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 2;
}
.fee-row {
    margin-bottom: 10px;
}
.fee-label {
    font-weight: bold;
    margin-right: 20px;
    display: inline-block;
    min-width: 60px; /* 「個人」「法人」の幅を揃える */
}
/* スマホ対応 */
@media (max-width: 768px) {
    .fee-box-light-blue {
        padding: 20px;
        font-size: 0.95rem;
    }
    .fee-label {
        display: block; /* スマホでは改行 */
        margin-bottom: 5px;
    }
}

/* --- 16-2. 注意書き --- */
.member-notes p {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #333;
}



/* --- 
 * * 17. ウイルスバスター月額版ページ (page-virus.php) 
 * * --- */

/* --- 17-1. 青文字＋黄色マーカーの見出し --- */
.heading-blue-yellow {
    font-size: 1.3rem;
    font-weight: bold;
    color: #337ab7; /* 青文字 */
    background: linear-gradient(transparent 70%, #ffff99 70%); /* 下部に黄色マーカー */
    display: inline-block;
    margin-bottom: 20px;
    padding-right: 10px; /* マーカーを少し伸ばす */
}

/* --- 17-2. その他の調整 --- */
.feature-block {
    margin-bottom: 50px;
}



/* --- 
 * * 18. 初心者向けパソコン指導ページ (page-beginner.php) 
 * * --- */

/* --- 18-1. 水色のメッセージボックス --- */
.beginner-msg-box {
    background-color: #eef6fb; /* 薄い水色 */
    padding: 30px;
    margin-bottom: 40px;
    line-height: 1.8;
    font-size: 0.95rem;
}
.beginner-msg-box p {
    margin-bottom: 15px;
}
.beginner-msg-box p:last-child {
    margin-bottom: 0;
}

/* --- 18-2. 注釈テキスト --- */
.plan-notes p {
    margin-bottom: 5px;
}



/* --- 
 * * 19. スマホ訪問サポートページ (page-visit-support.php) 
 * * --- */

/* --- 19-1. テーブルスタイル調整 --- */
.bg-pale-blue {
    background-color: #eef6fb; /* 薄い水色 */
    vertical-align: top !important; /* 上揃え */
    padding-top: 20px !important;
}
.text-orange {
    color: #f39c12;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}



/* --- 
 * * 20. SSD換装・交換ページ (page-ssd.php) 
 * * --- */

/* --- 20-1. 黄色い実績バナー --- */
.yellow-box {
    background-color: #ffffcc; /* 薄い黄色 */
    padding: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
}
.text-red-lg {
    color: #cc0000;
    font-size: 1.5rem;
    font-weight: bold;
}

/* --- 20-2. テキスト色調整 --- */
.text-red {
    color: #cc0000;
}
/* アイコン付き見出し（黒文字版） */
.detail-heading-icon.black-text {
    color: #333; /* 元の青色を上書き */
}



/* --- 
 * * 21. オプションサービス表ページ (page-option.php) 
 * * --- */

/* --- 21-1. テーブルヘッダーの色 --- */
.option-table thead th,
.spec-table thead th {
    background-color: #f2f4f5; /* 淡いグレー */
}

/* --- 21-2. 注釈テキスト --- */
.option-notes p {
    margin-bottom: 5px;
    color: #333;
}



/* --- 
 * * 22. 法人向け料金ページ (page-hojin.php) 
 * * --- */

/* --- 22-1. サービスリスト --- */
.hojin-service-list {
    list-style: disc; /* 黒丸 */
    padding-left: 20px;
    line-height: 1.8;
}
.hojin-service-list li {
    margin-bottom: 5px;
}

/* --- 22-2. 注記 --- */
.hojin-notes p {
    margin-bottom: 5px;
}



/* --- 
 * * 23. キャッシュレス導入設置ページ (page-epark_payment.php) 
 * * --- */

/* --- 23-1. 中見出し --- */
.web-heading-md {
    font-size: 1.3rem;
    font-weight: bold;
}

/* --- 23-2. テーブルセル調整 --- */
.cell-center {
    text-align: center;
}


.payment-img-box{
	max-width: 450px;
}
.mb-40 img{
	max-width: 450px !important;
}

/* --- 
 * * 24. 追従型お問い合わせバナー (画像版) 
 * * --- */

/* バナー全体を囲むコンテナ */
.fixed-banner-container {
    position: fixed;
    bottom: 20px; /* 下からの距離 */
    right: 20px;  /* 右からの距離 */
    z-index: 9999; /* 最前面に表示 */
    line-height: 0; /* 画像下の隙間をなくす */
	width: 500px;
}

/* バナー画像 */
.fixed-banner-container img {
    max-width: 100%; /* 親要素からはみ出さない */
    height: auto;
    display: block;
    /* 画像に影をつけて浮かせる（お好みで調整） */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 閉じるボタン */
.banner-close-btn {
    position: absolute;
    /* 画像の右上角に合わせて調整してください */
    top: 5px; 
    right: 5px;
    
    /* ボタンの見た目（スクリーンショットに合わせて青緑色に設定） */
    background-color: #00b3b3; 
    color: #fff;
    border: 2px solid #fff; /* 白いフチをつける */
    border-radius: 50%; /* 丸くする */
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 10000; /* 画像より前に出す */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* スマホ対応（画面幅が狭い時） */
@media (max-width: 768px) {
    .fixed-banner-container {
        right: 10px;
        bottom: 10px;
        width: 90%; /* 画面幅に対して少し小さく */
        max-width: 400px; /* 大きくなりすぎないように制限 */
    }
}


/* --- 
 * * 25. その他のサービス一覧ページ (page-other.php) 
 * * --- */

.other-service-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* バナー間の余白 */
    margin-top: 40px;
    margin-bottom: 60px;
}

.other-service-item {
    /* 3カラム計算: (100% - 余白合計) ÷ 3 */
    width: calc((100% - 60px) / 3);
}

.other-service-item a {
    display: block;
    transition: opacity 0.3s;
}

.other-service-item a:hover {
    opacity: 0.7; /* ホバー時に少し薄くする */
}

.other-service-item img {
    width: 100%;
    height: auto;
    display: block;
    /* 必要に応じて影などをつける場合 */
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .other-service-grid {
        gap: 20px;
    }
    .other-service-item {
        /* スマホでは1列表示 */
        width: 100%;
    }
}


/* --- 
 * * 26. お問い合わせページ (page-contact.php & Contact Form 7) 
 * * --- */

/* --- 導入テキスト --- */
.intro-text-box {
    line-height: 1.8;
    font-size: 0.95rem;
}
.text-center { text-align: center; }
.mb-40 { margin-bottom: 40px; }
.mt-10 { margin-top: 10px; }

/* --- フォームテーブル --- */
.contact-form-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    margin-bottom: 40px;
}

.contact-form-table th,
.contact-form-table td {
    border-bottom: 1px solid #ddd;
    padding: 20px;
    vertical-align: middle;
}

/* 左側（見出し） */
.contact-form-table th {
    background-color: #eef6fb; /* 薄い水色 */
    width: 25%;
    text-align: left;
    font-weight: bold;
}

/* 必須・任意バッジ */
.required-badge {
    background-color: #e60012; /* 赤 */
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 8px;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: middle;
}
.optional-badge {
    background-color: #3399cc; /* 青 */
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 8px;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: middle;
}

/* 入力フィールド */
.contact-form-table .form-control {
    width: 100%;
    padding: 10px;
    background-color: #f0f0f5; /* 薄いグレー */
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}
.contact-form-table textarea.form-control {
    height: 200px;
}

/* 名前などの上下分割用 */
.input-row {
    margin-bottom: 10px;
}
.input-row:last-child {
    margin-bottom: 0;
}

/* --- 送信エリア --- */
.contact-submit-area {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.acceptance-wrap {
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.submit-btn-wrap input[type="submit"] {
    background-color: #333;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 15px 60px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.3s;
    width: 100%;
    max-width: 400px;
}
.submit-btn-wrap input[type="submit"]:hover {
    opacity: 0.8;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .contact-form-table th,
    .contact-form-table td {
        display: block;
        width: 100%;
    }
    .contact-form-table th {
        border-bottom: none; /* スマホ時は見出しの下線を消す */
    }
}