@charset "UTF-8";

/* 施工事例一覧の一覧 */
.works_intro_wrap{max-width: 1920px;}
.works_intro {display: flex; gap:4em 40px; flex-wrap: wrap; font-size: min(1.2vw, 100%);}
.works_intro>*{width: calc((100% - 120px) / 4); display: flex; flex-direction: column; gap: 1.5em;}
.works_intro>a{text-decoration: none; color: var(--color-text);}
.works_intro .text{display: flex; flex-direction: column; align-items: center;}
.works_intro .heading{margin: 0; font-size: min(1.8vw,160%);}
.works_intro p{font-size: 90%; margin-bottom: 0; padding: 0 2em;}
.works_intro .dummy_button{text-align: center; font-size: 80%;}
.works_intro>a:hover .dummy_button .button{color:#fff; background: var(--color-black); border-color: transparent;}
@media screen and (min-width:961px){
.works_intro.col3>*{width: calc((100% - 80px) / 3);}
}
@media screen and (max-width:960px){
.works_intro {font-size: 100%;}
.works_intro>*{width: calc((100% - 40px) / 2);}
.works_intro .heading{font-size: min(3.2vw,130%);}
.works_intro p{padding: 0;}
}
@media screen and (max-width:480px){
.works_intro>*{width: 100%;}
.works_intro .heading{ font-size: 160%;}
.works_intro p{font-size: 100%;}
}

/* 施工事例の画像スライダーとサムネイル */
.slider_wrap:has(.works_slider){margin: 2em auto;}
.works_slider{background: var(--bg);}
.works_slider .image{width: 100%; height: auto; display: flex; align-items: center; justify-content: center; position: relative; container-type: inline-size;}
.works_slider .image img{/*width: 100%;*/ max-height:666px; object-fit: contain;}
.works_thumb{margin: 0.5em auto 0;}
.works_thumb .slick-track{margin: auto;}
.works_thumb .slick-slide{position: relative; border: none; padding: 0.5em; cursor: pointer; opacity: 0.6; filter: saturate(0%) contrast(120%); transition: 0.2s opacity ,0.2s filter;}
.works_thumb .slick-slide:not(.slick-current):hover{opacity: 1; filter: saturate(100%) contrast(100%);}
.works_thumb .slick-current{opacity: 1; filter: saturate(100%) contrast(100%);}
.works_thumb .slick-current:before{content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 100; top: 0; left:0; border: 2px solid #000;}
.works_thumb .image{width: 100%; height: auto; aspect-ratio:3/2;}
.works_thumb .image img{width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width:960px) and (orientation: landscape){
.works_slider .image img{width: 80%; max-height:53.3cqw;}
}
@media screen and (max-width:960px) and (orientation: portrait){
.works_slider .image img{max-height:100cqw;}
}

/* 施工事例スライダーのキャプション */
.works_caption{/*display: none !important;*/ margin: 1em auto 0;}
.works_caption .caption{text-align: left; display: flex; flex-direction: column; align-items: center;}
.works_caption .caption p{margin: 0;}
@media screen and (max-width:960px) and (orientation: portrait){
.works_caption{display: block !important;}
}
/* PC用に複製したキャプション */
/* .works_slider .image .caption{font-size: 90%; text-align: left; position: absolute; left: 1em; bottom: 2em; width: calc(100% - 2em); display: flex; flex-direction: column; align-items: center; }
.works_slider .image .caption p{ max-width: 40em; margin: 0; padding: 1em 2em; background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
@media screen and (max-width:960px){
.works_slider .image .caption{font-size: min(1.8vw,100%); left: 0; bottom: 0; width: 100%;}
.works_slider .image .caption p{ max-width: none; padding: 1em;}
}
@media screen and (max-width:960px) and (orientation: portrait){
.works_slider .image .caption{display: none;}
} */

/* 施工事例のデータ */
dl.works_data{display: flex; gap:1em 4%; flex-wrap: wrap; margin: 3em auto; line-height: 1.6;}
dl.works_data>div{width: min((100% - 4%) / 2); display: flex; border-bottom: 1px solid rgba(0,0,0,0.2); padding: 0 0 1em;}
dl.works_data dt{width: 5em; font-weight: var(--fw-bold); }
dl.works_data dd{flex: 1;}
dl.works_data>div:has(dd:empty){display: none;}
@media screen and (max-width:960px){
dl.works_data{flex-direction: column; font-size: 90%;}
dl.works_data>div{width: 100%;}
dl.works_data>div:first-child{border-top: 1px solid rgba(0,0,0,0.2); padding-top: 1em;}
dl.works_data dt{width: 5em; font-weight: var(--fw-bold); }
dl.works_data dd{flex: 1;}
}

/*360°カメラiframeのサイズを調整*/
.wrap360camera{ margin: 0 auto 3em;}
.wrap360camera .ricoh-theta-tour-image{width: 100% !important; height: auto !important;}
.wrap360camera iframe{width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; vertical-align: bottom;}
@media screen and (max-width:960px){
.wrap360camera{ margin: 0 auto 2em;}
}
@media screen and (max-width:960px) and (orientation:portrait){
.wrap360camera iframe{ aspect-ratio: 3/4;}
}