/**
 * Decorative Box Plugin Styles
 * 装飾ボックスプラグインのスタイルシート
 */

 /* 管理人追加　※削除禁止＊ */
.center {
    text-align: center;
}
.copy {
    color: #FF6E8A;
    font-weight: bold;
}
.buttonda {
    padding: .8em;
    border-radius: 30px;
    margin: 1em 0 0 !important;
    display: block;
    background: #C9FDFF;
    color: #2cbfe1 !important;
    text-decoration: none !important;
    font-weight: bold;
}
.micro {
    color: #57b781;
    font-size: .9em;
    font-weight: bold;
}

/* 基本ボックススタイル - モダンミニマル */
.decorative-box {
    margin: 24px 0;
    padding: 0;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

/* タイトル部分の基本スタイル */
.decorative-box .box-title {
    font-weight: 600;
    padding: 20px 24px 0 24px;
    margin: 0 0 16px 0;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* コンテンツ部分の基本スタイル */
.decorative-box .box-content {
    padding: 0 24px 24px 24px;
    line-height: 1.7;
    color: #374151;
}

/* タイトルなしの場合のコンテンツスタイル */
.decorative-box .box-content:first-child {
    padding: 24px;
}

/* Box26スタイル - パステルブルー */
.decorative-box.box26 {
    background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
    border: 1px solid rgba(129, 140, 248, 0.15);
    position: relative;
}

.decorative-box.box26::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #a5b4fc, transparent);
    opacity: 0.5;
}

.decorative-box.box26 .box-title {
    color: #6366f1;
    position: relative;
    padding-left: 40px;
}

.decorative-box.box26 .box-title::before {
    content: '💡';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 16px;
    opacity: 0.7;
}

/* Box1スタイル - パステルイエロー */
.decorative-box.box1 {
    background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%);
    border: 1px solid rgba(250, 204, 21, 0.15);
    position: relative;
}

.decorative-box.box1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #fde047, transparent);
    opacity: 0.5;
}

.decorative-box.box1 .box-title {
    color: #ca8a04;
    position: relative;
    padding-left: 40px;
}

.decorative-box.box1 .box-title::before {
    content: '✨';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 16px;
    opacity: 0.7;
}

/* Box2スタイル - パステルグリーン */
.decorative-box.box2 {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border: 1px solid rgba(34, 197, 94, 0.15);
    position: relative;
}

.decorative-box.box2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #86efac, transparent);
    opacity: 0.5;
}

.decorative-box.box2 .box-title {
    color: #16a34a;
    position: relative;
    padding-left: 40px;
}

.decorative-box.box2 .box-title::before {
    content: '✓';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 16px;
    opacity: 0.7;
    font-weight: bold;
}

/* Box3スタイル - パステルピンク */
.decorative-box.box3 {
    background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
    border: 1px solid rgba(244, 114, 182, 0.15);
    position: relative;
}

.decorative-box.box3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #f9a8d4, transparent);
    opacity: 0.5;
}

.decorative-box.box3 .box-title {
    color: #db2777;
    position: relative;
    padding-left: 40px;
}

.decorative-box.box3 .box-title::before {
    content: '!';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 16px;
    opacity: 0.7;
    font-weight: bold;
}

/* Box8スタイル - パステルパープル */
.decorative-box.box8 {
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
    border: 1px solid rgba(168, 85, 247, 0.15);
    position: relative;
}

.decorative-box.box8::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #c4b5fd, transparent);
    opacity: 0.5;
}

.decorative-box.box8 .box-title {
    color: #7c3aed;
    position: relative;
    padding-left: 40px;
}

.decorative-box.box8 .box-title::before {
    content: '★';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 16px;
    opacity: 0.7;
}

/* Box23スタイル - 楽しい吹き出し風 */
.decorative-box.box23 {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border: 2px solid #fed7aa;
    border-radius: 7px;
    position: relative;
}

.decorative-box.box23::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fed7aa;
}

.decorative-box.box23::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 32px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 13px solid #fff7ed;
}

.decorative-box.box23 .box-title {
    color: #ea580c;
    position: relative;
    padding-left: 40px;
    font-weight: 700;
}

.decorative-box.box23 .box-title::before {
    content: '🎉';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 18px;
}

.decorative-box.box23 .box-content {
    font-weight: 500;
    color: #c2410c;
    padding: 8px 14px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .decorative-box {
        margin: 20px 0;
        border-radius: 10px;
    }
    
    .decorative-box .box-title {
        padding: 16px 20px 0 36px;
        font-size: 14px;
    }
    
    .decorative-box .box-content {
        padding: 0 20px 20px 20px;
    }
    
    .decorative-box .box-content:first-child {
        padding: 20px;
    }
    
    .decorative-box .box-title::before {
        left: 20px;
        top: 16px;
        font-size: 14px;
    }
    
    .decorative-box.box23::before {
        bottom: -10px;
        left: 25px;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid #fed7aa;
    }
    
    .decorative-box.box23::after {
        bottom: -8px;
        left: 27px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fff7ed;
    }
}

@media (max-width: 480px) {
    .decorative-box {
        margin: 16px 0;
        border-radius: 8px;
    }
    
    .decorative-box .box-title {
        padding: 14px 16px 0 32px;
        font-size: 13px;
    }
    
    .decorative-box .box-content {
        padding: 0 16px 16px 16px;
    }
    
    .decorative-box .box-content:first-child {
        padding: 16px;
    }
    
    .decorative-box .box-title::before {
        left: 16px;
        top: 14px;
        font-size: 13px;
    }
    
    .decorative-box.box23::before {
        bottom: -10px;
        left: 20px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fed7aa;
    }
    
    .decorative-box.box23::after {
        bottom: -8px;
        left: 22px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #fff7ed;
    }
}



/* 洗練された黄色系マーカースタイル */
.yellow-under {
    position: relative;
    display: inline;
    background: linear-gradient(transparent 65%, rgba(254, 240, 138, 0.6) 65%, rgba(254, 240, 138, 0.8) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 500;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.yellow-under:hover {
    background: linear-gradient(transparent 55%, rgba(254, 240, 138, 0.7) 55%, rgba(254, 240, 138, 0.9) 100%);
}

/* より濃いイエローバリエーション */
.yellow-under.thick {
    background: linear-gradient(transparent 60%, rgba(252, 211, 77, 0.7) 60%, rgba(252, 211, 77, 0.9) 100%);
    font-weight: 600;
}

.yellow-under.thick:hover {
    background: linear-gradient(transparent 50%, rgba(252, 211, 77, 0.8) 50%, rgba(252, 211, 77, 1) 100%);
}

/* 薄いイエローバリエーション */
.yellow-under.light {
    background: linear-gradient(transparent 70%, rgba(254, 249, 195, 0.5) 70%, rgba(254, 249, 195, 0.7) 100%);
    font-weight: 400;
}

.yellow-under.light:hover {
    background: linear-gradient(transparent 65%, rgba(254, 249, 195, 0.6) 65%, rgba(254, 249, 195, 0.8) 100%);
}

/* アニメーション効果 */
.yellow-under.animated {
    background: linear-gradient(90deg, transparent 0%, transparent 100%);
    background-size: 0% 100%;
}

.yellow-under.animated:hover,
.yellow-under.animated.active {
    background: linear-gradient(90deg, transparent 65%, rgba(254, 240, 138, 0.6) 65%, rgba(254, 240, 138, 0.8) 100%);
    background-size: 100% 100%;
}

/* プレミアムバリエーション */
.yellow-under.premium {
    background: linear-gradient(transparent 65%, rgba(255, 236, 179, 0.6) 65%, rgba(255, 236, 179, 0.85) 100%);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.yellow-under.premium:hover {
    background: linear-gradient(transparent 55%, rgba(255, 236, 179, 0.75) 55%, rgba(255, 236, 179, 0.95) 100%);
    letter-spacing: 0.02em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .yellow-under {
        padding: 1px 2px;
        font-size: 0.95em;
    }
}

/* モダンテーブルスタイル */
.p-sticky-table {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    margin: 24px 0;
    border-radius: 12px;
    background: #ffffff;
    position: relative;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.p-sticky-table::-webkit-scrollbar {
    height: 8px;
}

.p-sticky-table::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.p-sticky-table::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
    border-radius: 4px;
}

.p-sticky-table::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

.js-scrollable {
    width: 100%;
    min-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.6;
    background: transparent;
    table-layout: auto;
    white-space: nowrap;
}

.js-scrollable th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    font-weight: 600;
    font-size: 13px;
    padding: 16px 20px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 120px;
}

.js-scrollable th:first-child {
    border-top-left-radius: 12px;
    position: sticky;
    left: 0;
    z-index: 11;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.js-scrollable th:last-child {
    border-top-right-radius: 12px;
}

.js-scrollable td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    white-space: nowrap;
    min-width: 120px;
}

.js-scrollable td:first-child {
    background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
    font-weight: 600;
    color: #1e293b;
    position: sticky;
    left: 0;
    z-index: 5;
    border-right: 1px solid #e2e8f0;
    min-width: 150px;
}

.js-scrollable tbody tr:hover {
    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
}

.js-scrollable tbody tr:hover td {
    border-color: #e0e7ff;
}

.js-scrollable tbody tr:hover td:first-child {
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    color: #3730a3;
}

.js-scrollable tbody tr:last-child td {
    border-bottom: none;
}

.js-scrollable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.js-scrollable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* 特別なセルスタイル */
.js-scrollable td[class*="price"], 
.js-scrollable td:contains("円") {
    font-weight: 600;
    color: #059669;
}

.js-scrollable td[class*="na"], 
.js-scrollable td:contains("不明") {
    color: #64748b;
    font-style: italic;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .p-sticky-table {
        margin: 16px 0;
        border-radius: 8px;
    }
    
    .js-scrollable {
        min-width: 700px;
        font-size: 13px;
    }
    
    .js-scrollable th,
    .js-scrollable td {
        padding: 12px 16px;
    }
    
    .js-scrollable th {
        font-size: 12px;
    }
    
    .js-scrollable th:first-child,
    .js-scrollable tbody tr:last-child td:first-child {
        border-radius: 8px 0 0 8px;
    }
    
    .js-scrollable th:last-child,
    .js-scrollable tbody tr:last-child td:last-child {
        border-radius: 0 8px 8px 0;
    }
}

@media (max-width: 480px) {
    .p-sticky-table {
        margin: 12px 0;
        border-radius: 6px;
    }
    
    .js-scrollable {
        min-width: 600px;
        font-size: 12px;
    }
    
    .js-scrollable th,
    .js-scrollable td {
        padding: 10px 12px;
    }
    
    .js-scrollable th {
        font-size: 11px;
    }
}

/* 印刷用スタイル */
@media print {
    .yellow-under {
        background: none !important;
        border-bottom: 2px solid #000;
        font-weight: bold;
    }
    
    .decorative-box {
        box-shadow: none;
        border: 2px solid #000;
        break-inside: avoid;
    }
    
    .decorative-box.box26::before {
        background: #000;
    }
    
    .decorative-box .box-title {
        background: #000 !important;
        color: #fff !important;
        text-shadow: none;
    }
    
    .p-sticky-table {
        box-shadow: none;
        border: 1px solid #000;
        overflow: visible;
    }
    
    .js-scrollable {
        min-width: auto;
        font-size: 12px;
    }
    
    .js-scrollable th,
    .js-scrollable td {
        padding: 8px;
        border: 1px solid #000;
    }
    
    .js-scrollable th {
        background: #f0f0f0 !important;
        color: #000 !important;
    }
    
    .js-scrollable td:first-child,
    .js-scrollable th:first-child {
        position: static;
        box-shadow: none;
    }
}

/* =============================
   タイムライン用スタイル
   ============================= */
.decorative-timeline {
    position: relative;
    margin: 32px 0;
    padding-left: 48px;
    border-left: 3px solid #e0e7ef;
}

.timeline-item {
    position: relative;
    margin-bottom: 32px;
    padding-left: 60px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-label {
    position: absolute;
    left: -60px;
    top: 0;
    background: #6366f1;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 16px;
    padding: 4px 14px 4px 28px;
    box-shadow: 0 2px 8px rgba(99,102,241,0.08);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.timeline-content {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.7;
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 2px;
}

/* タイムラインの丸ポチ */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -50px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 3px solid #6366f1;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(99,102,241,0.08);
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .decorative-timeline {
        padding-left: 24px;
        margin: 24px 0;
    }
    .timeline-item {
        padding-left: 36px;
        margin-bottom: 24px;
    }
    .timeline-label {
        left: -36px;
        font-size: 12px;
        padding: 3px 10px;
    }
    .timeline-title {
        font-size: 14px;
    }
    .timeline-content {
        font-size: 13px;
        padding: 8px 10px;
    }
    .timeline-item::before {
        left: -28px;
        width: 12px;
        height: 12px;
        border-width: 2px;
    }
}

/* Box24スタイル - 口コミ・引用風 */
.box24 {
    background: #fefce8;
    border-left: 5px solid #facc15;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 24px 0;
    color: #7c6f3c;
    font-style: italic;
    font-size: 15px;
    position: relative;
    box-shadow: 0 2px 8px rgba(250,204,21,0.04);
}
.box24::before {
    content: '\201C'; /* 左上に引用符 */
    position: absolute;
    left: 12px;
    top: 8px;
    font-size: 32px;
    color: #facc15;
    opacity: 0.4;
    font-family: serif;
    line-height: 1;
}

@media (max-width: 600px) {
    .box24 {
        padding: 12px 10px;
        font-size: 14px;
    }
    .box24::before {
        font-size: 24px;
        left: 6px;
        top: 4px;
    }
}