Custom CSS

/* ===================================
探偵ログ トップページ カスタムCSS
=================================== */

/* — 検索フォーム — */
.tl-search-form {
max-width: 720px;
margin: 30px auto 0;
}
.tl-search-row {
display: flex;
gap: 12px;
align-items: flex-end;
}
.tl-search-select {
flex: 1;
}
.tl-search-select label {
display: block;
font-size: 12px;
color: #8a9bb5;
margin-bottom: 6px;
letter-spacing: 0.05em;
}
.tl-search-select select {
width: 100%;
padding: 12px 14px;
border: 1px solid #d0d5dd;
border-radius: 6px;
font-size: 15px;
color: #1a2744;
background: #fff;
appearance: auto;
}
.tl-search-btn {
padding: 12px 32px;
background: #1a2744;
color: #fff;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.tl-search-btn:hover {
background: #4a6fa5;
}
@media (max-width: 600px) {
.tl-search-row {
flex-direction: column;
}
.tl-search-btn {
width: 100%;
padding: 14px;
}
}

/* — 調査内容カード — */
.tl-type-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 900px;
margin: 30px auto 0;
}
.tl-type-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 28px 16px;
background: #fff;
border: 1px solid #e8edf3;
border-radius: 10px;
text-decoration: none;
transition: box-shadow 0.2s, transform 0.2s;
}
.tl-type-card:hover {
box-shadow: 0 4px 16px rgba(26, 39, 68, 0.08);
transform: translateY(-2px);
}
.tl-type-icon {
font-size: 20px;
font-weight: 700;
color: #4a6fa5;
margin-bottom: 10px;
font-family: “Hiragino Kaku Gothic ProN”, sans-serif;
}
.tl-type-name {
font-size: 15px;
font-weight: 500;
color: #1a2744;
text-align: center;
margin-bottom: 6px;
}
.tl-type-desc {
font-size: 12px;
color: #8a9bb5;
text-align: center;
}
@media (max-width: 600px) {
.tl-type-grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* — エリアアコーディオン — */
.tl-area-list {
max-width: 720px;
margin: 30px auto 0;
}
.tl-area-item {
border: 1px solid #e8edf3;
border-radius: 8px;
margin-bottom: 8px;
background: #fff;
overflow: hidden;
}
.tl-area-item summary {
padding: 16px 20px;
font-size: 16px;
font-weight: 500;
color: #1a2744;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.tl-area-item summary::after {
content: “+”;
font-size: 20px;
color: #8a9bb5;
transition: transform 0.2s;
}
.tl-area-item[open] summary::after {
content: “−”;
}
.tl-area-content {
padding: 0 20px 16px;
font-size: 14px;
color: #4a5568;
line-height: 1.8;
}
.tl-area-content a {
color: #4a6fa5;
font-weight: 500;
text-decoration: none;
}
.tl-area-content a:hover {
text-decoration: underline;
}
.tl-coming-soon {
display: inline-block;
font-size: 12px;
color: #8a9bb5;
background: #f0f2f5;
padding: 4px 12px;
border-radius: 4px;
}

/* — 基礎知識カード — */
.tl-knowledge-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 900px;
margin: 30px auto 0;
}
.tl-knowledge-card {
display: flex;
flex-direction: column;
padding: 24px;
background: #f8f9fb;
border: 1px solid #e8edf3;
border-radius: 10px;
text-decoration: none;
transition: box-shadow 0.2s;
}
.tl-knowledge-card:hover {
box-shadow: 0 4px 16px rgba(26, 39, 68, 0.08);
}
.tl-knowledge-cat {
font-size: 11px;
color: #7a9cc6;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.tl-knowledge-title {
font-size: 15px;
font-weight: 500;
color: #1a2744;
line-height: 1.6;
}
@media (max-width: 600px) {
.tl-knowledge-grid {
grid-template-columns: 1fr;
}
}

/* — 口コミ投稿バナー — */
.tl-review-banner {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.tl-review-icon {
font-size: 36px;
margin-bottom: 8px;
}
.tl-review-banner h3 {
font-size: 22px;
font-weight: 500;
color: #1a2744;
margin-bottom: 12px;
}
.tl-review-banner p {
font-size: 14px;
color: #4a5568;
line-height: 1.8;
margin-bottom: 16px;
}
.tl-coming-badge {
display: inline-block;
padding: 8px 24px;
background: #1a2744;
color: #fff;
border-radius: 30px;
font-size: 13px;
font-weight: 500;
}