/*
Theme Name: TECHNO-PORTベーステーマ（Lightning Child）
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.0
*/

/* ============================================================
   事例（case）詳細ページ用スタイル
   ※ このファイルは SCSS ビルドの対象外です。
     functions.php（STEP 6）から事例関連ページでのみ読み込まれます。
   ============================================================ */

/* --- 事例詳細は1カラム（カテゴリーサイドバーを出さない） --- */
.single-case .sub-section { display: none !important; }

/* --- パンくず（index.php 経由ページ共通） --- */
#breadcrumb { max-width: 1030px; margin: 15px auto 0; padding: 0 15px; font-size: 12px; }
#breadcrumb .breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
#breadcrumb .breadcrumb-list__item { margin: 0; }
#breadcrumb .breadcrumb-list__item:not(:last-child)::after { content: "＞"; margin: 0 0.5em; color: #999; }
#breadcrumb a { color: #666; text-decoration: none; }
#breadcrumb a:hover { color: #cc0000; }

.case-detail { max-width: 1030px; margin: 40px auto 80px; padding: 0 15px; }

/* --- ページヘッダー（アーカイブ等のタイトル帯・index.php 経由ページ共通） --- */
.page-header { max-width: 1030px; margin: 40px auto 0; padding: 0 15px; }
.page-header .page-header-title { font-size: 28px; font-weight: 700; color: #333; line-height: 1.4; margin: 0; padding-bottom: 14px; border-bottom: 3px solid #cc0000; }
@media screen and (max-width: 767px) {
	.page-header { margin-top: 25px; }
	.page-header .page-header-title { font-size: 21px; }
}

/* --- Lightning のモバイルナビ残骸（MENUボタン・ドロワー）を全ページで非表示 --- */
#vk-mobile-nav,
#vk-mobile-nav-menu-btn { display: none !important; }

/* --- カテゴリー --- */
.case-detail__cats { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case-detail__cats li { margin: 0; }
.case-detail__cats a { display: inline-block; font-size: 12px; line-height: 1; padding: 5px 10px; border: 1px solid #cc0000; color: #cc0000; text-decoration: none; border-radius: 2px; }
.case-detail__cats a:hover { background: #cc0000; color: #fff; }

/* --- タイトル --- */
.case-detail__title { font-size: 28px; font-weight: 700; color: #333; line-height: 1.4; margin: 0 0 30px; padding-bottom: 14px; border-bottom: 3px solid #cc0000; }

/* --- 2カラム（左：スライダー／右：スペック表） --- */
.case-detail__main { display: flex; align-items: flex-start; gap: 40px; }
.case-detail__gallery { width: 52%; flex: 0 0 52%; min-width: 0; }
.case-detail__spec { flex: 1 1 0%; min-width: 0; }

/* --- スライダー --- */
.case-slider { margin: 0; }
.case-slider__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #f5f5f5; display: block; }
.case-slider__noimage { aspect-ratio: 4 / 3; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 14px; }

.case-slider .case-arrow { display: block !important; /* 旧CSS(dev_pc.css)の .slick-arrow{display:none!important} 対策 */ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(204, 0, 0, 0.85); cursor: pointer; padding: 0; }
.case-slider .case-arrow::before { content: ""; display: block; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; margin: 0 auto; }
.case-arrow--prev { left: 10px; }
.case-arrow--prev::before { transform: rotate(-135deg); }
.case-arrow--next { right: 10px; }
.case-arrow--next::before { transform: rotate(45deg); }
.case-slider .case-arrow:hover { background: #cc0000; }

.case-slider-nav { margin-top: 10px; }
.case-slider-nav .slick-list { margin: 0 -5px; }
.case-slider-nav .slick-slide { margin: 0 5px; cursor: pointer; opacity: 0.5; border: 2px solid transparent; transition: opacity 0.2s; }
.case-slider-nav .slick-slide img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.case-slider-nav .slick-slide:hover { opacity: 0.8; }
.case-slider-nav .slick-current { opacity: 1; border-color: #cc0000; }

/* --- スペック表 --- */
.case-spec { margin: 0; border-top: 1px solid #ddd; }
.case-spec__row { display: flex; border-bottom: 1px solid #ddd; }
.case-spec__row dt { flex: 0 0 8.5em; padding: 12px; background: #f8f8f8; border-left: 3px solid #cc0000; font-weight: 700; color: #333; }
.case-spec__row dd { flex: 1 1 0%; margin: 0; padding: 12px; min-width: 0; }

/* --- 本文・戻るボタン --- */
.case-detail__content { margin-top: 50px; }
.case-detail__back { margin-top: 50px; text-align: center; }
.case-detail__back a { display: inline-block; min-width: 240px; padding: 14px 30px; background: #cc0000; color: #fff; text-decoration: none; font-weight: 700; border-radius: 3px; transition: opacity 0.2s; }
.case-detail__back a:hover { opacity: 0.8; }

/* --- スマホ --- */
@media screen and (max-width: 767px) {
	.case-detail { margin: 25px auto 50px; }
	.case-detail__title { font-size: 21px; margin-bottom: 20px; }
	.case-detail__main { flex-direction: column; gap: 25px; }
	.case-detail__gallery { width: 100%; flex: none; }
	.case-spec__row { flex-direction: column; }
	.case-spec__row dt { flex: none; padding: 8px 12px; }
	.case-spec__row dd { padding: 10px 12px; }
	.case-detail__back a { display: block; }
}