@charset "UTF-8";
/* ==============================================
   外構工事プログレス京都 - case.css (施工事例一覧ページ)
   PC first / breakpoints: 1200 / 960 / 568
   ※メディアクエリは各セクションの直後に配置しています
============================================== */

/* ==============================================
   コンテンツ背景ラップ(パンくず〜施工事例一覧〜ページャー)
============================================== */
.case_page_bg { background: var(--color_bg) url(../img/top/bg_triangle_pc.png) top center / 100% auto no-repeat; }

/* ==============================================
   施工事例一覧
============================================== */
.case_list_section { position: relative; overflow: hidden; padding: 0 0 100px; }
.case_list_section .l_container { position: relative; z-index: 1; }

.case_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.case_grid .case_item { max-width: none; }
.case_grid .case_photo { aspect-ratio: 347 / 214; overflow: hidden; }
.case_grid .case_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case_photo_noimage {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: var(--color_green_light);
}
.case_photo_noimage img { width: 32px; height: 32px; opacity: .5; }

.case_hashtag { margin-top: 10px; font-size: 14px; letter-spacing: .05em; line-height: 1.6; color: var(--color_text_sub); }
.case_hashtag{margin-bottom: 10px;}

.case_empty { text-align: center; padding: 60px 0; letter-spacing: .05em; line-height: 1.75; }

@media only screen and (max-width: 1200px) {
	.case_list_section { padding: 40px 0 90px; }
}
@media only screen and (max-width: 960px) {
	.case_grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media only screen and (max-width: 568px) {
	.case_list_section { padding: 30px 0 60px; }
	.case_grid { grid-template-columns: 1fr; gap: 24px; }
	.case_hashtag { font-size: 12px; }
}

/* ==============================================
   施工事例詳細
============================================== */
.case_detail_section { position: relative; overflow: hidden; padding: 0 0 100px; }
.case_detail_section .l_container { position: relative; z-index: 1; }

@media only screen and (max-width: 1200px) {
	.case_detail_section { padding: 40px 0 90px; }
}

@media only screen and (max-width: 568px) {
	.case_detail_section { padding: 30px 0 60px; }
}

/* ---------- 見出しエリア ---------- */
.case_detail_head { margin-bottom: 24px; }
.case_detail_head .case_tag { margin-bottom: 16px; }
.case_detail_title {
	font-family: var(--font_serif); font-weight: 600; font-size: 32px; letter-spacing: .05em; line-height: 1.5;
	color: var(--color_text); margin-bottom: 16px;
}
.case_detail_address {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 16px; letter-spacing: .05em; color: var(--color_text);
}
.case_detail_address_icon { width: 13px; height: 18px; flex-shrink: 0; }

@media only screen and (max-width: 960px) {
	.case_detail_title { font-size: 26px; }
}
@media only screen and (max-width: 568px) {
	.case_detail_title { font-size: 22px; }
	.case_detail_address { font-size: 14px; }
}

/* ---------- ギャラリー ---------- */
.case_gallery { margin-bottom: 50px; background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 0 4px rgba(34,34,34,.1);}
.case_gallery_main { position: relative; aspect-ratio: 1040 / 600; border-radius: 10px; overflow: hidden; background: #eae9e7; }
.case_gallery_main_img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transform: translateX(30px); transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.case_gallery_main_img.is_active { opacity: 1; transform: translateX(0); pointer-events: auto; z-index: 1; }
.case_gallery_thumbs { display: flex; gap: 20px; margin-top: 20px; }
.case_gallery_thumb {
	flex: 1; aspect-ratio: 245 / 141; border-radius: 6px; overflow: hidden; background: #eae9e7;
	cursor: pointer; position: relative; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .25s ease, opacity .25s ease;
}
.case_gallery_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case_gallery_thumb:not(.is_active) { opacity: .5; }
.case_gallery_thumb.is_active { opacity: 1; }

@media only screen and (max-width: 568px) {
	.case_gallery { margin: 0 -5vw 30px; border-radius: 0; padding: 20px; }
	.case_gallery_main { border-radius: 6px; }
	.case_gallery_thumbs { gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; padding-bottom: 4px; }
	.case_gallery_thumbs::-webkit-scrollbar { display: none; }
	.case_gallery_thumb { flex: 0 0 100px;border-radius: 3px; }
}

/* ---------- 見出し(この施工事例について/施工のポイント) ---------- */
.case_section_heading {
	display: flex; align-items: center; min-height: 38px; padding-left: 40px;
	font-family: var(--font_serif); font-weight: 600; font-size: 24px; letter-spacing: .05em; color: var(--color_text);
	margin-bottom: 20px;
	background: url(../img/case/icon_leaf.svg) left center / 26px auto no-repeat;
}

@media only screen and (max-width: 568px) {
	.case_section_heading { font-size: 19px; min-height: 28px; padding-left: 30px; background-size: 20px auto; margin-bottom: 10px; }
}

/* ---------- この施工事例について ---------- */
.case_detail_body { margin-bottom: 50px; }
.case_comment_text { font-size: 16px; letter-spacing: .1em; line-height: 1.75; margin-bottom: 24px; }
.case_info { background: #fff; border-radius: 10px; padding: 16px; }
.case_info_row {
	display: grid; grid-template-columns: 300px 1fr; align-items: center; min-height: 74px;
	border: 1px solid var(--color_border); overflow: hidden;
}
.case_info_row + .case_info_row { border-top: none; }
.case_info_row:first-child { border-radius: 6px 6px 0 0; }
.case_info_row:last-child { border-radius: 0 0 6px 6px; }
.case_info_row:only-child { border-radius: 6px; }
.case_info_row dt {
	display: flex; align-items: center; gap: 10px; height: 100%;
	background: var(--color_green_light); padding: 12px 20px 12px 60px; font-size: 18px; letter-spacing: .1em;
}
.case_info_row dt img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.case_info_row dd { padding: 12px 24px; font-size: 16px; letter-spacing: .1em;  }
.case_info_price {
	font-family: var(--font_serif); font-weight: 600; font-size: 20px; letter-spacing: .1em; color: var(--color_green);
}
.case_info_price_amount { font-size: 28px; }

@media only screen and (max-width: 960px) {
	.case_info_row { grid-template-columns: 220px 1fr; }
}
@media only screen and (max-width: 568px) {
	.case_detail_body { margin-bottom: 32px; }
	.case_comment_text { font-size: 14px; margin-bottom: 16px; }
	.case_info { border-radius: 6px; }
	.case_info_row { grid-template-columns: 1fr; }
	.case_info_row dt { padding: 10px 15px; font-size: 15px; justify-content: center;}
	.case_info_row dd { padding: 10px 15px; font-size: 14px; }
	.case_info_price { font-size: 15px; text-align: center;}
	.case_info_price_amount { font-size: 22px; }
}

/* ---------- 施工のポイント ---------- */
.case_points { margin-bottom: 50px; }
.case_points_list { display: flex; flex-direction: column; gap: 24px; }
.case_point {
	display: grid; grid-template-columns: 345px 1fr; grid-template-areas: "photo head" "photo text";
	column-gap: 40px; row-gap: 8px; align-items: start;
	background: #fff; border-radius: 10px; box-shadow: 0 0 4px rgba(34,34,34,.12); padding: 16px;
}
.case_point_photo { grid-area: photo; aspect-ratio: 345 / 199; border-radius: 6px; overflow: hidden; }
.case_point_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case_point_head { grid-area: head; padding-top: 8px; }
.case_point_text { grid-area: text; }
.case_point_number { font-family: var(--font_serif); font-weight: 600; font-size: 18px; letter-spacing: .1em; color: var(--color_green); }
.case_point_title { font-family: var(--font_serif); font-weight: 600; font-size: 24px; letter-spacing: .1em; color: var(--color_text); margin: 8px 0 16px; position: relative; padding-bottom: 16px; line-height: 1.5;}
.case_point_title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 1px; background: var(--color_green); }
.case_point_text { font-size: 16px; letter-spacing: .1em; line-height: 1.75; }

@media only screen and (max-width: 960px) {
	.case_point { grid-template-columns: 260px 1fr; column-gap: 24px; }
}
@media only screen and (max-width: 568px) {
	.case_points { margin-bottom: 32px; }
	.case_points_list { gap: 16px; }
	.case_point {
		grid-template-columns: 145px 1fr; grid-template-areas: "photo head" "text text";
		column-gap: 16px; row-gap: 12px; padding: 16px; border-radius: 6px;
	}
	.case_point_photo { aspect-ratio: 145 / 84; }
	.case_point_head { padding-top: 0; }
	.case_point_number { font-size: 15px; }
	.case_point_title { font-size: 15px; margin: 0; padding-bottom: 10px; }
	.case_point_text { font-size: 14px; }
}

/* ---------- 担当者コメント ---------- */
.case_staff {
	display: flex; align-items: center; gap: 40px;
	background: var(--color_green_light); border: 2px solid #d9d7d1; border-radius: 10px; padding: 26px 40px; margin-bottom: 50px;
}
.case_staff_photo { flex-shrink: 0; width: 125px; height: 125px; border-radius: 50%; overflow: hidden; }
.case_staff_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case_staff_body { flex: 1; }
.case_staff_label {
	display: inline-block; background: var(--color_green); color: #fff; border-radius: 14px;
	padding: 4px 20px; font-size: 17px; letter-spacing: .1em; margin-bottom: 16px;
}
.case_staff_text { font-size: 16px; letter-spacing: .1em; line-height: 1.75; }

@media only screen and (max-width: 568px) {
	.case_staff { display: block; overflow: hidden; padding: 20px; margin-bottom: 32px; border-radius: 6px; }
	.case_staff_photo { float: left; width: 91px; height: 91px; margin: 0 12px 8px 0; }
	.case_staff_label { font-size: 14px; padding: 4px 16px; margin-bottom: 12px; }
	.case_staff_text { font-size: 14px; }
}

/* ---------- ページャー(前へ／一覧へ／次へ) ---------- */
.case_nav { display: flex; justify-content: center; align-items: center; gap: 10px; }
.case_nav_btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	height: 50px; padding: 0 24px; border-radius: 3px; border: 1px solid var(--color_green);
	font-size: 18px; letter-spacing: .1em; color: var(--color_green); background: #fff;
	transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.case_nav_btn:hover { background: var(--color_green); color: #fff; }
.case_nav_btn:hover .case_nav_arrow { background-image: url(../img/common/arr_white_right.svg); }
.case_nav_btn-list { min-width: 200px; background: var(--color_green); color: #fff; border-color: var(--color_green); }
.case_nav_btn-list:hover { opacity: .85; background: var(--color_green); color: #fff; }
.case_nav_arrow {
	display: inline-block; width: 10px; height: 16px;
	background: url(../img/common/arr_green_right.svg) center / contain no-repeat;
}
.case_nav_btn-prev .case_nav_arrow { transform: rotate(180deg); }
.case_nav_btn.is_disabled { opacity: .35; pointer-events: none; }

@media only screen and (max-width: 568px) {
	.case_nav { gap: 8px; }
	.case_nav_btn { height: 41px; padding: 0 12px; font-size: 14px; }
	.case_nav_btn-list { min-width: 150px; }
	.case_nav_arrow { width: 8px; height: 13px; }
}

/* ---------- ページャー(施工事例一覧の番号ページャー) ---------- */
.pager { margin-top: 60px; }
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.pagination li a {
	display: flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 3px; border: 1px solid var(--color_green);
	font-family: var(--font_serif); font-weight: 600; font-size: 20px; letter-spacing: .1em; color: var(--color_green);
	background: #fff; transition: background .25s ease, color .25s ease;
}
.pagination li a:hover,
.pagination li a.active { background: var(--color_green); color: #fff; }
.pagination li.pre img,
.pagination li.next img { width: 10px; height: 16px; }
.pagination li.pre img { transform: rotate(180deg); }

@media only screen and (max-width: 568px) {
	.pager { margin-top: 40px; }
	.pagination { gap: 8px; }
	.pagination li a { width: 40px; height: 40px; font-size: 16px; }
	.pagination li.pre img,
	.pagination li.next img { width: 8px; height: 13px; }
}