/*
Theme Name: BusinessPress Child
Theme URI: https://businesspress.jp/theme/
Template: businesspress
Author: BusinessPress
Author URI: https://businesspress.jp/
Description: BusinessPress ia a simple and beautiful business WordPress theme. You can create a website of corporate, group, freelance and so on.
Tags: one-column,two-columns,right-sidebar,custom-colors,custom-header,custom-logo,custom-menu,editor-style,featured-images,footer-widgets,microformats,post-formats,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.0.0.1761555391
Updated: 2025-10-27 17:56:31

*/

/*=====================================*/
/* 1-1. CF7テーブル構造と基本設定 (カスタムサイトの見た目) */
/*=====================================*/
div.wpcf7 {
    max-width: 800px;
    margin: 0 auto;
    color: #333;
}

/* テーブル全体の強制設定 */
table.CF7_table {
	width: 100% !important; 
	max-width: 800px !important;
	margin: 0 auto !important;
	border: 3px solid #e5e5e5 !important; /* 外枠の罫線 */
	border-collapse: collapse !important; 
}

/* 行とセルの強制設定 */
.CF7_table tr {
	border-top: 1px solid #e5e5e5 !important;
	display: table-row !important; 
}

/* 項目名セル (th) - 左側の青みがかったグレーの列 */
.CF7_table th {
	width: 30% !important; 
	background-color: #ebedf5 !important; /* ブルーグレー (カスタムサイトの例に合わせる) */
    color: #333 !important;
    font-weight: bold !important;
    text-align: left !important;
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border: none !important; 
    border-right: 1px solid #e5e5e5 !important; /* 縦の区切り線 */
    box-sizing: border-box !important;
}

/* データ列 (td) - 右側の入力フィールド/確認内容の列 */
.CF7_table td {
    width: 70% !important;
    padding: 10px 15px !important;
    vertical-align: middle !important;
    border: none !important; 
    box-sizing: border-box !important;
}

/* 入力欄 */
.CF7_table input:not([type="submit"]), 
.CF7_table textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid #d8d8d8 !important;
    padding: 8px 10px !important;
}

/*=====================================*/
/* 1-2. 確認画面のスタイル */
/*=====================================*/

/* 確認画面の入力内容部分（td）に薄い緑を適用 */
.wpcf7-form td {
    background-color: rgba(144, 238, 144, 0.1) !important; 
    font-weight: normal !important; 
}

/*=====================================*/
/* 1-3. 必須・ボタン・モバイル対応 */
/*=====================================*/
/* 「必須」文字 */
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034; /* オレンジ */
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
    white-space: nowrap; 
}
/* 「任意」文字 */
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd; /* グレー */
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
    white-space: nowrap; 
}
/* ボタン */
.CF7_btn{
	text-align:center;
	margin-top:20px;
}
.wpcf7 input.wpcf7-submit,
.wpcf7 input.wpcf7-previous {
	background-color:#f79034;
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	padding: 10px 20px;
}

/* モバイル対応 */
@media screen and (max-width: 768px){
	table.CF7_table{
	    width:95% !important;
        border: none !important;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	    display: block !important;
	    width: 100% !important;
	    line-height:2em;
	    border: none !important;
	}
	.CF7_table th{
	    background-color:#ebedf5 !important;
        border-right: none !important;
        border-top: 1px solid #ddd !important;
	}
    .CF7_table td {
        border-top: 1px dashed #ddd !important;
        border-bottom: 1px solid #ddd !important;
    }
}

/*=====================================*/
/* 1-4. フォームごとの「必須」タグの色設定 */
/*=====================================*/

/* 1. 一般お問合せ: 背景：赤色、テキスト：白色 */
.cf7-general .CF7_req {
    background: #ff0000 !important; /* 赤色 */
    color: #fff !important;         /* 白色 */
}

/* 2. 事務局へ問合せ: 背景：青色、テキスト：白色 */
.cf7-office .CF7_req {
    background: #0000ff !important; /* 青色 */
    color: #fff !important;         /* 白色 */
}

/* 3. コンシェルジュに依頼: 背景：オレンジ色、テキスト：黒色 */
.cf7-concierge .CF7_req {
    background: #f79034 !important; /* オレンジ色 */
    color: #000 !important;         /* 黒色 */
}

/* ---------------------------------------------------- */
/* 【注意】「任意」タグの色の定義は共通で維持されます。 */
/* .CF7_unreq の色を個別に変更したい場合は、上記と同様にクラスを追加してください。 */
/* ---------------------------------------------------- */

/*=====================================*/
/* 1-5. INPUT FIELD STYLES (入力欄の状態) */
/*=====================================*/

/* A. ノーマルフィールド背景: #fff */
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 4px; /* 角丸 */
    box-sizing: border-box; 
    font-size: 16px;
    background-color: #fff; 
    transition: background-color 0.3s, border-color 0.3s; 
}

/* テキストエリアのスタイル */
textarea.wpcf7-textarea {
    min-height: 150px;
    resize: vertical;
}

/* C. 文字が入っている（入力後の）フィールド背景: #d1ffe7 */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]).wpcf7-form-control:not(:placeholder-shown),
textarea.wpcf7-textarea:not(:placeholder-shown) {
    background-color: #d1ffe7;
    border-color: #28a745;
}

/* B. 入力中のフィールド背景: #f2ffff (:focus) */
.wpcf7-form-control:not(.wpcf7-submit):focus,
textarea.wpcf7-textarea:focus {
    background-color: #f2ffff;
    border-color: #007bff;
    outline: none; /* ブラウザ標準の枠を消す */
}

/* D. バリデーションエラー時 */
.wpcf7-not-valid-tip {
    color: #dc3545; /* エラーテキストの色 */
    font-size: 20px;
    margin-top: 5px; 
    margin-bottom: 5px; 
    font-weight: bold;
}
/* エラーが出た入力フィールドの背景色 */
html body .wpcf7-form p .wpcf7-not-valid-tip + input[type="text"],
html body .wpcf7-form p .wpcf7-not-valid-tip + input[type="email"],
html body .wpcf7-form p .wpcf7-not-valid-tip + input[type="tel"],
html body .wpcf7-form p .wpcf7-not-valid-tip + textarea.wpcf7-textarea {
    background-color: #ffbfbf !important; /* 背景色を強制 */
    border-color: #dc3545 !important; /* 枠線を強制 */
}

/* ラジオボタンとチェックボックスのコンテナの調整 */
.wpcf7-list-item-label {
    margin-left: 5px;
}

/*=====================================*/
/* 1-6. CUSTOM BUTTONS (カスタムボタン) */
/*=====================================*/

/* 1. 確認画面へ ボタン (.custom-confirm-btn) */
.custom-confirm-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #6c757d; /* 灰色 */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.1s;
    transform: scale(1); 
}
.custom-confirm-btn:hover {
    background-color: #5a6268;
}

/* 2. 送信ボタンのラッパーと基本レイアウト (svg-btn-wrapper) */
.svg-btn-wrapper {
    width: 100% !important;
    max-width: 600px !important; 
    margin: 20px auto !important; 
    position: relative !important;
    overflow: hidden !important; 
    cursor: pointer !important; 
    
    /* ★★★ ボタンサイズを元に戻すための最重要スタイル (縦横比制御) ★★★ */
    height: 0 !important;
    padding-bottom: 77.14% !important; /* 1080/1400 = 0.7714 */
}

/* SVG要素自体の調整 (親要素のサイズに合わせる) */
.svg-btn-wrapper svg {
    display: block !important;
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* SVG内のクリック領域 */
.js-svg-button {
    cursor: pointer !important;
}

/* フォーム送信後のメッセージ表示領域を調整 */
div.wpcf7-response-output {
    padding: 1em 1em !important;
    margin: 0 auto !important; 
    border: 2px solid #000 !important;
    -webkit-appearance: none !important;
    max-width: 600px !important; 
}

/* アニメーション要素の初期状態を非表示に (functions.phpで挿入した要素) */
.cf7-svg-btn-container #cBottom, 
.cf7-svg-btn-container #cTop, 
.cf7-svg-btn-container #cCenter, 
.cf7-svg-btn-container #cEnd, 
.cf7-svg-btn-container #tickMark {
    display: none !important; 
}


/* 3. 確認画面の「戻る」ボタン (wpcf7-previous) */
input[type="button"].wpcf7-previous {
    -webkit-appearance: none;
    appearance: none;

    display: block;
    width: 100%;
    max-width: 300px; 
    margin: 20px auto 0;
    padding: 12px 15px;
    background-color: #f8f9fa; /* 薄い灰色 */
    color: #495057; /* 濃い灰色 */
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
}

input[type="button"].wpcf7-previous:hover {
    background-color: #e2e6ea;
}

/*==================================*/
/* スタッフダッシュボード ボタンデザイン (中央寄せ＆赤色修正) */
/*==================================*/

/* 1. aタグをボタンとして機能させるための基本設定と中央寄せ */
a.staff-button {
    /* ボタンの基本レイアウト */
    display: block; /* 変更点: inline-blockからblockに変更し、親要素の幅全体を使うようにする */
    max-width: 300px; /* 変更点: ボタンの最大幅を設定し、中央寄せを可能にする */
    
    padding: 15px 25px;
    border-radius: 5px;
    
    /* 文字装飾 */
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    
    /* 間隔調整と中央寄せの適用 */
    margin: 10px auto; /* 変更点: 左右マージンを'auto'にすることで、ブロック要素を中央に配置する */
    
    /* アニメーション */
    transition: background-color 0.3s, transform 0.1s;
    transform: scale(1);
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

a.staff-button:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

/* プライマリ（一般公開） - 青色 */
.staff-button.primary { 
    background-color: #007bff; 
} 
.staff-button.primary:hover { 
    background-color: #0056b3; 
}

/* 2. セカンダリ（セレソン/会員限定） - 赤色に変更 */
.staff-button.secondary { 
    background-color: #dc3545; /* 赤色 */
} 
.staff-button.secondary:hover { 
    background-color: #c82333; 
}

/* 情報（確認・編集） - 緑色 */
.staff-button.info { 
    background-color: #28a745; 
} 
.staff-button.info:hover { 
    background-color: #1e7e34; 
}

/* デフォルト（プロフィール編集） - 黄色 */
.staff-button.default { 
    background-color: #ffc107; 
    color: #333 !important;
} 
.staff-button.default:hover { 
    background-color: #e0a800; 
}