@charset "Shift_JIS";

/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. 事例紹介

******************************************************************************* */

/* ==

　01. 事例紹介

=============================================================================== */
.mv01 {
	position: relative;
	padding: 0 4% 60px;
}
.mv01::before {
	content: "";
	width: calc(100% - 60px);
	height: 75%;
	background-color: #F0F2F5;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.mv01_in {
	padding: 0 4% 0 5%;
	display: flex;
	justify-content: space-between;
}
.mv01_title {
	width: 14%;
	display: flex;
	justify-content: flex-end;
}
.mv01_title h2 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 36px;
  font-weight: 700;
	margin-top: 60px;
	line-height: 1.6;
	letter-spacing: 9px;
}
.mv01_title h2 span {
	display: inline-block;
}
.mv01_title h2 span:last-child {
	margin-top: 200px;
}
.mv01_slide {
	width: 86%;
}
.mv01 .container {
  margin: 0 auto;
  width: 100%;
}
.mv01 .slider {
  margin-bottom: 30px;
}
.mv01 .slider .slick-img p {
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.mv01 .slider .slick-img p span {
  font-size: 12px;
  color: #999;
}
.mv01 img {
  height: auto;
  width: 100%;
}
.mv01 .thumbnail .slick-track {
  transform: unset !important;
  display: flex;
}
.mv01 .thumbnail .slick-slide {
	width: 48px;
	margin-right: 8px;
	float: none;
}
.mv01 .thumbnail-img {
  opacity: 0.3;
  transition: opacity .3s linear;
}
.mv01 .thumbnail .slick-track {
	margin: 0;
}
.mv01 .thumbnail .slick-current {
	position: relative;
}
.mv01 .thumbnail .slick-current .thumbnail-img {
  opacity: 1;
}
.mv01 .thumbnail .slick-current::after {
	content: "";
	display: block;
	background-color: #0080C8;
	width: 100%;
	height: 2px;
}
.mv01 .slick-arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 64px;
	height: 32px;
	border: none;
	cursor: pointer;
	font-size: 0;
	background-color: #000;
}
.mv01 .slick-arrow:hover {
	opacity: 0.8;
}
.mv01 .slick-arrow::after {
	content: "";
	width: 24px;
	height: 6px;
	background: #000 url(/common/svg/ico_arw02.svg) no-repeat center center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -3px 0 0 -12px; 
}
.mv01 .slick-prev {
	right: 64px;
}
.mv01 .slick-prev::after {
	transform: rotateY(180deg);
}
.lead {
	padding: 50px 0 60px 0;
}
.lead_in {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
.lead_txt {
	font-size: 16px;
}
.project_nav {
	padding: 40px 0 70px;
}
.project_nav_in {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
}
.project_nav_in-v1 {
	display: block;
}
.project_nav .project_nav_title {
	width: 25%;
}
.project_nav .project_nav_title h2 {
	font-size: 20px;
	font-weight: bold;
}
.project_nav_in-v1 h2 {
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 20px;
}
.project_nav_in-v1 h2 span {
	font-size: 40px;
	display: inline-block;
	margin-right: 20px;
}
.project_nav .project_nav_list {
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 16px;
}
.project_nav .project_nav_list::after {
	content: "";
	width: 49.5%;
	display: block;
}
.project_nav .project_nav_list li {
	width: 20%;
	margin-bottom: 10px;
}
.project_nav_in-v1 .project_nav_list li {
	width: 75px;
}
.project_nav .project_nav_list li a {
	position: relative;
	color: #0080C8;
}
.project_nav .project_nav_list li a::after {
	content: "";
	width: 8px;
	height: 7px;
	display: inline-block;
	background: url(/common/svg/ico_arw05.svg) no-repeat center center;
	background-size: cover;
	margin: 0 0 3px 10px;
}
.project_nav .project_nav_list li a::before {
	content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #0080C8;
  transition: width .2s;
}
.project_nav .project_nav_list li a:hover::before {
	width: 100%;
}
.project_list {
	display: flex;
	flex-wrap: wrap;
}
.project_list .project_item {
	position: relative;
	display: block;
	width: 25%;
	transition: opacity .2s;
	text-align: center;
}
.project_list .project_item span {
	display: block;
	overflow: hidden;
}
.project_list .project_item img {
	transition: all .3s;
}
.project_list .project_item:hover img {
	transform: scale(1.1);
	opacity: 0.7;
}
.project_list .project_item-new::before {
	content: "NEW";
	background-color: #D8005E;
	display: block;
	padding: 2px 8px;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 16px;
}
.project_list .project_item img {
	width: 100%;
	height: auto;
}
.project_list .project_item div {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	padding: 10px 0 0 0;
	text-align: center;
	color: #0080C8;
	font-size: 12px;
}
.project_list .project_item div span {
	font-size: 16px;
	margin-left: 5px;
}
.project_list .project_item div::before {
	content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #0080C8;
  transition: width .2s;
}
.project_list .project_item:hover div::before {
	width: 100%;
}
.project_case {
	width: auto;
	max-width: 1200px;
	margin: 0 auto 50px;
	padding: 0 20px;
}
.project_case_head {
	display: flex;
	align-items: center;
	height: 64px;
}
.project_case_title {
	background-color: #000;
	color: #fff;
	width: 154px;
	height: calc(100% - 10px);
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin-right: 50px;
	padding-top: 10px;
	font-size: 12px;
}
.project_case_title span {
	font-size: 24px;
	display: inline-block;
	margin-left: 10px;
}
.project_case_desc {
	font-size: 16px;
}
.project_case_desc span {
	display: inline-block;
	margin-left: 50px;
	font-size: 12px;
	color: #999;
}
.project_case_desc span span {
	margin-right: 30px;
}
.project_case_back {
	margin-left: auto;
}
.project_case_back a,
.project_relation_back {
	position: relative;
	font-size: 16px;
	color: #0080C8;
}
.project_case_back a::before,
.project_relation_back::before {
	content: "";
	width: 14px;
	height: 14px;
	background: url(/common/svg/ico_back01.svg) no-repeat center center;
	background-size: 14px;
	display: inline-block;
	margin-right: 10px;
}
.project_case_back a::after {
	content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #0080C8;
  transition: width .2s;
}
.project_case_back a:hover::after {
	width: 100%;
}
.project_case_pic {
	position: relative;
}
.project_case_pic img {
	width: 100%;
	height: auto;
}
.project_case_pic span {
	text-align: right;
	display: block;
	padding: 0 0 10px;
	font-size: 14px;
}
.project_case_pic span.project_case_copy {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 12px;
	color: #999;
}
.project_case_pic-v1 {
	max-width: 800px;
	margin: 0 auto;
}
.project_relation {
	max-width: 1240px;
	margin: 0 auto 50px;
	padding: 50px 20px;
	display: flex;
	justify-content: space-between;
}
.project_relation-v1::before {
	content: "";
	display: block;
	width: 140px;
}
.project_relation-v2::after {
	content: "";
	display: block;
	width: 140px;
}
.project_relation a {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 18px;
	color: #0080C8;
}
.project_relation_prev::before,
.project_relation_next::after {
	content: "";
	width: 24px;
	height: 6px;
	background: url(/common/svg/ico_arw01.svg) no-repeat center center;
	background-size: 24px 6px;
	display: inline-block;
}
.project_relation_prev::before {
	transform: rotateY(180deg);
	margin-right: 10px;
}
.project_relation_next::after {
	margin-left: 10px;
}
.project_relation_prev::after,
.project_relation_back::after,
.project_relation_next::before {
	content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #0080C8;
  transition: width .2s;
}
.project_relation_prev:hover::after,
.project_relation_back:hover::after,
.project_relation_next:hover::before {
	width: 100%;
}
.projectNav {
	background-color: #F0F2F5;
}
.relation_in.relation_in-btn {
	border-top: 1px solid #DEDEE0;
}