/* =============================================
 コンテンツ制作事例ページ スタイル修正
 作成日:2025-01-16
 ============================================= */




.jk-achievement li {
 padding:12px 0;
 padding-left:35px;
 position:relative;
 line-height:1.8;
 font-size:1rem;
}


.jk-feature-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:30px;
 margin-bottom:40px;
}

.jk-feature-item {
 text-align:center;
 padding:25px;
 background:#f8f9fa;
 border-radius:10px;
 transition:transform 0.3s ease;
}

.jk-feature-item h5 {
 font-size:1.15rem;
 color:#333;
 margin-bottom:12px;
 line-height:1.4;
}

.jk-feature-item p {
 color:#666;
 font-size:0.95rem;
 line-height:1.6;
 
 display:block;
 min-height:auto;
}


.jk-detail-card {
 background:white;
 border-radius:15px;
 padding:35px;
 margin-bottom:35px;
 box-shadow:0 5px 20px rgba(0,0,0,0.08);
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-list li {
 padding:15px 0;
 padding-left:35px;
 position:relative;
 color:#666;
 line-height:1.8;
 font-size:1rem;
}


.emphasis-text {
 font-size:1.2rem;
 color:#FF6B35;
 font-weight:bold;
 text-align:center;
 margin-bottom:25px;
 padding:20px;
 background:#fff5f2;
 border-radius:10px;
 border-left:4px solid #FF6B35;
 line-height:1.6;
}


.comment-box {
 background:#f8f9fa;
 padding:25px;
 border-radius:10px;
 text-align:center;
 border:2px dashed #ddd;
 transition:all 0.3s ease;
 min-height:120px;
}

.comment-box p {
 color:#666;
 font-size:1rem;
 line-height:1.6;
 margin:0;
}


.care-list li {
 background:#f8f9fa;
 padding:25px;
 margin-bottom:20px;
 border-radius:10px;
 border-left:4px solid #FF6B35;
 transition:all 0.3s ease;
 line-height:1.8;
}

.care-list li strong {
 color:#FF6B35;
 display:block;
 margin-bottom:8px;
 font-size:1.15rem;
}




body {
 overflow-x:hidden;
 position:relative;
}

.content-wrapper {
 overflow-x:hidden;
}


.content-example-section,
.control-panel,
.features,
.birthday-container,
.jk-miscon-container {
 overflow-x:hidden;
 position:relative;
}


.jk-feature-grid,
.comment-examples,
.vote-flow {
 max-width:100%;
 overflow-x:auto;
 -webkit-overflow-scrolling:touch;
 scrollbar-width:thin;
}


.jk-feature-grid::-webkit-scrollbar,
.comment-examples::-webkit-scrollbar,
.vote-flow::-webkit-scrollbar {
 height:6px;
}

.jk-feature-grid::-webkit-scrollbar-track,
.comment-examples::-webkit-scrollbar-track,
.vote-flow::-webkit-scrollbar-track {
 background:#f1f1f1;
}

.jk-feature-grid::-webkit-scrollbar-thumb,
.comment-examples::-webkit-scrollbar-thumb,
.vote-flow::-webkit-scrollbar-thumb {
 background:#888;
 border-radius:3px;
}



@media (max-width:768px) {
 
 .content-example-section {
 padding:50px 20px;
 }
 
 
 .content-example-title {
 font-size:2rem;
 margin-bottom:15px;
 line-height:1.3;
 }
 
 .content-example-subtitle {
 font-size:1.2rem;
 line-height:1.5;
 }
 
 
 .control-description {
 font-size:1rem;
 line-height:1.7;
 margin-bottom:30px;
 padding:0 10px;
 }
 
 .control-buttons {
 gap:15px;
 }
 
 .control-btn {
 padding:18px 25px;
 font-size:1rem;
 min-height:60px;
 display:flex;
 align-items:center;
 justify-content:center;
 }
 
 
 .jk-achievement {
 padding:25px;
 }
 
 .jk-achievement li {
 font-size:0.95rem;
 padding:10px 0;
 line-height:1.7;
 }
 
 .jk-feature-grid {
 gap:20px;
 }
 
 .jk-feature-item {
 padding:20px;
 min-height:auto;
 }
 
 .jk-feature-item h5 {
 font-size:1.05rem;
 margin-bottom:10px;
 }
 
 .jk-feature-item p {
 font-size:0.9rem;
 line-height:1.6;
 }
 
 
 .jk-detail-card {
 padding:25px;
 margin-bottom:25px;
 }
 
 .detail-list li {
 font-size:0.95rem;
 padding:12px 0;
 line-height:1.7;
 }
 
 
 .comment-examples {
 gap:15px;
 }
 
 .comment-box {
 padding:20px;
 min-height:100px;
 }
 
 .comment-box p {
 font-size:0.9rem;
 line-height:1.6;
 }
 
 
 .care-list li {
 padding:20px;
 font-size:0.95rem;
 margin-bottom:15px;
 }
 
 
 .jk-link-btn {
 padding:15px 35px;
 font-size:1rem;
 margin:10px 5px;
 }
}

@media (max-width:480px) {
 
 .content-example-title {
 font-size:1.6rem;
 }
 
 .content-example-subtitle {
 font-size:1.05rem;
 }
 
 
 .control-buttons {
 flex-direction:column;
 width:100%;
 max-width:320px;
 margin:0 auto;
 }
 
 .control-btn {
 width:100%;
 padding:16px 20px;
 }
 
 
 .jk-feature-grid {
 grid-template-columns:1fr;
 gap:15px;
 }
 
 
 .jk-detail-card {
 padding:20px;
 }
 
 .detail-header {
 gap:12px;
 }
 
 .detail-icon {
 width:45px;
 height:45px;
 font-size:1.8rem;
 }
}




.vote-flow {
 display:flex;
 align-items:center;
 justify-content:center;
 gap:20px;
 margin:30px 0;
 flex-wrap:wrap;
 padding:0 10px;
}

.vote-step {
 flex:0 1 auto;
 min-width:120px;
}


.twitter-tweet {
 margin:0 auto !important;
 max-width:100% !important;
}


div[style*="max-height:450px"] {
 max-height:450px;
 overflow-y:auto;
 border:1px solid #ddd;
 border-radius:10px;
 padding:15px;
 background:#f8f9fa;
 margin:20px 0;
}


@media (prefers-reduced-motion:reduce) {
 *,
 *::before,
 *::after {
 animation-duration:0.001ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.001ms !important;
 }
}


@media print {
 .site-header,
 .main-menu,
 .menu-overlay,
 .control-panel {
 display:none !important;
 }
 
 body {
 background:white !important;
 color:black !important;
 }
 
 .jk-detail-card,
 .comment-box,
 .care-list li {
 page-break-inside:avoid;
 border:1px solid #ddd;
 }
}