/* =====================================================
   しみんボイス
===================================================== */
body {
    background: #000;
    color: #fff;
}
body.page-id-167.page-parent{
	background: #fff;
    color: #333;
}
.civic-voice-cta .cta-button{
	background: #27568b;
}
.civic-wrapper {
    max-width: 720px;
    margin: 60px auto 180px;
}
.civic-wrapper h1 {
    text-align:center;
    font-size:32px;
}
.civic-wrapper p {
    text-align:left;
    margin-bottom:40px;
    color:#ccc;
}
.civic-wrapper label {
    display:block;
    margin:20px 0 8px;
    font-weight:bold;
}
.civic-wrapper input,
.civic-wrapper textarea,
.civic-wrapper select {
    width:100%;
    background:#222;
    border:1px solid #444;
    color:#fff;
    padding:12px;
    border-radius:6px;
	font-size: 14px;
}
.civic-wrapper textarea {
    min-height:120px;
}
.civic-wrapper p.description{
	text-align: center;
	margin-top: 25px;
}

.generate-btn {
    margin-top:30px;
    background:#27568b;
    border:none;
    padding:14px;
    width:100%;
    color:#fff;
    font-size:16px;
    border-radius:8px;
    cursor:pointer;
}
.generate-btn:hover {
    opacity:0.9;
}
.result-box {
    margin-top:40px;
}

input::placeholder,
textarea::placeholder {
    color: #777;
    opacity: 1;
}

.input-note {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
}

select {
    color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

select option {
    color: #fff;
}
textarea, input, select {
    width: 100%;
    padding: 8px;
    margin-top: 6px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #444;
    background: #222;
    color: #fff;
}
textarea {
    resize: vertical;
}
button {
    margin-top: 20px;
    padding: 12px 20px;
    background: #3b82f6;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}
/* 郵便番号入力欄の背景色を固定（白くなるのを防ぐ） */
input[name="zip"], 
input[type="text"].p-postal-code,
#zip_code_id { /* ID名は実際のHTMLに合わせて調整してください */
    background: #222 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}

/* 検索中やエラー時に色が変わるのを防ぐ設定 */
input:focus, 
input:active {
    background: #222 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}
/* ブラウザの自動補完による背景色変更を強制上書き */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* 背景色を「内側の影」で塗りつぶして、元の色に見せる（例：#f0f0f0の場合） */
    -webkit-box-shadow: 0 0 0 30px #222 inset !important;
    /* 文字色も固定したい場合 */
    -webkit-text-fill-color: #fff !important;
}

/* 遷移を遅らせて色がパッと変わるのを防ぐ（念のため） */
input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
}

.zip-container {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.zip-input-group {
    flex: 1;
}
#zipcode-search{
	margin-top: 6px;
    padding: 9px 15px;
    background: #555;
    font-size: 14px;
    white-space: nowrap;
}
/* 住所選択タイル */
.address-tiles {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.address-tile {
    flex: 1;
    background: #222;
    border: 1px solid #444;
    padding: 15px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.address-tile .tile-label {
    display: block;
    color: #888;
    font-size: 12px;
    margin-bottom: 5px;
}

.address-tile .tile-value {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

/* 選択状態（市区町村がデフォルトで選ばれている状態） */
.address-tile.selected {
    background: #27568b;
    border-color: #27568b;
}

.address-tile:hover {
    border-color: #666;
}

/* =====================================================
   生成結果エリア（1枚目の画像再現）
===================================================== */
.civic-result-container {
    display: none; /* JSで表示切り替え */
    margin-top: 40px;
    background: #000;
	padding: 30px 20px;
    border-radius: 10px;
    border: 1px solid #27568b;
}

.result-title-label {
    font-size: 24px;
    margin-bottom: 25px;
    text-align: left !important; /* wrapperのセンター寄せを上書き */
    color: #fff;
}

.field-label {
    display: block;
    color: #888 !important; /* 入力時より一段落としたグレー */
    font-size: 14px;
    margin-bottom: 8px;
}

.result-input-field {
    width: 100%;
    background: #222 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 12px !important;
    border-radius: 4px;
    margin-bottom: 20px;
}

.result-textarea-field {
    width: 100%;
    background: #1a1a1a !important; /* 本文エリアはやや暗めに */
    border: 1px solid #444 !important;
    color: #ccc !important;
    padding: 15px !important;
    border-radius: 4px;
    line-height: 1.7;
    margin-bottom: 20px;
    min-height: 300px;
}

.btn-copy-action {
    background: #27568b !important; /* 鮮やかな青 */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 35px;
    width: auto; /* 全幅ではなくコンテンツ合わせ */
}

.btn-copy-action:hover {
    background: #27568b !important;
}

/* 案内ボックス */
.support-info-box {
    background: #111;
    border: 1px solid #222;
    padding: 20px;
    border-radius: 8px;
}

.support-text {
    color: #bbb !important;
    font-size: 14px !important;
    line-height: 1.8;
    margin-bottom: 15px !important;
    text-align: left !important;
}

.support-link {
    color: #27568b;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.support-link:hover {
    text-decoration: underline;
}

.ai-disclaimer {
    color: #c7c7c7 !important;
    font-size: 13px !important;
    margin-top: 20px !important;
    text-align: left !important;
    line-height: 1.4;
}

#representative-area{
    background: #313131;
    padding: 20px;
}
.section-subtitle{
	margin: 15px 0;
}

/* 議員リスト全体のコンテナ */
.rep-card-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

/* 議員カード単体 */
/* 議員カードのデザインブラッシュアップ */
.rep-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.rep-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.rep-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 4px 0;
    color: #333;
}

/* SNS行のスタイル */
.rep-sns-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* 𝕏 アイコンの個別スタイル */
.x-icon {
    background-color: #000000 !important; /* 背景を真っ黒に */
    border: 1px solid #444 !important;    /* 境界線を少し出す */
}

.x-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* JS側で filter: invert(1) を入れているので、黒背景に白い𝕏が表示されます */
}
.sns-link {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
}

.sns-link:hover { transform: translateY(-2px); }
.sns-link img { width: 100%; height: 100%; object-fit: contain; }

/* 個別背景調整 */
.x-icon { background: #000; }
.tt-icon { background: #000; }

/* アクションボタン */
.rep-main-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.act-btn {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    min-width: 140px;
}

.form-btn { background: #f89910; color: #fff !important; }
.email-btn { background: #eef5ff; color: #007bff; }

/* 詳細エリア */
/* ふりがな（氏名の上） */
.rep-kana-top {
    font-size: 11px;
    color: #888;
    margin-bottom: -2px;
    letter-spacing: 0.05em;
}

/* 詳細エリア全体の調整 */
.details-content {
    background: #1a1a1a !important; /* 真っ黒に近いグレーで視認性を確保 */
    padding: 16px !important;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #333; /* 境界線を薄く入れる */
}

/* 各行のレイアウト */
.detail-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 14px;
}

.detail-row:last-child {
    margin-bottom: 0;
}

/* ラベル部分（左側） */
.detail-label {
    width: 80px;      /* 幅を固定して揃える */
    color: #aaa;      /* 少し薄い色に */
    font-weight: 500;
    flex-shrink: 0;
}

/* 値の部分（右側） */
.detail-value {
    color: #fff;      /* 値は真っ白に */
    flex-grow: 1;
}

/* 電話番号リンク */
.detail-value a {
    color: #4da3ff;
    text-decoration: none;
}
.detail-value a:hover {
    text-decoration: underline;
}

/* detailsサマリーの調整 */
.rep-details summary {
    font-size: 13px;
    color: #6d6d6d;
    cursor: pointer;
    padding: 15px 0 3px;
    transition: color 0.2s;
}
.rep-details summary:hover {
    color: #ccc;
}

/* デザイン例 */
.info-suggestion-box {
    margin-top: 30px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px dashed #ccc; /* 点線で「提案・補足」感を出す */
}

.info-suggestion-box p {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.info-form-link {
    font-size: 14px;
    color: #007bff;
    text-decoration: underline;
    font-weight: bold;
}

.info-contribution-box{
	line-height: 1.3;
	margin: 25px 0 5px;
}

.contribution-link{
    color: #499eff;
    text-decoration: underline;
}

/* =====================================================
   しみんボイス専用：フッターバナーの非表示
===================================================== */
/* 固定ページのスラッグが 'form' の場合のみ実行 */
.page-template-page-civic_voice-form-php #footer_banner {
    display: none !important;
}

@media (max-width: 640px) {
	.civic-wrapper {
	    width: 95%;
	}
	.civic-result-container{
		padding: 30px 15px;
	}
	#representative-area{
		padding: 15px;
	}
	.instruction{
		margin-bottom: 25px;
	}
	.rep-header{
		gap: 5px;
	}
	.rep-card-container{
	    gap: 10px;
	}
	.rep-card{
	    padding: 13px;
	    margin-bottom: 10px;
	}
	.act-btn{
		min-width: 100px;
		padding: 6px 8px;	
	}
	.info-contribution-box h4{
		margin-bottom: 5px;
	}
	.info-contribution-box p{
		margin-bottom: 20px;	
	}
}