/* デザイン1: グラデーション＋アイコン */
.column h1 {
position: relative;
display: inline-block;
font-size: 27px;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 30px 0;
padding-left: 60px;
width: 100%;
}
a{
    font-size: 16px !important;
    text-decoration: underline !important;
    }
.column h1::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.column h1::after {
content: '📊';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 1;
}
.column{
max-width: 850px;
display: block;
margin: 0 auto;
margin-top: 100px;
}
.column h2 {
position: relative;
font-size: 1.8rem;
width: 100%;
font-weight: 700;
color: white;
margin: 30px 0;
padding: 20px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
display: inline-block;
overflow: hidden;
}

.column h2::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
}

.column h2:hover::before {
animation: shine 0.6s ease;
}
.column h4 {
position: relative;
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 30px 0;
padding-left: 30px;
}

.column h4::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 40px;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}

.column h4::after {
content: '';
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: #667eea;
border-radius: 50%;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}
.column h3 {
position: relative;
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 30px 0;
display: inline-block;
padding-bottom: 15px;
width: 100%;
}

.column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, transparent 100%);
border-radius: 2px;
}
.column table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.column table thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.column table th {
padding: 20px 15px;
color: white;
font-weight: 700;
text-align: left;
font-size: 14px;
letter-spacing: 0.5px;
}

.column table td {
padding: 18px 15px;
border-bottom: 1px solid #e8ecf1;
color: #333;
font-size: 14px;
}

.column table tbody tr:last-child td {
border-bottom: none;
}
.data-table-borderless {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
border-radius: 0px !important;
background: white;
}

.data-table-borderless th {
padding: 20px 15px;
background: #f1f1f1;
color: #667eea !important;
font-weight: 700;
text-align: left;
font-size: 12px;
border-bottom: 3px solid #667eea;
}

.data-table-borderless td {
padding: 18px 15px;
color: #333;
font-size:14px;
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.data-table-borderless tbody tr:hover {
background-color: rgba(102, 126, 234, 0.03);
border-left: 4px solid #667eea;
transition: all 0.3s ease;
}
.bullet-box-info {
background: linear-gradient(135deg, rgba(23, 162, 184, 0.05) 0%, rgba(108, 117, 125, 0.05) 100%);
border: 1px solid rgba(23, 162, 184, 0.3);
border-radius: 12px;
padding: 25px 30px;
margin: 25px 0;
position: relative;
}

.bullet-box-info::before {
content: '\f05a';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 20px;
left: 20px;
color: #17a2b8;
font-size: 28px;
}

.bullet-box-info .box-title {
font-size: 20px;
font-weight: 700;
color: #17a2b8;
margin-bottom: 15px;
padding-left: 35px;
}

.bullet-box-info ul {
list-style: none;
}

.bullet-box-info li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 15px !important;
color: #333;
}

.bullet-box-info li::before {
content: '\f0da';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #17a2b8;
font-size: 18px;
}
.bullet-box-important {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
border-left: 5px solid #ffc107;
border-radius: 0 12px 12px 0;
padding: 25px 30px;
margin: 25px 0;
position: relative;
}

.bullet-box-important::before {
content: '\f071';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 20px;
left: 20px;
color: #ffc107;
font-size: 28px;
}
.post-thumbnail{
margin-bottom: 30px;
}
.bullet-box-important .box-title {
font-size: 20px;
font-weight: 700;
color: #e67e22;
margin-bottom: 15px;
padding-left: 35px;
}

.bullet-box-important ul {
list-style: none;
}

.bullet-box-important li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 15px !important;
color: #333;
}

.bullet-box-important li::before {
content: '\f0da';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #ffc107;
font-size: 18px;
}
.list-check {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #667eea;
border-radius: 8px;
background: rgba(102, 126, 234, 0.02);
}

.list-check li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-check li::before {
content: '\f00c';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #667eea;
font-size: 18px;
top: -5px;
}

.list-arrow {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #764ba2;
border-radius: 8px;
background: rgba(118, 75, 162, 0.02);
}

.list-arrow li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-arrow li::before {
content: '\f0da';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #764ba2;
font-size: 18px;
top: -5px;
}
.list-star {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #ffc107;
border-radius: 8px;
background: rgba(255, 193, 7, 0.02);
}

.list-star li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-star li::before {
content: '\f005';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #ffc107;
font-size: 18px;
top: -5px;
}

/* 円形箇条書き */
.list-circle {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #17a2b8;
border-radius: 8px;
background: rgba(23, 162, 184, 0.02);
}

.list-circle li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-circle li::before {
content: '\f111';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #17a2b8;
font-size: 18px;
top: -5px;
}

/* ダイヤモンド箇条書き */
.list-diamond {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #e91e63;
border-radius: 8px;
background: rgba(233, 30, 99, 0.02);
}

.list-diamond li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-diamond li::before {
content: '\f3a5';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #e91e63;
font-size: 18px;
top: -5px;
}

/* プラス箇条書き */
.list-plus {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #28a745;
border-radius: 8px;
background: rgba(40, 167, 69, 0.02);
}

.list-plus li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-plus li::before {
content: '\f067';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #28a745;
font-size: 18px;
top: -5px;
}
.list-heart {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #dc3545;
border-radius: 8px;
background: rgba(220, 53, 69, 0.02);
}

.list-heart li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-heart li::before {
content: '\f004';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #dc3545;
font-size: 18px;
top: -5px;
}
.list-gear {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #6c757d;
border-radius: 8px;
background: rgba(108, 117, 125, 0.02);
}

.list-gear li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-gear li::before {
content: '\f013';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #6c757d;
font-size: 18px;
top: -5px;
}

/* 電球箇条書き */
.list-lightbulb {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #fd7e14;
border-radius: 8px;
background: rgba(253, 126, 20, 0.02);
}

.list-lightbulb li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-lightbulb li::before {
content: '\f0eb';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #fd7e14;
font-size: 18px;
top: -5px;
}
.list-target {
list-style: none;
margin: 25px 0;
padding: 20px 20px 10px 20px;
border: 2px solid #6f42c1;
border-radius: 8px;
background: rgba(111, 66, 193, 0.02);
}

.list-target li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.list-target li::before {
content: '\f140';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #6f42c1;
font-size: 18px;
top: -5px;
}
.merit-list-box {
border: 2px solid #28a745;
border-radius: 12px;
padding: 38px 25px 15px 25px;
margin: 30px 0;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(25, 135, 84, 0.02) 100%);
position: relative;
}

.merit-list-box::before {
content: attr(data-label);
position: absolute;
top: -12px;
left: 20px;
background: #28a745;
color: white;
padding: 6px 12px;
border-radius: 15px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
}

.merit-list-box ul {
list-style: none;
padding: 0;
margin: 0;
}

.merit-list-box li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.merit-list-box li::before {
content: '\f067';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #28a745;
font-size: 18px;
top: -4px;
}

.demerit-list-box {
border: 2px solid #dc3545;
border-radius: 12px;
padding: 38px 25px 15px 25px;
margin: 30px 0;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(153, 27, 27, 0.02) 100%);
position: relative;
}

.demerit-list-box::before {
content: attr(data-label);
position: absolute;
top: -12px;
left: 20px;
background: #dc3545;
color: white;
padding: 6px 12px;
border-radius: 15px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
}

.demerit-list-box ul {
list-style: none;
padding: 0;
margin: 0;
}

.demerit-list-box li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.demerit-list-box li::before {
content: '\f068';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #dc3545;
font-size: 18px;
top: -4px;
}
.merit-demerit-compare-box {
border: 2px solid #e8ecf1;
border-radius: 12px;
padding: 0;
margin: 30px 0;
background: white;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
position: relative;
}

.merit-side {
position: relative;
padding: 35px 25px 25px 25px;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(25, 135, 84, 0.05) 100%);
}

.merit-side::before {
content: attr(data-label);
position: absolute;
top: 17px;
left: 20px;
background: #28a745;
color: white;
padding: 6px 12px;
border-radius: 15px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
z-index: 10;
}

.merit-side::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #e8ecf1;
}

.demerit-side {
position: relative;
padding: 35px 25px 25px 25px;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(153, 27, 27, 0.05) 100%);
}

.demerit-side::before {
content: attr(data-label);
position: absolute;
top: 17px;
left: 20px;
background: #dc3545;
color: white;
padding: 6px 12px;
border-radius: 15px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
z-index: 10;
}

.merit-demerit-compare-box ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 30px;
}

.merit-side li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.merit-side li::before {
content: '\f067';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #28a745;
font-size: 14px;
top: 2px;
}

.demerit-side li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
color: #333;
font-size: 14px;
}

.demerit-side li::before {
content: '\f068';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #dc3545;
font-size: 14px;
top: 4px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.container {
padding: 20px;
}

.merit-demerit-compare-box {
grid-template-columns: 300px 300px;
overflow-x: auto;
overflow-y: hidden;
gap: 0;
position: relative;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}

.merit-demerit-compare-box::after {
content: '← 横にスクロールできます';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
z-index: 20;
pointer-events: none;
opacity: 1;
transition: opacity 0.3s ease;
white-space: nowrap;
}

.merit-demerit-compare-box.scrolled::after {
opacity: 0;
}

.merit-side,
.demerit-side {
min-width: 300px;
scroll-snap-align: start;
padding: 35px 20px 20px 20px;
}

.merit-side::after {
display: none;
}
}
@keyframes shine {
0% { transform: rotate(45deg) translateX(-100%); }
100% { transform: rotate(45deg) translateX(100%); }
}
@media (max-width: 768px) {
.column h1,
.column-title-line,
.column-title-underline {
font-size: 20px;
}
.column{
width: 95%;
margin: 0 auto;
margin-top: 40px;
}
.column h2 {
font-size:20px;
padding: 15px 20px;
}
}
.table-wrapper {
position: relative;
border: 2px solid #e8ecf1;
border-radius: 12px;
overflow: hidden;
margin: 30px 0;
}

.table-scroll-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}

.vendor-comparison-table {
width: 100%;
overflow: auto !important;
border-collapse: initial !important;
min-width: 1200px;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
margin: 0 !important;
}

.vendor-comparison-table th,
.vendor-comparison-table td {
border-right: 1px solid #e8ecf1;
border-bottom: 1px solid #e8ecf1;
padding: 12px 8px !important;
text-align: center;
font-size: 14px;
vertical-align: middle;
}

.vendor-comparison-table th:last-child,
.vendor-comparison-table td:last-child {
border-right: none;
}

.vendor-comparison-table tbody tr:last-child td {
border-bottom: none;
}

/* 1列目固定 */
.vendor-comparison-table th:first-child,
.vendor-comparison-table td:first-child {
position: sticky;
left: 0;
z-index: 10;
background: white;
width: 80px;
padding: 10px !important;
min-width: 80px;
max-width: 80px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
border-right: 2px solid #e8ecf1;
}

/* ヘッダー行 */
.vendor-comparison-table thead th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-weight: 700;
font-size: 14px;
text-align: center !important;
padding: 15px 8px;
position: sticky;
top: 0;
z-index: 15;
}

.vendor-comparison-table thead th:first-child {
z-index: 30;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-right: 2px solid rgba(255, 255, 255, 0.3);
}

/* 列幅設定 */
.vendor-comparison-table th:nth-child(1),
.vendor-comparison-table td:nth-child(1) { width: 80px; }
.vendor-comparison-table th:nth-child(2),
.vendor-comparison-table td:nth-child(2) { width: 120px; }
.vendor-comparison-table th:nth-child(3),
.vendor-comparison-table td:nth-child(3) { width: 100px; }
.vendor-comparison-table th:nth-child(4),
.vendor-comparison-table td:nth-child(4) { width: 120px; }
.vendor-comparison-table th:nth-child(5),
.vendor-comparison-table td:nth-child(5) { width: 120px; }
.vendor-comparison-table th:nth-child(6),
.vendor-comparison-table td:nth-child(6) { width: 120px; }
.vendor-comparison-table th:nth-child(7),
.vendor-comparison-table td:nth-child(7) { width: 120px; }
.vendor-comparison-table th:nth-child(8),
.vendor-comparison-table td:nth-child(8) { width: 100px; }
.vendor-comparison-table th:nth-child(9),
.vendor-comparison-table td:nth-child(9) { width: 220px; }

/* 業者名 */
.vendor-name-cell {
font-weight: 700;
color: #667eea !important;
font-size: 12px !important ;
line-height: 1.3;
}

/* 評価星 */
.rating-stars {
color: #ffc107;
font-size: 12px;
margin: 3px 0;
}

.rating-text {
font-size:12px;
color: #666;
}

/* ステータス */
.status-excellent {
color: #28a745 !important;
font-weight: 600;
}

.status-good {
color: #28a745 !important;
font-weight: 600;
}

.status-warning {
color: #dc3545 !important;
font-weight: 600;
}

.status-neutral {
color: #6c757d !important;
font-weight: 600;
}

/* 料金 */
.price-text {
font-weight: 700;
color: #667eea !important;
}

/* 特徴列 */
.vendor-comparison-table th:nth-child(9),
.vendor-comparison-table td:nth-child(9) {
text-align: left;
padding: 12px 10px;
line-height: 1.4;
}

.feature-text {
font-size: 0.8rem;
line-height: 1.4;
}

/* スクロールヒント */
.scroll-hint-text {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 15px;
border-radius: 25px;
font-size: 0.75rem;
font-weight: 600;
z-index: 25;
pointer-events: none;
opacity: 1;
transition: opacity 0.3s ease;
white-space: nowrap;
}

.scroll-hint-text::before {
content: '→';
margin-right: 5px;
}

.table-scroll-container.has-scrolled .scroll-hint-text {
opacity: 0;
}

/* 続きを見るボタン */
.show-more-button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.show-more-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* 隠れる行 */
.additional-rows {
display: none;
}

.additional-rows.show {
display: table-row-group;
}

/* レスポンシブ */
@media (max-width: 768px) {

.vendor-comparison-table {
min-width: 900px;
}

.vendor-comparison-table th,
.vendor-comparison-table td {
padding: 10px 6px;
font-size: 0.75rem;
}

.vendor-comparison-table thead th {
padding: 12px 6px;
font-size: 0.7rem;
}

.feature-text {
font-size: 0.7rem;
}
}

.review-tabs-container {
border: 2px solid #e8ecf1;
border-radius: 12px;
overflow: hidden;
margin: 30px 0;
background: white;
}

/* タブナビゲーション */
.tab-navigation {
display: flex;
background: #f8f9fa;
border-bottom: 1px solid #e8ecf1;
}

.tab-button {
flex: 1;
padding: 15px 20px;
background: transparent;
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
color: #6c757d;
}

.tab-button.active {
color: white;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tab-button:not(.active):hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}

.tab-button i {
margin-right: 8px;
}

/* タブコンテンツ */
.tab-content {
display: none;
position: relative;
}

.tab-content.active {
display: block;
}

/* 口コミスクロールコンテナ */
.reviews-scroll-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
padding: 20px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}

.reviews-grid {
display: flex;
gap: 20px;
min-width: max-content;
padding-bottom: 10px;
}

/* 口コミカード */
.review-card {
min-width: 300px;
max-width: 300px;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
}

.review-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 良い口コミ */
.good-review .review-card {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(25, 135, 84, 0.05) 100%);
border: 1px solid rgba(40, 167, 69, 0.2);
}

.good-review .rating {
color: #28a745;
}

/* 悪い口コミ */
.bad-review .review-card {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(153, 27, 27, 0.05) 100%);
border: 1px solid rgba(220, 53, 69, 0.2);
}

.bad-review .rating {
color: #dc3545;
}

/* 口コミヘッダー */
.review-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}

.reviewer-info {
display: flex;
align-items: center;
gap: 10px;
}

.reviewer-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 14px;
}

.reviewer-details span {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 2px;
}

.reviewer-details .date {
font-size: 0.75rem;
color: #6c757d;
}

.rating {
font-size: 14px;
font-weight: 600;
}

/* 口コミ内容 */
.review-content {
margin-bottom: 15px;
}

.review-title {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
line-height: 1.4;
}

.review-text {
font-size: 12px;
color: #666;
line-height: 1.5;
}

/* サービス情報 */
.service-info {
padding-top: 12px;
border-top: 1px solid #f0f0f0;
font-size: 0.8rem;
color: #6c757d;
}

/* スクロールヒント */
.scroll-hint {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 15px;
border-radius: 25px;
font-size: 0.75rem;
font-weight: 600;
z-index: 10;
pointer-events: none;
opacity: 1;
transition: opacity 0.3s ease;
white-space: nowrap;
}

.scroll-hint::before {
content: '→';
margin-right: 5px;
}

.reviews-scroll-container.scrolled .scroll-hint {
opacity: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
.tab-button {
padding: 12px 15px;
font-size: 0.9rem;
}

.reviews-scroll-container {
padding: 15px;
}

.review-card {
min-width: 280px;
max-width: 280px;
padding: 15px;
}
}
.section-title {
font-size: 12px;
font-weight: 600;
color: #667eea;
margin-bottom: 15px;
padding-left: 10px;
border-left: 3px solid #667eea;
}

.slider-section {
margin-bottom: 50px;
}

/* 良い口コミスライダー */
.positive-reviews-slider {
position: relative;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(25, 135, 84, 0.02) 100%);
border: 2px solid rgba(40, 167, 69, 0.2);
border-radius: 12px;
padding: 25px;
overflow: hidden;
}

.positive-reviews-container {
position: relative;
overflow: hidden;
}

.positive-reviews-track {
display: flex;
transition: transform 0.4s ease-in-out;
gap: 20px;
}

.positive-review-item {
min-width: 300px;
max-width: 300px;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(25, 135, 84, 0.05) 100%);
border: 1px solid rgba(40, 167, 69, 0.2);
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
flex-shrink: 0;
}

.positive-review-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.15);
}

/* 悪い口コミスライダー */
.negative-reviews-slider {
position: relative;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(153, 27, 27, 0.02) 100%);
border: 2px solid rgba(220, 53, 69, 0.2);
border-radius: 12px;
padding: 25px;
overflow: hidden;
}

.negative-reviews-container {
position: relative;
overflow: hidden;
}

.negative-reviews-track {
display: flex;
transition: transform 0.4s ease-in-out;
gap: 20px;
}

.negative-review-item {
min-width: 300px;
max-width: 300px;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(153, 27, 27, 0.05) 100%);
border: 1px solid rgba(220, 53, 69, 0.2);
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
flex-shrink: 0;
}

.negative-review-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.15);
}

/* 口コミ共通スタイル */
.review-item-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}

.reviewer-profile {
display: flex;
align-items: center;
gap: 10px;
}

.reviewer-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 12px;
}

.reviewer-info span {
font-size: 12px;
font-weight: 600;
color: #333;
margin-bottom: 2px;
}

.reviewer-info .review-date {
font-size: 12px;
color: #6c757d;
}

.positive-review-item .review-rating {
font-size: 12px;
font-weight: 600;
color: #28a745;
}

.negative-review-item .review-rating {
font-size: 12px;
font-weight: 600;
color: #dc3545;
}

.review-item-content {
margin-bottom: 15px;
}

.review-item-title {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
line-height: 1.4;
}

.review-item-text {
font-size: 12px;
color: #666;
line-height: 1.5;
}

.review-service-info {
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-size: 12px;
color: #6c757d;
}

/* スライダーナビゲーション */
.slider-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #667eea;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.slider-nav-btn:hover {
background: #667eea;
color: white;
transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: translateY(-50%) scale(1);
}

.slider-nav-btn:disabled:hover {
background: rgba(255, 255, 255, 0.9);
color: #667eea;
}

.slider-prev-btn {
left: 10px;
}

.slider-next-btn {
right: 10px;
}
.download-cta-btn {
display: inline-flex;
align-items: center;
margin: 20px 0;
gap: 10px;
padding: 15px 26px;
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
color: white;
text-decoration: none;
border-radius: 10px;
font-size: 16px;
width: 100%;
justify-content: center;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(23, 162, 184, 0.3);
}

.trial-cta-btn {
margin: 20px 0;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 36px;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
text-decoration: none;
border-radius: 15px;
font-size: 16px;
width: 100%;
justify-content: center;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(40, 167, 69, 0.3);
position: relative;
}


.trial-cta-btn .trial-badge {
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.urgent-cta-btn {
margin: 20px 0;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 32px;
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
text-decoration: none;
border-radius: 12px;
font-size: 16px;
width: 100%;
justify-content: center;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
position: relative;
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3); }
50% { box-shadow: 0 8px 25px rgba(220, 53, 69, 0.5), 0 0 0 10px rgba(220, 53, 69, 0.1); }
100% { box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3); }
}

.urgent-cta-btn:hover {
transform: translateY(-3px);
animation: none;
box-shadow: 0 12px 35px rgba(220, 53, 69, 0.4);
}

.urgent-badge {
background: rgba(255, 255, 255, 0.2);
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}


/* スライダードット */
.slider-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}

.slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(102, 126, 234, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}

.slider-dot.active {
background: #667eea;
transform: scale(1.2);
}

/* レスポンシブ */
@media (max-width: 768px) {
.positive-reviews-slider,
.negative-reviews-slider {
padding: 20px;
}

.positive-review-item,
.negative-review-item {
min-width: 280px;
max-width: 280px;
padding: 15px;
}

.slider-nav-btn {
width: 35px;
height: 35px;
font-size: 14px;
}

.slider-prev-btn {
left: -17px;
}

.slider-next-btn {
right: -17px;
}
}
.chat-left {
display: flex;
align-items: flex-start;
gap: 15px;
margin: 40px auto !important;
}

.avatar-left {
width: 100px;
height: 100px;
border-radius: 50%;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.names{
color: #333;
font-size: 12px;
padding-top: 3px;
text-align: center;
    display: block;
}
.avatar-left img{
border-radius: 100px;
border: 1px solid #dedfe7 ;
}

.bubble-left {
background: white;
border: 2px solid #e8ecf1;
color: #333;
padding: 16px 20px;
border-radius: 20px;
font-size: 16px;
line-height: 1.6;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
position: relative;
}

.bubble-left::before {
content: '';
position: absolute;
left: -8px;
top: 20px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
z-index: 2;
}

.bubble-left::after {
content: '';
position: absolute;
left: -10px;
top: 18px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #e8ecf1;
z-index: 1;
}

/* 右側お客様の会話 */
.chat-right {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
flex-direction: row-reverse;
}

.avatar-right {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 12px;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

.bubble-right {
background: #f8f9fa;
border: 2px solid #e9ecef;
color: #333;
padding: 16px 20px;
border-radius: 20px;
max-width: 450px;
font-size: 12px;
line-height: 1.6;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
position: relative;
}

.bubble-right::before {
content: '';
position: absolute;
right: -8px;
top: 20px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #f8f9fa;
z-index: 2;
}

.bubble-right::after {
content: '';
position: absolute;
right: -10px;
top: 18px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #e9ecef;
z-index: 1;
}
.chat-expert {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
}

.avatar-expert {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #6f42c1 0%, #563d7c 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(111, 66, 193, 0.3);
}

.bubble-expert {
background: linear-gradient(135deg, rgba(111, 66, 193, 0.05) 0%, rgba(86, 61, 124, 0.05) 100%);
border: 2px solid #6f42c1;
color: #333;
padding: 16px 20px;
border-radius: 20px;
max-width: 450px;
font-size: 12px;
line-height: 1.6;
position: relative;
}

.bubble-expert::before {
content: '';
position: absolute;
left: -8px;
top: 20px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(111, 66, 193, 0.05);
z-index: 2;
}

.bubble-expert::after {
content: '';
position: absolute;
left: -10px;
top: 18px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #6f42c1;
z-index: 1;
}

/* 満足したお客様の会話 */
.chat-success {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
flex-direction: row-reverse;
}

.avatar-success {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}

.bubble-success {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(32, 201, 151, 0.05) 100%);
border: 2px solid #28a745;
color: #333;
padding: 16px 20px;
border-radius: 20px;
max-width: 450px;
font-size: 12px;
line-height: 1.6;
position: relative;
}

.bubble-success::before {
content: '';
position: absolute;
right: -8px;
top: 20px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid rgba(40, 167, 69, 0.05);
z-index: 2;
}

.bubble-success::after {
content: '';
position: absolute;
right: -10px;
top: 18px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #28a745;
z-index: 1;
}

/* レスポンシブ */
@media (max-width: 768px) {
.container {
padding: 20px;
}

.avatar-left,
.avatar-right,
.avatar-expert,
.avatar-success {
width: 80px;
height: 80px;
}

.bubble-left,
.bubble-right,
.bubble-expert,
.bubble-success {
max-width: 100%;
padding: 14px 16px;
font-size: 14px;
}

.chat-left,
.chat-right,
.chat-expert,
.chat-success {
gap: 10px;
}
}
.step-wrap3 {
 counter-reset: count;
 margin: 40px 0;
 position: relative;
}
.step-content3 {
 padding: 20px 20px 20px 20px;
 margin:20px 0px -4px 0px;
 position: relative;
 border-top: solid 2px #ddd;
}
.step-content3::before {
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 left: -10px;
 border-style: solid;
 border-width: 17px 8px 0 8px;
 border-color: #ddd transparent transparent transparent;
}
.step-content3::after {
 content: "";
 display: block;
 height: calc(100% - 36px);
 border-left: dashed 4px #ddd;
 position: absolute;
 top: 16px;
 left: -4px;
}
.step-label3 {
 padding: 3px 20px 3px 15px;
 color: #fff;
 font-size: 16px;
 font-weight: bold;
 position: absolute;
 top: -18px;
 left: -20px;
 background: #6ab5a5;
 border-radius: 20px;
 z-index: 1;
}
.step-label3::after {
 counter-increment: count;
 content: counter(count);
 position: relative;
 left: 5px;
}
.step-title3 {
 font-weight: bold;
 font-size: 18px;
}
.step-body3 {
 margin-top: 10px;
 padding: 0;
 font-size: 14px;

}
.step-wrap3 > :last-child {
 box-shadow: 5px 7px 0 -5px #ddd;
}
.step-wrap3 > :last-child::before, .step-wrap3 > :last-of-type::after {
 display: none;
}
.column p{
font-size: 15px;
line-height: 1.5em;
margin-bottom: 20px;
}
.strong{
font-weight: bold;
}
.red{
color: #b90000;
}
.page-heading {
font-size: 14px;
font-weight: 600;
color: #667eea;
margin-bottom: 30px;
padding-left: 10px;
border-left: 3px solid #667eea;
}

.memo-section {
margin-bottom: 30px;
}

/* 基本のメモBOX */
.note-box-basic {
background: white;
border: 2px solid #e8ecf1;
border-radius: 12px;
margin: 25px 0;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}

.note-box-basic:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}

.note-header-basic {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 20px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.note-content-basic {
padding: 20px;
color: #333;
font-size: 14px;
line-height: 1.6;
}

/* 情報メモBOX */
.note-box-info {
background: white;
border: 2px solid #17a2b8;
border-radius: 12px;
margin: 25px 0;
overflow: hidden;
box-shadow: 0 4px 15px rgba(23, 162, 184, 0.15);
}

.note-header-info {
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
color: white;
padding: 15px 20px;
font-size: 17px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.note-content-info {
padding: 20px;
color: #333;
font-size: 17px;
line-height: 1.6;
background: linear-gradient(135deg, rgba(23, 162, 184, 0.02) 0%, rgba(19, 132, 150, 0.02) 100%);
}

/* 警告メモBOX */
.note-box-warning {
background: white;
border: 2px solid #ffc107;
border-radius: 12px;
margin: 25px 0;
overflow: hidden;
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.15);
}

.note-header-warning {
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
color: #333;
padding: 15px 20px;
font-size: 17px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.note-content-warning {
padding: 20px;
color: #333;
font-size: 15px;
line-height: 1.6;
background: linear-gradient(135deg, rgba(255, 193, 7, 0.02) 0%, rgba(224, 168, 0, 0.02) 100%);
}

/* 成功メモBOX */
.note-box-success {
background: white;
border: 2px solid #28a745;
border-radius: 12px;
margin: 25px 0;
overflow: hidden;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.15);
}

.note-header-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 15px 20px;
font-size: 17px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.note-content-success {
padding: 20px;
color: #333;
font-size: 17px;
line-height: 1.6;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.02) 0%, rgba(32, 201, 151, 0.02) 100%);
}

/* エラーメモBOX */
.note-box-error {
background: white;
border: 2px solid #dc3545;
border-radius: 12px;
margin: 25px 0;
overflow: hidden;
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.15);
}

.note-header-error {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
padding: 15px 20px;
font-size: 17px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.note-content-error {
padding: 20px;
color: #333;
font-size: 17px;
line-height: 1.6;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.02) 0%, rgba(200, 35, 51, 0.02) 100%);
}

/* シンプルメモBOX */
.note-box-simple {
background: #f8f9fa;
border-left: 5px solid #667eea;
border-radius: 0 8px 8px 0;
margin: 25px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.note-header-simple {
background: transparent;
color: #667eea;
padding: 15px 20px 10px 20px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.note-content-simple {
padding: 0 20px 20px 20px;
color: #555;
font-size: 14px;
line-height: 1.6;
}

/* 重要メモBOX */
.note-box-important {
background: white;
border: 3px solid #6f42c1;
border-radius: 12px;
margin: 25px 0;
overflow: hidden;
box-shadow: 0 6px 20px rgba(111, 66, 193, 0.2);
position: relative;
}

.note-box-important::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #6f42c1 0%, #563d7c 50%, #6f42c1 100%);
}

.note-header-important {
background: linear-gradient(135deg, #6f42c1 0%, #563d7c 100%);
color: white;
padding: 18px 20px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}

.note-content-important {
padding: 25px 20px;
color: #333;
font-size: 14px;
line-height: 1.7;
background: linear-gradient(135deg, rgba(111, 66, 193, 0.03) 0%, rgba(86, 61, 124, 0.03) 100%);
}

/* Q&AメモBOX */
.note-box-qa {
background: white;
border: 2px solid #fd7e14;
border-radius: 12px;
margin: 25px 0;
overflow: hidden;
box-shadow: 0 4px 15px rgba(253, 126, 20, 0.15);
}

.note-header-qa {
background: linear-gradient(135deg, #fd7e14 0%, #e8690b 100%);
color: white;
padding: 15px 20px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}

.note-content-qa {
padding: 20px;
color: #333;
font-size: 14px;
line-height: 1.6;
}

.qa-question {
font-weight: 600;
color: #fd7e14;
margin-bottom: 8px;
}

.qa-answer {
color: #555;
padding-left: 15px;
border-left: 3px solid #fd7e14;
}

/* レスポンシブ */
@media (max-width: 768px) {
.demo-wrapper {
padding: 20px;
}

.note-header-basic,
.note-header-info,
.note-header-warning,
.note-header-success,
.note-header-error,
.note-header-simple,
.note-header-important,
.note-header-qa {
padding: 12px 15px;
font-size: 18px;
}
.column p{
line-height: 2em;
}
.note-content-basic,
.note-content-info,
.note-content-warning,
.note-content-success,
.note-content-error,
.note-content-simple,
.note-content-important,
.note-content-qa {
padding: 15px;
font-size: 16px;
}

.note-content-simple {
padding: 0 15px 15px 15px;
}

.note-content-important {
padding: 20px 15px;
}
}
#toc_container{
margin: 40px auto !important;
padding: 0 25px 15px;
background: none;
border: 2px solid #667eea;
border-radius: 3px;
}
.toc_toggle a{
color: #fff !important;
}
.toc_title {
position: relative;
display: inline-block;
margin: 0;
top: -1.5em;
left: -1em;
padding: 5px 20px;
min-width: 120px;
color: #fcfcfc;
background: #667eea;
border-radius: 17px;
font-size: 14px;
font-weight: bold;
line-height:24px;
text-align: center;
}
.toc_title:before {
content: "";
position: absolute;
width:auto;
top: 100%;
left: 30%;
margin-left: -15px;
border: 10px solid transparent;
border-top: 10px solid #667eea;
border-radius:0;
line-height:normal;
background: none;
}
ul.toc_list, .toc_list li ul li {
list-style-type: none;
}
.toc_depth_2, .toc_depth_3{
display:none;
}
.toc_number {
font-size: 16px;
padding: 3px 8px;
background: #667eea;
color: #fcfcfc;
border-radius: 50%;
font-family: Arial,sans-serif;
font-weight: bold;
}
.toc_list li ul li:before, .widget .toc_widget_list ul li a:before{
position: relative;
top: -2px;
display: inline-block;
width: 8px;
height: 8px;
content: '';
border-radius: 50%;
background: #667eea;
margin-right: .5em;
padding-right:0;
}
ul.toc_list {
padding: 0;
margin: 0;
}
ul li ul {
padding: .1em 0 0 1em;
margin:3px;
}
.widget .toc_widget_list li ul{
margin-left:1em;
}
#toc-widget-2 .toc_widget_list {
max-height: 50vh;
overflow: auto;
}
.toc_widget_list::-webkit-scrollbar{width: 12px;} /*スクロールバーの幅*/
.toc_widget_list::-webkit-scrollbar-track{background: #fbfbfb;} /*スクロールバーの背景色*/
.toc_widget_list::-webkit-scrollbar-thumb{border-radius:6px;background:#eaedf7;} /*スクロールバーの色と角の丸さ*/

@media only screen and (max-width:480px){
#toc_container{
width:100%!important;
}
/************************************
** スマホ追尾目次 TOC
************************************/
#mobile-toc-widget-wrap .toc_widget_list{
    font-size:0.8em;
    padding:0 !important;
}
#mobile-toc-widget-wrap .toc_widget_list a{
    text-decoration:none;
    color:#555; /* 目次リストの色 */
    font-weight:600; /* 20190924追加 */
}
#mobile-toc-widget-wrap .toc_widget_list > li {
    list-style-type: none !important;
    position: relative;
    margin-left: 13px;
    margin-right: 25px;
    padding-left: 32px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    font-size: 1.1em;
    line-height: 1.6; /* 20190924数値変更 */
}
#mobile-toc-widget-wrap .toc_widget_list > li:before{
    counter-increment: mobile-toc;
    content: counter(mobile-toc);
    position: absolute;
    left: 5px;
    top: -1px;
    background: none;
    font-size: 1.1em;
    color: #58a9ef; /* 数字の色 */
}
#mobile-toc-widget-wrap .toc_widget_list > li ul {
    margin-top: 5px;
    padding-left: 20px;
    list-style:none;
}
#mobile-toc-widget-wrap .toc_widget_list > li > ul > li a {
    position: relative;
    text-decoration: none !important;
    font-weight:500; /* 20190924追加 */
}
#mobile-toc-widget-wrap .toc_widget_list > li ul li a:before {
    position: absolute;
    content: "・";
    font-size: 1.4em;
    left: -20px;
    top: -10px;
    color: #58a9ef; /* 点の色 */
}
}