@charset "UTF-8";
#pro_mainvisual {
	height: 350px;
    background-image: url(../images/pro_mainvisual.jpg);
    background-size: cover;
	background-position: center top;
    background-repeat: no-repeat;
}
#pro_mainvisual h2 {
	color: rgba(255,255,255,0.70);
	text-shadow: 2px 2px 20px #333333;
	font-size: 2rem;
	line-height: 350px;
	position: relative;
	padding-top: 40px;
}
h2:before {
	position: absolute;
	content: 'PRODUCTS';
	top: -2rem;
	left: 0;
	font-size: 5rem;
	display: inline-block;
}
#solution,#testimonials,#works {
	padding: 120px 0;/*ヘッダー固定分のリンクのずれをjsで調整後100px 0に変更する*/
}
#pro_contents h3 {
	color: #9f957c;
	font-size: 1.8rem;
	padding: 50px 0;
	position: relative;
}
#pro_contents h3:before {
	position: absolute;
	top: -1.8rem;
	left: 0;
	font-size: 5rem;
	display: inline-block;
}
#pro_contents h3:after {
	position: absolute;
	content: '';
	left: 0;
	bottom: 35px;
	display: inline-block;
	width: 50px;
	height: 5px;
	background-color: #dfd7cb;
}
#works h3 {
	color: #ffffff;
}
#works h3:after {
	background-color: #ffffff;
}
#works h3:before {
	content: 'Works';
}
#solution h3:before {
	content: 'Solution';
}
#testimonials h3 {
	text-shadow: 2px 2px 15px #ffffff;
}
#testimonials h3:before {
	content: 'Happy Clients';
}
#works {
	background-image: url(../images/works.jpg);
	background-size: cover;
	background-position: center;
    background-repeat: no-repeat;
}
#works li {
	background-color: rgba(255,255,255,0.4);
	padding: 40px;
	border-left: 12px solid rgba(255,255,255,0.6);
}
#works li:first-of-type {
	background-color: rgba(255,255,255,0.3);
	border-left: 12px solid rgba(255,255,255,0.4);
}
#works li:last-of-type {
	background-color: rgba(255,255,255,0.7);
	border-left: 12px solid rgba(255,255,255,0.9);
}
#works li:not(:first-child) {
	margin-top: 40px;
}
#works h4 {
	font-size: 2.2rem;
	margin-bottom: 20px;
	color: #9f957c;
}
#solution h4 {
	font-size: 3rem;
	padding: 50px 0 50px 85px;
	position: relative;
}
#sol_case1 h4:before,#sol_case2 h4:before {
	position: absolute;
	content: '01';
	top: 10px;
	left: 0;
	font-size: 7rem;
	color: #9f957c;
	display: inline-block;
}
#sol_case2 h4:before  {
	content: '02';
}
.sol_problem h5,.sol_solution h5 {
	font-size: 2rem;
	padding: 0 0 1em 55px;
	position: relative;
}
.sol_solution h5 {
	padding: 0 0 1em 0;
}
.sol_problem h5:before,.sol_solution h5:before {
	position: absolute;
	left: 0;
	top: -18px;
    content: '\f119';
    font-family: 'Font Awesome 5 Free';
	font-size: 2em;
	font-weight: 900;
	color: #dfd7cb;
}
.sol_solution h5:before {
	left: 115px;
    content: '\f118';
	font-weight: 400;
	color: #9f957c;
}
.sol_problem {
	padding: 0 30px 40px;
	border-right: 1px solid #c5c5c5;
	border-bottom: 1px solid #c5c5c5;
}
#sol_case1 .sol_solution,#sol_case2 .sol_solution {
	margin: 50px 0;
	padding: 30px 40px;
	background-color: #f5f5f5;
	position: relative;
}
#sol_case2 .sol_solution {
	margin: 50px 0 0;
}
.sol_solution:before {
	position: absolute;
	content: '';
	left: 50%;
	top: -60px;
	display: inline-block;
	width: 1px;
	height: 70px;
	background-color: #c5c5c5;
}
#testimonials {
	background-image: url("../images/pro_testimonials.jpg");
	min-height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	background-position: center top;
    background-repeat: no-repeat;
	position: relative;
}
#testimonials:before {
	content: '';
	background-color: rgba(255,255,255,.4);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
#testimonials ul {
	letter-spacing: -0.5em;
}
#testimonials li {
	letter-spacing: 0em;
}
.balloon_l,.balloon_r {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 1.5em 4% 1.5em 0;
	padding: 50px 30px 30px;
	width: 48%;
	background: #ffffff;
	opacity: 0.8;
}
.balloon_r {
	margin: 1.5em 0;
}
.balloon_l:before,.balloon_r:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 15%;
	border: 10px solid transparent;
	border-top: 10px solid #ffffff;
	border-left: 10px solid #ffffff;
}
.balloon_r:before {
	left: 85%;
	border: 10px solid transparent;
	border-top: 10px solid #ffffff;
	border-right: 10px solid #ffffff;
}
.balloon_l:after,.balloon_r:after {
	content: "";
	position: absolute;
	top: -10px;
	left: 30px;
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/quote@2x.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.balloon_l span,.balloon_r span {
	display: block;
	font-size: 80%;
	color: #777777;
	padding-top: 1em;
	text-align: right;
}





@media screen and (min-width: 560px) and (max-width: 959px) {

#pro_mainvisual {
	height: 300px;
}
#pro_mainvisual h2 {
	font-size: 1.8rem;
	line-height: 300px;
	padding-top: 25px;
}
h2:before {
	top: -1.8rem;
	font-size: 4rem;
}
#solution,#testimonials,#works {
	padding-top: 50px;
}
#pro_contents h3 {
	font-size: 1.6rem;
	padding: 40px 0;
}
#pro_contents h3:before {
	top: -1.6rem;
	font-size: 4rem;
}
#pro_contents h3:after {
	bottom: 25px;
	width: 45px;
}
#solution h4 {
	font-size: 2.5rem;
	padding: 50px 0 50px 75px;
}
#sol_case1 h4:before,#sol_case2 h4:before {
	top: 15px;
	font-size: 6rem;
}
.sol_problem h5,.sol_solution h5 {
	font-size: 1.8rem;
	padding: 0 0 1em 50px;
}
.sol_solution h5 {
	padding: 0 0 1em 0;
}
.sol_problem h5:before,.sol_solution h5:before {
	top: -14px;
}
.balloon_l,.balloon_r {
	margin: 1.5em 0;
	width: 100%;
}
#works li {
	padding: 30px;
	border-left: 10px solid rgba(255,255,255,0.80);
}
#works li:not(:first-child) {
	margin-top: 30px;
}
#works h4 {
	font-size: 2rem;
	margin-bottom: 10px;
}
}





@media screen and (max-width: 559px) {

#pro_mainvisual {
	height: 250px;
}
#pro_mainvisual h2 {
	font-size: 1.7rem;
	line-height: 250px;
	padding-top: 20px;
}
h2:before {
	top: -1.7rem;
	font-size: 3rem;
}
#solution,#testimonials,#works {
	padding-top: 50px;
}
#pro_contents h3 {
	font-size: 1.6rem;
	padding: 25px 0 40px;
}
#pro_contents h3:before {
	top: -1.6rem;
	font-size: 2.5rem;
}
#pro_contents h3:after {
	bottom: 25px;
	width: 45px;
}
#solution h4 {
	font-size: 1.8rem;
	padding: 60px 0 40px;
}
#sol_case1 h4:before,#sol_case2 h4:before {
	top: -5px;
	font-size: 5rem;
}
.sol_problem h5,.sol_solution h5 {
	font-size: 1.6rem;
	padding: 0 0 1em 45px;
}
.sol_problem h5:before,.sol_solution h5:before {
	top: -13px;
}
.sol_solution h5 {
	padding: 0 0 1em 0;
}
.sol_problem h5:before,.sol_solution h5:before {
	top: -14px;
}
.sol_solution h5:before {
	left: 95px;
}
.sol_problem {
	padding: 0 15px 30px;
}
#sol_case1 .sol_solution,#sol_case2 .sol_solution {
	padding: 30px 15px;
}
.balloon_l,.balloon_r {
	margin: 1.5em 0;
	width: 100%;
}
#works li {
	padding: 30px;
	border-left: 10px solid rgba(255,255,255,0.80);
}
#works li:not(:first-child) {
	margin-top: 30px;
}
#works h4 {
	font-size: 1.8rem;
	margin-bottom: 10px;
}
}