/* 00. COMMON SETTING
-------------------------------------------------------------------- */

/* 01. COMPONENT
-------------------------------------------------------------------- */

.c-topSection,
.c-topSection--solution,
.c-topSection--product,
.c-topSection--casestudy,
.c-topSection--news {
	position: relative;
	padding: 8rem 0;
}

.c-topSection__title {
	position: relative;
	padding-top: 3.5rem;
	margin-bottom: 6.4rem;
	font-size: 3.6rem;
	font-weight: 500;
}

.c-topSection__title--en {
	display: inline-block;
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	-webkit-transform: translateX(-8%) translateY(-62%);
	transform: translateX(-8%) translateY(-62%);
	font-family: "Lato", sans-serif;
	font-size: 7.2rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0;
	color: #ddd;
}

.c-topSection__title--en::first-letter {
	color: #cc0000;
}

.c-topSection__title--ja {
	display: inline-block;
	font-size: 3.6rem;
	font-weight: 500;
}

.c-topSection--solution .c-topSection__title {
	text-align: center;
}

.c-topSection--product .c-topSection__title {
	max-width: 87.5%;
	padding-bottom: 2.4rem;
	text-align: right;
	border-bottom: 1px solid #cc0000;
}

.c-topSection--product .c-topSection__title--en {
	right: 0;
	left: auto;
	-webkit-transform: translateX(-36%) translateY(-62%);
	transform: translateX(-36%) translateY(-62%);
	color: #fff;
}

.c-topSection--casestudy {
	margin-top: 8rem;
	background: #f7f7f7;
}

.c-topSection--casestudy .c-topSection__title {
	max-width: 87.5%;
	margin: 0 0 6.4rem auto;
	padding-bottom: 2.4rem;
	text-align: left;
	border-bottom: 1px solid #cc0000;
}

.c-topSection--casestudy .c-topSection__title--en {
	left: 0;
	-webkit-transform: translateY(-62%);
	transform: translateY(-62%);
	z-index: 0;
}

.c-topSection--casestudy .c-topSection__title--ja {
	-webkit-transform: translateX(120%);
	transform: translateX(120%);
}

.c-topSection--news .c-topSection__title {
	text-align: center;
}

.c-topSection--news .c-topSection__title--en {
	-webkit-transform: translateX(-5%) translateY(-62%);
	transform: translateX(-5%) translateY(-62%);
}

/* 02. KV
-------------------------------------------------------------------- */

.p-kv {
	position: relative;
}

.p-kv__list--sp {
	display: none;
}

.p-kv__img {
	width: 100%;
}

.p-kv__pager {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	right: 0;
	bottom: 24px;
	left: 0;
	margin: 0 auto;
}

.p-kv__pager li {
	margin: 0 8px;
}

.p-kv__pager button {
	width: 16px;
	height: 16px;
	color: transparent;
	line-height: 0;
	font-size: 0;
}

.p-kv__pager button::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid #f0f0f0;
	border-radius: 50%;
}

.p-kv__pager .slick-active button::before {
	border: none;
	background: #cc0000;
}

/* 03. MAIN
-------------------------------------------------------------------- */

.p-solution__list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.p-solution__item {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 480px;
	flex: 0 1 480px;
}

.p-solution__transition {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	height: 297px;
	overflow: hidden;
	color: #fff;
	-webkit-transition: .5s;
	transition: .5s;
}

.p-solution__transition::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: #333333;  /*#0000cc;*/ /*#cc0000;*/
	opacity: 0;
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
}

.p-solution__transition.is-hover:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.p-solution__transition.is-hover:hover::before {
	width: 100%;
	opacity: 0.5;
}

.p-solution__title {
	font-size: 2.4rem;
	font-weight: 500;
	z-index: 1;
}

.p-solution__text {
	margin-top: 2.4rem;
	font-size: 1.6rem;
	z-index: 1;
}

.p-solution__img {
	position: absolute;
	top: -100%;
	right: -100%;
	left: -100%;
	bottom: -100%;
	min-width: 100%;
	min-height: 100%;
	max-width: inherit;
	margin: auto;
	z-index: -1;
	-webkit-transition: .5s;
	transition: .5s;
}

.p-product::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 83%;
	background: #ededed;
	z-index: -1;
}

.p-product__list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 2% 0;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.p-product__item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 23.33333%;
	flex: 0 1 23.33333%;
	background: #fff;
}

.p-product__transition {
	position: relative;
	display: block;
}

.p-product__transition::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background: #fff;
	-webkit-transition: .3s;
	transition: .3s;
}

.p-product__transition.is-hover:hover .p-product__img {
	-webkit-transform: scale(1.05) translateY(-2%);
	transform: scale(1.05) translateY(-2%);
}

.p-product__transition.is-hover:hover .p-product__title {
	color: #cc0000;
}

.p-product__transition.is-hover:hover::after {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.p-product__img {
	-webkit-transition: .3s;
	transition: .3s;
}

.p-product__img img {
	width: 100%;
}

.p-product__textArea {
	padding: 2.4rem 2.4rem 2.05rem;
}

.p-product__title {
	font-size: 1.8rem;
	font-weight: 600;
	-webkit-transition: .3s;
	transition: .3s;
}

.p-product__text {
	margin-top: 2.05rem;
	line-height: 1.5;
}

.p-productBtnArea {
	margin-bottom: 0;
}

.p-casestudy__list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
/*	overflow-x: hidden; */
overflow-x: visible;
margin-left: 1rem;
margin-right: 1rem;
}

.p-casestudy__item {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0%;
	flex: 1 1 0%;
}

.p-casestudy__item:nth-child(2) {
	margin: 0% 1.5% 0 5%;
}

.p-casestudy__item:last-child {
	margin-left: 8%;
}

.p-casestudy__transition.is-hover:hover .p-casestudy__img {
	opacity: 1;
}

.p-casestudy__transition.is-hover:hover .p-casestudy__title,
.p-casestudy__transition.is-hover:hover .p-casestudy__company {
	color: #cc0000;
}

.p-casestudy__transition.is-hover:hover .p-casestudy__textArea {
	background-color: white;
}

.p-casestudy__transition.is-touch .p-casestudy__img {
	opacity: 1;
}

.p-casestudy__transition.is-touch .p-casestudy__textArea {
	background-color: rgba(255, 255, 255, 0.7);
}

.p-casestudy__img {
/*
	-webkit-transform: skewX(-10deg);
	transform: skewX(-10deg);
*/
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
	opacity: 0.6;
	-webkit-transition: .5s ease-out;
	transition: .5s ease-out;
}

.p-casestudy__item:first-child .p-casestudy__imgWrapper {
	-webkit-transform: translateX(-14%);
	transform: translateX(-14%);
}

.p-casestudy__imgMask {
	position: relative;
/*
	overflow: hidden;
*/
	overflow: visible;
}

.p-casestudy__img img {
	min-width: 117.6%;
	/*
　　　　　-webkit-transform: skewX(10deg);
	transform: skewX(10deg);
　　　　　*/
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
}

.p-casestudy__textArea {
	position: absolute;
/*	max-width: 332px; */
 	max-width: 250px;
	padding: 2.4rem 2.4rem 2.05rem;
	border: 1px solid #cc0000;
	background-color: rgba(255, 255, 255, 0.4);
	-webkit-transition: .5s ease-out;
	transition: .5s ease-out;
}

.p-casestudy__item:first-child .p-casestudy__textArea,
.p-casestudy__item:nth-child(3) .p-casestudy__textArea {
	right: 0;
	bottom: 16px;
}

.p-casestudy__item:nth-child(2) .p-casestudy__textArea,
.p-casestudy__item:last-child .p-casestudy__textArea {
	left: 0;
	top: 16px;
}

.p-casestudy__item:first-child .p-casestudy__textArea {
	-webkit-transform: translateX(20%);
	transform: translateX(20%);
}

.p-casestudy__item:nth-child(3) .p-casestudy__textArea {
	-webkit-transform: translateX(37%);
	transform: translateX(37%);
}

.p-casestudy__item:nth-child(2) .p-casestudy__textArea {
	-webkit-transform: translateX(-20%);
	transform: translateX(-20%);
}

.p-casestudy__item:last-child .p-casestudy__textArea {
	-webkit-transform: translateX(-20%);
	transform: translateX(-20%);
}

.p-casestudy__title {
	font-size: 1.8rem;
	font-weight: 600;
	-webkit-transition: .3s;
	transition: .3s;
}

.p-casestudy__company {
	margin-top: 0.8rem;
	font-size: 1.2rem;
	font-weight: 600;
	-webkit-transition: .3s;
	transition: .3s;
}

.p-casestudy__text {
	margin-top: 1.25rem;
	line-height: 1.5;
}

.p-casestudyBtnArea {
	margin-bottom: 0;
}

.p-news__list {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 2% 0;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	display: table;
}

.p-news__item {
	display: table-row;
}

.p-news__item > * {
	border-top: 1px solid #ccc;
}

.p-news__item:last-child > * {
	border-bottom: 1px solid #ccc;
}

.p-news__date {
	display: table-cell;
	word-break: keep-all;
	vertical-align: baseline;
}

.p-news__category {
	display: table-cell;
	padding-left: 4.8rem;
	word-break: keep-all;
	vertical-align: baseline;
}

.p-news__title {
	display: table-cell;
	width: 100%;
	padding-left: 4.8rem;
	vertical-align: baseline;
	line-height: 1.5;
}

.p-news__transition {
	display: block;
	padding: 1.25rem 0;
	-webkit-transition: .3s;
	transition: .3s;
}

.p-news__transition.is-hover:hover {
	color: #cc0000;
}

.p-newsBtn {
	padding-right: 1.6rem;
}

.p-newsBtnArea {
	margin-bottom: 0;
}

.p-newsBtn__icon {
	margin-right: 1.6rem;
	margin-left: 0;
}

/* 07. MEDIA QUERIES
-------------------------------------------------------------------- */

@media screen and (max-width: 1024px) and (min-width: 768px) {

.p-product__item {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 47.77778%;
	flex: 1 1 47.77778%;
}

.p-product__item:nth-child(2n) {
	margin-left: 3.33333%;
}

.p-product__item:not(:nth-child(n+7)) {
	margin-bottom: 3.33333%;
}

}

@media screen and (min-width: 1025px) {

.p-product__item:not(:nth-child(n+5)) {
	margin-bottom: 2.22222%;
}

.p-product__item:not(:nth-child(4n)) {
	margin-right: 2.22222%;
}

}

@media screen and (max-width: 1439px) and (min-width: 1025px) {

.p-casestudy__item:first-child .p-casestudy__textArea,
.p-casestudy__item:nth-child(3) .p-casestudy__textArea {
	bottom: 0;
}

.p-casestudy__item:nth-child(2) .p-casestudy__textArea,
.p-casestudy__item:last-child .p-casestudy__textArea {
	top: 0;
}

}

@media screen and (max-width: 1439px) {

.p-solution__list {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.p-solution__item {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.p-product__title {
	font-size: 1.6rem;
}

.p-casestudy__item {
	height: 400px;
}

.p-casestudy__imgWrapper {
	-webkit-transform: translateY(90px);
	transform: translateY(90px);
}

.p-casestudy__item:first-child .p-casestudy__imgWrapper {
	-webkit-transform: translateX(-14%) translateY(90px);
	transform: translateX(-14%) translateY(90px);
}

.p-casestudy__title {
	font-size: 1.6rem;
}

}

@media screen and (max-width: 1024px) {

.p-product__list {
	padding: 0 16px 0;
}

.p-casestudy__list {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.p-casestudy__item {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
}

.p-casestudy__item:nth-child(2) {
	margin: 0;
}

.p-casestudy__item:last-child {
	margin: 0;
}

.p-casestudy__item {
	height: auto;
}

.p-casestudy__img {
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__item:first-child .p-casestudy__imgWrapper {
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__imgWrapper {
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__item:first-child .p-casestudy__imgWrapper {
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__img img {
	min-width: 100%;
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__item:first-child .p-casestudy__textArea {
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__item:nth-child(3) .p-casestudy__textArea {
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__item:nth-child(2) .p-casestudy__textArea {
	-webkit-transform: none;
	transform: none;
}

.p-casestudy__item:last-child .p-casestudy__textArea {
	-webkit-transform: none;
	transform: none;
}

.p-news__list {
	padding: 0 16px 0;
}

}

@media screen and (max-width: 767px) {

.c-topSection,
.c-topSection--solution,
.c-topSection--product,
.c-topSection--casestudy,
.c-topSection--news {
	padding: 4.8rem 0;
}

.c-topSection__title {
	padding-top: 0;
	margin-bottom: 3.6rem;
}

.c-topSection__title--en {
	display: block;
	position: static;
	-webkit-transform: none;
	transform: none;
	font-size: 3.2rem;
	margin-bottom: 0.8rem;
}

.c-topSection--product .c-topSection__title--en {
	-webkit-transform: none;
	transform: none;
	color: #f7f7f7;
}

.c-topSection--casestudy {
	margin-top: 4.8rem;
}

.c-topSection--casestudy .c-topSection__title {
	margin-bottom: 3.6rem;
}

.c-topSection--casestudy .c-topSection__title--en {
	-webkit-transform: none;
	transform: none;
}

.c-topSection--casestudy .c-topSection__title--ja {
	-webkit-transform: none;
	transform: none;
}

.c-topSection--news .c-topSection__title--en {
	-webkit-transform: none;
	transform: none;
}

.p-kv__list {
	display: none;
}

.p-kv__list--sp {
	display: block;
}

.p-solution__list {
	display: block;
}

.p-solution__transition {
	height: 180px;
}

.p-solution__text {
	margin-top: 0.9rem;
	font-size: 1.4rem;
}

.p-product__list {
	display: block;
}

.p-product__item {
	margin-right: 1.6rem;
	margin-left: 1.6rem;
}

.p-product__item:not(:last-child) {
	margin-bottom: 3.2rem;
}

.p-casestudy__list {
	display: block;
}

.p-casestudy__item:nth-child(2) {
	margin-bottom: 3.2rem;
}

.p-casestudy__item {
	margin-bottom: 3.2rem;
}

.p-casestudy__textArea {
	padding: 1.6rem 1.6rem 1.25rem;
}

.p-news__list {
	display: block;
}

.p-news__item {
	display: block;
	padding-top: 1.25rem;
	border-top: 1px solid #ccc;
}

.p-news__item:last-child {
	border-bottom: 1px solid #ccc;
}

.p-news__item > * {
	border: none;
}

.p-news__item:last-child > * {
	border: none;
}

.p-news__date {
	display: block;
}

.p-news__category {
	display: block;
	padding-left: 0;
	margin-top: 0.8rem;
}

.p-news__title {
	display: block;
	padding-left: 0;
}

}

@media screen and (max-width: 479px) {

.c-topSection__title {
	font-size: 2.4rem;
}

.c-topSection__title--en {
	font-size: 1.8rem;
}

.c-topSection__title--ja {
	font-size: 2.4rem;
}

.p-solution__title {
	font-size: 1.8rem;
}

.p-solution__text {
	font-size: 1.3rem;
}

.p-product__item {
	margin-right: 0;
	margin-left: 0;
}

.p-product__text {
	margin-top: 1.25rem;
}

.p-casestudy__list {
	overflow-x: visible;
}

.p-casestudy__textArea {
	max-width: 284px;
}

.p-casestudy__item:first-child .p-casestudy__textArea,
.p-casestudy__item:nth-child(3) .p-casestudy__textArea {
	bottom: -16px;
}

.p-casestudy__item:nth-child(2) .p-casestudy__textArea,
.p-casestudy__item:last-child .p-casestudy__textArea {
	top: auto;
	bottom: -16px;
}

}


