@charset "utf-8";


#works-list .inner-sct {}
#works-list .searchbox { width: 88%; max-width: 1000px; margin: 0 auto 30px;}
#works-list .searchbox .inner { background: var(--light-gray1);}
#works-list .searchbox .search-toggle { display: block; width: 100%; padding: 8px 0 10px; background: #000; color: #fff; font-weight: 700; text-align: center; cursor: pointer;}
#works-list .searchbox .search-toggle:before { content: ''; display: inline-block; width: 12px; height: 12px; border-bottom: solid 3px #fff; border-right: solid 3px #fff; 
position: relative; transform: translateY(-20%) rotate(45deg); vertical-align: middle;
}
#works-list .searchbox .search-toggle.open:before { transform: translateY(20%) rotate(225deg);}
#works-list .searchbox .search-toggle span { display: inline-block; margin-left: 20px; vertical-align: middle;}
#works-list .searchbox .keywords { display: none; padding: 50px;}
#works-list .searchbox .keywords p { position: relative; font-size: 20px; font-weight: 700;}
#works-list .searchbox .keywords p:after { content: ''; display: block; width: 100%; height: 1px; background: #000; position: absolute; right: 0; top: 50%;}
#works-list .searchbox .keywords p span { position: relative; display: inline-block; padding-right: 20px; background: var(--light-gray1); z-index: 2;}
#works-list .searchbox .keywords ul { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}
#works-list .searchbox .keywords ul li { width: 31.5%; padding: 6px 0;}
#works-list .searchbox .keywords ul.col_2 li { width: 48.5%;}

#works-list .searchbox .keywords ul li input[type=checkbox] { display: none;}
#works-list .searchbox .keywords ul li input[type=checkbox] + span { display: block; color: #000; padding: 0.25em; border: 1px solid #000; background-color: #fff; font-weight: 700; text-align: center; cursor: pointer;}
@media screen and (max-width: 801px) {
 #works-list .searchbox .keywords ul li input[type=checkbox] + span { padding: 0.25em 0; font-size: 0.85em; letter-spacing: 0.03em; }
}
#works-list .searchbox .keywords ul li input[type=checkbox]:checked + span { background-color: #000; color: #fff;}
#works-list .searchbox input.submit { display: block; width: 80%; max-width: 300px; margin: 0 auto; padding: 8px; background: #000; border: none;
color: #fff; font-size: 18px; font-weight: 700; text-align: center;
transition: 0.4s linear;
}
#works-list .searchbox input.submit:hover { opacity: 0.8;}


#works-list .bloc { padding: 40px 0;}
#works-list .bloc .tips { position: relative; z-index: 10; width: 90%; max-width: 680px; margin: 0 auto -20px;}
#works-list .bloc .tips p { display: inline-block; padding: 4px 10px 6px; background: #000; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}

#works-list .works-slider a { position: relative; display: block; width: 680px; background: #fff; margin: 0 10px;}
#works-list .works-slider a img { width: 100%; height: auto;}
#works-list .slick-arrow { display: block; width: 40px; height: 64px; padding: 0; background: transparent; border: none; outline: none;
 position: absolute; top: 50%; z-index: 1; transform: translate(0, -50%);
 cursor: pointer; color: transparent; font-size: 0; line-height: 0;
}
#works-list .slick-prev { left: 0px;}
#works-list .slick-next { right: 0px;}
#works-list .slick-dots { max-width: 680px; margin: 0 auto; top: -20px; bottom: auto; left: 0; right: 0; z-index: 10; text-align: right;}

#works-list .works-desc { width: 90%; max-width: 680px; margin: 0 auto; padding-top: 20px;}
#works-list .works-desc .creator { position: relative; display: flex; align-items: center; margin-bottom: 20px;}
#works-list .works-desc .creator ul { font-size: 0; }
#works-list .works-desc .creator ul li { display: inline-block; width: 56px; margin-right: 8px;}
#works-list .works-desc .creator ul li:last-child { margin-right: 0px;}
#works-list .works-desc .creator ul li img { width: 100%; border-radius: 50%;}
#works-list .works-desc .creator dl { padding-left: 10px;}
#works-list .works-desc .creator dl dt { font-size: 12px; letter-spacing: 0.05rem;}
#works-list .works-desc .creator dl dd { font-size: 16px; font-weight: 700; letter-spacing: 0.1rem;}
#works-list .works-desc .creator dl dd span { position: relative; display: inline-block; padding-right: 1.2em;}
#works-list .works-desc .creator dl dd span:last-child { padding-right: 0px;}
#works-list .works-desc .creator dl dd span:after { content: '&'; position: absolute; right: 0; }
#works-list .works-desc .creator dl dd span:last-child:after { content: none;}
#works-list .works-desc h3 { margin-bottom: 12px; font-size: 28px; font-weight: 700; line-height: 1.5;}
#works-list .works-desc p { letter-spacing: 0.1rem;}
@media (max-width: 1000px) {
	#works-list .inner-sct {}
	#works-list .bloc { padding: 20px 0;}
	#works-list .btn { margin: 30px auto 0;}
}
@media (max-width: 800px) {
	#works-list .bloc .tips p { padding: 2px 10px 4px; font-size: 16px;}
	#works-list .works-slider a { width: 100%; margin: 0;}

	#works-list .works-desc { width: 80%; max-width: 530px;}
	#works-list .works-desc .creator { margin-bottom: 12px;}
	#works-list .works-desc .creator ul li { width: 40px; margin-right: 5px;}
	#works-list .works-desc .creator dl dt { font-size: 10px;}
	#works-list .works-desc .creator dl dd { font-size: 14px;}
	#works-list .works-desc h3 { margin-bottom: 8px; font-size: 20px;}
}
@media (max-width: 480px) {
	#works-list .searchbox .search-toggle { padding: 6px 0 8px; font-size: 14px;}
	#works-list .searchbox .search-toggle:before { width: 10px; height: 10px; border-width: 2px;}
	#works-list .searchbox .keywords { padding: 20px;}
	#works-list .searchbox .keywords p { font-size: 16px;}
	#works-list .searchbox .keywords ul li { font-size: 14px;}
	#works-list .searchbox input.submit { padding: 5px; font-size: 15px;}

}

#works-list .empty { width: 88%; margin: 0 auto; padding: 120px 0 40px;}
#works-list .empty p { text-align: center;}


#works { background: var(--light-gray1);}
#works .inner-sct {}
#works .bloc { padding: 40px 0;}
#works .bloc .tips { position: relative; z-index: 10; width: 90%; max-width: 680px; margin: 0 auto -20px;}
#works .bloc .tips p { display: inline-block; padding: 4px 10px 6px; background: #000; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}

#works .works-slider a { position: relative; display: block; width: 680px; background: #fff; margin: 0 10px;}
#works .works-slider a img { width: 100%; height: auto;}
#works .slick-arrow { display: block; width: 40px; height: 64px; padding: 0; background: transparent; border: none; outline: none;
 position: absolute; top: 50%; z-index: 1; transform: translate(0, -50%);
 cursor: pointer; color: transparent; font-size: 0; line-height: 0;
}
#works .slick-prev { left: 0px;}
#works .slick-next { right: 0px;}
#works .slick-dots { max-width: 680px; margin: 0 auto; top: -20px; bottom: auto; left: 0; right: 0; z-index: 10; text-align: right;}

#works .txt-fullscreen { width: 88%; max-width: 680px; margin: 0 auto; padding: 20px 0;}
#works .txt-fullscreen p { position: relative; padding-left: 30px;}
#works .txt-fullscreen p:before { content: ''; display: block; width: 20px; height: 20px; background: url('../img/icn-fullscreen.svg') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}

#works .descript { width: 90%; max-width: 680px; margin: 0 auto; padding: 20px 0 80px;}
#works .descript h2 { margin-bottom: 20px; font-size: 24px; font-weight: 700;}
#works .descript h2 span { display: inline-block; margin-bottom: 6px; padding: 2px 8px 4px; background: #000; color: #fff; font-size: 20px;}
#works .descript p.area { margin-bottom: 20px;}

#works .works-data { background: linear-gradient(90deg,#000 40%,var(--dark-gray1) 40%);}
#works .works-data .flex { display: flex; width: 90%; max-width: 680px; align-items:center; margin: 0 auto;}
#works .works-data .creator { position: relative; width: 36%; padding: 30px 0; background: #000;}
#works .works-data .detail { width:64%; padding: 30px 20px;}
#works .works-data .creator ul { font-size: 0; }
#works .works-data .creator ul li { padding: 4px;}
#works .works-data .creator ul li dl { display: table; }
#works .works-data .creator ul li dl dt,
#works .works-data .creator ul li dl dd { display: table-cell; vertical-align: middle; color: #fff;}
#works .works-data .creator ul li dl dt { width: 60px; font-size: 12px; letter-spacing: 0.05rem;}
#works .works-data .creator ul li dl dt img { width: 100%; border-radius: 50%;}
#works .works-data .creator ul li dl dd { padding-left: 20px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4;}
#works .works-data .creator ul li dl dd span { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0.1rem;}
#works .works-data .detail p { color: #fff; font-size: 16px;}
#works .point { padding-bottom: 80px; background: #fff;}
#works .point .ttl { padding: 40px 0 20px;}
#works .point .ttl h2 { font-size: 18px; font-weight: 400; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
#works .point .ttl h2 span { display: block; font-size: 46px; letter-spacing: 0.3rem;}
#works .point .bloc { width: 88%; max-width: 1080px; margin: 0 auto;}
#works .point .flex { display: flex; justify-content: space-between; }
#works .point .pht { width: 45%;}
#works .point .txt { width: 50%;}
#works .point .pht figure { text-align: center;}
#works .point .pht figure img { width: auto; max-width: 100%; height: auto; max-height: 350px;}
#works .point .txt h3 { margin-bottom: 12px; font-size: 28px; font-weight: 700;}
@media (max-width: 1000px) {
	#works .bloc { padding: 20px 0;}
}
@media (max-width: 800px) {
	#works .bloc .tips p { padding: 2px 10px 4px; font-size: 16px;}
	#works .works-slider a { width: 100%; margin: 0;}

	#works .descript h2 { font-size: 20px;}
	#works .descript h2 span { font-size: 14px; font-weight: 400;}

	#works .works-data { width: 100%; background: linear-gradient(90deg,#000 35%,var(--dark-gray1) 35%);}
	#works .works-data .flex { width: 100%; max-width: 100%;}
	#works .works-data .creator {}
	#works .works-data .creator dl dt { font-size: 10px;}
	#works .works-data .creator dl dd { font-size: 14px;}
	#works .works-data h3 { margin-bottom: 8px; font-size: 20px;}
	
	#works .point .flex { display: block;}
	#works .point .pht { width: 100%;}
	#works .point .txt { width: 100%; padding: 40px;}
	#works .point .txt h3 { font-size: 24px;}
}
@media (max-width: 480px) {
	#works .txt-fullscreen { padding: 12px 0;}
	#works .txt-fullscreen p { padding-left: 24px; font-size: 12px;}
	#works .txt-fullscreen p:before { width: 16px; height: 16px;}

	
	#works .descript { padding: 12px 0 40px;}
	#works .descript h2 { font-size: 18px;}
	#works .descript h2 span { font-size: 12px;}
	#works .descript p { font-size: 13px;}
	
	#works .works-data .creator { width: 50%;}
	#works .works-data .detail { width: 50%; padding: 20px 12px;}
	#works .works-data .creator ul { padding-left: 12px;}
	#works .works-data .creator ul li dl dt { width: 40px;}
	#works .works-data .creator ul li dl dd { padding-left: 10px; font-size: 13px;}
	#works .works-data .creator ul li dl dd span { font-size: 12px;}
	#works .works-data .detail p { font-size: 12px;}

	#works .point .ttl h2 { font-size: 16px; letter-spacing: 0.06rem;}
	#works .point .ttl h2 span { font-size: 30px; letter-spacing: 0.2rem;}
	#works .point .txt { padding: 24px 0;}
	#works .point .txt h3 { font-size: 18px;}
	#works .point .txt p { font-size: 13px;}
}