@charset "UTF-8";


/*-----------------------------
contents　
-----------------------------*/

/*** three-thumbnail-container ***/

.three-thumbnail-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.three-thumbnail-container  article {
	background-position: center center;
    background-size: cover;
    text-align: center;
    height: auto;
    width: 25%;
    position: relative;
}

.three-thumbnail-container img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	transform: scale(1);
	transition-duration: 0.75s;
	vertical-align: middle;
	height: 700px;
	width: auto;
	object-fit: cover;
}

.three-thumbnail-container article a div.center-text {
	padding-top: 90px;
	color: #fff;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
	height: 700px;
    position: absolute;
	top: 0;
}
.three-thumbnail-container article a div.move {
	display: flex;
	justify-content: center;
	align-items: center;
    width: 100%;
    height: 100%;
	padding-bottom: 150px;
    left: 0;
    z-index: 99;
    opacity: 0;
    transition-property: opacity;
    transition: 0.3s;
}
.three-thumbnail-container article a div.move:hover {
	padding-bottom: 0px;
    opacity: 1;
    transition-property: opacity;
    transition: 0.3s;
}
.three-thumbnail-container article a div.move h2 {
	font-size: 32px;
}

.three-thumbnail-container article a div.move h2,
.three-thumbnail-container article a div.move p {
	color: #fff;
}
.three-thumbnail-container article a div.move h2::before {
	background: #fff;
}

.three-thumbnail-container article a div.move p {
    position: absolute;
    padding-top: 12%;
}



@media screen and (max-width: 1680px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1100px){
}
@media screen and (max-width: 1000px){
}
@media screen and (max-width: 900px){
}
@media screen and (max-width: 768px){
	.three-thumbnail-container {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.three-thumbnail-container  article {
		background-position: center center;
		background-size: cover;
		text-align: center;
		height: auto;
		width: 100%;
		position: relative;
	}

	.three-thumbnail-container img {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
		transform: scale(1);
		transition-duration: 0.75s;
		vertical-align: middle;
		height: 400px;
		width: auto;
		object-fit: cover;
		opacity: 0.7;
	}

	.three-thumbnail-container article a div.center-text {
		padding-top: 90px;
		color: #fff;
		box-sizing: border-box;
		padding: 0;
		width: 100%;
		height: 400px;
		position: absolute;
		top: 0;
	}
	.three-thumbnail-container article a div.move {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding-bottom: 150px;
		left: 0;
		z-index: 99;
		opacity: 0;
		transition-property: opacity;
		transition: 0.3s;
	}
	.three-thumbnail-container article a div.move:hover {
		padding-bottom: 0px;
		opacity: 1;
		transition-property: opacity;
		transition: 0.3s;
	}

	.three-thumbnail-container article a div.move h2,
	.three-thumbnail-container article a div.move p {
		color: #fff;
	}
	.three-thumbnail-container article a div.move h2::before {
		background: #fff;
	}

	.three-thumbnail-container article a div.move p {
		position: absolute;
		padding-top: 12%;
	}
}
@media screen and (max-width: 680px){
}





/*** Two thumbnails and text containers ***/

#two-thumtextcontainers {
  background-color: #;
  padding: 50px 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.two-thumtextcontainers-left {
  flex: 1;
}

.two-thumtextcontainers-left img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.two-thumtextcontainers-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
}

.two-thumtextcontainers-right h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 2.5rem;
}

.two-thumtextcontainers-right p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.8;
}


@media screen and (max-width: 768px){
	#two-thumtextcontainers {
		display: block;
		padding: 0;
		
	}
	.two-thumtextcontainers-right{
		padding: 20px;
	}
	.three-thumbnail-container article a div.move,
	.three-thumbnail-container article a div.move.manually {
		padding-bottom: 0px;
		opacity: 1;
		transition-property: opacity;
		transition: 0.3s;
	}
}