@charset "UTF-8";

/* page-works-reform
-------------------------------------*/
@media screen and (min-width:641px) {


.wysiwyg iframe{
	width: 100%;
	height: 480px;
margin: 1.5em 0;
}

	.works-reform-list{
		width: 1100px;
		margin: 0 auto;
	}
	.sy-ttl{
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 1.12px;
		line-height: 24px;
	}
	.link-area{
		width: 900px;
		margin: 0 auto;
	}

	.h2-bg { background-image: url(../images/works-reform/h2.jpg); }
	.h3-ptn-01 { margin-bottom: 38px; }

	/* category-select-01
	-------------------------------------*/
	.category-select-01 { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 8px; }
	.category-select-01 li { width: 130px; padding: 5px 1em 5px 1em; border: 2px solid #19100c; border-radius: 2px; /* CSS3草案 */ -webkit-border-radius: 2px; /* Sfari,Google Chrome用 */ -moz-border-radius: 2px; /* Firefox用 */ color: #19100c; font-size: 15px; font-weight: 700; text-align: center; margin-right: 15px; margin-bottom: 24px; position: relative; }
	.category-select-01 li:hover { background-color: #19100c; color: #fff; }
	.category-select-01 li:hover a { color: #fff; }
	.category-select-01 li:hover a:hover { text-decoration: none; }
	.category-select-01 li:nth-child(5n) { margin-right: 0px; }
	.category-select-01 .active-nav { background-color: #19100c; position: relative; color: #fff; }
	.category-select-01 .active-nav a { color: #fff; text-decoration: none; }
	.category-select-01 .active-nav:after, .category-select-01 .active-nav:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
	.category-select-01 .active-nav:after { border-color: transparent; border-top-color: #19100c; border-width: 6px; margin-left: -6px; }
	.category-select-01 .active-nav:before { border-color: transparent; border-top-color: #19100c; border-width: 12px; margin-left: -12px; }

	/* works-reform-list
	-------------------------------------*/
	.works-reform-list h5 { padding-left: 6px; padding-right: 6px; color: #665d59; font-size: 14px; font-weight: 400; line-height: 18px; }
	.works-reform-list ul { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 51px; }
	.works-reform-list ul li {  width: 340px;margin-right: 40px; margin-bottom: 48px; }
	.works-reform-list ul li img { margin-bottom: 6px; }
	.works-reform-list ul li:nth-child(3n) { margin-right: 0px; }
	.works-reform-list ul li .fit {  height: 236px;margin-bottom: 14px; }
	.works-reform-list ul li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
	.link-area { margin-top: 43px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 64px; }

	/* ☆ 詳細ページ
	-------------------------------------*/
	.h3-Box-01 { margin-bottom: 38px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 3px solid #dddddd; }
	.h3-Box-01 h3 { padding-bottom: 8px; color: #2b2827; font-size: 20px; font-weight: 400; }
	.h3-Box-01 h3:before { content: "\25A0 \a0"; color: #ea5404; font-size: 16px; }

	#sect-01 .h4-ptn-01 {
font-size: 22px;
font-weight: 700;
letter-spacing: 1.1px;
line-height: normal;
margin-bottom: 20px;
	}

	#sect-01 .main-pic { text-align: center; margin-bottom: 32px; }
	#sect-01 .main-pic img { max-width: 100% !important; height: auto !important; }
	#sect-01 .wysiwyg { margin-bottom: 55px; }
	#sect-02 { margin-top: 45px; margin-bottom: 16px;}
	#sect-02 .gallery-list { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
	#sect-02 .gallery-list li {  width: 219px;margin-right: 19px; margin-bottom: 20px; }
	#sect-02 .gallery-list li .fit { height: 120px; }
	#sect-02 .gallery-list li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
	#sect-02 .gallery-list li:nth-child(4n) { margin-right: 0px; }
	#sect-02 .small { color: #666666; font-size: 13px; font-weight: 400; }
	#sect-03 iframe{width: 100%;height: 500px;margin-bottom: 45px;}

	/* before-after
	-------------------------------------*/
	#before-after li { padding-top: 40px; padding-bottom: 30px; padding-left: 30px; padding-right: 30px; border-top: 1px solid #cccccc; }
	#before-after li:last-child { border-bottom: 1px solid #cccccc; }
	#before-after .pic-Box { margin-bottom: 16px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
	#before-after .pic-Box h4 { margin-bottom: 11px; }
	#before-after .deco { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
	#before-after .before-Box { width: 260px;}
	#before-after .before-Box .fit { height: 161px; }
	#before-after .before-Box .fit-box{
		width: 250px;
	}
	#before-after .before-Box .fit-box img{
		width: 100%;
		height: auto;
	}
	#before-after .after-Box { width: 310px; }
	#before-after .after-Box .fit { height: 192px; }
	#before-after .after-Box .fit-box{
		width: 320px;
	}
	#before-after .after-Box .fit-box img{
		width: 100%;
		height: auto;
	}
	#before-after .wysiwyg { color: #333333; font-size: 14px; font-weight: 400; line-height: 30px; }
	

.bottom-bd{
	width: 1100px;
	margin: 0 auto;
}
.top-bd{
	width: 1100px;
	margin: 0 auto;
}

#sect-01{
	width: 1100px;
	margin: 0 auto;
	border: 5px solid #eeece7;
padding: 48px 75px 60px;
margin-bottom: 32px;
margin-top: 32px;
}

.sy-ttl-box{
	margin-bottom: 20px;
	position: relative;
}

.sy-ttl-box .gallery-txt-001{
	position: absolute;
	top: 0;
	right: 0;
}

#sect-03 iframe{
width: 1100px;
height: 610px;
margin: 0 auto;
display: block;
}

}

/*SP用*/
@media screen and (max-width:640px) {


	.wysiwyg iframe{
		width: 100%;
		height: 45.894vw;
	margin: 1.5em 0;
	}

	.works-reform-list{
		width: 92vw;
		margin: 0 auto;
	}
	.sy-ttl{
font-size: 3.14vw;
font-weight: 700;
letter-spacing: 0.271vw;
line-height: 4.831vw;
	}
	.link-area{
		width: 92vw;
		margin: 0 auto;
	}



	.h2-bg {background-image: url(../images/works-reform/h2.jpg);font-size: 5vw;padding: 6vw 3vw;}
	.h3-ptn-01 { margin-bottom: 9.179vw; }
	h4 img { /* padding: 0 25vw; */ }

	/* category-select-01
	-------------------------------------*/
	.category-select-01 { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 1.932vw; }
	.category-select-01 li { width: 31.401vw; padding: 5px 1em 5px 1em; border: 2px solid #19100c; border-radius: 0.483vw; /* CSS3草案 */ -webkit-border-radius: 0.483vw; /* Sfari,Google Chrome用 */ -moz-border-radius: 0.483vw; /* Firefox用 */ color: #19100c; font-size: 3.623vw; font-weight: 700; text-align: center; margin-right: 3.623vw; margin-bottom: 5.797vw; position: relative; }
	.category-select-01 li:hover { background-color: #19100c; color: #fff; }
	.category-select-01 li:hover a { color: #fff; }
	.category-select-01 li:hover a:hover { text-decoration: none; }
	.category-select-01 li:nth-child(5n) { margin-right: 0px; }
	.category-select-01 .active-nav { background-color: #19100c; position: relative; color: #fff; }
	.category-select-01 .active-nav a { color: #fff; text-decoration: none; }
	.category-select-01 .active-nav:after, .category-select-01 .active-nav:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
	.category-select-01 .active-nav:after { border-color: transparent; border-top-color: #19100c; border-width: 1.449vw; margin-left: -1.449vw; }
	.category-select-01 .active-nav:before { border-color: transparent; border-top-color: #19100c; border-width: 2.899vw; margin-left: -2.899vw; }

	/* works-reform-list
	-------------------------------------*/
	.works-reform-list h5 { padding-left: 1.449vw; padding-right: 1.449vw; color: #665d59; font-size: 3.382vw; font-weight: 400; line-height: 4.348vw; }
	.works-reform-list ul { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 12.319vw; }
	.works-reform-list ul li { width: 48%; margin-bottom: 4.348vw; float: left;}
	.works-reform-list ul li:nth-child(2n) { margin-left: 4%;}
	.works-reform-list ul li img { margin-bottom: 1.449vw; }
	.works-reform-list ul li:nth-child(3n) { margin-right: 0px; }
	.works-reform-list ul li .fit { height: 32.85vw; margin-bottom: 1.932vw; }
	.works-reform-list ul li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
	.link-area {margin-top: 3.865vw;padding: 0 10vw;margin-bottom: 7.246vw;}
	.link-area a { margin-top: 3.623vw; display: block; }

	/* ☆ 詳細ページ
	-------------------------------------*/
	.h3-Box-01 { margin-bottom: 9.179vw; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 3px solid #dddddd; }
	.h3-Box-01 h3 { padding-bottom: 1.932vw; color: #2b2827; font-size: 4.831vw; font-weight: 400; }
	.h3-Box-01 h3:before { content: "\25A0 \a0"; color: #ea5404; font-size: 3.865vw; }
	#sect-01 .h4-ptn-01 {
color: #2b2827;
font-size: 4.348vw;
font-weight: 700;
letter-spacing: 0.266vw;
margin-bottom: 4vw;
	}

	#sect-01 .main-pic { text-align: center; margin-bottom: 7.729vw; }
	#sect-01 .main-pic img { max-width: 100% !important; height: auto !important; }
	#sect-01 .wysiwyg { margin-bottom: 5.797vw; }
	#sect-02 { margin-top: 5.797vw; }
	#sect-02 h5 img{
		padding:0 30vw;
	}
	#sect-02 .gallery-list {display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;justify-content: space-between;}
	#sect-02 .gallery-list li {width: 48%;margin-bottom: 2.415vw;}
	#sect-02 .gallery-list li .fit { height: 28.986vw; }
	#sect-02 .gallery-list li .fit:hover { -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }
	#sect-02 .gallery-list li:nth-child(4n) { margin-right: 0px; }
	#sect-02 .small { color: #666666; font-size: 3.14vw; font-weight: 400; }
	#sect-03 { margin-top: 10.87vw;margin-bottom: 10.87vw;}
	#sect-03 h5 img{
		padding:0 30vw;
	}
	#sect-03 iframe{width: 100%;height: 80vw;}

	/* before-after
	-------------------------------------*/
	#before-after li {padding-top: 4.831vw;padding-bottom: 4.831vw;border-top: 1px solid #cccccc;}
	#before-after li:last-child { border-bottom: 1px solid #cccccc; }
	#before-after .pic-Box { margin-bottom: 3.865vw; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
	#before-after .pic-Box h4 {margin-bottom: 2.657vw;}
	#before-after .pic-Box h4 img{height: 5vw;width:initial;margin:0 auto 0;display:block;padding: 0;}
	#before-after .deco { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
	#before-after .before-Box {width: 38%;padding-right: 3%;}
	#before-after .before-Box .fit { height: 38.889vw; }
	#before-after .after-Box {width: 50%;padding-left: 3%;}
	#before-after .after-Box .fit { height: 46.377vw; }
	#before-after .wysiwyg { color: #333333; font-size: 3.382vw; font-weight: 400; line-height: 7.246vw; }


	.bottom-bd{
		width: 92vw;
		margin: 0 auto;
	}
	.top-bd{
		width: 92vw;
		margin: 0 auto;
	}
	
	#sect-01{
		width: 92vw;
		margin: 0 auto;
		border: 5px solid #eeece7;
	padding: 4vw;
	margin-bottom: 7.729vw;
	margin-top: 7.729vw;
	}
	
	.sy-ttl-box{
		margin-bottom: 4.831vw;
		position: relative;
	}
	
	.sy-ttl-box .gallery-txt-001{
		position: absolute;
		top: 0;
		right: 0;
	}

	.sy-ttl-box{
		margin-bottom: 4.831vw;
		position: relative;
	}
	
	.sy-ttl-box .gallery-txt-001{
		position: static;
		top: 0;
		right: 0;
		text-align: center;
		font-size: 3.382vw;
		display: block;
	}
	.sy-ttl-box .gallery-ttl{
		width: 25vw;
		margin: 0 auto;
		margin-bottom: 2vw;
	}
	.sy-ttl-box h4 img{
padding: auto;
	}

	#sect-03 .movie-ttl{
		width: 23vw;
		margin: 0 auto;
		margin-bottom: 4vw;
	}


	#sect-03 iframe{
		width: 92vw;
		height: 51.932vw;
		margin: 0 auto;
		display: block;
		}

}