@charset "UTF-8";

/* 施工事例 */
.works_clm {
	display: flex;
	align-items: start;
	position: relative;
}

/* 事例リスト */
.works_clm .works_list_wrap {
    width: calc(100% - 250px);
	margin-left: 0;
    position: relative;
    left: 0;
    transition: .3s;
    background-color: var(--color-bg);
}
.works_clm .works_list_wrap.list_andSide {
	width: calc(100% - 250px - 5rem);
    margin-left: 0;
}
.works_clm .works_list_wrap.list_only {
	transition-delay: .2s;
    width: calc(100% + 250px);
    margin-left: calc(-250px - 5rem);
}

#filter_toggle {
	font-size: 16px;
	display: flex;
	align-items: center;
	cursor: pointer;
	max-width: max-content;
	position: absolute;
    top: 0;
    left: 330px;
    z-index: 3;
	transition: .3s;
	transition-delay: 0s;
}
#filter_toggle.active {
	transition-delay: .2s;
	left: 0;
}
#filter_toggle .toggle-icon {
	width: 1.5em;
	height: 1.5em;
	background-color: var(--color-brandGr);
	border-radius: 50%;
	display: inline-block;
	margin-right: .5em;
	transition: .3s;
	position: relative;
}
#filter_toggle .toggle-icon::before {
	content: "";
	width: 1px;
	height: 50%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 22%;
	transform: translateY(-50%);
}
#filter_toggle .toggle-icon::after {
	content: "";
	width: .7em;
	height: .7em;
	background-image: url(../img/icon/icon_arw_wh.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 50%;
	left: 34%;
	transform: translateY(-50%) scale(-1, 1);
	transition: .3s;
}
#filter_toggle.active .toggle-icon::after {
	transform: translateY(-50%) scale(1, 1);
}
@media (min-width: 1024px) {
	.toggle-text {
		background: linear-gradient(#333, #333) 0 100% / 0 1px no-repeat;
		display: inline;
		transition: 0.3s cubic-bezier(0, 0.55, 0.45, 1);
	}
	#filter_toggle:hover .toggle-text {
		background-size: 100% 1px;
	}
}
@media screen and (max-width: 750px) {
  #filter_toggle .toggle-text.target {
    color: transparent; /* 元のテキストを見えなくする */
    position: relative;
  }
  #filter_toggle .toggle-text.target::before {
	content: "絞り込み検索を開く";
    color: var(--color-maintxt);
    position: absolute;
    left: 0;
    top: 0;
  }
}

.works-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	border-top: 1px solid var(--color-border1);
	padding-top: 1rem;
	margin-top: 3.1rem;
}
.works-filter-countTxt {
	margin: 10px 3em 10px 0;
}
.works-filter-countTxt span {
	font-size: var(--font-size20px);
	color: var(--color-brandGr);
	line-height: 1;
}
#works-filter-form {
	display: flex;
	justify-content: left;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em 2em;
}
.works-filter-group span {
	font-size: var(--font-size14px);
	margin-right: .5em;
}
.works-filter-group input + label {
	font-size: var(--font-size14px);
	line-height: 1;
	color: var(--color-brandGr);
	border: 1px solid var(--color-brandGr);
	border-radius: 99px;
	padding: 0.3em 0.7em 0.4em;
	margin-left: 4px;
	display: inline-block;
	cursor: pointer;
	transition: .3s;
}
.works-filter-group input:checked + label {
	background-color: var(--color-brandGr);
	color: #fff;
}
@media (min-width: 1024px) {
	.works-filter-group input + label:hover {
		background-color: var(--color-brandGr);
		color: #fff;
	}
}
@media (max-width: 750px) {
	#filter_toggle {
    	left: 0;
	}
	#filter_toggle .toggle-icon::before {
		left: 22%;
	}
	#filter_toggle .toggle-icon::after {
        width: 100%;
        height: 100%;
        background-size: 50%;
        top: 0;
        left: 8%;
        transform: translateY(0%) scale(1, 1) rotate(180deg);
	}
	.works-filter-group input + label {
		padding: 0.2em 0.5em 0.4em;
	}
}

.list_andSide #works-list-container {
	animation: fadeIn 1s ease;
}
@keyframes fadeIn {
	0% {opacity: 0;}
	20% {opacity: 0;}
	100% {opacity: 1;}
}
.list_only #works-list-container {
	animation: fadeOut .8s ease;
}
@keyframes fadeOut {
	0% {opacity: 1;}
	10% {opacity: 0;}
	60% {opacity: 0;}
	80% {opacity: 1;}
	100% {opacity: 1;}
}

.works_list {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: calc(4rem - 1em);
	margin-bottom: 4em;
}
.works_item {
	width: calc(100% / 3 - 1.6667rem);
}
.works_item_img {
	overflow: hidden;
	display: block;
}
.works_item_img + div {
	padding-top: 1.5em;
}
.works_item_img img {
	transition: .8s;
}
@media (min-width: 1024px) {
	.works_item a:hover img {
		transform: scale(1.04);
	}
}


.works_item .flexBox {
	align-items: center;
	justify-content: space-between;
	margin: .75em 0 0;
	gap: 0 1em;
}

.works_item_type {
	font-size: 11px;
	color: var(--color-brandGr);
	line-height: 1.2;
	background-color: var(--color-brandGr_thin);
    padding: 0.7em 1em;
    border-radius: 1px;
	display: inline-block;
	transition: 0.5s;
}
@media (min-width: 1024px) {
	.works_item_type:hover {
		background-color: var(--color-brandGr);
		color: #fff;
	}
}

.works_item_name {
	padding-top: .5em;
	padding-left: 1.8em;
}
.works_item_name p {
	font-size: var(--font-size20px);
	line-height: 1.4;
	position: relative;
	display: inline-block;
	background: linear-gradient(#333, #333) 0 100% / 0 1px no-repeat;
    display: inline;
    transition: 0.3s cubic-bezier(0, 0.55, 0.45, 1);
}
.works_item_name p::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: -1.4em;
	width: 1em;
	height: 1em;
	background-color: var(--color-brandGr);
	border-radius: 50%;
	transition: .3s;
}
.works_item_name.icon_Arw_wh > *::after {
	width: 0.6em;
    height: 0.6em;
	position: absolute;
    margin: 0;
    top: 0.4em;
    left: -1.2em;
	background-size: 90%;
}
@media (max-width: 1279px) {
	.works_list {
    	gap: max(40px, 4vw) 4vw;
	}
  	.works_item {
		width: calc(100% / 2 - 2.05vw);
		position: relative;
	}
	.works_item_fav {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 2em;
		height: 2em;
	}
}
@media (min-width: 1024px) {
	.works_item a:hover .works_item_name p {
		background-size: 100% 1px;
	}
}


/* お気に入りボタン */
.works_item_fav {
	min-width: 1.5em;
	width: 1.5em;
	height: 1.5em;
	background-image: url(../img/icon/icon_heart_bl.svg);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	border: 0;
	background-color: transparent;
	transition: width .3s;
	display: inline-block;
}
.works_item_fav.is-favorite {
	background-image: url(../img/icon/icon_heart_bggr.svg);
	background-size: 90%;
}



/*------------------------
左サイド：検索
------------------------*/
.works_clm aside {
	width: 250px;
	min-width: 250px;
    transition: .3s;
    margin-right: 5rem;
	opacity: 1;
	visibility: visible;
}
.works_clm aside.aside_close {
	opacity: 0;
	visibility: hidden;
}

#filter_option_form > .filter_option_inner:last-child {
	border-bottom: 0;
}

.filter_option_inner {
	border-bottom: 1px solid var(--color-border1);
	margin-bottom: 1.5em;
}
.filter_option_inner.border_none {
	border-bottom: 0;
	padding-bottom: 0;
}

.filter_option_inner li:not(:last-child) {
	margin-bottom: .8em;
}
.filter_option_inner > p {
	font-size: var(--font-size14px);
	border-bottom: 1px solid var(--color-border1);
	padding-bottom: 1em;
	line-height: 1;
}
.filter_option_inner.border_none  > p {
	border-bottom: 0;
	margin-bottom: 0;
}
.filter_option_inner .filter_accordion_btn {
	padding: 1em;
	transition: .3s;
	position: relative;
	display: flex;
	cursor: pointer;
}
.filter_option_inner .filter_accordion_btn p {
	font-size: var(--font-size14px);
}
.filter_option_inner .filter_accordion_btn .icon_accordion_arw {
	right: 1em;
}
.filter_option_inner .accordion_cnt {
	font-size: var(--font-size14px);
	margin-bottom: 1em;
	padding: 0 1em;
}
@media (min-width: 1024px) {
	.filter_option_inner .filter_accordion_btn:hover {
		background-color: #F5F1EB;
	}
}

/* カテゴリーボタン */
.type_list {
	margin: 1em 0 0;
    padding-bottom: 1.5em;
    border-bottom: 0;
}
.type_list > p {
	border-bottom: 0;
}
.type_list li:not(:last-child) {
	margin-bottom: .5em;
}
.type_list input + label {
	margin-left: 0;
	line-height: 1.2;
	padding: 0.4em 1em;
}

/* チェックボックス */
.check_list label {
	font-size: var(--font-size14px);
	display: flex;
	align-items: center;
	column-gap: 8px;
	width: fit-content;
	line-height: 1;
	cursor: pointer;
}
.check_list label:not(:last-of-type) {
 	 margin-bottom: 0.5em;
}
.check_list label input[type="checkbox"] {
	position: relative;
	width: 1.3em;
	height: 1.3em;
	background-color: #BCBCBC;
	border-radius: 50%;
	vertical-align: -2px;
	-webkit-appearance: none;
		-moz-appearance: none;
			appearance: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: .3s;
}
.check_list label input:focus {
	outline: none;
}
.check_list label input::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.25em);
    left: calc(50% - 0.25em);
    transform: rotate(-45deg);
    width: 0.5em;
    height: 0.25em;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transition: .3s;
}
.check_list label input:checked {
	background-color: var(--color-brandGr);
}

/* ラジオボタン */
.radio_list label {
	font-size: var(--font-size14px);
	display: flex;
	align-items: center;
	column-gap: 4px;
	width: fit-content;
	line-height: 1;
	cursor: pointer;
}
.check_list label:not(:last-of-type) {
 	 margin-bottom: 0.5em;
}
.radio_list label input[type="radio"] {
	position: relative;
	width: 1.3em;
	height: 1.3em;
	border: 1px solid #ddd;
	-webkit-appearance: none;
		-moz-appearance: none;
			appearance: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	border-radius: 9999px;
	box-sizing: border-box;
	transition: .3s;
}
.radio_list label input:focus {
	outline: none;
}
.radio_list label input::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.7);
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 9999px;
	background-color: var(--color-brandGr);
	transition: .3s;
	opacity: 0;
}
.radio_list label input:checked {
	border-color: var(--color-brandGr);
}
.radio_list label input:checked::after {
	opacity: 1;
}

@media (max-width: 750px) {
  .works_clm aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    min-width: auto;
    z-index: 999;
    background-color: var(--color-bg);
    margin: 0;
    transform: translateX(-100%);
	opacity: 1;
  }
  .works_clm aside nav {
	overflow: scroll;
	height: calc(100vh - 16px - 10vw);
	padding: 5vw 5vw 12vh;
  }
  .works_clm .works_list_wrap {
	width: 100%;
	margin-left: 0;
  }
  #aside_close {
	padding: 5vw;
    border-bottom: 1px solid var(--color-border1);
    font-size: 16px;
	line-height: 1;
	position: relative;
  }
  #aside_close::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 5vw;
	width: 1.2em;
	height: 1px;
	background-color: #333;
	transform: translateY(-50%) rotate(-45deg);
  }
  #aside_close::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 5vw;
	width: 1.2em;
	height: 1px;
	background-color: #333;
	transform: translateY(-50%) rotate(45deg);
  }
  /* aside_toggle */
  .aside_toggle .works_clm aside {
	transform: translateX(0);
  }
  body::before {
	content: "";
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }
  body.aside_toggle {
	overflow: hidden;
  }
  body.aside_toggle::before {
	visibility: visible;
	opacity: 1;
  }
}



/*------------------------
事例詳細ページ
------------------------*/
.product_heading {
	text-align: center;
}
.product_heading h1 {
	margin-bottom: 1em;
}
.product_heading_type {
    font-size: var(--font-size14px);
    color: var(--color-brandGr);
    line-height: 1;
    padding: 0.4em 0.8em;
    /* margin-top: 1em; */
    border: 1px solid var(--color-brandGr);
    border-radius: 99px;
    display: inline-block;
	margin: .5em;
}

.works_item_product {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	padding-bottom: 0;
}
.works_item_product .flexBox {
	margin: 0 0 3.5em;
	gap: 1em;
}
.works_item_product .works_item_fav {
	color:  var(--color-brandGr);
	width: auto;
    height: auto;
    padding: 1em 1.5em 1em 3em;
    border: 1px solid var(--color-brandGr);
    border-radius: 2px;
	background-size: 1.5em;
    background-position: 1em center;
	background-image: url(../img/icon/icon_heart_gr.svg);
}
.works_item_product .works_item_fav.is-favorite {
	background-image: url(../img/icon/icon_heart_bggr.svg);
}
@media (max-width: 1279px) {
    .works_item_fav {
        position: static;
    }
}
@media (max-width: 750px) {
    .works_item_product .flexBox {
		flex-wrap: wrap;
    }
	.works_item_product .btn_bgGr {
		width: 100%;
	}
	.works_item_product .btn_bgGr a {
		max-width: 100%;
		justify-content: center;
	}
	.works_item_product .works_item_fav {
		background-position: calc(50% - 6em) center;
		width: 100%;
	}
}


/* スライダー */
.product_slider_wrap {
    position: relative;
	max-width: 840px;
	margin: auto;
}
.product_slider_wrap img {
    width: auto;
	height: auto;
	margin: auto;
	max-height: 494px;
}
.product_slider_wrap .product_slider {
    display: none;
  }
.product_slider_wrap .product_slider.slick-initialized {
    display: block; 
  }
.product_slider_wrap .slick-track {
	display: flex;
	align-items: center;
	max-height: 494px;
}
.product_slider_wrap .slick-list {
	max-width: 800px;
	margin: auto;
	background-color: #ECEAE7;
}
.product_slider_thum {
    transform: translateY(-50%);
    width: calc(62px * 4);
    margin: auto;
    padding: 8px 68px 8px 8px;
    background-color: var(--color-bg);
    border-radius: 3px 3px 0 0;
}
.product_slider_thum-img {
	max-width: 56px!important;
    height: 56px!important;
    margin: 0 1px;
    opacity: .3;
    transition: .3s;
	cursor: pointer;
}
.slick-current.product_slider_thum-img {
    opacity: 1;
}
.product_slider_thum img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.product_sliderBtn {
    position: absolute;
    bottom: -4px;
	left: calc(50% + 58px);
    transform: translateY(calc(-100% + .5em));
    display: flex;
}
.product_slick_pause {
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: #ECEAE7;
	border: 0;
    position: relative;
    cursor: pointer;
}
.product_slick_pause::before {
    content: "";
    width: 25%;
    height: 25%;
    background-image: url(../img/icon/icon_slider_stop.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.paused .product_slick_pause::before {
    background-image: url(../img/icon/icon_slider_play.svg);
}
.product_slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #F0F4EF;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    font-size: 0;
}
.product_slider .slick-arrow::before {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 999px;
	background-color: var(--color-brandGr);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: .3s;
	z-index: 2;
}
.product_slider .slick-prev {
	left: 0px;
}
.product_slider .slick-prev::after {
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../img/icon/icon_arw_gr.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(180deg);
	transition: width .3s;
	z-index: 3;
}
.product_slider .slick-next {
	right: 0px;
}
.product_slider .slick-next::after {
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../img/icon/icon_arw_gr.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: width .3s;
	z-index: 3;
}
@media (min-width: 1024px) {
	.product_slider .slick-arrow:hover::before {
		transform: translate(-50%, -50%) scale(1);
	}
	.product_slider .slick-prev:hover::after,
	.product_slider .slick-next:hover::after {
		background-image: url(../img/icon/icon_arw_wh.svg);
	}
}

/* スライドが3枚以下の場合 */
.is-static .product_slider_thum {
	display: flex;
	justify-content: center;
	width: calc(62px * 3);
    padding: 8px;
}
.is-static .product_slider_thum-img {
    width: 56px !important;
}
@media (max-width: 750px) {
	.product_slider_wrap .slick-track,
	.product_slider_wrap img {
		max-height: 57vw;
	}
	.product_slider .slick-prev {
    	left: -20px;
	}
	.product_slider .slick-next {
    	right: -20px;
	}
	.product_slider_thum {
		transform: translateY(0);
	}
	.product_sliderBtn {
		transform: translateY(0);
    	bottom: 8px;
	}
}

/* youtube */
.youtube_wrap iframe {
	max-width: 1170px;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Layout：図面 */
.layout_clm {
	display: flex;
	flex-wrap: wrap;
    gap: 3em;
	margin-bottom: 3em;
}
.layout_clm figure {
	width: calc(100% / 3 - 2em);
}
.layout_clm figure img {
	width: 100%;
}
.layout_clm figure figcaption {
	font-size: var(--font-size12px);
	margin-top: 0.5em;
}
@media (max-width: 1279px) {
	.layout_clm {
		gap: 2em 4vw;
	}
	.layout_clm figure {
		width: calc(100% / 2 - 2vw);
	}
	.layout_clm + .btn_bgGr a {
		margin: auto;
	}
}

/* share_btn */
.share_btns_wrap {
	background-color: #ECEAE7;
	justify-content: center;
	align-items: center;
	gap: 3em;
	padding: 1.5em;
}
.share_btns_wrap > p {
	font-size: 16px;
	line-height: 1.5;
}
.share_btns {
	display: flex;
	align-items: center;
	gap: 1em;
}
.share_btns a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 60px;
}
.share_btns .icon_X a {
	background-color: #000;
}
.share_btns .icon_fb a {
	background-color: #0866FF;
}
@media (max-width: 750px) {
	.share_btns_wrap {
		display: block;
		padding: 1.5em 2.3em 2.3em;
	}
	.share_btns_wrap > p {
		text-align: center;
		margin-bottom: 1.5em;
	}
	.share_btns {
		gap: 1em;
		max-width: 200px;
		margin: auto;
		flex-wrap: wrap;
	}
}

.btn_bgGr.back_btn a {
	margin: auto;
}

/* その他の事例 */
.other_works {
	padding-right: 0;
	overflow: hidden;
	max-width: 100%;
}
.other_works > p {
	font-size: var(--font-size20px);
	margin-bottom: 2.4em;
}
.other_works .slick-initialized .slick-slide {
	margin-right: 2em;
	padding-bottom: 0;
}
.other_works .slick-list {
	margin-right: -20%;
	margin-bottom: calc(3em + 20px);
}
@media (min-width: 1024px) {
	.other_works a:hover .works_item_type {
		background-color: var(--color-brandGr);
		color: #fff;
	}
}
@media (max-width: 750px) {
	.other_works > p {
		margin-bottom: 1.33em;
	}
	.other_works .slick-list {
		margin-right: -40%;
		margin-bottom: calc(1.7em + 20px);
	}
	.other_works .slick-initialized .slick-slide {
    	margin-right: 4vw;
	}
}


/*------------------------
お気に入りページ
------------------------*/
.works-controls_favorites {
	border-top: 0;
}
.works-controls_favorites .works-filter-countTxt {
	margin-right: 1em;
}
#favorite-works-list .works_item {
	cursor: move;
}
.works_item_placeholder {
	width: calc(100% / 3 - 1.5rem);
	height: 100%;
	background-color: #f0f0f0;
	border: 2px dashed #ccc;
	box-sizing: border-box;
	flex-shrink: 0;
}
.works-filter-clear #clear-all-favorites {
	background-color: var(--color-brandGr);
	border-radius: 2px;
	padding: 1em 1.5em 1em 3em;
	color: #fff;
	transition: .3s;
	border: 1px solid;
	background-image: url(../img/icon/icon_heart_wh.svg);
	background-repeat: no-repeat;
	background-position: 1.3em center;
	background-size: 1.3em;
	line-height: 1;
	border: 0;
}
.works-filter-clear p {
	border-radius: 2px;
	padding: 1em 1.5em 1em 3em;
	color: var(--color-maintxt_thin);
	transition: .3s;
	border: 1px solid #ddd;
	background-image: url(../img/icon/icon_heart_bl.svg);
	background-repeat: no-repeat;
	background-position: 1.3em center;
	background-size: 1.3em;
	line-height: 1;
}
.no_favorites {
	text-align: center;
	font-size: var(--font-size24px);
	width: 100%;
}
@media (max-width: 1279px) {
	.works_item_placeholder {
		width: calc(100% / 2 - 2vw);
	}
}



/*------------------------
事例、お気に入り一覧　ページネーション
------------------------*/
@media (max-width: 750px) {
	.pagination .next,
	.pagination .prev {
		background-color: transparent;
	}
}

/*------------------------
タブキー用
------------------------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.visually-hidden:focus-visible + label {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}


/*------------------------
複数カテゴリの表示
------------------------*/
#works_list_top .works_item .flexBox,
#favorite-works-list .works_item .flexBox {
	align-items: flex-start;
}
.works_item_type_container .works_item_type{
	margin-right: .5em;
	margin-bottom: .5em;
}
.works_item_fav_container {
	    padding-top: .4em;
}