@charset "UTF-8";

.portfolio {
	background: #f0f0f0;
	padding: 0 0 45px;
}
.tabs {
	padding: 8px;
	border-bottom: 2px solid #fff;
	padding: 12px 10px 0;
	margin: 0;
}
.tabs > .tab {
  display: inline-block;
  background-color: #647182;
	width: 25%;
	box-sizing: border-box;
	text-align: center;
	float: left;
	border-top: 1px solid #f0f0f0;
	border-left: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
}
.tabs > .tab.active {
  background-color: #ffffff;
}
.tabs > .tab a {
	display: block;
	font-size: 14px;
	padding: 16px 0 14px;
}
.tabs > .tab.active a {
	color: #2a2a2a;
}
.panels > .panel {
  display: none;
}
.panels > .panel.active {
  display: block;
}
.panels .whatwedo-logo {
  max-width: 1190px;
  width: 91.750192752%;
  margin: 31px auto 0;
}
.panels .whatwedo-logo img {
  width: 100%;
  height: auto;
}
.panels .desc {
	text-align: center;
	font-size: 14px;
	line-height: 22px;
	padding: 55px 0 35px;
}
.popup {
	background: #fff;
	width: 100%;
	z-index: 100;
	position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
	transform: scale(0);
	-webkit-transform: scale(0);
  transition: visibility 0s cubic-bezier(0.63, 0.29, 0.17, 1.35) 0.5s, all 0.5s cubic-bezier(0.63, 0.29, 0.17, 1.35) 0s;
	-webkit-transition: visibility 0s cubic-bezier(0.63, 0.29, 0.17, 1.35) 0.5s, all 0.5s cubic-bezier(0.63, 0.29, 0.17, 1.35) 0s;
  visibility: hidden;
}
.popup.is-active {
  opacity: 1;
  transform: scale(1);
	-webkit-transform: scale(1);
  transition-delay: 0s;
	-webkit-transition-delay: 0s;
  visibility: visible;
}
.pop_header {
	height: 353px;
	width: 100%;
	background: url(../img/portfolio/bg02.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	text-align: center;
}
.pop_header01 {
	background-image: url(../img/portfolio/ph01.jpg);
}
.pop_header02 {
	background-image: url(../img/portfolio/ph02.jpg);
}
.pop_header03 {
	background-image: url(../img/portfolio/ph03.jpg);
}
.pop_header04 {
	background-image: url(../img/portfolio/ph04.jpg);
}
.pop_header05 {
	background-image: url(../img/portfolio/ph05.jpg);
}
.pop_header06 {
	background-image: none;
	background-color: #007cc6;
}
.pop_header07 {
	background-image: url(../img/portfolio/ph07.jpg);
}
.pop_header08 {
	background-image: url(../img/portfolio/ph08.jpg);
}
.pop_header09 {
	background-image: url(../img/portfolio/ph09.jpg);
}
.pop_header10 {
	background-image: url(../img/portfolio/ph10.jpg);
}
.pop_header11 {
	background-image: url(../img/portfolio/ph11.jpg);
}
.pop_header12 {
	background-image: url(../img/portfolio/ph12.jpg);
}
.pop_header13 {
	background-image: none;
	background-color: #003766;
}
.pop_header14 {
	background-image: url(../img/portfolio/ph14.jpg);
}
.pop_header15 {
	background-image: url(../img/portfolio/ph15.jpg);
}
.pop_header16 {
	background-image: url(../img/portfolio/ph16.jpg);
}
.pop_header17 {
	background-image: none;
	background-color: #1c5fa8;
}
.pop_header18 {
	background-image: url(../img/portfolio/ph18.jpg);
}
.pop_header19 {
	background-image: url(../img/portfolio/ph19.jpg);
}
.pop_header20 {
	background-image: none;
	background-color: #283593;
}
.pop_header21 {
	background-image: url(../img/portfolio/ph21.jpg);
}
.pop_header22 {
	background-image: url(../img/portfolio/ph22.jpg);
}
.pop_header23 {
	background-image: none;
	background-color: #999;
}
.pop_header24 {
	background-image: url(../img/portfolio/ph24.jpg);
}
.pop_header25 {
	background-image: url(../img/portfolio/ph25.jpg);
	background-size: auto;
	background-repeat: repeat;
}
.pop_header26 {
	background-image: url(../img/portfolio/ph26.jpg);
}
.pop_header27 {
	background-image: url(../img/portfolio/ph27.jpg);
}
.pop_header28 {
	background-image: url(../img/portfolio/ph28.jpg);
}
.pop_header29 {
  background-image: url(../img/portfolio/ph29.jpg);
}
.pop_header30 {
  background-image: url(../img/portfolio/ph30.jpg);
}
.pop_header31 {
  background-image: url(../img/portfolio/ph31.jpg);
}
.pop_header .logo_area {
	bottom: 30px;
	position: absolute;
	width: 100%;
	left: 0;
}
.pop_header .logo_area img {
	vertical-align: middle;
}
.pop_desc {
	margin: 50px 20px;
}
.pop_desc p {
	text-align: center;
	font-size: 14px;
	line-height: 28px;
	margin: 0;
}
.pop_body {
	width: 100%;
	padding: 70px 0;
	background: url(../img/portfolio/bg02.jpg) no-repeat center center;
	background-size: cover;
}
.pop_body table {
	font-size: 14px;
	margin: 0 auto;
	width: 100%;
}
.pop_body table th {
	text-align: right;
	padding: 12px 30px;
	width: 40%;
	vertical-align: top;
	box-sizing: border-box;
}
.pop_body table td {
	padding: 12px 30px;
	vertical-align: top;
	width: 60%;
	box-sizing: border-box;
}
.pop_body table td .pop_body_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pop_body table td .pop_body_list li {
  padding-left: 1em;
  text-indent: -1em;
}
.pop_close {
  position: fixed;
	right: 20px;
	top: 20px;
  padding: 0;
	cursor: pointer;
	width: 36px;
	height: 36px;
	z-index: 100;
	display: none;
}
.pop_close.is-active {
	display: block;
}
.pop_close:after {
	display: block;
  content: "";
	right: 17px;
  width: 3px;
  height: 36px;
  background: #fff;
	position: absolute;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.pop_close:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 36px;
  height: 3px;
  margin-top: -1px;
  background: #fff;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

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

	.tabs > .tab a {
	    font-size: 10px;
	    padding: 10px 0 7px;
	}
	.panels .desc {
    font-size: 13px;
    line-height: 22px;
    padding: 30px 20px 13px;
	}
	.portfolio {
		padding: 0 0 20px;
	}
	.pop_header {
		height: 180px;
	}
	.pop_header .logo_area {
    bottom: 15px;
    left: 20%;
    position: absolute;
    width: 60%;
	}
	.pop_close {
    right: 10px;
    top: 10px;
	}
	.pop_desc {
    margin: 25px 20px;
	}
	.pop_desc p {
    font-size: 13px;
    line-height: 24px;
		text-align: left;
	}
	.pop_body {
    padding: 20px 0;
	}
	.pop_body table {
    font-size: 12px;
		margin: 0 auto;
	}
	.pop_body table th {
    padding: 5px 0;
    width: 90px;
	}
	.pop_body table td {
    padding: 5px 15px 5px 10px;
		word-break: break-all;
	}

}