@charset "utf-8";


/* page-case */
.page-case {
padding-top: 50px;
padding-bottom: 100px;
}
.page-case-block {
margin-bottom: 50px;
text-align: center;
}
.page-case-item {
font-family: "Arial", sans-serif;
font-size: 42px;
font-weight: 900;
}
.page-case-head {
font-size: 14px;
}

.grid-container{
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.grid-item {
background: #fff;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-rows: 250px 50px 1fr;
}
.grid-item h2{
font-size: 16px;
line-height: 1.6;
margin-bottom: 0;
}
.grid-item span{
display: block;
font-size: 14px;
color: #666;
margin-top: -10px;
}
.case-thumbnail {
height: 50%;
}
.case-thumbnail img {
width: 100%;
height: 240px;
object-fit: cover;
}
.effect-color {
	overflow: hidden;
	position: relative;
}
.effect-color::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: .3s;
}
.effect-color img {
	transition: .3s;
}
a:hover .effect-color::before {
background: linear-gradient(126deg, rgba(0,106,219,0.7) 0%, rgba(0,233,255,0.7) 90%); 
}
a:hover .effect-color img {
	transform: scale(1.05);
}
.effect-color .material-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
font-size: 80px;
z-index: 20;
  }

/* single-case */

.single-case {
padding-top: 80px;
padding-bottom: 100px;
}
.single-case-main {
width: 100%;
}
.single-case-content {
width: 60%;
margin: 0 auto;
padding-top: 40px;
}
.single-case-image {
height: 50%;
padding-top: 20px;
margin-bottom: 20px;
}
.single-case-image img{
width: 100%;
height: 400px;
object-fit: cover;
}
.fit-up {
object-position: 100% 0;
}
.single-case h1{
font-size: 34px;
margin-bottom: 20px;
}
.single-case p {
line-height: 1.6;
margin-bottom: 20px;
}
.case-meta {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #999;
}
.case-meta span {
display: block;
color: #666;
font-size: 15px;
line-height: 1.6;
}
.single-case-box {
max-width: 500px;
margin: 0 auto;
margin-top: 40px;
}
.single-case-box img {
max-width: 500px;
margin-bottom: 40px;
}
/* -----------------------------------------------------------------------------

	レスポンシブ

----------------------------------------------------------------------------- */

/* Mobile yoko
---------------------------------------------*/

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

.single-case-content {
width: 80%;
margin: 0 auto;
}
.single-case-box img {
max-width: 100%;
}

}

/* Mobile tate
---------------------------------------------*/

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

.grid-container{
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.single-case-content {
width: 100%;
margin: 0 auto;
}


}